:root {
  --bg: #03040a;
  --panel: rgba(10, 16, 30, .82);
  --panel-solid: #0d1424;
  --panel2: #1a2230;
  --border: #24406e;
  --border-soft: rgba(80, 140, 255, .25);
  --text: #d8e6ff;
  --muted: #7f93b5;
  --accent: #37c8ff;
  --gold: #ffd77a;
  --fire: #ff5a2a;
  --water: #2a9dff;
  --earth: #d4a017;
  --wood: #3ecf4a;
  --biolith: #b44dff;
  --none: #8890a0;
  --p0: #3aa0ff;
  --p1: #ff3a5a;
  --font-title: 'Trajan Pro', 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
  user-select: none;
}

/* ===== top bar ===== */
#topbar {
  display: flex; align-items: center; gap: 16px; height: 46px; flex: none;
  padding: 0 16px; z-index: 30;
  background: linear-gradient(180deg, #0d1730 0%, #060a16 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 18px rgba(30, 90, 255, .25);
}
.brand { font-family: var(--font-title); font-weight: 700; letter-spacing: 3px; font-size: 15px; color: #cfe6ff; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-eye {
  width: 26px; height: 16px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle, #fff 0 12%, #37c8ff 13% 38%, #0b2a6a 39% 60%, transparent 61%);
  box-shadow: 0 0 12px #37c8ff; border: 1px solid #37c8ff;
}
.ver { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: 1px; font-family: system-ui, sans-serif; }
#gameinfo { display: flex; gap: 16px; margin: 0 auto; align-items: center; }
#turninfo {
  font-family: var(--font-title); font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 16px; border-radius: 14px; border: 1px solid var(--border-soft); background: rgba(0,0,0,.35);
}
#turninfo.p0 { color: #9fd0ff; border-color: rgba(58,160,255,.6); box-shadow: 0 0 10px rgba(58,160,255,.35); }
#turninfo.p1 { color: #ffa0b0; border-color: rgba(255,58,90,.6); box-shadow: 0 0 10px rgba(255,58,90,.35); }
#manainfo { font-size: 13px; color: var(--accent); }
#netinfo { display: flex; gap: 6px; align-items: center; }
#netstatus { font-size: 11px; color: var(--muted); margin: 0 4px 0 8px; }

/* ===== stage ===== */
#stage { flex: 1; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #0a1430 0%, #03040a 70%); }
.board3d { position: absolute; inset: 0; }
.board3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.board3d canvas:active { cursor: grabbing; }

