:root {
  color-scheme: dark;
  --bg: #04040b;
  --wall: #111329;
  --panel: #10162cee;
  --panel-strong: #1b2542;
  --line: #ffffff1f;
  --text: #f4f7ff;
  --muted: #a9b5cf;
  --gold: #ffd166;
  --coin: #ffbd55;
  --cyan: #66f7ff;
  --pink: #ff5ed0;
  --green: #70ec94;
  --red: #ff6978;
  --shadow: 0 24px 72px #000a;
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  overflow-x: hidden;
  user-select: none;
  background:
    radial-gradient(circle at 12% -12%, #1e86a580 0, transparent 30%),
    radial-gradient(circle at 92% -6%, #b72c8b72 0, transparent 32%),
    radial-gradient(circle at 50% 105%, #25154d 0, transparent 42%),
    linear-gradient(180deg, #101422 0, #070812 58%, #020207 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff05 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 3px, #00000024 3px 5px);
  background-size: 44px 44px, 44px 44px, 100% 5px;
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%);
}
button, select, input { font: inherit; }
button { border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.25); }
.app {
  width: min(1520px, 100vw);
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
  padding: 14px;
}
.top {
  display: grid;
  grid-template-columns: minmax(270px, 1.38fr) repeat(5, minmax(108px, .72fr)) auto;
  gap: 10px;
  align-items: stretch;
}
.brand, .stat, .event-bar, .panel, .modal-card {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #1a2340ec, #090e1dee),
    radial-gradient(circle at 18% 0%, #66f7ff20, transparent 44%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.brand {
  position: relative;
  min-height: 84px;
  border-radius: 26px;
  padding: 16px 18px 13px;
  display: grid;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  isolation: isolate;
}
.brand::before {
  content: "INSERT COIN  •  PLAY ALL NIGHT  •  IDLE ARCADE";
  position: absolute;
  right: -22px;
  top: 10px;
  color: #ffffff16;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .18em;
  transform: rotate(4deg);
  white-space: nowrap;
}
.brand::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--pink));
  box-shadow: 0 0 22px #66f7ff77;
}
.brand h1 { margin: 0; font-size: clamp(24px, 2.8vw, 40px); line-height: .95; letter-spacing: -.075em; text-shadow: 0 0 26px #66f7ff33; }
.brand h1 span { color: var(--gold); text-shadow: 0 0 22px #ffd16682; }
.brand p { margin: 0; color: #d6e4ff; font-size: 13px; }
.stat {
  border-radius: 22px;
  min-height: 84px;
  padding: 11px 9px;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid #ffffff12;
  pointer-events: none;
}
.stat small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.stat b { display: block; font-size: clamp(18px, 2vw, 27px); line-height: 1.1; word-break: keep-all; letter-spacing: -.04em; color: #f8fbff; }
.top-actions { display: grid; grid-template-columns: repeat(2, 58px); gap: 8px; }
.icon-btn {
  border-radius: 20px;
  background: linear-gradient(180deg, #21345d, #101830);
  color: var(--text);
  font-weight: 900;
  border: 1px solid #ffffff20;
  box-shadow: inset 0 1px #ffffff2a, 0 16px 36px #0006;
}
.icon-btn:hover, .primary:hover, .secondary:hover, .danger:hover { filter: brightness(1.08); }
.event-bar {
  min-height: 62px;
  border-radius: 24px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.event-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffd16616, transparent);
  transform: translateX(-70%);
  animation: sweep 5s linear infinite;
}
@keyframes sweep { to { transform: translateX(70%); } }
.event-bar strong { color: var(--gold); }
.event-text { position: relative; color: #e2edff; line-height: 1.35; }
.event-actions { position: relative; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(500px, 1fr) 380px;
  gap: 12px;
}
.panel { border-radius: 30px; overflow: hidden; }
.arcade-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(circle at 50% 0%, #66f7ff15, transparent 38%),
    linear-gradient(180deg, #202842ee, #080b16f2 74%);
}
.panel-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.panel-head h2, .side-title { margin: 0; font-size: 22px; letter-spacing: -.05em; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.badge { border-radius: 999px; padding: 6px 10px; background: #ffffff12; border: 1px solid #ffffff1b; color: #dce9ff; font-size: 12px; font-weight: 900; white-space: nowrap; }
.badge.gold { color: #211400; background: linear-gradient(135deg, var(--gold), #ff9b45); }
.arcade-wrap {
  position: relative;
  padding: 18px;
  display: grid;
  gap: 14px;
  align-content: start;
  overflow: hidden;
}
.arcade-wrap::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 56%;
  background:
    linear-gradient(90deg, #ffffff09 1px, transparent 1px),
    linear-gradient(0deg, #ffffff09 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, #ffd16618, transparent 60%),
    linear-gradient(180deg, #181323, #07060d);
  background-size: 70px 70px, 70px 70px, auto, auto;
  transform: perspective(560px) rotateX(58deg);
  transform-origin: bottom;
  opacity: .92;
}
.grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 14px;
  padding: 8px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 40%, #66f7ff10, transparent 60%),
    linear-gradient(180deg, #0b1022cc, #080a12cc);
  border: 1px solid #ffffff12;
}
.slot {
  position: relative;
  min-height: 150px;
  border-radius: 24px;
  border: 1px solid #ffffff1c;
  background:
    linear-gradient(180deg, #26314c80, #12182a88),
    repeating-linear-gradient(45deg, #ffffff07 0 12px, transparent 12px 24px);
  overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease;
  color: var(--text);
}
.slot:hover { transform: translateY(-3px); border-color: #66f7ff90; filter: brightness(1.06); }
.slot.selected { border-color: var(--gold); box-shadow: 0 0 0 3px #ffd1662c, 0 0 30px #ffd16620, 0 18px 48px #0008; }
.slot.empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #97aac6;
  font-weight: 900;
  background:
    radial-gradient(circle at 50% 40%, #66f7ff12, transparent 46%),
    repeating-linear-gradient(45deg, #ffffff07 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #222b4388, #111626aa);
}
.slot.empty::after {
  content: "임대 가능";
  position: absolute;
  left: 10px;
  top: 9px;
  color: #ffffff58;
  font-size: 11px;
  font-weight: 900;
}
.slot-plus {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #07101e;
  background: linear-gradient(135deg, #9efcff, #ffe07d);
  font-size: 31px;
  line-height: 1;
  box-shadow: 0 0 24px #66f7ff55;
}
.slot.empty small { color: var(--muted); font-size: 12px; }
.machine {
  height: 100%;
  padding: 13px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  cursor: pointer;
  isolation: isolate;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.machine::before {
  content: "";
  position: absolute;
  inset: 10px 12px auto;
  height: 58px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff30, transparent 54%),
    linear-gradient(180deg, #050814, #02040a);
  border: 1px solid #ffffff20;
  box-shadow: inset 0 0 20px #66f7ff28, 0 0 18px #66f7ff18;
  z-index: -1;
  animation: screenPulse 2.8s ease-in-out infinite;
}
.machine::after {
  content: "COIN";
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #ffd16688;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
  animation: coinBlink 1.4s ease-in-out infinite;
}
@keyframes screenPulse { 50% { filter: brightness(1.45); } }
@keyframes coinBlink { 50% { opacity: .25; } }
.machine-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; z-index: 1; }
.machine-emoji { font-size: 34px; filter: drop-shadow(0 6px 12px #0009); }
.machine-level { font-size: 11px; font-weight: 1000; color: #08101f; background: var(--cyan); padding: 4px 8px; border-radius: 999px; }
.machine-name { margin: 4px 0 0; font-size: 15px; line-height: 1.18; letter-spacing: -.045em; text-shadow: 0 2px 8px #000; }
.machine-ref { color: #d8e6ffc0; font-size: 11px; margin-top: 3px; }
.machine-income { color: var(--coin); font-size: 13px; font-weight: 1000; }
.machine-income::before { content: "+ "; }
.mini-progress { height: 7px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: #00000055; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green), var(--gold)); box-shadow: 0 0 12px #66f7ff88; }
.machine.broken { background: #41151ccc; }
.machine.broken::after, .machine.pending-repair::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000a;
  color: #fff;
  font-weight: 1000;
  font-size: 17px;
  text-align: center;
  z-index: 3;
  letter-spacing: -.04em;
}
.machine.broken::after { content: '수리 대기'; }
.machine.pending-repair::after { content: '고장 경고'; color: var(--gold); }
.machine.brick { background: linear-gradient(180deg, #355d83, #16233f 58%, #0b1020); }
.machine.block { background: linear-gradient(180deg, #4b4fa2, #20254d 58%, #0b1020); }
.machine.package { background: linear-gradient(180deg, #80522b, #382016 58%, #0b1020); }
.machine.pocket { background: linear-gradient(180deg, #26765a, #133629 58%, #0b1020); }
.machine.dungeon { background: linear-gradient(180deg, #5c4ba1, #2a2057 58%, #0b1020); }
.machine.neon { background: linear-gradient(180deg, #8c3fa0, #3a184d 58%, #0b1020); }
.arcade-floor {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  padding: 12px 14px;
  background: #050813c7;
  border: 1px solid #ffffff14;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.floor-info small { display: block; color: var(--muted); font-size: 12px; }
.floor-info b { display: block; font-size: 18px; letter-spacing: -.04em; color: #fff4cb; }
.side { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 12px; border-bottom: 1px solid var(--line); }
.tab-btn { min-height: 46px; border-radius: 15px; background: #ffffff0d; color: var(--muted); font-weight: 900; border: 1px solid #ffffff12; }
.tab-btn.active { color: #07101e; background: linear-gradient(135deg, var(--cyan), var(--gold)); box-shadow: 0 0 18px #66f7ff36; }
.side-body { min-height: 0; overflow: auto; padding: 14px; }
.side-body::-webkit-scrollbar { width: 8px; }
.side-body::-webkit-scrollbar-thumb { background: #ffffff26; border-radius: 999px; }
.tab { display: none; }
.tab.active { display: grid; gap: 12px; }
.shop-card, .upgrade-card, .manage-card, .collection-card {
  border: 1px solid #ffffff16;
  background:
    linear-gradient(180deg, #ffffff0f, #ffffff08),
    radial-gradient(circle at 100% 0%, #66f7ff10, transparent 50%);
  border-radius: 19px;
  padding: 13px;
  display: grid;
  gap: 9px;
}
.guide-card { display: grid; grid-template-columns: 1fr auto; align-items: center; border-color: #66f7ff40; background: linear-gradient(135deg, #66f7ff14, #ffd1660b); }
.machine-shop { grid-template-columns: 1fr auto; align-items: center; }
.shop-row, .upgrade-row, .manage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-title, .upgrade-title { display: flex; gap: 10px; align-items: center; min-width: 0; }
.shop-title strong, .upgrade-title strong { display: block; }
.shop-title span, .upgrade-title span, .hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
.shop-emoji { font-size: 29px; filter: drop-shadow(0 5px 9px #0008); }
.shop-buy { display: grid; gap: 6px; justify-items: end; min-width: 88px; }
.shop-buy small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.primary, .secondary, .danger { border-radius: 14px; padding: 10px 12px; font-weight: 1000; min-height: 42px; box-shadow: inset 0 1px #ffffff2a; }
.primary { background: linear-gradient(135deg, var(--gold), #ff9b45); color: #201303; }
.secondary { background: #223452; color: var(--text); border: 1px solid #ffffff1d; }
.danger { background: linear-gradient(135deg, #ff7777, #e64264); color: white; }
.full { width: 100%; }
.selected-box { margin: 0 12px 12px; border: 1px solid #66f7ff42; background: linear-gradient(180deg, #071526, #0b1322); border-radius: 18px; padding: 13px; }
.selected-box h3 { margin: 0 0 6px; }
.selected-box p { margin: 4px 0; color: var(--muted); }
.progress { height: 10px; border-radius: 999px; background: #ffffff10; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); width: 0%; }
.remodel-card { border-color: #ffd16645; }
.danger-zone { opacity: .88; }
.compact-grid { grid-template-columns: 1fr 1fr; margin: 10px 0 0; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 80; transform: translateX(-50%) translateY(20px); opacity: 0; background: #07101eef; border: 1px solid #ffffff26; box-shadow: var(--shadow); border-radius: 16px; padding: 12px 16px; color: #fff; pointer-events: none; transition: .18s ease; text-align: center; max-width: min(520px, 92vw); }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.modal { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 18px; background: #030712bd; backdrop-filter: blur(8px); }
.modal.show { display: grid; }
.modal-card { width: min(560px, 94vw); max-height: 92dvh; overflow: auto; border-radius: 28px; padding: 24px; }
.modal-card h2 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.05em; }
.modal-card p { color: #c9d7ed; line-height: 1.6; }
.modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.modal-stat { background: #ffffff0b; border: 1px solid #ffffff16; border-radius: 16px; padding: 12px; }
.modal-stat small { color: var(--muted); display: block; }
.modal-stat b { display: block; font-size: 22px; margin-top: 3px; }
.modal-actions { display: grid; gap: 8px; margin-top: 14px; }
@media (max-width: 1100px) { .top { grid-template-columns: 1fr 1fr 1fr; } .brand { grid-column: 1 / -1; } .top-actions { grid-template-columns: repeat(2, 1fr); } .main { grid-template-columns: 1fr; } .side { min-height: 540px; } }
@media (max-width: 640px) { .app { padding: 8px; gap: 8px; } .top { grid-template-columns: 1fr 1fr; gap: 8px; } .brand { border-radius: 18px; padding: 12px; min-height: 72px; } .brand h1 { font-size: 24px; } .brand p { font-size: 12px; } .stat { min-height: 64px; border-radius: 15px; padding: 8px; } .stat b { font-size: 18px; } .top-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); } .event-bar { align-items: stretch; flex-direction: column; border-radius: 17px; } .event-actions { justify-content: stretch; } .event-actions button { flex: 1 1 auto; } .panel { border-radius: 20px; } .panel-head { align-items: flex-start; flex-direction: column; padding: 13px; } .arcade-wrap { padding: 10px; } .grid { gap: 8px; grid-template-columns: repeat(4, minmax(68px, 1fr)); padding: 5px; } .slot { min-height: 118px; border-radius: 17px; } .slot-plus { width: 34px; height: 34px; border-radius: 12px; font-size: 24px; } .machine { padding: 8px; gap: 6px; border-radius: 16px; } .machine::before { inset: 7px 8px auto; height: 43px; border-radius: 11px; } .machine-emoji { font-size: 25px; } .machine-name { font-size: 12px; } .machine-ref, .machine-income { font-size: 10px; } .machine-level { font-size: 10px; padding: 3px 6px; } .arcade-floor { grid-template-columns: repeat(2, 1fr); } .tabs { grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px; } .tab-btn { font-size: 12px; min-height: 42px; } .side-body { padding: 10px; } .selected-box { margin: 0 8px 8px; } .machine-shop { grid-template-columns: 1fr; } .shop-buy { justify-items: stretch; } .shop-buy small { white-space: normal; } .modal-grid, .compact-grid { grid-template-columns: 1fr; } }