/* 옛판 디자인 시스템 v3 — 쫀득팝을 기준으로 맞춘 밝은 파스텔 테마
   글꼴: Pretendard (국내 카드뉴스·앱에서 가장 널리 쓰이는 무료 고딕, 휴대폰 기본 글꼴과 닮아 읽기 편함)
   버튼: 둥근 알약 모양 + 아래 진한 그림자(누르면 쏙 들어감)
   배경: 게임마다 다른 파스텔 하늘 + 흰 구름 동그라미 */
@import url("fonts/pretendard/pretendard.css");
:root{
  --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --display:var(--font); --body:var(--font);
  --ink:#33264f; --ink-soft:#7a6c96;
  --text:var(--ink); --muted:var(--ink-soft); --soft:#5b4d77;
  --panel:rgba(255,255,255,.78); --panel-hi:#ffffff; --line:rgba(255,255,255,.95);
  --pop:#ff4d8d; --pop-deep:#d62f6e; --grape:#7a5cff; --grape-deep:#5636d9; --sun:#ffbe2e; --sun-deep:#d9930b; --mint:#25c486; --mint-deep:#179467;
  --red:var(--pop); --yellow:var(--sun); --green:var(--mint); --blue:#4a86e8;
  --shadow-soft:#d8cfe6;
  --sky-top:#ffd3e8; --sky-bot:#c9e4ff;
  color-scheme:light;
}
html[data-game="baduk"]{--sky-top:#d6f3e2;--sky-bot:#c3e2ff}
html[data-game="janggi"]{--sky-top:#ffe1c9;--sky-bot:#ffd3dc}
html[data-game="omok"]{--sky-top:#d9efff;--sky-bot:#e7defe}
html[data-game="mahjong"]{--sky-top:#d2f4e4;--sky-bot:#c8e6ff}
html[data-game="block"]{--sky-top:#fff0d6;--sky-bot:#ffd6e2}
html[data-game="galaxy"]{--sky-top:#e8e1ff;--sky-bot:#cbd7ff}
html[data-game="maze"]{--sky-top:#f1e3ff;--sky-bot:#ffe2ec}
html{background:var(--sky-bot)}
body{
  background:
    radial-gradient(circle at 12% 9%,rgba(255,255,255,.7) 0 38px,transparent 39px),
    radial-gradient(circle at 92% 24%,rgba(255,255,255,.5) 0 24px,transparent 25px),
    radial-gradient(circle at 74% 90%,rgba(255,255,255,.45) 0 52px,transparent 53px),
    linear-gradient(180deg,var(--sky-top),var(--sky-bot));
  background-attachment:fixed;background-color:var(--sky-bot);
  color:var(--ink);font-family:var(--font);letter-spacing:-.015em;word-break:keep-all;-webkit-font-smoothing:antialiased}

/* 상단 바 */
.bar{min-height:62px;gap:8px;padding-block:8px}
.bar h1{font-family:var(--font);font-weight:900;font-size:22px;letter-spacing:-.03em;color:var(--ink)}
.bar>a{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;color:var(--ink);font-size:0;
  box-shadow:0 4px 0 var(--shadow-soft)}
.bar>a:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shadow-soft)}
.bar>a svg,.yp-btn svg{width:22px;height:22px}

/* 버튼 (쫀득팝식 알약) */
.btn{font-family:var(--font);font-weight:800;font-size:16px;letter-spacing:-.02em;min-height:46px;padding:0 20px;border-radius:999px;border:0;
  color:var(--ink);background:#fff;box-shadow:0 5px 0 var(--shadow-soft);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .08s,box-shadow .08s,filter .15s;cursor:pointer}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--shadow-soft)}
.btn.main{color:#fff;background:var(--pop);box-shadow:0 5px 0 var(--pop-deep)}
.btn.main:active{box-shadow:0 2px 0 var(--pop-deep)}
.btn.grape{color:#fff;background:var(--grape);box-shadow:0 5px 0 var(--grape-deep)}
.btn.grape:active{box-shadow:0 2px 0 var(--grape-deep)}
.btn.plain{color:var(--ink);background:#fff;box-shadow:0 5px 0 var(--shadow-soft)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn:focus-visible,.chip:focus-visible,.bar>a:focus-visible{outline:3px solid var(--grape);outline-offset:3px}

/* 선택 칩 → 흰 바탕 세그먼트, 고른 것은 분홍 */
.chips{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.72);border:2px solid #fff}
.chip{font-family:var(--font);font-weight:700;font-size:13px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft)}
.chip[aria-pressed="true"]{background:var(--pop);color:#fff;box-shadow:0 3px 0 var(--pop-deep)}

/* 상태 글자 */
.status{font-family:var(--font);font-weight:600;color:var(--ink-soft)}
.status b{font-family:var(--font);font-weight:900;font-size:19px;color:var(--ink);letter-spacing:-.03em}

/* 결과창 (쫀득팝 결과 카드) */
.modal{background:rgba(59,37,89,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet{border-radius:28px;background:#fff;border:0;box-shadow:0 8px 0 var(--shadow-soft);color:var(--ink);padding:26px 22px 22px;animation:yppop .38s cubic-bezier(.2,1.6,.4,1)}
.sheet h2{font-family:var(--font);font-weight:900;font-size:30px;letter-spacing:-.03em;color:var(--pop-deep)}
.sheet p{font-family:var(--font);color:var(--ink-soft)}
.sheet .big{color:var(--ink)}
@keyframes yppop{from{transform:translateY(30px) scale(.9);opacity:0}}

/* 화면 전환 */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.16s ease both ypout}
::view-transition-new(root){animation:.22s ease both ypin}
@keyframes ypout{to{opacity:0;transform:scale(.985)}}
@keyframes ypin{from{opacity:0;transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){.btn,.sheet{transition:none;animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
.bar h1,.sheet h2,.sheet p,.status{word-break:keep-all}