*{margin:0;padding:0;box-sizing:border-box}:root{--native-width: 284;--native-height: 168;--pixel-scale: 1;--color-gold: #ffd700;--color-gold-glow: rgba(255, 200, 50, .9);--color-bubble-bg: rgba(245, 240, 225, .95);--color-bubble-border: #8b7355;--color-text: #2c1810;--color-topic: #8b4513;--color-action: #4a6741;--color-letterbox: #0a0a0a;--font-pixel: "Press Start 2P", monospace;--font-main: Georgia, "Times New Roman", serif}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-letterbox)}body{font-family:var(--font-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;height:100%}.scene-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-letterbox)}.scene{aspect-ratio:284 / 168;position:relative;overflow:hidden;background:#1a1510;image-rendering:pixelated;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;transform:translateZ(0)}.layer-bg,.layer-candle,.character-composite,.layer-base,.layer-breathing,.layer-eyes,.layer-mouth,.layer-thinking{position:absolute;inset:0;background-repeat:no-repeat;background-position:0 0;image-rendering:pixelated;image-rendering:crisp-edges}.layer-bg,.layer-base{background-size:100% 100%}.layer-bg{z-index:0;background-color:#2d2418}.layer-candle{z-index:1}.character-composite{z-index:2}.layer-base{z-index:0}.layer-breathing{z-index:5;display:none}.layer-eyes{z-index:2}.layer-mouth{z-index:3;display:none}.layer-thinking{z-index:4;display:none}.bubble{position:absolute;top:18%;right:3%;width:38%;min-height:50px;z-index:100;transition:opacity .3s ease,transform .3s ease}.bubble.hidden{opacity:0;transform:translateY(-10px) scale(.95);pointer-events:none}.bubble-grid{display:grid;grid-template:"tl t tr" auto "l  c r" 1fr "bl b br" auto / auto 1fr auto;min-height:40px}.bubble-tl,.bubble-tr,.bubble-bl,.bubble-br{width:8px;height:8px;background-size:contain;background-repeat:no-repeat;image-rendering:pixelated}.bubble-tl{grid-area:tl}.bubble-tr{grid-area:tr}.bubble-bl{grid-area:bl}.bubble-br{grid-area:br}.bubble-t,.bubble-b{height:8px;background-size:auto 100%;background-repeat:repeat-x;image-rendering:pixelated}.bubble-t{grid-area:t}.bubble-b{grid-area:b}.bubble-l,.bubble-r{width:8px;background-size:100% auto;background-repeat:repeat-y;image-rendering:pixelated}.bubble-l{grid-area:l}.bubble-r{grid-area:r}.bubble-content{grid-area:c;padding:4px 8px;background:var(--color-bubble-bg);color:var(--color-text);font-size:clamp(10px,1.2vw,14px);line-height:1.5;overflow-wrap:break-word}.bubble-tail{position:absolute;width:16px;height:16px;background-size:contain;background-repeat:no-repeat;image-rendering:pixelated}.bubble.speech .bubble-tail{bottom:30%;left:-12px}.bubble.thought .bubble-tail{bottom:10%;left:-20px}.bubble.speech .bubble-tl{background-image:url(./assets/ui/speech/tl.png)}.bubble.speech .bubble-t{background-image:url(./assets/ui/speech/t.png)}.bubble.speech .bubble-tr{background-image:url(./assets/ui/speech/tr.png)}.bubble.speech .bubble-l{background-image:url(./assets/ui/speech/l.png)}.bubble.speech .bubble-r{background-image:url(./assets/ui/speech/r.png)}.bubble.speech .bubble-bl{background-image:url(./assets/ui/speech/bl.png)}.bubble.speech .bubble-b{background-image:url(./assets/ui/speech/b.png)}.bubble.speech .bubble-br{background-image:url(./assets/ui/speech/br.png)}.bubble.speech .bubble-tail{background-image:url(./assets/ui/speech/tail.png)}.bubble.thought .bubble-tl{background-image:url(./assets/ui/thought/tl.png)}.bubble.thought .bubble-t{background-image:url(./assets/ui/thought/t.png)}.bubble.thought .bubble-tr{background-image:url(./assets/ui/thought/tr.png)}.bubble.thought .bubble-l{background-image:url(./assets/ui/thought/l.png)}.bubble.thought .bubble-r{background-image:url(./assets/ui/thought/r.png)}.bubble.thought .bubble-bl{background-image:url(./assets/ui/thought/bl.png)}.bubble.thought .bubble-b{background-image:url(./assets/ui/thought/b.png)}.bubble.thought .bubble-br{background-image:url(./assets/ui/thought/br.png)}.bubble.thought .bubble-tail{background-image:url(./assets/ui/thought/tail.png)}.bubble.fallback .bubble-grid{background:var(--color-bubble-bg);border:3px solid var(--color-bubble-border);border-radius:8px}.bubble.fallback .bubble-tl,.bubble.fallback .bubble-t,.bubble.fallback .bubble-tr,.bubble.fallback .bubble-l,.bubble.fallback .bubble-r,.bubble.fallback .bubble-bl,.bubble.fallback .bubble-b,.bubble.fallback .bubble-br,.bubble.fallback .bubble-tail{display:none}.bubble.fallback:before{content:"";position:absolute;bottom:30%;left:-15px;width:0;height:0;border:8px solid transparent;border-right-color:var(--color-bubble-border)}.bubble.fallback:after{content:"";position:absolute;bottom:30%;left:-9px;width:0;height:0;border:6px solid transparent;border-right-color:var(--color-bubble-bg)}.bubble-content .topic{color:var(--color-topic);font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;transition:color .2s ease}.bubble-content .topic:hover{color:sienna;text-decoration-style:solid}.bubble-content .action{color:var(--color-action);font-style:italic;cursor:pointer;transition:color .2s ease}.bubble-content .action:hover{color:#5a8751;text-decoration:underline}.skip-hint{position:absolute;bottom:4px;right:8px;font-size:8px;color:#999;opacity:0;transition:opacity .3s ease}.bubble.typing .skip-hint{opacity:1}.card-hand{position:absolute;bottom:-15%;left:50%;transform:translate(-50%);display:flex;align-items:flex-end;z-index:50}.card{position:relative;width:calc(40px * var(--pixel-scale, 1));height:calc(60px * var(--pixel-scale, 1));margin-left:calc(-32px * var(--pixel-scale, 1));background:transparent;border:none;border-radius:calc(2px * var(--pixel-scale, 1));cursor:pointer;transition:transform .2s ease-out,box-shadow .2s ease-out;box-shadow:calc(1px * var(--pixel-scale, 1)) calc(1px * var(--pixel-scale, 1)) calc(4px * var(--pixel-scale, 1)) #0006;overflow:hidden;image-rendering:pixelated}.card:first-child{margin-left:0}.card-face{position:absolute;inset:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges}.card.placeholder .card-face{background:linear-gradient(135deg,#f5f0e0,#e8e0d0,#d8d0c0);display:flex;align-items:center;justify-content:center}.card.placeholder:before{content:"?";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:calc(16px * var(--pixel-scale, 1));color:#999;font-weight:700}.card:hover{transform:translateY(calc(-16px * var(--pixel-scale, 1)));box-shadow:calc(2px * var(--pixel-scale, 1)) calc(4px * var(--pixel-scale, 1)) calc(8px * var(--pixel-scale, 1)) #00000080}.card.selected{transform:translateY(calc(-24px * var(--pixel-scale, 1)));box-shadow:0 0 calc(10px * var(--pixel-scale, 1)) var(--color-gold-glow),0 0 calc(20px * var(--pixel-scale, 1)) #ffc83266,calc(2px * var(--pixel-scale, 1)) calc(4px * var(--pixel-scale, 1)) calc(8px * var(--pixel-scale, 1)) #00000080;animation:selected-glow 2s ease-in-out infinite}@keyframes selected-glow{0%,to{box-shadow:0 0 calc(10px * var(--pixel-scale, 1)) var(--color-gold-glow),0 0 calc(20px * var(--pixel-scale, 1)) #ffc83266,calc(2px * var(--pixel-scale, 1)) calc(4px * var(--pixel-scale, 1)) calc(8px * var(--pixel-scale, 1)) #00000080}50%{box-shadow:0 0 calc(15px * var(--pixel-scale, 1)) var(--color-gold-glow),0 0 calc(30px * var(--pixel-scale, 1)) #ffc83299,calc(2px * var(--pixel-scale, 1)) calc(4px * var(--pixel-scale, 1)) calc(8px * var(--pixel-scale, 1)) #00000080}}.loading-overlay{position:absolute;inset:0;background:#0a0a0af2;display:flex;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s ease}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-text{color:#c4a35a;font-size:clamp(12px,2vw,20px);font-family:var(--font-main);animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,to{opacity:.5}50%{opacity:1}}@media(hover:none){.card:hover{transform:none;z-index:auto;box-shadow:calc(1px * var(--pixel-scale, 1)) calc(1px * var(--pixel-scale, 1)) calc(4px * var(--pixel-scale, 1)) #0006}.card:active{transform:translateY(calc(-4px * var(--pixel-scale, 1))) scale(1.05)}.skip-hint{display:none}}@media(max-aspect-ratio:1/1)and (max-width:768px){.scene-container:before{content:"Rotate your device for the best experience";position:absolute;bottom:10px;left:50%;transform:translate(-50%);color:#666;font-size:12px;text-align:center;z-index:2000}}.card:focus{outline:none}.bubble-content .topic:focus,.bubble-content .action:focus{outline:2px solid var(--color-topic);outline-offset:2px}