:root{
  --bg:#140b07;
  --felt:#1f6b3a;
  --felt2:#17552d;
  --wood:#5a3517;
  --gold:#ffcc33;
  --red:#e8322b;
  --ink:#fff6e6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(circle at 50% 30%,#3a1d10 0%,var(--bg) 70%);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  overflow:hidden;user-select:none;-webkit-user-select:none;
}
.brush{font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;font-weight:900}
#app{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
.shake-big{animation:shakeBig .6s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px)}40%,60%{transform:translate(6px,-3px)}}
@keyframes shakeBig{10%,90%{transform:translate(-4px,3px) rotate(-.5deg)}20%,80%{transform:translate(9px,-5px) rotate(.8deg)}30%,50%,70%{transform:translate(-14px,7px) rotate(-1deg)}40%,60%{transform:translate(14px,-7px) rotate(1deg)}}

/* ---------- タイトル ---------- */
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:50;
  background:radial-gradient(circle at 50% 40%,#5a1a0e 0%,#140b07 75%);text-align:center;padding:20px}
#title h1{font-size:clamp(56px,14vw,130px);line-height:1;color:var(--ink);
  text-shadow:0 0 0 #000,4px 4px 0 var(--red),8px 8px 0 #000;letter-spacing:.05em;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.04) rotate(-1deg)}}
#title .sub{font-size:clamp(14px,3.6vw,20px);opacity:.9;max-width:560px;line-height:1.8}
#title .sub b{color:var(--gold)}
.levels{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{cursor:pointer;border:3px solid var(--ink);background:#000;color:var(--ink);font-size:18px;font-weight:900;
  padding:12px 22px;border-radius:6px;transition:transform .1s,background .2s;box-shadow:4px 4px 0 var(--red)}
.btn:hover{transform:translate(-2px,-2px);background:var(--red);box-shadow:6px 6px 0 #000}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #000}
.btn small{display:block;font-size:12px;font-weight:400;opacity:.8;margin-top:3px}

/* ---------- 上部 ---------- */
#hud{display:flex;align-items:stretch;gap:10px;width:min(92vw,560px)}
.side{flex:1;background:#000a;border:2px solid #fff3;border-radius:8px;padding:6px 10px;position:relative}
.side.active{border-color:var(--gold);box-shadow:0 0 14px #ffcc3388}
.side .name{font-size:13px;opacity:.85}
.side .cnt{font-size:30px;font-weight:900;display:flex;align-items:center;gap:8px}
.side .cnt i{display:inline-block;width:22px;height:22px;border-radius:50%}
.side.p .cnt i{background:radial-gradient(circle at 35% 30%,#555,#000 70%)}
.side.c .cnt i{background:radial-gradient(circle at 35% 30%,#fff,#bbb 70%)}
#meter{width:min(92vw,560px);text-align:center;font-size:15px}
#meter b{font-size:22px;color:var(--gold)}
#bar{height:10px;background:#000;border-radius:5px;overflow:hidden;margin-top:4px;border:1px solid #fff3}
#bar div{height:100%;width:50%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .4s}

/* ---------- 盤面 ---------- */
#boardWrap{position:relative;padding:10px;background:linear-gradient(145deg,#7a4a22,var(--wood));border-radius:10px;
  box-shadow:0 10px 30px #000c,inset 0 0 0 3px #0005}
#board{display:grid;grid-template-columns:repeat(8,1fr);width:min(88vw,62vh,520px);aspect-ratio:1;gap:2px;background:#0b3a1c;border:2px solid #0b3a1c}
.cell{background:radial-gradient(circle,var(--felt) 60%,var(--felt2));position:relative;cursor:default}
.cell.legal{cursor:pointer}
.cell.legal:hover{background:radial-gradient(circle,#2f8a4e 60%,#1f6b3a)}
.cell .hint{position:absolute;inset:30%;border-radius:50%;border:2px dashed #fff8;display:flex;align-items:center;justify-content:center;
  font-size:clamp(10px,2.4vw,15px);font-weight:900;color:#fffb}
.cell .hint.best{border-color:var(--gold);color:var(--gold)}
.disc{position:absolute;inset:9%;border-radius:50%;transition:transform .15s}
.disc.b{background:radial-gradient(circle at 35% 30%,#666,#111 55%,#000);box-shadow:0 3px 4px #0009}
.disc.w{background:radial-gradient(circle at 35% 30%,#fff,#ddd 55%,#aaa);box-shadow:0 3px 4px #0009}
.disc.drop{animation:drop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes drop{0%{transform:scale(2.6);opacity:0}100%{transform:scale(1);opacity:1}}
.disc.flipping{animation:flip .3s ease-in-out}
@keyframes flip{0%{transform:scaleX(1)}50%{transform:scaleX(0) scaleY(1.2)}100%{transform:scaleX(1)}}
.cell.last::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--red);left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}

/* ---------- 演出 ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.stamp{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:clamp(54px,15vw,140px);color:var(--ink);text-shadow:4px 4px 0 var(--red),8px 8px 0 #000;
  animation:stamp 1.1s ease-out forwards}
.stamp.gold{color:var(--gold);text-shadow:4px 4px 0 #a33,8px 8px 0 #000}
.stamp.bad{color:#9ab;text-shadow:3px 3px 0 #223,6px 6px 0 #000;font-size:clamp(40px,10vw,90px)}
@keyframes stamp{0%{transform:translate(-50%,-50%) scale(4) rotate(-12deg);opacity:0}
  18%{transform:translate(-50%,-50%) scale(.9) rotate(-6deg);opacity:1}
  26%{transform:translate(-50%,-50%) scale(1.05) rotate(-6deg)}
  75%{opacity:1}100%{transform:translate(-50%,-60%) scale(1) rotate(-6deg);opacity:0}}
.combo{position:absolute;left:50%;top:62%;transform:translateX(-50%);font-size:clamp(22px,5vw,40px);color:var(--gold);
  font-weight:900;text-shadow:2px 2px 0 #000;animation:comboUp 1.2s ease-out forwards;white-space:nowrap}
@keyframes comboUp{0%{opacity:0;transform:translate(-50%,20px) scale(.5)}20%{opacity:1;transform:translate(-50%,0) scale(1.2)}100%{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.pt{position:absolute;width:10px;height:10px;border-radius:2px;animation:pt 1s ease-out forwards}
@keyframes pt{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.ring{position:absolute;border:6px solid var(--gold);border-radius:50%;animation:ring .6s ease-out forwards}
@keyframes ring{0%{width:0;height:0;opacity:1;transform:translate(-50%,-50%)}100%{width:300px;height:300px;opacity:0;transform:translate(-50%,-50%)}}
.flash{position:absolute;inset:0;background:#fff;animation:flash .25s ease-out forwards}
@keyframes flash{0%{opacity:.55}100%{opacity:0}}
.lines{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,#ffcc3322 0 4deg,transparent 4deg 12deg);animation:lines .9s ease-out forwards}
@keyframes lines{0%{opacity:1;transform:rotate(0) scale(.6)}100%{opacity:0;transform:rotate(20deg) scale(1.3)}}

/* ---------- セリフ ---------- */
#talk{min-height:46px;width:min(92vw,560px);display:flex;align-items:center;gap:10px}
#talk .face{font-size:30px}
#talk .bubble{flex:1;background:#fff;color:#111;border-radius:12px;padding:8px 12px;font-weight:700;position:relative;font-size:15px}
#talk .bubble::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-right-color:#fff;border-left:0}
#talk .bubble.pop{animation:pop .25s ease-out}
@keyframes pop{0%{transform:scale(.7)}100%{transform:scale(1)}}

#tools{display:flex;gap:8px}
#tools .btn{font-size:13px;padding:6px 12px;box-shadow:2px 2px 0 var(--red)}

/* ---------- リザルト ---------- */
#result{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#000000f0;text-align:center;padding:20px;overflow:auto}
#result.show{display:flex;animation:fadeIn .5s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#result .rank{font-size:clamp(40px,11vw,96px);color:var(--gold);text-shadow:4px 4px 0 var(--red),8px 8px 0 #000;animation:stamp2 .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp2{0%{transform:scale(3);opacity:0}100%{transform:scale(1);opacity:1}}
#result .score{font-size:clamp(18px,4.5vw,26px);font-weight:900}
#result .stats{font-size:15px;line-height:1.9;opacity:.9}
.ledger{display:none;background:#f7f3e8;color:#222;border-radius:4px;min-width:min(88vw,420px);font-size:15px;
  box-shadow:4px 4px 0 #000;overflow:hidden;font-family:"Yu Gothic","Meiryo",sans-serif}
.ledger.on{display:block;animation:stamp2 .4s ease-out}
.ledger .lh,.ledger .lr{display:grid;grid-template-columns:5em 1fr 8em;gap:8px;padding:6px 12px;text-align:left}
.ledger .lh{background:#2a4a7a;color:#fff;font-size:12px}
.ledger .lr{border-bottom:1px dashed #bbb}
.ledger .out{text-align:right;color:#c8201a;font-weight:900;font-variant-numeric:tabular-nums}
.ledger .lh span:last-child{text-align:right}
#result .punch{font-size:clamp(34px,9vw,80px);opacity:0;margin:10px 0;color:#cfd8e0;text-shadow:3px 3px 0 #000}
#result .punch.on{animation:punch 2.2s ease-out forwards}
@keyframes punch{0%{opacity:0;transform:translateY(20px)}40%{opacity:1;transform:none}100%{opacity:1}}
#result .pre{font-size:22px;opacity:0;color:#cfd8e0}
#result .pre.on{animation:fadeIn 1s forwards}
#result .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;opacity:0;transition:opacity .6s}
#result .btns.on{opacity:1}
a.btn{text-decoration:none;display:inline-block}

.btn.sub-btn{font-size:14px;padding:8px 16px;box-shadow:2px 2px 0 var(--red);background:transparent}
#rules{position:fixed;inset:0;z-index:70;background:#000c;display:none;align-items:center;justify-content:center;padding:16px}
#rules.show{display:flex;animation:fadeIn .2s}
#rules .box{background:#fff6e6;color:#222;border-radius:10px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:20px 22px;box-shadow:6px 6px 0 var(--red)}
#rules h2{font-size:22px;margin-bottom:12px}
#rules ol{padding-left:1.4em;line-height:1.8;font-size:15px}
#rules li{margin-bottom:6px}
#rules .demo{display:flex;align-items:center;gap:6px;margin:6px 0 2px;flex-wrap:wrap;font-size:14px}
#rules .demo i{display:inline-block;width:22px;height:22px;border-radius:50%;border:1px solid #0004}
#rules .demo i.b{background:radial-gradient(circle at 35% 30%,#666,#000 60%)}
#rules .demo i.w{background:radial-gradient(circle at 35% 30%,#fff,#bbb 70%)}
#rules .demo i.n{background:transparent;border:2px dashed var(--red)}
#rules .note{margin-top:12px;padding:10px 12px;background:#2a1a10;color:var(--ink);border-radius:6px;font-size:14px;line-height:1.7}
#rules .note b{color:var(--gold)}
#rules .close{margin-top:14px;width:100%}
#story{position:fixed;inset:0;z-index:55;background:#000;display:none;align-items:center;justify-content:center;cursor:pointer;padding:20px;text-align:center}
#story.show{display:flex}
#story .st{font-size:clamp(22px,5.5vw,40px);color:var(--ink);opacity:0}
#story .st.on{animation:stIn 1.2s ease-out forwards}
#story .st.big{font-size:clamp(26px,7vw,64px);white-space:nowrap;color:var(--gold);text-shadow:3px 3px 0 var(--red)}
@keyframes stIn{0%{opacity:0;transform:translateY(10px)}25%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
#story .skip{position:absolute;right:16px;bottom:14px;font-size:12px;opacity:.5}
#pass{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;background:#000e;border:3px solid var(--gold);
  padding:16px 26px;border-radius:10px;font-size:22px;font-weight:900;display:none;text-align:center}
#pass.show{display:block;animation:stamp2 .35s}

/* ---------- 奢った額ランキングへの登録 ---------- */
.record{display:none;width:min(88vw,420px);background:#000a;border:2px solid var(--gold);border-radius:8px;padding:10px 12px;text-align:left}
.record.on{display:block;animation:fadeIn .4s}
.record label{display:block;font-size:13px;color:var(--gold);font-weight:900;margin-bottom:6px}
.record .rrow{display:flex;gap:8px}
.record input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 10px;border-radius:6px;border:2px solid var(--ink);background:#111;color:var(--ink)}
.record .btn{font-size:15px;padding:8px 16px;box-shadow:2px 2px 0 var(--red)}
.record .rmsg{margin-top:6px;font-size:13px;min-height:1em;line-height:1.5}
.record .rmsg.ok{color:var(--gold);font-weight:700}
.record .rmsg.err{color:#ff8f87}