/* 九九から わり算へ（円と 席）。外部フォント・外部画像なし（画像は assets/ だけ）。
   画面：うえ＝みる（もんだい札・しき・ほし・はしご）／まんなか＝3D／した＝さわる（やること・どうぐ・いまの 一手）／いちばん した＝ナビ。
   たて画面は grid の 領域 "hud" "stage" "dock" "nav"、よこ・PC は 左に ナビ・まんなかに 3D・右に hud と dock。 */
:root{--ink:#263c32;--ink-soft:#4d6158;--cream:#fbf7ef;--paper:#fffdf8;--tab:#f3ead9;--line:#e3dccb;--edge:#d9c193;
--prim:#b85505;--prim-d:#7f3a05;--prim-t:#8a3f03;--green:#198451;--green-d:#0f5e38;--gold:#f2b705;--gold-d:#a87a00;--note:#fff1dc;--note-t:#7a3d00;
--c1:#7652a6;--c2:#198451;--c3:#286da2;--c4:#c27417;--c5:#b94740;--hover:#186db6;
--rail:66px;--dockw:300px;--hudh:64px;--cue:28px;--tool:50px;--act:64px;--navh:56px;--gap:10px;--cuefs:19px;--mainfs:23px;--pad:12px;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--cream);color:var(--ink);font-family:'Hiragino Maru Gothic ProN','Hiragino Maru Gothic Pro','Yu Gothic','YuGothic','Meiryo',sans-serif;line-height:1.5;font-size:16px;-webkit-text-size-adjust:100%;overflow:hidden;overscroll-behavior:none}
p,h2,h3,h4{margin:0}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:var(--green)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #b85505;outline-offset:2px}   /* クリームの 地との 比 4.5:1（3:1 いじょう） */
.app{position:relative;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"hud" "stage" "dock" "nav";background:var(--cream)}

