:root{--ink:#171d28;--ink2:#252e3c;--cream:#f4ead7;--paper:#fffdf8;--yellow:#ffd95c;--orange:#df4c20;--green:#40be68;--blue:#3984ee;--line:#ddd3c2;--muted:#687080;font-family:Pretendard,"Noto Sans KR",sans-serif;color:var(--ink)}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-size:17px}
button,a{font:inherit}button{cursor:pointer}
.play-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px;min-height:76px;padding:10px max(24px,calc((100% - 1280px)/2));border-bottom:1px solid #ddd6ca;background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}
.play-brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:inherit;text-decoration:none}.play-brand img{border-radius:50%}.play-brand span{display:flex;flex-direction:column}.play-brand b{font-size:18px}.play-brand small{font-size:9px;letter-spacing:.14em}
.play-desktop-nav{display:flex;align-items:center;gap:3px}.play-desktop-nav a{padding:10px 11px;border-radius:999px;color:#4a505b;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}.play-desktop-nav a.active{background:var(--ink);color:#fff}
.play-desktop-nav a.playground-nav,.play-desktop-nav a.playground-nav.active,.mobile-menu a.playground-nav{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px!important;border-radius:999px!important;background:linear-gradient(135deg,#ffdd5f,#ffb43f)!important;color:#171d28!important;font-size:13px!important;font-weight:900!important;line-height:1.2;box-shadow:0 4px 12px rgba(211,111,20,.22)}
.playground-icon{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.back-analysis{padding:11px 15px;border:1px solid var(--ink);border-radius:10px;color:var(--ink);font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
.play-hero{display:flex;align-items:center;justify-content:space-between;min-height:340px;padding:66px max(28px,calc((100% - 1180px)/2));overflow:hidden;background:radial-gradient(circle at 80% 20%,#465874 0,#252f40 34%,#141a24 75%);color:#fff}
.play-hero>div:first-child{position:relative;z-index:2;max-width:720px}.play-hero>div>span{color:var(--yellow);font-size:13px;font-weight:900;letter-spacing:.18em}.play-hero h1{margin:18px 0 15px;font-size:55px;line-height:1.13;letter-spacing:-.05em}.play-hero h1 strong{padding:0 .12em;background:var(--yellow);color:var(--ink);font-weight:900}.play-hero p{max-width:650px;margin:0;color:#dce3ec;font-size:18px;line-height:1.7}
.hero-balls{position:relative;width:300px;height:210px;flex:0 0 300px}.hero-balls i{position:absolute;display:grid;place-items:center;width:112px;height:112px;border:5px solid rgba(255,255,255,.92);border-radius:50%;box-shadow:inset -10px -13px 20px rgba(0,0,0,.2),inset 9px 9px 16px rgba(255,255,255,.5),0 18px 28px rgba(0,0,0,.3);font-size:35px;font-style:normal;font-weight:950;text-shadow:0 2px #fff}.hero-balls i:nth-child(1){left:4px;top:70px;background:var(--yellow);transform:rotate(-10deg)}.hero-balls i:nth-child(2){left:94px;top:10px;background:var(--blue);color:#fff;text-shadow:0 2px #17233a}.hero-balls i:nth-child(3){right:0;top:82px;background:var(--green);transform:rotate(10deg)}
.game-lobby{max-width:1280px;margin:34px auto;padding:34px;border:1px solid #d8cebe;border-radius:24px;background:#fffdf8;box-shadow:0 18px 50px rgba(73,54,24,.08)}.lobby-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.lobby-heading span{color:#a93719;font-size:12px;font-weight:900;letter-spacing:.16em}.lobby-heading h2{margin:6px 0 4px;font-size:36px;letter-spacing:-.04em}.lobby-heading p{margin:0;color:#687080}.lobby-heading>b{display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:#edf8ef;color:#1f7939;font-size:13px}.lobby-heading>b i{width:9px;height:9px;border-radius:50%;background:#35b75b;box-shadow:0 0 0 4px rgba(53,183,91,.15)}
.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.game-tile{overflow:hidden;min-width:0;padding:0;border:1px solid #d9dfe8;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(26,36,52,.09);text-align:left}.game-tile button{font:inherit}.game-tile.memory-tile{cursor:pointer;transition:transform .2s,box-shadow .2s}.game-tile.memory-tile:hover{transform:translateY(-5px);box-shadow:0 18px 32px rgba(26,36,52,.17)}.game-tile:focus-visible{outline:5px solid #ffbf35;outline-offset:4px}.tile-art{position:relative;display:block;height:210px;overflow:hidden;background:linear-gradient(145deg,#253650,#101927)}.memory-tile .tile-art::before{content:"";position:absolute;inset:25px;border:2px solid rgba(255,255,255,.22);border-radius:50%;background:radial-gradient(circle,rgba(74,145,237,.28),transparent 68%)}.tile-ball{position:absolute;display:grid;place-items:center;width:86px;height:86px;border:5px solid #fff;border-radius:50%;box-shadow:inset -10px -12px 15px rgba(0,0,0,.24),inset 8px 8px 13px rgba(255,255,255,.43),0 10px 16px rgba(0,0,0,.28);font-size:27px;font-style:normal;font-weight:950}.tile-ball:nth-child(1){left:14%;top:72px;transform:rotate(-8deg)}.tile-ball:nth-child(2){left:39%;top:35px}.tile-ball:nth-child(3){right:13%;top:83px;transform:rotate(9deg)}.bubble-tile .tile-art{background:linear-gradient(150deg,#6852d7,#2b176c)}.bubble-cluster{position:absolute;left:50%;top:45%;width:64px;height:64px;border:5px solid #fff;border-radius:50%;background:#3984ee;box-shadow:-60px 4px 0 -5px #ffd95c,60px 4px 0 -5px #40be68,-30px -48px 0 -5px #c33b18,30px -48px 0 -5px #9da4ad}.bubble-shot{position:absolute;left:50%;bottom:14px;width:58px;height:58px;border:5px solid #fff;border-radius:50%;background:#ffd95c;transform:translateX(-50%)}.bubble-shot::after{content:"";position:absolute;left:50%;bottom:60px;width:3px;height:60px;background:repeating-linear-gradient(#fff 0 8px,transparent 8px 15px)}.next-tile .tile-art{display:grid;place-items:center;background:linear-gradient(145deg,#f0e6d4,#d9ccb4)}.next-tile .tile-art i{display:grid;place-items:center;width:92px;height:92px;border:3px dashed #8c7f6d;border-radius:24px;color:#786b59;font-size:52px;font-style:normal}.tile-copy{display:block;padding:22px}.tile-copy small{color:#a93719;font-size:11px;font-weight:900;letter-spacing:.12em}.tile-copy strong{display:block;margin-top:6px;font-size:25px}.tile-copy em{display:block;min-height:46px;margin-top:8px;color:#67707e;font-size:14px;font-style:normal;line-height:1.55}.tile-copy>b{display:flex;align-items:center;justify-content:space-between;margin-top:17px;padding-top:16px;border-top:1px solid #e7e3db;color:#a93719;font-size:15px}.tile-copy>b i{font-size:22px;font-style:normal}.tile-copy .coming{display:inline-flex;width:auto;padding:8px 12px;border:0;border-radius:999px;background:#eceff3;color:#69717d}
.game-shell{max-width:1280px;margin:34px auto;padding:32px;border:1px solid #d8cebe;border-radius:24px;background:var(--paper);box-shadow:0 18px 50px rgba(73,54,24,.08)}
.game-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.game-topline span{color:#a93719;font-size:12px;font-weight:900;letter-spacing:.15em}.game-topline h2{margin:5px 0 0;font-size:34px;letter-spacing:-.04em}.game-topline>button{min-height:48px;padding:10px 17px;border:1px solid #b6bdc7;border-radius:12px;background:#fff;font-size:15px;font-weight:800}.game-topline>button[aria-pressed=false]{background:#e9ebef;color:#555}
.game-top-actions{display:flex;gap:8px}.game-top-actions button{min-height:48px;padding:10px 15px;border:1px solid #b6bdc7;border-radius:12px;background:#fff;font-size:14px;font-weight:800}.game-top-actions button[aria-pressed=false]{background:#e9ebef;color:#555}.game-top-actions .back-lobby{border-color:#e0a78f;color:#9f3519}
.game-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;gap:22px;align-items:start}
.game-guide,.score-card{padding:22px;border-radius:18px;background:#f2eee6}.game-guide h3,.score-card h3{margin:0 0 18px;font-size:20px}.game-guide ol{display:grid;gap:15px;margin:0;padding:0;list-style:none}.game-guide li{display:flex;align-items:center;gap:10px;line-height:1.45}.game-guide li b{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--ink);color:var(--yellow)}.game-guide details{margin-top:22px;border-top:1px solid #d3cabc;padding-top:16px}.game-guide summary{font-weight:800;cursor:pointer}.game-guide details p{color:#5f6670;font-size:14px;line-height:1.65}
.game-board{min-height:600px;padding:26px;border-radius:20px;background:linear-gradient(145deg,#232c3a,#121822);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.difficulty{display:flex;align-items:stretch;gap:8px}.difficulty>span{display:flex;align-items:center;margin-right:auto;font-weight:800}.difficulty button{min-height:54px;padding:9px 15px;border:1px solid #596273;border-radius:12px;background:#303a49;color:#fff;font-weight:800}.difficulty button small{display:block;margin-top:3px;color:#c7cfda}.difficulty button.selected{border-color:var(--yellow);background:var(--yellow);color:var(--ink);box-shadow:0 0 0 3px rgba(255,217,92,.18)}.difficulty button.selected small{color:#5b4a0e}
.stage{display:flex;min-height:370px;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.stage p{position:relative;z-index:8;min-height:28px;margin:0 0 12px;color:#fff;font-size:20px;font-weight:850;text-shadow:0 2px 5px #000}
.play-ball-stage{position:relative;width:min(100%,390px);height:245px;isolation:isolate}
.play-ball-stage::before{content:"";position:absolute;left:50%;top:45%;width:250px;height:180px;border:1px solid rgba(142,193,255,.28);border-radius:50%;background:radial-gradient(circle,rgba(72,145,239,.2),transparent 68%);transform:translate(-50%,-50%)}
.display-ball{position:absolute;z-index:5;left:50%;top:42%;display:grid;place-items:center;width:154px;height:154px;border:6px solid #fff;border-radius:50%;background-image:radial-gradient(circle at 31% 25%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.4) 7%,transparent 27%),linear-gradient(135deg,rgba(255,255,255,.28),transparent 48%,rgba(0,0,0,.22));box-shadow:inset -16px -18px 25px rgba(0,0,0,.27),inset 12px 11px 20px rgba(255,255,255,.45),0 18px 26px rgba(0,0,0,.4);transform:translate(-50%,-50%);transition:opacity .22s,filter .22s}
.display-ball::before{content:"";position:absolute;inset:20%;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.14)}
.display-ball .ball-number{position:relative;z-index:4;color:#0a101a;font-size:62px;font-weight:950;line-height:1;letter-spacing:-.06em;text-shadow:0 2px #fff}
.display-ball.showing{animation:ball-pop-in .5s cubic-bezier(.2,.9,.25,1.25),ball-float 1.8s ease-in-out .5s infinite}.display-ball.leaving{animation:ball-fade-out .28s ease-in forwards}
.ball-shadow{position:absolute;z-index:1;left:50%;top:75%;width:130px;height:24px;border-radius:50%;background:rgba(0,0,0,.48);transform:translateX(-50%);filter:blur(9px);animation:shadow-breathe 1.8s ease-in-out infinite}
.ball-yellow{background-color:var(--yellow)!important}.ball-blue{background-color:var(--blue)!important;color:#fff!important}.ball-red{background-color:#c33b18!important;color:#fff!important}.ball-gray{background-color:#9da4ad!important}.ball-green{background-color:var(--green)!important}
@keyframes ball-pop-in{0%{opacity:0;filter:blur(3px);transform:translate(-50%,-30%) scale(.55)}72%{opacity:1;filter:blur(0);transform:translate(-50%,-54%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes ball-fade-out{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;filter:blur(2px);transform:translate(-50%,-68%) scale(.82)}}
@keyframes ball-float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-56%)}}
@keyframes shadow-breathe{0%,100%{opacity:.68;transform:translateX(-50%) scale(1)}50%{opacity:.38;transform:translateX(-50%) scale(.78)}}
.answer-track{display:flex;min-height:50px;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}.answer-track i{display:grid;place-items:center;width:44px;height:44px;border:2px solid #fff;border-radius:50%;background:var(--yellow);color:#111;font-style:normal;font-weight:900}
.start-button{display:block;width:min(100%,440px);min-height:68px;margin:0 auto;border:0;border-radius:16px;background:linear-gradient(#ef5d2b,#c93413);box-shadow:0 7px 0 #8e260e;color:#fff;font-size:23px;font-weight:900}.start-button:active{transform:translateY(4px);box-shadow:0 3px 0 #8e260e}.start-button:disabled{cursor:wait;opacity:.6}
.number-options{display:grid;grid-template-columns:repeat(6,minmax(58px,1fr));gap:11px;margin-top:22px}.number-options button{aspect-ratio:1;min-width:58px;border:4px solid #fff;border-radius:50%;box-shadow:inset -7px -8px 12px rgba(0,0,0,.2),inset 6px 6px 10px rgba(255,255,255,.45),0 5px 10px rgba(0,0,0,.3);color:#111;font-size:22px;font-weight:950}.number-options button.ball-blue,.number-options button.ball-red,.number-options button.ball-green{color:#fff!important;text-shadow:0 1px 2px #111}.number-options button:focus-visible{outline:5px solid var(--yellow);outline-offset:3px}.number-options button.used{opacity:.36;transform:scale(.88)}
.result-panel{margin-top:24px;padding:24px;border:2px solid var(--yellow);border-radius:17px;background:#fff;color:var(--ink);text-align:center}.result-panel>span{color:#a73819;font-size:13px;font-weight:900}.result-panel h3{margin:7px 0;font-size:29px}.result-panel p{margin:0;color:#5d6570;line-height:1.6}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.result-actions button,.result-actions a{display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 20px;border:1px solid var(--ink);border-radius:12px;font-weight:900;text-decoration:none}.result-actions button{background:var(--ink);color:#fff}.result-actions a{color:var(--ink)}
.score-card{display:grid;gap:10px}.score-card>div{padding:15px;border:1px solid #d6cebf;border-radius:12px;background:#fff}.score-card span{display:block;color:#6c727c;font-size:13px}.score-card b{display:block;margin-top:4px;color:#a73718;font-size:23px}.score-card p{margin:5px 0 0;color:#757b84;font-size:12px;line-height:1.5}
.play-next{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1280px;margin:34px auto;padding:42px 50px;border-radius:22px;background:var(--ink);color:#fff}.play-next span{color:var(--yellow);font-size:14px;font-weight:800}.play-next h2{margin:9px 0 0;font-size:33px}.play-next>a{display:flex;align-items:center;gap:20px;min-height:64px;padding:15px 22px;border-radius:14px;background:var(--yellow);color:var(--ink);font-weight:900;text-decoration:none}.play-next>a b{font-size:24px}
.responsible-play{max-width:1280px;margin:0 auto 50px;padding:23px 28px;border:1px solid #d9cfbd;border-radius:16px;background:#fff9ee}.responsible-play b{font-size:17px}.responsible-play p{margin:6px 0 0;color:#626974;font-size:14px;line-height:1.65}
footer{display:flex;justify-content:center;gap:14px;padding:28px;background:#fff;color:#6c727c;font-size:13px}footer a{color:inherit;text-decoration:none}
@media(max-width:1100px){.play-desktop-nav{display:none}.game-layout{grid-template-columns:200px minmax(0,1fr)}.score-card{grid-column:1}.game-board{grid-column:2;grid-row:1/3}.hero-balls{transform:scale(.82)}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.next-tile{grid-column:1/-1}}
@media(max-width:760px){body{font-size:18px}.play-header{min-height:64px;padding:8px 12px;gap:8px}.play-brand b{font-size:15px}.play-brand small{font-size:7px}.back-analysis{display:none}.play-hero{min-height:auto;padding:38px 20px 42px}.play-hero h1{font-size:37px;line-height:1.2}.play-hero p{font-size:17px}.hero-balls{display:none}.game-lobby{margin:14px 8px;padding:22px 14px}.lobby-heading{align-items:flex-start;flex-direction:column}.lobby-heading h2{font-size:29px}.game-grid{grid-template-columns:1fr}.next-tile{grid-column:auto}.tile-art{height:185px}.tile-copy strong{font-size:24px}.game-shell{margin:14px 8px;padding:17px 12px;border-radius:18px}.game-topline{align-items:flex-start;flex-direction:column}.game-topline h2{font-size:28px}.game-top-actions{width:100%}.game-top-actions button{flex:1}.game-layout{display:flex;flex-direction:column}.game-guide,.score-card,.game-board{width:100%}.game-guide{padding:18px}.game-board{order:1;min-height:610px;padding:17px 12px}.game-guide{order:2}.score-card{order:3;grid-template-columns:1fr 1fr}.score-card h3,.score-card p{grid-column:1/-1}.difficulty{display:grid;grid-template-columns:repeat(3,1fr)}.difficulty>span{grid-column:1/-1}.difficulty button{min-height:60px;padding:8px 4px;font-size:16px}.stage{min-height:345px;padding-inline:0}.stage p{font-size:18px}.play-ball-stage{height:235px}.display-ball{width:142px;height:142px}.display-ball .ball-number{font-size:58px}.start-button{min-height:70px;font-size:22px}.number-options{grid-template-columns:repeat(4,1fr);gap:12px}.number-options button{min-width:60px;font-size:23px}.result-actions{flex-direction:column}.play-next{align-items:flex-start;flex-direction:column;margin:14px 8px;padding:28px 22px}.play-next h2{font-size:27px}.play-next>a{width:100%}.responsible-play{margin:14px 8px 35px}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}