/* レイアウト：1280×720 の固定ステージを画面に合わせて拡縮する。盤面の中心に「サークル（魔法陣）」を置き、
   夜色の地に金の縁取り。味方＝蒼、相手＝紅、回復＝翠、除外＝菫で意味を固定する。 */
:root {
  color-scheme: dark;
  --ink: #070916;
  --night: #0e1330;
  --night-2: #18204d;
  --panel: rgba(11, 15, 38, .92);
  --gold: #e8c468;
  --gold-hi: #fff0b8;
  --gold-lo: #8a6524;
  --azure: #58c8ff;
  --crimson: #ff5468;
  --jade: #6fe6a0;
  --violet: #b48cff;
  --paper: #f1e8d2;
  --mute: #9aa3c7;
  --f-display: 'Cinzel', 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif;
  --f-jp: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif CJK JP', serif;
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans CJK JP', sans-serif;
  /* 紋章：ルーン風の文字が並ぶ割れた輪（--sigil・回る）と、中央の印＋稲妻（--sigil-core・回らない） */
  --sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e8c468'%3E%3Cpath d='M306.5 40.3A192 192 0 0 1 377.1 274.1L342.1 259.4A154 154 0 0 0 285.4 71.9Z' stroke-width='2.2' fill='%23e8c468' fill-opacity='.07'/%3E%3Cpath d='M307 46.6A187 187 0 0 1 374 268.5' stroke-width='.7' opacity='.7'/%3E%3Cpath d='M375.8 283.1A194.5 194.5 0 0 1 113.8 374.4L130.7 340.3A156.5 156.5 0 0 0 341.5 266.9Z' stroke-width='2.2' fill='%23e8c468' fill-opacity='.07'/%3E%3Cpath d='M369.6 284.6A189.5 189.5 0 0 1 119.6 371.6' stroke-width='.7' opacity='.7'/%3E%3Cpath d='M105.6 365.5A190.5 190.5 0 0 1 12.5 233.7L49.9 227A152.5 152.5 0 0 0 124.4 332.5Z' stroke-width='2.2' fill='%23e8c468' fill-opacity='.07'/%3E%3Cpath d='M104.7 359.2A185.5 185.5 0 0 1 18.2 236.7' stroke-width='.7' opacity='.7'/%3E%3Cpath d='M7.8 226.3A194 194 0 0 1 76.6 50.3L100.8 79.6A156 156 0 0 0 45.4 221.2Z' stroke-width='2.2' fill='%23e8c468' fill-opacity='.07'/%3E%3Cpath d='M12.3 221.7A189 189 0 0 1 76.8 56.7' stroke-width='.7' opacity='.7'/%3E%3Cpath d='M87 47.3A190 190 0 0 1 295.9 36L276.7 68.8A152 152 0 0 0 109.6 77.8Z' stroke-width='2.2' fill='%23e8c468' fill-opacity='.07'/%3E%3Cpath d='M93.1 49A185 185 0 0 1 290 38.4' stroke-width='.7' opacity='.7'/%3E%3Cpath d='M280.5 71.1L268.3 74.3L254.2 79.5L247.4 87.7' stroke-width='1' opacity='.75'/%3E%3Cpath d='M338.9 261.8L332.1 259L326.1 254.6L322.7 243' stroke-width='1' opacity='.75'/%3E%3Cpath d='M128.6 334.2L126.1 321.8L135.7 318.4L132.5 304' stroke-width='1' opacity='.75'/%3E%3Cpath d='M49.9 223.8L60.6 224.7L75.5 232.4L88.4 233.4' stroke-width='1' opacity='.75'/%3E%3Cpath d='M106.4 80.2L103.9 92.6L115.5 94.4L122 99.6' stroke-width='1' opacity='.75'/%3E%3Cg stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22V0M1 8l8 6' transform='translate(216 27.7) rotate(5.3) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l7 6-7 6' transform='translate(247.3 33.6) rotate(15.9) translate(-5 -11)'/%3E%3Cpath d='M2 22V0M2 1l7 5M2 8l7 5' transform='translate(277.1 45.1) rotate(26.5) translate(-5 -11)'/%3E%3Cpath d='M2 22V0M2 6l7 5-7 5' transform='translate(304.3 61.9) rotate(37.1) translate(-5 -11)'/%3E%3Cpath d='M1 22V0l8 9v13' transform='translate(327.8 83.5) rotate(47.6) translate(-5 -11)'/%3E%3Cpath d='M5 22V0M1 8l8 6' transform='translate(347.1 108.9) rotate(58.2) translate(-5 -11)'/%3E%3Cpath d='M5 3l4 8-4 8-4-8z' transform='translate(361.3 137.5) rotate(68.8) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l7 5-7 6 7 6z' transform='translate(370.1 168.2) rotate(79.4) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l4 4 3-4M2 22l4-4 3 4' transform='translate(373 200) rotate(90) translate(-5 -11)'/%3E%3Cpath d='M1 2l8 18M9 2l-8 18' transform='translate(370.1 231.8) rotate(100.6) translate(-5 -11)'/%3E%3Cpath d='M1 22V0l8 8M9 22V0l-8 8' transform='translate(347.1 291.1) rotate(121.8) translate(-5 -11)'/%3E%3Cpath d='M5 22V0' transform='translate(327.8 316.5) rotate(132.4) translate(-5 -11)'/%3E%3Cpath d='M9 3l-7 8 7 8' transform='translate(304.3 338.1) rotate(142.9) translate(-5 -11)'/%3E%3Cpath d='M5 22V0' transform='translate(277.1 354.9) rotate(153.5) translate(-5 -11)'/%3E%3Cpath d='M2 22V0M2 6l7 5-7 5' transform='translate(247.3 366.4) rotate(164.1) translate(-5 -11)'/%3E%3Cpath d='M1 22V0l8 8M9 22V0l-8 8' transform='translate(216 372.3) rotate(174.7) translate(-5 -11)'/%3E%3Cpath d='M1 22V0l4 5 4-5v22' transform='translate(184 372.3) rotate(185.3) translate(-5 -11)'/%3E%3Cpath d='M5 3l4 8-4 8-4-8z' transform='translate(152.7 366.4) rotate(195.9) translate(-5 -11)'/%3E%3Cpath d='M1 2l8 18M9 2l-8 18' transform='translate(95.7 338.1) rotate(217.1) translate(-5 -11)'/%3E%3Cpath d='M1 22V0l8 8M9 22V0l-8 8' transform='translate(72.2 316.5) rotate(227.6) translate(-5 -11)'/%3E%3Cpath d='M2 22V0M2 6l7 5-7 5' transform='translate(52.9 291.1) rotate(238.2) translate(-5 -11)'/%3E%3Cpath d='M2 22V0M2 1l7 5M2 8l7 5' transform='translate(38.7 262.5) rotate(248.8) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l7 5-7 6 7 6z' transform='translate(27 200) rotate(270) translate(-5 -11)'/%3E%3Cpath d='M9 3l-7 8 7 8' transform='translate(29.9 168.2) rotate(280.6) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l4 4 3-4M2 22l4-4 3 4' transform='translate(38.7 137.5) rotate(291.2) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l7 5-7 6 7 11' transform='translate(52.9 108.9) rotate(301.8) translate(-5 -11)'/%3E%3Cpath d='M5 3l4 8-4 8-4-8z' transform='translate(72.2 83.5) rotate(312.4) translate(-5 -11)'/%3E%3Cpath d='M1 22V0l8 9v13' transform='translate(122.9 45.1) rotate(333.5) translate(-5 -11)'/%3E%3Cpath d='M2 22V0M2 6l7 5-7 5' transform='translate(152.7 33.6) rotate(344.1) translate(-5 -11)'/%3E%3Cpath d='M2 22V0l4 4 3-4M2 22l4-4 3 4' transform='translate(184 27.7) rotate(354.7) translate(-5 -11)'/%3E%3C/g%3E%3Cg stroke-width='1' opacity='.8'%3E%3Ccircle cx='126.1' cy='301.4' r='2'/%3E%3Ccircle cx='323.1' cy='256.8' r='1.5'/%3E%3Ccircle cx='159.5' cy='82.9' r='1.5'/%3E%3Ccircle cx='150.9' cy='324.8' r='2.1'/%3E%3Ccircle cx='74.7' cy='244.5' r='2.3'/%3E%3Ccircle cx='121.3' cy='312.8' r='2.5'/%3E%3Ccircle cx='103.5' cy='119.2' r='2'/%3E%3Ccircle cx='171.4' cy='319.4' r='2.3'/%3E%3Ccircle cx='309.8' cy='136.7' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --sigil-core: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e8c468'%3E%3Cg stroke='%237fe9ff' stroke-linejoin='round' stroke-linecap='round' opacity='.95'%3E%3Cpath d='M199.9 184L199.3 164.6L201.1 148.5L199.9 135.1L204 118L196.6 105.3L204.1 92.5L192.5 75L202.1 60.6' stroke-width='1.6'/%3E%3Cpath d='M204 118L191.1 105.2L182.5 95.9L165.8 85' stroke-width='1.1'/%3E%3Cpath d='M208.9 186.7L214.3 170.2L223.3 159.5L227.3 147.8L240.9 136.1L256.5 126.8L255.1 110.6L268.4 97.7L274.5 88.8' stroke-width='1.6'/%3E%3Cpath d='M240.9 136.1L240.5 119.5L233.2 100.5L226.6 88.2' stroke-width='1.1'/%3E%3Cpath d='M214.6 193.4L232 183.7L244.9 181.7L259.2 169.2L271.1 164.8L291.7 162.4L300.3 150L310.8 142.2L324.1 141.2' stroke-width='1.6'/%3E%3Cpath d='M271.1 164.8L287.7 172.5L303.7 179.2L317.2 189' stroke-width='1.1'/%3E%3Cpath d='M214.3 207.2L227.9 222.2L242.7 230.1L259 224.7L274 239.3L292.6 239.4L301.6 250.7L311.3 258.4L312.6 256.5' stroke-width='1.6'/%3E%3Cpath d='M274 239.3L289.2 237.4L305 231.9L320.8 217.2' stroke-width='1.1'/%3E%3Cpath d='M207.5 214.1L220.6 228.6L217.3 245.4L234.7 257.1L234.6 272.5L251 285.9L251.2 308L265.2 319.6L268.3 322' stroke-width='1.6'/%3E%3Cpath d='M200.4 216L196 230.2L204.4 246.7L198.3 260.3L206.1 272.6L197.2 289.4L206.2 306L207.9 325.3L207.2 337.5L206.6 342.8' stroke-width='1.6'/%3E%3Cpath d='M197.2 289.4L181.1 300.3L170.2 308.5L155.2 316.5' stroke-width='1.1'/%3E%3Cpath d='M192.1 213.9L181.4 230.3L173.3 248.1L168.2 262.2L158.4 270.8L159.2 285.7L151.2 297.8L140.8 306.4L138.9 322.5L130.8 320' stroke-width='1.6'/%3E%3Cpath d='M159.2 285.7L142.1 289.6L120.1 291.1L99.1 287.1' stroke-width='1.1'/%3E%3Cpath d='M185.1 205.9L170 213.9L153.3 216.9L141.4 221.2L121.5 225.3L107.7 238.7L90 242.7L74.2 244.9L69.7 250.5' stroke-width='1.6'/%3E%3Cpath d='M121.5 225.3L112.7 237.1L105.7 253.3L104.4 274.9' stroke-width='1.1'/%3E%3Cpath d='M185.2 193.9L172.9 185.9L157.4 187.7L142.5 173.5L129.5 164.4L114.7 161.9L100.8 159.9L86.5 146.2L83.1 152.2' stroke-width='1.6'/%3E%3Cpath d='M129.5 164.4L123.2 153L121.9 134.6L119.8 121.8' stroke-width='1.1'/%3E%3Cpath d='M193.2 185.5L187.3 174L184 154.2L173.4 142.5L168.7 125.5L159.5 109.1L156.1 94.6L147 83.2L135.2 69.5L139 67.7' stroke-width='1.6'/%3E%3Cpath d='M159.5 109.1L145.9 102.4L129.3 96.5L106.3 97' stroke-width='1.1'/%3E%3Cpath d='M145 205.4L141.9 221.6' stroke-width='1.2'/%3E%3Cpath d='M142.5 206.7L133.8 223.7' stroke-width='1.2'/%3E%3Cpath d='M142 204.2L121.9 225.1' stroke-width='1.2'/%3E%3Cpath d='M138.8 203.1L115.2 213.4' stroke-width='1.2'/%3E%3Cpath d='M140.9 200L121.9 199.9' stroke-width='1.2'/%3E%3Cpath d='M139.4 197.1L112.1 185.1' stroke-width='1.2'/%3E%3Cpath d='M139.3 194L129 184.7' stroke-width='1.2'/%3E%3Cpath d='M142.9 192.8L136.4 178' stroke-width='1.2'/%3E%3Cpath d='M145 191.5L142.8 173.2' stroke-width='1.2'/%3E%3Cpath d='M254.6 194.2L257.5 164.2' stroke-width='1.2'/%3E%3Cpath d='M256.7 193.3L265.9 170.6' stroke-width='1.2'/%3E%3Cpath d='M260.2 194.5L273.5 182.5' stroke-width='1.2'/%3E%3Cpath d='M262.2 196.5L274.1 191.6' stroke-width='1.2'/%3E%3Cpath d='M262.2 200.5L290.6 202.3' stroke-width='1.2'/%3E%3Cpath d='M259.7 201.8L279.8 208' stroke-width='1.2'/%3E%3Cpath d='M258.9 203.8L283.7 223.1' stroke-width='1.2'/%3E%3Cpath d='M256.3 205.6L266.7 230.4' stroke-width='1.2'/%3E%3Cpath d='M255.3 206.9L257.9 220.3' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M192.5 95.2L192.5 176.9L127 101.2L135 101.2L135 94.8L97 94.8L97 101.2L114.6 101.2L110.3 104.9L192.5 199.8L192.5 200.2L110.3 295.1L114.6 298.8L97 298.8L97 305.2L135 305.2L135 298.8L127 298.8L192.5 223.1L192.5 304.8L183 304.8L183 311.2L217 311.2L217 304.8L207.5 304.8L207.5 223.1L273 298.8L265 298.8L265 305.2L303 305.2L303 298.8L285.4 298.8L289.7 295.1L207.5 200.2L207.5 199.8L289.7 104.9L285.4 101.2L303 101.2L303 94.8L265 94.8L265 101.2L273 101.2L207.5 176.9L207.5 95.2L217 95.2L217 88.8L183 88.8L183 95.2Z' fill='%230b1030' fill-opacity='.55' stroke='none'/%3E%3Cpath d='M192.5 95.2L192.5 176.9L127 101.2L135 101.2L135 94.8L97 94.8L97 101.2L114.6 101.2L110.3 104.9L192.5 199.8L192.5 200.2L110.3 295.1L114.6 298.8L97 298.8L97 305.2L135 305.2L135 298.8L127 298.8L192.5 223.1L192.5 304.8L183 304.8L183 311.2L217 311.2L217 304.8L207.5 304.8L207.5 223.1L273 298.8L265 298.8L265 305.2L303 305.2L303 298.8L285.4 298.8L289.7 295.1L207.5 200.2L207.5 199.8L289.7 104.9L285.4 101.2L303 101.2L303 94.8L265 94.8L265 101.2L273 101.2L207.5 176.9L207.5 95.2L217 95.2L217 88.8L183 88.8L183 95.2Z' fill='%23e8c468' fill-opacity='.16' stroke-width='2.4' stroke-linejoin='miter'/%3E%3Cg stroke='%237fe9ff' stroke-width='1.2' stroke-linejoin='round' opacity='.9'%3E%3Cpath d='M200 190L199.4 176.9L203.4 164.3L202.9 152L196.3 138.4L201.5 124.2L199.8 107.7'/%3E%3Cpath d='M200 210L201.4 224.1L203 237.8L201.5 252.2L199.5 267.8L202.6 282.1'/%3E%3C/g%3E%3Ccircle cx='200' cy='200' r='5' fill='%237fe9ff' fill-opacity='.9' stroke='none'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink); color: var(--paper); font-family: var(--f-body); font-size: 14px;
  overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
