/* =====================================================================
   OSRS clan quiz — shared theme.
   Used by /bungus (player), /bungushost (host), /bungusboard (projector).

   House convention on this site is that each page owns its own :root
   palette (see index.html and sync.html). These three pages are one
   product, so they share this file rather than each keeping a copy that
   would drift.
   ===================================================================== */

/* The RuneScape UF face is supplied by hand — drop runescape_uf.ttf into
   fonts/ at the project root. font-display:swap plus the fallback stack
   below means every page renders and works fully without it. */
@font-face{
  font-family:'RuneScape UF';
  src:url('/fonts/runescape_uf.ttf') format('truetype');
  font-display:swap;
}

:root{
  /* Interface browns, lifted off the classic OSRS chrome */
  --stone:#1d1913;
  --panel:#3e3529;
  --panel2:#4a4033;
  --panel3:#2e2822;
  --bevel-hi:#6a5f4c;
  --bevel-lo:#241f19;
  --line:#5d5447;

  /* Chat / drop colours */
  --gold:#ff981f;
  --yellow:#ffff00;
  --green:#00ff00;
  --red:#ff3b3b;
  --cyan:#00ffff;
  --purple:#c77dff;

  /* Jeopardy tiles get the one deliberately un-OSRS accent, because a
     board of brown tiles on a brown page is unreadable on a stream. */
  --tile:#1b2f6b;
  --tile-hi:#38539c;
  --tile-lo:#0d1838;

  --text:#d8ccb4;
  --bright:#fff4d6;
  --muted:#9b8f79;
  --dim:#6f6552;

  --shadow:1px 1px 0 #000;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1100px 700px at 50% -15%,#3a3226 0%,rgba(0,0,0,0) 70%),
    var(--stone);
  color:var(--text);
  font-family:'RuneScape UF','Trebuchet MS',Verdana,Geneva,sans-serif;
  font-size:17px;
  line-height:1.35;
  text-shadow:var(--shadow);
  min-height:100%;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
.hidden{display:none !important}

/* ---------- Bevels: the whole look hangs off these ---------- */
.panel{
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  padding:10px;
}
.sunk{
  background:var(--panel3);
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
}
.panel-h{
  display:flex;align-items:center;gap:8px;
  color:var(--gold);
  font-size:.95rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  border-bottom:1px solid var(--bevel-lo);
  padding-bottom:6px;margin-bottom:9px;
}
.panel-h .pill{
  margin-left:auto;
  background:var(--panel3);
  border:1px solid var(--bevel-lo);
  color:var(--text);
  font-size:.78rem;
  padding:1px 8px;
  text-transform:none;
  letter-spacing:0;
}

/* ---------- Buttons ---------- */
.btn{
  background:var(--panel2);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  color:var(--bright);
  padding:8px 14px;
  text-shadow:var(--shadow);
  letter-spacing:.4px;
  transition:filter .1s;
}
.btn:hover:not(:disabled){filter:brightness(1.16)}
.btn:active:not(:disabled){
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  filter:brightness(.94);
}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.on{background:#6b4a17;color:var(--yellow)}
.btn-gold{background:#6b4a17;color:var(--yellow)}
.btn-go{background:#2f5c22;color:#d9ffcf}
.btn-stop{background:#6d2320;color:#ffd9d6}
.btn-sm{padding:4px 9px;font-size:.85rem}
.btn-xs{padding:2px 7px;font-size:.8rem;border-width:1px}
.btn-big{padding:16px 20px;font-size:1.3rem;width:100%;letter-spacing:1px}

/* ---------- Inputs ---------- */
.inp{
  background:#14110d;
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  color:var(--bright);
  padding:9px 11px;
  width:100%;
  text-shadow:var(--shadow);
}
.inp:focus{outline:none;border-color:var(--gold) var(--bevel-hi) var(--bevel-hi) var(--gold)}
.inp:disabled,.inp[readonly]{color:var(--muted);background:#100e0b;cursor:not-allowed}
.inp-sm{padding:4px 7px;font-size:.85rem}
select.inp{padding:5px 7px}
textarea.inp{resize:vertical;min-height:70px}
label.fld{display:block;margin-bottom:10px}
label.fld > span{display:block;color:var(--gold);font-size:.85rem;margin-bottom:3px}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}

/* ---------- Status dot ---------- */
.dot{width:10px;height:10px;border-radius:50%;background:var(--dim);flex:none;border:1px solid #000}
.dot.ok{background:var(--green);box-shadow:0 0 7px rgba(0,255,0,.6)}
.dot.wait{background:var(--gold);animation:dotpulse 1.1s infinite}
.dot.err{background:var(--red)}
@keyframes dotpulse{50%{opacity:.3}}

/* ---------- Text helpers ---------- */
.gold{color:var(--gold)}
.yellow{color:var(--yellow)}
.green{color:var(--green)}
.red{color:var(--red)}
.cyan{color:var(--cyan)}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.small{font-size:.85rem}
.tiny{font-size:.76rem}
.center{text-align:center}
.mono{font-family:'Courier New',monospace;letter-spacing:1px}
.nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 14px;
  background:var(--panel);
  border-bottom:2px solid var(--bevel-lo);
  position:sticky;top:0;z-index:20;
}
.brand{color:var(--gold);font-size:1.05rem;letter-spacing:1.5px;text-transform:uppercase}
.room-tag{
  background:#14110d;border:1px solid var(--bevel-lo);
  padding:2px 9px;font-family:'Courier New',monospace;letter-spacing:2px;color:var(--yellow);
}

/* ---------- Login / entry gate ---------- */
.gate{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(800px 560px at 50% 10%,#4a3f2d 0%,#120f0b 70%);
}
.gate-box{
  width:100%;max-width:380px;
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  box-shadow:0 22px 60px rgba(0,0,0,.7);
  padding:24px 22px;text-align:center;
}
.gate-box h1{color:var(--gold);font-size:1.75rem;letter-spacing:1px;font-weight:normal;margin-bottom:4px}
.gate-box .sub{color:var(--muted);font-size:.88rem;margin-bottom:18px}
.gate-box .inp{margin-bottom:12px;text-align:center;font-size:1.1rem}
.gate-err{color:var(--red);font-size:.85rem;min-height:1.25em;margin-bottom:8px}
.gate-note{color:var(--dim);font-size:.76rem;margin-top:14px;line-height:1.5}

/* ---------- Countdown bar ---------- */
.timer-wrap{
  position:relative;height:28px;
  background:#14110d;
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  overflow:hidden;
}
.timer-fill{
  position:absolute;top:0;bottom:0;left:0;width:100%;
  background:linear-gradient(180deg,#4ad14a 0%,#1f8a1f 100%);
  transition:width .1s linear;
}
.timer-fill.warn{background:linear-gradient(180deg,#ffc14d 0%,#c47c00 100%)}
.timer-fill.crit{background:linear-gradient(180deg,#ff6b6b 0%,#a81111 100%);animation:critblink .5s steps(2) infinite}
@keyframes critblink{50%{filter:brightness(1.45)}}
.timer-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;
}

/* ---------- Jeopardy board ---------- */
.jboard{
  display:grid;gap:6px;
  grid-auto-rows:minmax(0,1fr);
}
.jcat{
  background:var(--tile-lo);
  border:2px solid;
  border-color:var(--tile-hi) #000 #000 var(--tile-hi);
  color:var(--bright);
  text-transform:uppercase;letter-spacing:.5px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8px 5px;min-height:52px;
  font-size:.92rem;line-height:1.15;
  word-break:break-word;
}
.jcat input{
  background:transparent;border:none;color:var(--bright);text-align:center;width:100%;
  text-transform:uppercase;text-shadow:var(--shadow);
}
.jcat input:focus{outline:1px dotted var(--gold)}
.jtile{
  background:var(--tile);
  border:2px solid;
  border-color:var(--tile-hi) #000 #000 var(--tile-hi);
  color:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  min-height:64px;
  font-size:1.6rem;
  text-shadow:2px 2px 0 #000;
  transition:filter .1s,transform .05s;
  width:100%;
}
.jtile:hover:not(:disabled){filter:brightness(1.35)}
.jtile:active:not(:disabled){transform:scale(.98)}
.jtile.empty{background:#231e18;border-color:var(--bevel-hi) #000 #000 var(--bevel-hi);color:var(--dim);font-size:1rem}
.jtile.used{background:#100d1c;border-color:#241f19 #000 #000 #241f19;color:transparent;cursor:default}
.jtile.used:hover{filter:none}
.jtile.armed{outline:3px solid var(--gold);outline-offset:-3px}
.jtile:disabled{cursor:default}

/* ---------- Team chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.78rem;padding:1px 7px;
  border:1px solid var(--bevel-lo);
  background:var(--panel3);
  white-space:nowrap;
}
.chip .swatch{width:9px;height:9px;flex:none;border:1px solid #000}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);z-index:90;
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  padding:10px 18px;font-size:.92rem;max-width:90vw;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(0,0,0,.72);
}
.modal.show{display:flex}
.modal-box{
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.modal-box h2{color:var(--gold);font-size:1.2rem;font-weight:normal;margin-bottom:14px;letter-spacing:.5px}
.modal-btns{display:flex;gap:8px;margin-top:16px}
.modal-btns .btn{flex:1}

/* ---------- Award splash (level-up flavoured) ---------- */
#splash{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;pointer-events:none;
}
#splash.show{display:flex}
.splash-inner{text-align:center;animation:splashpop .4s cubic-bezier(.2,1.5,.4,1)}
.splash-amt{
  font-size:4.2rem;color:var(--yellow);
  text-shadow:2px 2px 0 #000,0 0 26px rgba(255,200,0,.75);
  animation:splashrise 1.7s ease-out forwards;
}
.splash-label{font-size:1.35rem;color:var(--gold);text-shadow:2px 2px 0 #000;letter-spacing:1px}
@keyframes splashpop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes splashrise{0%{transform:translateY(0)}100%{transform:translateY(-26px)}}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#14110d}
::-webkit-scrollbar-thumb{
  background:var(--panel2);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
}

/* ---------- Tables ---------- */
table.grid{width:100%;border-collapse:collapse;font-size:.9rem}
table.grid th{
  text-align:left;color:var(--gold);font-weight:normal;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.5px;
  padding:5px 7px;border-bottom:1px solid var(--bevel-lo);white-space:nowrap;
}
table.grid td{padding:5px 7px;border-bottom:1px solid rgba(0,0,0,.35);vertical-align:middle}
table.grid tr.hit td{background:rgba(0,255,0,.10)}
table.grid tr.near td{background:rgba(255,152,31,.13)}
table.grid tr.none td{color:var(--dim)}

/* ---------- Leaderboard rows ---------- */
.lb{list-style:none;display:flex;flex-direction:column;gap:3px}
.lb li{display:flex;align-items:center;gap:8px;padding:3px 6px;background:rgba(0,0,0,.22)}
.lb li.me{background:rgba(255,152,31,.18);outline:1px solid var(--bevel-hi)}
.lb .rank{color:var(--dim);width:2.1em;flex:none;text-align:right}
.lb .who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb .pts{color:var(--yellow);flex:none}
.teambar{height:22px;background:#14110d;border:1px solid var(--bevel-lo);position:relative;overflow:hidden}
.teambar i{position:absolute;top:0;bottom:0;left:0;display:block}