:root { --page-bg: #100407; --ui-accent: #d6082c; --ui-highlight: #fff; --palette-glow: #92051d; --on-accent: #fff; --radar-fill: #eee8e5; --radar-stroke: #fff; --radar-shade: rgba(86,54,66,.45); }
body[data-theme=moon] { --page-bg: #030d24; --ui-accent: #1769de; --ui-highlight: #73f4ff; --palette-glow: #13459e; --on-accent: #fff; --radar-fill: #0047ab; --radar-stroke: #8dbaff; --radar-shade: rgba(3,20,58,.65); }
body[data-theme=fog] { --page-bg: #17160e; --ui-accent: #f5cc19; --ui-highlight: #ffe781; --palette-glow: #8a7111; --on-accent: #111; }
html { background: var(--page-bg); color-scheme: dark; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
body { background-color: var(--page-bg); width: 100% !important; overscroll-behavior: none; font-family: 'Montserrat', sans-serif !important; }
.account-topbar { position: fixed; top: max(16px,env(safe-area-inset-top)); right: max(20px,env(safe-area-inset-right)); z-index: 35; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 48vw; }
.account-topbar .ui-btn { font-size: 12px; padding: 11px 15px; max-width: 100%; }
#streak-badge { padding: 6px 10px; color: #fff; background: #0a0a0a; border-left: 3px solid var(--ui-accent); font-size: 10px; }
.settings-section { margin: 22px 0; padding: 20px 0; border-top: 1px solid #51404a; }
.settings-section h2 { font: 24px 'Bebas Neue',sans-serif; letter-spacing: .05em; margin: 0 0 12px; }
.custom-stat { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; border: 0; padding: 8px 0 14px; min-width: 0; }
.custom-stat legend { font-size: 10px; color: var(--ui-highlight); }
.palette-shop { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.palette-card { background: #0a0a0a; color: #fff; border: 1px solid #65525a; text-align: left; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.palette-card strong { font: 25px 'Bebas Neue',sans-serif; }
.palette-card > span:last-child { font-size: 10px; }
.palette-card[aria-pressed=true] { border: 2px solid var(--ui-highlight); box-shadow: 4px 4px 0 var(--ui-accent); }
.palette-swatch { display: block; width: 100%; height: 48px; clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
.swatch-voleur { background: linear-gradient(115deg,#d6082c 65%,#0a0a0a 65%); }
.swatch-moon { background: linear-gradient(115deg,#1769de 65%,#73f4ff 65%); }
.swatch-fog { background: linear-gradient(115deg,#f5cc19 65%,#292823 65%); }
.pause-nav [aria-selected=true] { color: var(--on-accent); }
.text-yellow-400 { color: var(--ui-highlight) !important; }
@media (max-width: 600px) {
    .account-topbar { right: 12px; top: max(12px,env(safe-area-inset-top)); max-width: 44vw; }
    .account-topbar .ui-btn { font-size: 9px; padding: 9px 10px; }
    #streak-badge { font-size: 9px; }
    .custom-stat { grid-template-columns: 1fr; }
    .palette-shop { grid-template-columns: 1fr; }
    .palette-card { display: grid; grid-template-columns: 70px 1fr; align-items: center; }
    .palette-swatch { grid-row: span 2; }
}
body::before { content: ''; position: fixed; inset: 0; background: linear-gradient(125deg,var(--palette-glow),var(--page-bg) 48%); pointer-events: none; }
* { box-sizing: border-box; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role=tabpanel]:focus-visible { outline: 3px solid var(--ui-highlight); outline-offset: 4px; }
.pause-shell { position: relative; z-index: 10; display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 40px; height: 100dvh; padding: 170px 4vw max(28px,env(safe-area-inset-bottom)); max-width: 1600px; margin: auto; }
.pause-nav { padding-top: 45px; }
.nav-caption { display: block; font-size: 10px; letter-spacing: .18em; color: #969399; margin: 0 0 20px 20px; }
.pause-nav [role=tablist] { display: flex; flex-direction: column; gap: 14px; }
.pause-nav [role=tab] { border: 0; background: transparent; color: #eee8e5; font: 28px 'Bebas Neue',sans-serif; text-align: left; padding: 10px 18px; transform: skew(-8deg) rotate(-3deg); white-space: nowrap; transition: transform .18s,background .18s,color .18s; }
.pause-nav [role=tab] span { font: 11px 'Montserrat',sans-serif; color: #979299; margin-right: 12px; }
.pause-nav [role=tab]:hover { transform: skew(-8deg) rotate(-3deg) translateX(8px); }
.pause-nav [aria-selected=true] { background: var(--ui-accent); color: #fff; box-shadow: 5px 5px 0 #eee8e5; }
.pause-nav [aria-selected=true] span { color: #fff; }
.pause-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.global-status { min-height: 33px; font-size: 11px; color: #e3d6d9; border-left: 3px solid var(--ui-accent); padding: 6px 12px; margin: 0 0 18px; }
.menu-panel { overflow-y: auto; overflow-x: hidden; min-width: 0; min-height: 0; overflow-wrap: anywhere; padding: 20px 32px 32px; scrollbar-color: var(--ui-accent) #211d22; animation: panel-enter .23s ease-out; }
.panel-heading { margin-bottom: 25px; }
.panel-heading > span,.section-kicker { font-size: 9px; letter-spacing: .2em; color: var(--ui-highlight); }
.panel-heading h1 { font: clamp(42px,5vw,72px)/1 'Bebas Neue',sans-serif; text-transform: uppercase; margin: 6px 0 10px; transform: skew(-7deg); text-shadow: 4px 4px var(--ui-accent); }
.panel-heading > p { font-size: 11px; color: #aaa3ad; line-height: 1.7; }
.stats-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; align-items: center; }
.radar-wrap { min-width: 0; text-align: center; }
#ui-star-canvas { width: 100%; height: clamp(480px,calc(100dvh - 300px),960px); filter: drop-shadow(0 10px 12px var(--page-bg)); }
.radar-caption { display: block; font-size: 8px; letter-spacing: .2em; color: #aaa3ad; }
.stats-overview .section-kicker { margin-bottom: 12px; }
.stats-journal-link { text-align: center; }
.stats-journal-link .fine-print { margin-top: 12px; }
.stats-overview { border: 1px solid #61515b; background: rgba(17,16,20,.82); width: 100%; max-width: 760px; justify-self: center; padding: 20px; }
#stat-controls-list { display: flex; flex-direction: column; gap: 10px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: rgba(17,16,20,.82); border-left: 3px solid var(--ui-accent); }
.stat-row > div:first-child { flex: 1; min-width: 0; }
.stat-detail { font-size: 11px; line-height: 1.7; color: #ddd5d9; margin-top: 3px; }
.stat-next { font-size: 11px; line-height: 1.7; color: #c4b9c2; margin-top: 3px; }
.stat-progress { display: block; height: 3px; background: #39323a; margin-top: 8px; overflow: hidden; }
.stat-progress span { display: block; height: 100%; background: var(--ui-highlight); transform-origin: left; transition: transform .4s; }
.ui-btn { padding: 8px 12px; font-family: 'Bebas Neue',sans-serif !important; letter-spacing: .04em; }
.ui-btn,.command-list button,.pause-nav [role=tab] { transition: transform .15s,background-color .15s !important; }
.fine-print { color: #a79ba6; font-size: 10px; line-height: 1.8; margin-top: 16px; }
.text-link { background: none; border: 0; color: var(--ui-highlight); font-size: 11px; padding: 10px 0; }
.journal-date { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-bottom: 1px solid #51404a; }
.journal-date > span { font-size: 10px; color: var(--ui-highlight); text-transform: uppercase; letter-spacing: .12em; }
.journal-date time { font-size: 14px; font-weight: 700; }
.daily-gains { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.gain-pill { display: inline-block; border: 1px solid #61515b; padding: 8px 10px; font-size: 10px; background: #211b22; }
.gain-pill strong { color: var(--ui-highlight); margin-left: 8px; }
.journal-form { display: grid; gap: 10px; margin: 25px 0; }
.journal-form label { font-size: 9px; letter-spacing: .15em; color: var(--ui-highlight); }
.journal-form textarea { width: 100%; resize: vertical; min-height: 100px; padding: 13px; background: rgba(17,16,20,.85); color: #eee8e5; font-size: 12px; line-height: 1.8; border: 1px solid #61515b; }
.journal-form .ui-btn { justify-self: start; }
.journal-feedback { font-size: 11px; color: var(--ui-highlight); line-height: 1.8; overflow-wrap: anywhere; }
.journal-analysis { border-top: 1px solid #44333c; padding-top: 10px; margin-top: 10px; }
.journal-analysis p { font-size: 11px; line-height: 1.8; color: #c3b6bf; margin: 8px 0; overflow-wrap: anywhere; }
.journal-analysis strong { color: var(--ui-highlight); }
.journal-analysis blockquote { font-size: 10px; color: #9e929d; border-left: 2px solid #61515b; padding-left: 10px; margin-top: 4px; white-space: pre-wrap; }
.journal-entry { padding: 16px 18px; background: rgba(17,16,20,.8); border-left: 3px solid var(--ui-accent); margin-top: 12px; }
.journal-entry > span { color: #aaa3ad; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.journal-entry > p { font-size: 12px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
.journal-entry .gain-pill { border: 0; padding: 4px 10px 4px 0; }
.empty-state { padding: 30px 20px; color: #b7a5ae; border: 1px dashed #61515b; font-size: 12px; line-height: 1.8; }
.calendar-summary { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 14px; }
.calendar-summary > div { border-left: 4px solid var(--ui-accent); background: rgba(17,16,20,.8); padding: 16px; min-width: 0; }
.calendar-summary span { font-size: 9px; letter-spacing: .1em; }
.calendar-summary strong { display: block; color: var(--ui-highlight); font: clamp(28px,5vw,64px)/1.3 'Bebas Neue',sans-serif; }
.calendar-toolbar { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 12px; align-items: center; margin: 28px 0 12px; }
.calendar-toolbar h2 { font: 28px 'Bebas Neue',sans-serif; text-align: center; text-transform: uppercase; }
.calendar-toolbar > button:not(.text-link) { min-height: 44px; border: 1px solid #74616b; background: #211b22; }
.calendar-toolbar .text-link { grid-column: 1 / -1; justify-self: center; }
.calendar-weekdays,.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.calendar-weekdays { margin-bottom: 8px; color: #a79ba6; text-align: center; font-size: 10px; }
.calendar-day { min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 5px 3px; border: 1px solid #44333c; background: #211b22; }
.calendar-day strong { font: 22px 'Bebas Neue',sans-serif; }
.calendar-day span { font-size: 10px; color: var(--ui-highlight); max-width: 100%; overflow-wrap: anywhere; }
.calendar-day.has-entries { border-bottom: 3px solid var(--ui-accent); }
.calendar-day[aria-current=date] strong { color: var(--ui-highlight); }
.calendar-day[aria-pressed=true] { background: var(--ui-accent); border-color: #eee8e5; }
.calendar-day:not(:disabled):hover { background: #343940; }
.calendar-archive { display: grid; gap: 10px; margin: 25px 0; font-size: 9px; letter-spacing: .1em; color: var(--ui-highlight); }
.calendar-archive select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; background: #211b22; color: #eee8e5; border: 1px solid #61515b; font-size: 12px; letter-spacing: normal; }
.calendar-day-heading { border-top: 1px solid #61515b; padding-top: 20px; }
.calendar-day-heading h2 { font: 28px 'Bebas Neue',sans-serif; }
.calendar-day-heading p { font-size: 11px; color: #a79ba6; line-height: 1.8; margin-top: 8px; }
.quest-card { position: relative; background: #202024; color: #eee8e5; padding: 40px; border: 5px solid #171219; box-shadow: 9px 9px var(--ui-accent); transform: rotate(-1deg); margin: 20px 12px 30px 0; max-width: 720px; }
.quest-stamp { display: inline-block; background: var(--ui-accent); color: #fff; font: 24px 'Bebas Neue',sans-serif; padding: 5px 13px; transform: rotate(-5deg); margin-bottom: 25px; }
.quest-card .section-kicker { color: var(--ui-accent); }
.quest-card h3 { font: 48px/1.05 'Bebas Neue',sans-serif; margin: 12px 0 18px; }
.quest-card > p:not(.section-kicker) { font-size: 12px; line-height: 1.9; }
.quest-rewards { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0; }
.quest-card .gain-pill { color: #eee8e5; }
.quest-card .fine-print { color: #c5c5cc; }
#panel-system > section { max-width: 650px; padding: 20px 0; }
.support-zone { border-bottom: 1px solid var(--ui-accent); margin-bottom: 25px; }
.support-zone h2 { font: 25px 'Bebas Neue',sans-serif; letter-spacing: .05em; }
.support-ad-button { display: block; width: 100%; max-width: 440px; min-height: 48px; margin-top: 18px; padding: 14px 18px; border: 1px solid #b5bec9; background: #262c34; color: #eee8e5; box-shadow: 4px 4px 0 var(--ui-accent); font: 20px/1.3 'Bebas Neue',sans-serif; letter-spacing: .04em; text-align: left; transition: background-color .15s,transform .15s; }
.support-ad-button:hover { background: #343d48; }
.support-ad-button:active { transform: translate(2px,2px); }
#panel-system input { border-radius: 0; background: #211b22; min-height: 42px; }
.reset-zone { border-top: 1px solid #61515b; max-width: 650px; margin-top: 30px; padding: 22px 0; }
.reset-zone h2 { font: 25px 'Bebas Neue',sans-serif; color: #b5bec9; }
.reset-zone p { font-size: 11px; color: #b7a5ae; line-height: 1.8; margin: 10px 0 20px; }
.danger-btn { border: 1px solid #b5bec9; color: #eee8e5; background: var(--ui-accent); font: 16px 'Bebas Neue',sans-serif; padding: 10px 15px; }
#reset-confirm { padding: 15px; margin-top: 15px; border: 1px solid #b5bec9; }
#reset-confirm .text-link { margin-left: 15px; }
.level-up { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: rgba(17,16,20,.9); }
.level-burst { position: absolute; inset: -80%; background: repeating-conic-gradient(from 8deg,var(--ui-accent) 0deg 12deg,#343940 12deg 24deg); clip-path: polygon(50% 0,58% 35%,100% 15%,72% 49%,100% 85%,59% 65%,50% 100%,41% 65%,0 85%,28% 49%,0 15%,42% 35%); animation: burst-in .7s ease-out both; }
.level-message { position: relative; text-align: center; padding: 30px; transform: rotate(-5deg); animation: rank-in .55s cubic-bezier(.16,1,.3,1) both; }
.level-message > span { font-size: 12px; letter-spacing: .3em; background: #171219; padding: 8px 15px; }
.level-message strong { display: block; font: clamp(72px,15vw,160px)/1.3 'Bebas Neue',sans-serif; color: var(--ui-highlight); text-shadow: 8px 8px #171219; }
.level-message p { font: 24px 'Bebas Neue',sans-serif; background: #eee8e5; color: #171219; padding: 15px 25px; white-space: pre-line; }
.level-message button { font: 20px 'Bebas Neue',sans-serif; color: var(--ui-highlight); background: #171219; border: 1px solid #eee8e5; padding: 12px 22px; margin-top: 20px; }
@keyframes panel-enter { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rank-in { from { opacity: 0; transform: rotate(-15deg) scale(.35) translateX(-80px); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
@keyframes burst-in { from { opacity: 0; transform: rotate(-35deg) scale(.2); } to { opacity: 1; transform: rotate(0) scale(1); } }
@media (max-width: 1100px) { .pause-shell { grid-template-columns: 220px minmax(0,1fr); gap: 18px; } .pause-nav [role=tab] { font-size: 23px; padding: 10px; } }
@media (max-width: 767px), (max-height: 500px) and (max-width: 1024px) {
    body { position: relative; height: auto !important; min-height: 100dvh; overflow-x: clip !important; overflow-y: auto !important; }
    body::before { height: 100vh; height: 100dvh; }
    .calendar-hud { position: absolute !important; top: calc(env(safe-area-inset-top) + 12px) !important; left: 12px !important; transform: scale(.9) !important; }
    .pause-shell { padding: calc(env(safe-area-inset-top) + 100px) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); height: auto; min-height: 100dvh; display: flex; flex-direction: column; gap: 17px; }
    .pause-nav { padding: 0; flex-shrink: 0; min-width: 0; }
    .nav-caption { display: none; }
    .pause-nav [role=tablist] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 5px 5px 10px 0; gap: 9px; }
    .pause-nav [role=tab] { font-size: 19px; padding: 9px 8px; transform: none; min-width: 0; min-height: 48px; white-space: normal; line-height: 1.2; }
    .pause-nav [role=tab] span { font-size: 9px; margin-right: 6px; }
    .pause-nav [role=tab]:hover { transform: none; }
    .pause-content { flex: 1; }
    .global-status { font-size: 9px; margin-bottom: 9px; min-height: 28px; }
    .menu-panel { padding: 5px 6px 25px; overflow: visible; }
    .panel-heading { margin-bottom: 14px; }
    .panel-heading h1 { font-size: 42px; transform: none; }
    .panel-heading > p { font-size: 10px; }
    .stats-layout { gap: 18px; }
    #ui-star-canvas { height: auto; width: 100%; max-width: 100%; margin: 0; }
    .stats-overview { padding: 15px 10px; }
    .ui-btn { transform: none !important; white-space: normal; max-width: 100%; line-height: 1.5; }
    .stats-journal-link .ui-btn { width: 100%; }
    .journal-form .ui-btn { width: 100%; font-size: 17px; min-height: 46px; white-space: normal; }
    .journal-form textarea { font-size: 16px; }
    .stat-row { padding: 12px; min-height: 73px; }
    .quest-card { padding: 24px 16px; transform: none; margin-right: 9px; }
    .quest-card h3 { font-size: 38px; }
    .quest-card .ui-btn { width: 100%; font-size: 15px; }
    .journal-date { gap: 10px; }
    .calendar-summary { grid-template-columns: minmax(0,1fr); gap: 8px; }
    .calendar-summary > div { padding: 12px; }
    .calendar-summary strong { font-size: clamp(32px,11vw,60px); }
    .calendar-toolbar { gap: 8px; }
    .calendar-toolbar h2 { font-size: 24px; }
    .calendar-day { min-height: 54px; }
    .calendar-day span { font-size: 8px; }
    .calendar-archive select { font-size: 16px; }
    #panel-system input { width: 100%; min-width: 0; font-size: 16px; }
    .level-message { transform: none; width: 100%; max-height: 100dvh; overflow-y: auto; padding: 20px; }
    .level-message p { font-size: 20px; padding: 15px; overflow-wrap: anywhere; }
}
body:not(.menu-open) { height: auto !important; min-height: 100dvh; overflow-y: auto !important; }
.command-backdrop { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 1; overflow: hidden; background: linear-gradient(116deg,var(--ui-accent) 0 48%,var(--page-bg) 48.1% 100%); pointer-events: none; transition: opacity .32s ease; }
.menu-open .command-backdrop { opacity: 0; }

.command-slash { position: absolute; top: -10%; bottom: -10%; left: 39%; width: 25px; background: #eee8e5; transform: rotate(19deg); opacity: .06; }
.command-star { position: absolute; right: -100px; bottom: -210px; color: transparent; -webkit-text-stroke: 12px var(--ui-accent); font-size: min(52vw,740px); line-height: 1; transform: rotate(-18deg); opacity: .35; }
.weather-effects { --weather-travel: calc(100vh + 80px); --weather-travel: calc(100dvh + 80px); position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.weather-effects[hidden] { display: none; }
.heist-alert { position: fixed; inset: 0; z-index: 140; pointer-events: none; background: radial-gradient(ellipse at center,transparent 35%,rgba(230,0,18,.6)); opacity: .12; animation: heist-flash 1.6s ease-in-out 3; }
.heist-alert[hidden] { display: none; }
@keyframes heist-flash { 0%,100% { opacity: 0; } 50% { opacity: .3; } }
.pause-nav [aria-selected=true], .pause-nav [aria-selected=true] span { color: var(--on-accent); }
@media (prefers-reduced-motion: reduce) { .heist-alert { opacity: .08; animation: none; } }
.weather-particle { position: absolute; top: -40px; left: var(--particle-left); animation-duration: var(--particle-duration); animation-delay: var(--particle-delay); animation-timing-function: linear; animation-iteration-count: infinite; }
.weather-effects[data-weather=rain] .weather-particle { width: 2px; height: var(--particle-size); background: linear-gradient(transparent,rgba(238,232,229,.5)); animation-name: weather-rain; }
.weather-effects[data-weather=snow] .weather-particle { width: var(--particle-size); height: var(--particle-size); border-radius: 50%; background: #eee8e5; opacity: var(--particle-opacity); animation-name: weather-snow; }
.weather-effects.is-paused .weather-particle { animation-play-state: paused; }
@keyframes weather-rain { from { transform: translate3d(35px,0,0) rotate(14deg); } to { transform: translate3d(-120px,var(--weather-travel),0) rotate(14deg); } }
@keyframes weather-snow { from { transform: translate3d(0,0,0); } 50% { transform: translate3d(var(--particle-drift),calc(var(--weather-travel) / 2),0); } to { transform: translate3d(0,var(--weather-travel),0); } }
@media (prefers-reduced-motion: reduce) { .weather-effects { display: none; } }
.command-home { position: relative; z-index: 10; min-height: 100dvh; max-width: 1600px; margin: auto; padding: max(150px,18dvh) 7vw 100px; display: flex; flex-direction: column; justify-content: center; }
.command-title { position: absolute; top: 20dvh; right: 5vw; text-align: right; transform: rotate(7deg); }
.command-title > span { display: inline-block; color: #171219; background: #eee8e5; padding: 7px 16px; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.command-title h1 { margin: 5px 0; font: clamp(42px,5.4vw,82px)/.98 'Bebas Neue',sans-serif; letter-spacing: .035em; }
.command-title h1 > span { display: block; color: #171219; background: #eee8e5; padding: 3px 16px; box-shadow: 7px 7px 0 #171219; }
.command-title p { font-size: 11px; letter-spacing: .08em; margin-top: 18px; }
.command-list { display: flex; flex-direction: column; align-items: flex-start; width: min(48%,520px); gap: 10px; }
.command-list button { --offset: 0px; position: relative; display: flex; align-items: center; gap: 12px; max-width: 100%; border: 0; color: #eee8e5; background: #171219; padding: 3px 17px 3px 12px; transform: translateX(var(--offset)) rotate(-5deg); transition: color .15s,background-color .15s; box-shadow: 4px 4px 0 rgba(23,18,25,.4); }
.command-list button:nth-child(2) { --offset: 28px; }
.command-list button:nth-child(3) { --offset: 10px; }
.command-list button:nth-child(4) { --offset: 36px; }
.command-list button:nth-child(5) { --offset: 17px; }
.command-list button:nth-child(6) { --offset: 42px; }
.command-number { font-size: 10px; font-weight: 900; color: #a79ba6; }
.command-label { font: clamp(35px,4.3vw,66px)/1.08 'Bebas Neue',sans-serif; letter-spacing: .015em; }
.command-arrow { font: 30px 'Bebas Neue',sans-serif; opacity: 0; }
.command-list button:is(:hover,:focus-visible) { background: #eee8e5; color: #171219; box-shadow: 6px 6px 0 #171219; }
.command-list button:is(:hover,:focus-visible) .command-number { color: var(--ui-accent); }
.command-list button:is(:hover,:focus-visible) .command-arrow { opacity: 1; }
kbd { display: inline-block; font: inherit; border: 1px solid currentColor; padding: 3px 6px; margin-right: 5px; }
.menu-back { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: transparent; color: #eee8e5; padding: 12px 20px; margin-bottom: 25px; font: 17px 'Bebas Neue',sans-serif; text-align: left; }
.menu-back kbd { color: #a79ba6; font: 8px 'Montserrat',sans-serif; }
.menu-back:hover { color: #171219; }
.menu-back:hover::before { background: #eee8e5; }
.pause-nav { padding-top: 0; }
.pause-shell { animation: panel-enter .3s ease-out; }
.menu-panel { background: rgba(17,16,20,.65); border-top: 1px solid #61515b; padding: 22px 24px; }
.panel-heading > span { display: block; }
.panel-heading h1 { width: fit-content; max-width: 100%; background: #eee8e5; color: #171219; padding: 3px 15px; text-shadow: none; box-shadow: 6px 6px 0 var(--ui-accent); }
#panel-customization .panel-heading h1 { font-size: clamp(28px,4.2vw,60px); }
@media (max-width: 1100px) and (min-width: 768px) { .command-home { padding-left: 5vw; } .command-title { right: 4vw; } .command-label { font-size: 46px; } }
@media (max-height: 760px) and (min-width: 768px) { .command-home { padding-top: 130px; padding-bottom: 70px; } .command-list { gap: 7px; } .command-label { font-size: clamp(32px,4vw,49px); } }
@media (max-width: 767px), (max-height: 500px) and (max-width: 1024px) {
    #ui-period-display { display: table; }
    .command-home { min-height: 100dvh; padding: calc(env(safe-area-inset-top) + 115px) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); justify-content: flex-start; }

    .command-slash { left: 69%; width: 10px; opacity: .04; }
    .command-star { right: -90px; bottom: -80px; font-size: 420px; -webkit-text-stroke-width: 7px; }
    .command-title { position: relative; inset: auto; align-self: flex-start; text-align: left; margin: 0 0 32px; transform: rotate(-4deg); }
    .command-title > span { font-size: 8px; padding: 5px 10px; }
    .command-title h1 { font-size: clamp(33px,8.5vw,52px); }
    .command-title h1 > span { padding: 3px 10px; box-shadow: 4px 4px 0 #171219; }
    .command-title p { display: none; }
    .command-list { width: calc(100% - 20px); gap: 13px; }
    .command-list button { gap: 8px; min-height: 48px; padding: 5px 10px; }
    .command-list button:nth-child(n) { --offset: 0px; }
    .command-list button:nth-child(even) { --offset: 12px; }
    .command-label { font-size: clamp(31px,8.5vw,45px); }
    .command-arrow { font-size: 24px; }
    .menu-back { margin: 0 5px 12px 0; width: calc(100% - 5px); min-height: 44px; }
    .menu-panel { padding: 16px 12px 25px; }
    .panel-heading h1 { font-size: clamp(32px,9vw,42px); padding: 4px 10px; }
}
.command-title { max-width: 44vw; overflow-wrap: anywhere; }
.command-list button:nth-child(7) { --offset: 25px; }
.gain-pill.is-loss { color: #c9cfd6; border-color: var(--ui-accent); }
.gain-pill.is-loss strong { color: #c9cfd6; }
.loss-rules { padding: 16px 18px; margin-bottom: 20px; border-left: 3px solid var(--ui-accent); background: #21191f; }
.loss-rules h2,.settings-form h2 { font: 21px 'Bebas Neue',sans-serif; letter-spacing: .05em; margin: 0 0 10px; }
.loss-rules p { font-size: 11px; line-height: 1.8; color: #c4b9c2; }
.settings-form { display: flex; flex-direction: column; gap: 10px; padding: 22px; margin-bottom: 25px; border: 1px solid #61515b; background: rgba(23,18,25,.9); }
.settings-form label { font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.settings-form input,.settings-form select { width: 100%; min-width: 0; background: #171219; color: #eee8e5; border: 1px solid #61515b; border-radius: 0; padding: 12px; font-size: 13px; }
.settings-form select { margin-top: 10px; }
.settings-form .ui-btn { padding: 12px 16px; font-size: 14px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.city-search { display: flex; gap: 12px; align-items: center; min-width: 0; }
.city-search input { flex: 1; }
.city-search button { flex-shrink: 0; }
.day-change { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; overflow: hidden; background: #171219; animation: day-in .45s ease-out both; }
.day-change-stripe { position: absolute; inset: -25%; background: var(--ui-accent); transform: rotate(-15deg) scaleX(1); animation: day-stripe .65s cubic-bezier(.2,.7,.2,1) both; }
.day-change-content { position: relative; width: min(88vw,650px); text-align: center; transform: rotate(-5deg); }
.day-change-content > span:first-child { font-size: 12px; letter-spacing: .25em; }
.day-change-content > p:first-of-type { margin: 18px 0 0; font: clamp(24px,5vw,45px) 'Bebas Neue',sans-serif; }
.day-change-content > strong { display: block; margin: 12px 0; padding: 10px; background: #eee8e5; color: #171219; box-shadow: 10px 10px 0 #171219; font: clamp(80px,22vw,180px)/1 'Bebas Neue',sans-serif; animation: day-date .75s cubic-bezier(.2,.7,.2,1) both; }
#day-change-weekday { display: block; font: 28px 'Bebas Neue',sans-serif; margin-top: 25px; text-transform: uppercase; }
.day-change-content > p:last-of-type { font-size: 12px; margin: 15px 0 24px; }
.day-change-content button { border: 2px solid #eee8e5; color: #eee8e5; background: #171219; padding: 12px 24px; font: 22px 'Bebas Neue',sans-serif; }
@keyframes day-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes day-stripe { from { transform: rotate(-15deg) scaleX(0); } to { transform: rotate(-15deg) scaleX(1); } }
@keyframes day-date { from { opacity: 0; transform: translateY(50px) rotate(8deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@media (max-height: 760px) and (min-width: 768px) { .command-list { gap: 5px; } .command-list button { padding-top: 3px; padding-bottom: 3px; } }
@media (max-width: 767px), (max-height: 500px) and (max-width: 1024px) {
    .command-title { max-width: 100%; }
    .command-title h1 > span { overflow-wrap: anywhere; }
    .settings-form { padding: 16px 12px; }
    .form-actions { gap: 14px; }
    .settings-form .ui-btn { white-space: normal; width: 100%; }
    .day-change-content { transform: rotate(-3deg); }
}
.command-home { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: auto 1fr; gap: 32px 5vw; height: auto; overflow: visible; padding: max(145px,17dvh) 5vw max(32px,env(safe-area-inset-bottom)); align-items: start; }
.command-title { position: static; grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; transform: rotate(3deg); }
.command-title h1 > span { overflow-wrap: anywhere; }
.command-list { display: grid; grid-auto-rows: 1fr; align-items: stretch; grid-column: 1; grid-row: 1 / 3; align-self: center; width: 100%; padding: 14px 16px; gap: 30px; }
.command-list button { min-height: 64px; width: 100%; padding: 12px 24px; gap: 14px; isolation: isolate; background: transparent; box-shadow: none; transform: none; border-radius: 0; transition: color .24s ease,transform .3s cubic-bezier(.16,1,.3,1); }
.command-list button::after,.pause-nav [role=tab]::before,.menu-back::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #171219; clip-path: polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); transition: background-color .24s ease,transform .3s cubic-bezier(.16,1,.3,1); }
.menu-back::before { border: 1px solid #61515b; }
.command-label { display: inline-block; font-size: clamp(35px,4.2vw,64px); transform-origin: left center; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.command-list [data-open-tab=customization],.pause-nav [data-tab=customization] { container-type: inline-size; }
.command-list [data-open-tab=customization] .command-label { font-size: min(clamp(20px,2.6vw,40px),9.3cqi); }
.command-list button:is(:hover,:focus-visible) { background: transparent; color: #171219; box-shadow: none; }
.command-list button:is(:hover,:focus-visible)::after { background: #eee8e5; transform: none; }
.command-arrow { margin-left: auto; transition: opacity .2s,transform .3s; }
.command-list button:is(:hover,:focus-visible) .command-arrow { transform: translate(3px,-3px); }
.home-quest { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; min-width: 0; width: 100%; max-width: 480px; padding: 8px 10px 12px 0; }
.quest-toggle { position: relative; isolation: isolate; display: none; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 12px 24px; border: 0; background: transparent; color: var(--on-accent); font: 30px/1 'Bebas Neue',sans-serif; text-align: left; }
.quest-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ui-accent); clip-path: polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%); }
.quest-toggle-arrow { width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .24s ease; }
.quest-toggle[aria-expanded=true] .quest-toggle-arrow { transform: rotate(225deg); }
@keyframes quest-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.home-quest .quest-card { margin: 0; padding: clamp(18px,2vw,30px); border-width: 2px; box-shadow: 7px 7px 0 var(--ui-accent); transform: rotate(-1deg); }
.home-quest .quest-stamp { margin: 0 0 16px; font-size: 21px; color: var(--on-accent); }
.home-quest .section-kicker { color: #c5c5cc; }
.home-quest h3 { font-size: clamp(30px,3vw,44px); }
.home-quest .fine-print { color: #c5c5cc; }
.home-quest .ui-btn { width: 100%; min-height: 48px; font-size: 16px; white-space: normal; line-height: 1.4; }
.home-quest .gain-pill { border-color: #6b626d; color: #eee8e5; }
.home-quest .gain-pill strong { color: #fff; }
.pause-shell { grid-template-columns: 300px minmax(0,1fr); gap: 32px; }
.pause-nav { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: visible; padding-right: 0; }
.pause-nav [role=tablist] { display: grid; grid-template-rows: repeat(5,minmax(62px,1fr)); flex: 1; min-height: 0; gap: 18px; padding: 28px max(32px,3dvh); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--ui-accent) transparent; }
.pause-nav .menu-back,.pause-nav .nav-caption { flex-shrink: 0; }
.pause-nav [role=tab]::before { border: 1px solid #51404a; }
.pause-nav [role=tab] { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 14px 20px; transform: none; background: transparent; box-shadow: none; transition: transform .4s cubic-bezier(.16,1,.3,1),color .24s ease; }
.pause-nav [role=tab] .tab-number { flex-shrink: 0; margin: 0; font: 10px 'Montserrat',sans-serif; }
.pause-nav [role=tab] .tab-label { display: inline-block; margin: 0; color: inherit; font: 31px/1.1 'Bebas Neue',sans-serif; transform-origin: left center; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.pause-nav [data-tab=customization] .tab-label { font-size: min(23px,10.6cqi); }
.pause-nav [role=tab][aria-selected=true] { background: transparent; color: var(--on-accent); box-shadow: none; }
.pause-nav [role=tab][aria-selected=true]::before { background: var(--ui-accent); }
.command-list button,.pause-nav [role=tab] { transform: skewX(-10deg); }
.command-list button::after,.pause-nav [role=tab]::before { clip-path: none; transition: none; }
.menu-panel,.pause-shell { animation: none; }
@media (min-width: 768px) and (max-width: 1100px) and (min-height: 501px) {
    .pause-shell { grid-template-columns: 235px minmax(0,1fr); gap: 20px; padding-left: 24px; padding-right: 24px; }
    .pause-nav [role=tab] { padding-left: 12px; padding-right: 12px; gap: 8px; }
    .pause-nav [role=tab] .tab-label { font-size: 26px; }
    .pause-nav [data-tab=customization] .tab-label { font-size: min(18px,10.6cqi); }
    .command-home { column-gap: 28px; padding-left: 28px; padding-right: 28px; }
    .command-label { font-size: 38px; }
    .command-list button { padding-left: 16px; padding-right: 16px; gap: 8px; }
}
@media (max-width: 767px), (max-height: 500px) and (max-width: 1024px) {
    .command-home { display: flex; flex-direction: column; height: auto; min-height: 100dvh; overflow: visible; gap: 24px; padding: calc(env(safe-area-inset-top) + 140px) max(20px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
    .command-title { align-self: flex-start; margin: 0 0 4px; transform: rotate(-2deg); }
    .command-title h1 { font-size: clamp(34px,9vw,52px); }
    .command-list { width: 100%; padding: 12px 10px; gap: 24px; }
    .command-list button { min-height: 64px; padding: 12px 18px; transform: none; }
    .command-label { font-size: clamp(30px,8.2vw,45px); }
    .command-list [data-open-tab=customization] .command-label { font-size: min(clamp(19px,5.1vw,30px),9.3cqi); }
    .home-quest { align-self: stretch; max-width: 100%; margin: 0; padding: 0; }
    .quest-toggle { display: flex; }
    .home-quest[data-expanded=false] .quest-card { display: none; }
    .home-quest .quest-card { transform: none; padding: 22px 18px; margin-top: 14px; }
    .home-quest[data-expanded=true] .quest-card { animation: quest-reveal .22s ease-out; }
    .home-quest h3 { font-size: 34px; }
    .pause-shell { display: flex; gap: 16px; padding-top: calc(env(safe-area-inset-top) + 140px); }
    .pause-nav { height: auto; overflow: visible; padding-right: 0; }
    .pause-nav [role=tablist] { flex: none; grid-template-rows: none; grid-auto-rows: minmax(58px,auto); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px; padding: 10px max(12px,3.5vw); overflow: visible; }
    .pause-nav [role=tab]:last-child { grid-column: 1 / -1; }
    .pause-nav [role=tab] { min-height: 58px; padding: 12px 8px; gap: 6px; transform: none; white-space: normal; }
    .pause-nav [role=tab] .tab-number { font-size: 9px; }
    .pause-nav [role=tab] .tab-label { font-size: clamp(21px,5.8vw,29px); }
    .pause-nav [data-tab=customization] .tab-label { font-size: min(clamp(14px,3.7vw,20px),10.6cqi); }
    input,textarea,select,.settings-form input,.settings-form select { font-size: 16px; }
    .text-link,.danger-btn { min-height: 44px; }
}
.ui-btn:hover,.ui-btn:active,.command-list button:hover,.command-list button:active,.command-list button:focus-visible,.pause-nav [role=tab]:hover,.pause-nav [role=tab]:active,.pause-nav [role=tab]:focus-visible {
    position: relative;
    z-index: 1;
    background-color: #fff;
    color: var(--ui-accent);
    transform: skewX(-10deg) scale(1.10);
    box-shadow: 4px 4px 0 var(--ui-focus);
}
.command-list button:is(:hover,:active,:focus-visible)::after,.pause-nav [role=tab]:is(:hover,:active,:focus-visible)::before { background: transparent; border-color: transparent; }
.pause-nav [role=tab]:is(:hover,:active,:focus-visible) .tab-number { color: inherit; }
@media (max-width: 767px), (max-height: 500px) and (max-width: 1024px) {
    .command-list button:is(:hover,:active,:focus-visible),.pause-nav [role=tab]:is(:hover,:active,:focus-visible) { transform: none; }
}
@media (max-width: 359px) { .calendar-hud { transform: scale(.7) !important; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .command-list button,.pause-nav [role=tab] { translate: none; } }