/* Riddle10 PLAY: shell around every game (uses the site's tokens from site.css). Games add their own styles with a
   .g-<slug> prefix inside their module. */

.pl-wrap { max-width: 760px; margin: 0 auto; }
.pl-head { text-align: center; margin: 8px 0 14px; }
.pl-head h1 { font: 700 clamp(30px, 6vw, 46px)/1.05 var(--serif); margin: 6px 0 6px; letter-spacing: .01em; }
.pl-head .pl-sub { color: var(--ink-2); margin: 0; }
.pl-tags { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pl-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--glass); font: 600 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.pl-tag.gold { color: var(--gold-text); border-color: rgba(244, 199, 111, .45); }

.pl-game { position: relative; }
.pl-intro { text-align: center; color: var(--ink-2); margin: 0 auto 12px; max-width: 560px; font-size: 15px; }
.pl-stage { position: relative; background: linear-gradient(160deg, var(--glass-2), var(--glass)); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(12px, 3vw, 22px); min-height: 280px; user-select: none; -webkit-user-select: none; touch-action: manipulation; overflow: hidden; }
.pl-stage > * { min-width: 0; max-width: 100%; }
.pl-stage.shake { animation: pl-shake .38s ease; }
@keyframes pl-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

.pl-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pl-meter { display: flex; align-items: baseline; gap: 8px; color: var(--ink-2); font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.pl-meter b { font: 700 26px var(--serif); color: var(--gold-text); letter-spacing: 0; display: inline-block; }
.pl-meter b.bump { animation: pl-bump .25s ease; }
@keyframes pl-bump { 50% { transform: scale(1.25); } }
.pl-meter small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.pl-actions { display: flex; gap: 8px; }
.pl-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--glass-2); color: var(--ink); font: 600 14px var(--sans); cursor: pointer; text-decoration: none; transition: transform .15s, background .15s, border-color .15s; }
.pl-btn:hover { background: var(--glass-hi); border-color: rgba(244, 199, 111, .5); }
.pl-btn:active { transform: scale(.96); }
.pl-btn:disabled { opacity: .45; cursor: default; }
.pl-btn.pl-icon { padding: 0; width: 42px; justify-content: center; }
.pl-btn[aria-pressed="true"] { color: var(--muted); }
.pl-primary { background: var(--crimson, var(--gold)); color: var(--crimson-ink, var(--gold-ink)); border-color: var(--crimson-line, transparent); box-shadow: var(--glow); }
.pl-primary:hover { background: var(--crimson, var(--gold)); filter: brightness(1.1); }
.pl-i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.pl-hints { display: grid; gap: 6px; margin-top: 10px; }
.pl-hint { margin: 0; padding: 9px 13px; border-radius: var(--radius-sm); background: rgba(244, 199, 111, .08); border: 1px solid rgba(244, 199, 111, .25); font-size: 14px; color: var(--ink); animation: pl-in .3s ease; }
.pl-hint b { color: var(--gold-text); font-weight: 700; margin-inline-end: 4px; }
@keyframes pl-in { from { opacity: 0; transform: translateY(6px); } }

