/* 激闘!レスバトル! — 見た目
 * 方針: リアルさよりも、爽快感と分かりやすさ。
 * 太い輪郭・原色・ベタ塗り・かたい影(マンガのコマ)。
 * 「誰が打ったか」は色と顔アイコンで一目で分かるようにする(相手=赤・左 / 自分=青・右)。
 * 派手にするのは、アリーナ(黄色)と、ダメージの演出。ほかは暗い紺で静かにして、そこへ視線を集める。 */
:root {
  --ink: #0d0820;
  --bg: #17112e;
  --navy: #2a2060;
  --navy-2: #3b2f78;
  --paper: #ffffff;
  --yellow: #ffcf33;
  --yellow-2: #ffe14d;
  --red: #e3243a;
  --red-2: #ff5a4d;
  --blue: #1668e8;
  --blue-2: #52b3ff;
  --green: #14a05a;
  --lilac: #c9c2f5;
  --bw: 3px;

  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic UI", "Noto Sans JP", "IPAexGothic", Meiryo, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Noto Sans Mono CJK JP", monospace;

  --hud-h: 76px;
  --hand-h: 146px;
}
@media (max-width: 860px) { :root { --hud-h: 64px; --hand-h: 226px; } }
@media (max-height: 640px) and (min-width: 861px) { :root { --hud-h: 64px; --hand-h: 118px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 4px solid var(--yellow-2); outline-offset: 2px; }
b, h1, h2 { font-weight: 900; }

#app { position: fixed; inset: 0; overflow: hidden; background: var(--bg); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#bg { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .07) 2px, transparent 2.6px) 0 0 / 22px 22px, radial-gradient(90% 70% at 50% 0%, #3a2a85, var(--bg) 70%); }
.screen { position: absolute; inset: 0; }

/* ===== 共通の部品 ===== */
.panel { background: var(--navy); color: #fff; border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink); }
.panel-h { margin: 0; padding: 10px 16px; background: var(--ink); color: var(--yellow-2); font: 900 16px var(--sans); border-radius: 12px 12px 0 0; }
.av { border-radius: 50%; overflow: hidden; border: var(--bw) solid var(--ink); background: #fff; flex: none; }
.av svg { display: block; width: 100%; height: 100%; }
.btn { padding: 10px 18px; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; font: 900 15px var(--sans); box-shadow: 0 4px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.btn:hover { background: var(--yellow-2); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn-main { background: var(--red); color: #fff; font-size: 22px; padding: 12px 30px; letter-spacing: .06em; text-shadow: 2px 2px 0 var(--ink); }
.btn-main:hover { background: var(--red-2); }
.btn-sub { padding: 8px 14px; font-size: 13px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: var(--bw) solid var(--ink); background: #fff; color: var(--ink); font: 900 18px var(--sans); box-shadow: 0 4px 0 var(--ink); }
.icon-btn:hover { background: var(--yellow-2); } .icon-btn:active { transform: translateY(4px); box-shadow: none; }
.icon-btn[aria-pressed="true"] { background: #c9c2f5; text-decoration: line-through; }

/* ===== アリーナ(奥の相手) ===== */
.arena {
  position: relative; overflow: hidden; border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 6px 0 var(--ink);
  background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 46%), repeating-conic-gradient(from 0deg at 50% 44%, #ffd84d 0 5deg, #ffc61a 5deg 10deg);
}
.arena::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(190, 90, 0, .3) 1.7px, transparent 2.3px) 0 0 / 14px 14px; -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent 24%, #000 80%); mask-image: radial-gradient(circle at 50% 44%, transparent 24%, #000 80%); }
#npc-wrap, .t-npc { position: absolute; left: 50%; top: 12px; height: calc(100% - 134px); aspect-ratio: 400 / 380; transform: translateX(-50%); box-shadow: 0 7px 0 rgba(13, 8, 32, .85); }
#npc, #t-npc { width: 100%; height: 100%; }
#npc-wrap.lunge { animation: lunge .22s ease-out; }
#npc-wrap.flash .npc { filter: brightness(2.6) saturate(.2); }
@keyframes lunge { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.07); } 100% { transform: translateX(-50%) scale(1); } }

.plate { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; padding: 8px 14px 11px; background: var(--navy); color: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); }
.plate-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.plate-name b { font: 900 22px/1.2 var(--sans); } .plate-name small { font-size: 13px; color: var(--lilac); font-weight: 700; }
.hp { position: relative; height: 28px; margin-top: 6px; background: var(--navy-2); border: var(--bw) solid var(--ink); border-radius: 9px; overflow: hidden; }
.hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#bar-trail { background: #fff; transition: width .5s .3s ease-out; }
#bar-mental { background: linear-gradient(#ff9a6a, var(--red)); transition: width .15s ease-out; border-right: 3px solid var(--ink); }
.hp.shake { animation: hpshake .3s linear; }
@keyframes hpshake { 0% { transform: translate(-4px, 2px); } 25% { transform: translate(4px, -2px); } 50% { transform: translate(-3px, 1px); } 75% { transform: translate(2px, 0); } 100% { transform: none; } }
.hp-lbl, .hp-num { position: absolute; top: 50%; transform: translateY(-50%); font: 900 13px var(--sans); color: #fff; text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink); z-index: 1; }
.hp-lbl { left: 10px; } .hp-num { right: 10px; font-size: 16px; font-variant-numeric: tabular-nums; }

/* コンボ(アリーナの左上に大きく) */
.combo { position: absolute; left: 16px; top: 8px; z-index: 4; pointer-events: none; opacity: 0; transform-origin: left top; font-style: italic; line-height: .9; }
.combo[data-n="1"] { opacity: 1; }
.combo b { display: inline-block; font: 900 clamp(64px, 9vw, 120px)/.9 var(--sans); font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 #ff8a00; }
.combo span { display: block; margin: -4px 0 0 6px; font: 900 clamp(18px, 2.4vw, 28px) var(--sans); color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; letter-spacing: .08em; }
.combo small { display: inline-block; margin: 2px 0 0 6px; padding: 1px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow-2); color: var(--ink); font: 900 15px var(--sans); font-style: normal; }
.combo small:empty { display: none; }
.combo[data-t="2"] b { text-shadow: 6px 6px 0 var(--red); } .combo[data-t="3"] b { text-shadow: 6px 6px 0 #e0309c; animation: combofire .12s linear infinite; }
.combo.pop b { animation: pop .3s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pop { 0% { transform: scale(1.8) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes combofire { 0% { transform: translate(-2px, 1px); } 100% { transform: translate(2px, -1px); } }

/* 前兆の表示 */
.tell { position: absolute; right: 14px; top: 14px; z-index: 4; max-width: 60%; padding: 7px 16px; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); font: 900 clamp(15px, 2vw, 20px)/1.2 var(--sans); transform: rotate(3deg); animation: tellpulse .3s ease-in-out infinite alternate; }
.tell.t-long { background: #2d7cff; color: #fff; } .tell.t-emotion { background: var(--red); color: #fff; } .tell.t-boomerang { background: #8a3df0; color: #fff; }
.tell.t-dodge { background: #14a5a0; color: #fff; } .tell.t-spam { background: #ff8a1f; color: var(--ink); } .tell.t-self { background: #e0309c; color: #fff; }
@keyframes tellpulse { from { transform: rotate(3deg) scale(1); } to { transform: rotate(3deg) scale(1.08); } }

/* 誤字のつっこみ待ち */
#typo-bubble { position: absolute; right: 16px; top: 86px; z-index: 4; width: 86px; height: 86px; --p: 1; display: grid; place-items: center; border-radius: 50%; border: var(--bw) solid var(--ink); background: conic-gradient(var(--red) calc(var(--p) * 1turn), #ffd0d4 0); box-shadow: 4px 4px 0 var(--ink); animation: bubbleshake .12s linear infinite; }
#typo-bubble::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); }
#typo-bubble span { position: relative; font: 900 32px var(--sans); color: var(--red); }
@keyframes bubbleshake { 0% { transform: translate(-1px, 0) rotate(-3deg); } 100% { transform: translate(1px, 1px) rotate(3deg); } }

/* ===== NPC(SVG) ===== */
.npc { width: 100%; height: 100%; display: block; overflow: visible; }
.npc .f { display: none; }
.npc[data-face="relaxed"] .f-relaxed, .npc[data-face="even"] .f-even, .npc[data-face="panic"] .f-panic,
.npc[data-face="broken"] .f-broken, .npc[data-face="o"] .f-o, .npc[data-face="shout"] .f-shout,
.npc[data-face="smug"] .f-smug, .npc[data-face="away"] .f-away, .npc[data-face="frenzy"] .f-frenzy { display: inline; }
.npc .blush { fill: #ff4a5e; opacity: .16; transition: opacity .5s; }
.npc[data-face="even"] .blush { opacity: .14; }
.npc[data-face="panic"] .blush, .npc[data-face="away"] .blush { opacity: .32; }
.npc[data-face="frenzy"] .blush { opacity: .5; }
.npc[data-face="broken"] .blush { opacity: .62; }
.npc[data-face="shout"] .blush { opacity: .8; }
.npc .sweat { display: none; fill: #9fd8ff; }
.npc[data-face="panic"] .sweat, .npc[data-face="broken"] .sweat, .npc[data-face="frenzy"] .sweat, .npc[data-face="away"] .sweat { display: inline; animation: sweatdrop 1.1s ease-in infinite; }
.npc .rage-veins { display: none; stroke: var(--red); stroke-width: 3; fill: none; stroke-linecap: round; }
.npc[data-face="shout"] .rage-veins { display: inline; }
.npc .arms { display: none; }
.npc[data-arms="down"] .arms-down, .npc[data-arms="up"] .arms-up, .npc[data-arms="snack"] .arms-snack, .npc[data-arms="head"] .arms-head { display: inline; }
.npc .glow { pointer-events: none; mix-blend-mode: screen; animation: flicker 3.2s steps(1) infinite; }
.npc .cam circle { animation: rec 1.4s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.npc .twopc { display: none; }
.npc.has-twopc .twopc { display: inline; }
.npc .twopc-screen { opacity: .25; }
.npc[data-pose="twopc"] .twopc-screen { opacity: 1; animation: flicker 1s steps(1) infinite; }
.npc .spill { display: none; }
.npc .mug { transform-origin: 339px 346px; }
.npc { --ty: .5s; }
.npc[data-mood="relaxed"] { --ty: 1s; } .npc[data-mood="panic"] { --ty: .2s; } .npc[data-mood="broken"] { --ty: .3s; } .npc[data-pose="frenzy"] { --ty: .08s; }
.npc .arms-down .hand-l, .npc .arms-snack .hand-l { animation: typeL var(--ty) ease-in-out infinite alternate; }
.npc .arms-down .hand-r { animation: typeR var(--ty) ease-in-out infinite alternate; }
.npc .head { transform-origin: 200px 235px; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); animation: breathe 4.2s ease-in-out infinite; }
.npc[data-pose="inhale"] .head { transform: rotate(-6deg) translateY(-7px); animation: none; }
.npc[data-pose="smug"] .head { transform: rotate(8deg); animation: none; }
.npc[data-pose="away"] .head { transform: rotate(-9deg) translateX(-6px); animation: none; }
.npc[data-pose="twopc"] .head { transform: rotate(10deg) translateX(10px); animation: none; }
.npc[data-pose="rage"] .body, .npc[data-pose="frenzy"] .body { animation: tremble .09s linear infinite; }
.npc[data-mood="panic"] .head { animation: trembleSlow .3s linear infinite; }
.npc[data-mood="broken"] .head { animation: trembleSlow .14s linear infinite; }
.npc .body { transform-origin: 200px 380px; }
.npc.hurt .body { animation: hurt .45s ease-out; }
.npc.hurt .head { animation: none; }
.npc.meltdown { animation: slam 1.4s ease-in forwards; transform-origin: 200px 380px; }
.npc.meltdown .mug { transform: rotate(78deg) translate(8px, 6px); transition: transform .3s .15s ease-in; }
.npc.meltdown .spill { display: inline; }

/* ---- キャラの普段の顔つき・特徴 ---- */
.npc[data-face="even-sullen"] .f-even-sullen, .npc[data-face="relaxed-sullen"] .f-relaxed-sullen,
.npc[data-face="even-aggro"] .f-even-aggro, .npc[data-face="relaxed-aggro"] .f-relaxed-aggro,
.npc[data-face="even-smug"] .f-even-smug, .npc[data-face="relaxed-smug"] .f-relaxed-smug,
.npc[data-face="even-brat"] .f-even-brat, .npc[data-face="relaxed-brat"] .f-relaxed-brat { display: inline; }
.npc[data-face="even-aggro"] .blush { opacity: .28; } .npc[data-face="relaxed-aggro"] .blush { opacity: .18; }
.npc[data-face="even-brat"] .blush, .npc[data-face="relaxed-brat"] .blush { opacity: .2; }
.npc .posture { transform-origin: 200px 235px; transition: transform .3s; }
.npc[data-att="sullen"] .posture { transform: translate(0, 12px) rotate(-3deg); }
.npc[data-att="aggro"] .posture { transform: translate(0, -4px) scale(1.04); }
.npc[data-att="smug"] .posture { transform: rotate(3deg) translate(0, -2px); }
.npc[data-att="brat"] .posture { transform: rotate(-4deg) translate(0, -2px); }
.npc.veins-on .rage-veins { display: inline; }
/* 顔アイコン: 頭の部分だけを見せる */
.npc.avatar .room, .npc.avatar .cam, .npc.avatar .twopc, .npc.avatar .desk, .npc.avatar .glow, .npc.avatar .wall, .npc.avatar .arms { display: none !important; }
.npc.avatar .head, .npc.avatar .body { animation: none !important; }
.av.shake { animation: avshake .35s linear; }
@keyframes avshake { 0% { transform: translate(-5px, 2px) rotate(-6deg); } 25% { transform: translate(5px, -2px) rotate(5deg); } 50% { transform: translate(-4px, 1px); } 75% { transform: translate(3px, 0); } 100% { transform: none; } }

@keyframes typeL { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes typeR { from { transform: translateY(-6px); } to { transform: translateY(0); } }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes tremble { 0% { transform: translate(-2px, 0); } 50% { transform: translate(2px, -1px); } 100% { transform: translate(-1px, 1px); } }
@keyframes trembleSlow { 0% { transform: translate(-1.5px, 0) rotate(-.6deg); } 100% { transform: translate(1.5px, 1px) rotate(.6deg); } }
@keyframes hurt { 0% { transform: translate(0, 0) scale(1); } 12% { transform: translate(-22px, 10px) rotate(-5deg) scale(.95); } 35% { transform: translate(16px, -4px) rotate(3deg); } 60% { transform: translate(-6px, 2px); } 100% { transform: none; } }
@keyframes sweatdrop { 0% { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: .9; } 47% { opacity: .62; } 50% { opacity: .95; } 78% { opacity: .75; } }
@keyframes slam { 0% { transform: translateY(0); } 12% { transform: translateY(-26px) rotate(-2deg); } 22% { transform: translateY(16px); } 30% { transform: translateY(0) rotate(1deg); } 55% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(14px); opacity: .08; } }

/* ---- 人物の描画(2026-11-06 に描き直し)。線は深い紫、面は「明るい面・基本・影」の3段+艶+モニターの照り返し ---- */
.npc .skin-f { fill: var(--skin); stroke: #1b1030; stroke-width: 3.2; stroke-linejoin: round; }
.npc .shirt-f { fill: var(--shirt); stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; }
.npc .face { stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; }
.npc .shade { fill: var(--skin-sh); opacity: .5; } .npc .shade.soft { opacity: .22; }
.npc .cheekhi { fill: #fff; opacity: .2; }
.npc .nose { fill: none; stroke: var(--skin-dk); stroke-width: 2.2; stroke-linecap: round; opacity: .85; } .npc .nose-sh { fill: none; stroke: var(--skin-dk); stroke-width: 2; stroke-linecap: round; opacity: .4; }
.npc .inear { fill: none; stroke: var(--skin-dk); stroke-width: 2.2; stroke-linecap: round; opacity: .6; }
.npc .neck-sh { fill: var(--skin-sh); opacity: .85; }
.npc .rimlight { fill: none; stroke: #a7cdff; stroke-width: 3; stroke-linecap: round; opacity: .6; }
/* 目・眉・口 */
.npc .sclera { fill: #fbfaff; stroke: none; }
.npc .lidshade { fill: rgba(70, 40, 110, .24); }
.npc .iris { stroke: none; } .npc .irisring { fill: none; stroke: var(--iris-dk); stroke-width: 1.8; }
.npc .irislow { fill: var(--iris-hi); opacity: .4; } .npc .pupil { fill: #120a24; } .npc .hlw { fill: #fff; }
.npc .lid { fill: none; stroke: #1b1030; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; } .npc .lid.thick { stroke-width: 4.6; }
.npc .lash { fill: none; stroke: #1b1030; stroke-width: 2.6; stroke-linecap: round; }
.npc .lolid { fill: none; stroke: rgba(27, 16, 48, .5); stroke-width: 1.6; stroke-linecap: round; }
.npc .crease { fill: none; stroke: var(--skin-dk); stroke-width: 1.8; stroke-linecap: round; opacity: .55; }
.npc .blink { fill: var(--skin); transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: blinkeye 5.2s infinite; }
@keyframes blinkeye { 0%, 90%, 100% { transform: scaleY(0); } 94% { transform: scaleY(1); } }
.npc .spiral { fill: none; stroke: #1b1030; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.npc .xeye { fill: none; stroke: #1b1030; stroke-width: 4.8; stroke-linecap: round; }
.npc .brow { fill: var(--hair-sh); stroke: #1b1030; stroke-width: .8; stroke-linejoin: round; }
.npc .mouth { fill: none; stroke: #1b1030; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } .npc .mouth.thin { stroke-width: 2; }
.npc .gape { fill: #5c1830; stroke: #1b1030; stroke-width: 2.8; stroke-linejoin: round; } .npc .tongue { fill: #ee6a86; stroke: #1b1030; stroke-width: 1.8; stroke-linejoin: round; }
.npc .teeth { fill: #fff; stroke: #1b1030; stroke-width: 2; stroke-linejoin: round; }
.npc .sweatd { fill: #a8dcff; stroke: #1b1030; stroke-width: 1.6; }
/* 髪 */
.npc .hair { fill: var(--hair); stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; }
.npc .hair-hi { fill: var(--hair-hi); opacity: .55; stroke: none; }
.npc .hairline { fill: none; stroke: var(--hair-sh); stroke-width: 1.7; stroke-linecap: round; opacity: .6; }
.npc .hair-sh-f { fill: var(--hair-sh); opacity: .55; } .npc .hair-hi-f { fill: none; stroke: var(--hair-hi); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.npc .castshade { fill: rgba(40, 14, 62, .36); }
.npc .pinkear { fill: #ff94b4; stroke: none; } .npc .hairclip { fill: none; stroke: #ffeaf4; stroke-width: 3.6; stroke-linecap: round; }
.npc .hood-out { fill: var(--shirt-dk); stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; }
.npc .hood-fold { fill: none; stroke: rgba(0, 0, 0, .35); stroke-width: 3; stroke-linecap: round; }
.npc .hood-rim { fill: var(--shirt); stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; }
.npc .hood-hi { fill: none; stroke: var(--shirt-hi); stroke-width: 4; stroke-linecap: round; opacity: .6; } .npc .hood-edge { fill: none; stroke: rgba(0, 0, 0, .4); stroke-width: 2.4; }
.npc .cap { fill: #d6382e; stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; } .npc .cap-sh { fill: rgba(60, 0, 20, .34); }
.npc .cap-line { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 2.2; stroke-linecap: round; } .npc .cap-hi { fill: #fff; opacity: .3; }
.npc .cap-btn { fill: #b02a24; stroke: #1b1030; stroke-width: 2.4; } .npc .capmark { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.npc .cap-brim { fill: #b02a24; stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; } .npc .cap-brim-hi { fill: #fff; opacity: .25; } .npc .cap-brim-l { fill: none; stroke: rgba(0, 0, 0, .3); stroke-width: 2.4; stroke-linecap: round; }
/* 顔の小物 */
.npc .bag { fill: #3d2a63; opacity: .5; }
.npc .scar-w { fill: none; stroke: rgba(255, 255, 255, .4); stroke-width: 7; stroke-linecap: round; } .npc .scar { fill: none; stroke: #c8384a; stroke-width: 3.6; stroke-linecap: round; } .npc .scar-x { fill: none; stroke: #c8384a; stroke-width: 2.4; stroke-linecap: round; }
.npc .bandage rect { fill: #f4dfc3; stroke: #1b1030; stroke-width: 2; } .npc .bandage path { fill: none; stroke: #c9a27a; stroke-width: 2; } .npc .bandage circle { fill: #c9a27a; }
.npc .freckles circle { fill: rgba(150, 80, 40, .55); }
.npc .lens { fill: rgba(170, 215, 255, .14); stroke: #1b1030; stroke-width: 4; stroke-linejoin: round; } .npc .gl-b { fill: none; stroke: #1b1030; stroke-width: 3.4; stroke-linecap: round; }
.npc .glare { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.npc .maskb { fill: #eef2fb; stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; } .npc .mask-f { fill: none; stroke: rgba(80, 90, 130, .5); stroke-width: 2; stroke-linecap: round; } .npc .strap { fill: none; stroke: #eef2fb; stroke-width: 2.6; }
.npc .hs-band { fill: none; stroke: #23232f; stroke-width: 9; stroke-linecap: round; } .npc .hs-pad { fill: none; stroke: #59596f; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.npc .hs-cup { fill: #2c2c3a; stroke: #1b1030; stroke-width: 3; } .npc .hs-cup-hi { fill: none; stroke: #7a7a96; stroke-width: 3; stroke-linecap: round; }
.npc .hs-mic { fill: none; stroke: #2c2c3a; stroke-width: 4.4; stroke-linecap: round; } .npc .hs-mic-b { fill: #3b3b4a; stroke: #1b1030; stroke-width: 2.4; }
.npc .bud { fill: #fff; stroke: #1b1030; stroke-width: 2; } .npc .cord2 { fill: none; stroke: #fff; stroke-width: 2.4; stroke-opacity: .9; }
.npc .pierce { fill: #dfe6f5; stroke: #1b1030; stroke-width: 1.6; }
/* 服 */
.npc .shirt-shade { fill: var(--shirt-sh); opacity: .75; } .npc .shirt-hi-f { fill: var(--shirt-hi); opacity: .4; }
.npc .skin-shade { fill: var(--skin-sh); opacity: .55; }
.npc .pec { fill: none; stroke: var(--skin-dk); stroke-width: 3; stroke-linecap: round; opacity: .6; } .npc .pec.thin { stroke-width: 2; }
.npc .fold { fill: none; stroke: rgba(20, 8, 40, .34); stroke-width: 3; stroke-linecap: round; }
.npc .hood-roll { fill: var(--shirt-sh); stroke: #1b1030; stroke-width: 3.4; stroke-linejoin: round; } .npc .hood-roll-in { fill: var(--shirt-dk); }
.npc .cord { fill: none; stroke: #efecf8; stroke-width: 3.4; stroke-linecap: round; } .npc .aglet { fill: #e8d58a; stroke: #1b1030; stroke-width: 1.8; }
.npc .shirtw { fill: #f1f3fa; stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; } .npc .shirtw-sh { fill: #b9c0d8; opacity: .6; }
.npc .lapel { fill: var(--shirt-sh); stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; } .npc .lapel-hi { fill: none; stroke: var(--shirt-hi); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.npc .collar { fill: var(--shirt-hi); stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; } .npc .collar-in { fill: rgba(0, 0, 0, .35); }
.npc .tie { fill: #c91c2c; stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; } .npc .tie-sh { fill: #7e0e1a; opacity: .5; } .npc .tie-stripe { fill: none; stroke: #ff8a95; stroke-width: 3; opacity: .7; stroke-linecap: round; }
.npc .button { fill: #cdd3ea; stroke: #1b1030; stroke-width: 1.8; }
.npc .rib { fill: none; stroke: rgba(20, 8, 40, .5); stroke-width: 7; stroke-linecap: round; }
.npc .print { fill: #fff; stroke: #1b1030; stroke-width: 3; } .npc .printstar { fill: #e3243a; stroke: #1b1030; stroke-width: 2; stroke-linejoin: round; }
.npc .collarbone { fill: none; stroke: var(--skin-dk); stroke-width: 2; stroke-linecap: round; opacity: .6; } .npc .knit { fill: none; stroke: rgba(20, 8, 40, .28); stroke-width: 3; stroke-linecap: round; }
.npc .innertee { fill: #ece9f4; stroke: #1b1030; stroke-width: 3; stroke-linejoin: round; }
.npc .zip { fill: none; stroke: #d5d0e6; stroke-width: 4; stroke-dasharray: 3 3; } .npc .zip-pull { fill: #ccc; stroke: #1b1030; stroke-width: 2; }
.npc .stripe { fill: none; stroke: #e3243a; stroke-width: 7; stroke-linecap: round; } .npc .patch { fill: #e3243a; stroke: #1b1030; stroke-width: 2.6; }
.npc .gold { fill: none; stroke: #ffcf33; stroke-width: 5; stroke-linecap: round; } .npc .gold-b { fill: #ffcf33; stroke: #1b1030; stroke-width: 2.5; } .npc .gold-s { fill: none; stroke: #1b1030; stroke-width: 2.5; }
/* 腕・手 */
.npc .limb-ol { fill: none; stroke: #1b1030; stroke-linecap: round; stroke-linejoin: round; } .npc .limb { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.npc .limb.shirtl { stroke: var(--shirt); } .npc .limb.skinl { stroke: var(--skin); }
.npc .limb-sh { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .4; } .npc .shirtl-sh { stroke: var(--shirt-sh); } .npc .skinl-sh { stroke: var(--skin-sh); }
.npc .limb-hi { fill: none; stroke: #fff; opacity: .13; stroke-linecap: round; stroke-linejoin: round; }
.npc .cuff { fill: none; stroke: var(--shirt-dk); stroke-width: 9; stroke-linecap: round; }
.npc .hand { stroke: #1b1030; stroke-width: 3.2; } .npc .fing { fill: none; stroke: rgba(27, 16, 48, .5); stroke-width: 2.4; stroke-linecap: round; }
.npc .snack { fill: #f2c23b; stroke: #1b1030; stroke-width: 2; stroke-linejoin: round; }
/* 部屋・机 */
.npc .curt { fill: #2a1d44; stroke: #0d0820; stroke-width: 3; } .npc.room-goth .curt { fill: #3a2a66; }
.npc .frame { fill: #3a2a50; stroke: #0d0820; stroke-width: 3.5; } .npc .shelf { fill: #3b3350; stroke: #0d0820; stroke-width: 3; } .npc .shelf-l { fill: none; stroke: #0d0820; stroke-width: 3; }
.npc .crack { fill: none; stroke: #0d0508; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .npc .glove { fill: #e3243a; stroke: #0d0820; stroke-width: 3; stroke-linejoin: round; }
.npc .lamp { fill: #3b3350; stroke: #0d0820; stroke-width: 3; } .npc .wire { fill: none; stroke: #1a1030; stroke-width: 3; }
.npc .cup { fill: #f4f0e4; } .npc .cup-l { fill: none; stroke: #e3243a; stroke-width: 5; }
.npc .steam { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 4; stroke-linecap: round; animation: steam 2.6s ease-in-out infinite; }
@keyframes steam { 0%, 100% { opacity: .2; transform: translateY(4px); } 50% { opacity: .75; transform: translateY(-5px); } }
.npc .deskb { fill: #2e3254; } .npc .mouse { fill: #454b7a; }
.npc .rgbline { animation: rgbhue 4s linear infinite; } @keyframes rgbhue { to { filter: hue-rotate(360deg); } }
.npc .hand-g { transform-box: fill-box; }

/* ===== 対戦画面の配置 ===== */
#screen-game { display: grid; gap: 12px; padding: 10px 14px 14px; grid-template-columns: minmax(0, 1.3fr) minmax(360px, .95fr); grid-template-rows: var(--hud-h) minmax(0, 1fr) var(--hand-h); grid-template-areas: "hud hud" "arena log" "hand hand"; }
#hud { grid-area: hud; } #arena { grid-area: arena; } #log { grid-area: log; } #hand-area { grid-area: hand; }
@media (max-width: 860px) {
  #screen-game { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--hud-h) 34dvh minmax(0, 1fr) var(--hand-h); grid-template-areas: "hud" "arena" "log" "hand"; gap: 8px; padding: 8px 8px 10px; }
  #npc-wrap { height: calc(100% - 96px); top: 8px; } .t-npc { height: calc(100% - 78px); top: 8px; }
  .plate { left: 8px; right: 8px; bottom: 8px; padding: 5px 10px 8px; } .plate-name b { font-size: 17px; } .plate-name small { display: none; }
  .hp { height: 24px; margin-top: 4px; }
  .combo b { font-size: 56px; -webkit-text-stroke-width: 7px; } .combo span { font-size: 16px; }
  .tell { top: 8px; right: 8px; padding: 5px 10px; font-size: 14px; } #typo-bubble { width: 64px; height: 64px; top: 56px; right: 8px; } #typo-bubble span { font-size: 24px; }
}

/* ===== HUD ===== */
#hud { z-index: 4; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--navy); color: #fff; border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
.who { display: flex; align-items: center; gap: 8px; font: 900 16px var(--sans); flex: none; }
.who b { white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.av-big { width: 54px; height: 54px; }
.who-me .av { background: #bfe0ff; } .who-npc .av { background: #ffd0d4; }
.tug { position: relative; flex: 1; min-width: 0; height: 36px; border: var(--bw) solid var(--ink); border-radius: 12px; overflow: hidden; background: linear-gradient(#ff8a7a, var(--red)); }
.tug-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(#7cc6ff, var(--blue)); border-right: 4px solid var(--ink); transition: width .22s ease-out; }
.tug-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 2px dashed rgba(255, 255, 255, .75); }
.tug-n { position: absolute; top: 50%; transform: translateY(-50%); font: 900 22px var(--sans); font-variant-numeric: tabular-nums; color: #fff; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
.tug-n-me { left: 12px; } .tug-n-npc { right: 12px; }
.tug-cap { display: none; }
.tug.hit-me, .tug.hit-npc { animation: hpshake .3s linear; }
.hud-btns { display: flex; gap: 8px; flex: none; }
@media (max-width: 860px) {
  #hud { gap: 6px; padding: 4px 8px; } .av-big { width: 42px; height: 42px; } .who b { display: none; } .icon-btn { width: 38px; height: 38px; } .tug { height: 32px; } .tug-n { font-size: 18px; }
}

/* ===== ログ(チャット風。相手=左・赤 / 自分=右・青) ===== */
#log { z-index: 4; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.log-head { padding: 7px 14px; background: var(--ink); color: var(--yellow-2); font: 900 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.posts { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--lilac) transparent; }
.sysmsg { align-self: center; padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--lilac); font: 700 13px var(--sans); text-align: center; }
.msg { display: flex; align-items: flex-end; gap: 9px; animation: msgin .2s cubic-bezier(.3, 1.5, .5, 1); }
.msg .av { width: 48px; height: 48px; background: #ffd0d4; }
.msg-me { flex-direction: row-reverse; } .msg-me .av { background: #bfe0ff; }
.msg .col { position: relative; min-width: 0; max-width: calc(100% - 66px); }
.msg-me .col { display: flex; flex-direction: column; align-items: flex-end; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; font: 800 12px var(--sans); }
.msg-me .meta { flex-direction: row-reverse; }
.who-tag { padding: 1px 10px 2px; border-radius: 999px; border: 2px solid var(--ink); color: #fff; font: 900 13px var(--sans); }
.msg-npc .who-tag { background: var(--red); } .msg-me .who-tag { background: var(--blue); } .msg-npc.alt .who-tag { background: #e0309c; }
.no { color: var(--lilac); font-weight: 700; }
.chip { padding: 1px 9px 2px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 900 12px var(--sans); }
.chip.t-long { background: #2d7cff; color: #fff; } .chip.t-emotion { background: var(--red); color: #fff; } .chip.t-boomerang { background: #8a3df0; color: #fff; }
.chip.t-dodge { background: #14a5a0; color: #fff; } .chip.t-spam { background: #ff8a1f; } .chip.t-self { background: #e0309c; color: #fff; }
.tg { display: none; padding: 1px 9px 2px; border-radius: 999px; background: var(--yellow-2); color: var(--ink); border: 2px solid var(--ink); font: 900 12px var(--sans); }
.msg.target .tg { display: inline-block; animation: tellpulse .3s ease-in-out infinite alternate; }
.bub { position: relative; padding: 10px 14px; border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); font: 800 17px/1.5 var(--sans); word-break: break-all; }
.msg-npc .bub { background: #fff; color: var(--ink); border-bottom-left-radius: 4px; }
.msg-me .bub { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.anc { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 7px; background: rgba(13, 8, 32, .14); font: 900 14px var(--sans); }
.msg-me .anc { background: rgba(255, 255, 255, .25); }
.msg.target .bub { outline: 4px solid var(--yellow-2); outline-offset: 2px; }
.typo-mark { color: #ffe14d; text-decoration: underline wavy var(--red-2); text-underline-offset: 4px; }
.msg-npc .typo-mark { color: var(--red); }

/* 種類ごとの見た目(書き方でも見分けられる) */
.pt-long .bub { font-size: 14px; line-height: 1.45; border-width: 4px; border-radius: 6px 16px 16px 4px; background: #eef4ff; }
.pt-emotion .bub { background: #ffe0e3; color: #c4001a; font-size: 19px; font-weight: 900; animation: emoshake .1s linear infinite; }
.pt-boomerang .bub { background: #f2e8ff; color: #5a14a8; text-decoration: underline wavy #8a3df0; text-underline-offset: 5px; }
.pt-dodge .bub { background: #e8f4f3; color: #2f5d5a; font-style: italic; transform: skewX(-9deg); }
.pt-spam .bub { background: #fff0d6; color: #b34a00; font-size: 25px; font-weight: 900; padding: 6px 14px; }
.pt-self .bub { background: #ffe0f4; color: #8a0059; }
.msg.jab .bub { background: #ffe9a8; color: var(--ink); }
@keyframes emoshake { 0% { transform: translate(-1.5px, 0); } 100% { transform: translate(1.5px, 1px); } }
@keyframes msgin { from { transform: translateY(14px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.tmr { height: 10px; margin-top: 6px; border: 2px solid var(--ink); border-radius: 6px; background: rgba(13, 8, 32, .5); overflow: hidden; }
.tmr i { display: block; height: 100%; width: 100%; background: #35d07f; transform-origin: left; }
.msg.urgent .tmr i { background: var(--red-2); } .msg.urgent .tmr { animation: hpshake .25s linear infinite; }
.msg.done .tmr { display: none; }
.msg.ignored .bub { filter: grayscale(1); opacity: .65; }
.msg.ignored .col::after { content: "スルー"; position: absolute; right: -4px; top: 14px; padding: 1px 10px; border: 3px solid var(--ink); border-radius: 8px; background: #7b849e; color: #fff; font: 900 15px var(--sans); transform: rotate(8deg); }
.stamp { padding: 1px 11px 2px; border: 3px solid var(--ink); border-radius: 8px; color: #fff; font: 900 15px var(--sans); transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--ink); }
.stamp.crit { background: var(--red); font-size: 17px; } .stamp.backfire, .stamp.parry, .stamp.chase { background: #7b849e; } .stamp.combo { background: var(--yellow-2); color: var(--ink); } .stamp.quick { background: #ff8a00; }

#typing-row { display: flex; padding: 4px 12px 10px; animation: none; }
.ghost .bub { display: flex; gap: 6px; padding: 14px 18px; background: #fff; }
.ghost .bub i { width: 10px; height: 10px; border-radius: 50%; background: #9a93c9; animation: bounce .9s ease-in-out infinite; }
.ghost .bub i:nth-child(2) { animation-delay: .15s; } .ghost .bub i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); background: var(--red); } }

.compose { border-top: var(--bw) solid var(--ink); background: #1c1442; padding: 8px 12px 12px; }
.compose-lbl { font: 900 13px var(--sans); color: var(--yellow-2); } .compose-lbl small { margin-left: 8px; color: var(--lilac); font-weight: 700; }
.compose-line { margin-top: 6px; min-height: 52px; padding: 9px 14px; background: #fff; border: var(--bw) solid var(--ink); border-radius: 12px; font: 800 24px/1.35 var(--mono); letter-spacing: .03em; color: var(--ink); word-break: break-all; }
.compose-line .typed b { color: var(--red); background: #ffd7d7; border-radius: 3px; }
.compose-line .rest { color: #a8a3c8; }
.compose-line .caret { display: inline-block; width: 3px; height: 1.1em; background: var(--ink); vertical-align: -4px; animation: blink 1s steps(1) infinite; }
.compose-line.shake { animation: hpshake .3s linear; }
.compose-line.ready { outline: 5px solid #39e08a; }
@keyframes blink { 50% { opacity: 0; } }

/* ===== 手札 ===== */
#hand-area { z-index: 4; }
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; height: 100%; padding-top: 8px; }
.card { --c: #9aa0b8; position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); overflow: hidden; transition: transform .1s, box-shadow .1s; }
.card[data-cat="long"] { --c: #2d7cff; } .card[data-cat="emotion"] { --c: #e3243a; } .card[data-cat="boomerang"] { --c: #8a3df0; }
.card[data-cat="dodge"] { --c: #14a5a0; } .card[data-cat="spam"] { --c: #ff8a1f; } .card[data-cat="self"] { --c: #e0309c; }
.card[data-cat="safe"] { --c: #7b849e; } .card[data-cat="low"] { --c: #c4001a; } .card[data-cat="multi"] { --c: #d99a00; } .card[data-cat="none"] { --c: #cfc9ee; }
.card .band { display: block; padding: 4px 10px 4px 46px; background: var(--c); color: #fff; font: 900 13px/1.3 var(--sans); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 26px; border-bottom: var(--bw) solid var(--ink); }
.card .key { position: absolute; left: 6px; top: 4px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; border: 2px solid #fff; font: 900 17px var(--sans); }
.card-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 12px 30px; background: none; border: 0; text-align: left; font: 900 18px/1.3 var(--sans); color: var(--ink); }
.card-main:hover:not(:disabled) { background: #fff6c2; }
/* 押す前後で当たり判定が動かないよう、ホバーでは動かさず、影と明るさで反応を見せる */
.card:hover:not(.empty):not(.dim):not(.rec) { box-shadow: 0 6px 0 var(--ink), 0 0 0 3px rgba(255, 255, 255, .75); filter: brightness(1.04); cursor: pointer; }
/* 押している間も、カード自体は動かさない(動くと、上端を押した指が外れて、押せなくなる)。中身だけ沈ませる */
.card:active:not(.empty) { box-shadow: 0 1px 0 var(--ink), 0 0 0 3px var(--yellow-2); filter: brightness(.97); }
.card:active:not(.empty) .card-main { transform: translateY(2px); }
.card .read { font: 700 11px var(--sans); color: #6a6490; } .card .read b { color: var(--green); }
.card .rl { position: absolute; right: 7px; bottom: 6px; padding: 2px 10px 3px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow-2); color: var(--ink); font: 900 12px var(--sans); box-shadow: 0 2px 0 var(--ink); }
.card .rl:hover { background: #fff; }
.card.rec { box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--yellow-2); animation: recglow .5s ease-in-out infinite alternate; cursor: pointer; }
@keyframes recglow { from { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--yellow-2); } to { box-shadow: 0 5px 0 var(--ink), 0 0 0 8px #fff27a; } }
@keyframes recpulse { from { transform: translateY(-4px); } to { transform: translateY(-10px); } }
.card.empty { background: rgba(255, 255, 255, .1); border-style: dashed; border-color: rgba(255, 255, 255, .5); box-shadow: none; color: #fff; }
.card.empty .band, .card.empty .key, .card.empty .rl, .card.empty .read { display: none; }
.card.empty .card-main { align-items: center; justify-content: center; padding: 6px; font-size: 15px; color: var(--lilac); cursor: default; }
.card.empty .load { position: absolute; left: 0; bottom: 0; height: 7px; background: var(--yellow-2); width: calc(var(--load, 0) * 100%); }
/* 新しいカードは、位置や大きさを動かさず、光って現れる(下から上がる動きだと、出現の直後に上部を押しても、そこにカードがなく、押せなかった) */
.card.fresh { animation: cardnew .3s ease-out; }
@keyframes cardnew { from { filter: brightness(1.9); box-shadow: 0 5px 0 var(--ink), 0 0 0 8px #fff; } to { filter: none; box-shadow: 0 5px 0 var(--ink), 0 0 0 0 #fff; } }
.card.cand { transform: translateY(-9px); box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--blue-2); }
.card.dim { opacity: .45; filter: grayscale(.5); }
.card.done { box-shadow: 0 5px 0 var(--ink), 0 0 0 6px #39e08a; }
@media (max-width: 860px) {
  .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px 8px; padding-top: 0; }
  .card .band { font-size: 11px; padding: 2px 8px 2px 40px; min-height: 22px; } .card .key { width: 26px; height: 26px; font-size: 15px; }
  .card .band { padding-right: 36px; }
  .card-main { font-size: 13px; line-height: 1.25; padding: 3px 8px 5px; }
  .card .rl { right: 4px; top: 2px; bottom: auto; width: 28px; height: 22px; padding: 0; font-size: 0; box-shadow: none; display: grid; place-items: center; }
  .card .rl::before { content: "↻"; font-size: 16px; line-height: 1; }
  .card .read { display: none; }
  .card:hover:not(.empty):not(.dim), .card.rec, .card.cand { transform: none; animation: none; }
  .posts { padding: 10px 8px 6px; gap: 12px; } .bub { font-size: 15px; padding: 8px 11px; } .msg .av { width: 40px; height: 40px; } .msg .col { max-width: calc(100% - 54px); }
  .pt-spam .bub { font-size: 21px; } .pt-emotion .bub { font-size: 16px; } .pt-long .bub { font-size: 13px; }
  .compose-line { font-size: 20px; min-height: 44px; }
}
@media (max-height: 640px) and (min-width: 861px) { .card-main { font-size: 15px; padding-bottom: 28px; } .card .read { display: none; } }

/* ===== リアルモード: 言葉の一覧(手札の代わり) ===== */
#app[data-mode="real"] { --hand-h: 200px; }
.book { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px 7px; height: 100%; padding: 8px 10px; overflow-y: auto; background: var(--navy); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); scrollbar-width: thin; scrollbar-color: var(--lilac) transparent; }
.bk-legend { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-bottom: 5px; border-bottom: 2px dashed rgba(255, 255, 255, .25); }
.bk-lg-t { font: 900 12px var(--sans); color: var(--yellow-2); margin-right: 2px; }
.bk-lg { display: inline-flex; align-items: center; gap: 4px; font: 800 12px var(--sans); color: #fff; }
.bk-lg::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--ink); background: var(--c, #cfc9ee); }
.bk, .bk-lg { --c: #cfc9ee; }
[data-cat="long"] { --c: #2d7cff; } [data-cat="emotion"] { --c: #e3243a; } [data-cat="boomerang"] { --c: #8a3df0; } [data-cat="dodge"] { --c: #14a5a0; }
[data-cat="spam"] { --c: #ff8a1f; } [data-cat="self"] { --c: #e0309c; } [data-cat="safe"] { --c: #7b849e; } [data-cat="low"] { --c: #c4001a; }
[data-cat="multi"] { --c: #d99a00; } [data-cat="wait"] { --c: #12a36a; } [data-cat="none"] { --c: #cfc9ee; }
.bk { position: relative; padding: 4px 10px 5px 14px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 9px; box-shadow: 0 3px 0 var(--ink); font: 900 14px/1.25 var(--sans); white-space: nowrap; transition: transform .08s, opacity .12s; cursor: default; }
.bk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--c); border-radius: 6px 0 0 6px; }
.bk.rec { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--yellow-2); animation: recpulse .45s ease-in-out infinite alternate; }
.bk.cand { transform: translateY(-3px); box-shadow: 0 3px 0 var(--ink), 0 0 0 4px var(--blue-2); }
.bk.dim { opacity: .35; }
.bk.done { box-shadow: 0 3px 0 var(--ink), 0 0 0 4px #39e08a; background: #e8ffef; }
@media (max-width: 860px) { .bk { font-size: 12.5px; padding: 3px 8px 4px 12px; white-space: normal; } .bk.rec, .bk.cand { animation: none; transform: none; } }

/* ===== 演出 ===== */
#danmaku { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.dm { position: absolute; left: 100%; white-space: nowrap; font-family: var(--sans); font-weight: 900; color: #fff; will-change: transform; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink); animation: dmfly var(--dur, 6s) linear forwards; }
.dm.big { color: #fff27a; } .dm.me-c { color: #8fe0ff; } .dm.bad { color: #ff9aa5; } .dm.huge { color: #ff9ae8; }
@keyframes dmfly { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 110%)); } }
#fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
#flash { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; }
#flash.on-crit { animation: flashcrit .3s ease-out; background: radial-gradient(circle at 35% 45%, rgba(255, 255, 255, .8), rgba(255, 220, 90, .3) 55%, transparent 80%); }
#flash.on-bad { animation: flashcrit .45s ease-out; background: radial-gradient(circle, transparent 35%, rgba(60, 120, 255, .55) 100%); }
#flash.on-hit { animation: flashcrit .45s ease-out; background: radial-gradient(circle, transparent 35%, rgba(255, 50, 70, .6) 100%); }
@keyframes flashcrit { 0% { opacity: 1; } 100% { opacity: 0; } }
#app.shake-s { animation: appshake .24s linear; } #app.shake-l { animation: appshakeL .42s linear; }
@keyframes appshake { 0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } 100% { transform: none; } }
@keyframes appshakeL { 0% { transform: translate(0, 0); } 10% { transform: translate(-16px, 8px) rotate(-.5deg); } 25% { transform: translate(14px, -10px) rotate(.4deg); } 40% { transform: translate(-10px, 6px); } 55% { transform: translate(8px, -4px); } 75% { transform: translate(-4px, 2px); } 100% { transform: none; } }

/* 飛んでいくカードの文字 */
.shot { position: absolute; left: 0; top: 0; padding: 9px 18px; background: var(--blue); color: #fff; border: var(--bw) solid var(--ink); border-radius: 16px; font: 900 22px var(--sans); white-space: nowrap; box-shadow: 4px 4px 0 var(--ink); will-change: transform; }
.shot.bad { background: #7b849e; } .shot.foe { background: var(--red); }   /* 相手が飛ばすレス。(.npc は、キャラの SVG の名前なので使わない) */
.shot::before { content: ""; position: absolute; right: 100%; top: 50%; width: 90px; height: 16px; margin-top: -8px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85)); border-radius: 8px; z-index: -1; }
/* 着弾 */
.burst, .rays, .ring { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); pointer-events: none; }
.burst { background: radial-gradient(circle, #fff 0 20%, #ffe14d 21% 46%, #ff5a2a 47% 70%, transparent 71%); clip-path: polygon(50% 0, 60% 18%, 80% 6%, 78% 28%, 100% 30%, 86% 48%, 100% 66%, 78% 70%, 86% 92%, 62% 82%, 50% 100%, 38% 82%, 14% 92%, 22% 70%, 0 66%, 14% 48%, 0 30%, 22% 28%, 20% 6%, 40% 18%); animation: burst .55s ease-out forwards; }
.burst.bad { background: radial-gradient(circle, #fff 0 25%, #c9d0e8 26% 55%, #7b849e 56% 70%, transparent 71%); }
.burst.red { background: radial-gradient(circle, #fff 0 20%, #ff9aa5 21% 46%, #e3243a 47% 70%, transparent 71%); }
.rays { background: repeating-conic-gradient(from 0deg, #fff 0 3deg, transparent 3deg 13deg); -webkit-mask-image: radial-gradient(circle, transparent 14%, #000 26%, transparent 68%); mask-image: radial-gradient(circle, transparent 14%, #000 26%, transparent 68%); animation: rays .5s ease-out forwards; }
.ring { border: 10px solid #fff; border-radius: 50%; animation: ring .5s ease-out forwards; }
@keyframes burst { 0% { transform: scale(.2) rotate(-14deg); opacity: 1; } 28% { transform: scale(1.1) rotate(5deg); } 100% { transform: scale(1.45) rotate(12deg); opacity: 0; } }
@keyframes rays { 0% { transform: scale(.3) rotate(0); opacity: 1; } 100% { transform: scale(1.5) rotate(18deg); opacity: 0; } }
@keyframes ring { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; border-width: 2px; } }
.slash { position: absolute; width: var(--len); height: 18px; margin: -9px 0 0 calc(var(--len) / -2); background: #fff; clip-path: polygon(0 50%, 10% 0, 100% 38%, 100% 62%, 10% 100%); filter: drop-shadow(0 0 6px #fff); animation: slash .3s ease-out forwards; }
@keyframes slash { 0% { transform: rotate(var(--r)) scaleX(0); opacity: 1; } 55% { transform: rotate(var(--r)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--r)) scaleX(1.08); opacity: 0; } }
/* ダメージ数字・吹き出し */
.dmg { position: absolute; transform: translate(-50%, -50%); font: 900 var(--fs) / 1 var(--sans); font-style: italic; color: #fff; -webkit-text-stroke: calc(var(--fs) * .14) var(--ink); paint-order: stroke fill; text-shadow: calc(var(--fs) * .07) calc(var(--fs) * .07) 0 var(--red); text-align: center; white-space: nowrap; animation: dmgpop 1.1s cubic-bezier(.2, .9, .3, 1) forwards; }
.dmg.me { text-shadow: calc(var(--fs) * .07) calc(var(--fs) * .07) 0 var(--blue); }
.dmg small { display: block; margin-top: .1em; font-size: .36em; -webkit-text-stroke-width: calc(var(--fs) * .06); text-shadow: none; color: var(--yellow-2); letter-spacing: .04em; }
@keyframes dmgpop { 0% { transform: translate(-50%, -30%) scale(.2) rotate(-12deg); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1.4) rotate(-5deg); opacity: 1; } 28% { transform: translate(-50%, -52%) scale(1) rotate(-3deg); } 72% { opacity: 1; transform: translate(-50%, -80%) scale(1) rotate(-3deg); } 100% { opacity: 0; transform: translate(-50%, -125%) scale(.9) rotate(-3deg); } }
.callout { position: absolute; transform: translate(-50%, -50%) rotate(-8deg); padding: 2px 20px 5px; background: var(--red); color: #fff; border: 4px solid var(--ink); font: 900 var(--fs) / 1.1 var(--sans); font-style: italic; letter-spacing: .06em; box-shadow: 6px 6px 0 var(--ink); animation: calloutpop 1s cubic-bezier(.2, 1.4, .3, 1) forwards; white-space: nowrap; }
.callout.gold { background: var(--yellow-2); color: var(--ink); } .callout.gray { background: #7b849e; } .callout.blue { background: var(--blue); }
@keyframes calloutpop { 0% { transform: translate(-50%, -50%) rotate(-8deg) scale(2.6); opacity: 0; } 18% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; } 78% { transform: translate(-50%, -56%) rotate(-8deg) scale(1); opacity: 1; } 100% { transform: translate(-50%, -70%) rotate(-8deg) scale(.9); opacity: 0; } }

#toast { position: absolute; left: 50%; top: calc(var(--hud-h) + 26px); transform: translateX(-50%); z-index: 12; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: 92vw; }
.toast { padding: 5px 16px 6px; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); font: 900 15px/1.35 var(--sans); animation: toastin .25s cubic-bezier(.3, 1.6, .5, 1), toastout .3s 1.9s ease-in forwards; }
.toast.good { background: #c6f7da; } .toast.bad { background: #ffd0d4; }
@keyframes toastin { from { transform: translateY(-14px) scale(.8); opacity: 0; } } @keyframes toastout { to { opacity: 0; transform: translateY(-8px); } }

#countdown { position: absolute; inset: 0; z-index: 14; display: grid; place-content: center; text-align: center; background: rgba(13, 8, 32, .62); color: #fff; font-family: var(--sans); }
#countdown .cd-n { font-size: clamp(110px, 24vw, 250px); font-weight: 900; font-style: italic; line-height: 1; -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; text-shadow: 9px 9px 0 var(--red); animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
#countdown .cd-s { margin-top: 14px; padding: 0 24px; font-size: clamp(15px, 2.4vw, 22px); font-weight: 800; color: #fff; }

/* 論破カットイン / 敗北のAA */
#cutin { position: absolute; inset: 0; z-index: 15; pointer-events: none; display: none; }
#cutin.on { display: block; }
.cut-dm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cut-win { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .4), rgba(227, 36, 58, .4) 60%, rgba(13, 8, 32, .6) 100%); animation: fadein .12s; overflow: hidden; }
.cut-band { position: absolute; left: -14%; right: -14%; top: 8%; height: 84%; transform: skewY(-7deg); background: linear-gradient(90deg, rgba(161, 12, 24, .72), rgba(227, 36, 58, .72) 40%, rgba(255, 138, 0, .72)); border-top: 16px solid #fff; border-bottom: 16px solid #fff; animation: bandin .2s cubic-bezier(.2, 1.4, .4, 1); }
.cut-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 54px, rgba(255, 255, 255, .14) 54px 58px); }
.cut-text { position: absolute; left: 0; right: 0; top: 47%; transform: translateY(-50%) rotate(-3deg); text-align: center; font: 900 min(31vw, 70vh) / 1 var(--sans); font-style: italic; color: #fff; letter-spacing: -.02em; -webkit-text-stroke: min(2vw, 26px) var(--ink); paint-order: stroke fill; text-shadow: min(1.8vw, 24px) min(1.8vw, 24px) 0 var(--ink), min(3.4vw, 46px) min(3.4vw, 46px) 0 var(--red); animation: textslam .4s cubic-bezier(.2, 1.7, .4, 1) .05s both, textpulse .5s ease-in-out .5s infinite alternate; white-space: nowrap; }
.cut-sub { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font: 900 clamp(20px, 4vw, 44px) var(--sans); color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; animation: fadein .3s .35s both; z-index: 2; }
@keyframes textpulse { from { scale: 1; } to { scale: 1.05; } }
@keyframes bandin { from { transform: skewY(-7deg) scaleX(0); } }
@keyframes textslam { from { transform: translateY(-50%) rotate(-3deg) scale(5); opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
.cut-lose { position: absolute; inset: 0; overflow: hidden; background: rgba(13, 8, 32, .84); animation: fadein .3s; }
.aa { position: absolute; white-space: pre; font-family: "IPAMonaPGothic", "Mona", "MS PGothic", "Noto Sans JP", "IPAexGothic", sans-serif; font-weight: bold; color: #fff; line-height: 1.05; animation: aawiggle var(--w, .35s) ease-in-out infinite alternate; }
.aa.main { left: 50%; top: 42%; font-size: clamp(30px, 8vw, 84px); transform: translate(-50%, -50%); text-align: center; color: var(--yellow-2); text-shadow: 4px 4px 0 #000; animation: aamain .22s ease-in-out infinite alternate; }
.aa.sub { color: #fff; opacity: .85; text-shadow: 2px 2px 0 #000; }
.cut-lose .cut-lbl { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; font: 900 clamp(24px, 5vw, 48px) var(--sans); color: var(--red-2); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; animation: fadein .4s .4s both; }
@keyframes aawiggle { from { transform: translate(0, 0) rotate(-4deg) scale(.95); } to { transform: translate(var(--dx, 8px), var(--dy, -10px)) rotate(4deg) scale(1.08); } }
@keyframes aamain { from { transform: translate(-50%, -50%) rotate(-5deg) scale(.95); } to { transform: translate(-50%, -52%) rotate(5deg) scale(1.12); } }

/* ===== タイトル ===== */
#screen-title { display: grid; gap: 16px; padding: 14px 20px 18px; grid-template-columns: minmax(0, 1fr) minmax(400px, 500px); }
.t-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.logo { margin: 0; padding: 4px 8px 0; line-height: .95; transform: rotate(-2deg); }
.logo span { display: inline-block; font: 900 clamp(46px, 7.4vw, 96px) / 1 var(--sans); font-style: italic; -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; }
.logo .l1 { color: var(--yellow-2); text-shadow: 6px 6px 0 var(--red); margin-right: .1em; }
.logo .l2 { color: #fff; text-shadow: 6px 6px 0 var(--blue); }
.t-arena { flex: 1; min-height: 0; }
.t-plate .t-intro { margin: 5px 0 0; font: 700 14px/1.5 var(--sans); color: #fff; }
.t-right { display: flex; flex-direction: column; min-height: 0; z-index: 2; }
.stage-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--lilac) transparent; }
.stage { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; width: 100%; padding: 8px 12px 8px 10px; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); text-align: left; transition: transform .08s; flex: none; }
.stage .av { width: 54px; height: 54px; background: #ffd0d4; grid-row: 1 / span 2; }
.stage .sn { font: 900 18px/1.2 var(--sans); } .stage .ss { font: 700 12.5px/1.3 var(--sans); color: #5a5380; }
.stage .sr { grid-row: 1 / span 2; grid-column: 3; text-align: center; min-width: 4.4em; }
.stage .sr b { display: block; font: 900 28px/1 var(--sans); font-style: italic; color: var(--red); } .stage .sr b.none { color: #b9b2d6; font-size: 18px; }
.stage .stars { display: block; font-size: 12px; color: #d99a00; letter-spacing: .08em; }
.stage:hover { transform: translateX(-4px); }
.stage[aria-selected="true"] { background: var(--yellow-2); transform: translateX(-8px); box-shadow: 0 4px 0 var(--ink), -6px 0 0 var(--red); }
.stage[aria-selected="true"] .sn::before { content: "▶ "; color: var(--red); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 12px 0; padding: 0; border: 0; }
.modes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mode { display: flex; padding: 9px 12px; background: var(--navy-2); color: #fff; border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); cursor: pointer; transition: transform .08s; }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode b { display: block; font: 900 16px var(--sans); } .mode small { display: block; margin-top: 1px; font: 700 12px/1.3 var(--sans); color: var(--lilac); }
.mode:has(input:checked) { background: var(--blue); box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--yellow-2); transform: translateY(-2px); } .mode:has(input:checked) small { color: #fff; }
.mode:has(input:focus-visible) { outline: 4px solid var(--yellow-2); outline-offset: 2px; }
.mode:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.t-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 12px 16px; }
.chk { display: flex; align-items: center; gap: 7px; font: 800 14px var(--sans); cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--yellow-2); }
.t-btns .btn-sub { margin-left: auto; } .t-btns .btn-sub + .btn-sub { margin-left: 0; }
@media (max-width: 860px) {
  #screen-title { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 8px 10px 12px; overflow-y: auto; }
  .t-left { flex-direction: row; align-items: stretch; gap: 8px; }
  .logo { flex: none; align-self: center; } .logo span { display: block; font-size: 34px; -webkit-text-stroke-width: 8px; }
  .logo .l1, .logo .l2 { text-shadow: 3px 3px 0 var(--red); margin: 0; }
  .t-arena { min-height: 128px; } .t-plate { left: 6px; right: 6px; bottom: 6px; padding: 4px 8px 6px; } .t-plate .t-intro { display: none; } .t-npc { height: calc(100% - 56px); top: 6px; }
  .stage { padding: 6px 10px 6px 8px; grid-template-columns: 44px minmax(0, 1fr) auto; } .stage .av { width: 44px; height: 44px; }
  .modes small { display: none; } .btn-main { font-size: 20px; padding: 11px 22px; }
}

/* ===== 結果 ===== */
#screen-result { position: absolute; inset: 0; z-index: 13; display: grid; place-items: center; padding: 12px; background: rgba(13, 8, 32, .62); animation: fadein .3s; }
.result-win { width: min(560px, 96vw); max-height: 94dvh; overflow: auto; }
.result-body { padding: 18px 18px 20px; display: grid; gap: 14px; }
.result-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.rank { display: grid; place-items: center; width: clamp(96px, 24vw, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--yellow-2); color: var(--red); border: 5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); font: 900 clamp(64px, 17vw, 92px) / 1 var(--sans); font-style: italic; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 #ff8a00; animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.rank.lose { background: #7b849e; color: #fff; text-shadow: 3px 3px 0 var(--ink); font-size: clamp(44px, 12vw, 62px); }
.result-head h2 { margin: 0 0 4px; font: 900 clamp(26px, 6vw, 36px) / 1.15 var(--sans); }
.result-head p { margin: 0; font: 700 15px/1.5 var(--sans); color: var(--lilac); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--navy-2); border: var(--bw) solid var(--ink); border-radius: 10px; font: 700 14px var(--sans); }
.stats b { font: 900 20px var(--sans); font-variant-numeric: tabular-nums; }
.newrec { color: var(--yellow-2); font: 900 12px var(--sans); }
.result-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.result-btns .btn-main { font-size: 19px; }


/* ===== 必死度(連発しすぎると反撃される) ===== */
.rush { position: relative; height: 18px; margin-top: 6px; background: var(--navy-2); border: var(--bw) solid var(--ink); border-radius: 9px; overflow: hidden; }
.rush i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #7be0a0, var(--yellow-2) 62%, var(--red-2)); transition: width .12s linear; }
.rush-lbl { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 900 12px var(--sans); color: #fff; text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink); z-index: 1; white-space: nowrap; }
.rush.warn { animation: hpshake .25s linear infinite; border-color: var(--red-2); }
.rush.finish { border-color: var(--yellow-2); box-shadow: 0 0 0 3px rgba(255, 225, 77, .55); }
.rush.finish .rush-lbl { color: var(--yellow-2); }
.wait-lbl { margin: 4px 0 0 4px; font: 900 13px var(--sans); color: var(--lilac); }
.wait-lbl.hot { color: var(--yellow-2); }
.card[data-cat="wait"] { --c: #12a36a; }
.stamp.wait { background: #12a36a; } .stamp.follow { background: #2d7cff; }
.msg.answered .tmr i { background: var(--blue-2); }
.msg.answered.target .tg { background: #bfe0ff; }
.msg.jab.rush .bub { background: #ffd0d4; }
.msg.jab.punish .bub { background: #ffe0a0; border-color: var(--red); }

/* ===== 開始演出(VS → カーン! → BATTLE START!!) ===== */
#countdown.intro { display: block; background: rgba(13, 8, 32, .82); overflow: hidden; }
.vs-l, .vs-r { position: absolute; top: 0; bottom: 0; width: 58%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.vs-l { left: 0; padding-right: 8%; background: linear-gradient(135deg, #2f86ff, #0a3590); clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); animation: vsl .5s cubic-bezier(.2, 1.1, .3, 1) both; }
.vs-r { right: 0; padding-left: 8%; background: linear-gradient(315deg, #ff4a5c, #86101f); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); animation: vsr .5s cubic-bezier(.2, 1.1, .3, 1) both; }
.vs-av { width: min(36vh, 30vw); height: min(36vh, 30vw); border: 6px solid var(--ink); border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 10px 0 var(--ink); }
.vs-r .vs-av { background: #ffd0d4; } .vs-l .vs-av { background: #bfe0ff; }
.vs-av svg { display: block; width: 100%; height: 100%; }
.vs-name { font: 900 clamp(26px, 5.4vw, 60px) / 1.1 var(--sans); font-style: italic; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-align: center; }
.vs-sub { padding: 2px 16px 3px; border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow-2); color: var(--ink); font: 900 clamp(13px, 1.8vw, 20px) var(--sans); }
.vs-mid { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) rotate(-8deg); font: 900 clamp(110px, 24vw, 300px) / 1 var(--sans); font-style: italic; color: var(--yellow-2); -webkit-text-stroke: 16px var(--ink); paint-order: stroke fill; text-shadow: 10px 10px 0 var(--red); animation: vsslam .45s cubic-bezier(.2, 1.7, .4, 1) .3s both; }
.vs-intro { position: absolute; left: 0; right: 0; bottom: 5%; z-index: 2; text-align: center; padding: 0 20px; font: 900 clamp(14px, 2.2vw, 22px) / 1.5 var(--sans); color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; animation: fadein .3s .6s both; }
@keyframes vsl { from { transform: translateX(-105%); } } @keyframes vsr { from { transform: translateX(105%); } }
@keyframes vsslam { from { transform: translate(-50%, -50%) rotate(-8deg) scale(4); opacity: 0; } }
.bs { position: absolute; inset: 0; background: rgba(13, 8, 32, .55); overflow: hidden; }
.bs-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 225, 77, .5) 0 5deg, transparent 5deg 15deg); animation: spin 5s linear infinite, fadein .2s; }
.bs-ring { position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin; border: 14px solid #fff; border-radius: 50%; animation: ring .9s ease-out both; }
.bs-ring:nth-of-type(3) { animation-delay: .12s; } .bs-ring:nth-of-type(4) { animation-delay: .24s; }
.bs-text { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%) rotate(-5deg); display: flex; justify-content: center; gap: .3em; font: 900 min(10.2vw, 24vh) / 1 var(--sans); font-style: italic; color: var(--yellow-2); -webkit-text-stroke: min(1vw, 14px) var(--ink); paint-order: stroke fill; text-shadow: min(.9vw, 12px) min(.9vw, 12px) 0 var(--red); white-space: nowrap; animation: bstext .55s cubic-bezier(.2, 1.6, .4, 1) .12s both; }
@media (orientation: portrait) { .bs-text { flex-direction: column; align-items: center; gap: 0; font-size: min(22vw, 13vh); line-height: .95; } }
.bs-sub { position: absolute; left: 0; right: 0; top: 70%; text-align: center; font: 900 clamp(22px, 5vw, 56px) var(--sans); font-style: italic; color: #fff; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; letter-spacing: .3em; animation: fadein .25s .5s both; }
.bs-slash { position: absolute; left: 50%; top: 50%; width: 130vmax; height: 24px; margin: -12px 0 0 -65vmax; background: #fff; clip-path: polygon(0 50%, 6% 0, 100% 40%, 100% 60%, 6% 100%); animation: bsslash .35s ease-out both; }
.bs-slash:nth-of-type(6) { transform: rotate(-24deg); animation-delay: .05s; } .bs-slash:nth-of-type(7) { transform: rotate(28deg); animation-delay: .12s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes kan { from { transform: translateX(-50%) rotate(-6deg) scale(5); opacity: 0; } }
@keyframes kanshake { 0% { margin-left: -3px; } 100% { margin-left: 3px; } }
@keyframes bstext { from { transform: translateY(-50%) rotate(-5deg) scale(4.5); opacity: 0; letter-spacing: .5em; } }
@keyframes bsslash { 0% { opacity: 1; clip-path: polygon(0 50%, 0 50%, 0 50%, 0 50%, 0 50%); } 100% { opacity: 0; } }

/* ===== 論破(超特大) ===== */
.cut-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .3) 0 5deg, transparent 5deg 14deg); animation: spin 4s linear infinite, fadein .2s; }
.cut-ring { position: absolute; left: 50%; top: 50%; width: 40vmin; height: 40vmin; margin: -20vmin 0 0 -20vmin; border: 18px solid #fff; border-radius: 50%; animation: ring .9s ease-out both; }
.cut-ring.r2 { animation-delay: .15s; } .cut-ring.r3 { animation-delay: .3s; }
@media (orientation: portrait) {
  .cut-text { writing-mode: vertical-rl; font-size: min(46vw, 30vh); left: 50%; right: auto; width: 1.1em; transform: translate(-50%, -50%) rotate(-3deg); }
}

/* ===== 窓 ===== */
.modal-back { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 12px; background: rgba(13, 8, 32, .78); }
.modal { width: min(580px, 96vw); max-height: 92dvh; overflow: auto; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 8px 0 var(--ink); }
.modal-head { padding: 10px 18px; background: var(--yellow-2); border-bottom: var(--bw) solid var(--ink); font: 900 20px var(--sans); }
.modal-body { padding: 14px 20px 18px; font: 700 15px/1.7 var(--sans); }
.modal-body h3 { margin: 16px 0 4px; padding-left: 10px; border-left: 6px solid var(--red); font: 900 17px var(--sans); } .modal-body h3:first-child { margin-top: 0; }
.modal-body p, .modal-body ul { margin: 4px 0; } .modal-body ul { padding-left: 1.3em; }
.modal-body kbd { padding: 1px 8px; border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 6px; background: #f3efff; font: 900 13px var(--sans); }
.modal-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .npc *, .npc, .msg, .card, .combo b, .dm, #typo-bubble, .dmg, .callout, .aa, .toast, .burst, .rays, .ring, .slash, .tell, .tmr, .av { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .npc .head { transition: none; }
  #app.shake-s, #app.shake-l { animation: none; }
}

/* ======================================================================
 * 仕上げ(質感・飾り・アイコン)
 * 太い輪郭と原色という約束事は崩さず、面に「質感(ハーフトーン・内側の光と影)」と
 * 「情報(アイコン・威力・得意なレス・ランクのメダル)」を足す。飾りは静かに抑え、見せ場は NPC とダメージ演出に任せる。
 * ====================================================================== */
.ic { width: 1em; height: 1em; fill: #fff; stroke: #0d0820; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; flex: none; vertical-align: -.12em; }
.ic .l { fill: none; stroke: #0d0820; stroke-width: 2; }

/* ---- パネルの質感: ハーフトーン + 上の光 + 下の影 ---- */
.panel, #hud, #log, .plate, .book {
  background-image: radial-gradient(circle, rgba(255, 255, 255, .055) 1.4px, transparent 1.9px), linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .15));
  background-size: 14px 14px, 100% 100%;
}
.panel { box-shadow: 0 6px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .18); }
#hud { box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .18); }
#log { box-shadow: 0 6px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.plate, .book { box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.log-head { background: linear-gradient(90deg, #0d0820, #2a1d6a 70%, #0d0820); letter-spacing: .02em; }
.btn { background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%); }
.btn-main { background-image: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%); }
.icon-btn { background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%); }

/* ---- アリーナ: 舞台(スポットライト・床・隅の飾り・漂う「草」) ---- */
.arena .spot { position: absolute; left: 50%; top: -12%; width: 78%; height: 124%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 68%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: .5; animation: spotsway 7s ease-in-out infinite alternate; }
@keyframes spotsway { from { transform: translateX(-52%) skewX(-2deg); } to { transform: translateX(-48%) skewX(2deg); } }
.arena .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, rgba(190, 90, 0, 0), rgba(190, 90, 0, .42)), repeating-linear-gradient(90deg, rgba(13, 8, 32, .09) 0 3px, transparent 3px 52px); }
.arena::after { content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 5; border-radius: 10px;
  background:
    linear-gradient(#0d0820, #0d0820) 0 0 / 22px 4px no-repeat, linear-gradient(#0d0820, #0d0820) 0 0 / 4px 22px no-repeat,
    linear-gradient(#0d0820, #0d0820) 100% 0 / 22px 4px no-repeat, linear-gradient(#0d0820, #0d0820) 100% 0 / 4px 22px no-repeat,
    linear-gradient(#0d0820, #0d0820) 0 100% / 22px 4px no-repeat, linear-gradient(#0d0820, #0d0820) 0 100% / 4px 22px no-repeat,
    linear-gradient(#0d0820, #0d0820) 100% 100% / 22px 4px no-repeat, linear-gradient(#0d0820, #0d0820) 100% 100% / 4px 22px no-repeat; }
.bgfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bgfx span { position: absolute; bottom: -50px; left: var(--x, 10%); font: 900 var(--fs, 30px) / 1 var(--sans); color: rgba(255, 255, 255, .6); -webkit-text-stroke: 3px rgba(190, 90, 0, .4); paint-order: stroke fill; animation: drift var(--d, 14s) linear infinite; animation-delay: var(--dl, 0s); }
.bgfx span:nth-child(1) { --x: 4%; --d: 15s; --fs: 34px; } .bgfx span:nth-child(2) { --x: 14%; --d: 11s; --dl: -4s; --fs: 24px; } .bgfx span:nth-child(3) { --x: 24%; --d: 17s; --dl: -9s; --fs: 30px; }
.bgfx span:nth-child(4) { --x: 70%; --d: 13s; --dl: -2s; --fs: 28px; } .bgfx span:nth-child(5) { --x: 80%; --d: 16s; --dl: -7s; --fs: 36px; } .bgfx span:nth-child(6) { --x: 90%; --d: 12s; --dl: -10s; --fs: 22px; }
.bgfx span:nth-child(7) { --x: 62%; --d: 18s; --dl: -5s; --fs: 26px; } .bgfx span:nth-child(8) { --x: 34%; --d: 14s; --dl: -12s; --fs: 20px; }
@keyframes drift { from { transform: translateY(0) rotate(-8deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { transform: translateY(-640px) rotate(12deg); opacity: 0; } }

/* ---- 名札: 難しさの星・得意なレス・左の赤い札 ---- */
.plate::before { content: ""; position: absolute; left: -9px; top: 12px; width: 11px; height: 30px; background: var(--red); border: var(--bw) solid var(--ink); border-radius: 5px 0 0 5px; }
.plate .stars { color: var(--yellow); font-size: 14px; letter-spacing: .1em; text-shadow: 0 1px 0 #0d0820; }
.plate-chips { margin-left: auto; display: inline-flex; gap: 5px; align-self: center; }
.pc { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 2px 4px; border: 2px solid var(--ink); border-radius: 999px; background: #7b849e; color: #fff; font: 900 12px var(--sans); }
.pc .ic { font-size: 14px; }
.pc.t-long { background: #2d7cff; } .pc.t-emotion { background: var(--red); } .pc.t-boomerang { background: #8a3df0; } .pc.t-dodge { background: #14a5a0; } .pc.t-spam { background: #ff8a1f; color: var(--ink); } .pc.t-self { background: #e0309c; }

/* ---- HUD: 支持率のゲージ(目盛り・光沢)・顔の縁 ---- */
.tug::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); }
.tug::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(13, 8, 32, .32) calc(10% - 2px) 10%); }
.tug-n { z-index: 2; } .tug-mid { z-index: 2; }
.who-me .av { box-shadow: 0 0 0 3px var(--blue-2); } .who-npc .av { box-shadow: 0 0 0 3px var(--red-2); }
.hp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); }
.hp::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), rgba(13, 8, 32, .28) calc(5% - 2px) 5%); }
.hp-lbl, .hp-num { z-index: 2; }

/* ---- ログ: 吹き出しのしっぽ・光沢・顔の縁 ---- */
.msg-npc .av { box-shadow: 0 0 0 3px var(--red); } .msg-me .av { box-shadow: 0 0 0 3px var(--blue-2); }
.bub { --bb: #fff; }
.msg-npc .bub { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(13, 8, 32, .07)); }
.msg-me .bub { --bb: var(--blue); background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 48%); }
.pt-long .bub { --bb: #eef4ff; } .pt-emotion .bub { --bb: #ffe0e3; } .pt-boomerang .bub { --bb: #f2e8ff; } .pt-dodge .bub { --bb: #e8f4f3; } .pt-spam .bub { --bb: #fff0d6; } .pt-self .bub { --bb: #ffe0f4; }
.msg.jab .bub { --bb: #ffe9a8; } .msg.jab.rush .bub { --bb: #ffd0d4; } .msg.jab.punish .bub { --bb: #ffe0a0; }
.msg-npc .bub::before, .msg-me .bub::before, .msg-npc .bub::after, .msg-me .bub::after { content: ""; position: absolute; width: 0; height: 0; border: solid transparent; }
.msg-npc .bub::before { left: -12px; bottom: 9px; border-width: 8px 11px 8px 0; border-right-color: var(--ink); }
.msg-npc .bub::after { left: -7px; bottom: 11px; border-width: 6px 8px 6px 0; border-right-color: var(--bb); }
.msg-me .bub::before { right: -12px; bottom: 9px; border-width: 8px 0 8px 11px; border-left-color: var(--ink); }
.msg-me .bub::after { right: -7px; bottom: 11px; border-width: 6px 0 6px 8px; border-left-color: var(--bb); }
.ghost .bub::before, .ghost .bub::after { display: block; }
.chip .ic, .stamp .ic { font-size: 13px; margin-right: 3px; }

/* ---- 手札: アイコン・威力・透かし絵・光る札 ---- */
.card { background-image: radial-gradient(circle, rgba(13, 8, 32, .055) 1.3px, transparent 1.8px), linear-gradient(180deg, #fff, #f3eeff); background-size: 12px 12px, 100% 100%; }
.card .band { padding-right: 34px; text-overflow: ellipsis; background-image: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%); }
.card .ico { position: absolute; right: 9px; top: 4px; z-index: 2; font-size: 18px; line-height: 1; }
.card .wm { position: absolute; right: 8px; bottom: 22px; width: 72px; height: 72px; font-size: 72px; line-height: 1; opacity: .13; pointer-events: none; z-index: 0; }
.card .wm .ic { stroke-width: 1.2; fill: var(--c); }
.card .pips { position: absolute; left: 12px; bottom: 9px; z-index: 2; display: flex; gap: 3px; }
.card .pips i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); background: #e2ddf2; }
.card .pips i.on { background: var(--c); }
.card-main { position: relative; z-index: 1; }
.card .rl { z-index: 4; } .card .key, .card .ico, .card .pips { z-index: 4; } .card .rl, .card .key { pointer-events: auto; }
.card.empty .ico, .card.empty .wm, .card.empty .pips { display: none; }
.card.rec::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .75) 48%, transparent 60%); transform: translateX(-130%); animation: sheen 1.3s linear infinite; }
@keyframes sheen { to { transform: translateX(130%); } }

/* ---- 言葉の一覧(リアル): アイコン・凡例 ---- */
.bk .bk-ic { font-size: 15px; margin-right: 4px; vertical-align: -2px; }
.bk-lg::before { display: none; }
.bk-lg { padding: 1px 9px 2px 5px; border: 2px solid var(--ink); border-radius: 999px; background: var(--c); }
.bk-lg .ic { font-size: 14px; margin-right: 3px; }
.bk.rec::after { content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .7) 48%, transparent 60%); transform: translateX(-130%); animation: sheen 1.3s linear infinite; overflow: hidden; }

/* ---- タイトル: 帯・相手の一覧(得意なレス・ランクのメダル)・モードの絵 ---- */
.tagline { margin: -2px 0 0 14px; transform: rotate(-2deg); align-self: flex-start; }
.tagline span { display: inline-block; padding: 3px 22px 4px 14px; background: var(--ink); color: var(--yellow-2); font: 900 14px var(--sans); letter-spacing: .22em; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
.stage .ss { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; }
.stage .sf { display: inline-flex; gap: 4px; }
.stage .sf .pc { padding: 1px 4px; } .stage .sf .pc .ic { font-size: 15px; }
.stage .sr b { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 3px; border-radius: 50%; border: 3px solid var(--ink); background: radial-gradient(circle at 35% 30%, #fff6b0, #ffcf33 58%, #d99a00); box-shadow: 0 2px 0 var(--ink); font-size: 22px; color: var(--red); }
.stage .sr b.none { background: #e2ddf2; color: #9a93c9; font-size: 15px; box-shadow: none; }
.mode { align-items: center; gap: 10px; }
.mi { width: 36px; height: 36px; flex: none; fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mi circle.hl { fill: var(--yellow-2); } .mi path.hl { fill: none; stroke: var(--yellow-2); stroke-width: 2.6; }

/* ---- 結果: メダルの光・相手の表情・紙吹雪 ---- */
.result-win { isolation: isolate; position: relative; z-index: 1; }
.result-body { position: relative; }
.result-head { padding-right: 100px; }
.res-av { position: absolute; right: 18px; top: 16px; width: 88px; height: 88px; box-shadow: 0 0 0 4px var(--yellow-2); animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.rank { position: relative; z-index: 0; }
.rank::before { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 225, 77, .6) 0 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); mask-image: radial-gradient(circle, #000 52%, transparent 70%); animation: spin 14s linear infinite; }
.rank.lose::before { display: none; }
#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#confetti i { position: absolute; top: -40px; border-radius: 2px; opacity: .95; animation: confall linear infinite; }
#confetti i.gray { background: none; color: #8f87b8; font: 900 20px var(--sans); }
@keyframes confall { from { transform: translateY(-5vh) translateX(0) rotate(0); } to { transform: translateY(112vh) translateX(var(--dx, 0)) rotate(var(--r, 360deg)); } }

@media (max-width: 860px) {
  .bgfx, .arena .spot { display: none; }
  .plate-chips { display: none; } .plate .stars { font-size: 12px; }
  .card .ico { right: 36px; top: 3px; font-size: 14px; } .card .wm, .card .pips { display: none; }
  .res-av { width: 64px; height: 64px; } .result-head { padding-right: 76px; }
  .stage .sf .pc .ic { font-size: 13px; } .mi { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .arena .spot, .bgfx span, .card.rec::after, .bk.rec::after, #confetti i, .rank::before, .npc .blink, .npc .steam, .npc .rgbline { animation: none !important; }
}

/* ---- 手札を、どこを押しても攻撃にする / 補充中を押したときの合図 ---- */
.card .band, .card .ico, .card .wm, .card .pips, .card .key { pointer-events: none; }
.card:not(.empty) { cursor: pointer; }
.card.empty .card-main { pointer-events: none; }
.card.nope { animation: nope .22s linear; }
@keyframes nope { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

/* ---- 言葉(攻撃)の一覧の窓 ---- */
.modal.wide { width: min(760px, 96vw); }
.modal-body h3[data-cat] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; border-left-color: var(--c, var(--red)); }
.modal-body h3[data-cat] .ic { font-size: 20px; }
.modal-body h3 small { flex: 1 0 100%; margin: 0; font: 700 12.5px/1.4 var(--sans); color: #5a5380; }
.alist { width: 100%; margin: 4px 0 10px; border-collapse: collapse; font: 700 14px/1.4 var(--sans); }
.alist td { padding: 5px 7px; border-bottom: 1px dotted #b9b2d6; vertical-align: middle; }
.alist .at { font-weight: 900; } .alist .an { white-space: nowrap; font-variant-numeric: tabular-nums; } .alist .ax { white-space: nowrap; color: #a1243a; } .alist .al { color: #5a5380; font-size: 12.5px; }
.alist .pips { display: inline-flex; gap: 3px; }
.alist .pips i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--ink); background: #e2ddf2; }
.alist .pips i.on { background: var(--c, #9aa0b8); }
@media (max-width: 860px) { .alist .al { display: none; } .alist td { padding: 4px 4px; font-size: 13px; } }

/* ---- 有効なレスを1つに絞って見せる / 同じ言葉は効かない ---- */
.msg.prev .bub { opacity: .72; outline: 3px dashed rgba(255, 255, 255, .55); outline-offset: 2px; }
.msg.prev .tg { display: inline-block; background: #c9c2f5; }
.msg.prev.urgent .tg { background: var(--red-2); color: #fff; }
.msg.dup .bub { opacity: .55; filter: grayscale(.5); }
.stamp.dup { background: #7b849e; }
.card .tno { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 4; padding: 0 9px 1px; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font: 900 11px/1.5 var(--sans); white-space: nowrap; pointer-events: none; }
.card .tno:empty { display: none; }
.card.rec.recprev { box-shadow: 0 5px 0 var(--ink), 0 0 0 5px var(--blue-2); animation: recglowb .5s ease-in-out infinite alternate; }
@keyframes recglowb { from { box-shadow: 0 5px 0 var(--ink), 0 0 0 4px var(--blue-2); } to { box-shadow: 0 5px 0 var(--ink), 0 0 0 8px #bfe0ff; } }
.card.recprev .tno { background: var(--blue); }
.bk.recprev { box-shadow: 0 3px 0 var(--ink), 0 0 0 3px var(--blue-2); }
.bk.used { opacity: .42; box-shadow: none; }
.bk.used .bk-t { text-decoration: line-through; text-decoration-thickness: 2px; }
.bk.used::after { content: "済"; position: absolute; right: -6px; top: -9px; width: auto; height: auto; padding: 0 6px 1px; border: 2px solid var(--ink); border-radius: 999px; background: #7b849e; color: #fff; font: 900 11px/1.4 var(--sans); animation: none; transform: none; inset: auto; -webkit-mask: none; mask: none; }
@media (max-width: 860px) { .card .tno { display: none; } }

/* ======================================================================
 * プレイヤー対戦(#screen-pvp)。NPC 戦の部品(.hp .msg .card .book .compose)を使い、配置と、盛り上がり・隙みせ攻撃だけを足す。
 * ====================================================================== */
.btn-pvp { background: linear-gradient(#7cc6ff, var(--blue)); color: #fff; }
#screen-pvp { --pv-hud-h: 112px; display: grid; gap: 12px; padding: 10px 14px 14px; grid-template-columns: minmax(0, 1.3fr) minmax(360px, .95fr); grid-template-rows: var(--pv-hud-h) minmax(0, 1fr) var(--hand-h); grid-template-areas: "hud hud" "arena log" "hand hand"; }
#pv-hud { grid-area: hud; } #pv-arena { grid-area: arena; } #pv-log { grid-area: log; } #pv-hand-area { grid-area: hand; z-index: 4; }
#app[data-mode="real"] #screen-pvp { --hand-h: 200px; }
#pv-hud { z-index: 4; display: flex; align-items: center; gap: 14px; padding: 8px 14px; color: #fff; background-color: var(--navy); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .18); }
.pv-side { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.pv-foe { flex-direction: row; justify-content: flex-end; }
.pv-info { flex: 1; min-width: 0; }
.pv-name { display: flex; align-items: baseline; gap: 8px; font: 900 16px var(--sans); } .pv-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11em; } .pv-name small { color: var(--yellow-2); font-weight: 900; }
.pv-foe .pv-name { flex-direction: row-reverse; }
.pv-me .av { background: #bfe0ff; } .pv-foe .av { background: #ffd0d4; }
#pv-hud .hp { height: 26px; margin-top: 4px; }
#pv-hp-me, #pv-hp-foe, #pv-trail-me, #pv-trail-foe { transform-origin: left center; }
#pv-hp-me { background: linear-gradient(#7cc6ff, var(--blue)); border-right: 3px solid var(--ink); transition: transform .15s ease-out; }
#pv-hp-foe { background: linear-gradient(#ff9a6a, var(--red)); border-right: 3px solid var(--ink); transition: transform .15s ease-out; }
#pv-trail-me, #pv-trail-foe { background: #fff; }
.pv-foe .hp { transform: scaleX(-1); } .pv-foe .hp .hp-lbl, .pv-foe .hp .hp-num { transform: translateY(-50%) scaleX(-1); }
.pv-foe .hp .hp-lbl { left: auto; right: 10px; } .pv-foe .hp .hp-num { right: auto; left: 10px; }
.buzz { position: relative; height: 20px; margin-top: 5px; background: #1c1442; border: var(--bw) solid var(--ink); border-radius: 8px; overflow: hidden; }
.buzz i { position: absolute; inset: 0; transform-origin: left center; background: linear-gradient(90deg, #ffe14d, #ff8a1f 60%, #e3243a); transition: transform .12s linear; }
.pv-foe .buzz { transform: scaleX(-1); } .pv-foe .buzz .bz-lbl, .pv-foe .buzz .bz-num { transform: translateY(-50%) scaleX(-1); }
.bz-lbl, .bz-num { position: absolute; top: 50%; transform: translateY(-50%); font: 900 12px var(--sans); color: #fff; z-index: 1; text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink); }
.bz-lbl { left: 8px; } .bz-num { right: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pv-foe .buzz .bz-lbl { left: auto; right: 8px; } .pv-foe .buzz .bz-num { right: auto; left: 8px; }
.buzz.hot { box-shadow: 0 0 0 3px var(--yellow-2); } .buzz.ghost { animation: hpshake .3s linear infinite; border-color: var(--red-2); } .buzz.ghost .bz-num { color: var(--red-2); }
.pv-mid { flex: none; text-align: center; min-width: 76px; }
.pv-time { font: 900 30px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; } .pv-time.late { color: var(--red-2); }
.pv-tag { margin-top: 4px; font: 900 11px var(--sans); color: var(--lilac); white-space: nowrap; }

#pv-arena { position: relative; overflow: hidden; min-height: 0; }
.pv-stage { position: absolute; left: 0; right: 0; top: 6%; height: 50%; display: flex; align-items: center; justify-content: center; gap: 4%; pointer-events: none; }
.pv-fig { position: relative; width: min(30%, 190px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--ink); box-shadow: 0 7px 0 rgba(13, 8, 32, .85); background: #bfe0ff; }
.pv-fig-foe { background: #ffd0d4; } .pv-fig svg { display: block; width: 100%; height: 100%; }
.pv-fig.hit { animation: avshake .35s linear; } .pv-fig.hit::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .6); animation: hitflash .3s ease-out forwards; }
@keyframes hitflash { to { opacity: 0; } }
.pv-vs { font: 900 40px/1 var(--sans); font-style: italic; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--red); transform: rotate(-6deg); }
#pv-combo { position: absolute; right: 18px; top: 12px; }
.pv-bait { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px 10px; background-color: var(--navy); color: #fff; border: var(--bw) solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink), inset 0 2px 0 rgba(255, 255, 255, .16); }
.pv-bait-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .pv-bait-h b { font: 900 17px var(--sans); color: var(--yellow-2); } .pv-bait-h small { font: 700 12px var(--sans); color: var(--lilac); }
.pv-bait-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bait-btn { --c: #9aa0b8; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 7px; overflow: hidden; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink), inset 0 6px 0 var(--c); font: 900 14px/1.2 var(--sans); cursor: pointer; touch-action: manipulation; }
.bait-btn[data-cat="long"] { --c: #2d7cff; } .bait-btn[data-cat="emotion"] { --c: #e3243a; } .bait-btn[data-cat="boomerang"] { --c: #8a3df0; } .bait-btn[data-cat="dodge"] { --c: #14a5a0; } .bait-btn[data-cat="spam"] { --c: #ff8a1f; }
.bait-btn .bi { margin-top: 8px; font-size: 24px; line-height: 1; }
.bait-btn:hover:not(.cool) { filter: brightness(1.06); box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--yellow-2), inset 0 6px 0 var(--c); }
.bait-btn:active:not(.cool) { box-shadow: 0 1px 0 var(--ink), 0 0 0 3px var(--yellow), inset 0 6px 0 var(--c); filter: brightness(.97); }
.bait-btn .bk-key { position: absolute; left: 5px; top: 9px; font: 900 11px var(--sans); color: #fff; } .bait-btn .bk-key:empty { display: none; }
.bait-btn .cd { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cd, 0) * 100%); background: rgba(13, 8, 32, .62); pointer-events: none; transition: none; }
.bait-btn.cool { filter: grayscale(.6); cursor: default; } .bait-btn.nope { animation: nopeshake .25s linear; }
#pv-log { z-index: 4; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.msg.bait .bub { border-left: 6px solid var(--c, #9aa0b8); } .msg.bait .stamp.bait { background: #ffe14d; color: var(--ink); }
.msg.expired .bub { opacity: .55; } .msg.done .tmr { display: none; }
.stamp.dmg { background: var(--red); } .msg-me .stamp.dmg { background: var(--blue); }
.dmg.heal { color: #fff6a8; }
#pv-compose { flex: none; }
@media (max-width: 860px) {
  #screen-pvp { --pv-hud-h: 104px; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--pv-hud-h) auto minmax(0, 1fr) var(--hand-h); grid-template-areas: "hud" "arena" "log" "hand"; gap: 8px; padding: 8px 8px 10px; }
  #pv-hud { gap: 6px; padding: 5px 8px; } .pv-side .av-big { width: 36px; height: 36px; } .pv-name { font-size: 13px; } .pv-name small { display: none; } #pv-hud .hp { height: 20px; } .buzz { height: 16px; margin-top: 3px; } .bz-lbl { display: none; }
  .pv-time { font-size: 22px; -webkit-text-stroke-width: 5px; } .pv-tag { display: none; } .pv-mid { min-width: 56px; }
  #pv-arena { height: auto; min-height: 176px; } .pv-stage { display: none; } #pv-combo { top: 6px; right: 8px; transform: scale(.7); transform-origin: top right; }
  .pv-bait { position: relative; inset: auto; margin: 0; border-radius: 12px; } .pv-bait-h small { display: none; } .bait-btn { padding: 6px 2px 5px; font-size: 12px; } .bait-btn .bi { font-size: 20px; margin-top: 7px; }
  #pv-hand-area .hand { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; padding-top: 0; }
}
/* ---- ロビー・結果・ランキング ---- */
.lb { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.lb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 800 15px var(--sans); } .lb-row > span { min-width: 3.5em; }
.lb-row input[type=text] { flex: 1; min-width: 10em; padding: 7px 10px; font: 800 16px var(--sans); border: var(--bw) solid var(--ink); border-radius: 10px; }
.lb-box { padding: 10px 12px 12px; border: var(--bw) solid var(--ink); border-radius: 12px; background: rgba(255, 255, 255, .5); } .lb-box h4 { margin: 0 0 6px; font: 900 16px var(--sans); }
.lb-box p { margin: 0 0 8px; font: 700 14px/1.5 var(--sans); }
.lb-lv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.lb-lv label { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; cursor: pointer; font: 900 15px var(--sans); }
.lb-lv label small { grid-column: 1 / -1; font: 700 11.5px/1.3 var(--sans); color: #5a5380; }
.lb-how { font: 700 13.5px/1.6 var(--sans); } .lb-how summary { cursor: pointer; font-weight: 900; } .lb-how ul { margin: 6px 0 0; padding-left: 1.2em; }
.lb .btn { margin-right: 8px; }
.rs { text-align: center; } .rs-t { font: 900 54px/1.1 var(--sans); font-style: italic; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; color: #fff; text-shadow: 5px 5px 0 var(--blue); }
.rs.lose .rs-t { text-shadow: 5px 5px 0 var(--red); color: #d8d4f0; } .rs.draw .rs-t { text-shadow: 5px 5px 0 #7b849e; }
.rs-w { margin: 4px 0 8px; font: 800 14px var(--sans); color: #5a5380; }
.rs-rate { display: inline-block; margin: 2px 0 10px; padding: 6px 16px; border: var(--bw) solid var(--ink); border-radius: 12px; background: #fff; font: 800 18px var(--sans); } .rs-rate.up b:last-child, .rs-rate.up { color: #0a7a3d; } .rs-rate.down { color: var(--red); }
.rs-tb { margin: 0 auto; border-collapse: collapse; font: 700 15px var(--sans); } .rs-tb th { text-align: left; padding: 3px 14px 3px 0; color: #5a5380; } .rs-tb td { text-align: right; font-weight: 900; }
.rk { width: 100%; border-collapse: collapse; font: 700 14.5px var(--sans); } .rk th, .rk td { padding: 5px 8px; border-bottom: 2px solid rgba(13, 8, 32, .15); text-align: left; } .rk td:nth-child(3) { font-variant-numeric: tabular-nums; }

.pt-long .bub { color: var(--ink); }
@media (max-width: 860px) {
  #pv-hud .hp-lbl { display: none; } #pv-hud .hp-num { font-size: 13px; }
  #pv-arena { min-height: 0; } #pv-arena .spot, #pv-arena .floor { display: none; }
}
.btn:disabled, .btn[disabled] { filter: grayscale(.9); opacity: .5; cursor: not-allowed; box-shadow: 0 2px 0 var(--ink); transform: none; }

.lb-rk { margin-top: 10px; max-height: 220px; overflow-y: auto; } .lb-rk p { margin: 4px 0; }

/* 自分の顔アイコン(画像)。表情は data-face(cool / win / hurt)で切り替える */
.pimg { position: relative; width: 100%; height: 100%; }
.pimg img { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pimg[data-face="cool"] .pf-cool, .pimg[data-face="win"] .pf-win, .pimg[data-face="hurt"] .pf-hurt { display: block; }

/* ---- 盛り上がりの警告(プレイヤー対戦)----
 * 40 を切る: ゲージが赤く震える(warn)/ 20 を切る: ゲージがさらに強く(crit)。自分の場合は、画面全体が赤く震え、
 * ゲージと隙みせ攻撃が強調される(#screen-pvp[data-danger="2"])。0 になったら負け。
 * 相手側のゲージは scaleX(-1) で左右反転しているので、動きは、個別の translate / scale プロパティで付ける(transform を上書きしない)。 */
@keyframes bzshake { 0% { translate: -1.5px 0; } 50% { translate: 1.5px -1px; } 100% { translate: -1px 1px; } }
@keyframes bzshake2 { 0% { translate: -3px 1px; scale: 1.06; } 25% { translate: 3px -1px; scale: 1.08; } 50% { translate: -2px -2px; scale: 1.06; } 75% { translate: 2px 2px; scale: 1.08; } 100% { translate: -3px 1px; scale: 1.06; } }
.buzz.warn { border-color: var(--red-2); animation: bzshake .2s linear infinite; }
.buzz.warn i { background: linear-gradient(90deg, #ff9a7a, #e3243a 55%, #a3001a); }
.buzz.warn .bz-num { color: #ffd0d0; }
.buzz.crit { z-index: 2; border-color: #fff; animation: bzshake2 .12s linear infinite; box-shadow: 0 0 0 3px var(--red), 0 0 20px 7px rgba(255, 40, 60, .95); }
.buzz.crit .bz-num { color: #fff; font-size: 15px; }
.buzz.crit i { background: linear-gradient(90deg, #ff4d4d, #c4001a); }
#pv-danger { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(227, 36, 58, 0) 52%, rgba(227, 36, 58, .55) 100%); }
#screen-pvp[data-danger="2"] #pv-danger { opacity: 1; animation: dangerpulse .6s ease-in-out infinite alternate; }
@keyframes dangerpulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes dangershake { 0% { translate: -2px 0; } 25% { translate: 2px -1px; } 50% { translate: -1px 2px; } 75% { translate: 1px -2px; } 100% { translate: -2px 0; } }
#screen-pvp[data-danger="2"] { animation: dangershake .14s linear infinite; }
#screen-pvp[data-danger="2"] #pv-hud, #screen-pvp[data-danger="2"] #pv-log, #screen-pvp[data-danger="2"] .pv-bait { box-shadow: 0 0 0 3px var(--red), 0 0 24px 6px rgba(255, 40, 60, .75), 0 5px 0 var(--ink); animation: dangerglow .6s ease-in-out infinite alternate; }
@keyframes dangerglow { from { box-shadow: 0 0 0 3px var(--red), 0 0 10px 2px rgba(255, 40, 60, .4), 0 5px 0 var(--ink); } to { box-shadow: 0 0 0 4px #fff, 0 0 30px 10px rgba(255, 40, 60, .95), 0 5px 0 var(--ink); } }
#screen-pvp[data-danger="2"] .bait-btn:not(.cool):not(.same) { animation: baitcall .45s ease-in-out infinite alternate; }
@keyframes baitcall { from { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--yellow), inset 0 6px 0 var(--c); filter: none; } to { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px #fff, 0 0 18px 6px rgba(255, 207, 51, .9), inset 0 6px 0 var(--c); filter: brightness(1.12); } }   /* ボタンは動かさない(押しやすさ)。光の脈動だけで強調する */
#screen-pvp[data-danger="2"] .pv-bait-h b { color: #fff; -webkit-text-stroke: 4px var(--red); paint-order: stroke fill; font-size: 20px; }
.pv-alert { position: absolute; left: 50%; top: 57%; translate: -50% 0; z-index: 6; pointer-events: none; text-align: center; white-space: nowrap; font: 900 clamp(24px, 3.6vw, 44px) / 1.05 var(--sans); font-style: italic; color: #fff; -webkit-text-stroke: 8px var(--red); paint-order: stroke fill; text-shadow: 4px 5px 0 var(--ink); animation: alertblink .5s steps(2, jump-none) infinite; }
.pv-alert small { display: block; margin-top: 6px; font: 900 clamp(13px, 1.6vw, 18px) var(--sans); font-style: normal; color: var(--yellow-2); -webkit-text-stroke: 0; text-shadow: 0 2px 0 var(--ink); }
@keyframes alertblink { from { opacity: 1; } to { opacity: .35; } }
/* 直前に打った種類は、2連続では打てない */
.bait-btn.same { filter: grayscale(.9) brightness(.85); opacity: .55; cursor: not-allowed; }
.bait-btn.same::after { content: "連続×"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 1px 9px 2px; border: 2px solid var(--ink); border-radius: 999px; background: #7b849e; color: #fff; font: 900 12px var(--sans); white-space: nowrap; }
.bait-btn.nope { animation: nopeshake .25s linear; }
@media (max-width: 860px) { .pv-alert { display: none; } .buzz.crit .bz-num { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .buzz.warn, .buzz.crit, #screen-pvp[data-danger="2"], #screen-pvp[data-danger="2"] #pv-hud, #screen-pvp[data-danger="2"] #pv-log, #screen-pvp[data-danger="2"] .pv-bait, #screen-pvp[data-danger="2"] .bait-btn, .pv-alert, #screen-pvp[data-danger="2"] #pv-danger { animation: none !important; }
  #screen-pvp[data-danger="2"] #pv-danger { opacity: .8; }
}

/* ---- 誤字の指摘(対戦): 誤字の文字が強調され、相手がクリックすると、ダメージ ---- */
#screen-pvp .typo-mark { display: inline-block; padding: 0 2px; margin: 0 1px; border-radius: 5px; font-weight: 900; color: #fff; background: var(--red); text-decoration: none; box-shadow: 0 0 0 2px var(--ink); }
#screen-pvp .msg-me .typo-mark { background: #7a3a00; }
#screen-pvp .typo-mark.hot { cursor: pointer; padding: 2px 5px; margin: 0 2px; background: var(--red); animation: typohot .55s ease-in-out infinite; touch-action: manipulation; }
#screen-pvp .typo-mark.hot:hover { background: #ff5a3c; transform: scale(1.25); }
#screen-pvp .typo-foe.typo-done .typo-mark, #screen-pvp .typo-mine.typo-done .typo-mark { background: #777; text-decoration: line-through; animation: none; }
#screen-pvp .typo-expired .typo-mark { background: #9a8fbd; box-shadow: 0 0 0 2px var(--ink); animation: none; }
#screen-pvp .typo-foe:not(.typo-done):not(.typo-expired) .bub { outline: 3px dashed var(--red); outline-offset: 2px; }
#screen-pvp .stamp.typo { background: var(--red); color: #fff; }
#screen-pvp .typo-tmr { height: 5px; margin-top: 4px; }
#screen-pvp .typo-tmr i { background: var(--red); }
#screen-pvp .typo-done .typo-tmr, #screen-pvp .typo-expired .typo-tmr { visibility: hidden; }
@keyframes typohot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(255, 60, 60, .0); } 50% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--ink), 0 0 10px 5px rgba(255, 60, 60, .75); } }
@media (prefers-reduced-motion: reduce) { #screen-pvp .typo-mark.hot { animation: none; } }

/* 相手の、いま指摘できる誤字を、ログの上に固定して見せる(新しいレスで流れないように) */
.typo-pin { flex: none; margin: 8px 10px 0; padding: 8px 10px 10px; border: var(--bw) solid var(--ink); border-radius: 14px; background: #fff3d6; color: var(--ink); box-shadow: 3px 3px 0 var(--ink), 0 0 0 3px var(--red); }
.typo-pin[hidden] { display: none; }
.typo-pin .tp-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .typo-pin .tp-h b { font: 900 15px var(--sans); color: var(--red); } .typo-pin .tp-h small { font: 700 12px var(--sans); color: #6b5a8a; }
.typo-pin .tp-b { font: 800 16px/1.7 var(--sans); word-break: break-all; }
.typo-pin .tmr { height: 7px; margin-top: 6px; } .typo-pin .tmr i { background: var(--red); }
@media (max-width: 860px) { .typo-pin { margin: 6px 6px 0; padding: 6px 8px 8px; } .typo-pin .tp-b { font-size: 17px; line-height: 1.9; } #screen-pvp .typo-pin .typo-mark.hot { padding: 4px 8px; margin: 0 3px; } }

/* ---- 広告(docs/広告の設計.md): バナーは、全画面のいちばん下。ゲームの画面は、その分だけ縮む ---- */
.ad-banner { position: fixed; left: 0; right: 0; bottom: 0; height: var(--ad-h, 0); box-sizing: border-box; padding-top: 8px; z-index: 60; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0d0820; border-top: 3px solid var(--ink); }
.ad-banner[hidden] { display: none; }
body.has-banner { --ad-h: 108px; }
body.has-banner #app { bottom: var(--ad-h); }
@media (max-width: 860px), (max-height: 620px) { body.has-banner { --ad-h: 68px; } }
.ad-mock { color: #b8b0e8; font: 800 14px var(--sans); border: 2px dashed #6d62b0; border-radius: 8px; padding: 6px 28px; }
.ad-overlay { position: absolute; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(13, 8, 32, .88); }
.ad-box { position: relative; width: min(86%, 460px); padding: 24px 22px; text-align: center; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.ad-box h3 { margin: 0 0 8px; font: 900 20px var(--sans); } .ad-box p { margin: 0 0 14px; font: 700 14px var(--sans); }
.ad-box .btn { margin: 4px; }
.ad-x { position: absolute; top: 8px; right: 8px; width: 38px; height: 38px; border: 3px solid var(--ink); border-radius: 50%; background: #ddd; color: #888; font: 900 18px var(--sans); cursor: not-allowed; }
.ad-x.on { background: #fff; color: var(--ink); cursor: pointer; }
.ad-bar { height: 12px; margin: 0 0 14px; border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; background: #eee; } .ad-bar i { display: block; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }

.lb-quota { margin: 4px 0 8px; font: 800 14px/1.5 var(--sans); color: #b45f00; }
.lb-ad { margin: 0 0 10px; padding: 10px 12px; border: 3px dashed var(--yellow); border-radius: 12px; background: rgba(255, 207, 51, .08); } .lb-ad p { margin: 0 0 8px; font: 700 14px/1.5 var(--sans); } .lb-ad .btn { margin: 2px 6px 2px 0; }
.lb-tr p { margin: 0 0 8px; font: 700 13px/1.6 var(--sans); } .lb-tr input { flex: 1; min-width: 0; padding: 6px 8px; border: 2px solid var(--ink); border-radius: 8px; font: 700 13px var(--mono, monospace); }

.t-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: 1 1 120px; min-width: 0; font: 700 12px var(--sans); }   /* BGM・音のボタンと、同じ行に並べる(行の余白をなくす) */ .t-legal a { color: var(--lilac); text-decoration: underline; }

/* ---- アイコン変更 ---- */
.av-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 4px; }
.av-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 12px; border: var(--bw) solid var(--ink); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--sans); cursor: pointer; }
.av-card .av-img { display: block; width: 100%; max-width: 130px; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; background: #cfeaff; }
.av-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-card b { font: 900 16px var(--sans); } .av-card small { font: 700 12px/1.4 var(--sans); color: #5a4d86; text-align: center; }
.av-card.sel { outline: 4px solid var(--yellow-2, #ffcf33); outline-offset: 2px; background: #fff7d6; }
.av-card.locked { cursor: not-allowed; background: #e9e6f5; } .av-card.locked .av-img { filter: grayscale(1) brightness(.55); }
.unlock { margin: 10px 0 0; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 12px; background: var(--yellow-2, #ffcf33); color: var(--ink); font: 900 14px/1.5 var(--sans); text-align: center; box-shadow: 3px 3px 0 var(--ink); }

/* ---- プロフィール(名前とアイコン) ---- */
.btn-profile { display: inline-flex; align-items: center; gap: 8px; }
.pb-av { display: inline-block; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; overflow: hidden; background: #cfeaff; flex: none; } .pb-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
#pb-name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; } .pf-row > span { font: 900 15px var(--sans); flex: none; }
.pf-row input { flex: 1; min-width: 0; padding: 9px 12px; border: var(--bw) solid var(--ink); border-radius: 12px; font: 800 17px var(--sans); }
.pf-h { margin: 14px 0 4px; font: 900 15px var(--sans); }

.pv-conn { position: absolute; left: 0; right: 0; top: 0; z-index: 500; padding: 10px 14px; text-align: center; background: #c4001a; color: #fff; font: 900 16px var(--sans); border-bottom: 3px solid var(--ink); } .pv-conn[hidden] { display: none; }

/* ---- タイトルの大きいボタン(レスバ開始！ と オンライン対戦 を、同じ大きさで並べる)と、爽快モードのマーク ---- */
.t-btns .btn-big { flex: 1 1 calc(50% - 10px); min-width: 0; font-size: 22px; padding: 12px 18px; letter-spacing: .06em; text-align: center; white-space: nowrap; }
.btn-pvp.btn-big { text-shadow: 2px 2px 0 var(--ink); background-image: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 55%), linear-gradient(#7cc6ff, var(--blue)); }
@media (max-width: 860px) { .t-btns .btn-big { font-size: 20px; padding: 11px 12px; } }
.mi rect.hl { fill: var(--yellow-2); } .mi path.bolt { fill: #fff; stroke-width: 1.8; }
@media (max-width: 420px) { .t-btns .btn-big { font-size: 17px; padding: 11px 6px; letter-spacing: .02em; } }

/* ---- チュートリアル(js/tutorial.js): 暗い幕に、説明する所だけ穴をあけ、吹き出しで教える ---- */
.tut { position: absolute; inset: 0; z-index: 450; pointer-events: none; }
.tut-shade { position: absolute; inset: 0; background: rgba(8, 4, 24, .76); pointer-events: auto; }
.tut-spot { position: absolute; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(8, 4, 24, .76); pointer-events: none; }          /* 説明する所を、くり抜く(1枚の影。つなぎ目が、ない) */
.tut-block { position: absolute; background: transparent; pointer-events: auto; }
.tut-ring { position: absolute; border: 4px solid var(--yellow-2, #ffcf33); border-radius: 14px; box-shadow: 0 0 0 3px var(--ink), 0 0 24px 6px rgba(255, 207, 51, .85); pointer-events: none; animation: tutpulse .9s ease-in-out infinite alternate; }
@keyframes tutpulse { from { box-shadow: 0 0 0 3px var(--ink), 0 0 10px 2px rgba(255, 207, 51, .55); } to { box-shadow: 0 0 0 3px var(--ink), 0 0 28px 9px rgba(255, 207, 51, .95); } }
.tut-bubble { position: absolute; width: min(430px, calc(100% - 16px)); box-sizing: border-box; padding: 12px 16px 14px; background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--ink); pointer-events: auto; font-family: var(--sans); }
.tut-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; } .tut-h b { font: 900 18px var(--sans); color: #c4001a; }
.tut-n { font: 800 12px var(--sans); color: #5a4d86; padding: 1px 8px; border: 2px solid #cfc8ee; border-radius: 999px; background: #f4f1ff; }
.tut-t { margin: 3px 0; font: 700 15px/1.6 var(--sans); } .tut-hint { margin: 8px 0 2px; padding: 6px 10px; border-radius: 10px; background: #fff3c4; font: 900 15px/1.5 var(--sans); border: 2px solid var(--ink); }
.tut-next { margin-top: 8px; font-size: 17px; padding: 8px 22px; }
.tut-ribbon { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 12px; background: rgba(13, 8, 32, .92); color: #fff; border: 2px solid var(--yellow-2, #ffcf33); border-radius: 999px; font: 800 12px var(--sans); pointer-events: auto; max-width: calc(100% - 16px); }
.tut-ribbon span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tut-x { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 800 12px var(--sans); cursor: pointer; }
.tut-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 4px; }
.tut-choice { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 16px 16px 18px; border: var(--bw) solid var(--ink); border-radius: 16px; background: linear-gradient(#fff, #eaf3ff); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); font-family: var(--sans); cursor: pointer; }
.tut-choice b { font: 900 19px var(--sans); } .tut-choice span { font: 700 13px/1.5 var(--sans); color: #4a3d80; }
.tut-choice:hover { background: linear-gradient(#fffbe0, #ffe9a8); }
@media (prefers-reduced-motion: reduce) { .tut-ring { animation: none; } }
@media (max-width: 860px) { .tut-t { font-size: 14px; } .tut-h b { font-size: 16px; } }
.tut-x { white-space: nowrap; flex: none; }

.lb-terms { margin: 4px 0 8px; font: 700 12px/1.6 var(--sans); color: #5a4d86; } .lb-terms a { color: #1668e8; }