/* Copyright (c) 2026 Nova Logic Ventures LLC. All rights reserved. */

/* The four touch targets retain a comfortable hit area. Their icons move to the
   visual centroid of each quarter of the wheel. */
body.touch #action-wheel .wheel-n { top: 7px; left: 36px; }
body.touch #action-wheel .wheel-s { bottom: 7px; left: 36px; }
body.touch #action-wheel .wheel-e { right: 7px; top: 36px; }
body.touch #action-wheel .wheel-w { left: 7px; top: 36px; }
body.touch #action-wheel img {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0;
  transform: none;
  pointer-events: none;
}

/* Compact contextual action, raised above the wheel on touch screens. */
body.touch .action-zone { bottom: 136px; }
body.touch .action-card {
  min-height: 36px;
  padding: 4px 7px;
  gap: 5px;
}
body.touch .action-card img { width: 20px; height: 20px; }
body.touch .action-card b { font-size: 10px; }
body.touch .action-card small {
  font-size: 6px;
  letter-spacing: 1.4px;
  margin-top: 2px;
}

/* Keep full touch targets while visually tightening the three map controls. */
body.touch #map-actions { gap: 0; }
body.touch #map-actions button { margin: 0 -4px; }

/* The same compact card serves tent sleep and seated rest on mobile. */
body.touch #rest-overlay {
  width: 128px;
  max-width: 30vw;
  padding: 6px 8px;
}
body.touch #rest-overlay .eyebrow {
  font-size: 6px;
  letter-spacing: 1.3px;
}
body.touch #rest-overlay h2 {
  font-size: 10px;
  line-height: 1.25;
  margin: 0 0 3px;
}
body.touch #rest-overlay p {
  font-size: 7.5px;
  line-height: 1.35;
  -webkit-line-clamp: 3;
  margin-bottom: 0;
}

/* Intro controls stay unobtrusive on both desktop and mobile. */
#studio-intro .intro-controls { gap: 6px; }
#studio-intro button {
  min-height: 36px;
  padding: 5px 10px;
  font-size: 11px;
}

/* Explicit bounds prevent the video's intrinsic size from stretching the grid
   beyond a small landscape viewport. Keep the entire frame centered. */
#studio-intro { overflow: hidden; }
#studio-intro video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}
#studio-intro .intro-controls { z-index: 1; }

/* Desktop uses the same actions and icons as mobile in a compact square. */
body:not(.touch) #action-wheel {
  display: grid;
  position: absolute;
  right: var(--gut);
  bottom: 20px;
  grid-template-columns: repeat(2, 52px);
  grid-template-rows: repeat(2, 52px);
  gap: 6px;
  z-index: 6;
}
body:not(.touch) #action-wheel button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 8px;
  background: #203b30d9;
  border: 1px solid #e0cd9266;
  border-radius: 7px;
}
body:not(.touch) #action-wheel button:hover { background: #3c5546ed; }
body:not(.touch) #action-wheel button:active { transform: translateY(1px); }
body:not(.touch) #action-wheel img {
  display: block;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  object-fit: contain;
  background: none;
  border-radius: 0;
  box-shadow: none;
  pointer-events: none;
}
body:not(.touch) .action-zone { bottom: 150px; }
body:not(.touch) #action-wheel button { clip-path: none; }
body:not(.touch) #action-wheel img { transform: none; }

/* Market rows share the boost cards' icon sizing and divided purchase column. */
.animal-offer.market-ticket,.animal-feed-row.market-ticket {
 display: grid; grid-template-columns: 58px minmax(0,1fr) minmax(120px,auto);
 gap: 12px; align-items: center; margin: 10px 0; padding: 13px;
}
.animal-offer.market-ticket>.ticket-buy,.animal-feed-row.market-ticket>.ticket-buy {
 width: auto; margin: 0; padding: 0 0 0 12px; border-top: 0;
 border-left: 1px dashed #c8b98455; flex-direction: column;
 justify-content: center; align-items: stretch;
}
.animal-offer .ticket-buy button { white-space: normal; max-width: 160px; }
.resource-trade>img,.animal-offer.market-ticket>img,.animal-feed-row.market-ticket>img {
 width:58px;height:58px;flex:none;object-fit:contain;padding:4px;
 border-radius:12px;background:#f3e6c7;border:1px solid #c7ad76;box-sizing:border-box;
}
@media(max-width:750px){
 .resource-trade>img,.animal-offer.market-ticket>img,.animal-feed-row.market-ticket>img {width:44px;height:44px;}
 .animal-offer.market-ticket,.animal-feed-row.market-ticket {grid-template-columns:44px minmax(0,1fr) minmax(84px,110px);gap:8px;padding:10px;}
 .animal-offer.market-ticket>.ticket-buy,.animal-feed-row.market-ticket>.ticket-buy {padding-left:8px;}
 .animal-offer .ticket-buy button,.animal-feed-row .ticket-buy button {padding:6px;font-size:10px;}
}

