/* 리그 오브 스노우 화면 꾸밈
   틀: 왕자영요(휴대폰 조작·로비)·롤(PC 기술 칸·점수판·결과표)·브롤스타즈(큰 단추·상점 카드)처럼 익숙하게.
   그림체: 밤·눈·랜턴. 남색 판 + 얼음 테 + 위에 쌓인 눈 + 랜턴 금색 단추. 그림은 art/*.webp (이모지 없음) */
:root {
  --night: #070f24; --navy: #0d1a3a; --navy2: #14275a; --navy3: #1d3772; --line: #0a1430;
  --ice: #7cc4ff; --ice2: #bfe3ff; --frost: #eaf5ff; --amber: #f5a623; --amber2: #ffd36b; --amberD: #a85d00;
  --berry: #e5484d; --mint: #5fd3a8; --lilac: #b49cff; --blue: #3b82f6; --red: #ef4444; --gold: #ffd36b;
  --text: #eef5ff; --text2: #a9bde3;
  --panel: linear-gradient(180deg, #1b3168 0%, #11224b 55%, #0c1838 100%);
  --edge: inset 0 0 0 2px rgba(150, 205, 255, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.14);
  --font: "Trebuchet MS", "Arial Rounded MT Bold", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --stroke: 0 2px 0 var(--line), 2px 0 0 var(--line), -2px 0 0 var(--line), 0 -2px 0 var(--line), 1.5px 1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px -1.5px 0 var(--line);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: radial-gradient(ellipse 120% 80% at 50% -10%, #24427d 0%, #0c1834 55%, #050a18 100%); font-family: var(--font); color: var(--text); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui button, #ui input, #ui .pe { pointer-events: auto; }
button { font: inherit; cursor: pointer; border: 0; color: inherit; }
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; } /* 한국어는 낱말 중간에서 줄을 바꾸지 않음 */
img.art { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
img.art.mini { display: inline-block; width: 22px; height: 22px; vertical-align: middle; flex: none; }
img.art.coin { display: inline-block; width: 22px; height: 22px; flex: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)); }
svg.ico { width: 22px; height: 22px; flex: none; display: inline-block; vertical-align: middle; }

/* ── 화면 틀 ── */
.screen { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 16px; text-align: center; }
.screen:empty { display: none; }
.screen::before, .screen::after { content: ''; flex: none; } .screen::before { margin-top: auto; } .screen::after { margin-bottom: auto; }
.screen.ttl { background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(5,12,32,0.55), rgba(5,12,32,0) 75%), linear-gradient(rgba(5,12,32,0.35), rgba(5,12,32,0) 20%, rgba(5,12,32,0) 75%, rgba(5,12,32,0.55)); }
.screen.dim { background: radial-gradient(ellipse at 50% 40%, rgba(10,22,52,0.55), rgba(3,8,22,0.8)); pointer-events: auto; z-index: 20; }
.screen:not(.dim):not(.ttl) { background: linear-gradient(rgba(5,12,32,0.55), rgba(5,12,32,0.35) 40%, rgba(5,12,32,0.65)); }

