*{box-sizing:border-box}
:root{--grain:linear-gradient(transparent,transparent);--s:300px;--side:0px;--sp:0px;
  --cream:#f6e6bd;--gold:#f0c24f;
  --wood:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 38%,rgba(0,0,0,.6) 100%),var(--grain),linear-gradient(165deg,#47290f 0%,#6d4821 48%,#8e6b30 100%)}
html,body{margin:0;height:100%;overflow:hidden;background:#3b2210;color:var(--cream);overscroll-behavior:none}
body{background:var(--wood);background-size:cover,256px 512px,cover;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-shadow:0 1px 2px rgba(0,0,0,.55);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
a{color:var(--cream);text-decoration:none}
a:hover{text-decoration:underline}

/* decorative backdrop */
.decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.moon{position:absolute;left:50%;top:-22vmin;width:76vmin;height:76vmin;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,170,.32) 0,rgba(255,222,140,.1) 45%,rgba(255,220,140,0) 70%)}
.buddha{position:absolute;left:50%;top:50%;width:min(94vw,88vh,640px);transform:translate(-50%,-50%);opacity:.12}
.bamboo{position:absolute;top:0;bottom:0;width:min(var(--side),150px);overflow:hidden;opacity:.55}
.bamboo.l{left:0}.bamboo.r{right:0;transform:scaleX(-1)}
.bamboo svg{display:block;width:140px;height:100%}
.stones{display:none;position:absolute;bottom:0;opacity:.85}
.stones svg{display:block;height:100%;width:auto}
.stones.l{left:40px}.stones.r{right:40px;transform:scaleX(-1)}
.st-side .stones{display:block;height:104px;bottom:18px}
.st-low .stones{display:block;height:var(--sp);bottom:2px}
.st-low .stones.l{left:12px}.st-low .stones.r{right:12px}
.nobamboo .bamboo{display:none}
@media (max-height:519px),(max-width:339px){.buddha,.moon{display:none}}

.app{position:relative;z-index:1;height:100vh;height:100dvh;max-width:720px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.app>*{flex:none;width:var(--s);max-width:100%;min-width:0}
.top{display:flex;flex-wrap:wrap;row-gap:4px;align-items:center;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
.top a{font-weight:700}
.ttl{display:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center;font-family:Georgia,'Palatino Linotype',serif;font-weight:700;letter-spacing:.12em;color:var(--gold)}
.wide .ttl{display:inline}
.btns{display:flex;gap:6px}

/* HUD */
.stats{display:grid;grid-template-columns:.9fr 1.7fr .9fr;gap:8px;align-items:center;text-align:center}
.stats>div:nth-child(1){grid-column:2;grid-row:1}
.stats>div:nth-child(2){grid-column:1;grid-row:1}
.stats>div:nth-child(3){grid-column:3;grid-row:1}
.stats>div:not(:nth-child(1)){border-radius:9px;padding:4px 2px 5px;border:1px solid #24140a;
  background:var(--grain),linear-gradient(#6a4a26,#4a2f15);box-shadow:inset 0 1px 0 rgba(255,235,190,.35),inset 0 -2px 0 rgba(0,0,0,.3),0 3px 6px rgba(0,0,0,.4)}
.lbl{display:block;font-size:8.5px;letter-spacing:.1em;opacity:.8}
.stats b{font-family:Georgia,'Palatino Linotype',serif;font-size:15px;font-weight:700;color:#ffe6a3}
.stats>div:nth-child(1) .lbl{color:var(--cream);opacity:.85}
.stats>div:nth-child(1) b{display:block;font-size:clamp(30px,calc(var(--s)*.105),54px);line-height:1.05;text-shadow:none;
  background:linear-gradient(#fff3bd 0,#f4c94a 48%,#b98618 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #3d2306) drop-shadow(0 0 10px rgba(255,196,70,.35))}

/* board */
.boardwrap{position:relative;height:var(--s);line-height:0}
.boardwrap::before{content:'';position:absolute;inset:-8px;border-radius:17px;z-index:0;
  background:var(--grain),linear-gradient(145deg,#d1a45c,#a97d40 50%,#8a6230);
  box-shadow:0 8px 20px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,238,200,.55),inset 2px 0 0 rgba(255,238,200,.25),inset 0 -3px 0 rgba(60,28,6,.55),inset -2px 0 0 rgba(60,28,6,.35)}
canvas{display:block;max-width:none}
#board{position:relative;z-index:1;border-radius:9px;box-shadow:0 0 0 2px #3d2410,0 0 0 3px rgba(255,225,170,.25),inset 0 0 12px #000}
#board,#tray{touch-action:none}
#drag{position:fixed;left:0;top:0;pointer-events:none;z-index:50}
.help{margin:0;font-size:10px;line-height:1.3;text-align:center;opacity:.88}

button{font:inherit;font-size:11px;letter-spacing:.06em;color:var(--cream);border:1px solid #24140a;padding:5px 9px;cursor:pointer;border-radius:7px;white-space:nowrap;
  text-shadow:0 1px 1px rgba(0,0,0,.7);background:var(--grain),linear-gradient(#80602f,#5a3d1d);
  box-shadow:inset 0 1px 0 rgba(255,235,190,.4),inset 0 -2px 0 rgba(0,0,0,.28),0 2px 0 #24140a}
#snd{background:linear-gradient(#8f8c82,#5f5c54);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.28),0 2px 0 #24140a}
button:hover,button:focus-visible{filter:brightness(1.15);outline:none}
button:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,235,190,.3),0 1px 0 #24140a}

.toasts{position:absolute;left:0;right:0;top:36%;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:6;line-height:1.2}
.toast{font-family:'Palatino Linotype',Palatino,Georgia,serif;font-style:italic;font-weight:700;letter-spacing:.06em;font-size:20px;color:#ffe08a;
  text-shadow:0 2px 3px #3a2005,0 0 12px rgba(255,190,60,.6);background:rgba(36,18,6,.62);padding:3px 16px;border-radius:20px;border:1px solid rgba(240,194,79,.7);
  animation:rise 1.2s ease-out forwards}
.toast.combo{color:#fff1c2;font-size:22px}
@keyframes rise{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-28px)}}

/* panels */
.over{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(20,9,3,.72);line-height:1.5;border-radius:9px}
.over[hidden],.scores[hidden]{display:none}
.panel{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;max-width:92%;padding:16px 22px;font-size:13px;color:var(--gold);
  border-radius:12px;border:2px solid #c9a24f;outline:1px solid #2a1507;outline-offset:-5px;
  background:var(--grain),linear-gradient(#4b2f16,#2f1b0b);box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 5px rgba(0,0,0,.18)}
.panel b{color:#ffe6a3}
.ot{font-family:Georgia,'Palatino Linotype',serif;font-size:20px;font-weight:700;letter-spacing:.12em;margin-bottom:2px;color:#ffe08a}
.oline{min-height:1.5em;font-size:12px;word-break:break-word;color:var(--cream)}
.row2{display:flex;gap:8px;align-items:center}
button.small{font-size:10px;opacity:.9}
button:disabled{opacity:.5;cursor:default}
.scores{position:fixed;inset:0;z-index:55;background:var(--wood);background-size:cover,256px 512px,cover;display:flex;justify-content:center;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.sbox{width:100%;max-width:720px;display:flex;flex-direction:column;min-height:0;padding:12px;border-radius:14px;border:2px solid #c9a24f;
  background:var(--grain),linear-gradient(#3e2711,#26150a);box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 0 0 5px rgba(0,0,0,.2)}
.shead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:Georgia,'Palatino Linotype',serif;font-weight:700;letter-spacing:.1em;padding-bottom:8px;border-bottom:1px solid rgba(240,194,79,.4);font-size:15px;color:#ffe08a}
.slist{flex:1;overflow-y:auto;padding-top:6px;font-size:13px;color:var(--cream)}
.srow{display:grid;grid-template-columns:3.2ch 1fr 9ch 7ch;gap:8px;padding:4px 6px;border-radius:5px}
.srow span:nth-child(n+3){text-align:right}
.srow.h{opacity:.7;font-size:11px;letter-spacing:.08em;color:var(--gold)}
.srow.me{background:rgba(240,194,79,.2);color:#ffe9a8;box-shadow:inset 0 0 0 1px rgba(240,194,79,.5)}
.smsg{padding:30px 0;text-align:center;letter-spacing:.12em}
@media (max-width:420px){button{font-size:10px;padding:5px 6px;letter-spacing:.02em}.top{gap:5px}.btns{gap:4px}}
@media (min-width:560px){.top{font-size:13px}.help{font-size:12px}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}