:root{
  --sumi:#141210; --sumi-card:#201D19; --sumi-line:#332F29;
  --bero-night:#FF6FA3; --bero-line:#E8457F; --bero-ink:#B5306A;
  --kinari:#F6F1E7; --hikari:#FFF3D6; --hoshi:#FFC21A;
  --day-line:#DDD4C2; --day-muted:#6B6358;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%;}
body{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif; font-weight:500; background:var(--sumi); color:var(--hikari); -webkit-text-size-adjust:100%;}
body.day{background:var(--kinari); color:var(--sumi);}
#app{max-width:430px; min-height:100%; margin:0 auto; position:relative;}
.screen{min-height:100dvh; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center;}
.screen[hidden]{display:none;}
h1,h2,p{margin:0;}
button{font:inherit; border:0; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.primary{width:100%; padding:16px; border-radius:16px; font-weight:800; font-size:18px;}
.night .primary{background:var(--hikari); color:var(--sumi);}
.day .primary{background:var(--sumi); color:var(--hikari);}
.quiet{background:none; color:var(--day-muted); font-size:14px; padding:10px 12px; text-decoration:underline; text-underline-offset:3px;}
.kicker{font-size:13px; letter-spacing:.08em; opacity:.75;}
.fine{font-size:12px; line-height:1.6; opacity:.7; text-align:center;}
.macho{background-repeat:no-repeat; flex:none;}

/* opening */
#opening{justify-content:flex-end; text-align:center; gap:10px; overflow:hidden;}
.spot{position:relative; flex:1; width:100%; min-height:260px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px;}
.spot::before{content:""; position:absolute; left:50%; bottom:0; width:270px; height:270px; transform:translateX(-50%); border-radius:50%; background:var(--hikari); box-shadow:0 0 60px 10px rgba(255,243,214,.25);}
#openMacho{position:relative; z-index:1;}
#opening h1{font-size:44px; font-weight:800; letter-spacing:.04em;}
#opening .lead{font-size:16px; line-height:1.7;}
#opening .effect{font-size:13px; line-height:1.6; opacity:.75; margin-bottom:10px;}
#opening .primary{margin-top:4px;}

/* play */
#play{gap:0; padding-top:16px;}
#play header{width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px;}
.chip{font-weight:800; font-size:15px; padding:4px 12px; border-radius:999px; background:var(--sumi); color:var(--hikari);}
#dots{list-style:none; display:flex; gap:5px; margin:0; padding:0;}
#dots li{width:9px; height:9px; border-radius:50%; border:2px solid var(--day-line);}
#dots li.first{background:var(--hoshi); border-color:var(--hoshi);}
#dots li.helped{border-color:var(--sumi);}
#dots li.now{border-color:var(--bero-line);}
#stage{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; min-height:230px;}
#verb{font-size:40px; font-weight:800; min-height:56px; letter-spacing:.06em;}
#verb.flash{animation:verb .45s ease-out;}
@keyframes verb{0%{transform:scale(1.5); opacity:0} 100%{transform:none; opacity:1}}
#boxes{display:flex; gap:10px; min-height:76px; align-items:center; transition:gap .25s;}
.box{width:64px; height:64px; border-radius:16px; border:3px solid var(--sumi); background:transparent; transition:background .12s, transform .12s, border-color .12s, opacity .3s, width .25s, margin .25s;}
.box.on{background:var(--bero-line); border-color:var(--bero-line); transform:translateY(-6px);}
.box.veil{border-style:dashed; border-color:var(--day-line);}
.box.veil.on{background:var(--day-line); border-color:var(--day-line);}
.box.gone{opacity:0; transform:translateY(46px) rotate(-18deg); width:0; margin-right:-10px; border-width:0;}
.box.fresh{animation:fresh .3s ease-out;}
@keyframes fresh{0%{transform:translateY(-46px); opacity:0} 100%{transform:none; opacity:1}}
#boxes.joined{gap:0;}
#boxes.joined .box{border-radius:0; border-left-width:0; border-right-width:0; background:var(--hoshi); border-color:var(--sumi);}
#boxes.joined .box:first-child{border-radius:16px 0 0 16px; border-left-width:3px;}
#boxes.joined .box:last-child{border-radius:0 16px 16px 0; border-right-width:3px;}
#boxes.joined .box:only-child{border-radius:16px;}
#boxes.joined .box.gone{display:none;}
#word{font-size:30px; font-weight:800; min-height:40px; letter-spacing:.03em;}

#listener{width:100%; display:flex; align-items:flex-end; gap:12px; min-height:150px;}
#card{flex:1; min-height:64px; margin-bottom:26px; padding:12px 14px; border-radius:14px; border:3px solid var(--sumi); background:#fff; font-size:15px; line-height:1.5; position:relative; opacity:0; transform:translateY(8px); transition:opacity .15s, transform .15s;}
#card.up{opacity:1; transform:none;}
#card::before{content:""; position:absolute; left:-12px; bottom:14px; border:6px solid transparent; border-right-color:var(--sumi);}
#card b{font-size:22px; font-weight:800;}
#play footer{width:100%; display:flex; align-items:center; gap:4px; min-height:56px;}
#turn{flex:1; display:flex; align-items:center; gap:10px; font-weight:800; font-size:16px; color:var(--day-muted);}
#turn i{width:18px; height:18px; border-radius:50%; border:3px solid var(--day-line); flex:none;}
#turn.you{color:var(--bero-ink);}
#turn.you i{border-color:var(--bero-line); background:var(--bero-line); animation:you 1s ease-in-out infinite;}
@keyframes you{0%,100%{box-shadow:0 0 0 0 rgba(232,69,127,.45)} 50%{box-shadow:0 0 0 10px rgba(232,69,127,0)}}

#nameCard{position:absolute; inset:0; z-index:5; background:var(--sumi); color:var(--hikari); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; animation:cardin .25s ease-out;}
#nameCard[hidden]{display:none;}
#nameCard h2{font-size:52px; font-weight:800; letter-spacing:.06em;}
#nameCard p:last-child{font-size:17px; line-height:1.7;}
@keyframes cardin{0%{opacity:0} 100%{opacity:1}}

/* result */
#result{gap:10px; text-align:center;}
#result .big{font-size:20px; font-weight:800;}
#result .big b{font-size:64px; line-height:1;}
#resultLine{font-size:16px;}
#comebackLine{font-size:14px; color:var(--bero-ink); font-weight:800; min-height:20px;}
#logTable{width:100%; border-collapse:collapse; font-size:14px; margin-top:8px; text-align:left;}
#logTable th{font-size:12px; font-weight:500; color:var(--day-muted); padding:4px 8px; border-bottom:2px solid var(--sumi);}
#logTable td{padding:6px 8px; border-bottom:1px solid var(--day-line);}
#logTable td:first-child{font-weight:800;}
#logTable tr.hit td:last-child::after{content:" ●"; color:var(--hoshi);}
details{width:100%; font-size:13px; text-align:left;}
textarea{width:100%; font:12px/1.4 ui-monospace,monospace; border:1px solid var(--day-line); border-radius:8px; background:#fff; padding:8px;}
#result .primary{margin-top:auto;}
.switch{font-size:13px; opacity:.8; display:flex; align-items:center; gap:8px;}
.switch input{width:18px; height:18px; accent-color:var(--hikari);}