* { 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; }
/* --vh / --vw：画面の高さ・幅の1%。main.js が入れる（スマホを縦に持って画面を回しているときは、縦横を入れ替えた値になる） */
:root { --vh: 1vh; --vw: 1vw; }
#app { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
/* スマホを縦に持っているとき：全体を90度回して、横向きの画面として見せる */
body.rot #app { width: var(--appW); height: var(--appH); transform-origin: 0 0; transform: rotate(90deg) translateY(-100%); }
:root { --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; }

/* 画面の構図：左右の端にコマンドガイド、まんなかの上が対戦画面、その下がターミナル */
:root { --gw: clamp(150px, calc(var(--vw) * 13), 200px); }
/* 対戦画面（高さは main.js が、下のターミナルを除いた分に合わせる） */
#stage { position: fixed; left: var(--gw); right: var(--gw); top: 0; display: flex; align-items: center; justify-content: center; }
#game { display: block; background: #000; }

.hidden { display: none !important; }

/* ---- 下：疑似ターミナル ---- */
#panel { position: fixed; left: var(--gw); right: var(--gw); bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 5px env(safe-area-inset-right) calc(5px + env(safe-area-inset-bottom)) env(safe-area-inset-left); background: #0b0d17; }
/* --panelW は main.js が対戦画面の幅に合わせる（左右の端をそろえるため） */
#terms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, var(--panelW, 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); }
/* 凍って打てない（TUX）／Enter なしで発動する（BUGDROID） */
.term.frozen { border-color: #9fdcff; background: linear-gradient(135deg, #173a55, #0d1117 55%, #1d4d6e); box-shadow: inset 0 0 16px rgba(159,220,255,.6); }
.term.frozen .termLine { opacity: .5; }
.term.frozen .cursor { animation: none; background: #9fdcff; }
.term.auto { border-color: #a4c639; box-shadow: inset 0 0 10px rgba(164,198,57,.45); }
.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 { position: fixed; top: 0; bottom: 0; z-index: 5; width: var(--gw); display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px; overflow: hidden; background: #0b0d17; }
#guideL { left: env(safe-area-inset-left); }
#guideR { right: env(safe-area-inset-right); }
.guideHead { color: #8b949e; font: 700 11px/1.4 var(--mono); letter-spacing: .08em; }
.arrows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.arrows .chip { text-align: center; padding: 3px 0; }
.arrows .chip code { min-width: 0; margin: 0; }
.arrowNote { color: #8b949e; font: 11px/1.5 var(--mono); }
.chip { padding: 3px 8px; border-radius: 6px; border: 1px solid #30363d; background: #161b22; color: #c9d1d9; font: 12px/1.45 var(--mono); cursor: default; text-align: left; }
.chip code { display: inline-block; min-width: 3.2em; margin-right: 6px; color: #ffd23f; font: inherit; font-weight: 700; }
/* PC ではただの一覧（押しても何も起きない）。スマホでは押せる */
body.touch .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); }
.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: 6px 8px; }
@media (max-height: 520px) {
  /* 背の低い画面（横持ちのスマホなど）：ガイドを2列にして、説明は1行に収める */
  :root { --gw: clamp(150px, calc(var(--vw) * 24), 210px); }
  .guide { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 4px; padding: 4px; }
  .guideHead, .arrowNote { display: none; }
  .arrows { grid-column: 1 / -1; }
  .chip { font-size: 10px; padding: 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.touch .chip { padding: 5px; }
  .chip code { min-width: 0; margin-right: 4px; }
  .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: calc(var(--vh) * 2.5); padding: 16px; text-align: center; background: rgba(8, 10, 24, .8); }
h1 { font-size: clamp(30px, calc(var(--vh) * 10), 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, calc(var(--vh) * 2.6), 18px) var(--mono); color: #7ee787; }
.tagline code { margin-right: .5em; font: inherit; color: #8b949e; }

.menu { display: flex; flex-direction: column; gap: calc(var(--vh) * 1.6); width: min(360px, calc(var(--vw) * 90)); }
.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: calc(var(--vh) * 1.8) 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, calc(var(--vh) * 14), 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, calc(var(--vh) * 3.4), 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, calc(var(--vh) * 3.4), 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, calc(var(--vh) * 3.6), 24px); font-weight: 700; animation: blink 1.2s steps(1) infinite; }

/* ---- キャラ・ステージ選択 ---- */
.selTitle { font-size: clamp(18px, calc(var(--vh) * 5), 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, calc(var(--vw) * 28)); 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, calc(var(--vh) * 36)); }
.card b { font-size: clamp(15px, calc(var(--vh) * 4), 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); }
/* 「YOU」の場所は最初から空けておく（選んだときにカードが伸びて、配置が動かないように） */
.card[data-ch]::after { content: 'YOU'; font: 700 11px var(--mono); color: #7ee787; visibility: hidden; }
.card.picked::after { visibility: visible; }
.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, calc(var(--vw) * 22)); }
.cards.four .card b { font-size: clamp(11px, calc(var(--vw) * 3.2), 20px); }
.cards.many { gap: 8px; }
.cards.many .card { width: min(140px, calc(var(--vw) * 15)); padding: 6px 4px 8px; }
.cards.many .card canvas { height: min(130px, calc(var(--vh) * 28)); }
.cards.many .card b { font-size: clamp(10px, calc(var(--vw) * 2.2), 17px); }
.cards.many .card small { font-size: clamp(9px, calc(var(--vw) * 1.3), 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, calc(var(--vw) * 30)); }
.card.stage canvas { height: auto; aspect-ratio: 16 / 9; border-radius: 6px; }
.card.stage b { white-space: nowrap; font-size: clamp(12px, calc(var(--vh) * 3.6), 18px); }
.btnRow { display: flex; gap: 10px; }
/* キャラ選択画面の下の TIPS */
#tips { display: flex; align-items: baseline; gap: 10px; max-width: min(760px, calc(var(--vw) * 92)); min-height: 3em; padding: 6px 14px; border-radius: 8px; background: rgba(0,0,0,.35); font-size: clamp(11px, calc(var(--vh) * 2.4), 14px); line-height: 1.5; text-align: left; }
#tips b { flex: none; color: #ffd23f; font: 700 12px var(--mono); letter-spacing: .1em; }
/* BUGDROID の必殺技を出したあと：ガイドのコマンドをクリックして技を出せる */
body.clickfire .chip.cmd { cursor: pointer; border-color: #a4c639; }
body.clickfire .chip.cmd:hover { background: #26331a; }
body.clickfire .chip.cmd:active { transform: scale(.95); }
.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, calc(var(--vh) * 4.5), 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: calc(var(--vh) * 7); font-size: clamp(32px, calc(var(--vh) * 12), 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; } }

/* 背の高い画面では、左右のガイドの文字を少し大きくする */
@media (min-height: 760px) { .guide { gap: 6px; } .chip { font-size: 13px; padding: 5px 9px; } .guideHead, .arrowNote { font-size: 12px; } }

/* ---- スマホ版：ガイドとターミナルをなくし、対戦画面を画面いっぱいに。操作は、重ねた半透明のボタンで ---- */
body.mobile { --gw: 0px; }
body.mobile .guide, body.mobile #panel { display: none; }
#dpad, #pad { display: none; }
body.mobile.playing #dpad, body.mobile.playing #pad { display: grid; }
#dpad, #pad { position: fixed; z-index: 6; --pb: min(calc(var(--vh) * 16.5), 62px); gap: calc(var(--pb) * .14); touch-action: none; }
#dpad { left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: repeat(3, var(--pb)); grid-auto-rows: var(--pb); }
#pad { right: max(8px, env(safe-area-inset-right)); bottom: max(6px, env(safe-area-inset-bottom)); grid-template-columns: repeat(3, var(--pb)); grid-auto-rows: var(--pb); }
.pbtn { min-width: 0; padding: 0; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(16,20,36,.2); color: rgba(255,255,255,.8);
  font: 700 calc(var(--pb) * .25) var(--mono); text-shadow: 0 1px 2px #000; touch-action: none; }
.pbtn.on, .pbtn:active { background: rgba(255,210,63,.55); border-color: #ffd23f; }
/* 十字キー：上2段ぶんの場所に、ぎゅっと詰めて置く。上の段は ↖ ↑ ↗、まんなかは ← → がくっついて並び、下は ↓ */
.cross { grid-column: 1 / -1; grid-row: span 2; justify-self: center; align-self: center; width: calc(var(--pb) * 2.2); height: calc(var(--pb) * 2.1);
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); touch-action: none; }
.cross .seg { display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255,255,255,.3); background: rgba(16,20,36,.2); color: rgba(255,255,255,.8);
  font: 700 calc(var(--pb) * .4) var(--mono); text-shadow: 0 1px 2px #000; pointer-events: none; margin: -0.75px; }
.cross .ul, .cross .u, .cross .ur { grid-column: span 2; }
.cross .ul, .cross .ur { font-size: calc(var(--pb) * .26); color: rgba(255,255,255,.55); }
.cross .ul { border-radius: 16px 0 0 0; } .cross .ur { border-radius: 0 16px 0 0; }
.cross .l, .cross .r { grid-column: span 3; }
.cross .d { grid-column: 2 / span 4; border-radius: 0 0 16px 16px; }
.cross .seg.on { background: rgba(255,210,63,.55); border-color: #ffd23f; color: #fff; }
/* 攻撃ではないボタン（apt・tar・awk・pwd・cd）：大きさは同じで、丸い形・点線の水色 */
.pbtn.sub { border-radius: 999px; border: 1.5px dashed rgba(121,192,255,.6); background: rgba(18,40,72,.22); color: rgba(207,230,255,.85); }
.pbtn.sub.on, .pbtn.sub:active { background: rgba(121,192,255,.5); border-style: solid; }
.pbtn.super { border-color: #ffb400; color: #ffe066; background: rgba(120,70,0,.4); animation: ready .6s ease-in-out infinite alternate; }
/* 必殺技の効果：ボタンが左右反転する（PY&THON）／文字が消える（DUKE）／凍って押せない（TUX） */
#pad.mirror { transform: scaleX(-1); }
.blind .pbtn[data-cmd] { color: transparent; text-shadow: none; }
.frozen .pbtn[data-cmd] { border-color: #9fdcff; background: rgba(150,215,255,.4); color: rgba(255,255,255,.4); }
/* スマホは画面の背が低いので、メニュー類を詰める */
body.mobile .overlay { gap: calc(var(--vh) * 1.6); padding: 6px 10px; }
body.mobile .selTitle { font-size: clamp(14px, calc(var(--vh) * 5), 22px); }
body.mobile .card { padding: 4px 4px 6px; }
body.mobile .card canvas { height: min(110px, calc(var(--vh) * 17)); }
body.mobile .card b { font-size: clamp(10px, calc(var(--vh) * 4), 16px); }
body.mobile .card small { font-size: 10px; line-height: 1.35; }
body.mobile .card .credit { font-size: 7px; line-height: 1.25; }
body.mobile .big { min-height: 34px; padding: calc(var(--vh) * 1.2) 12px; font-size: 15px; }
body.mobile #tips { min-height: 0; padding: 3px 12px; font-size: 11px; }

/* ---- PC の「キー入力」の操作：ガイドのキー表示と、キー設定の画面 ---- */
body.mobile .pc-key { display: none; }
.chip kbd, .keyRow kbd { min-width: 22px; margin-right: 6px; text-align: center; background: #ffd23f; border-color: #ffd23f; color: #111; font-weight: 700; }
body.keymode .chip code { min-width: 0; color: #8b949e; }
.keysNote { font-size: 13px; opacity: .85; }
#keyList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(720px, 94vw); }
.keyRow { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 8px; border: 1px solid #30363d; background: #161b22; color: #c9d1d9; font: 13px/1.4 var(--mono); text-align: left; cursor: pointer; }
.keyRow:hover { border-color: #8b949e; }
.keyRow code { min-width: 3.4em; color: #ffd23f; font: inherit; font-weight: 700; }
.keyRow span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.keyRow.wait { border-color: #ffd23f; box-shadow: 0 0 10px #ffb400; }
.keyRow.wait kbd { animation: blink .6s steps(1) infinite; }
/* ---- スマホ：キャラが増えても縦にはみ出さないよう、カードの幅を決めて、入りきらない分は横にスクロールして選ぶ ---- */
body.mobile #select .cards { max-width: 100%; justify-content: flex-start; overflow-x: auto; touch-action: pan-x pan-y; padding: 0 4px 4px; scrollbar-width: none; }
body.mobile #select .cards::-webkit-scrollbar { display: none; }
body.mobile #select .card { flex: none; width: 150px; }