/* ETHERION — 전장의 작은 게임 상자(파친코 · 결정 키우기)와 날씨. 테마: 밤하늘과 금빛 룬 */

/* ===================== 작은 게임 상자 (v1.4.1: 내 덱 왼쪽, 카드 한 장 크기) =====================
   크기는 카드 크기(--cw)를 따른다. 위에 탭 둘(파친코 · 결정), 아래는 세로로 쌓은 기계 */
.arcade { position: relative; z-index: 6; width: 100%; height: calc(var(--cw) * .66 * 1.4); display: flex; flex-direction: column; user-select: none; font-family: var(--caps); font-size: max(9px, calc(var(--cw) * .058)); border: 1px solid var(--line-gold); border-radius: calc(var(--cw) * .05); overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 26, 40, .96), rgba(10, 10, 18, .97)), var(--night-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(217, 180, 106, .08); }
.arc-tabs { flex: none; display: flex; align-items: stretch; border-bottom: 1px solid rgba(217, 180, 106, .22); background: rgba(0, 0, 0, .3); }
.arc-tab { position: relative; flex: 1 1 0; min-width: 0; padding: .45em .2em .4em; font-family: var(--body); font-size: 1em; font-weight: 700; letter-spacing: 0; white-space: nowrap; color: var(--muted); background: none; border: 0; border-right: 1px solid rgba(217, 180, 106, .12); cursor: pointer; }
.arc-tab:hover { color: var(--ink); }
.arc-tab.on { color: var(--gold-hi); background: rgba(217, 180, 106, .1); }
.arc-tab.on::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px; border-bottom: 1px solid var(--gold); }
.arc-tab.ready::before { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: #ef6a5c; box-shadow: 0 0 5px rgba(239, 106, 92, .8); animation: pachPulse 1.2s ease-in-out infinite; }
.arc-weather { flex: none; display: inline-grid; place-items: center; padding: 0 .45em; cursor: help; }
.arc-weather i { font-style: normal; color: var(--ether); font-size: 1.15em; }
.arc-body { flex: 1 1 auto; min-height: 0; display: flex; }
.arc-pane { flex: 1 1 auto; min-width: 0; padding: .55em .55em .6em; display: flex; }
.arc-pane[hidden] { display: none; }

/* 파친코: 위 이름 · 릴 셋 · 결과 한 줄 · SPIN */
.slot-m, .seed { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: .4em; }
.sm-top, .seed-top { flex: none; display: flex; justify-content: center; font-size: .82em; letter-spacing: .24em; color: var(--gold); }
.sm-win { position: relative; flex: 1 1 auto; min-height: 1.8em; max-height: 4.2em; display: grid; grid-template-columns: repeat(3, 1fr); gap: .2em; padding: .2em; border-radius: .3em; background: #05060a; box-shadow: inset 0 0 0 1px rgba(217, 180, 106, .3), inset 0 4px 8px rgba(0, 0, 0, .8); }
.sm-reel { position: relative; overflow: hidden; border-radius: .2em; background: linear-gradient(180deg, #0c0b14, #17151f 50%, #0c0b14); }
.sm-strip { will-change: transform; }
.sm-sym { height: var(--sym, 30px); display: grid; place-items: center; color: var(--sc, var(--gold)); }
.sm-sym svg { width: 70%; height: 70%; max-width: 30px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sc) 55%, transparent)); }
.sm-reel.blur .sm-sym { filter: blur(1.2px); opacity: .85; }
.sm-line { position: absolute; left: .1em; right: .1em; top: 50%; border-top: 1px solid rgba(217, 180, 106, .28); pointer-events: none; }
.slot-m.hit-group .sm-win { box-shadow: inset 0 0 0 1px var(--gold-hi), 0 0 12px rgba(246, 226, 168, .5); }
.slot-m.hit-faction .sm-win, .slot-m.hit-card .sm-win { animation: pachGlow 1.6s ease-out; }
.sm-msg, .seed-msg { flex: none; margin: 0; text-align: center; font-family: var(--body); font-size: 1em; letter-spacing: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-msg.win, .seed-msg.win { color: var(--gold-hi); }
.sm-msg.win.big, .seed-msg.win.big { color: #fff6d6; text-shadow: 0 0 10px rgba(246, 226, 168, .7); }
.arcade .pach-btn { flex: none; justify-content: center; height: 2.3em; border-radius: 1.2em; font-size: .95em; padding: 0 .6em; }
.slot-m.armed .sm-btn i { animation: pachPulse 1.2s ease-in-out infinite; }
.slot-m.spinning .sm-btn { filter: none; background: linear-gradient(180deg, #f08a7a, #b03a2c); border-color: #b03a2c; color: #fff; }

/* 결정 키우기 (세로) */
.seed-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; }
.seed-pot { width: 3.6em; height: 3.6em; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(143, 220, 255, .12), transparent 70%); border: 1px solid rgba(217, 180, 106, .22); }
.seed-pot svg { width: 86%; height: 86%; }
.seed-steps { display: flex; gap: .45em; justify-content: center; }
.seed-steps i { width: .7em; height: .7em; transform: rotate(45deg); border: 1px solid rgba(143, 220, 255, .4); background: rgba(143, 220, 255, .05); transition: background .25s, box-shadow .25s; }
.seed-steps i.on { background: radial-gradient(circle at 35% 35%, #f2fcff, #6cc9f2 55%, #1c6a99); box-shadow: 0 0 8px rgba(143, 220, 255, .7); }
.seed[data-stage="5"] .seed-pot, .seed.bloom .seed-pot { box-shadow: 0 0 18px rgba(143, 220, 255, .6); border-color: #8fdcff; }
.seed.bloom { animation: pachGlow 1.6s ease-out; }
.seed.armed .seed-pot { border-color: rgba(217, 180, 106, .5); }
.seed-btn { background: linear-gradient(180deg, #8fdcff, #2c86b8); border-color: #1c6a99; color: #06202e; box-shadow: 0 2px 0 #124660, 0 3px 8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5); }
.seed-btn i { background: radial-gradient(circle at 35% 35%, #fff, #f2fcff 55%, #3a8ab8); box-shadow: 0 0 5px rgba(143, 220, 255, .8); }
.seed-btn:not(:disabled):active { box-shadow: 0 0 0 #124660, 0 1px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .3); }
@media (max-width: 760px) { .arcade { display: none; } }

/* ===================== 날씨 ===================== */
#weather-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: .6; }
.weather-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; background: rgba(255, 255, 255, .02); }
.weather-chip i { font-style: normal; color: var(--ether); font-size: 13px; }
.weather-chip b { font-weight: 400; }
.tbw-right .weather-chip { border: 0; border-radius: 0; padding: 5px 10px; background: rgba(143, 220, 255, .06); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }