/* Ocarina of Time Bingo - forest green and Triforce gold. One theme only:
   the colors are the point. */
:root{
  color-scheme: dark;
  --bg0:#06140d;
  --bg1:#0b2417;
  --bg2:#123824;
  --panel:#0f2d1e;
  --panel-hi:#15402a;
  --line:rgba(217,173,60,.30);
  --line-soft:rgba(217,173,60,.16);
  --gold:#d9ad3c;
  --gold-hi:#f5dc84;
  --gold-lo:#9a6f19;
  --ink:#f1e8cb;
  --ink-soft:#c3c9ae;
  --ink-faint:#83977f;
  --accent:#e7c45b;
  --danger:#e0806a;
  --display:"Cinzel",Georgia,serif;
  --body:"Spectral",Georgia,serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  background-color:var(--bg0);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(217,173,60,.16), transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 0%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
}
body.modal-open{ overflow:hidden; }

/* Faint repeating Triforce pattern over the gradient. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56' viewBox='0 0 64 56'%3E%3Cpath fill='%23d9ad3c' fill-opacity='.045' d='M32 14l6 10.4H26zM26 24.4l6 10.4H20zM38 24.4l6 10.4H32z'/%3E%3C/svg%3E");
}

#app{
  position:relative; z-index:1;
  max-width:46rem; margin:0 auto;
  padding:calc(1.6rem + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 2rem max(16px, env(safe-area-inset-left));
}

/* --- masthead --- */
.masthead{ text-align:center; margin-bottom:1.4rem; }
.crest{
  width:56px; height:auto; display:block; margin:0 auto .7rem;
  filter:drop-shadow(0 0 14px rgba(245,220,132,.35));
}
.blackout .crest{ animation:glow 2.4s ease-in-out infinite; }
@keyframes glow{
  50%{ filter:drop-shadow(0 0 26px rgba(245,220,132,.85)); }
}
.kicker{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
h1{
  margin:.2rem 0 .35rem; font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem, 6.4vw, 2.6rem); line-height:1.12; letter-spacing:.02em;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #b98a26);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1 span{ white-space:nowrap; }
.sub{ margin:0 auto; max-width:30rem; color:var(--ink-soft); font-size:1rem; }

.stats{
  display:flex; justify-content:center; gap:.7rem; margin-top:1.1rem;
}
.stat{
  min-width:7.5rem; padding:.5rem .9rem;
  background:rgba(15,45,30,.7); border:1px solid var(--line); border-radius:999px;
  display:flex; align-items:baseline; justify-content:center; gap:.4rem;
}
.stat[hidden]{ display:none; }
.stat b{ font-family:var(--display); font-size:1.25rem; color:var(--gold-hi); }
.stat.locked{ background:rgba(90,21,19,.55); border-color:rgba(232,120,100,.45); }
.stat.locked b{ color:#ffb4a2; }
.stat span{ font-size:.85rem; color:var(--ink-soft); }

/* --- board --- */
.board{
  /* On a short desktop window, shrink so the whole board fits on screen. */
  max-width:max(21rem, calc(100vh - 15rem)); margin:0 auto;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:clamp(5px, 1.4vw, 10px);
  padding:clamp(6px, 1.8vw, 14px);
  background:linear-gradient(180deg, rgba(217,173,60,.22), rgba(154,111,25,.14));
  border:1px solid rgba(217,173,60,.45);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(245,220,132,.25);
}
.cell{
  position:relative; overflow:hidden;
  aspect-ratio:1 / 1; min-width:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(3px, 1vw, 10px);
  border:1px solid var(--line-soft); border-radius:clamp(6px, 1.6vw, 11px);
  background:linear-gradient(180deg, var(--panel-hi), var(--panel));
  color:var(--ink);
  font:inherit; cursor:pointer; text-align:center;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
.cell:hover{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(217,173,60,.35); }
.cell:active{ transform:scale(.96); }
.cell:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }
.label{
  position:relative; z-index:1;
  font-weight:600; line-height:1.15;
  font-size:clamp(.62rem, 2.7vw, .95rem);
  overflow-wrap:break-word; hyphens:auto;
}

.cell.done{
  background:linear-gradient(160deg, #f6df8c 0%, #ddb04a 48%, #b4831f 100%);
  border-color:rgba(255,240,190,.7);
  color:#173320;
  box-shadow:inset 0 1px 0 rgba(255,250,220,.6), inset 0 -2px 0 rgba(120,80,10,.35);
}
.cell.done .label{ font-weight:700; }
.mark{
  position:absolute; width:72%; height:auto; left:14%; top:16%;
  fill:#7a5410; opacity:.18; pointer-events:none;
}
/* Locked: someone else got there first in a lockout race. */
.cell.locked{
  background:linear-gradient(160deg, #7c2320 0%, #5a1513 52%, #3d0c0b 100%);
  border-color:rgba(232,120,100,.45);
  color:#f5d9cf;
  box-shadow:inset 0 1px 0 rgba(255,190,170,.18), inset 0 -2px 0 rgba(0,0,0,.3);
}
.cell.locked:hover{ border-color:#e88a74; box-shadow:0 0 0 1px rgba(232,120,100,.35); }
.mark.lock{ width:46%; left:27%; top:27%; fill:#ffb4a2; opacity:.16; }
.cell.line{
  border-color:#fff2c4;
  box-shadow:0 0 0 2px rgba(255,236,170,.55), 0 0 18px rgba(245,220,132,.55),
             inset 0 1px 0 rgba(255,250,220,.6);
}

/* --- footer --- */
footer{ text-align:center; margin-top:1.6rem; }
.note{ margin:0 auto .8rem; max-width:30rem; color:var(--ink-faint); font-size:.9rem; }
.linkbtn{
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1.1rem; color:var(--ink-soft);
  font:inherit; font-size:.9rem; cursor:pointer;
}
.linkbtn:hover{ color:var(--gold-hi); border-color:var(--gold); }
.footbtns{ display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; }

/* --- seed window --- */
#seed-title{ margin-bottom:1rem; }
.seedshow{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  margin:0 0 1.3rem; padding:.7rem .8rem .7rem 1rem;
  border:1px dashed rgba(217,173,60,.5); border-radius:12px; background:rgba(0,0,0,.22);
}
.seedshow[hidden]{ display:none; }
.seedcode{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace; font-weight:600;
  font-size:1.7rem; letter-spacing:.2em; color:var(--gold-hi);
  user-select:all; -webkit-user-select:all;
}
.btn.small{ flex:0 0 auto; min-height:2.4rem; padding:.4rem .9rem; font-size:.8rem; }
.seedshow{ flex-wrap:wrap; }
.seedbtns{ display:flex; gap:.5rem; }
.seednone{
  margin:0 0 1.3rem; padding:.7rem .9rem; border-radius:12px;
  background:rgba(0,0,0,.22); color:var(--ink-soft); font-size:.95rem;
}
.fieldlabel{
  display:block; margin:0 0 .45rem;
  font-family:var(--display); font-weight:600; font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.seedenter{ display:flex; gap:.6rem; }
.seedenter input{
  flex:1; min-width:0; min-height:3rem; padding:.55rem .85rem;
  border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.3);
  color:var(--ink); font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:1.25rem; letter-spacing:.16em; text-transform:uppercase;
}
.seedenter input::placeholder{ color:var(--ink-faint); letter-spacing:.06em; text-transform:none; font-size:1rem; }
.seedenter input:focus{ outline:2px solid var(--gold-hi); outline-offset:1px; border-color:transparent; }
.seedenter .btn{ flex:0 0 auto; padding:0 1.5rem; }
.seedmsg{ min-height:1.4em; margin:.5rem 0 .4rem; font-size:.9rem; color:var(--danger); }
.seedmsg.ok{ color:var(--gold-hi); }
.fine{ margin:0; font-size:.85rem; color:var(--ink-faint); }

.shuffled{ margin:.6rem auto 0; max-width:30rem; color:var(--ink-faint); font-size:.85rem; font-style:italic; }
.tg-sitelinks{ margin-top:1.8rem; }

/* --- dialogs: centered card on desktop, bottom sheet on phones --- */
dialog{
  border:0; padding:0; background:transparent; color:var(--ink);
  width:min(30rem, calc(100vw - 32px)); max-width:none; max-height:none;
  overflow:visible;
}
dialog::backdrop{
  background:rgba(2,10,6,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
dialog[open]{ animation:pop .18s ease-out; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } }

.sheet-inner{
  position:relative;
  padding:1.6rem 1.5rem 1.4rem;
  background:linear-gradient(180deg, #17432c, #0e2a1c);
  border:1px solid rgba(217,173,60,.5);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(245,220,132,.2);
}
.sheet-inner::before{
  content:""; position:absolute; left:1.5rem; right:1.5rem; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.close{
  position:absolute; top:.6rem; right:.6rem;
  width:2.4rem; height:2.4rem; border-radius:50%;
  border:0; background:transparent; color:var(--ink-faint);
  font-size:1.7rem; line-height:1; cursor:pointer;
}
.close:hover{ color:var(--gold-hi); background:rgba(217,173,60,.1); }
.chip{
  display:inline-block; margin:0 0 .6rem;
  padding:.15rem .65rem; border:1px solid var(--line); border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
dialog h2{
  margin:0 2rem .6rem 0; font-family:var(--display); font-weight:700;
  font-size:1.35rem; line-height:1.25; color:var(--gold-hi);
}
.desc{ margin:0 0 1rem; font-size:1.06rem; line-height:1.6; color:var(--ink); }
.status{
  margin:0 0 1.2rem; padding:.55rem .8rem; border-radius:10px;
  background:rgba(0,0,0,.22); color:var(--ink-faint); font-size:.92rem; font-style:italic;
}
.status.is-done{ color:var(--gold-hi); background:rgba(217,173,60,.12); font-style:normal; }
.status.is-done::before{ content:"\25B2  "; font-size:.8em; }
.status.is-locked{ color:#f6b8a8; background:rgba(160,40,30,.22); font-style:normal; }

.actions{ display:flex; gap:.6rem; }
.btn{
  flex:1; min-height:3rem; padding:.7rem 1rem;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(0,0,0,.18); color:var(--ink);
  font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:.04em;
  cursor:pointer; transition:filter .15s ease, opacity .15s ease;
}
.btn:hover:not(:disabled){ border-color:var(--gold); }
.btn.gold{
  background:linear-gradient(180deg, #f6df8c, #d9ad3c 55%, #b4831f);
  border-color:rgba(255,240,190,.7); color:#173320;
}
.btn.gold:hover:not(:disabled){ filter:brightness(1.07); }
.btn.danger{ border-color:rgba(224,128,106,.6); color:#f3b3a3; }
.btn.danger:hover{ background:rgba(224,128,106,.12); }
.btn.lock{
  display:block; width:100%; margin-top:.6rem;
  background:linear-gradient(180deg, #8c2b25, #5e1613);
  border-color:rgba(232,120,100,.55); color:#fde4dc;
}
.btn.lock:hover:not(:disabled){ filter:brightness(1.12); border-color:#e88a74; }
.btn:disabled{ opacity:.35; cursor:default; }
.btn:focus-visible, .close:focus-visible, .linkbtn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:2px; }

@media (max-width:560px){
  dialog{
    width:100%; margin:auto 0 0; inset:auto 0 0 0;
  }
  dialog[open]{ animation:rise .24s cubic-bezier(.2,.8,.3,1); }
  @keyframes rise{ from{ transform:translateY(100%); } }
  .sheet-inner{
    border-radius:20px 20px 0 0; border-bottom:0;
    padding:1.9rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
  }
  /* Grab handle, so it reads as a sheet. */
  .sheet-inner::after{
    content:""; position:absolute; top:.55rem; left:50%; width:2.6rem; height:4px;
    margin-left:-1.3rem; border-radius:2px; background:rgba(241,232,203,.22);
  }
  .actions{ flex-direction:column-reverse; }
  .stats{ gap:.45rem; flex-wrap:wrap; }
  .stat{ min-width:0; flex:1 0 auto; max-width:10rem; padding:.45rem .65rem; }
}

/* --- toast --- */
.toast{
  position:fixed; left:50%; bottom:calc(1.5rem + env(safe-area-inset-bottom)); z-index:10;
  transform:translate(-50%, 1rem); opacity:0; pointer-events:none;
  padding:.7rem 1.3rem; border-radius:999px;
  background:linear-gradient(180deg, #f6df8c, #d9ad3c 55%, #b4831f);
  color:#173320; font-family:var(--display); font-weight:700; letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 24px rgba(245,220,132,.4);
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}