#board-wrap {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; padding-bottom: 90px;
}
.board {
  pointer-events: auto; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 8px; width: min(56vh, 44vw); aspect-ratio: 1;
  padding: 10px; border-radius: 14px;
  background: linear-gradient(145deg, #0c1222, #060912);
  border: 1px solid var(--border); box-shadow: 0 0 40px rgba(40, 110, 255, .25), inset 0 0 30px rgba(0,0,0,.6);
}

/* ===== 2D fields ===== */
.field {
  --c: var(--none);
  position: relative; border-radius: 8px; border: 2px solid var(--c);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 30%, transparent) 0%, #070a12 75%);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: box-shadow .15s; min-height: 0; overflow: visible;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--c) 35%, transparent);
}
.field.fire { --c: var(--fire); } .field.water { --c: var(--water); } .field.earth { --c: var(--earth); }
.field.wood { --c: var(--wood); } .field.biolith { --c: var(--biolith); }
.field:hover { box-shadow: inset 0 0 14px color-mix(in srgb, var(--c) 35%, transparent), 0 0 14px rgba(255,255,255,.25); }
.field .el-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; opacity: .25; pointer-events: none; }
.field .el-name { position: absolute; bottom: 3px; left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--c); opacity: .9; }
.field .fnum { position: absolute; top: 3px; right: 6px; font-size: 9px; color: var(--muted); }
.field[class*="hl-"]::before {
  content: ''; position: absolute; inset: -2px; border-radius: 8px; pointer-events: none; z-index: 3;
  border: 3px solid var(--hl); box-shadow: 0 0 16px var(--hl), inset 0 0 22px var(--hl);
  animation: hlpulse 1.1s ease-in-out infinite;
}
.field.hl-summon { --hl: #7fffe0; } .field.hl-target { --hl: #ff2a2a; } .field.hl-range { --hl: #ff8a3a; }
.field.hl-own { --hl: #66ff99; } .field.hl-spell { --hl: #c080ff; } .field.hl-sel { --hl: #ffe066; }
.field.hl-hover::before { --hl: rgba(255,255,255,.5); animation: none; box-shadow: none; border-width: 2px; }
@keyframes hlpulse { 50% { opacity: .45; } }

.creature {
  position: relative; width: 70%; height: 92%; border-radius: 6px; z-index: 2;
  border: 3px solid var(--pc); box-shadow: 0 0 12px var(--pc), 0 6px 12px rgba(0,0,0,.6);
  background: #111; display: flex; align-items: center; justify-content: center;
}
.creature.p0 { --pc: var(--p0); } .creature.p1 { --pc: var(--p1); }
.creature .cimg { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.creature .cname { font-size: 10px; font-weight: 600; text-align: center; padding: 4px; }
.creature .cdir {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
  transform: rotate(var(--ang));
}
.creature .cdir i {
  position: absolute; left: -11px; top: -70px; width: 22px; height: 16px;
  background: var(--pc); clip-path: polygon(50% 0, 100% 100%, 50% 70%, 0 100%);
  filter: drop-shadow(0 0 4px var(--pc));
}
.creature .chp, .creature .catk {
  position: absolute; bottom: -8px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 5px;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid #000; box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.creature .chp { left: -8px; background: #3ee86a; color: #02160a; }
.creature .catk { right: -8px; background: #ff7a4a; color: #1a0800; }
.creature.just .cimg { filter: saturate(.6) brightness(.8); }
.creature.locked::after { content: '🔒'; position: absolute; top: 2px; right: 3px; font-size: 13px; }

/* 2D FX overlays */
.fx2d { position: absolute; pointer-events: none; z-index: 6; }
.fx2d.num {
  left: 50%; top: 30%; transform: translate(-50%, 0); font-weight: 900; font-size: 26px;
  text-shadow: 0 0 6px #000, 0 2px 0 #000; animation: numup 1.1s ease-out forwards;
}
.fx2d.num.dmg { color: #ff4a3a; } .fx2d.num.counter { color: #ffd040; } .fx2d.num.heal { color: #6dff9a; } .fx2d.num.miss { color: #9fe8ff; font-size: 18px; }
.fx2d.num.aura { color: #d0e0ff; font-size: 15px; top: 10%; }
.fx2d.ghost.ret { animation: retfly .9s ease-in forwards; }
@keyframes retfly { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(80px) scale(.5); filter: brightness(1.8); } }
@keyframes numup { 0% { transform: translate(-50%, 10px) scale(.5); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.25); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -40px) scale(1); opacity: 0; } }
.fx2d.hit { inset: 0; border-radius: 8px; background: radial-gradient(circle, rgba(255,80,40,.85), transparent 70%); animation: fadeout .5s forwards; }
.fx2d.hit.counter { background: radial-gradient(circle, rgba(255,210,60,.85), transparent 70%); }
.fx2d.healfx { inset: 0; border-radius: 8px; background: radial-gradient(circle, rgba(90,255,140,.7), transparent 70%); animation: fadeout .9s forwards; }
.fx2d.summon { inset: -6px; border-radius: 10px; border: 3px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); animation: summonring .9s ease-out forwards; }
@keyframes summonring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.fx2d.ghost { inset: 4% 15%; animation: ghost 1.3s ease-in forwards; }
.fx2d.ghost img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
@keyframes ghost { 0% { opacity: 1; filter: brightness(1); } 35% { filter: brightness(2.5) saturate(0); } 100% { opacity: 0; transform: translateY(-60px) scale(.4); filter: brightness(4) blur(6px); } }
.fx2d.spellcard { left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); animation: spellcard 1.3s ease-in-out forwards; z-index: 10; }
.fx2d.spellcard img { width: 100%; border-radius: 8px; box-shadow: 0 0 40px #c080ff; }
@keyframes spellcard { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.5); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.fx2d.spellhit { inset: 0; border-radius: 8px; background: radial-gradient(circle, rgba(190,120,255,.9), transparent 70%); animation: fadeout .8s forwards; }
@keyframes fadeout { to { opacity: 0; } }
.field.fx-quake { animation: quake .6s; }
@keyframes quake { 20% { transform: translate(-4px, 2px) rotate(-1deg); filter: brightness(2); } 40% { transform: translate(4px, -2px) rotate(1deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
.field.fx-rotate .creature { animation: rotpulse .4s; }
@keyframes rotpulse { 50% { transform: scale(1.06); filter: brightness(1.5); } }
.field.fx-move .creature, .field.fx-possess .creature { animation: rotpulse .6s; }

/* ===== player boxes ===== */
.pbox {
  position: absolute; left: 16px; z-index: 12; display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px; border-radius: 40px;
  background: var(--panel); border: 1px solid var(--border-soft);
  box-shadow: 0 4px 18px rgba(0,0,0,.5); backdrop-filter: blur(4px);
  transition: box-shadow .3s, border-color .3s;
}
.pbox.top { top: 12px; }
.pbox.bottom { bottom: 16px; }
#panel-p0 { --pc: var(--p0); } #panel-p1 { --pc: var(--p1); }
.pbox.active { border-color: var(--pc); box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 60%, transparent); }
.pbox .pname { font-family: var(--font-title); letter-spacing: 1.5px; font-size: 13px; color: var(--pc); text-transform: uppercase; }
.pbox .pstats { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.orb {
  position: relative; width: 54px; height: 54px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 0 8px #37c8ff, 0 1px 2px #000;
  background: radial-gradient(circle at 35% 30%, #bff4ff 0%, #2fb8ff 22%, #0d4fb8 60%, #061a44 100%);
  border: 2px solid var(--pc); box-shadow: 0 0 14px #37c8ff, inset 0 -6px 12px rgba(0,0,0,.5);
}
.orb::after { content: 'MANA'; position: absolute; bottom: -7px; font-size: 8px; letter-spacing: 1px; background: #061a44; padding: 0 4px; border-radius: 4px; color: #9fe8ff; text-shadow: none; }
.orb.pulse { animation: orbpulse .6s; }
@keyframes orbpulse { 40% { transform: scale(1.18); box-shadow: 0 0 30px #9fe8ff; } }
.manafloat { position: absolute; top: -6px; left: 50%; font-size: 18px; font-weight: 900; pointer-events: none; animation: manafloat 1.3s ease-out forwards; text-shadow: 0 0 6px #000; }
.manafloat.plus { color: #9fffe0; } .manafloat.minus { color: #ff9a7a; }
@keyframes manafloat { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.2); } 100% { transform: translate(-50%, -44px); opacity: 0; } }

/* ===== hands (card fans) ===== */
.hand { position: absolute; left: 50%; width: 0; height: 0; z-index: 14; }
.hand.bottom { bottom: 0; }
.hand.top { top: 0; left: auto; right: 230px; }
.card {
  --w: 112px;
  position: absolute; left: 0; width: var(--w); height: calc(var(--w) * 1.396);
  border-radius: 7px; cursor: pointer; overflow: hidden;
  background: #0b0f1a; border: 2px solid #283652;
  box-shadow: 0 6px 16px rgba(0,0,0,.7);
  transition: transform .18s ease-out, box-shadow .18s, filter .18s;
}
.hand.bottom .card {
  bottom: -46px; transform-origin: 50% 130%;
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--rot));
}
.hand.top .card {
  --w: 72px; top: -22px; transform-origin: 50% -30%;
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--rot));
}
.hand.bottom .card:hover { transform: translateX(calc(-50% + var(--x))) translateY(-70px) scale(1.22); z-index: 100 !important; box-shadow: 0 0 22px rgba(120,200,255,.6), 0 10px 24px #000; }
.hand.top .card:hover { transform: translateX(calc(-50% + var(--x))) translateY(46px) scale(1.25); z-index: 100 !important; }
.hand.bottom .card.sel { transform: translateX(calc(-50% + var(--x))) translateY(-58px) scale(1.12); z-index: 90 !important; }
.hand.top .card.sel { transform: translateX(calc(-50% + var(--x))) translateY(40px) scale(1.15); z-index: 90 !important; }
.card.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 26px var(--gold); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card .cc {
  position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bff4ff, #1a74e0 60%, #062060); color: #fff;
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #9fe8ff; text-shadow: 0 1px 2px #000;
}
.hand.top .card .cc { width: 16px; height: 16px; font-size: 10px; }
.card .cn { position: absolute; top: 32px; left: 6px; right: 6px; font-size: 11px; font-weight: 700; }
.card .cs { position: absolute; bottom: 6px; left: 6px; right: 6px; font-size: 11px; font-weight: 700; }
.card.el-fire { border-color: var(--fire); } .card.el-water { border-color: var(--water); } .card.el-earth { border-color: var(--earth); }
.card.el-wood { border-color: var(--wood); } .card.el-biolith { border-color: var(--biolith); } .card.el-none { border-color: #8a7aa8; }
.card.disabled { filter: brightness(.55) saturate(.6); cursor: not-allowed; }
.card.disabled:hover { filter: brightness(.8) saturate(.8); }
.card.back {
  cursor: default; border-color: #2a4a8a;
  background: radial-gradient(circle at 50% 50%, #1b3f8f 0%, #0a1838 55%, #050b1c 100%);
}
.card.back .cb-eye {
  position: absolute; left: 50%; top: 50%; width: 60%; height: 34%; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid #37c8ff; box-shadow: 0 0 10px #37c8ff;
  background: radial-gradient(circle, #fff 0 8%, #37c8ff 9% 30%, #0b2a6a 31% 55%, transparent 56%);
}

/* ===== card preview ===== */
#preview {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 290px; max-height: calc(100% - 40px); overflow-y: auto; pointer-events: none;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 0 30px rgba(30, 90, 255, .3), 0 10px 30px rgba(0,0,0,.7); backdrop-filter: blur(6px);
  animation: pvin .15s ease-out;
}
@keyframes pvin { from { opacity: 0; transform: translate(10px, -50%); } }
.pv-art { padding: 10px 10px 0; }
.pv-art img { width: 100%; display: block; border-radius: 8px; box-shadow: 0 4px 14px #000; }
.pv-noart { height: 180px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #1a2230; font-weight: 700; }
.pv-body { padding: 8px 14px 12px; }
.pv-name { font-family: var(--font-title); font-size: 16px; letter-spacing: 1px; color: #fff; }
.pv-sub { font-size: 11px; color: var(--muted); margin: 2px 0 8px; display: flex; align-items: center; gap: 6px; }
.eldot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--none); box-shadow: 0 0 6px currentColor; }
.eldot.el-fire { background: var(--fire); } .eldot.el-water { background: var(--water); } .eldot.el-earth { background: var(--earth); }
.eldot.el-wood { background: var(--wood); } .eldot.el-biolith { background: var(--biolith); }
.pv-stats { display: flex; gap: 5px; margin-bottom: 8px; }
.pv-stats .st { flex: 1; text-align: center; background: rgba(0,0,0,.4); border-radius: 6px; padding: 4px 0; border: 1px solid rgba(255,255,255,.08); }
.pv-stats .st b { display: block; font-size: 17px; }
.pv-stats .st b small { font-size: 10px; color: var(--muted); }
.pv-stats .st span { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pv-stats .st.mana b { color: #7fd8ff; } .pv-stats .st.hp b { color: #5ff08a; } .pv-stats .st.atk b { color: #ff8a5a; }
.pv-patwrap { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.pv-pat { display: grid; grid-template-columns: repeat(5, 14px); gap: 2px; }
.pv-pat i { width: 14px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.07); font-style: normal; font-size: 9px; display: flex; align-items: center; justify-content: center; }
.pv-pat i.hit { background: #ff5a3a; box-shadow: 0 0 4px #ff5a3a; }
.pv-pat i.me { background: #37c8ff; color: #001; }
.pv-patlbl { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pv-txt { font-size: 12px; line-height: 1.4; color: #c4d2ec; }
.pv-occ { margin-top: 8px; font-size: 11px; color: var(--gold); }

/* ===== log ===== */
#logbox {
  position: absolute; left: 16px; top: 92px; width: 300px; z-index: 11;
  background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px;
  backdrop-filter: blur(4px); overflow: hidden;
}
#log-head { font-family: var(--font-title); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 10px; color: var(--accent); cursor: pointer; border-bottom: 1px solid var(--border-soft); }
#log-head::after { content: '▾'; float: right; }
#logbox.collapsed #log-head::after { content: '▸'; }
#logbox.collapsed #log { display: none; }
#log { height: 190px; overflow-y: auto; padding: 6px 10px; font-size: 11px; color: var(--muted); user-select: text; }
#log div { margin: 2px 0; line-height: 1.3; }
#log .l0 { color: #9fd0ff; } #log .l1 { color: #ffa8b6; } #log .lx { color: var(--gold); }

/* ===== actions, banners ===== */
#board-actions { position: absolute; right: 24px; bottom: 24px; z-index: 15; display: flex; gap: 8px; }
.btn {
  background: linear-gradient(180deg, #4dc8ff, #1a7ee0); color: #02101f; border: none; border-radius: 6px;
  padding: 8px 14px; font-weight: 700; cursor: pointer; font-size: 13px;
}
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: rgba(255,255,255,.03); color: var(--text); border: 1px solid var(--border); }
.btn.small { padding: 4px 10px; font-size: 11px; }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
.btn.endturn {
  font-family: var(--font-title); letter-spacing: 2px; font-size: 15px; padding: 14px 24px; border-radius: 30px;
  background: linear-gradient(180deg, #ffe39a, #d49a1a); color: #2a1800;
  box-shadow: 0 0 18px rgba(255,200,80,.5), inset 0 -3px 6px rgba(0,0,0,.25); border: 1px solid #fff3c4;
}
.btn.endturn:not(:disabled) { animation: endglow 2s ease-in-out infinite; }
@keyframes endglow { 50% { box-shadow: 0 0 32px rgba(255,210,90,.85), inset 0 -3px 6px rgba(0,0,0,.25); } }

#banner {
  position: absolute; left: 0; right: 0; top: 34%; z-index: 40; pointer-events: none;
  text-align: center; font-family: var(--font-title); font-size: 46px; letter-spacing: 10px; font-weight: 700;
  color: #fff; opacity: 0;
  text-shadow: 0 0 20px var(--bc, #37c8ff), 0 0 40px var(--bc, #37c8ff), 0 3px 0 #000;
}
#banner::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 80px; transform: translateY(-50%); z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bc, #37c8ff) 35%, transparent) 30%, color-mix(in srgb, var(--bc, #37c8ff) 35%, transparent) 70%, transparent);
}
#banner.p0 { --bc: var(--p0); } #banner.p1 { --bc: var(--p1); } #banner.big { --bc: #ffd77a; font-size: 64px; }
#banner.show { animation: banner 1.7s ease-out forwards; }
#banner.show.big { animation: banner 3.2s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; letter-spacing: 40px; } 15% { opacity: 1; letter-spacing: 10px; } 75% { opacity: 1; } 100% { opacity: 0; } }
#fxcaption {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 25; pointer-events: none;
  padding: 6px 18px; border-radius: 16px; font-size: 13px; background: rgba(0,0,0,.6); border: 1px solid var(--border-soft);
  opacity: 0; white-space: nowrap;
}
#fxcaption.show { animation: caption 2.2s ease-out forwards; }
#fxcaption.warn { color: #ffb84d; border-color: rgba(255,184,77,.5); }
@keyframes caption { 0% { opacity: 0; transform: translate(-50%, -6px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ===== deck selection ===== */
#decksel {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 50;
  width: 360px; padding: 20px 24px; border-radius: 14px;
  background: var(--panel-solid); border: 1px solid var(--border); box-shadow: 0 0 50px rgba(30,90,255,.4);
}
#decksel h3 { font-family: var(--font-title); letter-spacing: 2px; margin: 0 0 14px; font-weight: 600; }
#decksel label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
#decksel select { width: 100%; margin-top: 4px; background: var(--panel2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px; font-size: 13px; }
#decksel .btn { width: 100%; padding: 10px; margin-top: 6px; }
body.nogame .pbox, body.nogame .hand, body.nogame #board-actions, body.nogame #logbox { display: none; }

/* ===== modals ===== */
.hidden { display: none !important; }
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal-box {
  background: var(--panel-solid); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 24px; width: 420px; max-height: 85vh; overflow-y: auto; user-select: text;
}
.modal-box.wide { width: 720px; }
.modal-box h3 { margin-top: 0; }
.modal-box .hint { color: var(--muted); font-size: 12px; }
.modal-box .code { font-size: 28px; letter-spacing: 8px; font-weight: 700; color: var(--accent); }
.modal-box textarea, .modal-box input, .modal-box select {
  width: 100%; background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 8px;
  font-family: monospace; font-size: 12px; margin: 6px 0;
}
.modal-box select { font-family: inherit; font-size: 13px; }
/* raw feed is only a frame source; #cam-canvas shows it with the overlay */
#cam { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#cam-canvas { width: 100%; border-radius: 8px; background: #000; cursor: crosshair; }
#cam-controls { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
#cam-status { font-size: 16px; font-weight: 600; }
#cam-detect { color: var(--muted); font-size: 12px; }
#net-sdp { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }

/* ===== narrow screens ===== */
@media (max-width: 900px) {
  #preview { width: 220px; }
  #logbox { width: 220px; }
  #log { height: 110px; }
  .brand .ver { display: none; }
  .board { width: min(56vh, 70vw); }
}

/* ===== start screen / intro movie ===== */
#intro {
  position: fixed; inset: 0; z-index: 200; background: #000;
  display: flex; align-items: center; justify-content: center;
}
#intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: none; }
#intro.movie #intro-video { display: block; }
#intro.movie #intro-splash { display: none; }
#btn-intro-end { position: absolute; right: 24px; bottom: 24px; display: none; z-index: 2; background: rgba(0,0,0,.5); }
#intro.movie #btn-intro-end { display: block; }
#btn-sound-title { position: absolute; right: 24px; top: 20px; z-index: 3; background: rgba(0,0,0,.5); font-size: 16px; }
#intro-splash {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(ellipse at 50% 42%, #10245a 0%, #050a1c 45%, #000 80%);
}
#intro-splash h1 {
  margin: 0; font-family: var(--font-title); font-size: clamp(22px, 4.2vw, 64px); letter-spacing: .18em; padding: 0 16px; font-weight: 700;
  color: #e8f4ff; text-shadow: 0 0 24px #37c8ff, 0 0 60px #2b6cff; text-align: center;
}
#intro-splash .intro-sub { margin: -6px 0 18px; color: var(--muted); letter-spacing: .5em; text-transform: uppercase; font-size: 12px; }
.intro-eye {
  width: 220px; height: 120px; border-radius: 50%; margin-bottom: 10px;
  background: radial-gradient(circle, #fff 0 6%, #8ff0ff 8%, #2fb8ff 22%, #0b3aa0 44%, #061238 60%, transparent 62%);
  border: 2px solid #37c8ff; box-shadow: 0 0 40px #37c8ff, inset 0 0 30px #0b2a6a;
  animation: introeye 4s ease-in-out infinite;
}
@keyframes introeye { 50% { box-shadow: 0 0 80px #37c8ff, inset 0 0 40px #1a5ad0; transform: scale(1.04); } }
.intro-buttons { display: flex; gap: 14px; align-items: center; }
.intro-buttons .btn.ghost { padding: 12px 20px; }
#intro-track { margin-top: 18px; color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
#intro-track button.on { border-color: var(--accent); color: var(--accent); }

/* ===== original HUD graphics (assets/hud, extracted from 03phase.rd / 05cardview.rd) ===== */
/* mana: the game's stone-ringed orbs (blue = player 1, red = player 2) */
.orb {
  width: 66px; height: 80px; border: none; border-radius: 0; box-shadow: none;
  background: url(../assets/hud/mana_blue.png) center / contain no-repeat;
  padding-top: 20px; font-size: 25px; text-shadow: 0 0 6px #000, 0 0 10px #37c8ff, 0 2px 2px #000;
}
#panel-p1 .orb { background-image: url(../assets/hud/mana_red.png); text-shadow: 0 0 6px #000, 0 0 10px #ff4d6a, 0 2px 2px #000; }
.orb::after { bottom: 0; }
.pbox { padding: 4px 20px 4px 6px; border-radius: 12px; }
.pbox::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 12px; opacity: .9;
  background: url(../assets/hud/spellwnd_red.png) center / 100% 100% no-repeat;
}
#panel-p0.pbox::before { filter: hue-rotate(215deg) saturate(1.2); }

/* panels framed with the game's message window (9-slice) */
#preview, #logbox {
  border: 14px solid transparent; border-image: url(../assets/hud/msgwnd.png) 26 fill / 14px stretch;
  background: rgba(6, 8, 14, .55); border-radius: 0;
}
#preview { padding: 0; }
#log-head { border-bottom-color: rgba(255,255,255,.08); }
.pv-sub img.elimg { width: 22px; height: 22px; margin: -4px 0; filter: drop-shadow(0 0 3px rgba(255,255,255,.4)); }
.pv-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-ic { display: inline-flex; align-items: center; gap: 4px; color: #d8e6ff; font-size: 11px; }
.pv-ic img { width: 22px; height: 22px; }
.field .el-icon img { width: 52%; opacity: .9; filter: drop-shadow(0 0 8px var(--c)); }
.field .el-icon { opacity: .55; }
.fx2d.missimg { left: 50%; top: 20%; width: 80%; transform: translateX(-50%); animation: numup 1.2s ease-out forwards; }
.fx2d.missimg img { width: 100%; }

/* creature status windows: portrait + HP (heart) + ATK (sword) + HP bar, as on the PS3 battle screen */
#cstatus { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 16; pointer-events: none;
  display: flex; gap: 24px; width: 690px; justify-content: space-between; }
.cstat { position: relative; width: 330px; aspect-ratio: 312 / 128; opacity: 0; transform: translateY(-10px); transition: opacity .18s, transform .18s; }
.cstat.show { opacity: 1; transform: none; }
.cstat .cs-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.cstat .cs-portrait { position: absolute; z-index: 1; top: 7%; height: 66%; width: 37%; border-radius: 50%;
  background: #000 50% 20% / 150% auto no-repeat; }
.cstat.red .cs-portrait { left: 12%; }
.cstat.blue .cs-portrait { left: 49%; }
.cstat .cs-hp, .cstat .cs-atk { position: absolute; z-index: 3; top: 18%; width: 19%; text-align: center;
  font: 800 26px/1 'Segoe UI', sans-serif; color: #fff; text-shadow: 0 0 6px #000, 0 2px 0 #000; }
.cstat .cs-hp small { font-size: 12px; color: #c9d4e8; }
.cstat .cs-atk { color: #ffd9a0; }
.cstat.red .cs-hp { left: 53.5%; } .cstat.red .cs-atk { left: 75%; }
.cstat.blue .cs-hp { left: 4.5%; } .cstat.blue .cs-atk { left: 26%; }
.cstat .cs-bar { position: absolute; z-index: 3; top: 82.5%; height: 11%; }
.cstat.red .cs-bar { left: 10.5%; width: 85%; }
.cstat.blue .cs-bar { left: 3.5%; width: 85%; }
.cstat .cs-fill { height: 100%; background-size: 100% 100%; transition: width .35s ease-out; box-shadow: 0 0 6px rgba(255,255,255,.3); }
.cstat.blue .cs-fill { margin-left: auto; }
.cstat .cs-name { position: absolute; z-index: 3; top: 100%; width: 100%; font-size: 12px; font-weight: 700; color: #fff;
  text-shadow: 0 0 4px #000, 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cstat.blue .cs-name { text-align: right; }
.cstat .cs-icons { position: absolute; z-index: 3; top: 48%; display: flex; gap: 2px; }
.cstat.red .cs-icons { left: 54%; } .cstat.blue .cs-icons { left: 5%; }
.cstat .cs-icons img { width: 24px; height: 24px; }
@media (max-width: 900px) { #cstatus { width: 96vw; gap: 4px; } .cstat { width: 46vw; } }
.pbox { background: transparent; backdrop-filter: none; border-color: transparent; box-shadow: none; }
.pbox.active::before { box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 70%, transparent); }
/* 2D: leave room for the status windows above the board */
body.view2d #board-wrap { padding-top: 130px; }
body.view2d .board { width: min(52vh, 44vw); }

/* ===== original title screen (assets/title from 022adv.rd) ===== */
#intro-splash { background: #000; overflow: hidden; gap: 0; cursor: default; }
#intro-splash.press { cursor: pointer; }
#title-bg, #title-bg .tbg { position: absolute; inset: 0; }
#title-bg .tbg {
  background: center / cover no-repeat; opacity: 0; transform: scale(1.12);
  transition: opacity 2.5s ease-in-out; filter: brightness(.62) saturate(1.1);
}
#title-bg .tbg.on { opacity: 1; animation: kenburns 10.5s linear forwards; }
@keyframes kenburns { from { transform: scale(1.12) translateX(1.5%); } to { transform: scale(1.0) translateX(-1.5%); } }
.title-clouds { position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; opacity: .35;
  background: url(../assets/title/cloud_06.png) 0 0 / 60vmax repeat; animation: clouds 90s linear infinite; }
.title-clouds.c2 { background-image: url(../assets/title/cloud_07.png); background-size: 85vmax; opacity: .25; animation-duration: 140s; animation-direction: reverse; }
@keyframes clouds { to { background-position: 120vmax 30vmax; } }
#intro-splash::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.75) 100%); }
.title-center { position: relative; z-index: 2; width: min(62vw, 92vh); aspect-ratio: 664 / 520; display: flex; align-items: center; justify-content: center; margin-top: -6vh; }
.title-dia { position: absolute; width: 74%; left: 13%; top: -10%; opacity: .92;
  filter: drop-shadow(0 0 30px rgba(80,170,255,.55)); animation: diaglow 5s ease-in-out infinite; }
@keyframes diaglow { 50% { filter: drop-shadow(0 0 60px rgba(120,200,255,.9)) brightness(1.15); } }
.title-logo { position: relative; width: 80%; margin-top: 6%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.9)); animation: logoin 1.6s ease-out; }
@keyframes logoin { from { opacity: 0; transform: scale(1.15); filter: blur(6px) brightness(2); } }
#title-press { position: relative; z-index: 2; height: clamp(22px, 4.2vh, 46px); margin-top: 3vh; display: none; animation: blink 1.6s ease-in-out infinite; }
#intro-splash.press #title-press { display: block; }
@keyframes blink { 50% { opacity: .25; } }
#intro-splash .intro-buttons { position: relative; z-index: 2; flex-direction: column; gap: 10px; margin-top: 2.5vh; }
#intro-splash.press .intro-buttons, #intro-splash.press #intro-track { display: none; }
.tbtn {
  width: 332px; height: 44px; border: none; cursor: pointer; color: #f4e7c2;
  background: url(../assets/title/plate.png) center / 100% 100% no-repeat;
  font: 700 15px/44px var(--font-title); letter-spacing: 3px; text-transform: uppercase;
  text-shadow: 0 0 6px #000, 0 2px 2px #000; transition: filter .15s, transform .15s;
}
.tbtn:hover, .tbtn:focus-visible { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255,210,120,.6)); transform: scale(1.04); outline: none; }
#intro-splash #intro-track { position: relative; z-index: 2; margin-top: 14px; color: #c8d0e0; text-shadow: 0 1px 2px #000; }
.title-copy { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(70vw, 600px); opacity: .8; }
.title-dia { z-index: 1; width: 58%; left: 21%; top: -4%; opacity: .78; }
.title-logo { z-index: 2; width: 84%; margin-top: 10%; }
/* Safari keeps a filtered/scaled layer rasterised at the animation's start resolution, which
   leaves the logo blurry: animate opacity only and do not filter the logo (its shadow is baked in) */
.title-logo { filter: none; animation: logoin2 1.6s ease-out; }
@keyframes logoin2 { from { opacity: 0; } }
/* 2D view: the arena's painted backdrop behind the board */
body.view2d #stage { background: linear-gradient(rgba(3,4,10,.55), rgba(3,4,10,.8)), var(--arena-bg, none) center / cover no-repeat, #03040a; }

/* computer opponent indicator */
#ai-think { position: absolute; left: 50%; bottom: 190px; transform: translateX(-50%); z-index: 17; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; opacity: 0; transition: opacity .25s;
  font-family: var(--font-title); letter-spacing: 2px; font-size: 13px; color: #ffd0d8; text-transform: uppercase;
  border: 12px solid transparent; border-image: url(../assets/hud/msgwnd.png) 26 fill / 12px stretch; }
#ai-think.top { bottom: auto; top: 200px; }
#ai-think.show { opacity: 1; }
#ai-think .ai-eye { width: 30px; height: 18px; border-radius: 50%; border: 1px solid #ff4d6a; box-shadow: 0 0 10px #ff4d6a;
  background: radial-gradient(circle, #fff 0 8%, #ff4d6a 10% 35%, #400 38% 60%, transparent 62%); animation: aieye 1.2s ease-in-out infinite; }
@keyframes aieye { 50% { transform: scaleY(.25); } }
.pv-race { font-size: 11px; color: #b8c6e0; font-style: italic; margin: -4px 0 6px; }

/* ===== deck builder (js/deckbuilder.js) restyled to the original HUD (logic untouched) ===== */
body #dbmodal { background: linear-gradient(rgba(2,4,10,.78), rgba(2,4,10,.9)), url(../assets/title/bg7.jpg) center / cover no-repeat; }
body #dbmodal .db-box { background: rgba(6, 9, 18, .72); border: 16px solid transparent; border-radius: 0;
  border-image: url(../assets/hud/msgwnd.png) 26 fill / 16px stretch; backdrop-filter: blur(3px); }
body #dbmodal header h3 { font-family: var(--font-title); letter-spacing: 4px; font-size: 18px; color: #f4e7c2;
  text-shadow: 0 0 10px rgba(255,200,90,.5), 0 2px 2px #000; }
body #dbmodal select, body #dbmodal input { background: rgba(0,0,0,.55); border-color: #4a5a78; color: #e8eefc; }
body #dbmodal .db-cat { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
body #dbmodal .db-card { border: 2px solid #34415e; border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,.6);
  transition: transform .12s, box-shadow .12s, border-color .12s; background: #05070d; }
body #dbmodal .db-card:hover { transform: translateY(-3px) scale(1.04); border-color: #ffd77a; box-shadow: 0 0 16px rgba(255,215,122,.5), 0 8px 18px #000; z-index: 2; }
body #dbmodal .db-card .db-n { background: radial-gradient(circle at 35% 30%, #bff4ff, #1a74e0 60%, #062060); color: #fff;
  border: 1px solid #9fe8ff; text-shadow: 0 1px 2px #000; min-width: 22px; text-align: center; }
body #dbmodal .db-card .db-meta { color: #b8c6e0; background: rgba(0,0,0,.6); }
body #dbmodal aside { border: 12px solid transparent; border-image: url(../assets/hud/msgwnd.png) 26 fill / 12px stretch; padding: 2px; }
body #dbmodal .db-list { border-color: rgba(255,255,255,.08); background: rgba(0,0,0,.35); }
body #dbmodal .db-row:hover { background: rgba(255,215,122,.12); }
body #dbmodal .db-row .c { color: #ffd77a; }
body #dbmodal .db-curve div { background: linear-gradient(#ffe39a, #d49a1a); opacity: .85; }
body #dbmodal .btn:not(.ghost) { background: linear-gradient(180deg, #ffe39a, #d49a1a); color: #2a1800; }
/* card preview on top of the deck builder */
#preview.over-modal { position: fixed; z-index: 70; right: 24px; }

/* ===== tutorial movies ===== */
#guidemodal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(rgba(2,4,10,.8), rgba(2,4,10,.92)), url(../assets/title/bg6.jpg) center / cover no-repeat; }
#guidemodal .g-box { width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  border: 16px solid transparent; border-image: url(../assets/hud/msgwnd.png) 26 fill / 16px stretch; background: rgba(6,9,18,.6); }
#guidemodal header { display: flex; align-items: center; gap: 12px; }
#guidemodal header h3 { margin: 0; font-family: var(--font-title); letter-spacing: 4px; color: #f4e7c2; text-shadow: 0 0 10px rgba(255,200,90,.5); }
#guide-list { overflow-y: auto; padding-right: 4px; }
#guide-list h4 { margin: 10px 0 6px; font-family: var(--font-title); letter-spacing: 2px; color: #d8e6ff; font-weight: 600; }
#guide-list h4 small { font-family: system-ui, sans-serif; letter-spacing: 0; color: var(--muted); font-weight: 400; margin-left: 8px; }
#guide-list .g-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.g-item { position: relative; padding: 0; border: 2px solid #34415e; border-radius: 6px; overflow: hidden; background: #000; cursor: pointer;
  aspect-ratio: 16 / 9; transition: transform .12s, border-color .12s, box-shadow .12s; }
.g-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-item span { position: absolute; left: 6px; bottom: 4px; font: 800 18px var(--font-title); color: #fff; text-shadow: 0 0 6px #000, 0 2px 2px #000; }
.g-item:hover { transform: scale(1.04); border-color: #ffd77a; box-shadow: 0 0 14px rgba(255,215,122,.5); }
#guide-player { display: none; flex-direction: column; gap: 8px; min-height: 0; }
#guidemodal.playing #guide-player { display: flex; }
#guidemodal.playing #guide-list { display: none; }
#guide-video { width: 100%; max-height: calc(100vh - 180px); background: #000; border-radius: 4px; }
.g-ctl { display: flex; align-items: center; gap: 8px; }
#guide-title { flex: 1; text-align: center; font-family: var(--font-title); letter-spacing: 1px; color: #f4e7c2; }
#preview.over-modal { left: 24px; right: auto; background: rgba(6, 8, 14, .96); pointer-events: none; }
#btn-ar.on { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px rgba(55,200,255,.5); }
/* AR: the feed is the scene; keep the HUD, drop the dark stage tint */
body.ar #stage { background: #000; }