:root{
  --ink:#1b1410; --ink2:#2a1f18; --bg:#201813; --cream:#f2e8d2; --red:#c8202c; --wood:#d9ad70; --line:#5a4434;
  --ui:"BIZ UDPGothic",sans-serif; --head:"Dela Gothic One","BIZ UDPGothic",sans-serif;
}
html,body{margin:0;height:100%;background:#0f0b08;overflow:hidden;overscroll-behavior:none}
body{color:var(--cream);font-family:var(--ui);-webkit-tap-highlight-color:transparent}
#app{position:absolute;inset:0;background:var(--bg);font-family:var(--ui);color:var(--cream);user-select:none;-webkit-user-select:none;overflow:hidden}
#app *{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.scr{position:absolute;inset:0;display:none}
.scr.on{display:block}

/* ---- 共通の部品 ---- */
.btn{font:700 24px var(--ui);background:transparent;color:var(--cream);border:3px solid var(--cream);border-radius:0;padding:12px 20px;min-height:64px}
.btn:active{background:var(--cream);color:var(--ink)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red:active{background:#a3161f}
.bar{position:absolute;left:0;right:0;top:0;height:92px;display:flex;align-items:center;gap:20px;padding:0 28px;background:var(--ink);border-bottom:6px solid var(--red)}
.bar h2{margin:0;font:400 34px var(--head);letter-spacing:.04em}
.bar .btn{min-height:56px;padding:6px 18px;font-size:20px}
.body{position:absolute;left:0;right:0;top:92px;bottom:0;padding:24px 36px;overflow-y:auto;touch-action:pan-y}
.muted{opacity:.75;font-size:20px;line-height:1.6}

/* ---- 入口 ---- */
#scr-title{background:var(--bg)}
#scr-title .wrap{position:absolute;inset:0;display:grid;padding:44px 56px;gap:36px}
.land #scr-title .wrap{grid-template-columns:470px 1fr;align-content:center}
.port #scr-title .wrap{grid-template-columns:1fr;align-content:start;padding:56px 40px;gap:30px}
.t-left{display:flex;flex-direction:column;gap:22px}
.t-sub{font:700 22px var(--ui);color:var(--wood);letter-spacing:.08em}
.t-h1{margin:0;font:400 46px/1.1 var(--head);letter-spacing:.02em}
.t-h1 b{display:block;font:400 82px/1.05 var(--head);color:#fff;font-weight:400;text-shadow:0 6px 0 var(--red)}
.port .t-h1 b{font-size:92px}
.t-best{font:700 22px var(--ui);border-top:3px solid var(--line);padding-top:14px;min-height:46px}
.t-best b{font:400 34px var(--head);color:#fff;margin:0 4px}
#btnStart{font:400 52px var(--head);height:124px;letter-spacing:.1em}
.t-start-note{font-size:18px;opacity:.75;margin-top:-10px}
.t-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.t-nav .btn{font-size:21px;min-height:60px;padding:8px}
.t-right{display:flex;flex-direction:column;gap:14px}
.lbl{font:700 20px var(--ui);color:var(--wood);letter-spacing:.1em}
.modes{display:flex;flex-direction:column;gap:12px}
.mode{display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:16px;text-align:left;background:transparent;border:3px solid var(--line);border-radius:0;padding:16px 20px;min-height:104px}
.mode i{grid-row:span 2;width:22px;height:22px;border:3px solid var(--line)}
.mode b{font:400 34px var(--head)}
.mode span{font-size:19px;opacity:.85}
.mode.on{border-color:var(--cream);background:var(--ink2)}
.mode.on i{background:var(--red);border-color:var(--red)}
.t-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.t-two .btn{font:400 26px var(--head);min-height:84px;padding:8px;letter-spacing:.02em}
.p-note{font-size:18px;opacity:.75}
.port .t-left{display:contents}
.port .t-brand{order:0}
.port .t-right{order:1}
.port .t-act{order:2;display:flex;flex-direction:column;gap:16px}
.port .t-nav{order:3}
.land .t-act{display:flex;flex-direction:column;gap:16px}
.port #scr-title .wrap{padding:40px 40px;gap:22px}
.port .t-h1 b{font-size:80px}
.port .t-right{gap:10px}
.port .modes{gap:10px}
.port .mode{min-height:80px;padding:10px 18px}
.port .mode b{font-size:30px}
.port .t-two .btn{min-height:76px}
.port #btnStart{height:104px}
.port .t-start-note{display:none}
.port .t-act{gap:10px}
.port .t-nav{grid-template-columns:repeat(4,1fr);gap:10px}
.port .t-nav .btn{font-size:18px;padding:4px}

/* ---- 遊ぶ画面 ---- */
#board{position:absolute;left:0;top:0;width:100%;background:var(--cream);color:var(--ink);border-bottom:4px solid var(--ink)}
#board table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}
#board th{height:30px;font:700 15px var(--ui);background:var(--ink);color:var(--cream);border-left:1px solid #4a3a2e}
#board th.nm{width:62px}
#board th.tot{width:86px}
#board th.f10{width:96px}
.port #board th.nm{width:52px}
.port #board th.tot{width:68px}
.port #board th.f10{width:84px}
#board td{border:1px solid #8b7a62;text-align:center;padding:0;font-weight:700;vertical-align:top}
#board td.nm{font:700 16px var(--ui);vertical-align:middle;white-space:nowrap;overflow:hidden}
#board tr.cur td.nm{background:var(--red);color:#fff}
#board td.tot{font:400 26px var(--head);vertical-align:middle}
#board td.fr{cursor:pointer}
#board td.fr:active{background:#ead9b4}
#board td.on{background:#f6dd93}
#board .mk{display:flex;height:calc(var(--rowH) * .45);border-bottom:1px solid #b9a88c}
#board .mk span{flex:1;font:700 19px/calc(var(--rowH) * .45) var(--ui)}
#board .mk span+span{border-left:1px solid #b9a88c}
#board .mk i{font-style:normal;display:inline-block;min-width:1.35em;line-height:1.2;border:2px solid var(--red);border-radius:50%;color:var(--red)}
#board .sc{font:700 21px/calc(var(--rowH) * .55 - 2px) var(--ui)}
.port #board .mk span{font-size:17px}
.port #board .sc{font-size:19px}

#lane{position:absolute;left:0;width:100%;overflow:hidden;background:#140f0b}
#cv{position:absolute;left:0;top:0;touch-action:none;display:block}
#btnMenu{position:absolute;left:14px;top:14px;width:124px;height:58px;font:700 22px var(--ui);background:rgba(20,14,10,.78);border:3px solid var(--cream);border-radius:0;z-index:5}
#fl{position:absolute;left:152px;top:14px;padding:6px 14px;background:rgba(20,14,10,.78);font:700 22px/1.25 var(--ui);pointer-events:none;z-index:5}
#fl b{color:#fff;background:var(--red);padding:0 8px;margin-right:6px}
#fl small{display:block;font-size:16px;color:var(--wood)}
#fl:empty{display:none}
#spd{position:absolute;left:14px;top:86px;padding:4px 12px;background:rgba(20,14,10,.78);font:700 20px var(--ui);display:none;pointer-events:none}
#spd.on{display:block}
#hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 16px;background:rgba(20,14,10,.8);font:700 20px var(--ui);white-space:nowrap;pointer-events:none;display:none;text-align:center;line-height:1.4}
#hint.on{display:block}
#hint small{display:block;font-size:15px;opacity:.75;font-weight:400}

#call{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);text-align:center;pointer-events:none;opacity:0;z-index:6}
#call .band{padding:8px 0}
#call b{display:block;font:400 64px/1.15 var(--head);color:#fff;text-shadow:0 5px 0 var(--red),0 0 22px rgba(0,0,0,.7)}
#call small{display:block;font:700 22px var(--ui);color:var(--cream);margin-top:6px;text-shadow:0 2px 0 var(--ink)}
#call.show{opacity:1;animation:pop .22s ease-out}
#call.big b{font-size:88px}
#call.huge .band{background:var(--red);border-block:6px solid var(--cream);padding:22px 0;animation:band .3s ease-out}
#call.huge b{font-size:96px;text-shadow:0 6px 0 var(--ink)}
#call.huge small{font-size:26px}
.port #call b{font-size:56px}
.port #call.big b{font-size:66px}
.port #call.huge b{font-size:78px}
@keyframes pop{from{transform:translateY(-50%) scale(.6)}to{transform:translateY(-50%) scale(1)}}
@keyframes band{from{transform:scaleY(0)}to{transform:scaleY(1)}}
#lane.shake{animation:shake .5s linear}
@keyframes shake{0%,100%{transform:none}15%{transform:translate(-10px,4px)}30%{transform:translate(9px,-5px)}45%{transform:translate(-7px,3px)}60%{transform:translate(6px,-2px)}80%{transform:translate(-3px,1px)}}

#net{position:absolute;left:50%;top:84px;transform:translateX(-50%);padding:6px 16px;background:var(--red);color:#fff;font:700 20px var(--ui);display:none;z-index:7;pointer-events:none}
#net.on{display:block}

/* ---- だれかと遊ぶ ---- */
.mt{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:760px}
.mt-st{margin:0;font:400 36px/1.3 var(--head);color:#fff}
.mt-sec{display:flex;align-items:baseline;gap:8px;border-bottom:4px solid var(--red);padding-bottom:8px}
.mt-sec b{font:400 96px/1 var(--head);color:var(--cream)}
.mt-sec span{font:700 24px var(--ui)}
.mt-wait{margin:0;font:700 22px var(--ui);color:var(--wood)}
#mtCancel{min-width:220px;font:400 30px var(--head)}

/* ---- 部屋で対戦 ---- */
#scr-online h3{margin:0 0 10px;font:400 26px var(--head);color:var(--wood)}
.on-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:22px}
.on-name label{font:700 22px var(--ui)}
.on-name small{font-size:17px;opacity:.75}
#scr-online input{font:700 24px var(--ui);width:260px;max-width:100%;padding:10px 12px;background:var(--ink);color:var(--cream);border:3px solid var(--cream);border-radius:0;user-select:text;-webkit-user-select:text}
#onCode{font:400 34px var(--head);letter-spacing:.2em}
.on-cols{display:grid;gap:22px}
.land .on-cols{grid-template-columns:1fr 1fr}
.on-box{display:flex;flex-direction:column;gap:12px;border:3px solid var(--line);padding:18px 20px}
.on-box p{margin:0;font-size:18px;line-height:1.5;opacity:.8}
.on-box .btn{font:400 28px var(--head)}
.on-msg{font:700 20px/1.5 var(--ui);color:var(--wood);min-height:30px}
.on-code{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;border-bottom:4px solid var(--red);padding-bottom:14px;margin-bottom:18px}
.on-code span{font:700 22px var(--ui)}
.on-code b{font:400 72px/1 var(--head);color:#fff;letter-spacing:.12em}
.on-mem{margin:0 0 12px;padding:0 0 0 1.6em;font:700 24px var(--ui)}
.on-mem li{padding:8px 0;border-bottom:2px solid var(--line)}
.on-mem li.me b{color:#fff}
.on-mem span{font-size:16px;margin-left:10px;padding:2px 8px;border:2px solid var(--wood);color:var(--wood);vertical-align:middle}
#onStart{width:100%;font:400 40px var(--head);min-height:96px;margin-top:8px}
#scr-online .btn:disabled,#scr-online .tabs button:disabled{opacity:.45;cursor:default}
#scr-online .tabs button.on:disabled{opacity:1}
.r-btns .btn:disabled{opacity:.6;font-size:22px;cursor:default}

/* ---- 結果 ---- */
#ov-result{position:absolute;inset:0;background:rgba(15,10,8,.93);display:none;z-index:9;padding:20px 32px;overflow-y:auto}
#ov-result.on{display:grid;align-content:center;justify-items:center;gap:12px}
.land #ov-result.on{grid-template-columns:1fr 1fr;column-gap:36px;align-items:center}
.r-a,.r-b{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.r-mode{font:700 20px var(--ui);color:var(--wood);letter-spacing:.08em}
.r-big{font:400 128px/1 var(--head);color:#fff;text-shadow:0 7px 0 var(--red)}
.r-big.win{font-size:76px;line-height:1.1}
.r-stamp{font:400 34px var(--head);color:var(--ink);background:var(--cream);padding:4px 18px;transform:rotate(-3deg);animation:stamp .35s ease-out}
.r-stamp:empty{display:none}
@keyframes stamp{from{transform:rotate(-3deg) scale(2.4);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}
.r-sub{font:700 21px/1.5 var(--ui)}
.r-list{list-style:none;margin:0;padding:0;font:700 24px var(--ui);min-width:260px}
.r-list li{display:flex;justify-content:space-between;gap:24px;border-bottom:2px solid var(--line);padding:4px 0}
.r-list li.top{color:#fff}
.r-list li.top b{color:var(--red);background:var(--cream);padding:0 8px}
.r-rank{font:700 19px/1.5 var(--ui);color:var(--cream);min-height:30px}
.r-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:440px}
.r-btns .btn:first-child{grid-column:span 2;font:400 34px var(--head);min-height:84px}
#rShare .shell-share{justify-content:center}

.shell-share button{font:700 18px var(--ui);border:3px solid var(--cream);border-radius:0;padding:8px 16px;background:transparent;color:var(--cream)}
.shell-share button:active{background:var(--cream);color:var(--ink)}
.shell-share .shell-done{font-size:16px}

/* ---- 重ねる画面 ---- */
.ov{position:absolute;inset:0;background:rgba(15,10,8,.94);display:none;z-index:50;overflow-y:auto;touch-action:pan-y}
.ov.on{display:flex;align-items:center;justify-content:center}
.card{background:var(--cream);color:var(--ink);border:4px solid var(--ink);box-shadow:10px 10px 0 var(--red);padding:26px 30px;width:min(960px,92%)}
.card h2{margin:0 0 14px;font:400 36px var(--head);border-bottom:4px solid var(--ink);padding-bottom:8px}
.card h3{margin:16px 0 6px;font:400 24px var(--head)}
.card .btn{border-color:var(--ink);color:var(--ink)}
.card .btn.red{color:#fff;border-color:var(--red)}
.rules{display:grid;gap:4px 28px}
.land .rules{grid-template-columns:1fr 1fr}
.rules dl{margin:0;display:grid;grid-template-columns:140px 1fr;gap:8px 12px;font-size:19px;line-height:1.45}
.rules dt{font:400 20px var(--head)}
.rules dt em{font-style:normal;color:var(--red);display:inline-block;min-width:28px}
.rules dd{margin:0}
.rules .ex{background:#e6d6b4;padding:10px 14px;font:700 19px/1.6 var(--ui);margin:0 0 8px}
.rules p{margin:0 0 8px;font-size:18px;line-height:1.55}
.menu{display:flex;flex-direction:column;gap:14px;width:min(480px,86%)}
.menu .btn{min-height:76px;font-size:26px}
.menu .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.menu .row .btn{font-size:20px}

#pop{position:absolute;z-index:40;width:380px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.45);padding:14px 18px;display:none;font-size:19px;line-height:1.5}
#pop.on{display:block}
#pop h4{margin:0 0 6px;font:400 22px var(--head)}
#pop p{margin:0 0 4px}
#pop p.calc{font:700 24px var(--ui);color:var(--red)}
#pop .pb{display:flex;gap:10px;margin-top:10px}
#pop .pb button{font:700 17px var(--ui);background:transparent;border:2px solid var(--ink);border-radius:0;padding:6px 12px;color:var(--ink)}

/* ---- ランキング・記録・設定 ---- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{font:700 21px var(--ui);background:transparent;border:3px solid var(--line);border-radius:0;padding:8px 18px;min-height:56px}
.tabs button.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.rk{list-style:none;margin:8px 0;padding:0;max-width:720px}
.rk li{display:grid;grid-template-columns:64px 1fr 100px;align-items:center;font:700 22px var(--ui);border-bottom:2px solid var(--line);padding:6px 4px}
.rk li .n{font:400 24px var(--head);color:var(--wood)}
.rk li .s{font:400 26px var(--head);text-align:right}
.rk li.me{background:var(--ink2);color:#fff}
.rk li.me .n{color:var(--red)}
.mine{font:700 21px var(--ui);margin:12px 0}
.rec{display:grid;gap:18px}
.land .rec{grid-template-columns:1fr 1fr}
.rec table{border-collapse:collapse;width:100%;font-size:20px}
.rec th,.rec td{border-bottom:2px solid var(--line);padding:8px 6px;text-align:right}
.rec th:first-child,.rec td:first-child{text-align:left}
.rec td b{font:400 26px var(--head)}
.rec h3{margin:0 0 6px;font:400 24px var(--head);color:var(--wood)}
.bars{list-style:none;margin:0;padding:0}
.bars li{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;gap:10px;font-size:17px;padding:3px 0}
.bars li i{display:block;height:18px;background:var(--wood)}
.bars li.best i{background:var(--red)}
.bars li span:last-child{font:700 20px var(--ui);text-align:right}
.set{display:flex;flex-direction:column;gap:20px;max-width:760px}
.set .it{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;border-bottom:2px solid var(--line);padding-bottom:16px}
.set .it p{margin:0;font:700 22px var(--ui)}
.set .it p small{display:block;font:400 17px/1.5 var(--ui);opacity:.75;margin-top:4px}
.tg{font:700 22px var(--ui);min-width:120px;min-height:60px;background:transparent;border:3px solid var(--line);border-radius:0}
.tg[aria-pressed="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
#stName{font:700 24px var(--ui);width:260px;padding:10px 12px;background:var(--ink);color:var(--cream);border:3px solid var(--cream);border-radius:0;user-select:text;-webkit-user-select:text}