:root{
  --wood:#2B1D13; --wood-2:#3A281A; --vignette:rgba(0,0,0,.55);
  --parch:#ECDDB9; --parch-edge:#C9AE7C; --ink:#2E2015; --muted:#6A5238; --line:#A88A5C;
  --accent:#7A1E1E; --accent-ink:#F6E9C9; --gold:#B8862B;
  --hit:#3F6B39; --near:#C08F2E; --near-ink:#2A1C06; --miss:#8B8273; --miss-ink:#F4ECDB; --tile-ink:#F6EED9;
  --input:#F6EBCF;
  --title:"Pirata One", "Old English Text MT", Georgia, serif;
  --sc:"IM Fell English SC", Georgia, "Times New Roman", serif;
  --body:"EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wood:#150E09; --wood-2:#22170F; --vignette:rgba(0,0,0,.7);
    --parch:#2F2519; --parch-edge:#1C150E; --ink:#EEDFBE; --muted:#BFA67C; --line:#6B5537;
    --accent:#B33A2E; --accent-ink:#FBEFD3; --gold:#D6A445;
    --hit:#4E8446; --near:#D19D35; --miss:#4A443B; --miss-ink:#EEE4CF;
    --input:#241B12;
  }
}
:root[data-theme="dark"]{
  --wood:#150E09; --wood-2:#22170F; --vignette:rgba(0,0,0,.7);
  --parch:#2F2519; --parch-edge:#1C150E; --ink:#EEDFBE; --muted:#BFA67C; --line:#6B5537;
  --accent:#B33A2E; --accent-ink:#FBEFD3; --gold:#D6A445;
  --hit:#4E8446; --near:#D19D35; --miss:#4A443B; --miss-ink:#EEE4CF;
  --input:#241B12;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--wood)}
body{margin:0;min-height:100%;color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse at center, transparent 40%, var(--vignette) 100%),
    repeating-linear-gradient(92deg, var(--wood) 0 22px, var(--wood-2) 22px 24px, var(--wood) 24px 61px, var(--wood-2) 61px 62px);
  background-attachment:fixed}
.wrap{max-width:860px;margin:0 auto;padding:28px 16px 48px}

/* Banner: the one bold element */
.banner{position:relative;max-width:520px;margin:0 auto 22px;text-align:center;color:var(--ink)}
.banner .ribbon{position:relative;background:var(--parch);padding:14px 56px 12px;
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);
  box-shadow:inset 0 0 40px var(--parch-edge)}
.banner h1{font-family:var(--title);font-weight:400;font-size:clamp(2.6rem,9vw,3.6rem);line-height:1;margin:0;color:var(--accent)}
.banner p{font-family:var(--sc);margin:4px 0 0;font-size:1.05rem;color:var(--muted)}
.banner .seal{position:absolute;right:6px;bottom:-16px;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #B4413A, var(--accent) 60%, #4E1010);
  box-shadow:0 2px 6px rgba(0,0,0,.4);display:grid;place-items:center;color:var(--accent-ink);font-family:var(--title);font-size:1.6rem}

