* { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } body { background: #0a0e14; color: #c8d6e5; font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif; min-height: 100vh; } #app { max-width: 1200px; margin: 0 auto; padding: 14px 20px 20px; } /* 言語。要らないほうを最初から伏せる（i18n.js が を先に立てる）。 **組み立てずに両方 HTML に置く**のは、クローラに両方を拾わせるため。 */ html[lang="ja"] [lang="en"], html[lang="en"] [lang="ja"] { display: none; } #site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 14, 20, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(251, 191, 36, 0.18); padding: 10px 20px; display: flex; align-items: center; gap: 16px; } .apps-link { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); text-decoration: none; flex-shrink: 0; } .apps-link:hover { color: rgba(255,255,255,0.7); } .header-logo { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; background: linear-gradient(90deg, #fde68a, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.4)); } .langbar { display: inline-flex; gap: 4px; margin-left: auto; } .langbar button { font-size: 0.68rem; padding: 4px 9px; min-height: 0; border-radius: 6px; background: transparent; border: 1px solid #2d3a4a; color: #64748b; } .langbar button:hover { color: #c8d6e5; border-color: #475569; } .langbar button[aria-pressed="true"] { color: #fde68a; border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.08); } .title-area { text-align: center; margin-bottom: 14px; } .title-area h1 { font-size: 1.6rem; color: #f1f5f9; } .subtitle { font-size: 0.85rem; color: #8899aa; margin-top: 4px; } .note { font-size: 0.73rem; color: #64748b; line-height: 1.6; margin-top: 10px; } #main-layout { display: flex; gap: 16px; align-items: flex-start; } #left { flex: 1; min-width: 0; } /* ── ステージ帯 ── */ #stage-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; background: #141a22; border: 1px solid #1e2a3a; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; } .stage-no { font-size: 0.7rem; color: #64748b; letter-spacing: 0.06em; } .stage-no b { color: #fde68a; font-size: 0.85rem; } #stage-name { color: #f1f5f9; font-size: 0.95rem; } #stage-hint { font-size: 0.76rem; color: #8899aa; flex: 1 1 100%; line-height: 1.5; } /* ── ステージ選択 ── */ .select-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .select-head h2 { font-size: 1rem; color: #f1f5f9; } /* 10 列に固定して «1 行 = 10 面» に見せる。自動折り返しだと桁が揃わない */ #select-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; } .band-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; color: #94a3b8; letter-spacing: 0.06em; border-top: 1px solid #1e2a3a; padding: 10px 2px 2px; margin-top: 2px; } .band-head:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .stage-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; min-height: 78px; text-align: center; background: #141a22; border: 1px solid #1e2a3a; border-radius: 10px; cursor: pointer; } /* まだ作っていない面は小さく置く。90 個が同じ大きさだと遊べる面が埋もれる */ .stage-cell.todo { min-height: 34px; padding: 4px 2px; } .stage-cell.todo .sn { font-size: 0.78rem; font-weight: 600; } .stage-cell:hover:not(:disabled) { border-color: #f59e0b; background: #1b2330; } .stage-cell .sn { font-size: 1.1rem; font-weight: 800; color: #e2e8f0; } .stage-cell .sname { font-size: 0.66rem; color: #8899aa; line-height: 1.3; } .stage-cell .smoves { font-size: 0.78rem; font-weight: 800; color: #93c5fd; } .stage-cell.perfect { border-color: #b48a24; } .stage-cell.perfect .smoves { color: #fbbf24; } .stage-cell.done { border-color: #3f4d63; } .stage-cell.locked, .stage-cell.todo { opacity: 0.4; cursor: default; } .ov-moves { font-size: 1.1rem; color: #94a3b8; margin-bottom: 8px; } .ov-moves b { font-size: 2.2rem; color: #fde68a; } .ov-card .perfect { color: #4ade80; } /* ── ステータス欄（地図の上）── */ #hud { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-bottom: 8px; } .hud-moves { background: #17202c; border: 1px solid #2b3a4d; border-radius: 10px; padding: 6px 14px; display: flex; align-items: baseline; gap: 8px; min-height: 44px; flex-wrap: wrap; } .hud-moves > b { font-size: 1.6rem; color: #fde68a; } .hud-sub { font-size: 0.68rem; color: #64748b; } .hud-sub b { color: #cbd5e1; } .hud-hp, .hud-item, .hud-keys { background: #141a22; border: 1px solid #1e2a3a; border-radius: 10px; padding: 6px 12px; display: flex; align-items: center; gap: 8px; min-height: 44px; } .hud-hp { flex: 1 1 220px; } .hud-label { font-size: 0.68rem; color: #64748b; font-weight: 700; letter-spacing: 0.06em; } .hud-hp b { font-size: 1.3rem; color: #4ade80; min-width: 2.2em; } .hud-item b { font-size: 1.1rem; color: #f1f5f9; } .bar { flex: 1; height: 8px; background: #1e293b; border-radius: 4px; overflow: hidden; } .bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width 0.2s; } .hud-key { display: inline-flex; align-items: center; gap: 4px; opacity: 0.35; } .hud-key.has { opacity: 1; } .hud-key i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #1f2430; display: inline-block; } .hud-key b { color: #f1f5f9; font-size: 0.95rem; } #stage { position: relative; width: 100%; background: #0b0f16; border: 1px solid #1e2a3a; border-radius: 12px; display: flex; align-items: center; justify-content: center; max-height: 74svh; padding: 4px; } #board { display: block; touch-action: manipulation; cursor: pointer; border-radius: 6px; } #overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 12, 0.72); border-radius: 12px; z-index: 5; } /* 初回の説明は画面ぜんぶに出す。ステージ選択の裏に隠れると押せない */ #intro { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 12, 0.86); z-index: 200; padding: 16px; } .ov-card { background: #141a22; border: 1px solid #f59e0b; border-radius: 14px; padding: 22px 26px; text-align: center; max-width: 92%; } .ov-card h2 { color: #fde68a; font-size: 1.3rem; margin-bottom: 10px; } .ov-card p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 12px; } .ov-card .row { justify-content: center; } .intro-card { text-align: left; max-width: 440px; } .intro-list { list-style: none; margin-bottom: 12px; } .intro-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #1e2a3a; font-size: 0.86rem; line-height: 1.5; } .intro-ico { flex: 0 0 96px; font-size: 1.15rem; display: inline-flex; align-items: center; gap: 4px; } .intro-card .primary { width: 100%; margin-top: 4px; } .exit-chip { display: inline-block; background: #1f8a4c; color: #fff; font-weight: 800; font-size: 0.68rem; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.05em; } .cost-chip { display: inline-block; background: #10141c; color: #e2e8f0; font-weight: 800; font-size: 0.7rem; padding: 1px 7px; border-radius: 10px; } .cost-chip.red { color: #fca5a5; } .key-chip { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 2px solid #1f2430; } .door-chip { display: inline-block; width: 16px; height: 20px; background: var(--c); border: 3px solid #4a3728; border-radius: 3px; } .legend { font-size: 0.74rem; color: #94a3b8; padding: 8px 4px 0; line-height: 2; } .ch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; } .ch.oneway { background: #b6a5e0; box-shadow: inset 3px 0 0 #4c3391, inset -3px 0 0 #4c3391; } .ch.portal { background: #1d3f66; box-shadow: inset 0 0 0 2px #7dd3fc; } .ch.swamp { background: #4c6b3a; } .ch.gate { background: #20242e; box-shadow: inset 0 0 0 2px #f87171; } .ch.plate { background: #5b6272; box-shadow: inset 0 0 0 3px #60a5fa; } .ch.ice { background: #9fd4ee; box-shadow: inset 0 3px 0 rgba(255,255,255,0.55); } .ch.conveyor { background: #3f4756; box-shadow: inset 0 0 0 2px #cbd5e1; } .ch.bridge { background: #8a5a2b; } .ch.toggle { background: #2b6b46; } .ch.timed { background: #c9b8f5; color: #3b1a80; font-weight: 800; font-size: 0.6rem; text-align: center; line-height: 16px; } .ch.fire { background: #7a2d18; box-shadow: inset 0 0 0 2px #f97316; } .ch.crack { background: #35303f; box-shadow: inset 0 0 0 2px #94a3b8; } .ch.pillar { background: #6b7285; border-radius: 3px; box-shadow: inset 0 3px 0 #8d95a8; } .ch.lever { background: linear-gradient(135deg, #3a3f4b 45%, #facc15 45%, #facc15 62%, #3a3f4b 62%); } .ch.orb { background: #60a5fa; border-radius: 50%; box-shadow: inset -3px -3px 0 rgba(255,255,255,0.4); } .ch.button { background: #2f3542; border-radius: 50%; box-shadow: inset 0 0 0 3px #f87171; } .hud-item.timer b { color: #c9b8f5; } .tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #4c1d95; color: #ddd6fe; font-size: 0.62rem; font-weight: 700; } /* ── 右の欄（敵の図鑑・記録・ボタン）── */ #panel { width: 320px; flex-shrink: 0; background: #141a22; border: 1px solid #1e2a3a; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; font-size: 0.82rem; } .info { background: #0f1620; border-radius: 8px; padding: 12px; line-height: 1.6; min-height: 7.5em; } .info p { margin-bottom: 4px; } .info .cost { font-size: 0.95rem; } .info .bad { color: #f87171; } .mon { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .mon-face { font-size: 2rem; background: #ece6d6; border-radius: 8px; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; } .dim { color: #64748b; } .stuck { background: #7f1d1d; color: #fecaca; border-radius: 8px; padding: 8px 10px; line-height: 1.5; } .log { list-style: none; font-size: 0.76rem; color: #64748b; line-height: 1.6; min-height: 8em; } .log li.latest { color: #e2e8f0; } .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } button { font: inherit; font-size: 0.8rem; padding: 8px 12px; border-radius: 8px; cursor: pointer; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; min-height: 36px; } button:hover { background: #273449; } button:disabled { opacity: 0.4; cursor: default; } button.primary { background: #d97706; border-color: #f59e0b; color: #fff; font-weight: 700; } button.primary:hover { background: #b45309; } #guide-section { margin-top: 16px; background: #141a22; border-radius: 10px; padding: 16px; border: 1px solid #1e2a3a; } #guide-section h3 { font-size: 0.9rem; margin-bottom: 10px; color: #dfe6e9; } .guide-content { display: flex; gap: 20px; } .guide-col { flex: 1; min-width: 0; } .guide-col h4 { font-size: 0.8rem; color: #fde68a; margin-bottom: 6px; } .guide-col ul { list-style: none; font-size: 0.73rem; color: #8899aa; line-height: 1.6; } .guide-col li { margin-bottom: 4px; padding-left: 8px; position: relative; } .guide-col li::before { content: "·"; position: absolute; left: 0; color: #576574; } .guide-col li b { color: #c8d6e5; } .related-apps { margin-top: 16px; background: #141a22; border-radius: 10px; padding: 16px; border: 1px solid #1e2a3a; } .related-apps-title { font-size: 0.9rem; margin-bottom: 10px; color: #dfe6e9; } .related-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .related-app-link { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-size: 0.78rem; color: #a0aec0; background: #0f151d; border: 1px solid #1e2a3a; } .related-app-link:hover { color: #fde68a; border-color: rgba(251, 191, 36, 0.35); } /* 広告。**高さを決め打たない**（枠が出ないとき空白が残る）*/ #ad-section { margin-top: 16px; min-height: 0; overflow: hidden; } #site-footer { margin-top: 24px; padding: 16px 0 8px; text-align: center; border-top: 1px solid #1e2a3a; } .footer-links { display: flex; justify-content: center; gap: 12px; align-items: center; margin-bottom: 8px; } .footer-link { color: #a0aec0; text-decoration: none; font-size: 0.8rem; } .footer-link:hover { color: #fde68a; } .footer-sep { color: #2d3a4a; font-size: 0.7rem; } .footer-copy { font-size: 0.7rem; color: #576574; } @media (max-width: 720px) { #select-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 800px) { /* **遊んでいる間は上の飾りを削る。** 盤面が画面からはみ出すと、 押したい所へスクロールしないと届かない（iPhone 12 の高さ 664px で実測した）*/ body.playing .title-area { display: none; } body.playing #site-header { padding: 5px 12px; } body.playing .header-logo { font-size: 0.95rem; } #stage-bar { padding: 5px 10px; gap: 6px; margin-bottom: 5px; } #stage-name { font-size: 0.85rem; } #stage-hint { font-size: 0.7rem; } .stage-theme { font-size: 0.62rem; } #hud { gap: 5px; margin-bottom: 5px; } .hud-moves, .hud-hp, .hud-item, .hud-keys { padding: 3px 9px; min-height: 34px; gap: 6px; } .hud-moves > b { font-size: 1.15rem; } .hud-hp b { font-size: 1.05rem; } .hud-item b { font-size: 0.95rem; } .hud-label { font-size: 0.6rem; } .hud-sub { font-size: 0.62rem; } .legend { font-size: 0.68rem; line-height: 1.8; padding-top: 6px; } #app { padding: 8px 10px 10px; } #main-layout { flex-direction: column; } #stage { max-height: none; } #panel { width: auto; } .hud-hp, .hud-item, .hud-keys { padding: 4px 10px; min-height: 38px; } .guide-content { flex-direction: column; } }