*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}:root{--bg-color: #e6dfd1;--text-primary: #5a4d4c;--text-secondary: #8c7a79;--modal-overlay: rgba(90, 77, 76, .4);--modal-bg: #ffffff;--modal-border: #e0d5c4;--card-bg: #faf6f0;--card-hover-border: #e2f0cb;--card-title: #88b09f;--accent-pink: #ffb7b2;--hud-bg: rgba(255, 255, 255, .85);--hud-shadow: rgba(140, 122, 121, .1);--btn-close-bg: #f2e8dc}body.dark-mode{--bg-color: #161623;--text-primary: #f0f0f5;--text-secondary: #a8a8bd;--modal-overlay: rgba(10, 10, 18, .7);--modal-bg: #31262b;--modal-border: #523b44;--card-bg: #453138;--card-hover-border: #ffb7b2;--card-title: #ffc2d1;--accent-pink: #ffb7b2;--hud-bg: rgba(34, 34, 51, .88);--hud-shadow: rgba(0, 0, 0, .35);--btn-close-bg: #543b4a}body,html{width:100%;height:100%;overflow:hidden;font-family:Quicksand,sans-serif;background-color:var(--bg-color);color:var(--text-primary);transition:background-color .4s ease,color .4s ease}#game-container{position:relative;width:100vw;height:100vh;overflow:auto}canvas{display:block;min-width:800px;min-height:800px;width:100%;height:100%}#hud{position:absolute;top:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;z-index:10}#interact-btn{position:absolute;pointer-events:auto;background:var(--accent-pink);color:#fff;border:none;padding:8px 16px;font-size:.95rem;font-family:Quicksand,sans-serif;font-weight:700;border-radius:12px;cursor:pointer;box-shadow:0 4px 10px #00000026;transition:transform .2s,background .4s;transform:translate(-50%,-100%);z-index:20;animation:floatButton 2s ease-in-out infinite}#interact-btn:hover{transform:translate(-50%,-100%) scale(1.05)}@keyframes floatButton{0%{margin-top:0}50%{margin-top:-6px}to{margin-top:0}}#help-btn{position:fixed;bottom:24px;right:24px;width:55px;height:55px;border-radius:50%;background:var(--accent-pink);color:#fff;border:none;font-size:1.8rem;font-weight:700;font-family:Quicksand,sans-serif;cursor:pointer;box-shadow:0 4px 15px #0003;z-index:10;transition:transform .2s,background .4s}#help-btn:hover{transform:scale(1.1)}.hidden{display:none!important}@keyframes floatHUD{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(15px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes popOut{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(15px)}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--modal-overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:100;padding:20px;animation:fadeIn .3s ease-out}.modal-content{background:var(--modal-bg);border:4px solid var(--modal-border);border-radius:24px;width:100%;max-width:550px;max-height:80vh;overflow-y:auto;padding:32px;position:relative;box-shadow:0 15px 35px #00000040;transition:background .4s,border-color .4s;animation:popIn .35s cubic-bezier(.175,.885,.32,1.275)}.modal.closing{animation:fadeOut .25s ease-in forwards;pointer-events:none}.modal.closing .modal-content{animation:popOut .25s ease-in forwards}.close-btn{position:absolute;top:16px;right:20px;background:var(--btn-close-bg);border:none;color:var(--text-secondary);width:36px;height:36px;border-radius:50%;font-size:1.5rem;font-weight:700;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background .2s,color .2s}.close-btn:hover{background:var(--accent-pink);color:#fff}.modal-section{margin-bottom:20px}.modal-section h2{color:var(--accent-pink);margin-bottom:16px;font-size:1.8rem;border-bottom:3px dashed var(--modal-border);padding-bottom:8px}.modal-card{background:var(--card-bg);padding:16px;border-radius:16px;margin-bottom:12px;border:2px solid transparent;transition:border-color .2s,background .4s}.modal-card:hover{border-color:var(--card-hover-border)}.modal-card h3{color:var(--card-title);font-size:1.2rem;margin-bottom:4px}.modal-card p{font-size:.95rem;color:var(--text-primary);line-height:1.5;margin-top:6px}.modal-card a{display:inline-block;margin-top:10px;color:var(--accent-pink);margin-right:15px;text-decoration:none;font-weight:700;font-size:.95rem;background:var(--modal-bg);padding:6px 12px;border-radius:12px;border:2px solid var(--accent-pink);transition:all .2s}.modal-card a:hover{background:var(--accent-pink);color:#fff}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:var(--modal-border);border-radius:4px;margin:15px 10px 15px 0}.modal-content::-webkit-scrollbar-thumb{background:var(--accent-pink);border-radius:4px}.modal-image-gallery{display:flex;gap:12px;overflow-x:auto;margin-top:16px;padding-bottom:12px;scroll-behavior:smooth;scroll-snap-type:x mandatory}.modal-image-gallery img{height:200px;border-radius:12px;object-fit:cover;border:3px solid var(--modal-border);box-shadow:0 4px 10px #00000026;scroll-snap-align:start;flex-shrink:0}.modal-image-gallery::-webkit-scrollbar{height:8px}.modal-image-gallery::-webkit-scrollbar-track{background:var(--modal-border);border-radius:4px}.modal-image-gallery::-webkit-scrollbar-thumb{background:var(--accent-pink);border-radius:4px}.modal-card .modal-image-gallery img{height:120px;border-width:2px;margin-top:8px}