/* ひとりのページの土台。ホーム・上の帯・結果は共通の shell.js、卓・カードは table.js と cards.js */
html,body{margin:0;height:100%}

/* このゲームの顔は世界観シート（world.json: ムンバイの駅前の弁当仕分け）: 色は shell.home の theme（地 駅柱の青緑 #1F5E5A・字 ガンジー帽の白 #F4F6F2・
   主ボタン マリーゴールドの橙 #E8891C／字 濃紺 #1A1F2B）。見出し・結果の大きな字は題字と同じ Yusei Magic */
.shell-stage{--ui-display:"Yusei Magic",sans-serif}
/* 控えのボタン（下の段・帯・小さなウィンドウ・結果）は、細い線のボタン（線と文字はガンジー帽の白、地は透明）。大きさは共通（/ui.css）のまま、色と線だけ */
.shell-stage .sh-home .ui-btn.sub,.shell-stage .sh-bar .ui-btn.sub,.shell-stage .sh-box .ui-btn.sub,.shell-stage .sh-result .ui-btn.sub,.shell-stage .spd-chips .ui-btn{
  background:transparent;color:#F4F6F2;border:1px solid #F4F6F2;box-shadow:none}
.shell-stage .spd-chips .ui-chip{background:transparent;color:#F4F6F2;border:1px solid #F4F6F2;box-shadow:none}
.shell-stage .spd-chips .ui-chip[aria-pressed="true"]{background:#E8891C;border-color:#E8891C;color:#1A1F2B}
.shell-stage .sh-tabs button[aria-selected="true"]{background:#E8891C;border-color:#E8891C;color:#1A1F2B}
/* 遊ぶ画面の帯も同じ地。影は付けず、真鍮の細い罫で区切る */
.shell-stage .sh-bar{background:#1F5E5A;border-bottom:1px solid #B8892E}
/* 小さなウィンドウ: 籐の編み目の縁取りに、四隅の真鍮の留め金 */
.shell-stage .sh-box{position:relative;box-shadow:none;border:8px solid transparent;
  background:linear-gradient(#1F5E5A,#1F5E5A) padding-box,repeating-linear-gradient(45deg,#C9A86A 0 4px,#9C7A44 4px 8px) border-box}
.shell-stage .sh-box::before{content:"";position:absolute;inset:-15px;pointer-events:none;
  background:radial-gradient(circle,#B8892E 0 6px,#1A1F2B 6px 7px,transparent 7.5px) left top/22px 22px no-repeat,
    radial-gradient(circle,#B8892E 0 6px,#1A1F2B 6px 7px,transparent 7.5px) right top/22px 22px no-repeat,
    radial-gradient(circle,#B8892E 0 6px,#1A1F2B 6px 7px,transparent 7.5px) left bottom/22px 22px no-repeat,
    radial-gradient(circle,#B8892E 0 6px,#1A1F2B 6px 7px,transparent 7.5px) right bottom/22px 22px no-repeat}
.shell-stage .sh-box header{border-bottom:1px solid #B8892E;padding-bottom:10px}
/* 遊び方の図: 卓のまわりは木の盆の色 */
.shell-stage .sh-pic{background:#3A2A1E;box-shadow:none}
.shell-stage .sh-result li.me{background:rgba(232,137,28,.24)}

/* 遊ぶ場の卓は cards.js の C.layout（shell.stage に直接置く。上の帯と右下の操作の置き場を避ける） */

/* ホームの補い: 左の絵は CPU 同士のデモ（押せない）。デモの卓を少し広げ、右の列を詰める。詳しく・設定の中身は共通の小さなウィンドウ（shell.panel）で開く */
.shell-stage:not(.sh-port) .spd-home{grid-template-columns:580px 1fr}
.spd-home .sh-art{pointer-events:none}
.spd-vs{flex-basis:100%;margin:0;font-size:18px;line-height:1.4;color:var(--ui-sub)}
.spd-det{display:flex;flex-direction:column;gap:10px;font-size:18px;color:var(--ui-ink)}
.spd-now{margin:0;line-height:1.5}
.spd-now b{color:#FFD9A8}
.spd-lab{font-size:16px;color:var(--ui-sub);margin-top:4px}
.spd-chips{display:flex;flex-wrap:wrap;gap:8px}
/* 札とボタンの大きさは共通（/ui.css）のまま。作品側では色と線だけ変える（S9） */
.spd-rules{margin:0;padding-left:1.4em;line-height:1.7;font-size:18px}

/* 音のオン・オフ: 四角が塗られていればオン */
.spd-tog{display:inline-flex;align-items:center;gap:8px}
.spd-box{width:16px;height:16px;border:2px solid currentColor;border-radius:3px;display:inline-block;box-sizing:border-box;position:relative}
.spd-tog[aria-pressed="true"] .spd-box{background:var(--ui-red);border-color:var(--ui-red)}
.spd-tog[aria-pressed="true"] .spd-box::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;border:solid #1A1F2B;border-width:0 2px 2px 0;transform:rotate(45deg)}
.spd-tog[aria-pressed="false"]{opacity:.7}

/* 記録（shell.panel の中）。数字の段は枠で囲まず、上の線だけで区切る。大きな数字は Yatra One */
.spd-recp{display:flex;flex-direction:column;gap:12px;color:var(--ui-ink)}
.spd-recp h3{margin:0}
.spd-recp table{border-collapse:collapse;font-size:18px;width:100%}
.spd-recp th,.spd-recp td{border-bottom:1px solid rgba(244,246,242,.2);padding:6px 8px;text-align:right}
.spd-recp th:first-child,.spd-recp td:first-child{text-align:left}
.spd-recp .spd-me{color:#FFD9A8;font-weight:700}
.spd-big{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.spd-big>div{border-top:1px solid #B8892E;padding:6px 2px;font-size:16px;white-space:nowrap;min-width:0}
.spd-big span{display:block;color:var(--ui-sub)}
.spd-big b{font-family:"Yatra One",sans-serif;font-weight:400;font-size:34px;line-height:1.2;margin-right:4px;color:var(--ui-ink)}
.spd-big>div:first-child b{color:#E8891C}
.spd-note{margin:0;font-size:16px;color:var(--ui-sub);line-height:1.5}