:root {
  --bg:      #080c10;
  --panel:   #0f1520;
  --panel2:  #131e2a;
  --border:  #1a2535;
  --accent:  #c9a869;
  --text:    #d8dee6;
  --dim:     #5a6a7a;
  --red:     #ef4444;
  --ready:   #4ade80;
  --soon:    #f59e0b;
  --ward:    #7c6fcd;
  --active:  #38bdf8;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/1.3 system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column;
}

/* ── header ── */
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px; height: 36px;
  background: #0a0e14; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.logo { font-size: 15px; font-weight: 700; color: var(--accent); }
.header-right { display: flex; align-items: center; gap: 10px; }
#clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.dot { font-size: 9px; color: var(--dim); }
.dot.ok { color: var(--ready); } .dot.bad { color: var(--red); }
.icon-btn { background:none; border:none; color:var(--dim); font-size:18px; cursor:pointer; padding:6px; border-radius:6px; line-height:1; }
.icon-btn.active { color: var(--accent); }

/* ── tabs ── */
.team-tabs { display:flex; border-bottom:1px solid var(--border); background:#0a0e14; flex-shrink:0; }
.tab { flex:1; padding:6px; font-size:13px; font-weight:700; background:none; border:none; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── main ── */
main { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.team { display:none; flex:1; flex-direction:column; padding:5px 7px; gap:4px; overflow:hidden; }
.team.active { display:flex; }

/* ── card ── */
.card {
  flex:1; min-height:0;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden;
}
.card.empty { opacity:0.2; }

/* head */
.card-head {
  display:flex; align-items:center; gap:6px;
  padding:3px 8px; background:var(--panel2); flex-shrink:0;
}
.portrait { width:28px; height:28px; border-radius:4px; object-fit:cover; background:var(--bg); flex-shrink:0; border:1px solid var(--border); }
.champ-info { flex:1; min-width:0; }
.champ-name { font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.champ-sub { font-size:9px; color:var(--dim); margin-top:0; }
.pos-tag { font-size:8px; font-weight:700; color:var(--accent); background:rgba(201,168,105,0.15); padding:1px 4px; border-radius:3px; margin-right:4px; }

/* ── items row ── */
.items-row {
  display:flex; align-items:center; gap:2px;
  padding:2px 6px; background:#0b1118; flex-shrink:0;
}
.item-slot {
  width:24px; height:24px; position:relative; flex-shrink:0;
  border-radius:4px; overflow:hidden;
}
.item-slot > * { position:absolute; inset:0; width:100%; height:100%; }
.item-empty { border:1px dashed #1e2a36; border-radius:5px; }
.item-img { object-fit:cover; border-radius:5px; border:1px solid var(--border); }

/* active item glow */
.item-slot.has-active { cursor:pointer; }
.item-slot.has-active .item-img {
  border-color: var(--active);
  box-shadow: 0 0 6px rgba(56,189,248,0.5);
}
.item-slot.has-active.on-cd .item-img {
  border-color: var(--soon);
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
}
.item-slot.has-active.ready-cd .item-img {
  border-color: var(--ready);
  box-shadow: 0 0 6px rgba(74,222,128,0.6);
}
/* cd badge on item */
.item-cd-badge {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:800; color:#fff;
  background:rgba(0,0,0,0.55); border-radius:5px; z-index:2;
  pointer-events:none;
}
/* ward slot */
.item-slot.ward-slot { cursor:pointer; }
.item-slot.ward-slot .ward-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:18px; background:#0f1a30; border:1px solid #2a2060; border-radius:5px;
}
.item-slot.ward-slot.on-cd .ward-icon { border-color:var(--soon); }
.item-slot.ward-slot.ready-cd .ward-icon { border-color:var(--ready); }

/* ── D/F/R spell buttons (3 equal columns) ── */
.spells {
  flex:1; min-height:0;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:3px; padding:3px 5px 5px;
}
.spell-btn {
  display:flex; align-items:center; gap:5px; padding:0 7px;
  border-radius:7px; background:#0c1520; border:1px solid var(--border);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  position:relative; overflow:hidden; min-height:0;
  transition:background 80ms;
}
.spell-btn::before {
  content:""; position:absolute; inset:0; background:#1a3050;
  transform-origin:left; transform:scaleX(var(--progress,0));
  transition:transform 200ms linear; pointer-events:none;
}
.spell-btn:active { background:#18283a; }
.spell-icon { width:24px; height:24px; border-radius:4px; object-fit:cover; flex-shrink:0; position:relative; z-index:1; background:var(--bg); }
.spell-meta { display:flex; flex-direction:column; flex:1; min-width:0; position:relative; z-index:1; }
.spell-label { font-size:8px; font-weight:700; color:var(--dim); letter-spacing:0.5px; }
.spell-value { font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); line-height:1; position:relative; z-index:1; }
.spell-btn.ready { background:#091a0f; border-color:#1a3d24; }
.spell-btn.ready .spell-value { color:var(--ready); font-size:13px; }
.spell-btn.soon .spell-value { color:var(--soon); }

/* long-press cancel indicator */
.spell-btn.cancelling::after {
  content:attr(data-cancel);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff;
  background:rgba(239,68,68,0.7); z-index:5; border-radius:8px;
}
/* 아이템/장신구 슬롯 길게 누르기 취소 표시 */
.item-slot.cancelling { position:relative; }
.item-slot.cancelling::after {
  content:''; position:absolute; inset:0;
  background:rgba(239,68,68,0.65); z-index:5; border-radius:5px;
}

@keyframes btn-pulse {
  0% { background:#1a5c30; } 60% { background:#0e2516; } 100% { background:#0c1520; }
}
.spell-btn.pulse { animation:btn-pulse 350ms ease-out; }

/* ── item overlay ── */
.item-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:60; display:flex; align-items:flex-end;
}
.item-overlay.hidden { display:none; }
.item-sheet {
  background:var(--panel); border-top:1px solid var(--border);
  border-radius:16px 16px 0 0; padding:20px 18px 36px; width:100%;
}
.item-sheet-head {
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.item-sheet-icon { width:52px; height:52px; border-radius:8px; object-fit:cover; border:1px solid var(--border); }
.item-sheet-icon-emoji { width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:36px; background:#0f1a30; border:1px solid #2a2060; border-radius:8px; }
.item-sheet-info h2 { font-size:16px; font-weight:700; }
.item-sheet-info p { font-size:12px; color:var(--dim); margin-top:3px; }
.item-cd-display {
  text-align:center; padding:16px;
  font-size:48px; font-weight:900; font-variant-numeric:tabular-nums;
  color:var(--text); border-radius:12px; background:#0c1520;
  margin-bottom:14px; border:1px solid var(--border); line-height:1;
}
.item-cd-display.ready { color:var(--ready); font-size:32px; }
.item-cd-display.soon { color:var(--soon); }
.item-sheet-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sheet-btn {
  padding:14px; border-radius:10px; font-size:15px; font-weight:700;
  border:none; cursor:pointer; text-align:center;
}
.sheet-btn.start { background:var(--accent); color:#0a0e13; }
.sheet-btn.cancel { background:var(--panel2); color:var(--dim); border:1px solid var(--border); }
.sheet-btn.reset { background:#1f1015; color:var(--red); border:1px solid #3a1525; }

/* ── lock overlay ── */
body.locked main::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  background: transparent;
  pointer-events: all;
}
body.locked header { background: #1a0a0a; border-bottom-color: var(--red); }
body.locked #btn-lock { color: var(--red); font-size: 20px; }

/* ── menu overlay ── */
.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:50; display:flex; align-items:flex-end; }
.menu-overlay.hidden { display:none; }
.menu-box { background:var(--panel); border-top:1px solid var(--border); border-radius:16px 16px 0 0; padding:18px 16px 32px; width:100%; }
.menu-box h3 { font-size:12px; color:var(--dim); margin-bottom:12px; text-align:center; }
.menu-item { display:block; width:100%; padding:15px 14px; background:var(--panel2); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:15px; text-align:left; cursor:pointer; margin-bottom:8px; }
.menu-item.danger { color:var(--red); }

.status-banner{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
  max-width:90vw;z-index:40;
  padding:6px 14px;font-size:11px;font-weight:600;line-height:1.3;
  background:rgba(245,158,11,0.92);color:#0a0e13;
  border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
}
.status-banner.hidden{display:none}
.status-banner.error{background:rgba(239,68,68,0.92);color:#fff}
.status-banner.ok{background:rgba(34,197,94,0.92);color:#0a0e13}

/* ── 데스크톱/태블릿 반응형 — 768px 이상에서 스펠 아이콘 크게 ── */
@media (min-width: 768px) {
  main { max-width: 720px; margin: 0 auto; padding: 8px; }
  .card { padding: 10px; gap: 6px; }
  .portrait { width: 48px; height: 48px; border-radius: 6px; }
  .card-head { gap: 8px; }
  .card-name { font-size: 15px; }
  .spells { gap: 6px; padding: 6px 8px 8px; }
  .spell-btn { padding: 8px 12px; gap: 10px; border-radius: 10px; min-height: 56px; }
  .spell-icon { width: 40px; height: 40px; border-radius: 6px; }
  .spell-label { font-size: 11px; }
  .spell-value { font-size: 22px; }
  .spell-btn.ready .spell-value { font-size: 18px; }
  header { padding: 0 16px; height: 56px; }
  .logo { font-size: 17px; }
  .team-tabs .tab { font-size: 14px; padding: 10px; }
}

@media (min-width: 1024px) {
  main { max-width: 900px; padding: 12px; }
  .portrait { width: 56px; height: 56px; }
  .spell-icon { width: 48px; height: 48px; }
  .spell-btn { min-height: 64px; padding: 10px 14px; }
  .spell-value { font-size: 26px; }
}

/* ── 연결 상태 3-등 표시 (pill 스타일, 한 줄) ── */
.status-lights {
  display:inline-flex; align-items:center; gap:2px;
  padding:3px 6px; background:rgba(0,0,0,0.3);
  border:1px solid var(--border); border-radius:10px;
  margin-right:6px; height:22px;
}
.s-light {
  display:inline-flex; align-items:center; gap:3px;
  font-size:9px; font-weight:700; padding:0 4px;
  letter-spacing:0.3px;
  transition:color 200ms;
}
.s-light::before {
  content:'●'; font-size:8px; line-height:1;
}
.s-light[data-kind="ws"]::after   { content:'서버'; }
.s-light[data-kind="pc"]::after   { content:'PC'; }
.s-light[data-kind="game"]::after { content:'게임'; }
.s-light.on  { color:var(--ready); }
.s-light.on::before  { text-shadow:0 0 5px rgba(74,222,128,.6); }
.s-light.off { color:#3a4656; }

@media (max-width: 520px) {
  .s-light::after { display:none; }
  .s-light { padding:0 2px; }
}
#clock { font-variant-numeric:tabular-nums; font-weight:700; transition:color 300ms; }

/* 룬 토글 버튼 */
.card-head { position: relative; }
.rune-toggle {
  display:flex; align-items:center; gap:3px;
  padding:3px 7px; border-radius:6px;
  background:rgba(90,106,122,0.12); border:1px solid var(--border);
  color:var(--dim); cursor:pointer; font-size:9px; font-weight:700;
  flex-shrink:0; transition:all 120ms;
  line-height:1;
}
.rune-toggle .rune-icon {
  width:16px; height:16px; border-radius:3px;
  filter: grayscale(1) brightness(0.6); opacity:0.5; transition:all 120ms;
  object-fit:cover;
}
.rune-toggle .rune-label { letter-spacing:0.3px; }
.rune-toggle:active { transform:scale(0.92); }
.card[data-cosmic-insight="1"] .rune-toggle {
  background:rgba(201,168,105,0.18); border-color:var(--accent); color:var(--accent);
  box-shadow:0 0 6px rgba(201,168,105,0.35);
}
.card[data-cosmic-insight="1"] .rune-toggle .rune-icon { filter:grayscale(0); opacity:1; }