/* Mode styles override presentation only. Finance and keyboard layout stay shared. */
[hidden],#gameModePanel[hidden],#journeySavings[hidden],#modeHeading[hidden]{display:none!important}
.hub-eyebrow{font-size:10px;font-weight:850;letter-spacing:.13em;color:var(--b);display:block;margin-bottom:8px}
.hub-intro{padding:26px;margin-bottom:22px}
.hub-intro .setting{padding:0 0 20px}
.hub-intro h2{font-size:clamp(23px,3vw,32px);letter-spacing:-.04em;margin:0 0 7px}
.hub-saving-note{margin:16px 0 0;color:var(--muted)}
#gameHubMessage:empty{display:none}
#gameHubMessage{padding:12px 16px;margin:0 0 16px;background:color-mix(in srgb,var(--b) 8%,var(--p));border-radius:12px;color:var(--ink)}
.hub-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hub-mode-card{border:1px solid var(--line);border-radius:22px;background:var(--p);overflow:hidden;box-shadow:var(--shadow);min-width:0;transition:border-color .2s,box-shadow .2s}
.hub-mode-card.selected{border:2px solid var(--b);box-shadow:0 8px 28px color-mix(in srgb,var(--b) 12%,transparent)}
.hub-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:17px 19px;font-weight:800}
.hub-badge{border-radius:999px;background:var(--bg);padding:5px 9px;font-size:11px;color:var(--muted);font-weight:700;white-space:nowrap}
.selected .hub-card-top .hub-badge{background:color-mix(in srgb,var(--b) 15%,var(--p));color:var(--b)}
.hub-card-copy{padding:22px}
.hub-card-copy h3{font-size:21px;letter-spacing:-.03em;line-height:1.25;margin:0 0 10px;min-height:52px}
.hub-card-copy p{color:var(--muted);margin:0 0 22px;min-height:66px;line-height:1.6}
.hub-card-progress{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:8px}
.hub-card-progress span{color:var(--muted)}
.hub-card-copy>small{display:block;color:var(--muted);font-size:11px;margin:9px 0 18px}
.hub-card-copy>.btn{width:100%;min-height:46px}
.mode-rpg .btn.primary{background:#7043b0;border-color:#7043b0}
.mode-journey .btn.primary{background:#167540;border-color:#167540}
.mode-minimalist .btn.primary{background:#c8433d;border-color:#c8433d}
.hub-preview-scene,.hub-preview-path,.hub-preview-minimal{height:170px;margin:0 16px;border-radius:14px;position:relative;overflow:hidden}
.hub-preview-scene{background-position:center;background-size:cover;display:grid;place-items:center}
.hub-preview-scene>span{position:absolute;bottom:13px;left:15px;color:white;font-size:10px;font-weight:800;letter-spacing:.1em}
.hub-preview-path{background:linear-gradient(140deg,#e1efcd,#f7efd5);display:flex;align-items:center;justify-content:center;padding:18px}
.hub-preview-path span{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:24px;border:3px solid #a0c77a;box-shadow:0 5px 0 #b9d6a3}
.hub-preview-path span:nth-of-type(2){transform:translateY(-22px)}
.hub-preview-path i{width:25px;border-bottom:3px dashed #79a966}
.hub-preview-minimal{background:#faf4f3;border:1px solid #efdfdd;padding:22px;color:#734e4c}
.hub-preview-minimal>span{font-size:11px;font-weight:700}
.hub-preview-minimal>div{height:95px;display:flex;align-items:end;justify-content:space-between;gap:12px;padding-top:15px}
.hub-preview-minimal i{background:#e5aaa5;flex:1;border-radius:4px 4px 0 0}
.hub-footnote{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:24px}
.hub-footnote p{color:var(--muted);max-width:720px;margin:5px 0 0}
.hub-footnote>.btn{flex-shrink:0}
.game-play-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:20px}
.game-mode-chip{font-size:12px;font-weight:800;border-color:var(--b);color:var(--b);min-height:40px}
.mode-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 18px}
.mode-heading h2{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.035em;margin:0}
.mode-heading .hub-eyebrow{margin-bottom:4px}
.hub-dashboard{padding:20px}
.hub-dashboard-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}
.rpg-layout,.journey-layout,.minimal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;align-items:stretch;min-width:0}
.rpg-scene{min-height:290px;align-items:start;isolation:isolate}
.rpg-scene .game-hero-text{padding:22px;max-width:65%}
.rpg-scene h2{font-size:28px}
.rpg-scene .hub-avatar{position:absolute;right:8%;bottom:17px;z-index:2}
.hub-avatar{width:132px;height:155px;position:relative;display:grid;place-items:center}
.hub-avatar img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 7px 0 #201a3a25)}


.hub-avatar.mini{width:84px;height:100px;margin:auto}
.avatar-companion{position:absolute;right:-13px;bottom:12px;color:#ffdf76;font-size:32px;text-shadow:0 3px 0 #59343c}
.rpg-quest h3{font-size:21px;margin:0 0 15px;letter-spacing:-.025em}
.rpg-quest>.game-track{margin-top:8px}
.hub-quest-link{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);margin-bottom:8px}
.hub-quest-link>span{font-weight:650}
.rpg-quest>small,.hub-checkin small{color:var(--muted);line-height:1.5;font-size:11px}
.hub-checkin{margin:15px 0 0;padding:15px;border:1px solid var(--line);border-radius:13px;background:var(--bg)}
.hub-checkin .btn{flex-shrink:0;max-width:180px;min-height:44px;font-size:12px}
.hub-checkin p{font-size:12px;line-height:1.55;margin-bottom:6px}
.game-play-hero,.hub-week,.hub-milestones,.hub-rewards{margin-bottom:20px}
.hub-week .game-day strong{min-height:54px}
.hub-rewards>p{color:var(--muted)}
.hub-rewards .game-theme-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.hub-rewards .game-theme-choice{padding:10px}
.hub-rewards .game-theme-preview{height:95px}
.hub-outfits{border-top:1px solid var(--line);margin-top:25px;padding-top:14px}
.hub-outfit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,180px));gap:14px}
.hub-outfit-grid .game-theme-choice{text-align:center}
.journey-copy{position:relative;padding:10px 100px 10px 4px}
.journey-copy h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.04em;line-height:1.12;margin:0 0 13px}
.journey-copy>p{color:var(--muted);max-width:360px;line-height:1.65;margin-bottom:26px}
.journey-copy .game-track{margin-top:10px}
.journey-mascot{position:absolute;right:0;top:38px;background:#ffcd50;width:76px;height:76px;border:4px solid #bc8820;box-shadow:0 5px 0 #d2b66b;border-radius:50%;transform:rotate(9deg);color:#513809}
.journey-mascot>span{position:absolute;left:13px;top:18px;font-size:11px;text-shadow:27px 0 #513809}
.journey-mascot>b{position:absolute;left:18px;bottom:4px;font-size:35px}
.journey-mascot>i{position:absolute;right:-2px;top:-27px;color:#399849;font-size:40px;font-style:normal}
.hub-stat-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hub-stat-pills>span{border:1px solid var(--line);background:var(--p);padding:7px 10px;border-radius:999px;font-size:11px;font-weight:750}
.journey-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px;position:relative;padding:20px 8px;background:color-mix(in srgb,var(--g) 6%,var(--p));border-radius:17px}
.journey-step{display:grid;justify-items:center;text-align:center;gap:5px;min-width:0;position:relative}
.journey-step>span{display:grid;place-items:center;width:56px;height:56px;border:3px solid var(--line);border-radius:50%;background:var(--p);font-size:24px;color:var(--muted);box-shadow:0 4px 0 var(--line)}
.journey-step.reached>span{border-color:var(--g);box-shadow:0 4px 0 color-mix(in srgb,var(--g) 40%,var(--p))}
.journey-step.next>span{outline:2px dashed var(--g);outline-offset:4px}
.journey-step>b{font-size:11px}
.journey-step>small{color:var(--muted);font-size:10px}
.journey-path.compact{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding-block:14px}
.journey-path.compact .journey-step>span{width:45px;height:45px;font-size:20px}
.journey-savings{margin-top:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--g) 9%,var(--p)),var(--p));display:grid;gap:14px}
.journey-savings h2{margin:0;font-size:22px}
.journey-savings p{margin:7px 0 0;color:var(--muted)}
.journey-savings>small{color:var(--muted);font-size:11px}
.savings-path{display:flex;justify-content:space-around;gap:10px;position:relative}
.savings-path:before{content:'';position:absolute;left:12%;right:12%;top:25px;border-top:3px dashed var(--line)}
.savings-path>div{z-index:1;display:grid;justify-items:center;gap:8px}
.savings-path span{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--p);border:3px solid var(--line);font-size:23px;color:var(--muted)}
.savings-path .reached span{border-color:var(--g)}
.savings-path b{font-size:12px}
.minimal-layout h2{font-size:22px;letter-spacing:-.025em;margin:0 0 10px}
.minimal-layout p{font-size:12px;color:var(--muted);margin:0 0 16px}
.minimal-layout .game-track{margin-top:8px}
.minimal-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.minimal-stats>div{border:1px solid var(--line);border-radius:12px;display:grid;gap:4px;padding:12px}
.minimal-stats b{font-size:20px}
.minimal-stats span{font-size:10px;color:var(--muted)}
.minimal-layout .game-trail-heading{margin-bottom:12px;font-size:12px}
.minimal-layout .game-day strong{min-height:32px}
body[data-app-mode="rpg"]{--b:#7646bc;--g:#7646bc;--side-color:#271c3e;--bg:#f5f1fa;--line:#e3daec;--ink:#30233f;--muted:#71657d;background-color:var(--bg)}
body[data-app-mode="journey"]{--b:#19783e;--g:#19783e;--side-color:#12482f;--bg:#f7f8ef;--line:#dfe7d3;--ink:#183b27;--muted:#63735e;background-color:var(--bg)}
body[data-app-mode="minimalist"]{--b:#c84942;--g:#bb403a;--side-color:#fbf8f7;--bg:#faf9f8;--line:#e9e2e0;--ink:#292727;--muted:#79716f;--shadow:0 3px 12px #20181504;background-color:var(--bg)}
body[data-app-mode="rpg"] .side,body[data-app-mode="journey"] .side{background:var(--side-color)}
body[data-app-mode="minimalist"] .side{background:var(--side-color);color:var(--ink);border-right:1px solid var(--line)}
body[data-app-mode="minimalist"] nav button{color:var(--muted)}
body[data-app-mode="minimalist"] nav button.on,body[data-app-mode="minimalist"] nav button:hover{background:color-mix(in srgb,var(--b) 9%,var(--p));color:var(--b);box-shadow:none}
body[data-app-mode="minimalist"] .sidebar-collapse{color:var(--muted);border-color:var(--line)}
body[data-app-mode="minimalist"] .free{background:var(--p);border-color:var(--line);color:var(--muted)}
body[data-app-mode="minimalist"] .free strong,body[data-app-mode="minimalist"] .free b{color:var(--ink)}
body[data-app-mode="minimalist"] .free span,body[data-app-mode="minimalist"] .free small{color:var(--muted)}
body.game-mode-on .btn.primary{background:var(--g);border-color:var(--g);box-shadow:none}
body[data-app-mode="journey"] .btn.primary{box-shadow:0 3px 0 #0e512a;border-radius:13px;font-weight:850}
body[data-app-mode="rpg"] .panel,body[data-app-mode="rpg"] .card{border-radius:19px}
body[data-app-mode="journey"] .panel,body[data-app-mode="journey"] .card{border-radius:22px}
body[data-app-mode="minimalist"] .panel,body[data-app-mode="minimalist"] .card{border-radius:12px;box-shadow:none}
body.game-mode-on .mode-summary{grid-template-columns:1.35fr 1fr 1fr 1fr}
body.game-mode-on #overview>.cards>.mode-balance{order:-1;background:var(--b);color:#fff;border-color:var(--b)}
body.game-mode-on #overview>.cards>.mode-balance small,body.game-mode-on #overview>.cards>.mode-balance .delta{color:#fff}
body[data-app-mode="minimalist"] #overview>.cards>.metric{background:var(--p);border-top:1px solid var(--line);min-height:126px}
body[data-app-mode="minimalist"] #overview>.cards>.mode-balance{background:var(--p);border-color:var(--line);color:var(--ink)}
body[data-app-mode="minimalist"] #overview>.cards>.mode-balance small,body[data-app-mode="minimalist"] #overview>.cards>.mode-balance .delta{color:var(--muted)}
body[data-app-mode="minimalist"] .more-card,body[data-app-mode="minimalist"] #overview>.grid>.panel{border-top:1px solid var(--line)}
body[data-app-mode="minimalist"][data-game-theme]:not([data-game-theme="plain"]),body[data-app-mode="journey"][data-game-theme]:not([data-game-theme="plain"]){background-image:linear-gradient(color-mix(in srgb,var(--bg) 96%,transparent),color-mix(in srgb,var(--bg) 96%,transparent)),var(--game-page-scene)}
body.dark.game-mode-on{--bg:#121821;--p:#1b2430;--ink:#f2f3f5;--muted:#b1b9c5;--line:#34404e;--shadow:0 5px 20px #0002}
body.dark[data-app-mode="rpg"]{--b:#be9bf1;--g:#8b5bca;--side-color:#251d34}
body.dark[data-app-mode="journey"]{--b:#94d6a7;--g:#247341;--side-color:#172e22}
body.dark[data-app-mode="minimalist"]{--b:#f39b91;--g:#b64d45;--side-color:#18202b}
body.dark.game-mode-on #overview>.cards>.mode-balance{background:var(--g);border-color:var(--g)}
body.dark[data-app-mode="minimalist"] #overview>.cards>.mode-balance{background:var(--p);border-color:var(--line)}
button:disabled{cursor:default;opacity:.55}
#gameHub button:focus-visible,#gamePlay button:focus-visible,.hub-dashboard button:focus-visible,.game-mode-chip:focus-visible{outline:3px solid var(--b);outline-offset:3px}
.checkin-celebrate{animation:hubCelebrate .65s ease-out}
@keyframes hubCelebrate{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--b) 20%,transparent)}}
@media(min-width:1400px){
  body[data-app-mode="minimalist"] #overview.on{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}
  body[data-app-mode="minimalist"] #overview>*{grid-column:1/-1;margin-block:0}
  body[data-app-mode="minimalist"] #overview>.cards{grid-column:1;grid-row:5;grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-app-mode="minimalist"] #gameModePanel{grid-column:2;grid-row:5/span 3;align-self:start}
  body[data-app-mode="minimalist"] #gameModePanel .minimal-layout{grid-template-columns:1fr;gap:22px}
  body[data-app-mode="minimalist"] #gameModePanel .hub-checkin{flex-direction:column;align-items:stretch}
  body[data-app-mode="minimalist"] #gameModePanel .hub-checkin .btn{max-width:none}
  body[data-app-mode="minimalist"] #overview>.quick-entry-panel{grid-column:1;grid-row:6}
  body[data-app-mode="minimalist"] #overview>.grid{grid-column:1;grid-row:7;grid-template-columns:1fr}
}
@media(max-width:1250px){.hub-mode-grid{gap:12px}.hub-card-copy{padding:18px}.hub-card-copy h3{font-size:19px}.hub-card-copy p{min-height:88px}.hub-rewards .game-theme-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.rpg-scene .game-hero-text{max-width:75%}.journey-path.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){body.game-mode-on .mode-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-card-top{padding:14px;font-size:12px}.hub-card-copy h3{min-height:48px}.rpg-layout,.journey-layout{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:760px){
  .hub-mode-grid{grid-template-columns:1fr;gap:18px}.hub-card-copy h3,.hub-card-copy p{min-height:0}.hub-card-copy p{margin-bottom:16px}.hub-card-copy h3{font-size:22px}.hub-card-top{font-size:14px;padding:17px 20px}
  .hub-preview-scene,.hub-preview-path,.hub-preview-minimal{height:130px}.hub-intro{padding:20px}.hub-footnote{flex-direction:column;align-items:stretch;gap:15px}
  .rpg-layout,.journey-layout,.minimal-layout{grid-template-columns:1fr}.hub-dashboard{padding:16px}.rpg-scene{min-height:240px}.rpg-scene .hub-avatar{width:120px;height:140px}
  .journey-copy{min-height:210px;padding-right:95px}.game-play-toolbar{flex-wrap:wrap}.game-play-toolbar .btn{flex:1;font-size:12px;white-space:normal}
  .hub-checkin{flex-direction:column;align-items:stretch}.hub-checkin .btn{max-width:none;width:100%}.hub-rewards .game-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-rewards .head{align-items:start;flex-wrap:wrap}.hub-outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mode-heading{align-items:start;gap:12px}.mode-heading h2{font-size:20px}.mode-heading>.btn{font-size:11px;max-width:125px;white-space:normal;flex-shrink:0}
  .hub-dashboard-footer{gap:12px}.hub-dashboard-footer .btn{font-size:11px;white-space:nowrap}
}
@media(max-width:680px){
  body.game-mode-on #overview>.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;scroll-snap-type:none}
  body.game-mode-on #overview>.cards>.metric{width:auto;flex:auto;min-width:0;min-height:112px}
  body.game-mode-on #overview>.cards>.mode-balance{grid-column:1/-1;min-height:125px}
  body.game-mode-on #overview>.cards>.mode-currencies{grid-column:1/-1;min-height:90px}
  body.game-mode-on #overview>.grid{display:grid;grid-template-columns:1fr;overflow:visible;scroll-snap-type:none}
  body.game-mode-on #overview>.grid>.panel{min-width:0;flex:auto}
  body.game-mode-on .top .actions{display:flex;gap:8px}.game-mode-chip{flex:1}
  .hub-intro .game-mode-setting{flex-wrap:nowrap;align-items:start}.hub-intro .game-mode-setting .toggle{margin-top:6px}
  .hub-quest-link{font-size:12px}.hub-stat-pills>span{font-size:10px}.hub-week .head{align-items:start;flex-wrap:wrap}.hub-week .head>span{font-size:11px}
  .hub-outfit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.checkin-celebrate{animation:none}.hub-mode-card,.game-track>span{transition:none}.journey-mascot{transform:none}}