/* Local game palette; deliberately independent of the website palette. */
.crypto-content {
  --crypto-wood: #86502c; --crypto-wood-dark: #603b24; --crypto-wood-light: #a87546;
  --crypto-paper: #f8e5bd; --crypto-paper-light: #fff3d9; --crypto-border: #bd915d;
  --crypto-ink: #412712; --crypto-muted: #795333; --crypto-given: #d3edb3;
  --crypto-given-ink: #1e581f; --crypto-player: #e3edf1; --crypto-player-ink: #124875;
  --crypto-hint: #ffe0a0; --crypto-hint-ink: #794600; --crypto-selected: #b4761d;
  max-width: 1080px; color: var(--crypto-ink);
}
.crypto-desk { border: 1px solid var(--crypto-wood-dark); border-radius: 20px; padding: 12px; box-shadow: 0 12px 28px #41271225; background: repeating-linear-gradient(2deg,transparent 0 8px,#3e211310 9px,transparent 11px 27px),repeating-linear-gradient(90deg,transparent 0 160px,#4c29192b 161px,transparent 164px 320px),linear-gradient(110deg,var(--crypto-wood-light),var(--crypto-wood),var(--crypto-wood-light)); }
.crypto-heading { text-align: center; padding: 4px 10px; border: 1px solid var(--crypto-border); border-radius: 7px 16px 9px 13px; background: radial-gradient(ellipse at center,var(--crypto-paper-light),var(--crypto-paper)); box-shadow: 0 4px 8px #3d21133b; }
.crypto-logo { display: block; width: 100%; max-width: 340px; height: auto; margin: auto; }
.crypto-heading p { margin: 0; font-size: 12px; font-weight: 600; }
.crypto-levels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0; }
.crypto-content button { min-height: 44px; border: 1px solid var(--crypto-border); color: var(--crypto-ink); border-radius: 9px; background: linear-gradient(var(--crypto-paper-light),var(--crypto-paper)); box-shadow: inset 0 1px 0 #fff9,0 3px 0 var(--crypto-wood-dark),0 4px 7px #3a211321; font-weight: 600; }
.crypto-content button:hover:not(:disabled) { filter: brightness(1.06); }
.crypto-content button:disabled { opacity: 1; cursor: not-allowed; }
.crypto-content button:focus-visible { outline: 3px solid var(--crypto-player-ink); outline-offset: 3px; }
.crypto-levels button { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(var(--level-light),var(--level-bg)); color: var(--level-ink); border-color: var(--level-border); font-size: 17px; padding: 8px 4px; }
.crypto-levels button[data-difficulty="easy"] { --level-light:#dce9b7; --level-bg:#aac488; --level-ink:#2b481b; --level-border:#71954e; }
.crypto-levels button[data-difficulty="medium"] { --level-light:#f3d398; --level-bg:#dfac58; --level-ink:#674110; --level-border:#ae7636; }
.crypto-levels button[data-difficulty="hard"] { --level-light:#d7c2db; --level-bg:#b192be; --level-ink:#4e2d59; --level-border:#83668d; }
.crypto-levels button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff0b3,0 0 14px #ffe696,inset 0 1px 1px #fff8,0 3px 0 var(--crypto-wood-dark); background: linear-gradient(var(--level-light),var(--level-bg)); }
.crypto-levels button[data-difficulty="easy"][aria-pressed="true"] { --level-light:#77bc46; --level-bg:#358225; --level-ink:#fff; }
.crypto-levels button[data-difficulty="medium"][aria-pressed="true"] { --level-light:#ffd26d; --level-bg:#d49428; }
.crypto-levels button[data-difficulty="hard"][aria-pressed="true"] { --level-light:#a478b6; --level-bg:#6e4285; --level-ink:#fff; }
.crypto-parchment { border: 1px solid var(--crypto-border); border-radius: 13px 7px 12px 8px; padding: 10px; background: repeating-linear-gradient(13deg,#93672903 0 2px,transparent 2px 5px),radial-gradient(ellipse at center,var(--crypto-paper-light) 20%,var(--crypto-paper)); box-shadow: inset 0 0 24px #b5813330,0 5px 9px #3d21134a; }
.crypto-category { display: flex; align-items: center; justify-content: center; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid #aa733331; }
.crypto-category>span { color: #b57920; font-size: 27px; }
.crypto-category h2 { margin: 0; font-size: 19px; font-weight: 400; flex: 1; text-align: center; }
.crypto-category h2 strong { font-family: Georgia,serif; font-size: 25px; }
.crypto-category button { padding: 8px; box-shadow: none; background: transparent; }
.crypto-category #sound-toggle { flex-shrink:0; }
.crypto-category #sound-toggle[aria-pressed="true"] { color:var(--crypto-player-ink); }
.crypto-category #sound-toggle:disabled { opacity:.5; }
#crypto-board { display: grid; gap: 8px; margin: 8px 0; }
.crypto-word { display: flex; align-items: center; gap: 8px; }
.crypto-tiles { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; flex: 1; padding-bottom: 0; }
.crypto-tiles .crypto-tile { width: 44px; height: 48px; min-width: 44px; padding: 2px; position: relative; border-radius: 6px; border: 1px solid var(--crypto-border); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; }
.crypto-tile small { font: 11px/14px Arial,sans-serif; color: var(--crypto-muted); }
.crypto-tile b { font-size: 22px; line-height: 24px; min-height: 24px; }
.crypto-tile em { position: absolute; right: 3px; bottom: 1px; font-size: 9px; font-style: normal; }
.crypto-tile[data-kind="given"] { background: linear-gradient(#f4ffe5,var(--crypto-given)); color: var(--crypto-given-ink); border-color: #84b16b; }
.crypto-tile[data-kind="hint"] { background: linear-gradient(#fff4cf,var(--crypto-hint)); color: var(--crypto-hint-ink); border-color: #c38f32; }
.crypto-tile[data-kind="player"] { background: linear-gradient(#f3f9ff,var(--crypto-player)); color: var(--crypto-player-ink); }
.crypto-tile[aria-pressed="true"] { outline: 3px solid var(--crypto-selected); outline-offset: 1px; z-index: 1; }
.crypto-tile[aria-disabled="true"] { cursor: default; }
.crypto-space { width: 14px; }
.crypto-length { flex: 0 0 28px; font-size: 13px; color: var(--crypto-muted); text-align: right; }
#crypto-selection { margin: 0 0 6px; font-size: 11px; line-height: 16px; min-height: 32px; }
.crypto-actions { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 10px; }
.crypto-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 4px; }
#crypto-hint .icon { color: #a96a0c; }
#crypto-status { height: 32px; flex: 0 0 32px; margin: 6px 0 0; font-size: 12px; line-height: 16px; overflow-y: auto; }
.crypto-keyboard { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; margin: 0; }
.crypto-keyboard button { padding: 6px 0; font-size: 18px; min-height: 44px; border-radius: 6px; position: relative; }
.crypto-keyboard button[data-used="true"] { color: var(--crypto-player-ink); background: linear-gradient(#f4fbff,var(--crypto-player)); }
.crypto-keyboard button[data-locked="given"] { color: var(--crypto-given-ink); background: linear-gradient(#f4ffe5,var(--crypto-given)); }
.crypto-keyboard button[data-locked="hint"] { color: var(--crypto-hint-ink); background: linear-gradient(#fff4cf,var(--crypto-hint)); }
.crypto-keyboard button { font-weight:400; }
.crypto-keyboard button[data-used="true"] { font-weight:800; }
.crypto-keyboard button[data-current="true"] { outline:2px solid #124875; outline-offset:-3px; }
.crypto-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 6px; }
.crypto-metrics div { padding: 0 12px; border-right: 1px solid var(--crypto-border); }
.crypto-metrics div:last-child { border: 0; }
.crypto-metrics dt { display: flex; gap: 7px; align-items: center; font-size: 13px; }
.crypto-metrics dt .icon { color: #a46c14; width: 18px; }
.crypto-metrics dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.crypto-secondary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); justify-content: space-between; gap: 6px; margin-top: 0; flex-wrap: wrap; }
.crypto-secondary button { font-size: 11px; padding: 4px; }
.crypto-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; color: #fff2d4; font-size: 12px; padding-top: 0; }
.crypto-completion { text-align: center; margin: 14px 0; padding: 16px; border: 1px solid #c3942d; border-radius: 10px; background: #ffe9aa; animation: crypto-unlocked 650ms ease-out; }
.crypto-completion strong { display: block; font: bold 32px Georgia,serif; color: #704317; }
.crypto-completion span { display: block; margin-top: 5px; }
.crypto-statistics { padding: 18px; }
#crypto-storage-status { font-size: 12px; margin: 0; }
@keyframes crypto-unlocked { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@media(prefers-reduced-motion:reduce) { .crypto-completion { animation: none; } }

/* Keep all game controls in the viewport. Only the terms scroll when needed;
   44px input targets and the shared site header retain their size. */
.crypto-main { padding: 16px; }
.crypto-desk { display: grid; grid-template-columns: minmax(0,1fr) 284px; grid-template-rows: auto minmax(0,1fr); gap: 12px; height: min(640px,calc(100svh - 106px)); min-height: 480px; }
.crypto-heading { grid-column: 1; }
.crypto-levels { grid-column: 2; align-self: center; gap: 8px; }
.crypto-levels button { font-size: 14px; gap: 4px; }
.crypto-levels .icon { width: 16px; height: 16px; }
.crypto-playfield { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.crypto-category { flex-shrink: 0; }
#crypto-board { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 4px; align-content: start; }
.crypto-console { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.crypto-console .crypto-metrics div { padding: 0 5px; }
.crypto-actions { flex-shrink: 0; gap: 6px; }
.crypto-actions button { font-size: 12px; }
.crypto-legend { font-size: 11px; gap: 8px; }
.crypto-statistics .scoreboard, .crypto-statistics .local-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 16px 0; }
.crypto-statistics dt { color: var(--site-stat-muted); font-size: 12px; }
.crypto-statistics dd { margin: 4px 0 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
@media(min-width:700px) and (max-width:999px) { .crypto-desk { height: min(640px,calc(100svh - 90px)); } }
@media(max-width:699px) {
 .crypto-main { padding: 8px 4px; }
 .crypto-desk { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; height: calc(100svh - 74px); min-height: 0; }
 .crypto-heading { padding: 0 4px; flex-shrink: 0; }
 .crypto-logo { width: 230px; }
 .crypto-heading p { display: none; }
 .crypto-levels { width: 100%; gap: 6px; flex-shrink: 0; }
 .crypto-playfield { flex: 1; padding: 4px; }
 .crypto-category { gap: 5px; padding-bottom: 0; }
 .crypto-category h2 { font-size: 12px; }
 .crypto-category h2 strong { font-size: 17px; }
 .crypto-category>span { display: none; }
 .crypto-category button { padding: 6px; }
 #crypto-board { margin: 4px 0; gap: 6px; scrollbar-gutter: auto; }
 .crypto-word { gap: 3px; }
 .crypto-length { flex-basis: 22px; font-size: 11px; }
 .crypto-tiles .crypto-tile { height: 44px; }
 .crypto-tile small { font-size: 10px; line-height: 11px; }
 .crypto-tile b { font-size: 20px; line-height: 23px; min-height: 23px; }
 #crypto-selection { display: none; }
 .crypto-actions { grid-template-columns: 1fr 1fr 1.25fr; gap: 4px; }
 .crypto-actions button { font-size: 11px; padding: 4px 2px; gap: 2px; }
 .crypto-actions .icon { display: none; }
 #crypto-status { margin-top: 3px; }
 .crypto-console { flex-shrink: 0; gap: 6px; }
 .crypto-keyboard { grid-template-columns: repeat(6,minmax(0,1fr)); }
 .crypto-keyboard button { padding: 4px 0; }
 .crypto-metrics { padding: 2px 4px; }
 .crypto-metrics div { display: flex; justify-content: center; align-items: center; gap: 5px; }
 .crypto-metrics dt { font-size: 11px; }
 .crypto-metrics dt .icon { display: none; }
 .crypto-metrics dd { margin: 0; font-size: 16px; }
 .crypto-secondary { flex-wrap: nowrap; }
 .crypto-secondary button { padding: 4px; font-size: 11px; }
 .crypto-legend { display: none; }
}
@media(min-width:375px) and (max-width:699px) { .crypto-keyboard { grid-template-columns:repeat(7,minmax(0,1fr)); } }
@media(min-width:475px) and (max-width:699px) { .crypto-keyboard { grid-template-columns:repeat(9,minmax(0,1fr)); } }

/* A word is always one complete row, including long mobile words. */
.crypto-tiles { display: grid; grid-template-columns: repeat(var(--letter-count),minmax(0,1fr)); width: 100%; max-width: calc(var(--letter-count) * 48px - 4px); flex-wrap: nowrap; }
.crypto-tiles .crypto-tile { width: 100%; min-width: 0; min-height: 0; container-type: inline-size; }
.crypto-tile b { font-size: clamp(12px,70cqw,22px); }
.crypto-tile small { font-size: clamp(8px,33cqw,11px); }
@media(max-width:699px) {
 .crypto-logo { width: 180px; }
 .crypto-category button { min-height: 32px; width: 32px; padding: 4px; }
 .crypto-category .icon { width: 20px; height: 20px; }
 #crypto-board { overflow: visible; gap: 6px; }
 .crypto-tiles { gap: 3px; max-width: calc(var(--letter-count) * 47px - 3px); }
 .crypto-tile b { font-size: clamp(12px,70cqw,20px); }
 .crypto-tile small { font-size: clamp(8px,33cqw,10px); }
 #crypto-status { height: 16px; flex-basis: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Compact phone keyboards leave room for all five words. */
@media(max-width:374px), (max-width:699px) and (max-height:759px) {
 .crypto-desk { gap: 4px; }
 .crypto-keyboard { grid-template-columns: repeat(9,minmax(0,1fr)); gap: 3px; }
 .crypto-keyboard button { font-size: 16px; }
 #crypto-board { gap: 3px; }
 .crypto-tiles .crypto-tile { height: 36px; }
 .crypto-tile b { line-height: 20px; min-height: 20px; }
}
@media(max-width:699px) and (max-height:699px) {
 .crypto-desk { gap: 3px; padding: 4px; }
 .crypto-logo { width: 160px; }
 .crypto-levels button, .crypto-actions button, .crypto-secondary button { min-height: 36px; }
 .crypto-keyboard button { min-height: 36px; }
 .crypto-tiles .crypto-tile { height: 32px; }
 .crypto-category button { min-height: 28px; height: 28px; }
 .crypto-console { gap: 4px; }
}
#crypto-selection { height: 16px; min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Aged surfaces are independent of fitBoard's dimensions. Nine-slice paper
   keeps its worn corners intact as the field changes width and height. */
.crypto-desk {
  /* Natural grain and plank seams; fixed texture scale avoids stretching
     the timber when fitBoard changes the desk's dimensions. */
  background: #86502c url('/assets/games/kryptogramm/wood-planks-v1.webp') repeat center top / 780px auto;
  box-shadow: inset 0 0 24px #32160870,0 12px 28px #41271225;
}
.crypto-heading {
  padding: 0 4px 4px;
  background: none;
  border: 0;
  box-shadow: none;
}
.crypto-logo { max-width: 480px; filter: drop-shadow(0 3px 2px #28120766); }
.crypto-heading p { color: #fff0ce; text-shadow: 0 1px 2px #321608; margin-top: 2px; }
.crypto-parchment { position: relative; isolation: isolate; background: transparent; border-color: transparent; box-shadow: none; }
.crypto-parchment::before {
  content: ''; position: absolute; inset: -3px; z-index: -1;
  border: 14px solid transparent;
  border-image: url('/assets/games/kryptogramm/parchment-v2.webp') 90 fill / 14px / 0 stretch;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #32160850);
}
.crypto-content button {
  background-image:
    radial-gradient(ellipse at 48% 35%,#fff8e87a,transparent 70%),
    url('/assets/games/kryptogramm/parchment-v2.webp');
  background-size: 100% 100%; background-color: #f7dfb1;
  border-color: #9a6737;
  box-shadow: inset 0 1px 1px #fff8,inset 0 -2px 3px #87502055,0 3px 0 #583019,0 4px 6px #27130766;
  text-shadow: 0 1px 0 #fff6;
}
.crypto-tiles .crypto-tile, .crypto-keyboard button {
  border-radius: 5px 7px 5px 6px;
  background-image:
    linear-gradient(var(--aged-tint,#fff2d53b),var(--aged-tint,#fff2d53b)),
    url('/assets/games/kryptogramm/parchment-v2.webp');
  background-size: 100% 100%; background-color:#f7dfb1;
  box-shadow: inset 0 1px 2px #fff9,inset 0 -2px 3px #7c481c50,0 2px 0 #663a1d,0 3px 3px #32160855;
}
.crypto-tile[data-kind="given"], .crypto-keyboard button[data-locked="given"] { --aged-tint:#b0ed9cc9; border-color:#659247; }
.crypto-tile[data-kind="player"], .crypto-keyboard button[data-used="true"] { --aged-tint:#d9edffd9; }
.crypto-tile[data-kind="hint"], .crypto-keyboard button[data-locked="hint"] { --aged-tint:#ffcf75c9; border-color:#bd842c; }
.crypto-keyboard button[data-locked="given"] { --aged-tint:#b0ed9cc9; }
.crypto-tile[data-kind="player"] { color:#104681; }
.crypto-tile small { color:#654829; }
.crypto-keyboard button,
.crypto-keyboard button[data-used="true"],
.crypto-keyboard button[data-locked="given"],
.crypto-keyboard button[data-locked="hint"],
.crypto-keyboard button:disabled { background-color:#f7dfb1; opacity:1; }
.crypto-content button:hover:not(:disabled) {
  background-image:radial-gradient(ellipse at 48% 35%,#fff8e87a,transparent 70%),url('/assets/games/kryptogramm/parchment-v2.webp');
  background-size:100% 100%; background-color:#f7dfb1;
}
.crypto-tiles .crypto-tile:hover:not(:disabled), .crypto-keyboard button:hover:not(:disabled) {
  background-image:linear-gradient(var(--aged-tint,#fff2d53b),var(--aged-tint,#fff2d53b)),url('/assets/games/kryptogramm/parchment-v2.webp');
}
.crypto-levels button, .crypto-levels button[aria-pressed="true"], .crypto-levels button:hover:not(:disabled) {
  background-color:var(--level-bg);
  background-image:linear-gradient(var(--level-light),var(--level-bg)),url('/assets/games/kryptogramm/parchment-v2.webp');
  background-size:100% 100%; background-blend-mode:multiply,normal;
  border-radius:7px 10px 6px 9px;
  box-shadow:inset 0 1px 2px #fff7,inset 0 -3px 5px #48250f65,0 3px 0 #583019,0 5px 6px #27130766;
  text-shadow:0 1px 1px #46210d50;
}
.crypto-levels button[aria-pressed="true"], .crypto-levels button[aria-pressed="true"]:hover:not(:disabled) {
  box-shadow:0 0 0 2px #fff0b3,0 0 14px #ffe696,inset 0 1px 2px #fff7,inset 0 -3px 5px #48250f65,0 3px 0 #583019;
}
.crypto-category button, .crypto-category button:hover:not(:disabled) { background:transparent; border-color:transparent; box-shadow:none; }
.crypto-metrics::before { border-image-width:4px; }
.crypto-tile[aria-pressed="true"] { outline-color:#f2ab28; box-shadow:inset 0 0 0 1px #fff8,0 0 8px #ffbd3b; }
@media(max-width:699px) { .crypto-logo { width:clamp(180px,62vw,290px); } }
@media(max-width:699px) and (max-height:699px) { .crypto-logo { width:180px; } }
@media(max-width:699px) and (max-height:699px) {
 .crypto-tiles .crypto-tile { padding:1px; }
 .crypto-tile small, .crypto-tile b { line-height:1; }
 .crypto-tile b { min-height:1em; }
}

/* Fit every term at the same scale, then trim unused field space. */
.crypto-desk { width: var(--desk-width,100%); height: var(--desk-height,min(640px,calc(100svh - 106px))); min-height: 0; }
.crypto-tiles { flex: 0 1 auto; max-width: calc(var(--letter-count) * var(--tile-width,44px) + (var(--letter-count) - 1) * 4px); }
.crypto-tiles .crypto-tile { height: var(--tile-height,48px); }
.crypto-tile b { font-size: clamp(12px,50cqw,64px); line-height: 1.05; min-height: 1.05em; }
.crypto-tile small { font-size: clamp(8px,23cqw,25px); line-height: 1.2; }
.crypto-tile em { font-size: clamp(9px,16cqw,18px); }
.crypto-space { width: auto; }
@media(min-width:700px) and (max-width:999px) { .crypto-desk { height: var(--desk-height,min(640px,calc(100svh - 90px))); } }
@media(max-width:699px) {
 .crypto-desk { height: var(--desk-height,calc(100svh - 74px)); }
 .crypto-tiles { max-width: calc(var(--letter-count) * var(--tile-width,44px) + (var(--letter-count) - 1) * 3px); }
}

/* Game dialogs use the same parchment, without a wooden background. */
.crypto-dialog {
  --crypto-ink:#412712;
  color:var(--crypto-ink); background:transparent;
  border:14px solid transparent;
  border-image:url('/assets/games/kryptogramm/parchment-v2.webp') 90 fill / 14px / 0 stretch;
  border-radius:0; padding:20px;
  box-shadow:none; filter:drop-shadow(0 8px 18px #27130766);
  scrollbar-color:#9a6737 #f9e6be;
}
.crypto-dialog::backdrop { background:#27130780; }
.crypto-dialog .dialog-heading { padding-bottom:14px; border-bottom:1px solid #b78b53; }
.crypto-dialog .dialog-heading h2 { font-family:Georgia,serif; color:#412712; }
.crypto-dialog p, .crypto-dialog dt { color:#795333; }
.crypto-dialog p { line-height:1.65; }
.crypto-dialog button, .crypto-dialog button:hover:not(:disabled) {
  min-height:44px; padding:10px 14px; opacity:1;
  color:#412712; border:1px solid #9a6737; border-radius:6px 8px 5px 7px;
  background:#f7dfb1 url('/assets/games/kryptogramm/parchment-v2.webp') center / 100% 100%;
  box-shadow:inset 0 1px 2px #fff9,inset 0 -2px 3px #7c481c50,0 3px 0 #583019,0 4px 6px #27130755;
  font-weight:600;
}
.crypto-dialog button:hover:not(:disabled) { filter:brightness(1.06); }
.crypto-dialog button:focus-visible { outline:3px solid #124875; outline-offset:3px; }
.crypto-dialog .dialog-heading button { flex:0 0 44px; width:44px; height:44px; padding:8px; }
.crypto-dialog .stats-option input { accent-color:#775020; flex-shrink:0; }
.crypto-dialog .scoreboard { padding-bottom:16px; border-bottom:1px solid #b78b53; }
.crypto-dialog .scoreboard>div, .crypto-dialog .local-summary>div { min-width:0; }
.crypto-dialog .scoreboard>div+div, .crypto-dialog .local-summary>div+div { border-left:1px solid #c7a16d; padding-left:12px; }
.crypto-dialog dd { color:#412712; }
.crypto-dialog #clear-stats { margin-top:4px; }
@media(max-width:499px) {
 .crypto-dialog { padding:12px; }
 .crypto-dialog .dialog-heading { gap:10px; }
 .crypto-dialog .dialog-heading h2 { font-size:20px; }
 .crypto-dialog .scoreboard { grid-template-columns:1fr; gap:0; }
 .crypto-dialog .scoreboard>div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; }
 .crypto-dialog .scoreboard>div+div { border-left:0; border-top:1px solid #c7a16d; padding-left:0; }
 .crypto-dialog .scoreboard dd { text-align:right; margin:0; }
 .crypto-dialog .local-summary { gap:8px; }
 .crypto-dialog .local-summary>div+div { padding-left:8px; }
 .crypto-dialog #clear-stats { width:100%; }
}

/* Desktop follows the reference: introduction beside the logo, actions beside
   the terms, and a full-width keyboard beneath both panels. */
@media(min-width:700px) {
 .crypto-desk { grid-template-columns:minmax(0,1fr) 244px; grid-template-rows:auto auto minmax(min-content,1fr) auto; gap:8px 12px; height:auto; min-height:800px; }
 .crypto-heading { grid-column:1; grid-row:1; align-self:center; }
 .crypto-logo { width:100%; max-width:none; }
 .crypto-howto { grid-column:2; grid-row:1 / 3; align-self:stretch; padding:24px 20px 16px; }
 .crypto-levels { grid-column:1; grid-row:2; }
 .crypto-workspace { grid-column:1 / -1; grid-row:3; display:grid; grid-template-columns:minmax(0,1fr) 244px; gap:12px; min-height:min-content; }
 .crypto-playfield { padding:8px; }
 .crypto-category h2 { font-size:16px; }
 .crypto-category h2 strong { font-size:22px; }
 .crypto-category button { min-height:32px; width:32px; padding:4px; }
 #crypto-board { margin:4px 0; gap:4px; }
 #crypto-selection { display:none; }
 #crypto-status { height:16px; flex-basis:16px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .crypto-tools { min-height:min-content; padding:20px 16px 20px; }
 .crypto-tools .crypto-actions { grid-template-columns:minmax(0,1fr) 20px max-content minmax(0,1fr); gap:6px 8px; }
 .crypto-tools .crypto-actions button { grid-column:1 / -1; display:grid; grid-template-columns:subgrid; min-height:36px; padding:6px 0; font-size:14px; }
 .crypto-tools .crypto-actions .icon { grid-column:2; width:20px; height:20px; }
 .crypto-tools .crypto-action-text { grid-column:3; text-align:left; }
 .crypto-tools .crypto-legend { display:grid; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid #b78b53; color:#412712; font-size:13px; line-height:1.4; justify-content:stretch; }
 .crypto-legend>span { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:center; min-height:22px; }
 .crypto-legend small { display:block; font-size:12px; color:#795333; }
 .crypto-swatch { width:18px; height:22px; border:1px solid #9a6737; border-radius:3px; background:#f7dfb1; box-shadow:inset 0 1px 1px #fff9,0 1px 1px #58301955; }
 .crypto-swatch-given { background:#b0ed9c; border-color:#659247; }
 .crypto-swatch-player { background:#d9edff; }
 .crypto-swatch-hint { background:#ffcf75; }
 .crypto-console { grid-column:1 / -1; grid-row:4; gap:8px; }
 .crypto-keyboard { grid-template-columns:repeat(9,minmax(0,1fr)); gap:5px; }
 .crypto-keyboard button { font-size:20px; }
 .crypto-metrics { padding:4px 8px; }
 .crypto-metrics div { display:flex; align-items:center; justify-content:center; gap:10px; }
 .crypto-metrics dd { margin:0; }
 .crypto-secondary button { min-height:36px; }
}
.crypto-howto h2, .crypto-tools h2 { font:bold 16px/1.3 Georgia,serif; margin:0 0 12px; text-align:center; }
.crypto-howto ul { margin:0; padding-left:17px; font-size:13px; line-height:1.5; }
.crypto-howto li+li { margin-top:8px; }
@media(min-width:700px) and (max-height:850px) {
 .crypto-levels button { min-height:36px; }
 .crypto-keyboard button { min-height:36px; padding:3px 0; font-size:18px; }
 .crypto-metrics { padding:2px 8px; }
 .crypto-howto { padding:16px 20px 12px; }
 .crypto-howto h2, .crypto-tools h2 { font-size:16px; margin-bottom:8px; }
 .crypto-howto ul { font-size:11px; line-height:1.4; }
 .crypto-howto li+li { margin-top:5px; }
 .crypto-tools { padding:16px 16px 20px; }
 .crypto-tools .crypto-actions { row-gap:4px; }
 .crypto-tools .crypto-actions button { min-height:36px; padding:6px 0; }
 .crypto-tools .crypto-legend { margin-top:10px; padding-top:10px; gap:8px; }
}
#crypto-status { text-align:center; margin-bottom:8px; }
@media(max-width:699px) {
 .crypto-howto, .crypto-tools h2, .crypto-tools .crypto-legend { display:none; }
 .crypto-workspace { flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; }
 .crypto-tools { padding:0 4px; border:0; background:none; box-shadow:none; flex-shrink:0; }
 .crypto-tools::before { display:none; }
 .crypto-tools .crypto-actions { grid-template-columns:1fr 1fr 1.25fr; }
}

.crypto-mobile-info { display:none; }
@media(max-width:699px) {
 .crypto-mobile-info { display:block; flex-shrink:0; padding:4px 12px; font-size:13px; }
 .crypto-mobile-info summary { min-height:32px; padding:6px 0; cursor:pointer; font-weight:600; text-align:center; }
 .crypto-mobile-info summary::marker { color:#795333; }
 .crypto-mobile-info summary:focus-visible { outline:3px solid #124875; outline-offset:2px; border-radius:3px; }
 .crypto-mobile-info-content { padding:6px 2px 12px; }
 .crypto-mobile-info ul { margin:0 0 14px; padding-left:18px; line-height:1.5; }
 .crypto-mobile-info li+li { margin-top:5px; }
 .crypto-mobile-info h2 { margin:0 0 10px; padding-top:10px; border-top:1px solid #c7a16d; font:bold 15px Georgia,serif; }
 .crypto-mobile-info .crypto-legend { display:grid; justify-content:stretch; gap:8px; color:#412712; font-size:13px; line-height:1.4; }
 .crypto-mobile-info .crypto-legend>span { display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:center; min-height:22px; }
 .crypto-mobile-info .crypto-legend small { display:block; font-size:12px; color:#795333; }
 .crypto-mobile-info .crypto-swatch { width:18px; height:22px; border:1px solid #9a6737; border-radius:3px; background:#f7dfb1; box-shadow:inset 0 1px 1px #fff9,0 1px 1px #58301955; }
 .crypto-mobile-info .crypto-swatch-given { background:#b0ed9c; border-color:#659247; }
 .crypto-mobile-info .crypto-swatch-player { background:#d9edff; }
 .crypto-mobile-info .crypto-swatch-hint { background:#ffcf75; }
 .crypto-desk:has(.crypto-mobile-info[open]) { height:auto; min-height:calc(100svh - 74px); }
 .crypto-desk:has(.crypto-mobile-info[open]) .crypto-workspace,
 .crypto-desk:has(.crypto-mobile-info[open]) .crypto-playfield,
 .crypto-desk:has(.crypto-mobile-info[open]) #crypto-board { flex:none; }
}

/* Use the transparent margin around the mobile logo to enlarge the artwork
   without taking any extra height from the terms or controls. */
@media(max-width:699px) {
 .crypto-heading {
  --mobile-logo-width:clamp(180px,62vw,290px);
  position:relative; height:calc(var(--mobile-logo-width) / 3 + 4px); padding:0;
 }
 .crypto-heading .crypto-logo {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(calc(100% - 8px),calc(var(--mobile-logo-width) * 1.25));
  max-width:none; height:auto; margin:0;
 }
}
@media(max-width:699px) and (max-height:699px) {
 .crypto-heading { --mobile-logo-width:180px; }
}

.crypto-support-line { width:var(--desk-width,100%); display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:.6875rem; padding:.35rem; color:#8a93a0; }
.crypto-support-line code { user-select:all; overflow-wrap:anywhere; }
#crypto-support-copy { min-height:24px; padding:2px 6px; border:1px solid #cbd1d9; border-radius:4px; background:transparent; color:#7c8591; font-size:inherit; font-weight:400; line-height:1.2; box-shadow:none; text-shadow:none; filter:none; }
#crypto-support-copy:hover:not(:disabled) { background:#edf0f4; color:#626c79; box-shadow:none; filter:none; }
#crypto-support-form { margin:1rem 0; }
#crypto-support-form div { display:flex; flex-wrap:wrap; gap:.5rem; }
#crypto-support-input { max-width:100%; min-width:0; padding:.5rem; flex:1; }

/* Ended rounds offer a clear next step while retaining the solved board. */
.crypto-desk .crypto-actions button:disabled,
.crypto-desk #crypto-solution:disabled { opacity:1; filter:none; background:#eee4cf; background-image:linear-gradient(#f3ead8,#e6dcc6); border-color:#b5a68b; color:#8a7d69; text-shadow:none; box-shadow:inset 0 1px 1px #fff8,0 1px 0 #806448; }
.crypto-desk .crypto-actions button:disabled .icon { color:inherit; }
.crypto-desk.has-result #crypto-new { background-image:linear-gradient(#edffdccc,#b0ed9ccc),url('/assets/games/kryptogramm/parchment-v2.webp'); border-color:#659247; color:#21551e; outline:2px solid #fff0c2; outline-offset:1px; }

@media(min-width:700px) {
 .crypto-console #crypto-selection { display:flex; align-items:center; justify-content:center; flex:none; height:auto; min-height:30px; margin:0; padding:4px 10px; font-size:13px; line-height:20px; text-align:center; white-space:normal; overflow:visible; background:#fff0d1; border:1px solid #c89b60; border-radius:4px; }
}