/* Shared styles for the board-game pages outside /v2: sign-in, setup, settings, error pages.
   Standalone (does not load v2.css or app.css); same tokens and pieces as v2.css, fonts are the vendored ones. */
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/lilita-one-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/lilita-one-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url(/static/fonts/rubik-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;font-display:swap;src:url(/static/fonts/rubik-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --felt:#481b56; --gold:#F4BF2A; --cream:#FFF4DC; --board:#FBF3E1; --board-edge:#E9DCBE;
  --ink:#1F2A2B; --ink-soft:#4A5556;
  --red:#A8251C; --orange:#A9560C; --green:#24803F; --green-ink:#1B6B33; --blue:#2A74B8; --pink:#C23C7E; --teal:#127E86;
  --r-lg:16px; --r-md:10px;
  --out:cubic-bezier(.16,1,.3,1);
  --sc:22,5,30;
  --sh-board:inset 1.5px 1.5px 0 rgba(255,255,255,.65),
    1px 1px 0 #DACDAA,2px 2px 0 #D2C4A0,3px 3px 0 #CABB95,4px 5px 0 #BDAC83,
    5px 7px 3px rgba(var(--sc),.5),12px 17px 20px rgba(var(--sc),.34),26px 36px 46px rgba(var(--sc),.2);
  --sh-tray:inset 1px 1px 0 rgba(255,255,255,.65),
    1px 1px 0 #D8CBA7,2px 3px 0 #C6B890,
    3px 5px 3px rgba(var(--sc),.46),8px 12px 16px rgba(var(--sc),.3),18px 26px 32px rgba(var(--sc),.16);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--felt)}
@supports (-moz-appearance:none){html{scrollbar-color:var(--gold) var(--felt)}}
body.pg{min-height:100vh;color:var(--ink);font:400 15px/1.4 Rubik,system-ui,sans-serif;overflow-x:hidden;
  background:radial-gradient(ellipse 80% 60% at 16% -6%,rgba(255,232,190,.2),transparent 70%),radial-gradient(circle,rgba(255,255,255,.05) .8px,transparent 1.2px) 0 0/4px 4px,var(--felt)}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.pg-head :focus-visible{outline-color:var(--gold)}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- the box lid: sign-in, setup, error pages ---------- */
.pg-center{min-height:100vh;display:grid;place-items:center;padding:28px 16px}
.lid{position:relative;width:min(100%,440px);background:var(--board);border-radius:var(--r-lg);padding:24px 24px 26px;
  box-shadow:var(--sh-board),inset 0 0 0 6px var(--board),inset 0 0 0 8px var(--ink);animation:pgIn .45s var(--out) backwards}
