/* Doublets web — laid out over the app's own frame art (assets/frame.webp, 1080 × 1919).
   Like the app, the frame stretches to the screen; every element is placed in
   percentages of that frame so it lines up on any phone or window. */
:root{
  --font: Sylfaen, "Gentium Book Plus", Georgia, "Times New Roman", serif;
  --cell-bg:#28231e; --cell-line:#b4a078; --wrong:#3c3732; --exists:#b59f3b; --correct:#538d4e;
  --key:#818384; --key-text:#fff; --enter:#2ecc71; --back:#e74c3c;
  --gold:#e8c35a; --ink:#1b140d; --parchment:#efe3c8;
  --frame-ratio:0.5628;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#120d08}
body{font-family:var(--font);color:#fff;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  background:#120d08 url(assets/poster.webp) center/cover no-repeat fixed}
body::before{content:"";position:fixed;inset:0;background:rgba(10,7,4,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#stage{position:relative;height:100dvh;width:min(100vw,calc(100dvh * var(--frame-ratio)));margin:0 auto;
  background:url(assets/frame.webp) center/100% 100% no-repeat;box-shadow:0 0 60px rgba(0,0,0,.8);overflow:hidden}

/* Title plate (opens How to play) and the mode label on the castle */
.hotspot{position:absolute;left:24%;top:1.5%;width:52%;height:11%}
#mode{position:absolute;left:0;top:7%;width:24%;height:13%;display:flex;align-items:center;justify-content:center}
#mode-text{display:block;transform:rotate(-40deg);font-weight:700;font-size:calc(var(--sw) * .058);line-height:.92;text-align:center;text-transform:uppercase;
  color:#f6d36b;text-shadow:-1px -1px 0 #3b2a0c,1px -1px 0 #3b2a0c,-1px 1px 0 #3b2a0c,1px 1px 0 #3b2a0c,0 3px 4px rgba(0,0,0,.9);letter-spacing:.01em;max-width:8ch}

/* Board: the black panel of the frame, above the keyboard */
#board{position:absolute;left:20.4%;right:20.4%;top:17.4%;bottom:23.6%;display:flex;align-items:center;justify-content:center}
#grid{display:grid;gap:var(--gap,6px);grid-template-columns:repeat(var(--cols,4),var(--cell,40px));grid-auto-rows:var(--cell,40px)}
.cell{position:relative;border-radius:calc(var(--cell) * .14);background:var(--cell-bg);border:1px solid var(--cell-line);display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell) * .56);line-height:1;color:#fff;text-transform:uppercase;transform-style:preserve-3d}
.cell.fixed{background:#24201b}
.cell.ghost{color:rgba(255,255,255,.22)}
.cell.filled{animation:pop .09s ease-out}
.cell.wrong{background:var(--wrong);border-color:var(--wrong)}
.cell.exists{background:var(--exists);border-color:var(--exists)}
.cell.correct{background:var(--correct);border-color:var(--correct)}
.cell.flip{animation:flip .46s ease-in-out both}
.row-shake{animation:shake .4s ease}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes win-bounce{40%{transform:translateY(-18%)}}
.cell.bounce{animation:win-bounce .5s ease both}

#toast{position:absolute;top:2%;left:50%;transform:translateX(-50%);max-width:96%;padding:.45em .9em;border-radius:6px;background:rgba(239,227,200,.96);color:var(--ink);
  font-size:calc(var(--sw) * .036);font-weight:700;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none;z-index:5}

/* The app's illustrated buttons */
.art-btn{position:absolute;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .12s,filter .12s}
/* Like the app, the art stretches to fill its slot. */
.art-btn img{width:100%;height:100%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
.art-btn:hover{filter:brightness(1.08)}.art-btn:active{transform:scale(.95)}
.art-btn[hidden]{display:none}
#btn-reset{left:1.6%;top:39%;width:16%;height:15.4%}
#btn-next{left:1.6%;top:58.2%;width:16.6%;height:15.6%}
#btn-share{left:82.2%;top:31.6%;width:16%;height:8%}
#btn-skip{left:82.2%;top:41.4%;width:16%;height:13.2%}
#btn-keys{left:82.2%;top:58.2%;width:16%;height:15.6%}

/* On-screen keyboard, as in the app */
#keyboard{position:absolute;left:2%;right:2%;top:76.7%;bottom:1.4%;display:flex;flex-direction:column;gap:1.3%}
#keyboard.hidden{display:none}
.krow{flex:1;display:flex;gap:1%;justify-content:center}
.key{flex:0 0 9%;border-radius:3px;background:var(--key);color:var(--key-text);font-size:calc(var(--sw) * .052);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 0 rgba(0,0,0,.35);touch-action:manipulation}
.key:active{filter:brightness(1.25)}
.key.wide{flex:0 0 14%;font-size:calc(var(--sw) * .03)}
.key.enter{background:var(--enter)}.key.back{background:var(--back)}
.key.wrong{background:#3a3a3c}.key.exists{background:var(--exists)}.key.correct{background:var(--correct)}

/* Overlays */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(8,6,4,.72);animation:fade .18s ease}
.overlay[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.faq-sheet{position:relative;height:100dvh;aspect-ratio:1080/1919;max-width:100vw}
.faq-art{width:100%;height:100%;object-fit:contain}
.faq-close{position:absolute;left:1%;top:.5%;width:16%;height:9%;border-radius:50%}
.overlay.dark{background:#141414}
.close-x{position:absolute;left:12px;top:12px;width:60px;height:60px}
.close-x img{width:100%;height:100%}
.stats-body{width:min(92vw,440px);max-height:92dvh;overflow:auto;text-align:center;font-size:20px;line-height:1.5}
.stats-body h2{color:#b4a078;font-weight:400;font-size:28px;margin-bottom:10px}
.stats-body h3{color:#b4a078;font-weight:400;font-size:21px;margin:16px 0 6px}
#stats-list{display:grid;gap:2px}
#stats-list div{display:flex;justify-content:center;gap:.4em}
#stats-list dt::after{content:":"}
#dist{list-style:none;display:grid;gap:3px}
#dist li{display:grid;grid-template-columns:7.5em 1fr;align-items:center;gap:8px;font-size:17px;text-align:right}
#dist .bar{height:18px;min-width:22px;border-radius:3px;background:#3c3732;color:#fff;font-size:13px;line-height:18px;text-align:right;padding-right:5px}
#dist li.today .bar{background:var(--correct)}
#daily-status{margin-top:14px;color:#cfc3a8;font-size:17px}
.stats-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border-radius:22px;border:1px solid #b4a078;color:#efe3c8;text-decoration:none;font-size:17px;background:#2a2219}
.pill.gold{background:linear-gradient(#f2d98c,#c9a24e);color:#2a1d08;border-color:#8a6d2a;font-weight:700}
.pill.ghost{background:transparent}
.pill:active{transform:scale(.97)}
.result-card{width:min(90vw,420px);padding:22px 20px 18px;border-radius:14px;text-align:center;color:var(--ink);
  background:radial-gradient(ellipse at top,#f6ecd6,#e6d5b0);border:3px solid #8a6d2a;box-shadow:0 0 0 6px #2a1f12,0 18px 50px rgba(0,0,0,.6)}
.result-card h2{font-size:30px;margin-bottom:6px}
.result-card p{font-size:18px;line-height:1.4}
.result-card .path{margin-top:8px;font-size:16px;letter-spacing:.04em;color:#4a3a20}
.result-card .pill{color:#efe3c8}.result-card .pill.gold{color:#2a1d08}.result-card .pill.ghost{color:var(--ink);border-color:#8a6d2a}
.app-line{margin-top:12px;font-size:14px!important;color:#5a4a30}.app-line a{color:#6a4a10}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.noscript{position:fixed;inset:auto 0 40% 0;text-align:center;font-size:20px}
@media (prefers-reduced-motion:reduce){.cell.flip,.cell.bounce,.row-shake,.cell.filled{animation:none}}