.modes{display:flex;gap:8px;justify-content:center;margin:0 0 18px}
.modes button{font:1.05rem var(--sc);padding:7px 18px;border-radius:4px;border:1px solid var(--gold);background:rgba(0,0,0,.25);color:#EAD7AE;cursor:pointer}
.modes button[aria-pressed="true"]{background:var(--gold);color:#22160A;border-color:var(--gold)}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.panel{background:var(--parch);color:var(--ink);border-radius:3px;padding:18px;
  box-shadow:inset 0 0 50px var(--parch-edge), 0 6px 18px rgba(0,0,0,.45);border:1px solid var(--line)}
.search{position:relative}
.search label{display:block;font-family:var(--sc);font-size:1.1rem;margin-bottom:6px}
.search input{width:100%;font:inherit;font-size:1.1rem;padding:11px 14px;border-radius:3px;border:1px solid var(--line);background:var(--input);color:var(--ink)}
.search input::placeholder{color:var(--muted);opacity:.8}
.search input:disabled{opacity:.55}
.list{position:absolute;z-index:5;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:var(--input);border:1px solid var(--line);border-radius:3px;box-shadow:0 10px 24px rgba(0,0,0,.35);max-height:300px;overflow-y:auto}
.list li{padding:8px 10px;border-radius:2px;cursor:pointer}
.list li[aria-selected="true"],.list li:hover{background:var(--accent);color:var(--accent-ink)}
.status{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;color:var(--muted)}
.pips{display:flex;gap:5px}
.pip{width:12px;height:14px;background:var(--line);opacity:.45;clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.pip.used{background:var(--accent);opacity:1}

.guesses{margin-top:18px;display:flex;flex-direction:column-reverse;gap:12px}
.guess{background:var(--parch);border:1px solid var(--line);border-radius:3px;padding:12px;box-shadow:inset 0 0 40px var(--parch-edge),0 4px 12px rgba(0,0,0,.35)}
.guess .name{font-family:var(--sc);font-weight:400;font-size:1.25rem;margin:0 0 8px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tile{border-radius:2px;padding:7px 8px 8px;min-height:68px;color:var(--tile-ink);display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.18)}
.tile small{font-family:var(--sc);font-size:.8rem;opacity:.9;line-height:1.2}
.tile b{font-size:.98rem;font-weight:600;line-height:1.25;word-break:break-word}
.tile.hit{background:var(--hit)}
.tile.near{background:var(--near);color:var(--near-ink)}
.tile.miss{background:var(--miss);color:var(--miss-ink)}
.tile.reveal{animation:flip .42s ease-out both}
@keyframes flip{from{transform:rotateX(90deg);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.tile.reveal{animation:none}}

.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.95rem;color:var(--muted);margin-top:12px}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--c)}

