/* Portrait keeps the playfield above both thumbs. */
.touch-controls { --key:64px; position:relative; display:none; grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; align-items:center; justify-items:center; gap:8px 6px; padding:12px max(6px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); background:linear-gradient(#25312d,#121c19); border-top:1px solid #87998466; user-select:none; -webkit-user-select:none; touch-action:none; }
.touch-controls button,.touch-modal-cancel { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:44px; min-height:44px; padding:3px; border:1px solid #91a79570; border-radius:10px; background:linear-gradient(#354a43,#23372f); color:#e0e9da; box-shadow:inset 0 1px #ffffff12,0 3px #070d0c66; cursor:pointer; touch-action:none; -webkit-tap-highlight-color:transparent; }
.touch-controls button:active,.touch-controls .is-held,.touch-controls [aria-pressed="true"] { background:#61735a; border-color:#e5d299; color:#fff6d9; }
.touch-controls small,.touch-modal-cancel small { font-size:10px; white-space:nowrap; }
.touch-controls button > span { font-size:18px; font-weight:700; }
.touch-dpad { grid-column:2; grid-row:1; display:grid; grid-template-columns:repeat(3,var(--key)); grid-template-rows:repeat(3,var(--key)); gap:4px; }
.touch-dpad button { font:26px/1 var(--sans); border-radius:7px; }
.touch-dpad-center { display:grid; place-items:center; color:#91a79555; }
.touch-dpad .touch-face-toggle { gap:1px; font:700 14px/1 var(--sans); }
.touch-dpad .touch-face-toggle > span { font-size:14px; }
.touch-dpad .touch-face-toggle small { font-size:7px; }
.touch-dpad .touch-face-toggle[aria-pressed="true"] { border-color:#f1d780; background:#665829; color:#fff1ae; box-shadow:inset 0 0 0 1px #fff2aa40,0 0 12px #e6c85e42; }
.touch-items { grid-column:1; grid-row:1; width:80px; height:80px; }
.touch-primary { grid-column:3; grid-row:1; width:80px; height:80px; border-color:#d9c18a !important; background:linear-gradient(#dbc58f,#a98e54) !important; color:#242a1e !important; }
.touch-dash-toggle { grid-column:2; grid-row:2; width:168px; height:58px; }
.touch-menu { grid-column:1; grid-row:2; width:80px; }
.touch-abxy,.touch-modal-cancel { display:none; }
.game-screen > .touch-controls { grid-column:2; grid-row:3; --key:46px; padding:6px; gap:5px; }
.game-screen > .touch-controls .touch-dpad { gap:2px; }
.game-screen > .touch-controls .touch-dpad button { min-width:0; min-height:0; font-size:22px; }
.game-screen > .touch-controls .touch-dash-toggle { height:58px; }
.game-screen.damage-input-locked .touch-dpad button,.game-screen.damage-input-locked [data-pad="primary"] { opacity:.48; }
.village-screen { height:100dvh; min-height:0; padding:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.village-screen .village-world { min-height:0; border:0; border-radius:0; overflow:hidden; background:#18271d; box-shadow:none; }
.village-viewport { position:relative; width:100%; height:100%; overflow:hidden; }
.village-screen .village-map-wrap { position:absolute; top:0; left:0; max-width:none; aspect-ratio:auto; }
.village-screen #village-canvas { display:block; width:100%; height:100%; touch-action:none; }
.village-menu-modal { width:min(860px,96vw); --v-border:#d5c09240; --v-muted:#a4b2a6; --v-gold:#dfc38a; }
.village-menu-content .village-topbar { flex-wrap:wrap; gap:12px; }
.village-menu-content .village-brand { display:none; }
.village-menu-content .village-top-actions { flex-wrap:wrap; }
.village-menu-content .village-sidebar { display:grid; grid-template-columns:1fr; gap:16px; }
.village-menu-content .village-timeline { margin:20px 0; }
.village-menu-content .village-timeline > div { display:none; }
.village-menu-content .village-heading { padding:18px 0; }
.village-menu-content .village-weather { display:none; }

@media (min-width:901px) {
  .game-screen .map-stage { grid-column:1; grid-row:2; }
  .game-screen .equipment-rail { grid-column:2; grid-row:2 / 4; }
  .game-screen .message-log { grid-column:1; grid-row:3; }
}

/* Touch devices retain the current mobile control surface. */
@media (hover:none) and (pointer:coarse) {
  .touch-controls { display:grid; }
  .game-screen { grid-template-rows:78px minmax(0,1fr) 180px; }
}
@media (orientation:portrait) and (max-width:1100px) and (hover:none) and (pointer:coarse) {
  .game-screen { grid-template-columns:1fr; grid-template-rows:90px minmax(0,1fr) 48px auto; }
  .game-screen .game-header { height:90px; grid-template-columns:1fr auto; grid-template-rows:30px 42px; padding:5px 10px; gap:3px 8px; }
  .game-screen .status-cluster { grid-column:1 / -1; grid-row:2; }
  .game-screen .equipment-rail,.game-screen .minimap-card,.game-screen .inventory-toggle,.game-screen .exp-row { display:none; }
  .game-screen .map-stage { grid-column:1; grid-row:2; }
  .game-screen .message-log { grid-column:1; grid-row:3; padding:5px 8px; }
  .game-screen > .touch-controls { grid-column:1; grid-row:4; --key:64px; padding:10px max(6px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); gap:8px 6px; }
  .game-screen > .touch-controls .touch-dpad { gap:4px; }
  .game-screen > .touch-controls .touch-dpad button { font-size:26px; }
  .village-screen .village-map-label { min-height:28px; }
}
@media (orientation:portrait) and (max-width:389px) and (hover:none) and (pointer:coarse) {
  .touch-controls,.game-screen > .touch-controls { --key:60px; }
  .touch-items,.touch-primary,.touch-menu { width:76px; }
  .touch-dash-toggle { width:160px; }
}
@media (orientation:portrait) and (max-width:369px) and (hover:none) and (pointer:coarse) {
  .touch-controls,.game-screen > .touch-controls { --key:58px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 4px; padding-inline:6px; }
  .touch-controls .touch-dpad { grid-column:1 / -1; grid-row:1; justify-self:center; }
  .touch-items,.touch-dash-toggle,.touch-primary,.touch-menu { grid-row:2; width:100%; height:72px; }
  .game-screen > .touch-controls .touch-dash-toggle { height:72px; }
  .touch-items { grid-column:1; }
  .touch-dash-toggle { grid-column:2; }
  .touch-primary { grid-column:3; }
  .touch-menu { grid-column:4; }
}
/* Landscape uses the X / Y A / B diamond over the playfield. */
@media (orientation:landscape) and (hover:none) and (pointer:coarse) {
  .game-screen { grid-template-rows:78px minmax(0,1fr) 126px; }
  .game-screen .equipment-rail { grid-row:2 / 4; }
  .village-screen { display:block; }
  .village-screen .village-world { height:100%; }
  .village-screen > .touch-controls { position:absolute; inset:0; z-index:5; }
  .game-screen > .touch-controls { position:absolute; grid-area:auto; inset:78px 300px 126px 0; z-index:6; --key:64px; }
  .village-screen > .touch-controls,
  .game-screen > .touch-controls { background:none; border:0; padding:0; pointer-events:none; display:block; }
  .touch-controls .touch-items,.touch-controls .touch-primary,.touch-controls .touch-dash-toggle { display:none; }
  .touch-controls .touch-dpad { position:absolute; left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); }
  .touch-controls .touch-menu { display:none; }
  .village-screen > .touch-controls .touch-menu { display:flex; position:absolute; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); width:44px; height:44px; }
  .touch-abxy { display:grid; position:absolute; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); grid-template-columns:repeat(3,68px); grid-template-rows:repeat(3,68px); gap:3px; }
  .touch-controls button { pointer-events:auto; background:#1c3026b8; box-shadow:inset 0 1px #ffffff20; border-color:#d3dec66b; }
  .touch-abxy button { border-radius:50%; }
  .touch-abxy b,.touch-modal-cancel b { font-size:24px; line-height:1; }
  .touch-x { grid-column:2; grid-row:1; }
  .touch-y { grid-column:1; grid-row:2; }
  .touch-a { grid-column:3; grid-row:2; color:#f6dd9c !important; border-color:#d9c18a !important; }
  .touch-b { grid-column:2; grid-row:3; }
  .touch-modal-cancel { display:flex; position:fixed; right:max(84px,calc(env(safe-area-inset-right) + 68px)); bottom:max(12px,env(safe-area-inset-bottom)); width:68px; height:68px; border-radius:50%; z-index:2; }
  #modal-root .modal-backdrop { grid-template-columns:minmax(0,1fr); padding-right:max(145px,calc(env(safe-area-inset-right) + 130px)); }
  #modal-root .modal { max-width:100%; min-width:0; }
}
@media (orientation:landscape) and (hover:none) and (pointer:coarse) {
  .game-screen { grid-template-columns:1fr; grid-template-rows:44px minmax(0,1fr) 36px; }
  .game-screen .game-header { height:44px; grid-template-columns:minmax(102px,auto) minmax(150px,1fr) auto; grid-template-rows:1fr; padding:3px max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left)); gap:6px; }
  .game-screen .dungeon-title { gap:6px; }
  .game-screen .dungeon-title p { display:none; }
  .game-screen .dungeon-title strong { font-size:8px; letter-spacing:.04em; white-space:nowrap; }
  .game-screen .dungeon-title .icon-button.compact { width:34px; height:34px; min-width:34px; min-height:34px; }
  .game-screen .status-cluster { grid-column:2; grid-row:1; }
  .game-screen .level-orb { width:32px; height:32px; flex-basis:32px; }
  .game-screen .level-orb b { font-size:13px; }
  .game-screen .vital-bars { display:grid; grid-template-columns:1fr; gap:1px; }
  .game-screen .bar-row { grid-template-columns:22px minmax(54px,110px) 38px; gap:3px; font-size:8px; }
  .game-screen .bar-row b { font-size:8px; }
  .game-screen .bar { height:6px; }
  .game-screen .dungeon-wallet { min-width:48px; padding:2px 5px; border:0; }
  .game-screen .dungeon-wallet span { display:none; }
  .game-screen .dungeon-wallet b { margin:0; font-size:12px; }
  .game-screen .inventory-toggle,.game-screen .equipment-rail,.game-screen .exp-row { display:none; }
  .game-screen .minimap-card { display:block; top:50px; right:max(8px,env(safe-area-inset-right)); width:122px; padding:4px; }
  .game-screen .minimap-card .mini-head { display:none; }
  .game-screen #minimap { height:68px; }
  .game-screen .map-stage { grid-column:1; grid-row:2; }
  .game-screen .message-log { grid-column:1; grid-row:3; padding:2px 8px; }
  .game-screen .history-button { padding:5px 7px; }
  .game-screen > .touch-controls { position:absolute; inset:44px 0 36px; z-index:6; --key:64px; }
  .game-screen > .touch-controls .touch-dpad { gap:4px; }
  .game-screen .message-current > span { font-size:12px; line-height:18px; }
}

/* A narrow mouse-and-keyboard window stays compact without reserving touch-control space. */
@media (max-width:900px) and (hover:hover) and (pointer:fine) {
  .game-screen { grid-template-rows:108px minmax(0,1fr) 58px 96px; }
  .game-screen > .touch-controls { display:none; }
}