*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;background:#87ceeb;-webkit-user-select:none;user-select:none}#root{width:100vw;height:100dvh;position:relative}.overlay{position:absolute;inset:0;pointer-events:none;z-index:10}.overlay>*{pointer-events:auto}.home-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.home-title{font-size:48px;font-weight:700;color:#5a9a5a;text-shadow:0 3px 8px rgba(255,255,255,.8)}.home-subtitle{font-size:18px;color:#2d3436;text-shadow:0 1px 4px rgba(255,255,255,.7)}.home-story{max-width:340px;font-size:14px;line-height:1.7;color:#4a4a4a;background:#ffffffd1;padding:12px 20px;border-radius:14px;text-align:center}.home-instructions{background:#ffffffe0;border-radius:16px;padding:16px 24px;max-width:340px;text-align:left}.home-instructions h3{margin-bottom:8px;color:#2d3436;font-size:16px}.home-instructions p{color:#636e72;font-size:14px;line-height:1.8}.btn{border:none;border-radius:28px;font-size:18px;font-weight:700;cursor:pointer;padding:14px 36px;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 12px #00000026}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0003}.btn:active{transform:translateY(0)}.btn-primary{background:#7cb97c;color:#fff}.btn-disabled{background:#b2bec3;color:#fff;cursor:default;box-shadow:none}.btn-disabled:hover{transform:none;box-shadow:none}.btn-outline{background:#fffc;color:#636e72;border:1px solid #ddd}.game-hud{display:flex;flex-direction:column;justify-content:space-between;padding:12px;height:100%;pointer-events:none}.hud-header,.hud-bottom,.magnifying-container,.immersive-banner,.gate-hint-toast,.comfort-game-bubble,.drag-hint,.notebook-btn{pointer-events:auto}.hud-header{display:flex;justify-content:center;align-items:center;gap:12px}.hud-badge{background:#ffffffe0;padding:6px 18px;border-radius:20px;font-weight:700;color:#5a9a5a;font-size:16px}.hud-sub{color:#636e72;font-size:13px;text-shadow:0 1px 3px rgba(255,255,255,.7)}.hud-bottom{display:flex;flex-direction:column;gap:8px;max-width:480px;margin:0 auto;width:100%;max-height:45dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}.tool-panel{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.tool-btn{width:72px;background:#ffffffe6;border:2px solid #E0E8E0;border-radius:14px;padding:8px 4px;text-align:center;cursor:pointer;transition:all .2s}.tool-btn:hover{border-color:#7cb97c;transform:translateY(-2px)}.tool-btn.used{background:#e8f5e9;border-color:#7cb97c;cursor:pointer}.tool-btn.used:hover{transform:translateY(-2px)}.tool-icon{font-size:24px;display:block}.tool-name{font-size:11px;font-weight:600;color:#2d3436;margin-top:2px}.tool-check{color:#00b894;font-size:14px;font-weight:700}@media(max-width:480px){.hud-bottom{max-height:40dvh;gap:6px}.tool-panel{gap:5px}.tool-btn{width:62px;padding:6px 3px;border-radius:10px}.tool-icon{font-size:20px}.tool-name{font-size:10px}.comfort-tool-btn{padding:6px 8px;min-width:54px}.comfort-tool-icon{font-size:18px}.comfort-tool-name{font-size:9px}.comfort-phase-strip{padding:6px 12px;font-size:12px}.comfort-phase-emoji{font-size:18px}}.checklist{display:flex;gap:8px;justify-content:center}.checklist-item{flex:1;max-width:120px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:12px;border:1px solid #E0E8E0;cursor:pointer;font-weight:600;font-size:15px;transition:all .2s}.checklist-item.possible{background:#e0ffe0;color:#2d3436}.checklist-item.eliminated{background:#ffe0e0;color:#999;text-decoration:line-through}.modal-backdrop{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:20}.modal{background:#fff;border-radius:18px;padding:28px;max-width:360px;width:90%;text-align:center}.modal h2{margin-bottom:18px;color:#2d3436;font-size:20px}.modal-options{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.modal-option{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;border:2px solid #E0E8E0;cursor:pointer;font-size:18px;font-weight:600;transition:all .2s}.modal-option.selected{border-color:currentColor;color:#fff}.modal-option .emoji{font-size:28px}.modal-buttons{display:flex;gap:10px}.modal-buttons .btn{flex:1;padding:12px;font-size:16px}.result-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0000004d}.result-emoji{font-size:64px}.result-title{font-size:36px;font-weight:700;text-shadow:0 2px 6px rgba(255,255,255,.6)}.result-card{background:#ffffffeb;border-radius:18px;padding:24px;max-width:320px;text-align:center;border:3px solid}.result-card .emoji{font-size:40px}.result-card .name{font-size:20px;font-weight:700;margin:8px 0}.result-card .desc{font-size:15px;color:#636e72;line-height:1.6}.result-card .label{font-size:13px;color:#999;margin-bottom:8px}.result-answer{font-size:16px;color:#636e72}.result-encourage{font-size:15px;color:#636e72;font-style:italic;text-shadow:0 1px 3px rgba(255,255,255,.7)}.result-buttons{display:flex;gap:12px}.drag-hint{text-align:center;font-size:13px;color:#636e72;margin-top:8px;text-shadow:0 1px 3px rgba(255,255,255,.7);opacity:.8}.gate-arrow{position:fixed;top:50%;transform:translateY(-50%);background:#ffffffe0;color:#8b6914;font-size:20px;font-weight:700;padding:14px 10px;border-radius:12px;box-shadow:0 2px 12px #0003;animation:gatePulse 1.2s ease-in-out infinite;z-index:15;pointer-events:none}.gate-arrow.right{right:10px}.gate-arrow.left{left:10px}@keyframes gatePulse{0%,to{opacity:.85;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.1)}}.bottom-actions{display:flex;gap:8px}.notebook-btn{padding:12px 16px!important;font-size:15px!important;white-space:nowrap}.scan-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:15}.scan-label{background:#0000008c;color:#fff;padding:10px 28px;border-radius:24px;font-size:18px;font-weight:700;animation:pulse 1.2s ease-in-out infinite}.scan-expression{background:radial-gradient(circle at center,transparent 30%,rgba(0,0,0,.4) 100%)}.scan-sound{background:radial-gradient(circle at center,transparent 40%,rgba(100,150,255,.15) 70%,transparent 100%)}.scan-behavior{border:3px solid rgba(255,255,255,.3);border-radius:8px;margin:20px}.scan-rec{position:absolute;top:24px;right:24px;display:flex;align-items:center;gap:8px;color:#fff;font-family:monospace;font-size:14px}.rec-dot{width:10px;height:10px;border-radius:50%;background:#f44;animation:blink 1s step-end infinite}.rec-time{opacity:.8}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.immersive-banner{background:#ffffffeb;border-radius:20px 20px 16px 16px;padding:16px 20px;max-width:420px;margin:0 auto;width:95%;box-shadow:0 -4px 20px #00000026;animation:slideUp .4s ease-out}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.immersive-banner-content{display:flex;align-items:center;gap:14px;margin-bottom:10px}.immersive-banner-icon{font-size:36px;flex-shrink:0}.immersive-banner-text{flex:1}.immersive-banner-label{font-size:13px;color:#636e72;margin-bottom:2px}.immersive-banner-trait{font-size:18px;font-weight:700;color:#2d3436}.immersive-banner-hint{font-size:13px;color:#636e72;font-style:italic;margin-bottom:12px;text-align:center}.immersive-banner-btn{width:100%;padding:12px!important;font-size:16px!important}.intensity-gauge{display:flex;align-items:center;gap:6px;margin-top:4px}.intensity-bar{width:40px;height:14px;border-radius:4px;background:#e0e0e0;transition:background .3s}.intensity-bar.active{box-shadow:0 0 6px #ff980066}.intensity-level{font-size:14px;font-weight:700;color:#ff9800;margin-left:4px}.scan-intensity{background:radial-gradient(circle at center,transparent 35%,rgba(255,200,0,.12) 60%,transparent 100%)}.notebook-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:20}.notebook{display:flex;background:#8b7355;border-radius:12px;max-width:720px;width:96%;height:78dvh;min-height:420px;border:2px solid #6B5B45;box-shadow:4px 6px 20px #00000059,inset 0 0 0 1px #ffffff14;overflow:hidden;position:relative}.nb-page{flex:1;min-width:0;background:linear-gradient(135deg,#fff8e7,#fdf5e0);padding:16px 18px 14px;display:flex;flex-direction:column;overflow-y:auto}.nb-page-left{border-radius:10px 0 0 10px}.nb-page-right{border-radius:0 10px 10px 0}.nb-spine{width:28px;flex-shrink:0;background:#7a6a50;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:12px 0;border-left:1.5px solid #6B5B45;border-right:1.5px solid #6B5B45}.nb-ring{width:18px;height:18px;border:2.5px solid #B0B0B0;border-radius:50%;background:transparent;box-shadow:0 1px 2px #0000004d}.notebook-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:17px;font-weight:700;color:#5d4e37}.notebook-close{background:none;border:none;font-size:18px;cursor:pointer;color:#999;padding:2px 6px}.nb-page-title{font-size:16px;font-weight:700;color:#5d4e37;margin-bottom:10px;display:flex;align-items:center;gap:8px}.nb-tab-badge{background:#ff9800;color:#fff;font-size:10px;font-weight:700;border-radius:8px;padding:1px 6px;min-width:16px;text-align:center}@media(max-width:520px){.notebook{flex-direction:column;height:85dvh;max-width:400px}.nb-page-left{border-radius:10px 10px 0 0}.nb-page-right{border-radius:0 0 10px 10px}.nb-spine{flex-direction:row;width:100%;height:24px;padding:0 12px;border-left:none;border-right:none;border-top:1.5px solid #6B5B45;border-bottom:1.5px solid #6B5B45}.nb-ring{width:14px;height:14px}}.notebook-instruction{font-size:12px;color:#5d4e37;margin-bottom:10px;font-style:italic}.notebook-tools-used{flex:1;min-height:0}.notebook-empty{font-size:13px;color:#999;font-style:italic}.notebook-clue{display:flex;flex-direction:column;gap:4px;width:100%;padding:10px 12px;background:#fff9;border:1px solid #E0D8C8;border-radius:8px;margin-bottom:6px;font-size:13px;font-weight:600;color:#2d3436;transition:all .2s}.notebook-clue:hover{background:#ffffffd9}.notebook-clue-trait{font-size:12px;color:#5a9a5a;font-weight:500;line-height:1.4}.nb-page-indicator{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:8px;font-size:12px;color:#8b7355;border-top:1px dashed #D4C5A0;margin-top:auto}.nb-page-arrow{background:none;border:1px solid #D4C5A0;border-radius:6px;padding:4px 10px;font-size:14px;cursor:pointer;color:#5d4e37;transition:all .15s}.nb-page-arrow:hover{background:#fff6}.comfort-overlay{display:flex;flex-direction:column;align-items:center;padding:16px}.comfort-header{text-align:center;margin-top:8px}.comfort-hearts{font-size:28px;display:flex;gap:8px;justify-content:center;margin-bottom:6px}.comfort-heart{transition:transform .3s}.comfort-heart.filled{animation:heartPop .4s ease-out}@keyframes heartPop{0%{transform:scale(.5)}50%{transform:scale(1.3)}to{transform:scale(1)}}.comfort-status{font-size:15px;font-weight:600;color:#636e72;text-shadow:0 1px 3px rgba(255,255,255,.7)}.comfort-response{margin-top:20px;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.comfort-bubble{background:#ffffffe6;border-radius:16px;padding:14px 22px;font-size:16px;color:#2d3436;max-width:320px;text-align:center;box-shadow:0 2px 10px #0000001a;position:relative}.comfort-bubble:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(255,255,255,.9)}.comfort-actions{width:100%;max-width:420px}.comfort-prompt{text-align:center;font-size:16px;font-weight:600;color:#2d3436;margin-bottom:12px;text-shadow:0 1px 3px rgba(255,255,255,.7)}.comfort-btns{display:flex;gap:10px;justify-content:center}.comfort-action-btn{flex:1;max-width:130px;background:#ffffffe6;border:2px solid #E8D8E8;border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .2s}.comfort-action-btn:hover{border-color:#e891a8;transform:translateY(-3px);box-shadow:0 4px 12px #0000001a}.comfort-action-btn:active{transform:translateY(0)}.comfort-action-icon{display:block;font-size:32px;margin-bottom:6px}.comfort-action-label{display:block;font-size:13px;font-weight:600;color:#2d3436}.magnifying-container{position:absolute;inset:0;z-index:16;touch-action:none;cursor:grab}.magnifying-container:active{cursor:grabbing}.magnifying-vignette{position:absolute;inset:0;background:#00000080;pointer-events:none}.magnifying-rim{position:absolute;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;border:4px solid rgba(255,255,255,.3);box-shadow:0 0 0 2px #ffffff26,inset 0 0 40px #c8e6ff1a;pointer-events:none}.magnifying-glint{position:absolute;top:12%;left:18%;width:40px;height:18px;background:#fff3;border-radius:50%;transform:rotate(-35deg)}.magnifying-handle{position:absolute;width:8px;height:50px;background:linear-gradient(to bottom,#ffffff4d,#ffffff1a);border-radius:4px;transform:translate(-50%,-50%) rotate(45deg);pointer-events:none}.magnifying-close-btn{position:absolute;top:20px;right:20px;background:#ffffffeb;border:none;border-radius:24px;padding:10px 22px;font-size:15px;font-weight:600;color:#5a9a5a;cursor:pointer;z-index:18;box-shadow:0 2px 10px #00000026;transition:all .2s}.magnifying-close-btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px #0003}.magnifying-result{position:absolute;bottom:120px;left:50%;transform:translate(-50%);background:#ffffffeb;padding:12px 24px;border-radius:14px;font-size:15px;font-weight:600;pointer-events:none;z-index:18;box-shadow:0 2px 10px #0000001f;animation:fadeInUp .4s ease-out;white-space:nowrap}.magnifying-result-text{color:#5a9a5a}.magnifying-result-hint{opacity:.7;font-style:italic}.magnifying-zone-labels{position:absolute;top:80px;left:50%;transform:translate(-50%);display:flex;gap:12px;pointer-events:none;z-index:18}.zone-label{background:#0006;color:#fff9;padding:4px 14px;border-radius:12px;font-size:13px;font-weight:500;transition:all .25s ease}.zone-label-active{background:#ffffffeb;color:#5a9a5a;font-weight:600;box-shadow:0 2px 8px #0000001f;transform:scale(1.08)}.magnifying-hint{position:absolute;bottom:70px;left:50%;transform:translate(-50%);background:#00000080;color:#fff;padding:8px 20px;border-radius:20px;font-size:14px;pointer-events:none;white-space:nowrap;animation:fadeInUp .5s ease-out}.scan-label-float{position:absolute;bottom:60px;left:50%;transform:translate(-50%);background:#0000008c;color:#fff;padding:10px 28px;border-radius:24px;font-size:18px;font-weight:700;animation:pulse 1.2s ease-in-out infinite;z-index:17;pointer-events:none}.nb-emotions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.nb-row{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:10px;background:#fff;border:1.5px solid #E0E0E0;transition:all .2s}.nb-row.nb-eliminated{background:#fff0f0;border-color:#ffb8b8;opacity:.7}.nb-row.nb-selected{background:#f0fff0;border-color:#7cb97c;box-shadow:0 0 0 2px #7cb97c4d}.nb-emotion-btn{display:flex;align-items:center;gap:6px;flex:1;background:none;border:none;cursor:pointer;padding:2px 0;font-size:14px;min-width:0}.nb-emoji{font-size:20px;flex-shrink:0}.nb-name{font-weight:600;color:#2d3436;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nb-eliminated .nb-name{text-decoration:line-through;color:#999}.nb-status{font-size:16px;font-weight:700;min-width:24px;text-align:center;flex-shrink:0}.nb-status-neutral{color:#ccc}.nb-status-eliminated{color:#ff6b6b}.nb-status-selected{color:#00b894}.nb-intensity-section{display:flex;align-items:center;gap:10px;margin-top:0;padding:10px 12px;background:#fff8e7;border-radius:10px;border:1px dashed #D4C5A0}.nb-intensity-label{font-size:14px;font-weight:600;color:#5d4e37;white-space:nowrap}.nb-intensity-bars{display:flex;gap:6px}.nb-int-bar-lg{width:32px;height:22px;border-radius:5px;background:#e8e8e8;border:none;cursor:pointer;transition:background .2s,transform .15s;padding:0}.nb-int-bar-lg:hover{transform:scaleY(1.15)}.nb-int-bar-lg:nth-child(1).active{background:#ffd93d}.nb-int-bar-lg:nth-child(2).active{background:#ff9800}.nb-int-bar-lg:nth-child(3).active{background:#f44}.nb-intensity-desc{font-size:13px;color:#636e72;font-weight:500}.btn-farm-gate{background:linear-gradient(135deg,#7cb97c,#5a9a5a);color:#fff;font-size:17px;padding:14px 24px;border-radius:28px;box-shadow:0 4px 15px #5a9a5a66;animation:gateGlow 2s ease-in-out infinite}@keyframes gateGlow{0%,to{box-shadow:0 4px 15px #5a9a5a66}50%{box-shadow:0 4px 25px #5a9a5a99}}.btn-farm-gate:hover{transform:translateY(-3px);box-shadow:0 6px 20px #5a9a5a80}.gate-hint-toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000bf;color:#fff;padding:14px 28px;border-radius:16px;font-size:16px;font-weight:600;z-index:25;animation:toastIn .3s ease-out;pointer-events:none}@keyframes toastIn{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.comfort-game-panel{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.comfort-game-btn{display:flex;align-items:center;gap:5px;background:#ffebeee6;border:1.5px solid #F8BBD0;border-radius:20px;padding:8px 14px;cursor:pointer;font-size:13px;font-weight:600;color:#5d4e37;transition:all .2s}.comfort-game-btn:hover{border-color:#e891a8;transform:translateY(-2px);box-shadow:0 3px 10px #0000001a}.comfort-game-btn:active{transform:translateY(0)}.comfort-game-done{font-size:14px;color:#5d4e37;text-align:center;padding:8px;font-weight:500}.comfort-phase-strip{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;font-size:14px;font-weight:500}.comfort-phase-strip.correct{background:#00b89426;color:#00b894}.comfort-phase-strip.wrong{background:#ff767526;color:#d63031}.comfort-phase-emoji{font-size:22px}.comfort-phase-msg{flex:1}.comfort-game-bubble{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);background:#ffffffeb;padding:14px 26px;border-radius:16px;font-size:16px;color:#2d3436;text-align:center;box-shadow:0 4px 16px #0000001f;z-index:22;animation:fadeInUp .3s ease-out;pointer-events:none}.hud-hearts{font-size:14px;display:flex;gap:2px}.result-comfort-summary{display:flex;align-items:center;gap:6px;font-size:16px;color:#5d4e37}.comfort-complete-text{font-weight:600;color:#e891a8}.lang-toggle{position:absolute;top:16px;right:16px;background:#ffffffe0;border:1.5px solid #ddd;border-radius:18px;padding:6px 16px;font-size:13px;font-weight:700;cursor:pointer;color:#5a9a5a;z-index:30;transition:all .2s;pointer-events:auto}.lang-toggle:hover{background:#fff;border-color:#7cb97c;transform:translateY(-1px)}.lang-toggle-game{position:relative;top:auto;right:auto;margin-left:auto}.hud-coins{background:#fff8dce6;border:1.5px solid #FFD93D;border-radius:16px;padding:4px 12px;font-size:14px;font-weight:700;color:#8b6914}.home-coins{background:#fff8dce6;border:1.5px solid #FFD93D;border-radius:16px;padding:6px 14px;font-size:15px;font-weight:700;color:#8b6914}.result-coins-earned{font-size:20px;font-weight:700;color:#8b6914;background:#fff8dce6;padding:8px 20px;border-radius:20px;animation:coinPop .5s ease-out}@keyframes coinPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.tool-btn.locked{opacity:.7;background:#c8c8c8b3;border-color:#ccc;position:relative}.tool-btn.locked:hover{border-color:#ffd93d}.tool-cost{display:block;font-size:11px;font-weight:700;margin-top:2px}.tool-cost.affordable{color:#8b6914}.tool-cost.unaffordable{color:#ff6b6b}.tool-owned-badge{color:#7cb97c;font-size:12px;font-weight:700}.tool-buy-toast{position:absolute;top:-36px;left:50%;transform:translate(-50%);background:#ff6b6be6;color:#fff;padding:6px 16px;border-radius:12px;font-size:13px;font-weight:600;white-space:nowrap;animation:toastIn .3s ease-out;z-index:30}.heartbeat-pulse{animation:heartbeatPulse .8s ease-in-out infinite}@keyframes heartbeatPulse{0%,to{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}}.thought-bubble-display{display:flex;align-items:center;gap:8px;margin-top:4px}.thought-image{font-size:28px}.thought-text{font-size:16px;font-weight:600;color:#2d3436}.speech-bubble-display{margin-top:4px}.speech-text{font-size:16px;font-weight:600;color:#2d3436;font-style:italic}.scan-heartbeat{background:radial-gradient(circle at center,transparent 35%,rgba(255,107,157,.12) 60%,transparent 100%)}.scan-thought{background:radial-gradient(circle at center,transparent 35%,rgba(106,90,205,.12) 60%,transparent 100%)}.scan-communicate{background:radial-gradient(circle at center,transparent 35%,rgba(255,152,0,.12) 60%,transparent 100%)}.comfort-tool-panel{margin-top:4px}.comfort-panel-label{font-size:12px;font-weight:600;color:#e891a8;text-align:center;margin-bottom:6px;text-shadow:0 1px 3px rgba(255,255,255,.7)}.comfort-tools-grid{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.comfort-tool-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#ffebeee6;border:1.5px solid #F8BBD0;border-radius:12px;padding:8px 10px;cursor:pointer;font-size:11px;transition:all .2s;min-width:60px}.comfort-tool-btn:hover:not(:disabled){border-color:#e891a8;transform:translateY(-2px)}.comfort-tool-btn:disabled{cursor:default;opacity:.6}.comfort-tool-btn.used{background:#fce4ec;border-color:#e891a8}.comfort-tool-btn.locked{background:#c8c8c899;border-color:#ccc;opacity:.7}.comfort-tool-icon{font-size:22px}.comfort-tool-name{font-size:10px;font-weight:600;color:#5d4e37;text-align:center}.comfort-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:50;pointer-events:auto}.comfort-overlay-card{background:#fffffff2;border-radius:20px;padding:28px 24px;max-width:380px;width:90%;text-align:center;box-shadow:0 8px 32px #0003;animation:fadeInUp .3s ease-out;position:relative}.comfort-overlay-title{font-size:22px;font-weight:700;color:#2d3436;margin-bottom:12px}.comfort-overlay-inst{font-size:15px;color:#636e72;margin-bottom:16px}.comfort-response-text{font-size:17px;font-weight:600;color:#2d3436;line-height:1.6;margin-bottom:16px;padding:12px;background:#fff8e7;border-radius:12px}.comfort-options{display:flex;gap:10px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}.comfort-option-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:2px solid #E0E8E0;border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .2s;min-width:90px}.comfort-option-btn:hover{border-color:#7cb97c;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.comfort-option-icon{font-size:28px}.comfort-cancel{position:absolute;top:12px;right:12px;padding:6px 12px!important;font-size:16px!important;border-radius:50%!important;min-width:auto}.breathing-title{font-size:24px;font-weight:700;color:#5a9a5a;margin-bottom:6px}.breathing-round{font-size:14px;color:#636e72;margin-bottom:16px}.breathing-box{position:relative;margin:0 auto 16px}.breathing-square{width:200px;height:200px;border:3px solid #7CB97C;border-radius:12px;margin:0 auto;position:relative}.breathing-dot{position:absolute;width:20px;height:20px;background:#7cb97c;border-radius:50%;transform:translate(-50%,50%);box-shadow:0 0 12px #7cb97c99;transition:left .1s,bottom .1s}.breathing-corner{position:absolute;font-size:11px;color:#636e72;font-weight:500}.breathing-corner.tl{top:-20px;left:0}.breathing-corner.tr{top:-20px;right:0}.breathing-corner.bl{bottom:-20px;left:0}.breathing-corner.br{bottom:-20px;right:0}.breathing-phase-label{font-size:20px;font-weight:700;color:#5a9a5a;margin-top:16px;animation:pulse 1.5s ease-in-out infinite}.breathing-cancel{position:absolute;top:12px;right:12px;padding:6px 12px!important;font-size:16px!important}.breathing-complete-text{font-size:20px;font-weight:700;color:#5a9a5a;margin-bottom:16px}.solutions-cards{flex-direction:column}.solution-card{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #E0E8E0;border-radius:14px;padding:14px 18px;cursor:pointer;transition:all .2s;width:100%;text-align:left}.solution-card:hover{border-color:#7cb97c;transform:translate(4px)}.solution-card.picked{border-color:#5a9a5a;background:#e8f5e9}.solution-card-icon{font-size:24px;flex-shrink:0}.solution-card-text{font-size:15px;font-weight:600;color:#2d3436}.safespace-waiting{display:flex;flex-direction:column;align-items:center;gap:12px}.safespace-tent-icon{font-size:64px;animation:tentGlow 2s ease-in-out infinite}@keyframes tentGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.safespace-glow{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(168,230,207,.4),transparent);position:absolute;animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.3);opacity:.8}}.safespace-place-btn{margin-bottom:12px}.book-overlay{max-width:400px}.book-page{background:#fff8e7;border:1px solid #D4C5A0;border-radius:12px;padding:20px;margin-bottom:16px;min-height:120px;display:flex;flex-direction:column;justify-content:center}.book-page-number{font-size:12px;color:#999;margin-bottom:8px}.book-page-text{font-size:17px;line-height:1.7;color:#2d3436;font-weight:500}.book-controls{display:flex;gap:10px;justify-content:center;margin-bottom:8px}.book-controls .btn{padding:10px 22px;font-size:15px}.comfort-response-text{animation:bounceIn .4s ease-out}@keyframes bounceIn{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.solution-card{transform-style:preserve-3d;transition:all .4s cubic-bezier(.4,0,.2,1)}.solution-card.picked{animation:cardFlip .5s ease-out}@keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0)}}.comfort-option-btn:active{animation:squeeze .3s ease-out}@keyframes squeeze{0%{transform:scale(1)}30%{transform:scale(.85) rotate(-3deg)}60%{transform:scale(1.1) rotate(2deg)}to{transform:scale(1) rotate(0)}}.safespace-waiting .safespace-tent-icon{animation:tentBuild .8s cubic-bezier(.34,1.56,.64,1) forwards,tentGlow 2s ease-in-out infinite .8s}@keyframes tentBuild{0%{transform:scale(0) rotate(-15deg);opacity:0}50%{transform:scale(1.2) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}.breathing-overlay .breathing-square{transition:border-color 1s ease,box-shadow 1s ease}.breathing-overlay[data-phase=in] .breathing-square{border-color:#74b9ff;box-shadow:0 0 20px #74b9ff4d}.breathing-overlay[data-phase=hold1] .breathing-square,.breathing-overlay[data-phase=hold2] .breathing-square{border-color:#a29bfe;box-shadow:0 0 20px #a29bfe4d}.breathing-overlay[data-phase=out] .breathing-square{border-color:#55efc4;box-shadow:0 0 20px #55efc44d}.breathing-dot{transition:background 1s ease,box-shadow 1s ease}.breathing-overlay[data-phase=in] .breathing-dot{background:#74b9ff;box-shadow:0 0 16px #74b9ffb3}.breathing-overlay[data-phase=hold1] .breathing-dot,.breathing-overlay[data-phase=hold2] .breathing-dot{background:#a29bfe;box-shadow:0 0 16px #a29bfeb3}.breathing-overlay[data-phase=out] .breathing-dot{background:#55efc4;box-shadow:0 0 16px #55efc4b3}.book-page{animation:pageSlide .3s ease-out}@keyframes pageSlide{0%{transform:translate(30px);opacity:0}to{transform:translate(0);opacity:1}}.result-comfort-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;font-size:14px;color:#636e72}.result-comfort-tool-badge{background:#ffebeee6;border:1px solid #F8BBD0;border-radius:12px;padding:4px 10px;font-size:12px;font-weight:600}.monster-select-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}.monster-select-header{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center}.monster-select-coins{background:#fff8dce6;border:1.5px solid #FFD93D;border-radius:16px;padding:6px 14px;font-size:15px;font-weight:700;color:#8b6914}.monster-select-title{font-size:28px;font-weight:700;color:#5a9a5a;text-shadow:0 2px 6px rgba(255,255,255,.8)}.monster-select-subtitle{font-size:16px;color:#636e72;text-shadow:0 1px 3px rgba(255,255,255,.7);margin-bottom:8px}.monster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:400px;width:100%}.monster-card{background:#ffffffeb;border:2px solid #E0E8E0;border-radius:16px;padding:16px 8px;text-align:center;cursor:pointer;transition:all .2s}.monster-card:hover:not(.locked){border-color:#7cb97c;transform:translateY(-3px);box-shadow:0 6px 16px #0000001f}.monster-card.locked{background:#c8c8c899;border-color:#ccc;cursor:default}.monster-card-emoji{font-size:40px;margin-bottom:6px}.monster-card-name{font-size:16px;font-weight:700;color:#2d3436}.monster-card-species{font-size:12px;color:#636e72;margin:2px 0 6px}.monster-card-diff{font-size:11px;font-weight:700;padding:2px 10px;border-radius:10px;display:inline-block}.diff-easy{background:#e8f5e9;color:#4caf50}.diff-medium{background:#fff3e0;color:#ff9800}.diff-hard{background:#ffebee;color:#f44336}.locked .monster-card-diff{background:#eee;color:#999}.home-stats{position:absolute;top:16px;left:16px;display:flex;gap:10px;align-items:center;z-index:30}.home-level{background:#ffffffe0;border:1.5px solid #7CB97C;border-radius:16px;padding:6px 14px;font-size:15px;font-weight:700;color:#5a9a5a}.xp-bar-container{width:200px;height:16px;background:#fff9;border-radius:8px;border:1px solid #E0E8E0;position:relative;overflow:hidden}.xp-bar-fill{height:100%;background:linear-gradient(90deg,#7cb97c,#5a9a5a);border-radius:8px;transition:width .5s ease}.xp-bar-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:#2d3436;text-shadow:0 0 3px rgba(255,255,255,.8);white-space:nowrap}.btn-small{padding:8px 16px;font-size:14px;border-radius:20px}.btn-secondary{background:#fffc;color:#636e72;border:1px solid #ddd}.educator-overlay{display:flex;flex-direction:column;align-items:center;padding:24px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fffffff2;gap:12px;pointer-events:auto}.educator-title{font-size:28px;font-weight:700;color:#5a9a5a;margin-top:8px}.educator-subtitle{font-size:14px;color:#636e72;max-width:400px;text-align:center;line-height:1.6}.educator-section{width:100%;max-width:480px}.educator-section h2{font-size:18px;color:#2d3436;margin-bottom:4px}.educator-hint{font-size:13px;color:#636e72;margin-bottom:8px}.educator-tier{margin-bottom:10px}.educator-tier-header{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#5d4e37;cursor:pointer;margin-bottom:6px}.educator-tier-header input{width:16px;height:16px;cursor:pointer}.educator-grid{display:flex;flex-wrap:wrap;gap:6px}.educator-chip{display:flex;align-items:center;gap:6px;background:#ffffffe6;border:1.5px solid #E0E8E0;border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.educator-chip input{display:none}.educator-chip.selected{background:#e8f5e9;border-color:#7cb97c;box-shadow:0 0 0 2px #7cb97c33}.educator-chip:hover{border-color:#7cb97c}.educator-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.educator-actions .btn{padding:12px 24px;font-size:16px}.educator-warning{font-size:13px;color:#d63031;text-align:center}.educator-settings-btn{position:absolute;top:16px;left:16px;background:#ffffffe0;border:1.5px solid #7CB97C;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;z-index:30;display:flex;align-items:center;justify-content:center;transition:all .2s;pointer-events:auto}.educator-settings-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.educator-banner{background:linear-gradient(135deg,#e8f5e9,#c8e6c9);border:2px solid #7CB97C;border-radius:16px;padding:10px 24px;font-size:18px;font-weight:700;color:#5a9a5a;text-align:center}.tool-level-lock{display:block;font-size:10px;font-weight:700;color:#999;margin-top:2px}.tutorial-backdrop{position:absolute;top:12px;right:12px;z-index:60;pointer-events:none;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.tutorial-tooltip{background:#ffffffed;border-radius:14px;padding:14px 18px;max-width:260px;text-align:center;box-shadow:0 4px 16px #0003;animation:bounceIn .4s ease-out;pointer-events:auto}.tutorial-step-badge{font-size:14px;font-weight:700;color:#7cb97c;margin-bottom:8px}.tutorial-text{font-size:17px;font-weight:600;color:#2d3436;line-height:1.6;margin-bottom:16px}.tutorial-actions{display:flex;gap:10px;justify-content:center}.tutorial-skip-btn{background:none;border:1.5px solid #ddd;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:600;color:#636e72;cursor:pointer;transition:all .2s}.tutorial-skip-btn:hover{border-color:#999;background:#0000000d}.tutorial-help-btn{position:absolute;bottom:16px;left:16px;background:#ffffffe0;border:1.5px solid #ddd;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;z-index:30;display:flex;align-items:center;justify-content:center;transition:all .2s;pointer-events:auto}.tutorial-help-btn:hover{background:#fff;border-color:#7cb97c;transform:translateY(-1px);box-shadow:0 2px 8px #00000026}
