* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
html, body { width: 100%; height: 100%; background: #0b0d17; color: #fff; overflow: hidden; touch-action: none; overscroll-behavior: none;
  font-family: system-ui, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif; }
:root { --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; }

/* 上：対戦画面（高さは main.js が、下のパネルを除いた分に合わせる） */
#stage { position: fixed; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; }
#game { display: block; background: #000; }

.hidden { display: none !important; }

/* ---- 下：疑似ターミナルとコマンドガイド ---- */
#panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); background: #0b0d17; }
#terms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 1100px); }
.term { min-width: 0; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; overflow: hidden; color: #c9d1d9; font: 13px/1.45 var(--mono); text-align: left; }
.termHead { display: flex; align-items: center; gap: 8px; padding: 2px 8px; background: #161b22; color: #8b949e; font-size: 11px; }
.dots { display: flex; gap: 4px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.termLog { display: flex; flex-direction: column; justify-content: flex-end; height: calc(1.45em * 3); padding: 0 8px; overflow: hidden; }
.ln, .termLine { white-space: pre; overflow: hidden; text-overflow: ellipsis; flex: none; }
.ln.out { color: #8b949e; }
.ln.err { color: #ff7b72; }
.ln.ok { color: #7ee787; font-weight: 700; }
.ln.warn { color: #e3b341; }
.termLine { padding: 0 8px 4px; }
/* 必殺技の効果：表示が消える（DUKE）／左右反転する（PYTHON） */
#terms.blind .termLog, #terms.blind .termLine { visibility: hidden; }
.term.mirror { transform: scaleX(-1); }
.prompt { color: #7ee787; }
.term.cpu .prompt { color: #79c0ff; }
.cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; background: currentColor; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; width: min(100%, 1100px); }
.chip { padding: 3px 9px; border-radius: 6px; border: 1px solid #30363d; background: #161b22; color: #c9d1d9; font: 12px/1.5 var(--mono); cursor: pointer; white-space: nowrap; }
.chip code { margin-right: 6px; color: #ffd23f; font: inherit; font-weight: 700; }
.chip:hover { border-color: #8b949e; }
.chip:active { transform: scale(.95); }
.chip.dim { opacity: .45; }
.chip.key { border-color: #4b5563; }
.chip.key code { color: #7ee787; }
.chip.dir { touch-action: none; border-color: #4b5563; }
.chip.dir code { color: #79c0ff; }
.chip.dir.on { background: #2a3050; transform: scale(.95); }
body.touch .chip.dir { min-width: 52px; }
.chip.ready { border-color: #ffb400; color: #fff; animation: ready .6s ease-in-out infinite alternate; }
@keyframes ready { from { box-shadow: 0 0 2px #ffb400; } to { box-shadow: 0 0 12px #ffb400; } }
body.touch .chip { padding: 8px 11px; }
@media (max-height: 520px) {
  .term { font-size: 11px; }
  .termHead { display: none; }
  .termLog { height: calc(1.45em * 2); }
}

/* ---- 画面を覆うメニュー類 ---- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.5vh; padding: 16px; text-align: center; background: rgba(8, 10, 24, .8); }
h1 { font-size: clamp(30px, 10vh, 76px); font-weight: 900; font-style: italic; line-height: 1.02; letter-spacing: .02em; text-shadow: 4px 4px 0 #e0303a; }
h1 .pre { display: block; margin-bottom: .2em; font-size: .46em; color: #ff6b6b; text-shadow: 2px 2px 0 #40090c; transform: rotate(-4deg); }
h1 .main { color: #ffd23f; text-shadow: 4px 4px 0 #2a6df4; }
.tagline { font: 700 clamp(13px, 2.6vh, 18px) var(--mono); color: #7ee787; }
.tagline code { margin-right: .5em; font: inherit; color: #8b949e; }

.menu { display: flex; flex-direction: column; gap: 1.6vh; width: min(360px, 90vw); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label { font-size: 14px; opacity: .85; }
.chips { display: flex; gap: 6px; }
.chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font-size: 14px; cursor: pointer; }
.chips button.on { background: #fff; color: #111; font-weight: 700; }
.big { padding: 1.8vh 12px; min-height: 44px; font-size: 18px; font-weight: 800; border: none; border-radius: 10px; background: #ffd23f; color: #1a1a1a; cursor: pointer; }
.big:hover:not(:disabled) { filter: brightness(1.08); }
.big.sub { background: #2a3050; color: #fff; font-size: 15px; }
.big:disabled { opacity: .4; cursor: default; }
.help { font-size: 13px; line-height: 2; opacity: .8; }
kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin: 0 1px; border-radius: 4px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); font: 12px/18px var(--mono); }

body.touch .pc-only { display: none; }
body:not(.touch) .touch-only { display: none; }

#resultText { font-size: clamp(40px, 14vh, 96px); font-weight: 900; font-style: italic; color: #ffd23f; text-shadow: 5px 5px 0 #e0303a; }
#resultText.lose { color: #9fb4ff; text-shadow: 5px 5px 0 #222a55; }
#resultSub { min-height: 1.5em; font-size: clamp(15px, 3.4vh, 22px); font-weight: 700; }
#resultSub.unlock { color: #7ee787; }

/* ---- 音のオン・オフ（タイトル画面の右下） ---- */
#soundBtn { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer; }
#soundBtn:hover { background: rgba(255,255,255,.24); }
#soundBtn .cross { display: none; }
#soundBtn.off { color: rgba(255,255,255,.55); }
#soundBtn.off .wave { display: none; }
#soundBtn.off .cross { display: block; }

/* ---- オンライン対戦 ---- */
#onlineCode { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); color: #fff;
  font: 700 20px var(--mono); letter-spacing: .2em; text-transform: uppercase; text-align: center; user-select: text; -webkit-user-select: text; }
#onlineCode::placeholder { font-size: 13px; letter-spacing: 0; color: rgba(255,255,255,.5); }
#onlineStatus { min-height: 3em; white-space: pre-line; font-size: clamp(15px, 3.4vh, 22px); font-weight: 700; line-height: 1.6; }
#netWait { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8; padding: 4px 14px; border-radius: 999px; background: rgba(0,0,0,.7); font-size: 13px; }

/* ---- 最初の「押してスタート」画面（ブラウザが音を止めているときだけ出る） ---- */
#tapStart { z-index: 40; background: #0b0d17; cursor: pointer; }
.tapMsg { font-size: clamp(15px, 3.6vh, 24px); font-weight: 700; animation: blink 1.2s steps(1) infinite; }

/* ---- キャラ・ステージ選択 ---- */
.selTitle { font-size: clamp(18px, 5vh, 28px); font-weight: 800; }
.cards { display: flex; gap: 12px; justify-content: center; }
.card { display: flex; flex-direction: column; align-items: center; gap: 2px; width: min(170px, 28vw); padding: 8px 6px 10px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.card:hover { border-color: rgba(255,210,63,.7); }
.card canvas { width: 100%; height: min(165px, 36vh); }
.card b { font-size: clamp(15px, 4vh, 20px); font-style: italic; letter-spacing: .04em; }
.card small { font-size: 12px; line-height: 1.5; opacity: .8; }
/* CPUのキャラを選んでいる間、自分が選んだキャラに印をつける */
.card.picked { border-color: #7ee787; box-shadow: 0 0 0 3px rgba(126,231,135,.3); }
.card.picked::after { content: 'YOU'; font: 700 11px var(--mono); color: #7ee787; }
.card.locked { cursor: default; background: rgba(255,255,255,.03); border-style: dashed; }
.card.locked:hover { border-color: rgba(255,255,255,.2); }
.card.locked canvas { opacity: .7; }
.cards.four .card { width: min(160px, 22vw); }
.cards.four .card b { font-size: clamp(11px, 3.2vw, 20px); }
.cards.many { gap: 8px; }
.cards.many .card { width: min(140px, 15vw); padding: 6px 4px 8px; }
.cards.many .card canvas { height: min(130px, 28vh); }
.cards.many .card b { font-size: clamp(10px, 2.2vw, 17px); }
.cards.many .card small { font-size: clamp(9px, 1.3vw, 11px); }
.cards.many .card .credit { font-size: 8px; }
.card .credit { margin-top: 3px; font-size: 9px; line-height: 1.3; opacity: .75; overflow-wrap: anywhere; }
/* まだ使えない（？？？の）キャラは、正体がわかってしまう表示を出さない */
.card.locked .credit { display: none; }
.card.stage { width: min(220px, 30vw); }
.card.stage canvas { height: auto; aspect-ratio: 16 / 9; border-radius: 6px; }
.card.stage b { white-space: nowrap; font-size: clamp(12px, 3.6vh, 18px); }
.btnRow { display: flex; gap: 10px; }
.btnRow .big { min-width: 120px; }

/* ---- 挑戦者が現れた！ ---- */
#challenger { padding: 0; background: #1a0408; justify-content: space-between; }
#chalCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chalWarn { position: relative; width: 100%; padding: .2em 0; background: repeating-linear-gradient(-45deg, #ffd23f 0 24px, #111 24px 48px); color: #fff;
  font: 900 clamp(16px, 4.5vh, 30px) var(--mono); letter-spacing: .5em; text-shadow: 0 0 6px #000, 0 0 6px #000; animation: blink .5s steps(1) infinite; }
.chalText { position: relative; margin-bottom: 7vh; font-size: clamp(32px, 12vh, 92px); font-weight: 900; font-style: italic; color: #fff;
  text-shadow: 5px 5px 0 #b01515, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; animation: slam .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes slam { from { transform: scale(3.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- 縦持ち警告 ---- */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: #0b0d17; flex-direction: column; align-items: center; justify-content: center; gap: 24px; font-size: 18px; }
#rotate .phone { width: 50px; height: 86px; border: 4px solid #fff; border-radius: 10px; animation: spin 2s ease-in-out infinite; }
@keyframes spin { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }