/* =====================================================================
   KINGDOM BUILDER — mobile.css
   Touch controls + responsive UI. EVERYTHING here is scoped to
   body.mobile (added only on phones/tablets), so desktop is untouched.
   ===================================================================== */

/* ---- the touch-control layer (created by mobile.js) ---- */
#m-controls, #m-rotate { display: none; }
body.mobile.kb-playing #m-controls { display: block; }

/* device size factor: shrink the controls + hotbar on short (phone-landscape) screens.
   --m-scale = the user's Button-size setting; --m = device factor x user setting. */
body.mobile { --m-dev: 1; }
@media (max-height: 560px) { body.mobile { --m-dev: 0.72; } }
@media (max-height: 430px) { body.mobile { --m-dev: 0.60; } }
#m-controls {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;            /* only the children below catch touches */
  --m-scale: 1;
  --m: calc(var(--m-dev, 1) * var(--m-scale, 1));
  font-family: inherit;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#m-controls > * { pointer-events: auto; }

/* the block hotbar is pointer-events:none by default — let a tap select a slot on touch */
body.mobile .hb-slot { pointer-events: auto; }

/* settings rows that only make sense with a touchscreen */
.set-row.mobile-only { display: none; }
body.mobile .set-row.mobile-only { display: flex; }

/* drag the game canvas to look around; stop the browser scrolling/zooming the page */
body.mobile #game-canvas, body.mobile #m-controls { touch-action: none; }

/* ---- left joystick ---- */
#m-joy {
  position: fixed; left: 18px; bottom: 16px;
  width: calc(150px * var(--m)); height: calc(150px * var(--m));
  border-radius: 50%; z-index: 42; touch-action: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), rgba(255,255,255,.06) 70%, rgba(255,255,255,0));
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 2px 14px rgba(0,0,0,.25), inset 0 0 18px rgba(255,255,255,.08);
}
#m-knob {
  position: absolute; left: 50%; top: 50%;
  width: calc(64px * var(--m)); height: calc(64px * var(--m));
  margin-left: calc(-32px * var(--m)); margin-top: calc(-32px * var(--m));
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffffff, #ffe9a8 55%, #e8b94a);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  transition: transform .04s linear;
}

/* ---- button clusters ---- */
.m-cluster { position: fixed; z-index: 42; display: flex; gap: calc(12px * var(--m)); pointer-events: none; }
.m-cluster > * { pointer-events: auto; }
.m-actions { right: 16px; bottom: 16px; align-items: flex-end; }
.m-mods    { right: 16px; bottom: calc(116px * var(--m)); align-items: center; }
.m-util    { right: 14px; top: 50%; transform: translateY(-90%); flex-direction: column; gap: 10px; }

.m-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(70px * var(--m)); height: calc(70px * var(--m));
  border-radius: 50%; font-size: calc(26px * var(--m)); line-height: 1;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  background: rgba(36,30,20,.42); border: 2px solid rgba(255,255,255,.42);
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.m-btn small { font-size: calc(10px * var(--m)); font-weight: 700; opacity: .92; margin-top: 2px; letter-spacing: .2px; }
.m-btn.press { background: rgba(255,210,90,.6); transform: scale(.94); border-color: #fff; }
.m-btn.on    { background: rgba(95,180,90,.7); border-color: #eaffea; }

.m-btn.b-jump   { width: calc(92px * var(--m)); height: calc(92px * var(--m)); font-size: calc(34px * var(--m)); background: rgba(60,120,60,.5); }
.m-btn.b-break  { background: rgba(150,80,40,.5); }
.m-btn.b-place  { background: rgba(60,100,150,.5); }
.m-util .m-btn  { width: calc(54px * var(--m)); height: calc(54px * var(--m)); font-size: calc(24px * var(--m)); }

/* ---- portrait "please rotate" overlay ---- */
body.mobile.kb-playing #m-rotate { display: none; }   /* JS flips to flex in portrait */
#m-rotate {
  position: fixed; inset: 0; z-index: 250;
  align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(160deg, #1b2233, #2a2140);
  color: #fff;
}
.m-rot-inner { padding: 24px; }
.m-rot-icon { font-size: 64px; animation: m-rot 2.2s ease-in-out infinite; }
.m-rot-msg { font-size: 20px; font-weight: 700; margin-top: 16px; line-height: 1.5; }
.m-rot-msg small { font-weight: 500; opacity: .8; font-size: 15px; }
@keyframes m-rot { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(78deg); } }

/* =====================================================================
   Responsive UI — bigger, finger-friendly, phone-fitting (mobile only)
   ===================================================================== */
@media (max-width: 1024px) {
  body.mobile .modal {
    max-width: 94vw !important; max-height: 86vh !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    font-size: 16px; border-radius: 16px;
  }
  body.mobile .modal h2 { font-size: 21px; }

  /* big tap targets everywhere */
  body.mobile .btn, body.mobile .opt-btn, body.mobile .quick-btn, body.mobile .travel-btn {
    min-height: 46px; font-size: 16px; padding: 11px 14px;
  }
  body.mobile .opt-btn { margin: 7px 0; }

  /* inventory fits the screen and stays tappable */
  body.mobile #inv-grid, body.mobile .inv-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important;
    gap: 8px;
  }
  body.mobile #inv-grid > *, body.mobile .inv-grid > * { min-height: 58px; }

  /* quiz / Q&A readable */
  body.mobile #cquiz-q, body.mobile #quiz-question { font-size: 17px; line-height: 1.45; }
  body.mobile #cquiz-options .opt-btn, body.mobile #quiz-options .opt-btn { font-size: 16px; }

  /* the heads-up panels: trim so they don't crowd a small screen or the controls */
  body.mobile #hud, body.mobile .hud { font-size: 13px; }
  /* lift the block hotbar above the bottom-right action buttons so they never clash */
  body.mobile #hotbar { bottom: calc(18px + 104px * var(--m-dev, 1)); transform: translateX(-50%) scale(0.82); transform-origin: bottom center; }
}

/* in actual portrait, keep the play area clear behind the rotate overlay */
@media (orientation: portrait) {
  body.mobile.kb-playing #m-controls { opacity: .25; }
}

/* shrink the HUD panels on short (phone) screens so they don't crowd the controls */
body.mobile #top-left { transform-origin: top left; }
body.mobile #quest-tracker { transform-origin: top right; }
body.mobile #objective { transform-origin: top center; }
@media (max-height: 560px) {
  body.mobile #top-left, body.mobile #quest-tracker { transform: scale(.74); }
  body.mobile #objective { transform: scale(.82); max-width: 50vw; }
  body.mobile #feast-banner { display: none; }   /* free the bottom on phones — the step is in the objective + opening toast */
}
@media (max-height: 430px) {
  body.mobile #top-left, body.mobile #quest-tracker { transform: scale(.6); }
  body.mobile #objective { transform: scale(.72); }
}

/* minor mobile tweaks: nudge the in-level objective panels down just a touch (clear of the top
   objective), make the verse banner smaller, and drop the redundant "tap to talk" prompt bubble */
body.mobile [id$="-panel"] { margin-top: 14px; }
body.mobile #interact-prompt { display: none !important; }
body.mobile #feast-banner { padding: 6px 14px; max-width: 600px; }
body.mobile #feast-banner .fb-ref { font-size: 12px; line-height: 1.36; }
/* smaller exit ✕ on phones */
@media (max-height: 560px) { #exit-realm { width: 28px; height: 28px; font-size: 15px; top: 6px; right: 6px; border-width: 1.5px; } }