/* Mobile presentation modes are selected once by AppShell through
   <html data-ui-mode>. They reuse the existing game DOM and state. */

.mobile-portrait-screen{ display:none; }

html[data-ui-mode="mobile-portrait"] #game-screen > :not(.mobile-portrait-screen){
  visibility:hidden;
  pointer-events:none;
}

html[data-ui-mode="mobile-portrait"] .mobile-portrait-screen{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 22%, rgba(71,156,99,.20), transparent 44%),
    linear-gradient(150deg, #08130d, #102319 56%, #071009);
  color:var(--ink, #e9f2ea);
  text-align:center;
}

.mobile-portrait-card{
  width:min(330px, 100%);
  padding:28px 24px 24px;
  border:1px solid rgba(217,194,122,.68);
  border-radius:18px;
  background:rgba(10,24,16,.92);
  box-shadow:0 16px 42px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
}

.mobile-portrait-mark{
  width:58px;
  height:58px;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(217,194,122,.65);
  border-radius:15px;
  color:var(--gold, #d9c27a);
  font:2.1rem/1 Georgia, serif;
  transform:rotate(-42deg);
}

.mobile-portrait-kicker{ color:var(--gold, #d9c27a); font:700 .6rem/1 var(--font-heading, Georgia, serif); letter-spacing:.18em; }
.mobile-portrait-card h2{ margin:9px 0 7px; color:var(--ink, #e9f2ea); font:700 1.28rem/1.1 var(--font-heading, Georgia, serif); letter-spacing:.04em; text-transform:uppercase; }
.mobile-portrait-card p{ margin:0 auto 20px; color:var(--ink-dim, #9db3a5); font:.82rem/1.45 'Trebuchet MS', sans-serif; }
.mobile-portrait-enter{
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--gold, #d9c27a);
  border-radius:999px;
  background:linear-gradient(145deg, rgba(47,90,58,.95), rgba(12,35,21,.98));
  color:var(--gold, #d9c27a);
  font:700 .68rem/1 'Trebuchet MS', sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* A compact landscape game frame. The conditions are assigned by AppShell,
   so a small desktop window is never mistaken for a phone. */
html[data-ui-mode="mobile-landscape"] #game-screen{
  --mobile-hud-height:58px;
  --mobile-hotbar-height:64px;
  --mobile-content-gutter:12px;
  padding:
    calc(var(--mobile-hud-height) + env(safe-area-inset-top) + var(--mobile-content-gutter))
    max(var(--mobile-content-gutter), env(safe-area-inset-right))
    calc(var(--mobile-hotbar-height) + env(safe-area-inset-bottom) + var(--mobile-content-gutter))
    max(var(--mobile-content-gutter), env(safe-area-inset-left));
  min-height:100dvh;
  scroll-padding-top:calc(var(--mobile-hud-height) + env(safe-area-inset-top) + var(--mobile-content-gutter));
  scroll-padding-bottom:calc(var(--mobile-hotbar-height) + env(safe-area-inset-bottom) + var(--mobile-content-gutter));
}

html[data-ui-mode="mobile-landscape"] .game-hud{
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  right:0;
  transform:none;
  width:auto;
  min-height:0;
  height:calc(var(--mobile-hud-height) + env(safe-area-inset-top));
  display:flex;
  align-items:flex-end;
  gap:5px;
  padding:env(safe-area-inset-top) max(7px, env(safe-area-inset-right)) 6px max(7px, env(safe-area-inset-left));
  background:linear-gradient(180deg, #06110b, #081910);
  border-bottom:1px solid rgba(217,194,122,.28);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}

html[data-ui-mode="mobile-landscape"] .game-title-logo,
html[data-ui-mode="mobile-landscape"] .main-vault .vault-title,
html[data-ui-mode="mobile-landscape"] #btn-save,
html[data-ui-mode="mobile-landscape"] .build-version,
html[data-ui-mode="mobile-landscape"] .world-map-tab-label{
  display:none;
}

html[data-ui-mode="mobile-landscape"] .main-vault{
  order:1;
  flex:1 1 auto;
  min-width:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

html[data-ui-mode="mobile-landscape"] .main-vault .vault-body,
html[data-ui-mode="mobile-landscape"] .main-vault .vault-group{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:3px;
  min-width:0;
}

html[data-ui-mode="mobile-landscape"] .main-vault .vault-body{ justify-content:flex-start; }
html[data-ui-mode="mobile-landscape"] .main-vault .vault-divider{ width:1px; height:23px; margin:0 2px; background:rgba(217,194,122,.25); }
html[data-ui-mode="mobile-landscape"] .main-vault .vault-item{ gap:2px; min-width:0; padding:2px; border:0; background:none; }
html[data-ui-mode="mobile-landscape"] .main-vault .vault-icon{ width:21px; height:21px; padding:0; }
html[data-ui-mode="mobile-landscape"] .main-vault .vault-count{ min-width:0; color:var(--ink); font-size:.67rem; }
html[data-ui-mode="mobile-landscape"] .main-vault .vault-rate{ font-size:.46rem; white-space:nowrap; }

html[data-ui-mode="mobile-landscape"] .top-controls{
  order:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  margin:0;
}
html[data-ui-mode="mobile-landscape"] .top-controls button{
  width:33px;
  min-width:33px;
  height:33px;
  padding:0;
  display:grid;
  place-items:center;
  border-color:rgba(217,194,122,.35);
  font-size:.94rem;
}
html[data-ui-mode="mobile-landscape"] #btn-world-map{
  position:static;
  order:2;
  flex:0 0 33px;
  width:33px;
  height:33px;
  margin:0;
  padding:0;
  border-radius:9px;
  transform:none;
}
html[data-ui-mode="mobile-landscape"] .world-map-tab-icon{ width:20px; height:20px; }
html[data-ui-mode="mobile-landscape"] .location-tabs{ display:none; }

html[data-ui-mode="mobile-landscape"] .floating-inventory{
  position:fixed;
  z-index:80;
  left:0;
  right:0;
  bottom:0;
  transform:none;
  width:auto;
  padding:5px max(7px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  background:linear-gradient(0deg, rgba(6,17,11,.98), rgba(8,25,16,.94));
  border-top:1px solid rgba(217,194,122,.28);
  box-shadow:0 -4px 14px rgba(0,0,0,.45);
  min-height:calc(var(--mobile-hotbar-height) + env(safe-area-inset-bottom));
}
html[data-ui-mode="mobile-landscape"] .floating-inventory .inventory-frame{ padding:0; border:0; background:none; box-shadow:none; }
html[data-ui-mode="mobile-landscape"] .floating-inventory .inventory-grid{ grid-template-columns:repeat(11, minmax(0, 48px)); justify-content:center; gap:5px; }
html[data-ui-mode="mobile-landscape"] .floating-inventory .inventory-slot{ width:48px; min-width:0; max-width:none; min-height:48px; border-radius:8px; }
html[data-ui-mode="mobile-landscape"] .floating-inventory .inventory-caption{ display:none; }
html[data-ui-mode="mobile-landscape"] .container-slot-title,
html[data-ui-mode="mobile-landscape"] .container-slot-empty,
html[data-ui-mode="mobile-landscape"] .container-slot-lock,
html[data-ui-mode="mobile-landscape"] .container-slot-cost{ display:none; }
html[data-ui-mode="mobile-landscape"] .container-slot img{ width:72%; height:72%; }

html[data-ui-mode="mobile-landscape"] .chest-modal{
  padding:0;
}
html[data-ui-mode="mobile-landscape"] .chest-modal .chest-panel{
  width:min(620px, 96vw);
  max-height:calc(100dvh - var(--mobile-hud-height) - var(--mobile-hotbar-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);
  bottom:calc(var(--mobile-hotbar-height) + env(safe-area-inset-bottom) + 8px);
}
html[data-ui-mode="mobile-landscape"] .chest-modal .chest-panel.is-positioned{ bottom:auto; }

/* Each mobile game strip owns its horizontal scroll. The page itself remains
   vertically scrollable and never expands horizontally. */
html[data-ui-mode="mobile-landscape"] #craft-grid-potions,
html[data-ui-mode="mobile-landscape"] #craft-grid-modules,
html[data-ui-mode="mobile-landscape"] #craft-grid-permanent-modules{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  width:100%;
  max-width:none;
  gap:10px;
  padding:4px 14px 12px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:14px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;
  scrollbar-width:none;
}
html[data-ui-mode="mobile-landscape"] #craft-grid-potions::-webkit-scrollbar,
html[data-ui-mode="mobile-landscape"] #craft-grid-modules::-webkit-scrollbar,
html[data-ui-mode="mobile-landscape"] #craft-grid-permanent-modules::-webkit-scrollbar{ display:none; }
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card,
html[data-ui-mode="mobile-landscape"] #craft-grid-modules > .craft-card,
html[data-ui-mode="mobile-landscape"] #craft-grid-permanent-modules > .craft-card{
  flex:0 0 clamp(182px, 25vw, 228px);
  min-width:182px;
  scroll-snap-align:start;
}
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe){
  min-height:250px;
  padding:10px 10px 12px 46px;
  gap:5px;
}
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-icon-frame-wrap,
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-icon-frame{
  width:96px;
  height:120px;
}
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .module-slots{
  top:12px;
  left:9px;
  height:120px;
}
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .module-equip-slot{ width:26px; height:26px; }
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-normal,
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-brewing,
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-unlock{ min-height:54px; }
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-cost-icon{ width:21px; height:21px; }
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-cost-amount,
html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card[data-potion]:not(.craft-card-recipe) .craft-output-amount{ font-size:.9rem; }
html[data-ui-mode="mobile-landscape"] .workshop-section-inner,
html[data-ui-mode="mobile-landscape"] .workshop-subsection-inner{ width:100%; }

@media (max-width:760px){
  html[data-ui-mode="mobile-landscape"] #game-screen{
    --mobile-hud-height:55px;
    --mobile-hotbar-height:53px;
    --mobile-content-gutter:8px;
  }
  html[data-ui-mode="mobile-landscape"] .game-hud{ gap:2px; padding-inline:max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-left)); }
  html[data-ui-mode="mobile-landscape"] .main-vault .vault-icon{ width:18px; height:18px; }
  html[data-ui-mode="mobile-landscape"] .main-vault .vault-count{ font-size:.58rem; }
  html[data-ui-mode="mobile-landscape"] .main-vault .vault-rate{ display:none; }
  html[data-ui-mode="mobile-landscape"] .top-controls button,
  html[data-ui-mode="mobile-landscape"] #btn-world-map{ width:29px; min-width:29px; height:29px; }
  html[data-ui-mode="mobile-landscape"] .floating-inventory .inventory-grid{ grid-template-columns:repeat(11, minmax(0, 39px)); gap:3px; }
  html[data-ui-mode="mobile-landscape"] .floating-inventory .inventory-slot{ width:39px; min-height:39px; }
  html[data-ui-mode="mobile-landscape"] #craft-grid-potions,
  html[data-ui-mode="mobile-landscape"] #craft-grid-modules,
  html[data-ui-mode="mobile-landscape"] #craft-grid-permanent-modules{ gap:8px; padding-inline:10px; }
  html[data-ui-mode="mobile-landscape"] #craft-grid-potions > .craft-card,
  html[data-ui-mode="mobile-landscape"] #craft-grid-modules > .craft-card,
  html[data-ui-mode="mobile-landscape"] #craft-grid-permanent-modules > .craft-card{ flex-basis:174px; min-width:174px; }
}