:root {
  --cream:#fff8e9;
  --paper:#fffef9;
  --ink:#21352b;
  --muted:#68756e;
  --blue:#237da3;
  --blue-soft:#e6f6fb;
  --orange:#f27635;
  --line:#eadfca;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif; }
body::before,body::after { content:""; position:fixed; z-index:-1; border-radius:50%; filter:blur(4px); }
body::before { width:42vw; height:42vw; left:-15vw; top:-18vw; background:rgba(242,118,53,.16); }
body::after { width:40vw; height:40vw; right:-14vw; bottom:-18vw; background:rgba(35,125,163,.15); }
.game-page { width:min(1080px,calc(100% - 36px)); margin:auto; padding:44px 0 34px; }
.home-link { display:inline-block; margin-bottom:32px; padding:9px 14px; color:var(--blue); background:var(--blue-soft); border-radius:999px; font-size:.8rem; font-weight:900; text-decoration:none; }
.home-link:hover,.home-link:focus-visible { background:#d6edf5; outline:none; }
.game-hero { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:42px; }
.eyebrow,.section-label { color:var(--blue); font-size:.74rem; font-weight:900; letter-spacing:.15em; }
h1 { margin:14px 0 15px; font-size:clamp(2.8rem,7vw,5.8rem); line-height:1.02; letter-spacing:-.06em; }
h1 em { color:var(--orange); font-style:normal; }
.game-hero p { margin:0; color:var(--muted); font-size:clamp(1rem,2vw,1.15rem); line-height:1.7; }
.hero-icon { flex:0 0 auto; display:grid; place-items:center; width:170px; height:170px; padding:0; border:1px solid rgba(35,125,163,.16); border-radius:50px; background:linear-gradient(145deg,#fff,#e4f5fb); box-shadow:0 20px 45px rgba(35,85,105,.13); font-size:5rem; transform:rotate(5deg); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }
.hero-icon:hover,.hero-icon:focus-visible{transform:rotate(5deg) scale(1.04);box-shadow:0 22px 52px rgba(35,85,105,.2);outline:3px solid #777}.hero-icon.unlocked{animation:secret-unlock .65s ease}@keyframes secret-unlock{50%{transform:rotate(365deg) scale(1.12)}}
.game-library { padding:30px; background:rgba(255,254,249,.94); border:1px solid var(--line); border-radius:30px; box-shadow:0 18px 45px rgba(73,54,25,.1); }
.library-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:1px solid var(--line); }
h2 { margin:6px 0 0; font-size:1.65rem; letter-spacing:-.03em; }
.game-count { padding:8px 12px; color:var(--muted); background:#f6f1e7; border-radius:999px; font-size:.78rem; font-weight:800; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; padding-top:24px; }
.game-card { display:grid; grid-template-columns:44% 56%; min-height:250px; color:var(--ink); border:1px solid #d8dfd5; border-radius:24px; background:#fff; text-decoration:none; overflow:hidden; transition:.2s ease; }
.game-card:hover,.game-card:focus-visible { transform:translateY(-4px); box-shadow:0 17px 32px rgba(35,53,43,.14); outline:none; }
.game-art { position:relative; overflow:hidden; background:radial-gradient(circle at 45% 35%,#31846a,#14513e 70%); }
.game-art::before { content:""; position:absolute; inset:16px; border:3px solid #d8a86b; border-radius:11px; box-shadow:inset 0 0 0 5px #784825; }
.ball { position:absolute; z-index:2; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#111; background:white; box-shadow:0 5px 10px #07322688; font:800 .8rem Arial; }
.ball-8 { left:45%; top:30%; color:white; background:#111; }.ball-solid { left:25%; top:54%; background:#e53732; }.ball-stripe { left:59%; top:58%; background:linear-gradient(#fff 24%,#7451b7 24% 76%,#fff 76%); }
.cue-stick { position:absolute; z-index:1; width:150px; height:7px; right:35%; bottom:25%; border-radius:5px; background:linear-gradient(90deg,#eee 0 8%,#c7904e 8%); transform:rotate(-31deg); transform-origin:right; }
.metal-art { display:grid; place-items:center; background:linear-gradient(145deg,#263139,#111619 72%); }
.metal-art::before { inset:0; border:0; border-radius:0; background:repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,255,255,.035) 28px 29px); box-shadow:none; }
.metal-soldier { position:relative; z-index:2; color:#f2bd45; font-size:6rem; line-height:1; filter:drop-shadow(0 12px 8px #0008); transform:rotate(180deg); }
.metal-blast { position:absolute; z-index:1; top:22%; right:14%; color:#f27635; font-size:4rem; text-shadow:0 0 28px #ff7a35; }
.metal-badge { color:#72500c; background:#fff0bd; }
.survival-art{background:radial-gradient(circle at 50% 38%,#526174 0,#242c3b 38%,#101521 78%)}.survival-art::before{inset:0;border:0;border-radius:0;background:linear-gradient(transparent 68%,#17271f 68%);box-shadow:none}.survival-moon{position:absolute;top:20px;right:20px;width:54px;height:54px;border-radius:50%;background:#ffe7a4;box-shadow:0 0 26px #ffe7a477}.survival-hero{position:relative;z-index:2;color:#e9f4ff;font-size:4.6rem;text-shadow:0 8px 12px #000;transform:rotate(-12deg)}.survival-enemy{position:absolute;z-index:1;color:#cf5965;text-shadow:0 0 9px #ff304f}.enemy-one{left:15%;top:30%}.enemy-two{right:13%;bottom:22%}.enemy-three{left:25%;bottom:14%;font-size:.7rem}.survival-badge{color:#e8f4ff;background:#33445c}
.game-card-copy { padding:24px; }.card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }.live-badge { padding:6px 8px; border-radius:8px; color:#176b4d; background:#e3f4eb; font-size:.66rem; font-weight:900; letter-spacing:.08em; }.players { color:var(--muted); font-size:.75rem; font-weight:800; }
.game-card h3 { margin:22px 0 9px; font-size:1.45rem; }.game-card p { margin:0; color:var(--muted); font-size:.87rem; line-height:1.6; }.play-link { display:block; margin-top:22px; color:var(--orange); font-size:.85rem; font-weight:900; }
footer { padding-top:36px; color:#7c877f; text-align:center; font-size:.8rem; }
@media (max-width:650px) {
  .game-page { padding-top:28px; }
  .home-link { margin-bottom:24px; }
  .game-hero { align-items:flex-start; margin-bottom:30px; }
  .hero-icon { width:82px; height:82px; border-radius:25px; font-size:2.45rem; }
  .game-library { padding:22px; border-radius:24px; }
  .empty-state { min-height:280px; padding:40px 0; }
}
@media (max-width:430px) {
  .hero-icon { display:none; }
  .library-head { align-items:flex-start; flex-direction:column; gap:12px; }
  .game-card { grid-template-columns:1fr; }.game-art { min-height:180px; }
}