
:root{
  --bg:#07111f;--panel:#0d1c30;--panel2:#132843;--text:#eef7ff;--muted:#9fb3c8;
  --accent:#72e7ff;--accent2:#c78cff;--good:#72f0a5;--danger:#ff758f;--line:rgba(255,255,255,.1);
  color-scheme:dark;font-family:Inter,Pretendard,"Noto Sans KR",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;max-width:100%;overflow-x:hidden;background:radial-gradient(circle at 20% 0%,#123157 0,#07111f 42%,#040911 100%);color:var(--text)}
button,input{font:inherit}.shell{width:min(1180px,calc(100% - 28px));margin:auto}.site-head{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:24px 0 16px}.brand{font-weight:900;letter-spacing:.04em;font-size:clamp(22px,4vw,36px)}.brand span{color:var(--accent)}
.sub{color:var(--muted);line-height:1.65}.toolbar{display:flex;gap:10px;flex-wrap:wrap}.search,.select{border:1px solid var(--line);background:rgba(8,19,34,.82);color:var(--text);border-radius:14px;padding:12px 14px;outline:none}.search{min-width:240px}.search:focus,.select:focus{border-color:var(--accent)}
.hero{padding:28px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg,rgba(114,231,255,.12),rgba(199,140,255,.08));box-shadow:0 24px 80px rgba(0,0,0,.28)}.hero h1{margin:0 0 8px;font-size:clamp(30px,6vw,62px);line-height:1.05}.hero p{max-width:760px;margin:0;color:var(--muted);font-size:clamp(15px,2vw,18px);line-height:1.7}.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.badge{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:13px;color:#d8e8f7}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:22px 0 42px}.card{position:relative;display:flex;flex-direction:column;min-height:300px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--char-dark),rgba(8,20,35,.96));box-shadow:0 12px 28px rgba(0,0,0,.2);transition:.2s transform,.2s border-color;overflow:hidden}.card:hover{transform:translateY(-4px);border-color:var(--char)}.card-character{height:92px;display:grid;place-items:center;margin:-6px -4px 8px;border-radius:16px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 72%);font-size:58px}.card-character span{filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));transition:.2s transform}.card:hover .card-character span{transform:translateY(-4px) scale(1.08) rotate(-3deg)}.card .num{font-size:12px;color:var(--char);font-weight:800}.card h2{font-size:19px;margin:10px 0 8px}.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.pill{font-size:11px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.06)}.play-link{margin-top:auto;text-align:center;text-decoration:none;color:#07111f;background:linear-gradient(135deg,var(--char),#e5fbff);font-weight:900;padding:11px;border-radius:12px}
.footer{padding:8px 0 40px;color:var(--muted);font-size:13px;text-align:center}
.footer a{color:var(--accent)}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.favorite{position:absolute;z-index:2;right:13px;top:12px;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;background:rgba(3,9,16,.72);color:#fff;font-size:21px;cursor:pointer}.favorite.active{color:#ffe66d;border-color:#ffe66d}.secondary.active{border-color:#ffe66d;color:#ffe66d}
.ad-slot{display:grid;place-items:center;min-height:96px;margin:18px auto;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(4,11,20,.45)}.ad-slot iframe{width:100%;height:100%;min-height:90px;border:0}.ad-wide{width:min(970px,100%)}.ad-feed{grid-column:1/-1;width:min(728px,100%);min-height:100px}.ad-placeholder{color:#60768e;font-size:10px;letter-spacing:.16em}.consent-banner{position:fixed;z-index:100;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px;border:1px solid var(--line);border-radius:20px;background:rgba(8,20,35,.97);box-shadow:0 20px 70px #000}.consent-banner p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.consent-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0}.consent-actions button,.consent-actions a{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#132843;color:#fff;text-decoration:none;cursor:pointer}.legal-page{width:min(760px,calc(100% - 32px));margin:40px auto;padding:28px;border:1px solid var(--line);border-radius:24px;background:#0d1c30}.legal-page h1{font-size:clamp(30px,6vw,52px)}.legal-page h2{margin-top:30px}.legal-page p{color:var(--muted);line-height:1.8}.inline-button{display:inline-block;text-decoration:none}
.player-page{min-height:100vh;padding:16px}.game-wrap{width:min(980px,100%);margin:auto}.game-top{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-bottom:12px}.back{color:var(--text);text-decoration:none;border:1px solid var(--line);padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.05)}.game-title{margin:0;font-size:clamp(24px,5vw,40px)}.game-desc{color:var(--muted);margin:6px 0 0}.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.stat{min-width:94px;padding:10px 12px;text-align:center;border:1px solid var(--line);border-radius:14px;background:rgba(8,21,37,.9)}.stat b{display:block;font-size:18px}.stat span{font-size:11px;color:var(--muted)}
.game-card{position:relative;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#06101d;box-shadow:0 24px 70px rgba(0,0,0,.35)}canvas{display:block;width:100%;height:auto;aspect-ratio:19/11;touch-action:none;background:linear-gradient(#09192a,#06101d)}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,9,16,.72);backdrop-filter:blur(7px);z-index:10}.overlay.hidden{display:none}.modal{max-width:540px;text-align:center;padding:28px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,#10233c,#0a1729)}.modal h2{font-size:30px;margin:0 0 10px}.modal p{color:var(--muted);line-height:1.65}.primary,.secondary{border:0;border-radius:14px;padding:13px 18px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,var(--accent),#b6f5ff);color:#04101c}.secondary{background:rgba(255,255,255,.08);color:var(--text);border:1px solid var(--line)}
.game-chip{display:inline-block;margin:16px 0 5px;color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.12em}.game-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}.game-toolbar .secondary{padding:9px 12px}.game-toolbar span{margin-left:auto;color:var(--muted);font-size:13px}.goal-track{position:absolute;z-index:3;left:0;right:0;top:0;height:5px;background:rgba(255,255,255,.08)}.goal-track i{display:block;width:0;height:100%;background:var(--accent);transition:.2s width}.goal-track i.complete{background:var(--good);box-shadow:0 0 14px var(--good)}.modal-character{font-size:64px;filter:drop-shadow(0 10px 14px #000);margin-bottom:8px}.game-footer{display:flex;justify-content:center;gap:18px;padding:4px 0 22px}.game-footer a{color:var(--muted);font-size:12px}
.panel{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px;border-top:1px solid var(--line);background:#0a1728}.ctrl{min-width:56px;min-height:48px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.07);color:var(--text);font-weight:900;cursor:pointer;touch-action:none}.ctrl:active{transform:translateY(1px);background:rgba(114,231,255,.16)}.question{font-size:clamp(24px,5vw,46px);font-weight:900}.answer{min-width:100px}.text-input{min-width:min(420px,80vw);padding:13px 15px;border-radius:14px;border:1px solid var(--line);background:#071323;color:var(--text);outline:none}.text-input:focus{border-color:var(--accent)}.hint{padding:12px 2px;color:var(--muted);font-size:13px;text-align:center}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media (max-width:700px){.site-head{align-items:stretch;flex-direction:column}.toolbar{width:100%;flex-direction:column}.search,.select{width:100%;min-width:0}.game-top{grid-template-columns:1fr}.stats{justify-content:flex-start}.player-page{padding:10px}.panel{padding:10px}.ctrl{min-width:52px}.hero{padding:22px}.consent-banner{align-items:stretch;flex-direction:column}.consent-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.consent-actions>*{min-width:0;text-align:center}.consent-actions a{grid-column:1/-1}.game-toolbar span{width:100%;margin-left:0}.ad-slot{min-height:72px}}
