/* One responsive layout owns each mobile zone; override historical offsets. */
button{touch-action:manipulation}#gearPanel,#questPanel,#statsPanel,#civicPanel{overscroll-behavior:contain}#gearSlots{overflow-x:hidden}.bar i{max-width:100%}.ui-panel-open .shop-panel{visibility:hidden!important}
@media(max-width:620px){body{padding:4px;padding-bottom:max(4px,env(safe-area-inset-bottom));height:100dvh}.handset{width:min(calc(100vw - 8px),calc(100dvh - 16px));max-height:calc(100dvh - 16px);border-radius:8px}}
@container(max-width:600px){
 .hud-top{inset:6px 6px auto;grid-template-columns:minmax(0,1fr) 116px;gap:5px;align-items:start}
 .status{min-width:0;min-height:48px;padding:5px;gap:4px;grid-template-columns:42px minmax(0,1fr)}
 .status>#level{font-size:12px;overflow:hidden;white-space:nowrap}.vitals{min-width:0}.vitals>div{grid-template-columns:14px minmax(10px,1fr) 44px;gap:3px;height:17px}.vitals span,.vitals b{font-size:9px;overflow:hidden;text-overflow:ellipsis}.coins{display:none}
 .game-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}.game-controls button{width:100%;min-width:0;height:32px;padding:0;font-size:12px}
 .map-title{top:58px;left:8px;right:8px;gap:5px;max-height:22px;overflow:hidden}.map-title>span:first-child{font-size:12px;min-width:0;flex:1}.map-title>span:last-child{font-size:10px;flex-shrink:0;padding:2px 4px}
 .game-bottom{inset:auto 6px 6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:40px 28px;gap:4px;height:72px;align-items:stretch;z-index:8}
 .game-bottom #draw{display:none}.game-bottom #statsButton,.game-bottom #gearButton,.game-bottom #questButton{min-width:0;width:100%;height:40px;min-height:40px;padding:4px;font-size:14px;white-space:nowrap;border-radius:6px;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:4px}
 .game-bottom .zoom-controls{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:3px;margin:0;padding:0;border:0;background:none;min-width:0;flex-basis:auto;height:28px}
 .zoom-controls button{height:28px;min-height:28px;min-width:0;width:100%;padding:2px;font-size:10px;background:#17392deb;border:1px solid #668574;border-radius:4px}
 .gear-badge,.stat-dot{margin:0;padding:2px 5px;font-size:11px;max-width:42px;overflow:hidden}
 .skill-belt{inset:auto 6px 84px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;height:37px;z-index:8}.skill-belt button{width:100%;height:37px;min-width:0;padding:1px;border-radius:5px}.skill-belt canvas{height:31px;width:25px}.skill-belt button small{font-size:8px;top:1px;left:2px}
 .activity{bottom:126px;left:8px;right:8px;height:20px}.activity span{max-width:100%;font-size:10px;padding:3px 5px;line-height:14px}.minimap{display:none}
 .boss-hud{top:83px;left:8px;right:8px;padding:5px 7px;max-height:49px;overflow:hidden}.boss-hud>div:first-child{font-size:12px}.boss-hud b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.boss-hud span{font-size:10px;flex-shrink:0}.boss-hud small{font-size:9px;line-height:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.boss-track{height:4px;margin-top:3px}.danger-banner{top:137px;left:8px;right:8px;font-size:10px;line-height:14px;padding:3px 6px;max-height:34px;overflow:hidden}
 #toast{bottom:151px;max-width:90%;font-size:11px;padding:6px 8px;line-height:1.4;z-index:40}#regionTransition{top:36%;padding:10px;left:8%;right:8%}#regionTransition strong{font-size:20px}
 #gearPanel,#questPanel,#civicPanel{inset:8px;width:auto;max-width:none;max-height:none;height:auto;margin:0;padding:10px;transform:none;border-radius:10px;z-index:35;box-shadow:0 4px 22px #071e19b3;background:#19362afa}
 #gearPanel{display:flex;flex-direction:column;gap:6px;overflow:hidden}#gearPanel header{flex-shrink:0;min-height:32px;font-size:16px}#gearPanel header button,#questPanel header button,#civicPanel header button,#statsPanel header button{min-width:36px;min-height:32px}
 #gearPanel .gear-summary{display:none}#gearActions{margin:0;flex-shrink:0}#applyLoadout{min-height:43px;width:100%;font-size:13px;padding:5px}#applyLoadout span{font-size:10px;line-height:1.4;margin:2px 0 0}.gear-tools{margin-top:5px;font-size:10px}.gear-tools button{min-height:30px;font-size:11px;padding:4px}
 #gearSlots{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin:0;padding-right:3px}.rpg-policy{display:flex;gap:5px}.rpg-policy button{flex:1;min-height:31px;font-size:12px}.gear-filter button{min-height:30px}.equipment-item{padding:8px}.equipment-item b,.equipped-row b{font-size:13px;overflow-wrap:anywhere}.equipment-item p{font-size:12px}.equipment-item small,.equipped-row small{font-size:11px}.equipment-item footer button{min-height:32px}.equipment-item footer{flex-wrap:wrap}.equipment-item footer span{min-width:48px}#gearPanel #knownSkills{display:block;max-height:30px;flex-shrink:0;font-size:10px;line-height:1.4;margin:0;padding-top:2px}
 #questPanel,#civicPanel{overflow-y:auto}.quest-panel header{position:sticky;top:-10px;background:#19362a;padding:4px 0;z-index:1;min-height:36px}.quest-entry{padding:9px;margin:8px 0}.quest-entry b{font-size:14px}.quest-entry small,.quest-entry span{font-size:12px}.quest-panel p{font-size:12px}
 #statsPanel{top:50%;bottom:auto;left:50%;right:auto;transform:translate(-50%,-50%);width:min(290px,calc(100% - 24px));max-height:calc(100% - 24px);padding:10px;z-index:36;overflow-y:auto}.stats-panel header{font-size:15px}.stat-points{padding:6px 10px;margin-top:6px}.stat-points strong{font-size:23px}.stat-guide,.stat-footnote{font-size:10px;margin:6px 0}.stat-row{padding:6px;gap:7px;margin:5px 0}.stat-row b{font-size:14px}.stat-row small{font-size:11px}.stat-row button{width:36px;height:36px}
 .card-overlay{inset:6px;height:auto;max-height:none;padding:10px;gap:7px;border-radius:9px;overflow:hidden;display:flex;justify-content:flex-start;background:#173429fc;z-index:45}.card-overlay h2{flex-shrink:0;margin:0;padding:0;font-size:17px;line-height:1.4;text-align:center}.card-caption{flex-shrink:0;font-size:11px;line-height:1.4}.card-prompt{display:none}
 .cards,.cards.four-choices{height:auto;min-height:0;flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;gap:7px;padding:2px 2px 6px;perspective:none;scrollbar-width:thin}
 .cards .card,.cards.four-choices .card{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:9px;row-gap:3px;flex:none;min-height:94px;padding:9px;text-align:left;overflow:visible;border-radius:8px;align-items:start;align-content:start;box-shadow:0 2px #0e251c}
 .card .card-type{grid-column:2;grid-row:1;font-size:11px;line-height:1.3}.cards .card h3,.cards.four-choices .card h3{grid-column:2;grid-row:2;font-size:15px;line-height:1.3;text-align:left;margin:0}.cards .card .card-icon,.cards.four-choices .card .card-icon{grid-column:1;grid-row:1/4;display:block;align-self:center;width:32px;height:40px;margin:0}.cards .card p,.cards.four-choices .card p{grid-column:2;grid-row:3;font-size:12px;line-height:1.45;margin:0;overflow-wrap:anywhere}.cards .card-cost{display:none}
 .shop-panel,.shop-panel.dock-left{inset:auto 8px 126px auto;width:min(230px,calc(100% - 16px));max-width:none;height:190px;max-height:calc(100% - 198px);min-height:0;padding:8px;gap:4px;z-index:18}.shop-panel.resting{height:160px}.shop-heading{padding-bottom:4px;gap:5px}.shop-heading strong{font-size:13px}.shop-status b{font-size:11px}.shop-catalog{min-height:0}.product-row{min-height:43px}.shop-heading small,.catalog-label{display:none}#shopReceipts{font-size:10px;max-height:28px;overflow:auto}
 .title-screen{padding:14px}.title-screen h1{margin:8px 0 14px;font-size:38px}.start-buttons{gap:10px}.start-buttons button{min-height:44px}.start-eyebrow{font-size:10px}.save-summary{font-size:12px;margin-bottom:10px;min-height:25px}#startNotice{margin-top:10px;min-height:20px;font-size:11px}
}
@container(max-width:600px){.danger-banner{top:auto;bottom:126px;max-height:28px}.viewport:has(#dangerBanner:not(.hidden)) .activity{visibility:hidden}}

/* Starting professions: four distinct weapon emblems, generous touch targets. */
.card-overlay.profession-choice{inset:14px;max-height:none;height:auto;padding:22px;gap:10px;justify-content:center;overflow:auto;background:radial-gradient(ellipse at 50% 0%,#365542,#10271ffb 70%);border:1px solid #9caa7b;border-radius:16px}
.profession-choice::before{content:'CHOOSE YOUR PATH';display:block;text-align:center;font-size:10px;letter-spacing:3px;color:#aec29c}
.profession-choice h2{font-size:25px;text-align:center;padding:0;color:#f6e5b7;line-height:1.3}
.profession-choice .card-caption{font-size:12px;color:#c1d0b4;margin-bottom:6px}
.profession-choice .cards.four-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:12px;height:auto;flex:none;overflow:visible;padding:2px;perspective:none;align-content:center}
.profession-choice .cards .profession-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:220px;padding:12px 10px 0;overflow:hidden;text-align:center;background:linear-gradient(155deg,#fcf6de,#dedfc0);color:#2c4234;border:1px solid #afbc94;border-radius:13px;box-shadow:0 4px 0 #092319,0 7px 20px #061b1640;transition:border-color .18s,box-shadow .18s}
.profession-choice .cards .profession-card:hover{border-color:var(--profession-color);box-shadow:0 4px 0 #092319,0 0 0 2px var(--profession-color)}
.profession-role{font-size:10px;letter-spacing:1px;color:#697856;line-height:1.5}
.profession-emblem{width:78px;height:78px;display:block;flex-shrink:0;color:var(--profession-color);filter:drop-shadow(0 3px 2px #0b231b30)}
.profession-choice .cards .profession-card h3{font-size:23px;line-height:1.2;margin:1px 0 0;text-align:center;color:#2c4937}
.profession-choice .cards .profession-card p{font-size:12px;line-height:1.45;margin:0;text-align:center;flex:none;word-break:keep-all}
.profession-starter{font-size:10px;line-height:1.5;color:#6b7959;margin-bottom:8px}
.profession-start{display:flex;width:calc(100% + 20px);margin-top:auto;min-height:34px;padding:7px 12px;justify-content:space-between;align-items:center;border-top:1px solid #a6b88c;background:#304e3d;color:#f0e6be;font-size:12px;line-height:1.4}
.profession-start>span{color:var(--profession-color);font-size:17px}
.profession-choice .card-prompt{display:none}

/* Phone HUD sits in normal layout above/below the canvas, never over it. */
@media(max-width:620px),(max-width:960px) and (pointer:coarse){
 body{height:auto;min-height:100svh;overflow-x:hidden;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:max(6px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
 .handset{width:min(100%,480px);aspect-ratio:auto;max-height:none;border:1px solid #6b876d;border-radius:14px;background:#17352a;box-shadow:0 12px 40px #041c1666}
 .screen,.viewport-shell{position:relative;inset:auto;width:100%}
 .viewport{position:relative;inset:auto;width:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'hud' 'region' 'boss' 'danger' 'world' 'shop' 'activity' 'skills' 'equip' 'actions';grid-auto-rows:auto;background:linear-gradient(#244336,#132e25);overflow:hidden}
 .world-stage{position:relative;inset:auto;grid-area:world;width:100%;height:auto;aspect-ratio:1;min-width:0;border-block:1px solid #78906b;box-shadow:0 2px 0 #071c1666}
 .viewport .hud-top{position:relative;inset:auto;grid-area:hud;margin:8px 8px 0;display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:8px;align-items:stretch}
 .viewport .status{max-width:none;min-width:0;min-height:60px;padding:8px;gap:1px 7px;grid-template-columns:46px minmax(0,1fr);grid-template-rows:1fr 1fr;background:#102b24;border:1px solid #607e64;border-radius:9px;box-shadow:inset 0 1px #d2e2b512}
 .status>#level{grid-column:1;grid-row:1;align-self:end;font-size:13px;color:#f2d995}
 .status>.coins{display:block;grid-column:1;grid-row:2;align-self:start;font-size:10px;max-width:46px;overflow:hidden;text-overflow:ellipsis;color:#e8c876}
 .status>.vitals{grid-column:2;grid-row:1/3;align-self:center;min-width:0}
 .vitals>div{height:20px;grid-template-columns:19px minmax(12px,1fr) 47px;gap:4px}
 .vitals span,.vitals b{font-size:10px}.bar{height:7px;border-radius:3px}.hp i{background:linear-gradient(90deg,#b55d65,#eaa38b)}.exp i{background:linear-gradient(90deg,#6f9d68,#c7dea0)}
 .game-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .game-controls button{width:100%;min-width:0;height:28px;min-height:28px;font-size:12px;padding:2px;background:#304e3d;border:1px solid #69856b;border-radius:6px;box-shadow:0 2px #10261e}
 .viewport .map-title{position:relative;inset:auto;grid-area:region;margin:0;padding:8px 10px;max-height:none;min-height:33px;gap:8px;align-items:center}
 .map-title>span:first-child{font-size:13px;text-shadow:none}.map-title>span:last-child{font-size:10px;background:#102c24;padding:3px 6px}
 .viewport .activity{position:relative;inset:auto;grid-area:activity;height:27px;margin:0;padding:5px 10px 2px;visibility:visible}
 .activity span{display:block;max-width:100%;padding:0;background:none;font-size:11px;line-height:20px;color:#b9ccaa}
 .viewport:has(#dangerBanner:not(.hidden)) .activity{visibility:visible}
 .viewport .skill-belt{position:relative;inset:auto;grid-area:skills;height:44px;margin:4px 8px 0;gap:4px}
 .skill-belt button{height:44px;border-radius:7px;background:#0e2a22;border-color:#57755c;box-shadow:inset 0 1px #b4cfa51a}
 .skill-belt canvas{width:28px;height:35px}.skill-belt button small{top:3px;left:3px;color:#91ad88}
 .viewport .game-bottom{position:relative;inset:auto;grid-area:actions;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:44px 30px;height:auto;gap:6px;margin:9px 8px 10px;padding:0;align-items:stretch}
 .game-bottom #statsButton,.game-bottom #gearButton,.game-bottom #questButton{height:44px;min-height:44px;font-size:14px;border-radius:8px;background:linear-gradient(#426247,#2b4836);border-color:#78956d;box-shadow:0 2px #092119}
 .game-bottom .zoom-controls{height:30px;gap:6px}.zoom-controls button{height:30px;min-height:30px;border-radius:6px;background:#142f26;border-color:#49684f;font-size:10px}.zoom-controls button.active{background:#d7ce9d;border-color:#e4d8a8;color:#2e4431}
 .viewport .boss-hud{position:relative;inset:auto;grid-area:boss;margin:0 8px 6px;max-height:none;border-radius:7px;padding:6px 9px}
 .viewport .danger-banner{position:relative;inset:auto;grid-area:danger;margin:0 8px 6px;max-height:none;border-radius:6px;font-size:11px}
 .viewport #toast{grid-area:world;bottom:12px;top:auto;left:50%;max-width:90%;font-size:11px;z-index:40}
 .viewport #regionTransition{grid-area:world;top:36%;bottom:auto;left:8%;right:8%;font-size:18px}
 .viewport .shop-panel,.viewport .shop-panel.dock-left,.viewport .shop-panel.resting{position:relative;grid-area:shop;inset:auto;width:auto;max-width:none;height:auto;max-height:185px;min-height:0;margin:8px 8px 0;padding:9px;gap:5px;border-radius:9px}
 .viewport .shop-catalog{flex:auto;max-height:90px}.shopping .activity{visibility:visible}
 .viewport .card-overlay{inset:8px;max-height:none;max-width:none}
 .viewport .card-overlay.profession-choice{padding:18px 12px;gap:8px;justify-content:center;border-radius:12px}
 .profession-choice::before{font-size:9px;letter-spacing:2.5px}
 .profession-choice h2{font-size:22px;line-height:1.35}.profession-choice .card-caption{font-size:11px;line-height:1.5;margin-bottom:5px}
 .profession-choice .cards.four-choices{display:grid;flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;height:auto;overflow:visible}
 .profession-choice .cards .profession-card{display:flex;min-height:205px;padding:10px 8px 0;gap:4px;align-items:center;border-radius:11px}
 .profession-emblem{width:70px;height:70px}.profession-choice .cards .profession-card h3{font-size:21px;line-height:1.25}
 .profession-choice .cards .profession-card p{font-size:11px;line-height:1.5;text-align:center}.profession-role{font-size:9px;letter-spacing:.5px}.profession-starter{font-size:9px;margin-bottom:6px}.profession-start{width:calc(100% + 16px);font-size:11px;min-height:33px;padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){.cards.dealing .card,.cards.choosing .card{animation:none!important}.profession-card{transition:none!important}}

/* One-tap recommendations remain outside the phone's gameplay canvas. */
.quick-equip{position:absolute;right:10px;bottom:118px;z-index:8;max-width:calc(50% - 16px);min-height:36px;padding:7px 10px;border:1px solid #f1d898;border-radius:8px;background:linear-gradient(#e5cd8f,#bb9e63);color:#23392c;box-shadow:0 3px #0d251b;font-size:12px;line-height:1.4}
@media(max-width:620px),(max-width:960px) and (pointer:coarse){
 .viewport .quick-equip{position:relative;inset:auto;grid-area:equip;max-width:none;min-height:42px;margin:8px 8px 0;font-size:14px}
}