.result{margin-top:18px;text-align:center}
.result h2{font-family:var(--title);font-weight:400;font-size:2.4rem;margin:0 0 2px;line-height:1.1;color:var(--accent)}
.result .answer{margin:0 0 14px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.btn{font:1.05rem var(--sc);padding:9px 20px;border-radius:3px;border:1px solid #4E1010;background:var(--accent);color:var(--accent-ink);cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.copied{color:var(--hit);font-weight:700;width:100%}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 10px}
.stats div{border:1px solid var(--line);border-radius:3px;padding:8px 4px}
.stats b{display:block;font-family:var(--sc);font-weight:400;font-size:1.6rem;line-height:1.1}
.stats small{color:var(--muted);font-size:.85rem}
.dist{display:grid;gap:4px;margin-top:6px;text-align:left}
.bar{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;font-size:.9rem}
.bar i{display:block;height:18px;border-radius:2px;background:var(--miss);min-width:22px;text-align:right;padding-right:6px;font-style:normal;color:var(--miss-ink);font-size:.8rem;line-height:18px}
.bar i.me{background:var(--hit);color:#fff}
.next{color:var(--muted);margin-top:12px;font-family:var(--sc)}

details{margin-top:22px}
summary{cursor:pointer;font-family:var(--sc);font-size:1.1rem}
details li{color:var(--ink);max-width:68ch}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:26px;font-family:var(--sc);font-size:1.05rem}
.links a{color:#EAD7AE}
.links a:hover{color:#fff}
footer{margin-top:14px;color:#C9B48C;font-size:.9rem;max-width:68ch;text-align:center;margin-left:auto;margin-right:auto}

@media (max-width:640px){
  body{font-size:17px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .stats b{font-size:1.3rem}
  .banner .ribbon{padding:12px 40px 10px}
}

/* Scrying orb behind the page */
.orb-wrap{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);width:min(360px,76vw);aspect-ratio:1;transform:translateX(-50%);z-index:0;pointer-events:none;
  --glow:rgba(140,110,255,.45)}
.orb-wrap.win{--glow:rgba(90,220,140,.6)}
.orb-wrap.lose{--glow:rgba(230,70,60,.55)}
.orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 58%, #3D2C80 0%, #1C1543 55%, #0A0818 100%);
  box-shadow:0 0 55px 8px var(--glow), inset 0 -24px 50px rgba(0,0,0,.65), inset 0 12px 40px rgba(190,170,255,.28);
  animation:pulse 6s ease-in-out infinite;transition:box-shadow .8s}
.mist{position:absolute;border-radius:50%;filter:blur(22px);mix-blend-mode:screen;opacity:.8}
.mist.a{inset:-22%;background:conic-gradient(from 0deg, transparent 0 14%, rgba(120,200,255,.55) 24%, transparent 40%, rgba(190,120,255,.65) 58%, transparent 74%, rgba(255,170,230,.35) 88%, transparent);animation:spin 18s linear infinite}
.mist.b{inset:-8%;background:conic-gradient(from 90deg, transparent 0 18%, rgba(160,140,255,.6) 34%, transparent 50%, rgba(100,230,220,.42) 70%, transparent 86%);animation:spin 27s linear infinite reverse}
.tint{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .9s;mix-blend-mode:screen}
.orb-wrap.win .tint{opacity:.55;background:radial-gradient(circle at 50% 55%, rgba(110,240,150,.9), transparent 70%)}
.orb-wrap.lose .tint{opacity:.5;background:radial-gradient(circle at 50% 55%, rgba(240,80,60,.9), transparent 70%)}
.core{position:absolute;left:30%;top:32%;width:40%;height:40%;border-radius:50%;background:radial-gradient(circle, rgba(232,222,255,.75), transparent 70%);filter:blur(6px);animation:breathe 4.5s ease-in-out infinite}
.shine{position:absolute;left:15%;top:9%;width:40%;height:24%;border-radius:50%;background:radial-gradient(ellipse at center, rgba(255,255,255,.55), transparent 70%);transform:rotate(-25deg)}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.8);opacity:0;animation:twinkle 3.2s ease-in-out infinite}
.orb-wrap.flare .orb{animation:flare .9s ease-out}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{box-shadow:0 0 45px 6px var(--glow), inset 0 -24px 50px rgba(0,0,0,.65), inset 0 12px 40px rgba(190,170,255,.28)}50%{box-shadow:0 0 85px 18px var(--glow), inset 0 -24px 50px rgba(0,0,0,.65), inset 0 12px 40px rgba(190,170,255,.28)}}
@keyframes flare{0%{filter:brightness(1)}30%{filter:brightness(1.8)}100%{filter:brightness(1)}}
@keyframes breathe{0%,100%{transform:scale(.85);opacity:.6}50%{transform:scale(1.12);opacity:1}}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:1}}
main.wrap{position:relative;z-index:1;padding-top:calc(min(360px,76vw) * .66)}
@media (prefers-reduced-motion: reduce){.orb,.mist,.core,.spark,.orb-wrap.flare .orb{animation:none!important}}

.page{max-width:760px;margin:0 auto;padding:28px 16px 48px}
.home{display:block;text-align:center;font-family:var(--title);font-size:2.4rem;color:#EAD7AE;text-decoration:none;margin-bottom:16px}
article.panel{padding:24px 26px}
article.panel h1{font-family:var(--title);font-weight:400;color:var(--accent);font-size:2.4rem;margin:0 0 6px;line-height:1.1}
article.panel h2{font-family:var(--sc);font-weight:400;font-size:1.35rem;margin:26px 0 6px}
article.panel p,article.panel li{max-width:66ch}
article.panel a{color:var(--accent)}
.cta{display:inline-block;margin-top:14px;text-decoration:none}
.updated{color:var(--muted);font-size:.95rem}