/* Sugarplum Castle — phones and small tablets. Loaded after ui.css, so everything here wins at
   the same specificity. Two parts: what every touch screen needs (no accidental text selection
   or long-press menus on the controls, no pull-to-refresh, the HUD kept out from under a notch),
   and a compact scale for anything narrow or short (a phone either way up, a small tablet
   sideways), where the laptop-sized HUD, toasts and panel chrome would cover most of the view. */

html, body { overscroll-behavior: none; }
#hud, #labels, .overlay, .side, .big-toast, #toast, #buildBar, .pop, .rotate-hint { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
button, .hud-btn, .round-btn, .btn, .pick-card, .tcard, .tab, .tile, .item, .chip, .swatch, .lbtn, .mode-card { touch-action: manipulation; }

/* the corners of the HUD, clear of a notch and the home bar */
.hud-tl { left: calc(18px + env(safe-area-inset-left, 0px)); top: calc(16px + env(safe-area-inset-top, 0px)); }
.hud-tr { right: calc(18px + env(safe-area-inset-right, 0px)); top: calc(16px + env(safe-area-inset-top, 0px)); }
.hud-br { right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.hud-bl { left: calc(18px + env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

/* a phone held upright (ui/hud.js rotateHint): a quiet word along the top, the game plays on underneath */
.rotate-hint { position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 45; padding: 7px 14px; border-radius: 999px; background: rgba(31, 42, 56, .85); color: #fff; font: 600 14px var(--font); pointer-events: none; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- compact ---------------- */
@media (max-width: 760px), (max-height: 520px) {
  /* the HUD at about two thirds */
  .hud-tl { left: calc(10px + env(safe-area-inset-left, 0px)); top: calc(8px + env(safe-area-inset-top, 0px)); }
  .hud-tr { right: calc(10px + env(safe-area-inset-right, 0px)); top: calc(8px + env(safe-area-inset-top, 0px)); gap: 8px; }
  .hud-br { right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .hud-bl { left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .hud-btn { width: 46px; height: 46px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); font-size: 21px; }
  .hud-btn.big { width: 56px; height: 56px; font-size: 27px; }
  .hud-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
  .money { gap: 6px; }
  .jar { width: 52px; height: 64px; border-width: 3px; border-radius: 10px 10px 19px 19px; box-shadow: 0 4px 0 var(--ink); }
  .jar::before { left: 9px; right: 9px; top: -6px; height: 10px; border-width: 3px; border-radius: 6px; }
  .jar-n { font-size: 21px; }
  .money-cap { gap: 3px; }
  .money-cap b { font-size: 13px; padding: 3px 10px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .money-cap small { font-size: 12px; max-width: 140px; }
  .money-delta { left: 38px; top: -4px; font-size: 18px; padding: 2px 10px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .hearts { width: 66px; margin-top: 6px; padding: 3px 8px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); gap: 3px; }
  .hearts .hb { flex-basis: 20px; width: 20px; height: 20px; }
  .wanted { width: 66px; margin-top: 6px; padding: 2px 8px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); font-size: 15px; gap: 3px; }
  .wanted .ws { flex-basis: 20px; width: 20px; }
  .lavaq { margin-top: 6px; padding: 2px 8px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); font-size: 15px; gap: 2px; }   /* the Lava King's quest pill (systems/lavaking.js) */
  .lavaq .lq { font-size: 18px; }
  .lavaq i { flex-basis: 20px; width: 20px; }
  .lavaq .lw { font-size: 14px; }
  .others { margin-top: 6px; padding: 5px 9px; font-size: 13px; max-width: 180px; border-width: 3px; box-shadow: 0 3px 0 var(--ink); }
  .prompt { bottom: 15%; gap: 8px; padding: 6px 14px 6px 7px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); font-size: 17px; max-width: 92vw; white-space: normal; text-align: left; }
  .prompt .ico { width: 34px; height: 34px; font-size: 19px; flex: 0 0 auto; }
  .hint { top: auto; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); padding: 7px 14px; font-size: 14px; max-width: 92vw; }   /* (above the prompt, which sits at 15% up) */
  .seat-hint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 6px 12px; font-size: 14px; }
  .skip-bus { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 7px 16px 6px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); font-size: 15px; }
  .skip-bus small { font-size: 11px; }
  .guide-chip { top: auto; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .raid-chip { top: auto; bottom: calc(158px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
  #toast { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); padding: 8px 16px; font-size: 15px; max-width: 92vw; text-align: center; }
  .big-toast { top: 11%; gap: 10px; padding: 8px 18px 8px 10px; border-width: 4px; box-shadow: 0 5px 0 var(--ink); font-size: 18px; max-width: 94vw; white-space: normal; text-align: left; }
  .big-toast .ico { width: 38px; height: 38px; font-size: 20px; flex: 0 0 auto; }
  .lname { padding: 2px 9px; font-size: 13px; }
  .label.player .lname { font-size: 14px; }
  .lbubble { max-width: 200px; padding: 6px 10px; font-size: 14px; }
  .build-bar { transform: scale(.8); transform-origin: 50% 100%; }

  /* panels and cards */
  .overlay { padding: 1vh 1vw; }
  .card { border-width: 4px; border-radius: 24px; box-shadow: 0 8px 0 var(--ink), 0 20px 40px rgba(31, 42, 56, .25); }
  .panel { width: min(1100px, 98vw); max-height: 96vh; padding: 12px 14px 14px; gap: 8px; }
  .panel-head h2 { font-size: 22px; }
  .panel-foot { font-size: 14px; min-height: 20px; }
  .round-btn { width: 64px; height: 64px; border-width: 4px; font-size: 26px; box-shadow: 0 5px 0 var(--ink); }
  .round-btn.small { width: 44px; height: 44px; font-size: 18px; box-shadow: 0 4px 0 var(--ink); }
  .btn { font-size: 17px; padding: 8px 16px; border-width: 3px; border-radius: 12px; box-shadow: 0 4px 0 var(--ink); }
  .btn.big { font-size: 21px; padding: 10px 24px; border-radius: 16px; }
  .chip { font-size: 15px; padding: 6px 12px; }
  .tabs { gap: 6px; }
  .tabs .tab { font-size: 15px; padding: 5px 11px; gap: 6px; }
  .tabs .tab span { font-size: 17px; }
  .tabs .tab small { font-size: 12px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; min-height: 90px; }
  .grid.small { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .item { padding: 8px 6px; gap: 4px; border-width: 3px; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
  .item .ico { font-size: 32px; }
  .item .name { font-size: 13px; }
  .item .count, .item .price { font-size: 12px; }
  .empty { padding: 16px; font-size: 16px; }
  .book-note { font-size: 15px; margin: 2px 0 6px; }
  .map-here { font-size: 15px; margin: 0 0 6px; }
  .map-here small { font-size: 13px; }
  .lift-dial svg { width: min(220px, 60vw, 34vh); }
  .map-pick { gap: 6px; margin: 0 0 8px; }
  .map-pick .grp { gap: 4px; padding: 4px 8px 4px 6px; }
  .map-pick .gh { font-size: 17px; }
  .pchip { min-width: 34px; height: 34px; padding: 0 8px; font-size: 14px; gap: 4px; }
  .pchip .pn { font-size: 15px; }
  .pchip small { font-size: 12px; }
  .pchip i { font-size: 12px; }
  .map-title h3 { font-size: 17px; }
  .map-title h3 small { font-size: 13px; }
  .map-you { font-size: 13px; padding: 4px 10px; }
  .mapview { height: clamp(180px, 46vh, 520px); }
  .map-tools button { width: 36px; height: 36px; font-size: 18px; }
  .map-key, .map-h4 { font-size: 14px; }
  .side { width: min(320px, 92vw); padding: 12px; gap: 8px; border-width: 4px; }
  .side-head h2 { font-size: 20px; }
  .side-hint { font-size: 14px; }
  .pop { padding: 6px; gap: 6px; border-width: 3px; }
  .pop .btn { font-size: 15px; padding: 6px 10px; }

  /* the start screen: smaller cards so a row of royals fits */
  .start-card { width: min(980px, 98vw); max-height: 96vh; padding: 14px 16px; gap: 12px; }
  .start-title .castle { font-size: 44px; }
  .start-title h1 { font-size: clamp(26px, 6vw, 40px); margin: 0 0 2px; }
  .start-title p { font-size: 15px; }
  .pick { gap: 10px; }
  .pick-card { width: 132px; padding: 10px; gap: 4px; border-width: 4px; border-radius: 18px; box-shadow: 0 5px 0 var(--ink); }
  .pick-card img { width: 76px; height: 76px; border-width: 3px; }
  .pick-card b { font-size: 17px; }
  .pick-card span { font-size: 13px; }
  .pick-card .plus { font-size: 44px; }
  .pick.arrive .pick-card { width: 160px; min-height: 130px; }
  .arrive-ask { margin: 6px 0 8px; font-size: 16px; }
  .start-foot { font-size: 13px; }
  .new-head h2 { font-size: 22px; }
  .sibs { font-size: 15px; }
  .preview { flex-basis: 130px; }
  .preview img { width: 110px; height: 110px; }
  .preview-name { font-size: 17px; }
  .fields label { font-size: 16px; gap: 8px; }
  .fields input[type="text"] { font-size: 18px; padding: 7px 12px; border-width: 3px; }
  .fields .row > span { font-size: 15px; width: 52px; }
  .swatch { width: 32px; height: 32px; border-width: 3px; }
  .mode-card { min-width: 140px; padding: 8px 10px; border-width: 3px; }
  .mode-card b { font-size: 16px; }
  .mode-card span { font-size: 13px; }

  /* talking to a friend: the reply cards used to fall off the bottom of a phone held sideways */
  .overlay.talk { padding-bottom: calc(1vh + env(safe-area-inset-bottom, 0px)); }
  .talk-card { gap: 8px; }
  .talk-top { flex-direction: row; align-items: flex-end; gap: 10px; }
  .portrait { width: 84px; height: 84px; border-width: 4px; box-shadow: 0 4px 0 var(--ink); }
  .portrait .hearts { bottom: -10px; padding: 2px 6px; font-size: 11px; }
  .talk-bubble { border-width: 4px; border-radius: 20px; box-shadow: 0 5px 0 var(--ink); padding: 10px 56px 10px 14px; min-height: 64px; }
  .talk-bubble::before { left: -16px; bottom: 18px; border-width: 10px; }
  .talk-name { font-size: 13px; }
  .talk-text { font-size: 17px; min-height: 24px; }
  #talkSpeak { right: 8px; top: 8px; }
  .talk-cards { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .tcard { flex: 1 1 calc(50% - 8px); min-width: 140px; gap: 8px; padding: 8px 10px; border-width: 3px; border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
  .tcard .ico { font-size: 24px; }
  .tcard .txt { font-size: 14px; }
  .tcard .knum { display: none; }
  .talk-close { right: -4px; top: -4px; }

  /* the lock puzzles: the tiles at a size a thumb wants, the rest scaled to leave room for them */
  .gate-card { max-height: 98vh; padding: 10px 12px; gap: 8px; border-radius: 22px; }
  .gate-prompt { font-size: clamp(18px, 4.6vw, 30px); }
  .gate-tiles { gap: 8px; }
  .tile { min-height: clamp(64px, 16vh, 110px); border-width: 4px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); font-size: clamp(30px, 7vw, 60px); padding: 6px; }
  .gate-tiles.many .tile { min-height: clamp(56px, 13vh, 90px); font-size: clamp(24px, 5.5vw, 48px); }
  .tile.word { font-size: clamp(18px, 4vw, 34px); }
  .tile.shape svg, .tile.object svg { width: clamp(40px, 9vw, 72px); }
  .obj { width: clamp(38px, 8vw, 64px); }
  .cell { width: clamp(28px, 5.4vw, 44px); }
  .numerals { font-size: clamp(30px, 7vw, 60px); }
  .num, .pshape { width: clamp(52px, 9vw, 80px); font-size: clamp(24px, 4.6vw, 40px); }
  .lbox { width: clamp(38px, 6.4vw, 60px); font-size: clamp(24px, 4.6vw, 44px); }
  .listen { padding: 8px 20px; font-size: clamp(28px, 6vw, 52px); gap: 12px; }
  .listen svg { width: clamp(40px, 7vw, 60px); }
  .lockbadge { font-size: 15px; padding: 4px 12px 4px 8px; }
  .lockbadge svg { width: 24px; height: 24px; }
  .plank { width: 40px; height: 14px; }
  .groups .op { font-size: 40px; }

  /* the grown-ups' page */
  .gu-card { width: min(900px, 98vw); max-height: 96vh; padding: 14px 16px 18px; font-size: 15px; }
  .gu-card h2 { font-size: 22px; }
  .gu-card h3 { margin: 14px 0 6px; font-size: 17px; }
  .gu-q { font-size: 20px; margin: 8px 0; }
  .gu-tab { font-size: 15px; padding: 7px 13px; border-width: 3px; }
  .gu-body input[type="number"], .gu-body input[type="text"], .gu-body select, .gu-body textarea { font-size: 17px; padding: 7px 11px; border-width: 3px; }
  .gu-body input[type="number"] { width: 130px; }
  .gu-stat b { font-size: 24px; }
  .gu-stat span { font-size: 13px; }
  .gu-foot { margin-top: 14px; font-size: 13px; }
}

/* a phone upright: the coin jar's caption would run under the top-right buttons */
@media (max-width: 480px) {
  .money-cap { display: none; }
  .money-delta { left: 30px; }
}