:root{--pixel: "Press Start 2P", monospace;--gold: #FFD700;--dark: #1a1a2e;--darker: #0d0d1a;--pink: #FF6B9D;--green: #4CAF50;--red: #FF1744;--blue: #4FC3F7}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--darker);font-family:var(--pixel)}.game-root{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--darker);transition:opacity .5s ease}.fade-in{opacity:1}.fade-out{opacity:0}.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:#000000bf;border-bottom:3px solid var(--gold);z-index:20}.level-badge{font-family:var(--pixel);font-size:9px;color:var(--gold);text-shadow:0 0 10px rgba(255,215,0,.7);letter-spacing:1px}.hud-stats{display:flex;gap:20px;font-family:var(--pixel);font-size:9px;color:#fff}.canvas-wrap{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.game-canvas{image-rendering:pixelated;image-rendering:crisp-edges;border:4px solid var(--gold);box-shadow:0 0 40px #ffd70040,0 0 80px #ffd7001a;display:block;max-width:100%;max-height:calc(100vh - 80px)}.controls-hint{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-family:var(--pixel);font-size:7px;color:#fff6;pointer-events:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000bf;z-index:50;animation:fadeIn .4s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-box{background:var(--dark);border:4px solid var(--gold);box-shadow:8px 8px #ffd7004d,0 0 40px #ffd70033;padding:40px 50px;text-align:center;max-width:480px;width:90%}.overlay-box h2{font-family:var(--pixel);font-size:18px;color:var(--gold);margin-bottom:20px;text-shadow:0 0 20px rgba(255,215,0,.6)}.overlay-box p{font-family:var(--pixel);font-size:9px;color:#ccc;margin-bottom:14px;line-height:1.9}.px-btn{font-family:var(--pixel);font-size:10px;padding:14px 28px;background:var(--gold);color:#1a1a2e;border:none;cursor:pointer;box-shadow:4px 4px #8a7000;transition:transform .1s,box-shadow .1s;margin-top:10px;letter-spacing:1px}.px-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px #8a7000}.px-btn:active{transform:translate(2px,2px);box-shadow:2px 2px #8a7000}.px-btn.secondary{background:var(--pink);box-shadow:4px 4px #8a0040;color:#fff}.px-btn.secondary:hover{box-shadow:6px 6px #8a0040}.meter-row{display:flex;align-items:center;gap:10px;margin:6px 0}.meter-label{font-family:var(--pixel);font-size:7px;color:#aaa;min-width:80px;text-align:right}.meter-track{flex:1;height:16px;background:#333;border:2px solid #555;position:relative;overflow:hidden}.meter-fill{height:100%;transition:width .4s ease}.meter-fill.charm{background:linear-gradient(90deg,#ff6b9d,#ff1744)}.meter-fill.awk{background:linear-gradient(90deg,#555,#9e9e9e)}.dialog-box{background:#fff;border:4px solid #1a1a2e;box-shadow:6px 6px #1a1a2e;padding:18px 22px;font-family:var(--pixel);font-size:10px;color:#1a1a2e;line-height:2;min-height:70px;position:relative}.dialog-speaker{font-size:8px;font-weight:700;color:#e53935;margin-bottom:4px}.topics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.topic-btn{font-family:var(--pixel);font-size:7px;padding:14px 10px;background:#1a1a2e;color:gold;border:2px solid #FFD700;cursor:pointer;line-height:1.7;text-align:center;transition:all .15s}.topic-btn:hover{background:gold;color:#1a1a2e;transform:translateY(-2px)}.title-screen{width:100vw;height:100vh;background:linear-gradient(180deg,#0d0d1a,#1a1a2e 60%,#2d1f0e);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}.stars-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.title-chars{display:flex;align-items:flex-end;justify-content:center;gap:60px;margin-bottom:30px}.title-char-img{height:260px;image-rendering:pixelated;filter:drop-shadow(0 0 20px rgba(255,215,0,.35));animation:floatChar 3s ease-in-out infinite}.title-char-img.char-right{animation-delay:.5s}@keyframes floatChar{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.title-center{text-align:center;z-index:10;padding:0 20px}.title-chapter{font-family:var(--pixel);font-size:9px;color:var(--gold);letter-spacing:4px;margin-bottom:16px;text-shadow:0 0 20px rgba(255,215,0,.8)}.title-main{font-family:var(--pixel);font-size:24px;color:#fff;line-height:1.5;text-shadow:4px 4px 0 #8a0000,0 0 40px rgba(255,100,100,.6);margin-bottom:8px}.title-sub{font-family:var(--pixel);font-size:11px;color:var(--pink);letter-spacing:2px;margin-bottom:40px;text-shadow:0 0 15px rgba(255,107,157,.7)}.title-start{font-family:var(--pixel);font-size:12px;color:var(--gold);animation:blink 1.2s step-start infinite;cursor:pointer;padding:18px 36px;border:3px solid var(--gold);background:#ffd70014;transition:background .2s;letter-spacing:2px}.title-start:hover{background:#ffd70033}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.title-levels{position:absolute;bottom:20px;display:flex;gap:28px;font-family:var(--pixel);font-size:7px;color:#ffffff59}.level-screen{width:100vw;height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0d0d1a}.chat-scene{width:900px;max-width:98vw;height:90vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#2b1810,#3e2210 40%,#1a0f08);border:4px solid var(--gold);box-shadow:0 0 60px #ffd70026;overflow:hidden;position:relative}.cafe-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 100%,rgba(255,140,0,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(255,140,0,.15) 0%,transparent 50%);pointer-events:none}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#0009;border-bottom:3px solid var(--gold);flex-shrink:0}.chat-meters{flex:1;padding:0 20px}.chat-stage{flex:1;display:flex;align-items:flex-end;justify-content:space-between;padding:0 20px;gap:20px;min-height:0}.chat-char{flex-shrink:0;display:flex;flex-direction:column;align-items:center}.chat-char img{height:200px;image-rendering:pixelated;filter:drop-shadow(0 0 15px rgba(255,215,0,.2))}.chat-char-name{font-family:var(--pixel);font-size:7px;color:var(--gold);margin-top:6px}.chat-dialog-area{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:14px;gap:12px;min-width:0}.chat-footer{background:#00000080;border-top:3px solid var(--gold);padding:14px 20px;flex-shrink:0}.round-indicator{font-family:var(--pixel);font-size:8px;color:#ffd70099;text-align:center;margin-bottom:8px}.coffee-screen{width:100vw;height:100vh;background:radial-gradient(ellipse at center,#2d1b00,#1a0e00 60%,#0a0700);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.cook-scene{width:900px;max-width:98vw;height:90vh;background:linear-gradient(180deg,#1a2040,#0d1030);border:4px solid var(--gold);box-shadow:0 0 60px #ffd70026;display:flex;flex-direction:column;overflow:hidden;position:relative}.cook-header{padding:14px 22px;background:#0009;border-bottom:3px solid var(--gold);display:flex;justify-content:space-between;align-items:center}.cook-stage{flex:1;display:flex;gap:20px;padding:20px;min-height:0;overflow:hidden}.cook-left{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0}.cook-left img{height:160px;image-rendering:pixelated;filter:drop-shadow(0 0 15px rgba(255,215,0,.25))}.cook-center{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}.ingredients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}.ingredient-card{background:#ffffff0d;border:2px solid rgba(255,215,0,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;cursor:pointer;transition:all .2s;position:relative;font-family:var(--pixel);font-size:6px;color:#aaa;text-align:center;gap:6px;border-radius:2px}.ingredient-card.active{border-color:var(--gold);background:#ffd7001f;color:var(--gold);animation:pulse-card .8s ease-in-out infinite;box-shadow:0 0 20px #ffd7004d}.ingredient-card.done{border-color:var(--green);background:#4caf501a;color:var(--green)}.ingredient-card.inactive{opacity:.35;cursor:default}.ingredient-card .ing-emoji{font-size:28px}@keyframes pulse-card{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.cook-speech-bubble{background:#fff;border:3px solid #1a1a2e;box-shadow:4px 4px #1a1a2e;padding:10px 14px;font-family:var(--pixel);font-size:8px;color:#1a1a2e;line-height:1.8;position:relative}.ending-scene{width:100vw;height:100vh;background:radial-gradient(ellipse at center bottom,#3d1515,#1a0808,#0d0d1a);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.ending-table{display:flex;align-items:flex-end;gap:0;position:relative}.ending-char{height:200px;image-rendering:pixelated;filter:drop-shadow(0 0 25px rgba(255,100,100,.4))}.table-center{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 30px 40px}.candle{width:12px;height:50px;background:linear-gradient(180deg,wheat,peru);border-radius:2px;position:relative;margin:0 6px}.candle:before{content:"🔥";position:absolute;top:-20px;left:-4px;font-size:18px;animation:flicker .5s ease-in-out infinite alternate}@keyframes flicker{0%{transform:scale(1) rotate(-3deg)}to{transform:scale(1.15) rotate(3deg)}}.candles-row{display:flex;align-items:flex-end}.table-surface{width:180px;height:14px;background:linear-gradient(180deg,#8b4513,#5d2e0c);border-radius:4px;box-shadow:0 4px 8px #00000080}.ending-dialog{max-width:640px;width:90%;text-align:center;margin-top:30px}.confession-text{font-family:var(--pixel);font-size:9px;color:#fff;line-height:2;margin-bottom:24px;min-height:60px}.choice-btns{display:flex;gap:20px;justify-content:center;margin-top:10px}.heart-particle{position:absolute;font-size:20px;pointer-events:none;animation:heartFloat 4s ease-in forwards}@keyframes heartFloat{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-300px) scale(.3)}}.finale-scene{position:absolute;top:0;right:0;bottom:0;left:0;background:#1a0a2e;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;animation:finaleIn 1.5s ease;z-index:100}@keyframes finaleIn{0%{opacity:0}to{opacity:1}}.taj-silhouette{width:100%;max-width:700px;filter:brightness(0);opacity:.9;margin-bottom:0}.finale-text{position:absolute;top:15%;text-align:center}.finale-chapter{font-family:var(--pixel);font-size:10px;color:#ffc864b3;letter-spacing:4px;margin-bottom:16px;animation:shimmer 2s ease-in-out infinite}.finale-title{font-family:var(--pixel);font-size:22px;color:var(--gold);text-shadow:0 0 40px rgba(255,215,0,.8),4px 4px 0 #8a0000;animation:shimmer 2s ease-in-out infinite .3s}@keyframes shimmer{0%,to{text-shadow:0 0 30px rgba(255,215,0,.6)}50%{text-shadow:0 0 60px rgba(255,215,0,1)}}.stars-finale{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.pin-gate{width:100vw;height:100vh;background:var(--darker);display:flex;align-items:center;justify-content:center}.pin-card{background:var(--dark);border:4px solid var(--gold);box-shadow:8px 8px #ffd70040,0 0 60px #ffd70026;padding:40px 48px 44px;text-align:center;width:340px}.pin-title{font-family:var(--pixel);font-size:14px;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,.7);letter-spacing:3px}.pin-sub{font-family:var(--pixel);font-size:9px;color:var(--pink);letter-spacing:4px;margin-top:6px;text-shadow:0 0 12px rgba(255,107,157,.6)}.pin-lock{font-size:32px;margin:24px 0 10px}.pin-label{font-family:var(--pixel);font-size:8px;color:#fff6;letter-spacing:3px;margin-bottom:18px}.pin-dots{display:flex;justify-content:center;gap:14px;margin-bottom:10px}.pin-dot{width:48px;height:52px;border:3px solid rgba(255,215,0,.3);background:#ffd7000a;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:22px;color:var(--gold);transition:border-color .15s,box-shadow .15s}.pin-dot.filled{border-color:var(--gold);box-shadow:0 0 14px #ffd70066}.pin-dot.wrong{border-color:var(--red);color:var(--red);box-shadow:0 0 14px #ff174480}.pin-error{font-family:var(--pixel);font-size:7px;color:var(--red);letter-spacing:1px;margin:10px 0 0;text-shadow:0 0 8px rgba(255,23,68,.6)}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.pin-key{font-family:var(--pixel);font-size:14px;padding:14px 0;background:#ffd70012;color:#fff;border:2px solid rgba(255,215,0,.2);cursor:pointer;transition:background .1s,transform .08s,border-color .1s;letter-spacing:1px}.pin-key:hover{background:#ffd7002e;border-color:var(--gold);transform:translateY(-2px)}.pin-key:active{transform:translateY(1px);background:#ffd7004d}.pin-key.del{color:var(--pink);border-color:#ff6b9d4d}.pin-key.del:hover{border-color:var(--pink);background:#ff6b9d26}.pin-key.empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none}.pin-key.disabled{opacity:.35;cursor:not-allowed;pointer-events:none}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-10px)}30%{transform:translate(10px)}45%{transform:translate(-8px)}60%{transform:translate(8px)}75%{transform:translate(-4px)}90%{transform:translate(4px)}}.pin-card.shake{animation:shake .65s ease}
