:root{
  --paper:#f4efe2; --ink:#2b2a26; --sea:#cfe0e3; --land:#fbf8ef; --line:#8a8577; --red:#c8452f; --mute:#6b665a; --bar:#e3dccb;
}
html,body{margin:0;height:100%;background:#e6dfcc;color:var(--ink);font-family:"BIZ UDPGothic",sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
.shell-stage{background:var(--paper);-webkit-user-select:none;user-select:none}
.shell-stage p{margin:0}

/* 地図の枠 */
.mapwrap{overflow:hidden;background:var(--sea);box-sizing:border-box}
.ls .mapwrap{border-right:2px solid var(--ink)}
.pt .mapwrap{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.info{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(251,248,239,.95);border:2px solid var(--ink);padding:8px 12px;font-size:15px;line-height:1.5;pointer-events:none}
.info b{font-size:18px}

/* 欄 */
.panel{box-sizing:border-box;padding:16px 24px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.panel.side{padding:20px 22px}
.brand h1{font-size:34px;margin:0;letter-spacing:.08em;line-height:1.1}
.brand p{margin:4px 0 0;font-size:15px;color:var(--mute)}
.pick{display:flex;flex-direction:column;gap:6px}
.sec{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;letter-spacing:.05em}
.sec i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;background:var(--ink);color:var(--paper);font-size:13px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts.modes .opt{flex:1;padding-inline:2px;font-size:15px;white-space:nowrap}
.opt{border:2px solid var(--ink);background:var(--land);padding:8px 10px;font-size:16px;font-weight:700;cursor:pointer;min-height:44px}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.opt:disabled{opacity:.3;cursor:default}
.desc{font-size:14px;color:var(--mute)}
.start{display:flex;flex-direction:column;gap:6px}
.go{border:2px solid var(--ink);background:var(--red);color:#fff;font-size:26px;font-weight:700;padding:12px;cursor:pointer;letter-spacing:.2em;box-shadow:4px 4px 0 var(--ink)}
.go:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.best{font-size:14px}
.sub-btn{border:2px solid var(--ink);background:var(--land);padding:8px 14px;font-size:15px;font-weight:700;cursor:pointer;min-height:44px}
.sub-btn:hover{background:#fff}
.sub-btn.wide{width:100%}
.sub-btn:disabled{opacity:.4;cursor:default}
.link{border:0;background:none;padding:6px 0;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.danger{color:var(--red)}
.row{display:flex;gap:6px}
.code{flex:1;min-width:0;font:inherit;font-size:16px;border:2px solid var(--ink);background:#fff;padding:8px 10px;-webkit-user-select:text;user-select:text;border-radius:0}
.counts{font-size:13px;color:var(--mute)}
.party{border-top:2px dashed var(--line);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.foot{display:flex;justify-content:space-between;margin-top:auto}
.small{font-size:13px;color:var(--mute)}

/* 遊んでいる最中 */
.pbar{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:14px;font-weight:700;border:2px solid var(--ink);padding:2px 8px;align-self:flex-start}
.pbar .tag{align-self:auto}
.q{min-height:92px;display:flex;flex-direction:column;justify-content:center}
.pt .q{min-height:80px}
.qbig{font-size:46px;font-weight:700;line-height:1.15}
.qbig small{font-size:22px;margin-left:4px;font-weight:400}
.qyomi{font-size:16px;color:var(--mute);min-height:20px}
.qsub{font-size:15px;min-height:22px}
.stats{display:flex;align-items:center;gap:12px;font-size:15px}
.pg{flex:1;display:flex;flex-direction:column;gap:4px;font-weight:700}
.prog{height:8px;background:var(--bar)}
.prog i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}
.clock{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;min-width:84px;display:inline-block}
.clock.pen{animation:pen .6s}
@keyframes pen{0%{color:var(--red);transform:scale(1.15)}100%{transform:none}}
.miss{font-size:14px;white-space:nowrap}
.opp{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center;font-size:13px}
.ob{height:10px;background:var(--bar);border:1px solid var(--ink)}
.ob i{display:block;height:100%;width:0;background:var(--line);transition:width .2s}
.ob.me i{background:var(--red)}
.tip{border-left:6px solid var(--c,var(--line));background:var(--land);padding:10px 12px;font-size:15px;line-height:1.55}
.tip p{margin:4px 0 0}
.tip .tt{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tip .tt b{font-size:19px}
.tip .fact{font-weight:700}
.tip.over{position:absolute;left:10px;right:10px;bottom:10px;border:2px solid var(--ink);border-left-width:6px;font-size:14px;padding:6px 10px;pointer-events:none}
.side .tip{margin-top:auto}
.panel.bottom{padding:14px 20px}
.act{box-sizing:border-box}
.pt .act{padding:10px 12px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{border:2px solid var(--ink);background:var(--land);font-size:22px;font-weight:700;padding:14px 6px;cursor:pointer;min-height:64px;position:relative}
.pt .choice{min-height:88px;font-size:26px}
.choice small{position:absolute;left:6px;top:4px;font-size:12px;color:var(--mute)}
.choice.ok{background:var(--ink);color:var(--paper)}
.choice.ng{background:var(--red);color:#fff;opacity:.55}
.tray{display:grid;justify-content:center}
.cell{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--line);margin:2px;cursor:grab;touch-action:none;box-sizing:border-box}
.cell svg{width:84%;height:calc(100% - 26px);overflow:visible}
.cell span{font-size:14px;font-weight:700}
.cell.sel{outline:3px solid var(--red);outline-offset:-3px;background:#fff}
.cell.lifted{opacity:.3}
.cell.empty{border-color:transparent;cursor:default}
.float{position:absolute;pointer-events:none;z-index:5;filter:drop-shadow(3px 4px 0 rgba(43,42,38,.35))}
.float svg{width:100%;height:100%;display:block;overflow:visible}

/* 結果 */
.result .done{font-size:22px;font-weight:700}
.result .time{font-size:64px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.win{color:var(--red);font-weight:700;font-size:20px}
.lose{font-weight:700;font-size:18px}
.rank ol{list-style:none;margin:4px 0 0;padding:0;font-size:14px}
.rank li{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line);padding:2px 0}
.rank li.me{font-weight:700;color:var(--red)}
.weak p{font-size:14px;margin:2px 0}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.btns .go{font-size:20px;padding:10px 18px;letter-spacing:.1em}
.shell-share button{border:2px solid var(--ink);border-radius:0;background:var(--land);font-weight:700;font-size:14px;padding:6px 12px;min-height:36px}
.shell-share button:hover{background:var(--ink);color:var(--paper)}

/* 記録 */
.rhead{flex-direction:row;align-items:center;gap:16px;padding:10px 20px;border-bottom:2px solid var(--ink)}
.rhead b{font-size:18px}
.rec{border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.rec th,.rec td{border:1px solid var(--line);padding:4px 4px;text-align:center}
.rec th{background:var(--land)}

/* 待合 */
.card{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.card .big{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums}
.card .lead{font-size:22px;font-weight:700}