/* ---------- みる：HUD ---------- */
.hud{grid-area:hud;min-width:0;background:var(--cream);border-bottom:2px solid var(--line);padding:max(8px,env(safe-area-inset-top)) var(--pad) 6px;display:grid;grid-template-columns:auto minmax(150px,1fr) auto;grid-template-areas:"q s r" "l l l";gap:0 8px;align-items:center}
.hubbrand{display:none;grid-area:q;align-items:center;gap:8px;min-width:0}
.hubbrand img{border-radius:8px;display:block}
.hubbrand b{font-size:15px;font-weight:900;white-space:nowrap}
.qchip{grid-area:q;min-width:112px;max-width:140px;height:48px;border:2px solid #e2c36a;border-radius:14px;background:#fff8dc;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 12px;line-height:1.1;text-align:left}
.qchip .qt{font-size:12px;font-weight:900;color:#7a5200}
.qchip .qb{font-size:22px;font-weight:900;white-space:nowrap}
.qchip.on{border-color:var(--prim);background:#fff1dc}
.shiki{grid-area:s;min-width:0;height:48px;border:2px solid var(--line);border-left:6px solid var(--c1);border-radius:12px;background:#fff;padding:0 8px;display:flex;flex-direction:column;justify-content:center;line-height:1.1}
[data-place="2"] .shiki{border-left-color:var(--c2)}[data-place="3"] .shiki{border-left-color:var(--c3)}
.shiki b{font-size:20px;font-weight:900;white-space:nowrap}
.shiki small{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap}
.shiki.ok{background:#e6f2ea;border-color:#9fd0b4;border-left-color:var(--green)}
.stars{grid-area:r;justify-self:end;position:relative;height:40px;min-width:52px;border:2px solid var(--edge);border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;font-size:20px;font-weight:900}
.stars i{font-style:normal;color:var(--gold);font-size:20px}
.stars .plus{font-style:normal;font-size:17px;font-weight:900;color:var(--green-d);white-space:nowrap}
.stars.gain{background:#e6f2ea;border-color:#9fd0b4}
.stars.gain [data-star-n]{display:none}
/* ひろばの HUD：ロゴと ほしだけ（高さは あそぶ 画面と おなじ） */
[data-place="hub"] .hud{display:flex;align-items:center;gap:8px;height:var(--hudh);padding-top:4px;padding-bottom:4px}
[data-place="hub"] .hubbrand{display:flex;flex:1}
[data-place="hub"] .qchip,[data-place="hub"] .shiki{display:none}
[data-place="hub"] .stars{margin-left:auto}

/* ---------- 3D（ステージ） ---------- */
.stage{grid-area:stage;position:relative;min-height:0;overflow:hidden;isolation:isolate;background:var(--tab);container-type:inline-size}
.view3d{position:absolute;inset:0}
.scene3d{display:block;width:100%;height:100%;touch-action:none}
.scene3d:focus-visible{outline:3px solid #b85505;outline-offset:-6px}
.labels3d{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.fade3d{position:absolute;inset:0;background:var(--tab);opacity:0;pointer-events:none;transition:opacity .13s ease;z-index:2}
.fade3d.on{opacity:1}
.fail{position:absolute;inset:0;z-index:8;display:grid;place-content:center;gap:10px;justify-items:center;text-align:center;padding:20px;background:#f6efe1;font-weight:900;font-size:18px;line-height:1.5}
.fail .fl{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.fail p{word-break:keep-all;text-wrap:balance}
.fail a,.fail .reload{display:inline-flex;align-items:center;justify-content:center;min-height:64px;min-width:180px;padding:0 20px;border-radius:18px;background:var(--green);color:#fff;text-decoration:none;font-size:19px;box-shadow:0 4px 0 var(--green-d)}
.fail a+a,.fail .reload+a{background:#fff;color:var(--green-d);border:3px solid var(--green);box-shadow:none}
.fail .reload{background:var(--prim);box-shadow:0 4px 0 var(--prim-d);font-weight:900}
/* もんだい：まんなかに 大きな 札で 出て、2秒あとに 左上の 札へ */
.qcard{position:absolute;z-index:5;left:50%;top:48%;translate:-50% -50%;width:min(88%,430px);background:#fff;border:3px solid #1f2b25;border-radius:22px;box-shadow:0 8px 24px #0003;padding:12px 16px 14px;text-align:center;cursor:pointer;animation:qin .22s ease-out}
.qc-sub{font-size:15px;font-weight:900;color:var(--ink-soft)}
.qc-big{margin:2px 0;font-size:clamp(34px,12vw,64px);font-weight:900;line-height:1.1;letter-spacing:.02em;white-space:nowrap}
@supports (font-size:1cqw){.qc-big{font-size:clamp(34px,15cqw,64px)}}
.qc-text{font-size:19px;font-weight:900;color:var(--prim-t);line-height:1.35;word-break:keep-all;text-wrap:balance}

/* ---------- さわる：ドック ---------- */
.dock{grid-area:dock;position:relative;min-width:0;background:var(--paper);border-top:3px solid var(--edge);box-shadow:0 -4px 14px #0001;padding:10px var(--pad) var(--gap);display:grid;grid-template-rows:var(--cue) var(--tool) var(--act);gap:var(--gap)}
.cue{height:var(--cue);display:flex;align-items:center;gap:8px;font-size:var(--cuefs);font-weight:900;color:var(--prim-t);white-space:nowrap;min-width:0}
.cue .ct{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cue.ok{color:var(--green-d)}
.cue.note{color:var(--note-t);background:var(--note);border-radius:10px;padding:0 8px;margin:0 -8px}
.badge{flex:none;width:calc(var(--cue) + 2px);height:calc(var(--cue) + 2px);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--cue)*.66);font-weight:900;line-height:1;background:#fff;border:3px solid #cfc7b2;color:var(--ink-soft)}
.badge.num{background:var(--prim);color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--prim)}
.badge.star{background:var(--green);color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--green)}
.badge.cnt{background:var(--prim);color:#fff;border-color:#fff;box-shadow:0 0 0 2px var(--prim);font-size:calc(var(--cue)*.55)}
.badge.arrow{background:#fff;border-color:var(--prim);color:var(--prim);font-size:calc(var(--cue)*.5)}
.tools{display:grid;grid-template-columns:84px minmax(0,1fr) 96px;grid-template-areas:"u p g";gap:8px;height:var(--tool)}
.t-undo{grid-area:u}.pair{grid-area:p}.t-assist{grid-area:g}
.tb{border:2px solid var(--line);border-radius:14px;background:#fff;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;min-width:0;position:relative}
.tb:active{background:#f1ece0}
.tb.off{opacity:.42}
.tb.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) 72px}
.pair .tb{border-color:var(--ink)}
.pair .tb:first-child{border-radius:14px 0 0 14px}
.pair .tb:last-child{border-radius:0 14px 14px 0;border-left-width:1px;flex-direction:column;gap:0;font-size:14px;line-height:1.15;background:#eef2ee}
.pair .tb.on{background:var(--ink)}
.ic-play{font-style:normal;font-size:13px}
.dots{display:inline-flex;gap:3px;height:8px;align-items:center}.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
[data-speed="slow"] .dots i:nth-child(n+2){display:none}
.mg i.o{background:var(--prim);border-color:var(--prim-d)}.mg i.l{background:#f5c58f;border-color:#dfa163}
.mg.none i{background:#d8d8d0;border-color:#b6b6aa}
.ic-undo{position:relative;flex:none;width:18px;height:10px;margin-top:5px;border:3px solid currentColor;border-bottom:0;border-radius:12px 12px 0 0}
.ic-undo::after{content:'';position:absolute;left:-8px;bottom:-7px;border:6px solid transparent;border-top:8px solid currentColor;border-bottom:0}
.ic-home{position:relative;display:block;width:13px;height:10px;margin-top:7px;background:currentColor;border-radius:0 0 2px 2px}
.ic-home::before{content:'';position:absolute;left:-3px;bottom:100%;border:8px solid transparent;border-top:0;border-bottom:7px solid currentColor;border-width:0 8px 7px 8px}
.ic-home::after{content:'';position:absolute;left:4.5px;bottom:0;width:4px;height:5px;background:#fff;border-radius:1px 1px 0 0}
.nav .on .ic-home::after{background:var(--hubc,#7a5a2a)}
.act{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px;height:var(--act)}
.main{border-radius:18px;background:var(--prim);color:#fff;font-weight:900;font-size:var(--mainfs);box-shadow:0 5px 0 var(--prim-d);display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-width:0}
.main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--prim-d)}
.main.go{background:var(--green);box-shadow:0 5px 0 var(--green-d)}.main.go:active{box-shadow:0 2px 0 var(--green-d)}
.mi{flex:none;width:22px;height:30px;border-radius:4px;background:#fff;border:2px solid #1f6aa5;display:grid;place-items:center;color:#1f6aa5;font-size:12px;line-height:1}
.mi::after{content:'★'}
.sub{border-radius:18px;border:3px solid var(--prim);background:#fff;color:var(--prim-t);font-weight:900;font-size:16px;line-height:1.2;white-space:pre-line;text-align:center;min-width:0}
.sub.go{border-color:var(--green);color:var(--green-d)}
.sub.off{opacity:.42}
.sub:active{background:#fff1dc}
[aria-disabled="true"].main,[aria-disabled="true"].sub{cursor:default}
/* ひろばの ドア */
.doors{display:none;grid-row:2 / span 2;grid-template-columns:repeat(3,1fr);gap:8px;min-height:0}
[data-place="hub"] .doors{display:grid}
[data-place="hub"] .tools,[data-place="hub"] .act{display:none}
.door{border-radius:18px;color:#fff;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;position:relative;box-shadow:0 5px 0 #0003;line-height:1.2;text-align:center;min-width:0}
.door:active{transform:translateY(3px);box-shadow:0 2px 0 #0003}
.d1{background:var(--c1)}.d2{background:var(--c2)}.d3{background:var(--c3)}
.door .no{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;background:#fff;color:#333;display:grid;place-items:center;font-size:14px;line-height:1}
.door .nm{font-size:18px;white-space:nowrap}
.door .ds{font-size:13px;opacity:.97}
.cue.hub .ct{color:var(--ink)}

/* ---------- ナビ ---------- */
.nav{grid-area:nav;background:var(--tab);border-top:2px solid var(--edge);display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--navh) + env(safe-area-inset-bottom,0px));padding:0 0 env(safe-area-inset-bottom,0px)}
.navlogo{display:none}
.nb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:13px;font-weight:900;color:var(--ink-soft);position:relative;min-width:0;min-height:44px}
.nb .n{width:26px;height:26px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;font-size:15px;line-height:1;background:#fff;overflow:hidden}
.nb .nl{line-height:1.2;white-space:nowrap;color:var(--ink-soft)}
.nb.on .nl{color:var(--ink)}
.nb.on{color:var(--ink)}
.nb.on::before{content:'';position:absolute;top:0;left:18%;right:18%;height:5px;border-radius:0 0 4px 4px;background:var(--pc,#7a5a2a)}
.nb.on .n{color:#fff;border-color:transparent;background:var(--pc,#7a5a2a)}
.nb[data-n="hub"]{--pc:#7a5a2a;--hubc:#7a5a2a}.nb[data-n="hub"] .n{color:#7a5a2a}.nb[data-n="hub"].on .n{color:#fff}
.nb[data-n="hub"].on .ic-home::after{background:#7a5a2a}
.nb[data-n="1"]{--pc:var(--c1);color:var(--c1)}.nb[data-n="2"]{--pc:var(--c2);color:var(--c2)}.nb[data-n="3"]{--pc:var(--c3);color:var(--c3)}
.nb[data-n="m"]{--pc:#5d554a;color:#5d554a}
.nb.on[data-n]{color:var(--ink)}

/* ---------- あんない えらび（ふきだし）・メニュー ---------- */
.scrim{position:absolute;inset:0;z-index:9;background:#263c3247}
.popopen .t-assist{position:relative;z-index:11;border-color:var(--prim);background:#fff1dc}
.pop{position:absolute;z-index:10;width:236px;background:#fff;border:2px solid var(--edge);border-radius:18px;box-shadow:0 8px 24px #0004;padding:10px;animation:popin .15s ease-out}
.pop::after{content:'';position:absolute;top:100%;right:var(--tail,40px);width:16px;height:16px;background:#fff;border:2px solid var(--edge);border-top:0;border-left:0;transform:translateY(-8px) rotate(45deg);border-radius:0 0 4px 0}
.pop h4{margin:0 0 6px;font-size:15px;font-weight:900}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{min-height:68px;border:2px solid var(--line);border-radius:14px;background:#fff;font-weight:900;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px;white-space:nowrap}
.pop.tight{padding:8px}.pop.tight h4{margin-bottom:4px;font-size:14px}.pop.tight .tiles{gap:6px}.pop.tight .tile{min-height:52px;gap:2px}
.tile[aria-pressed="true"]{border-color:var(--prim);background:#fff1dc;border-width:3px}
.tile:active{background:#fff1dc}
.menuback{position:absolute;inset:0;z-index:19;background:#263c3260}
.menu{position:absolute;z-index:20;left:50%;bottom:0;width:min(100%,560px);max-height:80vh;max-height:80dvh;transform-origin:bottom;translate:-50% 0;display:flex;flex-direction:column;background:var(--paper);border-top:3px solid var(--edge);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px #0004;animation:sheetin .25s ease-out;padding-bottom:env(safe-area-inset-bottom,0px)}
.menu h2{font-size:18px;font-weight:900;padding:12px 16px 4px}
.mwrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.mfade{position:absolute;left:0;right:0;bottom:0;height:30px;display:grid;place-items:end center;padding-bottom:2px;font-size:12px;line-height:1;font-weight:900;color:var(--ink-soft);background:linear-gradient(#fffdf800,var(--paper) 80%);pointer-events:none;opacity:0}   /* まだ したに ある ときの しるし（かげ＋▼） */
.menu.more .mfade{opacity:1}
.mscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 10px;display:grid;gap:10px;align-content:start}
.msec h3{font-size:14px;font-weight:900;color:var(--ink-soft);margin-bottom:6px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mgrid button{min-height:48px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:900;font-size:20px;white-space:nowrap}
.mgrid button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mb{min-height:52px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);padding:0 12px;white-space:nowrap}
.mb.off{opacity:.42}
.mlinks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mnote{font-size:12px;font-weight:800;color:var(--ink-soft);text-align:center}
.mclose{flex:none;min-height:56px;margin:0 16px 12px;border-radius:16px;background:var(--ink);color:#fff;font-weight:900;font-size:18px}
.nojs{position:fixed;left:12px;right:12px;top:50%;translate:0 -50%;z-index:100;padding:16px;background:#fff;border:3px solid var(--edge);border-radius:16px;box-shadow:0 8px 24px #0004;font-weight:900}   /* JS なし：ドア・ナビの うえに 全はばで 出す */
.app.pseudo{position:fixed;inset:0;z-index:1000}

/* マウスの ホバー（ゆびの 画面では 出ない） */
@media (hover:hover){
  .tb:not(.on):not(.off):hover,.nb:hover,.tile:hover,.mb:not(.off):hover,.mgrid button:not([aria-pressed="true"]):hover,.qchip:hover{background:#f6f0e2}
  .sub:hover{background:#fff1dc}.main:hover,.door:hover{filter:brightness(1.07)}.mclose:hover{filter:brightness(1.25)}
}
/* ---------- うごき（1回・0.4秒 以内） ---------- */
@keyframes qin{0%{scale:.94;opacity:.5}100%{scale:1;opacity:1}}
@keyframes popin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes sheetin{0%{transform:translateY(40%);opacity:.4}100%{transform:none;opacity:1}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.bump{animation:bump .3s ease-out}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .main:active,.door:active{transform:none;filter:brightness(.9)}
}

/* ---------- たて画面（スマホ・タブレット）：高さ 759px 以下（B） ---------- */
@media (orientation:portrait) and (min-width:700px){.hud,.dock,.nav{padding-inline:max(var(--pad),calc((100% - 560px)/2))}}
@media (orientation:portrait) and (max-height:759px){
  :root{--hudh:55px;--cue:24px;--tool:44px;--act:56px;--navh:48px;--gap:8px;--cuefs:18px;--mainfs:21px}
  .hud{padding:max(5px,env(safe-area-inset-top)) var(--pad) 4px}.qchip{height:44px}.shiki{height:44px}.shiki b{font-size:19px}.stars{height:36px}
  .dock{padding-top:8px}.tb{font-size:14px}.sub{font-size:15px}.nb .n{width:24px;height:24px;font-size:14px}
  .door{padding:4px}.door .nm{font-size:17px}.door .ds{font-size:12.5px}.door .no{width:22px;height:22px;font-size:13px;left:6px;top:6px}
}
@media (orientation:portrait) and (max-width:374px){
  :root{--cuefs:17px}
  .hud{gap:0 6px}.shiki b{font-size:18px}.stars{min-width:50px;padding:0 6px}.qchip{padding:0 8px;min-width:98px}.qchip .qb{font-size:19px}
  .tools{grid-template-columns:76px minmax(0,1fr) 92px}.pair{grid-template-columns:minmax(0,1fr) 62px}.act{grid-template-columns:minmax(0,1fr) 96px}.tb{font-size:13px}.pair .tb:last-child{font-size:13px}
  .door .nm{font-size:16px}.door .ds{font-size:12px}
}

/* ---------- よこ画面・PC：左に ナビ、まんなかに 3D、右に HUD と ドック ---------- */
@media (orientation:landscape) and (max-width:899px),(min-width:900px){
  .app{grid-template-columns:var(--rail) minmax(0,1fr) var(--dockw);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"nav stage hud" "nav stage dock"}
  .nav{grid-template-columns:1fr;grid-template-rows:repeat(5,minmax(52px,1fr));height:auto;border-top:0;border-right:2px solid var(--edge);padding:0;min-height:0}
  .nb.on::before{top:16%;bottom:16%;left:0;right:auto;width:5px;height:auto;border-radius:0 4px 4px 0}
  .hud{padding:8px 10px 4px;grid-template-columns:auto 1fr;grid-template-areas:"q r" "s s" "l l";gap:6px 8px;border-bottom:0}
  .qchip{height:44px}.stars{height:40px}.shiki{height:52px}
  [data-place="hub"] .hud{padding:8px 10px 4px;height:auto;min-height:56px}
  .dock{display:flex;flex-direction:column;padding:4px 10px 8px;gap:var(--gap);border-top:0;box-shadow:none;overflow-y:auto;min-height:0}
  .cue{height:auto;min-height:28px;white-space:normal;line-height:1.25;padding:2px 0}.cue .badge{align-self:flex-start}.cue .ct{overflow:visible;text-overflow:clip;word-break:keep-all;text-wrap:balance}
  .cue.note{margin:0;padding:2px 8px}
  .tools{margin-top:auto;grid-template-columns:1fr 1fr;grid-template-areas:"u g" "p p";gap:6px;height:auto;flex:none}
  .tools>.tb,.tools>.pair{height:var(--tool)}
  .act{flex:none;grid-template-columns:minmax(0,1fr) 84px;gap:8px}
  .sub{font-size:14px}
  .doors{flex:1;grid-row:auto;margin-top:0;min-height:0}
  .door .no{left:6px;top:6px}.door .nm{font-size:16px;white-space:normal;word-break:keep-all}.door .ds{font-size:12px;word-break:keep-all}
  .pop{width:min(236px,calc(100% - 20px))}
  .menu{left:50%;bottom:auto;top:50%;translate:-50% -50%;width:min(420px,92vw);max-height:92vh;max-height:92dvh;border:3px solid var(--edge);border-radius:22px;animation:popin .2s ease-out}
}
@media (orientation:landscape) and (max-width:899px){
  .main.long{font-size:16.5px}
  :root{--rail:66px;--dockw:clamp(280px,36vw,300px);--cue:28px;--tool:46px;--act:58px;--cuefs:17px;--mainfs:20px;--gap:8px}
  .nb{font-size:12px}
}
@media (min-width:900px){
  :root{--rail:96px;--dockw:380px;--cue:32px;--tool:56px;--act:76px;--cuefs:22px;--mainfs:24px;--gap:12px;--pad:16px}
  .nav{padding-top:0}
  .navlogo{display:flex;align-items:center;justify-content:center;height:64px}
  .navlogo img{border-radius:10px;display:block}
  .nav{grid-template-rows:auto repeat(5,minmax(52px,1fr))}
  .nb{font-size:14px}
  .hud{padding:14px 16px 6px;gap:8px}.qchip{height:52px;min-width:150px}.qchip .qb{font-size:26px}.stars{height:44px}.shiki{height:60px}.shiki b{font-size:24px}.shiki small{font-size:13px}
  [data-place="hub"] .hud{padding:14px 16px 6px}
  .dock{padding:6px 16px 20px}
  .cue{min-height:32px}
  .tools{gap:10px}.act{grid-template-columns:minmax(0,1fr) 100px;gap:12px}.sub{font-size:18px}.main.long{font-size:22px}   /* 「つぎの もんだい ▶」が ふちに くっつかない ように */
  .doors{flex:0 1 330px;margin-bottom:auto}
  .door .nm{font-size:20px}.door .ds{font-size:14px}
  .menu{width:min(460px,92vw)}
}

/* ---------- 3D が つかえない ときの お知らせ（ドック・ナビは かくす） ---------- */
.app.failed{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hud" "stage"}.app.failed .dock,.app.failed .nav,.app.failed .qchip,.app.failed .shiki{display:none}
.app.failed .hud{display:flex;align-items:center;gap:8px;height:auto;min-height:56px;padding:8px 12px}
.app.failed .hubbrand{display:flex;flex:1}
.app.failed .stars{margin-left:auto}
/* はば 339px 以下（iPhone SE など）：どうぐの 行を すこし ちぢめる */
@media (max-width:339px){
  .tools{grid-template-columns:68px minmax(0,1fr) 86px}.pair{grid-template-columns:minmax(0,1fr) 56px}.tb,.pair .tb:last-child{font-size:12.5px;gap:4px}.t-count .ic-play{display:none}.act{grid-template-columns:minmax(0,1fr) 88px;gap:10px}
  .qchip{min-width:90px}.qchip .qb{font-size:19px}.shiki b{font-size:17px}.door .nm{font-size:15px}
}
/* ひくい よこ画面：メニューを すこし つめる */
@media (orientation:landscape) and (max-height:520px){
  .menu h2{padding:8px 16px 0;font-size:16px}.mscroll{gap:8px;padding-bottom:8px}.mb{min-height:46px;font-size:16px}.mclose{min-height:50px;margin-bottom:8px;font-size:17px}.mgrid button{min-height:44px}
}
/* おおきな 画面（1500px いじょう）：右の 列と 字を すこし おおきく */
@media (min-width:1500px){
  :root{--rail:104px;--dockw:460px;--cue:36px;--cuefs:25px;--tool:64px;--act:88px;--mainfs:28px;--gap:14px}
  .hud{padding:16px 20px 8px}.qchip{height:60px;min-width:180px}.qchip .qt{font-size:14px}.qchip .qb{font-size:30px}.stars{height:50px;font-size:24px}.shiki{height:68px}.shiki b{font-size:28px}.shiki small{font-size:15px}
  .main.long{font-size:var(--mainfs)}.act{grid-template-columns:minmax(0,1fr) 116px}.doors{flex-basis:380px}
  .dock{padding:8px 20px 24px}.tb{font-size:18px}.sub{font-size:21px}.nb{font-size:15px}.nb .n{width:32px;height:32px;font-size:17px}.door .nm{font-size:24px}.door .ds{font-size:16px}
}
/* ひくい よこ画面（高さ 450px いか：小さな スマホの よこ・iPhone の Pro Max の よこ など）：ぜんぶ 1画面に おさめる。
   それでも あふれる ときは「いまの 一手」を 下に 固定（うごかしても 見える） */
@media (orientation:landscape) and (max-height:450px){
  :root{--tool:44px;--act:54px;--gap:6px;--cue:26px}
  .hud{padding:6px 10px 3px;gap:4px 8px}.stars{height:36px}.shiki{height:46px}.shiki b{font-size:20px}.shiki small{font-size:12px}
  .dock{padding:4px 10px 6px}.cue{min-height:26px;padding:0}.cue.note{padding:0 8px}.tools{gap:6px}
  .act{position:sticky;bottom:0;background:var(--paper);padding-top:2px}
  [data-place="hub"] .hud{min-height:50px}
}
@media (orientation:landscape) and (max-height:340px){
  :root{--gap:4px}
  .hud{gap:3px 8px}.shiki{height:42px}
}
/* 設計 A（円・席）：kuku.css の あとに かさねる 差分（実装では kuku.css に まとめる）。 */
/* ---- HUD：はしごを やめた ----- */
.hud{grid-template-areas:"q s r"}
@media (orientation:landscape) and (max-width:899px),(min-width:900px){.hud{grid-template-areas:"q r" "s s"}}
.qchip .qt{color:#7a5200}
.qchip.clear{border-color:#6fb88f;background:#e6f2ea}.qchip.clear .qt{color:var(--green-d)}
.qc-ask{margin-top:2px;font-size:17px;font-weight:900;color:var(--ink-soft);line-height:1.35;word-break:keep-all;text-wrap:balance}
.qc-ask:empty{display:none}
/* ---- 3つ めの ボタン「くばり おわり」（③ だけ）----- */
.fin{border-radius:18px;border:3px solid var(--green);background:#fff;color:var(--green-d);font-weight:900;font-size:16px;line-height:1.2;white-space:pre-line;text-align:center;min-width:0}
.fin:active{background:#e6f2ea}
.fin.go{background:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-d)}.fin.go:active{box-shadow:0 2px 0 var(--green-d);transform:translateY(3px)}
.act.three{grid-template-columns:minmax(0,1fr) 84px 84px;gap:8px}.act.three .mi{display:none}
@media (orientation:portrait) and (max-width:374px){.act.three{grid-template-columns:minmax(0,1fr) 78px 78px;gap:6px}.act.three .main{font-size:19px}}
@media (max-width:339px){.act.three{grid-template-columns:minmax(0,1fr) 72px 72px;gap:6px}.act.three .sub,.act.three .fin{font-size:13.5px}}
@media (orientation:landscape) and (max-width:899px),(min-width:900px){.act.three{grid-template-columns:minmax(0,1fr) 76px 76px;gap:6px}.act.three .main{font-size:17px}.act.three .sub,.act.three .fin{font-size:14px}}
@media (min-width:900px){.act.three{grid-template-columns:minmax(0,1fr) 92px 92px;gap:8px}.act.three .main{font-size:21px}}
@media (min-width:1500px){.act.three{grid-template-columns:minmax(0,1fr) 116px 116px}.act.three .main{font-size:25px}}
[aria-disabled="true"].fin{cursor:default;opacity:.5}
@media (orientation:landscape) and (max-width:899px){
  /* ドックの はばが せまい よこ画面：大ボタンは 字を すこし 小さく、ながい ことば（つぎの もんだい ▶）は ふたつに わけて ボタンの なかに おさめる */
  .act.three .main{font-size:15px}
  :root{--rail:72px}   /* 左の ナビ：「れんしゅう」（5字）の ひだり・みぎに 4px いじょう あける */
}
@media (max-width:374px){.nb{font-size:12px}}
@media (max-width:339px){.nb{font-size:11px}}
/* 「1まい かえす」（おおい 席から もどす とき）：おす ところは おなじ 場所。しろい ボタンで ようすを かえる */
.main.back{background:#fff;color:var(--prim-t);border:3px solid var(--prim);box-shadow:0 5px 0 var(--prim-d)}.main.back:active{box-shadow:0 2px 0 var(--prim-d)}
/* ---- あんない ボタン・ふきだしの 小さな 絵：席の ならび（6つの 点）----- */
.mg{position:relative;display:inline-block;width:22px;height:22px;flex:none}
.mg i{position:absolute;display:block;width:32%;height:32%;border-radius:50%;background:#ece7d8;border:1px solid #c9c1a8;box-sizing:border-box;transform:translate(-50%,-50%)}
.mg i.o{background:var(--prim);border-color:var(--prim-d)}.mg i.l{background:#f5c58f;border-color:#dfa163}
.mg.none i{background:#d8d8d0;border-color:#b6b6aa}
.tile .mg{width:30px;height:30px}.pop.tight .tile .mg{width:24px;height:24px}
@media (max-width:339px){.mg{width:18px;height:18px}}
.pop h4+.tiles+h4{margin-top:8px}
.pop .tiles.two{grid-template-columns:1fr 1fr}
.pop.tight h4+.tiles+h4{margin-top:4px}
/* ---- ひろばの ドア：席の ならびの 絵 ----- */
.door .rg{position:relative;display:block;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:#ffffff40;flex:none}
.door .rg i{position:absolute;display:block;width:8px;height:8px;border-radius:50%;border:1.5px solid #fff;box-sizing:border-box;transform:translate(-50%,-50%)}
@media (orientation:portrait) and (max-height:759px){.door .rg{display:none}}
@media (orientation:landscape) and (max-width:899px),(min-width:900px){.door .rg{width:44px;height:44px}}
@media (min-width:900px){.door .rg{width:60px;height:60px}.door .rg i{width:10px;height:10px}}
.rg.r9 i:nth-child(1){left:50%;top:12%;background:var(--c1)}
.rg.r9 i:nth-child(2){left:74.4%;top:20.9%;background:var(--c2)}
.rg.r9 i:nth-child(3){left:87.4%;top:43.4%;background:var(--c3)}
.rg.r9 i:nth-child(4){left:82.9%;top:69%;background:var(--c4)}
.rg.r9 i:nth-child(5){left:63%;top:85.7%;background:var(--c5)}
.rg.r9 i:nth-child(6){left:37%;top:85.7%;background:var(--c1)}
.rg.r9 i:nth-child(7){left:17.1%;top:69%;background:var(--c2)}
.rg.r9 i:nth-child(8){left:12.6%;top:43.4%;background:var(--c3)}
.rg.r9 i:nth-child(9){left:25.6%;top:20.9%;background:var(--c4)}
.rg.f4 i:nth-child(n+5){opacity:.3}   /* ③の ドア：使う 席（4つ）だけ 明るく、のこりは うすい */
/* ひろばの ドア：席の ならびの 絵（いつも 9席。③は 4つだけ 明るい）。いろは 席の いろ */
.mg i:nth-child(1){left:50%;top:15%}
.mg i:nth-child(2){left:80.3%;top:32.5%}
.mg i:nth-child(3){left:80.3%;top:67.5%}
.mg i:nth-child(4){left:50%;top:85%}
.mg i:nth-child(5){left:19.7%;top:67.5%}
.mg i:nth-child(6){left:19.7%;top:32.5%}

/* ---- よこ画面（高さ 520px いか）：ふきだしを よこに ひろげて 高さを へらす ----- */
@media (orientation:landscape) and (max-height:520px){
  .pop{width:min(420px,calc(100% - 20px))}
  .pop .tiles{grid-template-columns:repeat(4,1fr)}
  .pop .tiles.nums{grid-template-columns:repeat(2,1fr);width:calc(50% - 4px)}
  .pop .tile{min-height:56px;font-size:13.5px}
}
/* 小さな たて画面：どうぐの 行の「▶」と、②できた の 大ボタンの 字（つぎの もんだい ▶）を ちぢめて ボタンの なかに おさめる */
@media (max-width:349px){.t-count .ic-play{display:none}}
/* いちばん せまい たて画面（320px）：ミッション札の「チャレンジ中」を 一段に（字を すこし 小さく） */
@media (max-width:339px){.qchip .qt{font-size:11.5px;white-space:nowrap}}
/* しきの 上の 段が 12字 いじょう（③ できた の「35 ÷ 9 ＝ 3 あまり 8」）：たて画面では 字を 小さく して 160px の 札に おさめる */
@media (orientation:portrait) and (max-width:699px){.shiki.wide b{font-size:16px}}
/* ひくい よこ画面（高さ 380px いか：740×360・667×375・640×360・568×320）：ふきだしを さらに ひくく（上が 画面の そとに 出ない ように。まえの 版は 568×320 で 上が 39px 画面の そとに 切れた） */
@media (orientation:landscape) and (max-height:380px){
  .pop{padding:6px 8px}.pop h4{font-size:12.5px;margin:0 0 3px;line-height:1.1}.pop.tight h4{font-size:12.5px;margin-bottom:3px}
  .pop .tiles,.pop.tight .tiles{gap:5px}.pop .tile,.pop.tight .tile{min-height:44px;gap:0;padding:2px;font-size:12.5px}
  .pop .tile .mg,.pop.tight .tile .mg{width:18px;height:18px}.pop .tile .nm{font-size:15px;line-height:1}
  .pop h4+.tiles+h4,.pop.tight h4+.tiles+h4{margin-top:4px}
}