.pl-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; padding: 10px 16px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--ink); font: 600 14px var(--sans); transition: .25s; max-width: calc(100% - 32px); text-align: center; }
:root[data-theme="light"] .pl-toast { background: rgba(255, 252, 244, .96); }
.pl-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* win dialog */
.pl-win { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 12, .66); backdrop-filter: blur(6px); animation: pl-fade .3s ease; }
@keyframes pl-fade { from { opacity: 0; } }
.pl-win-card { position: relative; z-index: 1; width: min(420px, 100%); text-align: center; padding: 26px 22px 20px; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--line); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .55); animation: pl-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pl-pop { from { transform: scale(.85); opacity: 0; } }
.pl-kicker { margin: 0; font: 700 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.pl-win-close { position: absolute; top: 8px; inset-inline-end: 8px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-2, rgba(255,255,255,.2)); background: transparent; color: var(--ink-2, #ccc); cursor: pointer; padding: 0; }
.pl-win-close:hover, .pl-win-close:focus-visible { color: var(--gold, #f4c76f); border-color: var(--gold, #f4c76f); }
.pl-win-close .pl-i { width: 20px; height: 20px; }
.pl-result { margin-top: 8px; }
.pl-win-card h2 { font: 700 32px/1.1 var(--serif); margin: 4px 0 10px; }
.pl-stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 8px; }
.pl-stars i { display: grid; place-items: center; width: 54px; height: 54px; color: var(--line-2); }
.pl-stars i .pl-i { width: 50px; height: 50px; fill: currentColor; stroke-width: 1; }
.pl-stars i.on { color: var(--star, var(--gold)); animation: pl-star .5s var(--d) both cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pl-star { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.pl-win-line { margin: 0 0 6px; color: var(--ink-2); }
.pl-explain { margin: 6px 0 10px; font-size: 14px; color: var(--ink-2); }
.pl-xp { display: grid; gap: 4px; margin: 10px 0 12px; }
.pl-xp b { font: 700 22px var(--serif); color: var(--gold-text); }
.pl-xp span { font-size: 13px; color: var(--muted); }
.pl-xpbar { height: 7px; border-radius: 99px; background: var(--glass-2); overflow: hidden; }
.pl-xpbar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .8s; }
.pl-badges-new { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.pl-win-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pl-burst { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* hub */
.pl-hero { text-align: center; padding: 10px 0 6px; }
.pl-hero h1 { font: 700 clamp(44px, 10vw, 80px)/1 var(--play-font, var(--serif)); margin: 8px 0; background: var(--arc-grad, none); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-hero .eyebrow { color: var(--arc-3, var(--gold)); }
.pl-hero p { color: var(--ink-2); max-width: 560px; margin: 0 auto; }
.pl-top { display: grid; gap: 12px; margin: 18px 0 4px; }
@media (min-width: 900px) { .pl-top:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 16px; align-items: stretch; } }
.pl-progress { display: grid; gap: 6px; align-content: center; margin: 0; padding: 10px 14px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); }
.pl-rank { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pl-rank .pl-kicker { color: var(--ink-2); letter-spacing: .1em; }
.pl-rank b { font: 600 22px/1.15 var(--serif); color: var(--ink); }
.pl-rank small { margin-inline-start: auto; color: var(--ink-2); font-size: 14px; }
.pl-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-stat b { color: var(--ink); font-weight: 600; }
.pl-progress .pl-xpbar { height: 4px; background: var(--bg-3); }
.pl-badges { display: grid; gap: 8px; margin: 26px 0 6px; }
.pl-badges .pl-kicker { color: var(--ink-2); letter-spacing: .1em; }
.pl-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font: 600 12.5px var(--sans); border: 1px solid var(--line); background: var(--bg-3); color: var(--ink-2); }
.pl-badge .pl-i { width: 14px; height: 14px; }
.pl-badge.on, .pl-badges-new .pl-badge { color: var(--gold-text); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: var(--bg-2); }

.pl-section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 12px; }
.pl-section-title h2 { font: 600 26px var(--play-font, var(--serif)); margin: 0; }
.pl-section-title span { color: var(--ink-2); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pl-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border-radius: 20px; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; }
.pl-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.pl-card-art { aspect-ratio: 16 / 10; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); overflow: hidden; }
.pl-card-art svg { width: 44%; height: auto; fill: none; stroke: var(--gold-text); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* board drawings (Services/GameBoards.cs): gold for the key part, muted ink for the rest */
.pl-board svg { width: 100%; height: 100%; display: block; stroke: none; }
.pl-board .fa { fill: var(--gold-text); } .pl-board .fm { fill: var(--ink-2); } .pl-board .fi { fill: var(--ink); }
.pl-board .sa, .pl-board .sm { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-board .sa { stroke: var(--gold-text); } .pl-board .sm { stroke: var(--ink-2); }
.pl-card h3 { font: 600 17px/1.15 var(--play-font, var(--serif)); margin: 2px 2px 0; }
.pl-card p { margin: 0 2px; font-size: 13px; line-height: 1.35; color: var(--ink-2); flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 2px 2px 0; font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pl-card-stars { display: flex; gap: 2px; }
.pl-card-stars i { color: var(--line-2); display: grid; }
.pl-card-stars i.on { color: var(--star, var(--gold)); }
.pl-card-stars .pl-i { width: 15px; height: 15px; fill: currentColor; stroke-width: 1; }
.pl-lv { display: inline-flex; gap: 3px; align-items: center; }
.pl-lv i { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: var(--line-2); }
.pl-lv i.on { background: var(--star, var(--gold)); }

/* shared bits games may use */
.g-btnrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.g-question { text-align: center; font: 600 clamp(19px, 4.4vw, 24px)/1.35 var(--serif); margin: 0 0 14px; color: var(--ink); }

.back-link { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; color: var(--ink-2); text-decoration: none; font: 600 14px var(--sans); }
.back-link:hover { color: var(--gold-text); }
@media (max-width: 560px) {
  .pl-grid { gap: 10px; }
  .pl-card h3 { font-size: 16px; }
  .pl-card p { font-size: 12.5px; }
  .pl-card-foot > span:last-child > span { display: none; }
}

/* levels: bar above the game, picker panel, solved count on hub cards */
.pl-levelbar { margin: 0 auto 12px; max-width: 560px; }
.pl-lvrow { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pl-btn.is-off { opacity: .35; pointer-events: none; }
.pl-lvbtn { min-width: 0; flex: 0 1 auto; white-space: nowrap; }
@media (max-width: 400px) { .pl-lvrow { gap: 6px; } .pl-lvbtn > span { display: none; } }
.pl-lvbtn b { font: 700 18px var(--serif); color: var(--gold-text); }
.pl-lvbtn small { color: var(--muted); font-size: 13px; margin-inline-end: 4px; }
.pl-picker { margin-top: 10px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--bg-2); box-shadow: var(--shadow); animation: pl-in .2s ease; }
.pl-picker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.pl-picker-head b { font: 700 16px var(--sans); }
.pl-picker-head > span { color: var(--muted); font-size: 13px; flex: 1 1 160px; }
.pl-jump { display: flex; gap: 6px; }
.pl-jump input { width: 128px; min-height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); font: 600 16px var(--sans); }
.pl-jump .pl-btn { min-height: 40px; }
.pl-pages { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: thin; }
.pl-page { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font: 600 12px var(--sans); cursor: pointer; font-variant-numeric: tabular-nums; }
.pl-page.on { border-color: var(--gold); color: var(--gold-text); background: rgba(244, 199, 111, .1); }
.pl-page i { font-style: normal; padding: 0 5px; border-radius: 99px; background: var(--gold); color: var(--gold-ink); font-size: 10px; }
.pl-lvgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.pl-lv-tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: var(--glass); color: var(--ink-2); font: 600 12px var(--sans); text-decoration: none; font-variant-numeric: tabular-nums; }
.pl-lv-tile:hover { border-color: var(--gold); color: var(--ink); }
.pl-lv-tile em { position: absolute; bottom: 1px; font-style: normal; font-size: 7px; letter-spacing: -1px; color: var(--gold-text); line-height: 1; }
.pl-lv-tile.s1, .pl-lv-tile.s2, .pl-lv-tile.s3 { border-color: rgba(244, 199, 111, .45); background: rgba(244, 199, 111, .1); color: var(--ink); }
.pl-lv-tile.s3 { background: rgba(244, 199, 111, .22); }
.pl-lv-tile.here { outline: 2px solid var(--gold); outline-offset: 1px; }
.pl-win-alt { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pl-win-alt:hover { color: var(--gold-text); }
.pl-card-lv { font: 700 12px var(--sans); color: var(--gold-text); margin-inline-end: 3px; font-variant-numeric: tabular-nums; }
.pl-card-stars { align-items: center; }
@media (max-width: 420px) { .pl-lvgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); } .pl-lv-tile { font-size: 11px; } }
.pl-lv small { margin-inline-start: 6px; font-size: 12px; color: var(--muted); }
.pl-preview { margin: 10px 0 4px; padding: 10px 14px; border: 1px dashed var(--gold); border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.pl-preview a { color: var(--gold-text); }
.pl-locked { padding: 28px 0 8px; }
.pl-locked-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

/* v19: the game box is always black, in the light theme too (Majed, 2026-10-10), so the game reads the same for every
   player. Inside it the games keep their dark colours (play.js also switches off a game's own light-theme rules there);
   tiles sit a step lighter than the board so they stand apart. */
.pl-stage {
  background: #050304;
  border-color: #3a2a24;
  box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .55);
  color: #f6ead8;
  color-scheme: dark;
  --bg: #050304; --bg-2: #251a1a; --bg-3: #2e2222;
  --glass: rgba(255, 236, 216, .045); --glass-2: rgba(255, 236, 216, .075); --glass-hi: rgba(255, 236, 216, .12);
  --ink: #f6ead8; --ink-2: #cdb9a4; --muted: #c4ae98;
  --gold: #e3bd72; --gold-2: #a5772f; --gold-ink: #2a1804; --gold-text: #e3bd72; --star: #e3bd72;
  --line: #3a2a24; --line-2: #4a362e;
  --teal: #7ec0e6; --green: #7ec0e6; --rose: #f2a37a;
  --tile: #251a1a; --tile-out: #120708;
  --glow: 0 6px 20px -10px rgba(0, 0, 0, .6); --shadow: 0 14px 40px -22px rgba(0, 0, 0, .55);
}
.pl-tag.gold { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.pl-hint { background: var(--bg-2); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }

/* ===================================================================================================================
   v20 Games section redesign (approved by Majed 2026-10-10; design-v20/BUILD-SPEC-v20.md).
   Majed: no colour inside the game box or its black background changes. Everything in the box below only changes size
   and spacing, except the answer button (.pl-stage .pl-primary), which gets the approved "Ember crimson".
   =================================================================================================================== */

/* ---- game marks: a 64x64 tile in the game's gem colour (--gd deep, --gb bright, --gm mid) with a gold bezel ---- */
.pl-mark { display: block; flex: none; fill: none; stroke: none; }
.pl-mark .bg { fill: var(--gd); stroke: var(--gm); stroke-width: 1.5; }
.pl-mark .ring { fill: none; stroke: #e3bd72; stroke-width: 1.5; opacity: .6; }
.pl-mark .m-a { fill: none; stroke: var(--gb); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pl-mark .m-af { fill: var(--gb); }
.pl-mark .m-gold { fill: #e3bd72; }
.pl-mark .m-gold-s { fill: none; stroke: #e3bd72; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pl-mark .m-ink { fill: #050304; }
.pl-mark .m-inkb { fill: #050304; stroke: var(--gb); stroke-width: 1.25; stroke-opacity: .55; }
.pl-mark.small .ring { display: none; }

/* ---- hub cards: the mark in a small black panel, in both themes ---- */
.pl-card { container-type: inline-size; padding: 8px 8px 10px; }
.pl-card:hover { border-color: color-mix(in srgb, var(--gb, var(--gold)) 45%, var(--line)); }
:root[data-theme="light"] .pl-card:hover { border-color: color-mix(in srgb, var(--gm, var(--gold)) 60%, var(--line)); }
.pl-card-art.pl-vit { position: relative; aspect-ratio: 16 / 11; border-radius: 13px; display: grid; place-items: center;
  background: radial-gradient(ellipse 70% 62% at 50% 0%, color-mix(in srgb, var(--gb) 18%, transparent), transparent 72%), #050304;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gb) 35%, transparent); }
.pl-card:hover .pl-vit { background: radial-gradient(ellipse 70% 62% at 50% 0%, color-mix(in srgb, var(--gb) 26%, transparent), transparent 72%), #050304; }
.pl-vit .pl-mark { width: 76px; height: 76px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.pl-vit .pl-icon-fallback { width: 40%; stroke: #e3bd72; }
.pl-card h3 { margin: 10px 4px 3px; font-size: 17px; font-weight: 600; min-height: 2.3em; display: flex; align-items: flex-end; text-wrap: balance; }
.pl-card p { margin: 0 4px; font-size: 13px; min-height: 2.7em; flex: none; }
.pl-card-foot { margin: 8px 4px 0; font-size: 10.5px; letter-spacing: .1em; }
.pl-card-foot .pl-lv { gap: 6px; }
.pl-card-foot .pl-lv small { font-size: inherit; margin-inline-start: 4px; color: var(--ink-2); }
.pl-card-stars { white-space: nowrap; letter-spacing: .06em; }
@media (max-width: 560px) {
  .pl-card h3 { font-size: 17px; }
  .pl-card p { font-size: 13px; }
  .pl-card-foot > span:last-child > span { display: inline; }
}
@container (max-width: 220px) { .pl-card-foot > span:last-child > span { display: none; } }
@media (min-width: 1000px) {
  .pl-card { padding: 10px 10px 12px; }
  .pl-card-art.pl-vit { aspect-ratio: 2 / 1; }
  .pl-vit .pl-mark { width: 100px; height: 100px; }
  .pl-card h3 { font-size: 19px; min-height: 0; margin-top: 12px; }
  .pl-card p { font-size: 14px; }
}

/* ---- level page: identity row, then the game box high on the page ---- */
.pl-level { max-width: 1104px; }
.pl-level .pl-lv-page { max-width: 720px; margin: 0 auto; }
.pl-level .back-link { margin: 4px 0 6px; font: 500 15px var(--sans); }
.pl-ident { display: flex; align-items: center; gap: 12px; text-align: start; margin: 0; }
.pl-ident .pl-mark { width: 50px; height: 50px; }
.pl-ident h1 { margin: 0; font: 700 28px/1.05 var(--serif); letter-spacing: 0; text-wrap: balance; }
.pl-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; font: 600 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pl-level .pl-sub { margin: 8px 0 16px; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.pl-level .pl-challenge { display: none; }
.pl-level .pl-stage { min-height: 0; padding: 28px 32px 30px; border-radius: 18px; }
.pl-level .pl-bar { margin-top: 12px; }
.pl-level .pl-bar .pl-btn { min-height: 44px; }
.pl-level .pl-bar .pl-btn.pl-icon { width: 44px; }
.pl-level .pl-levelbar { max-width: none; margin: 16px 0 0; }
.pl-level .pl-lvrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.pl-level .pl-lvrow .pl-btn { min-height: 44px; justify-content: center; }
.pl-level .pl-lvrow .pl-btn.pl-icon { width: 44px; }
.pl-level .pl-lvbtn > span { display: inline; }
.pl-level .pl-lvbtn b { font-size: 19px; }
.pl-rules { margin-top: 20px; max-width: 62ch; }
.pl-rules-k { display: block; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.pl-rules .pl-intro, .pl-rules p { margin: 6px 0 0; max-width: 62ch; text-align: start; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.pl-side-rules[hidden] { display: none; }
.pl-level .pl-main .pl-rules + .pl-toast { margin: 0; }
@media (max-width: 999px) { .pl-level .pl-side-rules { display: none; } }
@media (max-width: 560px) {
  .pl-level .pl-stage { margin-inline: calc(-1 * var(--gutter, 16px)); border-radius: 0; border-width: 1px 0; padding: 16px 12px 18px; }
}
@media (max-width: 420px) { .pl-level .pl-par { display: none; } }
@media (min-width: 1000px) {
  .pl-level .pl-lv-page { display: grid; grid-template-columns: 300px minmax(0, 700px); gap: 40px; justify-content: center; align-items: start; max-width: 1040px; padding-top: 12px; }
  .pl-level .pl-side { position: sticky; top: 88px; }
  .pl-level .back-link { margin-top: 0; }
  .pl-ident .pl-mark { width: 58px; height: 58px; }
  .pl-ident h1 { font-size: 36px; }
  .pl-level .pl-sub { font-size: 16px; }
  .pl-level .pl-challenge { display: block; margin: 4px 0 0 !important; }
  .pl-level .pl-main .pl-rules { display: none; }
}

/* Bodoni titles: a fixed optical size closes the gap after a capital W ("W ord"); after the font shorthands above */
.pl-card h3, .pl-ident h1 { font-optical-sizing: none; font-variation-settings: "opsz" 36; font-kerning: normal; }

/* ---- the answer button (Shout, Check, Pour, Send, Go, Open, Lock...): "Ember crimson" ---- */
.pl-stage .pl-primary { background: #c0304b; color: #fff4e6; border: 1.5px solid #e3bd72; filter: none;
  box-shadow: 0 8px 22px -12px rgba(192, 48, 75, .7); transition: transform .08s, background .15s, border-color .15s;
  min-height: 54px; min-width: 112px; padding: 0 20px; border-radius: 999px; justify-content: center; font: 700 16px var(--sans); letter-spacing: .02em; }
.pl-stage .pl-primary:hover { background: #c63550; border-color: #fbe7b0; filter: none; }
.pl-stage .pl-primary:active { background: #9c2239; transform: scale(.97); }
/* can't be pressed yet: the same crimson button, faded like the Roll's buttons */
.pl-stage .pl-primary:disabled { background: #c0304b; color: #fff4e6; border-color: #e3bd72; box-shadow: none; opacity: .45; cursor: not-allowed; transform: none; }
.pl-stage .pl-primary:focus-visible { outline: 2px solid #f6ead8; outline-offset: 2px; }

/* ---- inside the box: bigger, clearer game content (sizes and spacing only, never colours) ---- */
/* Blackout */
.pl-stage .g-blackout .riddle { font-size: clamp(20px, 5.4vw, 25px); }
.pl-stage .g-blackout .riddle b, .pl-stage .g-blackout .read small { font-size: 12px; }
.pl-stage .g-blackout .page { padding: 14px 14px 16px 18px; line-height: 1.2; }
.pl-stage .g-blackout .w { display: inline-flex; align-items: center; justify-content: center; vertical-align: top; min-height: 46px; min-width: 32px; padding: 4px 4px; margin: 0;
  font-size: clamp(24px, 6.8vw, 31px); line-height: 1.2; }
.pl-stage .g-blackout .w::after { left: 2px; right: 2px; top: 9px; bottom: 8px; }
.pl-stage .g-blackout .read .kept { font-size: clamp(19px, 5vw, 23px); }
.pl-stage .g-blackout .read .kept.many { font-size: 15px; }
.pl-stage .g-blackout .read .goal { font-size: 13px; }
/* The Echo Tunnel */
.pl-stage .g-echo .tunnel { gap: 14px; }
.pl-stage .g-echo .echo { font-size: clamp(22px, 6.4vw, 30px); }
.pl-stage .g-echo.long .echo { font-size: clamp(19px, 5.4vw, 27px); }
.pl-stage .g-echo .bite { font-size: 13px; padding: 4px 9px; }
.pl-stage .g-echo .bite i { width: 9px; height: 12px; }
.pl-stage .g-echo .clue { min-height: 52px; padding: 12px 14px; gap: 10px; font-size: 18px; }
.pl-stage .g-echo .clue i { width: 14px; height: 14px; }
.pl-stage .g-echo input { min-height: 54px; font-size: 22px; }
.pl-stage .g-echo input::placeholder { font-size: 18px; }
.pl-stage .g-echo .legend { font-size: 13.5px; }
@media (min-width: 1000px) { .pl-stage .g-echo .clue { font-size: 20px; } }
/* the riddle line at the top of the riddle games */
.pl-stage .g-hidden-window .riddle, .pl-stage .g-parallax .riddle, .pl-stage .g-story-order .riddle, .pl-stage .g-letter-gravity .riddle p,
.pl-stage .g-word-scales .riddle p, .pl-stage .g-rebus-forge .riddle p, .pl-stage .g-stowaways .riddle, .pl-stage .g-waterline .riddle,
.pl-stage .g-letter-hops .riddle { font-size: clamp(20px, 5.4vw, 25px); }
.pl-stage .g-morse-gaps .riddle, .pl-stage .g-letter-rail .riddle, .pl-stage .g-day-riddles .q, .pl-stage .g-mystery-room .case p { font-size: clamp(19px, 5vw, 23px); }
.pl-stage .g-neon-sticks .riddle { font-size: clamp(18px, 4.8vw, 21px); }
/* small labels: at least 12px */
.pl-stage .g-hidden-window .riddle b, .pl-stage .g-parallax .riddle b, .pl-stage .g-story-order .riddle b, .pl-stage .g-letter-gravity .riddle small,
.pl-stage .g-word-scales .riddle small, .pl-stage .g-rebus-forge .riddle small, .pl-stage .g-rebus-forge .lbl, .pl-stage .g-stowaways .riddle small,
.pl-stage .g-letter-gravity .shelf-label, .pl-stage .g-mystery-room .case small, .pl-stage .g-stowaways .dock h3, .pl-stage .g-frost-seeds .lbl,
.pl-stage .g-shadow-sculptor .lbl, .pl-stage .g-twin-ice .lab, .pl-stage .g-gold-dust .flap b, .pl-stage .g-honest-chest .rule b, .pl-stage .g-my-first .whole b,
.pl-stage .g-strip-fold .side p, .pl-stage .g-linked-rings .ctl b, .pl-stage .g-linked-rings .ctl small, .pl-stage .g-neon-sticks .read,
.pl-stage .g-parallax .tag, .pl-stage .g-day-riddles .scratch .lab { font-size: 12px; }
/* notes, legends, status lines and help: easier to read */
.pl-stage .g-echo .legend, .pl-stage .g-box-net .legend, .pl-stage .g-chroma-grid .legend, .pl-stage .g-chroma-grid .note, .pl-stage .g-day-riddles .note,
.pl-stage .g-frost-seeds .rule, .pl-stage .g-gold-dust .legend, .pl-stage .g-honest-chest .legend, .pl-stage .g-letter-hops .help, .pl-stage .g-letter-rail .legend,
.pl-stage .g-linked-rings .legend, .pl-stage .g-long-ladder .legend, .pl-stage .g-morse-gaps .note, .pl-stage .g-number-path .legend, .pl-stage .g-number-sieve .status,
.pl-stage .g-number-sieve .legend, .pl-stage .g-pancake-flip .help, .pl-stage .g-pond-bridges .legend, .pl-stage .g-pond-bridges .tally, .pl-stage .g-sort-gate .legend,
.pl-stage .g-stamp-cube .legend, .pl-stage .g-stowaways .legend, .pl-stage .g-strip-fold .legend, .pl-stage .g-swap-sounds .note, .pl-stage .g-tide-pools .legend,
.pl-stage .g-twin-ice .note, .pl-stage .g-beacons .legend, .pl-stage .g-parallax .found span { font-size: 14px; }
.pl-stage .g-frost-seeds .pill, .pl-stage .g-mirror-pen .pill, .pl-stage .g-pancake-flip .goal, .pl-stage .g-sand-timers .goal, .pl-stage .g-stamp-cube .info,
.pl-stage .g-strip-fold .goal, .pl-stage .g-tide-pools .chis, .pl-stage .g-beacons .gems, .pl-stage .g-word-scales .sum, .pl-stage .g-neon-sticks .task,
.pl-stage .g-day-riddles .chipb { font-size: 14.5px; }
.pl-stage .g-gear-clock .status, .pl-stage .g-shadow-sculptor .status, .pl-stage .g-sand-timers .msg, .pl-stage .g-gear-clock .info p { font-size: 15px; }
.pl-stage .g-balance-mobile .status span { font-size: 13.5px; }
/* the text you read and play with */
.pl-stage .g-story-order .txt { font-size: clamp(17px, 4.6vw, 19px); }
.pl-stage .g-swap-sounds .line p { font-size: 17px; }
.pl-stage .g-swap-sounds .word { font-size: clamp(18px, 5.2vw, 28px); }
.pl-stage .g-honest-chest .rule span { font-size: 18px; }
.pl-stage .g-honest-chest .note { font-size: 15.5px; }
.pl-stage .g-my-first .say { font-size: 16px; }
.pl-stage .g-my-first .whole { font-size: 18px; }
.pl-stage .g-mystery-room .note p { font-size: 16.5px; }
.pl-stage .g-mystery-room .book li, .pl-stage .g-mystery-room .book .none { font-size: 15.5px; }
.pl-stage .g-sort-gate .book h3 { font-size: 17px; }
.pl-stage .g-sort-gate .book p { font-size: 14.5px; }
.pl-stage .g-sort-gate .book ol { font-size: 15px; }
.pl-stage .g-sort-gate .reveal { font-size: 16.5px; }
.pl-stage .g-morse-gaps summary { font-size: 15px; }
.pl-stage .g-morse-gaps .card span { font-size: 15px; }
.pl-stage .g-morse-gaps .card code { font-size: 16px; }
.pl-stage .g-day-riddles .ans { font-size: 15.5px; }
.pl-stage .g-number-sieve .st { font-size: clamp(16px, 4.6vw, 20px); }
.pl-stage .g-letter-gravity .turn, .pl-stage .g-letter-gravity .turn.r { font-size: 16px; }   /* v27: both turn buttons the same size */
.pl-stage .g-shadow-sculptor .seg button { font-size: 15px; }

/* ===================================================================================================================
   v27 readability and controls (games UX review 2026-10-12): sizes, figures and placement only.
   =================================================================================================================== */
/* game messages sit above the ROLL / GAMES tab bar on phones and tablets (the bar was covering them) */
@media (max-width: 999px) { .pl-toast { bottom: calc(var(--tab-h, 0px) + var(--legal-h, 0px) + 12px); } }
/* numbers in the serif font: lining figures, so "1" never reads as "I" and "0" as "o" */
.pl-stage { font-variant-numeric: lining-nums; }
.pl-meter b, .pl-lvbtn b, .pl-win-line, .pl-xp b { font-variant-numeric: lining-nums tabular-nums; }
/* computers: the par note and the "How to play" label at a readable size; empty difficulty diamonds get an outline */
.pl-meter small { font-size: 13px; }
.pl-rules-k { font-size: 12px; }
.pl-lv i:not(.on) { background: transparent; box-shadow: inset 0 0 0 1.25px color-mix(in srgb, var(--ink-2) 80%, transparent); }
/* win panel: the other game reads as a link */
.pl-win-alt { text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
/* the game description shown under the game on phones (Views/Play/Game.cshtml copies it there) */
.pl-rules .pl-blurb { display: none; }
@media (max-width: 560px) {
  /* phones: icon, title and difficulty in one compact row; the description moves under the game, by "How to play" */
  .pl-level .back-link { margin: 0 0 2px; }
  .pl-ident { gap: 10px; min-height: 0; max-height: 56px; }
  .pl-ident .pl-mark { width: 40px; height: 40px; }
  .pl-ident h1 { font-size: 24px; line-height: 1.05; }
  .pl-meta { margin-top: 3px; }
  .pl-level .pl-side .pl-sub { display: none; }
  .pl-level .pl-ident { margin-bottom: 10px; }
  .pl-rules .pl-blurb { display: block; margin: 6px 0 10px; }
  /* Games page: no empty band between a card's picture and its title */
  .pl-card h3 { min-height: 0; margin-top: 6px; }
}

/* ===================================================================================================================
   v38: the navy look (approved by Majed 2026-10-28; website/V38-BUILD-SPEC.md, mockups C4, D and E).
   Colours: the Riddles page's navy (site.css tokens, dark and light). Gold for every main action. Puzzle = orange (--rose),
   Word = blue (--teal). Plus Jakarta Sans (--display) for titles, group headers, game names and buttons; Inter for small
   text; Cormorant Garamond only for riddle text.
   =================================================================================================================== */
body.world-games {
  --surface: #0e1322; --tile-bg: #141b2c; --tile-hover: #1b2438; --tile-sh: #04060b; --ink-1: #ddd6c8; --bar-off: #2a3348;
  --c-puzzle: var(--rose); --c-word: var(--teal); --on-group: #0a0e1a;
}
:root[data-theme="light"] body.world-games {
  --surface: #fbf6ea; --tile-bg: #fffdf7; --tile-hover: #fff6df; --tile-sh: #e4d8bd; --ink-1: #3d3424; --bar-off: #dccfb2;
  --on-group: #fffaf0;
}
.dbars { display: inline-flex; gap: 3px; align-items: center; }
.dbars i { display: block; width: 8px; height: 12px; border-radius: 2px; background: var(--bar-off, #2a3348); }
.dbars i.on { background: var(--gold); }
.gtag { display: inline-block; padding: 2px 6px; border-radius: 5px; font: 800 10px/1.4 var(--display, "Inter", sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--on-group, #0a0e1a); vertical-align: 2px; }
.gtag-word { background: var(--c-word, var(--teal)); }
.gtag-puzzle { background: var(--c-puzzle, var(--rose)); }

/* ---- the game box (every game): dark navy in both themes; inside it the games keep their own drawings ---- */
.pl-stage {
  background: #0e1322;
  border-color: #222a3b;
  color: #f7eedc;
  --bg: #0a0e1a; --bg-2: #131928; --bg-3: #1a2133;
  --glass: rgba(255, 244, 222, .05); --glass-2: rgba(255, 244, 222, .08); --glass-hi: rgba(255, 244, 222, .13);
  --ink: #f7eedc; --ink-2: #b8b2a5; --muted: #a29d91;
  --gold: #f4c76f; --gold-2: #e0a043; --gold-ink: #241703; --gold-text: #e8c27a; --star: #e8c27a;
  --line: #222a3b; --line-2: #2a3348;
  --teal: #7ec0e6; --green: #7ec0e6; --rose: #f2a37a;
  --tile: #1a2133; --tile-out: #0a0e1a; --board: #070a12;
  color-scheme: dark;
}
/* one main-button colour: every game's main action (Shout, Turn the crank, Lock the glass, Pour, Forge, Lock it in, Check...) is gold */
.pl-stage .pl-primary { background: #f4c76f; color: #241703; border: 0; box-shadow: 0 8px 22px -12px rgba(244, 199, 111, .55); font: 800 16px var(--display, var(--sans)); letter-spacing: 0; }
.pl-stage .pl-primary:hover { background: #f8d68e; border: 0; color: #241703; }
.pl-stage .pl-primary:active { background: #e0b35a; }
.pl-stage .pl-primary:disabled { background: #f4c76f; color: #241703; border: 0; box-shadow: none; opacity: .45; }
.pl-stage .pl-primary:focus-visible { outline: 2px solid #f7eedc; outline-offset: 2px; }
.pl-primary { background: var(--gold); color: var(--gold-ink); border-color: transparent; }
.pl-primary:hover { background: var(--gold); color: var(--gold-ink); }

/* ---- C4: the Games page ---- */
.gh { display: flex; flex-direction: column; gap: 16px; padding-top: 22px; padding-bottom: 28px; }
body.world-games #play-hub.gh { padding-top: 22px; }
.gh > * { margin: 0; }
.gh-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.gh-eyebrow { margin: 0 0 6px; color: var(--gold-text); font: 600 11px/1.3 "Inter", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.gh-title { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.gh-title h1 { margin: 0; font: 800 36px/1.05 var(--display); letter-spacing: -.02em; }
.gh-line { margin: 8px 0 0; color: var(--ink-2); font: 400 15px/1.45 "Inter", var(--sans); }
.gh-rank-chip { flex: none; margin-bottom: 4px; padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold-text); font: 700 11px/1.4 "Inter", var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.gh-chal { display: none; flex: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); color: var(--ink); }
.gh-chal:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gh-chal svg { width: 18px; height: 18px; color: var(--gold-text); }
.gh-chal b { font: 700 14px var(--display); }
/* the rank, Continue (back again) */
.gh-rank { padding: 12px 16px; border-radius: 18px; background: var(--bg-2); }
.gh-rank-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gh-rank .pl-rank, .gh-rank .pl-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gh-rank .pl-kicker { color: var(--muted); font: 700 10.5px "Inter", var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.gh-rank .pl-rank b, .gh-rank .pl-stat b { font: 700 20px/1.15 var(--display); color: var(--ink); }
.gh-rank-note { margin: 6px 0 0; color: var(--ink-2); font-size: 12.5px; }
.gh-cont { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.gh-cont .gc-mark .pl-mark { width: 56px; height: 56px; }
.gh-cont .sh-name { font: 800 22px/1.15 var(--display); }
.gh-cont .sh-go { font-family: var(--display); font-weight: 800; }
.gh-bar { display: block; height: 4px; margin-top: 8px; border-radius: 99px; background: var(--bar-off, var(--bg-3)); overflow: hidden; }
.gh-bar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.gh-prog { display: block; margin-top: 7px; max-width: 220px; }
.gh-prog small { color: var(--ink-2); font: 700 10.5px "Inter", var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.gh-prog .gh-bar { margin-top: 4px; }
/* Show first (phones and tablets) */
.gh-first { display: flex; flex-direction: column; gap: 6px; }
.gh-first > small { color: var(--ink-2); font: 500 12px "Inter", var(--sans); }
.gh-first-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gh-first-btn { --gc: var(--c-puzzle); display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); background: color-mix(in srgb, var(--gc) 12%, transparent); color: var(--ink); font: 700 14px var(--display); text-align: start; }
.gh-first-word { --gc: var(--c-word); }
.gh-first-btn .gh-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gc); }
.gh-first-n { flex: 1; min-width: 0; }
.gh-first-c { font-weight: 600; color: var(--ink-2); }
.gh-first-btn[aria-pressed="true"] { background: var(--gc); border-color: var(--gc); color: var(--on-group); }
.gh-first-btn[aria-pressed="true"] .gh-dot { background: var(--on-group); }
.gh-first-btn[aria-pressed="true"] .gh-first-c { color: var(--on-group); }
.gh-first-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* the two groups */
.gh-groups { display: flex; flex-direction: column; gap: 16px; }
.gh-groups[data-first="word"] .gg-word, .gh-groups[data-first="puzzle"] .gg-puzzle { order: -1; }
.gg { --gc: var(--gold); display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--gc) 33%, transparent); border-radius: 18px; background: var(--surface); overflow: hidden; }
.gg-puzzle { --gc: var(--c-puzzle); } .gg-word { --gc: var(--c-word); }
.gg-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; background: color-mix(in srgb, var(--gc) 17%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--gc) 33%, transparent); }
.gg-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--gc); }
.gg-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--on-group); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.gg-featured .gg-ic svg { fill: var(--on-group); stroke: none; }
.gg-t { flex: 1; min-width: 0; }
.gg-t h2 { margin: 0; font: 800 16px/1.3 var(--display); letter-spacing: .11em; text-transform: uppercase; color: var(--gc); }
:root[data-theme="light"] .gg-featured .gg-t h2 { color: var(--gold-text); }
.gg-line { display: block; margin-top: 4px; color: var(--ink-1); font: 400 13px/1.4 "Inter", var(--sans); }
.gg-n { flex: none; color: var(--ink-1); font: 600 12px "Inter", var(--sans); }
.gg-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
/* a game tile: the whole tile is the link; it lights up gold on hover */
.gc { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; border-radius: 14px; background: var(--tile-bg); border: 1px solid var(--line-2); box-shadow: 0 3px 0 var(--tile-sh); color: var(--ink); text-decoration: none; transition: background .15s, border-color .15s; }
.gc:hover, .gc:focus-visible { color: var(--ink); background: var(--tile-hover); border-color: var(--gold); }
.gc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gc-mark { flex: none; display: grid; place-items: center; }
.gc-mark .pl-mark { width: 44px; height: 44px; }
.gc-mark .pl-mark .ring { display: none; }
.gc-icon { width: 44px; height: 44px; fill: none; stroke: var(--gold-text); stroke-width: 1.6; }
.gc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-name { font: 700 16px/1.25 var(--display); letter-spacing: -.01em; }
.gc-name .gtag { margin-inline-start: 6px; }
.gc-blurb { display: block; margin-top: 2px; color: var(--ink-2); font: 400 12px/1.35 "Inter", var(--sans); }
.gc-diff { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.gc-diff .dbars { gap: 2px; } .gc-diff .dbars i { width: 7px; height: 11px; }
.gc-diff small { color: var(--gold-text); font: 700 10px "Inter", var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.gc-play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid var(--gold); color: var(--gold-text); font: 700 13px var(--display); transition: background .15s, color .15s; }
.gc-play-t, .gc-play-arrow { display: none; }
.gc-play-tri { width: 16px; height: 16px; fill: currentColor; }
.gc:hover .gc-play, .gc:focus-visible .gc-play { background: var(--gold); color: var(--gold-ink); }
@media (min-width: 561px) {
  .gc-play { display: inline-flex; width: auto; height: 38px; gap: 6px; padding: 0 14px; border-radius: 19px; }
  .gc-play-t, .gc-play-arrow { display: inline; }
  .gc-play-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
  .gc-play-tri { display: none; }
  .gc-mark .pl-mark { width: 52px; height: 52px; }
  .gc { gap: 14px; padding: 12px; }
  .gc-name { font-size: 17px; }
  .gc-blurb { font-size: 13px; }
  .gc-diff { gap: 7px; margin-top: 7px; } .gc-diff .dbars { gap: 3px; } .gc-diff .dbars i { width: 8px; height: 12px; }
}
/* the riddle card: a door back to the riddles (riddle titles in Cormorant) */
.gh-riddle { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); background: var(--bg-2); color: var(--ink); }
.gh-riddle:hover { color: var(--ink); background: color-mix(in srgb, var(--teal) 6%, var(--bg-2)); }
.gh-riddle-art { flex: none; display: grid; place-items: center; width: 56px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--bg-3); color: var(--teal); }
.gh-riddle-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gh-riddle-art svg { width: 22px; height: 22px; }
.gh-riddle-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gh-riddle-txt b { font: 700 19px/1.2 var(--serif); }
.gh-riddle-txt small { color: var(--ink-2); font-size: 13px; }
small.gh-riddle-k { color: var(--teal); font: 600 10.5px "Inter", var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.gh-riddle-go { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); font: 600 14px "Inter", var(--sans); }
.gh-when-back { display: none; }
.gh.is-back .gh-when-new { display: none; } .gh.is-back .gh-when-back { display: inline; }
/* Add Riddle10 to your home screen (phones, back again), and the one-time note that points at the Riddles tab */
.gh-home { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); }
.gh-home[hidden] { display: none; }
.gh-home-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); color: var(--gold-text); }
.gh-home-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gh-home-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.gh-home-txt b { font: 700 17px/1.2 var(--display); }
.gh-home-txt small { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.gh-bubble { position: fixed; z-index: 75; inset: auto 16px calc(var(--tab-h, 68px) + 12px) 16px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; background: var(--gold); color: var(--gold-ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6); }
.gh-bubble[hidden] { display: none; }
.gh-bubble::after { content: ""; position: absolute; bottom: -7px; inset-inline-start: 25%; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.gh-bubble p { margin: 0; flex: 1; font-size: 14px; line-height: 1.4; font-weight: 500; }
.gh-bubble .btn { flex: none; min-height: 44px; background: var(--gold-ink); color: var(--gold); border-color: transparent; }
.gh .pl-badges { margin: 8px 0 0; }
/* computers: the head with Send a challenge link on the right; the two groups side by side, in Admin's order */
@media (min-width: 1000px) {
  .gh { gap: 28px; padding-top: 36px; }
  body.world-games #play-hub.gh { padding-top: 36px; }
  .gh-title h1 { font-size: 44px; }
  .gh-line { font-size: 17px; margin-top: 10px; }
  .gh-eyebrow { font-size: 12px; }
  .gh-chal { display: inline-flex; }
  .gh-first, .gh-bubble, .gh-home { display: none !important; }
  .gh-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .gh-groups.is-one { grid-template-columns: minmax(0, 1fr); }
  .gh-groups .gg { order: 0 !important; }
  .gg { border-radius: 22px; }
  .gg-head { gap: 16px; padding: 20px 20px 18px; }
  .gg-ic { width: 50px; height: 50px; border-radius: 15px; } .gg-ic svg { width: 26px; height: 26px; }
  .gg-t h2 { font-size: 18px; letter-spacing: .12em; }
  .gg-line { margin-top: 5px; font-size: 14px; }
  .gg-n { font-size: 13px; }
  .gg-list { padding: 16px; }
  .gh-riddle { max-width: 560px; padding: 16px 20px; gap: 16px; }
  .gh-riddle-art { width: 64px; height: 48px; }
  .gh-riddle-txt b { font-size: 20px; }
  .gh-cont { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 20px; }
  .gh-cont .sh-go { grid-column: 2; grid-row: 1; width: auto; padding: 0 26px; }
}

/* ---- D: inside every game ---- */
.pl-level { max-width: 1104px; }
.pl-level .back-link { margin: 0 0 2px; color: var(--ink-2); font: 600 13px "Inter", var(--sans); min-height: 44px; width: fit-content; align-self: flex-start; }
.pl-ident { position: relative; display: flex; align-items: center; gap: 12px; text-align: start; margin: 0 0 12px; }
.pl-ident .pl-mark { width: 46px; height: 46px; }
.pl-ident-t { flex: 1; min-width: 0; }
.pl-ident h1, .pl-level .pl-ident h1 { margin: 0; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; text-wrap: balance; font-variation-settings: normal; }
.pl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; font: 700 10px "Inter", var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.pl-meta .dbars { gap: 2px; } .pl-meta .dbars i { width: 7px; height: 11px; }
.pl-meta-lv { display: none; }
.pl-howto-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 22px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 700 17px var(--display); cursor: pointer; }
.pl-howto-btn[hidden] { display: none; }
.pl-howto-btn:hover, .pl-howto-btn:focus-visible { border-color: var(--gold); color: var(--gold-text); }
.pl-level .pl-side .pl-sub, .pl-level .pl-side-rules, .pl-level .pl-challenge { display: none; }
.pl-level .pl-stage { min-height: 0; padding: 14px; border-radius: 20px; box-shadow: none; }
.pl-level .pl-main .pl-rules { display: none; }
.pl-tapline { margin: 14px 4px 0; color: var(--ink-2); font: 400 13px/1.5 "Inter", var(--sans); }
.pl-tapline[hidden] { display: none; }
.pl-tapline b { color: var(--ink); }
/* the bar: phones = Tries or Moves, Hint and Restart in one box, the level row under it; computers = everything in one row */
.pl-level .pl-bar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meter actions" "lv lv"; align-items: center; gap: 10px 8px; margin-top: 14px; }
.pl-level .pl-bar::before { content: ""; grid-row: 1; grid-column: 1 / -1; align-self: stretch; margin: -1px 0; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.pl-level .pl-bar > * { position: relative; }
.pl-level .pl-meter { grid-area: meter; padding: 10px 0 10px 14px; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font: 800 11px var(--display); letter-spacing: .1em; color: var(--ink-2); }
.pl-level .pl-meter b { font: 800 20px var(--display); color: var(--gold-text); font-variant-numeric: lining-nums tabular-nums; }
.pl-level .pl-meter small { font: 500 12px "Inter", var(--sans); }
.pl-level .pl-actions { grid-area: actions; padding: 8px 8px 8px 0; gap: 8px; }
.pl-level .pl-bar .pl-btn { min-height: 44px; background: var(--surface, var(--bg)); border-color: var(--line-2); font: 600 14px "Inter", var(--sans); }
.pl-level .pl-bar .pl-btn.pl-icon { width: 44px; }
.pl-level .pl-levelbar { grid-area: lv; max-width: none; margin: 0; }
.pl-level .pl-lvrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
.pl-level .pl-lvrow .pl-btn { min-height: 44px; justify-content: center; background: var(--bg-2); }
.pl-level .pl-lvbtn { font: 700 15px "Inter", var(--sans); }
.pl-level .pl-lvbtn > span { display: inline; }
.pl-level .pl-lvbtn b { font: 800 16px var(--display); color: var(--gold-text); font-variant-numeric: lining-nums tabular-nums; }
.pl-level .pl-lvbtn small { color: var(--muted); font-weight: 500; }
.pl-level .pl-picker { margin-top: 10px; }
@media (max-width: 400px) { .pl-level .pl-bar .pl-btn:not(.pl-icon) { padding: 0 12px; } .pl-level .pl-actions { gap: 6px; } }
@media (max-width: 359px) { .pl-level .pl-meter { padding-left: 10px; } .pl-level .pl-bar .pl-btn:not(.pl-icon) { padding: 0 10px; } .pl-level .pl-bar .pl-btn:not(.pl-icon) .pl-i { display: none; } }
/* phones: the game box sits 12px in from each edge; the smallest phones keep it edge to edge (as in v27) for room */
@media (max-width: 999px) {
  .pl-level .pl-lv-page { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .pl-level .pl-stage { margin-inline: calc(12px - var(--gutter, 16px)); border-width: 1px; border-radius: 20px; padding: 14px; }
}
@media (max-width: 359px) {
  .pl-level .pl-stage { margin-inline: calc(-1 * var(--gutter, 16px)); border-radius: 0; border-width: 1px 0; padding: 14px 10px; }
}
/* the How to play sheet (phones and tablets) */
.pl-sheet { position: fixed; inset: 0; z-index: 95; display: grid; place-items: end center; background: rgba(4, 6, 12, .6); animation: pl-fade .2s ease; }
.pl-sheet[hidden] { display: none; }
.pl-sheet-card { width: min(560px, 100%); max-height: 80dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; border-top: 1px solid var(--line-2); background: var(--surface, var(--bg-2)); animation: pl-up .25s ease; }
@keyframes pl-up { from { transform: translateY(30px); opacity: 0; } }
.pl-sheet-handle, .pl-win-handle { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); }
.pl-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-sheet-top h2 { margin: 0; font: 800 12px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.pl-sheet-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); cursor: pointer; padding: 0; }
.pl-sheet-close:hover, .pl-sheet-close:focus-visible { color: var(--gold); border-color: var(--gold); }
.pl-sheet-close .pl-i { width: 18px; height: 18px; }
.pl-sheet-blurb { margin: 0; font: 700 16px/1.4 var(--display); color: var(--ink); }
.pl-sheet-rules { margin: 0; color: var(--ink-1, var(--ink-2)); font-size: 15px; line-height: 1.55; }
/* computers: the column beside the game with the title, description, How to play in a card and the Challenge link; one bar */
@media (min-width: 1000px) {
  .pl-level .pl-lv-page { display: grid; grid-template-columns: 340px minmax(0, 720px); gap: 40px; justify-content: center; align-items: start; max-width: 1104px; margin: 0 auto; padding-top: 24px; }
  .pl-level .pl-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
  .pl-level .pl-side > * { margin: 0; }
  .pl-level .back-link { font-size: 14px; margin: 0; }
  .pl-ident { gap: 14px; }
  .pl-ident .pl-mark { width: 56px; height: 56px; }
  .pl-ident h1, .pl-level .pl-ident h1 { font-size: 28px; line-height: 1.1; }
  .pl-meta { margin-top: 6px; font-size: 11px; }
  .pl-meta .dbars { gap: 3px; } .pl-meta .dbars i { width: 8px; height: 12px; }
  .pl-meta-lv { display: inline; }
  .pl-howto-btn, .pl-tapline { display: none !important; }
  .pl-level .pl-side .pl-sub { display: block; margin: 0; color: var(--ink-1); font: 400 15px/1.5 "Inter", var(--sans); }
  .pl-level .pl-side-rules:not([hidden]) { display: block; margin: 0; max-width: none; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
  .pl-side-rules .pl-rules-k { margin-bottom: 6px; font: 800 11px var(--display); letter-spacing: .12em; color: var(--teal); }
  .pl-side-rules p { margin: 0; color: var(--ink-1); font-size: 14px; line-height: 1.55; }
  .pl-level .pl-challenge { display: block; }
  .pl-level .pl-challenge .btn { min-height: 44px; border-radius: 22px; }
  .pl-level .pl-stage { padding: 20px; border-radius: 22px; }
  .pl-level .pl-bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "meter lv actions"; gap: 10px; }
  .pl-level .pl-bar::before { border-radius: 18px; }
  .pl-level .pl-meter { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 8px 16px; }
  .pl-level .pl-meter > span { font-size: 11px; }
  .pl-level .pl-meter small { font-size: 11.5px; }
  .pl-level .pl-levelbar { justify-self: center; padding: 8px 0; }
  .pl-level .pl-lvrow { grid-template-columns: 40px auto 40px; }
  .pl-level .pl-lvrow .pl-btn { min-height: 44px; background: var(--surface, var(--bg)); }
  .pl-level .pl-actions { padding: 8px 10px 8px 14px; border-inline-start: 1px solid var(--line); margin-block: 8px; padding-block: 0; align-self: center; }
}
/* the Challenge race room keeps its own bar */
.pl-game.is-challenge .pl-bar::before { display: none; }

/* ---- D: the win screen. Phones: a navy bottom sheet with a handle; computers: a centred card in the same style ---- */
.pl-win { place-items: end center; padding: 0; background: rgba(4, 6, 12, .6); }
.pl-win-card { position: relative; width: min(560px, 100%); display: flex; flex-direction: column; gap: 14px; text-align: start; padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; border: 0; border-top: 1px solid var(--line-2); background: var(--surface, var(--bg-2)); box-shadow: 0 -20px 50px -24px rgba(0, 0, 0, .55); max-height: calc(100dvh - 24px); overflow-y: auto; animation: pl-up .3s ease; }
.pl-win-card > * { margin: 0; }
.pl-win-top { display: flex; align-items: center; gap: 10px; }
.pl-win-name { flex: 1; min-width: 0; }
.pl-win-top .pl-kicker { font: 800 11px var(--display); letter-spacing: .12em; color: var(--gold-text); }
.pl-win-card h2 { margin: 2px 0 0; font: 700 17px/1.25 var(--display); color: var(--ink); }
.pl-win-top .pl-stars { margin: 0; gap: 1px; }
.pl-win-top .pl-stars i { width: 24px; height: 24px; }
.pl-win-top .pl-stars i .pl-i { width: 22px; height: 22px; }
.pl-win-close { position: static; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); cursor: pointer; padding: 0; }
.pl-win-close .pl-i { width: 18px; height: 18px; }
.pl-win-time { display: flex; align-items: flex-end; gap: 14px; }
.pl-win-time > b { font: 800 56px/1 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.pl-win-time > span { display: flex; flex-direction: column; padding-bottom: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.pl-win-card .pl-win-line { margin: 0; font-size: 13px; color: var(--ink-2); }
.pl-win-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-win-chips .chip { height: auto; padding: 5px 10px; border-radius: 12px; font: 700 12px/1.3 var(--display); letter-spacing: 0; text-transform: none; }
.pl-win-chips .chip.chip-xp { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 800; }
.pl-win-chips .chip.chip-streak { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.pl-win-chips .chip.chip-badge { background: color-mix(in srgb, var(--teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent); color: var(--ink); }
.pl-win-card .pl-explain { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); color: var(--ink-1, var(--ink-2)); font-size: 13px; line-height: 1.5; }
.pl-win-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pl-win-actions .pl-btn { justify-content: center; min-height: 46px; border-radius: 23px; background: var(--bg-2); border-color: var(--line-2); font: 600 14px "Inter", var(--sans); }
.pl-win-actions .pl-primary, .pl-win-actions .pl-primary:hover { grid-column: 1 / -1; min-height: 54px; border-radius: 27px; background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font: 800 16px var(--display); }
.pl-win-actions .pl-primary:hover { filter: brightness(1.05); }
.pl-win-riddle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); background: var(--bg-2); color: var(--ink); }
.pl-win-riddle:hover { color: var(--ink); background: color-mix(in srgb, var(--teal) 8%, var(--bg-2)); }
.pl-win-riddle img, .pl-win-riddle-q { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: top; background: var(--bg-3); }
.pl-win-riddle-q { display: grid; place-items: center; color: var(--teal); font: 700 20px var(--serif); }
.pl-win-riddle-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pl-win-riddle-t small { color: var(--teal); font: 800 10px var(--display); letter-spacing: .12em; text-transform: uppercase; }
.pl-win-riddle-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-win-riddle .pl-i { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 359px) {
  .pl-win-card { gap: 10px; padding-inline: 14px; }
  .pl-win-time > b { font-size: 44px; }
  .pl-win-actions .pl-btn { padding: 0 8px; white-space: nowrap; }
}
@media (min-width: 700px) {
  .pl-win { place-items: center; padding: 16px; }
  .pl-win-card { width: min(440px, 100%); padding: 22px 22px 22px; border-radius: 26px; border: 1px solid var(--line-2); box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .55); animation: pl-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
  .pl-win-handle { display: none; }
}

/* ---- E: the front door (Admin → Games → Home page → Front door) ---- */
.fd { display: flex; flex-direction: column; gap: 28px; padding-top: 28px; padding-bottom: 36px; }
.fd h2 { font-family: var(--display); }
.fd-head { display: flex; flex-direction: column; gap: 10px; }
.fd-head h1 { margin: 0; font: 800 32px/1.12 var(--display); letter-spacing: -.03em; }
.fd-head p { margin: 0; color: var(--ink-2); font: 400 15px/1.55 "Inter", var(--sans); }
.fd-desk { display: none; }
.fd-doors { display: grid; gap: 16px; }
.fd-door { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--bg-2); color: var(--ink); transition: border-color .15s; }
.fd-door-riddles { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.fd-door:hover, .fd-door:focus-within { border-color: var(--gold); }
.fd-door-top, .fd-chal-top { display: flex; align-items: center; gap: 12px; }
.fd-door-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--line-2); }
.fd-door-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fd-ic-gold { background: var(--gold); } .fd-ic-gold svg { stroke: var(--gold-ink); stroke-width: 2.1; }
.fd-door h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.fd-door-top small { display: block; color: var(--ink-2); font: 400 13px/1.4 "Inter", var(--sans); }
.fd-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fd-kinds li { padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.fd-kinds b { display: block; font: 700 13px var(--display); }
.fd-kinds small { display: none; }
.fd-note { margin: 0; color: var(--ink-1); font: 400 13px/1.55 "Inter", var(--sans); }
.fd-note b { color: var(--ink); font-weight: 600; }
.fd-go { display: flex; flex-direction: column; gap: 8px; }
.fd-go small { color: var(--ink-2); font: 400 12px "Inter", var(--sans); text-align: center; }
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 26px; font: 800 15px var(--display); text-decoration: none; transition: background .15s, color .15s; }
.fd-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fd-btn-gold, .fd-btn-gold:hover { background: var(--gold); color: var(--gold-ink); }
/* no filter or transform on a hovered door button: either one would shrink the door-wide link (::after) to the button, and the
   cursor would flicker between the door and the button */
.fd-btn-gold:hover, .fd-door:hover .fd-btn-gold { background: color-mix(in srgb, var(--gold) 85%, #fff); }
.fd-btn-line { border: 1.5px solid var(--gold); color: var(--gold-text); }
.fd-btn-line:hover, .fd-door:hover .fd-btn-line { background: var(--gold); color: var(--gold-ink); }
.fd-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.fd-down { display: none; }
/* the whole door opens its button's page (the button stays the real link) */
.fd-stretch::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.fd-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fd-group { --gc: var(--c-puzzle); display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 40%, transparent); }
.fd-group-word { --gc: var(--c-word); }
.fd-group b { font: 800 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gc); }
.fd-group small { color: var(--ink-1); font: 400 12px/1.35 "Inter", var(--sans); }
.fd-k { margin: 0; color: var(--ink-2); font: 800 12px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.fd-how { display: flex; flex-direction: column; gap: 10px; }
.fd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.fd-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; background: var(--line-2); color: var(--ink); font: 800 13px var(--display); }
.fd-steps span b { display: block; font: 700 15px var(--display); }
.fd-steps small, .fd-chal-steps small { display: block; color: var(--ink-2); font: 400 13px/1.5 "Inter", var(--sans); }
.fd-chal { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: var(--bg-2); }
.fd-chal-t { flex: 1; min-width: 0; }
.fd-chal h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.fd-chal-t small { display: block; margin-top: 4px; color: var(--ink-2); font: 400 13px/1.5 "Inter", var(--sans); }
.fd-chal-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-chal-steps li { padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }
.fd-chal-steps .fd-num { width: 30px; height: 30px; border-radius: 15px; background: var(--gold); color: var(--gold-ink); }
.fd-chal-steps li > b:not(.fd-num) { display: block; margin-top: 10px; font: 700 16px var(--display); }
.fd-chal-steps li small { margin-top: 4px; color: var(--ink-1); }
.fd-chal-go { display: flex; flex-direction: column; gap: 8px; }
.fd-chal-go small { color: var(--ink-2); font: 400 12px/1.5 "Inter", var(--sans); text-align: center; }
.fd-pair { display: grid; gap: 28px; }
.fd-newest, .fd-easy { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fd-riddle { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); overflow: hidden; }
.fd-stage { display: block; height: 240px; background: #070a12; }
.fd-stage img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* the whole picture (riddle pictures are tall) */
.fd-quote { display: flex; align-items: center; justify-content: center; height: 100%; padding: 18px; color: #f7eedc; font: 600 20px/1.3 var(--serif); text-align: center; overflow: hidden; }
.fd-riddle-foot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px 16px; }
.fd-riddle-t b { display: block; font: 700 17px/1.25 var(--display); }
.fd-riddle-t small { color: var(--ink-2); font: 400 13px "Inter", var(--sans); }
.fd-newest > .fd-k { display: flex; align-items: center; min-height: 44px; }
.fd-easy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fd-easy-head a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--gold-text); font: 700 14px "Inter", var(--sans); }
.fd-easy-head a svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.fd-easy-list { padding: 0; }
@media (min-width: 700px) {
  .fd-riddle-foot { flex-direction: row; align-items: center; }
  .fd-riddle-t { flex: 1; min-width: 0; }
  .fd-chal-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .fd { max-width: 1132px; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
  .fd-desk { display: inline; } .fd-phone { display: none; }
  .fd-head { align-items: center; text-align: center; gap: 14px; }
  .fd-head h1 { font-size: 50px; max-width: 820px; line-height: 1.08; }
  .fd-head p { font-size: 19px; max-width: 640px; line-height: 1.5; }
  .fd-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .fd-door { gap: 16px; padding: 28px; border-radius: 24px; }
  .fd-stretch::after { border-radius: 24px; }
  .fd-door-ic { width: 52px; height: 52px; border-radius: 15px; } .fd-door-ic svg { width: 26px; height: 26px; }
  .fd-door h2 { font-size: 28px; }
  .fd-door-top small { font-size: 14px; }
  .fd-kinds { gap: 10px; }
  .fd-kinds li { padding: 12px; border-radius: 14px; text-align: start; }
  .fd-kinds b { font-size: 15px; }
  .fd-kinds small { display: block; color: var(--ink-2); font: 400 12px/1.4 "Inter", var(--sans); }
  .fd-groups { gap: 10px; }
  .fd-group { padding: 12px; border-radius: 14px; }
  .fd-group b { font-size: 13px; }
  .fd-note { font-size: 14px; line-height: 1.6; }
  .fd-door-riddles .fd-go { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; }
  .fd-door-games .fd-go { margin-top: auto; align-items: flex-start; }
  .fd-go small { font-size: 13px; text-align: start; }
  .fd-down { display: block; } .fd-up { display: none; }
  .fd-how { gap: 18px; }
  .fd-how .fd-k { text-align: center; font-size: 14px; }
  .fd-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .fd-steps li { padding: 16px; }
  .fd-chal { padding: 26px; border-radius: 24px; gap: 18px; }
  .fd-chal-top { gap: 16px; }
  .fd-chal-top .fd-door-ic { width: 52px; height: 52px; }
  .fd-chal h2 { font-size: 26px; }
  .fd-chal-t small { font-size: 14px; margin-top: 2px; }
  .fd-chal-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .fd-chal-steps li { padding: 16px; }
  .fd-chal-go { flex-direction: row; align-items: center; gap: 16px; }
  .fd-chal-go small { font-size: 13px; text-align: start; }
  .fd-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .fd-k { font-size: 14px; }
  .fd-riddle-t b { font-size: 18px; }
  .fd-stage { height: 300px; }
}

/* v39: "Solving guides" (three blog posts) on the front door, on computers only. Under 1000px it is not shown at all,
   so the phone and tablet front door stays exactly as it was. */
.fd-guides { display: none; }
@media (min-width: 1000px) {
  .fd-guides { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .fd-guides-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fd-guides-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; min-height: 64px; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); color: var(--ink); font: 700 15px/1.35 var(--display); }
  .fd-guides-list a:hover { border-color: var(--gold); color: var(--gold-text); }
  .fd-guides-list svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
}