:root{--bg-color: #FBF6F0;--bg-gradient: linear-gradient(180deg, #FBF6F0 0%, #F5EBE1 50%, #EEDCD0 100%);--panel-bg: rgba(255, 255, 255, .84);--panel-border: rgba(220, 208, 196, .6);--text-main: #3C3632;--text-muted: #847970;--accent: #C96E58;--accent-hover: #B55B46;--symbol-active: #C96E58;--shadow: 0 8px 32px rgba(90, 70, 55, .08);--modal-bg: rgba(251, 246, 240, .96);--btn-bg: rgba(255, 255, 255, .9);--btn-border: rgba(220, 208, 196, .65);--btn-active: #EFE4D8}[data-theme=twilight]{--bg-color: #12141C;--bg-gradient: linear-gradient(180deg, #181B26 0%, #13151E 50%, #0E1017 100%);--panel-bg: rgba(24, 27, 38, .85);--panel-border: rgba(55, 62, 85, .6);--text-main: #E8ECF4;--text-muted: #8C96AC;--accent: #38BDF8;--accent-hover: #0EA5E9;--symbol-active: #38BDF8;--shadow: 0 8px 32px rgba(0, 0, 0, .45);--modal-bg: rgba(20, 22, 32, .96);--btn-bg: rgba(30, 34, 48, .88);--btn-border: rgba(60, 68, 92, .65);--btn-active: #2B3145}[data-theme=celadon]{--bg-color: #14282B;--bg-gradient: linear-gradient(180deg, #2C5D63 0%, #183B40 50%, #0E2327 100%);--panel-bg: rgba(24, 59, 64, .85);--panel-border: rgba(60, 115, 110, .5);--text-main: #E2F3E9;--text-muted: #95BDB0;--accent: #F4D06F;--accent-hover: #E2BC55;--symbol-active: #F4D06F;--shadow: 0 8px 32px rgba(8, 25, 28, .45);--modal-bg: rgba(20, 48, 52, .96);--btn-bg: rgba(28, 68, 74, .88);--btn-border: rgba(65, 128, 120, .6);--btn-active: #225259}[data-theme=lavender]{--bg-color: #E6E0F8;--bg-gradient: linear-gradient(180deg, #EFEAFF 0%, #DDD4F5 50%, #CAD0F8 100%);--panel-bg: rgba(255, 255, 255, .84);--panel-border: rgba(195, 185, 225, .6);--text-main: #3D3550;--text-muted: #7E7495;--accent: #845EF7;--accent-hover: #7048E8;--symbol-active: #845EF7;--shadow: 0 8px 32px rgba(60, 50, 95, .1);--modal-bg: rgba(245, 240, 255, .96);--btn-bg: rgba(255, 255, 255, .9);--btn-border: rgba(200, 190, 230, .65);--btn-active: #E4DCFA}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100%;height:100%;overflow:hidden;font-family:Josefin Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;letter-spacing:.04em;background:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-main);transition:background .4s ease,color .4s ease}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.42) 0%,transparent 68%),var(--bg-gradient);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .4s ease}[data-theme=twilight] #canvas-container{background:radial-gradient(circle at 50% 38%,rgba(40,50,75,.45) 0%,transparent 68%),var(--bg-gradient)}[data-theme=celadon] #canvas-container{background:radial-gradient(circle at 50% 38%,rgba(65,140,135,.35) 0%,transparent 68%),var(--bg-gradient)}[data-theme=lavender] #canvas-container{background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.5) 0%,transparent 68%),var(--bg-gradient)}#dust-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;touch-action:none;z-index:3}#ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px))}.top-bar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:800px;margin:0 auto;pointer-events:auto}.menu-btn{background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);box-shadow:var(--shadow);transition:all .25s cubic-bezier(.16,1,.3,1)}.menu-btn:hover{transform:scale(1.06);background:var(--btn-active);color:var(--accent)}.menu-btn:active{transform:scale(.96)}.hud-remaining-wrapper{position:relative;display:flex;align-items:center}.hud-remaining-medallion{background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);box-shadow:var(--shadow);transition:all .25s cubic-bezier(.16,1,.3,1);position:relative;padding:0}.hud-remaining-medallion:hover{transform:scale(1.06);background:var(--btn-active)}.hud-remaining-medallion:active{transform:scale(.96)}.medallion-ring-svg{position:absolute;top:0;left:0;width:44px;height:44px;pointer-events:none}.medallion-ring-svg .ring-bg{stroke:var(--panel-border);opacity:.6}.medallion-ring-svg .ring-fill{stroke:var(--accent, #d86942);stroke-dasharray:113.1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .4s cubic-bezier(.16,1,.3,1),stroke .3s ease}.medallion-number{font-family:Josefin Sans,sans-serif;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--text-main);z-index:1;user-select:none;transition:color .3s ease}.hud-remaining-medallion.has-errors .ring-fill{stroke:#e54d42}.hud-remaining-medallion.has-errors .medallion-number{color:#e54d42}.hud-remaining-popover{position:absolute;top:calc(100% + 12px);right:0;width:220px;background:var(--modal-bg);border:1px solid var(--panel-border);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:18px;padding:14px 16px;box-shadow:0 16px 36px #00000029;opacity:0;pointer-events:none;transform:translateY(-8px) scale(.96);transform-origin:top right;transition:all .25s cubic-bezier(.16,1,.3,1);z-index:50}.hud-remaining-popover.visible{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.hud-remaining-popover .popover-header{display:flex;align-items:center;gap:8px;color:var(--accent);margin-bottom:6px}.hud-remaining-popover .popover-title{font-family:Josefin Sans,sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.hud-remaining-popover .popover-body{display:flex;flex-direction:column;gap:3px}.popover-status-text{font-family:Josefin Sans,sans-serif;font-size:14px;font-weight:600;color:var(--text-main);letter-spacing:.02em}.popover-sub{font-family:Josefin Sans,sans-serif;font-size:11px;color:var(--text-muted);letter-spacing:.04em}.hud-remaining-popover.has-errors .popover-header,.hud-remaining-popover.has-errors .popover-status-text{color:#e54d42}.bottom-tray-container{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:520px;margin:0 auto;pointer-events:none;transform:translateY(120%);opacity:0;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .22s ease-out;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}.bottom-tray-container.visible{transform:translateY(0);opacity:1;pointer-events:auto}.symbol-tray{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--panel-bg);border:1px solid var(--panel-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:12px 18px;border-radius:30px;box-shadow:var(--shadow);width:100%}.symbol-btn{flex:1;max-width:76px;height:68px;border-radius:20px;background:var(--btn-bg);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000000a;transition:all .2s cubic-bezier(.16,1,.3,1);position:relative}.symbol-btn:hover{transform:translateY(-3px);background:var(--btn-active)}.symbol-btn:active{transform:translateY(0)}.symbol-btn.selected{border-color:var(--symbol-active);background:var(--btn-active);box-shadow:0 4px 16px #d8694240}.symbol-btn svg{width:46px;height:46px}.symbol-btn:not(.clear-btn) .symbol-fill,.symbol-btn:not(.clear-btn) .symbol-fill path,.symbol-btn:not(.clear-btn) .symbol-fill circle,.symbol-btn:not(.clear-btn) svg circle:not([fill=black]),.symbol-btn:not(.clear-btn) svg path{fill:var(--symbol-active, #1682c5);transition:fill .3s ease}.tray-divider{width:1px;height:44px;background:var(--panel-border);opacity:.7;margin:0 4px}.symbol-btn.clear-btn{flex:0 0 58px;max-width:58px;width:58px;height:58px;border-radius:50%;background:#dc5f4b14;border:1.5px dashed rgba(200,80,60,.4);color:#c25244;box-shadow:0 2px 8px #c8503c0f}[data-theme=dark] .symbol-btn.clear-btn{background:#f06e5a1f;border:1.5px dashed rgba(240,120,100,.45);color:#f07060;box-shadow:0 2px 8px #f06e5a1f}.symbol-btn.clear-btn:hover{background:#dc5f4b2e;border-color:#c8503ca6;transform:translateY(-3px) scale(1.05)}[data-theme=dark] .symbol-btn.clear-btn:hover{background:#f06e5a3d;border-color:#f07864bf}.symbol-btn.clear-btn.selected{border:2px solid #e54d42;background:#e54d4238;color:#e54d42;box-shadow:0 4px 16px #e54d4259}.symbol-btn.clear-btn svg{width:28px;height:28px;color:inherit}.symbol-key-hint{position:absolute;bottom:2px;font-size:10px;font-weight:700;color:var(--text-muted);opacity:.75}@media(hover:none)and (pointer:coarse){.symbol-key-hint{display:none}}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000059;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .25s ease;padding:20px}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal-dialog{background:var(--modal-bg);border:1px solid var(--panel-border);border-radius:28px;padding:24px;max-width:440px;width:100%;box-shadow:0 24px 64px #00000038;display:flex;flex-direction:column;gap:16px;transform:scale(.95);transition:transform .25s cubic-bezier(.16,1,.3,1);overflow:hidden}.modal-backdrop.open .modal-dialog{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:17px;font-weight:700;letter-spacing:.16em;color:var(--text-main);text-transform:uppercase}.close-btn{background:none;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s ease,color .2s ease}.close-btn:hover{background:var(--btn-active);color:var(--text-main)}.back-nav-btn{background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:9999px;padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--text-main);cursor:pointer;transition:all .2s ease}.back-nav-btn:hover{background:var(--btn-active);color:var(--accent)}.menu-view{display:none;flex-direction:column;gap:14px;width:100%;animation:fadeInView .22s ease-out}.menu-view.active-view{display:flex}@keyframes fadeInView{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.menu-brand{display:flex;align-items:baseline;gap:10px}.menu-brand-title{font-size:22px;font-weight:700;letter-spacing:.24em;color:var(--text-main)}.menu-brand-badge{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--accent);background:var(--btn-bg);border:1px solid var(--btn-border);padding:2px 8px;border-radius:9999px}.menu-body{display:flex;flex-direction:column;gap:8px}.menu-row-btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:16px;cursor:pointer;text-align:left;transition:all .2s cubic-bezier(.16,1,.3,1)}.menu-row-btn:hover{background:var(--btn-active);transform:translate(2px);border-color:var(--accent)}.menu-row-text{display:flex;flex-direction:column;gap:2px}.menu-row-title{font-size:15px;font-weight:600;letter-spacing:.08em;color:var(--text-main)}.menu-row-subtitle{font-size:12px;letter-spacing:.04em;color:var(--text-muted)}.menu-status-pill{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:9999px;background:var(--panel-bg);border:1px solid var(--btn-border);color:var(--text-muted);transition:all .2s ease}.menu-status-pill.active{color:var(--accent);border-color:var(--accent);background:#1682c514}.menu-row-arrow{font-size:16px;color:var(--text-muted);transition:transform .2s ease}.menu-row-btn:hover .menu-row-arrow{transform:translate(3px);color:var(--accent)}.menu-row-action-hint{font-size:12px;font-weight:600;letter-spacing:.08em;color:#e54d42}.menu-recalibrate-container{display:flex;flex-direction:column}.recalibrate-confirm-drawer{max-height:0;opacity:0;overflow:hidden;transition:max-height .25s ease,opacity .25s ease,margin .25s ease;background:#e54d4214;border:1px dashed rgba(229,77,66,.35);border-radius:14px;display:flex;flex-direction:column;gap:8px}.recalibrate-confirm-drawer.open{max-height:100px;opacity:1;margin-top:6px;padding:10px 14px}.confirm-prompt{font-size:12px;font-weight:600;color:#e54d42;letter-spacing:.04em}.confirm-actions{display:flex;gap:8px}.confirm-btn{flex:1;padding:6px 12px;border-radius:8px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text-main);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.confirm-btn.danger{background:#e54d42;color:#fff;border-color:#e54d42}.confirm-btn:hover{filter:brightness(1.08)}.chapters-body{display:flex;flex-direction:column;gap:12px;max-height:72vh;overflow-y:auto;padding-right:2px}.jump-card{padding:12px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:16px;display:flex;flex-direction:column;gap:8px}.jump-input-row{display:flex;align-items:center;gap:6px}.jump-label{font-size:15px;font-weight:700;color:var(--accent)}.jump-input{flex:1;padding:8px 12px;border-radius:10px;border:1px solid var(--btn-border);background:var(--panel-bg);color:var(--text-main);font-size:16px;font-weight:700;font-family:Josefin Sans,sans-serif;outline:none;transition:border-color .2s ease}.jump-input:focus{border-color:var(--accent)}.jump-submit-btn{padding:8px 16px;border-radius:10px;background:var(--accent);color:#fff;border:none;font-size:13px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:background .2s ease}.jump-submit-btn:hover{background:var(--accent-hover)}.quick-nav-row{display:flex;gap:6px}.quick-btn{flex:1;padding:7px 10px;border-radius:10px;background:var(--panel-bg);border:1px solid var(--btn-border);color:var(--text-main);font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .2s ease}.quick-btn:hover{background:var(--btn-active);color:var(--accent)}.chapters-grid{display:flex;flex-direction:column;gap:8px}.chapter-card{padding:14px 16px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:16px;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:4px}.chapter-card:hover{background:var(--btn-active);border-color:var(--accent);transform:translateY(-2px)}.chapter-card.current-chapter{border:1.5px solid var(--accent);background:#1682c514}.chapter-card-header{display:flex;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--accent)}.chapter-title{font-size:16px;font-weight:700;letter-spacing:.12em;color:var(--text-main)}.chapter-tagline{font-size:12px;font-style:italic;color:var(--text-muted);line-height:1.4}.chapter-footer{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.06em;color:var(--text-muted);margin-top:4px}.chapter-arrow{color:var(--accent);font-weight:600}.dossier-body{display:flex;flex-direction:column;gap:12px}.dossier-card{padding:18px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:18px;display:flex;flex-direction:column;gap:12px}.dossier-classification{font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--accent)}.dossier-headline{font-size:17px;font-weight:700;letter-spacing:.16em;color:var(--text-main)}.dossier-quote{font-size:13.5px;line-height:1.65;color:var(--text-main);font-style:italic}.dossier-divider{height:1px;background:var(--panel-border);margin:4px 0}.dossier-colophon{display:flex;flex-direction:column;gap:4px}.colophon-title{font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--text-muted)}.colophon-credits{font-size:12px;line-height:1.6;color:var(--text-muted)}.victory-icon{width:72px;height:72px;margin:0 auto;color:#f59e0b}.victory-time{font-size:28px;font-weight:800;text-align:center;color:var(--accent)}.victory-puzzle-id{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:9999px;padding:4px 14px;align-self:center}.victory-message{text-align:center;color:var(--text-muted);font-size:15px}