/* 世界観: 引っ越しシーズンの朝、アルミバンの荷台（world.json）。卓の緑・札の裏は cards.js の共通のまま */
/* 地は養生毛布の藍 #1F3A5F・字は荷札の白 #FFFFFF・主なボタンはラッシングベルトの橙 #E8601C（字はマジックの墨 #111827）。
   飾りに段ボールの茶 #A8692F・軍手の緑 #4FA35A。書体は題字 Mochiy Pop One・本文 M PLUS 1p。角丸 6px まで・影なし・グラデーションなし */
:root{--fg:#FFFFFF;--dim:#C3CEDB;--red:#E8601C;--line:rgba(255,255,255,.22)}
html,body{margin:0;height:100%}
.shell-stage{--ui-body:"M PLUS 1p",sans-serif}

/* 遊んでいる最中の地もホームと同じ藍。卓は cards.js の C.layout を shell.stage に直接置く（ここでは描かない） */
.shell-stage{background:#1F3A5F}

/* ホームの絵: CPU 同士のデモ（本番と同じ C.layout の並びを絵いっぱいに縮めて置く。押しても何も起きない） */
.t21-demo{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}

/* 結果（地はホームと同じ藍） */
.sh-result{--ui-shade:rgba(31,58,95,.97);--ui-chip:rgba(255,255,255,.1)}
.sh-result .t21-rl{margin:0;font-size:22px;font-weight:700;text-align:center;max-width:900px;padding:0 24px}
.sh-result .t21-rl.best{color:var(--red)}
.sh-result .t21-rl.dim{color:var(--dim)}
.sh-result .t21-rl.dim:empty{display:none}
/* 親方の一言（結果の帯） */
.sh-result .t21-rl.v{font:400 30px "Mochiy Pop One",sans-serif;color:#FFFFFF}

/* 詳しく・記録・設定の中身（shell.panel の小さなウィンドウの中） */
.t21-pn{display:flex;flex-direction:column;gap:14px;color:var(--fg);font-family:"M PLUS 1p",sans-serif;font-weight:500}
.t21-pn *{box-sizing:border-box}
.t21-pn p,.t21-pn ol,.t21-pn dl,.t21-pn dd{margin:0;padding:0}
/* 設定のボタンは共通の .ui-btn（形は共通のまま。選んでいる方は主ボタン、他は .sub の細い線） */
.t21-pn .dim,.t21-pn .sub{color:var(--dim);font-size:17px}
.t21-pn .rl{list-style:none;counter-reset:n;display:flex;flex-direction:column;gap:12px}
.t21-pn .rl li{font-size:22px;line-height:1.5;padding-left:46px;position:relative;font-weight:700}
.t21-pn .rl li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:0;font:400 24px/1.4 "Mochiy Pop One",sans-serif;color:#111827;background:var(--red);width:34px;text-align:center}
.t21-pn .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.t21-pn .stats dt{font-size:15px;color:var(--dim)}
.t21-pn .stats dd{font:400 30px "Mochiy Pop One",sans-serif}
.t21-pn .stats dd small{font-size:17px}
.t21-pn .stats .big{grid-column:1/-1}
.t21-pn .stats .big dd{font-size:46px;color:var(--red)}
/* ホームの下の段の 5 つのボタンの大きさは共通の shell.js のまま（作品で形を変えない） */
/* オンラインの人数は薄くしすぎない（読める濃さ・大きさ） */
.sh-home .sh-online .ui-count{font-size:19px;font-weight:700;color:var(--ui-sub)}
/* ホームの背景: 藍の養生毛布・積んだ段ボール・橙のベルト・三毛猫（main.js の backdrop） */
.t21-back{position:absolute;inset:0;width:100%;height:100%}
/* 2 つ目以降のボタン（下の段・帯の遊び方とやめる・窓の閉じる）は細い線のボタン（線と文字は荷札の白、地は透明） */
.sh-home .ui-btn.sub,.sh-bar .ui-btn.sub,.sh-win .ui-btn.sub{background:transparent;color:#FFFFFF;border:1.5px solid #FFFFFF;box-shadow:none;outline:none}
.sh-home .ui-btn.sub:hover,.sh-bar .ui-btn.sub:hover,.sh-win .ui-btn.sub:hover{background:rgba(255,255,255,.1)}
.sh-home .ui-btn.sub:disabled,.sh-bar .ui-btn.sub:disabled,.sh-win .ui-btn.sub:disabled{opacity:.5}
/* 遊んでいる最中の帯はホームと同じ組 */
.sh-bar{background:#1F3A5F;color:#FFFFFF}
.sh-bar .sh-info2{color:#C3CEDB}
/* 窓は段ボールの板の縁に、布ガムテープで角を留める */
.sh-win .sh-box{position:relative;box-shadow:none;border:6px solid #A8692F}
.sh-win .sh-box::before,.sh-win .sh-box::after{content:"";position:absolute;top:-14px;width:78px;height:24px;background:#C9B48C;opacity:.92;pointer-events:none}
.sh-win .sh-box::before{left:-26px;transform:rotate(-38deg)}
.sh-win .sh-box::after{right:-26px;transform:rotate(38deg)}
.sh-win .sh-box header{border-bottom:1.5px solid var(--line)}
/* 直近 10 回の棒。数は棒の上に常に出す（スマホでも見える）。棒は積んだ段ボール、元より増えた回は軍手の緑の点 */
.t21-pn .bars{position:relative;height:100px;display:flex;align-items:flex-end;gap:8px;border-bottom:2px solid var(--fg);margin-top:24px}
.t21-pn .bars::after{content:"";position:absolute;left:0;right:0;bottom:var(--base);border-top:2px dashed var(--fg);opacity:.5}
.t21-pn .bars i{position:relative;width:40px;background:rgba(168,105,47,.55);font-style:normal}
.t21-pn .bars i b{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);padding-bottom:2px;font:400 13px "Mochiy Pop One",sans-serif;color:var(--fg);white-space:nowrap}
.t21-pn .bars i.up{background:#A8692F}
.t21-pn .bars i.up::after{content:"";position:absolute;left:50%;top:6px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#4FA35A}
.t21-pn .rk{list-style:none;border-top:2px solid var(--fg)}
.t21-pn .rk li{display:flex;align-items:baseline;gap:14px;padding:6px 4px;border-bottom:1px solid var(--line);font-size:18px}
.t21-pn .rk li span{font:400 18px "Mochiy Pop One",sans-serif;width:1.8em}
.t21-pn .rk li b{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t21-pn .rk li em{font:400 19px "Mochiy Pop One",sans-serif;font-style:normal}
.t21-pn .rk li.me{background:rgba(255,255,255,.1);color:var(--red)}
.t21-pn .rkbox{display:flex;flex-direction:column;gap:10px}
.t21-pn .opts{display:flex;flex-direction:column;border-top:2px solid var(--fg)}
.t21-pn .opts>div{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:12px 4px;border-bottom:1px solid var(--line)}
.t21-pn .opts dt{font-size:20px;font-weight:700}
.t21-pn .opts dd{font-size:20px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.t21-pn .opts .nm{font-weight:900;overflow-wrap:anywhere}
.t21-pn .ui-btn.sub.danger{color:var(--red);border-color:var(--red);white-space:normal}
.t21-pn .ui-btn.sub.danger.armed{background:var(--red);color:#111827}