:root { --ink:#3e3650; --purple:#765bd6; --pink:#ff8dab; --cream:#fffaf2; --line:#ded6ec; }
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; color:var(--ink); background:#fff; font-family:"Noto Sans KR",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
#wall { position:fixed; inset:0; z-index:0; width:100%; height:100%; touch-action:none; cursor:url("data:image/svg+xml;utf8,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 C 4 10, 10 16, 16 16 C 14 10, 10 4, 0 0 Z' fill='%23ff8dab'/%3E%3Cpath d='M2 2 C 5 8, 8 11, 10 11' stroke='%23ffccd8' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M14 14 L18 18 L13 23 L9 19 Z' fill='%23abb1bc'/%3E%3Cpath d='M15 15 L19 19' stroke='%238d939e' stroke-width='1'/%3E%3Cpath d='M17 17 L31 31 C33 33, 36 33, 37 31 C38 30, 38 27, 36 25 L22 11 Z' fill='%23d7a15c'/%3E%3Ccircle cx='35' cy='35' r='2' fill='%23bc843f'/%3E%3C/svg%3E") 0 0, crosshair; }
.top-bar,.game-ui { position:relative; z-index:1; pointer-events:none; }
.top-bar { display:flex; justify-content:space-between; align-items:center; padding:23px clamp(18px,4vw,58px); }
.logo { color:var(--ink); font:700 clamp(16px,2vw,21px) "Fredoka",sans-serif; letter-spacing:.045em; text-decoration:none; pointer-events:auto; }.logo span { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:9px; background:var(--purple); color:white; font-size:14px; transform:rotate(8deg); }
.icon-button { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:9px 13px; background:rgba(255,255,255,.87); color:var(--ink); font-size:12px; pointer-events:auto; box-shadow:0 4px 14px rgba(55,43,87,.07); }.icon-button b { font-weight:700; }
.game-ui { display:grid; grid-template-columns:minmax(280px,400px) 230px; justify-content:space-between; align-items:end; min-height:calc(100vh - 84px); padding:0 clamp(18px,4vw,58px) 43px; gap:20px; }
.game-card,.rank-card { pointer-events:auto; border:1px solid rgba(123,93,197,.18); background:rgba(255,253,248,.91); box-shadow:0 13px 32px rgba(69,47,113,.12); backdrop-filter:blur(7px); }
.game-card { padding:29px; border-radius:27px; }.tag { margin:0; color:var(--purple); font:600 10px "Fredoka",sans-serif; letter-spacing:.13em; }.game-card h1 { margin:13px 0 10px; font:700 clamp(32px,4.5vw,49px)/1.08 "Fredoka",sans-serif; letter-spacing:-.04em; }.game-card em { color:var(--pink); font-style:normal; }.guide { margin:0; color:#756e82; font-size:12px; line-height:1.7; word-break:keep-all; }
.nickname-label { display:grid; gap:6px; margin-top:21px; color:#625976; font-size:11px; font-weight:700; }.nickname-label input { width:100%; border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:#fff; color:var(--ink); outline:none; font-size:13px; }.nickname-label input:focus { border-color:var(--purple); box-shadow:0 0 0 3px #eee9ff; }
.primary-button { width:100%; margin-top:10px; border:0; border-radius:12px; padding:13px 17px; background:var(--purple); color:#fff; font-size:13px; font-weight:700; box-shadow:0 6px 0 #5943af; transition:transform .15s,box-shadow .15s; }.primary-button:hover { transform:translateY(-2px); box-shadow:0 8px 0 #5943af; }.primary-button:active { transform:translateY(3px); box-shadow:0 3px 0 #5943af; }.primary-button span { float:right; font-size:17px; line-height:14px; }
.game-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:21px; }.game-stats div { padding:10px 12px; border-radius:12px; background:#f3edff; }.game-stats span { display:block; color:#827792; font:500 9px "Fredoka",sans-serif; letter-spacing:.1em; }.game-stats strong { display:block; margin-top:3px; font:600 20px "Fredoka",sans-serif; }
.playing .game-card { width:218px; padding:10px; border-radius:17px; }.playing .game-card > .tag,.playing .game-card > h1,.playing .guide,.playing .nickname-label { display:none; }.playing .game-stats { margin:0; gap:6px; }.playing .game-stats div { padding:7px 9px; }.playing .game-stats strong { margin-top:1px; font-size:16px; }
.rank-card { width:230px; padding:20px; border-radius:21px; }.rank-heading { display:flex; align-items:center; gap:7px; }.rank-heading h2 { margin:0; font:600 13px "Fredoka",sans-serif; letter-spacing:.07em; }.rank-heading span { font-size:17px; } #rank-list { min-height:170px; margin:14px 0 7px; padding:0; list-style:none; counter-reset:rank; } #rank-list li { display:grid; grid-template-columns:22px 1fr auto; gap:5px; align-items:center; padding:5px 0; border-bottom:1px dashed #e7e0ef; color:#766d83; font-size:11px; } #rank-list li::before { counter-increment:rank; content:counter(rank); color:var(--purple); font:600 12px "Fredoka",sans-serif; }.record-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.record-time { color:var(--ink); font:600 12px "Fredoka",sans-serif; }.empty-record { display:block !important; padding:31px 0 !important; border:0 !important; color:#a79fab !important; text-align:center; line-height:1.65; }.empty-record::before { display:none; }.rank-note { margin:0; color:#a098aa; font-size:9px; line-height:1.5; }
.modal { position:fixed; z-index:5; inset:0; display:grid; place-items:center; padding:20px; background:rgba(63,49,86,.35); backdrop-filter:blur(5px); }.modal[hidden] { display:none; }.modal-card { width:min(370px,100%); padding:35px 30px 31px; border-radius:28px; background:var(--cream); text-align:center; box-shadow:0 19px 54px rgba(39,27,67,.28); }.celebrate { display:inline-grid; place-items:center; width:69px; height:69px; border-radius:23px; background:#ffe0aa; font-size:37px; transform:rotate(-7deg); }.modal-card .tag { margin-top:17px; }.modal-card h2 { margin:7px 0 8px; font:700 34px "Fredoka",sans-serif; }.modal-card p:not(.tag) { margin:0; color:#756e82; font-size:13px; }.modal-card p b { color:var(--purple); }.modal-card .primary-button { margin-top:23px; }
@media (max-width:680px) { .top-bar { padding:15px 17px; }.icon-button b { display:none; }.icon-button { padding:9px 11px; font-size:18px; }.game-ui { display:block; min-height:0; padding:0 17px; }.game-card { position:fixed; right:17px; bottom:18px; left:17px; padding:21px; border-radius:23px; }.game-card h1 { margin:8px 0; font-size:33px; }.guide { font-size:11px; }.nickname-label { margin-top:14px; }.rank-card { display:none; }.game-stats { margin-top:14px; }.game-stats div { padding:7px 10px; }.game-stats strong { font-size:17px; }.playing .game-card { right:auto; left:17px; bottom:15px; width:200px; padding:8px; }.playing .game-stats div { padding:6px 8px; }.modal-card { padding:31px 23px 27px; } }