.lid.wide{width:min(100%,520px)}
@keyframes pgIn{from{opacity:0;transform:translateY(-10px) rotate(-.6deg)}}
@keyframes pgFade{from{opacity:0}}
.lid-band{display:flex;align-items:center;gap:12px;background:var(--gold);border:2px solid var(--ink);border-radius:var(--r-md);padding:8px 14px 8px 10px;margin-bottom:18px;box-shadow:1px 3px 0 #B98A10,2px 5px 5px rgba(var(--sc),.35)}
.lid-band svg{flex:none;width:38px;height:38px}
.lid-band b{font:400 25px/1 "Lilita One",sans-serif;letter-spacing:.01em}
.lid-band small{margin-left:auto;font:500 12px/1.2 Rubik;text-align:right;color:var(--ink)}
.lid h1{font:400 34px/1.05 "Lilita One",sans-serif;letter-spacing:.01em}
.lid .sub{margin-top:6px;color:var(--ink-soft);font-size:14px}
.code{font:400 76px/1 "Lilita One",sans-serif;color:var(--felt);text-shadow:1px 2px 0 var(--board-edge),2px 4px 0 #CABB95;margin:4px 0 2px}
.err-art{display:block;width:100%;max-width:300px;height:auto;margin:0 0 6px}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ---------- fields ---------- */
.auth-form{margin-top:6px}
.field{display:grid;gap:6px;margin-top:14px}
.field>span{font:500 13px/1.2 Rubik;color:var(--ink-soft)}
.pg input[type=password],.pg input[type=text]{width:100%;min-width:0;height:48px;padding:0 14px;background:#fff;border:2px solid var(--ink);border-radius:var(--r-md);
  font:500 16px/1 Rubik,sans-serif;box-shadow:inset 1px 2px 3px rgba(70,45,10,.18)}
.pg input[readonly]{background:#F6EED6;font:500 14px/1 ui-monospace,Menlo,Consolas,monospace;text-overflow:ellipsis}
.pg input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--felt)}
.hint-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.hint{color:var(--ink-soft)}
.hint.ok,.form-note.ok{color:var(--green-ink);font-weight:500}
.hint.bad,.form-note.bad{color:var(--red);font-weight:500}
.auth-error{margin-top:16px;padding:10px 12px;border:2px solid var(--ink);border-radius:var(--r-md);background:#FFE4DF;color:#7D1A12;font-weight:500}
.form-note{margin-top:10px;font-size:13.5px;min-height:1.4em;overflow-wrap:anywhere}
.form-note:empty{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font:400 17px/1 "Lilita One",sans-serif;letter-spacing:.02em;text-decoration:none;
  padding:12px 18px 11px;border-radius:999px;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:1px 3px 0 var(--ink);
  transition:transform .11s var(--out),box-shadow .11s var(--out)}
.btn.go{background:var(--green);color:#fff}
.btn.gold{background:var(--gold)}
.btn.block{display:flex;width:100%;margin-top:20px}
@media (any-hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:1px 5px 0 var(--ink)}}
.btn:active{transform:translateY(2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:default}
.file-btn{cursor:pointer}
.file-btn:focus-within{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- settings page ---------- */
.pg-head{max-width:1100px;margin:0 auto;padding:16px 22px 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--cream)}
.pg-head h1{font:400 38px/1 "Lilita One",sans-serif;letter-spacing:.01em}
.pg-head .nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-items:center}
.pg-head form{display:inline}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:40px;font:500 15px/1 Rubik,sans-serif;color:var(--cream);text-decoration:none;padding:9px 15px;border-radius:999px;border:2px solid rgba(255,244,220,.5);transition:background-color .2s,border-color .2s}
.pill svg{width:14px;height:14px}
.pill.gold{background:var(--gold);color:var(--ink);border-color:var(--gold);font:400 17px/1 "Lilita One",sans-serif;box-shadow:1px 3px 0 #B98A10,2px 5px 5px rgba(var(--sc),.45)}
@media (any-hover:hover){.pill:hover{border-color:var(--cream)} .pill.gold:hover{border-color:var(--gold);filter:brightness(1.06)}}
.deck{max-width:1100px;margin:20px auto 48px;padding:0 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.piece{position:relative;background:var(--board);border:2px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--sh-tray);overflow:hidden;animation:pgIn .45s var(--out) backwards}
.piece:nth-child(2){animation-delay:.06s}.piece:nth-child(3){animation-delay:.12s}.piece:nth-child(4){animation-delay:.18s}.piece:nth-child(5){animation-delay:.24s}
.piece>h2{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--band,var(--blue));color:#fff;font:400 20px/1 "Lilita One",sans-serif;letter-spacing:.02em;padding:9px 14px 8px}
.piece>h2 small{font:500 12px/1 Rubik,sans-serif;letter-spacing:0}
.piece.pw{--band:var(--blue)}.piece.t1{--band:var(--teal)}.piece.t2{--band:var(--pink)}.piece.t3{--band:var(--orange)}.piece.snd{--band:var(--green)}
.piece-b{padding:6px 14px 16px}
.piece .card-sub{margin-top:8px;font-size:13.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.piece code{background:#F1E7CB;border-radius:4px;padding:1px 5px;font:500 12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}
.piece .btn.act{margin-top:16px}
.token-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.token-row input{flex:1 1 220px}
.token-row .btn{flex:none}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;margin-top:6px;font-weight:500}
.switch-row+.switch-row{border-top:2px dashed var(--board-edge)}
.switch-row input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:54px;height:32px;border-radius:999px;border:2px solid var(--ink);background:var(--board-edge);cursor:pointer;transition:background-color .2s}
.switch-row input::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:transform .18s var(--out)}
.switch-row input:checked{background:var(--green)}
.switch-row input:checked::after{transform:translateX(22px)}
.switch-row small{display:block;font-weight:400;font-size:12.5px;color:var(--ink-soft)}
@media (min-width:761px){
  .piece.pw{grid-column:1;grid-row:1/3}
  .piece.snd{grid-column:1;grid-row:3}
  .piece.t1,.piece.t2,.piece.t3{grid-column:2}
}
@media (max-width:760px){
  .deck{grid-template-columns:minmax(0,1fr);padding:0 16px;gap:18px;margin-top:16px}
  .pg-head{padding:14px 16px 0;gap:10px}
  .pg-head h1{font-size:32px}
  .pg-head .nav{margin-left:0;width:100%}
}
@media (max-width:420px){
  .lid{padding:20px 18px 22px}
  .lid h1{font-size:30px}
  .code{font-size:64px}
  .lid-band small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lid,.piece{animation-name:pgFade;animation-duration:.2s}
  .btn,.pill,.switch-row input,.switch-row input::after{transition:none}
  .btn:hover,.btn:active{transform:none}
}