* { box-sizing: border-box; user-select: none; }
body {
  margin: 0;
  min-height: 100vh;
  padding-top: var(--site-header-offset, 0px);
  overflow-x: hidden;
  font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
  color: #fff;
  background:
    radial-gradient(circle at top, rgba(250, 204, 21, 0.16), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.16), transparent 26%),
    linear-gradient(165deg, #05070c 0%, #0b1220 45%, #080c16 100%);
}

.wrap {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 18px 18px 22px;
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 18px;
}

.game-card,
.side-card {
  background: rgba(7, 13, 23, 0.87);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 22px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.game-top { padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); background: rgba(15, 23, 42, 0.45); }
.title h1 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.title p { margin: 6px 0 0; color: #bfccdf; font-size: 13px; }
.hud { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.hud-item { min-width: 76px; padding: 9px 10px; border-radius: 14px; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.26); text-align: center; }
.hud-item span { display:block; font-size:11px; color:#9fb0c7; margin-bottom:3px; }
.hud-item strong { font-size:17px; color:#fcd34d; }
.canvas-box { position: relative; padding: 16px; }
canvas { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 18px; background: radial-gradient(circle at 20% 20%, rgba(56,189,248,.16), transparent 26%), radial-gradient(circle at 80% 35%, rgba(239,68,68,.15), transparent 24%), linear-gradient(180deg, #162133 0%, #0a1323 100%); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: inset 0 0 42px rgba(0,0,0,.4); image-rendering: pixelated; }
.overlay { position: absolute; inset: 16px; border-radius: 18px; display:flex; align-items:center; justify-content:center; background: rgba(2,6,23,.72); text-align:center; padding:22px; z-index: 10; }
.overlay.hidden { display:none; }
.panel { max-width: 560px; padding: 26px; border-radius: 20px; background: rgba(8, 15, 27, .94); border: 1px solid rgba(148,163,184,.28); box-shadow: 0 20px 70px rgba(0,0,0,.45); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; background: rgba(250,204,21,.15); color:#fde68a; border:1px solid rgba(250,204,21,.24); font-size:13px; margin-bottom:12px; }
.panel h2 { margin: 0 0 10px; font-size: 34px; letter-spacing: -.05em; }
.panel p { margin: 0 0 18px; color:#c8d5e7; line-height:1.6; font-size:15px; }
.button-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.wrap button { border:0; cursor:pointer; border-radius:14px; padding:12px 18px; font-weight:800; color:#0f172a; background: linear-gradient(180deg, #fde68a, #f59e0b); box-shadow: 0 10px 26px rgba(245,158,11,.22); transition: transform .12s ease, filter .12s ease; }
.wrap button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.wrap button.secondary { color:#e5e7eb; background: rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.28); box-shadow:none; }
.side-card { padding: 18px; }
.side-section + .side-section { margin-top:18px; padding-top:18px; border-top:1px solid rgba(148,163,184,.18); }
.side-section h3 { margin:0; font-size:17px; letter-spacing:-.03em; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.rank-link { font-size:12px; color:#93c5fd; text-decoration:none; border:1px solid rgba(147,197,253,.4); border-radius:999px; padding:4px 10px; }
.rank-link:hover { background: rgba(59,130,246,.18); }
.sub-rank-title { margin: 12px 0 8px; font-size:14px; color:#cbd5e1; }

.rank-list, .mission-list, .badge-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.rank-list li, .mission-list li, .badge-list li { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; background: rgba(15,23,42,.65); border:1px solid rgba(148,163,184,.2); font-size:13px; }
.rank-list b, .mission-list b, .badge-list b { color:#facc15; white-space:nowrap; }
.mission-list li.done { background: rgba(22,163,74,.2); border-color: rgba(74,222,128,.24); }
.tip { padding:12px; border-radius:16px; background: rgba(30,64,175,.2); border:1px solid rgba(96,165,250,.24); color:#dbeafe; line-height:1.55; font-size:13px; }
.keys { display:grid; gap:8px; color:#cbd5e1; font-size:13px; line-height:1.45; }
.wrap .keys kbd { display:inline-block; min-width:28px; padding:3px 7px; margin:0 2px; border-radius:7px; background:rgba(148,163,184,.2); color:#fff; font-family:inherit; font-size:12px; text-align:center; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:16px 0 18px; }
.result-box { padding:11px; border-radius:14px; background:rgba(15,23,42,.72); border:1px solid rgba(148,163,184,.22); }
.result-box span { display:block; color:#9fb0c7; font-size:12px; margin-bottom:3px; }
.result-box strong { color:#facc15; font-size:20px; }
.mobile-pad { display:none; margin-top:12px; grid-template-columns:repeat(3,62px); gap:8px; justify-content:center; }
.mobile-pad button { height:48px; padding:0; border-radius:14px; font-size:18px; color:#fff; background:rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.22); box-shadow:none; }
.mobile-pad .empty { visibility:hidden; }
.guild-pick { display:grid; gap:8px; margin: 0 0 14px; text-align:left; }
.guild-pick label { font-size:13px; color:#cbd5e1; font-weight:700; }
.guild-pick select { width:100%; border-radius:12px; border:1px solid rgba(148,163,184,.3); background: rgba(15,23,42,.75); color:#fff; padding:10px 12px; font-size:14px; font-weight:600; }
.guild-pick option { color:#111827; }
.pill-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin: 12px 0 18px; }
.pill { padding:7px 10px; border-radius:999px; font-size:12px; color:#dbeafe; background:rgba(30,64,175,.22); border:1px solid rgba(96,165,250,.24); }

@media (max-width: 980px) { .wrap{grid-template-columns:1fr;} .game-top{align-items:flex-start; flex-direction:column;} .hud{justify-content:flex-start;} }
@media (max-width: 640px) { .wrap{padding: 4px 4px 8px;} .game-card,.side-card{border-radius:14px;} .canvas-box{padding:4px;} canvas{border-radius:10px; min-height:62vh;} .overlay{inset:4px;} .panel{padding:14px;} .panel h2{font-size:24px;} .hud-item{min-width:64px; padding:7px 8px;} .mobile-pad{display:grid; position:sticky; bottom:6px; background:rgba(2,6,23,.5); padding:6px; border-radius:12px;} .mobile-pad button{height:56px; font-size:22px;} }