/* Visual hierarchy v0.2: intent > actionable cards/resources > subject art > journey. */
:root{--muted:#4f5d52;--red:#923b2c;--green:#315e49}
body{background-image:radial-gradient(#263b330a .65px,transparent .65px);background-size:6px 6px}
.topbar{background:var(--paper);height:88px;border-bottom:1px solid #263b3360}
.wordmark{font-size:23px}.wordmark span{font-size:10px;letter-spacing:.4px}
.tools button{font-size:12px;padding:10px 0}.life-stats{gap:24px}
.health{min-width:166px}.health b{font-size:19px;font-weight:700}.health small{font-size:12px}
.health>span,.cash span{font-size:12px}.meter{height:8px}.age b{font-size:29px}
.game-layout{grid-template-columns:180px minmax(0,1fr);gap:32px;padding:30px 4.3%}
.journey h2{font-size:25px}.journey-caption{font-size:11px;line-height:1.7;margin-bottom:25px}
.timeline li{padding-bottom:24px}.timeline li b{font-size:11px}.timeline li>span:not(.timeline-dot){font-size:12px}
.journey .relic{box-shadow:none;border-color:#263b3330;background:transparent;padding:13px 11px}
.journey .relic strong{font-size:15px}.journey .relic p{font-size:11px;color:var(--ink)}
.save-state{font-size:10px}.eyebrow{font-size:11px;letter-spacing:.3px}

/* Scene art never carries gameplay text. */
.city-art{position:absolute;inset:0 0 auto;width:100%;height:390px;object-fit:cover;object-position:75% center;mix-blend-mode:multiply}
.title-screen{padding-top:45px;grid-template-columns:.85fr 1.15fr;gap:18px}
.title-copy h1{font-size:clamp(78px,8vw,116px);margin-top:18px}
.title-table{min-height:590px;padding:0;transform:none}
.title-fan{top:auto;bottom:12px;left:0;height:245px}
.title-fan .card{height:260px;min-height:260px;width:177px;min-width:177px;max-width:177px}
.title-fan .card:nth-child(1){transform:translate(-135px,8px) rotate(-13deg)}
.title-fan .card:nth-child(2){transform:translate(0,-10px) rotate(2deg)}
.title-fan .card:nth-child(3){transform:translate(135px,12px) rotate(14deg)}
.title-fan .card-art{height:84px;flex:0 0 84px}.title-fan .card-flavor{display:none}
.path-portrait{height:126px;width:100%;object-fit:contain;mix-blend-mode:multiply;margin-top:16px}
.path:has(.path-portrait) strong{margin-top:15px}.path{padding:22px}.path strong{font-size:23px}
.path-subtitle{font-size:12px}.path-detail{font-size:11px}.path-go{font-size:13px}
.path.boss .path-portrait{height:170px}.path.boss{border:2px solid var(--red)}

/* Battle: the action preview is the strongest UI block. */
.battle-heading h1{font-size:32px;line-height:1.3;letter-spacing:-1px;margin-bottom:8px}
.battle-heading .eyebrow{font-size:12px;font-weight:700;margin-bottom:8px}
.battle-heading p:not(.eyebrow){font-size:13px;line-height:1.5}
.turn-chip{font-size:25px;padding:9px 13px;color:var(--muted);border-color:#263b3330}
.turn-chip span{font-size:10px}
.battle-table{grid-template-columns:155px minmax(180px,1.4fr) minmax(205px,1fr);gap:20px;margin:16px 0 20px;min-height:0}
.player-note{padding:14px 12px;transform:rotate(-2deg);border-left:2px solid #263b3360}
.player-note>strong{display:none}.player-note>.eyebrow{display:block;font-size:11px;margin-bottom:12px}
.player-note dl div{padding:9px 0}.player-note dt{font-size:11px}.player-note dd{font-size:25px;font-weight:700}
.player-note dd small{font-size:10px;font-weight:400}
.enemy-art.generated-enemy{width:250px;height:240px;max-width:100%;zoom:1;transform:none;position:relative}
.generated-enemy img{width:100%;height:100%;object-fit:contain}
.enemy-art.boss-portrait{width:295px;height:260px}
.enemy-health{margin-top:6px;width:92%;max-width:300px}
.enemy-health>span{font-size:12px}.enemy-health b{font-size:18px;font-weight:700}
.enemy-health small{font-size:12px;font-weight:700}.enemy-health .meter{height:8px;margin-top:7px}
.status-tags{margin-top:7px;gap:5px;min-height:0}.status-tags:empty{display:none}
.status-tags span{font-size:11px;font-weight:700;padding:4px 6px}
.intent-note{padding:21px 20px;transform:rotate(1.5deg);border:2px solid var(--ink);background:var(--sheet);box-shadow:4px 4px 0 #263b3310}
.intent-note.pressure{border-left:7px solid var(--red)}
.intent-note:before{display:none}.intent-note>.eyebrow{font-size:12px;font-weight:700;letter-spacing:0}
.intent-note>strong{font:700 26px/1 var(--sans);margin:18px 0 12px;display:flex;align-items:baseline;gap:10px}
.intent-note strong b{font:700 54px/.95 var(--mono);letter-spacing:-3px;margin:0}
.intent-note p{font-size:12px;margin-bottom:12px}.intent-note small{font-size:13px;font-weight:700;line-height:1.6}
.intent-foot{font-size:11px;padding-top:11px;margin-top:12px}
.hand-toolbar{border-top:2px solid var(--ink);padding-top:14px;gap:14px}
.time-resource>b{font-size:31px;font-weight:700;width:46px;height:46px}
.time-resource>span{font-size:13px;font-weight:700}.time-resource small{font-size:10px;font-weight:400}
.pile-buttons{gap:16px}.pile-buttons button{font-size:11px}.pile-buttons b{font-size:14px;font-weight:700}
.end-turn{padding:13px 22px;font-size:14px;font-weight:700;min-height:47px}

/* A consistent card stack: cost/type, bounded image, name, rules, resolved effect. */
.hand{justify-content:flex-start;gap:10px;padding:21px 6px 16px;min-height:0;scrollbar-width:thin}
.card{padding:11px;min-width:148px;max-width:205px;min-height:285px;border:1px solid var(--ink);border-top:4px solid var(--card-accent);border-radius:5px;background:var(--sheet);box-shadow:2px 3px 0 #263b3320;transform:rotate(calc(var(--tilt,0deg) * .45));animation-duration:.17s}
.hand .card{flex:1 0 148px;min-height:274px;max-width:195px}
.card.action{--card-accent:#923b2c}.card.care{--card-accent:#315e49}.card.habit{--card-accent:#71512b}.card.status{--card-accent:#555b52}
.card:after{display:none}.card-top{gap:8px;min-height:29px}.card-cost{width:29px;height:29px;font:700 21px var(--mono);border:0}
.card-kind{font-size:11px;letter-spacing:0}.card-shortcut{font-size:11px;color:#4f5d52}
.card-art{height:94px;flex:0 0 94px;margin:7px -3px 8px;background:var(--paper);border:0;border-radius:2px;isolation:isolate;overflow:hidden}
.card-art img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.card-name{font:700 17px/1.35 var(--sans);letter-spacing:-.6px;margin:0 0 9px;min-height:23px}
.card-text{font-size:12px;line-height:1.55;color:var(--ink);flex:1}
.card-live{font-size:12px;font-weight:700;line-height:1.5;padding-top:7px;margin-top:7px;border-top:1px solid #263b3330;color:var(--card-accent)}
.card-flavor{font-size:10px;line-height:1.5;margin-top:10px;padding-top:8px}
.card:disabled{opacity:1;filter:none;background:#ded9c4}.card:disabled .card-art{opacity:.42;filter:grayscale(.85)}
.card:disabled .card-cost{background:#666d62}.card:disabled .card-text,.card:disabled .card-name{color:#4f574e}
.card.status:disabled{opacity:1}.card.status .card-art{filter:grayscale(1)}
.battle-footer{margin-top:2px}.battle-log{font-size:11px;line-height:1.6}.battle-footer>span{font-size:10px}
.reward-cards .card{min-height:350px}.reward-cards .card-art{height:125px;flex-basis:125px}
.deck-grid .card{min-height:315px}.deck-grid .card-art{height:104px;flex-basis:104px}
.card-cta{font-size:12px;font-weight:700}.dialog-intro{font-size:13px}

@media(min-width:801px) and (max-height:850px){
  .topbar:has(.life-stats){height:64px}.in-battle{padding-top:16px;padding-bottom:18px;gap:26px}
  .in-battle .battle-heading h1{font-size:27px}.in-battle .battle-heading .eyebrow{font-size:11px;margin:0 0 5px}
  .in-battle .battle-heading p:not(.eyebrow){font-size:12px}
  .in-battle .battle-table{grid-template-columns:140px minmax(165px,1.25fr) minmax(205px,1fr);margin:10px 0 14px;gap:16px}
  .in-battle .enemy-art.generated-enemy{width:194px;height:173px;zoom:1}.in-battle .enemy-art.boss-portrait{width:220px;height:180px}
  .in-battle .enemy-health{margin-top:0}.in-battle .enemy-health b{font-size:16px}
  .in-battle .player-note dd small{display:none}.in-battle .player-note dl div{padding:6px 0}
  .in-battle .intent-note{padding:16px}.in-battle .intent-note>strong{font-size:24px;margin:12px 0 9px}
  .in-battle .intent-note strong b{font-size:46px}.in-battle .intent-note p{margin-bottom:8px}
  .in-battle .intent-foot{display:none}.in-battle .hand-toolbar{padding-top:10px}
  .in-battle .hand{padding-top:17px;padding-bottom:12px;min-height:0}.in-battle .hand .card{min-height:248px;min-width:148px}
  .in-battle .hand .card-art{height:72px;flex-basis:72px}.in-battle .hand .card-flavor{display:none}
  .in-battle .hand .card-name{font-size:16px;margin-bottom:7px}.in-battle .hand .card-text{font-size:12px}
  .in-battle .journey-caption{margin-bottom:17px}.in-battle .timeline li{padding-bottom:21px}
}
@media(max-width:1100px) and (min-width:801px){
  .game-layout{grid-template-columns:142px minmax(0,1fr);gap:22px;padding-inline:26px}
  .battle-table,.in-battle .battle-table{grid-template-columns:105px minmax(140px,1fr) minmax(175px,1fr);gap:12px}
  .player-note{padding-inline:6px}.player-note dt{font-size:10px}.intent-note{padding:15px}
  .hand .card{flex:0 0 155px}.title-fan .card:nth-child(1){transform:translate(-100px,8px) rotate(-13deg)}
  .title-fan .card:nth-child(3){transform:translate(100px,12px) rotate(14deg)}
  .pile-buttons{gap:9px}.pile-buttons button{font-size:10px}.end-turn{padding-inline:16px}
}
@media(max-width:800px){
  .topbar{height:auto;padding:17px 20px}.tools button{font-size:11px}.game-layout{display:block;padding:22px 20px}
  .journey h2{font-size:21px}.journey-caption{margin:0;font-size:11px}.journey .timeline{margin:6px 0 0}.timeline li{padding:0}
  .battle-table{grid-template-columns:120px minmax(150px,1fr) minmax(180px,1fr);gap:12px}
  .enemy-art.generated-enemy{width:210px;height:210px}.enemy-art.boss-portrait{height:230px}
  .intent-note strong b{font-size:44px}.intent-note{padding:16px}.intent-foot{display:none}
  .hand .card{flex:0 0 170px;max-width:170px}.card-art{height:92px;flex-basis:92px}
  .title-screen{grid-template-columns:1fr 1fr;padding:35px 25px 0;gap:0}.title-table{margin:0;min-height:550px;transform:none}
  .city-art{height:320px}.title-fan{bottom:55px}.title-fan .card{min-width:145px;width:145px;max-width:145px;height:243px;min-height:243px}
  .title-fan .card:nth-child(1){transform:translate(-72px,5px) rotate(-13deg)}.title-fan .card:nth-child(3){transform:translate(72px,8px) rotate(14deg)}
  .title-fan .card-text{font-size:10px}.title-fan .card-name{font-size:14px}.title-fan .card-art{height:66px;flex-basis:66px}
}
@media(max-width:560px){
  .topbar{padding:15px 16px}.tools{gap:13px}.tools button{font-size:11px}.health{min-width:110px}
  .health>span,.cash span{font-size:11px}.health b{font-size:17px}.life-stats{gap:14px}.wordmark{font-size:20px}
  .game-layout{padding:20px 16px 30px}.journey{padding-bottom:15px;margin-bottom:18px}.journey-caption{font-size:10px}
  .battle-heading h1{font-size:26px}.battle-heading p:not(.eyebrow){font-size:12px;line-height:1.6}.turn-chip{display:none}
  .battle-table{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;margin:18px 0}
  .enemy-object{min-height:0}.enemy-art.generated-enemy{width:170px;height:174px}.enemy-art.boss-portrait{height:190px}
  .enemy-health{width:100%;margin-top:3px}.enemy-health>span{font-size:11px}.enemy-health b{font-size:14px}
  .enemy-health .meter{height:7px}.status-tags span{font-size:10px;padding:3px 5px}
  .intent-note{padding:15px 12px;transform:rotate(1deg);align-self:center}.intent-note>.eyebrow{font-size:10px}
  .intent-note>strong{font-size:21px;gap:6px;margin:14px 0 10px}.intent-note strong b{font-size:40px}
  .intent-note small{font-size:12px}.intent-note p{font-size:11px;line-height:1.5}
  .player-note{grid-column:1/-1;order:3;border:1px solid #263b3340;padding:10px 12px;transform:none;background:var(--sheet)}
  .player-note>.eyebrow{display:none}.player-note dl{width:100%;justify-content:space-between;gap:9px}
  .player-note dl div{padding:0;border:0;gap:7px}.player-note dt{font-size:11px}.player-note dd{font-size:21px}.player-note dd small{display:none}
  .hand-toolbar{gap:12px;padding-top:12px}.time-resource>b{width:41px;height:41px;font-size:28px}
  .time-resource>span{font-size:12px}.time-resource small{font-size:9px}.end-turn{min-height:44px;font-size:13px;padding:10px 15px}
  .pile-buttons{gap:12px}.pile-buttons button{font-size:11px;padding-block:8px}.pile-buttons b{font-size:14px}
  .hand{margin:0 -16px;padding:20px 20px 14px;gap:12px}.hand .card{flex:0 0 170px;min-height:288px;max-width:170px}
  .card-name{font-size:17px}.card-text{font-size:12px}.card-cost{font-size:21px}.card-art{height:94px;flex-basis:94px}
  .card-live{font-size:12px}.card-flavor{font-size:10px}.battle-log{font-size:11px}.scene{padding:27px 21px}
  .path-portrait{height:125px}.path:has(.path-portrait) strong{margin-top:10px}.path.boss .path-portrait{height:160px}
  .title-screen{display:flex;padding:30px 23px 0}.title-copy h1{font-size:89px}.title-copy{padding-bottom:6px}
  .title-description{font-size:20px}.title-small{font-size:13px}.title-table{height:420px;min-height:420px;margin:0 -12px;transform:none}
  .city-art{height:260px;object-position:75% center}.title-fan{bottom:0;left:0;height:210px}
  .title-fan .card{width:143px;min-width:143px;max-width:143px;min-height:231px;height:231px;padding:9px}
  .title-fan .card:nth-child(1){transform:translate(-84px,8px) rotate(-11deg)}.title-fan .card:nth-child(2){transform:translate(0,-7px) rotate(1deg)}
  .title-fan .card:nth-child(3){transform:translate(84px,10px) rotate(11deg)}.title-fan .card-art{height:69px;flex-basis:69px}
  .title-footer{margin-top:25px;font-size:10px}.reward-cards .card{min-height:345px}.reward-cards .card-art{height:118px;flex-basis:118px}
  .deck-grid .card{min-height:305px}.deck-grid .card-art{height:86px;flex-basis:86px}.deck-grid .card-name{font-size:14px}.deck-grid .card-text{font-size:11px}
}
@media(min-width:801px) and (max-height:780px){
  .in-battle .battle-heading h1{font-size:25px;line-height:1.25;margin-bottom:4px}
  .in-battle .battle-heading .eyebrow{line-height:1.1;margin-bottom:5px}
  .in-battle .battle-heading p:not(.eyebrow){line-height:1.4}
  .in-battle .turn-chip{padding:5px 10px;font-size:23px}
  .in-battle .hand-toolbar{padding-top:8px}
  .in-battle .time-resource>b{width:40px;height:40px;font-size:28px}
  .in-battle .end-turn{min-height:41px;padding-block:9px}
  .in-battle .hand{padding-top:15px;padding-bottom:10px}
  .in-battle .hand .card{min-height:225px}
  .in-battle .hand .card-art{height:64px;flex-basis:64px;margin-block:5px 7px}
  .in-battle .card-live{margin-top:5px;padding-top:5px}
}