.puzzle-studio[data-mystery="cipher"]{width:min(850px,calc(100% - 32px));overflow-x:hidden}
.puzzle-studio[data-mystery="cipher"] .puzzle-workspace{padding-block:28px}
.puzzle-studio[data-mystery="cipher"] .puzzle-workbench-footer{display:none}
.cipher-disc-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);gap:30px;align-items:center}
.cipher-disc-evidence{min-width:0;display:grid;gap:18px}
.cipher-disc-layout .cipher-clue{
  position:relative;isolation:isolate;box-sizing:border-box;min-height:114px;margin:0;padding:20px 22px;
  color:#493827;filter:drop-shadow(0 5px 5px #0004);transform:rotate(-2deg);
  font:italic 21px/1.48 "Segoe Print","Bradley Hand",Georgia,serif
}
.cipher-disc-layout .cipher-clue::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  clip-path:polygon(.3% 1%,12% .6%,35% 1%,60% 0,96% .5%,100% 11%,99.5% 98%,86% 99%,69% 98.7%,48% 100%,34% 99%,16% 99.5%,0 98%);
  background:
    linear-gradient(96deg,transparent 47.8%,#6d4c2d20 49.3%,#fff5d378 49.8%,transparent 51%),
    radial-gradient(ellipse at 15% 98%,#8c5d2b24,transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.77' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h140v140H0z' filter='url(%23grain)' opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(125deg,#f0e4c9,#e6d7b7 72%,#e9d9b8);
  background-blend-mode:normal,normal,multiply,normal
}
.cipher-disc-layout .cipher-clue::after{
  content:"";position:absolute;right:0;top:0;width:4%;height:12%;pointer-events:none;
  clip-path:polygon(0 0,100% 100%,0 86%);background:linear-gradient(135deg,#f9ebca,#c1a77d)
}
.cipher-disc-layout .cipher-clue p{margin:0;font:inherit}
.cipher-codetext{
  padding:18px 12px;margin:0;transform:rotate(.8deg);background:#e3d5b8;color:#40382d;
  text-align:center;font:500 23px/1.3 'Courier New',monospace;letter-spacing:.14em;word-spacing:.4em;
  user-select:none;box-shadow:0 5px 9px #0003
}
.cipher-answer-row{display:flex;gap:10px;align-items:stretch;min-width:0}
.cipher-answer-row>input{
  box-sizing:border-box;width:100%;min-width:0;flex:1;border:1px solid #6c6154;
  border-radius:6px;background:#191b1e;color:#f2ede5;padding:13px 12px;
  font:17px/1.3 'Courier New',monospace;text-transform:uppercase
}
.cipher-answer-row>input::placeholder{font:16px var(--font-sans);text-transform:none;color:#b6aea2}
.cipher-answer-row>.btn{flex:none;width:auto;justify-content:center;min-width:84px;padding-inline:16px}
.cipher-disc-evidence>.puzzle-hint{max-width:none;margin-top:-8px}
.cipher-disc-evidence>.puzzle-hint summary{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 0;list-style:none}
.cipher-disc-evidence>.puzzle-hint summary::-webkit-details-marker{display:none}
.cipher-disc-evidence>.puzzle-hint summary::after{
  content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1px 1px 0;
  transform:translateY(-2px) rotate(45deg)
}
.cipher-disc-evidence>.puzzle-hint[open] summary::after{transform:translateY(1px) rotate(225deg)}
.cipher-disc-evidence>.puzzle-hint summary:hover{color:#f2e6d4}
.cipher-disc-evidence>.puzzle-hint p{margin-top:5px}
.cipher-wheel-device{min-width:0;display:grid;justify-items:center;padding:8px 0;color:#e9dfce}
.cipher-wheel-device .proposal-disc{position:relative;width:100%;max-width:296px;aspect-ratio:1;user-select:none}
.cipher-wheel-device .disc-face,.cipher-wheel-device .disc-frame svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.cipher-wheel-device .disc-face{overflow:hidden;filter:drop-shadow(0 8px 10px #0003)}
.cipher-wheel-device .disc-rotate,.cipher-wheel-device .disc-frame{position:absolute;touch-action:none;user-select:none;background:transparent;border:0;padding:0;cursor:grab}
.cipher-wheel-device .disc-rotate:active,.cipher-wheel-device .disc-frame:active{cursor:grabbing}
.cipher-wheel-device .disc-rotate{inset:15.55%;border-radius:50%}
/* The frame extends above the rim, so its pivot is below the button at the center of the dial. */
.cipher-wheel-device .disc-frame{
  width:15.5556%;height:31.1111%;top:-3.0556%;left:42.2222%;
  transform-origin:50% 170.5357%;border-radius:8px
}
.cipher-wheel-device .disc-frame svg{filter:drop-shadow(0 2px 2px #30201088)}
.cipher-wheel-device .disc-moving{transform-origin:180px 180px}
.cipher-wheel-device .disc-grip{filter:drop-shadow(0 1px 1px #533a2366)}
.cipher-wheel-device .proposal-disc:has(.disc-rotate:is(:hover,:focus-visible)) .disc-grip{filter:brightness(1.12) drop-shadow(0 1px 1px #533a2366)}
.cipher-wheel-device .proposal-disc:not(.is-ring-dragging) .disc-moving,.cipher-wheel-device .proposal-disc:not(.is-frame-dragging) .disc-frame{transition:transform 90ms ease-out}
.cipher-wheel-device .disc-label{font-family:Arial,Helvetica,sans-serif;fill:#443722}
.cipher-wheel-device .disc-number{fill:#efdbc0;font:500 53px 'Courier New',monospace}
.cipher-wheel-device button:focus-visible{outline:2px solid #d7ac73;outline-offset:4px}
@media(max-width:640px){
  .puzzle-studio[data-mystery="cipher"]{width:calc(100% - 20px)}
  .puzzle-studio[data-mystery="cipher"] .puzzle-workspace{padding:20px}
  .cipher-disc-layout{grid-template-columns:minmax(0,1fr);gap:18px}
  .cipher-disc-evidence{display:contents}
  .cipher-clue{order:0}
  .cipher-codetext{order:1;font-size:21px}
  .cipher-wheel-device{order:2}
  .cipher-wheel-device .proposal-disc{max-width:min(270px,calc(100% - 22px))}
  .cipher-answer-row{order:3}
  .cipher-disc-evidence>.puzzle-hint{order:4}
  .cipher-disc-layout .cipher-clue{padding:17px 18px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .cipher-wheel-device .proposal-disc:not(.is-ring-dragging) .disc-moving,
  .cipher-wheel-device .proposal-disc:not(.is-frame-dragging) .disc-frame{transition:none}
}