@font-face{font-family:Caveat;src:url('assets/Caveat.woff2') format('woff2');font-display:swap}
@font-face{font-family:NanumPen;src:url('assets/NanumPen.woff2') format('woff2');font-display:swap}
:root{--ink:#3f3155;--ink-soft:#665979;--paper:#ead5a9;--paper-2:#f1e1bc;--pink:#ee9daf;--coral:#a24f48;--blue:#4f7280;--sky:#a9d7ed;--blot:#49344e;--shadow:0 24px 60px rgba(62,42,86,.24);font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;color:var(--ink);background:#7990d0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;width:100%;min-height:100%;overflow:hidden}
body{overscroll-behavior:none;touch-action:manipulation}
button,input{font:inherit}
button{color:inherit;font-family:NanumPen,system-ui,sans-serif;font-size:1.08rem}
.screen{position:fixed;inset:0;min-height:100dvh}
.hidden{display:none!important}
.cover{background:#86a9dc url('assets/start-16x9.webp') center/cover no-repeat;color:white;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 28px);isolation:isolate}
.cover-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(47,45,92,.12),transparent 48%,rgba(46,33,67,.48) 100%);pointer-events:none}
.cover>*:not(.cover-shade){position:relative;z-index:1}
.cover-top,.game-header{display:flex;align-items:center;justify-content:space-between}.cover-top span{font-size:.72rem;letter-spacing:.22em;font-weight:700}
.icon-button{width:46px;height:46px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(255,255,255,.12);color:inherit;font-size:1.25rem;backdrop-filter:blur(10px)}
.cover-copy{display:none}
.eyebrow{font-size:.72rem;letter-spacing:.2em;font-weight:800;margin:0 0 8px}
.cover-copy h1{font:700 clamp(4.2rem,21vw,7rem)/.84 Caveat,cursive;margin:0;letter-spacing:-.05em}
.cover-line{font:600 1.45rem Caveat,cursive;margin:12px 0 24px}
.cover-actions{text-align:center;margin-top:auto}.cover-actions p{font-size:.82rem;opacity:.86;margin:12px 0 0}
.primary-button,.soft-button{border:0;border-radius:18px;min-height:52px;padding:0 22px;font-weight:800;cursor:pointer}
.primary-button{background:var(--ink);color:white;box-shadow:0 12px 28px rgba(50,32,66,.26)}
.cover .primary-button{width:min(100%,320px);background:rgba(255,249,236,.94);color:var(--ink);font-size:1.05rem}
.game{width:100vw;background:linear-gradient(rgba(81,75,137,.46),rgba(218,137,155,.32)),url('assets/rabbit-hole.webp') center/cover no-repeat;color:white;padding:calc(env(safe-area-inset-top) + 16px) max(18px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 18px) max(18px,env(safe-area-inset-left));display:grid;grid-template-rows:auto auto 1fr auto;gap:10px}
.game:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(37,33,76,.36),transparent 30%,rgba(47,35,72,.2));pointer-events:none}
.game>*{position:relative}.game-header .icon-button{border-color:rgba(255,255,255,.3)}
.floor-title{text-align:center}.floor-title span{display:block;font-size:.64rem;letter-spacing:.24em;opacity:.75}.floor-title strong{font:700 1.65rem Caveat,cursive}.floor-title b{font:inherit}
.stats{display:flex;justify-content:center;gap:34px;text-align:center}.stats span{display:block;font-size:.58rem;letter-spacing:.18em;opacity:.7}.stats strong{font-size:.88rem}
.puzzle-area{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:0}.puzzle-area>p{font:400 1.22rem NanumPen,cursive;margin:0 0 14px;text-shadow:0 2px 10px rgba(33,24,60,.5)}
.board-shell{position:relative;width:min(78vw,380px);aspect-ratio:1;display:grid;place-items:center;perspective:1100px;filter:drop-shadow(0 22px 24px rgba(42,29,64,.24))}
.board{position:relative;display:grid;width:100%;max-height:100%;cursor:grab;touch-action:none;user-select:none;background-color:#f4edd5;background-image:radial-gradient(ellipse at 8% 92%,rgba(119,86,50,.09),transparent 25%),radial-gradient(ellipse at 88% 9%,rgba(146,112,65,.07),transparent 27%),repeating-linear-gradient(8deg,rgba(113,84,52,.025) 0 1px,transparent 1px 5px),repeating-linear-gradient(96deg,rgba(255,255,255,.12) 0 1px,transparent 1px 7px),radial-gradient(circle at 18% 22%,rgba(77,57,37,.12) 0 .7px,transparent 1.4px),radial-gradient(circle at 72% 64%,rgba(95,69,40,.09) 0 .7px,transparent 1.5px),linear-gradient(112deg,rgba(255,255,247,.62),transparent 42%,rgba(124,91,49,.055) 73%,rgba(255,252,235,.34));background-size:100% 100%,100% 100%,100% 6px,8px 100%,17px 21px,29px 27px,100% 100%;border:1px solid rgba(105,76,44,.42);border-radius:2px;overflow:hidden;transform-style:preserve-3d;box-shadow:inset 0 0 24px rgba(91,63,36,.11),inset 0 0 0 1px rgba(255,255,247,.55);transition:width .45s,height .45s,transform .45s}
.board:active{cursor:grabbing}.board:after{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(90,62,37,.07),transparent 5%,transparent 94%,rgba(73,50,30,.08)),linear-gradient(0deg,rgba(77,53,34,.08),transparent 7%,transparent 93%,rgba(112,78,42,.06));box-shadow:inset 0 0 11px rgba(64,43,27,.1);mix-blend-mode:multiply}
.cell{aspect-ratio:1;display:grid;place-items:center;border-right:1px solid rgba(90,59,39,.12);border-bottom:1px solid rgba(90,59,39,.12);position:relative;background:linear-gradient(145deg,rgba(255,255,247,.17),rgba(121,78,43,.018))}
.symbol{width:46%;aspect-ratio:1;display:grid;place-items:center;color:var(--coral);font-size:clamp(1.3rem,7vw,2.2rem);font-weight:800;filter:drop-shadow(0 2px 1px rgba(81,47,67,.08));transition:transform .3s,opacity .3s}.symbol.dot{background:var(--blue);border-radius:50%;font-size:0}.symbol.ring{border:clamp(4px,1.2vw,7px) solid var(--coral);border-radius:50%;font-size:0}.symbol.diamond:before{content:"◆"}.symbol.blot{width:54%;background:var(--blot);border-radius:46% 54% 40% 60%;box-shadow:7px -3px 0 -4px var(--blot);transform:rotate(-8deg);font-size:0}
.creases{position:absolute;inset:0;pointer-events:none}.crease{position:absolute;pointer-events:none;border:0;background:transparent;padding:0}.crease:before{content:"";position:absolute;pointer-events:none;opacity:0;border:2px solid rgba(255,226,151,.96);background:rgba(255,246,210,.18);box-shadow:0 0 0 2px rgba(74,48,45,.18),0 0 18px rgba(255,221,120,.82),inset 0 0 12px rgba(255,255,230,.38);border-radius:10px;transition:opacity .2s}.crease:after{content:"";position:absolute;opacity:.68;transition:opacity .2s,filter .2s}.crease.live:after{opacity:1;filter:drop-shadow(0 0 5px rgba(255,236,170,.9))}.vertical-creases .crease.live:after{border-left:2px solid rgba(255,232,150,.95)}.horizontal-creases .crease.live:after{border-top:2px solid rgba(255,232,150,.95)}.crease.hint:before{opacity:1;animation:hintBoxPulse 1s ease-in-out infinite}.crease.hint:after{opacity:1;filter:drop-shadow(0 0 6px #fff4bc);border-color:#fff2b8}
.vertical-creases .crease{top:0;bottom:0;width:10px;transform:translateX(-50%)}.vertical-creases .crease:before{left:-9px;top:7%;bottom:7%;width:24px}.vertical-creases .crease:after{top:2%;bottom:2%;left:4px;border-left:1.5px dashed rgba(91,60,40,.46)}
.horizontal-creases .crease{left:0;right:0;height:10px;transform:translateY(-50%)}.horizontal-creases .crease:before{left:7%;right:7%;top:-9px;height:24px}.horizontal-creases .crease:after{left:2%;right:2%;top:4px;border-top:1.5px dashed rgba(91,60,40,.46)}
.fold-flap{position:absolute;z-index:8;overflow:hidden;backface-visibility:visible;pointer-events:none;will-change:transform;filter:drop-shadow(0 10px 10px rgba(61,39,30,.16))}
.fold-flap .board{position:absolute;max-height:none;margin:0;transition:none;box-shadow:none}
.fold-flap:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(99,75,43,.09));pointer-events:none}
.fold-flap.axis-y:after{transform:rotateX(180deg)}
.fold-flap.fold-x-positive{transform:rotateY(180deg)}.fold-flap.fold-x-negative{transform:rotateY(-180deg)}
.fold-flap.fold-y-positive{transform:rotateX(180deg)}.fold-flap.fold-y-negative{transform:rotateX(-180deg)}
.board.folding{filter:brightness(.96)}.board.blotting{animation:blotShake .4s}.board.clearing .symbol{transform:scale(0);opacity:0}
@keyframes blotShake{25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.game-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.game-actions .soft-button{padding:0 6px;min-height:48px;background:rgba(255,249,236,.88);color:var(--ink);font-size:.76rem;box-shadow:0 10px 22px rgba(45,30,65,.15)}.game-actions span{font-size:1.05rem;margin-right:3px}.soft-button:disabled{opacity:.45}
.modal{position:fixed;z-index:20;inset:0;background:rgba(43,32,67,.5);display:grid;place-items:end center;padding:20px 18px calc(env(safe-area-inset-bottom) + 18px);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(100%,440px);background:var(--paper);border-radius:28px;padding:32px 26px 24px;box-shadow:var(--shadow);text-align:center;color:var(--ink)}.modal-card h2{font:700 2rem/1 Caveat,cursive;margin:8px 0}.modal-card>p:not(.eyebrow){color:var(--ink-soft);font-size:.9rem}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.modal-actions .soft-button{background:var(--paper-2)}
.stars{color:#e6a958;font-size:1.5rem;letter-spacing:.18em;margin-bottom:12px}.blot-mark{font-size:3rem;color:var(--blot)}
.close-button{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:1.8rem}.settings-card{text-align:left}.settings-card h2{margin-bottom:18px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-top:1px solid #eadfd5;cursor:pointer}.toggle-row span{display:flex;flex-direction:column}.toggle-row strong{font-size:.95rem}.toggle-row small{color:var(--ink-soft);margin-top:4px}.toggle-row input{position:absolute;opacity:0}.toggle-row i{width:48px;height:28px;border-radius:999px;background:#d9ced3;position:relative;transition:.2s}.toggle-row i:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:white;left:3px;top:3px;transition:.2s;box-shadow:0 2px 7px #886d7a44}.toggle-row input:checked+i{background:var(--blue)}.toggle-row input:checked+i:after{transform:translateX(20px)}
.text-button{display:block;margin:18px auto 0;border:0;background:transparent;color:#9c6674;text-decoration:underline}.toast{position:fixed;z-index:30;left:50%;bottom:calc(env(safe-area-inset-bottom) + 92px);transform:translateX(-50%);background:rgba(54,42,74,.9);color:white;padding:12px 18px;border-radius:999px;font-size:.85rem;box-shadow:0 10px 30px #32234255;white-space:nowrap}
.stage-transition{position:fixed;z-index:50;inset:0;display:grid;place-content:center;text-align:center;color:#f8f1db;background:rgba(20,48,46,.96);opacity:0;transition:opacity .22s ease}.stage-transition.show{opacity:1}.stage-transition span{font:600 .64rem/1 system-ui,sans-serif;letter-spacing:.34em;opacity:.65;margin-bottom:12px}.stage-transition strong{font:700 1.45rem/1 Caveat,cursive;letter-spacing:.12em}.stage-transition b{font:inherit}
.modal-card h2{font-family:NanumPen,cursive;font-weight:400}.game-actions .soft-button{font-size:1.16rem}.cover .primary-button{font-size:1.45rem}
.cover>.cover-shade{width:100%}
@media(min-width:700px){.game{padding-left:max(28px,calc((100vw - 560px)/2));padding-right:max(28px,calc((100vw - 560px)/2))}.cover{align-items:center}.cover>*{width:min(100%,560px)}.cover-top{width:min(100%,900px)}.cover-copy{margin-top:auto}.board-shell{width:min(58vh,420px)}.game-actions,.game-header,.stats{width:min(100%,560px);justify-self:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.intro{z-index:10;background:radial-gradient(ellipse at top,#847b9b,#302a40);color:#fff7e7;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px;padding:calc(env(safe-area-inset-top) + 16px) max(20px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 16px) max(20px,env(safe-area-inset-left));height:100dvh;min-height:0;overflow:auto}
.intro-header,.intro-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(100%,620px);margin:auto}
.intro-header>span{font-size:.75rem;letter-spacing:.12em}.intro .soft-button{background:#fff7e71a;color:#fff7e7;border:1px solid #fff7e744;min-height:44px;padding:0 16px}
.intro-media{min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden}
.intro video{width:100%;height:100%;object-fit:contain;border-radius:12px}
.intro-caption{text-align:center;width:min(100%,540px);margin:auto;min-height:110px}.intro-caption h2{font:400 2rem NanumPen,cursive;margin:0 0 8px}.intro-caption p{font-size:.95rem;line-height:1.7;margin:0;word-break:keep-all}
.intro-actions .primary-button{margin-left:auto;background:#fff1d5;color:#49374f;min-height:48px}.intro-demo{text-align:center;font:400 1.8rem NanumPen,cursive}.demo-paper{display:grid;grid-template-columns:repeat(2,90px);background:#fff0cf;box-shadow:0 16px 40px #0003;transform:rotate(-6deg);color:#a24f48}.demo-paper span{padding:25px;border:1px dashed #b8a88c}.demo-paper.single{grid-template-columns:90px;margin:auto;color:#b5a88c}.demo-arrow{display:block;font-size:5rem;color:#ffe9a9}button:focus-visible{outline:3px solid #f6c769;outline-offset:4px}button:disabled{opacity:.4;cursor:default}.cover-actions .text-button{color:white;margin-top:12px;text-decoration:underline}
@media(max-height:520px) and (orientation:landscape){.intro{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto}.intro-header{grid-column:1/-1}.intro-media{grid-row:2/4}.intro-caption{min-height:0}.intro-actions{grid-column:2}.intro-caption h2{font-size:1.5rem}.intro-caption p{font-size:.85rem}}

.episode-cutscene{position:fixed;z-index:60;inset:0;background:#29223a;color:#fff7e7;display:grid;grid-template-rows:auto 1fr auto;align-items:stretch;padding:calc(env(safe-area-inset-top) + 16px) max(20px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 20px) max(20px,env(safe-area-inset-left));overflow:hidden;isolation:isolate}.episode-cutscene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.episode-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(25,20,38,.5),transparent 32%,rgba(25,20,38,.84) 100%);pointer-events:none}.episode-top{display:flex;justify-content:space-between;align-items:center;width:min(100%,620px);margin:auto}.episode-top>span{font-size:.75rem;letter-spacing:.14em}.episode-cutscene .soft-button{background:rgba(30,24,42,.45);color:#fff7e7;border:1px solid #fff7e744;min-height:44px;padding:0 16px;backdrop-filter:blur(8px)}.episode-copy{align-self:end;text-align:center;width:min(100%,560px);margin:0 auto 16px;text-shadow:0 2px 8px #0009}.episode-copy h2{font:400 2.1rem NanumPen,cursive;margin:4px 0 8px}.episode-copy p:last-child{font-size:1rem;line-height:1.65;margin:0;word-break:keep-all}.episode-cutscene>.primary-button{justify-self:center;background:#fff1d5;color:#49374f;min-height:50px;min-width:150px}

/* The film fills the viewport; story and controls remain above it. */
.intro.intro-film{isolation:isolate;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}
.intro-film .intro-media{position:absolute;inset:0;z-index:-2;display:block}
.intro-film video{object-fit:cover;object-position:center;border-radius:0}
.intro-film::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,32,.42),transparent 28%,transparent 48%,rgba(20,16,32,.8))}
.intro-film .intro-header{grid-column:1;grid-row:1}.intro-film .intro-caption{grid-column:1;grid-row:3;min-height:0;padding:12px 0;text-shadow:0 2px 8px #0009}.intro-film .intro-actions{grid-column:1;grid-row:4}
.intro-film .soft-button{background:rgba(30,24,42,.4);backdrop-filter:blur(8px)}
@keyframes hintBoxPulse{0%,100%{transform:scale(.96);box-shadow:0 0 0 2px rgba(74,48,45,.18),0 0 10px rgba(255,221,120,.55),inset 0 0 12px rgba(255,255,230,.28)}50%{transform:scale(1.06);box-shadow:0 0 0 3px rgba(74,48,45,.24),0 0 24px rgba(255,221,120,1),inset 0 0 16px rgba(255,255,230,.5)}}

/* 힌트 광고 제안 — 모달이 아니라 조용한 알약. 자동으로 뜨지 않고 사용자가 힌트를 누를 때만 나타난다 */
.hint-offer{position:fixed;left:0;right:0;bottom:19%;z-index:14;display:flex;gap:10px;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.hint-offer.on{opacity:1;pointer-events:auto}
.hint-offer button{font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.02em;
  padding:12px 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--paper-2);color:var(--ink);box-shadow:0 6px 18px rgba(62,42,86,.28)}
.hint-offer button.key{background:var(--coral);color:#fff}
.hint-offer button:active{transform:translateY(1px)}
.score-line{font-size:.9rem;color:var(--ink);margin:10px 0 2px;font-weight:600}
.score-total{font-size:.82rem;color:var(--ink-soft);margin:0}