/* 千体ディフェンス * * 骨格は全アプリ共通（header / #stage / guide / related-apps / footer）。 * **#stage を画面いっぱいにしない。** 大きすぎると ①他アプリと比べて浮く * ②下に続きがあることが見えない ③ホイールがキャンバスに食われて * ページが送れない、が同時に起きる（quake-sim で全部起きた）。 */ :root { --bg: #16130f; --panel: #211c17; --panel2: #2b241d; --line: #3b3129; --text: #ece4d8; --muted: #a89a88; --accent: #c0392b; --accent2: #d9a441; --ok: #7fd4a0; --warn: #e8c34f; --bad: #e8735f; } * { box-sizing: border-box; } /* **`display` を書いた要素は `hidden` で消えない。** * `#result` に `display: flex` を書いたせいで、隠したはずの覆いが * 画面全体に残り、クリックを «全部» 吸っていた。しかも透明なので * 見た目では気づけない（ステージが一切遊べなくなっていた）。 * ルート CLAUDE.md の「display を持つ要素を伏せるときは出す側も書く」と同じ形。 */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, -apple-system, sans-serif; line-height: 1.7; -webkit-text-size-adjust: 100%; } /* 言語。要らないほうを最初から伏せる（i18n.js が を先に立てる）。 * ここに display を持つ要素を足すときは、**出す側の規則も書く** * （伏せる規則だけだと片方の言語で段組みが崩れる）。 */ html[lang="ja"] [lang="en"], html[lang="en"] [lang="ja"] { display: none; } #app { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; } /* ── header ─────────────────────────────────────────────── */ #site-header { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .apps-link { color: var(--accent2); text-decoration: none; font-size: 0.9rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; } .apps-link:hover { background: var(--panel2); } .header-logo { font-weight: 700; font-size: 1.05rem; flex: 1; /* h1 にしたので、既定の余白と字の大きさを打ち消す（見た目は変えない）*/ margin: 0; } .soundbtn { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; font-size: 0.9rem; line-height: 1; cursor: pointer; } .soundbtn:hover { border-color: var(--accent2); } .terrain { max-width: 1200px; margin: 0 auto 8px; padding: 6px 12px; background: #1d2419; border: 1px solid #33422b; border-radius: 8px; color: #bcd6a8; font-size: 0.82rem; } .langbar { display: inline-flex; gap: 4px; } .langbar button, .speedbar button { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 0.8rem; cursor: pointer; } .langbar button:hover, .speedbar button:hover { color: var(--text); } .speedbar button.on { background: var(--accent); color: #fff; border-color: var(--accent); } /* ── 見出し ─────────────────────────────────────────────── */ /* 説明で画面上部を埋めない。1 行に畳む */ .tagline { margin: 8px 0 0; color: var(--muted); font-size: 0.88rem; } /* ── ステージ選択（釦から開く覆い）─────────────────────── */ /* **最初に見せる画面ではない。** 番号の並んだ地味な画面が入口だと そこで大勢が離れる。開いた瞬間は戦場が出ている。 */ /* ステージ一覧は «画面»。半透明の覆いにしていたとき、戦場が透けて * 「まだ遊んでいる途中」に見え、結果画面とも重なって出ていた。 */ #stage-select { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; background: var(--bg); z-index: 30; padding: 16px; overflow-y: auto; } /* **格子«だけ»をスクロールさせる。** カードごとスクロールにしていたとき、 * 無限モードの釦が 100 面ぶんの下に埋まって «見つからない» 場所にあった。 */ .select-card { display: flex; flex-direction: column; width: 100%; max-width: 760px; max-height: 88svh; padding: 20px 22px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } #stage-grid { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .select-head { display: flex; align-items: center; gap: 12px; } .select-head .sect-title { flex: 1; margin: 0 0 4px; } /* ── 開幕 ───────────────────────────────────────────────── */ /* **始まった感じ**が無いと、いつ始まったのか分からない。1.6 秒で消える */ .intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; background: linear-gradient(90deg, rgba(10,8,6,0) 0%, rgba(10,8,6,0.55) 50%, rgba(10,8,6,0) 100%); animation: introFade 1.6s ease-out forwards; } .intro-n { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0.06em; color: var(--text); text-shadow: 0 3px 14px rgba(0, 0, 0, 0.9); animation: introUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .intro-f { font-size: clamp(0.9rem, 1.8vw, 1.15rem); color: var(--accent2); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); animation: introUp 1.6s 0.09s cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes introFade { 0% { opacity: 0; } 16% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } @keyframes introUp { 0% { transform: translateY(16px) scale(0.96); opacity: 0; } 22% { transform: translateY(0) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .intro, .intro-n, .intro-f { animation-duration: 0.01s; } } /* ── 最初の 1 手のヒント ────────────────────────────────── */ .hint-place { position: absolute; left: 58%; top: 50%; transform: translate(-50%, -50%); padding: 8px 16px; background: rgba(20, 16, 12, 0.82); border: 1px solid var(--accent2); border-radius: 999px; color: var(--accent2); font-size: 0.92rem; white-space: nowrap; pointer-events: none; animation: bob 1.5s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } } @media (prefers-reduced-motion: reduce) { .hint-place { animation: none; } } .sect-title { font-size: 1.1rem; margin: 18px 0 6px; padding-left: 10px; border-left: 3px solid var(--accent2); } .sect-note { margin: 0 0 14px; color: var(--muted); font-size: 0.85rem; } .stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .stage-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 9px; font-family: inherit; cursor: pointer; } .stage-btn:hover:not(:disabled) { background: var(--panel2); border-color: var(--accent2); } .stage-btn:disabled { opacity: 0.4; cursor: not-allowed; } .stage-btn.done { background: #23291f; } .s-n { font-size: 1.15rem; font-weight: 700; } .s-star { font-size: 0.72rem; color: var(--accent2); letter-spacing: 1px; } /* 帯ごとに天面の色を変える。「どこから敵が変わるか」が一目で分かる */ .stage-btn.f-goblin { border-top-color: #7aa64a; } .stage-btn.f-orc { border-top-color: #5f7f4a; } .stage-btn.f-undead { border-top-color: #b9b3a0; } .stage-btn.f-beast { border-top-color: #a1543f; } .stage-btn.f-demon { border-top-color: #a33049; } /* ── 戦闘の見出し ───────────────────────────────────────── */ #play-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 7px; } #play-head b { font-size: 1rem; } .teach { flex: 1; min-width: 12em; color: var(--accent2); font-size: 0.85rem; } .ghost { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 4px 12px; font-size: 0.82rem; font-family: inherit; cursor: pointer; } .ghost:hover { color: var(--text); } /* ── 次のウェーブの予告 ─────────────────────────────────── */ /* **これが「どれを置くか」の判断のもと。** 隠すと、ただ大量に湧いて 殴り合うだけの見世物になる。 */ .next-wave { max-width: 1200px; margin: 8px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 12px; background: #2a1d1b; border: 1px solid #4a332e; border-radius: 8px; font-size: 0.8rem; min-height: 36px; } .nw-label { color: var(--accent2); margin-right: 4px; white-space: nowrap; } .nw-item { padding: 2px 8px; background: #3a2723; border: 1px solid #573c35; border-radius: 999px; white-space: nowrap; } /* 困りごとを持つ敵は色で立てる。armor/ward の «数字» は出さない */ .nw-item.tr-armored { border-color: #8a93a8; color: #cfd6e2; } .nw-item.tr-flying { border-color: #d9a441; color: #f2dda6; } .nw-item.tr-warded { border-color: #7f9fd4; color: #cfe0ff; } .nw-item.tr-regen { border-color: #6b8f6a; color: #c3ddc0; } .nw-item.tr-caster { border-color: #a07fd4; color: #ddcaf5; } .nw-item.tr-boss { border-color: var(--accent); color: #f2b8c4; } /* ── 結果 ───────────────────────────────────────────────── */ #result { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 8, 6, 0.72); z-index: 20; padding: 16px; } .result-card { max-width: 420px; width: 100%; padding: 26px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; text-align: center; } .result-card h3 { margin: 0 0 6px; font-size: 1.35rem; } .result-stars { font-size: 1.7rem; color: var(--accent2); letter-spacing: 4px; } .result-card p { margin: 8px 0; color: var(--muted); font-size: 0.88rem; } .result-unlock { color: var(--accent2) !important; font-size: 0.95rem !important; } .result-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } .hint { color: var(--muted); font-size: 0.78rem; } /* ── 戦場 ───────────────────────────────────────────────── */ #stage { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; aspect-ratio: 15 / 7; max-height: 76svh; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #4f6a3f; } #field { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; } /* HUD は戦場の «外»。重ねると最上段の兵士を覆う。 * どうしても重ねる UI を足すときは #stage の中に absolute で入れ、 * **fixed にしない**（ページが伸びたとき中身だけ窓に貼り付いて破綻する）。 */ #hud { max-width: 1200px; margin: 0 auto 6px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 0.8rem; font-variant-numeric: tabular-nums; } .hud-item { color: var(--muted); } .hud-item b { color: var(--text); } .hud-sep { width: 1px; height: 14px; background: var(--line); } #hud-fps.ok { color: var(--ok); } #hud-fps.warn { color: var(--warn); } #hud-fps.bad { color: var(--bad); } .breach { color: var(--accent2); letter-spacing: 2px; } /* **覆いより «上» に出す。** 戦場の中に absolute で置いていたので、 * 結果の覆い（z-index 20）の下に隠れて誰にも見えなかった。 */ #toast { position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); padding: 6px 14px; background: rgba(15, 13, 10, 0.9); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85rem; opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── 操作 ───────────────────────────────────────────────── */ #controls { max-width: 1200px; margin: 12px auto 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; } .ctl-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; } .ctl-row:last-child { margin-bottom: 0; } .ctl-label { flex: 0 0 auto; min-width: 7.5em; padding-top: 6px; font-size: 0.8rem; color: var(--muted); } .palette, .enemy-bar { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .unit-btn { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 74px; padding: 6px 8px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-family: inherit; line-height: 1.3; } .unit-btn:hover { border-color: var(--accent2); } .unit-btn.on { background: var(--accent); border-color: var(--accent); } .u-icon { font-size: 1.1rem; } .u-name { font-size: 0.76rem; white-space: nowrap; } .u-cost { font-size: 0.68rem; color: var(--muted); } .unit-btn.on .u-cost { color: #ffdcd6; } .enemy-btn { padding: 4px 9px; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: 0.74rem; font-family: inherit; cursor: pointer; } .enemy-btn:hover { color: var(--text); } .enemy-btn.on { background: #4a2b2b; color: var(--text); border-color: var(--accent); } .ctl-buttons { align-items: center; flex-wrap: wrap; } #controls button:not(.unit-btn):not(.speedbar button) { padding: 8px 16px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 0.88rem; font-family: inherit; cursor: pointer; } #controls button:not(.unit-btn):hover { border-color: var(--accent2); } #controls .speedbar button { padding: 4px 10px; font-size: 0.8rem; } #btn-charge.on, #btn-pause.on { background: var(--accent); border-color: var(--accent); } #btn-charge:disabled { opacity: 0.45; cursor: not-allowed; } #charge-cd { color: var(--accent2); font-size: 0.8rem; } /* 一時停止は «探さずに押せる» 位置に置く。HUD の先頭・戦場のすぐ上 */ .hud-btn { padding: 4px 14px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .hud-btn:hover { border-color: var(--accent2); } .hud-btn.on { background: var(--accent); border-color: var(--accent); } .endless-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } #btn-endless { padding: 10px 18px; background: var(--panel2); color: var(--text); border: 1px solid var(--accent2); border-radius: 8px; font-family: inherit; font-size: 0.95rem; cursor: pointer; } #btn-endless:hover { background: var(--accent); border-color: var(--accent); } #endless-best { color: var(--accent2); margin-left: 6px; } /* 負けた理由。**責める調子にしない** — 次に押す釦へ気持ちよく戻す */ .result-why { margin: 6px 0 0; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 0.86rem; line-height: 1.6; } .result-why b { color: var(--accent2); } .result-buttons button { padding: 8px 16px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 0.88rem; font-family: inherit; cursor: pointer; } .result-buttons button.big { background: var(--accent); border-color: var(--accent); } .result-buttons button:hover { border-color: var(--accent2); } /* ── 遊び方・兵種・敵（タブ）─────────────────────────────── */ #guide-section { margin-top: 34px; } .related-apps-title { font-size: 1.1rem; margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--accent2); } .tabs { display: flex; gap: 4px; flex-wrap: wrap; } .tab { padding: 8px 16px; background: transparent; color: var(--muted); border: 1px solid var(--line); border-bottom: none; border-radius: 9px 9px 0 0; font-family: inherit; font-size: 0.9rem; cursor: pointer; } .tab:hover { color: var(--text); } .tab.on { background: var(--panel); color: var(--accent2); } .tab-body { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 0 10px 10px 10px; } .tab-body p.lead { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.8; color: var(--text); max-width: 62ch; } /* 拾い読みできるように、見出しと 1 行で対にする */ .rules { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; margin: 0; max-width: 74ch; } .rules dt { font-size: 0.82rem; color: var(--accent2); white-space: nowrap; padding-top: 1px; } .rules dd { margin: 0; font-size: 0.87rem; color: #d5cabb; line-height: 1.6; } /* ── 兵種・敵の一覧（実物のスプライトを貼る）───────────── */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .gallery.foes { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .g-card { display: flex; gap: 12px; padding: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; } .g-card canvas { flex: 0 0 auto; width: 72px; height: 72px; background: radial-gradient(circle at 50% 62%, #5f8149 0%, #3f5732 70%, #33472a 100%); border: 1px solid var(--line); border-radius: 8px; } .gallery.foes .g-card canvas { width: 58px; height: 58px; } .g-main { flex: 1; min-width: 0; } .g-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; } .g-name { font-weight: 700; font-size: 0.95rem; } .g-tag { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; color: var(--muted); } /* 「何に効くか」。ここだけ色を付けて、拾い読みで刺さるようにする */ .g-vs { font-size: 0.72rem; color: var(--accent2); } .g-meta { font-size: 0.72rem; color: var(--muted); margin-top: 3px; } .g-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 5px; font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; } .g-stats b { color: var(--text); font-weight: 600; } .g-tip { font-size: 0.83rem; line-height: 1.7; color: #d5cabb; margin: 0; } .g-locked { opacity: 0.55; } .g-locked .g-name::after { content: " 🔒"; font-size: 0.8em; } /* ── 関連アプリ ─────────────────────────────────────────── */ .related-apps { margin-top: 34px; } .related-apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .related-app-link { display: block; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.9rem; } .related-app-link:hover { border-color: var(--accent2); background: var(--panel2); } /* ── footer ─────────────────────────────────────────────── */ #site-footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; } .footer-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; } .footer-links a { color: var(--muted); text-decoration: none; font-size: 0.85rem; } .footer-links a:hover { color: var(--accent2); } .footer-copy { color: var(--muted); font-size: 0.78rem; margin: 10px 0 0; } /* 共有。**行き先を «並べて見せる»。** OS の共有シートに任せると、 * 端末によっては X が候補に出ず、いちばん共有される先が消える。 */ .share-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .share-label { margin: 0 0 8px; font-size: 0.78rem; color: var(--muted); } .share-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; } .share-row:last-child { margin-bottom: 0; } .share-btn { padding: 6px 12px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; font-family: inherit; font-size: 0.8rem; cursor: pointer; white-space: nowrap; } .share-btn:hover { border-color: var(--accent2); color: var(--accent2); } .share-x { font-weight: 700; letter-spacing: 0.04em; min-width: 44px; } /* 記録を消す。**目立たせない**（誤爆すると全部消える）が、隠しもしない */ .reset-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } #btn-reset { font-size: 0.78rem; padding: 4px 10px; opacity: 0.75; } #btn-reset:hover { opacity: 1; border-color: var(--accent); color: var(--accent2); } #reset-what { font-size: 0.74rem; } /* 広告。**関連アプリとフッターのあいだ。** 遊びの邪魔をせず、 * 下まで読んだ人にだけ届く位置（稼働中のアプリと同じ置き方）。 */ #ad-section { max-width: 1200px; margin: 16px auto 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; min-height: 100px; display: flex; align-items: center; justify-content: center; } /* ── 狭い画面 ───────────────────────────────────────────── */ @media (max-width: 640px) { .ctl-row { flex-direction: column; gap: 6px; } .ctl-label { padding-top: 0; } .unit-btn { min-width: 64px; padding: 5px 6px; } #hud { font-size: 0.7rem; gap: 7px; } } /* ── スマホ（縦）───────────────────────────────────────── * * **主役が一番狭かった。** 390×844 で測ると戦場 358×167px に対して * 周りの器が 490px。兵士は 6px にしかならず、«大軍が見える» という * このアプリの前提そのものが成立していなかった。 * * 画面の幅は変えられないので、できることは 2 つだけ。 * ① 戦場を «画面の端まで» 使う（左右 16px の余白は兵士 2 体ぶん） * ② 周りの器を削って、戦場を折り返しの «上» に持ってくる */ @media (max-width: 700px) { #stage { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); max-width: none; border-radius: 0; border-left: 0; border-right: 0; } /* 副題は «遊ぶ前に読むもの»。戦場を押し下げてまで出しておく理由が無い */ .tagline { display: none; } #play-head { gap: 8px; font-size: 0.92rem; padding: 6px 0; } #play-head .teach { flex: 1 1 100%; font-size: 0.76rem; } #terrain { font-size: 0.76rem; padding: 5px 8px; } #hud { padding: 5px 8px; } #next-wave { padding: 5px 8px; font-size: 0.76rem; } /* 釦の絵と名前で足りる。見出しは要らない。 * **見出しを消したら縦積みも要らない** — 640px の規則が残っていると、 * 釦が 1 行ずつ縦に並んで操作欄だけで 279px を食う */ .ctl-label { display: none; } .ctl-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; } #controls { padding: 8px; margin-top: 8px; } .ctl-row { margin-bottom: 6px; } .unit-btn { min-width: 56px; padding: 4px 5px; } .u-name { font-size: 0.68rem; } .u-cost { font-size: 0.64rem; } } /* ── スマホ（横）───────────────────────────────────────── * * 横にすると戦場は 812×296px（縦の 2.2 倍の面積）になる。**そこを最優先で * 上へ出す。** ヘッダーと説明を残すと、せっかく広くなった戦場が * 画面の外へ押し出される（812 幅で上端 181px ＝ 半分近くが見えない）。 */ @media (max-height: 520px) and (orientation: landscape) { #site-header, .tagline, #play-head .teach, #terrain { display: none; } #app { padding: 0 0 20px; } #stage { max-height: 82svh; margin: 0; width: 100%; } #play-head { padding: 4px 10px; font-size: 0.85rem; } #hud { font-size: 0.68rem; padding: 4px 10px; gap: 6px; } #controls { margin-top: 6px; padding: 6px 10px; } } /* 縦のスマホにだけ «横にすると大きい» と伝える。 * **回転を強要しない** — 縦のままでも遊べる。 */ #rotate-hint { display: none; } @media (max-width: 700px) and (orientation: portrait) { #rotate-hint { display: block; margin: 6px 0 0; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 0.76rem; text-align: center; } }