body{background:radial-gradient(ellipse at 85% 0%,#e3eefb,transparent 650px)}
.game-brand-mark{background:#e1eafa;color:#5276a5;font-weight:900}
.top{flex-wrap:nowrap}
.top .header-actions{flex:0 0 auto;min-width:0;margin-left:auto}
#cancel{display:block;max-width:100%;min-height:44px;margin:12px auto;white-space:normal;line-height:1.3}
.eye-game{max-width:1100px;margin:auto;padding:clamp(12px,3vw,28px)}
.eye-game h2{text-align:center;font-size:clamp(1.1rem,3vw,1.45rem)}
.level-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px}
.level-picker button{display:grid;gap:4px;min-height:60px;padding:10px 4px;border:2px solid #e0e6ee;border-radius:13px;background:#fafbfe;color:#43584e}
.level-picker strong{font-size:1rem}.level-picker small{font-size:.75rem;color:#66798e}
.level-picker button[aria-pressed=true]{border-color:#8aaad0;background:#edf4ff;color:#40638b}
.instructions{max-width:700px;margin:12px auto 22px;text-align:center;color:#607484;font-size:.9rem;line-height:1.6}.instructions p{margin:8px 0}
.game-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;text-align:center}
.game-stats>div{display:grid;gap:3px;padding:9px 3px;border-radius:12px;background:#f0f5fa}
.game-stats strong{color:#42648d;font-size:clamp(1.1rem,4vw,1.5rem);font-variant-numeric:tabular-nums}.game-stats span{color:#6b7c8c;font-size:.72rem}
.scene-name{text-align:center;margin:6px 0;color:#718497;font-size:.75rem;font-weight:750}
.pair-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pair-board figure{display:flex;flex-direction:column;min-width:0;min-height:0;margin:0}
.pair-board figcaption{text-align:center;font-size:.72rem;line-height:1.3;font-weight:750;color:#6b7c8c;padding:0 0 5px}
.picture{position:relative;min-width:0;min-height:0;aspect-ratio:3/2;border:2px solid #d9e5ee;border-radius:15px;background:#f4f7f9;cursor:crosshair;overflow:hidden;touch-action:auto}
.picture:focus-visible{outline:3px solid #628bc0;outline-offset:2px}.picture>svg{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none}
.found-ring{fill:#69b77a1c;stroke:#25834f;stroke-width:4;vector-effect:non-scaling-stroke;paint-order:stroke;filter:drop-shadow(0 0 2px white)}
.found-mark,.revealed-mark,.miss-mark,.search-cursor{pointer-events:none}
.revealed-ring{fill:#ffb73d14;stroke:#ba6500;stroke-width:4;stroke-dasharray:8 5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px white)}
.miss-mark{stroke:#d85a50;stroke-width:4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.search-cursor{visibility:hidden;fill:#fff8;stroke:#284c78;stroke-width:3;vector-effect:non-scaling-stroke}
.picture:focus-visible .search-cursor{visibility:visible}
html[data-ocko-phase=given-up] .picture,html[data-ocko-phase=finished] .picture{cursor:default}
html[data-ocko-phase=given-up] .search-cursor,html[data-ocko-phase=finished] .search-cursor{visibility:hidden}
.message{min-height:1.4em;margin:12px 0;text-align:center;color:#61798a;font-size:.85rem}
.message[data-tone=hit]{color:#257548}.message[data-tone=miss]{color:#b24b3f}
.summary{display:flex;justify-content:center;align-items:center;gap:14px;margin:12px 0;padding:12px;border-radius:14px;color:#2c7650;background:#ecf8ee}
.summary>span{font-size:2.8rem;font-weight:900}.summary h3,.summary p{margin:4px 0}.summary h3{font-size:1.05rem}
html[data-ocko-phase=given-up] .summary{background:#fff4df;color:#88500e}
.actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
#save-status{text-align:center;min-height:1.3em;font-size:.8rem}#retry{display:block;margin:6px auto 0}
@media(max-width:600px){.pair-board{grid-template-columns:minmax(0,1fr)}.eye-game{padding:12px}.game-stats{gap:5px}.instructions{font-size:.85rem}.picture{border-radius:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}