/* 로고: 눈 덮인 굵은 글자 + 랜턴 금색 부제 */
.logo { position: relative; font-size: clamp(38px, 8.6vw, 88px); font-weight: 900; line-height: 0.95; color: #fff; letter-spacing: 1px;
  text-shadow: 0 3px 0 #9cc8ff, 0 6px 0 #2b5fae, 0 9px 0 #173a75, 0 10px 0 var(--line), 0 16px 26px rgba(0,20,60,0.55); transform: rotate(-3deg); }
.logo small { display: block; font-size: 0.3em; letter-spacing: 4px; color: var(--amber2); text-shadow: 0 2px 0 var(--amberD), 0 3px 0 var(--line), 0 0 18px rgba(255,190,90,0.55); margin-top: 10px; }
.tagline { font-size: clamp(14px, 2.3vw, 20px); font-weight: 900; color: #fff; padding: 5px 16px; border-radius: 20px; background: linear-gradient(90deg, rgba(10,20,48,0), rgba(10,20,48,0.75) 18%, rgba(10,20,48,0.75) 82%, rgba(10,20,48,0)); text-shadow: 0 2px 0 var(--line); }
.stitle h2 { margin: 0; font-size: clamp(20px, 3.2vw, 30px); font-weight: 900; color: #fff; text-shadow: var(--stroke), 0 4px 0 var(--line); letter-spacing: 0.5px; }
.stitle { padding: 4px 34px; background: linear-gradient(90deg, rgba(245,166,35,0), rgba(245,166,35,0.25) 30%, rgba(245,166,35,0.25) 70%, rgba(245,166,35,0)); border-top: 1px solid rgba(255,211,107,0.45); border-bottom: 1px solid rgba(255,211,107,0.45); }

/* ── 단추 (브롤스타즈처럼 굵은 테두리 + 아래 두께) ── */
.btn { pointer-events: auto; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 200px; min-height: 48px; padding: 12px 26px; border-radius: 16px; font-size: 20px; font-weight: 900; color: #fff; letter-spacing: 0.3px;
  border: 3px solid var(--line); background: linear-gradient(#8fd0ff, #4a9df0 50%, #2f74e0); text-shadow: 0 2px 0 rgba(10,20,48,0.6);
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.55), 0 4px 0 var(--line), 0 9px 16px rgba(0,10,40,0.35); transition: transform 0.08s, filter 0.08s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.5), 0 1px 0 var(--line); }
.btn.go { background: linear-gradient(#ffe9a3, #ffc93d 45%, #f5a623 75%, #e08a00); color: #4a2400; text-shadow: 0 1px 0 rgba(255,255,255,0.55); }
.btn.alt { background: linear-gradient(#36549a, #213a75 60%, #182c5c); color: var(--text); }
.btn.hub { background: linear-gradient(#d6c6ff, #a283ff 50%, #6d3fe0); }
.btn.small { min-width: 0; min-height: 44px; padding: 8px 16px; font-size: 16px; border-radius: 13px; }
.btn.back svg { width: 18px; height: 18px; margin-left: -4px; }
.btn svg.ico { width: 20px; height: 20px; }
.btn[disabled] { filter: grayscale(0.8) brightness(0.75); cursor: default; }
.row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; }

/* ── 판 (남색 + 얼음 테 + 위에 쌓인 눈) ── */
.panel { pointer-events: auto; position: relative; background: var(--panel); border: 3px solid var(--line); border-radius: 20px; padding: 18px 20px; box-shadow: var(--edge), 0 14px 34px rgba(0,0,0,0.5); max-width: min(92vw, 760px); max-height: calc(100% - 24px); overflow-y: auto; }
.panel.frame { background-image: radial-gradient(ellipse 18px 8px at 50% 0, #f4f9ff 0 92%, transparent 100%), radial-gradient(ellipse 11px 6px at 50% 0, #dcebff 0 92%, transparent 100%), linear-gradient(#f4f9ff, #f4f9ff), var(--panel);
  background-size: 46px 10px, 46px 8px, 100% 3px, 100% 100%; background-position: 0 0, 23px 0, 0 0, 0 0; background-repeat: repeat-x, repeat-x, no-repeat, no-repeat; background-attachment: local; }
.panel h2 { margin: 0 0 12px; font-size: 24px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.panel h3 { margin: 16px 0 8px; font-size: 15px; color: var(--amber2); display: flex; align-items: center; gap: 8px; letter-spacing: 0.4px; }
.panel h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,211,107,0.5), rgba(255,211,107,0)); }
img.art.hico { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.3)); }
img.art.hico.big { width: 76px; height: 76px; margin: 0 auto 4px; }

/* 둥근 작은 단추 (언어·소리·전체 화면·닫기·메뉴) */
.round { pointer-events: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #34528f, #172c5e 70%); border: 2px solid var(--line); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.3), 0 3px 0 var(--line), 0 5px 10px rgba(0,0,0,0.35); font-size: 16px; font-weight: 900; color: #fff; }
.round:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.3), 0 1px 0 var(--line); }
.round.x { background: radial-gradient(circle at 35% 28%, #ff8a8d, #d33a40 70%); }
.corner { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 8px; z-index: 3; }
.foot { position: absolute; bottom: 10px; left: 16px; max-width: calc(100% - 520px); text-align: left; font-size: 12px; line-height: 1.4; color: rgba(210,225,255,0.7); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* 고르기 카드 (모드·역할) */
.choices { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.choice { pointer-events: auto; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 230px; padding: 12px 12px 14px; border-radius: 20px; color: var(--text);
  background: linear-gradient(180deg, #24407e 0%, #142a5c 60%, #0f2049 100%); border: 3px solid var(--line); box-shadow: var(--edge), 0 5px 0 var(--line), 0 12px 22px rgba(0,0,0,0.4); transition: transform 0.12s; }
.choice:hover { transform: translateY(-3px); }
.choice .cimg { display: block; width: 150px; height: 150px; margin: -4px auto 4px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(255,211,107,0.35), rgba(124,196,255,0.12) 55%, transparent 70%); }
.choice > b, .choice .cbody > b { display: block; font-size: 21px; font-weight: 900; margin: 2px 0 4px; text-shadow: 0 2px 0 var(--line); }
.choice > span:not(.cimg) { font-size: 14px; line-height: 1.35; color: var(--text2); }
.choice.sel { border-color: var(--amber2); box-shadow: inset 0 0 0 2px rgba(255,211,107,0.6), 0 5px 0 var(--amberD), 0 0 26px rgba(255,190,80,0.45); background: linear-gradient(180deg, #34509a 0%, #1c3570 60%, #142a5c 100%); }
.choice .selb { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ffe9a3, #f5a623); color: #4a2400; border: 3px solid var(--line); }
.choice .selb svg { width: 18px; height: 18px; }
.choice.mode .cimg { background: radial-gradient(circle at 50% 60%, rgba(124,196,255,0.35), transparent 68%); }
.choice.m1 { --tint: #5fd3a8; } .choice.m2 { --tint: #ffc93d; } .choice.m3 { --tint: #b49cff; }
.choice.mode::after { content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 5px; border-radius: 0 0 6px 6px; background: var(--tint); box-shadow: 0 0 12px var(--tint); }
/* 역할 카드: 능력 칸 · 스킬 */
.choice.role .stats { display: grid; grid-template-columns: 1fr; gap: 3px; width: 100%; margin: 4px 0 8px; }
.st { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--text2); }
.st em { font-style: normal; width: 64px; text-align: left; flex: none; }
.pips { display: flex; gap: 3px; flex: 1; } .pips s { flex: 1; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.12); text-decoration: none; }
.pips s.on { background: linear-gradient(#bfe3ff, #5aa9ff); box-shadow: 0 0 6px rgba(124,196,255,0.45); }
.choice.role .cbody { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; }
.pips { min-width: 44px; }
.skl { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 12px; background: rgba(5,12,32,0.45); }
.skl .ski { width: 40px; height: 40px; flex: none; border-radius: 10px; background: radial-gradient(circle, rgba(124,196,255,0.3), transparent 70%); }
.skl em { display: block; font-style: normal; font-weight: 900; font-size: 13px; color: var(--ice2); }
.skl small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--text2); }
.opts { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spellrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.spellrow > b, .diffrow > b { font-size: 14px; color: var(--amber2); text-shadow: 0 1px 0 var(--line); }
.spch { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 52px; width: 300px; padding: 5px 10px 5px 6px; border-radius: 14px; background: linear-gradient(#22407e, #142a5c); color: var(--text); text-align: left; border: 3px solid var(--line); box-shadow: var(--edge), 0 3px 0 var(--line); }
.spch .spi { width: 42px; height: 42px; flex: none; border-radius: 10px; background: rgba(5,12,32,0.5); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.25); }
.spch.sel { border-color: var(--amber2); box-shadow: inset 0 0 0 2px rgba(255,211,107,0.55), 0 3px 0 var(--amberD), 0 0 14px rgba(255,190,80,0.35); }
.spch b { font-size: 15px; } .spch em { font-style: normal; font-size: 12px; color: var(--amber2); font-weight: 800; }
.spch small { display: block; font-size: 11.5px; color: var(--text2); line-height: 1.25; }
.seg { display: inline-flex; background: rgba(5,12,32,0.7); border: 2px solid var(--line); border-radius: 14px; padding: 3px; gap: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.seg button { min-height: 40px; padding: 6px 14px; border-radius: 10px; background: transparent; font-weight: 900; color: var(--text2); }
.seg button.on { background: linear-gradient(#ffe9a3, #f5a623); color: #4a2400; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); }
.diffrow { display: flex; align-items: center; gap: 8px; justify-content: center; }
.code { font-size: 46px; font-weight: 900; letter-spacing: 8px; color: var(--ice2); text-shadow: 0 3px 0 var(--line); }
input.codein { pointer-events: auto; font: inherit; font-size: 30px; font-weight: 900; letter-spacing: 6px; text-align: center; text-transform: uppercase; width: 230px; padding: 10px; border-radius: 14px; border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.3), inset 0 3px 8px rgba(0,0,0,0.4); background: #0a1532; color: #fff; }
input.codein::placeholder { font-size: 18px; letter-spacing: 1px; font-weight: 700; color: #6b80ab; }
.err { color: #ffb4b4; font-weight: 800; min-height: 1.2em; }
.pcount { font-weight: 900; color: var(--text2); }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 10px 0; text-align: left; }
.plist div { display: flex; align-items: center; gap: 6px; background: rgba(5,12,32,0.5); border: 2px solid rgba(150,205,255,0.18); border-radius: 12px; padding: 5px 8px; font-weight: 800; font-size: 14px; min-width: 0; }
.plist div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist div.me { border-color: var(--amber2); } .plist div.bot { opacity: 0.6; }
.plist img.art.mini { width: 28px; height: 28px; border-radius: 50%; background: rgba(124,196,255,0.2); }
.spin { width: 64px; height: 64px; animation: spin 1.6s linear infinite; filter: drop-shadow(0 0 10px rgba(124,196,255,0.6)); }
@keyframes spin { to { transform: rotate(360deg); } }
.ctl { max-width: 480px; color: var(--text2); font-size: 14px; line-height: 1.5; margin: 6px auto; padding: 8px 12px; border-radius: 12px; background: rgba(5,12,32,0.45); }
.set { margin: 10px 0; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 900; }

/* ── 홈 (로비): 위 왼쪽 프로필 판 · 오른쪽 위 코인·설정 · 왼쪽 메뉴 기둥 · 오른쪽 아래 내 아이 + 시작 ── */
.home-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); display: flex; gap: 8px; align-items: center; z-index: 2; }
.pchip { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 16px 4px 4px; border-radius: 30px; background: linear-gradient(90deg, rgba(20,39,90,0.96), rgba(13,26,58,0.9)); border: 3px solid var(--line); box-shadow: var(--edge), 0 4px 12px rgba(0,0,0,0.35); color: var(--text); text-align: left; }
.pav { position: relative; display: block; width: 44px; height: 44px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fff2c4, #f5a623 75%); border: 2px solid var(--line); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.pav img.art { border-radius: 50%; }
.pav .lvb { position: absolute; right: -6px; bottom: -4px; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: linear-gradient(#bfe3ff, #3b82f6); color: #fff; font-style: normal; font-size: 12px; font-weight: 900; line-height: 16px; text-align: center; border: 2px solid var(--line); text-shadow: 0 1px 0 var(--line); }
.pav.big { width: 84px; height: 84px; } .pav.big .lvb { font-size: 15px; height: 26px; line-height: 22px; min-width: 30px; border-radius: 13px; }
.pinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pinfo b { font-size: 15px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpb { display: block; width: 100px; height: 7px; border-radius: 4px; background: rgba(0,0,0,0.45); box-shadow: inset 0 0 0 1px rgba(150,205,255,0.2); overflow: hidden; text-decoration: none; }
.xpb i { display: block; height: 100%; background: linear-gradient(90deg, #ffe08a, #f5a623); }
.xpb.wide { width: 200px; height: 9px; }
.coinchip { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 14px 4px 6px; border-radius: 20px; background: linear-gradient(rgba(20,39,90,0.96), rgba(13,26,58,0.94)); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(255,211,107,0.35); color: var(--amber2); font-weight: 900; font-size: 15px; white-space: nowrap; text-shadow: 0 1px 0 var(--line); }
.coinchip img.coin { width: 26px; height: 26px; }
.home-menu { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.hm { pointer-events: auto; position: relative; width: 88px; min-height: 88px; padding: 4px 4px 6px; border-radius: 20px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0;
  background: linear-gradient(180deg, #2a4a8f, #172c5e); border: 3px solid var(--line); box-shadow: var(--edge), 0 4px 0 var(--line), 0 8px 16px rgba(0,0,0,0.35); }
.hm .hmi { width: 60px; height: 60px; margin-top: -2px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.3)); }
.hm b { font-size: 13px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.hm .dot { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; border-radius: 12px; background: linear-gradient(#ff7b80, #e5484d); color: #fff; font-size: 13px; font-weight: 900; text-decoration: none; display: grid; place-items: center; border: 2px solid var(--line); box-shadow: 0 0 10px rgba(229,72,77,0.6); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.offnote { position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); max-width: 46vw; font-size: 12px; color: var(--text2); text-align: left; }
.dock { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 12px; z-index: 2; }
.hero { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 18px; background: linear-gradient(90deg, rgba(13,26,58,0.6), rgba(20,39,90,0.92)); border: 3px solid var(--line); box-shadow: var(--edge); text-align: left; }
.hport { display: block; width: 76px; height: 76px; margin-top: -26px; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45)); }
.hinfo { display: flex; flex-direction: column; gap: 1px; }
.hinfo em { font-style: normal; font-size: 11px; color: var(--text2); font-weight: 800; }
.hinfo b { font-size: 17px; font-weight: 900; text-shadow: 0 2px 0 var(--line); }
.hsp { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; color: var(--ice2); font-weight: 800; }
.btn.play { min-width: 210px; min-height: 72px; font-size: 28px; border-radius: 20px; letter-spacing: 1px; animation: glow 2.4s ease-in-out infinite; }
.btn.play svg.ico { width: 26px; height: 26px; }
@keyframes glow { 50% { box-shadow: inset 0 -5px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.55), 0 4px 0 var(--line), 0 0 30px rgba(255,190,80,0.6); } }

/* ── 메뉴 화면 공통 (미션·상점·내 정보) ── */
.panel.menu { width: min(94vw, 720px); text-align: left; }
.panel.menu.wide { width: min(94vw, 900px); }
.phead { display: flex; align-items: center; gap: 10px; margin: -6px -6px 12px; padding: 4px 4px 10px; border-bottom: 2px solid rgba(150,205,255,0.15); }
.phead h2 { flex: 1; margin: 0; font-size: 24px; text-shadow: var(--stroke), 0 3px 0 var(--line); }
.note { color: var(--text2); font-size: 13px; margin: 8px 0; line-height: 1.45; }
.note.warn { color: var(--amber2); }
.msg { color: var(--amber2); font-weight: 900; margin: 6px 0; }
.ok { display: flex; align-items: center; gap: 6px; color: var(--mint); font-weight: 900; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,0.1); font-size: 13px; font-weight: 900; white-space: nowrap; }
.tag svg.ico { width: 16px; height: 16px; }
.tag.on { background: rgba(255,211,107,0.18); color: var(--amber2); box-shadow: inset 0 0 0 1px rgba(255,211,107,0.45); }
.tag.own, .tag.done { background: rgba(95,211,168,0.16); color: #9ff0cf; }
.tag.lock { color: var(--text2); }

/* 미션 */
.mday { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border-radius: 14px; background: rgba(5,12,32,0.5); font-weight: 800; font-size: 14px; color: var(--text2); }
.mday .pips { max-width: 180px; } .mday .pips i { flex: 1; height: 10px; border-radius: 4px; background: rgba(255,255,255,0.12); }
.mday .pips i.on { background: linear-gradient(#ffe08a, #f5a623); }
.mday b { color: var(--amber2); }
.mlist { display: flex; flex-direction: column; gap: 8px; }
.mrow { display: grid; grid-template-columns: 56px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: linear-gradient(90deg, #203b77, #172d60); border: 3px solid var(--line); box-shadow: var(--edge); }
.mrow.done:not(.claimed) { box-shadow: inset 0 0 0 2px rgba(255,211,107,0.75), 0 0 18px rgba(255,190,80,0.3); }
.mrow.claimed { opacity: 0.6; }
.mico { width: 56px; height: 56px; border-radius: 14px; display: block; padding: 3px; background: radial-gradient(circle, rgba(124,196,255,0.3), rgba(5,12,32,0.5) 75%); }
.mtxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mtxt b { font-size: 15px; font-weight: 900; }
.pbar { position: relative; display: block; height: 16px; border-radius: 8px; background: rgba(0,0,0,0.45); box-shadow: inset 0 0 0 1px rgba(150,205,255,0.2); overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(#9cd4ff, #3b82f6); border-radius: 8px; }
.pbar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; text-shadow: 0 1px 0 var(--line); }
.mrow.done .pbar i { background: linear-gradient(#ffe08a, #f5a623); }
.mrew { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(5,12,32,0.45); font-weight: 900; color: var(--amber2); white-space: nowrap; }

/* 상점: 탭 + 카드 */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs button { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 14px 4px 6px; border-radius: 14px; background: linear-gradient(#1e3a75, #142a5c); border: 3px solid var(--line); box-shadow: var(--edge); color: var(--text2); font-weight: 900; }
.tabs button .tico { width: 36px; height: 36px; }
.tabs button.on { background: linear-gradient(#ffe9a3, #f5a623); color: #4a2400; box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15); }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.scard { --k: #7cc4ff; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 10px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 30%, #14275a), #10204a 60%); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--k) 55%, transparent), 0 4px 0 var(--line); }
.scard.k-skin { --k: #b49cff; } .scard.k-trail { --k: #5fd3a8; } .scard.k-emo { --k: #7cc4ff; } .scard.k-acc { --k: #ffc93d; }
.scard.own { box-shadow: inset 0 0 0 2px rgba(95,211,168,0.75), 0 4px 0 var(--line); }
.scard b { font-size: 14px; font-weight: 900; } .srole { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text2); font-weight: 800; }
.srole img.art.mini { width: 20px; height: 20px; border-radius: 50%; background: rgba(124,196,255,0.25); }
.scard .btn, .scard .tag { margin-top: 4px; min-height: 44px; }
.scard .btn.price { gap: 4px; padding: 6px 12px; }
.sprev { display: block; width: 112px; height: 112px; border-radius: 16px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 55%, #fff) 0%, color-mix(in srgb, var(--c) 45%, #0c1834) 62%, #0c1834 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.25), inset 0 0 0 2px rgba(255,255,255,0.15); padding: 4px; }
.sprev.big { width: 168px; height: 168px; margin: 6px auto; }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ccard { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: linear-gradient(#24386e, #18295a); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(180,156,255,0.55), 0 4px 0 var(--line); }
.cart { display: block; height: 170px; background: radial-gradient(circle at 50% 45%, #3a2f7a, #12204a 75%); }
.cart img.art { object-fit: contain; padding: 6px 0; }
.cbody { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.chead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chead b { font-size: 16px; font-weight: 900; } .price { font-weight: 900; color: var(--amber2); white-space: nowrap; font-size: 14px; }
.cinc { display: flex; gap: 4px; flex-wrap: wrap; } .cinc i { display: block; width: 34px; height: 34px; border-radius: 10px; padding: 1px; background: rgba(255,255,255,0.08); }
.cgrant { margin: 0; font-size: 13px; } .cnote { margin: 0; font-size: 11.5px; color: var(--text2); line-height: 1.35; }
.btn.hub { min-width: 0; min-height: 44px; font-size: 16px; padding: 8px 14px; }
.modal { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(3,8,22,0.7); pointer-events: auto; padding: 16px; }
.modal .panel { text-align: center; max-width: 360px; animation: pop 0.25s; }
.modal h3 { justify-content: center; margin: 0 0 4px; font-size: 20px; color: #fff; } .modal h3::after { display: none; }
.mname { margin: 4px 0; font-size: 17px; } .mprice { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 10px; font-size: 20px; font-weight: 900; color: var(--amber2); }
.mprice img.coin { width: 28px; height: 28px; }

/* 내 정보 · 보관함 */
.pcard { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: linear-gradient(90deg, #2a4a8f, #172c5e); border: 3px solid var(--line); box-shadow: var(--edge); flex-wrap: wrap; }
.pcard .pinfo { flex: 1; min-width: 160px; } .pcard .pinfo b { font-size: 20px; max-width: 60vw; }
.lvline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--amber2); }
.stiles { display: flex; gap: 8px; }
.stile { display: flex; flex-direction: column; align-items: center; width: 74px; padding: 4px 4px 6px; border-radius: 14px; background: rgba(5,12,32,0.5); }
.stile img.art { width: 34px; height: 34px; } .stile b { font-size: 18px; font-weight: 900; } .stile span { font-size: 11px; color: var(--text2); font-weight: 800; }
.mast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mtile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: rgba(5,12,32,0.45); }
.mtile img.art { width: 64px; height: 64px; } .mtile b { font-size: 14px; }
.stars { display: inline-flex; gap: 1px; } .stars svg.ico { width: 16px; height: 16px; } .stars .on { color: var(--amber2); filter: drop-shadow(0 0 3px rgba(255,190,80,0.6)); } .stars .off { color: rgba(255,255,255,0.18); }
.lrow { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.ll { display: flex; align-items: center; gap: 6px; width: 104px; flex: none; padding-top: 18px; font-weight: 900; font-size: 14px; }
.ll img.art.mini { width: 26px; height: 26px; border-radius: 50%; background: rgba(124,196,255,0.25); }
.lgrid { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.ltile { pointer-events: auto; display: flex; flex-direction: column; align-items: center; width: 84px; padding: 4px 4px 6px; border-radius: 14px; background: linear-gradient(#1e3a75, #142a5c); border: 3px solid var(--line); box-shadow: var(--edge); color: var(--text); }
.ltile img.art { width: 64px; height: 64px; }
.ltile .none { display: grid; place-items: center; width: 64px; height: 64px; font-size: 12px; color: var(--text2); font-weight: 900; }
.ltile b { font-size: 11px; font-weight: 800; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltile.def img.art { filter: saturate(0.6); }
.ltile.on { border-color: var(--amber2); box-shadow: inset 0 0 0 2px rgba(255,211,107,0.6), 0 0 14px rgba(255,190,80,0.35); background: linear-gradient(#34509a, #1c3570); }
.ewheel { display: flex; gap: 10px; padding: 8px 14px; border-radius: 40px; background: radial-gradient(ellipse at 50% 50%, rgba(124,196,255,0.18), rgba(5,12,32,0.5) 70%); }
.eslot { pointer-events: auto; width: 60px; height: 60px; padding: 2px; border-radius: 50%; background: rgba(5,12,32,0.65); border: 3px dashed rgba(150,205,255,0.45); color: var(--text2); font-weight: 900; }
.eslot i { font-style: normal; font-size: 18px; }
.eslot.on { border: 3px solid var(--amber2); box-shadow: 0 0 14px rgba(255,190,80,0.45); }
.lgrid.emos { margin-left: 114px; }
.chip { pointer-events: auto; min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 12px; background: linear-gradient(#1e3a75, #142a5c); color: var(--text); font-weight: 800; font-size: 14px; border: 3px solid var(--line); }
.chip.on { border-color: var(--amber2); background: linear-gradient(#34509a, #1c3570); }
.chip.emo { width: 56px; height: 56px; padding: 2px; border-radius: 14px; }
.chip.emo.clear { display: grid; place-items: center; color: var(--text2); }
.codebox { justify-content: flex-start; align-items: center; margin: 6px 0; }
.rcode { font-size: 17px; font-weight: 900; letter-spacing: 2px; padding: 8px 12px; border-radius: 10px; background: #0a1532; border: 2px solid var(--line); user-select: text; -webkit-user-select: text; }
input.codein.small { width: 250px; font-size: 16px; letter-spacing: 2px; padding: 9px; }

/* ── 결과 (승패 띠 → 두 팀 표·MVP → 받은 것) ── */
.result { position: relative; }
.result .banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 70px; background: linear-gradient(90deg, rgba(59,130,246,0), rgba(59,130,246,0.55) 25%, rgba(59,130,246,0.55) 75%, rgba(59,130,246,0)); border-top: 2px solid rgba(191,227,255,0.6); border-bottom: 2px solid rgba(191,227,255,0.6); animation: bigIn 0.5s cubic-bezier(.2,1.6,.4,1) both; }
.result.win .banner { background: linear-gradient(90deg, rgba(245,166,35,0), rgba(245,166,35,0.55) 25%, rgba(245,166,35,0.55) 75%, rgba(245,166,35,0)); border-color: rgba(255,211,107,0.8); }
.result.lose .banner { background: linear-gradient(90deg, rgba(90,110,150,0), rgba(70,90,130,0.6) 25%, rgba(70,90,130,0.6) 75%, rgba(90,110,150,0)); border-color: rgba(190,205,230,0.5); }
.result .bico { width: 72px; height: 72px; margin: -14px 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.result .big { font-size: clamp(42px, 7.5vw, 76px); font-weight: 900; color: #fff; text-shadow: var(--stroke), 0 5px 0 var(--line), 0 10px 20px rgba(0,20,60,0.5); }
.result.win .big { color: #fff4cf; }
@keyframes bigIn { from { transform: scale(0.4); opacity: 0; } }
.res-body { width: min(94vw, 900px); animation: fadeUp 0.45s 1.2s both; text-align: left; }
@keyframes fadeUp { from { opacity: 0; } }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcol { border-radius: 14px; padding: 6px; background: linear-gradient(rgba(59,130,246,0.22), rgba(59,130,246,0.06)); border: 2px solid rgba(147,197,253,0.45); }
.tcol.red { background: linear-gradient(rgba(239,68,68,0.22), rgba(239,68,68,0.06)); border-color: rgba(252,165,165,0.45); }
.tcol h4 { margin: 0 0 4px; padding: 2px 6px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.tcol h4 b { font-size: 20px; text-shadow: 0 2px 0 var(--line); }
.tcol.blue h4 { color: #a9d0ff; } .tcol.red h4 { color: #ffb4b4; }
.trow { display: grid; grid-template-columns: 34px 1fr auto 34px 28px; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 10px; font-size: 13px; }
.trow + .trow { margin-top: 2px; }
.trow .rp { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: rgba(5,12,32,0.5); }
.trow .rp .crown { position: absolute; width: 22px; height: 22px; top: -10px; left: -6px; transform: rotate(-20deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
.trow b { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.trow b img.art.mini { width: 18px; height: 18px; }
.trow .kda { color: var(--text2); font-variant-numeric: tabular-nums; font-weight: 800; } .trow em { font-style: normal; font-weight: 900; text-align: right; color: var(--amber2); }
.trow s { display: block; width: 28px; height: 28px; text-decoration: none; }
.trow.me { background: rgba(255,211,107,0.18); box-shadow: inset 0 0 0 1px rgba(255,211,107,0.65); }
.trow.mvp b { color: var(--amber2); }
.rline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 8px 0; font-weight: 800; }
.rline span { display: inline-flex; align-items: center; gap: 4px; }
.rline.small { font-size: 14px; color: var(--text2); } .rline.small b { color: #fff; } .rline .tb { color: #a9d0ff; } .rline .tr { color: #ffb4b4; }
.rline svg.ico { width: 18px; height: 18px; }
.rewards { margin: 8px 0; padding: 8px 10px; border-radius: 16px; background: linear-gradient(rgba(255,211,107,0.14), rgba(255,211,107,0.04)); border: 2px solid rgba(255,211,107,0.45); text-align: center; }
.rewards p { margin: 4px 0; }
.rewards .rt { color: var(--amber2); }
.rw { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 3px; border-radius: 14px; background: rgba(5,12,32,0.5); }
.rw img.art { width: 30px; height: 30px; } .rw em { font-style: normal; font-size: 12px; color: var(--text2); } .rw b { color: #fff; font-size: 16px; }
.rewards .lv { font-style: normal; color: var(--amber2); font-weight: 900; }
.res-body .row { margin-top: 8px; }

/* ── 경기 중 HUD ── (PC는 롤처럼: 아래 가운데 기술 칸, 오른쪽 아래 지도 / 휴대폰은 왕자영요처럼: 왼쪽 위 지도, 오른쪽 아래 버튼 묶음) */
#hud { position: absolute; inset: 0; }
.hud-top { position: absolute; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; }
.score { display: flex; align-items: stretch; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
.score > b { display: grid; place-items: center; min-width: 54px; height: 40px; padding: 0 12px; font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--line); border: 2px solid var(--line); font-variant-numeric: tabular-nums; }
.score .b { background: linear-gradient(#5aa0ff, #2563eb); border-radius: 14px 0 0 14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.score .r { background: linear-gradient(#ff7b7b, #dc2626); border-radius: 0 14px 14px 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.smid { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; height: 48px; padding: 2px 10px 4px; background: linear-gradient(#1b3168, #0c1838); border: 2px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: inset 0 0 0 1px rgba(150,205,255,0.25); }
.clock { font-size: 16px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tw { display: flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 900; color: var(--text2); font-style: normal; }
.tw img.art { width: 18px; height: 18px; } .tw i { font-style: normal; }
#menuBtn { position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
#emoBtn { position: absolute; top: calc(max(6px, env(safe-area-inset-top)) + 52px); right: max(8px, env(safe-area-inset-right)); padding: 2px; }
#emoBar { position: absolute; top: calc(max(6px, env(safe-area-inset-top)) + 52px); right: calc(max(8px, env(safe-area-inset-right)) + 52px); display: flex; gap: 6px; padding: 4px 6px; border-radius: 30px; background: linear-gradient(rgba(20,39,90,0.94), rgba(10,20,48,0.94)); border: 2px solid var(--line); box-shadow: inset 0 0 0 1px rgba(150,205,255,0.3), 0 6px 14px rgba(0,0,0,0.4); }
#emoBar .round { position: relative; width: 52px; height: 52px; padding: 1px; background: radial-gradient(circle, rgba(124,196,255,0.25), rgba(5,12,32,0.6) 75%); }
#emoBar kbd { position: absolute; right: -2px; bottom: -2px; font: inherit; font-size: 10px; font-weight: 900; color: var(--amber2); background: var(--line); border-radius: 6px; padding: 0 4px; }
/* 작은 지도: 얼음 테 + 남색 틀 */
#mini { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: 220px; height: 146px; border-radius: 12px; background: rgba(9,18,40,0.92); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.35), 0 4px 14px rgba(0,0,0,0.5); }
/* 알림 띠 (가운데, 왼쪽 그림) */
#feed { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: 92vw; }
#toasts { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.toast { display: flex; align-items: center; gap: 8px; padding: 5px 26px 5px 8px; min-height: 36px; color: #fff; font-weight: 900; font-size: 15px; white-space: nowrap; text-shadow: 0 2px 0 var(--line);
  background: linear-gradient(90deg, rgba(10,20,48,0), rgba(10,20,48,0.92) 14%, rgba(10,20,48,0.92) 86%, rgba(10,20,48,0)); border-top: 1px solid rgba(150,205,255,0.45); border-bottom: 1px solid rgba(150,205,255,0.45); animation: toast 2.6s forwards; }
.toast img.art { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.toast:not(:has(img)) { padding-left: 26px; }
.toast.good { background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,0.88) 14%, rgba(37,99,235,0.88) 86%, rgba(37,99,235,0)); border-color: rgba(191,227,255,0.7); }
.toast.bad { background: linear-gradient(90deg, rgba(185,28,28,0), rgba(185,28,28,0.9) 14%, rgba(185,28,28,0.9) 86%, rgba(185,28,28,0)); border-color: rgba(255,180,180,0.7); }
.toast.warn { background: linear-gradient(90deg, rgba(168,93,0,0), rgba(168,93,0,0.9) 14%, rgba(168,93,0,0.9) 86%, rgba(168,93,0,0)); border-color: rgba(255,211,107,0.8); }
.toast.go { font-size: 30px; letter-spacing: 2px; color: #fff4cf; background: none; border: 0; text-shadow: var(--stroke), 0 4px 0 var(--line), 0 0 20px rgba(255,190,80,0.7); }
@keyframes toast { 0% { opacity: 0; transform: scaleX(0.6); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
#hint { position: relative; background: linear-gradient(#fff6dc, #ffe6a3); border: 3px solid var(--line); color: #4a2400; border-radius: 16px; padding: 8px 14px 8px 40px; font-weight: 900; font-size: 15px; max-width: min(90vw, 560px); text-align: left; box-shadow: 0 4px 0 var(--line), 0 8px 18px rgba(0,0,0,0.4); }
#hint::before { content: '!'; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#ffc93d, #e08a00); color: #fff; font-size: 15px; border: 2px solid var(--line); text-shadow: 0 1px 0 var(--line); }
/* 레벨업 카드: 그림 + 이름 + 설명 */
#cards { position: absolute; z-index: 5; bottom: 128px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#cards .t { color: var(--amber2); font-weight: 900; text-shadow: var(--stroke); font-size: 15px; }
#cards .row { gap: 10px; flex-wrap: nowrap; }
.card { pointer-events: auto; position: relative; display: flex; flex-direction: column; align-items: center; width: 136px; padding: 6px 8px 8px; border-radius: 16px; background: linear-gradient(#fffaf0, #ffe6a3); color: #4a2400; border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8), 0 4px 0 var(--amberD), 0 0 20px rgba(255,190,80,0.45); text-align: center; animation: pop 0.3s; }
.card img.art { width: 56px; height: 56px; margin-top: -2px; }
.card .ct b { display: block; font-size: 15px; } .card .ct span { font-size: 12px; line-height: 1.25; display: block; }
.card kbd { position: absolute; top: 4px; left: 6px; font: inherit; font-size: 11px; font-weight: 900; color: #fff; background: var(--line); border-radius: 6px; padding: 0 5px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
/* 쓰러짐: 가운데 시계 고리 */
#dead { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #fff; font-weight: 900; text-shadow: 0 2px 0 var(--line); --p: 100%; }
#dead .ring { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(rgba(124,196,255,0.95) var(--p), rgba(255,255,255,0.12) 0); padding: 7px; box-shadow: 0 0 24px rgba(0,0,0,0.5); }
#dead .ring .big { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2a4a8f, #0c1838); font-size: 46px; }
#dead > div:last-child { padding: 3px 14px; border-radius: 12px; background: rgba(5,12,32,0.75); font-size: 14px; }
#hud.dead #hint, #hud.dead #cap { display: none; }
#hud.dead::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(40,55,90,0.15), rgba(5,10,25,0.55)); pointer-events: none; }
/* 내 정보 칸 (PC: 롤처럼 초상 + 막대 + 기술 칸) */
#me { position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; color: #fff;
  background: linear-gradient(rgba(27,49,104,0.95), rgba(10,20,48,0.96)); border: 3px solid var(--line); border-radius: 20px; box-shadow: inset 0 0 0 2px rgba(150,205,255,0.28), 0 6px 18px rgba(0,0,0,0.45); }
#me .port { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3d63b8, #12224b 75%); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(255,211,107,0.6); }
#me .port img.art { border-radius: 50%; }
#me .lv { position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#ffe9a3, #f5a623); color: #4a2400; display: grid; place-items: center; font-weight: 900; font-size: 15px; border: 2px solid var(--line); }
#me .bars { width: 210px; display: flex; flex-direction: column; gap: 4px; }
#me .hp, #me .xp { position: relative; height: 18px; border-radius: 9px; background: rgba(0,0,0,0.5); box-shadow: inset 0 0 0 1px rgba(150,205,255,0.2); overflow: hidden; }
#me .xp { height: 6px; }
#me .hp i, #me .xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#a6f5c4, #22c55e 60%, #15994a); border-radius: 9px; transition: width 0.15s; }
#me .xp i { background: linear-gradient(90deg, #ffe08a, #f5a623); }
#me .hp span { position: relative; font-size: 12px; font-weight: 900; padding-left: 8px; line-height: 18px; text-shadow: 0 1px 0 var(--line); }
#me .ammo { display: flex; gap: 4px; height: 15px; }
#me .ammo b { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dbeaff 55%, #9fb8d8); box-shadow: 0 0 0 1.5px var(--line), 0 0 6px rgba(190,220,255,0.55); }
#me .ammo b.off { background: rgba(255,255,255,0.14); box-shadow: 0 0 0 1.5px rgba(10,20,48,0.6); }
#me .ammo b.prog { background: conic-gradient(#fff var(--p), rgba(255,255,255,0.14) 0); }
.slots { display: flex; gap: 6px; }
.slot { position: relative; width: 56px; height: 56px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #2f5296, #12224b 80%); border: 2px solid var(--line); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.4); overflow: hidden; }
.slot img.art { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.slot.sk { box-shadow: inset 0 0 0 2px rgba(124,196,255,0.85), 0 0 10px rgba(124,196,255,0.35); }
.slot.sp { box-shadow: inset 0 0 0 2px rgba(95,211,168,0.85); }
.slot kbd { position: absolute; z-index: 2; top: 1px; left: 2px; font: inherit; font-size: 11px; font-weight: 900; color: var(--amber2); background: rgba(10,20,48,0.85); border-radius: 5px; padding: 0 4px; line-height: 15px; }
.slot b { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; font-size: 9.5px; font-weight: 900; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 2px; background: linear-gradient(rgba(10,20,48,0), rgba(10,20,48,0.9)); text-shadow: 0 1px 0 var(--line); }
/* 대기 시계: 시계 방향으로 줄어드는 어두운 부채꼴 */
.slot i, .tbtn u { position: absolute; inset: 0; z-index: 1; --cd: 0%; background: conic-gradient(rgba(4,10,26,0.78) var(--cd), transparent 0); pointer-events: none; }
.slot em { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 20px; font-weight: 900; text-shadow: var(--stroke); }
.slot:has(em:not(:empty)) b { opacity: 0; }
.slot.on { box-shadow: inset 0 0 0 3px var(--amber2); } .slot.off { filter: grayscale(0.6) brightness(0.7); }

/* 랜턴 점령 표시 (머리 위) */
#cap { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 26px auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 3px; align-items: center; padding: 4px 10px 6px 6px; border-radius: 14px; background: linear-gradient(rgba(27,49,104,0.94), rgba(10,20,48,0.94)); border: 2px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,211,107,0.7), 0 3px 10px rgba(0,0,0,0.4); color: #ffe9b0; font-weight: 900; font-size: 13px; white-space: nowrap; }
#cap img.art { grid-row: 1 / 3; width: 26px; height: 26px; }
#cap b { display: block; width: 92px; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.18); overflow: hidden; }
#cap i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7cc4ff, #3b82f6); }
#cap.red i { background: linear-gradient(90deg, #ff9b9b, #ef4444); }
#cap.contest { box-shadow: inset 0 0 0 1px #fca5a5; color: #fff; animation: capblink 0.6s ease-in-out infinite alternate; }
#cap.ours { box-shadow: inset 0 0 0 1px rgba(147,197,253,0.8); color: #bfdbfe; }
#cap.ours.red { box-shadow: inset 0 0 0 1px rgba(252,165,165,0.8); color: #fecaca; }
@keyframes capblink { to { background: rgba(127,29,29,0.92); } }
#rotate { position: absolute; z-index: 30; inset: 0; background: radial-gradient(ellipse at 50% 40%, #1b3168, #050a18); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: auto; font-weight: 900; text-align: center; padding: 20px; }
#rotate svg.ico { width: 84px; height: 84px; color: var(--ice2); animation: tilt 1.6s ease-in-out infinite; }
@keyframes tilt { 50% { transform: rotate(-90deg); } }

/* ── 터치 조작 (왕자영요처럼) ── */
#touch { position: absolute; inset: 0; }
body.touch .slots { display: none; }
#joyZone { position: absolute; left: 0; top: 64px; bottom: 0; width: 46%; pointer-events: auto; touch-action: none; }
.joy { position: absolute; width: 124px; height: 124px; left: max(28px, env(safe-area-inset-left)); bottom: 26px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124,196,255,0.08) 0 52%, rgba(124,196,255,0.18) 53% 60%, rgba(10,20,48,0.25) 61%); border: 3px solid rgba(191,227,255,0.35); box-shadow: inset 0 0 18px rgba(124,196,255,0.2); }
.joy::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: conic-gradient(from -8deg, rgba(255,255,255,0.5) 0 16deg, transparent 0 90deg, rgba(255,255,255,0.5) 0 106deg, transparent 0 180deg, rgba(255,255,255,0.5) 0 196deg, transparent 0 270deg, rgba(255,255,255,0.5) 0 286deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(circle, transparent 0 calc(100% - 5px), #000 calc(100% - 4px)); opacity: 0.6; }
.joy.live { bottom: auto; border-color: rgba(220,236,255,0.7); background: radial-gradient(circle, rgba(124,196,255,0.14) 0 52%, rgba(124,196,255,0.28) 53% 60%, rgba(10,20,48,0.3) 61%); }
.joy .knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e3f0ff 50%, #a9c6ea); border: 3px solid var(--line); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.45); }
.tbtn { position: absolute; padding: 0; border-radius: 50%; color: #fff; touch-action: none; pointer-events: auto; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #3d63b8, #12224b 78%); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px rgba(150,205,255,0.55), 0 4px 10px rgba(0,0,0,0.45); }
.tbtn img.art { position: absolute; inset: 8%; width: 84%; height: 84%; }
.tbtn .cap { position: absolute; z-index: 2; left: 50%; bottom: 3px; transform: translateX(-50%); max-width: 92%; padding: 0 6px; border-radius: 8px; font-style: normal; font-size: 10px; font-weight: 900; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(10,20,48,0.82); text-shadow: 0 1px 0 var(--line); }
.tbtn s { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; text-decoration: none; font-size: 22px; font-weight: 900; text-shadow: var(--stroke); }
#tThrow { width: 96px; height: 96px; right: max(24px, calc(env(safe-area-inset-right) + 12px)); bottom: 22px; background: radial-gradient(circle at 50% 38%, #ffe9a3, #f5a623 58%, #a85d00); box-shadow: inset 0 0 0 3px rgba(255,240,200,0.85), 0 4px 14px rgba(0,0,0,0.5), 0 0 24px rgba(255,190,80,0.4); }
#tThrow .cap { font-size: 11px; bottom: 6px; }
#tScoop { width: 62px; height: 62px; right: calc(max(24px, calc(env(safe-area-inset-right) + 12px)) + 116px); bottom: 20px; background: radial-gradient(circle at 50% 40%, #f4f9ff, #b9cbe6 75%); }
#tSkill { width: 68px; height: 68px; right: calc(max(24px, calc(env(safe-area-inset-right) + 12px)) + 58px); bottom: 132px; box-shadow: inset 0 0 0 2px rgba(124,196,255,0.95), 0 4px 10px rgba(0,0,0,0.45), 0 0 14px rgba(124,196,255,0.35); }
#tSpell { width: 56px; height: 56px; right: calc(max(24px, calc(env(safe-area-inset-right) + 12px)) - 6px); bottom: 130px; box-shadow: inset 0 0 0 2px rgba(95,211,168,0.95), 0 4px 10px rgba(0,0,0,0.45); }
#tSpell .cap, #tScoop .cap { font-size: 9px; line-height: 13px; }
.tring { position: absolute; right: max(4px, env(safe-area-inset-right)); bottom: -36px; width: 236px; height: 236px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(191,227,255,0.12); box-shadow: inset 0 0 40px rgba(124,196,255,0.08); }
body:not(.touch) .tring { display: none; }
#tCancel { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; right: calc(max(24px, calc(env(safe-area-inset-right) + 12px)) + 104px); bottom: 226px; border-radius: 50%; background: radial-gradient(circle, rgba(229,72,77,0.45), rgba(120,20,25,0.55)); border: 3px solid rgba(255,180,180,0.85); color: #fff; font-weight: 900; font-size: 11px; transition: transform 0.1s; }
#tCancel svg.ico { width: 24px; height: 24px; }
#tCancel.hot { background: radial-gradient(circle, #ff7b80, #c62b31); transform: scale(1.15); }
.tbtn.on { transform: scale(0.93); filter: brightness(1.2); }
.tbtn.cd img.art { filter: grayscale(0.7) brightness(0.75); }
body.touch #mini { top: max(6px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: auto; bottom: auto; width: 150px; height: 100px; }
/* 버튼 사이 가운데에 내 정보 (왼쪽 스틱 끝 152px ~ 오른쪽 묶음 202px) */
body.touch #me { left: calc(50% - 25px); bottom: 6px; padding: 4px 10px 4px 4px; gap: 8px; transform: translateX(-50%) scale(var(--meS, 0.86)); transform-origin: bottom center; }
body.touch #me .port { width: 52px; height: 52px; }
body.touch #me .bars { width: 150px; }
body.touch #cards { bottom: auto; top: 52px; left: calc((166px + 100% - 60px) / 2); }
body.touch .score > b { height: 34px; min-width: 44px; font-size: 18px; padding: 0 9px; } body.touch .smid { height: 42px; min-width: 72px; } body.touch .clock { font-size: 14px; }
body.touch #cards .t { display: none; } body.touch .card { width: 108px; padding: 4px 6px 6px; min-height: 48px; } body.touch .card img.art { width: 40px; height: 40px; } body.touch .card .ct b { font-size: 13px; } body.touch .card .ct span { font-size: 10.5px; }
body.touch #feed { display: contents; }
body.touch #toasts { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); }
body.touch .toast { font-size: 13px; min-height: 30px; padding: 3px 20px 3px 6px; } body.touch .toast img.art { width: 24px; height: 24px; } body.touch .toast.go { font-size: 24px; }
body.touch #hint { position: absolute; transform: translateX(-50%); top: auto; bottom: 78px; left: calc(50% - 25px); max-width: calc(100% - 380px); min-width: 200px; font-size: 13px; padding: 6px 10px 6px 36px; }
body.touch .seg button { min-height: 44px; min-width: 60px; }
body.touch .btn { min-height: 44px; }
body.touch #dead { top: auto; bottom: 72px; transform: translateX(-50%); } body.touch #dead .ring { width: 78px; height: 78px; padding: 5px; } body.touch #dead .ring .big { font-size: 32px; }

/* ── 크기별 ── */
@media (max-height: 640px) and (min-height: 521px) {
  .choice .cimg { width: 92px; height: 92px; } .choice.mode .cimg { width: 120px; height: 120px; }
  .choice { padding: 6px 10px 8px; } .screen { gap: 8px; padding: 10px 16px; } .skl small, .spch small { display: none; } .skl { padding: 4px 8px; } .skl .ski { width: 32px; height: 32px; }
  .choice.role .stats { gap: 2px; margin: 2px 0 6px; } .stitle h2 { font-size: 22px; } .spch { min-height: 48px; width: auto; }
  .opts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
}
@media (max-height: 520px) {
  .btn { min-height: 44px; padding: 8px 18px; font-size: 17px; } .panel { padding: 12px 14px; } .screen { gap: 8px; padding: 10px; }
  .logo { font-size: clamp(32px, 8vw, 60px); } .logo small { margin-top: 6px; } .tagline { font-size: 13px; padding: 3px 12px; }
  .stitle h2 { font-size: 19px; } .stitle { padding: 2px 24px; }
  #mini { width: 176px; height: 117px; }
  #me .bars { width: 170px; }
  #emoBar { padding: 3px 5px; gap: 4px; } #emoBar .round { width: 46px; height: 46px; }
  .panel h3 { margin: 8px 0 4px; } .mrow { padding: 5px 8px 5px 5px; grid-template-columns: 46px 1fr auto auto; gap: 8px; } .mico { width: 46px; height: 46px; }
  .hm { width: 68px; min-height: 66px; border-radius: 16px; } .hm .hmi { width: 44px; height: 44px; } .hm b { font-size: 11.5px; } .home-menu { gap: 6px; top: calc(50% + 22px); }
  .home-menu ~ .foot, .foot { display: none; }
  .pchip { min-height: 46px; padding: 3px 12px 3px 3px; } .pav { width: 38px; height: 38px; }
  .btn.play { min-width: 150px; min-height: 56px; font-size: 22px; } .hport { width: 58px; height: 58px; margin-top: -18px; } .hinfo b { font-size: 15px; } .hero { padding: 3px 10px 3px 3px; }
  .dock { right: max(12px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  .result .big { font-size: 38px; } .result .bico { width: 52px; height: 52px; margin: -10px 0; } .result .banner { padding: 2px 50px; }
  .res-body { animation-delay: 1s; } .teams { gap: 6px; } .tcol { padding: 4px; } .trow { font-size: 12px; padding: 1px 4px; grid-template-columns: 28px 1fr auto 28px 24px; } .trow .rp { width: 26px; height: 26px; } .trow s { width: 24px; height: 24px; } .rline { margin: 4px 0; } .rewards { padding: 4px 8px; margin: 4px 0; }
  .sprev { width: 88px; height: 88px; } .sprev.big { width: 120px; height: 120px; } .sgrid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; } .cart { height: 110px; }
  .tabs button { min-height: 44px; padding: 2px 12px 2px 4px; } .tabs button .tico { width: 30px; height: 30px; }
  .mast .mtile img.art { width: 46px; height: 46px; } .pav.big { width: 64px; height: 64px; }
}
/* 가로 폰: 카드 3장이 한 줄에, 고르기 화면이 한 화면에 (구석 버튼은 타이틀·메뉴에서만) */
@media (max-height: 520px) and (orientation: landscape) {
  .choices { flex-wrap: nowrap; gap: 8px; }
  .choice { width: min(250px, calc((92vw - 64px) / 3)); padding: 6px 8px 8px; border-radius: 16px; }
  .choice.mode .cimg { width: 74px; height: 74px; margin: -2px auto 0; } .choice > b, .choice .cbody > b { font-size: 16px; margin: 0 0 2px; } .choice > span:not(.cimg) { font-size: 11.5px; line-height: 1.28; }
  .choice.role { flex-direction: row; align-items: center; gap: 6px; text-align: left; } .choice.role .cimg { width: 60px; height: 60px; margin: 0; flex: none; }
  .choice.role .cbody { align-items: flex-start; flex: 1; } .choice.role .stats { width: 100%; }
  .choice.role .cbody { min-width: 0; } .choice.role .pips { min-width: 22px; } .choice.role { overflow: hidden; } .choice.role .stats { margin: 0; gap: 2px; } .choice.role .skl { display: none; } .st { font-size: 10.5px; gap: 4px; } .st em { width: 46px; } .pips s { height: 6px; }
  .choice .selb { width: 26px; height: 26px; top: 4px; right: 4px; } .choice .selb svg { width: 14px; height: 14px; }
  .diffrow { margin-top: 0; } .seg { padding: 2px; }
  .screen:not(.ttl):not(.dim) .corner { display: none; }
  .opts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .opts .spellrow > b, .opts .diffrow > b { display: none; } .opts .spch em, .opts .spch small { display: none; } .opts .spch b { font-size: 14px; } .opts .spch { width: auto; min-height: 46px; gap: 4px; padding: 2px 10px 2px 3px; } .opts .spch .spi { width: 34px; height: 34px; } .opts .seg button { padding: 6px 10px; }
}
@media (max-height: 360px) {
  .rline.small { display: none; } .res-body { padding: 8px 10px; } .result .big { font-size: 30px; } .result .bico { width: 40px; height: 40px; }
  .trow { grid-template-columns: 22px 1fr auto 26px 20px; gap: 4px; } .trow .rp { width: 22px; height: 22px; } .trow s { width: 20px; height: 20px; } .trow .rp .crown { width: 16px; height: 16px; top: -7px; } .tcol h4 { font-size: 12px; margin: 0; } .tcol h4 b { font-size: 15px; }
  .choice.mode .cimg { width: 56px; height: 56px; } .choice.role .cimg { width: 52px; height: 52px; }
  .stitle h2 { font-size: 17px; }
  .logo { font-size: 36px; }
  .btn.play { min-width: 128px; min-height: 52px; font-size: 20px; } .hport { width: 50px; height: 50px; } .hinfo em, .hsp { display: none; }
}
@media (max-width: 600px) { .score > b { font-size: 18px; min-width: 42px; height: 36px; padding: 0 8px; } .smid { min-width: 70px; height: 42px; } .clock { font-size: 14px; } }
/* PC 좁은 창: 기술 칸이 지도와 겹치지 않게 */
@media (max-width: 1100px) { body:not(.touch) #me .bars { width: 150px; } body:not(.touch) .slot { width: 50px; height: 50px; } body:not(.touch) #me .port { width: 54px; height: 54px; } }

/* 세로로 들고 해도 겹치지 않게 */
@media (orientation: portrait) {
  body.touch .hud-top { left: auto; right: 60px; transform: none; }
  body.touch #mini { width: 120px; height: 80px; }
  body.touch #me { left: 50%; bottom: 250px; }
  body.touch #hint { left: 50%; bottom: 390px; max-width: 90%; }
  body.touch #cards { left: 50%; top: 120px; }
  body.touch #toasts { top: 200px; }
  body.touch #dead { top: 42%; bottom: auto; transform: translate(-50%, -50%); }
  body.touch #tCancel { right: 40px; bottom: 320px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .home-top { flex-direction: column; align-items: flex-start; }
  .home-menu { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); flex-direction: row; }
  .dock { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); }
  .home-menu ~ .foot, .foot { display: none; }
  .choices.modes, .choices.roles { flex-direction: column; flex-wrap: nowrap; width: 100%; }
  .choice { width: 100%; flex-direction: row; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; }
  .choice .cimg, .choice.mode .cimg { width: 84px; height: 84px; margin: 0; flex: none; }
  .choice.mode { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 10px; } .choice.mode .cimg { grid-row: 1 / 3; } .choice.mode > b { align-self: end; }
  .choice.role .cbody { align-items: flex-start; flex: 1; } .choice.role .stats { margin: 2px 0 4px; grid-template-columns: 1fr 1fr; column-gap: 10px; } .skl { padding: 3px 6px; } .skl .ski { width: 28px; height: 28px; } .skl small { display: none; }
  .choice .cimg, .choice.role .cimg { width: 72px; height: 72px; } .st em { width: 50px; } .choice > b, .choice .cbody > b { font-size: 18px; margin: 0; }
  .screen { gap: 10px; }
  .spch { width: calc(50% - 4px); } .spch small { display: none; } .spellrow > b { width: 100%; }
  .stitle { align-self: flex-start; padding: 2px 16px; } .stitle h2 { font-size: 19px; }
  .teams { grid-template-columns: 1fr; }
  .mrow { grid-template-columns: 46px 1fr auto; } .mrow .mrew { display: none; } .mico { width: 46px; height: 46px; }
  .lrow { flex-direction: column; gap: 4px; } .ll { width: auto; padding-top: 0; } .lgrid.emos { margin-left: 0; }
  .ltile { width: 74px; } .ltile img.art { width: 56px; height: 56px; }
  .stiles { width: 100%; justify-content: space-between; } .stile { flex: 1; }
  .sgrid { grid-template-columns: repeat(2, 1fr); }
  .result .banner { padding: 4px 30px; }
}
/* 낮은 가로 폰(높이 430 이하): 결과 화면이 한 화면에 (단추가 밖으로 나가지 않게) */
@media (max-height: 430px) {
  .result .banner { padding: 0 44px; } .result .bico { width: 40px; height: 40px; margin: -6px 0; } .result .big { font-size: 32px; }
  .res-body { padding: 8px 12px; } .tcol h4 { margin: 0; font-size: 12px; } .tcol h4 b { font-size: 15px; }
  .trow { grid-template-columns: 22px 1fr auto 26px 20px; gap: 4px; padding: 0 4px; } .trow + .trow { margin-top: 1px; } .trow .rp { width: 22px; height: 22px; } .trow s { width: 20px; height: 20px; } .trow .rp .crown { width: 16px; height: 16px; top: -7px; left: -5px; }
  .rline { margin: 3px 0; gap: 4px 10px; } .rline.small { font-size: 12px; } .rewards { padding: 3px 8px; margin: 3px 0; } .rw img.art { width: 24px; height: 24px; }
  .res-body .row { margin-top: 4px; } .res-body .btn { min-height: 44px; padding: 6px 18px; }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 700px) {
  .choice.role .cimg { width: 46px; height: 46px; } .choice.role { padding: 6px 6px 6px 4px; gap: 4px; } .st em { width: 40px; font-size: 10px; } .st { gap: 3px; }
}
@media (max-height: 360px) {
  body.touch #dead .ring { width: 56px; height: 56px; padding: 4px; } body.touch #dead .ring .big { font-size: 24px; } body.touch #dead > div:last-child { font-size: 11px; padding: 1px 10px; }
}
@media (max-height: 520px) { img.art.hico.big { display: none; } }
@media (max-width: 600px) and (orientation: portrait) {
  .res-body .row { flex-wrap: nowrap; } .res-body .btn { min-width: 0; flex: 1; padding: 10px 12px; }
  .trow { grid-template-columns: 28px 1fr auto 30px 24px; padding: 1px 4px; } .trow .rp { width: 26px; height: 26px; } .trow s { width: 24px; height: 24px; }
}
@media (max-width: 600px) and (orientation: portrait) { .dock { gap: 8px; } .btn.play { min-width: 150px; font-size: 24px; } }
/* 낮은 가로 폰: 레벨업 카드는 글자만, 알림 띠는 카드 아래 (서로 겹치지 않게) */
@media (max-height: 430px) {
  body.touch #cards { top: 50px; } body.touch .card img.art { display: none; } body.touch .card { padding: 4px 6px 5px; }
  body.touch #toasts { top: 108px; } body.touch .toast { min-height: 28px; padding-top: 2px; padding-bottom: 2px; } body.touch .toast img.art { width: 22px; height: 22px; }
}