/* Critical survival warnings remain readable without flashing. */
#journal-list li.urgent {
 color: #fff0dc;
 background: #701f20ed;
 border-left: 3px solid #ff7566;
 padding: 7px 8px;
 border-radius: 3px;
 font-weight: 700;
 line-height: 1.4;
}
#journal-list li.urgent b { color: #ffcfaa; }
#journal-list li.urgent span { color: #fff0dc; }
#journal-list li.urgent span {
 display: block;
 -webkit-line-clamp: unset;
 max-height: none;
 overflow: visible;
 text-overflow: clip;
 white-space: normal;
 overflow-wrap: anywhere;
}
#hud #journal #journal-list li.urgent span {
 display: block !important;
 -webkit-line-clamp: unset !important;
 max-height: none !important;
 overflow: visible !important;
 white-space: normal !important;
}

/* Smaller touch placement controls; preserve the existing anchored position. */
body.touch #placement-bar { padding: 4px; gap: 4px; }
body.touch #placement-bar #placement-name { font-size: 10px; line-height: 1.25; }
body.touch #placement-bar button,
body.touch #placement-bar button.primary {
 min-height: 32px;
 padding: 5px 7px;
 font-size: 10px;
 line-height: 1.2;
}
/* Keep prices centred over the purchase button in vertical market columns. */
.market-ticket .ticket-buy { text-align: center; }
.market-ticket .ticket-buy > button { align-self: center; }
.animal-feed-row .ticket-buy > button { width: 100%; }
/* Mobile-only camera gesture surface, clear of the joystick and action wheel. */
#touch-zoom { display: none; }
body.touch #touch-zoom {
 display: flex; align-items: center; justify-content: center; gap: 6px;
 position: absolute; top: calc(76px + env(safe-area-inset-top)); left: 50%;
 transform: translateX(-50%); width: 86px; min-height: 32px;
 border: 1px solid #d6ca9140; border-radius: 6px; background: #223b2d99;
 color: #eee4c6; font-size: 10px; letter-spacing: .6px; z-index: 7;
 pointer-events: auto; touch-action: none; user-select: none;
}
body.touch #touch-zoom span { font-size: 16px; }
body.touch #touch-zoom:focus-visible { outline: 2px solid #eac580; }
body.touch #action-wheel button, body.touch #collect, body.touch #joystick, body.touch #lookzone {
 touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none;
}
@media(max-height:500px) { body.touch #touch-zoom { top: calc(61px + env(safe-area-inset-top)); } }
/* Orientation guard covers the intro as well as the running game. */
#rotate-screen { z-index: 1000; }
body.orientation-blocked #rotate-screen { display: flex; }
body:not(.orientation-blocked) #rotate-screen { display: none; }
body.orientation-blocked { touch-action: none; }
/* Each visible quarter is a full touch surface; JS resolves its cardinal action. */
body.touch #action-wheel { pointer-events: auto; touch-action: none; }
/* Fit the complete character form inside short landscape screens. */
body.touch #modal.character-mode { padding: 8px; }
body.touch .panel.character-panel {
 width: 350px; max-width: 92vw; max-height: calc(100dvh - 16px);
 padding: 12px 18px; overflow-y: auto; overscroll-behavior: contain;
}
body.touch .character-panel .eyebrow { margin-bottom: 5px; font-size: 8px; }
body.touch .character-panel h2 { font-size: 20px; margin-bottom: 5px; }
body.touch .character-panel p { font-size: 10px; margin-bottom: 7px; }
body.touch .character-panel .traveler-card { min-height: 48px; margin: 6px 0; padding: 5px 8px; gap: 10px; }
body.touch .character-panel .traveler-card img { width: 36px; height: 36px; }
body.touch .character-panel .traveler-card b { font-size: 12px; }
body.touch .character-panel .traveler-card small { font-size: 7px; margin-top: 3px; }
body.touch .character-panel .name-label { font-size: 10px; margin-top: 7px; }
body.touch .character-panel .name-label input { font-size: 16px; padding: 5px 8px; margin-top: 3px; min-height: 32px; }
body.touch .character-panel #character-play { padding: 8px 12px; margin-top: 7px; font-size: 12px; min-height: 36px; }
body.touch .character-panel .close { top: 8px; right: 8px; }
@media(max-height:350px){
 body.touch .character-panel h2 { font-size: 17px; }
 body.touch .character-panel .traveler-card { min-height: 42px; margin: 4px 0; }
 body.touch .character-panel .traveler-card img { width: 30px; height: 30px; }
 body.touch .panel.character-panel { padding-top: 8px; padding-bottom: 8px; }
}
/* Slightly larger mobile controls, with the same separation above the action wheel. */
body.touch .joy-ring { left: 26px; bottom: 22px; width: 90px; height: 90px; }
body.touch #stick { left: 49px; bottom: 45px; width: 44px; height: 44px; }
body.touch #joystick > span { left: 58px; }
body.touch #action-wheel { width: 128px; height: 128px; --wheel: 110px; }
body.touch #action-wheel button { width: 44px; height: 44px; }
body.touch #action-wheel .wheel-n { top: 8px; left: 42px; }
body.touch #action-wheel .wheel-s { bottom: 8px; left: 42px; }
body.touch #action-wheel .wheel-e { right: 8px; top: 42px; }
body.touch #action-wheel .wheel-w { left: 8px; top: 42px; }
body.touch #action-wheel img { width: 25px; height: 25px; }
body.touch .action-zone { bottom: 152px; }
body.touch #touch-zoom { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); }
/* Keep zoom accessible above the temporary construction toolbar. */
body.touch:has(#placement-bar:not([hidden])) #touch-zoom { bottom: calc(100px + env(safe-area-inset-bottom)); }