/* Two-Ring Outpost — a sorting yard with two rope rings, their gates and a gatekeeper owl.
   The play board is always light (the kit keeps it so in dark mode too). */
.gk { --a: #1F9E92; --b: #E8743B; --a-ink: #11766C; --b-ink: #AD4716; --ink: #1F2D3A;
  width: 100%; display: grid; gap: 12px 20px; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr; grid-template-areas: "gate side" "yard side"; align-items: start; }
.gk > .gk-gate { grid-area: gate; } .gk > .gk-yardcol { grid-area: yard; } .gk > .gk-sidebox { grid-area: side; }
.gk-yardcol { display: grid; gap: 8px; min-width: 0; }
.gk-count { grid-template-areas: "gate side" "grid side"; } .gk-count > .gk-gridwrap { grid-area: grid; }

/* ----- rule cards, gates and the keeper ----- */
.gk-gate { display: grid; grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr); gap: 10px; align-items: center; }
.gk-card { position: relative; min-height: 58px; height: 100%; perspective: 700px; }
.gk-card[data-ring="A"] { --ring-ink: var(--a-ink); } .gk-card[data-ring="B"] { --ring-ink: var(--b-ink); }
.gk-face { position: relative; height: 100%; min-height: 58px; display: grid; align-content: center; gap: 1px; padding: 7px 12px; border-radius: 14px; border: 2.5px solid var(--ring); background: #fff; color: var(--ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--ring) 70%, #1F2D3A); }
.gk-face small { font: 800 .68rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ring-ink); }
.gk-face b { font: 800 1.02rem/1.2 var(--f-display); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gk-sw { width: 18px; height: 18px; flex: none; }
.gk-op { display: inline-block; padding: 0 5px; margin: 0 1px; border-radius: 6px; background: #1F2D3A; color: #FFC65C; font: 800 .82em var(--f-ui); letter-spacing: .04em; line-height: 1.45; vertical-align: .06em; }
.gk-stamp { position: absolute; right: 8px; top: 6px; }
.gk-card.open .gk-stamp:not([hidden]) { animation: gkStamp .6s .7s var(--spring) both; }
@keyframes gkStamp { from { transform: scale(2) rotate(-20deg); opacity: 0; } }
/* the gate: two wooden doors and a lock over the card */
.gk-doors { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; transform-style: preserve-3d; }
.gk-door { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(90deg, #A57B47 0 10px, #94693A 10px 12px); border: 2.5px solid #5B3F1E; box-shadow: inset 0 5px 0 var(--ring); transition: transform .85s cubic-bezier(.5, 0, .2, 1); backface-visibility: hidden; }
.gk-door.l { left: 0; border-radius: 14px 3px 3px 14px; transform-origin: left center; }
.gk-door.r { right: 0; border-radius: 3px 14px 14px 3px; transform-origin: right center; }
.gk-lock { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%; background: #FFB547; border: 2.5px solid #5B3F1E; box-shadow: 0 2px 0 #5B3F1E; transition: transform .5s ease-in, opacity .5s ease-in; }
.gk-lock b { font: 900 1.05rem var(--f-display); color: #1F2D3A; }
.gk-dl { position: absolute; left: 7px; top: 5px; padding: 1px 6px; border-radius: 6px; background: rgba(31, 45, 58, .82); color: #fff; font: 800 .6rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; transition: opacity .3s; }
.gk-card.open .gk-dl { opacity: 0; }
.gk-card.open .gk-door.l { transform: rotateY(-108deg); } .gk-card.open .gk-door.r { transform: rotateY(108deg); }
.gk-card.open .gk-lock { transform: translateY(26px) rotate(50deg) scale(.5); opacity: 0; }
.gk-card.open .gk-face { animation: gkGlow 1.2s .5s ease-out; }
.gk-card.cheer:not(.open) .gk-face { animation: gkGlow 1.1s ease-out; }
@keyframes gkGlow { 30% { box-shadow: 0 4px 0 color-mix(in srgb, var(--ring) 70%, #1F2D3A), 0 0 0 7px color-mix(in srgb, var(--ring) 35%, transparent); } }
.gk-verdict { position: absolute; right: 8px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--spring); font: 900 1rem var(--f-ui); color: #fff; border: 2px solid #fff; }
.gk-card.say-yes .gk-verdict { opacity: 1; transform: none; background: #1E8A57; } .gk-card.say-yes .gk-verdict::before { content: '✓'; }
.gk-card.say-no .gk-verdict { opacity: 1; transform: none; background: #C2402F; } .gk-card.say-no .gk-verdict::before { content: '✕'; }
.gk-card.say-yes .gk-door.l { transform: rotateY(-24deg); } .gk-card.say-yes .gk-door.r { transform: rotateY(24deg); }
.gk-card.rattle .gk-doors { animation: gkRattle .5s ease; }
@keyframes gkRattle { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.gk-keeper { width: 60px; height: 60px; justify-self: center; }
.gk-keeper .cx { width: 100%; height: 100%; transform-origin: 50% 95%; }
.gk-keeper.nod .cx { animation: gkNod .5s ease-in-out 2; }
.gk-keeper.shake .cx { animation: gkShake .65s ease-in-out; }
@keyframes gkNod { 50% { transform: translateY(3px) rotate(3deg); } }
@keyframes gkShake { 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-5deg); } 90% { transform: rotate(2deg); } }

/* ----- the yard ----- */
.gk-yardwrap { position: relative; width: 100%; }
.gk-yard { display: block; width: 100%; height: auto; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.gk-ground { fill: #EEF5E5; stroke: #B9D3A6; stroke-width: 3; }
.gk-tint { transition: fill .2s; }
.gk-tint.a { fill: rgba(31, 158, 146, .11); } .gk-tint.b { fill: rgba(232, 116, 59, .11); } .gk-tint.both { fill: rgba(170, 150, 90, .2); }
.gk-yard[data-over="A"] .gk-tint.a, .gk-yard[data-over="B"] .gk-tint.b, .gk-yard[data-over="both"] .gk-tint.both { fill: rgba(255, 196, 64, .45); }
.gk-yard[data-over="out"] .gk-ground { fill: #F8EFC9; }
.gk-ring { fill: none; stroke-width: 6; }
.gk-ring.a { stroke: var(--a); } .gk-ring.b { stroke: var(--b); }
.gk-ring.glow { animation: gkRing .9s ease-out; }
@keyframes gkRing { 40% { stroke-width: 12; } }
.gk-badge text { font: 900 16px var(--f-display); fill: #fff; }
.gk-shade { fill: url(#gk-hatch); opacity: 0; transition: opacity .25s; pointer-events: none; }
.gk-shade.on { opacity: 1; }
.gk-shades.is-done .gk-shade.on { animation: gkShadeIn 1s ease; }
@keyframes gkShadeIn { 30% { opacity: .4; } }
.gk-regions .gk-yard { cursor: pointer; }

.gk-layer { position: absolute; inset: 0; pointer-events: none; container-type: inline-size; }
/* --w is the art's width in % of the yard; the button around it is never smaller than a 44 px tap */
.gk-tok { position: absolute; transform: translate(-50%, -50%); width: max(44px, calc(var(--w, 6) * 1cqw)); aspect-ratio: 1; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; border-radius: 50%; color: inherit; }
.gk-art { position: relative; display: grid; place-items: center; width: calc(var(--w, 6) * 1cqw); aspect-ratio: 1; border-radius: 50%; isolation: isolate; pointer-events: none; }
.gk-art svg { width: 100%; height: 100%; display: block; }
.gk-art::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; z-index: -1; }
button.gk-tok { pointer-events: auto; cursor: grab; touch-action: none; }
button.gk-tok:focus-visible { outline: none; } button.gk-tok:focus-visible .gk-art { outline: 3px solid #6A44C9; outline-offset: 3px; }
.gk-tok.clue .gk-art::before, .gk-h.clue { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px rgba(31, 45, 58, .22); }
.gk-tok.test .gk-art::before, .gk-h.test { background: #FFF3CF; box-shadow: 0 0 0 2.5px #E0A82E; }
.gk-tok.bad .gk-art::before { box-shadow: 0 0 0 2.5px #C2402F; background: rgba(251, 233, 230, .9); }
.gk-tok.ok .gk-art::before { box-shadow: 0 0 0 2.5px #1E8A57; }
.gk-tok.lit .gk-art::before { background: #FFE48A; box-shadow: 0 0 0 2.5px #E0A82E, 0 0 12px 3px rgba(255, 210, 74, .9); }
/* what the halos mean, under the yard on detective rounds */
.gk-halokey { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font: 700 .78rem var(--f-ui); color: #464B57; }
.gk-halokey span { display: inline-flex; align-items: center; gap: 6px; }
.gk-h { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.gk-h.home { background: #FFF8E6; box-shadow: inset 0 0 0 1.5px #1F2D3A; }
/* detective rounds on wide screens: halo key and a short pattern key share one row under the yard */
.gk-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.gk-keys .gk-legend { margin: 0; gap: 4px 10px; } .gk-keys .gk-legend i { display: none; }
.gk-tok.dim { opacity: .55; }
.gk-tok.is-dragging { opacity: .3; }
.gk-x { position: absolute; right: -6px; top: -6px; width: 17px; height: 17px; border-radius: 50%; background: #C2402F; border: 2px solid #fff; }
.gk-x::before, .gk-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 2.4px; margin: -1.2px 0 0 -4.5px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.gk-x::after { transform: rotate(-45deg); }
.gk-tok.gk-fly { animation: gkFly .6s cubic-bezier(.3, 1.2, .5, 1) both; animation-delay: var(--d, 0ms); }
@keyframes gkFly { from { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(1.2); } }
.gk-ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); }

/* ----- words to know: new shape words, each with a small picture ----- */
.gk-words { min-width: 0; border-radius: 14px; background: #FFF8E6; border: 1.5px solid #F1D48E; padding: 2px 12px; color: #1F2D3A; }
.gk-words summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 800 .9rem var(--f-ui); }
.gk-words ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.gk-word { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; font-size: .92rem; line-height: 1.35; }
.gk-wpic { display: block; }

/* ----- side panel: tray, put-it-in buttons, rule pickers ----- */
.gk-sidebox { display: grid; gap: 10px; align-content: start; min-width: 0; }
.gk-trayhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; margin: 0; font: 800 .84rem var(--f-ui); color: #464B57; }
.gk-meter { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #5E6472; }
.gk-tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 16px; background: #F4EFE3; border: 2px dashed rgba(31, 45, 58, .2); min-height: 72px; align-content: flex-start; }
.gk-chip { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 13px; border: 2px solid rgba(31, 45, 58, .18); background: #fff; box-shadow: 0 3px 0 rgba(31, 45, 58, .14); touch-action: none; cursor: grab; transition: transform .12s; }
.gk-chip.on { border-color: #1F2D3A; background: #FFF3CF; box-shadow: 0 3px 0 #1F2D3A; transform: translateY(-3px); }
.gk-chip.suggest { outline: 3px dashed #6A44C9; outline-offset: 2px; }
.gk-chip.is-dragging { opacity: .35; }
.gk-chip[disabled] { cursor: not-allowed; opacity: .4; filter: grayscale(.6); box-shadow: none; }
.gk-empty { margin: 0; align-self: center; color: #5E6472; font-size: .9rem; }
.gk-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.gk-zl { grid-column: 1 / -1; margin: 0; font: 800 .8rem var(--f-ui); color: #5E6472; }
.gk-zone { display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 52px; padding: 4px 2px; border-radius: 12px; border: 2px solid #1F2D3A; background: #fff; color: #1F2D3A; font: 800 .78rem/1.1 var(--f-ui); box-shadow: 0 3px 0 #1F2D3A; }
.gk-zone[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; }
.gk-venn { width: 34px; height: 22px; display: block; flex: none; }
.gk-venn .v { fill: #fff; } .gk-venn .v.on { fill: #FFC440; }
.gk-picks { display: grid; gap: 8px; } .gk-picks.n2 { grid-template-columns: 1fr 1fr; }
.gk-pnote { grid-column: 1 / -1; margin: 0; font: 700 .8rem var(--f-ui); color: #464B57; }
.gk-guess.is-done .gk-pnote { display: none; }
.gk-pick { display: grid; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid var(--ring); background: color-mix(in srgb, var(--ring) 6%, #fff); }
.gk-pick[data-ring="A"] { --ring-ink: var(--a-ink); } .gk-pick[data-ring="B"] { --ring-ink: var(--b-ink); }
.gk-ph { margin: 0; font: 800 .8rem var(--f-ui); color: var(--ring-ink); }
.gk-opts { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; }
.n2 .gk-opts { grid-template-columns: 1fr; }
.gk-rule { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 5px 10px; border-radius: 10px; border: 2px solid rgba(31, 45, 58, .18); background: #fff; color: #1F2D3A; font: 700 .9rem/1.2 var(--f-ui); text-align: left; }
.gk-rule.on { border-color: #1F2D3A; background: #FFF3CF; box-shadow: 0 3px 0 #1F2D3A; }
.gk-rule.out { opacity: .5; text-decoration: line-through; cursor: not-allowed; }
.gk-rule.right { border-color: #1E8A57; background: #E1F4EA; box-shadow: 0 3px 0 #1E8A57; opacity: 1; }
.gk-rule[disabled]:not(.out):not(.right) { opacity: .6; }
.gk-pick.is-locked { border-style: solid; background: #E1F4EA; }
.gk-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; background: #FFF8E6; border: 1.5px solid #F1D48E; }
.gk-rating > div { display: grid; flex: 1; min-width: 150px; }
.gk-rating b { font: 800 1.05rem var(--f-display); } .gk-rating span { font-size: .86rem; color: #464B57; }
.gk-cfbtn { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 2px solid #1F2D3A; background: #fff; color: #1F2D3A; font: 800 .86rem var(--f-ui); box-shadow: 0 2px 0 #1F2D3A; }
.gk-guess.is-done .gk-trayhead, .gk-guess.is-done .gk-tray, .gk-guess.is-done .gk-zones { display: none; }
.gk-lenses { display: inline-flex; gap: 1px; vertical-align: middle; }
.gk-lenses i { display: block; width: 16px; height: 16px; color: rgba(94, 100, 114, .3); }
.gk-lenses i.on { color: #B57A08; }
.gk-lenses svg { width: 100%; height: 100%; display: block; }
.gk-lenses.is-tests i.on { color: #6A44C9; }
.gk-rating .gk-lenses i { width: 26px; height: 26px; }

.gk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0; font: 700 .8rem var(--f-ui); color: #464B57; }
.gk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.gk-legend .gk-sw { width: 16px; height: 16px; }
.gk-guess.is-done .gk-legend { display: none; }

/* ----- level 3: lamps, regions, counting ----- */
.gk-line { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.gk-lamp { position: relative; display: grid; place-items: center; height: 70px; padding: 0; border-radius: 16px; border: 2px solid rgba(31, 45, 58, .18); background: #fff; box-shadow: 0 3px 0 rgba(31, 45, 58, .14); transition: background .2s, box-shadow .2s; }
.gk-lamp.on { background: radial-gradient(circle at 50% 45%, #FFF6C8, #FFE07A); border-color: #C98A12; box-shadow: 0 0 0 3px rgba(255, 200, 60, .5), 0 3px 0 #C98A12; }
.gk-bulb { position: absolute; top: 5px; right: 6px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid #1F2D3A; }
.gk-lamp.on .gk-bulb { background: #FFD24A; box-shadow: 0 0 8px 3px rgba(255, 196, 40, .9); }
.gk-lamp.on .gk-bulb::after { content: ''; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid #1F2D3A; border-width: 0 2px 2px 0; transform: rotate(40deg); }
.gk-lamp[disabled] { cursor: default; }
.gk-regbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gk-regbtn { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border-radius: 14px; border: 2px solid rgba(31, 45, 58, .2); background: #fff; color: #1F2D3A; font: 800 .92rem/1.15 var(--f-ui); text-align: left; box-shadow: 0 3px 0 rgba(31, 45, 58, .12); }
.gk-regbtn .gk-venn { width: 46px; height: 30px; }
.gk-regbtn.on { border-color: #1F2D3A; background: #FFF3CF; box-shadow: 0 3px 0 #1F2D3A; }
.gk-regbtn.on span::after { content: ' ✓'; }
.gk-regbtn[disabled] { cursor: default; }
.gk-gridwrap { display: grid; gap: 8px; }
.gk-gridh { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 .86rem/1.3 var(--f-ui); color: #464B57; }
.gk-gridh p { margin: 0; }
.gk-mini { flex: none; }
.gk-minimap { display: block; width: 84px; height: 54px; }
.gk-minimap .m { fill: #fff; } .gk-minimap .m.on { fill: url(#gk-hatch); }
.gk-minimap text { font: 900 12px var(--f-display); }
.gk-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.gk-count > .gk-gridwrap { align-self: center; }
.gk-cell { position: relative; height: 54px; padding: 0; border-radius: 10px; border: 2px solid rgba(31, 45, 58, .16); background: #fff; color: #1F2D3A; font: 800 1rem var(--f-math); }
.gk-cell.on { background: #FFF3CF; border-color: #C98A12; box-shadow: inset 0 -4px 0 #FFC440; }
.gk-dots { position: absolute; left: 50%; bottom: 3px; display: flex; gap: 3px; transform: translateX(-50%); }
.gk-grid.is-done .gk-cell.in-a .gk-dots::before, .gk-grid.is-done .gk-cell.in-b .gk-dots::after { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.gk-grid.is-done .gk-cell.in-a .gk-dots::before { background: var(--a); }
.gk-grid.is-done .gk-cell.in-b .gk-dots::after { background: var(--b); border-radius: 1px; }
.gk-grid.is-done .gk-cell:not(.fit) { color: #5E6472; background: #F6F4EE; border-color: rgba(31, 45, 58, .1); }
.gk-grid.is-done .gk-cell.fit { border-color: #1E8A57; background: #E1F4EA; box-shadow: none; }
.gk-padwrap { display: grid; justify-items: center; }
.gk-key { display: inline-block; width: 9px; height: 9px; margin: 0 2px 0 8px; vertical-align: .05em; }
.gk-key:first-child { margin-left: 0; }
.gk-key.a { border-radius: 50%; background: var(--a); } .gk-key.b { border-radius: 1px; background: var(--b); }
.gk-key.fit { width: 14px; height: 12px; border-radius: 4px; background: #E1F4EA; border: 2px solid #1E8A57; }

/* ----- the case file (home panel and modal; follows the site theme) ----- */
.gk-casefile h3 { margin: 14px 0 6px; font: 800 .74rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.gk-casefile > p { margin: 8px 0 0; }
.gk-cf-bar { height: 8px; margin-top: 10px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.gk-cf-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.gk-cf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gk-cf-list li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 8px; border-radius: 10px; font-size: .84rem; font-weight: 700; }
.gk-cf-list li.got { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ink); }
.gk-cf-list li.got > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.gk-cf-list li.locked { width: 30px; justify-content: center; background: var(--panel-2); border: 1.5px dashed color-mix(in srgb, var(--ink-3) 45%, transparent); color: var(--ink-2); }
.gk-casefile .gk-lenses i { width: 14px; height: 14px; color: color-mix(in srgb, var(--ink-3) 40%, transparent); }
.gk-casefile .gk-lenses i.on { color: var(--gk-lens, #A86E00); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gk-casefile { --gk-lens: var(--accent-2); } }
:root[data-theme="dark"] .gk-casefile { --gk-lens: var(--accent-2); }
.gk-cf-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 3px; font-size: .82rem; color: var(--ink-2); }
.gk-cf-key li { display: flex; align-items: center; gap: 6px; }
.gk-casefile.in-modal .ar-actions { margin-top: 16px; justify-content: flex-start; }
/* results screen (levels 4 and 5): the rules cracked on this level */
.gk-haul { width: min(100%, 560px); display: grid; justify-items: center; gap: 12px; padding: 16px 18px 18px; border-radius: 18px; background: var(--panel); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.gk-haul h2 { font-size: 1.15rem; }
.gk-haul .gk-cf-list { justify-content: center; }
.gk-haul .gk-cf-list li { min-height: 34px; font-size: .9rem; }
.gk-haul .gk-cfbtn { background: var(--panel); color: var(--ink); border-color: currentColor; box-shadow: 0 2px 0 currentColor; }
@media (prefers-reduced-motion: no-preference) { .gk-haul li { animation: gkPop .45s var(--spring) both; } .gk-haul li:nth-child(2) { animation-delay: .1s; } .gk-haul li:nth-child(3) { animation-delay: .2s; } .gk-haul li:nth-child(n+4) { animation-delay: .3s; } }
@keyframes gkPop { from { transform: scale(.6); opacity: 0; } }
[data-motion="reduced"] .gk-haul li { animation: none; }

/* ----- home banner: keep the gates clear of the title ----- */
/* the owl in the banner is a nested portrait: undo the kit's full-bleed rule for banner svgs */
.ar-banner svg.cx-odo { position: static; width: 132px; height: 132px; }
@media (max-width: 980px) { .ar-banner .gk-motif { display: none; } }

@media (prefers-reduced-motion: reduce) { .gk-door, .gk-lock, .gk-verdict { transition: none; } .gk-keeper .cx { animation: none !important; } }
[data-motion="reduced"] .gk-door, [data-motion="reduced"] .gk-lock { transition: none; } [data-motion="reduced"] .gk-keeper .cx { animation: none !important; }

/* ----- narrower screens: one column ----- */
@media (max-width: 900px) {
  .gk { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 10px; }
  .gk { grid-template-rows: none; }
  .gk > * { grid-area: auto !important; }
}
@media (max-width: 640px) {
  /* the gate row stays in sight under the top bar: test reactions and the opening are never off screen */
  .gk.is-compact > .gk-gate { position: sticky; top: var(--gk-top, 62px); z-index: 8; margin: -6px -14px 0; padding: 6px 14px; background: var(--board, #fff); }
  .gk.is-compact > .gk-picks { margin: 0 -14px; padding: 2px 14px 8px; background: var(--board, #fff); border-bottom: 1px solid rgba(31, 45, 58, .08); }
  .gk-picks { gap: 6px; } .gk-pick { gap: 3px; padding: 5px; border-radius: 12px; } .gk-ph { font-size: .74rem; }
  .gk-pnote { font-size: .76rem; }
  .gk-opts { gap: 4px; }
  .gk-rating { padding: 8px 10px; gap: 6px 10px; } .gk-rating .gk-lenses i { width: 20px; height: 20px; } .gk-rating b { font-size: .95rem; } .gk-rating span { font-size: .8rem; }
  .gk-gate { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; }
  .gk-keeper { width: 46px; height: 46px; }
  .gk-face { padding: 6px 9px; min-height: 54px; }
  .gk-face b { font-size: .9rem; }
  /* tray chips stay 44 px, a child's fingertip, on every phone */
  .gk-chip { width: 44px; height: 44px; border-radius: 11px; } .gk-chip svg { width: 36px; height: 36px; }
  .gk-tray { padding: 6px; gap: 4px; min-height: 0; }
  .gk-zl { display: none; }
  .gk-guess .gk-zl { display: block; } /* on detective rounds the buttons are a prediction: say so */
  .gk-legend { gap: 4px 12px; font-size: .76rem; } .gk-legend i { display: none; } /* swatches show the pattern; the words say the color */
  .gk-zone { font-size: .76rem; min-height: 50px; }
  .gk-rule { font-size: .8rem; line-height: 1.15; min-height: 36px; padding: 3px 8px; gap: 5px; } .gk-rule .gk-sw { width: 15px; height: 15px; }
  .gk-lamp { height: 64px; }
  .gk-line { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
  .gk-regbtn { font-size: .84rem; gap: 6px; padding: 6px 8px; }
  .gk-regbtn .gk-venn { width: 38px; height: 25px; }
  /* the count round fits grid and pad above the dock: ten narrow columns, a shorter pad */
  .gk-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
  .gk-cell { height: 34px; border-radius: 8px; font-size: .86rem; } .gk-dots { bottom: 2px; gap: 2px; }
  .gk-grid.is-done .gk-cell.in-a .gk-dots::before, .gk-grid.is-done .gk-cell.in-b .gk-dots::after { width: 5px; height: 5px; }
  .gk-gridh { font-size: .78rem; gap: 8px; } .gk-minimap { width: 56px; height: 36px; }
  .gk-count .np-display { min-height: 46px; font-size: 1.6rem; } .gk-count .np-keys { gap: 6px; } .gk-count .np-k { min-height: 40px; }
  .gk-regions .gk-regbtns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .gk-regions .gk-regbtn { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; font-size: .76rem; text-align: center; }
}
/* on phones, things scrolled into view (by focus or a script) clear the pinned rows above and the dock below */
@media (max-width: 640px) { .gk.is-compact :is(.gk-chip, .gk-zone, .gk-tray, .gk-zones, .gk-yardwrap, button.gk-tok, .gk-lamp, .gk-regbtn, .gk-cell, .np-display, .np-k, .gk-rule) { scroll-margin-top: var(--gk-pinned, 140px); scroll-margin-bottom: 110px; } }
/* phones also pin the candidate cards under the gate row while testing, so they are in reach after any scroll */
@media (max-width: 640px) {
  .gk.is-compact.gk-guess:not(.is-done) > .gk-picks { position: sticky; top: calc(var(--gk-top, 62px) + var(--gk-gateh, 70px)); z-index: 7; }
}
@media (max-width: 640px) and (max-height: 700px) { .gk-pnote { display: none; } .gk-rule { min-height: 34px; } }
@media (max-width: 360px) {
  .gk-rule { font-size: .74rem; padding: 3px 6px; }
  .gk-tray { gap: 3px; padding: 4px; }
  .gk-face { padding: 5px 8px; min-height: 50px; } .gk-face b { font-size: .8rem; } .gk-face small { font-size: .6rem; }
  .gk-cell { height: 30px; } .gk-lamp { height: 56px; } .gk-line { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
  .gk-zone span { font-size: .7rem; }
}

/* Kit top bar: the kicker sits on a translucent sticky bar. In the dark theme, once the page scrolls the
   light board under it, --ink-3 drops to 4.4:1. --ink-2 keeps it above 4.5:1. (Reported for a kit-wide fix.) */
.ar-top .ar-brand small { color: var(--ink-2); }