/* ═══════════════════════════════════════════════════════════
   Worldborn v4 — 디자인 시스템
   콘셉트: 깊은 우주 + 글래스 패널 + 수집형 카드 + 화려한 FX
   ═══════════════════════════════════════════════════════════ */
:root{
 --bg0:#070811;--bg1:#0d0f22;--bg2:#141733;--bg3:#1c2046;
 --glass:rgba(22,25,54,.72);--glass2:rgba(30,34,72,.6);
 --line:rgba(167,160,220,.16);--line2:rgba(167,160,220,.3);
 --txt:#eceaf8;--muted:#9b97c0;
 --accent:#8b7cf6;--accent2:#a78bfa;--gold:#ffd76a;--cyan:#60d3ff;--green:#69d99c;--pink:#ff9ecb;--red:#ff7e7e;
 --season:#69d99c;
 --r0:#a3a1c2;--r1:#6ea8dc;--r2:#b48be0;--r3:#f5cd67;
 --rad:16px;--rad-s:10px;
 --shadow:0 10px 36px rgba(0,0,0,.5);
 --glow:0 0 22px rgba(139,124,246,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
 font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
 background:
  radial-gradient(1200px 700px at 80% -10%,rgba(139,124,246,.16),transparent 60%),
  radial-gradient(900px 600px at -10% 110%,rgba(96,211,255,.1),transparent 55%),
  linear-gradient(180deg,var(--bg0),var(--bg1) 40%,var(--bg2));
 background-attachment:fixed;
 color:var(--txt);font-size:14.5px;line-height:1.55;
 min-height:100vh;overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;border-radius:11px;padding:9px 16px;font-size:13.5px;font-weight:700;
 color:#14122a;background:linear-gradient(160deg,#cfc4ff,var(--accent2) 55%,var(--accent));
 box-shadow:0 4px 14px rgba(139,124,246,.4),inset 0 1px 0 rgba(255,255,255,.5);
 transition:transform .12s,box-shadow .2s,filter .2s;}
button:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(139,124,246,.55),inset 0 1px 0 rgba(255,255,255,.55);filter:brightness(1.06)}
button:active{transform:translateY(0) scale(.97)}
button:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4)}
button.sec{background:var(--glass2);color:var(--txt);border:1px solid var(--line2);box-shadow:none}
button.sec:hover{border-color:var(--accent2);box-shadow:var(--glow)}
button.sec.tiny{padding:2px 9px;font-size:11px;border-radius:7px}
button.sec.on{border-color:var(--gold);color:var(--gold)}
button.ghost{background:transparent;color:var(--muted);border:1px dashed var(--line2);box-shadow:none}
button.danger{border-color:rgba(255,126,126,.5);color:var(--red)}
input,select,textarea{font-family:inherit;background:rgba(10,11,26,.7);border:1px solid var(--line2);color:var(--txt);border-radius:10px;padding:8px 12px;font-size:13.5px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent2);box-shadow:var(--glow)}
h2{font-size:14px;color:var(--muted);font-weight:800;letter-spacing:.4px;margin:8px 0 6px}
h3{font-size:16px}
abbr{cursor:help;text-decoration:underline dotted var(--muted)}
.mini{font-size:12px;color:var(--muted)}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.gold-t{color:var(--gold);font-weight:700}.green-t{color:var(--green)}.cyan-t{color:var(--cyan)}.red-t{color:var(--red)}
.sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:4px;vertical-align:-1px;border:1px solid rgba(255,255,255,.35)}
.pill{display:inline-flex;align-items:center;gap:4px;background:var(--glass2);border:1px solid var(--line);border-radius:99px;padding:2.5px 10px;font-size:12px}
.pill.chip-char{cursor:pointer}.pill.chip-char:hover{border-color:var(--accent2)}
.empty{padding:36px 20px;text-align:center;color:var(--muted);border:1.5px dashed var(--line2);border-radius:var(--rad);background:rgba(255,255,255,.015)}
.box{background:var(--glass);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;margin:10px 0;backdrop-filter:blur(10px)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:3.5px 0;font-size:13px;border-bottom:1px dashed rgba(167,160,220,.09)}
.kv>span:first-child{color:var(--muted)}
.bigemoji{text-align:center;font-size:44px;margin:8px 0;filter:drop-shadow(0 0 18px rgba(255,215,106,.45));animation:popIn .5s cubic-bezier(.2,1.6,.4,1)}
/* ════════ FX 오버레이 ════════ */
#fxCanvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
.fx-flash{position:fixed;inset:0;background:rgba(255,255,255,.3);pointer-events:none;z-index:9998;animation:flashOut .46s ease-out forwards}
@keyframes flashOut{from{opacity:1}to{opacity:0}}
/* ════════ 타이틀 ════════ */
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;z-index:50;overflow:hidden;
 background:radial-gradient(1100px 800px at 50% 120%,rgba(139,124,246,.28),transparent 60%),linear-gradient(180deg,#05060f,#0d0f24 60%,#181a3a)}
#stars{position:absolute;inset:0;pointer-events:none}
#stars i{position:absolute;background:#fff;border-radius:50%;opacity:.7;animation:twinkle 3s infinite}
#stars b.shooting{position:absolute;width:90px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);transform:rotate(-35deg);opacity:0;animation:shoot 9s infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
@keyframes shoot{0%,88%{opacity:0;transform:rotate(-35deg) translateX(0)}90%{opacity:1}100%{opacity:0;transform:rotate(-35deg) translateX(320px)}}
.logo{font-size:62px;font-weight:900;letter-spacing:4px;text-align:center;line-height:1.1;
 background:linear-gradient(120deg,#fff 10%,#cfc4ff 35%,var(--accent2) 55%,var(--cyan) 85%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 6px 30px rgba(139,124,246,.5));
 animation:logoIn 1.1s cubic-bezier(.2,1.4,.3,1)}
.logo small{display:block;font-size:15px;letter-spacing:9px;color:var(--muted);-webkit-text-fill-color:var(--muted);filter:none;margin-top:10px;font-weight:600}
@keyframes logoIn{from{opacity:0;transform:translateY(26px) scale(.92)}to{opacity:1;transform:none}}
#titleHeroes{display:flex;gap:26px;align-items:flex-end;height:110px}
#titleHeroes .th{animation:floaty 3.2s ease-in-out infinite;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
#titleHeroes .th1{animation-delay:.4s}#titleHeroes .th2{animation-delay:.8s}#titleHeroes .th3{animation-delay:1.2s}#titleHeroes .th4{animation-delay:1.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.titlebtns{display:flex;gap:14px}
.titlebtns button{font-size:16px;padding:13px 34px;border-radius:14px}
.title-sub{color:var(--muted);font-size:13px;letter-spacing:.5px;text-align:center}
/* ════════ 앱 레이아웃 ════════ */
#app{display:none;flex-direction:column;height:100vh}
header{display:flex;align-items:center;gap:10px;padding:10px 18px;
 background:linear-gradient(180deg,rgba(18,20,44,.92),rgba(14,16,36,.78));
 border-bottom:1px solid var(--line);backdrop-filter:blur(14px);z-index:20}
header .brand{font-weight:900;letter-spacing:1.5px;font-size:17px;
 background:linear-gradient(120deg,#fff,var(--accent2) 60%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.res{display:flex;gap:8px;margin-left:auto;align-items:center}
.res .chip{background:var(--glass2);border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-size:13px;font-weight:700;display:inline-flex;gap:5px;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.res .chip b{color:var(--gold)}
#dateChip{color:var(--muted);font-weight:600}
.daybtns{display:flex;gap:6px}
.main{display:flex;flex:1;min-height:0}
nav{display:flex;flex-direction:column;gap:5px;padding:14px 10px;width:152px;border-right:1px solid var(--line);background:rgba(12,13,30,.55);backdrop-filter:blur(10px)}
nav button{position:relative;background:transparent;color:var(--muted);box-shadow:none;text-align:left;padding:11px 14px;border-radius:12px;font-size:13.5px;font-weight:700;border:1px solid transparent;transition:all .18s}
nav button:hover{color:var(--txt);background:rgba(139,124,246,.1);transform:none}
nav button.on{color:#fff;background:linear-gradient(120deg,rgba(139,124,246,.32),rgba(96,211,255,.14));border-color:rgba(139,124,246,.45);box-shadow:var(--glow)}
nav .badge{position:absolute;right:8px;top:8px;background:linear-gradient(120deg,var(--gold),#ffb84d);color:#1b1b26;font-size:10.5px;font-weight:800;border-radius:99px;padding:1px 7px;display:none;box-shadow:0 2px 8px rgba(255,215,106,.5)}
.content{flex:1;overflow-y:auto;padding:18px 20px;min-width:0}
.tabc{display:none}.tabc.on{display:block;animation:tabIn .3s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
aside{width:300px;border-left:1px solid var(--line);background:rgba(12,13,30,.5);display:flex;flex-direction:column;backdrop-filter:blur(10px)}
aside h2{padding:13px 16px 6px}
#feed{flex:1;overflow-y:auto;padding:0 12px 14px;display:flex;flex-direction:column;gap:7px}
.feed-item{background:var(--glass2);border:1px solid var(--line);border-left-width:3px;border-radius:10px;padding:8px 11px;font-size:12.5px;animation:feedIn .35s ease}
.feed-item .t{font-size:10.5px;color:var(--muted);margin-bottom:2px}
.feed-item.life{border-left-color:var(--accent2)}
.feed-item.sns{border-left-color:var(--cyan)}
.feed-item.news{border-left-color:var(--gold)}
.feed-item.oracle{border-left-color:var(--pink)}
.feed-item.match{border-left-color:var(--green)}
@keyframes feedIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
/* 배너 */
.banner{position:relative;display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:linear-gradient(120deg,rgba(139,124,246,.16),rgba(96,211,255,.07));border:1px solid var(--line2);border-radius:var(--rad);padding:13px 16px;margin-bottom:14px;overflow:hidden;font-size:14px}
.banner.village .bannerbg{position:absolute;inset:0;background:radial-gradient(420px 110px at 12% 100%,color-mix(in srgb,var(--season) 26%,transparent),transparent 70%);pointer-events:none}
/* ════════ 크리처/카드 ════════ */
.cr-wrap{display:inline-block;position:relative}
.cr-wrap.idle svg{animation:floaty 3s ease-in-out infinite}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:13px}
.ccard{position:relative;background:linear-gradient(165deg,var(--glass2),rgba(16,18,40,.85));border:1.5px solid var(--line2);border-radius:18px;padding:13px 13px 11px;cursor:pointer;overflow:hidden;
 transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .25s,border-color .25s}
.ccard:hover{transform:translateY(-6px) scale(1.025);box-shadow:0 16px 38px rgba(0,0,0,.55),var(--glow)}
.ccard.rar1{border-color:rgba(110,168,220,.55)}
.ccard.rar2{border-color:rgba(180,139,224,.65);box-shadow:0 0 16px rgba(180,139,224,.18)}
.ccard.rar3{border-color:rgba(245,205,103,.75);box-shadow:0 0 22px rgba(245,205,103,.22)}
.ccard-shine{position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);pointer-events:none;transition:left .5s}
.ccard:hover .ccard-shine{left:130%}
.ccard.rar3 .ccard-shine{animation:autoShine 3.6s infinite}
@keyframes autoShine{0%{left:-80%}45%,100%{left:130%}}
.ccard-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.pwr{font-size:12px;font-weight:800;color:var(--cyan)}
.ccard-art{text-align:center;padding:6px 0 2px;position:relative}
.ccard-art::before{content:'';position:absolute;left:50%;top:54%;width:96px;height:96px;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,color-mix(in srgb,var(--cglow,#8b7cf6) 30%,transparent),transparent 70%);pointer-events:none}
.ccard-name{font-weight:800;font-size:15px;text-align:center;margin-top:2px}
.ccard-sub{font-size:11.5px;color:var(--muted);text-align:center;margin:2px 0 8px}
.ccard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rarbadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px;border-radius:99px;padding:2px 9px;color:#15132b}
.rarbadge.r0{background:var(--r0)}.rarbadge.r1{background:var(--r1)}.rarbadge.r2{background:linear-gradient(120deg,#cfaef5,var(--r2))}
.rarbadge.r3{background:linear-gradient(120deg,#ffe9a8,var(--r3));box-shadow:0 0 12px rgba(245,205,103,.55)}
.rarbadge.sm{font-size:9.5px;padding:1px 7px}
.stage{font-size:10.5px;font-weight:700;border-radius:99px;padding:2px 9px;background:rgba(167,160,220,.15);color:var(--muted);white-space:nowrap}
.stage.prime{background:linear-gradient(120deg,rgba(255,215,106,.25),rgba(255,184,77,.2));color:var(--gold)}
.stage.utopia{background:rgba(96,211,255,.15);color:var(--cyan)}
.stage.recall{background:rgba(105,217,156,.16);color:var(--green)}
.fbar{flex:1;height:7px;background:rgba(0,0,0,.4);border-radius:99px;overflow:hidden}
.fbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#9be8bd);border-radius:99px;transition:width .4s}
.fbar.warn i{background:linear-gradient(90deg,#e8a050,var(--red))}
.statline{margin:4.5px 0}
.statname{width:36px}
.statbar{flex:1;height:9px;background:rgba(0,0,0,.42);border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.statbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--cyan));box-shadow:0 0 8px rgba(139,124,246,.5);transition:width .5s}
.statval{width:28px;text-align:right;font-size:12px;font-weight:700}
.octagon text{font-family:inherit}
.detailart{text-align:center;position:relative}
.detailart::before{content:'';position:absolute;left:50%;top:42%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--cglow,#8b7cf6) 32%,transparent),transparent 70%)}
.resgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
.timeline{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.tl{font-size:12.5px;padding:5px 9px;border-left:2.5px solid var(--line2);border-radius:0 8px 8px 0;background:rgba(255,255,255,.025)}
.tl.star{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(255,215,106,.1),transparent)}
.tl .age{display:inline-block;min-width:34px;font-weight:800;color:var(--accent2)}
/* ════════ 정원 ════════ */
.seedgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.seedcard{background:var(--glass);border:1px solid var(--line2);border-radius:var(--rad);padding:18px 14px;text-align:center;transition:transform .18s,box-shadow .25s}
.seedcard:hover{transform:translateY(-4px);box-shadow:var(--glow)}
.seedic{font-size:40px;margin-bottom:8px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4));animation:floaty 3.4s ease-in-out infinite}
.hatchbtn{margin-top:10px;width:100%}
.seedrow{display:flex;gap:11px;align-items:center;background:var(--glass2);border:1px solid var(--line);border-radius:13px;padding:10px 13px;margin:7px 0;transition:border-color .2s,transform .15s}
.seedrow:hover{border-color:var(--accent2)}
.seedrow .ic{font-size:24px;width:42px;text-align:center}
/* ════════ 게임 센터 ════════ */
.gcat{margin-top:16px;font-size:13.5px;color:var(--accent2);letter-spacing:.6px}
.gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:13px}
.gcard{position:relative;background:linear-gradient(160deg,var(--glass),rgba(14,16,36,.9));border:1.5px solid var(--line2);border-radius:18px;padding:15px;cursor:pointer;overflow:hidden;transition:transform .18s cubic-bezier(.2,1.4,.4,1),box-shadow .25s,border-color .2s}
.gcard:hover{transform:translateY(-5px) scale(1.02);border-color:var(--accent2);box-shadow:0 14px 34px rgba(0,0,0,.5),var(--glow)}
.gcard-glow{position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(139,124,246,.22),transparent 70%);transition:transform .3s;pointer-events:none}
.gcard:hover .gcard-glow{transform:scale(1.5)}
.gcard .gic{display:block;font-size:38px;margin:14px 0 6px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.gcard:hover .gic{animation:bounceIc .5s ease}
@keyframes bounceIc{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px) scale(1.12)}}
.gcard h3{margin-bottom:4px}
.gtag{position:absolute;left:13px;top:12px;font-size:10.5px;font-weight:800;letter-spacing:.5px;background:rgba(139,124,246,.2);border:1px solid rgba(139,124,246,.4);color:var(--accent2);border-radius:99px;padding:2px 9px}
.gplayers{position:absolute;right:13px;top:12px;font-size:10.5px;font-weight:800;background:rgba(255,215,106,.14);border:1px solid rgba(255,215,106,.4);color:var(--gold);border-radius:99px;padding:2px 9px}
.stathint{margin-top:7px;color:#7d79a8}
.recgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px 20px}
/* ════════ 파티 편성 ════════ */
.partybar{display:flex;align-items:center;gap:12px;background:rgba(10,11,26,.6);border:1px solid var(--line2);border-radius:14px;padding:10px 13px;margin:10px 0;position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.partybar .slots{display:flex;gap:7px;flex:1;flex-wrap:wrap}
.pslot{width:50px;height:50px;border-radius:13px;border:1.5px dashed var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:800;background:rgba(255,255,255,.02)}
.pslot.req{border-color:rgba(139,124,246,.55)}
.pslot.filled{border-style:solid;border-color:var(--accent2);background:rgba(139,124,246,.14);box-shadow:var(--glow);animation:popIn .25s cubic-bezier(.2,1.6,.4,1)}
.pslot .opt{opacity:.5}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.btn-go{font-size:14.5px;padding:11px 22px;white-space:nowrap}
.rosterlist{max-height:330px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.rosterrow{display:flex;gap:11px;align-items:center;background:var(--glass2);border:1.5px solid var(--line);border-radius:13px;padding:8px 12px;cursor:pointer;transition:border-color .15s,background .15s,transform .12s}
.rosterrow:hover{border-color:var(--line2);transform:translateX(3px)}
.rosterrow.on{border-color:var(--accent2);background:linear-gradient(120deg,rgba(139,124,246,.16),rgba(96,211,255,.06));box-shadow:var(--glow)}
.rosterrow .ic{width:44px;text-align:center}
.checkdot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#15132b}
.rosterrow.on .checkdot{background:linear-gradient(120deg,var(--gold),#ffb84d);border-color:transparent;box-shadow:0 0 10px rgba(255,215,106,.5)}
.partyrow{display:flex;gap:6px;justify-content:center;margin:8px 0}
.partyrow.big{gap:12px}
/* ════════ 게임 셸 ════════ */
#gameWrap{display:none;position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px;
 background:radial-gradient(900px 600px at 50% -10%,rgba(139,124,246,.18),transparent 60%),rgba(5,6,15,.97);overflow-y:auto}
.game-top{display:flex;align-items:center;gap:12px;width:100%;max-width:920px;margin-bottom:10px}
#gameTitle{font-size:18px;font-weight:900;letter-spacing:.5px}
.gtag-top{font-size:11px;font-weight:700;color:var(--accent2);background:rgba(139,124,246,.16);border:1px solid rgba(139,124,246,.4);padding:2px 10px;border-radius:99px;vertical-align:3px;margin-left:6px}
#gameStage{position:relative;width:100%;max-width:920px;display:flex;flex-direction:column;align-items:center}
.cvwrap{position:relative;width:100%;display:flex;justify-content:center}
#gameCanvas{max-width:100%;border-radius:18px;border:1.5px solid var(--line2);box-shadow:0 0 0 1px rgba(139,124,246,.2),0 18px 50px rgba(0,0,0,.6),inset 0 0 80px rgba(139,124,246,.05);background:#0b0c1d;touch-action:none}
#gameHud{position:absolute;top:10px;left:12px;right:12px;display:flex;gap:7px;align-items:center;pointer-events:none;flex-wrap:wrap}
#gameHud.static{position:static;margin-bottom:10px;pointer-events:auto}
#gameHud .chip{background:rgba(8,9,20,.78);border:1px solid var(--line2);border-radius:99px;padding:4px 12px;font-size:12.5px;backdrop-filter:blur(6px);pointer-events:auto}
#gameHud .chip b{color:var(--gold)}
#gameHud button{pointer-events:auto;padding:5px 14px;font-size:12.5px}
.hpchip{min-width:130px}
.hpbar{width:110px;height:9px;background:rgba(255,255,255,.13);border-radius:99px;overflow:hidden;display:inline-block;vertical-align:middle}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#b8f2cf);border-radius:99px;transition:width .25s}
#gameMsg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,6,15,.78);backdrop-filter:blur(6px);border-radius:18px;z-index:10}
.endcard{background:linear-gradient(165deg,var(--bg3),var(--bg2));border:1.5px solid var(--line2);border-radius:20px;padding:26px 34px;text-align:center;box-shadow:var(--shadow),var(--glow);max-width:480px;animation:popIn .4s cubic-bezier(.2,1.5,.4,1)}
.endcard h3{font-size:21px;margin-bottom:10px}
.endcard .reward{font-size:17px;font-weight:800;color:var(--gold);margin:10px 0}
.endcard .row{margin-top:14px;gap:10px}
.lvlopt{background:var(--glass2);border:1.5px solid var(--line2);border-radius:14px;padding:14px 16px;cursor:pointer;font-weight:700;transition:all .15s;min-width:120px}
.lvlopt:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 20px rgba(255,215,106,.2)}
.dpad{display:none;grid-template-columns:repeat(3,54px);gap:5px;margin-top:12px}
.dpad button{height:48px;font-size:17px;background:var(--glass2);color:var(--txt);border:1px solid var(--line2);box-shadow:none}
.dpad button.blank{visibility:hidden}
.dpad button.act{background:linear-gradient(160deg,#ffe9a8,var(--gold));color:#1b1b26}
.bigact{font-size:16px;padding:13px 30px;border-radius:14px;background:linear-gradient(160deg,#ffe9a8,var(--gold) 60%,#f0b94d);color:#241c08;box-shadow:0 6px 20px rgba(255,215,106,.4),inset 0 1px 0 rgba(255,255,255,.7)}
.bigact.sm{font-size:13px;padding:8px 18px}
/* 보드형 게임 공통 */
.boardwrap{width:100%;max-width:920px;position:relative;background:var(--glass);border:1.5px solid var(--line2);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.roundlog{margin-top:10px;background:rgba(8,9,20,.6);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:12.5px;max-height:130px;overflow-y:auto;line-height:1.7}
.roundlog.tall{max-height:210px}
/* 미궁 */
#rogueGrid{display:grid;gap:3px;justify-content:center;margin:0 auto}
#rogueGrid .cell{width:38px;height:38px;border-radius:8px;background:linear-gradient(160deg,#23264e,#191c3c);display:flex;align-items:center;justify-content:center;font-size:17px;position:relative;border:1px solid rgba(167,160,220,.08)}
#rogueGrid .cell.wall{background:linear-gradient(160deg,#10112a,#0a0b1e);border-color:transparent}
#rogueGrid .cell.exit{background:radial-gradient(circle,rgba(255,215,106,.3),rgba(35,38,78,.9));box-shadow:inset 0 0 12px rgba(255,215,106,.4);animation:exitPulse 1.6s infinite}
@keyframes exitPulse{0%,100%{box-shadow:inset 0 0 10px rgba(255,215,106,.35)}50%{box-shadow:inset 0 0 22px rgba(255,215,106,.7)}}
#rogueGrid .cell.fog{background:#07070f;border-color:transparent}
#rogueGrid .cell.dim{filter:brightness(.45)}
#rogueGrid .cell .hp,#tdGrid .cell .hp{position:absolute;bottom:2px;left:4px;right:4px;height:3.5px;background:rgba(0,0,0,.6);border-radius:99px;overflow:hidden}
#rogueGrid .cell .hp i,#tdGrid .cell .hp i{display:block;height:100%;background:var(--red)}
/* 매치3 */
#m3Grid{display:grid;grid-template-columns:repeat(8,52px);gap:5px;justify-content:center;margin:0 auto}
.m3cell{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;
 background:linear-gradient(160deg,color-mix(in srgb,var(--gc) 26%,#191c3c),color-mix(in srgb,var(--gc) 12%,#12142e));
 border:1.5px solid color-mix(in srgb,var(--gc) 45%,transparent);
 box-shadow:inset 0 2px 6px rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.3);transition:transform .12s,box-shadow .2s}
.m3cell:hover{transform:scale(1.08)}
.m3cell.sel{transform:scale(1.12);border-color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--gc) 80%,transparent)}
.m3cell.pop{animation:gemPop .25s forwards}
@keyframes gemPop{to{transform:scale(0);opacity:0}}
/* v7.2 ❄ 얼음 타일 (스테이지 모드) */
.m3cell{position:relative}
.m3cell.ice1::after,.m3cell.ice2::after{content:'❄';position:absolute;top:0;right:2px;font-size:11px;opacity:.95;pointer-events:none;text-shadow:0 0 4px #9fd8ff}
.m3cell.ice1{box-shadow:inset 0 0 0 999px rgba(140,205,255,.22),0 3px 8px rgba(0,0,0,.3)}
.m3cell.ice2{box-shadow:inset 0 0 0 999px rgba(140,205,255,.44),0 3px 8px rgba(0,0,0,.3);border-color:#9fd8ff}
.combo{color:var(--gold);animation:popIn .3s}
/* 발굴 */
#digGrid{display:grid;gap:4px;justify-content:center;margin:0 auto}
.digcell{width:46px;height:46px;border-radius:10px;background:linear-gradient(160deg,#3a3158,#241f40);border:1px solid rgba(167,160,220,.16);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;position:relative;transition:transform .1s;box-shadow:inset 0 2px 0 rgba(255,255,255,.07)}
.digcell:hover{transform:scale(1.06);border-color:var(--gold)}
.digcell.open{background:#14132b;border-color:rgba(167,160,220,.07);cursor:default;box-shadow:inset 0 3px 8px rgba(0,0,0,.5);animation:popIn .2s}
.digcell.scanned{border-color:rgba(96,211,255,.5);box-shadow:0 0 10px rgba(96,211,255,.25)}
.hintnum{font-size:14px;font-weight:800;color:var(--gold)}
.traphint{position:absolute;bottom:1px;right:4px;font-size:9.5px;color:var(--red);font-weight:700}
.scanmark{font-weight:900;font-size:15px}
.scanmark.good{color:var(--cyan)}.scanmark.bad{color:var(--red)}
/* 낚시 */
.boardwrap.fishing{overflow:hidden}
.lake{position:relative;height:230px;border-radius:14px;overflow:hidden;
 background:linear-gradient(180deg,#131635 0%,#16204a 45%,#102a4e 60%,#0b2240 100%)}
.lake .moon{position:absolute;right:36px;top:18px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffdf2,#ffe9a8 60%,rgba(255,233,168,.0) 75%);box-shadow:0 0 40px rgba(255,233,168,.6)}
.lakewave{position:absolute;left:-20%;width:140%;height:90px;border-radius:45%;opacity:.16;background:#7fd4f2}
.lakewave.w1{bottom:-46px;animation:wave 7s linear infinite}
.lakewave.w2{bottom:-58px;opacity:.1;animation:wave 11s linear infinite reverse}
@keyframes wave{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fisher{position:absolute;left:34px;bottom:64px}
.bobber{position:absolute;left:46%;bottom:78px;font-size:18px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.bobber.floaty{animation:bobberFloat 2.2s ease-in-out infinite}
.bobber.bite{animation:bobberBite .18s linear infinite;font-size:26px}
@keyframes bobberFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bobberBite{0%,100%{transform:translate(0,4px)}50%{transform:translate(2px,-5px)}}
.lake.biting{animation:lakeShake .2s linear infinite}
@keyframes lakeShake{0%,100%{transform:translate(0,0)}50%{transform:translate(1.5px,-1.5px)}}
.bucket{position:absolute;right:18px;bottom:14px;background:rgba(8,9,20,.65);border:1px solid var(--line2);border-radius:10px;padding:5px 11px;font-size:15px}
.bitemark{color:var(--gold);font-weight:900;font-size:16px;animation:popIn .2s}
.reelpanel{margin-top:12px;text-align:center}
.tensionbar{position:relative;height:20px;border-radius:99px;background:rgba(0,0,0,.5);margin:10px auto;max-width:480px;overflow:hidden;border:1px solid var(--line2)}
.tensionbar .zone{position:absolute;left:30%;width:45%;top:0;bottom:0;background:rgba(105,217,156,.25);border-left:1.5px solid var(--green);border-right:1.5px solid var(--green)}
.tensionbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--cyan),var(--accent2));border-radius:99px;transition:width .1s linear}
.tensionbar.danger i{background:linear-gradient(90deg,#e8a050,var(--red))}
.reelbar{height:11px;border-radius:99px;background:rgba(0,0,0,.5);max-width:480px;margin:8px auto;overflow:hidden;border:1px solid var(--line)}
.reelbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#ffe9a8);transition:width .15s}
.fishline{font-size:21px;letter-spacing:4px}
/* 듀얼/경기 */
.vsbox{display:flex;align-items:center;justify-content:center;gap:26px;margin:10px 0;text-align:center}
.vsside{min-width:120px}
.vsmid{text-align:center}
.vstext{font-size:25px;font-weight:900;background:linear-gradient(120deg,var(--gold),#ff9e6a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px rgba(255,158,106,.4))}
.vsmid .score{font-size:22px;font-weight:900;margin-top:2px}
.npcface{font-size:54px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.pickrow{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}
.statpick{background:var(--glass2);color:var(--txt);border:1.5px solid var(--line2);box-shadow:none;padding:9px 4px;line-height:1.3}
.statpick:hover{border-color:var(--gold);color:var(--gold)}
/* 키친 */
.orderbar{display:flex;gap:9px;overflow-x:auto;padding:5px 2px;min-height:86px}
.ordercard{min-width:96px;background:var(--glass2);border:1.5px solid var(--line2);border-radius:13px;padding:8px;text-align:center;animation:popIn .3s}
.ordercard.hurry{border-color:var(--red);animation:hurryShake .4s linear infinite}
@keyframes hurryShake{0%,100%{transform:rotate(0)}25%{transform:rotate(1.3deg)}75%{transform:rotate(-1.3deg)}}
.ordercard .dish{font-size:25px}
.patience{height:5px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:5px}
.patience i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold),var(--green));transition:width 1s linear}
.kitchenrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;margin-top:11px}
.station{background:var(--glass2);border:1.5px solid var(--line2);border-radius:15px;padding:13px;text-align:center}
.station.busy{border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,106,.15)}
.dishnow{font-size:17px;font-weight:800;margin:5px 0}
.timing{position:relative;height:26px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden;margin:10px 0;border:1px solid var(--line2)}
.timing.sm{height:20px}
.timing .zone{position:absolute;top:0;bottom:0;background:rgba(105,217,156,.35)}
.timing .zone.perfect{background:rgba(255,215,106,.55)}
.timing .mark{position:absolute;top:-2px;bottom:-2px;width:5px;background:#fff;border-radius:99px;box-shadow:0 0 10px #fff}
/* 탑/레이드 */
.partyhp{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.phpcard{background:var(--glass2);border:1px solid var(--line2);border-radius:13px;padding:9px 12px;text-align:center;min-width:104px}
.phpcard .hpbar{width:84px;margin-top:4px}
.phpcard.down{opacity:.4;filter:grayscale(.8)}
.blessrow{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.bossbox{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,rgba(255,126,126,.12),rgba(139,124,246,.08));border:1.5px solid rgba(255,126,126,.35);border-radius:16px;padding:13px 16px}
.bossbox.enrage{border-color:var(--red);box-shadow:0 0 24px rgba(255,126,126,.25);animation:enragePulse 1.2s infinite}
@keyframes enragePulse{0%,100%{box-shadow:0 0 14px rgba(255,126,126,.2)}50%{box-shadow:0 0 30px rgba(255,126,126,.45)}}
.bossface{font-size:48px;filter:drop-shadow(0 0 16px rgba(255,126,126,.5));animation:floaty 2.8s ease-in-out infinite}
.bosshp{height:15px;border-radius:99px;background:rgba(0,0,0,.55);overflow:hidden;margin:5px 0;border:1px solid rgba(255,126,126,.4)}
.bosshp i{display:block;height:100%;background:linear-gradient(90deg,#ff5e6a,#ff9e6a);transition:width .4s;box-shadow:0 0 12px rgba(255,94,106,.6)}
.raidtimer{font-size:15px;font-weight:800;color:var(--gold)}
.skillrow{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:11px}
.skillbtn{display:flex;flex-direction:column;gap:3px;padding:11px;line-height:1.3;background:linear-gradient(160deg,var(--bg3),var(--bg2));color:var(--txt);border:1.5px solid var(--line2);box-shadow:none}
.skillbtn:hover{border-color:var(--gold)}
.skillbtn .mini{font-weight:500}
/* 디펜스 */
.towerpick{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.towunit{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--glass2);border:1.5px solid var(--line2);border-radius:13px;padding:7px 12px;cursor:pointer;text-align:center;transition:all .15s}
.towunit:hover{border-color:var(--line2)}
.towunit.on{border-color:var(--gold);box-shadow:0 0 12px rgba(255,215,106,.25);background:linear-gradient(160deg,rgba(255,215,106,.1),var(--glass2))}
#tdGrid{display:grid;gap:3px;justify-content:center;margin:0 auto}
#tdGrid .cell{width:46px;height:46px;border-radius:9px;position:relative;display:flex;align-items:center;justify-content:center;font-size:19px}
#tdGrid .cell.path{background:linear-gradient(160deg,#3d3458,#2b2545);box-shadow:inset 0 0 8px rgba(0,0,0,.4)}
#tdGrid .cell.buildable{background:rgba(105,217,156,.07);border:1px dashed rgba(105,217,156,.25);cursor:pointer;transition:background .15s}
#tdGrid .cell.buildable:hover{background:rgba(105,217,156,.18)}
.towwrap{position:relative;display:inline-block;animation:popIn .25s}
.towic{position:absolute;right:-7px;top:-7px;font-size:12px;font-style:normal;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.foe{font-size:19px;animation:foeBob .5s ease-in-out infinite;z-index:2}
.foe.boss{font-size:26px;filter:drop-shadow(0 0 8px rgba(255,126,126,.7))}
.foe.slowed{filter:hue-rotate(140deg) brightness(1.2)}
@keyframes foeBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* 풋볼/대항전/원정 */
.pitch{position:relative;height:190px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#1d4a33,#16382a);border:1px solid rgba(105,217,156,.3)}
.pitchline{position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,255,255,.3)}
.pitchcircle{position:absolute;left:50%;top:50%;width:80px;height:80px;border:2px solid rgba(255,255,255,.3);border-radius:50%;transform:translate(-50%,-50%)}
.lineup{position:absolute;top:10px;font-size:12.5px;font-weight:700}
.lineup.home{left:14px;top:auto;bottom:8px;display:flex;flex-direction:column;gap:2px}
.lineup.away{right:14px;color:var(--muted)}
.linerow{display:flex;gap:5px}
.pl{position:relative;display:inline-block}
.pl i{position:absolute;right:-5px;bottom:-3px;font-size:11px;font-style:normal}
.scorebig{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-size:38px;font-weight:900;text-shadow:0 4px 18px rgba(0,0,0,.6)}
.warhead{position:relative;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(120deg,rgba(139,124,246,.14),rgba(255,215,106,.1));border:1px solid var(--line2);border-radius:15px;padding:16px 20px;min-height:84px}
.warhead .scorebig{position:static;transform:none}
.warteam{font-weight:800;font-size:15px}
.wargrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:9px;margin-top:11px}
.warcard{display:flex;gap:10px;align-items:center;border-radius:13px;padding:10px 13px;border:1.5px solid var(--line2);background:var(--glass2)}
.warcard.win{border-color:rgba(105,217,156,.5);background:linear-gradient(120deg,rgba(105,217,156,.1),var(--glass2))}
.warcard.lose{opacity:.75}
.warcard .ic{font-size:24px}
.warcard .res{margin-left:auto;font-weight:900;font-size:15px}
.warcard.win .res{color:var(--green)}.warcard.lose .res{color:var(--muted)}
.expedscene{text-align:center;padding:14px 0 4px}
.expedicon{font-size:52px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));animation:floaty 3s ease-in-out infinite}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pathc{background:var(--glass2);border:1.5px solid var(--line2);border-radius:15px;padding:15px 11px;text-align:center;cursor:pointer;transition:all .16s}
.pathc:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.pathc .ic{display:block;font-size:30px;margin-bottom:5px}
/* ════════ 부화 연출 ════════ */
.hatchwrap{text-align:center;padding:22px 10px}
.eggstage{position:relative;display:inline-block;padding:18px}
.eggglow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.4),transparent 70%);animation:eggGlow 1.2s ease-in-out infinite}
.eggstage.r2 .eggglow{background:radial-gradient(circle,rgba(180,139,224,.55),transparent 70%)}
.eggstage.r3 .eggglow{background:radial-gradient(circle,rgba(255,215,106,.6),transparent 70%)}
@keyframes eggGlow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}
.egg{position:relative;font-size:64px;display:inline-block;animation:eggWobble 1s ease-in-out infinite}
.egg.crack{animation:eggCrack .22s linear infinite}
@keyframes eggWobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes eggCrack{0%,100%{transform:rotate(-11deg) translateX(-2px)}50%{transform:rotate(11deg) translateX(2px)}}
.hatchwrap.reveal{animation:revealIn .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes revealIn{from{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:none}}
.revealcard{position:relative;display:inline-block;background:linear-gradient(165deg,var(--bg3),var(--bg1));border:2px solid var(--r0);border-radius:22px;padding:26px 38px 20px;overflow:hidden}
.revealcard.r1{border-color:var(--r1)}
.revealcard.r2{border-color:var(--r2);box-shadow:0 0 34px rgba(180,139,224,.35)}
.revealcard.r3{border-color:var(--r3);box-shadow:0 0 44px rgba(245,205,103,.4)}
/* v7.4 묶음 부화 결과 그리드 */
.multigrid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-height:54vh;overflow-y:auto;padding:4px}
.revealcard.sm{padding:12px 14px 10px;border-radius:16px;cursor:pointer;transition:transform .12s}
.revealcard.sm:hover{transform:translateY(-3px) scale(1.03)}
.hname.sm{font-size:14px;margin:4px 0 3px}
.revealcard .rays{position:absolute;left:50%;top:38%;width:300px;height:300px;transform:translate(-50%,-50%);pointer-events:none;
 background:conic-gradient(from 0deg,transparent 0 20deg,rgba(255,255,255,.07) 20deg 40deg,transparent 40deg 60deg,rgba(255,255,255,.07) 60deg 80deg,transparent 80deg 100deg,rgba(255,255,255,.07) 100deg 120deg,transparent 120deg 140deg,rgba(255,255,255,.07) 140deg 160deg,transparent 160deg 180deg,rgba(255,255,255,.07) 180deg 200deg,transparent 200deg 220deg,rgba(255,255,255,.07) 220deg 240deg,transparent 240deg 260deg,rgba(255,255,255,.07) 260deg 280deg,transparent 280deg 300deg,rgba(255,255,255,.07) 300deg 320deg,transparent 320deg 340deg,rgba(255,255,255,.07) 340deg 360deg);
 animation:raysSpin 9s linear infinite}
@keyframes raysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hname{margin-top:10px;font-size:20px}
/* ════════ 여정/업적 ════════ */
.qstep{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;font-size:13px;margin:3px 0;background:rgba(255,255,255,.02)}
.qstep.done{opacity:.55;text-decoration:line-through}
.qstep .rw{margin-left:auto;color:var(--gold);font-size:12px;text-decoration:none}
.achgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:7px}
.ach{display:flex;gap:10px;align-items:center;background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.ach .ic{font-size:23px;filter:drop-shadow(0 2px 6px rgba(255,215,106,.3))}
.ach.lock{opacity:.4;filter:grayscale(.9)}
/* ════════ 도감 ════════ */
.pillgrid{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.codex-cat .statbar i{background:linear-gradient(90deg,var(--gold),#ffe9a8)}
/* ════════ 다이얼로그/토스트 ════════ */
dialog{margin:auto;border:1.5px solid var(--line2);border-radius:20px;background:linear-gradient(170deg,var(--bg2),var(--bg1));color:var(--txt);padding:0;max-width:620px;width:min(92vw,620px);max-height:86vh;box-shadow:0 30px 90px rgba(0,0,0,.7),var(--glow)}
dialog::backdrop{background:rgba(4,5,12,.7);backdrop-filter:blur(5px)}
.dlg-h{display:flex;align-items:center;gap:10px;padding:15px 20px 11px;border-bottom:1px solid var(--line);position:sticky;top:0;background:inherit;z-index:2}
.dlg-h h3{flex:1;font-size:16.5px}
.dlg-h .x{background:transparent;color:var(--muted);box-shadow:none;padding:4px 10px;font-size:15px}
.dlg-h .x:hover{color:var(--txt)}
.dlg-b{padding:15px 20px 20px;overflow-y:auto;max-height:calc(86vh - 60px)}
#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:10000;pointer-events:none;align-items:center}
.toast{background:linear-gradient(160deg,var(--bg3),var(--bg2));border:1px solid var(--line2);border-radius:13px;padding:10px 20px;font-size:13.5px;box-shadow:var(--shadow);animation:toastIn .3s cubic-bezier(.2,1.4,.4,1), toastOut .4s ease 2.7s forwards}
.toast.gold{border-color:rgba(255,215,106,.55);box-shadow:0 0 24px rgba(255,215,106,.25),var(--shadow)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
.intro-card{line-height:1.85;font-size:14px}
/* ════════ 스크롤바 ════════ */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,124,246,.3);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(139,124,246,.55);border:2px solid transparent;background-clip:content-box}
/* ════════ 반응형 ════════ */
@media (max-width:1100px){aside{display:none}}
@media (max-width:760px){
 .main{flex-direction:column}
 nav{flex-direction:row;width:100%;overflow-x:auto;padding:8px;border-right:none;border-bottom:1px solid var(--line)}
 nav button{white-space:nowrap;padding:8px 12px}
 .logo{font-size:42px}
 .dpad{display:grid}
 header{flex-wrap:wrap}
 .pickrow{grid-template-columns:repeat(4,1fr)}
 #m3Grid{grid-template-columns:repeat(8,40px)}
 .m3cell{width:40px;height:40px;font-size:18px}
 .skillrow{grid-template-columns:1fr}
}
@media (hover:none){.dpad{display:grid}}

/* ════════ v5 추가: 난이도/레벨업/스킬/매니저/야구/라인배틀/콜로세움/메모리/2048/리플레이 ════════ */
.diffrow{display:flex;gap:8px;margin:8px 0}
.diffbtn{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;background:var(--glass2);color:var(--txt);border:1.5px solid var(--line2);box-shadow:none;padding:9px 6px;line-height:1.3}
.diffbtn:hover{border-color:var(--accent2)}
.diffbtn.on{border-color:var(--gold);background:linear-gradient(160deg,rgba(255,215,106,.14),var(--glass2));box-shadow:0 0 14px rgba(255,215,106,.22)}
.gtag-top.diff0{border-color:rgba(105,217,156,.5);color:var(--green);background:rgba(105,217,156,.12)}
.gtag-top.diff2{border-color:rgba(255,126,126,.55);color:var(--red);background:rgba(255,126,126,.12)}
.endcard.wide{max-width:640px}
.lvlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:8px}
.lvlopt{position:relative;text-align:left;padding:12px 13px}
.lvlopt .lvlrar{position:absolute;right:9px;top:8px;font-size:10px;font-weight:800;opacity:.85}
.lvlopt .stack{margin-top:5px;color:var(--cyan)}
.lvlopt.rar0{border-color:var(--line2)}
.lvlopt.rar1{border-color:rgba(110,168,220,.6)}.lvlopt.rar1 .lvlrar{color:var(--r1)}
.lvlopt.rar2{border-color:rgba(180,139,224,.7);box-shadow:0 0 12px rgba(180,139,224,.18)}.lvlopt.rar2 .lvlrar{color:var(--r2)}
.lvlopt.rar3{border-color:rgba(245,205,103,.8);box-shadow:0 0 18px rgba(245,205,103,.3);background:linear-gradient(160deg,rgba(255,215,106,.1),var(--glass2))}.lvlopt.rar3 .lvlrar{color:var(--r3)}
/* 퍼즐 스킬 패널 */
.skillpanel{display:inline-flex;align-items:center;gap:7px;background:rgba(8,9,20,.7);border:1.5px solid var(--line2);border-radius:99px;padding:3px 10px 3px 5px;margin-left:auto}
.skillpanel.ready{border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,106,.3);animation:skillReady 1.4s infinite}
@keyframes skillReady{0%,100%{box-shadow:0 0 8px rgba(255,215,106,.25)}50%{box-shadow:0 0 20px rgba(255,215,106,.5)}}
.skinfo{display:flex;flex-direction:column;gap:2px;font-size:11px}
.skgauge{width:90px;height:6px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden}
.skgauge i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--gold));transition:width .3s}
button.sec.glow{border-color:var(--gold);color:var(--gold);box-shadow:0 0 10px rgba(255,215,106,.35)}
/* 매치3 연출 */
#m3Wrap{position:relative;width:fit-content;margin:0 auto}
.m3cell.fall{animation:gemFall .24s cubic-bezier(.3,1.2,.5,1)}
@keyframes gemFall{from{transform:translateY(var(--fd,-57px));opacity:.6}to{transform:translateY(0);opacity:1}}
.m3cell.shakeg{animation:gemShake .2s linear infinite}
@keyframes gemShake{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
.m3cell.special{box-shadow:0 0 14px color-mix(in srgb,var(--gc) 70%,transparent),inset 0 2px 6px rgba(255,255,255,.14)}
.lineg{position:relative;display:inline-block}
.lineg::after{content:'';position:absolute;inset:-4px;border-radius:8px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:lineSweep 1.1s infinite}
.lineg.v::after{background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent)}
@keyframes lineSweep{0%{opacity:.2}50%{opacity:.9}100%{opacity:.2}}
.starg{display:inline-block;filter:drop-shadow(0 0 8px #ffd76a);animation:floaty 1.6s ease-in-out infinite}
.beam{position:absolute;pointer-events:none;z-index:5;animation:beamFlash .3s ease-out forwards}
.beamH{left:0;right:0;height:8px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 18px #a78bfa}
.beamV{top:0;bottom:0;width:8px;background:linear-gradient(180deg,transparent,#fff,transparent);box-shadow:0 0 18px #a78bfa}
@keyframes beamFlash{from{opacity:1}to{opacity:0}}
.m3pop{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:21px;font-weight:900;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.7);pointer-events:none;z-index:6;animation:popFloat .9s ease-out forwards}
.m3pop.big{font-size:28px;color:#fff}
@keyframes popFloat{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:0;transform:translate(-50%,-110%) scale(1)}}
/* 풋볼 매니저 */
.scpitch{background:linear-gradient(180deg,#1d4a33,#16382a);border:1px solid rgba(105,217,156,.3);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.scrow{display:flex;gap:10px;justify-content:center}
.scslot{position:relative;width:120px;min-height:104px;background:rgba(8,9,20,.45);border:1.5px dashed rgba(255,255,255,.25);border-radius:13px;text-align:center;padding:8px 6px;cursor:pointer;transition:all .15s}
.scslot:hover{border-color:var(--gold)}
.scslot.filled{border-style:solid;border-color:rgba(255,255,255,.35)}
.scslot.sel{border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,106,.35);background:rgba(255,215,106,.08)}
.rolebadge{position:absolute;left:6px;top:6px;font-size:9.5px;font-weight:800;background:rgba(0,0,0,.5);border-radius:99px;padding:1px 7px}
.aptstars{font-size:11px;color:var(--gold);letter-spacing:1px}
.dimstar{opacity:.25}
.benchrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.benchchip{display:flex;gap:7px;align-items:center;background:var(--glass2);border:1.5px solid var(--line);border-radius:12px;padding:5px 10px;cursor:pointer;transition:all .15s}
.benchchip:hover{border-color:var(--accent2)}
.benchchip.pickable{border-color:rgba(255,215,106,.5);animation:skillReady 1.4s infinite}
.aptmini{font-size:10px;color:var(--muted)}
.tacrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px}
.tacgroup{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.leagueline{margin-top:8px;padding:7px 11px;border:1px dashed rgba(255,215,106,.4);border-radius:10px;background:rgba(255,215,106,.05)}
/* 야구 */
.bborder{display:flex;flex-direction:column;gap:6px}
.bbrow{display:flex;gap:9px;align-items:center;background:var(--glass2);border:1.5px solid var(--line);border-radius:12px;padding:7px 11px}
.bbrow.pit{border-color:rgba(96,211,255,.55);background:linear-gradient(120deg,rgba(96,211,255,.08),var(--glass2))}
.bbnum{font-weight:900;color:var(--accent2);width:34px}
.bbscore{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(120deg,rgba(139,124,246,.12),rgba(255,215,106,.08));border:1px solid var(--line2);border-radius:14px;padding:12px 16px;flex-wrap:wrap}
.bbteam{font-weight:800}
.linescore{border-collapse:collapse;margin:0 auto}
.linescore th,.linescore td{border:1px solid var(--line);padding:3px 9px;font-size:12.5px;text-align:center}
.linescore th{color:var(--muted);font-weight:600}
/* 라인 배틀 */
.lbbar{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.lbbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;background:var(--glass2);color:var(--txt);border:1.5px solid var(--line2);box-shadow:none;padding:7px 12px;overflow:hidden}
.lbbtn:hover{border-color:var(--gold)}
.lbbtn.off{opacity:.45}
.lbcd{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);pointer-events:none;transition:height .1s linear}
/* 콜로세움 */
.cbarena{display:flex;flex-direction:column;gap:4px}
.phpcard.turn{border-color:var(--gold);box-shadow:0 0 16px rgba(255,215,106,.35);transform:translateY(-3px)}
.ultbar{height:5px;border-radius:99px;background:rgba(0,0,0,.5);overflow:hidden;margin-top:3px;width:84px;display:inline-block}
.ultbar i{display:block;height:100%;background:linear-gradient(90deg,#ff9e6a,var(--gold))}
.cbcmd{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:11px 0;padding:10px;border:1px solid var(--line2);border-radius:13px;background:rgba(255,255,255,.025)}
.ultbtn{background:linear-gradient(160deg,#ffe9a8,#ff9e6a);color:#241c08}
/* 페어 메모리 */
#mmGrid{display:grid;grid-template-columns:repeat(4,86px);gap:9px;justify-content:center;margin:0 auto;perspective:700px}
.mmcard{position:relative;width:86px;height:104px;cursor:pointer;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.3,1.3,.5,1)}
.mmcard.open{transform:rotateY(180deg)}
.mmcard.done{cursor:default;filter:drop-shadow(0 0 8px rgba(255,215,106,.5))}
.mmface{position:absolute;inset:0;border-radius:13px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;border:1.5px solid var(--line2)}
.mmface.back{background:linear-gradient(160deg,var(--bg3),var(--bg2));font-size:24px}
.mmface.front{background:linear-gradient(160deg,#2a2d5c,#1c1f44);transform:rotateY(180deg)}
.mmcard.done .mmface.front{border-color:var(--gold)}
/* 2048 */
#t2Grid{display:grid;grid-template-columns:repeat(4,84px);gap:9px;justify-content:center;margin:0 auto;background:rgba(8,9,20,.5);border:1px solid var(--line2);border-radius:16px;padding:12px;width:fit-content}
.t2cell{width:84px;height:84px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;background:rgba(255,255,255,.04);color:#fff}
.t2cell.on{background:linear-gradient(160deg,color-mix(in srgb,var(--tc) 90%,#fff),var(--tc));box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.25);animation:popIn .15s;text-shadow:0 2px 6px rgba(0,0,0,.35)}
/* 리플레이/리그 */
.replaylist{display:flex;flex-direction:column;gap:6px}
.replayrow{display:flex;gap:10px;align-items:center;background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:8px 12px;cursor:pointer;transition:all .15s}
.replayrow:hover{border-color:var(--accent2);transform:translateX(3px)}
.replayrow .ic{font-size:20px}
.rpline{animation:feedIn .3s ease}
.leaguebox{border-color:rgba(255,215,106,.3)}
@media (max-width:760px){
 #mmGrid{grid-template-columns:repeat(4,72px)}
 .mmcard{width:72px;height:88px}
 #t2Grid{grid-template-columns:repeat(4,68px)}
 .t2cell{width:68px;height:68px}
 .scslot{width:96px}
}

/* ════════ v6: 인텐트/미션/덱빌딩/블록/방치형/스도쿠 ════════ */
.intent{font-size:10.5px;font-weight:800;background:rgba(255,126,126,.14);border:1px solid rgba(255,126,126,.45);border-radius:99px;padding:1px 8px;margin-bottom:3px;animation:popIn .25s}
.chip.mission{border-color:rgba(255,215,106,.5);color:var(--gold)}
.chip.mission.done{border-color:rgba(105,217,156,.6);color:var(--green)}
.towlvl{position:absolute;left:-4px;top:-8px;font-size:9px;color:var(--gold);font-style:normal;text-shadow:0 1px 3px #000}
.bossfoe{font-size:26px;filter:drop-shadow(0 0 8px rgba(255,126,126,.8))}
/* 덱빌딩 */
.dkfoe{display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,rgba(255,126,126,.1),rgba(139,124,246,.07));border:1.5px solid rgba(255,126,126,.35);border-radius:16px;padding:13px 16px;flex-wrap:wrap}
.dkfoe.boss{border-color:var(--red);box-shadow:0 0 22px rgba(255,126,126,.25)}
.dkfoeface{font-size:42px;animation:floaty 2.6s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,126,126,.4))}
.dkme{margin-left:auto}
.dkhand{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:12px;min-height:120px}
.dkcard{position:relative;width:116px;background:linear-gradient(165deg,var(--bg3),var(--bg2));border:1.5px solid var(--line2);border-radius:14px;padding:22px 10px 10px;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .15s}
.dkcard:hover{transform:translateY(-8px) scale(1.04);border-color:var(--gold);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.dkcard.off{opacity:.45;filter:grayscale(.5)}
.dkcard.pick{border-color:rgba(255,215,106,.6);animation:popIn .3s}
.dkcost{position:absolute;left:7px;top:6px;width:22px;height:22px;border-radius:50%;background:linear-gradient(160deg,#9fdcff,#3fa8e8);color:#0a2030;font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.dkic{display:block;font-size:26px;margin-bottom:3px}
.dkpickrow{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px;border:1.5px dashed rgba(255,215,106,.4);border-radius:14px;background:rgba(255,215,106,.04)}
/* 블록 */
#blGrid{display:grid;grid-template-columns:repeat(8,46px);gap:4px;justify-content:center;margin:0 auto;background:rgba(8,9,20,.5);border:1px solid var(--line2);border-radius:14px;padding:10px;width:fit-content}
.blcell{width:46px;height:46px;border-radius:8px;background:rgba(255,255,255,.05);cursor:pointer;transition:background .1s}
.blcell:hover{background:rgba(255,255,255,.13)}
.blcell.on{background:linear-gradient(160deg,color-mix(in srgb,var(--bc) 95%,#fff),var(--bc));box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 6px rgba(0,0,0,.35);animation:popIn .15s}
.blpieces{display:flex;gap:16px;justify-content:center;margin-top:12px;min-height:84px}
.blpiece{padding:9px;border:1.5px solid var(--line2);border-radius:12px;background:var(--glass2);cursor:pointer;line-height:0;transition:all .15s}
.blpiece:hover{border-color:var(--accent2)}
.blpiece.sel{border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,106,.35);transform:scale(1.08)}
.blpiece.empty{visibility:hidden}
.blpiece i{display:inline-block;width:15px;height:15px;border-radius:3.5px;margin:1px;background:transparent}
.blpiece i.on{background:linear-gradient(160deg,color-mix(in srgb,var(--bc) 95%,#fff),var(--bc))}
/* 방치형 */
.idmain{display:flex;gap:26px;align-items:center;justify-content:center;padding:14px 0}
.idore{width:150px;height:150px;border-radius:50%;font-size:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
 background:radial-gradient(circle at 35% 30%,#5a5378,#332e4e 70%);border:3px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 4px 14px rgba(255,255,255,.12);color:var(--txt)}
.idore:hover{border-color:var(--gold)}
.idore.punch{animation:orePunch .18s ease-out}
@keyframes orePunch{0%{transform:scale(1)}40%{transform:scale(.92)}100%{transform:scale(1)}}
.idchar{text-align:center}
.idrigs{display:flex;flex-direction:column;gap:7px;max-width:560px;margin:0 auto}
.idrig{display:flex;gap:11px;align-items:center;background:var(--glass2);border:1.5px solid var(--line);border-radius:13px;padding:9px 13px;cursor:pointer;opacity:.7;transition:all .15s}
.idrig.can{opacity:1;border-color:rgba(105,217,156,.45)}
.idrig.can:hover{border-color:var(--gold);transform:translateX(3px)}
.idrig .ic{font-size:26px}
.idcost{font-weight:800;color:var(--gold);white-space:nowrap}
/* 스도쿠 */
#suGrid{display:grid;grid-template-columns:repeat(6,56px);gap:3px;justify-content:center;margin:0 auto;background:rgba(8,9,20,.5);border:1px solid var(--line2);border-radius:14px;padding:10px;width:fit-content}
.sucell{width:56px;height:56px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;background:rgba(255,255,255,.05);cursor:pointer;color:var(--cyan)}
.sucell.shade{background:rgba(139,124,246,.1)}
.sucell.given{color:var(--txt);cursor:default}
.sucell.sel{outline:2px solid var(--gold);box-shadow:0 0 14px rgba(255,215,106,.35)}
.sucell.same{background:rgba(255,215,106,.16);color:var(--gold)} /* v7.3 같은 숫자 하이라이트 */
.supad{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.supad button{width:52px;height:46px;font-size:18px}
@media (max-width:760px){
 #blGrid{grid-template-columns:repeat(8,38px)}.blcell{width:38px;height:38px}
 #suGrid{grid-template-columns:repeat(6,48px)}.sucell{width:48px;height:48px}
 .dkcard{width:98px}
}

/* ════════ v6.1: 플레이 설명서 ════════ */
.howbox{display:flex;flex-direction:column;gap:10px}
.howsec{display:flex;gap:10px;align-items:flex-start;background:var(--glass2);border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:13.5px;line-height:1.65}
.howtag{flex-shrink:0;font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px;white-space:nowrap;margin-top:1px}
.howtag.goal{background:rgba(255,215,106,.15);color:var(--gold);border:1px solid rgba(255,215,106,.4)}
.howtag.ctrl{background:rgba(96,211,255,.13);color:var(--cyan);border:1px solid rgba(96,211,255,.4)}
.howtag.sys{background:rgba(167,139,250,.14);color:var(--accent2);border:1px solid rgba(167,139,250,.4)}
.howtag.tip{background:rgba(105,217,156,.13);color:var(--green);border:1px solid rgba(105,217,156,.4)}

/* ════════ v6.2: 편성 그리드 + 성능 미리보기 + 응원단 ════════ */
.rostergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:340px;overflow-y:auto;padding:3px}
.rostercard{position:relative;background:linear-gradient(165deg,var(--glass2),rgba(14,16,38,.85));border:1.5px solid var(--line2);border-radius:14px;padding:9px 5px 7px;text-align:center;cursor:pointer;transition:transform .13s,border-color .15s,box-shadow .2s}
.rostercard:hover{transform:translateY(-3px);border-color:var(--accent2)}
.rostercard.on{border-color:var(--gold);background:linear-gradient(165deg,rgba(255,215,106,.13),rgba(14,16,38,.85));box-shadow:0 0 14px rgba(255,215,106,.3)}
.rostercard.rar2{border-color:rgba(180,139,224,.55)}.rostercard.rar2.on{border-color:var(--gold)}
.rostercard.rar3{border-color:rgba(245,205,103,.6)}
.rostercard.tired{opacity:.75}
.rc-check{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;font-size:12px;font-weight:900;color:#15132b;display:flex;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--line2)}
.rostercard.on .rc-check{background:linear-gradient(120deg,var(--gold),#ffb84d);border-color:transparent}
.rc-flag{position:absolute;left:5px;top:5px;font-size:12px}
.rc-name{font-size:12px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-sub{font-size:10.5px;color:var(--muted)}
.briefbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:rgba(96,211,255,.06);border:1px dashed rgba(96,211,255,.35);border-radius:12px;padding:7px 11px;margin-top:8px;min-height:38px}
.brieftag{font-size:11px;font-weight:800;color:var(--cyan);white-space:nowrap}
.bchip{font-size:12px;background:rgba(8,9,20,.6);border:1px solid var(--line2);border-radius:99px;padding:2.5px 10px;animation:popIn .25s}
/* 응원단 */
.cheerpop{position:absolute;left:18px;bottom:18px;display:flex;gap:9px;align-items:center;z-index:50;
 background:linear-gradient(160deg,rgba(28,26,60,.95),rgba(18,16,42,.95));border:1.5px solid rgba(255,158,203,.55);border-radius:16px;padding:9px 14px 9px 9px;
 box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 18px rgba(255,158,203,.25);animation:cheerIn .45s cubic-bezier(.2,1.5,.4,1),cheerOut .4s ease 3.7s forwards;pointer-events:none}
.cheerchar{animation:floaty 1.4s ease-in-out infinite}
.cheermsg{display:flex;flex-direction:column;gap:2px;font-size:12px}
.cheermsg .bubble{background:rgba(255,158,203,.14);border:1px solid rgba(255,158,203,.4);border-radius:10px;padding:3px 9px;font-size:12.5px}
.cheerfx{color:var(--gold);font-weight:700;font-size:11px}
@keyframes cheerIn{from{opacity:0;transform:translateY(24px) scale(.8)}to{opacity:1;transform:none}}
@keyframes cheerOut{to{opacity:0;transform:translateY(14px)}}
@media (max-width:760px){.rostergrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}}

/* ════════ v6.2.1 핫픽스: 서바이버 레벨업 카드 가로 정렬 ════════
   원인: fit-content 컨테이너 안의 repeat(auto-fit,...) 그리드는 1열로 붕괴 → 확정 너비 부여 */
#gameMsg .endcard.wide{width:min(700px,94vw);max-width:none}
.lvlgrid{grid-template-columns:repeat(auto-fit,minmax(118px,1fr));width:100%}
.lvlopt{min-width:0}
@media (max-width:760px){.lvlgrid{grid-template-columns:repeat(2,1fr)}}

/* ════════ v6.3: 일시정지 ════════ */
.pauseov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(5,6,15,.72);backdrop-filter:blur(7px);z-index:60;animation:tabIn .2s ease}
.pausecard{background:linear-gradient(165deg,var(--bg3),var(--bg2));border:1.5px solid var(--line2);border-radius:20px;padding:28px 40px;text-align:center;box-shadow:var(--shadow),var(--glow)}
.pauseic{font-size:46px;margin-bottom:6px;animation:floaty 2s ease-in-out infinite}

/* ════════ v6.4: 퍼포먼스 ════════ */
/* 게임 중 배경 UI 페인트·애니메이션 완전 차단 (오버레이가 전면을 덮음) */
body.in-game #app{visibility:hidden}
body.in-game #app *{animation-play-state:paused!important}
/* 그리드 크리처: SMIL 대신 컴포지터 처리 CSS 부유 (transform만 사용) */
.cr-wrap.sway svg{animation:crSway 3.4s ease-in-out infinite}
.grid .ccard:nth-child(2n) .cr-wrap.sway svg{animation-delay:-1.7s}
.grid .ccard:nth-child(3n) .cr-wrap.sway svg{animation-duration:4.2s}
.grid .ccard:nth-child(5n) .cr-wrap.sway svg{animation-delay:-.9s}
@keyframes crSway{50%{transform:translateY(-2.5px)}}
/* 렌더 격리: 카드/피드 항목의 레이아웃·페인트 전파 차단 */
.ccard,.feed-item,.rostercard{contain:content}
/* 이펙트 OFF: 무한 애니메이션·블러 비활성 (저사양 모드) */
body.fx-off .cr-wrap.sway svg,body.fx-off .cr-wrap.idle svg,body.fx-off .ccard-shine,body.fx-off .th,body.fx-off .eggglow,body.fx-off .pauseic{animation:none!important}
body.fx-off header,body.fx-off nav,body.fx-off aside,body.fx-off .pauseov,body.fx-off dialog{backdrop-filter:none!important}
/* 시스템 모션 최소화 존중 */
@media (prefers-reduced-motion:reduce){
 .cr-wrap.sway svg,.cr-wrap.idle svg,.ccard-shine,.th,#stars i,#stars b{animation:none!important}
}

/* ════════ v7.0-S: 라이브 중계 · 기록실 ════════ */
.castwrap{max-width:760px;margin:0 auto}
.casthead{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 20px;border-radius:16px;background:linear-gradient(165deg,var(--bg3),var(--bg2));border:1.5px solid var(--line2);box-shadow:var(--shadow)}
.castteam{font-weight:700;font-size:15px;flex:1;text-align:center}
.castscore{font-size:34px;font-weight:800;letter-spacing:2px;color:var(--gold,#ffd76a);min-width:120px;text-align:center;text-shadow:0 2px 10px rgba(255,215,106,.35)}
.castbar{display:flex;align-items:center;gap:8px;margin:10px 0 8px;padding:6px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.castbar .live{color:#ff6a6a;font-weight:800;font-size:12px;animation:castLive 1.4s ease-in-out infinite}
@keyframes castLive{50%{opacity:.35}}
.castbar .castspd.on{border-color:var(--accent);color:var(--accent)}
.castfeed{height:300px;overflow-y:auto;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.castev{padding:5px 8px;margin:3px 0;border-radius:8px;animation:castIn .25s ease;font-size:13.5px;line-height:1.5}
@keyframes castIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.castev.hl{background:linear-gradient(90deg,rgba(255,215,106,.16),transparent);border-left:3px solid var(--gold,#ffd76a);font-weight:600}
body.fx-off .castev{animation:none}
.standings{width:100%;border-collapse:collapse;margin:6px 0;font-size:13px}
.standings th,.standings td{padding:4px 8px;text-align:center;border-bottom:1px solid var(--line)}
.standings th{color:var(--muted);font-weight:600;font-size:12px}
.standings tr.mine td{background:rgba(167,139,250,.12);font-weight:700}
.boxscore{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.boxscore th,.boxscore td{padding:4px 10px;text-align:center;border-bottom:1px solid var(--line)}
.boxscore tr.mvp td{background:rgba(255,215,106,.1)}
.scpitch.bk{background:linear-gradient(165deg,#3a2a1e,#2a1e14);border-radius:14px}