/* BIG WORLD UI: block hotbar icons, the action MENU (M), BREAK/PLACE touch buttons, the world hint. */
.bb-ic.bb-block { inset: 9px; image-rendering: pixelated; }
.bb-menu-btn { height: 30px; padding: 0 8px; border: 2px solid #000; background: #c6c6c6; box-shadow: inset -2px -2px 0 #555, inset 2px 2px 0 #fff; font: 700 13px/1 var(--px); color: #3f3f3f; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.bb-menu-btn kbd { font: inherit; font-size: 10px; padding: 0 3px; background: #8b8b8b; color: #fff; }
.bb-menu { position: absolute; left: 0; bottom: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 8px; background: rgba(16,0,16,.94); border: 2px solid #2a0a5e; box-shadow: inset 0 0 0 2px #5000a0; z-index: 6; }
.bb-menu[hidden] { display: none; }
.bb-mi { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 44px; border: 2px solid #000; background: #8b8b8b; box-shadow: inset -2px -2px 0 #555, inset 2px 2px 0 #c6c6c6; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; font: 600 14px/1.2 var(--px); text-align: left; cursor: pointer; }
.bb-mi:hover, .bb-mi:focus-visible { background: #a0a0ff; outline: none; }
.bb-mi .bb-ic { inset: 6px auto 6px 8px; width: 28px; }
.bb-mi[data-n]:not([data-n=""])::after { content: attr(data-n); margin-left: auto; color: #ffff55; }
.ta-world { min-width: 88px; height: 60px; font-size: 16px; }
#taBreak { background: rgba(255,140,120,.92); }
#taPlace { background: rgba(140,200,255,.92); }
.world-hint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); padding: 4px 10px; background: rgba(0,0,0,.6); color: #fff; font: 600 14px/1.3 var(--px); text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none; z-index: 6; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.world-hint.show { opacity: 1; }
.world-coords { position: absolute; left: 10px; top: 64px; color: #fff; font: 600 12px/1.3 var(--px); text-shadow: 1px 1px 0 #000; pointer-events: none; z-index: 5; }
@media (max-width: 760px) { .bb-menu-btn { height: 40px; } .bb-ic.bb-block { inset: 7px; } }
/* hotbar: square 44 px slots (36 on phones), a thick obvious selection frame, centred; MENU / ? sit outside it */
.bb-row { position: relative; justify-content: center; }
.bb-slots { padding: 3px; gap: 0; background: rgba(0,0,0,.6); border: 3px solid #000; }
.bb-slot { width: 44px !important; height: 44px !important; border: 2px solid; border-color: #373737 #ffffff #ffffff #373737; background: #8b8b8b; }
.bb-slot + .bb-slot { margin-left: 2px; }
.bb-slot.on { outline: 4px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 7px #000; z-index: 2; }
.bb-k { font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000; }
.bb-menu-btn { position: absolute; right: calc(100% + 10px); }
.bb-help { position: absolute; left: calc(100% + 10px); }
@media (max-width: 760px) {
  .bb-slot { width: 36px !important; height: 36px !important; }
  .bb-ic.bb-block { inset: 5px; }
  .bb-menu-btn { position: static; }
  .bb-row { flex-wrap: wrap; }
  .bb-help { position: static; }
}
/* ?shot (visual-comparison captures only): hide the idle banner, lock hint, speech bubbles and action toasts */
body.shot-mode .idlewarn, body.shot-mode .lock-hint, body.shot-mode .bubble, body.shot-mode .hv-toast, body.shot-mode .ib-bub { display: none !important; }
@media (max-width: 760px) {
  .touch-acts { grid-template-columns: auto auto; gap: 8px; bottom: 200px; right: 10px; }
  .touch-acts .ta-btn { min-width: 64px; height: 48px; }
  .touch-acts .ta-world { min-width: 84px; height: 60px; grid-column: span 2; justify-self: end; }
  .stick { bottom: 200px !important; }
}
/* phones: joystick bottom-left above the hotbar; BREAK + PLACE thumb buttons bottom-right with JUMP above;
   ASK / USE appear only when the crosshair targets a villager's desk or a usable thing */
@media (max-width: 760px), (pointer: coarse) {
  .stick { left: 16px !important; bottom: 150px !important; }
  .touch-acts { grid-template-columns: auto auto !important; grid-template-areas: "ctx jump" "brk plc"; bottom: 140px !important; right: 12px !important; gap: 10px !important; }
  #taBreak { grid-area: brk; } #taPlace { grid-area: plc; } #taJump { grid-area: jump; } #taAsk, #taUse { grid-area: ctx; }
  .touch-acts .ta-world { grid-column: auto !important; min-width: 78px; height: 64px; }
  #taAsk, #taUse { display: none; }
  body[data-ctx="desk"] #taAsk { display: block; }
  body[data-ctx="vacant"] #taUse, body[data-ctx="board"] #taUse, body[data-ctx="market"] #taUse { display: block; }
}
@media (max-width: 760px), (pointer: coarse) {
  .touch-acts { gap: 8px !important; }
  .touch-acts .ta-btn, .touch-acts .ta-world { min-width: 60px !important; width: 60px; height: 60px !important; padding: 0; font-size: 12px; }
}
@media (max-width: 760px), (pointer: coarse) { .stick { bottom: 178px !important; } .touch-acts { bottom: 168px !important; } }

/* PLAY GATE (site/playgate.js): the first click/tap only starts play */
.play-gate { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; border: 0; margin: 0; background: rgba(0, 0, 0, .38); cursor: pointer; font: inherit; color: #fff; -webkit-tap-highlight-color: transparent; touch-action: none; }
.play-gate[hidden] { display: none; }
.pg-card { display: grid; gap: 6px; justify-items: center; padding: 14px 22px; background: #c6c6c6; color: #3f3f3f; border: 3px solid #000; box-shadow: inset -4px -4px 0 #555, inset 4px 4px 0 #fff; max-width: 92%; text-align: center; }
.pg-h { font: 700 22px/1.1 var(--px, monospace); letter-spacing: .06em; color: #fff; text-shadow: 2px 2px 0 #3f3f3f; padding: 8px 18px; background: #6f6f6f; border: 2px solid #000; box-shadow: inset -3px -3px 0 #3a3a3a, inset 3px 3px 0 #a8a8a8; }
.play-gate:hover .pg-h { background: #7e9a52; }
.pg-s { font: 600 12px/1.3 var(--px, monospace); }
body.gate-on .reticle, body.gate-on .world-hint { display: none !important; }
.lock-hint { display: none !important; }

/* EMBED (play.html, the X player card, 480×480 and smaller) */
body.embed { overflow: hidden; background: #000; }
body.embed .hero { height: 100vh; height: 100dvh; min-height: 0; }
body.embed .hud { height: auto; min-height: 0; padding: 4px 6px; gap: 6px; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; z-index: 25; }
body.embed .hud > :not(.tb-right), body.embed .hud-board, body.embed .tb-on-l .tb-lg { display: none !important; }
body.embed .tb-right { display: flex; gap: 6px; align-items: center; width: 100%; pointer-events: auto; }
body.embed .online { margin-left: 0; background: rgba(0,0,0,.6); }
body.embed .inv-badge { font-size: 10px; padding: 2px 6px; background: rgba(0,0,0,.6); }
body.embed .inv-badge .tb-lg { display: none; }
body.embed .emb-full { margin-left: auto; padding: 3px 7px; font: 600 11px/1.2 var(--px, monospace); color: #fff; background: rgba(0,0,0,.6); border: 1px solid #19c37d; text-decoration: none; }
body.embed .hiremeter, body.embed .grok-chip, body.embed .hint, body.embed .foot, body.embed .snd-btn, body.embed .say-btn, body.embed .world-coords, body.embed .titlecard, body.embed .howto { display: none !important; }
body.embed .saylog { max-width: 60%; font-size: 11px; }
body.embed .bottombar { bottom: 4px; transform: translateX(-50%) scale(.72); transform-origin: 50% 100%; }
body.embed .bb-stats { display: none; }
body.embed .panel { top: 34px; max-height: calc(100vh - 44px); width: calc(100vw - 16px); right: 8px; }
body.embed .chat, body.embed .coinbox, body.embed .namebox { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
body.drag-look .touch-acts:not([hidden]) { display: grid; }
body.embed .touch-acts { bottom: 70px !important; right: 6px !important; transform: scale(.8); transform-origin: 100% 100%; }
body.embed .stick { bottom: 70px !important; transform: scale(.8); transform-origin: 0 100%; }
.embed-hmm { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: #000; pointer-events: none; transition: opacity .55s; }
.embed-hmm b { font: 700 64px/1 var(--px, monospace); color: #19c37d; text-shadow: 4px 4px 0 #0a3d26; }
.embed-hmm.out { opacity: 0; }
@media (max-height: 360px) { body.embed .bottombar { transform: translateX(-50%) scale(.6); } .pg-h { font-size: 18px; } }
/* 2026-10-08 HUD like the classic look: hearts on the left, emeralds on the right, XP bar + level just above the
   hotbar, item sprites / isometric block cubes in the slots, a thick white frame on the selected slot */
.bb-pips { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bb-gems { display: flex; gap: 1px; height: 18px; }
.bb-gems i { width: 18px; height: 18px; background: var(--ic-gem) center/contain no-repeat; image-rendering: pixelated; filter: grayscale(1) brightness(.35); }
.bb-gems i.on { filter: none; }
.bb-stats { width: auto; align-self: stretch; }
.bb-xp { height: 8px; margin-top: 2px; }
.bb-lvl { top: -13px; font-size: 15px; }
.bb-ic.bb-block { inset: 4px; }
.bb-ic.bb-item { inset: 5px; }
.bb-slot.on { outline: 4px solid #fff; outline-offset: 0; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000; }
@media (max-width: 760px) {
  .bb-slot { width: 30px !important; height: 30px !important; }
  .bb-ic.bb-block, .bb-ic.bb-item { inset: 2px; }
  .bb-k { display: none; }
  .bb-gems i, .bb-hearts i { width: 12px; height: 12px; }
  .bb-gems, .bb-hearts { height: 12px; }
  .bb-slot.bb-extra { display: none; }
}