/* Illuvial Drop: Sanctum Mesa wood-and-parchment skin (same tokens as mesa_skin.js). */
:root{
  --f-px:"Pixelify Sans","Nunito",system-ui,sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --ink:#4a2a14; --ink2:#7a5230; --edge:#3b1d0e; --deep:#1e0c04; --cream:#fff3d8; --cream2:#ffe2a8;
  --wood:repeating-linear-gradient(180deg,transparent 0 9px,rgba(70,30,8,.28) 9px 11px),linear-gradient(180deg,#c48548,#9c5a2a);
  --parch:repeating-linear-gradient(180deg,transparent 0 22px,rgba(160,110,50,.07) 22px 23px),linear-gradient(180deg,#fbecc8,#f1d9a6);
  --green:repeating-linear-gradient(180deg,transparent 0 11px,rgba(20,50,10,.3) 11px 13px),linear-gradient(180deg,#7fb04a,#5a8a30);
  --gold:#ffd36e; --bad:#c94d68;
  --bg:#2a1a2e;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#2a1a2e; } }
:root[data-theme="dark"]{ --bg:#2a1a2e; }
*{box-sizing:border-box;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--f-body);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
button{font:inherit;color:inherit}
#cv{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;cursor:none}
#cv.ui{cursor:default}
.hud{position:fixed;z-index:5;pointer-events:none}
.hud .ia{pointer-events:auto}

/* wood + parchment pieces */
.wbtn{font:700 14px var(--f-px);letter-spacing:.04em;color:var(--cream);border:3px solid var(--edge);border-radius:6px;padding:7px 13px;
  background:var(--wood);box-shadow:inset 0 2px 0 #e8ab6a,inset 0 -3px 0 #6a3412,0 3px 0 var(--deep);text-shadow:1px 1px 0 #4a230c;cursor:pointer;
  transition:transform .08s,filter .12s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap;min-height:38px}
.wbtn:hover{filter:brightness(1.08)}
.wbtn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #e8ab6a,inset 0 -2px 0 #6a3412,0 1px 0 var(--deep)}
.wbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wbtn.go{font-size:18px;padding:10px 20px;background:var(--green);box-shadow:inset 0 3px 0 #b6dc7a,inset 0 -4px 0 #35561a,0 3px 0 var(--deep);text-shadow:2px 2px 0 #24400e}
.wbtn.go:active{box-shadow:inset 0 3px 0 #b6dc7a,inset 0 -2px 0 #35561a,0 1px 0 var(--deep)}
.wbtn.pa{color:#5a2d12;background:var(--parch);box-shadow:inset 0 2px 0 #fff6dc,inset 0 -3px 0 #d8b67a,0 3px 0 var(--deep);text-shadow:none}
.wbtn.sm{font-size:12px;padding:5px 9px;min-height:32px}
.wbtn.icon{width:40px;padding:0;font-size:18px}
.wbtn[aria-pressed="false"]{filter:saturate(.4) brightness(.92)}
.plaque{position:relative;border:3px solid var(--edge);border-radius:6px;background:var(--wood);box-shadow:inset 0 2px 0 #e8ab6a,inset 0 -3px 0 #6a3412,0 3px 0 var(--deep);
  color:var(--cream);text-shadow:2px 2px 0 #4a230c;font:700 18px var(--f-px);letter-spacing:.03em;padding:4px 16px 6px}
.plaque::before,.plaque::after{content:"";position:absolute;top:5px;width:5px;height:5px;border-radius:50%;background:#e2c08a;box-shadow:0 0 0 1px var(--edge)}
.plaque::before{left:5px}.plaque::after{right:5px}
.plaque small{display:block;font:500 11px var(--f-px);letter-spacing:.06em;color:var(--cream2);text-shadow:1px 1px 0 #4a230c;margin-top:-1px}
.card{position:relative;color:var(--ink);background:var(--parch);border:5px solid #a8662f;border-radius:8px;
  box-shadow:0 0 0 3px var(--edge),inset 0 0 0 2px #6a3412,inset 0 4px 0 2px #fff4d8,0 7px 0 3px var(--deep),0 18px 40px rgba(0,0,0,.45)}
.card>.hd{margin:0;padding:8px 14px 7px;font:700 20px var(--f-px);letter-spacing:.03em;color:var(--cream);text-shadow:2px 2px 0 #4a230c;background:var(--wood);border-bottom:3px solid var(--edge);box-shadow:inset 0 2px 0 #e8ab6a;display:flex;align-items:center;gap:8px}
.lbl{font:600 11px var(--f-px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}

/* HUD pieces */
#score{padding:6px 12px 8px;min-width:130px}
#score .v{font:700 34px/1 var(--f-px);color:var(--ink);letter-spacing:.02em;font-variant-numeric:tabular-nums}
#score .v.bump{animation:bump .25s ease-out}
@keyframes bump{0%{transform:scale(1.18)}100%{transform:scale(1)}}
#score .b{font:600 12px var(--f-px);color:var(--ink2);margin-top:3px}
#next{padding:6px 10px 8px;display:flex;flex-direction:column;align-items:center}
#next canvas{display:block}
#chain{padding:6px 8px}
#chain canvas{display:block}
#board{width:100%;padding:0 0 6px;overflow:hidden}
#board .hd{font-size:15px;padding:5px 10px}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px 4px}
.tabs button{font:600 12px var(--f-px);color:#5a2d12;background:#ecd09a;border:2px solid #8a5430;border-radius:4px;padding:3px 6px;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--cream);background:var(--wood);border-color:var(--edge);text-shadow:1px 1px 0 #4a230c}
.rows{list-style:none;margin:0;padding:0 8px;font:700 13px var(--f-body)}
.rows li{display:grid;grid-template-columns:26px 1fr auto;gap:6px;align-items:center;padding:3px 6px;border-radius:5px}
.rows li:nth-child(odd){background:rgba(120,70,25,.08)}
.rows li.you{background:#e6f2c4;box-shadow:inset 0 0 0 2px #5a8a30}
.rows .rk{font:700 13px var(--f-px);color:var(--ink2);text-align:right}
.rows .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .sc{font:700 13px var(--f-px);font-variant-numeric:tabular-nums}
.rows .nb{font-size:11px;margin-left:3px}
.rows .empty{display:block;text-align:center;color:var(--ink2);font-weight:600;padding:10px 4px;background:none}
.rows li:first-child .rk{color:#b5651d}
.me-line{padding:4px 12px 0;font:600 12px var(--f-body);color:var(--ink2)}
.me-line a{color:#2f6f9d;font-weight:800}
#topbar{display:flex;gap:6px;align-items:center}

/* overlays */
.ov{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:16px;background:rgba(34,16,4,.5);overflow:auto}
.ov[hidden]{display:none}
.ov .card{width:min(460px,100%);margin:auto}
.ov .bd{padding:12px 16px 14px}
.ov p{margin:6px 0;line-height:1.4}
.title-logo{display:flex;flex-direction:column;align-items:center;margin:-4px 0 6px}
.title-logo .plaque{font-size:30px;padding:6px 26px 9px;transform:rotate(-1.5deg)}
.title-logo .plaque small{font-size:12px;text-align:center}
.tl-chain{display:block;margin:6px auto 4px;max-width:100%}
.btns{display:flex;flex-direction:column;gap:8px;margin:10px 0 6px}
.btns .row{display:flex;gap:8px}
.btns .row>*{flex:1}
.go small{display:block;font:500 11px var(--f-px);letter-spacing:.04em;opacity:.9}
.go .two{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.note{font-size:12.5px;color:var(--ink2);font-weight:600}
.signin{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:6px;background:rgba(120,70,25,.1);border:2px dashed rgba(90,45,18,.35);font-size:13px;font-weight:700}
.big{font:700 44px/1 var(--f-px);text-align:center;color:var(--ink);margin:4px 0 0;font-variant-numeric:tabular-nums}
.newbest{display:inline-block;font:700 13px var(--f-px);color:#3a2200;background:linear-gradient(#fff3c4,#f0b030);border:2px solid var(--edge);border-radius:5px;padding:2px 8px;transform:rotate(-3deg);box-shadow:0 2px 0 var(--deep)}
.reach{display:flex;gap:12px;align-items:center;justify-content:center;margin:8px 0}
.reach canvas{flex:none}
.reach b{font:700 16px var(--f-px);display:block}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0}
.stats div{text-align:center;background:rgba(120,70,25,.1);border:2px solid rgba(90,45,18,.22);border-radius:6px;padding:5px 2px}
.stats b{display:block;font:700 18px var(--f-px)}
.stats span{font:600 10px var(--f-px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.rankline{text-align:center;font:700 14px var(--f-px);color:#5a8a30;min-height:18px}
.sharebox{display:flex;gap:10px;align-items:center;margin-top:8px}
.sharebox img{width:132px;height:auto;border:3px solid var(--edge);border-radius:5px;flex:none;background:#f1d9a6}
.sharebox .col{display:flex;flex-direction:column;gap:6px;flex:1}
.sharetxt{font:600 12px var(--f-body);color:var(--ink2);word-break:break-word}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:40;font:700 15px var(--f-px);color:#5a2d12;background:var(--parch);border:3px solid var(--edge);border-radius:6px;padding:7px 16px;
  box-shadow:inset 0 2px 0 #fff6dc,inset 0 -3px 0 #d8b67a,0 4px 0 var(--deep),0 10px 20px rgba(0,0,0,.3);transition:opacity .25s, transform .25s;pointer-events:none}
.toast[hidden]{display:block;opacity:0;transform:translate(-50%,10px)}
kbd{font:600 11px var(--f-px);background:#fff6de;border:2px solid #8a5430;border-radius:4px;padding:0 4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-height:430px){ .ov .card{width:min(640px,100%)} .title-logo .plaque{font-size:24px} .big{font-size:36px} .ov .bd{padding:8px 14px 10px} .btns{margin:6px 0 4px} }
@media (prefers-reduced-motion:reduce){ #score .v.bump{animation:none} }
#exitBtn .short{display:none}
#exitBtn.compact .full{display:none}#exitBtn.compact .short{display:inline}
body.port #score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:5px 10px 6px;min-width:0}
body.port #score .lbl{width:100%}
body.port #score .v{font-size:28px}
body.port #score .b{margin:0}
body.port #next{flex-direction:row;gap:6px;padding:5px 8px}
body.port #next .lbl{writing-mode:vertical-rl;transform:rotate(180deg)}
body.port #hMode .plaque{font-size:14px;padding:3px 12px 4px;text-align:center}
body.port #hMode .plaque small{font-size:10px}
body.port #chain{display:flex;justify-content:center}
body.land #hMode .plaque{font-size:17px}
@media (max-height:500px) and (orientation:landscape){
  .ov{padding:8px}
  #ovOver .card{width:min(780px,100%)}
  #ovOver .bd{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start;padding:8px 14px 10px}
  #ovOver .reach{margin:2px 0}#ovOver .reach canvas{width:64px!important;height:64px!important}
  #ovOver .big{font-size:34px}#ovOver .stats{margin:6px 0 0}#ovOver .stats b{font-size:15px}
  #ovOver .btns{margin:4px 0}#ovOver .wbtn.go{padding:7px 16px}
  #ovOver .sharebox img{width:104px}
  #ovOver .hd{padding:5px 12px;font-size:17px}
  #ovTitle .card{width:min(700px,100%)}
  #ovTitle .bd{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:center}
  #ovTitle .title-logo,#ovTitle .tl-chain{grid-column:1}
  #ovTitle .bd>p.note:first-of-type{grid-column:1;grid-row:3}
  #ovTitle .btns{grid-column:2;grid-row:1/3}
  #ovTitle #whoTitle{grid-column:2;grid-row:3}
  #ovTitle .bd>p.note:last-child{grid-column:1/3}
}
.ov a:not(.wbtn){color:#2f6f9d;font-weight:800}