.ken-burns-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#000;contain:strict;isolation:isolate}.ken-burns-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;visibility:hidden;transform:translate3d(var(--kb-start-x, 0%),var(--kb-start-y, 0%),0) scale(var(--kb-start-scale, 2.5));transform-origin:center center;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.ken-burns-container.fading-in .ken-burns-image,.ken-burns-container.playing .ken-burns-image,.ken-burns-container.fading-out .ken-burns-image,.ken-burns-container.complete .ken-burns-image{visibility:visible}.ken-burns-container.fading-in .ken-burns-image{animation:kb-fade-in var(--kb-fade-in, 1s) ease-out both}.ken-burns-container.playing .ken-burns-image{opacity:1;animation:ken-burns-effect var(--kb-duration, 8s) linear both}.ken-burns-container.fading-out .ken-burns-image{animation:kb-fade-out var(--kb-fade-out, 1s) ease-in both}.ken-burns-container.complete .ken-burns-image{opacity:0;transform:translate3d(var(--kb-end-x, 0%),var(--kb-end-y, 0%),0) scale(var(--kb-end-scale, 1))}@keyframes kb-fade-in{0%{opacity:0;transform:translate3d(var(--kb-start-x, 0%),var(--kb-start-y, 0%),0) scale(var(--kb-start-scale, 2.5))}to{opacity:1;transform:translate3d(var(--kb-start-x, 0%),var(--kb-start-y, 0%),0) scale(var(--kb-start-scale, 2.5))}}@keyframes ken-burns-effect{0%{opacity:1;transform:translate3d(var(--kb-start-x, 0%),var(--kb-start-y, 0%),0) scale(var(--kb-start-scale, 2.5))}to{opacity:1;transform:translate3d(var(--kb-end-x, 0%),var(--kb-end-y, 0%),0) scale(var(--kb-end-scale, 1))}}@keyframes kb-fade-out{0%{opacity:1;transform:translate3d(var(--kb-end-x, 0%),var(--kb-end-y, 0%),0) scale(var(--kb-end-scale, 1))}to{opacity:0;transform:translate3d(var(--kb-end-x, 0%),var(--kb-end-y, 0%),0) scale(var(--kb-end-scale, 1))}}.ken-burns-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;pointer-events:none}.ken-burns-overlay>*{pointer-events:auto}.ken-burns-container:before{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;background:#000;opacity:1;transition:opacity .3s ease-out}.ken-burns-container.fading-in:before,.ken-burns-container.playing:before,.ken-burns-container.fading-out:before,.ken-burns-container.complete:before{opacity:0}.ken-burns-container:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.4) 100%)}.ken-burns-container.with-grain .ken-burns-grain{position:absolute;inset:-50%;z-index:6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.03;animation:grain .5s steps(10) infinite;pointer-events:none}@keyframes grain{0%,to{transform:translate(0)}10%{transform:translate(-5%,-10%)}30%{transform:translate(3%,-15%)}50%{transform:translate(12%,9%)}70%{transform:translate(9%,4%)}90%{transform:translate(-1%,7%)}}@media(max-width:768px){.ken-burns-image{--kb-start-scale: calc(var(--kb-start-scale, 2.5) * .7)}.ken-burns-container.with-grain .ken-burns-grain{display:none!important}}@media(max-width:480px)and (orientation:portrait){.ken-burns-image{--kb-start-scale: max(1.2, calc(var(--kb-start-scale, 2.5) * .5));filter:brightness(1.05)}}@media(max-width:768px)and (orientation:landscape){.ken-burns-image{--kb-start-scale: calc(var(--kb-start-scale, 2.5) * .85)}}@media(prefers-reduced-motion:reduce){.ken-burns-image{animation:none!important;opacity:1;visibility:visible;transform:translateZ(0) scale(1.1);transition:none;will-change:auto}.ken-burns-container.fading-in .ken-burns-image,.ken-burns-container.playing .ken-burns-image,.ken-burns-container.fading-out .ken-burns-image,.ken-burns-container.complete .ken-burns-image{animation:none!important;opacity:1;transform:translateZ(0) scale(1.1)}.ken-burns-container:before{transition:none;opacity:0}.ken-burns-container.with-grain .ken-burns-grain{animation:none;display:none}}.attack-sequence-container{position:fixed;inset:0;z-index:10000;background:#000;overflow:hidden;contain:strict;will-change:transform,opacity;backface-visibility:hidden}.attack-phase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.attack-phase-image{width:100%;height:100%;object-fit:cover;will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}.attack-phase-indicator{position:absolute;bottom:3%;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:100;opacity:.6}.phase-dot{width:8px;height:8px;border-radius:50%;background:#ffffff4d;transition:all .3s ease}.phase-dot.active{background:#f44;transform:scale(1.4);box-shadow:0 0 10px #f44c}.phase-dot.complete{background:#ff444480}.attack-overlay{position:absolute;inset:0;pointer-events:none;z-index:50}.shake-subtle{animation:shake-subtle .3s ease-in-out infinite}@keyframes shake-subtle{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.shake-intense{animation:shake-intense .1s ease-in-out infinite}@keyframes shake-intense{0%,to{transform:translate(0)}25%{transform:translate(-8px,4px)}50%{transform:translate(6px,-6px)}75%{transform:translate(-4px,8px)}}.distortion{animation:distort .5s ease-in-out infinite;will-change:transform,opacity;backface-visibility:hidden}@keyframes distort{0%,to{opacity:1;transform:translateZ(0) scale(1)}50%{opacity:.95;transform:translateZ(0) scale(1.01)}}.flash-red:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#f006,#8b000099);animation:flash-red .2s ease-out forwards}@keyframes flash-red{0%{opacity:0}30%{opacity:1}to{opacity:.3}}.blur-fade{animation:blur-fade 2s ease-out forwards}@keyframes blur-fade{0%{filter:blur(0);opacity:1}to{filter:blur(3px);opacity:.8}}.vignette-dark:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 30%,rgba(0,0,0,.8) 100%);animation:vignette-in 2s ease-out forwards}@keyframes vignette-in{0%{opacity:0}to{opacity:1}}.attack-vignette{position:absolute;inset:0;pointer-events:none;z-index:60;box-shadow:inset 0 0 100px #00000080}.attack-phase-tension:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,rgba(0,0,0,.4) 100%);pointer-events:none}.attack-phase-warning:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 40%,rgba(139,0,0,.2) 100%);pointer-events:none;animation:warning-pulse .5s ease-in-out infinite}@keyframes warning-pulse{0%,to{opacity:.5}50%{opacity:1}}.attack-phase-transform:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(128,0,128,.3) 0%,transparent 70%);pointer-events:none;animation:transform-energy 1s ease-in-out infinite}@keyframes transform-energy{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:1}}.attack-phase-lunge:after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(0,0,0,.3),transparent,rgba(0,0,0,.3));pointer-events:none}.attack-phase-aftermath{filter:saturate(.7) brightness(.9)}.attack-phase-recovery{filter:saturate(.5) brightness(.7)}.attack-sequence-container{animation:attack-enter .3s ease-out forwards}@keyframes attack-enter{0%{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:translateZ(0)}}@media(max-width:768px){.phase-dot{width:6px;height:6px}.attack-phase-indicator{gap:6px;bottom:5%}}@media(prefers-reduced-motion:reduce){.shake-subtle,.shake-intense,.distortion,.blur-fade{animation:none!important}.distortion{filter:none}.flash-red:before{animation:none;opacity:.3}.vignette-dark:before{animation:none;opacity:1}.attack-phase-warning:after{animation:none;opacity:.75}.attack-phase-transform:after{animation:none;opacity:.75}.attack-sequence-container{animation:none;opacity:1;transform:none}.phase-dot{transition:none}}.sequence-preview-overlay{position:fixed;inset:0;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.sequence-preview-container{background:#1a1a2e;border-radius:12px;width:100%;max-width:800px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;border:1px solid #333}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#16213e;border-bottom:1px solid #333}.preview-header h3{margin:0;color:#e94560;font-size:1.2rem}.preview-header .close-btn{background:transparent;border:none;color:#888;font-size:28px;cursor:pointer;padding:0;line-height:1;transition:color .2s}.preview-header .close-btn:hover{color:#e94560}.preview-viewport{position:relative;aspect-ratio:16 / 10;background:#000;overflow:hidden}.preview-phase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.preview-phase-image{width:100%;height:100%;object-fit:cover}.preview-phase-image.static{animation:none}.phase-info-overlay{position:absolute;top:10px;left:10px;display:flex;gap:8px;z-index:10}.phase-info-overlay span{background:#000000b3;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.phase-info-overlay .phase-name{color:#e94560;text-transform:uppercase;letter-spacing:1px}.phase-info-overlay .phase-duration{color:#0f3460;background:#e94560}.phase-info-overlay .phase-effect{color:#f0f0f0;background:#533483}.preview-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}.preview-overlay.shake-subtle{animation:shake-subtle .3s infinite}.preview-overlay.shake-intense{animation:shake-intense .15s infinite}.preview-overlay.distortion{animation:distortion 1s ease-in-out;background:radial-gradient(ellipse at center,transparent 0%,rgba(139,0,0,.3) 100%)}.preview-overlay.flash-red{animation:flash-red .3s ease-out}.preview-overlay.blur-fade{animation:blur-fade 2s ease-in-out;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.preview-overlay.vignette-dark{background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.8) 100%)}@keyframes shake-intense{0%,to{transform:translate(0)}20%{transform:translate(-5px,-3px)}40%{transform:translate(5px,3px)}60%{transform:translate(-3px,5px)}80%{transform:translate(3px,-5px)}}@keyframes distortion{0%{opacity:0}50%{opacity:1}to{opacity:.5}}@keyframes flash-red{0%{background:#f00c}to{background:transparent}}@keyframes blur-fade{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}50%{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.preview-timeline{padding:16px 20px;background:#16213e}.timeline-track{position:relative;height:32px;display:flex;border-radius:4px;overflow:hidden;background:#0f3460}.timeline-segment{position:relative;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border-right:1px solid #1a1a2e}.timeline-segment:last-child{border-right:none}.timeline-segment:nth-child(1){background:#e94560}.timeline-segment:nth-child(2){background:#ff6b6b}.timeline-segment:nth-child(3){background:#533483}.timeline-segment:nth-child(4){background:#1c0c5b}.timeline-segment:nth-child(5){background:#950101}.timeline-segment:nth-child(6){background:#3d0000}.timeline-segment:nth-child(7){background:#1a0000}.timeline-segment:hover{filter:brightness(1.2)}.timeline-segment.current{box-shadow:inset 0 0 0 2px #fff}.timeline-segment.past{opacity:.6}.segment-label{color:#fff;font-size:11px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.5)}.timeline-progress{position:absolute;top:0;left:0;height:100%;background:#fff3;pointer-events:none;transition:width .05s linear}.timeline-time{display:flex;justify-content:space-between;margin-top:4px;font-size:11px;color:#666}.preview-controls{display:flex;justify-content:center;gap:12px;padding:16px 20px;background:#1a1a2e}.control-btn{width:48px;height:48px;border:none;border-radius:50%;background:#0f3460;color:#fff;font-size:20px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.control-btn:hover:not(:disabled){background:#e94560;transform:scale(1.1)}.control-btn:disabled{opacity:.4;cursor:not-allowed}.control-btn.play-btn{width:56px;height:56px;font-size:24px;background:#e94560}.control-btn.play-btn:hover{background:#ff6b6b}.phase-list{display:flex;gap:4px;padding:12px 20px;background:#16213e;border-top:1px solid #333;overflow-x:auto}.phase-btn{flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:8px 12px;background:#0f3460;border:none;border-radius:6px;cursor:pointer;transition:all .2s;min-width:70px}.phase-btn:hover{background:#1a4a7a}.phase-btn.active{background:#e94560}.phase-btn .phase-num{color:#888;font-size:10px;font-weight:600}.phase-btn.active .phase-num{color:#ffffffb3}.phase-btn .phase-id{color:#fff;font-size:11px;font-weight:500;text-transform:capitalize;margin:2px 0}.phase-btn .phase-dur{color:#666;font-size:10px}.phase-btn.active .phase-dur{color:#fff9}.keyboard-hints{display:flex;justify-content:center;gap:16px;padding:10px 20px;background:#0f3460;font-size:11px;color:#666}.keyboard-hints span{white-space:nowrap}@media(max-width:600px){.sequence-preview-overlay{padding:10px}.sequence-preview-container{max-height:95vh}.preview-header h3{font-size:1rem}.preview-controls{gap:8px;padding:12px}.control-btn{width:40px;height:40px;font-size:16px}.control-btn.play-btn{width:48px;height:48px;font-size:20px}.phase-list{padding:10px 12px;gap:3px}.phase-btn{min-width:55px;padding:6px 8px}.keyboard-hints{display:none}}.timeline-editor{display:flex;flex-direction:column;background:#1a1a2e;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #0000004d;max-height:90vh}.timeline-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#16213e;border-bottom:1px solid #333}.timeline-header h3{margin:0;color:#e94560;font-size:1.1rem;font-weight:600}.timeline-header-actions{display:flex;align-items:center;gap:8px}.zoom-btn{width:28px;height:28px;border:none;border-radius:4px;background:#0f3460;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}.zoom-btn:hover{background:#e94560}.zoom-level{color:#888;font-size:12px;min-width:40px;text-align:center}.close-editor-btn{width:32px;height:32px;border:none;border-radius:50%;background:transparent;color:#888;font-size:24px;cursor:pointer;transition:all .2s;margin-left:8px}.close-editor-btn:hover{background:#e94560;color:#fff}.undo-btn,.redo-btn{width:32px;height:32px;border:none;border-radius:4px;background:#0f3460;color:#fff;font-size:16px;cursor:pointer;transition:all .2s}.undo-btn:hover:not(:disabled),.redo-btn:hover:not(:disabled){background:#1a4a7a}.undo-btn:disabled,.redo-btn:disabled{opacity:.3;cursor:not-allowed}.history-indicator{color:#666;font-size:11px;font-family:monospace}.header-divider{width:1px;height:20px;background:#333;margin:0 8px}.export-btn{padding:6px 12px;border:none;border-radius:4px;background:#0f3460;color:#fff;font-size:12px;cursor:pointer;transition:all .2s}.export-btn:hover{background:#1a4a7a}.sequence-selector{padding:12px 16px;background:#0f3460;border-bottom:1px solid #333}.sequence-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.sequence-selector-label{color:#888;font-size:11px;text-transform:uppercase;letter-spacing:1px}.sequence-create-container{position:relative}.sequence-create-btn{padding:4px 12px;border:none;border-radius:4px;background:#533483;color:#fff;font-size:12px;cursor:pointer;transition:all .2s}.sequence-create-btn:hover{background:#6b46a3}.sequence-create-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#16213e;border:1px solid #333;border-radius:6px;overflow:hidden;z-index:100;min-width:150px;box-shadow:0 4px 12px #0000004d}.sequence-create-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:transparent;color:#fff;font-size:13px;cursor:pointer;transition:background .2s;text-align:left}.sequence-create-option:hover{background:#0f3460}.sequence-create-option .type-dot{width:10px;height:10px;border-radius:50%;background:var(--type-color)}.sequence-tabs{display:flex;gap:8px;flex-wrap:wrap}.sequence-tab{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff0d;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s}.sequence-tab:hover{background:#ffffff1a}.sequence-tab.active{background:#ffffff1a;border-color:var(--type-color)}.sequence-type-dot{width:8px;height:8px;border-radius:50%;background:var(--type-color);flex-shrink:0}.sequence-name{color:#fff;font-size:13px;cursor:text}.sequence-name-input{width:100px;padding:2px 6px;background:#0a0a1a;border:1px solid #e94560;border-radius:4px;color:#fff;font-size:13px}.sequence-actions{display:flex;gap:4px;margin-left:auto}.sequence-action-btn{width:24px;height:24px;border:none;border-radius:4px;background:transparent;font-size:12px;cursor:pointer;opacity:.5;transition:all .2s}.sequence-action-btn:hover:not(:disabled){opacity:1;background:#ffffff1a}.sequence-action-btn:disabled{cursor:not-allowed}.sequence-action-btn.delete:hover:not(:disabled){background:#e9456033}.sequence-empty{text-align:center;padding:20px;color:#666}.sequence-empty p{margin:0 0 12px}.sequence-create-first{padding:8px 16px;border:none;border-radius:6px;background:#e94560;color:#fff;font-size:14px;cursor:pointer;transition:background .2s}.sequence-create-first:hover{background:#ff6b6b}.timeline-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#666}.timeline-empty p{margin:0 0 20px;font-size:14px}.create-first-sequence-btn{padding:12px 24px;border:none;border-radius:8px;background:linear-gradient(135deg,#e94560,#533483);color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.create-first-sequence-btn:hover{transform:scale(1.05);box-shadow:0 4px 15px #e9456066}.timeline-workspace{display:flex;flex:1;min-height:0;overflow:hidden}.timeline-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #333}.timeline-right{width:280px;flex-shrink:0;overflow-y:auto;background:#16213e}.timeline-ruler{height:32px;background:#0f3460;border-bottom:1px solid #333;overflow-x:auto;overflow-y:hidden;cursor:pointer}.ruler-track{position:relative;height:100%;min-width:100%}.ruler-marker{position:absolute;top:0;width:1px;height:100%;pointer-events:none}.ruler-marker.major{background:#444}.ruler-marker.minor{background:#333;height:40%;top:60%}.marker-label{position:absolute;top:4px;left:4px;font-size:10px;color:#888;white-space:nowrap}.ruler-playhead{position:absolute;top:0;height:100%;pointer-events:none;z-index:10}.playhead-head{width:12px;height:12px;background:#e94560;transform:translate(-50%) rotate(45deg);position:absolute;top:2px;left:50%}.playhead-line{width:2px;height:100%;background:#e94560;position:absolute;left:50%;transform:translate(-50%);top:8px}.timeline-track-container{flex:1;background:#111;overflow-x:auto;overflow-y:hidden;padding:20px 0}.timeline-track{position:relative;height:80px;min-width:100%;display:flex}.track-phase-block{position:absolute;height:100%;border-radius:4px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border:2px solid transparent;box-sizing:border-box}.track-phase-block:hover{filter:brightness(1.2);transform:scaleY(1.05)}.track-phase-block.selected{border-color:#fff;box-shadow:0 0 10px #e9456080}.track-phase-block.active{box-shadow:inset 0 0 20px #ffffff4d}.phase-block-label{font-size:16px;font-weight:700;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.5)}.phase-block-name{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.phase-block-duration{font-size:9px;color:#ffffff80}.phase-effect-indicator{position:absolute;top:4px;right:4px;background:#533483e6;color:#fff;font-size:8px;padding:2px 4px;border-radius:2px;font-weight:600}.phase-resize-left,.phase-resize-right{position:absolute;top:0;width:6px;height:100%;cursor:ew-resize;opacity:0;transition:opacity .2s}.phase-resize-left{left:0;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,transparent 100%)}.phase-resize-right{right:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 100%)}.track-phase-block:hover .phase-resize-left,.track-phase-block:hover .phase-resize-right{opacity:1}.track-playhead{position:absolute;top:0;height:100%;width:2px;background:#e94560;pointer-events:none;z-index:10;box-shadow:0 0 6px #e94560cc}.timeline-controls{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#16213e;border-top:1px solid #333}.transport-buttons{display:flex;gap:8px}.transport-btn{width:40px;height:40px;border:none;border-radius:50%;background:#0f3460;color:#fff;font-size:16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.transport-btn:hover{background:#e94560;transform:scale(1.1)}.transport-btn.play-pause-btn{width:48px;height:48px;font-size:20px;background:#e94560}.transport-btn.play-pause-btn:hover{background:#ff6b6b}.time-display{font-family:monospace;font-size:14px;color:#fff;background:#0a0a1a;padding:6px 12px;border-radius:4px}.time-separator{color:#666;margin:0 4px}.total-time{color:#888}.progress-bar-container{flex:1;padding:0 8px}.progress-bar{height:6px;background:#0f3460;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#e94560,#ff6b6b);transition:width .05s linear}.control-toggles{display:flex;gap:8px}.toggle-btn{width:36px;height:36px;border:none;border-radius:4px;background:#0f3460;font-size:16px;cursor:pointer;transition:all .2s}.toggle-btn:disabled{opacity:.4;cursor:not-allowed}.toggle-btn:not(:disabled):hover{background:#1a4a7a}.phase-property-panel{padding:16px}.panel-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid #333}.phase-number{width:28px;height:28px;background:#e94560;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff}.panel-header h4{margin:0;color:#fff;font-size:1rem;text-transform:capitalize}.property-section{margin-bottom:20px}.section-label{display:block;color:#888;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.duration-controls{display:flex;align-items:center;gap:8px}.duration-slider{flex:1;height:6px;-webkit-appearance:none;background:#0f3460;border-radius:3px;outline:none}.duration-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#e94560;border-radius:50%;cursor:pointer}.duration-input{width:60px;padding:4px 8px;background:#0a0a1a;border:1px solid #333;border-radius:4px;color:#fff;font-size:12px;text-align:center}.duration-unit{color:#666;font-size:12px}.duration-presets{display:flex;gap:4px;margin-top:8px}.preset-btn{padding:4px 8px;border:none;border-radius:4px;background:#0f3460;color:#888;font-size:11px;cursor:pointer;transition:all .2s}.preset-btn:hover{background:#1a4a7a;color:#fff}.preset-btn.active{background:#e94560;color:#fff}.effect-select{width:100%;padding:8px 12px;background:#0a0a1a;border:1px solid #333;border-radius:4px;color:#fff;font-size:13px;cursor:pointer}.effect-select:focus{border-color:#e94560;outline:none}.effect-preview{margin-top:8px;padding:8px;background:#0a0a1a;border-radius:4px;text-align:center;font-size:11px;color:#888}.effect-preview.shake-subtle{animation:shake-subtle .3s infinite}.effect-preview.shake-intense{animation:shake-intense .15s infinite}@keyframes shake-subtle{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes shake-intense{0%,to{transform:translate(0)}20%{transform:translate(-3px,-2px)}40%{transform:translate(3px,2px)}60%{transform:translate(-2px,3px)}80%{transform:translate(2px,-3px)}}.kenburns-controls{display:flex;flex-direction:column;gap:12px}.kenburns-row{display:flex;align-items:center;gap:8px}.kenburns-row label{width:80px;font-size:12px;color:#aaa}.kenburns-row input[type=range]{flex:1;height:4px;-webkit-appearance:none;background:#0f3460;border-radius:2px}.kenburns-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#533483;border-radius:50%;cursor:pointer}.kenburns-value{width:40px;text-align:right;font-size:11px;color:#888}.zoom-indicator{margin-top:8px;padding:6px 10px;background:#0a0a1a;border-radius:4px;text-align:center;font-size:12px;color:#aaa}.phase-info{background:#0a0a1a;border-radius:4px;padding:12px}.info-row{display:flex;justify-content:space-between;font-size:11px;margin-bottom:4px}.info-row:last-child{margin-bottom:0}.info-label{color:#666}.info-value{color:#aaa}.no-selection-message{padding:40px 20px;text-align:center;color:#666}.no-selection-message p{margin:0 0 8px}.no-selection-message .hint{font-size:12px;color:#555}.timeline-hints{display:flex;justify-content:center;gap:20px;padding:8px 16px;background:#0f3460;font-size:11px;color:#666}.timeline-hints span{white-space:nowrap}@media(max-width:768px){.timeline-workspace{flex-direction:column}.timeline-right{width:100%;max-height:200px;border-right:none;border-top:1px solid #333}.timeline-controls{flex-wrap:wrap;gap:10px}.transport-buttons{order:1}.time-display{order:2}.progress-bar-container{order:4;width:100%;flex:none}.control-toggles{order:3}.timeline-hints{flex-wrap:wrap;gap:10px}}@media(max-width:480px){.timeline-header{padding:16px}.timeline-header h3{font-size:.9rem;flex:1}.close-editor-btn{width:44px;height:44px;background:#e94560;color:#fff;font-size:28px;border-radius:50%;margin-left:12px}.transport-btn{width:44px;height:44px;font-size:16px}.transport-btn.play-pause-btn{width:52px;height:52px;font-size:22px}.phase-property-panel{padding:12px}.duration-slider::-webkit-slider-thumb,.kenburns-row input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.preset-btn{min-height:36px;min-width:44px}.effect-select{min-height:44px}.track-phase-block{min-height:70px}.phase-block-label{font-size:18px}.timeline-hints{display:none}}.image-editor-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease;padding:16px}.image-editor-modal{position:relative;width:100%;max-width:600px;max-height:calc(100vh - 32px);background:#1e1e2e;border-radius:16px;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;animation:slideUp .3s ease;overflow:hidden}.image-editor-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #2a2a3e;flex-shrink:0}.image-editor-modal__title{margin:0;font-size:18px;font-weight:600;color:#e5e7eb}.image-editor-modal__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:none;border-radius:8px;color:#9ca3af;cursor:pointer;transition:background .2s ease,color .2s ease}.image-editor-modal__close:hover{background:#2a2a3e;color:#e5e7eb}.image-editor-modal__close svg{width:24px;height:24px}.image-editor-modal__content{display:flex;flex-direction:column;gap:20px;padding:20px;overflow-y:auto;flex:1}.image-editor-modal__preview{display:flex;flex-direction:column;gap:12px}.image-editor-modal__image-container{position:relative;width:100%;max-width:300px;aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;background:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(-45deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(-45deg,transparent 75%,#333 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px;background-color:#222}.image-editor-modal__image{width:100%;height:100%;object-fit:contain}.image-editor-modal__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:12px;color:#6b7280}.image-editor-modal__placeholder svg{width:48px;height:48px;opacity:.5}.image-editor-modal__placeholder span{font-size:14px}.image-editor-modal__loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#000000b3;color:#e5e7eb;font-size:14px}.image-editor-modal__spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}.image-editor-modal__image-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.image-editor-modal__action-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:#2a2a3e;border:1px solid #3a3a4e;border-radius:10px;color:#e5e7eb;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease}.image-editor-modal__action-btn:hover:not(:disabled){background:#3a3a4e;border-color:#6366f1;transform:scale(1.05)}.image-editor-modal__action-btn:active:not(:disabled){transform:scale(.95)}.image-editor-modal__action-btn:disabled{opacity:.4;cursor:not-allowed}.image-editor-modal__action-btn svg{width:24px;height:24px}.image-editor-modal__controls{display:flex;flex-direction:column;gap:20px}.image-editor-modal__section{display:flex;flex-direction:column;gap:8px}.image-editor-modal__label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#e5e7eb}.image-editor-modal__unsaved{font-size:12px;font-weight:400;color:#f59e0b}.image-editor-modal__textarea{width:100%;padding:12px;background:#2a2a3e;border:1px solid #3a3a4e;border-radius:8px;color:#e5e7eb;font-family:inherit;font-size:14px;line-height:1.5;resize:vertical;min-height:100px;transition:border-color .2s ease}.image-editor-modal__textarea:focus{outline:none;border-color:#6366f1}.image-editor-modal__textarea:disabled{opacity:.5;cursor:not-allowed}.image-editor-modal__textarea::placeholder{color:#6b7280}.image-editor-modal__char-count{font-size:12px;color:#6b7280;text-align:right}.image-editor-modal__reference-row{display:flex;gap:16px;align-items:center}.image-editor-modal__reference-preview{flex-shrink:0;width:60px;height:60px;border-radius:8px;overflow:hidden;background:#2a2a3e}.image-editor-modal__reference-image{width:100%;height:100%;object-fit:cover}.image-editor-modal__slider-container{flex:1;display:flex;flex-direction:column;gap:4px}.image-editor-modal__slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:#2a2a3e;border-radius:4px;outline:none;cursor:pointer}.image-editor-modal__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:#6366f1;border-radius:50%;cursor:pointer;transition:transform .15s ease}.image-editor-modal__slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.image-editor-modal__slider::-moz-range-thumb{width:24px;height:24px;background:#6366f1;border-radius:50%;cursor:pointer;border:none}.image-editor-modal__slider:disabled{opacity:.5;cursor:not-allowed}.image-editor-modal__slider-labels{display:flex;justify-content:space-between;font-size:11px;color:#6b7280}.image-editor-modal__main-actions{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:1px solid #2a2a3e}.image-editor-modal__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;padding:0 20px;font-size:16px;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:background .2s ease,transform .15s ease}.image-editor-modal__btn:disabled{opacity:.5;cursor:not-allowed}.image-editor-modal__btn svg{width:22px;height:22px}.image-editor-modal__btn--primary{background:#6366f1;color:#fff}.image-editor-modal__btn--primary:hover:not(:disabled){background:#5558e3}.image-editor-modal__btn--primary:active:not(:disabled){transform:scale(.98)}.image-editor-modal__btn--danger{background:#3a3a4e;color:#ef4444}.image-editor-modal__btn--danger:hover:not(:disabled){background:#ef4444;color:#fff}.image-editor-modal__btn--confirm{background:#ef4444;color:#fff;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.image-editor-modal__btn-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@media(max-width:480px){.image-editor-modal__backdrop{padding:0}.image-editor-modal{max-width:100%;max-height:100vh;border-radius:0}.image-editor-modal__image-container{max-width:240px}.image-editor-modal__content{gap:16px;padding:16px}.image-editor-modal__action-btn{width:44px;height:44px}.image-editor-modal__action-btn svg{width:20px;height:20px}}@media(max-height:600px)and (orientation:landscape){.image-editor-modal__content{flex-direction:row;align-items:flex-start}.image-editor-modal__preview{width:45%;flex-shrink:0}.image-editor-modal__controls{flex:1}.image-editor-modal__image-container{max-width:200px}}.image-thumbnail{position:relative;border-radius:8px;overflow:visible;cursor:pointer;transition:all .2s ease;background:var(--admin-card-bg, #2a2a2a);border:2px solid transparent}.image-thumbnail:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.image-thumbnail.selected{border-color:var(--admin-accent, #6366f1);box-shadow:0 0 0 2px #6366f14d}.image-thumbnail.generating{opacity:.7;pointer-events:none}.image-thumbnail.missing{background:linear-gradient(135deg,#3a3a3a,#2a2a2a);border-style:dashed;border-color:#555}.image-thumbnail.small{width:80px;height:80px}.image-thumbnail.medium{width:120px;height:120px}.image-thumbnail.large{width:160px;height:160px}.image-thumbnail img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#666;border-radius:6px}.placeholder-icon{font-size:2rem;opacity:.5}.thumbnail-label{position:absolute;bottom:0;left:0;right:0;padding:4px 6px;background:linear-gradient(transparent,#000c);color:#fff;font-size:.7rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:0 0 6px 6px}.thumbnail-badge{position:absolute;top:4px;left:4px;padding:2px 6px;border-radius:4px;font-size:.6rem;font-weight:600;text-transform:uppercase;background:#000000b3;color:#fff;z-index:5}.thumbnail-badge.polite{background:#22c55ee6}.thumbnail-badge.monster{background:#ef4444e6}.thumbnail-badge.attack{background:#fb923ce6}.generating-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;border-radius:6px;z-index:10}.spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.thumbnail-actions{position:absolute;top:-8px;right:-8px;display:flex;flex-direction:column;gap:4px;z-index:20}.thumbnail-actions.always-visible{opacity:1}.thumbnail-actions.missing-actions{position:absolute;inset:0;flex-direction:row;justify-content:center;align-items:center;background:#00000080;border-radius:6px}.thumb-action-btn{width:36px;height:36px;min-width:44px;min-height:44px;padding:0;border:none;border-radius:10px;background:#000c;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 2px 8px #0000004d}.thumb-action-btn:hover{transform:scale(1.1)}.thumb-action-btn:active{transform:scale(.95)}.thumb-action-btn svg{width:20px;height:20px}.thumb-action-btn.primary{background:#6366f1e6}.thumb-action-btn.primary:hover{background:#6366f1}.thumb-action-btn.expand-btn{background:#4b5563e6}.thumb-action-btn.expand-btn:hover{background:#6366f1e6}.thumb-action-btn.refresh-btn:hover{background:#22c55ee6}.thumb-action-btn.rotate-btn:hover{background:#3b82f6e6}.thumb-action-btn.flip-btn:hover{background:#a855f7e6}.thumb-action-btn.remove-bg-btn:hover{background:#fb923ce6}.thumb-action-btn.edit-btn:hover{background:#ec4899e6}.thumb-action-btn.generate-new{width:auto;padding:12px 16px;gap:8px;font-size:.8rem;font-weight:600;background:#22c55ee6}.thumb-action-btn.generate-new:hover{background:#22c55e}@media(max-width:480px){.image-thumbnail.medium{width:100px;height:100px}.image-thumbnail.large{width:140px;height:140px}.thumb-action-btn{min-width:44px;min-height:44px}.thumbnail-actions{top:-6px;right:-6px}}@media(max-height:500px)and (orientation:landscape){.image-thumbnail.medium{width:90px;height:90px}}.collapsible-section{border-radius:8px;overflow:hidden;background:var(--admin-section-bg, #222);margin-bottom:8px;border:1px solid rgba(255,255,255,.1)}.section-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0;background:var(--admin-header-bg, #2a2a2a);border:none;color:#fff;transition:background .2s ease;text-align:left}.header-clickable{flex:1;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;cursor:pointer;min-width:0}.header-clickable:hover{background:var(--admin-header-hover, #333)}.header-left{display:flex;align-items:center;gap:10px;min-width:0}.section-icon{font-size:1.2rem;opacity:.8}.section-title{font-size:.9rem;font-weight:600}.section-badge{padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:600;background:#ffffff26}.section-badge.success{background:#22c55e4d;color:#4ade80}.section-badge.warning{background:#fbbf244d;color:#fbbf24}.section-badge.error{background:#ef44444d;color:#f87171}.section-badge.polite{background:#22c55e4d;color:#4ade80}.section-badge.monster{background:#ef44444d;color:#f87171}.header-actions{display:flex;align-items:center;gap:4px;padding-right:12px}.header-actions button{padding:4px 10px;border:none;border-radius:4px;background:#6366f180;color:#fff;font-size:.7rem;cursor:pointer;transition:all .15s ease}.header-actions button:hover{background:#6366f1cc}.header-actions button:disabled{opacity:.5;cursor:not-allowed}.chevron-icon{width:20px;height:20px;transition:transform .2s ease}.chevron-icon.open{transform:rotate(180deg)}.section-content{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.collapsible-section.open .section-content{max-height:2000px}.content-inner{padding:12px 16px}.collapsible-section .collapsible-section{background:#0003;margin-bottom:6px}.collapsible-section .collapsible-section .section-header{padding:10px 12px;background:transparent}.collapsible-section .collapsible-section .content-inner{padding:8px 12px}.ken-burns-settings{display:flex;flex-direction:column;gap:12px}.kb-setting-row{display:flex;flex-direction:column;gap:4px}.kb-setting-row label{font-size:.8rem;color:#aaa}.kb-toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer}.kb-toggle-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--admin-accent, #6366f1)}.kb-toggle-label span{font-size:.9rem;color:#fff}.kb-slider-row{display:flex;align-items:center;gap:10px}.kb-slider-row input[type=range]{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:3px;outline:none}.kb-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--admin-accent, #6366f1);cursor:pointer;transition:transform .1s ease}.kb-slider-row input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.kb-value{min-width:50px;font-size:.8rem;color:#ccc;text-align:right;font-family:monospace}.kb-preview-section{margin-top:8px;padding:12px;background:#0000004d;border-radius:8px}.kb-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.kb-preview-header span{font-size:.85rem;color:#aaa}.kb-preview-toggle{padding:4px 12px;border:none;border-radius:4px;background:var(--admin-accent, #6366f1);color:#fff;font-size:.75rem;cursor:pointer;transition:background .15s ease}.kb-preview-toggle:hover{background:#818cf8}.kb-preview-container{width:100%;max-width:200px;aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:8px;background:#00000080}.kb-preview-image{width:100%;height:100%;object-fit:cover;transform:scale(var(--kb-zoom-start, 1));transition:none}.kb-preview-container.playing .kb-preview-image{animation:kenBurnsPreview var(--kb-speed, 8s) ease-in-out infinite alternate}@keyframes kenBurnsPreview{0%{transform:scale(var(--kb-zoom-start, 1)) translate(0)}to{transform:scale(var(--kb-zoom-end, 1.15)) translate(var(--kb-pos-x, 0),var(--kb-pos-y, 0))}}.kb-reset-btn{margin-top:8px;padding:8px 16px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:transparent;color:#aaa;font-size:.8rem;cursor:pointer;transition:all .15s ease}.kb-reset-btn:hover{border-color:#fff6;color:#fff}@media(max-width:480px){.kb-preview-container{max-width:150px}}.attack-sequence-settings{display:flex;flex-direction:column;gap:20px}.attack-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.attack-section-header h4{margin:0;font-size:.95rem;font-weight:600;color:#fff}.attack-toggle-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.8rem;color:#aaa}.attack-toggle-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--admin-accent, #6366f1)}.total-duration{font-size:.8rem;color:#888;font-family:monospace}.attack-setting-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.attack-setting-row>label{min-width:50px;font-size:.8rem;color:#aaa}.attack-slider-row,.attack-color-row{flex:1;display:flex;align-items:center;gap:8px}.attack-slider-row input[type=range]{flex:1;height:5px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:3px;outline:none}.attack-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#ef4444;cursor:pointer}.attack-color-row input[type=color]{width:30px;height:24px;border:none;border-radius:4px;cursor:pointer}.attack-value{min-width:50px;font-size:.75rem;color:#ccc;text-align:right;font-family:monospace}.attack-effect-preview{margin-top:10px;padding:10px;background:#0000004d;border-radius:8px;text-align:center}.test-effect-btn{padding:6px 14px;border:none;border-radius:4px;background:#ef4444;color:#fff;font-size:.75rem;cursor:pointer;margin-bottom:10px;transition:background .15s ease}.test-effect-btn:hover{background:#f87171}.effect-preview-container{width:120px;height:120px;margin:0 auto;overflow:hidden;border-radius:8px;position:relative}.effect-preview-container img{width:100%;height:100%;object-fit:cover}.effect-preview-container.attacking{animation:attackShake .3s ease-in-out}.effect-preview-container.attacking:after{content:"";position:absolute;inset:0;background:var(--attack-flash-color, #ff0000);opacity:0;animation:attackFlash var(--attack-flash-duration, .15s) ease-out}.effect-preview-container.attacking img{transform:scale(var(--attack-zoom, 1.1));transition:transform .1s ease-out}@keyframes attackShake{0%,to{transform:translate(0)}25%{transform:translate(calc(-1 * var(--attack-shake, 5px)))}75%{transform:translate(var(--attack-shake, 5px))}}@keyframes attackFlash{0%{opacity:.8}to{opacity:0}}.attack-reset-btn{margin-top:8px;padding:6px 14px;border:1px solid rgba(239,68,68,.3);border-radius:4px;background:transparent;color:#f87171;font-size:.75rem;cursor:pointer;transition:all .15s ease}.attack-reset-btn:hover{border-color:#ef444499;background:#ef44441a}.sequence-type-selector{display:flex;gap:6px;margin-bottom:12px}.seq-type-btn{flex:1;padding:6px 12px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#ffffff0d;color:#888;font-size:.75rem;cursor:pointer;transition:all .15s ease}.seq-type-btn:hover{background:#ffffff1a;color:#aaa}.seq-type-btn.active{border-color:transparent;color:#fff}.seq-type-btn.active.basic{background:#6366f166}.seq-type-btn.active.rage{background:#ef444466}.seq-type-btn.active.special{background:#a855f766}.phase-timeline{display:flex;height:28px;border-radius:6px;overflow:hidden;margin-bottom:12px}.phase-bar{display:flex;align-items:center;justify-content:center;min-width:40px;transition:width .2s ease}.phase-bar.phase-0{background:#6366f180}.phase-bar.phase-1{background:#ef444480}.phase-bar.phase-2{background:#fbbf2480}.phase-bar.phase-3{background:#22c55e80}.phase-label{font-size:.65rem;color:#fff;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.phase-controls-compact{display:flex;flex-direction:column;gap:8px}.phase-control-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#ffffff08;border-radius:4px}.phase-name{min-width:60px;font-size:.75rem;color:#aaa;text-transform:capitalize}.phase-duration-control{flex:1;display:flex;align-items:center;gap:6px}.phase-duration-control input[type=range]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:2px}.phase-duration-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--admin-accent, #6366f1);cursor:pointer}.phase-duration-value{min-width:45px;font-size:.7rem;color:#888;text-align:right;font-family:monospace}.phase-effect-select{width:100px;padding:4px 6px;border:1px solid rgba(255,255,255,.1);border-radius:4px;background:#0000004d;color:#ccc;font-size:.7rem}.sequence-action-buttons{display:flex;gap:8px;margin-top:12px}.preview-sequence-btn,.open-editor-btn,.reset-sequence-btn{flex:1;padding:8px 12px;border:none;border-radius:4px;font-size:.75rem;cursor:pointer;transition:all .15s ease}.preview-sequence-btn{background:var(--admin-accent, #6366f1);color:#fff}.preview-sequence-btn:hover{background:#818cf8}.open-editor-btn{background:#a855f74d;color:#c4b5fd}.open-editor-btn:hover{background:#a855f780}.reset-sequence-btn{background:#ffffff1a;color:#888}.reset-sequence-btn:hover{background:#ffffff26;color:#aaa}@media(max-width:480px){.phase-control-row{flex-wrap:wrap}.phase-name{min-width:100%;margin-bottom:4px}.phase-effect-select{width:100%}.sequence-action-buttons{flex-direction:column}}.monster-card{border-radius:12px;overflow:hidden;background:var(--admin-card-bg, #1e1e1e);margin-bottom:12px;border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.monster-card:hover{border-color:#fff3}.monster-card.expanded{border-color:var(--admin-accent, #6366f1);box-shadow:0 4px 20px #6366f133}.monster-card.tutorial{border-color:#fbbf2480}.monster-card.tutorial.expanded{border-color:#fbbf24cc;box-shadow:0 4px 20px #fbbf2433}.monster-card-header{width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--admin-header-bg, #252525);border:none;color:#fff;cursor:pointer;transition:background .2s ease;text-align:left}.monster-card-header:hover{background:var(--admin-header-hover, #2a2a2a)}.header-info{flex:1;display:flex;flex-direction:column;gap:2px}.monster-name{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:8px}.tutorial-badge{padding:2px 8px;border-radius:4px;font-size:.6rem;font-weight:700;background:#fbbf244d;color:#fbbf24;letter-spacing:.5px}.monster-type{font-size:.8rem;color:#888;text-transform:capitalize}.header-stats{display:flex;align-items:center;gap:12px}.stat-item{font-size:.8rem;color:#aaa}.ref-indicator{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:.7rem;font-weight:700;background:#ffffff1a;color:#666}.ref-indicator.has{background:#22c55e4d;color:#4ade80}.ref-indicator.monster.has{background:#ef44444d;color:#f87171}.ref-indicator.missing{background:#ffffff0d;color:#555}.expand-icon{width:24px;height:24px;transition:transform .2s ease;color:#666}.expand-icon.open{transform:rotate(180deg)}.monster-card-content{padding:16px;background:var(--admin-content-bg, #1a1a1a);border-top:1px solid rgba(255,255,255,.05)}.reference-section{display:flex;flex-direction:column;gap:12px}.ref-type-tabs{display:flex;gap:8px}.ref-tab{flex:1;padding:8px 16px;border:none;border-radius:6px;background:#ffffff14;color:#aaa;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:6px}.ref-tab:hover{background:#ffffff1f}.ref-tab.active{background:#22c55e4d;color:#fff}.ref-tab.monster.active{background:#ef44444d}.ref-check{color:#4ade80}.ref-content{display:flex;gap:16px;align-items:flex-start}.ref-image-wrapper{flex-shrink:0}.no-ref-placeholder{width:160px;height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#ffffff0d;border:2px dashed rgba(255,255,255,.2);border-radius:8px}.no-ref-icon{font-size:2rem;opacity:.5}.no-ref-text{font-size:.75rem;color:#666}.generate-ref-btn{padding:6px 14px;border:none;border-radius:4px;background:var(--admin-accent, #6366f1);color:#fff;font-size:.75rem;cursor:pointer;transition:all .15s ease}.generate-ref-btn:hover{background:#818cf8}.generate-ref-btn:disabled{opacity:.5;cursor:not-allowed}.ref-actions{flex:1;display:flex;flex-direction:column;gap:8px}.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.attacks-section{padding:8px 0}.attack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.no-attacks{text-align:center;padding:20px;color:#888}.no-attacks p{margin-bottom:12px}.generate-attack-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:var(--admin-accent, #6366f1);color:#fff;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.action-btn:hover{background:#818cf8;transform:translateY(-1px)}.action-btn:active{transform:translateY(0)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.action-btn.generate-both{background:#6366f180}.batch-actions{display:flex;gap:10px;padding-top:16px;margin-top:8px;border-top:1px solid rgba(255,255,255,.1)}.batch-actions .action-btn{flex:1}.action-btn.batch-gen{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.action-btn.batch-bg{background:linear-gradient(135deg,#f59e0b,#ef4444)}@media(max-width:768px){.monster-card-header{flex-wrap:wrap;gap:10px}.header-stats{order:3;width:100%;justify-content:flex-start}.mood-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.ref-content{flex-direction:column}.ref-image-wrapper{width:100%;display:flex;justify-content:center}.batch-actions{flex-direction:column}}.violatte-admin{width:100%;min-height:100vh;background:#1a0f0a;color:#e8dcc8;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.admin-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background:linear-gradient(180deg,#2d1810f2,#1a0f0acc);border-bottom:2px solid #4a3020;position:sticky;top:0;z-index:100}.asset-stats-bar{display:flex;justify-content:center;gap:2rem;padding:1rem;background:linear-gradient(135deg,#8b451326,#4a302033);border-bottom:1px solid #4a3020;flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-value{font-size:1.75rem;font-weight:700;color:#d4a574;text-shadow:0 2px 4px rgba(0,0,0,.5)}.stat-label{font-size:.7rem;color:#a08060;text-transform:uppercase;letter-spacing:.5px}@media(max-width:600px){.asset-stats-bar{gap:1rem;padding:.75rem}.stat-value{font-size:1.25rem}.stat-label{font-size:.6rem}}.admin-header h1{color:#d4a574;font-size:1.5rem;margin:0}.admin-back-btn{padding:.5rem 1rem;background:transparent;border:2px solid #4a3020;color:#d4a574;border-radius:6px;cursor:pointer;font-weight:700;transition:all .2s}.admin-back-btn:hover{background:#d4a5741a;border-color:#d4a574}.admin-logout-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#ff6b6b,#d32f2f);border:none;color:#fff;border-radius:6px;cursor:pointer;font-weight:700;transition:all .2s}.admin-logout-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b4d}.admin-logout-btn:active{transform:translateY(0)}.header-controls{display:flex;align-items:center;gap:1rem}.provider-selector{display:flex;align-items:center;gap:.5rem}.provider-selector label{color:#a08060;font-size:.85rem}.provider-selector select{padding:.4rem .75rem;background:#0006;border:1px solid #4a3020;border-radius:4px;color:#d4a574;font-size:.85rem;cursor:pointer}.provider-selector select:hover{border-color:#d4a574}.generation-status{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:#d4a5741a;border-bottom:1px solid #4a3020;animation:statusSlideIn .3s ease}@keyframes statusSlideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.generation-status.error{background:#f4433626;border-color:#c62828}.generation-status.success{background:#4caf5026;border-color:#2e7d32}.generation-status.pending{background:#ff980026;border-color:#e65100}.status-icon{font-size:1.25rem}.status-text{flex:1;color:#e8dcc8;font-size:.9rem}.status-dismiss{background:transparent;border:none;color:#a08060;font-size:1.5rem;cursor:pointer;padding:0 .5rem;line-height:1}.status-dismiss:hover{color:#d4a574}.batch-progress-bar{padding:.75rem 1.5rem;background:#0006;border-bottom:1px solid #4a3020}.progress-info{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.85rem;color:#a08060}.progress-info .error-count{color:#e57373}.progress-track{height:8px;background:#00000080;border-radius:4px;overflow:hidden}.progress-track .progress-fill{height:100%;background:linear-gradient(90deg,#d4a574,#e8b896);border-radius:4px;transition:width .3s ease}.grid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.grid-header h3{margin:0}.batch-generate-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#d4a574,#c49464);border:none;border-radius:6px;color:#1a0f0a;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s}.batch-generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #d4a5744d}.batch-generate-btn:disabled{opacity:.5;cursor:not-allowed}.generating-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;border-radius:inherit;z-index:10}.spinner{width:30px;height:30px;border:3px solid rgba(212,165,116,.3);border-top-color:#d4a574;border-radius:50%;animation:spin 1s linear infinite}.generated-item.generating,.attack-item.generating,.background-item.generating{pointer-events:none}.generate-attacks-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.generate-btn{padding:.75rem 1.25rem;background:linear-gradient(135deg,#4a3020,#3a2415);border:2px solid #d4a574;border-radius:6px;color:#d4a574;font-weight:700;cursor:pointer;transition:all .2s}.generate-btn:hover:not(:disabled){background:linear-gradient(135deg,#d4a574,#c49464);color:#1a0f0a}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.generate-btn.small{padding:.4rem .75rem;font-size:.8rem}.generate-order-categories{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}.order-gen-category h4{color:#d4a574;margin:0 0 .5rem;text-transform:capitalize}.admin-tabs{display:flex;gap:.25rem;padding:.5rem 1rem;background:#0000004d;border-bottom:1px solid #4a3020}.tab-btn{padding:.75rem 1.5rem;background:transparent;border:1px solid transparent;border-bottom:none;color:#a08060;font-size:.9rem;cursor:pointer;border-radius:6px 6px 0 0;transition:all .2s}.tab-btn:hover{background:#d4a5741a;color:#d4a574}.tab-btn.active{background:#d4a57433;border-color:#4a3020;color:#d4a574;font-weight:700}.admin-content{display:grid;grid-template-columns:350px 1fr;gap:1rem;padding:1rem;min-height:calc(100vh - 120px)}.admin-panel.full-width{grid-column:1 / -1}@media(max-width:1200px){.admin-content{grid-template-columns:1fr}}.admin-panel{background:#0000004d;border:1px solid #4a3020;border-radius:8px;padding:1rem}.admin-panel h2{color:#d4a574;font-size:1.1rem;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid #4a3020}.admin-panel h3{color:#a08060;font-size:.9rem;margin:1rem 0 .5rem}.monsters-panel{grid-column:1 / -1;background:transparent;border:none;padding:0}.monsters-header{background:#0000004d;border:1px solid #4a3020;border-radius:8px;padding:1rem;margin-bottom:1rem}.monsters-header h2{color:#d4a574;font-size:1.1rem;margin:0 0 .5rem}.monsters-header .section-desc{color:#a08060;font-size:.85rem;margin:0}.provider-hint{margin-top:.75rem;padding:.5rem .75rem;background:#6366f133;border-radius:4px;font-size:.75rem;color:#a5b4fc}.monster-cards-list{display:flex;flex-direction:column;gap:0}.control-group{margin-bottom:1rem}.control-group label{display:block;color:#a08060;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem}.monster-select{display:flex;flex-direction:column;gap:.5rem}.monster-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#0000004d;border:2px solid #3a2520;border-radius:6px;color:#e8dcc8;cursor:pointer;transition:all .2s;text-align:left}.monster-btn:hover{background:#d4a5741a;border-color:#5a4030}.monster-btn.active{background:#d4a57433;border-color:#d4a574}.monster-btn:disabled{opacity:.5;cursor:not-allowed}.monster-icon{font-size:1.5rem}.state-select{display:flex;gap:.5rem}.state-btn{flex:1;padding:.6rem 1rem;background:#4caf501a;border:2px solid #66bb6a;border-radius:6px;color:#66bb6a;cursor:pointer;font-weight:700;transition:all .2s}.state-btn:hover{background:#4caf5033}.state-btn.active{background:#4caf504d}.state-btn.enraged{background:#f443361a;border-color:#ef5350;color:#ef5350}.state-btn.enraged:hover{background:#f4433633}.state-btn.enraged.active{background:#f443364d}.state-btn:disabled{opacity:.5;cursor:not-allowed}.mood-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}.mood-btn{padding:.5rem;background:#0000004d;border:1px solid #3a2520;border-radius:4px;color:#a08060;cursor:pointer;font-size:.8rem;transition:all .2s}.mood-btn:hover{background:#d4a5741a;border-color:#5a4030;color:#d4a574}.mood-btn.active{background:#d4a57433;border-color:#d4a574;color:#d4a574}.mood-btn:disabled{opacity:.5;cursor:not-allowed}.generate-btn{width:100%;padding:.75rem 1rem;border:none;border-radius:6px;font-weight:700;cursor:pointer;transition:all .2s;margin-bottom:.5rem}.generate-btn.single{background:linear-gradient(135deg,#d4a574,#a08060);color:#1a0f0a}.generate-btn.single:hover{transform:translateY(-2px);box-shadow:0 4px 12px #d4a57466}.generate-btn.batch{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff}.generate-btn.batch:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2196f366}.generate-btn.full{background:linear-gradient(135deg,#ef5350,#c62828);color:#fff;padding:1rem;font-size:1rem}.generate-btn.full:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f4433666}.generate-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.batch-controls{border-top:1px solid #4a3020;padding-top:1rem;margin-top:1rem}.progress-section{margin-top:1rem;padding:1rem;background:#0000004d;border-radius:6px}.progress-bar{width:100%;height:8px;background:#00000080;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#d4a574,#ffc107);border-radius:4px;transition:width .3s ease}.progress-text{margin:.5rem 0 0;color:#a08060;font-size:.85rem;text-align:center}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #4a3020}.preview-header h2{margin:0;border:none;padding:0}.clear-btn{padding:.4rem .8rem;background:transparent;border:1px solid #4a3020;color:#a08060;border-radius:4px;cursor:pointer;font-size:.8rem}.clear-btn:hover{background:#f443361a;border-color:#ef5350;color:#ef5350}.current-preview{text-align:center;margin-bottom:1.5rem}.current-preview h3{color:#d4a574;margin:0 0 1rem}.preview-image-container{width:100%;max-width:400px;aspect-ratio:3/4;margin:0 auto 1rem;background:linear-gradient(135deg,#3d2520,#1a0f0a);border:3px solid #4a3020;border-radius:12px;overflow:hidden;position:relative}.preview-image-container img{width:100%;height:100%;object-fit:cover}.preview-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:5rem;opacity:.3}.preview-desc{color:#a8a8a8;font-size:.85rem;font-style:italic;margin:0;padding:0 1rem}.generated-grid{border-top:1px solid #4a3020;padding-top:1rem}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}.generated-item{aspect-ratio:1;background:#0000004d;border:2px solid #3a2520;border-radius:6px;overflow:hidden;position:relative}.generated-item.success{border-color:#66bb6a}.generated-item.error{border-color:#ef5350}.generated-item img{width:100%;height:100%;object-fit:cover}.generated-item .filename{position:absolute;bottom:0;left:0;right:0;padding:.25rem;background:#000c;color:#a08060;font-size:.6rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.generated-item.missing{border-color:#555;border-style:dashed;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:.5rem}.missing-placeholder{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:#a8a8a8}.missing-icon{font-size:1.5rem;opacity:.5}.missing-name{font-size:.7rem;text-align:center;word-break:break-word}.generated-item.missing .generate-btn{padding:.25rem .5rem;font-size:.65rem}.log-panel{max-height:calc(100vh - 110px);display:flex;flex-direction:column}.log-entries{flex:1;overflow-y:auto;font-family:Courier New,monospace;font-size:.75rem}.log-entry{display:flex;gap:.5rem;padding:.25rem 0;border-bottom:1px solid rgba(74,48,32,.3)}.log-time{color:#666;flex-shrink:0}.log-message{color:#a08060}.log-entry.success .log-message{color:#66bb6a}.log-entry.error .log-message{color:#ef5350}.log-entry.info .log-message{color:#2196f3}.log-empty{color:#666;font-style:italic;text-align:center;padding:2rem}.monster-type{font-size:.7rem;color:#a8a8a8;text-transform:capitalize}.mood-btn.has-image{border-color:#66bb6a}.mood-btn.missing{border-color:#ffb74d;opacity:.7}.generated-item.selected{border-color:#ffc107;box-shadow:0 0 10px #ffc10766}.generated-item:hover{cursor:pointer;transform:scale(1.05);transition:transform .2s}.section-desc{color:#a8a8a8;font-size:.9rem;font-style:italic;margin-bottom:1.5rem;padding:.75rem 1rem;background:#0000004d;border-left:3px solid #8b0000;border-radius:0 8px 8px 0}.attacks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.attack-item{border:2px solid #8b0000;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#8b00001a,#0000004d);transition:transform .2s,box-shadow .2s}.attack-item:hover{transform:scale(1.02);box-shadow:0 8px 24px #8b000066}.attack-item img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}.attack-name{display:block;padding:.5rem;background:#8b0000cc;color:#fcc;text-align:center;font-size:.85rem;text-transform:capitalize}.backgrounds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1rem}.background-item{border:2px solid #4a3020;border-radius:8px;overflow:hidden}.background-item img{width:100%;height:auto;display:block}.bg-name{display:block;padding:.5rem;background:#000c;color:#d4a574;text-align:center;font-size:.9rem}.order-category{margin-bottom:2rem}.order-category h3{text-transform:capitalize;color:#d4a574;border-bottom:1px solid #4a3020;padding-bottom:.5rem;margin-bottom:1rem}.no-assets{text-align:center;padding:2rem;color:#a8a8a8}.no-assets .hint{color:#a08060;margin-top:1rem}.no-assets ul{text-align:left;display:inline-block;margin-top:.5rem;color:#666;font-size:.85rem}.no-assets code{background:#00000080;padding:.2rem .5rem;border-radius:3px;font-family:monospace}.prompt-info{color:#a8a8a8;font-size:.9rem;margin-bottom:1.5rem;line-height:1.6}.prompt-info code{background:#00000080;padding:.2rem .5rem;border-radius:3px;font-family:monospace;color:#d4a574}.prompts-section{margin-top:1rem}.prompts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.75rem;margin-bottom:2rem}.prompt-card{background:#0000004d;border:1px solid #3a2520;border-radius:6px;padding:.75rem;cursor:pointer;transition:all .2s;position:relative}.prompt-card:hover{background:#d4a5741a;border-color:#5a4030}.prompt-card.has-image{border-left:3px solid #66bb6a}.prompt-card.enraged{border-left:3px solid #ef5350}.prompt-card.enraged.has-image{border-left:3px solid #ffb74d}.prompt-card h4{color:#d4a574;font-size:.9rem;margin:0 0 .5rem;text-transform:capitalize}.prompt-card p{color:#a8a8a8;font-size:.75rem;margin:0;line-height:1.4;max-height:60px;overflow:hidden;text-overflow:ellipsis}.prompt-card.copied{border-color:#66bb6a;background:#4caf501a}.copied-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#66bb6a;color:#fff;padding:.5rem 1rem;border-radius:4px;font-weight:700;font-size:.85rem}.prompts-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #4a3020}.prompts-header h2{margin:0;padding:0;border:none}.prompts-actions{display:flex;align-items:center;gap:1rem}.unsaved-indicator{color:#ffb74d;font-size:.85rem;font-style:italic;animation:pulse-warn 1.5s ease-in-out infinite}@keyframes pulse-warn{0%,to{opacity:1}50%{opacity:.6}}.prompt-category-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.category-tab{padding:.6rem 1.25rem;background:#0000004d;border:1px solid #3a2520;border-radius:6px;color:#a08060;cursor:pointer;font-size:.85rem;transition:all .2s}.category-tab:hover{background:#d4a5741a;border-color:#5a4030;color:#d4a574}.category-tab.active{background:#d4a57433;border-color:#d4a574;color:#d4a574;font-weight:700}.reset-category-btn{display:inline-block;padding:.5rem 1rem;background:transparent;border:1px solid #ef5350;color:#ef5350;border-radius:4px;cursor:pointer;font-size:.8rem;margin-bottom:1.5rem;transition:all .2s}.reset-category-btn:hover{background:#f443361a}.prompts-grid.editable{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.prompts-grid.wide{grid-template-columns:1fr}.prompt-card.editable{cursor:default;padding:.75rem 1rem}.prompt-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.prompt-card-header h4{margin:0}.prompt-card-actions{display:flex;gap:.4rem;flex-shrink:0}.edit-btn,.copy-btn{padding:.3rem .6rem;background:#0006;border:1px solid #4a3020;color:#a08060;border-radius:4px;cursor:pointer;font-size:.7rem;transition:all .2s}.edit-btn:hover{background:#2196f333;border-color:#2196f3;color:#2196f3}.copy-btn:hover{background:#4caf5033;border-color:#66bb6a;color:#66bb6a}.prompt-preview{color:#777;font-size:.7rem;margin:0;line-height:1.4;word-break:break-word}.attack-prompt,.background-prompt{background:#f443360d}.order-prompt{background:#2196f30d}.order-prompt-category{margin-bottom:2rem}.order-prompt-category h3{color:#d4a574;font-size:1rem;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid #4a3020}.prompts-editor .save-btn{padding:.5rem 1.25rem;background:linear-gradient(135deg,#66bb6a,#388e3c);border:none;color:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:.9rem;transition:all .2s}.prompts-editor .save-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.prompts-editor .save-btn:disabled{opacity:.5;cursor:not-allowed;background:#555}.prompt-edit-modal-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.prompt-edit-modal{background:linear-gradient(135deg,#2d1810,#1a0f0a);border:2px solid #4a3020;border-radius:12px;padding:1.5rem;width:100%;max-width:700px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080}.prompt-edit-modal h3{color:#d4a574;font-size:1.2rem;margin:0 0 1rem;text-transform:capitalize}.prompt-edit-modal textarea{width:100%;min-height:200px;padding:1rem;background:#00000080;border:1px solid #4a3020;border-radius:8px;color:#e8dcc8;font-family:Courier New,monospace;font-size:.9rem;line-height:1.6;resize:vertical;box-sizing:border-box}.prompt-edit-modal textarea:focus{outline:none;border-color:#d4a574;box-shadow:0 0 10px #d4a57433}.modal-hint{margin:1rem 0;padding:.75rem;background:#0000004d;border-radius:6px;border-left:3px solid #2196f3}.modal-hint p{color:#a8a8a8;font-size:.8rem;margin:0 0 .5rem}.modal-hint code{display:inline-block;background:#00000080;padding:.15rem .5rem;border-radius:3px;font-family:monospace;color:#2196f3;font-size:.75rem;margin:.25rem .5rem .25rem 0}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}.modal-actions .cancel-btn{padding:.6rem 1.25rem;background:transparent;border:1px solid #4a3020;color:#a08060;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s}.modal-actions .cancel-btn:hover{background:#ffffff0d;border-color:#a8a8a8;color:#ccc}.modal-actions .save-btn{padding:.6rem 1.25rem;background:linear-gradient(135deg,#66bb6a,#388e3c);border:none;color:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:.9rem;transition:all .2s}.modal-actions .save-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}@media(max-width:768px){.admin-header{flex-direction:column;gap:.5rem;text-align:center}.admin-header h1{font-size:1.25rem}.admin-tabs{flex-wrap:wrap}.tab-btn{flex:1 1 auto;padding:.5rem 1rem;font-size:.8rem}.admin-content{grid-template-columns:1fr}.log-panel{max-height:300px}.preview-image-container{max-width:280px}.backgrounds-grid,.prompts-grid{grid-template-columns:1fr}.prompts-header{flex-direction:column;gap:.75rem;text-align:center}.prompts-actions{flex-direction:column;gap:.5rem}.prompt-category-tabs{justify-content:center}.category-tab{flex:1 1 45%;text-align:center;padding:.5rem .75rem;font-size:.8rem}.prompt-edit-modal{padding:1rem;max-height:80vh}.prompt-edit-modal textarea{min-height:150px;font-size:.8rem}.modal-hint code{font-size:.65rem}.prompt-card-actions{flex-direction:column;gap:.3rem}.edit-btn,.copy-btn{width:100%;text-align:center}}.thumbnail-actions{position:absolute;top:4px;right:4px;display:flex;gap:4px;z-index:10}.thumbnail-actions .refresh-btn{opacity:1}.thumbnail-actions .rotate-btn,.thumbnail-actions .flip-btn,.thumbnail-actions .remove-bg-btn,.thumbnail-actions .edit-btn{opacity:0;transition:opacity .2s ease}.generated-item:hover .thumbnail-actions .rotate-btn,.generated-item:hover .thumbnail-actions .flip-btn,.generated-item:hover .thumbnail-actions .remove-bg-btn,.generated-item:hover .thumbnail-actions .edit-btn,.attack-item:hover .thumbnail-actions .rotate-btn,.attack-item:hover .thumbnail-actions .flip-btn,.attack-item:hover .thumbnail-actions .remove-bg-btn,.attack-item:hover .thumbnail-actions .edit-btn,.background-item:hover .thumbnail-actions .rotate-btn,.background-item:hover .thumbnail-actions .flip-btn,.background-item:hover .thumbnail-actions .remove-bg-btn,.background-item:hover .thumbnail-actions .edit-btn{opacity:1}.attack-item,.background-item{position:relative}.attack-item .thumbnail-actions,.background-item .thumbnail-actions{top:8px;right:8px}.thumb-action-btn{width:28px;height:28px;padding:5px;background:#1a0f0ae6;border:1px solid #4a3020;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.thumb-action-btn svg{width:14px;height:14px;color:#a08060;transition:color .2s ease}.thumb-action-btn.refresh-btn:hover{background:#2196f34d;border-color:#2196f3}.thumb-action-btn.refresh-btn:hover svg{color:#2196f3}.thumb-action-btn.rotate-btn:hover{background:#9c27b04d;border-color:#ba68c8}.thumb-action-btn.rotate-btn:hover svg{color:#ba68c8}.thumb-action-btn.flip-btn:hover{background:#00bcd44d;border-color:#00bcd4}.thumb-action-btn.flip-btn:hover svg{color:#00bcd4}.thumb-action-btn.remove-bg-btn:hover{background:#4caf504d;border-color:#4caf50}.thumb-action-btn.remove-bg-btn:hover svg{color:#4caf50}.thumb-action-btn.edit-btn:hover{background:#ffc1074d;border-color:#ffc107}.thumb-action-btn.edit-btn:hover svg{color:#ffc107}.attack-item .thumb-action-btn,.background-item .thumb-action-btn{width:32px;height:32px;padding:6px}.attack-item .thumb-action-btn svg,.background-item .thumb-action-btn svg{width:16px;height:16px}@media(hover:none){.thumbnail-actions{opacity:1}}.reference-panel{background:linear-gradient(135deg,#2196f314,#1565c00d);border:1px solid rgba(33,150,243,.3)}.reference-panel h2{color:#64b5f6}.reference-content{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}.reference-image-container{position:relative;width:200px;height:280px;background:#0006;border:2px solid #3a2520;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.reference-image{width:100%;height:100%;object-fit:cover}.reference-badge{position:absolute;top:8px;right:8px;background:#2196f3e6;color:#fff;padding:4px 10px;border-radius:4px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.no-reference{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#666;text-align:center;padding:1rem}.no-ref-icon{font-size:2.5rem;opacity:.5}.reference-controls{flex:1;display:flex;flex-direction:column;gap:1rem;min-width:250px}.generate-ref-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;background:linear-gradient(135deg,#2196f333,#1565c033);border:2px solid #2196f3;border-radius:8px;color:#64b5f6;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .2s}.generate-ref-btn:hover:not(:disabled){background:linear-gradient(135deg,#2196f34d,#1565c04d);transform:translateY(-1px);box-shadow:0 4px 12px #2196f34d}.generate-ref-btn:disabled{opacity:.6;cursor:not-allowed}.generate-ref-btn.generating{animation:pulse 1.5s ease-in-out infinite}.spinner-inline{display:inline-block;width:16px;height:16px;border:2px solid rgba(100,181,246,.3);border-top-color:#64b5f6;border-radius:50%;animation:spin 1s linear infinite}.use-reference-toggle{background:#0003;padding:1rem;border-radius:8px;border:1px solid #3a2520}.toggle-label{display:flex;align-items:center;gap:.75rem;cursor:pointer;color:#e8dcc8}.toggle-label input[type=checkbox]{width:18px;height:18px;accent-color:#2196f3;cursor:pointer}.toggle-text{font-size:.95rem}.strength-slider{margin-top:1rem;padding-top:1rem;border-top:1px solid #3a2520}.strength-slider label{display:flex;flex-direction:column;gap:.5rem;color:#a08060;font-size:.85rem}.strength-slider input[type=range]{width:100%;height:6px;background:#3a2520;border-radius:3px;appearance:none;cursor:pointer}.strength-slider input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#2196f3;border-radius:50%;cursor:pointer;transition:transform .2s}.strength-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.strength-hint{font-size:.75rem;color:#666;font-style:italic;margin-top:.5rem}.ref-hint{color:#666;font-size:.85rem;font-style:italic;margin:0}@media(max-width:600px){.reference-content{flex-direction:column;align-items:stretch}.reference-image-container{width:100%;height:250px}.reference-controls{min-width:auto}}.monster-btn.tutorial{border-color:#ffc107;background:#ffc1071a}.monster-btn.tutorial.active{border-color:#ffc107;background:#ffc10740}.monster-name{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.tutorial-badge{display:inline-block;padding:2px 6px;background:linear-gradient(135deg,#ffc107,#ff9800);color:#1a0f0a;font-size:.6rem;font-weight:700;border-radius:3px;text-transform:uppercase;letter-spacing:.5px;animation:tutorial-glow 2s ease-in-out infinite}@keyframes tutorial-glow{0%,to{box-shadow:0 0 4px #ffc10766}50%{box-shadow:0 0 10px #ffc107b3}}.ref-type-selector{display:flex;gap:.5rem;margin-bottom:1rem}.ref-type-btn{flex:1;padding:.6rem 1rem;background:#0000004d;border:2px solid #3a2520;border-radius:6px;color:#a08060;cursor:pointer;font-size:.85rem;font-weight:700;transition:all .2s;text-align:center}.ref-type-btn:hover{background:#d4a5741a;border-color:#5a4030}.ref-type-btn.active{background:#4caf5033;border-color:#66bb6a;color:#66bb6a}.ref-type-btn.monster{color:#a08060}.ref-type-btn.monster:hover{border-color:#8b0000;color:#ef5350}.ref-type-btn.monster.active{background:#8b000033;border-color:#ef5350;color:#ef5350}.dual-reference-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.reference-col{display:flex;flex-direction:column;gap:.75rem}.reference-col h4{color:#d4a574;font-size:.9rem;margin:0;text-align:center}.reference-col.monster h4{color:#ef5350}.reference-col .reference-image-container{width:100%;height:220px}.reference-col .generate-ref-btn{font-size:.85rem;padding:.6rem 1rem}.reference-col.monster .generate-ref-btn{background:linear-gradient(135deg,#8b000033,#64000033);border-color:#8b0000;color:#ef5350}.reference-col.monster .generate-ref-btn:hover:not(:disabled){background:linear-gradient(135deg,#8b00004d,#6400004d);box-shadow:0 4px 12px #8b00004d}@media(max-width:600px){.dual-reference-container{grid-template-columns:1fr}.reference-col .reference-image-container{height:200px}}.settings-panel{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}@media(max-width:900px){.settings-panel{grid-template-columns:1fr}}.settings-section{background:#0000004d;border:1px solid #4a3020;border-radius:8px;padding:1rem}.settings-section h3{color:#d4a574;font-size:1rem;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid #4a3020;display:flex;align-items:center;gap:.5rem}.settings-section h3 .icon{font-size:1.2rem}.settings-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(max-width:600px){.settings-controls{grid-template-columns:1fr}}.setting-item{display:flex;flex-direction:column;gap:.4rem}.setting-item.full-width{grid-column:1 / -1}.setting-item label{color:#a08060;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}.slider-with-value{display:flex;align-items:center;gap:.75rem}.slider-with-value input[type=range]{flex:1;height:6px;background:#3a2520;border-radius:3px;appearance:none;cursor:pointer}.slider-with-value input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:#d4a574;border-radius:50%;cursor:pointer;transition:transform .2s,background .2s}.slider-with-value input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:#e8b896}.slider-with-value .value{min-width:45px;padding:.3rem .5rem;background:#0006;border:1px solid #4a3020;border-radius:4px;color:#d4a574;font-size:.8rem;text-align:center;font-family:monospace}.color-picker-row{display:flex;align-items:center;gap:.5rem}.color-picker-row input[type=color]{width:40px;height:30px;border:2px solid #4a3020;border-radius:4px;cursor:pointer;background:transparent;padding:0}.color-picker-row input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.color-picker-row input[type=color]::-webkit-color-swatch{border-radius:2px;border:none}.color-picker-row .color-value{padding:.3rem .5rem;background:#0006;border:1px solid #4a3020;border-radius:4px;color:#d4a574;font-size:.75rem;font-family:monospace}.enable-toggle{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#0003;border-radius:6px;margin-bottom:1rem;cursor:pointer}.enable-toggle input[type=checkbox]{width:18px;height:18px;accent-color:#66bb6a;cursor:pointer}.enable-toggle span{color:#e8dcc8;font-size:.9rem}.kb-preview-container{position:relative;width:100%;height:200px;background:linear-gradient(135deg,#3d2520,#1a0f0a);border:2px solid #4a3020;border-radius:8px;overflow:hidden;margin-top:1rem}.kb-preview-image{width:100%;height:100%;object-fit:cover;transform-origin:var(--kb-origin-x, 50%) var(--kb-origin-y, 50%);animation:kenBurnsPreview var(--kb-duration, 8s) ease-in-out infinite alternate}@keyframes kenBurnsPreview{0%{transform:scale(var(--kb-zoom-start, 1))}to{transform:scale(var(--kb-zoom-end, 1.15))}}.kb-preview-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#666;text-align:center}.kb-preview-placeholder .icon{font-size:3rem;opacity:.5;margin-bottom:.5rem}.kb-preview-label{position:absolute;bottom:8px;left:8px;padding:4px 8px;background:#000000b3;border-radius:4px;color:#a08060;font-size:.7rem}.attack-preview-container{position:relative;width:100%;height:200px;background:linear-gradient(135deg,#8b000033,#1a0f0a);border:2px solid #8b0000;border-radius:8px;overflow:hidden;margin-top:1rem}.attack-preview-image{width:100%;height:100%;object-fit:cover}.attack-preview-container.flash:before{content:"";position:absolute;inset:0;background:var(--attack-flash-color, rgba(255, 0, 0, .5));animation:attackFlash var(--attack-flash-duration, .15s) ease-out;pointer-events:none;z-index:10}@keyframes attackFlash{0%{opacity:1}to{opacity:0}}.attack-preview-container.shake{animation:attackShake .3s ease-out}@keyframes attackShake{0%,to{transform:translate(0)}10%{transform:translate(calc(var(--shake-intensity, 5px) * -1))}20%{transform:translate(var(--shake-intensity, 5px))}30%{transform:translate(calc(var(--shake-intensity, 5px) * -.8))}40%{transform:translate(calc(var(--shake-intensity, 5px) * .8))}50%{transform:translate(calc(var(--shake-intensity, 5px) * -.6))}60%{transform:translate(calc(var(--shake-intensity, 5px) * .6))}70%{transform:translate(calc(var(--shake-intensity, 5px) * -.4))}80%{transform:translate(calc(var(--shake-intensity, 5px) * .4))}90%{transform:translate(calc(var(--shake-intensity, 5px) * -.2))}}.attack-preview-container.zoom .attack-preview-image{animation:attackZoom .3s ease-out}@keyframes attackZoom{0%{transform:scale(var(--attack-zoom, 1.1))}to{transform:scale(1)}}.attack-preview-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#8b0000;text-align:center}.attack-preview-placeholder .icon{font-size:3rem;opacity:.5;margin-bottom:.5rem}.attack-preview-label{position:absolute;bottom:8px;left:8px;padding:4px 8px;background:#8b0000cc;border-radius:4px;color:#fcc;font-size:.7rem}.preview-test-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#8b0000,#600000);border:none;border-radius:6px;color:#fcc;font-weight:700;font-size:.85rem;cursor:pointer;transition:all .2s;margin-top:.75rem}.preview-test-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #8b000066}.settings-actions{display:flex;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #4a3020;flex-wrap:wrap}.settings-actions .save-btn{padding:.6rem 1.5rem;background:linear-gradient(135deg,#66bb6a,#388e3c);border:none;color:#fff;border-radius:6px;cursor:pointer;font-weight:700;font-size:.9rem;transition:all .2s}.settings-actions .save-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.settings-actions .export-btn{padding:.6rem 1.5rem;background:transparent;border:2px solid #2196f3;color:#64b5f6;border-radius:6px;cursor:pointer;font-weight:700;font-size:.9rem;transition:all .2s}.settings-actions .export-btn:hover{background:#2196f31a;transform:translateY(-2px)}.settings-actions .reset-btn{padding:.6rem 1.5rem;background:transparent;border:2px solid #ef5350;color:#ef5350;border-radius:6px;cursor:pointer;font-weight:700;font-size:.9rem;transition:all .2s;margin-left:auto}.settings-actions .reset-btn:hover{background:#f443361a}.settings-monster-select{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.settings-monster-btn{padding:.5rem 1rem;background:#0000004d;border:1px solid #3a2520;border-radius:4px;color:#a08060;cursor:pointer;font-size:.8rem;transition:all .2s}.settings-monster-btn:hover{background:#d4a5741a;border-color:#5a4030}.settings-monster-btn.active{background:#d4a57433;border-color:#d4a574;color:#d4a574;font-weight:700}.settings-monster-btn.tutorial{border-color:#ffc107}.settings-monster-btn.tutorial.active{border-color:#ffc107;background:#ffc10733}.sequence-section{margin-top:2rem;padding-top:2rem;border-top:2px solid #3a2520}.sequence-section.full-width{grid-column:1 / -1}.sequence-preview-controls{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.preview-sequence-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#e94560,#c73e54);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #e945604d}.preview-sequence-btn:hover{background:linear-gradient(135deg,#ff6b6b,#e94560);transform:translateY(-2px);box-shadow:0 6px 16px #e9456066}.reset-sequence-btn{padding:.75rem 1.5rem;background:transparent;border:2px solid #5a4030;border-radius:8px;color:#a08060;font-size:.9rem;cursor:pointer;transition:all .2s}.reset-sequence-btn:hover{border-color:#d4a574;color:#d4a574}.open-timeline-btn{padding:.75rem 1.5rem;background:linear-gradient(135deg,#533483,#3d2664);border:none;border-radius:8px;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #5334834d}.open-timeline-btn:hover{background:linear-gradient(135deg,#6b44a8,#533483);transform:translateY(-2px);box-shadow:0 6px 16px #53348366}.timeline-editor-overlay{position:fixed;inset:0;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.phase-timeline-overview{display:flex;gap:2px;margin-bottom:1.5rem;background:#0000004d;border-radius:8px;overflow:hidden}.phase-timeline-block{flex:1;display:flex;flex-direction:column;align-items:center;padding:.75rem .5rem;background:linear-gradient(135deg,#2d1810,#3a2520);cursor:default;transition:all .2s;min-width:60px}.phase-timeline-block:hover{background:linear-gradient(135deg,#3a2520,#4a3530)}.phase-timeline-block.customized{background:linear-gradient(135deg,#4a2020,#5a3030);border-bottom:2px solid #e94560}.phase-timeline-block .phase-num{font-size:.7rem;color:#666;margin-bottom:2px}.phase-timeline-block .phase-name{font-size:.75rem;color:#d4a574;font-weight:600;text-transform:capitalize}.phase-timeline-block .phase-duration{font-size:.65rem;color:#888;margin-top:2px}.phase-controls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:1.5rem}.phase-control-card{background:#0000004d;border:1px solid #3a2520;border-radius:8px;padding:1rem;transition:all .2s}.phase-control-card:hover{border-color:#5a4030}.phase-card-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid #3a2520}.phase-card-header .phase-index{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#e94560;border-radius:50%;font-size:.75rem;font-weight:700;color:#fff}.phase-card-header h4{margin:0;color:#d4a574;font-size:.9rem;text-transform:capitalize}.phase-control-row{margin-bottom:.75rem}.phase-control-row label{display:block;font-size:.75rem;color:#888;margin-bottom:.25rem}.phase-control-row select{width:100%;padding:.5rem;background:#00000080;border:1px solid #3a2520;border-radius:4px;color:#e8dcc8;font-size:.85rem;cursor:pointer}.phase-control-row select:focus{outline:none;border-color:#d4a574}.phase-control-row .slider-with-value{display:flex;align-items:center;gap:.5rem}.phase-control-row .slider-with-value input[type=range]{flex:1;height:6px;background:#2a1a10;border-radius:3px;-webkit-appearance:none;cursor:pointer}.phase-control-row .slider-with-value input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#d4a574;border-radius:50%;cursor:pointer}.phase-control-row .slider-with-value .value-display{min-width:50px;text-align:right;font-size:.8rem;color:#d4a574;font-weight:500}.reset-phase-btn{width:100%;padding:.4rem;background:transparent;border:1px solid #3a2520;border-radius:4px;color:#888;font-size:.75rem;cursor:pointer;transition:all .2s;margin-top:.5rem}.reset-phase-btn:hover{border-color:#e94560;color:#e94560}.sequence-total{padding:1rem;background:#0000004d;border-radius:8px;text-align:center;font-size:.9rem;color:#a08060}.sequence-total strong{color:#d4a574;font-size:1.1rem;margin:0 .25rem}.sequence-total .total-hint{color:#666;font-size:.85rem}@media(max-width:600px){.phase-timeline-overview{flex-wrap:wrap}.phase-timeline-block{min-width:calc(25% - 2px);padding:.5rem .25rem}.phase-timeline-block .phase-name{font-size:.65rem}.phase-controls-grid{grid-template-columns:1fr}.sequence-preview-controls{flex-direction:column}.preview-sequence-btn,.open-timeline-btn,.reset-sequence-btn{width:100%;justify-content:center}.timeline-editor-overlay{padding:10px}}.sequence-type-selector{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px;background:#0003;border-radius:8px}.sequence-type-selector>label{font-size:.9rem;color:#9ca3af;white-space:nowrap}.sequence-type-tabs{display:flex;gap:8px;flex-wrap:wrap}.sequence-type-tab{padding:8px 16px;border:2px solid var(--seq-color, #4a5568);background:transparent;color:#e5e7eb;border-radius:20px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s ease}.sequence-type-tab:hover{background:var(--seq-color, #4a5568);color:#fff}.sequence-type-tab.active{background:var(--seq-color, #4a5568);color:#fff;box-shadow:0 2px 8px #0000004d}@media(max-width:600px){.sequence-type-selector{flex-direction:column;align-items:flex-start;gap:8px}.sequence-type-tabs{width:100%}.sequence-type-tab{flex:1;text-align:center;padding:10px 8px}}.scenes-panel{padding:20px}.scenes-content{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.scene-player-section,.scene-editor-section{background:#1e1e2e;border-radius:12px;padding:16px}.scene-player-section h3,.scene-editor-section h3{font-size:16px;font-weight:600;color:#e5e7eb;margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid #3b3b4f}.scenes-batch-controls{display:flex;align-items:center;gap:16px;margin-top:24px;padding:16px;background:#252536;border-radius:8px}.scenes-batch-controls .generate-btn.batch{min-width:200px;padding:12px 24px;font-size:15px}.batch-hint{font-size:13px;color:#9ca3af}.references-panel{padding:20px}@media(max-width:768px){.scenes-content{grid-template-columns:1fr;gap:16px}.scenes-batch-controls{flex-direction:column;align-items:stretch}.scenes-batch-controls .generate-btn.batch{min-width:auto;width:100%}.batch-hint{text-align:center}}@media(max-width:480px){.scenes-panel,.references-panel,.scene-player-section,.scene-editor-section{padding:12px}}.attack-player{display:flex;flex-direction:column;background:#1e1e2e;border-radius:12px;overflow:hidden;-webkit-user-select:none;user-select:none}.attack-player--sm{max-width:320px}.attack-player--md{max-width:480px}.attack-player--lg{max-width:640px}.attack-player__display{position:relative;width:100%;aspect-ratio:4 / 3;background:#0a0a12;overflow:hidden}.attack-player__image-container{position:relative;width:100%;height:100%;overflow:hidden}.attack-player__image{width:100%;height:100%;object-fit:cover;transition:transform .05s linear;will-change:transform}.attack-player__placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#6b7280;font-size:14px}.attack-player__effect-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.attack-player__effect--shake-subtle{animation:shake-subtle .1s infinite}.attack-player__effect--shake-intense{animation:shake-intense .05s infinite}.attack-player__effect--distortion{-webkit-backdrop-filter:blur(1px) saturate(150%);backdrop-filter:blur(1px) saturate(150%);animation:distortion .2s infinite}.attack-player__effect--flash-red{background:#ef444499;animation:flash .15s ease-out}.attack-player__effect--flash-white{background:#fffc;animation:flash .15s ease-out}.attack-player__effect--blur-fade{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0000004d}.attack-player__effect--vignette-dark{box-shadow:inset 0 0 80px 40px #000000b3}.attack-player__effect--chromatic-aberration{animation:chromatic .1s infinite}@keyframes shake-subtle{0%,to{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,2px)}}@keyframes shake-intense{0%,to{transform:translate(0)}25%{transform:translate(-6px,4px)}50%{transform:translate(6px,-4px)}75%{transform:translate(-4px,6px)}}@keyframes distortion{0%,to{transform:skew(0)}50%{transform:skew(.5deg)}}@keyframes flash{0%{opacity:1}to{opacity:0}}@keyframes chromatic{0%,to{filter:none}50%{filter:drop-shadow(-2px 0 #ff0000) drop-shadow(2px 0 #00ffff)}}.attack-player__phase-info{position:absolute;bottom:12px;left:12px;display:flex;align-items:center;gap:12px;padding:8px 12px;background:#000000b3;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:5}.attack-player__phase-name{font-size:14px;font-weight:600;color:#e5e7eb}.attack-player__phase-progress{font-size:12px;color:#9ca3af;font-variant-numeric:tabular-nums}.phase-timeline{padding:12px;background:#252536}.phase-timeline__track{position:relative;height:60px;background:#1a1a2a;border-radius:8px;overflow:hidden}.phase-timeline__progress{position:absolute;top:0;left:0;height:100%;background:#6366f133;transition:width .05s linear}.phase-timeline__phase{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;background:transparent;border:none;border-left:1px solid #3b3b4f;cursor:pointer;transition:background .2s ease}.phase-timeline__phase:first-child{border-left:none}.phase-timeline__phase:hover{background:#6366f126}.phase-timeline__phase--active{background:#6366f140}.phase-timeline__phase--past{opacity:.6}.phase-timeline__thumbnail{position:relative;width:36px;height:36px;border-radius:4px;overflow:hidden;background:#3b3b4f}.phase-timeline__thumb-image{width:100%;height:100%;object-fit:cover}.phase-timeline__thumb-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:14px;font-weight:600;color:#6b7280}.phase-timeline__phase-progress{position:absolute;bottom:0;left:0;height:3px;background:#6366f1;transition:width .05s linear}.phase-timeline__label{font-size:9px;color:#9ca3af;text-transform:uppercase;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.phase-timeline__time{display:flex;justify-content:flex-end;gap:4px;margin-top:8px;font-size:12px;font-variant-numeric:tabular-nums}.phase-timeline__current-time{color:#6366f1}.phase-timeline__separator{color:#6b7280}.phase-timeline__total-time{color:#9ca3af}.playback-controls{padding:12px;background:#1e1e2e;border-top:1px solid #3b3b4f}.playback-controls__seek{height:32px;display:flex;align-items:center;cursor:pointer;margin-bottom:12px}.playback-controls__seek-track{position:relative;width:100%;height:6px;background:#3b3b4f;border-radius:3px}.playback-controls__seek-fill{position:absolute;top:0;left:0;height:100%;background:#6366f1;border-radius:3px;transition:width .05s linear}.playback-controls__seek-thumb{position:absolute;top:50%;width:14px;height:14px;background:#6366f1;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);transition:left .05s linear,transform .15s ease}.playback-controls__seek:hover .playback-controls__seek-thumb{transform:translate(-50%,-50%) scale(1.2)}.playback-controls__main{display:flex;align-items:center;justify-content:center;gap:8px}.playback-controls__btn{display:flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:10px;background:#374151;border:none;border-radius:8px;color:#fff;cursor:pointer;transition:background .2s ease,transform .15s ease}.playback-controls__btn svg{width:20px;height:20px}.playback-controls__btn:hover{background:#4b5563}.playback-controls__btn:active{transform:scale(.95)}.playback-controls__btn--play{width:56px;height:56px;background:#6366f1;border-radius:50%}.playback-controls__btn--play:hover{background:#4f46e5}.playback-controls__btn--play svg{width:24px;height:24px}.playback-controls__btn--toggle{font-size:11px;font-weight:500}.playback-controls__btn--toggle svg{width:16px;height:16px}.playback-controls__btn--active{background:#6366f1}.playback-controls__secondary{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid #3b3b4f}.playback-controls__speed{display:flex;align-items:center;gap:12px}.playback-controls__speed-label{font-size:12px;color:#9ca3af;min-width:80px;font-variant-numeric:tabular-nums}.playback-controls__speed-slider{width:100px;height:6px;-webkit-appearance:none;appearance:none;background:#3b3b4f;border-radius:3px;cursor:pointer}.playback-controls__speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#6366f1;border-radius:50%;cursor:pointer}.playback-controls__speed-slider::-moz-range-thumb{width:16px;height:16px;background:#6366f1;border-radius:50%;border:none;cursor:pointer}@media(max-width:480px){.attack-player{max-width:100%}.attack-player__display{aspect-ratio:16 / 9}.attack-player__phase-info{bottom:8px;left:8px;padding:6px 10px}.attack-player__phase-name{font-size:12px}.phase-timeline{padding:8px}.phase-timeline__track{height:50px}.phase-timeline__thumbnail{width:28px;height:28px}.phase-timeline__label{display:none}.playback-controls{padding:8px}.playback-controls__secondary{flex-direction:column;gap:12px}.playback-controls__speed{width:100%;justify-content:space-between}.playback-controls__speed-slider{flex:1;max-width:none}}.attack-editor{background:#1e1e2e;border-radius:12px;padding:16px}.attack-editor__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px}.attack-editor__title{font-size:18px;font-weight:600;color:#e5e7eb;margin:0}.attack-editor__status{display:flex;align-items:center;gap:12px}.attack-editor__completion{font-size:13px;color:#9ca3af}.attack-editor__progress{font-size:12px;color:#6366f1;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.attack-editor__phases{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:20px}.attack-editor__phase{display:flex;flex-direction:column;align-items:center;padding:8px;background:#252536;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:border-color .2s ease,background .2s ease}.attack-editor__phase:hover{background:#2a2a40}.attack-editor__phase--selected{border-color:#6366f1;background:#6366f11a}.attack-editor__phase--has-image{border-color:#059669}.attack-editor__phase--has-image.attack-editor__phase--selected{border-color:#6366f1}.attack-editor__phase-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#3b3b4f;border-radius:50%;font-size:12px;font-weight:600;color:#9ca3af;margin-bottom:6px}.attack-editor__phase--has-image .attack-editor__phase-number{background:#059669;color:#fff}.attack-editor__phase-name{font-size:10px;color:#9ca3af;text-align:center;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.attack-editor__phase-duration{font-size:10px;color:#6b7280;margin-top:2px}.attack-editor__details{background:#252536;border-radius:8px;padding:16px;margin-bottom:16px}.attack-editor__details-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.attack-editor__details-header h4{font-size:16px;font-weight:600;color:#e5e7eb;margin:0}.attack-editor__advanced-toggle{padding:6px 12px;font-size:12px;color:#9ca3af;background:transparent;border:1px solid #3b3b4f;border-radius:6px;cursor:pointer;transition:color .2s ease,border-color .2s ease}.attack-editor__advanced-toggle:hover{color:#6366f1;border-color:#6366f1}.attack-editor__prompt-section{margin-bottom:16px}.attack-editor__label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#9ca3af;margin-bottom:8px}.attack-editor__reset-btn{padding:2px 8px;font-size:10px;color:#6b7280;background:transparent;border:1px solid #3b3b4f;border-radius:4px;cursor:pointer}.attack-editor__reset-btn:hover{color:#f59e0b;border-color:#f59e0b}.attack-editor__prompt-input{width:100%;padding:12px;font-family:inherit;font-size:13px;color:#e5e7eb;background:#1a1a2a;border:1px solid #3b3b4f;border-radius:6px;resize:vertical;line-height:1.5}.attack-editor__prompt-input:focus{outline:none;border-color:#6366f1}.attack-editor__settings-row{display:flex;gap:16px;flex-wrap:wrap}.attack-editor__setting{flex:1;min-width:120px}.attack-editor__setting label{display:block;font-size:11px;color:#9ca3af;margin-bottom:6px}.attack-editor__input,.attack-editor__select{width:100%;padding:10px 12px;font-size:13px;color:#e5e7eb;background:#1a1a2a;border:1px solid #3b3b4f;border-radius:6px}.attack-editor__input:focus,.attack-editor__select:focus{outline:none;border-color:#6366f1}.attack-editor__ken-burns{margin-top:16px;padding-top:16px;border-top:1px solid #3b3b4f}.attack-editor__section-title{font-size:14px;font-weight:500;color:#9ca3af;margin:0 0 12px}.attack-editor__settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}.attack-editor__setting--wide{grid-column:span 2}.attack-editor__actions{display:flex;gap:12px;flex-wrap:wrap}.attack-editor__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;font-size:14px;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease,transform .15s ease}.attack-editor__btn:active:not(:disabled){transform:scale(.97)}.attack-editor__btn:disabled{opacity:.5;cursor:not-allowed}.attack-editor__btn svg{width:18px;height:18px}.attack-editor__btn--generate-all{background:#6366f1;color:#fff;flex:1}.attack-editor__btn--generate-all:hover:not(:disabled){background:#4f46e5}.attack-editor__btn--preview{background:#374151;color:#fff}.attack-editor__btn--preview:hover:not(:disabled){background:#4b5563}.attack-editor__btn--save{background:#059669;color:#fff}.attack-editor__btn--save:hover:not(:disabled){background:#047857}.attack-editor__spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.phase-image-selector{position:relative}.phase-image-selector--sm .phase-image-selector__preview{width:48px;height:48px}.phase-image-selector--md .phase-image-selector__preview{width:80px;height:80px}.phase-image-selector--lg .phase-image-selector__preview{width:120px;height:120px}.phase-image-selector__preview{position:relative;background:#1a1a2a;border:2px dashed #3b3b4f;border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color .2s ease}.phase-image-selector__preview:hover{border-color:#6366f1}.phase-image-selector__preview--drag-over{border-color:#6366f1;background:#6366f11a}.phase-image-selector__preview--generating{pointer-events:none}.phase-image-selector__image{width:100%;height:100%;object-fit:cover}.phase-image-selector__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;color:#6b7280;gap:4px}.phase-image-selector__icon{width:20px;height:20px}.phase-image-selector__placeholder span{font-size:8px;text-transform:uppercase}.phase-image-selector__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009}.phase-image-selector__spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#6366f1;border-radius:50%;animation:spin .8s linear infinite}.phase-image-selector__quick-actions{position:absolute;top:2px;right:2px;display:flex;flex-direction:column;gap:2px;opacity:0;transition:opacity .2s ease}.phase-image-selector__preview:hover .phase-image-selector__quick-actions{opacity:1}.phase-image-selector__quick-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#000000b3;border:none;border-radius:4px;color:#fff;cursor:pointer}.phase-image-selector__quick-btn:hover{background:#6366f1}.phase-image-selector__quick-btn--danger:hover{background:#ef4444}.phase-image-selector__quick-btn svg{width:14px;height:14px}.phase-image-selector__backdrop{position:fixed;inset:0;background:#00000080;z-index:100}.phase-image-selector__picker{position:absolute;top:100%;left:0;z-index:101;min-width:280px;margin-top:8px;background:#252536;border:1px solid #3b3b4f;border-radius:8px;box-shadow:0 8px 24px #0006;animation:fadeSlideIn .2s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.phase-image-selector__picker-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #3b3b4f;font-size:14px;font-weight:500;color:#e5e7eb}.phase-image-selector__close-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#9ca3af;background:transparent;border:none;cursor:pointer}.phase-image-selector__close-btn:hover{color:#fff}.phase-image-selector__picker-actions{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid #3b3b4f}.phase-image-selector__action-btn{display:flex;align-items:center;gap:6px;flex:1;min-height:44px;padding:8px 12px;font-size:13px;color:#fff;background:#374151;border:none;border-radius:6px;cursor:pointer;transition:background .2s ease}.phase-image-selector__action-btn:hover{background:#4b5563}.phase-image-selector__action-btn svg{width:16px;height:16px}.phase-image-selector__existing{padding:12px 16px}.phase-image-selector__existing-label{font-size:12px;color:#9ca3af;margin-bottom:8px}.phase-image-selector__existing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.phase-image-selector__existing-item{aspect-ratio:1;padding:0;background:#1a1a2a;border:2px solid transparent;border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .2s ease}.phase-image-selector__existing-item:hover,.phase-image-selector__existing-item--selected{border-color:#6366f1}.phase-image-selector__existing-item img{width:100%;height:100%;object-fit:cover}@media(max-width:640px){.attack-editor__phases{grid-template-columns:repeat(4,1fr)}.attack-editor__phase-name,.attack-editor__phase-duration{display:none}}@media(max-width:480px){.attack-editor{padding:12px}.attack-editor__phases{grid-template-columns:repeat(4,1fr);gap:6px}.attack-editor__phase{padding:6px}.attack-editor__details{padding:12px}.attack-editor__settings-grid{grid-template-columns:1fr 1fr}.attack-editor__actions{flex-direction:column}.attack-editor__btn{width:100%}.phase-image-selector__picker{position:fixed;inset:auto 0 0;min-width:100%;margin-top:0;border-radius:16px 16px 0 0;max-height:70vh;overflow-y:auto}}.reference-manager{background:#1e1e2e;border-radius:12px;padding:16px}.reference-manager__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.reference-manager__title{font-size:18px;font-weight:600;color:#e5e7eb;margin:0}.reference-manager__status{font-size:13px;color:#9ca3af}.reference-manager__tabs{display:flex;gap:8px;margin-bottom:16px}.reference-manager__tab{display:flex;align-items:center;gap:8px;flex:1;min-height:44px;padding:10px 16px;font-size:14px;font-weight:500;color:#9ca3af;background:#252536;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease}.reference-manager__tab:hover{background:#2a2a40;color:#e5e7eb}.reference-manager__tab--active{background:#6366f11a;border-color:#6366f1;color:#e5e7eb}.reference-manager__tab-icon{font-size:18px}.reference-manager__tab-dot{width:8px;height:8px;background:#059669;border-radius:50%;margin-left:auto}.reference-manager__content{display:flex;flex-direction:column;gap:16px}.reference-manager__preview-area{position:relative}.reference-manager__preview{position:relative;aspect-ratio:1;max-width:200px;margin:0 auto;background:#252536;border:2px solid #3b3b4f;border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .2s ease}.reference-manager__preview:hover{border-color:#6366f1}.reference-manager__preview--empty{border-style:dashed}.reference-manager__preview-image{width:100%;height:100%;object-fit:cover}.reference-manager__preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;font-size:13px;opacity:0;transition:opacity .2s ease}.reference-manager__preview:hover .reference-manager__preview-overlay{opacity:1}.reference-manager__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px;color:#6b7280;text-align:center}.reference-manager__placeholder-icon{width:48px;height:48px;margin-bottom:12px;opacity:.5}.reference-manager__placeholder span{font-size:14px;margin-bottom:4px}.reference-manager__placeholder-hint{font-size:12px;opacity:.7}.reference-manager__preview-actions{display:flex;justify-content:center;gap:8px;margin-top:12px}.reference-manager__action-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#374151;border:none;border-radius:8px;color:#fff;cursor:pointer;transition:background .2s ease}.reference-manager__action-btn:hover{background:#4b5563}.reference-manager__action-btn--danger:hover{background:#ef4444}.reference-manager__action-btn svg{width:20px;height:20px}.reference-manager__strength-section{padding:16px;background:#252536;border-radius:8px}.reference-manager__generate-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 20px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:10px;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}.reference-manager__generate-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #6366f166}.reference-manager__generate-btn:active:not(:disabled){transform:scale(.98)}.reference-manager__generate-btn:disabled{opacity:.5;cursor:not-allowed}.reference-manager__generate-btn svg{width:20px;height:20px}.reference-manager__spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.reference-manager__help{font-size:12px;color:#6b7280;line-height:1.5;margin:0;text-align:center}.reference-manager__backdrop{position:fixed;inset:0;background:#0009;z-index:100}.reference-manager__picker{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;width:90%;max-width:400px;max-height:80vh;background:#1e1e2e;border:1px solid #3b3b4f;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px #00000080;animation:modalSlideIn .25s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.reference-manager__picker-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #3b3b4f;font-size:16px;font-weight:600;color:#e5e7eb}.reference-manager__close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#9ca3af;background:transparent;border:none;border-radius:6px;cursor:pointer}.reference-manager__close-btn:hover{background:#252536;color:#fff}.reference-manager__picker-section{padding:16px 20px;border-bottom:1px solid #3b3b4f}.reference-manager__picker-section:last-child{border-bottom:none}.reference-manager__picker-label{font-size:13px;font-weight:500;color:#9ca3af;margin:0 0 12px}.reference-manager__upload-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px 20px;font-size:14px;font-weight:500;color:#fff;background:#374151;border:2px dashed #4b5563;border-radius:10px;cursor:pointer;transition:all .2s ease}.reference-manager__upload-btn:hover{background:#4b5563;border-color:#6366f1}.reference-manager__upload-btn svg{width:20px;height:20px}.reference-manager__picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:200px;overflow-y:auto}.reference-manager__picker-item{position:relative;aspect-ratio:1;padding:0;background:#252536;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;transition:border-color .2s ease,transform .15s ease}.reference-manager__picker-item:hover{border-color:#6366f1;transform:scale(1.02)}.reference-manager__picker-item--selected{border-color:#6366f1}.reference-manager__picker-item img{width:100%;height:100%;object-fit:cover}.reference-manager__picker-check{position:absolute;top:4px;right:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#6366f1;border-radius:50%}.reference-manager__picker-check svg{width:14px;height:14px}.reference-manager__picker-empty{padding:20px;text-align:center;color:#6b7280;font-size:13px}.strength-slider{display:flex;flex-direction:column;gap:12px}.strength-slider--disabled{opacity:.5;pointer-events:none}.strength-slider__header{display:flex;align-items:center;justify-content:space-between}.strength-slider__label{font-size:13px;font-weight:500;color:#9ca3af}.strength-slider__value{font-size:14px;font-weight:600;color:#6366f1}.strength-slider__track-container{position:relative;padding:8px 0}.strength-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:linear-gradient(to right,#8b5cf6 0%,#8b5cf6 var(--fill-percent),#3b3b4f var(--fill-percent),#3b3b4f 100%);border-radius:4px;outline:none;cursor:pointer}.strength-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:#fff;border:3px solid #6366f1;border-radius:50%;cursor:grab;box-shadow:0 2px 8px #0000004d;transition:transform .15s ease}.strength-slider__input::-webkit-slider-thumb:hover{transform:scale(1.1)}.strength-slider__input::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.strength-slider__input::-moz-range-thumb{width:24px;height:24px;background:#fff;border:3px solid #6366f1;border-radius:50%;cursor:grab;box-shadow:0 2px 8px #0000004d}.strength-slider__markers{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);pointer-events:none}.strength-slider__marker{position:absolute;width:4px;height:12px;background:#4b5563;border-radius:2px;transform:translate(-50%)}.strength-slider__labels{display:flex;justify-content:space-between;padding:0 4px}.strength-slider__label-text{display:flex;align-items:center;gap:6px;font-size:11px;color:#6b7280}.strength-slider__label-text svg{width:14px;height:14px}.strength-slider__label-text--creative{color:#8b5cf6}.strength-slider__label-text--similar{color:#6366f1}.strength-slider__presets{display:flex;gap:8px}.strength-slider__preset{flex:1;min-height:36px;padding:8px 12px;font-size:12px;font-weight:500;color:#9ca3af;background:#1a1a2a;border:1px solid #3b3b4f;border-radius:6px;cursor:pointer;transition:all .2s ease}.strength-slider__preset:hover{background:#252536;border-color:#4b5563;color:#e5e7eb}.strength-slider__preset--active{background:#6366f11a;border-color:#6366f1;color:#6366f1}.strength-slider__preset--recommended{border-color:#059669}.strength-slider__preset--recommended.strength-slider__preset--active{background:#0596691a;border-color:#059669;color:#059669}@media(max-width:480px){.reference-manager{padding:12px}.reference-manager__tabs{flex-direction:column}.reference-manager__preview{max-width:160px}.reference-manager__picker{width:95%;max-height:85vh;border-radius:16px 16px 0 0;inset:auto 0 0;transform:none;animation:modalSlideUp .25s ease}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.strength-slider__presets{flex-wrap:wrap}.strength-slider__preset{flex:1 1 45%}}.monster-portrait-container{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;flex:1;min-height:0;contain:paint;container-type:size}.portrait-frame{width:100%;max-width:var(--portrait-max-width);aspect-ratio:3/4;border-radius:var(--radius-md);overflow:hidden;position:relative;border:4px solid transparent;background:linear-gradient(#2d1810,#2d1810) padding-box,linear-gradient(135deg,#8b6f47,#d4a574,#8b6f47,#d4a574,#8b6f47,#d4a574 75%,#8b6f47) border-box;box-shadow:0 0 0 2px #3d2520cc,0 0 0 6px #8b6f4766,var(--shadow-xl),inset 0 0 60px #0006,inset 0 1px #d4a5744d,inset 0 -1px #0006;transition:all var(--duration-normal) var(--ease-in-out);will-change:transform,box-shadow;backface-visibility:hidden}.portrait-frame:before,.portrait-frame:after{content:"";position:absolute;width:20px;height:20px;border:2px solid rgba(212,165,116,.6);z-index:var(--z-content-element);pointer-events:none}.portrait-frame:before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-top-left-radius:4px}.portrait-frame:after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-bottom-right-radius:4px}.monster-enraged .portrait-frame{background:linear-gradient(#2d1810,#2d1810) padding-box,linear-gradient(135deg,#ef5350,#ff6b7a,#ef5350,#ff6b7a,#ef5350) border-box;box-shadow:0 0 0 2px #8b0000e6,0 0 0 6px #ef535080,0 0 40px #ef5350b3,0 0 80px #ef535066,inset 0 0 60px #8b00004d;animation:rage-pulse .4s ease-in-out infinite}.monster-enraged .portrait-frame:before,.monster-enraged .portrait-frame:after{border-color:#ff6464cc;animation:brass-glow .4s ease-in-out infinite}@keyframes rage-pulse{0%,to{box-shadow:0 0 0 2px #8b0000e6,0 0 0 6px #ef535080,0 0 40px #ef5350b3,0 0 80px #ef535066,inset 0 0 60px #8b00004d;transform:translateZ(0) scale(1)}50%{box-shadow:0 0 0 2px #8b0000e6,0 0 0 6px #ef5350b3,0 0 60px #ef5350e6,0 0 100px #ef535099,inset 0 0 60px #8b000080;transform:translateZ(0) scale(1.01)}}@keyframes brass-glow{0%,to{filter:drop-shadow(0 0 4px rgba(255,100,100,.6))}50%{filter:drop-shadow(0 0 8px rgba(255,100,100,1))}}.portrait-image{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .3s ease;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}.monster-idle .portrait-frame:hover .portrait-image{transform:translateZ(0) scale(1.05)}.portrait-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#3d2520,#1a0f0a)}.placeholder-icon{font-size:6rem;margin-bottom:1rem;filter:grayscale(.3)}.placeholder-name{color:#d4a574;font-size:var(--v-font-header);font-weight:700;line-height:var(--v-line-height-header)}.monster-nameplate{margin-top:.75rem;padding:.5rem 1.5rem;background:#0009;border-radius:8px;border:2px solid #4a3020}.monster-name{color:#d4a574;font-size:var(--v-font-header);font-weight:700;text-transform:uppercase;letter-spacing:1px;line-height:var(--v-line-height-header)}.enraged-overlay{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 30%,rgba(239,83,80,.3) 100%)}.rage-particles{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(255,100,50,.8) 0%,transparent 3%),radial-gradient(circle at 80% 20%,rgba(255,50,50,.8) 0%,transparent 3%),radial-gradient(circle at 50% 50%,rgba(255,150,50,.6) 0%,transparent 2%);animation:particles-float 1s ease-in-out infinite}@keyframes particles-float{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-10px);opacity:1}}.monster-pleased .portrait-frame{background:linear-gradient(#2d1810,#2d1810) padding-box,linear-gradient(135deg,#66bb6a,#81c784,#66bb6a,#81c784,#66bb6a) border-box;box-shadow:0 0 0 2px #3d2520cc,0 0 0 6px #66bb6a66,0 12px 40px #0009,0 0 20px #66bb6a4d,inset 0 0 60px #0006}.monster-pleased .portrait-frame:before,.monster-pleased .portrait-frame:after{border-color:#81c784b3}.monster-annoyed .portrait-frame{background:linear-gradient(#2d1810,#2d1810) padding-box,linear-gradient(135deg,#ffb74d 0% 25%,#ffb74d 50% 75%,#ffb74d) border-box;box-shadow:0 0 0 2px #3d2520cc,0 0 0 6px #ffb74d66,0 12px 40px #0009,0 0 20px #ffb74d4d,inset 0 0 60px #0006;animation:subtle-shake .5s ease-in-out,flicker-warning 2s ease-in-out infinite}.monster-annoyed .portrait-frame:before,.monster-annoyed .portrait-frame:after{border-color:#ffb74db3}@keyframes subtle-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes flicker-warning{0%,to{opacity:1}50%{opacity:.95}55%{opacity:.9}60%{opacity:1}}.monster-portrait-container.portrait-enter{animation:portrait-slide-in .5s ease-out}@keyframes portrait-slide-in{0%{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translateZ(0)}}@media(max-width:600px){.monster-portrait-container{height:100%;min-height:100px}.portrait-frame{height:100%;max-height:calc(var(--zone-monster-height, 20vh) - 20px);width:auto;max-width:85vw;border-radius:12px;border-width:3px}.monster-nameplate{padding:.4rem 1rem}.placeholder-icon{font-size:4rem}}@media(max-width:390px){.portrait-frame{border-radius:10px;border-width:2px}.monster-nameplate{padding:.3rem .8rem;font-size:.85rem}.placeholder-icon{font-size:3.5rem}}@media(max-height:500px)and (orientation:landscape){.portrait-frame{max-width:200px;aspect-ratio:3/4}}@media(max-width:480px){.monster-portrait-container{height:100%;min-height:120px;max-height:var(--zone-monster-height, 20vh)}.portrait-frame{max-width:none;width:auto;height:100%;max-height:calc(var(--zone-monster-height, 20vh) - 24px);aspect-ratio:3/4}.monster-attacking.attack-climax .portrait-image{animation:ken-burns-climax-mobile 1.5s ease-out forwards}@keyframes ken-burns-climax-mobile{0%{transform:translate3d(0,-5%,0) scale(1.1)}20%{transform:translate3d(0,-6%,0) scale(1.15)}40%{transform:translate3d(0,-8%,0) scale(1.2)}60%{transform:translate3d(0,-9%,0) scale(1.25)}80%{transform:translate3d(0,-10%,0) scale(1.28)}to{transform:translate3d(0,-10%,0) scale(1.3)}}}.monster-portrait-container.compact{width:48px;height:48px;min-height:48px}.monster-portrait-container.compact .portrait-frame{max-width:48px;aspect-ratio:1/1;border-width:2px}.monster-portrait-container.compact .portrait-frame:before,.monster-portrait-container.compact .portrait-frame:after{width:8px;height:8px;border-width:1px}.monster-portrait-container.compact .monster-nameplate{display:none}.monster-attacking .portrait-frame{background:linear-gradient(#2d1810,#2d1810) padding-box,linear-gradient(135deg,#8b0000,#f44,#8b0000,#f44,#8b0000,#f44) border-box;box-shadow:0 0 0 2px #8b0000,0 0 0 8px #8b000099,0 0 60px #8b0000cc,0 0 120px #f006,inset 0 0 80px #8b000066}.monster-attacking .portrait-frame:before,.monster-attacking .portrait-frame:after{border-color:#ff4444e6;animation:attack-corner-pulse .3s ease-in-out infinite}@keyframes attack-corner-pulse{0%,to{filter:drop-shadow(0 0 6px rgba(255,68,68,.8))}50%{filter:drop-shadow(0 0 12px rgba(255,68,68,1))}}.monster-attacking.attack-building .portrait-image{animation:ken-burns-building 3s ease-in-out infinite;transform-origin:center 30%}@keyframes ken-burns-building{0%{transform:scale(1.05) translateY(0)}25%{transform:scale(1.08) translateY(-2%)}50%{transform:scale(1.1) translateY(-4%)}75%{transform:scale(1.08) translateY(-2%)}to{transform:scale(1.05) translateY(0)}}.monster-attacking.attack-building .portrait-frame{animation:building-shake .15s ease-in-out infinite}@keyframes building-shake{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(-1px) translateY(.5px)}50%{transform:translate(1px) translateY(-.5px)}75%{transform:translate(-.5px) translateY(.5px)}}.monster-attacking.attack-lunge .portrait-image{animation:ken-burns-lunge .8s ease-in-out infinite;transform-origin:center 25%}@keyframes ken-burns-lunge{0%{transform:scale(1.15) translateY(0)}15%{transform:scale(1.2) translateY(-5%)}30%{transform:scale(1.18) translateY(-3%)}50%{transform:scale(1.25) translateY(-8%)}70%{transform:scale(1.2) translateY(-5%)}85%{transform:scale(1.22) translateY(-6%)}to{transform:scale(1.15) translateY(0)}}.monster-attacking.attack-lunge .portrait-frame{animation:lunge-shake .08s ease-in-out infinite,rage-pulse .3s ease-in-out infinite}@keyframes lunge-shake{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(-3px) translateY(1px)}50%{transform:translate(3px) translateY(-1px)}75%{transform:translate(-2px) translateY(1px)}}.monster-attacking.attack-climax .portrait-image{animation:ken-burns-climax 1.5s ease-out forwards;transform-origin:center 20%;will-change:transform;backface-visibility:hidden}@keyframes ken-burns-climax{0%{transform:translate3d(0,-5%,0) scale(1.2)}20%{transform:translate3d(0,-8%,0) scale(1.3)}40%{transform:translate3d(0,-12%,0) scale(1.5)}60%{transform:translate3d(0,-15%,0) scale(1.6)}80%{transform:translate3d(0,-18%,0) scale(1.7)}to{transform:translate3d(0,-20%,0) scale(1.8)}}.monster-attacking.attack-climax .portrait-frame{animation:climax-pulse .2s ease-in-out infinite}@keyframes climax-pulse{0%,to{box-shadow:0 0 0 2px #8b0000,0 0 0 8px #8b0000cc,0 0 80px red,0 0 150px #f009,inset 0 0 100px #8b000080}50%{box-shadow:0 0 0 3px #ff3232,0 0 0 12px red,0 0 120px #ff3232,0 0 200px #f00c,inset 0 0 120px #f009}}.monster-attacking.attack-climax .enraged-overlay{animation:screen-flash .15s ease-in-out infinite}@keyframes screen-flash{0%,to{background:radial-gradient(circle,transparent 20%,rgba(255,0,0,.5) 100%)}50%{background:radial-gradient(circle,#ffffff4d 10%,#ff0000b3)}}.monster-portrait-container.silhouetted .portrait-image{filter:drop-shadow(0 0 8px rgba(100,80,120,.6));opacity:.5;transition:opacity .3s ease,filter .3s ease}.monster-portrait-container.silhouetted .portrait-image:before{content:"";position:absolute;inset:0;background:#000000b3;mix-blend-mode:multiply;pointer-events:none}.monster-portrait-container.silhouetted .portrait-frame{background:linear-gradient(#0a0a0a,#0a0a0a) padding-box,linear-gradient(135deg,#333,#555,#333,#555,#333) border-box;box-shadow:0 0 0 2px #000000e6,0 0 0 6px #32323280,0 12px 40px #000c,0 0 30px #8b000080,inset 0 0 80px #000000e6;animation:mystery-pulse 3s ease-in-out infinite}@keyframes mystery-pulse{0%,to{box-shadow:0 0 0 2px #000000e6,0 0 0 6px #32323280,0 12px 40px #000c,0 0 30px #8b000080,inset 0 0 80px #000000e6}50%{box-shadow:0 0 0 2px #000000e6,0 0 0 6px #32323280,0 12px 40px #000c,0 0 50px #8b000099,inset 0 0 80px #000000e6}}.silhouette-atmosphere{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.6) 100%);z-index:var(--z-interactive)}.mystery-particles{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 70%,rgba(100,100,100,.3) 0%,transparent 3%),radial-gradient(circle at 70% 30%,rgba(80,80,80,.4) 0%,transparent 2%),radial-gradient(circle at 40% 90%,rgba(60,60,60,.3) 0%,transparent 2.5%),radial-gradient(circle at 85% 75%,rgba(90,90,90,.3) 0%,transparent 2%);animation:mystery-float 4s ease-in-out infinite}@keyframes mystery-float{0%,to{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-5px) scale(1.05);opacity:.8}}.monster-portrait-container.revealing .portrait-image{animation:silhouette-reveal 1.5s ease-out forwards}@keyframes silhouette-reveal{0%{opacity:.3;filter:drop-shadow(0 0 8px rgba(100,80,120,.6))}20%{opacity:.4;filter:drop-shadow(0 0 6px rgba(100,80,120,.4))}40%{opacity:.55;filter:drop-shadow(0 0 4px rgba(100,80,120,.2))}60%{opacity:.7;filter:none}80%{opacity:.85;filter:none}to{opacity:1;filter:none}}.monster-portrait-container.revealing .portrait-frame{animation:frame-reveal 1.5s ease-out forwards}@keyframes frame-reveal{0%{box-shadow:0 0 0 2px #000000e6,0 0 0 6px #32323280,0 12px 40px #000c,0 0 50px var(--monster-glow-color, #ff4444),inset 0 0 80px #000000e6}50%{box-shadow:0 0 0 2px #64503ccc,0 0 0 6px #8b6f4766,0 12px 40px #0009,0 0 80px var(--monster-glow-color, #ff4444),inset 0 0 60px #00000080}to{box-shadow:0 0 0 2px #3d2520cc,0 0 0 6px #8b6f4766,0 12px 40px #0009,inset 0 0 60px #0006,inset 0 1px #d4a5744d,inset 0 -1px #0006}}.reveal-flash{position:absolute;inset:0;background:#fff;z-index:var(--z-elevated);pointer-events:none;animation:flash-reveal var(--duration-slow) var(--ease-out) forwards}@keyframes flash-reveal{0%{opacity:0}20%{opacity:.8}to{opacity:0}}@media(prefers-reduced-motion:reduce){.portrait-frame,.monster-portrait-container.silhouetted .portrait-frame,.monster-portrait-container.revealing .portrait-frame,.monster-portrait-container.revealed .portrait-frame,.monster-attacking.attack-building .portrait-image,.monster-attacking.attack-lunge .portrait-image,.portrait-image{animation:none!important}.monster-attacking .portrait-image{transform:scale(1);filter:none}.mood-particles{display:none}.rage-overlay{animation:none!important;opacity:.3}.monster-portrait-container.flickering:after{animation:none;opacity:0}.mystery-overlay{animation:none;opacity:.6}.monster-attacking.attack-climax .enraged-overlay{animation:none;background:radial-gradient(circle,transparent 20%,rgba(255,0,0,.4) 100%)}.reveal-flash{animation:none;opacity:0}.monster-portrait-container.entering{animation:none;opacity:1;transform:none}.portrait-image,.portrait-frame,.monster-portrait-container{transition:none!important}}.monster-portrait-container:focus{outline:none}.monster-portrait-container:focus-visible .portrait-frame{outline:3px solid #d4a574;outline-offset:4px;box-shadow:0 8px 32px #0009,0 0 0 1px #ffffff0d,inset 0 0 40px #0006,0 0 0 3px #d4a57480}.speech-bubble-container{position:relative;display:flex;align-items:flex-start;gap:0;cursor:pointer;-webkit-user-select:none;user-select:none;animation:bubbleEnter .4s cubic-bezier(.34,1.56,.64,1);transition:transform .15s ease;width:clamp(280px,85vw,420px);height:auto;min-height:clamp(140px,25vh,180px);will-change:transform,opacity;backface-visibility:hidden}.speech-bubble-container:hover{transform:translateZ(0) scale(1.01)}.speech-bubble-container:active{transform:translateZ(0) scale(.99)}@keyframes bubbleEnter{0%{opacity:0;transform:translate3d(-20px,0,0)}to{opacity:1;transform:translateZ(0)}}.speech-bubble-tail{position:absolute;left:-16px;top:32px;width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-right:20px solid #fefefe;filter:drop-shadow(-2px 0 3px rgba(0,0,0,.1));z-index:1}.speech-bubble-tail:after{content:"";position:absolute;left:3px;top:-12px;width:0;height:0;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:17px solid #fefefe}.speech-bubble{background:linear-gradient(180deg,#fff,#fafafa);border-radius:20px;padding:1.25rem 1.5rem .75rem;width:100%;height:auto;min-height:clamp(140px,25vh,180px);box-shadow:0 4px 20px #0000001f,0 2px 8px #00000014,inset 0 1px #fff,inset 0 -1px #00000008;position:relative;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;box-sizing:border-box}.speech-bubble:before{content:"";position:absolute;inset:0;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,transparent 40%);pointer-events:none}.speech-text-area{flex:1;overflow-y:auto;overflow-x:hidden;max-height:140px;padding-right:.5rem;margin-right:-.5rem;position:relative;z-index:1;scroll-behavior:smooth}.speech-text-area::-webkit-scrollbar{width:6px}.speech-text-area::-webkit-scrollbar-track{background:#00000008;border-radius:3px}.speech-text-area::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px;transition:background .2s ease}.speech-text-area::-webkit-scrollbar-thumb:hover{background:#00000040}.speech-text{color:#1a1a1a;font-size:var(--v-font-base);line-height:var(--v-line-height-tight);margin:0;font-weight:450;letter-spacing:.01em;position:relative;word-wrap:break-word;overflow-wrap:break-word}.speech-text .order-keyword{font-weight:700;color:#8b4513;background:linear-gradient(180deg,#d4a57433,#d4a5741a);padding:.1em .35em;border-radius:4px;display:inline;white-space:nowrap}.typing-cursor{display:inline-block;width:2px;height:1em;background:#1a1a1a;margin-left:2px;animation:cursorBlink .6s step-end infinite;vertical-align:text-bottom}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}.speech-progress{display:flex;justify-content:center;align-items:center;gap:6px;height:20px;min-height:20px;padding-top:.5rem;border-top:1px solid rgba(0,0,0,.06);position:relative;z-index:1}.progress-pip{width:6px;height:6px;border-radius:50%;background:#ddd;transition:all .3s ease}.progress-pip.done{background:#66bb6a;transform:scale(.85)}.progress-pip.current{background:#333;transform:scale(1.1);box-shadow:0 0 0 3px #33333326}.speech-bubble-container.mood-happy .speech-bubble,.speech-bubble-container.mood-charming .speech-bubble,.speech-bubble-container.mood-grateful .speech-bubble,.speech-bubble-container.mood-impressed .speech-bubble{background:linear-gradient(180deg,#f8fff8,#f5faf5);border-color:#4caf5026}.speech-bubble-container.mood-happy .speech-bubble-tail,.speech-bubble-container.mood-charming .speech-bubble-tail,.speech-bubble-container.mood-grateful .speech-bubble-tail,.speech-bubble-container.mood-impressed .speech-bubble-tail{border-right-color:#f8fff8}.speech-bubble-container.mood-happy .speech-bubble-tail:after,.speech-bubble-container.mood-charming .speech-bubble-tail:after,.speech-bubble-container.mood-grateful .speech-bubble-tail:after,.speech-bubble-container.mood-impressed .speech-bubble-tail:after{border-right-color:#f8fff8}.speech-bubble-container.mood-annoyed .speech-bubble,.speech-bubble-container.mood-irritated .speech-bubble{background:linear-gradient(180deg,#fffaf5,#fef8f3);border-color:#ff980033}.speech-bubble-container.mood-annoyed .speech-bubble-tail,.speech-bubble-container.mood-irritated .speech-bubble-tail{border-right-color:#fffaf5}.speech-bubble-container.mood-annoyed .speech-bubble-tail:after,.speech-bubble-container.mood-irritated .speech-bubble-tail:after{border-right-color:#fffaf5}.speech-bubble-container.angry-mood .speech-bubble{background:linear-gradient(180deg,#fff5f5,#fef2f2);border-color:#f4433640;box-shadow:0 4px 20px #f4433626,0 2px 8px #00000014}.speech-bubble-container.angry-mood .speech-bubble-tail{border-right-color:#fff5f5}.speech-bubble-container.angry-mood .speech-bubble-tail:after{border-right-color:#fff5f5}.speech-bubble-container.angry-mood .speech-text{color:#8b0000}.speech-bubble-container.angry-mood{animation:angryShake .4s ease-in-out}@keyframes angryShake{0%,to{transform:translate(0)}20%{transform:translate(-4px) rotate(-.5deg)}40%{transform:translate(4px) rotate(.5deg)}60%{transform:translate(-3px) rotate(-.3deg)}80%{transform:translate(3px) rotate(.3deg)}}.speech-bubble-container.mood-eldritch .speech-bubble,.speech-bubble-container.mood-monstrous .speech-bubble,.speech-bubble-container.mood-predatory .speech-bubble,.speech-bubble-container.mood-murderous .speech-bubble,.speech-bubble-container.mood-terrifying .speech-bubble{background:linear-gradient(180deg,#faf5ff,#f5f0fa);border-color:#9c27b04d;box-shadow:0 4px 20px #9c27b033,0 0 40px #9c27b01a}.speech-bubble-container.mood-eldritch .speech-bubble-tail,.speech-bubble-container.mood-monstrous .speech-bubble-tail,.speech-bubble-container.mood-predatory .speech-bubble-tail,.speech-bubble-container.mood-murderous .speech-bubble-tail,.speech-bubble-container.mood-terrifying .speech-bubble-tail{border-right-color:#faf5ff}.speech-bubble-container.mood-eldritch .speech-bubble-tail:after,.speech-bubble-container.mood-monstrous .speech-bubble-tail:after,.speech-bubble-container.mood-predatory .speech-bubble-tail:after,.speech-bubble-container.mood-murderous .speech-bubble-tail:after,.speech-bubble-container.mood-terrifying .speech-bubble-tail:after{border-right-color:#faf5ff}.speech-bubble-container.mood-eldritch .speech-text,.speech-bubble-container.mood-monstrous .speech-text,.speech-bubble-container.mood-predatory .speech-text,.speech-bubble-container.mood-murderous .speech-text,.speech-bubble-container.mood-terrifying .speech-text{color:#4a148c;text-shadow:0 0 2px rgba(156,39,176,.3);animation:textDistort .15s ease-in-out infinite}@keyframes textDistort{0%,to{transform:skew(0)}50%{transform:skew(.3deg)}}@media(max-width:768px){.speech-bubble-container{width:clamp(280px,90vw,360px)}.speech-bubble{padding:1rem 1.25rem .625rem;min-height:clamp(130px,22vh,160px)}.speech-text-area{max-height:120px}.speech-bubble-tail{left:-14px;top:28px;border-top-width:12px;border-bottom-width:12px;border-right-width:16px}.speech-bubble-tail:after{left:2px;top:-10px;border-top-width:10px;border-bottom-width:10px;border-right-width:14px}}@media(max-width:390px){.speech-bubble-container{width:calc(100vw - 24px);max-width:366px}.speech-bubble{border-radius:16px;padding:.9rem 1rem .55rem;min-height:clamp(110px,18vh,155px)}.speech-text-area{max-height:115px;padding-right:.4rem;margin-right:-.4rem}.speech-text{font-size:.95rem;line-height:1.5}.speech-bubble-tail{left:-13px;top:26px;border-top-width:11px;border-bottom-width:11px;border-right-width:15px}.speech-bubble-tail:after{left:2px;top:-9px;border-top-width:9px;border-bottom-width:9px;border-right-width:13px}.speech-progress{height:18px;min-height:18px;padding-top:.4rem}.progress-pip{width:5px;height:5px;gap:5px}}@media(max-width:320px){.speech-bubble-container{width:calc(100vw - 16px);max-width:304px}.speech-bubble{border-radius:12px;padding:.75rem .875rem .5rem;min-height:clamp(100px,16vh,140px)}.speech-text-area{max-height:100px;padding-right:.3rem;margin-right:-.3rem}.speech-text{font-size:.875rem;line-height:1.45}.speech-bubble-tail{left:-10px;top:22px;border-top-width:9px;border-bottom-width:9px;border-right-width:12px}.speech-bubble-tail:after{left:2px;top:-7px;border-top-width:7px;border-bottom-width:7px;border-right-width:10px}.speech-progress{height:16px;min-height:16px;padding-top:.35rem}.progress-pip{width:4px;height:4px;gap:4px}}@media(max-width:480px){.speech-bubble-container{width:calc(100vw - 100px);max-width:340px;margin-left:auto}.speech-bubble{border-radius:16px;padding:.75rem 1rem;min-height:80px;max-height:120px;font-size:1rem;line-height:1.7}.speech-text-area{max-height:80px;padding-right:.375rem;margin-right:-.375rem}.speech-text{font-size:1rem;line-height:1.7}.speech-bubble-tail{left:-12px;top:20px;border-top-width:10px;border-bottom-width:10px;border-right-width:14px}.speech-bubble-tail:after{left:2px;top:-8px;border-top-width:8px;border-bottom-width:8px;border-right-width:12px}.speech-progress{height:18px;min-height:18px}.progress-pip{width:5px;height:5px}}.speech-bubble-container:focus-visible .speech-bubble{box-shadow:0 4px 20px #0000001f,0 2px 8px #00000014,0 0 0 3px #3b82f680}@media(prefers-reduced-motion:reduce){.speech-bubble-container,.typing-cursor,.progress-pip,.speech-bubble-container.angry-mood{animation:none!important}.speech-bubble-container{transition:none}.speech-text-area{scroll-behavior:auto}}.speech-bubble{letter-spacing:.5px}.speech-bubble-container:focus{outline:none}.speech-bubble-container:focus-visible{outline:none}.speech-bubble-container:focus-visible .speech-bubble{box-shadow:0 4px 20px #0000001f,0 2px 8px #00000014,inset 0 1px #fff,inset 0 -1px #00000008,0 0 0 3px #d4a57499}.dialogue-box-container.floating{position:absolute;top:60px;right:8px;z-index:100}.dramatic-reveal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;cursor:pointer;contain:layout style paint;will-change:transform,opacity;backface-visibility:hidden}.reveal-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at center,#000000d9,#000000f2);transition:opacity .5s ease}.dramatic-reveal.entering .reveal-backdrop{opacity:0}.dramatic-reveal.showing .reveal-backdrop{opacity:1}.dramatic-reveal.shrinking .reveal-backdrop{opacity:0;transition:opacity .8s ease}.reveal-portrait-container{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem;z-index:10;transition:all .8s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;backface-visibility:hidden}.dramatic-reveal.entering .reveal-portrait-container{opacity:0;transform:translate3d(-100vw,0,0)}.dramatic-reveal.showing .reveal-portrait-container{opacity:1;transform:translateZ(0);animation:reveal-slide-in .8s cubic-bezier(.34,1.56,.64,1)}@keyframes reveal-slide-in{0%{opacity:0;transform:translate3d(-60vw,0,0) rotate(-5deg)}60%{opacity:1;transform:translate3d(5vw,0,0) rotate(1deg)}to{transform:translateZ(0) rotate(0)}}.dramatic-reveal.shrinking .reveal-portrait-container{animation:reveal-shrink-to-sidebar .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes reveal-shrink-to-sidebar{0%{opacity:1;transform:translateZ(0)}30%{opacity:1;transform:translate3d(0,-10px,0)}to{opacity:0;transform:translate3d(calc(-50vw + 160px),calc(-50vh + 180px),0)}}@media(max-width:768px){@keyframes reveal-shrink-to-sidebar{0%{opacity:1;transform:translateZ(0)}30%{opacity:1;transform:translate3d(0,-10px,0)}to{opacity:0;transform:translate3d(0,calc(-40vh + 100px),0)}}}.reveal-portrait-frame{position:relative;width:70vh;max-width:500px;aspect-ratio:3/4;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#1a1a1a,#0a0a0a);box-shadow:0 0 0 4px #d4a57499,0 0 60px #d4a5744d,0 20px 60px #000c;animation:frameGlow 2s ease-in-out infinite;will-change:box-shadow;backface-visibility:hidden}@keyframes frameGlow{0%,to{box-shadow:0 0 0 4px #d4a57499,0 0 60px #d4a5744d,0 20px 60px #000c}50%{box-shadow:0 0 0 4px #d4a574cc,0 0 80px #d4a57480,0 20px 60px #000c}}.dramatic-reveal.success .reveal-portrait-frame{box-shadow:0 0 0 4px #4caf5099,0 0 60px #4caf504d,0 20px 60px #000c;animation:frameGlowSuccess 2s ease-in-out infinite}@keyframes frameGlowSuccess{0%,to{box-shadow:0 0 0 4px #4caf5099,0 0 60px #4caf504d,0 20px 60px #000c}50%{box-shadow:0 0 0 4px #4caf50e6,0 0 100px #4caf5080,0 20px 60px #000c}}.dramatic-reveal.failure .reveal-portrait-frame{box-shadow:0 0 0 4px #f44336b3,0 0 60px #f4433666,0 20px 60px #000c;animation:frameGlowFailure .5s ease-in-out infinite,frameShake .1s ease-in-out infinite}@keyframes frameGlowFailure{0%,to{box-shadow:0 0 0 4px #f44336b3,0 0 60px #f4433666,0 20px 60px #000c}50%{box-shadow:0 0 0 6px #f44336e6,0 0 100px #f4433699,0 20px 60px #000c}}@keyframes frameShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.portrait-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.1) 0%,transparent 60%);pointer-events:none;z-index:2}.reveal-portrait-image{width:100%;height:100%;object-fit:cover;animation:portraitReveal 1s ease-out;will-change:opacity;backface-visibility:hidden}@keyframes portraitReveal{0%{opacity:0}50%{opacity:.95}to{opacity:1}}.reveal-portrait-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2d1810,#1a0f0a)}.reveal-portrait-placeholder .placeholder-icon{font-size:8rem;opacity:.5}.reveal-nameplate{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.5rem 1.5rem;background:linear-gradient(transparent,#000000e6 30%);text-align:center;opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.4,0,.2,1);transition-delay:.3s}.reveal-nameplate.visible{opacity:1;transform:translateY(0)}.reveal-name{margin:0;font-size:2.5rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:3px;text-shadow:0 2px 4px rgba(0,0,0,.5),0 0 40px rgba(212,165,116,.5)}.reveal-type{margin:.5rem 0 0;font-size:1.1rem;color:#d4a574;font-style:italic;letter-spacing:2px;text-transform:capitalize}.reveal-speech-bubble{position:relative;background:linear-gradient(180deg,#fff,#f8f8f8);border-radius:20px;padding:1.25rem 1.75rem;max-width:400px;box-shadow:0 4px 30px #0000004d,inset 0 1px #fff;animation:speechBubbleEnter .5s cubic-bezier(.34,1.56,.64,1);will-change:transform,opacity;backface-visibility:hidden}@keyframes speechBubbleEnter{0%{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translateZ(0)}}.reveal-speech-bubble .speech-tail{position:absolute;top:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:14px solid #ffffff;filter:drop-shadow(0 -2px 2px rgba(0,0,0,.1))}.reveal-speech-bubble .speech-text{margin:0;color:#333;font-size:1.2rem;font-style:italic;line-height:1.5;text-align:center}.dramatic-reveal.failure .reveal-speech-bubble{background:linear-gradient(180deg,#fff5f5,#fef0f0);box-shadow:0 4px 30px #f443364d,inset 0 1px #fff}.dramatic-reveal.failure .reveal-speech-bubble .speech-tail{border-bottom-color:#fff5f5}.dramatic-reveal.failure .reveal-speech-bubble .speech-text{color:#8b0000}.dramatic-reveal.success .reveal-speech-bubble{background:linear-gradient(180deg,#f5fff5,#f0fef0);box-shadow:0 4px 30px #4caf504d,inset 0 1px #fff}.dramatic-reveal.success .reveal-speech-bubble .speech-tail{border-bottom-color:#f5fff5}.dramatic-reveal.success .reveal-speech-bubble .speech-text{color:#1b5e20}.reveal-skip-hint{position:absolute;bottom:3rem;left:50%;transform:translate(-50%);color:#ffffff80;font-size:.9rem;letter-spacing:1px;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{opacity:.5}50%{opacity:.8}}.reveal-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;font-size:1.5rem;opacity:0;animation:particleFloat 3s ease-in-out infinite;will-change:transform,opacity;backface-visibility:hidden}.particle-1{top:20%;left:15%;animation-delay:0s}.particle-2{top:40%;right:20%;animation-delay:1s}.particle-3{bottom:30%;left:25%;animation-delay:2s}@keyframes particleFloat{0%{opacity:0;transform:translate3d(0,20px,0)}25%{opacity:.8}50%{opacity:.6;transform:translate3d(0,-20px,0)}75%{opacity:.3}to{opacity:0;transform:translate3d(0,-40px,0)}}@media(max-width:768px){.reveal-portrait-frame{width:80vw;max-width:350px}.reveal-name{font-size:1.8rem}.reveal-type{font-size:1rem}.reveal-speech-bubble{max-width:300px;padding:1rem 1.25rem}.reveal-speech-bubble .speech-text{font-size:1rem}}@media(max-width:480px){.reveal-portrait-frame{width:85vw;max-width:280px}.reveal-name{font-size:1.5rem;letter-spacing:2px}.reveal-speech-bubble{max-width:260px}}@media(prefers-reduced-motion:reduce){.dramatic-reveal,.reveal-portrait-container,.reveal-portrait-frame,.reveal-nameplate,.reveal-speech-bubble,.particle{animation:none!important;transition:opacity .3s ease!important}}.health-bar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);min-height:var(--health-bar-height);background:linear-gradient(135deg,#140a05e6,#28140ad9);border-radius:var(--radius-md);border:1px solid var(--violatte-border-light);box-shadow:var(--shadow-lg),inset 0 1px #ffffff0d;-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md)}.health-hearts{display:flex;gap:var(--space-xs)}.heart{width:var(--health-heart-size);height:var(--health-heart-size);transition:all var(--duration-normal) var(--ease-in-out)}.heart-svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.heart.heart-full{animation:heartbeat 2s ease-in-out infinite}.heart.heart-full .heart-svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)) drop-shadow(0 0 8px rgba(255,71,87,.5))}.heart.heart-empty{opacity:.6}.heart.heart-half{opacity:.8}.heart.breaking{animation:heart-break .5s ease-out forwards}@keyframes heartbeat{0%,to{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}}@keyframes heart-break{0%{transform:scale(1);opacity:1;filter:brightness(1)}25%{transform:scale(1.3) rotate(-5deg);filter:brightness(1.5) saturate(1.5)}50%{transform:scale(1.2) rotate(5deg);filter:brightness(1.2)}to{transform:scale(.9);opacity:.5;filter:grayscale(.8)}}.health-text{display:flex;align-items:baseline;font-family:var(--font-serif);color:var(--violatte-accent-primary);text-shadow:var(--shadow-sm)}.health-current{font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--violatte-text-primary)}.health-separator{font-size:var(--text-md);margin:0 var(--space-xs);color:var(--violatte-accent-dark)}.health-max{font-size:var(--text-base);color:var(--violatte-accent-dark)}.health-bar.low .heart.heart-full{animation:heartbeat-fast .5s ease-in-out infinite}.health-bar.low .heart.heart-full .heart-svg{filter:drop-shadow(0 0 12px rgba(255,71,87,.8)) drop-shadow(0 0 20px rgba(255,71,87,.4))}@keyframes heartbeat-fast{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.health-bar.critical{animation:health-critical 1s ease-in-out infinite;border-color:#ff475780}.health-bar.critical .health-current{color:#ff4757}@keyframes health-critical{0%,to{box-shadow:0 4px 15px #0006,0 0 20px #ff475733}50%{box-shadow:0 4px 15px #0006,0 0 30px #ff475780}}.health-bar.compact{padding:.3rem .6rem;gap:.5rem}.health-bar.compact .heart{width:20px;height:20px}.health-bar.large .heart{width:36px;height:36px}.damage-flash{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(244,67,54,.4) 0%,rgba(244,67,54,.1) 70%,transparent 100%);pointer-events:none;animation:damage-flash .4s ease-out forwards;z-index:1000}@keyframes damage-flash{0%{opacity:1}to{opacity:0}}.health-bar.game-over .heart{opacity:.2;animation:none;filter:grayscale(1)}.health-bar.game-over{border-color:#ff475780}.health-bar.game-over .health-current{color:#ff4757}.heart.healing{animation:heart-heal .6s ease-out}@keyframes heart-heal{0%{transform:scale(.5);opacity:0;filter:brightness(2) hue-rotate(90deg)}50%{transform:scale(1.3);filter:brightness(1.5)}to{transform:scale(1);opacity:1;filter:brightness(1)}}@media(max-width:768px)and (orientation:portrait){.health-bar{padding:.4rem .75rem;gap:.5rem;height:auto!important;min-height:auto!important;max-height:none!important}.heart{width:20px;height:20px}.health-hearts{gap:.25rem}.health-text{font-size:.9rem}.health-current{font-size:1.1rem}.health-max{font-size:.8rem}}@media(max-width:480px)and (orientation:portrait){.health-bar{padding:.35rem .6rem;height:auto!important;min-height:auto!important;max-height:none!important}.heart{width:18px;height:18px}.health-current{font-size:1rem}}@media(max-width:900px)and (orientation:landscape){.health-bar{padding:.3rem .6rem}.heart{width:20px;height:20px}.health-hearts{gap:.2rem}.health-text{font-size:.85rem}.health-current{font-size:1rem}}@media(min-width:1201px){.health-bar{padding:.6rem 1.25rem}.heart{width:32px;height:32px}.health-current{font-size:1.4rem}}@media(prefers-reduced-motion:reduce){.heart{transition:none}.heart.heart-full,.heart.breaking,.heart.healing,.health-bar.low .heart.heart-full,.health-bar.critical{animation:none}.damage-flash{animation:none;opacity:0}}.order-display{padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,#1e120cf2,#2d1c12eb);border-radius:var(--radius-lg);border:1px solid rgba(180,120,60,.3);box-shadow:var(--shadow-xl),inset 0 1px #ffffff0d;-webkit-backdrop-filter:var(--backdrop-blur-md);backdrop-filter:var(--backdrop-blur-md);min-width:260px}.order-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;padding-bottom:.6rem;border-bottom:1px solid rgba(180,120,60,.2)}.order-header-icon{width:22px;height:22px;color:#b08050;opacity:.8}.order-title{color:#d4a574;font-size:var(--v-font-small);font-weight:600;text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.3);line-height:var(--v-line-height-header)}.order-details{display:flex;flex-direction:column;gap:.5rem}.order-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-sm);background:#0003;border-radius:var(--radius-md);border-left:3px solid rgba(180,120,60,.3);transition:all var(--duration-fast) var(--ease-in-out)}.order-item:hover{background:#00000040}.order-item.main-item{border-left-color:#d4a574;background:#b4783c1a}.item-icon-wrapper{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#b4783c26;border-radius:var(--radius-sm);flex-shrink:0}.item-icon-wrapper.temperature{background:#ff645026}.item-icon-wrapper.temperature .order-icon-svg{color:#ff8a65}.item-icon-wrapper.milk{background:#dcdcff1f}.item-icon-wrapper.milk .order-icon-svg{color:#e0e0ff}.item-icon-wrapper.syrup{background:#c8963226}.item-icon-wrapper.syrup .order-icon-svg{color:#daa520}.item-icon-wrapper.art{background:#9664c826}.item-icon-wrapper.art .order-icon-svg{color:#b39ddb}.order-icon-svg{width:18px;height:18px;color:#d4a574}.item-text{flex:1;color:#e0d0c0;font-size:var(--v-font-tiny);font-weight:500;line-height:var(--v-line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-status{display:flex;align-items:center;justify-content:center;width:20px;height:20px}.status-icon-svg{width:16px;height:16px}.status-icon-svg.check{color:#66bb6a;filter:drop-shadow(0 0 4px rgba(76,175,80,.5))}.status-icon-svg.pending{color:#666}.order-item.completed{border-left-color:#66bb6a;opacity:.7}.order-item.completed .item-text{text-decoration:line-through;color:#a8a8a8}.order-hidden{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#0003;border-radius:8px;border:1px dashed rgba(180,120,60,.3)}.hidden-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#b4783c26;border-radius:50%;animation:pulse-glow 2s ease-in-out infinite}.hidden-icon-svg{width:20px;height:20px;color:#d4a574}.hidden-text{color:#a08060;font-size:var(--v-font-small);font-style:italic;line-height:var(--v-line-height-base)}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px #b4783c4d}50%{box-shadow:0 0 16px #b4783c80}}.order-item.syrup-list .item-text{font-size:var(--v-font-tiny)}.order-display.compact{padding:.75rem 1rem;min-width:auto;max-width:100%;background:linear-gradient(135deg,#1e120cd9,#2d1c12d1)}.order-header-compact{margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid rgba(180,120,60,.15)}.order-title-compact{color:#b08050;font-size:var(--v-font-tiny);font-weight:600;text-transform:uppercase;letter-spacing:.5px;line-height:var(--v-line-height-header)}.order-display.compact .order-item{padding:.4rem .5rem}.order-display.compact .item-icon-wrapper{width:24px;height:24px}.order-display.compact .order-icon-svg{width:14px;height:14px}.order-display.compact .item-text{font-size:var(--v-font-tiny)}.order-display.urgent{border-color:#ff980080;animation:urgent-pulse 1.5s ease-in-out infinite}@keyframes urgent-pulse{0%,to{box-shadow:0 8px 32px #0006,0 0 15px #ff980033}50%{box-shadow:0 8px 32px #0006,0 0 25px #ff980066}}@media(max-width:480px){.order-display{padding:var(--space-md) var(--space-md);min-width:240px;max-width:100%}.order-header{gap:.5rem;margin-bottom:.5rem;padding-bottom:.4rem}.order-header-icon{width:18px;height:18px}.order-title{font-size:.75rem;letter-spacing:.5px}.order-details{gap:.35rem}.order-item{padding:.35rem .5rem;gap:.4rem}.item-icon-wrapper{width:24px;height:24px;flex-shrink:0}.order-icon-svg{width:14px;height:14px}.item-text{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@media(max-width:390px){.order-display{padding:.6rem .75rem;min-width:220px}.order-header{gap:.4rem;margin-bottom:.4rem;padding-bottom:.3rem}.order-title{font-size:.7rem}.order-item{padding:.3rem .4rem;gap:.3rem}}@media(prefers-reduced-motion:reduce){.order-display.urgent{animation:none}}.coffee-counter{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;transition:all .5s ease;z-index:0;pointer-events:none}.coffee-counter.loading .counter-background{opacity:0}.coffee-counter.loaded .counter-background{opacity:1}.counter-background{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .5s ease,filter .5s ease;pointer-events:none}.coffee-counter.counter-cozy .counter-background{filter:brightness(1) saturate(1.1) contrast(1.05)}.coffee-counter.counter-horror .counter-background{filter:brightness(.5) saturate(.6) contrast(1.3) hue-rotate(-10deg)}.atmosphere-layer{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.2) 100%)}.counter-cozy .atmosphere-layer{background:radial-gradient(ellipse at 50% 30%,rgba(255,200,100,.1) 0%,transparent 50%),linear-gradient(180deg,rgba(0,0,0,.05) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.15) 100%)}.counter-horror .atmosphere-layer{background:radial-gradient(ellipse at 50% 30%,rgba(100,0,0,.1) 0%,transparent 50%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.5) 100%)}.horror-effects{position:absolute;inset:0;pointer-events:none;z-index:5}.flicker-overlay{position:absolute;inset:0;background:#0000001a;animation:flicker 4s step-end infinite}@keyframes flicker{0%,95%,to{opacity:0}96%{opacity:.4}97%{opacity:0}98%{opacity:.25}99%{opacity:0}}.shadow-creep{position:absolute;inset:0;background:radial-gradient(ellipse at 0% 50%,rgba(0,0,0,.4) 0%,transparent 30%),radial-gradient(ellipse at 100% 50%,rgba(0,0,0,.4) 0%,transparent 30%);animation:shadow-pulse 8s ease-in-out infinite}@keyframes shadow-pulse{0%,to{opacity:.6}50%{opacity:1}}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 200px #000000b3}.lighting-layer{position:absolute;inset:0;pointer-events:none;z-index:3;transition:all .5s ease}.warm-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,180,80,.15) 0%,transparent 60%)}.cold-shadow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(50,0,80,.2) 0%,transparent 60%),linear-gradient(180deg,rgba(20,0,40,.3) 0%,transparent 50%)}.static-noise{position:absolute;inset:0;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");animation:static .2s steps(10) infinite}@keyframes static{0%{transform:translate(0)}10%{transform:translate(-1px,1px)}20%{transform:translate(1px,-1px)}30%{transform:translate(-1px,-1px)}40%{transform:translate(1px,1px)}50%{transform:translate(-1px)}60%{transform:translateY(1px)}70%{transform:translate(1px)}80%{transform:translateY(-1px)}90%{transform:translate(-1px,1px)}to{transform:translate(1px,-1px)}}@media(prefers-reduced-motion:reduce){.coffee-counter:before{animation:none}}.grinding-game{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,2vw,1.25rem);padding:clamp(.75rem,2vw,1.25rem);background:linear-gradient(135deg,#2d1810f2,#1a0f0afa);border-radius:clamp(12px,2vw,16px);border:1px solid rgba(139,69,19,.4);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #8b000026;min-height:400px;width:100%;max-width:500px;position:relative}.grinding-game:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b00004d,#8b451333,#8b00004d);border-radius:inherit;opacity:.3;animation:eerieGlow 4s ease-in-out infinite;pointer-events:none;z-index:-1}.grinding-header{text-align:center;width:100%}.grinding-header h3{color:#d4a574;font-size:clamp(1.1rem,3.5vw,1.4rem);margin:0 0 .25rem;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(139,0,0,.3);font-weight:700}.grinding-instruction{color:#a08060;font-size:clamp(.75rem,2.2vw,.85rem);margin:0;font-style:italic;line-height:1.4}.grind-display{display:flex;align-items:flex-end;justify-content:center;gap:clamp(1rem,3vw,2rem);width:100%;flex:1;min-height:220px}.portafilter-large{position:relative;width:clamp(80px,18vw,120px);height:clamp(200px,40vh,300px);background:linear-gradient(90deg,#a078501a,#a0785033,#a078501a);border:3px solid #8b6914;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 4px #ffffff1a,0 4px 8px #00000080}.safe-zone{position:absolute;left:0;right:0;background:#4ccca326;border-top:1px dashed rgba(76,204,163,.4);border-bottom:1px dashed rgba(76,204,163,.4);z-index:2;transition:background-color .3s ease}.coffee-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to right,#441e14e6,#542d1e,#441e14e6);transition:height .08s linear,background .15s ease;overflow:hidden}.coffee-fill .coffee-texture{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.5}50%{opacity:.8}}.coffee-fill.perfect{background:linear-gradient(to right,#4ccca3cc,#4ccca3e6,#4ccca3cc);box-shadow:inset 0 0 10px #4ccca366}.coffee-fill.good{background:linear-gradient(to right,#64b48ccc,#64b48ce6,#64b48ccc)}.coffee-fill.high{background:linear-gradient(to right,#f5a623cc,#f5a623e6,#f5a623cc)}.coffee-fill.overflow{background:linear-gradient(to right,#e74c3ccc,#e74c3ce6,#e74c3ccc);animation:overfillFlash .5s ease-in-out infinite}@keyframes overfillFlash{0%,to{opacity:1}50%{opacity:.7}}.target-zone-marker{position:absolute;left:0;right:0;height:2px;display:flex;align-items:center;justify-content:flex-end;z-index:10}.target-line{width:100%;height:2px;background:linear-gradient(90deg,transparent,#d4a574 40%,#d4a574 60%,transparent);box-shadow:0 0 8px #d4a57480}.target-text{position:absolute;right:-50px;top:50%;transform:translateY(-50%);color:#d4a574;font-size:.75rem;font-weight:700;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}.overfill-warning{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#e74c3c;font-size:1rem;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.7);animation:blink .5s ease-in-out infinite;z-index:20}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.dose-display{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.5rem;padding:clamp(.75rem,2vw,1rem);background:#1a0f0acc;border:1px solid rgba(212,165,116,.3);border-radius:8px;min-width:clamp(100px,22vw,140px);text-align:center;transition:background-color .3s ease,border-color .3s ease}.dose-display.perfect{background:#4ccca326;border-color:#4ccca399}.dose-display.good{background:#64b48c26;border-color:#64b48c99}.dose-display.high{background:#f5a62326;border-color:#f5a62399}.dose-display.overflow{background:#e74c3c26;border-color:#e74c3c99}.dose-value{font-size:clamp(1.4rem,5vw,2rem);font-weight:700;color:#d4a574;font-family:Monaco,Courier New,monospace;letter-spacing:.05em;line-height:1}.dose-unit{font-size:.6em;margin-left:.25em;vertical-align:super;opacity:.8}.dose-diff{font-size:.8rem;color:#a08060;font-family:Monaco,Courier New,monospace}.dose-status{font-size:.7rem;color:#4ecca3;font-weight:600;letter-spacing:.05em;min-height:1.2em}.status-alert{animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.grind-progress{width:100%;display:flex;flex-direction:column;gap:.5rem}.time-display{text-align:center;color:#a08060;font-size:.85rem;font-family:Monaco,Courier New,monospace;font-weight:600}.progress-bar{width:100%;height:6px;background:#0000004d;border-radius:3px;overflow:hidden;border:1px solid rgba(139,69,19,.3)}.progress-fill{height:100%;background:linear-gradient(90deg,#d4a57499,#d4a574);transition:width .1s linear;box-shadow:0 0 4px #d4a57466}.grinding-controls{width:100%;display:flex;justify-content:center;gap:1rem}.grind-button{padding:clamp(.75rem,2vw,1rem) clamp(1.25rem,3vw,1.75rem);font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:600;color:#e0d0c0;background:linear-gradient(135deg,#8b4513cc,#653214e6);border:2px solid rgba(212,165,116,.5);border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0006,inset 0 1px #ffffff1a;white-space:nowrap;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.grind-button:hover{background:linear-gradient(135deg,#a05a28e6,#783c1e);border-color:#d4a574cc;box-shadow:0 6px 16px #00000080,inset 0 1px #ffffff26;transform:translateY(-2px)}.grind-button:active{transform:translateY(0);box-shadow:0 2px 8px #0006,inset 0 2px 4px #0000004d}.grind-button.stop{background:linear-gradient(135deg,#e74c3c99,#c0392bb3);border-color:#e74c3c80}.grind-button.stop.ready{background:linear-gradient(135deg,#e74c3ce6,#c0392b);border-color:#e74c3ccc;animation:readyPulse .6s ease-in-out infinite}@keyframes readyPulse{0%,to{opacity:1}50%{opacity:.8}}.grinding-result{width:100%;padding:clamp(.75rem,2vw,1.25rem);border-radius:8px;text-align:center;animation:slideUp .3s ease-out}.grinding-result.success{background:#4ccca326;border:1px solid rgba(76,204,163,.4)}.grinding-result.failure{background:#e74c3c26;border:1px solid rgba(231,76,60,.4)}.result-icon{font-size:2.5rem;margin-bottom:.5rem}.result-text{color:#d4a574;font-size:clamp(1rem,2.5vw,1.2rem);font-weight:700;margin:0 0 .75rem;text-shadow:0 2px 4px rgba(0,0,0,.5)}.result-stats{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem;font-size:.85rem;color:#a08060}.result-stats .stat{line-height:1.4}.result-quality{font-size:clamp(.9rem,2.2vw,1rem);color:#d4a574;font-weight:700;letter-spacing:.05em}@media(max-width:480px){.grinding-game{min-height:350px;gap:.5rem;padding:.75rem}.grind-display{gap:.75rem;min-height:180px}.portafilter-large{height:clamp(150px,35vh,250px)}.target-text{right:-45px;font-size:.65rem}.grind-button{padding:.65rem 1rem;font-size:.9rem}}@media(orientation:landscape)and (max-height:500px){.grinding-game{min-height:300px;max-height:90vh}.grind-display{min-height:150px}.portafilter-large{height:clamp(120px,70vh,200px)}}@media(prefers-reduced-motion:reduce){.grinding-game:before,.grind-button,.grind-button.stop.ready,.coffee-fill.overflow,.status-alert{animation:none}.grinding-result{animation:none}}.grind-button:focus-visible{outline:2px solid #d4a574;outline-offset:2px}.tamping-game.pressure-pulse{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,2vw,1rem);padding:clamp(1rem,3vw,1.5rem);background:linear-gradient(135deg,#2d1810f2,#1a0f0afa);border-radius:clamp(12px,2vw,16px);border:1px solid rgba(139,69,19,.4);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #8b000026;min-height:clamp(450px,70vh,600px);width:100%;max-width:600px;position:relative;touch-action:none}.tamping-game.pressure-pulse:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#ffb4324d,#8b451333,#ffb4324d);border-radius:inherit;opacity:.3;animation:pulseGlow 2s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes pulseGlow{0%,to{opacity:.2}50%{opacity:.5}}.tamping-header{text-align:center}.tamping-header h3{color:#ffd54f;font-size:clamp(1.25rem,4vw,1.5rem);margin:0 0 .5rem;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(255,213,79,.4);font-weight:700;letter-spacing:.5px}.tamping-instruction{color:#a08060;font-size:clamp(.8rem,2.5vw,.9rem);margin:0;font-style:italic;min-height:1.5em}.level-phase{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,3vw,1.5rem);width:100%;padding:clamp(.75rem,2vw,1rem);cursor:grab}.level-phase:active{cursor:grabbing}.level-container{position:relative;width:100%;max-width:280px;aspect-ratio:1.5;display:flex;flex-direction:column;align-items:center;justify-content:center}.coffee-bed{position:relative;width:80%;height:60px;background:linear-gradient(180deg,#3d2817,#2a1a0f);border-radius:8px;border:2px solid rgba(139,69,19,.6);transition:transform .05s linear;box-shadow:inset 0 -4px 8px #0006,0 4px 12px #0006}.coffee-bed.centered{border-color:#4caf50cc;box-shadow:inset 0 -4px 8px #0006,0 4px 12px #0006,0 0 20px #4caf5066}.grounds{position:absolute;inset:4px;background:radial-gradient(circle at 20% 30%,rgba(60,30,15,.8) 0%,transparent 40%),radial-gradient(circle at 80% 60%,rgba(80,40,20,.7) 0%,transparent 35%),radial-gradient(circle at 50% 50%,rgba(45,25,10,.9) 0%,transparent 60%),linear-gradient(180deg,#3d2817,#2a1a0f);border-radius:6px}.level-indicator{position:absolute;bottom:-20px;left:10%;right:10%;height:16px;background:#00000080;border-radius:8px;border:1px solid rgba(139,69,19,.4);overflow:hidden}.bubble{position:absolute;top:2px;width:12px;height:12px;background:radial-gradient(circle at 30% 30%,#64c8ffe6,#3296c8b3);border-radius:50%;transform:translate(-50%);transition:left .05s linear;box-shadow:inset 0 -2px 4px #0000004d,0 0 6px #64c8ff80}.level-target{position:absolute;bottom:-30px;left:10%;right:10%;height:4px;display:flex;justify-content:center}.target-zone{height:100%;background:#4caf5099;border-radius:2px;box-shadow:0 0 8px #4caf5066}.level-progress{width:100%;max-width:280px;display:flex;flex-direction:column;gap:.5rem}.progress-label{font-size:clamp(.75rem,2vw,.85rem);color:#a08060;text-align:center}.progress-track{height:clamp(10px,2.5vw,14px);background:#0006;border-radius:7px;border:1px solid rgba(139,69,19,.4);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#6464c8cc,#9696ffe6);border-radius:6px;transition:width .1s linear}.progress-fill.active{background:linear-gradient(90deg,#4caf50e6,#81c784);box-shadow:0 0 10px #4caf5080}.center-status{font-size:clamp(.8rem,2.2vw,.95rem);font-weight:700;text-align:center;padding:.25rem}.center-status.centered{color:#66bb6a;text-shadow:0 0 8px rgba(76,175,80,.5)}.center-status.off-center{color:#ffa726}.phase-hint{font-size:clamp(.7rem,1.8vw,.8rem);color:#a08060b3;text-align:center;margin:0}.tamp-phase{display:flex;flex-direction:column;align-items:center;gap:clamp(1rem,3vw,1.5rem);width:100%;position:relative}.pulse-gauge{width:100%;max-width:320px;display:flex;flex-direction:column;gap:.5rem}.gauge-track{position:relative;height:clamp(40px,10vw,60px);background:linear-gradient(180deg,#00000080,#0000004d);border-radius:8px;border:2px solid rgba(139,69,19,.6);overflow:hidden}.sweet-spot{position:absolute;top:0;bottom:0;background:linear-gradient(180deg,#4caf5099,#388e3c80);border-radius:4px;transition:left .05s linear;box-shadow:inset 0 0 10px #4caf504d,0 0 15px #4caf504d}.center-marker{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#ffffff80;transform:translate(-50%);box-shadow:0 0 4px #ffffff4d}.pressure-indicator{position:absolute;left:0;bottom:0;height:8px;background:linear-gradient(90deg,#6464c8cc,#9696ffe6 70%,#ffc864e6 90%,#ff6464);border-radius:0 0 6px 6px;transition:width .1s ease-out}.pressure-indicator.low{background:linear-gradient(90deg,#6464c8cc,#9696ffe6)}.pressure-indicator.good{background:linear-gradient(90deg,#4caf50cc,#81c784e6);box-shadow:0 0 8px #4caf5066}.pressure-indicator.high{background:linear-gradient(90deg,#ffc107cc,#ffa000e6)}.pressure-indicator.over{background:linear-gradient(90deg,#f44336cc,#d32f2fe6);animation:overPressure .3s ease-in-out infinite}@keyframes overPressure{0%,to{opacity:.9}50%{opacity:1}}.pulse-gauge .gauge-labels{display:flex;justify-content:space-between;padding:0 .5rem}.pulse-gauge .gauge-labels span{font-size:clamp(.65rem,1.5vw,.75rem);color:#a08060b3;font-weight:600}.tamp-stats{display:flex;justify-content:center;gap:clamp(1rem,3vw,1.5rem);width:100%;max-width:320px}.tamp-stats .stat{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:clamp(.5rem,1.5vw,.75rem);background:#0000004d;border-radius:8px;border:1px solid rgba(139,69,19,.3);min-width:70px}.stat-label{font-size:clamp(.6rem,1.5vw,.7rem);color:#a08060b3;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:clamp(1.1rem,3vw,1.3rem);font-weight:700;font-family:Courier New,monospace;color:#d4a574}.stat-value.low{color:#64b5f6}.stat-value.good{color:#66bb6a;text-shadow:0 0 8px rgba(76,175,80,.5)}.stat-value.high{color:#ffc107}.stat-value.over{color:#ef5350;animation:textPulse .5s ease-in-out infinite}.stat-value.hits{color:#81c784}.stat-value.combo{color:#ffd54f;text-shadow:0 0 8px rgba(255,213,79,.5)}@keyframes textPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tamp-pulse-button{padding:clamp(1rem,3vw,1.5rem) clamp(2.5rem,8vw,4rem);background:linear-gradient(135deg,#ffb432e6,#d48c1ef2);border:none;border-radius:16px;color:#1a0f0a;font-size:clamp(1.2rem,4vw,1.5rem);font-weight:700;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none;min-height:60px;min-width:180px;box-shadow:0 6px 20px #0006,0 0 30px #ffb4324d}.tamp-pulse-button:focus-visible{outline:3px solid #66bb6a;outline-offset:2px}.tamp-pulse-button:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000080,0 0 40px #ffb43280}.tamp-pulse-button:active{transform:translateY(2px) scale(.98);box-shadow:0 2px 8px #0006,0 0 20px #ffb4324d;background:linear-gradient(135deg,#4caf50e6,#388e3cf2);color:#fff}.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.particle{position:absolute;font-size:clamp(1rem,3vw,1.5rem);animation:particleFly .5s ease-out forwards}@keyframes particleFly{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-50px) scale(1.5)}}.ready-state{display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vw,2rem);padding:clamp(1rem,3vw,1.5rem)}.ready-visual{display:flex;flex-direction:column;align-items:center;gap:.75rem}.portafilter-icon{font-size:clamp(3rem,10vw,4rem);animation:readyBounce 2s ease-in-out infinite}@keyframes readyBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.ready-text{font-size:clamp(.9rem,2.5vw,1rem);color:#a08060}.start-button{padding:clamp(.85rem,2.5vw,1.1rem) clamp(2rem,6vw,3rem);background:linear-gradient(135deg,#d4a574,#a08060);border:none;border-radius:12px;color:#1a0f0a;font-size:clamp(1rem,3vw,1.2rem);font-weight:700;cursor:pointer;transition:all .2s ease;min-height:48px;box-shadow:0 4px 12px #0006}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000080,0 0 20px #d4a57466}.start-button:active{transform:translateY(0)}.tamping-result{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);padding:clamp(1rem,3vw,1.5rem);border-radius:12px;animation:fadeIn .5s ease;min-height:100px;width:100%;max-width:320px}.tamping-result.success{background:linear-gradient(135deg,#4caf504d,#2e7d3240);border:2px solid #66bb6a;box-shadow:0 0 40px #4caf5080,0 8px 24px #0006}.tamping-result.failure{background:linear-gradient(135deg,#c864644d,#8b000033);border:2px solid rgba(239,83,80,.6);box-shadow:0 0 40px #ef53504d,0 8px 24px #0006}.result-text{font-size:clamp(1rem,3vw,1.2rem);font-weight:700;color:#d4a574;text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:center;margin:0}.result-stats{display:flex;flex-direction:column;gap:clamp(.4rem,1vw,.6rem);width:100%;margin-top:clamp(.5rem,1.5vw,.75rem)}.result-stats .stat{font-size:clamp(.8rem,2vw,.95rem);color:#a08060;text-align:center;font-family:Courier New,monospace;padding:clamp(.3rem,.75vw,.4rem);background:#0003;border-radius:4px}@media(max-width:480px){.level-container{max-width:260px}.coffee-bed{height:50px}.pulse-gauge{max-width:280px}.tamp-stats{gap:.75rem}.tamp-stats .stat{min-width:60px;padding:.4rem}.tamp-pulse-button{min-height:70px;min-width:200px;font-size:1.3rem}}@media(min-width:481px){.level-container{max-width:320px}.pulse-gauge{max-width:360px}.gauge-track{height:55px}}@media(min-width:1025px){.tamping-game.pressure-pulse{gap:1.25rem;padding:1.5rem}.level-container{max-width:350px}.coffee-bed{height:70px}.pulse-gauge{max-width:400px}.gauge-track{height:60px}}@media(max-height:500px)and (orientation:landscape){.tamping-game.pressure-pulse{min-height:340px;padding:.75rem;gap:.5rem}.level-phase,.tamp-phase{gap:.75rem}.level-container{max-width:220px}.coffee-bed{height:40px}.gauge-track{height:35px}.tamp-pulse-button{min-height:50px;padding:.75rem 2rem}}@media(prefers-reduced-motion:reduce){.tamping-game.pressure-pulse:before,.coffee-bed,.bubble,.progress-fill,.sweet-spot,.pressure-indicator,.tamp-pulse-button,.particle,.portafilter-icon,.tamping-result,.stat-value.over{animation:none!important;transition:none!important}}.extraction-game{display:flex;flex-direction:column;align-items:center;gap:var(--gap-sm);padding:var(--pad-md);background:var(--gradient-brown-dark);border-radius:var(--radius-xl);border:1px solid var(--color-border-brown);box-shadow:var(--shadow-xl),var(--shadow-inset-lg),0 0 60px #8b000026;min-height:clamp(480px,75vh,650px);width:100%;max-width:600px;position:relative;overflow:hidden}.extraction-game:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b00004d,#8b451333,#8b00004d);border-radius:inherit;opacity:.3;animation:eerieGlow 4s var(--ease-ease-in-out) infinite;pointer-events:none;z-index:0}.extraction-game.in-zone:before{background:linear-gradient(45deg,#4caf504d,#388e3c33,#4caf504d)}.screen-glow-perfect{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at center,rgba(76,175,80,.2) 0%,transparent 70%);animation:perfectPulse 1s ease-in-out infinite;z-index:1}.screen-glow-warning{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at center,rgba(255,152,0,.12) 0%,transparent 70%);animation:warningFlash .6s ease-in-out infinite;z-index:1}@keyframes perfectPulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes warningFlash{0%,to{opacity:.3}50%{opacity:.6}}.extraction-header{text-align:center;z-index:2}.extraction-header h3{color:#d4a574;font-size:clamp(1.2rem,4vw,1.5rem);margin:0 0 .25rem;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(139,0,0,.3);font-weight:700;letter-spacing:.5px}.extraction-instruction{color:#a08060;font-size:clamp(.75rem,2.2vw,.85rem);margin:0;font-style:italic}.phase-indicator-bar{display:flex;gap:clamp(.2rem,.8vw,.4rem);width:100%;max-width:400px;z-index:2}.phase-segment{flex:1;position:relative;padding:clamp(.25rem,.7vw,.35rem) clamp(.3rem,.8vw,.5rem);background:#3c281e99;border:1px solid rgba(139,69,19,.4);border-radius:6px;text-align:center;overflow:hidden;transition:all .3s ease}.phase-segment.active{background:#4caf5033;border-color:#66bb6a;box-shadow:0 0 10px #4caf504d}.phase-segment.complete{background:#4caf5066;border-color:#4caf50}.phase-name{font-size:clamp(.55rem,1.6vw,.7rem);color:#a08060;font-weight:600;text-transform:uppercase;letter-spacing:.3px;position:relative;z-index:1}.phase-segment.active .phase-name,.phase-segment.complete .phase-name{color:#66bb6a}.phase-progress{position:absolute;left:0;bottom:0;height:3px;background:linear-gradient(90deg,#66bb6a,#4caf50);transition:width .1s linear}.combo-display{position:absolute;top:clamp(50px,10vh,75px);right:clamp(8px,2.5vw,16px);display:flex;flex-direction:column;align-items:center;padding:clamp(.3rem,.8vw,.5rem) clamp(.5rem,1.2vw,.8rem);background:linear-gradient(135deg,#ffc10733,#ff980026);border:2px solid rgba(255,193,7,.6);border-radius:8px;z-index:10;transition:transform .15s ease}.combo-display.pulse{transform:scale(1.15);border-color:#ffd700e6;box-shadow:0 0 18px #ffc10780}.combo-count{font-size:clamp(1.1rem,3.5vw,1.5rem);font-weight:700;color:#ffc107;text-shadow:0 2px 8px rgba(0,0,0,.8),0 0 12px rgba(255,193,7,.4);line-height:1}.combo-label{font-size:clamp(.5rem,1.5vw,.65rem);color:#ffab00;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.extraction-gameplay{display:flex;align-items:stretch;justify-content:center;gap:clamp(.5rem,2vw,1rem);width:100%;flex:1;min-height:200px;z-index:2}.pressure-control-area{display:flex;flex-direction:column;align-items:center;gap:clamp(.3rem,.8vw,.5rem)}.pressure-control-area .pressure-label{font-size:clamp(.65rem,1.8vw,.75rem);color:#a08060;font-weight:600;text-transform:uppercase;letter-spacing:1px}.pressure-slider{position:relative;width:clamp(60px,15vw,80px);height:clamp(180px,35vh,280px);cursor:grab;user-select:none;-webkit-user-select:none}.pressure-slider.dragging{cursor:grabbing}.slider-track{position:absolute;left:50%;transform:translate(-50%);width:clamp(24px,6vw,32px);height:100%;background:linear-gradient(180deg,#f443364d,#ff98004d,#4caf504d,#ff98004d,#2196f34d);border-radius:16px;border:2px solid rgba(74,48,32,.7);box-shadow:inset 0 0 15px #00000080;overflow:visible}.target-zone{position:absolute;left:-4px;right:-4px;background:#4caf5059;border:2px dashed rgba(102,187,106,.8);border-radius:8px;transition:bottom .3s ease,height .3s ease;animation:zonePulse 2s ease-in-out infinite}@keyframes zonePulse{0%,to{opacity:.6}50%{opacity:1}}.target-line{position:absolute;left:-8px;right:-8px;height:3px;background:#66bb6a;border-radius:2px;transition:bottom .3s ease;box-shadow:0 0 8px #4caf5099}.pressure-handle{position:absolute;left:50%;transform:translate(-50%,50%);width:clamp(44px,11vw,56px);height:clamp(28px,7vw,36px);border-radius:8px;transition:bottom .05s linear;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000080}.pressure-handle.in-zone{background:linear-gradient(180deg,#66bb6a,#388e3c);border:2px solid #81c784;box-shadow:0 4px 12px #00000080,0 0 20px #4caf5080}.pressure-handle.out-zone{background:linear-gradient(180deg,#ffb74d,#f57c00);border:2px solid #ffcc80;box-shadow:0 4px 12px #00000080,0 0 15px #ff980066}.handle-grip{width:60%;height:4px;background:#fff6;border-radius:2px;box-shadow:0 4px #ffffff40,0 8px #ffffff26}.slider-labels{position:absolute;left:calc(100% + 8px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;font-size:clamp(.55rem,1.5vw,.65rem);color:#888}.slider-labels .label-high{color:#ef5350}.slider-labels .label-mid{color:#66bb6a}.slider-labels .label-low{color:#42a5f5}.quality-indicator{font-size:clamp(.8rem,2.2vw,.95rem);font-weight:700;padding:clamp(.3rem,.8vw,.4rem) clamp(.5rem,1.5vw,.75rem);border-radius:6px;text-align:center;transition:all .2s ease;min-width:80px}.quality-indicator.good{color:#66bb6a;background:#4caf5026;border:1px solid rgba(76,175,80,.4)}.quality-indicator.bad{color:#ffb74d;background:#ff980026;border:1px solid rgba(255,152,0,.4)}.extraction-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:1;max-width:200px}.espresso-machine-part{display:flex;flex-direction:column;align-items:center;position:relative}.portafilter-image{width:clamp(80px,20vw,110px);height:auto;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}.spouts{display:flex;justify-content:center}.spout{width:clamp(12px,3vw,16px);height:clamp(24px,6vw,32px);background:linear-gradient(180deg,#333333e6,#222222f2);border-radius:0 0 4px 4px;position:relative;box-shadow:inset 0 0 5px #00000080}.spout.pouring .coffee-stream{animation:pour .25s ease-in-out infinite}.coffee-stream{position:absolute;top:100%;left:50%;transform:translate(-50%);width:clamp(3px,.8vw,4px);border-radius:2px;transition:height .1s ease,background-color .3s ease}@keyframes pour{0%,to{opacity:.8}50%{opacity:1}}.coffee-drop{position:absolute;top:45%;border-radius:50%/60% 60% 40% 40%;animation:dropFall .6s ease-in forwards;z-index:3}@keyframes dropFall{0%{transform:translateY(0);opacity:1}to{transform:translateY(80px);opacity:0}}.steam-particle{position:absolute;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(200,200,200,.2) 50%,transparent 100%);border-radius:50%;pointer-events:none;animation:steamRise 1.5s ease-out forwards;z-index:4}@keyframes steamRise{0%{transform:translateY(0) scale(1);opacity:.6}to{transform:translateY(-60px) scale(1.8);opacity:0}}.espresso-cup-container{position:relative;width:clamp(60px,15vw,85px);height:clamp(50px,12vw,70px);margin-top:clamp(15px,4vw,25px)}.cup-image{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}.cup-fill-overlay{position:absolute;bottom:12%;left:18%;right:18%;height:50%;overflow:hidden;border-radius:0 0 50% 50%;pointer-events:none}.cup-fill{position:absolute;bottom:0;left:0;right:0;transition:height .1s linear,background-color .3s ease;border-radius:0 0 50% 50%}.crema-layer{position:absolute;top:0;left:0;right:0;height:clamp(4px,1.2vw,6px);background:linear-gradient(180deg,rgba(196,163,90,.8) 0%,transparent 100%);border-radius:4px}.pressure-gauge-horizontal{width:100%;max-width:200px;display:flex;flex-direction:column;gap:.25rem}.pressure-gauge-horizontal .gauge-label{font-size:clamp(.6rem,1.6vw,.7rem);color:#a08060;font-weight:600;text-transform:uppercase;letter-spacing:.5px;text-align:center}.gauge-track-h{position:relative;height:clamp(16px,4vw,22px);background:#1e140f99;border-radius:11px;border:2px solid rgba(74,48,32,.6);overflow:hidden}.sweet-spot-h{position:absolute;top:0;bottom:0;background:#4caf504d;border-left:2px dashed rgba(102,187,106,.6);border-right:2px dashed rgba(102,187,106,.6);transition:left .3s ease,width .3s ease}.pressure-fill-h{position:absolute;top:2px;bottom:2px;left:2px;border-radius:8px;transition:width .05s linear}.pressure-fill-h.in-zone{background:linear-gradient(90deg,#388e3c,#66bb6a);box-shadow:0 0 8px #4caf5080}.pressure-fill-h.out-zone{background:linear-gradient(90deg,#f57c00,#ffb74d);box-shadow:0 0 6px #ff980066}.target-marker{position:absolute;top:-4px;bottom:-4px;width:3px;background:#66bb6a;transform:translate(-50%);transition:left .3s ease;border-radius:2px;box-shadow:0 0 8px #4caf5099}.gauge-values{display:flex;justify-content:space-between;font-size:clamp(.55rem,1.5vw,.65rem);color:#888}.target-value{color:#66bb6a}.fill-progress{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:.2rem;z-index:2}.fill-bar{width:100%;height:clamp(8px,2vw,12px);background:#0000004d;border-radius:6px;overflow:hidden;border:1px solid rgba(74,48,32,.5)}.fill-level{height:100%;background:linear-gradient(90deg,#8b4513,sienna);border-radius:5px;transition:width .1s linear}.fill-text{font-size:clamp(.6rem,1.6vw,.7rem);color:#a08060}.extraction-controls{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);width:100%;z-index:2}.start-button{padding:clamp(.75rem,2.2vw,1rem) clamp(1.5rem,5vw,2.5rem);background:linear-gradient(135deg,#4caf50,#388e3c);border:none;border-radius:12px;color:#fff;font-size:clamp(.95rem,2.8vw,1.1rem);font-weight:700;cursor:pointer;transition:all .2s ease;min-height:44px;min-width:150px;box-shadow:0 4px 12px #0006}.start-button:active{transform:translateY(1px)}.control-hint{display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:clamp(.65rem,1.8vw,.75rem);color:#888}.mobile-hint{display:block}.desktop-hint{display:none;color:#666}.extraction-result{display:flex;flex-direction:column;align-items:center;gap:clamp(.4rem,1.2vw,.6rem);padding:clamp(.75rem,2.5vw,1.25rem);border-radius:12px;animation:fadeIn .5s ease;z-index:2}.extraction-result.good{background:linear-gradient(135deg,#4caf5040,#2e7d3233);border:2px solid #66bb6a;box-shadow:0 0 35px #4caf5066,0 6px 20px #0006}.extraction-result.bad{background:linear-gradient(135deg,#8b000066,#5500004d);border:2px solid #8b0000;box-shadow:0 0 35px #8b000066,0 6px 20px #0006}.extraction-result .result-icon{font-size:clamp(1.8rem,5.5vw,2.3rem)}.extraction-result.good .result-icon{color:#66bb6a}.extraction-result.bad .result-icon{color:#ef5350}.result-quality{font-size:clamp(1.2rem,3.5vw,1.5rem);font-weight:700;color:#d4a574;text-shadow:0 2px 8px rgba(0,0,0,.6)}.result-text{font-size:clamp(.85rem,2.5vw,1rem);color:#a08060}.result-stats{display:flex;gap:clamp(1rem,3vw,1.5rem);margin-top:.25rem}.result-stats .stat{display:flex;flex-direction:column;align-items:center;gap:.1rem}.stat-label{font-size:clamp(.6rem,1.6vw,.7rem);color:#888}.stat-value{font-size:clamp(.85rem,2.2vw,1rem);color:#d4a574;font-weight:700}.stat-value.combo-value{color:#ffc107;text-shadow:0 0 8px rgba(255,193,7,.4)}@media(min-width:481px){.extraction-game{gap:var(--gap-md);padding:var(--pad-lg)}.extraction-gameplay{gap:clamp(1rem,3vw,1.5rem)}.pressure-slider{width:clamp(70px,12vw,90px);height:clamp(220px,40vh,300px)}.extraction-visual,.pressure-gauge-horizontal{max-width:240px}.desktop-hint{display:block}}@media(min-width:1025px){.extraction-game{gap:1.25rem;padding:1.5rem}.pressure-slider{width:85px;height:300px}.slider-track{width:32px}.pressure-handle{width:56px;height:36px}}@media(max-height:500px)and (orientation:landscape){.extraction-game{min-height:320px;padding:.5rem .75rem;gap:.4rem;flex-direction:row;flex-wrap:wrap;justify-content:center}.extraction-header{width:100%;order:-1}.phase-indicator-bar{width:100%;max-width:none;order:0}.extraction-gameplay{flex:1;min-height:150px;order:1}.pressure-slider{height:clamp(120px,25vh,180px)}.extraction-visual{transform:scale(.75);margin:-10px}.fill-progress{order:2}.extraction-controls{order:3;width:auto}}@media(prefers-reduced-motion:reduce){.extraction-game:before,.target-zone,.target-line,.pressure-handle,.sweet-spot-h,.target-marker,.coffee-stream,.cup-fill,.steam-particle,.coffee-drop,.extraction-result,.combo-display,.phase-segment{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.milk-steaming-game{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);padding:clamp(.75rem,2vw,1rem);background:linear-gradient(135deg,#2d1810f2,#1a0f0afa);border-radius:clamp(12px,2vw,16px);border:1px solid rgba(139,69,19,.4);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #8b000026;min-height:clamp(480px,75vh,650px);width:100%;max-width:600px;position:relative;overflow:hidden}.milk-steaming-game:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b00004d,#8b451333,#8b00004d);border-radius:inherit;opacity:.3;animation:eerieGlow 4s ease-in-out infinite;pointer-events:none;z-index:-1}.milk-steaming-game.effect-perfect{box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #4caf5066}.milk-steaming-game.effect-foam{box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #2196f366}.milk-steaming-game.effect-warning{box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #ff980080}.screen-glow-perfect{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(76,175,80,.12) 0%,transparent 70%);pointer-events:none;z-index:0;animation:pulseGlow 1s ease-in-out infinite;border-radius:inherit}.screen-glow-foam{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(33,150,243,.12) 0%,transparent 70%);pointer-events:none;z-index:0;animation:foamPulse .8s ease-in-out infinite;border-radius:inherit}.screen-glow-warning{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,152,0,.15) 0%,transparent 70%);pointer-events:none;z-index:0;animation:warningPulse .5s ease-in-out infinite;border-radius:inherit}@keyframes pulseGlow{0%,to{opacity:.7}50%{opacity:1}}@keyframes foamPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes warningPulse{0%,to{opacity:.6}50%{opacity:1}}.steam-particle{position:absolute;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8) 0%,rgba(200,200,200,.4) 50%,transparent 100%);border-radius:50%;pointer-events:none;z-index:5;animation:steamRise 1.5s ease-out forwards}@keyframes steamRise{0%{transform:translateY(0) scale(1);opacity:.7}to{transform:translateY(-80px) scale(2);opacity:0}}.swirl-success-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#4caf5026;pointer-events:none;z-index:20;animation:swirlFlash .5s ease-out forwards}.swirl-success-overlay .swirl-icon{font-size:clamp(3rem,10vw,5rem);animation:swirlSpin .5s ease-out}@keyframes swirlFlash{0%{opacity:1}to{opacity:0}}@keyframes swirlSpin{0%{transform:rotate(0) scale(.5);opacity:0}50%{transform:rotate(180deg) scale(1.2);opacity:1}to{transform:rotate(360deg) scale(1);opacity:0}}.steaming-header{text-align:center;z-index:1}.steaming-header h3{color:#d4a574;font-size:clamp(1.1rem,3.5vw,1.4rem);margin:0 0 .25rem;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(139,0,0,.3);font-weight:700;letter-spacing:.5px}.steaming-instruction{color:#a08060;font-size:clamp(.75rem,2.2vw,.85rem);margin:0;font-style:italic;min-height:1.2em}.steaming-main-area{display:flex;gap:clamp(.75rem,2vw,1.25rem);width:100%;justify-content:center;align-items:stretch;flex:1;min-height:0}.depth-control-section{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex-shrink:0}.depth-label{color:#a08060;font-size:clamp(.6rem,1.8vw,.75rem);font-weight:600;text-transform:uppercase;letter-spacing:.5px}.depth-slider{position:relative;width:clamp(50px,12vw,70px);height:clamp(140px,35vw,200px);background:#0006;border-radius:12px;border:2px solid rgba(74,48,32,.7);overflow:hidden;cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none}.depth-slider.dragging{border-color:#d4a574cc;box-shadow:0 0 15px #d4a5744d}.zone-indicator{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;transition:background .3s ease}.zone-indicator.foam-zone{top:0;background:linear-gradient(180deg,#2196f366,#2196f333);border-bottom:1px dashed rgba(33,150,243,.5)}.zone-indicator.microfoam-zone{background:linear-gradient(180deg,#4caf504d,#4caf5066,#4caf504d);border-top:2px dashed rgba(76,175,80,.6);border-bottom:2px dashed rgba(76,175,80,.6)}.zone-indicator.deep-zone{background:linear-gradient(180deg,#8b451333,#8b451366);border-top:1px dashed rgba(139,69,19,.5)}.zone-label{font-size:clamp(.5rem,1.5vw,.6rem);font-weight:600;color:#fff9;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 3px rgba(0,0,0,.8)}.wand-indicator{position:absolute;left:-4px;right:-4px;height:12px;transform:translateY(-50%);transition:top .05s linear;z-index:10;display:flex;align-items:center;justify-content:center}.wand-indicator.foam{background:linear-gradient(90deg,#2196f3e6,#1976d2,#2196f3e6);box-shadow:0 0 15px #2196f3b3}.wand-indicator.microfoam{background:linear-gradient(90deg,#4caf50e6,#388e3c,#4caf50e6);box-shadow:0 0 20px #4caf50cc}.wand-indicator.deep{background:linear-gradient(90deg,#ff9800e6,#f57c00,#ff9800e6);box-shadow:0 0 15px #ff980099}.wand-handle{width:20px;height:20px;background:linear-gradient(135deg,#fff,#ccc);border-radius:50%;box-shadow:0 2px 6px #0006}.depth-hint{font-size:clamp(.55rem,1.5vw,.65rem);color:gray;text-align:center}.pitcher-section{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1;max-width:200px}.milk-pitcher-container{position:relative;width:clamp(100px,25vw,140px);height:clamp(130px,32vw,180px);cursor:crosshair;touch-action:none}.milk-pitcher-container.swirling{animation:pitcherSwirl .5s ease-out}@keyframes pitcherSwirl{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.pitcher-image{position:absolute;width:100%;height:auto;object-fit:contain;left:50%;transform:translate(-50%);bottom:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));z-index:2}.milk-pitcher-visual{width:100%;height:100%;background:linear-gradient(135deg,#cccccce6,#999999f2);border-radius:10px 10px 40% 40%;position:relative;overflow:hidden;border:3px solid rgba(136,136,136,.7);box-shadow:0 8px 20px #0006,inset 0 2px 10px #fff3}.milk-layers{position:absolute;bottom:0;left:0;right:0;height:70%;display:flex;flex-direction:column}.milk-layers .foam-layer{background:linear-gradient(180deg,#fffffff2,#f5f5dce6);border-radius:5px;transition:height .2s ease;box-shadow:inset 0 -2px 8px #0000001a}.milk-layers .microfoam-layer{background:linear-gradient(180deg,#f5f5dcf2,#f0ebd2fa);transition:height .2s ease}.milk-layers .milk-body{flex:1;background:linear-gradient(180deg,#f0ebd2f2,#e8e0c8fa)}.vortex-effect{position:absolute;top:30%;left:50%;width:40px;height:40px;transform:translate(-50%);border-radius:50%;border:3px solid rgba(255,255,255,.6);border-top-color:transparent;animation:vortexSpin .4s linear infinite}@keyframes vortexSpin{0%{transform:translate(-50%) rotate(0)}to{transform:translate(-50%) rotate(360deg)}}.steam-bubbles{position:absolute;top:20%;left:50%;transform:translate(-50%);width:20px;height:20px;border-radius:50%;animation:bubble .5s ease-in-out infinite}.steam-bubbles.foam{background:radial-gradient(circle,rgba(255,255,255,.9) 0%,transparent 70%);width:25px;height:25px}.steam-bubbles.microfoam{background:radial-gradient(circle,rgba(255,255,255,.7) 0%,transparent 70%)}.steam-bubbles.deep{background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 70%);width:15px;height:15px}@keyframes bubble{0%,to{transform:translate(-50%) translateY(0) scale(1);opacity:.8}50%{transform:translate(-50%) translateY(-10px) scale(1.3);opacity:.4}}.steam-wand{position:absolute;top:clamp(10px,3vw,15px);right:clamp(-15px,-4vw,-20px);width:clamp(6px,1.5vw,8px);height:clamp(80px,20vw,110px);background:linear-gradient(180deg,#666666e6,#444444f2);border-radius:4px;transform-origin:top center;transition:transform .1s ease;box-shadow:0 4px 10px #0006;z-index:5}.steam-wand.active{filter:brightness(1.1)}.wand-image{width:clamp(12px,3vw,18px);height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.wand-visual{width:100%;height:100%;background:linear-gradient(180deg,#888,#555);border-radius:4px}.steam-effect{position:absolute;bottom:clamp(-15px,-4vw,-20px);left:50%;transform:translate(-50%);width:12px;height:20px;background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,transparent 100%);border-radius:50% 50% 0 0;animation:steam .5s ease-in-out infinite}@keyframes steam{0%,to{opacity:.5;transform:translate(-50%) translateY(0)}50%{opacity:1;transform:translate(-50%) translateY(-8px)}}.swirl-prompt{position:absolute;bottom:10%;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.25rem;background:#4caf5033;border:1px solid rgba(76,175,80,.5);border-radius:8px;padding:.25rem .5rem;font-size:clamp(.6rem,1.8vw,.75rem);color:#a0d0a0;animation:promptPulse 1s ease-in-out infinite;white-space:nowrap}.swirl-icon-prompt{font-size:1.1em;animation:swirlHint 2s linear infinite}@keyframes promptPulse{0%,to{opacity:.7;transform:translate(-50%) scale(1)}50%{opacity:1;transform:translate(-50%) scale(1.05)}}@keyframes swirlHint{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swirl-counter{font-size:clamp(.7rem,2vw,.85rem);color:#a0d0a0;background:#4caf5026;border:1px solid rgba(76,175,80,.3);border-radius:6px;padding:.25rem .5rem}.quality-meters{display:flex;gap:clamp(.75rem,2vw,1rem);width:100%;max-width:280px}.meter{flex:1;display:flex;flex-direction:column;gap:.2rem}.meter-label{font-size:clamp(.6rem,1.8vw,.7rem);color:#a08060;text-transform:uppercase;letter-spacing:.5px}.meter-bar{height:clamp(8px,2vw,12px);background:#0006;border-radius:6px;overflow:hidden;border:1px solid rgba(74,48,32,.5)}.meter-fill{height:100%;background:linear-gradient(90deg,#ff9800,#ffc107);border-radius:6px;transition:width .1s ease}.meter-bar.quality .meter-fill{background:linear-gradient(90deg,#4caf50,#8bc34a)}.temp-display-container{display:flex;flex-direction:column;align-items:center;gap:clamp(.25rem,.8vw,.4rem);width:100%;max-width:280px}.temp-display{display:flex;align-items:baseline;gap:.2rem;transition:color .3s ease;padding:clamp(.3rem,1vw,.5rem);background:#0000004d;border-radius:10px;border:1px solid rgba(139,69,19,.3)}.temp-value{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:700;font-family:Courier New,monospace;text-shadow:0 0 15px currentColor;line-height:1}.temp-unit{font-size:clamp(.8rem,2.5vw,1.1rem)}.temp-status{font-size:clamp(.85rem,2.5vw,1rem);font-weight:700;transition:color .3s ease}.temp-bar{width:100%;position:relative;height:clamp(14px,3.5vw,18px);background:#0000004d;border-radius:10px;overflow:hidden;border:2px solid rgba(74,48,32,.7)}.temp-zones{position:absolute;inset:0;display:flex}.temp-zones .zone{height:100%}.temp-zones .zone.cold{background:#2196f34d}.temp-zones .zone.perfect{background:#4caf5066}.temp-zones .zone.hot{background:#ff98004d}.temp-zones .zone.burnt{background:#f443364d}.temp-marker{position:absolute;top:-3px;bottom:-3px;width:clamp(5px,1.3vw,8px);background:linear-gradient(180deg,#fff,#ccc);border-radius:4px;transform:translate(-50%);transition:left .1s linear;box-shadow:0 0 8px #00000080}.temp-labels{display:flex;justify-content:space-between;margin-top:clamp(2px,.5vw,4px);font-size:clamp(.55rem,1.5vw,.65rem);color:gray}.temp-labels .target{color:#66bb6a;font-weight:600}.steaming-controls{display:flex;justify-content:center;width:100%;padding-top:.25rem}.start-button{padding:clamp(.7rem,2vw,.9rem) clamp(1.5rem,4vw,2rem);background:linear-gradient(135deg,#4caf50,#388e3c);border:none;border-radius:12px;color:#fff;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700;cursor:pointer;transition:all .2s ease;min-height:44px;min-width:140px;box-shadow:0 4px 12px #0006}.start-button:focus-visible{outline:3px solid #66bb6a;outline-offset:2px}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000080,0 0 20px #4caf5066}.stop-button{padding:clamp(.7rem,2vw,.9rem) clamp(1.5rem,4vw,2rem);background:linear-gradient(135deg,#f44336,#c62828);border:none;border-radius:12px;color:#fff;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700;cursor:pointer;transition:all .2s ease;animation:pulse-stop 1s ease-in-out infinite;min-height:44px;min-width:140px;box-shadow:0 4px 12px #0006}.stop-button:focus-visible{outline:3px solid #fff;outline-offset:2px}.stop-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000080,0 0 20px #f4433666}@keyframes pulse-stop{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.steaming-result{display:flex;flex-direction:column;align-items:center;gap:clamp(.4rem,1.2vw,.6rem);padding:clamp(.75rem,2vw,1rem);border-radius:12px;animation:fadeIn .5s ease;width:100%;max-width:280px}.steaming-result.good{background:linear-gradient(135deg,#4caf5040,#2e7d3233);border:2px solid #66bb6a;box-shadow:0 0 40px #4caf5066,0 8px 24px #0006}.steaming-result.bad{background:linear-gradient(135deg,#8b000066,#5500004d);border:2px solid #8b0000;box-shadow:0 0 40px #8b000066,0 8px 24px #0006}.steaming-result .result-icon{font-size:clamp(1.8rem,5vw,2.2rem)}.steaming-result.good .result-icon{color:#66bb6a}.steaming-result.bad .result-icon{color:#ef5350}.steaming-result .result-text{font-size:clamp(.95rem,3vw,1.15rem);font-weight:700;color:#d4a574;text-shadow:0 2px 8px rgba(0,0,0,.6)}.result-scores{display:flex;flex-direction:column;gap:clamp(.25rem,.8vw,.4rem);font-size:clamp(.75rem,2.2vw,.9rem);font-weight:600;color:#a08060;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(min-width:481px){.steaming-main-area{gap:1.5rem}.depth-slider{width:65px;height:180px}.milk-pitcher-container{width:130px;height:170px}.quality-meters,.temp-display-container{max-width:320px}}@media(min-width:1025px){.milk-steaming-game{gap:.75rem;padding:1.25rem}.depth-slider{width:70px;height:200px}.milk-pitcher-container{width:140px;height:180px}.quality-meters{max-width:360px}}@media(max-height:500px)and (orientation:landscape){.milk-steaming-game{min-height:320px;padding:.5rem;gap:.35rem}.steaming-main-area{gap:1rem}.depth-slider{height:120px;width:45px}.milk-pitcher-container{width:90px;height:115px}.temp-value{font-size:1.5rem}.quality-meters{flex-direction:row;max-width:300px}}@media(max-width:375px){.milk-steaming-game{padding:.6rem;gap:.4rem;min-height:450px}.depth-slider{width:45px;height:130px}.milk-pitcher-container{width:90px;height:120px}.temp-value{font-size:1.5rem}.temp-bar{height:12px}.start-button,.stop-button{min-height:44px;min-width:130px;font-size:.9rem}}@media(max-width:320px){.milk-steaming-game{padding:.5rem;gap:.3rem;min-height:420px}.steaming-header h3{font-size:1rem}.depth-slider{width:40px;height:110px}.zone-label{font-size:.45rem}.milk-pitcher-container{width:80px;height:105px}.temp-value{font-size:1.3rem}.temp-bar{height:10px}.quality-meters{gap:.5rem}.meter-bar{height:7px}.start-button,.stop-button{min-height:40px;min-width:120px;font-size:.85rem;padding:.5rem 1rem}}@media(prefers-reduced-motion:reduce){.milk-steaming-game:before,.steam-particle,.swirl-success-overlay,.swirl-icon,.vortex-effect,.steam-bubbles,.steam-effect,.temp-marker,.stop-button,.steaming-result,.swirl-prompt,.swirl-icon-prompt,.milk-pitcher-container{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.syrup-pumps-game{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);padding:clamp(.75rem,2vw,1rem);background:linear-gradient(135deg,#2d1810f2,#1a0f0afa);border-radius:clamp(12px,2vw,16px);border:1px solid rgba(139,69,19,.4);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #8b000026;min-height:clamp(480px,75vh,650px);width:100%;max-width:650px;position:relative;overflow:hidden}.syrup-pumps-game:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b00004d,#8b451333,#8b00004d);border-radius:inherit;opacity:.3;animation:eerieGlow 4s ease-in-out infinite;pointer-events:none;z-index:-1}.pumps-header{text-align:center;z-index:10}.pumps-header h3{color:#d4a574;font-size:clamp(1.1rem,3.5vw,1.4rem);margin:0 0 .25rem;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(139,0,0,.3);font-weight:700;letter-spacing:.5px}.pumps-instruction{color:#a08060;font-size:clamp(.75rem,2vw,.85rem);margin:0;font-family:Courier New,monospace}.countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;z-index:50;animation:fadeIn .3s ease}.countdown-number{font-size:clamp(4rem,15vw,6rem);font-weight:900;color:#d4a574;text-shadow:0 4px 20px rgba(0,0,0,.8),0 0 40px rgba(212,165,116,.5);animation:countdownPulse .8s ease-out}@keyframes countdownPulse{0%{transform:scale(1.5);opacity:0}50%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:.8}}.cascade-feedback{position:fixed;top:35%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.25rem;z-index:100;animation:feedbackPop .3s ease-out forwards;pointer-events:none}.cascade-feedback .feedback-text{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:900;text-shadow:0 4px 12px rgba(0,0,0,.8)}.cascade-feedback .feedback-combo{font-size:clamp(1rem,3vw,1.5rem);font-weight:700;color:gold;text-shadow:0 2px 8px rgba(0,0,0,.6)}.cascade-feedback.perfect .feedback-text{color:#66bb6a}.cascade-feedback.good .feedback-text{color:#ffa726}.cascade-feedback.miss .feedback-text{color:#ef5350}@keyframes feedbackPop{0%{transform:translate(-50%,-50%) scale(1.5);opacity:1}to{transform:translate(-50%,-50%) scale(1) translateY(-20px);opacity:0}}.cascade-display{display:flex;gap:clamp(.25rem,1vw,.5rem);width:100%;flex:1;min-height:0;justify-content:center;padding:0 clamp(.25rem,1vw,.5rem)}.cascade-lane{display:flex;flex-direction:column;align-items:center;gap:clamp(.25rem,.75vw,.4rem);flex:1;max-width:calc(100% / var(--lane-count, 3));min-width:clamp(60px,18vw,100px)}.lane-header{display:flex;flex-direction:column;align-items:center;gap:.1rem}.lane-name{font-size:clamp(.6rem,1.5vw,.75rem);color:var(--lane-color, #d4a574);font-weight:600;text-transform:uppercase;letter-spacing:.3px;text-shadow:0 1px 4px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lane-key{font-size:clamp(.55rem,1.3vw,.65rem);color:#a0806099;font-family:Courier New,monospace;display:none}.note-track{position:relative;width:100%;flex:1;min-height:clamp(200px,45vh,350px);background:linear-gradient(180deg,#00000080,#0000004d,rgba(var(--lane-color-rgb, 139, 69, 19),.1));border:2px solid rgba(139,69,19,.4);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 20px #0006,0 4px 12px #0000004d}.cascade-lane.perfect .note-track{box-shadow:inset 0 0 20px #0006,0 0 20px #66bb6a80;border-color:#66bb6a}.cascade-lane.good .note-track{box-shadow:inset 0 0 20px #0006,0 0 15px #ffa72680;border-color:#ffa726}.cascade-lane.pressed .note-track{background:linear-gradient(180deg,#0006,#0003,rgba(var(--lane-color-rgb, 139, 69, 19),.25))}.falling-note{position:absolute;left:50%;width:clamp(30px,70%,50px);height:clamp(30px,8vw,50px);transform:translate(-50%);border-radius:50%;transition:top 16ms linear;z-index:10;box-shadow:0 4px 12px #00000080,inset -2px -2px 6px #0006,inset 2px 2px 6px #fff3}.falling-note.required{box-shadow:0 4px 15px #00000080,0 0 20px #ffd70066,inset -2px -2px 6px #0006,inset 2px 2px 6px #ffffff4d}.falling-note.bonus{opacity:.7;width:clamp(24px,60%,40px);height:clamp(24px,7vw,40px)}.note-inner{position:absolute;top:20%;left:20%;width:35%;height:35%;background:radial-gradient(circle at center,#fff9,#ffffff1a);border-radius:50%}.target-zone{position:absolute;bottom:0;left:0;right:0;height:clamp(40px,10%,60px);display:flex;align-items:center;justify-content:center;background:linear-gradient(0deg,rgba(76,175,80,.25) 0%,rgba(76,175,80,.1) 50%,transparent 100%);border-top:3px solid rgba(102,187,106,.7);z-index:5}.zone-glow{width:80%;height:4px;border-radius:2px;opacity:.6;animation:zonePulse 1s ease-in-out infinite}@keyframes zonePulse{0%,to{opacity:.4;transform:scaleX(.9)}50%{opacity:.8;transform:scaleX(1)}}.lane-button{width:100%;padding:clamp(.6rem,2vw,.9rem) clamp(.4rem,1vw,.6rem);border:none;border-radius:8px;color:#1a0f0a;font-size:clamp(.7rem,1.8vw,.85rem);font-weight:700;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none;min-height:44px;box-shadow:0 4px 12px #0006,inset 0 1px #fff3;text-shadow:0 1px 2px rgba(255,255,255,.3)}.lane-button:focus-visible{outline:3px solid #66bb6a;outline-offset:2px}.lane-button:active,.cascade-lane.pressed .lane-button{transform:translateY(2px) scale(.97);box-shadow:0 2px 6px #0006,inset 0 2px 4px #0003}.button-label{text-transform:uppercase;letter-spacing:.5px}.cascade-stats{display:flex;gap:clamp(.5rem,2vw,1rem);padding:clamp(.4rem,1vw,.6rem) clamp(.75rem,2vw,1rem);background:#0006;border-radius:8px;border:1px solid rgba(139,69,19,.3)}.stat-group{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:clamp(35px,10vw,50px)}.stat-group .stat{font-size:clamp(1rem,3vw,1.3rem);font-weight:700;font-family:Courier New,monospace}.stat-group .stat.perfect{color:#66bb6a}.stat-group .stat.good{color:#ffa726}.stat-group .stat.miss{color:#ef5350}.stat-group.combo .stat{color:gold}.stat-group .stat-label{font-size:clamp(.55rem,1.5vw,.65rem);color:#a08060;text-transform:uppercase;letter-spacing:.3px}.pumps-controls{display:flex;justify-content:center;width:100%;z-index:10}.pump-button{padding:clamp(.85rem,2.5vw,1.1rem) clamp(2rem,6vw,3rem);background:linear-gradient(135deg,#d4a574,#a08060);border:none;border-radius:12px;color:#1a0f0a;font-size:clamp(1rem,3vw,1.2rem);font-weight:700;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;min-height:48px;box-shadow:0 4px 12px #0006}.pump-button:focus-visible{outline:3px solid #66bb6a;outline-offset:2px}.pump-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #00000080,0 0 20px #d4a57466}.pump-button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 8px #0006}.pump-button.start{background:linear-gradient(135deg,#d4a574,#a08060)}.pumps-result{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);padding:clamp(1rem,3vw,1.5rem);border-radius:12px;animation:fadeIn .5s ease;width:100%;max-width:320px}.pumps-result.success{background:linear-gradient(135deg,#4caf504d,#2e7d3240);border:2px solid #66bb6a;box-shadow:0 0 40px #4caf5080,0 8px 24px #0006}.pumps-result.failure{background:linear-gradient(135deg,#c864644d,#8b000033);border:2px solid rgba(239,83,80,.6);box-shadow:0 0 40px #ef53504d,0 8px 24px #0006}.result-icon{font-size:clamp(2rem,6vw,2.5rem);line-height:1}.result-text{font-size:clamp(1.1rem,3.5vw,1.3rem);font-weight:700;color:#d4a574;text-shadow:0 2px 8px rgba(0,0,0,.6);text-align:center;margin:0}.result-stats{display:flex;flex-direction:column;gap:clamp(.3rem,.75vw,.4rem);width:100%}.result-stats .stat{font-size:clamp(.75rem,2vw,.9rem);color:#a08060;text-align:center;font-family:Courier New,monospace;padding:clamp(.25rem,.5vw,.35rem);background:#0003;border-radius:4px}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:480px){.syrup-pumps-game{padding:.5rem;gap:.4rem;min-height:450px}.cascade-display{gap:.2rem;padding:0 .15rem}.cascade-lane{min-width:55px;gap:.2rem}.note-track{min-height:180px;border-radius:6px}.falling-note{width:clamp(26px,65%,40px);height:clamp(26px,7vw,40px)}.lane-button{padding:.5rem .3rem;min-height:40px;border-radius:6px}.cascade-stats{gap:.4rem;padding:.35rem .5rem}.stat-group{min-width:32px}.stat-group .stat{font-size:.9rem}}@media(min-width:481px){.cascade-display{gap:.5rem}.cascade-lane{min-width:80px}.note-track{min-height:280px}.lane-key{display:block}.falling-note{width:clamp(35px,70%,55px);height:clamp(35px,9vw,55px)}.cascade-stats{gap:.75rem}}@media(min-width:1025px){.syrup-pumps-game{gap:.75rem;padding:1rem}.cascade-display{gap:.75rem}.cascade-lane{max-width:120px}.note-track{min-height:350px}.lane-name{font-size:.8rem}.lane-key{font-size:.7rem;color:#a08060cc}.lane-button{padding:.75rem .5rem;font-size:.9rem}.cascade-stats{gap:1rem;padding:.5rem 1rem}.stat-group .stat{font-size:1.4rem}.stat-group .stat-label{font-size:.7rem}}@media(max-height:500px)and (orientation:landscape){.syrup-pumps-game{min-height:320px;padding:.5rem;gap:.35rem;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-start}.pumps-header{width:100%;flex:0 0 auto}.pumps-header h3{font-size:1rem;margin-bottom:.1rem}.pumps-instruction{font-size:.7rem}.cascade-display{flex:1 1 60%;max-width:60%}.note-track{min-height:140px}.cascade-stats{flex:0 1 auto;flex-direction:column;gap:.3rem;padding:.3rem .5rem}.stat-group{flex-direction:row;gap:.3rem}.pumps-controls{width:100%}}@media(prefers-reduced-motion:reduce){.syrup-pumps-game:before,.countdown-number,.cascade-feedback,.zone-glow,.pump-button,.pumps-result,.lane-button{animation:none!important;transition:none!important}.falling-note{transition:none!important}}@media(prefers-contrast:high){.cascade-lane .note-track{border-width:3px}.falling-note{border:2px solid white}.target-zone{border-top-width:4px}.lane-button{border:2px solid rgba(0,0,0,.5)}}:root{--color-primary-gold: #d4a574;--color-primary-tan: #a08060;--color-primary-dark-brown: #2d1810;--color-primary-light-brown: #1a0f0a;--color-success-bright: #66bb6a;--color-success-dark: #388e3c;--color-success-light: #81c784;--color-warning-bright: #ffc107;--color-warning-dark: #ffa000;--color-warning-light: #ffb74d;--color-error-bright: #ef5350;--color-error-dark: #d32f2f;--color-error-light: #ef5350;--color-info-bright: #2196f3;--color-info-dark: #1976d2;--color-info-light: #64b5f6;--color-black: #000000;--color-white: #ffffff;--color-transparent: transparent;--color-bg-dark-overlay: rgba(0, 0, 0, .3);--color-bg-dark-overlay-strong: rgba(0, 0, 0, .5);--color-bg-brown-overlay: rgba(100, 70, 50, .4);--color-bg-brown-light-overlay: rgba(139, 69, 19, .4);--color-bg-success-overlay: rgba(76, 175, 80, .15);--color-bg-warning-overlay: rgba(255, 193, 7, .25);--color-bg-error-overlay: rgba(244, 67, 54, .2);--color-bg-gold-overlay: rgba(212, 165, 116, .15);--color-border-brown: rgba(139, 69, 19, .5);--color-border-gold: rgba(212, 165, 116, .5);--color-border-gold-dark: rgba(212, 165, 116, .6);--color-border-success: rgba(76, 175, 80, .6);--color-shadow-dark: rgba(0, 0, 0, .6);--color-shadow-darker: rgba(0, 0, 0, .7);--color-shadow-light: rgba(255, 255, 255, .2);--color-shadow-light-dark: rgba(255, 255, 255, .03);--color-glow-success: rgba(76, 175, 80, .4);--color-glow-success-strong: rgba(76, 175, 80, .5);--color-glow-error: rgba(244, 67, 54, .3);--color-glow-gold: rgba(212, 165, 116, .4);--color-glow-warning: rgba(255, 193, 7, .3);--gradient-brown-dark: linear-gradient(135deg, rgba(45, 24, 16, .95) 0%, rgba(26, 15, 10, .98) 100%);--gradient-success: linear-gradient(135deg, rgba(76, 175, 80, .3) 0%, rgba(46, 125, 50, .25) 100%);--gradient-success-vibrant: linear-gradient(135deg, rgba(76, 175, 80, .9) 0%, rgba(56, 142, 60, .95) 100%);--gradient-warning: linear-gradient(135deg, rgba(255, 193, 7, .25) 0%, rgba(255, 152, 0, .2) 100%);--gradient-error: linear-gradient(135deg, rgba(244, 67, 54, .25) 0%, rgba(211, 47, 47, .2) 100%);--gradient-gold: linear-gradient(135deg, rgba(212, 165, 116, 1) 0%, rgba(160, 128, 96, 1) 100%);--gradient-gold-muted: linear-gradient(135deg, rgba(180, 140, 100, .9) 0%, rgba(140, 110, 80, .95) 100%);--space-xs: clamp(.25rem, .5vw, .4rem);--space-sm: clamp(.5rem, 1.5vw, .75rem);--space-md: clamp(.75rem, 2vw, 1rem);--space-lg: clamp(1rem, 3vw, 1.5rem);--space-xl: clamp(1.25rem, 4vw, 2rem);--space-2xl: clamp(1.5rem, 5vw, 2.5rem);--pad-xs: clamp(.3rem, .75vw, .4rem);--pad-sm: clamp(.5rem, 1.5vw, .75rem);--pad-md: clamp(.75rem, 2vw, 1rem);--pad-lg: clamp(1rem, 3vw, 1.5rem);--pad-xl: clamp(1.25rem, 3vw, 1.75rem);--gap-xs: clamp(.3rem, .75vw, .5rem);--gap-sm: clamp(.5rem, 1.5vw, .75rem);--gap-md: clamp(.75rem, 2vw, 1rem);--gap-lg: clamp(1rem, 3vw, 1.25rem);--gap-xl: clamp(1.25rem, 3.5vw, 1.5rem);--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-mono: "Courier New", Courier, monospace;--font-gaming: "Arial Black", sans-serif;--font-size-h1: clamp(1.5rem, 5vw, 2rem);--font-size-h2: clamp(1.3rem, 4vw, 1.6rem);--font-size-h3: clamp(1.25rem, 4vw, 1.5rem);--font-size-lg: clamp(1rem, 3vw, 1.2rem);--font-size-md: clamp(.9rem, 2.5vw, 1.05rem);--font-size-sm: clamp(.8rem, 2vw, .95rem);--font-size-xs: clamp(.65rem, 1.5vw, .8rem);--font-size-label: clamp(.7rem, 1.8vw, .85rem);--font-size-stat: clamp(1.5rem, 4vw, 2rem);--font-size-instruction: clamp(.8rem, 2.5vw, .9rem);--font-weight-regular: 400;--font-weight-medium: 600;--font-weight-bold: 700;--font-weight-extra-bold: 900;--line-height-tight: 1;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--letter-spacing-normal: normal;--letter-spacing-wide: .5px;--letter-spacing-wider: 1px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: clamp(12px, 2vw, 16px);--radius-full: 9999px;--border-thin: 1px;--border-normal: 2px;--border-thick: 3px;--shadow-sm: 0 2px 8px var(--color-shadow-dark);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-xl: 0 8px 32px rgba(0, 0, 0, .6);--text-shadow-md: 0 2px 8px var(--color-shadow-dark);--text-shadow-lg: 0 4px 12px var(--color-shadow-darker);--shadow-inset-sm: inset 0 0 8px rgba(0, 0, 0, .4);--shadow-inset-md: inset 0 0 20px rgba(0, 0, 0, .5);--shadow-inset-lg: inset 0 1px 0 rgba(255, 255, 255, .03);--transition-fast: .1s;--transition-normal: .2s;--transition-slow: .3s;--transition-slower: .5s;--ease-linear: linear;--ease-ease: ease;--ease-ease-in: ease-in;--ease-ease-out: ease-out;--ease-ease-in-out: ease-in-out;--transition-color: color var(--transition-normal) var(--ease-ease);--transition-background: background var(--transition-normal) var(--ease-ease);--transition-all-normal: all var(--transition-normal) var(--ease-ease);--transition-all-slow: all var(--transition-slow) var(--ease-ease);--size-touch-target: 48px;--button-min-height: 48px;--button-min-width: 160px;--z-base: 0;--z-overlay: 5;--z-sticky: 10;--z-dropdown: 20;--z-modal: 50;--z-tooltip: 100}.truncate-single{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.truncate-multi{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-column{display:flex;flex-direction:column}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.button-reset{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:inherit}.input-reset{background:none;border:none;padding:0;font:inherit;color:inherit}@media(prefers-reduced-motion:reduce){:root{--transition-fast: 0s;--transition-normal: 0s;--transition-slow: 0s;--transition-slower: 0s}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-contrast:more){:root{--color-border-gold: rgba(212, 165, 116, .8);--color-border-success: rgba(76, 175, 80, .9)}}.pouring-game.canvas-mode{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,2vw,1rem);padding:clamp(.75rem,2.5vw,1.25rem);background:linear-gradient(135deg,#2d1810f2,#1a0f0afa);border-radius:clamp(12px,2vw,16px);border:1px solid rgba(139,69,19,.4);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff08,0 0 60px #8b000026;min-height:clamp(480px,85vh,720px);width:100%;max-width:500px;position:relative;overflow:hidden}.pouring-game.canvas-mode:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#8b00004d,#8b451333,#8b00004d);border-radius:inherit;opacity:.3;animation:eerieGlow 4s ease-in-out infinite;pointer-events:none;z-index:-1}@keyframes eerieGlow{0%,to{opacity:.2}50%{opacity:.4}}.canvas-header{text-align:center;padding:clamp(.25rem,1vw,.5rem) 0}.canvas-header h3{color:#d4a574;font-size:clamp(1.1rem,3.5vw,1.4rem);margin:0 0 clamp(.25rem,1vw,.4rem) 0;text-shadow:0 2px 8px rgba(0,0,0,.7),0 0 20px rgba(139,0,0,.3);font-weight:700;letter-spacing:.5px}.canvas-instruction{color:#a08060;font-size:clamp(.75rem,2.2vw,.9rem);margin:0;font-style:italic;min-height:1.4em}.canvas-timer{display:flex;flex-direction:column;align-items:center;gap:clamp(.15rem,.5vw,.25rem);padding:clamp(.4rem,1.2vw,.6rem) clamp(.8rem,2.5vw,1.2rem);background:#d4a57426;border:2px solid rgba(212,165,116,.5);border-radius:8px;transition:all .3s ease;min-width:clamp(70px,20vw,100px)}.canvas-timer.warning{background:#f4433633;border-color:#ef5350;animation:timeWarning .5s ease-in-out infinite}.canvas-timer .timer-value{font-size:clamp(1.4rem,4.5vw,2rem);font-weight:700;font-family:Courier New,monospace;color:#d4a574;text-shadow:0 2px 8px rgba(0,0,0,.6);line-height:1}.canvas-timer.warning .timer-value{color:#ef5350}.canvas-timer .timer-label{font-size:clamp(.6rem,1.6vw,.7rem);color:#a08060;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.canvas-timer.warning .timer-label{color:#ef5350}@keyframes timeWarning{0%,to{opacity:1}50%{opacity:.6}}.canvas-stats{display:flex;gap:clamp(1rem,4vw,2rem);padding:clamp(.3rem,1vw,.5rem) clamp(.75rem,2.5vw,1.25rem);background:#0000004d;border-radius:8px;border:1px solid rgba(74,48,32,.5)}.canvas-stats .stat{display:flex;flex-direction:column;align-items:center;gap:clamp(.1rem,.4vw,.2rem)}.canvas-stats .stat-label{font-size:clamp(.6rem,1.6vw,.7rem);color:#a08060;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.canvas-stats .stat-value{font-size:clamp(1rem,3vw,1.3rem);font-weight:700;color:#d4a574;font-family:Courier New,monospace}.canvas-container{position:relative;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(220px,50vw,340px)}.pouring-game.canvas-mode .coffee-cup-top{width:clamp(200px,65vw,300px);height:clamp(200px,65vw,300px);background:radial-gradient(circle,#5d4c1ff2,#3d3415fa 70%,#2a2310);border-radius:50%;border:clamp(6px,2vw,10px) solid rgba(255,255,255,.9);box-shadow:inset 0 0 30px #00000080,0 6px 24px #00000080,0 0 0 2px #8b45134d;position:relative;overflow:hidden}.pouring-game.canvas-mode .pour-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.pitcher-indicator{position:absolute;top:clamp(-50px,-12vw,-70px);transform:translate(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;transition:left .05s ease-out}.pitcher-icon{font-size:clamp(1.8rem,5vw,2.4rem);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:transform .1s ease}.pitcher-indicator.pouring .pitcher-icon{transform:rotate(-15deg)}.milk-stream-visual{width:4px;height:clamp(30px,8vw,50px);background:linear-gradient(to bottom,#fffdf5e6,#fffdf566);border-radius:2px;animation:streamFlow .15s ease-in-out infinite}@keyframes streamFlow{0%,to{opacity:.9;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.1)}}.canvas-start-overlay{display:flex;flex-direction:column;align-items:center;gap:clamp(.75rem,2.5vw,1.25rem);padding:clamp(1rem,3vw,1.5rem);animation:fadeIn .3s ease}.pattern-preview{display:flex;flex-direction:column;align-items:center;gap:clamp(.4rem,1.2vw,.6rem);padding:clamp(.75rem,2.5vw,1.25rem);background:#d4a5741a;border:2px solid rgba(212,165,116,.3);border-radius:12px}.pattern-icon{font-size:clamp(2.5rem,8vw,3.5rem);filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}.pattern-name{font-size:clamp(1rem,3vw,1.3rem);font-weight:700;color:#d4a574;text-transform:uppercase;letter-spacing:1px}.start-canvas-button{padding:clamp(.7rem,2vw,.9rem) clamp(1.5rem,4vw,2rem);background:linear-gradient(135deg,#d4a574,#a08060);border:none;border-radius:10px;color:#1a0f0a;font-size:clamp(1rem,3vw,1.2rem);font-weight:700;cursor:pointer;transition:all .2s ease;min-height:48px;min-width:140px;box-shadow:0 4px 12px #0006}.start-canvas-button:focus-visible{outline:3px solid #66bb6a;outline-offset:2px}.start-canvas-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000080,0 0 20px #d4a57466}.start-canvas-button:active{transform:translateY(0)}.canvas-hint{color:#a08060;font-size:clamp(.75rem,2vw,.85rem);text-align:center;line-height:1.5;margin:0}.canvas-hint small{font-size:.85em;opacity:.8}.finish-pour-button{padding:clamp(.5rem,1.5vw,.7rem) clamp(1rem,3vw,1.5rem);background:linear-gradient(135deg,#4caf50e6,#388e3ce6);border:2px solid rgba(76,175,80,.6);border-radius:8px;color:#fff;font-size:clamp(.85rem,2.5vw,1rem);font-weight:600;cursor:pointer;transition:all .2s ease;min-height:44px;box-shadow:0 3px 10px #0000004d}.finish-pour-button:hover{background:linear-gradient(135deg,#66bb6a,#4caf50);transform:translateY(-1px);box-shadow:0 4px 14px #4caf5066,0 0 15px #4caf5033}.finish-pour-button:focus-visible{outline:3px solid #ffc107;outline-offset:2px}.canvas-result{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1.5vw,.75rem);padding:clamp(1rem,3vw,1.5rem);border-radius:12px;animation:resultAppear .5s ease;width:100%;max-width:280px}.canvas-result.success{background:linear-gradient(135deg,#4caf5040,#2e7d3233);border:2px solid #66bb6a;box-shadow:0 0 40px #4caf5066,0 8px 24px #0006}.canvas-result.fail{background:linear-gradient(135deg,#ff980040,#f57c0033);border:2px solid #ff9800;box-shadow:0 0 40px #ff98004d,0 8px 24px #0006}@keyframes resultAppear{0%{opacity:0;transform:scale(.8) translateY(20px)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1) translateY(0)}}.canvas-result .result-icon{font-size:clamp(2.5rem,8vw,3.5rem);animation:iconPop .6s ease .2s both}@keyframes iconPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}.canvas-result .result-score{font-size:clamp(2rem,6vw,2.8rem);font-weight:800;color:#d4a574;text-shadow:0 2px 10px rgba(0,0,0,.6);font-family:Georgia,serif}.canvas-result .result-label{font-size:clamp(1rem,3vw,1.2rem);font-weight:600;color:#a08060;text-transform:uppercase;letter-spacing:1px}.result-breakdown{display:flex;flex-direction:column;gap:clamp(.3rem,1vw,.5rem);width:100%;margin-top:clamp(.5rem,1.5vw,.75rem);padding-top:clamp(.5rem,1.5vw,.75rem);border-top:1px solid rgba(212,165,116,.3)}.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:clamp(.2rem,.6vw,.3rem) 0;font-size:clamp(.8rem,2.2vw,.9rem)}.breakdown-item span:first-child{color:#a08060}.breakdown-item span:last-child{color:#d4a574;font-weight:600;font-family:Courier New,monospace}.pouring-game.canvas-mode.ready .canvas-container{opacity:.7}.pouring-game.canvas-mode.preview .canvas-container{animation:previewPulse 1s ease-in-out infinite}@keyframes previewPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.1)}}.pouring-game.canvas-mode.pouring .canvas-container{cursor:none}.pouring-game.canvas-mode.result .canvas-container{filter:brightness(.8);pointer-events:none}@media(min-width:481px){.pouring-game.canvas-mode{padding:1.25rem;gap:1rem}.pouring-game.canvas-mode .coffee-cup-top{width:280px;height:280px}.canvas-stats{gap:2rem}.canvas-result{max-width:320px}}@media(min-width:1025px){.pouring-game.canvas-mode{padding:1.5rem;gap:1.25rem;max-width:550px}.pouring-game.canvas-mode .coffee-cup-top{width:320px;height:320px;border-width:10px}.pitcher-icon{font-size:2.8rem}.canvas-stats{gap:2.5rem;padding:.6rem 1.5rem}.canvas-result{max-width:350px;padding:1.5rem}}@media(max-height:500px)and (orientation:landscape){.pouring-game.canvas-mode{min-height:360px;padding:.5rem 1rem;gap:.5rem;flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:100%}.canvas-header{width:100%;padding:0}.canvas-header h3{font-size:1rem;margin-bottom:.2rem}.canvas-instruction{font-size:.7rem}.canvas-timer{position:absolute;top:8px;right:8px;padding:.3rem .5rem;min-width:auto}.canvas-timer .timer-value{font-size:1.2rem}.canvas-stats{position:absolute;top:8px;left:8px;padding:.3rem .6rem;gap:1rem}.canvas-stats .stat-value{font-size:1rem}.canvas-container{min-height:180px;flex:none}.pouring-game.canvas-mode .coffee-cup-top{width:180px;height:180px;border-width:5px}.pitcher-indicator{top:-40px}.pitcher-icon{font-size:1.6rem}.milk-stream-visual{height:25px}.canvas-start-overlay{position:absolute;padding:.75rem}.pattern-preview{padding:.5rem;flex-direction:row;gap:.75rem}.pattern-icon{font-size:2rem}.pattern-name{font-size:1rem}.finish-pour-button{position:absolute;bottom:8px;right:8px;padding:.4rem .8rem;min-height:36px;font-size:.8rem}.canvas-result{position:absolute;max-width:200px;padding:.75rem;gap:.3rem}.canvas-result .result-icon{font-size:2rem}.canvas-result .result-score{font-size:1.5rem}.canvas-result .result-label{font-size:.85rem}.result-breakdown{gap:.2rem;margin-top:.3rem;padding-top:.3rem}.breakdown-item{font-size:.7rem;padding:.1rem 0}}@media(max-width:360px){.pouring-game.canvas-mode{padding:.6rem;gap:.6rem;min-height:440px}.pouring-game.canvas-mode .coffee-cup-top{width:calc(100vw - 80px);max-width:200px;height:calc(100vw - 80px);max-height:200px}.pitcher-indicator{top:-45px}.canvas-stats{gap:.75rem;padding:.25rem .6rem}.canvas-stats .stat-value{font-size:.95rem}.canvas-result{max-width:240px;padding:.75rem}.canvas-result .result-score{font-size:1.8rem}}@media(max-width:320px){.pouring-game.canvas-mode{padding:.5rem;gap:.5rem;min-height:400px}.canvas-header h3{font-size:1rem}.pouring-game.canvas-mode .coffee-cup-top{width:calc(100vw - 60px);max-width:180px;height:calc(100vw - 60px);max-height:180px;border-width:5px}.pitcher-indicator{top:-40px}.pitcher-icon{font-size:1.5rem}.canvas-timer{padding:.3rem .6rem;min-width:60px}.canvas-timer .timer-value{font-size:1.2rem}.start-canvas-button{padding:.6rem 1.2rem;font-size:.9rem;min-width:120px}.pattern-preview{padding:.5rem}.pattern-icon{font-size:2rem}.pattern-name{font-size:.9rem}.finish-pour-button{padding:.4rem .8rem;font-size:.8rem;min-height:40px}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.pour-canvas{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media(prefers-reduced-motion:reduce){.pouring-game.canvas-mode:before,.pitcher-indicator,.milk-stream-visual,.canvas-result,.canvas-result .result-icon,.pouring-game.canvas-mode.preview .canvas-container{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-color-scheme:dark){.pouring-game.canvas-mode{box-shadow:0 8px 40px #000c,inset 0 1px #ffffff05,0 0 80px #8b000033}}@media(hover:none)and (pointer:coarse){.start-canvas-button:active,.finish-pour-button:active{transform:scale(.98)}.canvas-container{cursor:default}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.pouring-game:not(.canvas-mode){display:flex;flex-direction:column;align-items:center;gap:clamp(.85rem,2.5vw,1.2rem);padding:clamp(1rem,3vw,1.5rem);background:linear-gradient(135deg,#2d1810f2,#1a0f0afa);border-radius:clamp(12px,2vw,16px);border:1px solid rgba(139,69,19,.4);min-height:clamp(450px,80vh,700px);width:100%;max-width:600px;position:relative}.tutorial-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:tutorialFadeIn .3s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes tutorialFadeIn{0%{opacity:0}to{opacity:1}}.tutorial-card{background:linear-gradient(145deg,#1a1a2e,#16213e);border:2px solid #4a1942;border-radius:16px;padding:2rem;max-width:420px;width:90%;text-align:center;box-shadow:0 0 40px #4a194280,0 20px 60px #0009,inset 0 1px #ffffff1a;animation:tutorialSlideIn .4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}@keyframes tutorialSlideIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.tutorial-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#4a1942,#7b2d5b,#4a1942,#2d1b4e);background-size:400% 400%;border-radius:18px;z-index:-1;animation:gradientShift 8s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.tutorial-icon{font-size:3rem;margin-bottom:1rem;filter:drop-shadow(0 0 10px rgba(255,255,255,.3));animation:iconBounce 2s ease-in-out infinite}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.tutorial-title{font-family:Creepster,Georgia,serif;font-size:1.5rem;color:#e8d5b7;margin:0 0 1rem;text-shadow:0 0 10px rgba(232,213,183,.5),2px 2px 0 rgba(0,0,0,.5);letter-spacing:1px}.tutorial-content{font-size:1rem;color:#c4b8a0;line-height:1.6;margin:0 0 1.25rem}.tutorial-tip{background:#4a19424d;border-left:3px solid #7b2d5b;padding:.75rem 1rem;margin:0 0 1.5rem;text-align:left;border-radius:0 8px 8px 0}.tip-label{display:block;font-size:.75rem;font-weight:700;color:#7b2d5b;text-transform:uppercase;letter-spacing:2px;margin-bottom:.25rem}.tip-text{font-size:.9rem;color:#a89880;font-style:italic}.tutorial-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.tutorial-btn{padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;border:none;text-transform:uppercase;letter-spacing:1px}.tutorial-btn.primary{background:linear-gradient(145deg,#7b2d5b,#4a1942);color:#e8d5b7;box-shadow:0 4px 15px #4a194266,inset 0 1px #ffffff1a}.tutorial-btn.primary:hover{background:linear-gradient(145deg,#8b3d6b,#5a2952);transform:translateY(-2px);box-shadow:0 6px 20px #4a194280,inset 0 1px #ffffff26}.tutorial-btn.primary:active{transform:translateY(0);box-shadow:0 2px 10px #4a194266,inset 0 1px #ffffff1a}.tutorial-btn.secondary{background:transparent;color:#6a5a4a;border:1px solid #3a3a3a}.tutorial-btn.secondary:hover{color:#8a7a6a;border-color:#4a4a4a;background:#ffffff0d}@media(max-width:480px){.tutorial-card{padding:1.5rem;max-width:95%}.tutorial-icon{font-size:2.5rem}.tutorial-title{font-size:1.25rem}.tutorial-content{font-size:.9rem}.tutorial-tip{padding:.5rem .75rem}.tip-text{font-size:.85rem}.tutorial-btn{padding:.6rem 1.25rem;font-size:.9rem}.tutorial-actions{flex-direction:column}.tutorial-btn.secondary{order:1}}@media(prefers-reduced-motion:reduce){.tutorial-overlay,.tutorial-card,.tutorial-icon{animation:none}.tutorial-card:before{animation:none}.tutorial-btn{transition:none}}.monologue{position:relative;padding:1.25rem 2rem;width:clamp(280px,85vw,520px);min-height:70px;margin:0 auto;background:#000000bf;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px #0009,inset 0 1px #ffffff0d;animation:monologue-appear .6s ease-out}@keyframes monologue-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.monologue.italic .monologue-text{font-style:italic}.monologue-text{font-family:Georgia,Times New Roman,serif;font-size:1.2rem;line-height:1.7;color:#e8ddd0;text-shadow:0 1px 3px rgba(0,0,0,.6);letter-spacing:.03em;display:block;min-height:1.7em}.monologue-cursor{display:inline-block;margin-left:2px;color:#d4a574;animation:cursor-blink .8s ease-in-out infinite}@keyframes cursor-blink{0%,50%{opacity:1}51%,to{opacity:0}}.monologue-skip-hint{display:block;margin-top:.75rem;font-size:.7rem;color:#ffffff40;text-align:center;font-style:normal;font-family:system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;opacity:0;animation:hint-fade-in 1s ease-out 2s forwards}@keyframes hint-fade-in{to{opacity:1}}.monologue.complete .monologue-skip-hint{display:none}.monologue:before,.monologue:after{content:'"';position:absolute;font-size:3rem;color:#d4a5744d;font-family:Georgia,serif}.monologue:before{top:-.5rem;left:.5rem}.monologue:after{bottom:-1rem;right:.5rem;transform:rotate(180deg)}.monologue-sequence{position:relative;min-height:120px;display:flex;align-items:center;justify-content:center}.monologue-sequence .monologue{animation:monologue-fade-in .5s ease-out}@keyframes monologue-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.monologue.horror{background:#140000d9;border-color:#8b00004d;box-shadow:0 4px 20px #8b00004d,inset 0 0 30px #8b000033}.monologue.horror .monologue-text{color:#fcc}.monologue.horror .monologue-cursor{color:#f44}.monologue.horror:before,.monologue.horror:after{color:#8b000066}.monologue.revelation{background:#000000e6;border-color:#d4a57480}.monologue.revelation .monologue-text{color:#fff;font-size:1.5rem;text-align:center}@media(max-width:768px){.monologue{width:auto;min-width:280px;max-width:85vw;padding:1rem 1.5rem;min-height:60px}.monologue-text{font-size:1rem;line-height:1.6}.monologue:before,.monologue:after{font-size:2rem}.monologue-skip-hint{font-size:.6rem}}@media(max-width:390px){.monologue{padding:.875rem 1.1rem;width:calc(100vw - 24px);max-height:180px;overflow-y:auto}.monologue-text{font-size:1rem;line-height:1.7;letter-spacing:.04em}.monologue:before,.monologue:after{font-size:1.4rem;opacity:.2}.monologue-skip-hint{font-size:.75rem;color:#ffffff73}}@media(max-width:320px){.monologue{padding:.75rem .875rem;width:calc(100vw - 16px);max-height:160px;overflow-y:auto}.monologue-text{font-size:.875rem;line-height:1.6;letter-spacing:.03em}.monologue:before,.monologue:after{font-size:1.2rem;opacity:.15}.monologue-skip-hint{font-size:.75rem;margin-top:.5rem}}@media(max-width:480px){.monologue{padding:.875rem 1.25rem;min-width:280px;max-height:180px;overflow-y:auto}.monologue-text{font-size:1rem;line-height:1.7;letter-spacing:.04em}.monologue:before,.monologue:after{font-size:1.5rem;opacity:.2}.monologue-skip-hint{font-size:.75rem;color:#fff6}}@media(prefers-reduced-motion:reduce){.monologue,.typing-cursor{animation:none;opacity:1}.monologue-skip-hint{animation:none;opacity:.7}.monologue-container.fading-in .monologue{animation:none;opacity:1}}.cutscene-loading{position:fixed;inset:0;z-index:9999;background:#0a0a0a;display:flex;align-items:center;justify-content:center}.loading-content{text-align:center;color:#e0d0c0}.loading-icon{font-size:4rem;margin-bottom:1.5rem;animation:loading-icon-pulse 2s ease-in-out infinite;will-change:transform,opacity;backface-visibility:hidden}@keyframes loading-icon-pulse{0%,to{transform:translateZ(0);opacity:.8}50%{transform:translate3d(0,-3px,0);opacity:1}}.loading-text{font-size:1.25rem;font-family:Georgia,serif;color:#d4a574;margin-bottom:1.5rem;letter-spacing:.05em}.loading-bar-container{width:200px;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin:0 auto}.loading-bar{height:100%;background:linear-gradient(90deg,#d4a574,#e8c89e);border-radius:2px;transition:width .2s ease-out}.intro-cutscene{position:fixed;inset:0;z-index:9999;background:#000;overflow:hidden;contain:strict;will-change:opacity;backface-visibility:hidden}.cutscene-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.cutscene-image{width:100%;height:100%}.intro-cutscene.transitioning .cutscene-scene{animation:scene-fade-out .5s ease-out forwards}@keyframes scene-fade-out{0%{opacity:1}to{opacity:0}}.cutscene-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e)}.placeholder-content{text-align:center;color:#e0d0c0}.placeholder-icon{font-size:6rem;display:block;margin-bottom:1rem;filter:grayscale(.5)}.placeholder-text{font-size:1.5rem;text-transform:capitalize;color:#ffffff80}.cutscene-monologue{position:absolute;bottom:15%;left:50%;transform:translate(-50%);z-index:100;width:90%;max-width:700px}.cutscene-progress{position:absolute;bottom:5%;left:50%;transform:translate(-50%);z-index:200;display:flex;gap:8px;padding-bottom:max(0px,env(safe-area-inset-bottom))}.progress-dot{width:8px;height:8px;border-radius:50%;background:#ffffff4d;transition:all .3s ease;position:relative}.progress-dot:before{content:"";position:absolute;width:48px;height:48px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:auto}.progress-dot.active{background:#d4a574;transform:scale(1.3)}.progress-dot.complete{background:#d4a57499}.cutscene-skip-btn{position:absolute;top:max(5%,env(safe-area-inset-top,0px));right:max(5%,env(safe-area-inset-right,0px));z-index:200;padding:.75rem 1.25rem;min-height:44px;min-width:44px;background:#0009;border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#ffffffd9;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;white-space:nowrap}.cutscene-skip-btn:hover,.cutscene-skip-btn:focus{background:#000c;color:#fff;border-color:#ffffffb3;outline:2px solid rgba(212,165,116,.5);outline-offset:2px}.cutscene-skip-btn:active{transform:scale(.98)}@media(max-width:480px){.cutscene-skip-btn{top:max(5%,env(safe-area-inset-top,0px));right:max(3%,env(safe-area-inset-right,0px));padding:.625rem 1rem;font-size:.8125rem}}.letterbox{position:absolute;left:0;right:0;height:8%;background:#000;z-index:150}.letterbox-top{top:0}.letterbox-bottom{bottom:0}.cutscene-scene.exterior:after{content:"";position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);pointer-events:none}.cutscene-scene.bathroom:before{content:"";position:absolute;inset:0;background:#8b00001a;pointer-events:none;z-index:40;animation:horror-pulse 3s ease-in-out infinite}@keyframes horror-pulse{0%,to{opacity:.1}50%{opacity:.2}}@media(max-width:768px){.letterbox{height:5%}.cutscene-monologue{bottom:12%}.manual-title{font-size:1.5rem}.manual-content{font-size:1.125rem}.graffiti-1{font-size:2.5rem}.graffiti-2,.graffiti-3,.graffiti-5{font-size:1rem}.progress-dot{width:6px;height:6px}}@media(max-width:480px){.cutscene-skip-btn{padding:.375rem .75rem;font-size:.75rem}.manual-title{font-size:1.25rem}.manual-content{font-size:1rem;line-height:1.6}}@media(prefers-reduced-motion:reduce){.loading-icon{animation:none;opacity:1}.cutscene-scene{animation:none!important;opacity:1}.cutscene-scene.fading-out{opacity:0}.cutscene-scene.horror-pulse{animation:none}.cutscene-ken-burns{animation:none!important}.progress-dot,.cutscene-skip-btn{transition:none}}.customer-commentary{position:fixed;top:15%;left:50%;transform:translate(-50%);z-index:500;pointer-events:none;opacity:0;transition:opacity .4s ease-out}.customer-commentary.visible{opacity:1}.commentary-bubble{position:relative;background:linear-gradient(135deg,#1e140ff2,#140f0afa);border:2px solid #8b7355;border-radius:16px;padding:12px 20px;max-width:400px;box-shadow:0 4px 20px #00000080,inset 0 1px #ffffff1a}.commentary-tail{position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #8b7355}.commentary-tail:before{content:"";position:absolute;left:-10px;top:-14px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(25,18,12,.98)}.commentary-text{margin:0;color:#e0d0c0;font-size:1rem;font-style:italic;text-align:center;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.5)}.customer-commentary.encouraging .commentary-bubble{border-color:#6b8b55}.customer-commentary.encouraging .commentary-tail{border-top-color:#6b8b55}.customer-commentary.encouraging .commentary-text{color:#c8e0b0}.customer-commentary.cautious .commentary-bubble{border-color:#b89b55;animation:subtle-pulse 2s ease-in-out infinite}.customer-commentary.cautious .commentary-tail{border-top-color:#b89b55}.customer-commentary.cautious .commentary-text{color:#e0d0a0}.customer-commentary.threatening .commentary-bubble{border-color:#a44;animation:threat-pulse .8s ease-in-out infinite;box-shadow:0 4px 20px #96323266,inset 0 1px #ff64641a}.customer-commentary.threatening .commentary-tail{border-top-color:#a44}.customer-commentary.threatening .commentary-text{color:#f99;text-shadow:0 0 10px rgba(255,100,100,.3)}@keyframes subtle-pulse{0%,to{box-shadow:0 4px 20px #00000080,inset 0 1px #ffffff1a}50%{box-shadow:0 4px 25px #9678324d,inset 0 1px #ffffff1a}}@keyframes threat-pulse{0%,to{box-shadow:0 4px 20px #96323266,inset 0 1px #ff64641a}50%{box-shadow:0 4px 30px #c8323299,inset 0 1px #ff646433}}@media(max-width:768px){.customer-commentary{top:10%;width:90%;max-width:none}.commentary-bubble{padding:10px 16px;max-width:100%}.commentary-text{font-size:.9rem}}@media(prefers-reduced-motion:reduce){.customer-commentary{transition:opacity .1s}.customer-commentary.cautious .commentary-bubble,.customer-commentary.threatening .commentary-bubble{animation:none}}:root{--v-bg-dark: #0d0705;--v-bg-medium: #1a0f0a;--v-bg-light: #2d1810;--v-accent: #d4a574;--v-accent-light: #e8c9a0;--v-accent-dark: #a08060;--v-text: #e8dcc8;--v-text-muted: #a8a8a8;--v-border: #4a3020;--v-success: #66bb6a;--v-warning: #ffb74d;--v-danger: #ef5350;--v-horror: #ba68c8;--v-vignette-opacity: 0;--v-screen-temp: 0deg;--v-flicker-intensity: 0;--v-portrait-height: 40vh;--v-portrait-aspect: 3/4;--v-min-font-desktop: 16px;--v-min-font-mobile: 14px;--v-letter-spacing-default: .5px;--v-max-line-width: 420px}.violatte-game{width:100%;height:100vh;background:var(--v-bg-dark);color:var(--v-text);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;position:relative;filter:hue-rotate(var(--v-screen-temp));transition:filter .5s ease}.violatte-game:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 30%,rgba(100,0,0,.7) 100%);opacity:var(--v-vignette-opacity);pointer-events:none;z-index:var(--z-elevated);transition:opacity var(--duration-normal) var(--ease-in-out)}.violatte-game.mood-annoyed{--v-vignette-opacity: .2;--v-flicker-intensity: .05}.violatte-game.mood-angry{--v-vignette-opacity: .4;--v-screen-temp: 5deg;--v-flicker-intensity: .15}.violatte-game.mood-horror{--v-vignette-opacity: .7;--v-screen-temp: 15deg;--v-flicker-intensity: .3;animation:horror-screen-shake .1s ease-in-out infinite}.violatte-game{display:grid;grid-template-columns:320px 1fr;grid-template-rows:1fr}.violatte-left-panel{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--v-bg-medium) 0%,var(--v-bg-dark) 100%);border-right:2px solid var(--v-border);overflow:visible;padding:1rem .75rem;gap:.75rem}.monster-section{display:flex;flex-direction:column;align-items:center;padding:.5rem;position:relative}.monster-portrait-wrapper{width:100%;display:flex;flex-direction:column;align-items:center;position:relative}.violatte-left-panel.portrait-hidden .monster-portrait-wrapper{visibility:hidden}.violatte-left-panel.portrait-entering .monster-portrait-wrapper{animation:portrait-materialize .8s cubic-bezier(.4,0,.2,1)}@keyframes portrait-materialize{0%{opacity:0;transform:scale(1.8) translate(20%);filter:brightness(1.5)}40%{opacity:.3;transform:scale(1.3) translate(10%);filter:brightness(1.3)}70%{opacity:.8;transform:scale(1.05);filter:brightness(1.1)}to{opacity:1;transform:scale(1) translate(0);filter:brightness(1)}}.violatte-left-panel:not(.portrait-hidden):not(.portrait-entering) .monster-portrait-wrapper{animation:portrait-entrance .6s cubic-bezier(.34,1.56,.64,1)}@keyframes portrait-entrance{0%{opacity:0;transform:scale(.8);filter:brightness(2)}40%{opacity:1;transform:scale(1.05);filter:brightness(1.3)}to{opacity:1;transform:scale(1);filter:brightness(1)}}.monster-portrait-wrapper .portrait-frame{width:100%;max-width:280px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:4px solid var(--v-border);background:linear-gradient(135deg,var(--v-bg-light) 0%,var(--v-bg-dark) 100%);box-shadow:0 8px 32px #0009,0 0 0 1px #ffffff0d,inset 0 0 40px #0006;transition:all .4s ease;position:relative}.monster-portrait-wrapper .portrait-frame:before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:10;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 30%),linear-gradient(-135deg,transparent 70%,rgba(0,0,0,.2) 100%)}.monster-enraged .portrait-frame{border-color:var(--v-danger);box-shadow:0 8px 32px #8b000080,0 0 60px #8b00004d,inset 0 0 40px #8b000033;animation:enragedPulse 1s ease-in-out infinite}@keyframes enragedPulse{0%,to{box-shadow:0 8px 32px #8b000080,0 0 60px #8b00004d}50%{box-shadow:0 8px 40px #c80000b3,0 0 80px #c8000080}}.monster-pleased .portrait-frame{border-color:var(--v-success);box-shadow:0 8px 32px #4caf504d,inset 0 0 40px #0000004d}.monster-portrait-wrapper .portrait-frame img{width:100%;height:100%;object-fit:cover}.monster-nameplate{width:100%;padding:.75rem .5rem;text-align:center;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 100%)}.monster-nameplate .monster-name{display:block;font-size:1.2rem;font-weight:700;color:var(--v-accent);text-transform:uppercase;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.5)}.monster-nameplate .monster-type{display:block;font-size:.7rem;color:var(--v-text-muted);text-transform:capitalize;margin-top:.2rem}.monster-nameplate.silhouetted{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 100%)}.monster-nameplate.silhouetted .monster-name{color:var(--v-text-muted);font-style:italic;animation:mystery-pulse 2s ease-in-out infinite}.monster-nameplate.silhouetted .monster-type{color:#8a785d99;font-style:italic}@keyframes mystery-pulse{0%,to{opacity:.7}50%{opacity:1}}.mobile-monster-info.silhouetted .mobile-monster-name{color:var(--v-text-muted);font-style:italic}.mobile-monster-info.silhouetted .mobile-monster-type{color:#8a785d99;font-style:italic}.dialogue-click-overlay{position:fixed;inset:0;z-index:150;cursor:pointer;background:transparent;outline:none}.dialogue-click-overlay:focus-visible{box-shadow:inset 0 0 0 4px #d4a57480;animation:focus-pulse 1.5s ease-in-out infinite}@keyframes focus-pulse{0%,to{box-shadow:inset 0 0 0 4px #d4a5744d}50%{box-shadow:inset 0 0 0 4px #d4a57499}}.portrait-dialogue-container{position:fixed;top:180px;left:400px;z-index:var(--z-modal);max-width:min(450px,calc(100vw - 450px));animation:slideInFromLeft var(--duration-normal) var(--ease-bounce)}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.portrait-dialogue-container .speech-bubble-tail{left:-16px;top:50%;transform:translateY(-50%)}@media(min-width:769px)and (max-width:1200px){.portrait-dialogue-container{left:300px;max-width:min(400px,calc(100vw - 340px))}}@media(max-width:768px){.portrait-dialogue-container{position:relative;top:auto;left:auto;transform:none;margin-top:1rem;max-width:100%}.portrait-dialogue-container .speech-bubble-tail{left:50%;transform:translate(-50%);top:-16px;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:20px solid #fefefe;border-top:none}}.mood-indicator{padding:var(--space-sm);text-align:center;background:#0000004d;border-top:1px solid var(--v-border);border-radius:var(--radius-md);transition:all var(--duration-normal) var(--ease-in-out);height:50px;max-height:50px;min-height:50px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.mood-indicator:focus-visible{outline:2px solid var(--v-accent);outline-offset:2px}.mood-indicator .mood-icon{font-size:2rem;line-height:1;display:inline-block;animation:mood-icon-bounce .6s ease-out}@keyframes mood-icon-bounce{0%{transform:scale(0)}50%{transform:scale(1.1)}to{transform:scale(1)}}.mood-indicator .mood-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--v-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mood-indicator.neutral .mood-label{color:var(--v-text-muted)}.mood-indicator.happy .mood-label,.mood-indicator.grateful .mood-label,.mood-indicator.impressed .mood-label{color:var(--v-success);text-shadow:0 0 8px rgba(102,187,106,.4)}.mood-indicator.happy,.mood-indicator.grateful,.mood-indicator.impressed{border-top-color:var(--v-success);background:#66bb6a14}.mood-indicator.annoyed .mood-label,.mood-indicator.irritated .mood-label{color:var(--v-warning);text-shadow:0 0 8px rgba(255,183,77,.4)}.mood-indicator.annoyed,.mood-indicator.irritated{border-top-color:var(--v-warning);background:#ffb74d14}.mood-indicator.angry .mood-label,.mood-indicator.furious .mood-label{color:var(--v-danger);text-shadow:0 0 10px rgba(239,83,80,.5)}.mood-indicator.angry,.mood-indicator.furious{border-top-color:var(--v-danger);background:#ef53501a}.mood-indicator.enraged .mood-label,.mood-indicator.horror .mood-label,.mood-indicator.eldritch .mood-label{color:var(--v-horror);animation:pulse-danger .5s ease-in-out infinite;text-shadow:0 0 12px rgba(186,104,200,.6)}.mood-indicator.enraged,.mood-indicator.horror,.mood-indicator.eldritch{border-top-color:var(--v-horror);background:#ba68c81f}@keyframes pulse-danger{0%,to{opacity:1}50%{opacity:.7}}.monster-info{width:100%;padding:.5rem;text-align:center}.monster-name-display{font-size:1.1rem;font-weight:700;color:var(--v-accent);margin:0}.monster-mood-display{font-size:.75rem;color:var(--v-text-muted);text-transform:capitalize;margin-top:.25rem}.status-section{padding:.75rem;border-top:1px solid var(--v-border);border-radius:8px;background:#0000004d;display:flex;flex-direction:column;gap:.75rem;height:400px;max-height:400px;overflow:hidden}.status-section .mobile-monster-info{display:none}.status-section .health-bar{position:relative;width:100%;height:60px;max-height:60px;min-height:60px;flex-shrink:0;overflow:hidden}.order-summary{padding:.5rem;background:#0000004d;border-radius:6px;border:1px solid var(--v-border);flex:1;max-height:220px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(180,120,60,.5) rgba(0,0,0,.2)}.order-summary::-webkit-scrollbar{width:6px}.order-summary::-webkit-scrollbar-track{background:#0003;border-radius:3px}.order-summary::-webkit-scrollbar-thumb{background:#b4783c80;border-radius:3px}.order-summary::-webkit-scrollbar-thumb:hover{background:#b4783cb3}.order-summary .order-display{font-size:.85rem}.order-summary .order-display-title{font-size:.7rem;color:var(--v-accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;font-weight:600}.health-bar-container{display:flex;align-items:center;gap:.5rem}.health-label{font-size:.65rem;color:var(--v-text-muted);text-transform:uppercase;width:50px}.health-hearts{display:flex;gap:.25rem;flex:1}.health-heart{width:20px;height:20px}.health-heart svg{width:100%;height:100%}.tip-jar{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#0000004d;border-radius:8px;border:1px solid var(--v-border);transition:all .3s ease;height:70px;max-height:70px;min-height:70px;flex-shrink:0;overflow:hidden}.tip-jar.restored{background:#4caf504d;border-color:#66bb6a;animation:tipJarGlow .5s ease-out}@keyframes tipJarGlow{0%,to{box-shadow:0 0 #4caf5000}50%{box-shadow:0 0 20px #4caf5099}}.tip-jar-icon{font-size:1.5rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}.tip-jar-content{flex:1;min-width:0}.tip-jar-amount{font-size:.9rem;font-weight:700;color:var(--v-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tip-jar-progress{height:6px;background:#0006;border-radius:3px;overflow:hidden;margin:.25rem 0}.tip-jar-fill{height:100%;background:linear-gradient(90deg,var(--v-accent),#ffd700);border-radius:3px;transition:width .5s ease-out}.tip-jar-label{font-size:.65rem;color:var(--v-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.health-restored{color:#66bb6a;font-weight:700;animation:healthRestorePulse .5s ease-out}@keyframes healthRestorePulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.score-section{display:flex;justify-content:space-between;align-items:center;padding:.5rem;background:#0000004d;border-radius:6px}.score-item{display:flex;flex-direction:column;align-items:center}.score-item-label{font-size:.6rem;color:var(--v-text-muted);text-transform:uppercase}.score-item-value{font-size:1rem;font-weight:700;color:var(--v-accent)}.violatte-main-panel{display:flex;flex-direction:column;overflow:hidden;position:relative}.violatte-main-panel .coffee-counter{position:absolute;inset:0;z-index:0}.game-top-bar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:linear-gradient(180deg,rgba(13,7,5,.98) 0%,rgba(13,7,5,.85) 60%,rgba(13,7,5,.4) 90%,transparent 100%);position:relative;z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-top-bar .score-display,.game-top-bar .customer-counter{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.6rem 1.25rem;background:linear-gradient(145deg,#28190fe6,#140a05e6);border-radius:10px;border:1px solid var(--v-border);box-shadow:0 4px 12px #0006,inset 0 1px #ffffff0d;min-width:90px}.game-top-bar .score-label,.game-top-bar .counter-label{font-size:.6rem;color:var(--v-text-muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}.game-top-bar .score-value,.game-top-bar .counter-value{font-size:1.25rem;font-weight:700;color:var(--v-accent);text-shadow:0 2px 4px rgba(0,0,0,.3)}.game-top-bar .score-display.score-up{animation:scoreGlow .5s ease-out}@keyframes scoreGlow{0%{box-shadow:0 4px 12px #0006,0 0 20px #e8d5b780}to{box-shadow:0 4px 12px #0006}}.top-bar-actions{display:flex;gap:.5rem}.game-top-bar .pause-btn,.game-top-bar .admin-btn{width:40px;height:40px;padding:.5rem;background:#28190fe6;border:1px solid var(--v-border);border-radius:8px;color:var(--v-accent);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.game-top-bar .pause-btn:hover,.game-top-bar .admin-btn:hover{background:#3c2819f2;border-color:var(--v-accent);transform:scale(1.05)}.game-top-bar .btn-icon{width:20px;height:20px}.game-content-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:5;padding:1rem;overflow:hidden}.game-content-area .phase-content{width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center;gap:1rem}footer.phase-indicator{padding:.5rem 1rem;background:linear-gradient(180deg,transparent 0%,rgba(13,7,5,.8) 100%);position:relative;z-index:10;text-align:center}footer.phase-indicator .phase-name{font-size:.75rem;color:var(--v-accent-dark);text-transform:uppercase;letter-spacing:1px}.game-hud{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:linear-gradient(180deg,rgba(45,24,16,.95) 0%,transparent 100%);z-index:100}.game-hud-left{display:flex;align-items:center;gap:.75rem}.game-hud-right{display:flex;align-items:center;gap:.5rem}.game-title-small{font-size:1rem;color:var(--v-accent);font-weight:700;margin:0}.phase-indicator{font-size:.75rem;color:var(--v-text-muted);padding:.25rem .75rem;background:#0000004d;border-radius:12px;text-transform:uppercase}.control-btn{width:36px;height:36px;padding:.4rem;background:#28190fcc;border:1px solid var(--v-border);border-radius:6px;color:var(--v-accent);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#3c2819e6;border-color:var(--v-accent);transform:scale(1.05)}.control-btn svg{width:18px;height:18px}.game-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1rem;overflow-y:auto;overflow-x:hidden;position:relative}.game-background{position:absolute;inset:0;z-index:0;pointer-events:none}.game-background img{width:100%;height:100%;object-fit:cover;opacity:.3}.game-content-inner{position:relative;z-index:1;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:1rem}.order-display-floating{position:absolute;top:60px;right:1rem;width:160px;background:#0d0705f2;border:2px solid var(--v-border);border-radius:10px;padding:.75rem;z-index:50}.order-display-title{font-size:.7rem;color:var(--v-text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.5rem;text-align:center}.order-items-compact{display:flex;flex-wrap:wrap;gap:.25rem;justify-content:center}.order-item-chip{padding:.2rem .4rem;background:#d4a5741a;border:1px solid rgba(212,165,116,.3);border-radius:4px;font-size:.7rem;color:var(--v-accent)}.dialogue-container{width:100%;max-width:550px}.dialogue-box-main{background:linear-gradient(135deg,#2d1810f2,#1a0f0af2);border:2px solid var(--v-border);border-radius:12px;padding:1.25rem;position:relative}.dialogue-text-content{font-size:1rem;line-height:1.6;color:var(--v-text);min-height:60px}.dialogue-continue-hint{position:absolute;bottom:.5rem;right:.5rem;font-size:.7rem;color:var(--v-text-muted);animation:pulse-hint 1.5s ease-in-out infinite}@keyframes pulse-hint{0%,to{opacity:.5}50%{opacity:1}}.minigame-wrapper{width:100%;max-width:500px;display:flex;flex-direction:column;gap:.5rem}.minigame-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.minigame-title{font-size:.85rem;color:var(--v-accent);font-weight:700;text-transform:uppercase;letter-spacing:1px}.minigame-progress{display:flex;gap:.25rem}.progress-pip{width:8px;height:8px;border-radius:50%;background:var(--v-border)}.progress-pip.complete{background:var(--v-success)}.progress-pip.current{background:var(--v-accent);animation:pulse-pip 1s ease-in-out infinite}@keyframes pulse-pip{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.minigame-body{background:#0006;border:1px solid var(--v-border);border-radius:10px;padding:1rem;min-height:200px}.v-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s}.v-button-primary{background:linear-gradient(135deg,var(--v-accent) 0%,var(--v-accent-dark) 100%);color:var(--v-bg-dark);box-shadow:0 4px 12px #d4a5744d}.v-button-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #d4a57466}.v-button-secondary{background:transparent;border:2px solid var(--v-border);color:var(--v-accent)}.v-button-secondary:hover{background:#d4a5741a;border-color:var(--v-accent)}.v-button-danger{background:linear-gradient(135deg,var(--v-danger) 0%,#c62828 100%);color:#fff}.violatte-game.mood-happy .monster-portrait-wrapper .portrait-frame{border-color:var(--v-success);box-shadow:0 0 20px #4caf504d}.violatte-game.mood-annoyed .monster-portrait-wrapper .portrait-frame{border-color:var(--v-warning);box-shadow:0 0 20px #ff98004d}.violatte-game.mood-angry .monster-portrait-wrapper .portrait-frame{border-color:var(--v-danger);box-shadow:0 0 25px #f4433666;animation:angry-pulse .5s ease-in-out infinite}@keyframes angry-pulse{0%,to{box-shadow:0 0 25px #f4433666}50%{box-shadow:0 0 40px #f4433699}}.violatte-game.mood-horror .monster-portrait-wrapper .portrait-frame{border-color:var(--v-horror);box-shadow:0 0 30px #9c27b080;animation:horror-pulse 1s ease-in-out infinite}@keyframes horror-pulse{0%,to{box-shadow:0 0 30px #9c27b080;filter:none}50%{box-shadow:0 0 50px #9c27b0b3;filter:hue-rotate(10deg)}}.horror-vignette{position:absolute;inset:0;pointer-events:none;z-index:200;opacity:0;transition:opacity .5s;background:radial-gradient(circle at center,transparent 30%,rgba(100,0,0,.4) 100%)}.violatte-game.horror-mode .horror-vignette{opacity:1}.attack-overlay{position:fixed;inset:0;background:#000000f2;z-index:500;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:attack-flash .3s ease}@keyframes attack-flash{0%{background:#f44336e6}to{background:#000000f2}}.attack-image-container{max-width:90%;max-height:70vh;animation:attack-zoom-in .4s ease-out}@keyframes attack-zoom-in{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}.attack-image-container img{max-width:100%;max-height:100%;object-fit:contain}.attack-text-overlay{color:var(--v-danger);font-size:1.5rem;font-weight:700;text-shadow:0 0 20px var(--v-danger);margin-top:1rem;animation:attack-text-shake .5s ease-in-out}@keyframes attack-text-shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-10px)}80%{transform:translate(10px)}}.result-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:600;padding:2rem}.result-screen.game-over{background:linear-gradient(180deg,#320000fa,#140000fc)}.result-screen.victory{background:linear-gradient(180deg,#2d1810fa,#1a0f0afc)}.result-title{font-size:2.5rem;font-weight:700;margin-bottom:1.5rem}.result-screen.game-over .result-title{color:var(--v-danger);text-shadow:0 0 30px rgba(244,67,54,.5)}.result-screen.victory .result-title{color:#ffc107;text-shadow:0 0 30px rgba(255,193,7,.5)}.result-stats{display:flex;flex-direction:column;gap:.5rem;text-align:center;margin-bottom:2rem}.result-stat{font-size:1rem;color:var(--v-text-muted)}.result-stat span{color:var(--v-accent);font-weight:700}.result-buttons{display:flex;gap:1rem}.phase-transition{position:fixed;inset:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:400}.transition-content{text-align:center}.transition-title{font-size:1.5rem;color:var(--v-accent);font-weight:700}.transition-subtitle{font-size:.9rem;color:var(--v-text-muted);margin-top:.5rem}.loading-spinner{width:40px;height:40px;border:3px solid rgba(212,165,116,.2);border-top-color:var(--v-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px)and (orientation:portrait){:root{--v-portrait-height: 25vh;--v-mobile-portrait-size: 100px}.violatte-game{grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-auto-rows:minmax(auto,max-content)}.violatte-left-panel{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto;align-items:center;gap:.5rem;border-right:none;border-bottom:2px solid var(--v-border);padding:.5rem .75rem;min-height:0;background:linear-gradient(180deg,var(--v-bg-medium) 0%,var(--v-bg-dark) 100%)}.monster-portrait-wrapper{flex:none;display:flex;flex-direction:column;align-items:center;gap:0}.monster-portrait-wrapper .portrait-frame{width:100px;height:100px;max-width:none;max-height:none;border-radius:50%;border-width:3px;flex-shrink:0}.monster-portrait-wrapper .portrait-frame .portrait-image{object-position:center 15%}.monster-portrait-wrapper .monster-nameplate{display:none}.status-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));grid-template-rows:auto auto;gap:.5rem;padding:0;border:none;background:transparent;margin:0;flex:1;min-height:fit-content;align-content:center}.status-section .mobile-monster-info{display:flex;flex-direction:row;align-items:baseline;gap:.5rem;flex-wrap:nowrap;grid-column:1 / -1;overflow:hidden}.status-section .mobile-monster-name{font-size:1rem;font-weight:700;color:var(--v-accent);text-shadow:0 1px 3px rgba(0,0,0,.5);margin:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.status-section .mobile-monster-type{font-size:.65rem;color:var(--v-text-muted);text-transform:capitalize;font-style:italic;white-space:nowrap;flex-shrink:0}.status-section .health-tip-row{display:contents;gap:.5rem;align-items:center;flex-wrap:wrap}.status-section .health-bar{padding:.25rem .4rem;border-radius:6px;min-height:auto;gap:.3rem;background:#0000004d;border:1px solid var(--v-border);display:flex;flex-direction:column;align-items:flex-start}.status-section .health-bar .health-hearts{gap:.15rem}.status-section .health-bar .heart{width:18px;height:18px}.status-section .health-bar .health-text{font-size:.7rem}.status-section .health-bar .health-current{font-size:.85rem}.status-section .tip-jar{padding:.25rem .4rem;min-width:0;flex-direction:column;gap:.25rem;align-items:flex-start;min-height:auto;border-radius:6px}.status-section .tip-jar-icon{font-size:.9rem}.status-section .tip-jar-content{width:100%}.status-section .tip-jar-amount{font-size:.9rem;font-weight:700;color:var(--v-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-section .tip-jar-progress{height:2px;margin:.05rem 0}.status-section .tip-jar-label{font-size:.65rem;color:var(--v-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.order-summary{display:block;max-height:60px;overflow-y:auto;overflow-x:hidden;padding:.25rem;font-size:.7rem}.mood-indicator{padding:.25rem .5rem;border-radius:4px;margin:0;display:inline-flex;justify-self:flex-start;grid-column:1 / -1}.mood-indicator .mood-label{font-size:.6rem;letter-spacing:.3px}.violatte-main-panel{height:100%;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}.game-top-bar{padding:.4rem .6rem;gap:.4rem;flex-shrink:0}.game-top-bar .score-display,.game-top-bar .customer-counter{padding:.3rem .5rem;min-height:44px}.game-top-bar .score-label,.game-top-bar .counter-label{font-size:.55rem}.game-top-bar .score-value,.game-top-bar .counter-value{font-size:.9rem}.game-top-bar .pause-btn,.game-top-bar .admin-btn{min-width:44px;min-height:44px}.game-content-area{padding:.5rem;flex:1;overflow-y:auto;max-height:calc(100vh - 120px);-webkit-overflow-scrolling:touch}.game-content-area .phase-content{max-width:100%;height:100%}footer.phase-indicator{padding:.3rem .5rem;flex-shrink:0}footer.phase-indicator .phase-name{font-size:.65rem}.violatte-game.minigame-active .violatte-left-panel{padding:.35rem .5rem}.violatte-game.minigame-active .monster-portrait-wrapper .portrait-frame{width:70px;height:70px}.violatte-game.minigame-active .status-section{gap:.3rem}.violatte-game.minigame-active .mood-indicator{display:none}}@media(max-width:900px)and (orientation:landscape){.violatte-game{grid-template-columns:min(280px,40%) 1fr;grid-template-rows:1fr}.violatte-left-panel{display:grid;grid-template-rows:1fr auto auto;padding:.5rem;border-right:2px solid var(--v-border);overflow-y:auto;max-height:100vh}.monster-portrait-wrapper{display:flex;align-items:center;justify-content:center}.monster-portrait-wrapper .portrait-frame{max-width:90%;max-height:min(40vh,220px);width:auto;height:auto}.monster-nameplate{padding:.4rem;margin-top:.5rem}.monster-nameplate .monster-name{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.monster-nameplate .monster-type{font-size:.6rem}.status-section{padding:.5rem;gap:.4rem}.order-summary{max-height:120px;overflow-y:auto;display:block}.mood-indicator{padding:.35rem}.mood-indicator .mood-label{font-size:.65rem;letter-spacing:.3px}.game-top-bar{padding:.5rem}.game-top-bar .score-display,.game-top-bar .customer-counter{padding:.35rem .6rem}.game-top-bar .score-label,.game-top-bar .counter-label{font-size:.6rem}.game-content-area{padding:.5rem;overflow-y:auto;max-height:100vh}footer.phase-indicator .phase-name{font-size:.7rem}}@media(max-width:480px)and (orientation:portrait){:root{--v-mobile-portrait-size: 80px}.violatte-left-panel{padding:.4rem .5rem;gap:.4rem}.monster-portrait-wrapper .portrait-frame{width:80px;height:80px;border-width:2px}.violatte-left-panel .mobile-monster-name{font-size:.95rem}.violatte-left-panel .mobile-monster-type{font-size:.6rem}.status-section{gap:.25rem}.status-section .health-bar{padding:.2rem .35rem;min-height:auto;gap:.2rem}.status-section .health-bar .heart{width:16px;height:16px}.status-section .health-bar .health-text{font-size:.7rem}.status-section .health-bar .health-current{font-size:.8rem}.status-section .tip-jar{padding:.2rem .35rem;gap:.25rem}.status-section .tip-jar-icon{font-size:.8rem}.status-section .tip-jar-content{min-width:50px}.status-section .tip-jar-amount{font-size:.9rem;font-weight:700;color:var(--v-accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-section .tip-jar-label{font-size:.65rem;color:var(--v-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mood-indicator{padding:.2rem .4rem}.mood-indicator .mood-label{font-size:.55rem;letter-spacing:.2px}.game-top-bar{padding:.35rem .4rem}.game-top-bar .pause-btn,.game-top-bar .admin-btn{min-width:40px;min-height:40px}.game-top-bar .btn-icon{width:18px;height:18px}.game-top-bar .score-label,.game-top-bar .counter-label{font-size:.5rem}.game-top-bar .score-value,.game-top-bar .counter-value{font-size:.85rem}.violatte-game.minigame-active .monster-portrait-wrapper .portrait-frame{width:50px;height:50px}}@media(max-width:400px)and (orientation:portrait){:root{--v-mobile-portrait-size: 70px}.violatte-left-panel{padding:.3rem .4rem;gap:.3rem}.monster-portrait-wrapper .portrait-frame{width:70px;height:70px;border-width:2px}.violatte-left-panel .mobile-monster-name{font-size:.85rem}.violatte-left-panel .mobile-monster-type{font-size:.55rem}.status-section{gap:.3rem;grid-template-columns:1fr 1fr}.status-section .health-bar{padding:.2rem .3rem;gap:.2rem}.status-section .health-bar .heart{width:14px;height:14px}.status-section .health-bar .health-text{font-size:.6rem}.status-section .health-bar .health-current{font-size:.75rem}.status-section .tip-jar{padding:.2rem .3rem;gap:.2rem}.status-section .tip-jar-icon,.status-section .tip-jar-amount{font-size:.75rem}.status-section .tip-jar-label,.mood-indicator .mood-label{font-size:.5rem}.game-top-bar{padding:.3rem .35rem}.game-top-bar .score-label,.game-top-bar .counter-label{font-size:.45rem}.game-top-bar .score-value,.game-top-bar .counter-value{font-size:.8rem}.violatte-game.minigame-active .monster-portrait-wrapper .portrait-frame{width:45px;height:45px}}@media(min-width:769px)and (max-width:1200px){.violatte-game{grid-template-columns:280px 1fr}.violatte-left-panel{padding:.75rem .5rem}.monster-portrait-wrapper .portrait-frame{max-width:260px}}@media(min-width:1201px){.violatte-game{grid-template-columns:380px 1fr}.violatte-left-panel{padding:1rem;gap:1rem}.monster-portrait-wrapper .portrait-frame{max-width:340px}.status-section{padding:1rem}.order-summary{display:block;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--v-border)}.game-top-bar{padding:1rem 1.5rem}.game-content-area{padding:1.5rem}.portrait-dialogue-container{left:400px;max-width:500px}}.screen-shake{animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-4px,-4px)}20%{transform:translate(4px,-4px)}30%{transform:translate(-4px,4px)}40%{transform:translate(4px,4px)}50%{transform:translate(-4px,-4px)}60%{transform:translate(4px,-4px)}70%{transform:translate(-4px,4px)}80%{transform:translate(4px,4px)}90%{transform:translate(-4px,-4px)}}.intro-phase{display:flex;flex-direction:column;align-items:center}.intro-phase.compact{min-height:auto;padding:1rem}.intro-phase.compact .intro-ready-indicator{position:relative;bottom:auto;left:auto;transform:none;opacity:1}.intro-phase.compact .intro-ready-indicator.visible{animation:fadeIn .3s ease-out}.intro-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease-in-out;pointer-events:none}.intro-stage.active{opacity:1;pointer-events:auto}.intro-stage.fade-out{opacity:0}.approach-atmosphere{text-align:center;position:relative}.fog-layer{position:absolute;inset:-100px;background:radial-gradient(ellipse at center,rgba(139,69,19,.1) 0%,rgba(13,7,5,.3) 50%,transparent 100%);animation:fog-drift 4s ease-in-out infinite;pointer-events:none}@keyframes fog-drift{0%,to{transform:translate(-20px) scale(1);opacity:.5}50%{transform:translate(20px) scale(1.1);opacity:.7}}.approach-text{font-size:clamp(1.5rem,4vw,2rem);color:var(--v-accent);text-shadow:0 0 30px rgba(139,0,0,.5),0 4px 12px rgba(0,0,0,.8);letter-spacing:2px;animation:approach-text-pulse 2s ease-in-out infinite;margin:0 0 1.5rem;font-weight:300}@keyframes approach-text-pulse{0%,to{opacity:.7;text-shadow:0 0 20px rgba(139,0,0,.3)}50%{opacity:1;text-shadow:0 0 40px rgba(139,0,0,.6)}}.footsteps-indicator{display:flex;gap:1.5rem;justify-content:center}.footstep{font-size:1.5rem;opacity:0;animation:footstep-appear 1.5s ease-in-out infinite;filter:grayscale(.5)}.footstep:nth-child(1){animation-delay:0s}.footstep:nth-child(2){animation-delay:.3s}.footstep:nth-child(3){animation-delay:.6s}@keyframes footstep-appear{0%{opacity:0;transform:translateY(10px)}25%{opacity:.8;transform:translateY(0)}50%{opacity:.4;transform:translateY(-2px)}to{opacity:0;transform:translateY(-5px)}}.reveal-stage.active{animation:reveal-entrance .8s ease-out}@keyframes reveal-entrance{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.monster-reveal{text-align:center;padding:2rem}.reveal-frame{position:relative;display:inline-block;padding:1.5rem 3rem;background:linear-gradient(135deg,#2d1810e6,#1a0f0af2);border:3px solid var(--v-accent);border-radius:12px;box-shadow:0 0 60px #8b000066,0 20px 60px #0009,inset 0 0 40px #8b45131a;margin-bottom:1.5rem}.reveal-glow{position:absolute;inset:-4px;background:linear-gradient(45deg,transparent 0%,rgba(212,165,116,.3) 25%,rgba(139,0,0,.4) 50%,rgba(212,165,116,.3) 75%,transparent 100%);border-radius:14px;animation:reveal-glow-rotate 3s linear infinite;z-index:-1}@keyframes reveal-glow-rotate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.monster-intro-name{font-size:clamp(2rem,6vw,3rem);color:var(--v-accent-light);margin:0;text-shadow:0 0 30px rgba(212,165,116,.5),0 4px 8px rgba(0,0,0,.8);letter-spacing:4px;text-transform:uppercase;font-weight:700;animation:name-reveal 1s ease-out}@keyframes name-reveal{0%{letter-spacing:20px;opacity:0}to{letter-spacing:4px;opacity:1}}.monster-intro-type{font-size:clamp(1rem,2.5vw,1.25rem);color:var(--v-danger);margin:.5rem 0 0;text-transform:uppercase;letter-spacing:3px;font-weight:500;text-shadow:0 0 20px rgba(139,0,0,.6);animation:type-fade-in 1.2s ease-out}@keyframes type-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.reveal-tagline{font-size:clamp(1.1rem,3vw,1.4rem);color:var(--v-text);font-style:italic;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.6);animation:tagline-fade 1.5s ease-out}@keyframes tagline-fade{0%{opacity:0}50%{opacity:0}to{opacity:1}}.intro-ready-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);text-align:center;animation:ready-fade-in .5s ease-out}@keyframes ready-fade-in{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.ready-pulse{font-size:2.5rem;display:block;margin-bottom:.5rem;animation:coffee-pulse 1s ease-in-out infinite}@keyframes coffee-pulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 10px rgba(139,69,19,.5))}50%{transform:scale(1.1);filter:drop-shadow(0 0 20px rgba(212,165,116,.8))}}.intro-ready-indicator p{color:var(--v-accent);font-size:.9rem;margin:0;animation:pulse-hint 1.5s ease-in-out infinite}@media(max-width:600px){.intro-phase{min-height:250px}.reveal-frame{padding:1rem 2rem}.footsteps-indicator{gap:1rem}.footstep{font-size:1.2rem}}.fail-cutscene{position:fixed;inset:0;z-index:1000;background:#0d0705;overflow:hidden}.cutscene-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease-in-out}.cutscene-frame.active{opacity:1;pointer-events:auto}.cutscene-frame.fade-out{opacity:0}.fpv-latte-scene{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;padding:2rem;background:linear-gradient(180deg,#2d1810e6,#0d0705)}.latte-holder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2rem}.latte-emoji{font-size:clamp(4rem,15vw,8rem);animation:latte-offer 2s ease-in-out infinite;filter:drop-shadow(0 10px 30px rgba(139,69,19,.5))}@keyframes latte-offer{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-10px) rotate(5deg)}}.serving-text{color:var(--v-text-muted);font-size:clamp(1rem,3vw,1.25rem);font-style:italic;margin-top:1rem;animation:text-pulse 2s ease-in-out infinite}@keyframes text-pulse{0%,to{opacity:.6}50%{opacity:1}}.serving-phase{display:flex;align-items:center;justify-content:center;height:100%;background:linear-gradient(180deg,#2d1810f2,#140a05);padding:2rem}.drink-presentation{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:presentation-enter .6s ease-out}@keyframes presentation-enter{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.drink-cup-container{position:relative}.drink-cup-emoji{font-size:clamp(5rem,20vw,10rem);display:block;filter:drop-shadow(0 15px 40px rgba(139,69,19,.6));animation:cup-slide 1.2s ease-out}@keyframes cup-slide{0%{transform:translate(-100px) rotate(-15deg);opacity:0}60%{transform:translate(10px) rotate(5deg);opacity:1}to{transform:translate(0) rotate(0)}}.drink-presentation.stage-1 .drink-cup-emoji{animation:cup-hover 2s ease-in-out infinite}@keyframes cup-hover{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.drink-presentation.stage-1 .serving-text{animation:suspense-fade .5s ease-out}.drink-presentation.stage-2 .serving-text{animation:dots-pulse .8s ease-in-out infinite}@keyframes suspense-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes dots-pulse{0%,to{opacity:.4}50%{opacity:1}}.reaction-phase{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;background:linear-gradient(180deg,#2d1810f2,#140a05);cursor:default;transition:background-color .3s ease}.reaction-phase.can-advance{cursor:pointer}.reaction-phase.can-advance:hover{background:linear-gradient(180deg,#371e14f2,#190c08)}.reaction-content{text-align:center;animation:reaction-enter .5s ease-out}@keyframes reaction-enter{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.reaction-text{font-size:clamp(1.25rem,4vw,1.75rem);color:var(--v-cream);margin-bottom:1rem;line-height:1.4}.tip-earned{font-size:clamp(1.5rem,5vw,2rem);color:#4caf50;font-weight:700;animation:tip-bounce .6s ease-out}@keyframes tip-bounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.health-restored{font-size:1.25rem;color:#81c784;margin-top:.5rem}.damage-taken{font-size:clamp(1.5rem,5vw,2rem);color:#f44336;font-weight:700;animation:damage-shake .4s ease-in-out}@keyframes damage-shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.continue-hint{position:absolute;bottom:2rem;color:#ffffff80;font-size:.9rem;animation:hint-pulse 2s ease-in-out infinite}@keyframes hint-pulse{0%,to{opacity:.4}50%{opacity:.8}}.reaction-phase.reaction-perfect .reaction-text{color:gold;text-shadow:0 0 20px rgba(255,215,0,.5)}.reaction-phase.reaction-good .reaction-text{color:#90ee90}.reaction-phase.reaction-okay .reaction-text{color:#ffe4b5}.reaction-phase.reaction-angry .reaction-text{color:#ff6b6b}.monster-looming{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}.looming-portrait{max-width:clamp(200px,50vw,400px);max-height:40vh;object-fit:contain;filter:brightness(.7) saturate(1.2);animation:looming-approach 2s ease-out}@keyframes looming-approach{0%{transform:scale(.8) translateY(50px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.slap-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:radial-gradient(circle at center,#8b00004d,#0d0705);width:100%;height:100%}.slap-effect{text-align:center;animation:slap-impact .3s ease-out}@keyframes slap-impact{0%{transform:scale(0) rotate(-30deg)}50%{transform:scale(1.3) rotate(5deg)}to{transform:scale(1) rotate(0)}}.slap-emoji{font-size:clamp(5rem,20vw,10rem);display:block;filter:drop-shadow(0 0 30px rgba(255,50,50,.8));animation:slap-shake .1s ease-in-out infinite}@keyframes slap-shake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-5px) rotate(-2deg)}75%{transform:translate(5px) rotate(2deg)}}.slap-text{font-size:clamp(2rem,8vw,4rem);color:#ef5350;font-weight:900;text-transform:uppercase;letter-spacing:5px;text-shadow:0 0 20px rgba(244,67,54,.8),0 0 40px rgba(244,67,54,.5);margin:1rem 0 0}.coffee-spill{animation:spill-fall 1s ease-in forwards}.spill-emoji{font-size:clamp(2rem,8vw,4rem);display:block}@keyframes spill-fall{0%{transform:translateY(-100px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.attack-scene{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100vw;height:100vh;background:radial-gradient(circle at center,#8b000080,#000)}.ken-burns-container{width:100vw;height:100vh;max-width:none;max-height:none;overflow:hidden;border-radius:0;border:none;box-shadow:inset 0 0 100px #8b000099,inset 0 0 200px #000c}.attack-portrait.ken-burns-attack{width:100%;height:100%;object-fit:cover;object-position:center top;animation:ken-burns-full-attack 3s ease-in-out forwards;transform-origin:center 30%}@keyframes ken-burns-full-attack{0%{transform:scale(1) translateY(0);filter:brightness(.8)}30%{transform:scale(1.2) translateY(-5%);filter:brightness(1)}60%{transform:scale(1.5) translateY(-10%);filter:brightness(1.2) contrast(1.1)}to{transform:scale(2) translateY(-15%);filter:brightness(1.5) contrast(1.3) saturate(1.2)}}.attack-text{position:fixed;bottom:10%;left:50%;transform:translate(-50%);font-size:clamp(1.2rem,4vw,2rem);color:#fff;text-align:center;max-width:90%;font-style:italic;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 30px rgba(139,0,0,.8);background:linear-gradient(transparent,#000000b3 30%);padding:2rem 3rem;animation:attack-text-fade .5s ease-in .5s forwards;opacity:0;z-index:10}@keyframes attack-text-fade{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.final-strike{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;background:#000}.death-flash{position:absolute;inset:0;background:#fff;animation:death-flash .3s ease-out forwards}@keyframes death-flash{0%{opacity:1}to{opacity:0}}.death-title{font-size:clamp(1.5rem,6vw,3rem);color:#8b0000;text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 20px rgba(139,0,0,.8),0 0 40px rgba(139,0,0,.5),0 0 60px rgba(139,0,0,.3);animation:death-title-appear 1s ease-out .3s forwards;opacity:0;margin:0}@keyframes death-title-appear{0%{opacity:0;transform:scale(2) translateY(-20px);filter:blur(10px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}.cutscene-frame.final{background:linear-gradient(180deg,#8b00004d,#000,#8b00004d)}@media(max-width:600px){.ken-burns-container{width:100vw;height:100vh}.latte-emoji{font-size:5rem}.slap-emoji{font-size:6rem}}.loading-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--v-bg-dark) 0%,#0a0504 100%);z-index:2000}.loading-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2rem}.loading-logo{font-size:clamp(4rem,15vw,6rem);animation:logo-pulse 2s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(139,69,19,.6))}.loading-logo-img{width:clamp(120px,30vw,200px);height:auto;animation:logo-pulse 2s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(139,69,19,.6));border-radius:12px}@keyframes logo-pulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 30px rgba(139,69,19,.6))}50%{transform:scale(1.1);filter:drop-shadow(0 0 50px rgba(212,165,116,.8))}}.loading-title{font-size:clamp(1.5rem,5vw,2.5rem);color:var(--v-accent);margin:1rem 0 2rem;text-shadow:0 0 20px rgba(139,0,0,.5);letter-spacing:3px}.loading-progress-container{width:clamp(200px,60vw,400px);height:8px;background:#4a302080;border-radius:4px;overflow:hidden;margin-bottom:.5rem}.loading-progress-bar{height:100%;background:linear-gradient(90deg,var(--v-accent-dark),var(--v-accent),var(--v-accent-light));border-radius:4px;transition:width .2s ease-out;box-shadow:0 0 10px #d4a57480}.loading-progress-text{font-size:.9rem;color:var(--v-accent);font-weight:700;margin-bottom:1rem}.loading-message{font-size:clamp(.9rem,2.5vw,1.1rem);color:var(--v-text-muted);font-style:italic;margin:0 0 1rem;min-height:1.5em}.loading-dots{display:flex;gap:.5rem}.loading-dots .dot{width:10px;height:10px;background:var(--v-accent);border-radius:50%;animation:dot-bounce 1.4s ease-in-out infinite}.loading-dots .dot:nth-child(2){animation-delay:.2s}.loading-dots .dot:nth-child(3){animation-delay:.4s}@keyframes dot-bounce{0%,80%,to{transform:translateY(0);opacity:.5}40%{transform:translateY(-10px);opacity:1}}.game-opening-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0d0705;z-index:1000;overflow:hidden}.opening-background{position:absolute;inset:0;overflow:hidden}.shop-exterior-img{width:150%;height:150%;object-fit:cover;object-position:center 30%;filter:brightness(.6) saturate(1.1) contrast(1.1);transform:scale(1.15) translate(0) translateY(0);animation:ken-burns-cinematic-intro 2.5s cubic-bezier(.4,0,.2,1) forwards}@keyframes ken-burns-cinematic-intro{0%{transform:scale(1.15) translate(0) translateY(0);filter:brightness(.3) saturate(.9) contrast(1);opacity:0}30%{opacity:1}to{transform:scale(1.2) translate(-1%) translateY(-1%);filter:brightness(.7) saturate(1.1) contrast(1.1)}}@keyframes ken-burns-initial{0%{transform:scale(1.3) translate(-5%) translateY(-5%);filter:brightness(.3) saturate(.9);opacity:0}to{transform:scale(1.1) translate(0) translateY(0);filter:brightness(.7) saturate(1.1)}}.shop-exterior-img.zooming{animation:ken-burns-zoom 15s ease-in-out forwards}@keyframes ken-burns-zoom{0%{transform:scale(1.2) translate(-1%) translateY(-1%);filter:brightness(.7) saturate(1.1) contrast(1.1)}50%{transform:scale(1.3) translate(-2%) translateY(-3%);filter:brightness(.6) saturate(1.15) contrast(1.15)}to{transform:scale(1.45) translate(-3%) translateY(-5%);filter:brightness(.5) saturate(1.2) contrast(1.2)}}.opening-rain-overlay{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.opening-rain-overlay:before,.opening-rain-overlay:after{content:"";position:absolute;top:-100%;left:0;width:100%;height:200%;background-image:linear-gradient(180deg,transparent 90%,rgba(180,200,220,.15) 90%,rgba(180,200,220,.15) 90.5%,transparent 90.5%);background-size:3px 25px;animation:rain-fall .4s linear infinite;opacity:.6}.opening-rain-overlay:after{background-size:2px 20px;animation:rain-fall .3s linear infinite;animation-delay:.1s;opacity:.4;left:50%}@keyframes rain-fall{0%{transform:translateY(0) translate(-5deg)}to{transform:translateY(50%) translate(-5deg)}}.opening-rain-splash{position:absolute;bottom:0;left:0;right:0;height:80px;pointer-events:none;z-index:6;background:linear-gradient(to top,rgba(100,130,160,.2) 0%,transparent 100%);animation:splash-shimmer 2s ease-in-out infinite}@keyframes splash-shimmer{0%,to{opacity:.5}50%{opacity:.8}}.opening-fog{position:absolute;inset:0;background:radial-gradient(ellipse at center bottom,rgba(139,69,19,.2) 0%,transparent 50%),linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.5) 100%);pointer-events:none;animation:fog-float 6s ease-in-out infinite}@keyframes fog-float{0%,to{opacity:.7}50%{opacity:1}}.opening-title{position:relative;z-index:10;text-align:center;opacity:0;transform:translateY(30px);transition:opacity 1s ease-out,transform 1s ease-out}.opening-title.visible{opacity:1;transform:translateY(0)}.shop-name{font-size:clamp(2.5rem,10vw,5rem);font-weight:700;color:var(--v-accent-light);text-shadow:0 0 60px rgba(139,0,0,.8),0 0 120px rgba(139,0,0,.5),0 4px 20px rgba(0,0,0,.9);letter-spacing:6px;margin:0;text-transform:uppercase;animation:title-glow 3s ease-in-out infinite}@keyframes title-glow{0%,to{text-shadow:0 0 60px rgba(139,0,0,.8),0 0 120px rgba(139,0,0,.5),0 4px 20px rgba(0,0,0,.9)}50%{text-shadow:0 0 80px rgba(212,165,116,.6),0 0 150px rgba(139,0,0,.7),0 4px 20px rgba(0,0,0,.9)}}.shop-tagline{font-size:clamp(1rem,3vw,1.5rem);color:var(--v-accent);margin:1rem 0 .5rem;letter-spacing:3px;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.8)}.shop-subtitle{font-size:clamp(.9rem,2.5vw,1.2rem);color:var(--v-text-muted);font-style:italic;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.8)}.opening-logo-img{width:clamp(200px,40vw,400px);height:auto;animation:opening-logo-pulse 3s ease-in-out infinite,opening-logo-appear 1.5s ease-out;filter:drop-shadow(0 0 60px rgba(139,69,19,.8)) drop-shadow(0 0 120px rgba(212,165,116,.4));border-radius:16px}@keyframes opening-logo-appear{0%{opacity:0;transform:scale(.7) translateY(-30px);filter:drop-shadow(0 0 20px rgba(139,69,19,.3))}60%{opacity:1;transform:scale(1.05) translateY(0)}to{opacity:1;transform:scale(1) translateY(0);filter:drop-shadow(0 0 60px rgba(139,69,19,.8)) drop-shadow(0 0 120px rgba(212,165,116,.4))}}@keyframes opening-logo-pulse{0%,to{transform:scale(1);filter:drop-shadow(0 0 60px rgba(139,69,19,.8)) drop-shadow(0 0 120px rgba(212,165,116,.4))}50%{transform:scale(1.05);filter:drop-shadow(0 0 80px rgba(212,165,116,.9)) drop-shadow(0 0 150px rgba(139,69,19,.6))}}.start-shift-btn{position:relative;z-index:10;margin-top:clamp(2rem,5vh,4rem);padding:1rem 2.5rem;background:linear-gradient(135deg,#8b4513cc,#2d1810e6);border:3px solid var(--v-accent);border-radius:12px;color:var(--v-accent-light);font-size:clamp(1rem,3vw,1.4rem);font-weight:600;letter-spacing:2px;text-transform:uppercase;cursor:pointer;box-shadow:0 0 40px #8b451380,0 10px 40px #00000080,inset 0 0 20px #d4a5741a;transition:all .3s ease;animation:btn-appear .5s ease-out,btn-pulse 2s ease-in-out infinite .5s;display:flex;align-items:center;gap:.75rem}@keyframes btn-appear{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes btn-pulse{0%,to{box-shadow:0 0 40px #8b451380,0 10px 40px #00000080,inset 0 0 20px #d4a5741a}50%{box-shadow:0 0 60px #d4a57499,0 10px 50px #0009,inset 0 0 30px #d4a57433}}.start-shift-btn:hover{background:linear-gradient(135deg,#d4a57466,#8b4513cc);border-color:var(--v-accent-light);transform:scale(1.05);box-shadow:0 0 80px #d4a574b3,0 15px 50px #0009,inset 0 0 40px #d4a57433}.start-shift-btn:active{transform:scale(.98)}.btn-text{display:inline-block}.btn-icon{font-size:1.5em;filter:drop-shadow(0 0 8px rgba(139,69,19,.8))}.opening-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:5}.bat{position:absolute;font-size:clamp(1rem,3vw,1.5rem);opacity:.6;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.bat-1{top:10%;left:15%;animation:bat-fly-1 8s ease-in-out infinite}.bat-2{top:15%;right:20%;animation:bat-fly-2 10s ease-in-out infinite;animation-delay:2s}@keyframes bat-fly-1{0%,to{transform:translate(0) rotateY(0)}25%{transform:translate(50px,-20px) rotateY(0)}50%{transform:translate(100px,10px) rotateY(180deg)}75%{transform:translate(50px,-10px) rotateY(180deg)}}@keyframes bat-fly-2{0%,to{transform:translate(0) rotateY(180deg)}25%{transform:translate(-40px,15px) rotateY(180deg)}50%{transform:translate(-80px,-10px) rotateY(0)}75%{transform:translate(-40px,5px) rotateY(0)}}.lamp-glow{position:absolute;top:30%;left:50%;transform:translate(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(255,200,100,.15) 0%,transparent 70%);animation:lamp-flicker 4s ease-in-out infinite;pointer-events:none}@keyframes lamp-flicker{0%,to{opacity:.8;transform:translate(-50%) scale(1)}25%{opacity:.6;transform:translate(-50%) scale(.95)}50%{opacity:1;transform:translate(-50%) scale(1.05)}75%{opacity:.7;transform:translate(-50%) scale(.98)}}@media(max-width:600px){.shop-name{letter-spacing:3px}.start-shift-btn{padding:.875rem 2rem}.bat{display:none}.loading-logo-img{width:clamp(200px,60vw,320px)}.opening-logo-img{width:clamp(220px,70vw,350px)}}@media(max-width:600px)and (orientation:portrait){.loading-logo-img{width:clamp(220px,75vw,350px)}.opening-logo-img{width:clamp(250px,80vw,380px)}}@media(max-width:900px)and (orientation:landscape){.loading-logo-img{width:clamp(180px,35vh,280px)}.opening-logo-img{width:clamp(200px,40vh,320px)}}@media(prefers-reduced-motion:reduce){.monster-portrait,.monster-portrait-img,.mood-shake,.damage-flash,.rage-vignette,.patience-bar-fill,.patience-critical .patience-bar-fill,.stat-value,.tip-jar-icon,.order-ticket,.drink-icon,.modifier-tag,.special-tag,.dialogue-overlay,.dialogue-text,.dialogue-skip-hint,.dialogue-click-overlay,.cutscene-overlay,.slap-effect,.slap-emoji,.coffee-spill,.attack-portrait.ken-burns-attack,.attack-text,.death-flash,.death-title,.loading-logo,.loading-logo-img,.opening-logo-img,.loading-dots .dot,.shop-exterior-img,.shop-exterior-img.zooming,.opening-rain-overlay:before,.opening-rain-overlay:after,.opening-rain-splash,.opening-fog,.opening-title,.shop-name,.start-shift-btn,.bat,.lamp-glow,.game-over-overlay,.pause-btn,.card-inner,.retry-btn,.minigame-container,.steam-particle,.bubble,.espresso-stream{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.shop-exterior-img,.shop-exterior-img.zooming,.attack-portrait.ken-burns-attack{animation:none!important;transform:scale(1)!important}.mood-shake,.slap-shake{animation:none!important;transform:none!important}.dialogue-text{opacity:1!important}}.violatte-layout{width:100%;height:100dvh;display:grid;grid-template-columns:1fr;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--violatte-bg-primary);color:var(--violatte-text-primary);font-family:var(--font-primary);overflow:hidden;position:relative;filter:hue-rotate(var(--v-screen-temp));transition:filter .5s ease}.violatte-left-panel,.violatte-main-panel,.violatte-game{display:none!important}.violatte-zone-status{background:var(--violatte-bg-secondary);display:flex!important;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);gap:var(--space-md);border-bottom:1px solid var(--violatte-border-light);overflow-x:auto;overflow-y:hidden;z-index:var(--z-elevated)}.status-bar-content{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,16px);width:100%}.status-bar-left{display:flex;gap:var(--space-sm);align-items:center;font-size:var(--text-status-label)}.score-display{display:flex;gap:4px}.score-value{font-weight:var(--weight-bold);color:var(--violatte-accent-primary)}.customer-counter{font-size:var(--text-status-label)}.status-bar-health{flex:0 1 auto;min-width:100px}.status-bar-tips{display:flex;align-items:center;gap:4px;font-size:var(--text-status-label);transition:all var(--duration-normal) var(--ease-out)}.status-bar-tips.restored{color:var(--violatte-success);transform:scale(1.1)}.status-bar-right{display:flex;gap:var(--space-sm);flex-shrink:0}.violatte-zone-monster{background:var(--violatte-bg-primary);display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1vh,12px);padding:var(--space-md)}.monster-info{text-align:center}.monster-nameplate{display:flex;flex-direction:column;gap:2px}.monster-nameplate.silhouetted .violatte-monster-name{color:var(--violatte-text-muted);font-style:italic}.violatte-zone-order{background:var(--violatte-bg-secondary);padding:var(--space-md);border-top:1px solid var(--violatte-border-light);border-bottom:1px solid var(--violatte-border-light);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--violatte-accent-dark) transparent}.violatte-zone-game{background:var(--violatte-bg-primary);display:flex!important;align-items:center;justify-content:center;padding:var(--space-md);overflow:hidden;position:relative;z-index:var(--z-content-element)}.violatte-zone-game-content{width:100%;height:100%;display:flex!important;flex-direction:column;align-items:center;justify-content:center}.phase-content{width:100%;height:100%}.violatte-zone-feedback{background:var(--violatte-bg-secondary);display:flex!important;align-items:center;justify-content:center;padding:var(--space-md);border-top:1px solid var(--violatte-border-light);overflow-y:auto;position:relative}.violatte-zone-feedback-content{width:100%;max-height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center}.mood-indicator{display:flex;align-items:center;gap:8px;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);background:#64000033;border:1px solid var(--violatte-border-primary);font-size:var(--text-status-label);font-weight:var(--weight-semibold)}.mood-icon{font-size:1.5rem;display:inline-block}.mood-label{color:var(--violatte-accent-primary);text-transform:uppercase;letter-spacing:1px}.violatte-zone-controls{background:var(--violatte-bg-secondary);display:flex!important;align-items:center;justify-content:center;padding:var(--space-md);padding-bottom:max(var(--space-md),calc(var(--space-md) + env(safe-area-inset-bottom)));border-top:1px solid var(--violatte-border-light);gap:var(--space-md);overflow:hidden;z-index:var(--z-fixed)}.violatte-button{height:var(--button-height);min-width:44px;padding:0 clamp(12px,3vw,24px);display:flex;align-items:center;justify-content:center;gap:6px;font-size:var(--text-button);font-weight:var(--weight-semibold);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none;font-family:var(--font-primary)}@media(max-width:768px)and (orientation:portrait){.violatte-layout{gap:clamp(1px,.5vh,4px)}.status-bar-content{gap:4px}.status-bar-left{gap:2px;font-size:clamp(.7rem,2vw,.9rem)}@media(max-width:375px){.customer-counter{display:none}.status-bar-right{gap:2px}.violatte-button{padding:0 8px;min-width:40px}}}@media(max-height:500px)and (orientation:landscape){.violatte-layout{gap:0}.violatte-zone-status,.violatte-zone-feedback{min-height:40px}}@media(min-width:1024px){.violatte-layout{grid-template-columns:300px 1fr;gap:8px}.violatte-zone-status{grid-column:1 / -1}.violatte-zone-monster{grid-column:1;padding:var(--space-lg)}.violatte-zone-order{grid-column:1}.violatte-zone-game{grid-column:2;grid-row:2 / 5}.violatte-zone-feedback,.violatte-zone-controls{grid-column:1 / -1}}.violatte-layout:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 30%,rgba(100,0,0,.7) 100%);opacity:0;pointer-events:none;z-index:var(--z-elevated);transition:opacity var(--duration-normal) var(--ease-in-out)}.violatte-layout.mood-annoyed:before{opacity:.2}.violatte-layout.mood-angry:before{opacity:.4}.violatte-layout.mood-horror:before{opacity:.7;animation:horror-screen-shake .1s ease-in-out infinite}@keyframes horror-screen-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}}.violatte-zone-monster{animation:slideDown var(--duration-normal) var(--ease-out)}.error-boundary-container{position:fixed;inset:0;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;z-index:9999;overflow:auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.error-boundary-content{background:#0f3460;border:2px solid #ff6b6b;border-radius:12px;padding:48px;max-width:600px;width:90%;box-shadow:0 20px 60px #000000b3,0 0 40px #ff6b6b4d;color:#fff;animation:slideUp .3s ease-out}.error-boundary-icon{font-size:48px;text-align:center;margin-bottom:20px;filter:drop-shadow(0 0 10px rgba(255,107,107,.5))}.error-boundary-title{font-size:28px;font-weight:700;margin:0 0 15px;text-align:center;color:#ff6b6b;text-shadow:0 2px 10px rgba(255,107,107,.3)}.error-boundary-message{font-size:16px;line-height:1.6;margin:0 0 30px;text-align:center;color:#ccc}.error-boundary-details{background:#0000004d;border:1px solid rgba(255,107,107,.3);border-radius:6px;padding:15px;margin-bottom:30px;cursor:pointer}.error-boundary-details summary{color:#ff6b6b;font-weight:600;-webkit-user-select:none;user-select:none;outline:none}.error-boundary-details summary:hover{color:#ff8787}.error-boundary-trace{margin:15px 0 0;padding:12px;background:#00000080;border-radius:4px;overflow-x:auto;font-size:12px;line-height:1.4;color:#90ee90;font-family:Courier New,monospace;white-space:pre-wrap;word-wrap:break-word}.error-boundary-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.error-boundary-button{padding:12px 24px;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;text-align:center;outline:none}.error-boundary-button:disabled{opacity:.5;cursor:not-allowed}.error-boundary-button-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:2px solid transparent}.error-boundary-button-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.error-boundary-button-primary:active:not(:disabled){transform:translateY(0)}.error-boundary-button-secondary{background:transparent;color:#667eea;border:2px solid #667eea}.error-boundary-button-secondary:hover:not(:disabled){background:#667eea1a;transform:translateY(-2px);box-shadow:0 8px 20px #667eea33}.error-boundary-button-secondary:active:not(:disabled){transform:translateY(0)}.error-boundary-button-tertiary{background:transparent;color:#a8a8a8;border:2px solid #a8a8a8;font-size:14px}.error-boundary-button-tertiary:hover:not(:disabled){background:#8888881a;color:#aaa;border-color:#aaa;transform:translateY(-2px)}.error-boundary-button-tertiary:active:not(:disabled){transform:translateY(0)}.error-boundary-warning{background:#ff6b6b1a;border-left:3px solid #ff6b6b;padding:12px 15px;border-radius:4px;font-size:14px;color:#ff8787;margin:0}@media(max-width:600px){.error-boundary-content{padding:32px 24px;margin:20px}.error-boundary-title{font-size:24px}.error-boundary-message{font-size:15px}.error-boundary-actions{flex-direction:column}.error-boundary-button{width:100%;padding:14px 16px;font-size:15px}}.admin-auth-modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.admin-auth-content{background:#1a1a2e;border:2px solid #667eea;border-radius:12px;padding:40px;width:100%;max-width:400px;box-shadow:0 10px 40px #00000080,0 0 20px #667eea33;color:#fff}.admin-auth-content h2{margin:0 0 10px;font-size:24px;text-align:center;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.admin-auth-content p{margin:0 0 30px;text-align:center;color:#aaa;font-size:14px}.admin-auth-content form{display:flex;flex-direction:column;gap:15px}.admin-auth-content input{padding:12px 15px;border:1px solid #667eea;border-radius:6px;background:#0f3460;color:#fff;font-size:14px;transition:all .3s ease}.admin-auth-content input:focus{outline:none;border-color:#764ba2;box-shadow:0 0 10px #667eea4d}.admin-auth-content input::placeholder{color:#666}.admin-auth-content input:disabled{opacity:.6;cursor:not-allowed}.auth-error{color:#ff6b6b;font-size:13px;text-align:center;padding:10px;background:#ff6b6b1a;border-radius:4px;border-left:3px solid #ff6b6b}.admin-auth-content button{padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.admin-auth-content button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #667eea66}.admin-auth-content button:active:not(:disabled){transform:translateY(0)}.admin-auth-content button:disabled{opacity:.7;cursor:not-allowed}:root{--violatte-bg-primary: #0d0705;--violatte-bg-secondary: #1a0f0a;--violatte-bg-tertiary: #2d1810;--violatte-accent-primary: #d4a574;--violatte-accent-light: #e8c9a0;--violatte-accent-dark: #a08060;--violatte-accent-muted: #8a785d;--violatte-text-primary: #e8dcc8;--violatte-text-secondary: #c0b0a0;--violatte-text-muted: #888;--violatte-text-dark: #1a1a1a;--violatte-success: #4caf50;--violatte-success-light: #81c784;--violatte-warning: #ff9800;--violatte-warning-light: #ffb74d;--violatte-danger: #f44336;--violatte-danger-dark: #c62828;--violatte-danger-darker: #8b0000;--violatte-horror: #9c27b0;--violatte-horror-light: #ba68c8;--violatte-border-primary: #4a3020;--violatte-border-light: rgba(180, 120, 60, .3);--violatte-border-dark: rgba(0, 0, 0, .6);--violatte-shadow-light: rgba(0, 0, 0, .2);--violatte-shadow-medium: rgba(0, 0, 0, .4);--violatte-shadow-heavy: rgba(0, 0, 0, .6);--violatte-shadow-intense: rgba(0, 0, 0, .8);--violatte-overlay-light: rgba(0, 0, 0, .3);--violatte-overlay-medium: rgba(0, 0, 0, .5);--violatte-overlay-heavy: rgba(0, 0, 0, .7);--violatte-overlay-intense: rgba(0, 0, 0, .9);--z-behind: -1;--z-base: 0;--z-background: 0;--z-coffee-counter: 0;--z-content-relative: 1;--z-decorative: 5;--z-content: 5;--z-content-element: 10;--z-game-content: 10;--z-top-bar: 10;--z-phase-indicator: 10;--z-interactive: 20;--z-sub-element: 50;--z-elevated: 100;--z-elevated-content: 110;--z-mood-indicator: 150;--z-dialogue-overlay: 150;--z-monster-portrait: 15;--z-silhouette-atmosphere: 15;--z-reveal-flash: 100;--z-modal: 200;--z-modal-backdrop: 190;--z-modal-content: 210;--z-dialogue-box: 200;--z-attack-sequence: 200;--z-tooltip: 300;--z-dropdown: 300;--z-tutorial: 300;--z-customer-commentary: 300;--z-transition: 400;--z-fixed: 400;--z-paused-overlay: 400;--z-dialog: 500;--z-dialog-content: 510;--z-notification: 600;--z-game-over: 600;--z-dramatic-reveal: 600;--z-overlay: 1000;--z-overlay-content: 1010;--z-loading: 1000;--z-damage-flash: 1000;--z-critical: 2000;--z-critical-content: 2010;--z-error: 9999;--z-system-loading: 10000;--space-xs: .25rem;--space-sm: .5rem;--space-md: .75rem;--space-lg: 1rem;--space-xl: 1.5rem;--space-2xl: 2rem;--space-3xl: 3rem;--font-primary: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--font-serif: "Georgia", serif;--font-monospace: "Courier New", monospace;--text-xs: .65rem;--text-sm: .75rem;--text-base: .9rem;--text-md: 1rem;--text-lg: 1.1rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.6;--leading-loose: 1.8;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .01em;--tracking-wider: .05em;--tracking-widest: .1em;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 50%;--duration-instant: .1s;--duration-fast: .2s;--duration-normal: .3s;--duration-slow: .5s;--duration-slower: .8s;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--dialogue-box-min-height: 120px;--dialogue-box-max-height: 180px;--dialogue-box-min-width: 280px;--dialogue-box-max-width: 420px;--portrait-max-width: 280px;--portrait-aspect-ratio: 3/4;--portrait-border-width: 4px;--health-bar-height: 40px;--health-heart-size: 28px;--status-section-min-height: 200px;--status-section-max-height: 300px;--order-display-max-height: 250px;--left-panel-width: 320px;--top-bar-height: 60px;--breakpoint-xs: 480px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--focus-ring-width: 3px;--focus-ring-color: rgba(59, 130, 246, .5);--focus-ring-offset: 2px;--touch-target-min: 44px;--anim-fade-in: fadeIn var(--duration-normal) var(--ease-out);--anim-fade-out: fadeOut var(--duration-normal) var(--ease-in);--anim-slide-up: slideUp var(--duration-normal) var(--ease-out);--anim-slide-down: slideDown var(--duration-normal) var(--ease-out);--anim-slide-left: slideLeft var(--duration-normal) var(--ease-out);--anim-slide-right: slideRight var(--duration-normal) var(--ease-out);--anim-scale-in: scaleIn var(--duration-normal) var(--ease-bounce);--anim-scale-out: scaleOut var(--duration-normal) var(--ease-in);--shadow-sm: 0 1px 2px var(--violatte-shadow-light);--shadow-md: 0 4px 8px var(--violatte-shadow-medium);--shadow-lg: 0 8px 16px var(--violatte-shadow-heavy);--shadow-xl: 0 12px 24px var(--violatte-shadow-heavy);--shadow-2xl: 0 16px 48px var(--violatte-shadow-intense);--shadow-glow-success: 0 0 20px rgba(76, 175, 80, .5);--shadow-glow-warning: 0 0 20px rgba(255, 152, 0, .5);--shadow-glow-danger: 0 0 20px rgba(244, 67, 54, .5);--shadow-glow-accent: 0 0 20px rgba(212, 165, 116, .5);--gradient-bg-vertical: linear-gradient(180deg, var(--violatte-bg-secondary) 0%, var(--violatte-bg-primary) 100%);--gradient-bg-diagonal: linear-gradient(135deg, var(--violatte-bg-tertiary) 0%, var(--violatte-bg-secondary) 100%);--gradient-accent: linear-gradient(135deg, var(--violatte-accent-primary) 0%, var(--violatte-accent-dark) 100%);--gradient-danger: linear-gradient(135deg, var(--violatte-danger) 0%, var(--violatte-danger-dark) 100%);--filter-blur-sm: blur(4px);--filter-blur-md: blur(8px);--filter-blur-lg: blur(12px);--filter-drop-shadow: drop-shadow(0 2px 4px var(--violatte-shadow-medium));--backdrop-blur-sm: blur(4px);--backdrop-blur-md: blur(10px);--backdrop-blur-lg: blur(16px)}@media(min-width:769px)and (max-width:1024px){:root{--text-xs: .6rem;--text-sm: .7rem;--text-base: .85rem;--text-md: .95rem;--text-lg: 1.05rem;--text-xl: 1.15rem;--text-2xl: 1.35rem;--text-3xl: 1.8rem;--text-4xl: 2.2rem}}@media(max-width:768px)and (orientation:portrait){:root{--text-xs: .55rem;--text-sm: .65rem;--text-base: .8rem;--text-md: .9rem;--text-lg: 1rem;--text-xl: 1.1rem;--text-2xl: 1.3rem;--text-3xl: 1.6rem;--text-4xl: 2rem;--space-xs: .2rem;--space-sm: .4rem;--space-md: .6rem;--space-lg: .8rem;--space-xl: 1.2rem;--space-2xl: 1.6rem;--dialogue-box-min-width: 200px;--dialogue-box-max-width: 320px;--dialogue-box-min-height: 100px;--health-heart-size: 22px;--left-panel-width: 100%}}@media(max-width:900px)and (orientation:landscape){:root{--text-xs: .6rem;--text-sm: .7rem;--text-base: .85rem;--text-md: .95rem;--space-xs: .2rem;--space-sm: .4rem;--space-md: .5rem;--health-heart-size: 20px}}@media(min-width:1201px){:root{--text-base: 1rem;--text-md: 1.1rem;--text-lg: 1.25rem;--text-xl: 1.4rem;--text-2xl: 1.75rem;--text-3xl: 2.25rem;--text-4xl: 3rem;--health-heart-size: 32px}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideLeft{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideRight{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}to{transform:scale(.9);opacity:0}}.no-scroll{overflow:hidden}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}@media(prefers-reduced-motion:reduce){:root{--duration-instant: .01s;--duration-fast: .01s;--duration-normal: .01s;--duration-slow: .01s;--duration-slower: .01s}*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}@media(prefers-contrast:high){:root{--violatte-accent-primary: #f0d0a0;--violatte-text-primary: #ffffff;--violatte-border-primary: #8a785d}}:root{--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;--font-display: "Georgia", "Palatino", serif;--font-monospace: "Courier New", "Monaco", monospace;--font-dramatic: "Georgia", serif}:root{--font-size-display-lg: clamp( 1.75rem, 5vw, 3rem );--font-size-display-md: clamp( 1.5rem, 4vw, 2.5rem );--font-size-h1: clamp( 1.25rem, 3.5vw, 2rem );--font-size-h2: clamp( 1.1rem, 3vw, 1.75rem );--font-size-h3: clamp( 1rem, 2.5vw, 1.5rem );--font-size-h4: clamp( .95rem, 2vw, 1.25rem );--font-size-h5: clamp( .9rem, 1.8vw, 1.1rem );--font-size-h6: clamp( .8rem, 1.5vw, 1rem );--font-size-body-lg: clamp( .9375rem, 2vw, 1.125rem );--font-size-body: clamp( .875rem, 1.8vw, 1rem );--font-size-body-sm: clamp( .8125rem, 1.6vw, .9375rem );--font-size-ui: clamp( .8rem, 1.5vw, .95rem );--font-size-ui-sm: clamp( .75rem, 1.3vw, .875rem );--font-size-small: clamp( .7rem, 1.2vw, .8rem );--font-size-tiny: clamp( .65rem, 1vw, .75rem );--font-size-number-lg: clamp( 1.5rem, 5vw, 2.5rem );--font-size-number: clamp( 1rem, 3vw, 1.5rem );--font-size-number-sm: clamp( .85rem, 2vw, 1rem )}:root{--line-height-display: 1.1;--line-height-heading: 1.25;--line-height-body: 1.6;--line-height-body-relaxed: 1.8;--line-height-ui: 1.4;--line-height-number: 1}:root{--letter-spacing-tight: -.01em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--letter-spacing-widest: .1em}:root{--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800}.type-display-lg{font-size:var(--font-size-display-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-tight);font-family:var(--font-display)}.type-display-md{font-size:var(--font-size-display-md);font-weight:var(--font-weight-bold);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-tight);font-family:var(--font-display)}h1,.type-h1{font-size:var(--font-size-h1);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-tight);margin-bottom:var(--space-lg);margin-top:0;font-family:var(--font-primary)}h2,.type-h2{font-size:var(--font-size-h2);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-tight);margin-bottom:var(--space-md);margin-top:0}h3,.type-h3{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-normal);margin-bottom:var(--space-md);margin-top:0}h4,.type-h4{font-size:var(--font-size-h4);font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-normal);margin-bottom:var(--space-sm);margin-top:0}h5,.type-h5{font-size:var(--font-size-h5);font-weight:var(--font-weight-medium);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-normal);margin-bottom:var(--space-sm);margin-top:0}h6,.type-h6{font-size:var(--font-size-h6);font-weight:var(--font-weight-medium);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-wide);margin-bottom:var(--space-sm);margin-top:0;text-transform:uppercase}p,.type-body{font-size:var(--font-size-body);font-weight:var(--font-weight-normal);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-normal);margin-bottom:var(--space-md);margin-top:0}.type-body-lg{font-size:var(--font-size-body-lg);line-height:var(--line-height-body-relaxed)}.type-body-sm{font-size:var(--font-size-body-sm);line-height:var(--line-height-body)}.type-ui{font-size:var(--font-size-ui);font-weight:var(--font-weight-medium);line-height:var(--line-height-ui);letter-spacing:var(--letter-spacing-normal)}.type-ui-sm{font-size:var(--font-size-ui-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-ui);letter-spacing:var(--letter-spacing-normal)}.type-small{font-size:var(--font-size-small);font-weight:var(--font-weight-normal);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-normal)}.type-tiny{font-size:var(--font-size-tiny);font-weight:var(--font-weight-normal);line-height:var(--line-height-ui);letter-spacing:var(--letter-spacing-normal)}.type-number-lg{font-family:var(--font-monospace);font-size:var(--font-size-number-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-number);letter-spacing:var(--letter-spacing-tight);font-variant-numeric:tabular-nums}.type-number{font-family:var(--font-monospace);font-size:var(--font-size-number);font-weight:var(--font-weight-semibold);line-height:var(--line-height-number);letter-spacing:var(--letter-spacing-normal);font-variant-numeric:tabular-nums}.type-number-sm{font-family:var(--font-monospace);font-size:var(--font-size-number-sm);font-weight:var(--font-weight-semibold);line-height:var(--line-height-number);font-variant-numeric:tabular-nums}.type-dialogue{font-size:var(--font-size-body-lg);font-weight:var(--font-weight-normal);line-height:var(--line-height-body-relaxed);letter-spacing:var(--letter-spacing-normal);font-family:var(--font-dramatic);font-style:italic}.type-monster-name{font-size:var(--font-size-h3);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-heading);letter-spacing:var(--letter-spacing-wider);font-family:var(--font-display);text-transform:uppercase;color:var(--violatte-accent-primary)}.type-order{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);line-height:var(--line-height-body);letter-spacing:var(--letter-spacing-normal);font-family:var(--font-primary)}.type-score{font-family:var(--font-monospace);font-size:var(--font-size-number);font-weight:var(--font-weight-bold);line-height:var(--line-height-number);letter-spacing:var(--letter-spacing-tight);font-variant-numeric:tabular-nums}.type-tutorial{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);line-height:var(--line-height-body-relaxed);letter-spacing:var(--letter-spacing-normal);color:var(--violatte-text-primary)}.type-label{font-size:var(--font-size-ui);font-weight:var(--font-weight-semibold);line-height:var(--line-height-ui);letter-spacing:var(--letter-spacing-normal);text-transform:uppercase;color:var(--violatte-accent-primary)}.type-timer{font-family:var(--font-monospace);font-size:var(--font-size-number-lg);font-weight:var(--font-weight-bold);line-height:1;letter-spacing:var(--letter-spacing-normal);font-variant-numeric:tabular-nums}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.text-wrap{white-space:normal;word-wrap:break-word;overflow-wrap:break-word}.break-words{word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.no-break{word-break:keep-all;white-space:nowrap}.prose{max-width:65ch;margin:0 auto}.prose-sm{max-width:50ch}.prose-lg{max-width:80ch}.dialogue-prose{max-width:55ch;margin:var(--space-lg) auto}.icon-inline{display:inline;width:1em;height:1em;vertical-align:-.125em;margin:0 .25em}.emoji{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;display:inline-block;font-style:normal;font-weight:400;line-height:1;vertical-align:-.2em;margin:0 .2em}.emoji-heading{font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:.9em;vertical-align:-.1em;margin:0 .1em}@media(max-width:375px){:root{--line-height-body: 1.55;--line-height-body-relaxed: 1.7}h1,h2,h3,h4,h5,h6,p,.type-body{margin-bottom:calc(var(--space-md) * .8)}.prose{padding:0 var(--space-sm)}}@media(min-width:481px)and (max-width:640px){h1,h2,h3{margin-bottom:var(--space-md)}}@media(min-width:641px)and (max-width:1023px){p,.type-body{max-width:70ch}}@media(min-width:1024px){p,.type-body{max-width:75ch}.prose{padding:0}}body{font-size:var(--font-size-body);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1:focus-visible,h2:focus-visible,h3:focus-visible,h4:focus-visible,h5:focus-visible,h6:focus-visible,p:focus-visible,.type-body:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media(prefers-reduced-motion:reduce){h1,h2,h3,h4,h5,h6,p,.type-body,.type-dialogue{animation:none!important;transition:none!important}}@media(prefers-contrast:more){h1,h2,h3,h4{font-weight:var(--font-weight-extrabold)}p,.type-body{font-size:var(--font-size-body-lg);line-height:var(--line-height-body-relaxed)}button,[role=button],input,select,textarea{border-width:2px;border-color:currentColor}}@media(prefers-color-scheme:light)or (prefers-contrast:more){:root{--font-size-body: clamp( 1rem, 2vw, 1.25rem )}p,.type-body{line-height:var(--line-height-body-relaxed)}}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-normal-case{text-transform:none}.text-italic{font-style:italic}.text-oblique{font-style:oblique}.text-no-italic{font-style:normal}.text-underline{text-decoration:underline}.text-line-through{text-decoration:line-through}.text-no-underline{text-decoration:none}.font-light{font-weight:var(--font-weight-light)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.font-extrabold{font-weight:var(--font-weight-extrabold)}@media print{h1,h2,h3,h4,h5,h6{page-break-after:avoid}p{orphans:3;widows:3}.emoji{display:none}}:root{--safe-area-inset-top: env(safe-area-inset-top, 0px);--safe-area-inset-right: env(safe-area-inset-right, 0px);--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);--safe-area-inset-left: env(safe-area-inset-left, 0px);--safe-padding-top: clamp(0px, var(--safe-area-inset-top), 48px);--safe-padding-bottom: clamp(0px, var(--safe-area-inset-bottom), 48px);--safe-padding-left: clamp(0px, var(--safe-area-inset-left), 24px);--safe-padding-right: clamp(0px, var(--safe-area-inset-right), 24px);--breakpoint-tiny: 320px;--breakpoint-small: 375px;--breakpoint-standard: 425px;--breakpoint-large: 600px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1024px;--zone-status-height: 8vh;--zone-monster-height: 20vh;--zone-order-height: 12vh;--zone-game-height: 40vh;--zone-feedback-height: 12vh;--zone-controls-height: 8vh;--zone-padding: var(--space-md);--zone-gap: clamp(2px, 1vh, 8px);--monster-portrait-size: clamp(100px, 18vw, 180px);--button-height: clamp(44px, 5vh, 56px);--button-width: clamp(100%, 45vw, 280px);--touch-target-size: clamp(44px, 6vh, 56px);--text-monster-name: clamp(1rem, 3.5vw, 1.5rem);--text-status-label: clamp(.75rem, 2vw, 1rem);--text-dialogue: clamp(.875rem, 2.5vw, 1.125rem);--text-button: clamp(.875rem, 2vw, 1rem);--float-status-top: var(--safe-padding-top);--float-controls-bottom: var(--safe-padding-bottom);--float-side-margin: clamp(4px, 2vw, 16px)}@media(max-width:320px){:root{--space-xs: .15rem;--space-sm: .3rem;--space-md: .5rem;--zone-padding: 4px}}@media(min-width:321px)and (max-width:374px){:root{--zone-status-height: 9vh;--zone-monster-height: 19vh;--zone-order-height: 11vh;--zone-game-height: 38vh;--zone-feedback-height: 13vh;--zone-controls-height: 10vh}}@media(min-width:375px)and (max-width:424px){:root{--zone-status-height: 8vh;--zone-monster-height: 20vh;--zone-order-height: 12vh;--zone-game-height: 40vh;--zone-feedback-height: 12vh;--zone-controls-height: 8vh}}@media(min-width:425px)and (max-width:599px){:root{--zone-status-height: 7vh;--zone-monster-height: 22vh;--zone-order-height: 11vh;--zone-game-height: 42vh;--zone-feedback-height: 11vh;--zone-controls-height: 7vh;--text-monster-name: clamp(1.1rem, 3.2vw, 1.6rem);--text-dialogue: clamp(.9rem, 2.2vw, 1.15rem)}}@media(min-width:600px)and (max-width:767px){:root{--zone-status-height: 60px;--zone-monster-height: 160px;--zone-order-height: 80px;--zone-game-height: 340px;--zone-feedback-height: 90px;--zone-controls-height: 70px;--monster-portrait-size: clamp(120px, 25vw, 200px);--button-width: clamp(200px, 30vw, 300px)}}@media(min-width:768px)and (max-width:1023px){:root{--zone-status-height: 70px;--zone-monster-height: 200px;--zone-order-height: 100px;--zone-game-height: 380px;--zone-feedback-height: 100px;--zone-controls-height: 80px;--monster-portrait-size: clamp(140px, 30vw, 240px);--button-width: clamp(240px, 35vw, 340px)}}@media(min-width:1024px){:root{--zone-status-height: 80px;--zone-monster-height: 240px;--zone-order-height: 120px;--zone-game-height: 450px;--zone-feedback-height: 120px;--zone-controls-height: 90px;--monster-portrait-size: 280px;--button-width: 360px}}.violatte-layout{width:100vw;height:100dvh;display:grid;grid-template-rows:var(--zone-status-height) var(--zone-monster-height) var(--zone-order-height) var(--zone-game-height) var(--zone-feedback-height) var(--zone-controls-height);gap:var(--zone-gap);padding:var(--safe-padding-top) var(--safe-padding-right) var(--safe-padding-bottom) var(--safe-padding-left);background:var(--violatte-bg-primary);color:var(--violatte-text-primary);overflow:hidden;position:relative;box-sizing:border-box}.violatte-zone-status{grid-row:1;height:var(--zone-status-height);padding:var(--zone-padding);display:flex;align-items:center;justify-content:space-between;background:var(--violatte-bg-secondary);border-bottom:1px solid var(--violatte-border-light);overflow-x:auto;overflow-y:hidden;position:relative;z-index:var(--z-elevated)}.violatte-zone-monster{grid-row:2;height:var(--zone-monster-height);padding:var(--zone-padding);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1vh,12px);background:var(--violatte-bg-primary);overflow:hidden;position:relative}.violatte-monster-portrait{width:var(--monster-portrait-size);aspect-ratio:var(--portrait-aspect-ratio);object-fit:cover;border:3px solid var(--violatte-accent-primary);border-radius:var(--radius-lg);animation:slideDown var(--duration-normal) var(--ease-out)}.violatte-monster-name{font-size:var(--text-monster-name);font-weight:var(--weight-bold);color:var(--violatte-accent-primary);text-align:center}.violatte-monster-mood{font-size:var(--text-status-label);color:var(--violatte-text-secondary);text-align:center}.violatte-zone-order{grid-row:3;height:var(--zone-order-height);padding:var(--zone-padding);background:var(--violatte-bg-secondary);border-bottom:1px solid var(--violatte-border-light);overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:var(--violatte-accent-dark) transparent}.violatte-zone-order::-webkit-scrollbar{width:4px}.violatte-zone-order::-webkit-scrollbar-track{background:transparent}.violatte-zone-order::-webkit-scrollbar-thumb{background:var(--violatte-accent-dark);border-radius:2px}.violatte-zone-game{grid-row:4;height:var(--zone-game-height);padding:var(--zone-padding);background:var(--violatte-bg-primary);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.violatte-zone-game-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.violatte-zone-feedback{grid-row:5;height:var(--zone-feedback-height);padding:var(--zone-padding);background:var(--violatte-bg-secondary);border-top:1px solid var(--violatte-border-light);overflow-y:auto;overflow-x:hidden;position:relative;display:flex;align-items:center;justify-content:center}.violatte-zone-feedback-content{width:100%;max-height:100%;overflow-y:auto}.violatte-zone-controls{grid-row:6;height:var(--zone-controls-height);padding:var(--zone-padding);padding-bottom:max(var(--zone-padding),calc(var(--zone-padding) + var(--safe-padding-bottom)));background:var(--violatte-bg-secondary);border-top:1px solid var(--violatte-border-light);display:flex;align-items:center;justify-content:center;gap:var(--space-md);overflow:hidden;position:relative;z-index:var(--z-fixed)}.violatte-button{height:var(--button-height);min-width:44px;padding:0 clamp(12px,3vw,24px);display:flex;align-items:center;justify-content:center;gap:6px;font-size:var(--text-button);font-weight:var(--weight-semibold);font-family:var(--font-primary);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-user-select:none;user-select:none}.violatte-button:active{transform:scale(.98)}.violatte-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.violatte-button-primary{background:var(--violatte-accent-primary);color:var(--violatte-bg-primary)}.violatte-button-primary:hover{background:var(--violatte-accent-light);box-shadow:var(--shadow-glow-accent)}.violatte-button-primary:disabled{opacity:.6;cursor:not-allowed}.violatte-button-secondary{background:transparent;color:var(--violatte-accent-primary);border:2px solid var(--violatte-accent-primary)}.violatte-button-secondary:hover{background:#d4a5741a}.violatte-button-secondary:disabled{opacity:.6;cursor:not-allowed}.violatte-button-danger{background:var(--violatte-danger);color:#fff}.violatte-button-danger:hover{background:var(--violatte-danger-dark);box-shadow:var(--shadow-glow-danger)}@media(max-height:500px)and (orientation:landscape){:root{--zone-status-height: 40px;--zone-monster-height: 140px;--zone-order-height: 50px;--zone-game-height: 280px;--zone-feedback-height: 50px;--zone-controls-height: 60px}.violatte-layout{grid-template-rows:var(--zone-status-height) var(--zone-monster-height) var(--zone-order-height) var(--zone-game-height) var(--zone-feedback-height) var(--zone-controls-height)}}@media(min-width:1200px){.violatte-layout{grid-template-columns:1fr 1fr;grid-template-rows:60px 1fr 70px;grid-template-areas:"status status" "left right" "controls controls"}.violatte-zone-status{grid-area:status}.violatte-zone-monster,.violatte-zone-order{grid-column:1}.violatte-zone-game{grid-column:2;grid-row:2}.violatte-zone-feedback{grid-column:2}.violatte-zone-controls{grid-area:controls}}.zone-hidden{visibility:hidden;opacity:0;pointer-events:none;min-height:0}.violatte-zone-monster,.violatte-zone-order{transition:opacity .3s ease-out,visibility .3s ease-out}.violatte-hide-scrollbar{scrollbar-width:none}.violatte-hide-scrollbar::-webkit-scrollbar{display:none}.violatte-no-overflow{overflow:hidden}.violatte-center-content{display:flex;align-items:center;justify-content:center}.violatte-row{display:flex;flex-direction:row;align-items:center;gap:var(--space-md)}.violatte-column{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-md)}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media print{.violatte-layout{height:auto;grid-template-rows:auto;padding:0}.violatte-zone-status,.violatte-zone-controls{display:none}}:root{--color-bg-primary: #0a0603;--color-bg-secondary: #1a0f0a;--color-bg-tertiary: #2d1810;--color-accent-primary: #d4a574;--color-accent-light: #e8c9a0;--color-accent-dark: #a08060;--color-accent-muted: #8a785d;--color-text-primary: #e8dcc8;--color-text-secondary: #c0b0a0;--color-text-muted: #7d7d7d;--color-text-white: #ffffff;--color-success: #5cdb6f;--color-success-light: rgba(92, 219, 111, .15);--color-warning: #ffb84d;--color-warning-light: rgba(255, 184, 77, .15);--color-danger: #ff6b6b;--color-danger-light: rgba(255, 107, 107, .15);--color-horror: #d946ef;--color-horror-light: rgba(217, 70, 239, .15);--color-border-dark: #4a3020;--color-border-light: #8a7060;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .6);--glow-success: 0 0 12px rgba(92, 219, 111, .6);--glow-success-intense: 0 0 24px rgba(92, 219, 111, .8);--glow-warning: 0 0 12px rgba(255, 184, 77, .6);--glow-warning-intense: 0 0 20px rgba(255, 184, 77, .7);--glow-danger: 0 0 12px rgba(255, 107, 107, .6);--glow-horror: 0 0 12px rgba(217, 70, 239, .6);--glow-accent: 0 0 12px rgba(212, 165, 116, .5);--glow-subtle: 0 0 8px rgba(212, 165, 116, .3);--gradient-bg-vertical: linear-gradient( 180deg, #1a0f0a 0%, #0a0603 50%, #000000 100% );--gradient-bg-diagonal: linear-gradient( 135deg, #2d1810 0%, #1a0f0a 100% );--gradient-accent: linear-gradient( 135deg, #e8c9a0 0%, #d4a574 50%, #a08060 100% );--gradient-vignette: radial-gradient( circle at center, transparent 20%, rgba(0, 0, 0, .3) 100% );--mood-vignette-opacity: 0;--mood-screen-hue: 0deg;--mood-accent-opacity: 1;--mood-border-glow: none;--mood-text-intensity: 1}:root{--monster-vampire-primary: #8b1a1a;--monster-vampire-glow: #ff4444;--monster-werewolf-primary: #c0c0c0;--monster-werewolf-glow: #ffffff;--monster-zombie-primary: #4a7c59;--monster-zombie-glow: #66bb6a;--monster-ghost-primary: #a8d8ff;--monster-ghost-glow: #b3e5ff;--monster-skeleton-primary: #f5f5dc;--monster-skeleton-glow: #fffacd;--monster-witch-primary: #6b2d5c;--monster-witch-glow: #ba68c8;--monster-frankenstein-primary: #7fff00;--monster-frankenstein-glow: #00ff41;--monster-mummy-primary: #d2b48c;--monster-mummy-glow: #deb887;--monster-demon-primary: #ff4500;--monster-demon-glow: #ff6b35;--monster-golem-primary: #808080;--monster-golem-glow: #a9a9a9;--monster-banshee-primary: #191970;--monster-banshee-glow: #6a5acd;--monster-dracula-primary: #4a0080;--monster-dracula-glow: #8b008b}.game-state-calm{--mood-vignette-opacity: 0 !important;--mood-screen-hue: 0deg !important;--mood-accent-opacity: 1 !important;--mood-border-glow: none !important;--mood-text-intensity: 1 !important}.game-state-annoyed{--mood-vignette-opacity: .15 !important;--mood-screen-hue: 2deg !important;--mood-accent-opacity: .95 !important;--mood-border-glow: 0 0 8px rgba(255, 107, 107, .3) !important;--mood-text-intensity: .98 !important}.game-state-angry{--mood-vignette-opacity: .35 !important;--mood-screen-hue: 8deg !important;--mood-accent-opacity: .9 !important;--mood-border-glow: 0 0 16px rgba(255, 107, 107, .5) !important;--mood-text-intensity: .96 !important}.game-state-horror{--mood-vignette-opacity: .7 !important;--mood-screen-hue: 15deg !important;--mood-accent-opacity: .85 !important;--mood-border-glow: 0 0 24px rgba(217, 70, 239, .8) !important;--mood-text-intensity: .92 !important}@media(max-width:768px){:root{--color-text-primary: #f0e8d8;--color-text-secondary: #d0c0b0;--color-accent-primary: #e8b876;--color-danger: #ff5555;--color-success: #4cdd5f;--color-warning: #ffc857;--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);--glow-success: 0 0 16px rgba(92, 219, 111, .7);--glow-danger: 0 0 16px rgba(255, 107, 107, .7);--glow-warning: 0 0 16px rgba(255, 184, 77, .7)}}@media(prefers-reduced-motion:reduce){:root{--duration-instant: .01s !important;--duration-fast: .01s !important;--duration-normal: .01s !important;--duration-slow: .01s !important;--duration-slower: .01s !important;--glow-success: 0 0 8px rgba(92, 219, 111, .5);--glow-danger: 0 0 8px rgba(255, 107, 107, .5)}}@media(prefers-contrast:high){:root{--color-text-primary: #ffffff !important;--color-accent-primary: #ffcc99 !important;--color-success: #66ff66 !important;--color-danger: #ff3333 !important;--color-border-dark: #8a7050 !important;--color-border-light: #c0a080 !important}}@media(prefers-color-scheme:light){:root{--color-bg-primary: #f5f1e8 !important;--color-bg-secondary: #e8dcc8 !important;--color-bg-tertiary: #8b6f47 !important;--color-text-primary: #3e2723 !important;--color-text-secondary: #5d4037 !important;--color-text-muted: #bcaaa4 !important;--color-accent-primary: #c9a961 !important;--color-accent-light: #d4a574 !important;--color-accent-dark: #3e2723 !important}}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-white{color:var(--color-text-white)}.bg-primary{background-color:var(--color-bg-primary)}.bg-secondary{background-color:var(--color-bg-secondary)}.bg-tertiary{background-color:var(--color-bg-tertiary)}.bg-accent{background-color:var(--color-accent-primary);color:var(--color-bg-primary)}.text-accent{color:var(--color-accent-primary)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-danger{color:var(--color-danger)}.bg-success{background-color:var(--color-success);color:var(--color-bg-primary)}.bg-warning{background-color:var(--color-warning);color:var(--color-bg-primary)}.bg-danger{background-color:var(--color-danger);color:var(--color-text-white)}.border-dark{border-color:var(--color-border-dark)}.border-light{border-color:var(--color-border-light)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.glow-success{box-shadow:var(--glow-success)}.glow-warning{box-shadow:var(--glow-warning)}.glow-danger{box-shadow:var(--glow-danger)}.glow-accent{box-shadow:var(--glow-accent)}@media(max-width:480px)and (orientation:portrait){:root{--mobile-status-height: 44px;--mobile-controls-height: 56px;--mobile-portrait-size: 180px;--mobile-portrait-corner-size: 60px;--mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);--mobile-spacing-xs: 4px;--mobile-spacing-sm: 8px;--mobile-spacing-md: 12px;--mobile-spacing-lg: 16px;--z-base: 1;--z-portrait: 10;--z-dialogue: 20;--z-order-badge: 15;--z-controls: 30;--z-status: 40;--z-overlay: 100}}@media(max-width:480px)and (orientation:portrait){.violatte-layout{display:flex!important;flex-direction:column!important;height:100vh!important;height:100dvh!important;width:100vw!important;grid-template-columns:none!important;grid-template-rows:none!important;grid-template-areas:none!important;grid-auto-rows:unset!important;grid-auto-columns:unset!important;gap:0!important;overflow:hidden!important;position:relative!important;padding:0!important;margin:0!important;box-sizing:border-box!important}}@media(max-width:480px){.violatte-layout.mobile-portrait-layout{display:flex!important;flex-direction:column!important;height:100vh!important;height:100dvh!important;width:100vw!important;grid-template-columns:none!important;grid-template-rows:none!important;grid-template-areas:none!important;gap:0!important;overflow:hidden!important;position:relative!important;padding:0!important}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-status{grid-row:unset!important;grid-column:unset!important;grid-area:unset!important;position:fixed!important;top:0!important;left:0!important;right:0!important;height:var(--mobile-status-height, 44px)!important;min-height:44px!important;z-index:40!important;background:linear-gradient(180deg,#000000e6,#000000b3)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 12px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;box-shadow:0 2px 8px #0000004d}}@media(max-width:480px){.mobile-portrait-layout .violatte-zone-status{grid-row:unset!important;grid-column:unset!important;position:fixed!important;top:0!important;left:0!important;right:0!important;height:44px!important;z-index:40!important;background:linear-gradient(180deg,#000000e6,#000000b3)!important;display:flex!important}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-game{grid-row:unset!important;grid-column:unset!important;grid-area:unset!important;flex:1 1 auto!important;margin-top:44px!important;margin-bottom:56px!important;padding:8px!important;position:relative!important;overflow:hidden!important;width:100%!important;height:auto!important;z-index:5!important}.violatte-zone-game-content{width:100%!important;height:100%!important;position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}}@media(max-width:480px){.mobile-portrait-layout .violatte-zone-game{grid-row:unset!important;grid-column:unset!important;flex:1 1 auto!important;margin-top:44px!important;margin-bottom:56px!important;width:100%!important;height:auto!important;position:relative!important;overflow:hidden!important;z-index:5!important}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-controls{grid-row:unset!important;grid-column:unset!important;grid-area:unset!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:56px!important;min-height:56px!important;z-index:30!important;background:linear-gradient(0deg,#000000e6,#000000b3)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 16px!important;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;box-shadow:0 -2px 8px #0000004d}.violatte-zone-controls button{flex:1;max-width:200px;height:44px!important;min-height:44px!important;font-size:1rem;border-radius:8px;font-weight:600}}@media(max-width:480px){.mobile-portrait-layout .violatte-zone-controls{grid-row:unset!important;grid-column:unset!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:56px!important;z-index:30!important;background:linear-gradient(0deg,#000000e6,#000000b3)!important;display:flex!important}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-monster{grid-row:unset!important;grid-column:unset!important;grid-area:unset!important;position:absolute!important;z-index:10!important;height:auto!important;width:auto!important;padding:0!important;margin:0!important;background:transparent!important;border:none!important}.violatte-zone-order{grid-row:unset!important;grid-column:unset!important;grid-area:unset!important;position:absolute!important;top:50px!important;right:8px!important;width:auto!important;max-width:200px!important;height:auto!important;z-index:15!important;background:#000c!important;border-radius:8px!important;padding:8px!important}.violatte-zone-feedback{grid-row:unset!important;grid-column:unset!important;grid-area:unset!important;z-index:20!important;height:auto!important;max-height:none!important;background:transparent!important;border-radius:8px!important;padding:0!important}}@media(max-width:480px){.mobile-portrait-layout .violatte-zone-monster{grid-row:unset!important;grid-column:unset!important;position:absolute!important;background:transparent!important}.mobile-portrait-layout .violatte-zone-order{grid-row:unset!important;grid-column:unset!important;position:absolute!important}.mobile-portrait-layout .violatte-zone-feedback{grid-row:unset!important;grid-column:unset!important;position:fixed!important;z-index:20!important}.mobile-portrait-layout[data-phase=dialogue] .violatte-zone-feedback{bottom:120px!important;left:50%!important;right:auto!important;transform:translate(-50%)!important;width:calc(100vw - 32px)!important;max-width:340px!important}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-monster{transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.violatte-layout[data-phase=dialogue] .violatte-zone-monster,.violatte-layout[data-phase=intro] .violatte-zone-monster,.violatte-layout[data-phase=serving] .violatte-zone-monster,.violatte-layout[data-phase=reaction] .violatte-zone-monster{top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:auto}.violatte-layout[data-phase=dialogue] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=intro] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=serving] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=reaction] .violatte-zone-monster .monster-portrait-container{width:var(--mobile-portrait-size)!important;height:calc(var(--mobile-portrait-size) * 1.333)!important;min-height:calc(var(--mobile-portrait-size) * 1.333)!important;flex:none!important;contain:none!important}.violatte-layout[data-phase=dialogue] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=intro] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=serving] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=reaction] .violatte-zone-monster .portrait-frame{width:var(--mobile-portrait-size)!important;height:calc(var(--mobile-portrait-size) * 1.333)!important;max-width:none!important;max-height:none!important}.violatte-layout[data-phase=orderMemory] .violatte-zone-monster,.violatte-layout[data-phase=grinding] .violatte-zone-monster,.violatte-layout[data-phase=tamping] .violatte-zone-monster,.violatte-layout[data-phase=extraction] .violatte-zone-monster,.violatte-layout[data-phase=milkSteaming] .violatte-zone-monster,.violatte-layout[data-phase=syrupPumps] .violatte-zone-monster,.violatte-layout[data-phase=pouring] .violatte-zone-monster{top:calc(var(--mobile-status-height) + var(--mobile-spacing-sm));left:var(--mobile-spacing-sm);transform:none;width:var(--mobile-portrait-corner-size);height:var(--mobile-portrait-corner-size)}.violatte-layout[data-phase=orderMemory] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=grinding] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=tamping] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=extraction] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=milkSteaming] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=syrupPumps] .violatte-zone-monster .monster-portrait-container,.violatte-layout[data-phase=pouring] .violatte-zone-monster .monster-portrait-container{width:var(--mobile-portrait-corner-size)!important;height:var(--mobile-portrait-corner-size)!important;min-height:auto!important;flex:none!important}.violatte-layout[data-phase=orderMemory] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=grinding] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=tamping] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=extraction] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=milkSteaming] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=syrupPumps] .violatte-zone-monster .portrait-frame,.violatte-layout[data-phase=pouring] .violatte-zone-monster .portrait-frame{width:var(--mobile-portrait-corner-size)!important;height:var(--mobile-portrait-corner-size)!important;max-width:none!important;max-height:none!important;aspect-ratio:1/1!important;border-radius:8px!important;border:2px solid rgba(212,165,116,.4)!important;box-shadow:0 2px 8px #0006!important}.violatte-layout[data-phase=orderMemory] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=grinding] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=tamping] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=extraction] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=milkSteaming] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=syrupPumps] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=pouring] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=orderMemory] .violatte-zone-monster .mobile-monster-info,.violatte-layout[data-phase=grinding] .violatte-zone-monster .mobile-monster-info,.violatte-layout[data-phase=tamping] .violatte-zone-monster .mobile-monster-info,.violatte-layout[data-phase=extraction] .violatte-zone-monster .mobile-monster-info,.violatte-layout[data-phase=milkSteaming] .violatte-zone-monster .mobile-monster-info,.violatte-layout[data-phase=syrupPumps] .violatte-zone-monster .mobile-monster-info,.violatte-layout[data-phase=pouring] .violatte-zone-monster .mobile-monster-info{display:none!important}.violatte-layout[data-phase=dialogue] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=intro] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=serving] .violatte-zone-monster .monster-nameplate,.violatte-layout[data-phase=reaction] .violatte-zone-monster .monster-nameplate{display:block!important;margin-top:var(--mobile-spacing-sm);text-align:center}.monster-nameplate{background:#000000b3;padding:var(--mobile-spacing-xs) var(--mobile-spacing-sm);border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.violatte-monster-name{font-size:.9rem;margin:0;line-height:1.2}.violatte-monster-mood{font-size:.7rem;opacity:.8}.violatte-zone-monster.zone-hidden{opacity:0;pointer-events:none}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-feedback{position:fixed!important;z-index:20!important;pointer-events:none!important}.violatte-layout[data-phase=dialogue] .violatte-zone-feedback{position:fixed!important;inset:auto auto 120px 50%!important;transform:translate(-50%)!important;width:calc(100vw - 32px)!important;max-width:340px!important;pointer-events:auto!important;display:flex!important;justify-content:center!important;align-items:center!important}.dialogue-box{background:#1a0f0af2;border:2px solid rgba(212,165,116,.6);border-radius:12px;padding:var(--mobile-spacing-md);box-shadow:0 4px 16px #00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.dialogue-text{font-size:.85rem;line-height:1.4;color:var(--v-text, #E8DCC8);margin:0}.dialogue-continue{margin-top:var(--mobile-spacing-sm);font-size:.7rem;opacity:.6;text-align:right}.violatte-layout[data-phase=orderMemory] .violatte-zone-feedback,.violatte-layout[data-phase=grinding] .violatte-zone-feedback,.violatte-layout[data-phase=tamping] .violatte-zone-feedback,.violatte-layout[data-phase=extraction] .violatte-zone-feedback,.violatte-layout[data-phase=milkSteaming] .violatte-zone-feedback,.violatte-layout[data-phase=syrupPumps] .violatte-zone-feedback,.violatte-layout[data-phase=pouring] .violatte-zone-feedback{position:fixed!important;inset:52px 8px auto auto!important;transform:none!important;width:auto!important;max-width:150px!important;pointer-events:none!important}.violatte-layout[data-phase=serving] .violatte-zone-feedback,.violatte-layout[data-phase=reaction] .violatte-zone-feedback{position:fixed!important;inset:auto auto 120px 50%!important;transform:translate(-50%)!important;width:calc(100vw - 32px)!important;max-width:340px!important;pointer-events:auto!important}.mood-indicator{display:flex;align-items:center;gap:var(--mobile-spacing-xs);background:#000000b3;padding:4px 8px;border-radius:20px;font-size:.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(212,165,116,.3)}.mood-icon{font-size:1rem}.mood-label{font-weight:600;text-transform:uppercase;letter-spacing:.5px}.violatte-zone-feedback:empty,.violatte-zone-feedback.zone-hidden{display:none}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-order{position:fixed;top:calc(var(--mobile-status-height) + var(--mobile-portrait-corner-size) + var(--mobile-spacing-md));left:var(--mobile-spacing-sm);z-index:var(--z-order-badge);width:calc(100% - var(--mobile-spacing-md) * 2);max-width:300px;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.order-display{background:#000000d9;border:1px solid rgba(212,165,116,.5);border-radius:8px;padding:var(--mobile-spacing-sm);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 8px #0006}.order-display.compact{padding:4px 8px}.order-title{font-size:.7rem;font-weight:600;margin-bottom:2px;opacity:.8}.order-details{display:flex;flex-wrap:wrap;gap:4px;font-size:.65rem}.order-detail-item{background:#4a302099;padding:2px 6px;border-radius:4px;white-space:nowrap}.violatte-layout[data-phase=dialogue] .violatte-zone-order,.violatte-layout[data-phase=intro] .violatte-zone-order,.violatte-zone-order.zone-hidden{opacity:0;transform:translateY(-8px);pointer-events:none}}@media(max-width:480px)and (orientation:portrait){.violatte-layout[data-phase=dialogue] .phase-content>*:not(.coffee-counter){display:none}.violatte-layout[data-phase=intro] .violatte-zone-order,.violatte-layout[data-phase=intro] .violatte-zone-feedback{display:none}.violatte-layout[data-phase=serving] .violatte-zone-order{opacity:0}.violatte-layout[data-phase=reaction] .violatte-zone-order{display:none}}@media(max-width:374px)and (orientation:portrait){:root{--mobile-portrait-size: 80px;--mobile-portrait-corner-size: 48px;--mobile-spacing-md: 8px}.status-bar-left,.status-bar-tips{font-size:.7rem}.dialogue-text{font-size:.8rem}}@media(min-width:426px)and (max-width:480px)and (orientation:portrait){:root{--mobile-portrait-size: 120px;--mobile-portrait-corner-size: 70px}.dialogue-text{font-size:.9rem}.order-display{max-width:350px}}@media(max-width:480px)and (orientation:portrait){.dialogue-click-overlay{position:fixed;inset:0;z-index:calc(var(--z-dialogue) - 1);cursor:pointer}@media(prefers-contrast:high){.status-bar-content,.dialogue-box,.order-display,.mood-indicator{border-width:2px;border-color:currentColor}}@media(prefers-reduced-motion:reduce){.violatte-zone-monster,.violatte-zone-order,.violatte-zone-feedback{transition:none}}.status-pause-btn,.status-admin-btn,.violatte-zone-controls button{min-height:44px;min-width:44px}}@media(max-width:480px)and (orientation:portrait){.violatte-zone-monster,.violatte-zone-order,.violatte-zone-feedback{will-change:transform,opacity}.violatte-zone-status,.violatte-zone-game,.violatte-zone-controls{contain:layout style paint}}*{box-sizing:border-box;margin:0;padding:0}:root{--v-font-base: 1rem;--v-font-header: 1.3rem;--v-font-subheader: 1.1rem;--v-font-small: .9rem;--v-font-tiny: .8rem;--v-line-height-base: 1.6;--v-line-height-tight: 1.5;--v-line-height-header: 1.2;--v-spacing-xs: .25rem;--v-spacing-sm: .5rem;--v-spacing-md: 1rem;--v-spacing-lg: 1.5rem;--v-spacing-xl: 2rem}@media(max-width:1200px)and (min-width:769px){:root{--v-font-base: .95rem;--v-font-header: 1.2rem;--v-font-subheader: 1.05rem;--v-font-small: .85rem;--v-font-tiny: .75rem}}@media(max-width:768px)and (min-width:481px){:root{--v-font-base: .9rem;--v-font-header: 1.1rem;--v-font-subheader: 1rem;--v-font-small: .8rem;--v-font-tiny: .7rem}}@media(max-width:480px){:root{--v-font-base: .85rem;--v-font-header: 1rem;--v-font-subheader: .95rem;--v-font-small: .75rem;--v-font-tiny: .65rem}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--v-font-base);line-height:var(--v-line-height-base)}#root{width:100%;min-height:100vh}