/* หิวดึก — HUD tidy pass (positions come from js/hudfit.js; this file keeps sizes, radius and shadows consistent) */
:root { --hud-sh: 0 4px 12px #0007, inset 0 1px 0 #ffffff14; --hud-r: 16px; }

/* left quick-button column: placed button by button by hudfit.js (groups + boost/refill pair) */
html.hud-fit #habits { display: block; grid-template-rows: none; grid-auto-flow: row; gap: 0; }
html.hud-fit #habits > .habit { position: absolute; left: 0; top: 0; margin: 0; }
.habit img { border-radius: calc(var(--hs, 52px) * .27); box-shadow: 0 4px 10px #0008, 0 0 0 1px #e2b25c40; transition: transform .15s; }
.habit:hover img { transform: translateY(-2px) scale(1.04); }
.habit:active img { transform: scale(.94); }
.habit .ring { bottom: -6px; height: 4px; }

/* one look for every chip / box of the HUD */
.who, .pill, .meter { border-radius: 999px; box-shadow: var(--hud-sh); }
#clock, #roombar { border-radius: var(--hud-r); box-shadow: var(--hud-sh); }
.badge { border-radius: 999px; box-shadow: var(--hud-sh); }
#zoombox { border-radius: 999px; box-shadow: var(--hud-sh); gap: 6px; padding: 4px 6px; }
#zoombox button { width: 38px; height: 38px; }
#zoombox b { min-width: 42px; text-align: center; }
#roombar { padding: 4px 6px; }
.moodline { min-height: 0; }

/* announcement ticker: one line under the top bar (left / width / top set by hudfit.js), never over an open window */
#ticker { border-radius: 999px; animation: none; }
#ticker.on { animation: tkin .3s ease-out; }
@keyframes tkin { from { opacity: 0; } }
#ticker .tk-ic { padding: 0 9px; font-size: 15px; }
#ticker .tk-text { font-size: 14px; line-height: 1; }
body.modalon #ticker, body.webfull #ticker, body.papering #ticker, body:has(#pads.on) #ticker { display: none !important; }

/* toasts on big screens: under the right badges column */
@media (min-width: 901px) { html.hud-fit #toasts:not(.low):not(.narrow):not(.side-l) { top: var(--toast-t, 150px); } }

/* toasts placed by ui.js freeToasts(): a free spot clear of the monitor, the hands, the PC case and every HUD control */
#toasts.free { right: auto; bottom: auto; transform: none; max-width: none; }
#toasts.free .toast { font-size: 14px; padding: 8px 14px; }
@media (max-width: 900px), (max-height: 560px) { #toasts.free .toast { font-size: 13px; padding: 7px 12px; } }
/* no free spot anywhere: one compact line over the bottom menu bar (newest toast only) */
#toasts.topbar { right: auto; bottom: auto; transform: none; max-width: none; z-index: 21; }
#toasts.topbar .toast { font-size: 13px; line-height: 1.25; padding: 6px 14px; border-radius: 14px; text-align: center; background: rgba(14,16,40,.97); box-shadow: 0 4px 12px #0008; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* code job pad: label + the how-to line inside the pad (never behind it) */
.pad.big:has(.pad-s) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.15; }
.pad .pad-s { font-size: 12px; font-weight: 400; color: #c9d2ff; }
@media (max-height: 420px) and (orientation: landscape) { #pads .pad { min-height: 54px; } #pads { padding-top: 6px; padding-bottom: calc(6px + var(--safe-b)); } }

/* short landscape phones: the meters as a slim column at the right edge (top set by hudfit.js), off the monitor */
html.meters-side #meters { position: fixed; right: calc(8px + var(--safe-r)); flex-direction: column; align-items: flex-end; gap: 3px; z-index: 5; }
html.meters-side #meters .meter { padding: 1px 7px 1px 1px; }
html.meters-side #meters .meter img { width: 20px; height: 20px; }
html.meters-side #meters .meter .bar { width: 42px; }
html.meters-side #meters.grid2 { display: grid; grid-template-columns: auto auto; justify-items: end; width: auto; }
html.meters-side #meters.mrow { flex-direction: row; align-items: center; }
html.meters-side #meters.mtight { gap: 2px; }
html.meters-side #meters.mtight .meter { padding: 1px 5px 1px 1px; gap: 2px; }
html.meters-side #meters.mtight .meter img { width: 17px; height: 17px; }
html.meters-side #meters.mtight .meter .bar { width: 28px; }

/* ===== touch comforts (phones / tablets) ===== */
/* no double-tap zoom anywhere, no long-press callout or accidental text selection on game UI (inputs + chat text stay selectable) */
html, body, button, .btn, .tab, .dock-btn, .habit, .badge, .pad, #modal, #toasts, #hud, #roombar, #zoombox { touch-action: manipulation; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select, [contenteditable], .jw-sel, .cb-msg, .cb-list p, .br-detail, .selectable { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* scrolling panels keep their scroll inside (no pull-to-refresh / page bounce) */
.card-b, .cb-list, .jw-body, .jw-msgs, #dock { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (pointer: coarse) {
  .badge { min-height: 40px; }
  .rb-av { min-width: 40px; min-height: 40px; }
  #zoombox button { width: 40px; height: 40px; }
  /* every tap target ≥ 40px on a touch screen */
  html .mini, html .card-b .mini { min-height: 40px; }
  html .tabs .tab, html .tabs.sub .tab { min-height: 40px; }
  html .card-h .x { width: 40px; height: 40px; }
  html .grid.foods .qty button, html .qty button { width: 40px; height: 40px; }
  html .rgbdot { width: 40px; height: 40px; }
  html .jw-qarr { width: 40px; height: 40px; margin-top: -24px; }
  html .grid.foods .qty button, html .qty button, html .card-h .x { width: 42px; height: 42px; }
  html .rb-emo, html .tone, html .jw-ib { width: 40px; height: 40px; }
  html .tabs .tab { min-height: 42px; }
  /* the left quick buttons may shrink to 34-38px to stay in one column on tall phones: the touch area stays ≥ 44px */
  .habit::after { content: ''; position: absolute; inset: -4px; }
}
.jw-realpill { font-size: 11px !important; }

/* ===== mouse comforts (desktop) ===== */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .tab:hover, .mini:hover, .badge:hover, #zoombox button:hover, .roomrow:hover, .pcpart:hover { filter: brightness(1.12); }
  .btn, .tab, .mini, .badge, #zoombox button, .roomrow, .pcpart { transition: filter .12s, transform .12s, border-color .12s; }
  .btn:active, .mini:active, .badge:active { transform: translateY(1px); }
  .card-b, .jw-body, .cb-list { scrollbar-width: thin; scrollbar-color: #7c8cff66 transparent; }
  .card-b::-webkit-scrollbar, .jw-body::-webkit-scrollbar, .cb-list::-webkit-scrollbar { width: 8px; }
  .card-b::-webkit-scrollbar-thumb, .jw-body::-webkit-scrollbar-thumb, .cb-list::-webkit-scrollbar-thumb { background: #7c8cff55; border-radius: 8px; }
  button:focus-visible, .btn:focus-visible, .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
}
/* desktop / mouse too: no target under 40px */
.badge { min-height: 40px; display: inline-flex; align-items: center; }
/* narrow portrait phones (hudfit.js adds .bslim when the badge column would reach over the monitor): icon over label */
#badges.bslim .badge { max-width: 58px; padding: 4px 6px; font-size: 11px; line-height: 1.15; text-align: center; justify-content: center; flex-wrap: wrap; white-space: normal; }
#badges.bslim .badge.guide img.bi { margin-right: 0; }

/* ===== QA 2026-11-01: touch sizes + very small screens ===== */
/* close ✕ of งานในจอ / สตรีมเกม: same 44px as the other dialog ✕ on touch, 40px with a mouse */
html .hub-x { width: 40px; height: 40px; }
@media (pointer: coarse) { html .hub-x { width: 44px; height: 44px; font-size: 17px; } }
/* short labels (เคส) must not make a tab narrower than a fingertip */
html .tabs .tab { min-width: 44px; }
/* mouse-only screens: the common small controls reach 40px too (phones already get 40-44px above) */
@media (pointer: fine) {
  html .card-h .x { width: 40px; height: 40px; }
  html .mini, html .card-b .mini { min-height: 40px; }
  html .tabs .tab { min-height: 40px; }
  html .qty button { width: 40px; height: 40px; }
  html .rgbdot { width: 40px; height: 40px; }
  html .jw-qarr { width: 40px; height: 40px; }
  html .wb-bar button { min-width: 40px; height: 40px; }
}
/* tiny phones (Galaxy Fold folded 280px, iPhone SE 320px): dock captions stay ≥ 11px, room bar stays one line */
@media (max-width: 299px) { html .dock-btn { width: 58px; } html .dock-btn .tx { font-size: 11px; } }
@media (max-width: 360px) {
  #roombar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  #roombar::-webkit-scrollbar { display: none; }
  #roombar > * { flex: none; }
  .rb-name { flex: 0 1 auto; min-width: 0; max-width: 92px; }
  .rb-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rb-avs > :nth-child(n+3) { display: none; }   /* me + one more; the full list is in ห้องออนไลน์ */
}
/* very short landscape (≤ 300px tall, e.g. a Fold cover screen sideways): no zoom box (the room camera fits itself;
   mouse wheel still zooms) so the badges, meters and quick buttons have the bottom-right corner */
@media (max-height: 300px) and (orientation: landscape) { #zoombox { display: none !important; } }
/* modals: never taller than the visible screen (iOS Safari's vh includes the hidden toolbar) */
.card { max-height: min(88vh, 88dvh, calc(var(--mm-vh, 1vh) * 88)); }
@media (max-height: 500px) and (orientation: landscape) { .card { max-height: min(calc(100dvh - 8px), calc(var(--mm-vh, 1vh) * 100 - 8px)); } }
.card-b { overflow-y: auto; min-height: 0; }