#viewport { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: radial-gradient(ellipse at 50% 40%, #131a45 0%, var(--ink) 70%); }
#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; overflow: clip; background: var(--ink); box-shadow: 0 0 80px rgba(0, 0, 0, .8); }

.screen { position: absolute; inset: 0; overflow: hidden; overflow: clip; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.screen.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.sigil { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; background: var(--sigil) center/contain no-repeat; animation: spin 160s linear infinite; pointer-events: none; }
/* 中央の印は、輪と逆向きに同じ速さで回して、いつも正面を向かせる */
.sigil::after, .spinner::after, .l-crest::after { content: ''; position: absolute; inset: 0; background: var(--sigil-core) center/contain no-repeat; }
.sigil::after { animation: spin-r 160s linear infinite; }
.sigil-title { opacity: .34; width: 760px; height: 760px; margin: -380px 0 0 -380px; filter: drop-shadow(0 0 12px rgba(232, 196, 104, .5)); }
.sigil-dim { opacity: .12; }
.sigil-arena { opacity: .2; top: 325px; width: 520px; height: 520px; margin: -260px 0 0 -260px; transform-origin: 50% 50%; filter: drop-shadow(0 0 10px rgba(88, 200, 255, .45)); }

/* ───────── タイトル ───────── */
.title-art { position: absolute; inset: -40px; background-size: cover; background-position: center; opacity: 0; transition: opacity 2.4s ease; filter: saturate(1.1) blur(1.5px); animation: drift 40s ease-in-out infinite alternate; }
.title-art.on { opacity: .62; }
@keyframes drift { from { transform: scale(1.06) translate(-14px, -6px); } to { transform: scale(1.14) translate(14px, 8px); } }
.title-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(7, 9, 22, .2) 0%, rgba(7, 9, 22, .82) 62%, var(--ink) 100%), linear-gradient(180deg, rgba(7, 9, 22, .75), transparent 30%, transparent 62%, rgba(7, 9, 22, .96)); }
.title-head { position: absolute; left: 0; right: 0; top: 118px; text-align: center; }
.title-logo { margin: 0; line-height: 1; }
.tl-jp { display: block; font-family: var(--f-jp); font-weight: 800; font-size: 118px; letter-spacing: .12em; padding-left: .12em;
  background: linear-gradient(180deg, #fff8dc 0%, var(--gold-hi) 28%, var(--gold) 55%, #b98a2e 78%, #6d4c12 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(232, 196, 104, .55)); }
.tl-en { display: block; margin-top: 8px; font-family: var(--f-display); font-weight: 700; font-size: 34px; letter-spacing: .5em; padding-left: .5em; color: var(--paper); text-shadow: 0 0 18px rgba(88, 200, 255, .8), 0 2px 0 #000; }
.title-sub { margin: 18px 0 0; font-family: var(--f-jp); font-size: 17px; letter-spacing: .2em; color: var(--paper); opacity: .85; text-shadow: 0 1px 6px #000; }
.start-btn { position: absolute; left: 50%; top: 520px; transform: translateX(-50%); background: none; border: 0; font-family: var(--f-jp); font-size: 22px; letter-spacing: .3em; color: var(--gold-hi); text-shadow: 0 0 14px rgba(232, 196, 104, .9); animation: pulse 1.8s ease-in-out infinite; padding: 18px 40px; }
.title-menu { position: absolute; left: 200px; top: 440px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; width: 880px; animation: rise .6s ease both; }
.title-menu .mbtn.primary { grid-column: span 4; padding: 12px 10px; }
.title-menu .mbtn.primary b { font-size: 24px; letter-spacing: .1em; white-space: nowrap; }
.title-menu .mbtn:not(.primary) { grid-column: span 3; padding: 12px 10px; }

.mbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 12px 22px;
  border: 1.5px solid transparent; border-radius: 4px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  background: linear-gradient(180deg, rgba(24, 32, 77, .96), rgba(9, 12, 32, .96)) padding-box, linear-gradient(135deg, var(--gold-hi), var(--gold-lo) 45%, var(--gold) 100%) border-box;
  transition: transform .15s ease, filter .15s ease; }
.mbtn b { font-family: var(--f-jp); font-size: 22px; font-weight: 700; letter-spacing: .14em; color: var(--gold-hi); }
.mbtn small { font-size: 12px; color: var(--mute); letter-spacing: .06em; }
.mbtn.primary { min-height: 96px; background: linear-gradient(180deg, #24327a, #0d1238) padding-box, linear-gradient(135deg, var(--gold-hi), var(--gold-lo) 45%, var(--gold) 100%) border-box; }
.mbtn.primary b { font-size: 28px; }
.mbtn:hover:not(:disabled), .mbtn:focus-visible { transform: translateY(-3px); filter: brightness(1.25) drop-shadow(0 6px 14px rgba(88, 200, 255, .35)); }
.mbtn:active:not(:disabled) { transform: translateY(1px); }
.mbtn:disabled { opacity: .45; cursor: default; }
.mbtn.slim { min-height: 52px; padding: 8px 34px; }
.mbtn.slim b { font-size: 19px; }
.mbtn.danger b { color: #ffb3bc; }
.link-btn { background: none; border: 0; color: var(--mute); font-size: 15px; letter-spacing: .08em; padding: 8px 12px; }
.link-btn:hover { color: var(--gold-hi); }

.plain-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #1b2460 0%, var(--night) 45%, var(--ink) 100%); }
.h-display { margin: 0; font-family: var(--f-jp); font-weight: 800; font-size: 34px; letter-spacing: .2em; color: var(--gold-hi); text-shadow: 0 0 18px rgba(232, 196, 104, .45); }
.lead { margin: 0; color: var(--paper); opacity: .86; font-size: 15px; line-height: 1.7; }
.panel-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.level-row { display: flex; gap: 22px; }
.level { width: 250px; height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 1.5px solid transparent; border-radius: 6px;
  background: linear-gradient(180deg, rgba(30, 40, 96, .95), rgba(9, 12, 32, .95)) padding-box, linear-gradient(160deg, var(--gold-hi), var(--gold-lo) 50%, var(--gold)) border-box; transition: transform .18s ease, filter .18s ease; }
.level b { font-family: var(--f-jp); font-size: 32px; letter-spacing: .16em; color: var(--gold-hi); }
.level small { font-size: 13px; color: var(--mute); padding: 0 18px; line-height: 1.6; }
.level:hover, .level:focus-visible { transform: translateY(-6px) scale(1.03); filter: brightness(1.2) drop-shadow(0 10px 20px rgba(88, 200, 255, .3)); }

/* ───────── ロビー ───────── */
.lobby { position: absolute; inset: 0; padding: 48px 150px 30px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lobby-lead { font-size: 13px; color: var(--mute); letter-spacing: .08em; margin-top: -8px; }
.lobby-grid { display: grid; grid-template-columns: 360px 1fr; gap: 34px; width: 100%; flex: 1; min-height: 0; }
.lobby-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld span { font-size: 13px; letter-spacing: .1em; color: var(--gold); }
.fld input { height: 46px; padding: 0 14px; font: 500 17px var(--f-body); color: var(--paper); background: rgba(5, 7, 20, .8); border: 1px solid rgba(232, 196, 104, .45); border-radius: 4px; -webkit-user-select: text; user-select: text; }
.lobby-status { margin: 0; min-height: 44px; font-size: 13px; line-height: 1.6; color: var(--mute); }
.lobby-status.err { color: #ffb3bc; }
.rooms-head { display: flex; align-items: center; justify-content: space-between; }
.rooms-head h3 { margin: 0; font-family: var(--f-jp); font-size: 19px; letter-spacing: .14em; color: var(--paper); }
.rooms { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(232, 196, 104, .3); padding-top: 12px; }
.rooms li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(18, 24, 60, .8); border-left: 3px solid var(--azure); }
.rooms li .rn { flex: 1; min-width: 0; }
.rooms li .rn b { display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms li .rn small { color: var(--mute); font-size: 12px; }
.rooms li button { padding: 8px 22px; font: 700 15px var(--f-jp); letter-spacing: .12em; color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border: 0; border-radius: 3px; }
.rooms .empty { color: var(--mute); background: none; border: 0; padding: 26px 0; justify-content: center; }
.waiting { position: absolute; inset: 0; background: rgba(4, 6, 16, .82); display: flex; align-items: center; justify-content: center; }
.waiting-box { display: flex; flex-direction: column; align-items: center; gap: 22px; font-family: var(--f-jp); font-size: 22px; letter-spacing: .14em; }
.waiting-box p { margin: 0; }
.spinner { position: relative; width: 92px; height: 92px; background: var(--sigil) center/contain no-repeat; animation: spin 5s linear infinite; filter: drop-shadow(0 0 10px rgba(232, 196, 104, .7)); }
.spinner::after { animation: spin-r 5s linear infinite; }
.spinner.sm { width: 34px; height: 34px; }

/* ───────── 対戦盤面 ───────── */
.arena-bg { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 620px 250px at 50% 45%, rgba(88, 200, 255, .13), transparent 70%),
    linear-gradient(180deg, rgba(255, 84, 104, .12) 0%, transparent 26%, transparent 70%, rgba(88, 200, 255, .14) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 64px),
    radial-gradient(ellipse at 50% 45%, #1a2460 0%, #0c1030 55%, var(--ink) 100%); }
.arena-bg::after { content: ''; position: absolute; left: 262px; right: 262px; top: 324px; height: 2px; background: linear-gradient(90deg, transparent, rgba(232, 196, 104, .7) 20%, rgba(232, 196, 104, .7) 80%, transparent); box-shadow: 0 0 12px rgba(232, 196, 104, .6); }
.row-glow { position: absolute; left: 280px; right: 280px; height: 170px; border-radius: 50%; opacity: 0; transition: opacity .5s; pointer-events: none; }
.row-glow.me { top: 334px; background: radial-gradient(ellipse at 50% 50%, rgba(88, 200, 255, .2), transparent 70%); }
.row-glow.opp { top: 146px; background: radial-gradient(ellipse at 50% 50%, rgba(255, 84, 104, .18), transparent 70%); }
.row-glow.on { opacity: 1; }
#scr-battle.drop-ok .row-glow.me { opacity: 1; background: radial-gradient(ellipse at 50% 50%, rgba(111, 230, 160, .32), transparent 70%); }

.leader { position: absolute; left: 640px; width: 0; height: 0; z-index: 3; }
.leader.opp { top: 74px; }
.leader.me { top: 648px; }
.l-orb { position: absolute; left: -52px; top: -52px; width: 104px; height: 104px; border-radius: 50%; border: 3px solid transparent;
  background: radial-gradient(circle at 50% 35%, #2a3a8c, #0a0e2c 75%) padding-box, conic-gradient(from 20deg, var(--gold-hi), var(--gold-lo), var(--gold), var(--gold-lo), var(--gold-hi)) border-box;
  box-shadow: 0 0 22px rgba(88, 200, 255, .5), inset 0 0 18px rgba(0, 0, 0, .6); transition: box-shadow .3s, transform .15s; }
.leader.opp .l-orb { background: radial-gradient(circle at 50% 35%, #8c2a44, #2c0a14 75%) padding-box, conic-gradient(from 20deg, var(--gold-hi), var(--gold-lo), var(--gold), var(--gold-lo), var(--gold-hi)) border-box; box-shadow: 0 0 22px rgba(255, 84, 104, .5), inset 0 0 18px rgba(0, 0, 0, .6); }
.l-crest { position: absolute; inset: 10px; background: var(--sigil) center/contain no-repeat; opacity: .9; animation: spin-r 60s linear infinite; }
.l-crest::after { animation: spin 60s linear infinite; }
.l-hp { position: absolute; left: 30px; top: 12px; min-width: 76px; height: 42px; padding: 0 12px 0 34px; display: flex; align-items: center; justify-content: center; border-radius: 21px; background: linear-gradient(180deg, #2b0c14, #12040a); border: 1.5px solid var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.l-hp::before { content: '♥'; position: absolute; left: 9px; top: 50%; transform: translateY(-52%); font-size: 22px; color: var(--crimson); text-shadow: 0 0 8px rgba(255, 84, 104, .9); }
.l-hp-num { font-family: var(--f-display); font-weight: 900; font-size: 25px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000; }
.l-hp.low .l-hp-num { color: #ff9aa6; }
.l-name { position: absolute; right: 64px; top: -14px; white-space: nowrap; font-family: var(--f-jp); font-size: 16px; letter-spacing: .1em; color: var(--paper); text-shadow: 0 1px 4px #000; text-align: right; }
.l-count { position: absolute; right: 64px; top: -46px; white-space: nowrap; padding: 2px 12px; font-family: var(--f-display); font-size: 14px; font-weight: 700; color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-radius: 10px; }
.leader.opp .l-count { top: 36px; }
.leader.targetable .l-orb { box-shadow: 0 0 0 4px var(--crimson), 0 0 34px 8px rgba(255, 84, 104, .9); cursor: crosshair; animation: pulse 1s ease-in-out infinite; }
.leader.hit .l-orb { animation: lshake .4s; }
@keyframes lshake { 0%, 100% { transform: none; } 20% { transform: translate(-9px, 4px) rotate(-4deg); } 40% { transform: translate(8px, -5px) rotate(3deg); } 60% { transform: translate(-6px, 2px); } 80% { transform: translate(4px, -2px); } }
.l-emote { position: absolute; left: 70px; top: -58px; white-space: nowrap; padding: 9px 18px; font-family: var(--f-jp); font-size: 16px; color: var(--ink); background: var(--paper); border-radius: 18px 18px 18px 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); animation: rise .25s ease both; z-index: 30; }
.leader.opp .l-emote { top: 56px; border-radius: 4px 18px 18px 18px; }

.pp { position: absolute; display: flex; align-items: center; gap: 10px; z-index: 3; }
.pp.me { left: 300px; top: 642px; flex-direction: column-reverse; align-items: flex-start; gap: 7px; }
.pp.opp { left: 790px; top: 30px; }
.pp-orbs { display: flex; gap: 4px; }
.pp-orb { width: 17px; height: 17px; border-radius: 50%; background: #0a0e24; border: 1.5px solid #3b4680; transform: rotate(45deg); border-radius: 3px; transition: background .3s, box-shadow .3s, opacity .3s; }
.pp-orb.max { border-color: var(--gold-lo); }
.pp-orb.full { background: radial-gradient(circle at 35% 30%, #d7f4ff, var(--azure) 55%, #1869c9); border-color: #bfeaff; box-shadow: 0 0 9px rgba(88, 200, 255, .95); }
.pp-orb.none { opacity: .22; }
.pp-orb.bonus { background: radial-gradient(circle at 35% 30%, #fff6d0, var(--gold) 55%, #b07a1a); border-color: #ffe9a8; box-shadow: 0 0 9px rgba(255, 210, 110, .95); }
.pp.opp .pp-orb { width: 12px; height: 12px; }
.pp-num { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: #cfeeff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.pp-num small { font-family: var(--f-body); font-size: 11px; color: var(--mute); margin-right: 5px; letter-spacing: .1em; }

.deck { position: absolute; left: 1178px; width: 70px; height: 98px; z-index: 2; }
.deck.me { top: 420px; }
.deck.opp { top: 100px; }
.deck-pile, .back-face { border-radius: 6px; border: 2px solid transparent;
  background: radial-gradient(circle at 50% 50%, rgba(232, 196, 104, .0) 0 22%, rgba(232, 196, 104, .55) 23% 25%, transparent 26% 34%, rgba(232, 196, 104, .35) 35% 36%, transparent 37%) padding-box,
    linear-gradient(160deg, #1d2a6e, #0a0e2c) padding-box, linear-gradient(135deg, var(--gold-hi), var(--gold-lo) 50%, var(--gold)) border-box; }
.deck-pile { position: absolute; inset: 0; box-shadow: 3px 3px 0 #0a0e2c, 4px 4px 0 var(--gold-lo), 7px 7px 0 #0a0e2c, 8px 8px 0 var(--gold-lo), 0 10px 18px rgba(0, 0, 0, .6); }
.deck-n { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--paper); text-shadow: 0 1px 4px #000; }
.deck-n small { font-family: var(--f-body); font-size: 10px; color: var(--mute); margin-right: 4px; }
.deck.low .deck-n { color: #ff9aa6; }
.handcount { position: absolute; left: 214px; top: 86px; font-size: 12px; color: var(--mute); letter-spacing: .08em; z-index: 3; }

#units, #hand-me, #hand-opp, #floaters { position: absolute; inset: 0; pointer-events: none; }
#units { z-index: 5; }
#hand-opp { z-index: 6; }
#hand-me { z-index: 8; }
#fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
#floaters { z-index: 25; }

/* 場のクリエイター */
.unit { position: absolute; left: 0; top: 0; width: 124px; height: 150px; margin: -75px 0 0 -62px; pointer-events: auto; cursor: pointer; transition: transform .4s cubic-bezier(.2, .9, .3, 1); will-change: transform; }
.unit.lunge { transition: transform .16s cubic-bezier(.5, 0, .9, .4); z-index: 9; }
.unit.back { transition: transform .32s cubic-bezier(.2, .9, .3, 1.2); z-index: 9; }
.u-body { position: absolute; inset: 0; transition: filter .25s, transform .2s; }
.u-body::before { content: ''; position: absolute; inset: 0; border-radius: 62px 62px 12px 12px / 54px 54px 12px 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, .6); transition: box-shadow .25s; }
.u-art { position: absolute; inset: 3px; border-radius: 59px 59px 10px 10px / 51px 51px 10px 10px; background-size: cover; background-repeat: no-repeat; background-color: #0a0e2c; overflow: hidden; transition: filter .3s; }
.u-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(7, 9, 22, .82) 100%); }
.u-frame { position: absolute; inset: 0; border-radius: 62px 62px 12px 12px / 54px 54px 12px 12px; padding: 4px; pointer-events: none;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-lo) 40%, var(--gold) 70%, var(--gold-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.unit.me .u-body::before { box-shadow: 0 8px 16px rgba(0, 0, 0, .6), 0 0 0 1.5px rgba(88, 200, 255, .55); }
.unit.opp .u-body::before { box-shadow: 0 8px 16px rgba(0, 0, 0, .6), 0 0 0 1.5px rgba(255, 84, 104, .55); }
.u-mark { position: absolute; left: 50%; top: -9px; transform: translateX(-50%); min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: #0a0e2c; border: 1.5px solid var(--gold); font-size: 12px; line-height: 19px; text-align: center; color: var(--gold-hi); }
.u-atk, .u-hp { position: absolute; bottom: -8px; width: 44px; height: 36px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 4px #000; font-variant-numeric: tabular-nums; }
.u-atk { left: -8px; background: radial-gradient(circle at 40% 30%, #ffd98a, #c9861b 60%, #6b3e06); clip-path: polygon(50% 0, 100% 30%, 86% 100%, 14% 100%, 0 30%); }
.u-hp { right: -8px; background: radial-gradient(circle at 40% 30%, #ff9aa6, #d42b45 60%, #6b0a1a); clip-path: polygon(50% 100%, 0 40%, 8% 8%, 50% 14%, 92% 8%, 100% 40%); padding-bottom: 5px; }
.u-atk.up, .u-hp.up { color: #a8ffca; }
.u-atk.down, .u-hp.down { color: #ffc2c9; }
.u-shield { position: absolute; right: -10px; top: 26px; min-width: 38px; height: 28px; padding: 0 6px; display: flex; align-items: center; justify-content: center; gap: 2px; font-family: var(--f-display); font-weight: 700; font-size: 15px; color: #e6f7ff;
  background: linear-gradient(180deg, #4aa6ff, #1b4fb0); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); padding-bottom: 5px; filter: drop-shadow(0 0 6px rgba(88, 200, 255, .9)); }
.unit.shielded .u-body::after { content: ''; position: absolute; inset: -8px; border-radius: 68px 68px 16px 16px / 60px 60px 16px 16px; pointer-events: none; border: 2px solid rgba(120, 210, 255, .8); box-shadow: 0 0 14px rgba(88, 200, 255, .7), inset 0 0 14px rgba(88, 200, 255, .35); animation: pulse 2.2s ease-in-out infinite; }
.u-tags { position: absolute; left: -10px; top: 24px; display: flex; flex-direction: column; gap: 3px; }
.tag { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); font-family: var(--f-body); }
.tag-rush { background: #2f9e62; } .tag-storm { background: #d98a13; } .tag-stormNext { background: #7a5a1c; } .tag-noact { background: #555c86; } .tag-half { background: #2d6fd0; }
.tag-nobanish { background: #7a4fd0; } .tag-doom { background: #8a1232; } .tag-endshield { background: #2b8fbf; } .tag-maxhp { background: #c2436b; } .tag-pick { background: #b0872a; }
.u-zz { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-family: var(--f-display); font-weight: 700; font-size: 22px; color: #dfe6ff; text-shadow: 0 0 8px #000, 0 2px 0 #000; opacity: 0; transition: opacity .3s; letter-spacing: .1em; }
.unit.asleep .u-zz { opacity: .95; }
.unit.asleep .u-art { filter: saturate(.35) brightness(.6); }
.unit.spent .u-art { filter: saturate(.55) brightness(.72); }
/* 行動できる味方：少し浮かせて、ふちの光をゆっくり明滅させる。行動を終えた味方は少し暗く */
.unit.ready .u-body { transform: translateY(-7px); }
.unit.ready .u-body::before { box-shadow: 0 15px 20px rgba(0, 0, 0, .55), 0 0 0 2.5px #dfffe9, 0 0 22px 6px rgba(111, 230, 160, .9); animation: ready-g 1.5s ease-in-out infinite; }
.unit.ready.can-atk .u-body::before { box-shadow: 0 15px 20px rgba(0, 0, 0, .55), 0 0 0 2.5px #fff6cf, 0 0 24px 7px rgba(255, 214, 110, .98); animation-name: ready-a; }
@keyframes ready-g { 0%, 100% { box-shadow: 0 15px 20px rgba(0, 0, 0, .55), 0 0 0 2.5px #dfffe9, 0 0 14px 3px rgba(111, 230, 160, .6); } 50% { box-shadow: 0 15px 20px rgba(0, 0, 0, .55), 0 0 0 3px #fff, 0 0 30px 10px rgba(111, 230, 160, 1); } }
@keyframes ready-a { 0%, 100% { box-shadow: 0 15px 20px rgba(0, 0, 0, .55), 0 0 0 2.5px #fff6cf, 0 0 14px 3px rgba(255, 214, 110, .65); } 50% { box-shadow: 0 15px 20px rgba(0, 0, 0, .55), 0 0 0 3px #fff, 0 0 32px 11px rgba(255, 214, 110, 1); } }
.unit.spent .u-atk, .unit.spent .u-hp { filter: saturate(.6) brightness(.8); }
.unit.ready:hover .u-body { transform: translateY(-11px) scale(1.05); }
.unit.selected .u-body { transform: translateY(-12px) scale(1.07); }
.unit.selected .u-body::before { animation: none; box-shadow: 0 14px 22px rgba(0, 0, 0, .7), 0 0 0 3px #fff, 0 0 30px 10px rgba(88, 200, 255, .95); }
.unit.targetable { z-index: 7; cursor: crosshair; }
.unit.targetable .u-body { transform: none; }
.unit.targetable .u-body::before { box-shadow: 0 0 0 3px var(--crimson), 0 0 28px 8px rgba(255, 84, 104, .95); animation: pulse .9s ease-in-out infinite; }
.unit.targetable.friendly .u-body::before { box-shadow: 0 0 0 3px var(--jade), 0 0 28px 8px rgba(111, 230, 160, .95); }
.unit.dim .u-body { filter: brightness(.45) saturate(.6); }
.unit.hit .u-body { animation: uhit .36s; }
@keyframes uhit { 0% { transform: none; filter: brightness(3.2) saturate(0); } 25% { transform: translate(-9px, 3px) rotate(-3deg); filter: brightness(1.8); } 50% { transform: translate(8px, -3px) rotate(3deg); filter: none; } 75% { transform: translate(-4px, 1px); } 100% { transform: none; } }
.unit.summon .u-body { animation: usummon .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes usummon { 0% { transform: scale(1.9) translateY(-40px); opacity: 0; filter: brightness(3); } 60% { transform: scale(.94); opacity: 1; filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.unit.cast .u-body { animation: ucast .6s ease; }
@keyframes ucast { 0%, 100% { transform: none; filter: none; } 35% { transform: translateY(-12px) scale(1.12); filter: brightness(1.7) drop-shadow(0 0 16px var(--gold-hi)); } }
.unit.die .u-body { animation: udie .55s ease-in forwards; }
@keyframes udie { 0% { filter: brightness(3) saturate(0); transform: scale(1.06); } 30% { filter: brightness(1.4) sepia(1) hue-rotate(-30deg); transform: scale(1.02) rotate(2deg); } 100% { filter: brightness(.2); transform: scale(.55) translateY(40px) rotate(-10deg); opacity: 0; } }
.unit.banish .u-body { animation: ubanish .6s ease-in forwards; }
@keyframes ubanish { 0% { filter: hue-rotate(0) brightness(1.6); transform: none; } 100% { filter: hue-rotate(200deg) brightness(2.4) blur(4px); transform: scale(.05) rotate(520deg); opacity: 0; } }
.unit.morph .u-body { animation: umorph .5s ease both; }
@keyframes umorph { 0% { filter: brightness(6) saturate(0); transform: scale(.3) rotate(-30deg); opacity: 0; } 100% { filter: none; transform: none; opacity: 1; } }

/* カード面（手札・図鑑・選択で共用） */
.cf { position: relative; width: 132px; height: 184px; border-radius: 9px; border: 3px solid transparent; flex: none;
  background: linear-gradient(180deg, #151b45, #0a0d26) padding-box, linear-gradient(150deg, var(--gold-hi), var(--gold-lo) 38%, var(--gold) 66%, var(--gold-lo)) border-box;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .65); }
.cf-art { position: absolute; left: 4px; right: 4px; top: 4px; height: 84px; border-radius: 5px 5px 0 0; background-size: cover; background-repeat: no-repeat; background-color: #0a0e2c; }
.cf-art.item { display: flex; align-items: center; justify-content: center; font-size: 48px; background: radial-gradient(circle at 50% 45%, #2f6a4a, #0d2018 80%); }
.cf-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(180deg, transparent, #10153a); }
.cf-cost { position: absolute; left: -10px; top: -10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000;
  background: radial-gradient(circle at 35% 30%, #c9f0ff, var(--azure) 45%, #114fa8); border-radius: 50%; border: 2px solid #e4f6ff; box-shadow: 0 0 10px rgba(88, 200, 255, .8), 0 3px 5px rgba(0, 0, 0, .6); }
.cf-cost.down { color: #a8ffca; }
.cf-mark { position: absolute; right: 5px; top: 5px; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 11px; background: rgba(7, 9, 22, .85); border: 1px solid var(--gold); font-size: 12px; line-height: 20px; text-align: center; color: var(--gold-hi); }
.cf-name { position: absolute; left: 6px; right: 6px; top: 86px; height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--f-jp); font-weight: 700; font-size: 11.5px; line-height: 1.25; color: var(--gold-hi); text-shadow: 0 1px 2px #000; text-wrap: balance; }
.cf-skills { position: absolute; left: 7px; right: 7px; top: 122px; display: flex; flex-direction: column; gap: 2px; }
.cf-skills span { display: block; height: 15px; padding: 0 5px; font-size: 9.5px; line-height: 15px; color: var(--paper); background: rgba(88, 200, 255, .13); border-left: 2px solid var(--azure); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cf-skills span.none { opacity: .4; border-color: var(--mute); }
.cf-item-text { position: absolute; left: 8px; right: 8px; top: 122px; font-size: 10px; line-height: 1.45; color: var(--paper); }
.cf-atk, .cf-hp { position: absolute; bottom: -8px; width: 38px; height: 32px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 900; font-size: 17px; color: #fff; text-shadow: 0 2px 0 #000; }
.cf-atk { left: -8px; background: radial-gradient(circle at 40% 30%, #ffd98a, #c9861b 60%, #6b3e06); clip-path: polygon(50% 0, 100% 30%, 86% 100%, 14% 100%, 0 30%); }
.cf-hp { right: -8px; background: radial-gradient(circle at 40% 30%, #ff9aa6, #d42b45 60%, #6b0a1a); clip-path: polygon(50% 100%, 0 40%, 8% 8%, 50% 14%, 92% 8%, 100% 40%); padding-bottom: 4px; }
.cf-type { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 9.5px; letter-spacing: .2em; color: var(--mute); }

.card { position: absolute; left: 0; top: 0; width: 132px; height: 184px; margin: -92px 0 0 -66px; pointer-events: auto; cursor: grab; transition: transform .32s cubic-bezier(.2, .9, .3, 1), opacity .3s; will-change: transform; }
.card.playable .cf { box-shadow: 0 6px 14px rgba(0, 0, 0, .65), 0 0 0 2px #e6fff0, 0 0 18px 4px rgba(111, 230, 160, .9); }
.card.costly .cf-cost { filter: grayscale(.7) brightness(.75); }
.card.drag { transition: none; cursor: grabbing; z-index: 50; }
.card.drag .cf { box-shadow: 0 24px 40px rgba(0, 0, 0, .7), 0 0 0 2px #fff, 0 0 30px 8px rgba(88, 200, 255, .9); }
.card.fresh .cf { animation: cfresh .5s ease; }
@keyframes cfresh { 0% { filter: brightness(3); } 100% { filter: none; } }
.card.pickable .cf { box-shadow: 0 0 0 3px var(--violet), 0 0 24px 6px rgba(180, 140, 255, .9); }
.card.gone { opacity: 0; }
.play-btn { position: absolute; left: 50%; top: -44px; transform: translateX(-50%); white-space: nowrap; padding: 7px 22px; font: 700 15px var(--f-jp); letter-spacing: .14em; color: var(--ink); background: linear-gradient(180deg, #d9ffe8, var(--jade)); border: 0; border-radius: 18px; box-shadow: 0 4px 12px rgba(0, 0, 0, .6), 0 0 16px rgba(111, 230, 160, .8); }
.play-btn.no { background: #4a5080; color: #cfd4ee; box-shadow: none; cursor: default; }

.backcard { position: absolute; left: 0; top: 0; width: 76px; height: 106px; margin: -53px 0 0 -38px; transition: transform .32s cubic-bezier(.2, .9, .3, 1), opacity .3s; }
.back-face { position: absolute; inset: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); }

/* ターン終了ボタン・タイマー */
.end-btn { position: absolute; left: 1154px; top: 262px; width: 116px; height: 116px; border-radius: 50%; border: 3px solid transparent; z-index: 9;
  background: radial-gradient(circle at 50% 35%, #2f7fd6, #0c2a66 70%) padding-box, conic-gradient(var(--gold-hi), var(--gold-lo), var(--gold), var(--gold-lo), var(--gold-hi)) border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 0 26px rgba(88, 200, 255, .75), 0 8px 16px rgba(0, 0, 0, .6); transition: transform .15s, filter .2s; }
.end-btn .eb-main { font-family: var(--f-jp); font-weight: 800; font-size: 17px; letter-spacing: .08em; color: #fff; text-shadow: 0 2px 0 #000; }
.end-btn .eb-sub { font-size: 10px; color: #cfeeff; letter-spacing: .08em; min-height: 12px; }
.end-btn:hover:not(:disabled) { transform: scale(1.07); filter: brightness(1.2); }
.end-btn:disabled { background: radial-gradient(circle at 50% 35%, #4b3340, #1c0f16 70%) padding-box, conic-gradient(#8f8770, #4d452f, #8f8770) border-box; box-shadow: 0 8px 16px rgba(0, 0, 0, .6); cursor: default; }
.end-btn:disabled .eb-main { color: #b9a8ae; font-size: 14px; }
.end-btn.nudge { animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 26px rgba(88, 200, 255, .75), 0 8px 16px rgba(0, 0, 0, .6); } 50% { box-shadow: 0 0 44px 10px rgba(255, 240, 184, .95), 0 8px 16px rgba(0, 0, 0, .6); } }
.timer { position: absolute; left: 1134px; top: 384px; width: 146px; text-align: center; font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.1; color: var(--paper); z-index: 9; text-shadow: 0 1px 4px #000; white-space: nowrap; }
.timer b { display: block; font-weight: 700; }
.timer small { display: block; margin-top: 2px; font-family: var(--f-body); font-weight: 500; font-size: 10.5px; letter-spacing: 0; color: var(--mute); }
.timer.long b { font-size: 15px; line-height: 1.5; }
.timer.warn { color: var(--gold-hi); }
.timer.hot { color: var(--crimson); animation: pulse .6s ease-in-out infinite; }
.turn-ind { position: absolute; left: 1154px; top: 228px; width: 116px; text-align: center; font-family: var(--f-display); font-size: 12px; letter-spacing: .2em; color: var(--mute); z-index: 9; }

/* 左の情報パネル */
.info { position: absolute; left: 12px; top: 136px; width: 244px; height: 436px; padding: 12px 13px; z-index: 10; overflow: hidden;
  border: 1px solid rgba(232, 196, 104, .5); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 19, 48, .93), rgba(7, 9, 22, .93)); box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
.info-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--mute); font-size: 12px; line-height: 1.8; }
.info-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.info-type { flex: none; padding: 1px 8px; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: var(--ink); letter-spacing: .08em; }
.info-no { font-family: var(--f-display); font-size: 10px; color: var(--mute); letter-spacing: .1em; }
.info-name { margin: 0; font-family: var(--f-jp); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--gold-hi); }
.info-stats { display: flex; gap: 6px; margin: 7px 0 8px; flex-wrap: wrap; }
.info-stats span { padding: 2px 8px; border-radius: 3px; font-family: var(--f-display); font-weight: 700; font-size: 13px; background: rgba(255, 255, 255, .08); }
.info-stats small { font-family: var(--f-body); font-size: 9.5px; color: var(--mute); margin-right: 4px; }
.info-stats .st-cost { color: #bfeaff; } .info-stats .st-atk { color: #ffd98a; } .info-stats .st-hp { color: #ffb3bc; } .info-stats .st-sh { color: #9fd8ff; }
.info-sec { margin-top: 6px; padding: 6px 8px; background: rgba(88, 200, 255, .08); border-left: 2px solid var(--azure); }
.info-sec.trait { background: rgba(232, 196, 104, .09); border-left-color: var(--gold); }
.info-sec.none { opacity: .5; }
.info-sec h4 { margin: 0 0 2px; font-family: var(--f-jp); font-size: 12.5px; color: #fff; letter-spacing: .04em; }
.info-sec h4 small { font-family: var(--f-body); font-weight: 500; font-size: 9.5px; color: var(--mute); margin-right: 6px; letter-spacing: .1em; }
.info-sec p { margin: 0; font-size: 11.2px; line-height: 1.5; color: var(--paper); }
.info-sec .note { margin-top: 2px; font-size: 10px; color: var(--mute); }
.info-status { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.info-status span { padding: 1px 7px; border-radius: 9px; font-size: 10px; background: rgba(180, 140, 255, .22); color: #e4d8ff; }
.info-more { position: absolute; right: 8px; bottom: 6px; padding: 3px 10px; font-size: 10.5px; color: var(--gold); background: rgba(7, 9, 22, .9); border: 1px solid rgba(232, 196, 104, .5); border-radius: 10px; }

.sys-btn { position: absolute; left: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232, 196, 104, .6); background: rgba(7, 9, 22, .8); font-size: 19px; color: var(--gold-hi); z-index: 12; }
.emote-btn { position: absolute; left: 250px; top: 664px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(232, 196, 104, .6); background: rgba(7, 9, 22, .8); font-size: 17px; z-index: 12; }
.emote-menu { position: absolute; left: 250px; top: 346px; width: 312px; display: flex; flex-direction: column; gap: 5px; z-index: 45; }
.emote-menu > button { width: 210px; padding: 8px 12px; text-align: left; font: 500 14px var(--f-jp); color: var(--ink); background: var(--paper); border: 0; border-radius: 14px 14px 14px 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.emote-menu > button:hover { background: #fff; }

.arrow { position: absolute; inset: 0; z-index: 22; pointer-events: none; color: #ffe49a; filter: drop-shadow(0 0 8px rgba(255, 214, 110, .95)); opacity: 0; }
.arrow.on { opacity: 1; }
.arrow.hostile { color: #ff8b98; filter: drop-shadow(0 0 8px rgba(255, 84, 104, .95)); }
.arrow.on #arrow-path { animation: dash .5s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16; } }

.floater { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--f-display); font-weight: 900; font-size: 46px; white-space: nowrap; pointer-events: none; animation: floatup 1s ease-out forwards; text-shadow: 0 3px 0 #000, 0 0 10px #000, 0 0 3px #000; }
.floater.dmg { color: #ff5468; -webkit-text-stroke: 1.5px #fff; }
.floater.heal { color: var(--jade); -webkit-text-stroke: 1px #0b3320; }
.floater.shield { color: #8fd4ff; font-size: 34px; }
.floater.block { color: #cfe9ff; font-size: 28px; }
.floater.buff { color: #ffe08a; font-size: 30px; }
.floater.debuff { color: #c9a4ff; font-size: 30px; }
.floater.label { font-family: var(--f-jp); font-weight: 800; font-size: 20px; color: #fff; padding: 3px 14px; background: linear-gradient(90deg, transparent, rgba(7, 9, 22, .9) 15%, rgba(7, 9, 22, .9) 85%, transparent); letter-spacing: .1em; }
.floater.label.trait { color: var(--gold-hi); }
.floater.big { font-size: 64px; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 14% { opacity: 1; transform: translate(-50%, -62%) scale(1.3); } 30% { transform: translate(-50%, -70%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -130%) scale(1); } }

.umenu { position: absolute; width: 268px; display: flex; flex-direction: column; gap: 6px; z-index: 40; animation: rise .16s ease both; }
.umenu button { text-align: left; padding: 8px 12px 9px; border: 1.5px solid transparent; border-radius: 4px; background: linear-gradient(180deg, #1c2660, #0b0f2e) padding-box, linear-gradient(135deg, var(--gold-hi), var(--gold-lo)) border-box; box-shadow: 0 6px 14px rgba(0, 0, 0, .6); }
.umenu button b { display: block; font-family: var(--f-jp); font-size: 15px; color: var(--gold-hi); letter-spacing: .06em; }
.umenu button b small { font-family: var(--f-body); font-size: 10px; color: var(--azure); margin-right: 7px; letter-spacing: .12em; }
.umenu button span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--paper); opacity: .9; }
.umenu button:hover:not(:disabled) { filter: brightness(1.35); }
.umenu button:disabled { opacity: .45; cursor: default; }
.umenu button.atk b small { color: #ffd98a; }
.umenu .why { font-size: 11px; color: var(--mute); padding: 2px 4px; text-shadow: 0 1px 3px #000; }

.prompt { position: absolute; left: 50%; top: 528px; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 16px; padding: 9px 12px 9px 26px; z-index: 41; border-radius: 26px; background: rgba(7, 9, 22, .93); border: 1.5px solid var(--gold); box-shadow: 0 6px 20px rgba(0, 0, 0, .7); font-family: var(--f-jp); font-size: 16px; letter-spacing: .08em; white-space: nowrap; }
.prompt button { padding: 6px 18px; border-radius: 16px; border: 0; background: #4a5080; color: #fff; font-size: 13px; }

.reveal { position: absolute; left: 640px; top: 330px; width: 0; height: 0; z-index: 31; pointer-events: none; }
.reveal .cf { position: absolute; left: -66px; top: -92px; transform: scale(1.9); animation: revealin .7s ease both; }
.reveal.out .cf { animation: revealout .25s ease-in forwards; }
@keyframes revealin { 0% { transform: scale(.6) rotateY(90deg); opacity: 0; filter: brightness(4); } 45% { transform: scale(2.05) rotateY(0); opacity: 1; filter: brightness(1.5); } 100% { transform: scale(1.9); filter: none; } }
@keyframes revealout { to { transform: scale(1.2) translateY(-30px); opacity: 0; } }

.cutin { position: absolute; left: 0; right: 0; top: 232px; height: 190px; z-index: 30; pointer-events: none; overflow: hidden; animation: cutin-band .28s cubic-bezier(.2, .9, .3, 1) both; }
.cutin::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 9, 22, .0), rgba(7, 9, 22, .94) 16%, rgba(7, 9, 22, .94) 84%, rgba(7, 9, 22, 0)); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.cutin.opp::before { border-color: var(--crimson); }
.cutin-art { position: absolute; left: 150px; top: 0; bottom: 0; width: 470px; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 70%, transparent); animation: cutin-art .9s ease-out both; }
.cutin.opp .cutin-art { left: auto; right: 150px; }
.cutin-txt { position: absolute; left: 620px; right: 150px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; animation: cutin-txt .4s .08s cubic-bezier(.2, .9, .3, 1) both; }
.cutin.opp .cutin-txt { left: 150px; right: 620px; text-align: right; align-items: flex-end; }
.cutin-who { font-family: var(--f-jp); font-size: 15px; color: var(--gold); letter-spacing: .14em; }
.cutin.opp .cutin-who { color: #ff9aa6; }
.cutin-name { font-family: var(--f-jp); font-weight: 800; font-size: 42px; line-height: 1.15; color: #fff; letter-spacing: .08em; text-shadow: 0 0 18px rgba(232, 196, 104, .8), 0 3px 0 #000; }
.cutin-desc { max-width: 480px; font-size: 14px; line-height: 1.55; color: var(--paper); }
.cutin.out { animation: cutin-out .2s ease-in forwards; }
@keyframes cutin-band { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cutin-art { from { transform: translateX(-70px) scale(1.12); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(0) scale(1.03); opacity: 1; } }
@keyframes cutin-txt { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cutin-out { to { clip-path: inset(50% 0 50% 0); opacity: 0; } }

.banner { position: absolute; left: 0; right: 0; top: 250px; height: 150px; z-index: 32; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.banner-line { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(12, 42, 102, .92) 20%, rgba(12, 42, 102, .92) 80%, transparent); border-top: 2px solid var(--azure); border-bottom: 2px solid var(--azure); animation: banner-line 1.25s ease both; }
.banner.opp .banner-line { background: linear-gradient(90deg, transparent, rgba(102, 12, 30, .92) 20%, rgba(102, 12, 30, .92) 80%, transparent); border-color: var(--crimson); }
.banner-text { position: relative; font-family: var(--f-display); font-weight: 900; font-size: 68px; letter-spacing: .16em; color: #fff; text-shadow: 0 0 24px rgba(88, 200, 255, .95), 0 4px 0 #000; animation: banner-text 1.25s ease both; }
.banner.opp .banner-text { text-shadow: 0 0 24px rgba(255, 84, 104, .95), 0 4px 0 #000; }
.banner-sub { position: relative; font-family: var(--f-jp); font-size: 16px; letter-spacing: .4em; color: var(--paper); animation: banner-text 1.25s ease both; }
@keyframes banner-line { 0% { transform: scaleY(0); opacity: 0; } 14% { transform: scaleY(1); opacity: 1; } 80% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes banner-text { 0% { transform: translateX(-160px); opacity: 0; letter-spacing: .5em; } 18% { transform: none; opacity: 1; } 78% { transform: none; opacity: 1; } 100% { transform: translateX(160px); opacity: 0; } }

#stage.shake { animation: sshake .32s; }
#stage.shake-big { animation: sshake-big .5s; }
@keyframes sshake { 0%, 100% { margin: 0; } 25% { margin: -4px 0 0 5px; } 50% { margin: 4px 0 0 -5px; } 75% { margin: -2px 0 0 3px; } }
@keyframes sshake-big { 0%, 100% { margin: 0; } 15% { margin: -10px 0 0 12px; } 30% { margin: 9px 0 0 -11px; } 45% { margin: -7px 0 0 8px; } 60% { margin: 5px 0 0 -6px; } 80% { margin: -2px 0 0 3px; } }

/* ───────── オーバーレイ ───────── */
.overlay { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 16, .82); animation: ovin .22s ease both; }
.overlay.soft { background: none; pointer-events: none; align-items: flex-start; padding-top: 316px; z-index: 44; }
@keyframes ovin { from { opacity: 0; } to { opacity: 1; } }
.ov-box { position: relative; min-width: 440px; max-width: 1100px; padding: 30px 40px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
  border: 1.5px solid transparent; border-radius: 6px; background: linear-gradient(180deg, #131a45, #080b20) padding-box, linear-gradient(160deg, var(--gold-hi), var(--gold-lo) 50%, var(--gold)) border-box; box-shadow: 0 20px 60px rgba(0, 0, 0, .8); }
.ov-box.wide { min-width: 760px; }
.ov-box.full { width: 1180px; max-width: none; height: 650px; padding: 22px 30px; align-items: stretch; text-align: left; }
.ov-head { display: flex; align-items: center; gap: 24px; width: 100%; }
.ov-head .h-display { flex: none; }
.x-btn { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(232, 196, 104, .6); background: rgba(7, 9, 22, .9); font-size: 22px; line-height: 1; color: var(--gold-hi); flex: none; }
.btn-row { display: flex; gap: 18px; justify-content: center; }
.wait-chip { display: flex; align-items: center; gap: 12px; padding: 10px 22px; border-radius: 28px; background: rgba(7, 9, 22, .93); border: 1px solid var(--gold); font-family: var(--f-jp); font-size: 15px; letter-spacing: .08em; }

.pick-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; max-width: 1040px; max-height: 420px; overflow-y: auto; padding: 16px 14px 18px; touch-action: pan-y; }
.num-grid { display: grid; grid-template-columns: repeat(5, 124px); gap: 12px; padding: 4px 0 2px; }
.num-btn { height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: #f4ecd8;
  background: linear-gradient(180deg, rgba(40, 52, 110, .92), rgba(18, 22, 52, .96)); border: 1px solid rgba(232, 196, 104, .55); transition: transform .12s, box-shadow .12s; }
.num-btn b { font: 700 34px var(--f-display); color: var(--gold); line-height: 1; }
.num-btn span { font-size: 11.5px; color: var(--mute); letter-spacing: .04em; }
.num-btn:hover { transform: translateY(-3px); }
.num-btn.zero { opacity: .55; }
.num-btn.sel { box-shadow: 0 0 0 3px #fff, 0 0 24px 6px rgba(180, 140, 255, .9); opacity: 1; }
.pick-item { position: relative; width: 132px; height: 184px; cursor: pointer; transition: transform .15s; flex: none; }
.pick-cards.big .pick-item { width: 172px; height: 240px; }
.pick-cards.big .pick-item .cf { transform: scale(1.3); transform-origin: 0 0; }
.pick-item:hover { transform: translateY(-5px); }
.pick-item.sel .cf { box-shadow: 0 0 0 3px #fff, 0 0 26px 8px rgba(180, 140, 255, .95); }
.pick-item.sel::after { content: attr(data-badge); position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg); padding: 4px 16px; font: 800 17px var(--f-jp); letter-spacing: .14em; color: #fff; background: rgba(122, 79, 208, .94); border: 2px solid #fff; white-space: nowrap; z-index: 3; }

.detail { position: relative; display: flex; gap: 30px; align-items: center; padding: 20px 30px; }
#detail-img { height: 660px; width: auto; border-radius: 12px; box-shadow: 0 20px 60px #000, 0 0 40px rgba(232, 196, 104, .3); }
.detail-text { width: 430px; max-height: 660px; overflow-y: auto; padding: 18px 20px; background: var(--panel); border: 1px solid rgba(232, 196, 104, .5); border-radius: 6px; touch-action: pan-y; }
.detail-text .info-name { font-size: 24px; }
.detail-text .info-sec h4 { font-size: 15px; }
.detail-text .info-sec p { font-size: 13.5px; line-height: 1.65; }
.detail-text .info-sec .note { font-size: 12px; }
.detail-text .info-stats span { font-size: 16px; }
.detail-src { margin: 12px 0 0; font-size: 11px; line-height: 1.6; color: var(--mute); }
.detail .x-btn { position: absolute; right: -10px; top: 8px; }

.tabs { display: flex; gap: 8px; }
.tabs button { padding: 6px 18px; border-radius: 16px; border: 1px solid rgba(232, 196, 104, .45); background: transparent; font-size: 14px; color: var(--paper); }
.tabs button.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); font-weight: 700; }
.gal-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(7, 132px); justify-content: space-between; gap: 26px 0; padding: 18px 14px 20px; touch-action: pan-y; }
.gal-grid .pick-item .tok { position: absolute; left: 50%; bottom: -19px; transform: translateX(-50%); font-size: 10.5px; color: var(--mute); white-space: nowrap; }

.rules { flex: 1; overflow-y: auto; padding: 4px 16px 16px 4px; columns: 2; column-gap: 40px; touch-action: pan-y; }
.rules h3 { margin: 16px 0 6px; font-family: var(--f-jp); font-size: 18px; color: var(--gold-hi); letter-spacing: .12em; break-after: avoid; border-bottom: 1px solid rgba(232, 196, 104, .35); padding-bottom: 4px; }
.rules h3:first-child { margin-top: 0; }
.rules p, .rules li { font-size: 13.5px; line-height: 1.75; color: var(--paper); }
.rules p { margin: 0 0 6px; }
.rules ul { margin: 0 0 6px; padding-left: 1.3em; }
.rules dl { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; font-size: 13.5px; line-height: 1.65; }
.rules dt { color: var(--azure); font-weight: 700; }
.rules dd { margin: 0; }
.rules section { break-inside: avoid; }

.slider, .seg { display: flex; align-items: center; gap: 18px; width: 380px; font-size: 16px; }
.slider span, .seg span { width: 100px; text-align: left; font-family: var(--f-jp); letter-spacing: .1em; }
.slider input { flex: 1; accent-color: var(--gold); height: 28px; }
.seg button { padding: 7px 22px; border: 1px solid rgba(232, 196, 104, .45); background: transparent; border-radius: 16px; font-size: 14px; }
.seg button.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: var(--ink); font-weight: 700; }
#ov-settings hr { width: 100%; border: 0; border-top: 1px solid rgba(232, 196, 104, .3); margin: 0 0 20px; }
#sys-battle { width: 100%; display: flex; flex-direction: column; align-items: center; }

.result { background: rgba(4, 6, 16, .88); }
.result-rays { position: absolute; left: 50%; top: 50%; width: 1700px; height: 1700px; margin: -850px 0 0 -850px; background: repeating-conic-gradient(from 0deg, rgba(232, 196, 104, .16) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%); mask-image: radial-gradient(circle, #000 0, transparent 62%); animation: spin 50s linear infinite; }
.result.lose .result-rays { background: repeating-conic-gradient(from 0deg, rgba(120, 130, 190, .1) 0 6deg, transparent 6deg 18deg); }
.result-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.result-word { font-family: var(--f-display); font-weight: 900; font-size: 136px; letter-spacing: .14em; padding-left: .14em; line-height: 1;
  background: linear-gradient(180deg, #fff8dc, var(--gold-hi) 30%, var(--gold) 58%, #9a6f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(232, 196, 104, .8)); animation: resultin .8s cubic-bezier(.2, 1.3, .4, 1) both; }
.result.lose .result-word { background: linear-gradient(180deg, #dfe4ff, #8f9ad6 50%, #3d467e); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(120, 130, 220, .6)); }
@keyframes resultin { from { transform: scale(2.6); opacity: 0; letter-spacing: .6em; } to { transform: none; opacity: 1; } }
.result-reason { margin: 0; font-family: var(--f-jp); font-size: 21px; letter-spacing: .16em; color: var(--paper); }
.result-note { margin: 0; min-height: 20px; font-size: 13px; color: var(--mute); }

.toast { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 90; padding: 10px 26px; border-radius: 22px; background: rgba(7, 9, 22, .95); border: 1px solid var(--gold); font-size: 14px; letter-spacing: .06em; white-space: nowrap; animation: rise .25s ease both; pointer-events: none; }
.rotate-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 11px; color: var(--mute); z-index: 95; pointer-events: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(232, 196, 104, .4); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sigil, .l-crest, .title-art, .result-rays, .spinner, .sigil::after, .l-crest::after, .spinner::after { animation: none; }
  .unit, .card, .backcard { transition-duration: .01s; }
}

/* オーバーレイの重なり順（図鑑や選択画面の上に拡大表示を出す） */
#ov-settings { z-index: 70; }
#ov-detail { z-index: 72; }
#ov-confirm { z-index: 74; }

/* ───────── デッキ選択・デッキを組む ───────── */
.fld select, select.deck-select { height: 46px; padding: 0 12px; font: 500 16px var(--f-body); color: var(--paper); background: rgba(5, 7, 20, .9); border: 1px solid rgba(232, 196, 104, .45); border-radius: 4px; }
.deck-pick { display: flex; gap: 24px; }
.deck-pick .fld { width: 300px; text-align: left; }
.deck-scr { position: absolute; inset: 0; padding: 34px 60px 26px; display: flex; flex-direction: column; gap: 18px; }
.deck-scr .ov-head .lead { flex: 1; font-size: 13px; color: var(--mute); }
.deck-scr .ov-head .link-btn { margin-left: auto; }
.deck-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr; gap: 28px; }
.deck-list-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.deck-list { list-style: none; margin: 0; padding: 0 6px 0 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; }
.deck-list li { position: relative; padding: 11px 14px 11px 16px; background: rgba(18, 24, 60, .82); border-left: 3px solid rgba(232, 196, 104, .5); cursor: pointer; transition: background .15s; }
.deck-list li:hover { background: rgba(30, 40, 96, .9); }
.deck-list li.on { background: linear-gradient(90deg, rgba(48, 66, 150, .95), rgba(18, 24, 60, .9)); border-left-color: var(--gold-hi); }
.deck-list li b { display: block; font-family: var(--f-jp); font-size: 18px; color: var(--gold-hi); letter-spacing: .08em; }
.deck-list li small { font-size: 11.5px; color: var(--mute); }
.deck-list li .use { position: absolute; right: 10px; top: 10px; padding: 1px 9px; border-radius: 9px; font-size: 10.5px; font-weight: 700; color: var(--ink); background: var(--jade); }
.deck-list li .bad { color: #ffb3bc; }
.deck-view { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; border: 1px solid rgba(232, 196, 104, .45); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 19, 48, .93), rgba(7, 9, 22, .93)); }
.dv-head { display: flex; align-items: baseline; gap: 16px; }
.dv-head h3 { margin: 0; font-family: var(--f-jp); font-size: 26px; color: var(--gold-hi); letter-spacing: .1em; }
.dv-head .n { font-family: var(--f-display); font-size: 17px; color: var(--paper); }
.dv-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--paper); }
.dv-rps { display: flex; gap: 10px; flex-wrap: wrap; }
.dv-rps span { padding: 3px 12px; border-radius: 12px; font-size: 12.5px; }
.dv-rps .good { background: rgba(111, 230, 160, .18); color: #bdf5d4; border: 1px solid rgba(111, 230, 160, .5); }
.dv-rps .badm { background: rgba(255, 84, 104, .15); color: #ffc2c9; border: 1px solid rgba(255, 84, 104, .45); }
.dv-rps .ty { background: rgba(255, 255, 255, .07); color: var(--paper); }
.dv-curve { display: flex; align-items: flex-end; gap: 5px; height: 62px; padding-top: 4px; }
.dv-curve div { width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.dv-curve i { display: block; width: 100%; background: linear-gradient(180deg, var(--azure), #1b4fb0); border-radius: 2px 2px 0 0; min-height: 1px; }
.dv-curve small { font-family: var(--f-display); font-size: 10px; color: var(--mute); line-height: 1; }
.dv-cards { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; align-content: start; touch-action: pan-y; padding-right: 4px; }
.dv-row, .edit-list li { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 9px 0 4px; background: rgba(255, 255, 255, .05); font-size: 13px; cursor: pointer; }
.dv-row:hover, .edit-list li:hover { background: rgba(88, 200, 255, .16); }
.dv-row .c, .edit-list .c { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: 12px; color: #fff; background: radial-gradient(circle at 35% 30%, #9ddcff, #1869c9); }
.dv-row .m, .edit-list .m { flex: none; width: 20px; text-align: center; font-size: 11px; }
.dv-row .nm, .edit-list .nm { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-row .x, .edit-list .x { flex: none; font-family: var(--f-display); font-weight: 700; color: var(--gold-hi); }
.dv-btns { display: flex; gap: 12px; }
.dv-btns .mbtn.slim { min-height: 46px; padding: 6px 24px; }
.dv-btns .mbtn.slim b { font-size: 16px; }

.edit-scr { position: absolute; inset: 0; padding: 22px 30px 20px; display: grid; grid-template-columns: 1fr 330px; gap: 22px; }
.edit-pool { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.edit-help { margin: 0; font-size: 12px; color: var(--mute); }
.edit-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 22px 16px; padding: 16px 12px 16px 14px; touch-action: pan-y; }
.pool-item { position: relative; width: 106px; height: 148px; cursor: pointer; flex: none; transition: transform .12s; }
.pool-item .cf { transform: scale(.8); transform-origin: 0 0; }
.pool-item:hover { transform: translateY(-4px); }
.pool-item.full .cf { filter: brightness(.55) saturate(.6); }
.pool-item .cnt { position: absolute; right: -8px; top: 30px; min-width: 36px; height: 26px; padding: 0 7px; display: flex; align-items: center; justify-content: center; border-radius: 13px; font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); z-index: 2; }
.pool-item .cnt.zero { background: rgba(7, 9, 22, .85); color: var(--mute); border: 1px solid rgba(255, 255, 255, .2); }
.pool-item .minus { position: absolute; left: -8px; bottom: 18px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #fff; background: #b3263f; color: #fff; font-size: 18px; line-height: 1; z-index: 3; padding: 0; }
.edit-side { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border: 1px solid rgba(232, 196, 104, .45); border-radius: 4px; background: linear-gradient(180deg, rgba(14, 19, 48, .95), rgba(7, 9, 22, .95)); }
.edit-count { font-size: 14px; color: var(--paper); }
.edit-count b { font-family: var(--f-display); font-size: 26px; color: var(--gold-hi); }
.edit-count.ok b { color: var(--jade); }
#edit-msg { margin-left: 8px; font-size: 12px; color: #ffb3bc; }
.edit-list { list-style: none; margin: 0; padding: 0 4px 0 0; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; touch-action: pan-y; }
.edit-list .empty { height: auto; padding: 18px 8px; background: none; color: var(--mute); font-size: 12.5px; line-height: 1.7; cursor: default; }
.edit-side .btn-row { gap: 10px; }
.edit-side .mbtn.slim { min-height: 46px; padding: 6px 22px; }

/* ───────── スタンプ ───────── */
.l-stamp { position: absolute; left: -196px; top: -168px; width: 124px; height: 124px; z-index: 46; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); animation: stampin 2.6s ease both; }
.leader.opp .l-stamp { left: 84px; top: 26px; }
.l-stamp svg, .stamp-row svg { display: block; width: 100%; height: 100%; }
@keyframes stampin { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 9% { transform: scale(1.25) rotate(8deg); opacity: 1; } 15% { transform: scale(.94) rotate(-4deg); } 21% { transform: scale(1) rotate(0); } 82% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(.7) translateY(-16px); opacity: 0; } }
.stamp-row { display: flex; gap: 6px; padding: 8px; background: rgba(7, 9, 22, .93); border: 1px solid var(--gold); border-radius: 12px; }
.emote-menu .stamp-row button { width: 54px; height: 54px; padding: 3px; background: none; border-radius: 50%; box-shadow: none; transition: transform .12s; }
.emote-menu .stamp-row button:hover { transform: scale(1.18); background: none; }

/* ───────── デッキのタイプと相性 ───────── */
.l-type { position: absolute; right: 64px; top: 10px; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--paper); text-shadow: 0 1px 3px #000; }
.l-lock { position: absolute; right: 64px; top: 10px; white-space: nowrap; padding: 1px 9px; border-radius: 9px; font-size: 11px; letter-spacing: .04em; background: rgba(90, 40, 120, .82); color: #f0dcff; border: 1px solid rgba(200, 150, 255, .5); text-shadow: 0 1px 2px #000; }
.l-type b { padding: 1px 8px; border-radius: 9px; font-size: 10.5px; letter-spacing: .06em; }
.l-type b.up { background: var(--jade); color: var(--ink); }
.l-type b.down { background: #7a2536; color: #ffd0d6; }
.floater.dmg.strong { color: #ffd24a; -webkit-text-stroke: 1.5px #7a2a00; }
.floater.dmg.weak { color: #b9c0dc; -webkit-text-stroke: 1px #2a2f4a; font-size: 34px; }
.dv-type { margin: 0; font-size: 13px; color: var(--paper); }
.dv-type b { color: var(--gold-hi); }
.rps-note { margin: 0; font-size: 12.5px; color: var(--mute); letter-spacing: .04em; }
.edit-type { font-size: 12px; line-height: 1.6; color: var(--paper); min-height: 38px; }
.edit-type b { color: var(--gold-hi); }
.edit-side .mbtn.slim { padding: 6px 12px; flex: 1; }
.edit-side .mbtn.slim b { font-size: 15px; letter-spacing: .06em; white-space: nowrap; }

/* ───────── デッキコード ───────── */
.code-field { width: 520px; height: 56px; padding: 0 16px; text-align: center; font: 700 22px var(--f-display); letter-spacing: .08em; color: var(--gold-hi); background: rgba(5, 7, 20, .9); border: 1px solid rgba(232, 196, 104, .6); border-radius: 4px; -webkit-user-select: text; user-select: text; }
.fld.wide { width: 520px; text-align: left; }
.fld.wide input { width: 100%; }
.fld.wide .code-field { font-size: 19px; text-transform: uppercase; }
.imp-info { margin: 0; min-height: 44px; font-size: 14px; line-height: 1.6; color: var(--paper); }
.imp-info.err, .imp-info .bad { color: #ffb3bc; }
.link-btn.left { align-self: flex-start; padding-left: 0; margin-top: -8px; font-size: 13px; }
.deck-list-col .mbtn.slim { min-height: 46px; }
.deck-list-col .mbtn.slim b { font-size: 16px; }

/* ───────── チュートリアル ───────── */
.tut { position: absolute; left: 782px; top: 66px; width: 360px; z-index: 43; padding: 12px 16px 12px; border: 1px solid rgba(232, 196, 104, .8);
  background: linear-gradient(180deg, rgba(22, 30, 78, .97), rgba(8, 11, 30, .97)); box-shadow: 0 10px 28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .6); animation: rise .22s ease both; }
.tut.center { left: 420px; top: 236px; width: 440px; padding: 18px 22px 16px; }
.tut-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tut-step { font-family: var(--f-display); font-size: 11px; letter-spacing: .12em; color: var(--mute); white-space: nowrap; }
.tut-head h3 { margin: 0; font-family: var(--f-jp); font-size: 18px; letter-spacing: .1em; color: var(--gold-hi); }
.tut-text { margin: 0; font-size: 13.5px; line-height: 1.72; color: var(--paper); }
.tut-text b { color: #fff; background: linear-gradient(transparent 62%, rgba(232, 196, 104, .38) 62%); }
.tut-text small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--mute); }
.tut-text .go { display: block; margin-top: 6px; padding: 6px 10px; border-left: 3px solid #6fe6a0; background: rgba(111, 230, 160, .1); color: #e9fff2; }
.tut-text .go:first-child { margin-top: 0; }
.tut-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tut-quit { background: none; border: 0; padding: 4px 2px; font-size: 12px; color: var(--mute); text-decoration: underline; cursor: pointer; }
.tut-quit:hover { color: var(--paper); }
.tut-wait { flex: 1; text-align: right; font-size: 12px; color: #bdf5d4; letter-spacing: .04em; }
.tut .mbtn.slim { min-height: 38px; padding: 4px 26px; }
.tut .mbtn.slim b { font-size: 16px; }
.tut-rings { position: absolute; inset: 0; z-index: 42; pointer-events: none; }
.tut-ring { position: absolute; border: 3px solid #ffe49a; border-radius: 14px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 18px 4px rgba(255, 214, 110, .85), inset 0 0 14px rgba(255, 214, 110, .35);
  animation: tut-pulse 1.1s ease-in-out infinite; transition: left .18s, top .18s, width .18s, height .18s; }
.tut-ring::before { content: '▼'; position: absolute; left: 50%; top: -30px; margin-left: -11px; font-size: 22px; line-height: 1; color: #ffe49a; text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 214, 110, .9); animation: tut-bob .8s ease-in-out infinite; }
.tut-ring.low::before { content: '▲'; top: auto; bottom: -30px; }
@keyframes tut-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes tut-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.result-note.tips { max-width: 620px; font-size: 13.5px; line-height: 1.9; color: var(--paper); text-align: left; }
@media (prefers-reduced-motion: reduce) { .tut-ring, .tut-ring::before { animation: none; } }
.title-menu .mbtn.fresh small { display: inline-block; padding: 1px 12px; border-radius: 10px; font-weight: 700; color: #08240f; background: linear-gradient(180deg, #d9ffe9, #6fe6a0); }

/* ───────── 大型クリエイターの登場演出（騒嵐の豪傑） ───────── */
.grand { position: absolute; inset: 0; z-index: 33; pointer-events: none; overflow: hidden; }
.grand { --g-band: linear-gradient(90deg, #1c0503, #8f2408 30%, #ff9a2e 52%, #8f2408 72%, #1c0503); --g-glow: rgba(255, 130, 40, .55); --g-veil: rgba(70, 18, 6, .5); --g-name: #ff8a2a; }
.grand.fire { --g-band: linear-gradient(90deg, #160101, #7a0c0c 26%, #e0281a 46%, #ffd23a 58%, #e0281a 70%, #7a0c0c 84%, #160101); --g-glow: rgba(255, 60, 30, .65); --g-veil: rgba(90, 8, 4, .55); --g-name: #ff3a1a; }
.grand.paint { --g-band: linear-gradient(90deg, #12072e, #5b2ea6 18%, #2f7fd6 36%, #38c08a 52%, #e8c468 66%, #e0577f 80%, #5b2ea6 92%, #12072e); --g-glow: rgba(180, 140, 255, .6); --g-veil: rgba(30, 14, 70, .5); --g-name: #b48cff; }
.grand-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, var(--g-veil), rgba(3, 2, 8, .76) 70%); animation: ovin .22s ease both; }
.grand-band { position: absolute; left: -60px; right: -60px; top: 196px; height: 268px; transform: rotate(-4deg); overflow: hidden;
  background: var(--g-band); border-top: 3px solid var(--gold-hi); border-bottom: 3px solid var(--gold-hi);
  box-shadow: 0 0 46px 10px var(--g-glow), inset 0 0 60px rgba(0, 0, 0, .55); animation: grand-band calc(.3s * var(--sp, 1)) cubic-bezier(.2, .9, .3, 1) both; }
.grand-lines { position: absolute; inset: 0; opacity: .5; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 240, 184, .5) 46px 49px, transparent 49px 130px, rgba(255, 255, 255, .35) 130px 132px); animation: grand-lines .32s linear infinite; }
.grand-art { position: absolute; left: 150px; top: -46px; width: 600px; height: 360px; transform: rotate(4deg); background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 76%, transparent);
  animation: grand-art calc(1.25s * var(--sp, 1)) cubic-bezier(.1, .8, .2, 1) both; }
.grand-txt { position: absolute; right: 150px; top: 62px; text-align: right; transform: rotate(4deg); }
.grand-sub { font-family: var(--f-display); font-size: 16px; font-weight: 700; letter-spacing: .42em; color: var(--gold-hi); text-shadow: 0 2px 0 #000; animation: cutin-txt calc(.4s * var(--sp, 1)) .12s ease both; }
.grand-name { margin-top: 6px; font-family: var(--f-jp); font-weight: 800; font-size: 64px; letter-spacing: .08em; line-height: 1.15; color: #fff; white-space: nowrap; text-shadow: 0 0 26px var(--g-name), 0 0 8px var(--g-name), 0 5px 0 #000; animation: grand-name calc(.5s * var(--sp, 1)) .16s cubic-bezier(.2, 1.3, .4, 1) both; }
.grand.out { animation: grand-out calc(.22s * var(--sp, 1)) ease-in forwards; }
@keyframes grand-band { from { clip-path: inset(50% 0 50% 0); filter: brightness(4); } to { clip-path: inset(0 0 0 0); filter: none; } }
@keyframes grand-lines { to { background-position: -260px 0; } }
@keyframes grand-art { 0% { transform: rotate(4deg) translateX(-260px) scale(1.5); opacity: 0; filter: brightness(4) saturate(0); } 22% { opacity: 1; filter: brightness(1.5); } 100% { transform: rotate(4deg) translateX(0) scale(1.08); opacity: 1; filter: none; } }
@keyframes grand-name { from { transform: scale(2.6); opacity: 0; filter: blur(8px); letter-spacing: .5em; } to { transform: none; opacity: 1; filter: none; } }
@keyframes grand-out { to { opacity: 0; transform: scale(1.12); filter: brightness(3); } }
.unit.grand-land .u-body { animation: uland calc(.62s * var(--sp, 1)) cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes uland { 0% { transform: translateY(-330px) scale(2.2); opacity: 0; filter: brightness(5); } 55% { transform: translateY(8px) scale(1.16, .86); opacity: 1; filter: brightness(2.4); } 75% { transform: translateY(-6px) scale(.96, 1.06); } 100% { transform: none; filter: none; } }
.flash { position: absolute; inset: 0; z-index: 34; pointer-events: none; background: #fff; opacity: 0; animation: flash .42s ease-out both; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }

/* ───────── リーダーのHPが0になったとき ───────── */
.spot { position: absolute; inset: 0; z-index: 19; pointer-events: none; animation: ovin .25s ease both; }
.leader.breaking { z-index: 21; }
.leader.breaking .l-orb { animation: lbreak calc(.95s * var(--sp, 1)) linear both; }
.leader.breaking .l-orb::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; animation: lcrack calc(.95s * var(--sp, 1)) steps(5, end) both;
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='bevel'%3E%3Cpath d='M50 50 L41 36 L46 24 L37 8'/%3E%3Cpath d='M41 36 L26 31 L14 36'/%3E%3Cpath d='M50 50 L66 43 L72 28 L88 22'/%3E%3Cpath d='M66 43 L80 52 L95 49'/%3E%3Cpath d='M50 50 L58 66 L52 80 L60 95'/%3E%3Cpath d='M58 66 L74 72 L84 86'/%3E%3Cpath d='M50 50 L34 60 L30 76 L16 84'/%3E%3Cpath d='M34 60 L18 56 L5 62'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(255, 220, 140, .9)); }
.leader.breaking .l-hp { animation: lshake .3s linear infinite; }
.leader.broken .l-orb { animation: lshatter calc(.55s * var(--sp, 1)) ease-out forwards; }
.leader.broken .l-hp { filter: grayscale(1) brightness(.55); transition: filter .4s; }
.leader.broken .l-name { opacity: .5; }
@keyframes lbreak { 0% { transform: none; filter: none; } 8% { transform: translate(-3px, 2px); } 16% { transform: translate(3px, -2px); filter: brightness(1.3); } 24% { transform: translate(-4px, -2px); } 32% { transform: translate(5px, 3px); filter: brightness(1.6); }
  40% { transform: translate(-6px, 2px) rotate(-2deg); } 48% { transform: translate(6px, -3px) rotate(2deg); filter: brightness(2); } 56% { transform: translate(-7px, -3px) rotate(-3deg); } 64% { transform: translate(8px, 3px) rotate(3deg); filter: brightness(2.5); }
  72% { transform: translate(-9px, 3px) rotate(-4deg); } 80% { transform: translate(9px, -4px) rotate(4deg); filter: brightness(3); } 90% { transform: translate(-10px, 2px) rotate(-5deg) scale(1.06); } 100% { transform: scale(1.14); filter: brightness(4) saturate(.3); } }
@keyframes lcrack { from { clip-path: circle(0% at 50% 50%); opacity: .6; } to { clip-path: circle(60% at 50% 50%); opacity: 1; } }
@keyframes lshatter { 0% { transform: scale(1.14); filter: brightness(5) saturate(.2); opacity: 1; } 100% { transform: scale(2.9); filter: brightness(7) blur(7px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .unit.ready .u-body::before { animation: none; } .grand-lines { animation: none; } }