@charset "UTF-8";
@font-face{font-family:"Gatchi Title";src:url("fonts/jua-regular.woff2") format("woff2");font-display:swap}
/* The same stationery palette as rock-paper-scissors, with a mascot per game. */
:root{--bg:#fffbf5;--bg2:#fffdf9;--bg3:#fff0e9;--card:#fffdf9;--line:#eee2d7;--ink:#30231d;--sub:#84776d;--dim:#9a887c;--muted:#84776d;--gold:#f66b59;--gold-d:#ba4939;--coral:#f66b59;--tang:#d57547;--yellow:#f6cd78;--red:#e25c60;--blue:#8972bb;--green:#3e927e;--void:#fffbf5;--panel:#fffdf9;--panel-2:#f3ebe0;--amber:#c47e38;--paper:#30231d}
body.game-page{display:block;padding:0;background:var(--bg);color:var(--ink);font-family:'Pretendard Variable',Pretendard,'Malgun Gothic',system-ui,sans-serif;line-height:1.6}
.game-page .wrap{width:100%;max-width:560px;min-height:100vh;margin:auto;padding:0 22px 116px;background:var(--bg);display:block}
.game-page a{text-decoration:none}.game-page button,.game-page a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.game-page button:focus-visible,.game-page a:focus-visible,.game-page summary:focus-visible{outline:3px solid #bd6451;outline-offset:4px}
.game-header{height:78px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.game-header>span{font-size:15px;font-weight:800;text-align:center;word-break:keep-all}.game-back{display:grid;place-items:center;min-width:34px;min-height:44px;font-size:38px;line-height:1;color:var(--ink)}
.game-brand{font-family:'Gatchi Title',sans-serif;font-size:21px;white-space:nowrap;color:var(--ink)}.game-brand b{font-size:17px;color:var(--coral);margin-left:3px}
.game-page h1,.game-page h2,.game-page .qtext,.game-page .verdict{font-family:'Gatchi Title','Malgun Gothic',sans-serif;font-weight:400;letter-spacing:-.5px}
.game-page h1{font-size:clamp(29px,7.7vw,40px);line-height:1.3}.game-page h1 b{font-weight:400;color:var(--coral)}
.game-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 38%;align-items:center;min-height:244px;gap:0;padding:23px 12px 23px 20px;margin:4px 0 18px;border:1px solid #a8846d16;border-radius:26px;background:radial-gradient(ellipse at 82% 28%,#fffdf5,var(--game-color));overflow:hidden;text-align:left}
.game-hero:after{content:'✦';position:absolute;right:19px;top:15px;font-size:25px;color:#c99046;transform:rotate(14deg)}
.game-hero-text{position:relative;z-index:1;min-width:0}.game-hero h1{font-size:clamp(27px,7.4vw,38px);margin:5px 0 12px;text-align:left;overflow-wrap:anywhere;word-break:keep-all}
.game-page .tag,.game-page .series{display:inline-block;font-size:12px;font-weight:750;letter-spacing:0;background:#fffaf1;color:#967046;border:1px solid #dcc19b70;border-radius:999px;padding:4px 10px;margin-bottom:9px}
.game-hero-copy{font-size:13px;line-height:1.7;color:#8c715d;word-break:keep-all;margin:0}
.game-mascot{width:100%;aspect-ratio:1;background-image:url('art/catalog-mascots.png');background-size:300% 600%;background-position:var(--mascot-x) var(--mascot-y);background-repeat:no-repeat;mix-blend-mode:multiply;pointer-events:none;clip-path:inset(2% 1% 5%)}
.game-mascot.classic{aspect-ratio:2/3;background-image:url('art/game-characters.png');background-size:300% 100%}
.game-hero>.game-mascot{width:110%;margin-left:-5%;align-self:end}
.game-options{border:1px solid var(--line);border-radius:17px;background:#fffdf9;margin:16px 0}.game-options summary{cursor:pointer;padding:14px;font-size:14px;font-weight:700;color:#796a5f;list-style:none}.game-options summary::-webkit-details-marker{display:none}.game-options summary:after{content:'+';float:right}.game-options[open] summary:after{content:'−'}.game-options-content{padding:0 15px 17px}.game-options-content .q{margin-top:4px}.game-options-content .bet{margin-top:16px}
.game-steps{display:flex;list-style:none;justify-content:space-between;gap:8px;padding:0 2px;margin:0 0 18px}.game-steps li{display:flex;align-items:center;gap:6px;font-size:12px;color:#927d6e;white-space:nowrap}.game-steps li:not(:last-child):after{content:'›';color:#c4b3a2;margin-left:6px}.game-steps span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#f2e9df;color:#97745a;font-weight:800}
.game-page .lead{font-size:14px;color:var(--sub);line-height:1.8;margin-bottom:20px;word-break:keep-all}
.game-page .q{font-size:14px;color:#75665c;margin:18px 0 9px}.game-page input[type=text],.game-page textarea,.game-page select{border:1px solid var(--line);border-radius:12px;background:#fff9f3;color:var(--ink);font:inherit;font-size:16px;max-width:100%}.game-page input[type=text]{padding:12px 14px;min-width:0}.game-page input::placeholder,.game-page textarea::placeholder{color:#b09b8b}.game-page input:focus,.game-page textarea:focus,.game-page select:focus{outline:2px solid #edaa98;outline-offset:1px}
.game-page .btn{border-radius:18px;font-size:16px;min-height:50px;padding:14px 16px;font-weight:750}.game-page .btn-main,.game-page .btn-blue,.game-page .bigbtn.start{background:linear-gradient(110deg,#ff765e,#ff6459);color:white;box-shadow:0 5px 13px #ea77511a}
.game-page .btn-sub{background:#fffdf9;color:#9a6e5d;border:1px solid #ead8ca}.game-page .btn-ghost,.game-page .btn.ghost{background:transparent;color:#9c8273;font-size:14px;font-weight:500;box-shadow:none}.game-page .bigbtn{border-radius:21px;font-family:'Gatchi Title',sans-serif;font-weight:400;font-size:26px}.game-page .btn:disabled,.game-page .bigbtn:disabled{opacity:.45;cursor:default;box-shadow:none}
.game-page .card,.game-page .tally,.game-page .type-card,.game-page .pastebox{background:#fffdf9;border:1px solid var(--line);border-radius:20px;padding:18px}
.game-page .clock:not(.wait):not(.go):not(.foul){background:#fffdf9;border:2px solid #ecdfce;box-shadow:0 5px 20px #87644408}.game-page .clock{border-radius:25px}
.game-page .hud .c{border-width:1px;border-color:var(--line);border-radius:16px;box-shadow:none}.game-page .arena,.game-page .board{border-radius:23px;border-width:2px}
.game-page .opt{border-width:1px;border-color:#edddce;background:#fff4eb;border-radius:19px;color:var(--ink);box-shadow:0 3px 0 #e9d9c750;font-size:16px}.game-page .opt:nth-child(even){background:#f2edf8;border-color:#e2d8ef}.game-page .opt:hover{border-color:var(--coral)}.game-page .opt.on,.game-page .opt.selected,.game-page .opt[aria-pressed=true]{border-color:var(--coral);background:#ffe5da;box-shadow:0 0 0 2px #f66b5920}
.game-page .chip,.game-page .pill{border-width:1px;border-radius:12px;font-size:12px}.game-page .chip[aria-pressed=true]{background:#ffede7;color:#b55240;border-color:#eda28f}
.game-page .side{background:#fff0e9;border:2px solid #f1ddd1;border-radius:23px}.game-page .side:nth-child(3){background:#f1ebf8;border-color:#e1d8ed}.game-page .side.win{border-color:var(--coral);box-shadow:0 0 0 3px #f66b5915}.game-page .side.win .t,.game-page .verdict.win{color:#dc6650}.game-page .verdict.lose{color:#9874ad}.game-page .verdict.tie{color:#688da0}.game-page .title-badge{background:#fff1d3;border:1px solid #f1d6aa;color:#a17a43;font-size:13px;padding:8px 15px}
.game-result-art{display:flex;justify-content:center;margin:0 0 10px}.game-result-art .game-mascot{width:105px}.game-result-art .classic{width:80px}
.game-page #afterPlay,.game-page #s-share:not(:has(.circles)){background:#fff3dc;border:1px solid #f3dfb4;border-radius:22px;padding:17px;margin-top:18px}.game-page #afterPlay .card{margin-top:0}.game-page .linkbox{background:#fffdf7;border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere;color:var(--sub)}
.game-page .next a{border:1px solid var(--line);background:#fffdf9;border-radius:17px}.game-page .notyet{background:#fff3dc;border:1px solid #efdbb7;color:#886945;border-radius:17px}.game-page .homelink{color:#a47c68;padding:8px;margin-top:18px}.game-page .toast{bottom:95px;z-index:60;background:#47392c;font-size:13px;font-weight:500}
.game-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);display:flex;justify-content:space-around;z-index:20;background:#fffdf9f5;backdrop-filter:blur(12px);border:1px solid #f1e7dc;border-radius:27px 27px 0 0;padding:11px 15px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -3px 18px #816d4a08}
.game-nav a{display:grid;justify-items:center;gap:4px;font-size:12px;color:#94867b;min-width:65px}.game-nav [aria-current]{color:var(--coral);font-weight:750}.game-nav svg{width:25px;height:25px}.game-footer{text-align:center;color:#a48a79;font-size:12px;margin-top:32px}.game-privacy{color:#a48a79;text-decoration:underline;display:inline-block;margin-top:6px}
/* The dilemma and conversation pages retain their own question layouts. */
[data-game=crash] .intro{padding:0;text-align:left}[data-game=crash] .intro h1{font-family:'Gatchi Title',sans-serif;font-weight:400}[data-game=crash] .intro h1 span{color:#a57541}[data-game=crash] .intro p{color:var(--sub)}[data-game=crash] .scene{background:#fff7eb;border:1px solid var(--line);border-radius:20px;padding:20px}[data-game=crash] .intro .meta{justify-content:flex-start;margin:16px 0}
[data-game=marriage] .screen{min-height:0;padding:10px 0 24px}[data-game=marriage] .spacer{flex:none;min-height:18px}[data-game=marriage] #s-intro>.spacer,[data-game=marriage] #introCircles,[data-game=marriage] #s-intro>div[style]{display:none}[data-game=marriage] .btn:not(.ghost){background:linear-gradient(110deg,#ff765e,#ff6459);color:white}[data-game=marriage] .qtext{margin-top:26px}[data-game=marriage] .circles{margin:15px auto}[data-game=marriage] .screen.active{display:flex}
@media(min-width:700px){body.game-page{background:#f6f1e9}.game-page .wrap{padding-left:30px;padding-right:30px;box-shadow:0 0 60px #78542d05}.game-hero{min-height:262px}}
@media(max-width:360px){.game-page .wrap{padding-left:16px;padding-right:16px}.game-header>span{font-size:13px}.game-brand{font-size:18px}.game-hero{padding:20px 9px 20px 16px;grid-template-columns:minmax(0,1fr) 34%;min-height:236px}.game-hero h1{font-size:28px}.game-steps{gap:3px}.game-steps li{font-size:11px;gap:4px}.game-steps li:not(:last-child):after{margin-left:2px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.game-page *,.game-page *:before,.game-page *:after{animation:none!important;transition:none!important}}
/* 모바일 조작 안정 — 조작 영역 위에서는 화면이 밀리지 않고, 두 번 톡 쳐도 확대되지 않는다.
   (assets/game-ui.js 의 PLAY_SURFACE 와 같은 목록. 손가락이 조작 영역 밖에서 시작하면 스크롤은 그대로 된다.) */
.game-page{touch-action:manipulation;overscroll-behavior:none}
.game-page.playing canvas,.game-page.playing #board,.game-page.playing #grid,.game-page.playing #arena,
.game-page.playing #pads,.game-page.playing #pad,.game-page.playing #sky,.game-page.playing #dpad,
.game-page.playing #clock,.game-page.playing .board,.game-page.playing .grid,.game-page.playing .arena,
.game-page.playing .pad,.game-page.playing .sky,.game-page.playing .dpad,.game-page.playing .clock,
.game-page.playing .cardbtn,.game-page.playing .cell,.game-page.playing .bigbtn,
.game-page.playing [data-play-surface]{touch-action:none}
.game-page input,.game-page textarea,.game-page select{touch-action:auto}
/* 게임 중에는 하단 메뉴를 내린다 — 판을 가리지 않고 잘못 눌러 판을 날리지 않게 */
.game-nav{transition:transform .22s ease,opacity .22s ease}
.game-page.playing .game-nav{transform:translate(-50%,150%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.game-nav{transition:none}}

