/* The game (docs/PORTAL.md, section 7): full screen, nothing extra. Taken from docs/prototype/play.html. */
@font-face { font-family:Nunito; src:url("fonts/nunito.woff2") format("woff2"); font-weight:200 1000; font-display:swap; }
:root { --paper:#fff8ee; --ink:#342a7d; --muted:#77727f; --line:#efe6d8; --yellow:#ffd23f; --green:#3dbb6d;
        --shadow:0 2px 0 #0000000a, 0 8px 24px #3b2a1414; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; }
body { background:var(--paper); color:var(--ink); font:16px/1.4 Nunito, system-ui, sans-serif; display:flex; flex-direction:column; overflow:hidden; }
[hidden] { display:none !important; }
.top { display:flex; align-items:center; gap:10px; padding:10px 14px; }
.icon { width:44px; height:44px; border-radius:14px; border:0; background:#fff; box-shadow:var(--shadow); font-size:20px; cursor:pointer; display:grid; place-items:center; color:var(--ink); text-decoration:none; font-family:inherit; }
.icon.on { background:var(--ink); color:#fff; }
#restart { background:#ffe6e3; border:2px solid #ff8a80; }   /* the trash: a red rim - the tint alone melts into the paper */
#restart.sure { width:auto; padding:0 14px; background:#ff5252; border-color:#ff5252; color:#fff;   /* id beats .icon.sure */
  font-weight:900; font-size:15px; white-space:nowrap; }
.icon.back, .icon.peek { width:auto; padding:0 14px; font-size:16px; font-weight:900; white-space:nowrap; }
.icon.back { background:var(--ink); color:#fff; }
.sample { position:fixed; inset:0; z-index:9; background:#342a7dcc; display:grid; place-items:center; padding:16px; cursor:zoom-out; }
.sample figure { margin:0; background:#fff; border-radius:24px; padding:12px; box-shadow:var(--shadow); max-width:100%; max-height:100%; display:flex; flex-direction:column; }
.sample img { max-width:100%; max-height:calc(100vh - 110px); object-fit:contain; display:block; }
.sample figcaption { text-align:center; font-weight:800; color:var(--muted); padding-top:8px; }
.icon.wide { width:auto; padding:0 14px; font-weight:900; font-size:16px; background:var(--green); color:#fff; }
.title { font-weight:900; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.title small { display:block; font-weight:700; color:var(--muted); font-size:12.5px; }
.ring { margin-left:auto; position:relative; width:46px; height:46px; flex:none; }
.ring svg { transform:rotate(-90deg); } .ring b { position:absolute; inset:0; display:grid; place-items:center; font-size:12.5px; font-weight:900; }
select.mode { height:44px; border:0; border-radius:14px; background:#fff; box-shadow:var(--shadow); font:inherit; font-weight:800; padding:0 10px; color:var(--ink); }
.stage { flex:1; min-height:0; position:relative; margin:0 14px; border-radius:24px; background:#fff; box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.stage.pan { cursor:grab; } .stage.pan .regions path { cursor:inherit; }   /* space held: the hand, not the crayon */
.stage.pan:active { cursor:grabbing; }
.stage svg { width:100%; height:100%; display:block; }
.stage .regions path { cursor:pointer; transition:fill .18s; }
.stage .numbers text { pointer-events:none; font-weight:700; }
.stage .details { pointer-events:none; }
.stage .numbers text.gone { display:none; }
.stage.nonum .numbers { display:none; }
.stage .regions path.hint { animation:pulse 1s ease-in-out 3; }
@keyframes pulse { 50% { fill:#ffe98a; stroke:#ff5252; stroke-width:var(--hl-w,6); } }
.stage .hint-rings { pointer-events:none; }
.stage .hint-rings circle { fill:none; stroke:#ff5252; stroke-width:var(--hl-w,6); stroke-linecap:round;
  stroke-dasharray:calc(var(--hl-w,6) * 2.4) calc(var(--hl-w,6) * 1.6);
  transform-box:fill-box; transform-origin:center; animation:ring 3s ease-out forwards; }
@keyframes ring { 80% { opacity:1; } 100% { transform:rotate(1.5turn); opacity:0; } }
.stage .regions path.shake { animation:shake .35s 2; }
@keyframes shake { 25% { fill:#ffd6d6; } 75% { fill:#ffd6d6; } }
.zoom { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; gap:8px; }
.tray { display:flex; gap:10px; overflow-x:auto; padding:14px; scroll-snap-type:x mandatory; }
.crayon { flex:none; scroll-snap-align:start; width:64px; height:92px; border:0; background:none; padding:0; cursor:pointer; position:relative; transition:transform .15s; }
.crayon .body { position:absolute; left:10px; right:10px; bottom:0; top:22px; border-radius:6px 6px 12px 12px; box-shadow:inset -6px 0 0 #0000001f, var(--shadow); }
.crayon .tip { position:absolute; left:18px; right:18px; top:2px; height:24px; clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.crayon .n { position:absolute; left:10px; right:10px; top:44px; text-align:center; font-weight:900; font-size:18px; }
.crayon .ok { position:absolute; right:2px; top:12px; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:900; display:none; place-items:center; box-shadow:var(--shadow); }
.crayon.done .ok { display:grid; }
.crayon.sel { transform:translateY(-12px); }
.crayon.hello { animation:hello .6s ease; }              /* the opening hint: rises higher than the rest, then sits */
@keyframes hello { 0% { transform:translateY(0); } 60% { transform:translateY(-20px); } 100% { transform:translateY(-12px); } }
.toast { position:absolute; left:50%; top:16px; transform:translateX(-50%); background:var(--ink); color:#fff; font-weight:800; padding:8px 16px; border-radius:999px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:2; text-align:center; max-width:90%; }
.toast.show { opacity:1; }
.win { position:fixed; inset:0; background:#342a7d99; display:none; place-items:center; z-index:10; }
.win.show { display:grid; }
.win .card { position:relative; background:#fff; border-radius:28px; padding:28px; text-align:center; max-width:340px; box-shadow:var(--shadow); }
.win .x { position:absolute; top:10px; right:25px; width:34px; height:34px; border:0; border-radius:50%; background:var(--line); color:var(--ink); cursor:pointer; }
.win .x:hover { background:var(--ink); color:#fff; }
.win .x::before, .win .x::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:2.5px; border-radius:2px; background:currentColor; }
.win .x::before { transform:translate(-50%,-50%) rotate(45deg); }
.win .x::after { transform:translate(-50%,-50%) rotate(-45deg); }
.win h2 { margin:6px 0; font-size:30px; font-weight:900; } .win .stars { font-size:44px; }
.win button { margin-top:14px; border:0; border-radius:14px; padding:12px 18px; font:inherit; font-weight:900; cursor:pointer; background:var(--yellow); }
.win button.soft { background:var(--line); }
.win a { font-weight:800; color:#3e7bfa; text-decoration:none; }
canvas#confetti { position:fixed; inset:0; pointer-events:none; z-index:11; }
@media (max-width: 640px) {             /* phone: the title gets its own row, controls below, smaller buttons */
  .top { flex-wrap:wrap; gap:8px; padding:8px 10px; }
  .title { order:-1; flex:1 0 calc(100% - 60px); font-size:17px; }
  .ring { order:-1; margin-left:0; }
  .icon, select.mode { width:auto; min-width:40px; height:40px; font-size:18px; }
  .icon.back, .icon.peek { font-size:15px; padding:0 10px; }
  .top a.icon { order:-2; }
  .stage { margin:0 8px; } .tray { padding:10px 8px; gap:6px; } .crayon { width:52px; height:80px; }
}