/* HUD adaptativo: a área de jogo permanece livre entre os controles. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html, body { overscroll-behavior: none; }
#game { height: 100svh; height: var(--view-height, 100dvh); }
.hud-top { height: 88px; padding: calc(14px + var(--safe-top)) calc(24px + var(--safe-right)) 14px calc(24px + var(--safe-left)); gap: 12px; }
.hud-controls { flex-direction: row; }
.square-button { width: 44px; height: 44px; flex: 0 0 44px; }
#hud-menu { display: grid; }
.wallet { min-width: 0; }
.currency { min-width: 0; }
.currency > div { min-width: 0; }
.currency b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.currency small { font-size: 10px; letter-spacing: .6px; }
.region-dock { top: calc(94px + var(--safe-top)); }
.region-dock button { min-height: 48px; }
.region-dock small { font-size: 10px; }
.adventure-nav { top: calc(162px + var(--safe-top)); }
.adventure-nav button { min-height: 44px; font-size: 14px; }
.quest-panel { top: calc(222px + var(--safe-top)); left: calc(24px + var(--safe-left)); width: 210px; }
.season-badge { top: calc(102px + var(--safe-top)); right: calc(24px + var(--safe-right)); max-width: 180px; }
.vigor-panel { top: calc(167px + var(--safe-top)); right: calc(24px + var(--safe-right)); width: 180px; }
.world-title { display: none; }
.hotbar-wrap { bottom: calc(42px + var(--safe-bottom)); max-width: calc(100% - 216px - var(--safe-left) - var(--safe-right)); width: 548px; }
.hotbar { width: 100%; gap: 5px; padding: 7px; }
#seed-slots { flex: 5; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.slot { width: 100%; min-width: 0; height: 64px; }
.bag-slot, .book-slot { flex: 1; }
.slot-divider { display: none; }
.slot small { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.slot kbd { font-size: 10px; }
.hotbar-label > span:first-child { font-size: 13px; }
.context-wrap { bottom: calc(158px + var(--safe-bottom)); max-width: calc(100% - 230px); }
.context-hint { white-space: normal; text-align: center; font-size: 13px; }
.interact-button { right: calc(24px + var(--safe-right)); bottom: calc(48px + var(--safe-bottom)); width: 80px; height: 80px; }
.interact-button span { font-size: 10px; }
.camera-panel { right: calc(20px + var(--safe-right)); bottom: calc(146px + var(--safe-bottom)); width: 152px; }
.camera-panel .square-button { width: 40px; height: 40px; flex-basis: 40px; }
.camera-panel > span { font-size: 10px; }
.joystick { left: calc(24px + var(--safe-left)); bottom: calc(48px + var(--safe-bottom)); width: 96px; height: 96px; user-select: none; -webkit-user-select: none; }
.joystick > div { width: 40px; height: 40px; top: calc(50% - 20px); left: calc(50% - 20px); }
.controls-hint { bottom: calc(16px + var(--safe-bottom)); gap: 10px; }
.backup-status { left: calc(24px + var(--safe-left)); bottom: calc(158px + var(--safe-bottom)); max-width: 180px; min-height: 44px; font-size: 12px; }
.save-status { bottom: calc(6px + var(--safe-bottom)); left: calc(16px + var(--safe-left)); max-width: 200px; font-size: 10px; }
.quick-menu { display: none; }
.drawer-backdrop { position: absolute; inset: 0; z-index: 7; border: 0; background: #051b2280; }
.drawer-backdrop[hidden] { display: none; }
.drawer { inset: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) auto; width: 400px; max-width: calc(100% - 24px - var(--safe-left) - var(--safe-right)); max-height: none; padding: 0 22px 22px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.drawer-head { position: sticky; top: 0; padding: 22px 42px 1px 0; background: #203628; z-index: 2; }
.drawer-head > button { top: 12px; right: -9px; width: 44px; height: 44px; background: #203628; }
.drawer-head h2 { font-size: 25px; }
.drawer-tabs { position: sticky; top: 107px; background: #203628; z-index: 1; gap: 14px; padding-top: 8px; scrollbar-width: thin; }
.drawer-tabs > button { min-height: 44px; font-size: 14px; }
.drawer:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
.drawer-head { position: relative; flex: 0 0 auto; }
.drawer-tabs { position: static; flex: 0 0 auto; }
#drawer-content { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.crop-card > div, .animal-row > div, .guardian-card > div, .training-row > div, .dungeon-floor > div, .talent-name { min-width: 0; }
.crop-card button, .animal-row button { min-height: 44px; font-size: 13px; }
.pet-card b { font-size: 14px; }
.pet-card small, .animal-row p, .upgrade p, .drawer-note { font-size: 13px; }
.skin-row button { width: 44px; height: 44px; }
dialog, dialog.adventure-dialog, dialog.journey-dialog, dialog.cutscene-dialog { width: calc(100% - 32px - var(--safe-left) - var(--safe-right)); max-height: calc(var(--view-height, 100dvh) - 32px - var(--safe-top) - var(--safe-bottom)); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-top: 16px; }
.modal-close { position: sticky; display: grid; top: 0; z-index: 5; margin: 0 -12px 0 auto; background: #183027f5; border: 1px solid var(--border); }
.modal-kicker { overflow-wrap: anywhere; }
.modal-title { overflow-wrap: anywhere; margin-top: 12px; }
.modal-actions > button { min-height: 44px; max-width: 100%; }
.talent-summary { flex-wrap: wrap; }
.talent-node button, .path-finale button { min-height: 44px; font-size: 13px; }
.talent-name b, .talent-node p, .path-finale p { font-size: 14px; }
.training-row button { white-space: normal; overflow-wrap: anywhere; }
.guardian-roster { overscroll-behavior-x: contain; scrollbar-width: thin; }
.dungeon-rewards { flex-wrap: wrap; }
.dungeon-rewards > b { min-width: 80px; }
.dungeon-hud { top: calc(100px + var(--safe-top)); left: calc(16px + var(--safe-left)); width: 218px; transform: none; }
.dungeon-hud > button { min-height: 44px; font-size: 13px; }
.dungeon-hud label { font-size: 10px; letter-spacing: .3px; }
.dungeon-hud #dungeon-wave { font-size: 12px; }
.dungeon-controls { bottom: calc(28px + var(--safe-bottom)); }
.dungeon-controls button > span { font-size: 13px; }
.dungeon-mode .camera-panel { bottom: calc(30px + var(--safe-bottom)); }
.dungeon-mode .joystick { bottom: calc(30px + var(--safe-bottom)); }
.cutscene-controls > button { min-height: 44px; }
.cutscene-controls { flex-wrap: wrap; }
.cutscene-controls .primary-button { min-width: 0; }
.cutscene-stage { min-width: 0; }
.cutscene-stage canvas { max-width: 100%; }
#toasts { top: calc(218px + var(--safe-top)); width: max-content; max-width: calc(100% - 32px); }
.toast { overflow-wrap: anywhere; }
.landscape-option { display: none; }
@media (any-pointer: coarse) {
  .joystick { display: block; }
  .controls-hint, .slot kbd, .adventure-nav kbd, .dungeon-controls kbd { display: none; }
  button { -webkit-tap-highlight-color: transparent; }
}
/* Celulares, tablets em retrato e janelas baixas usam um menu recolhível. */
@media (max-width: 900px), (max-height: 600px) {
  .hud-top { height: calc(62px + var(--safe-top)); padding: calc(8px + var(--safe-top)) calc(10px + var(--safe-right)) 6px calc(10px + var(--safe-left)); align-items: center; gap: 10px; }
  .game-brand { display: none; }
  .wallet { flex: 1; max-width: 430px; height: 48px; padding: 5px 0; margin: 0 auto 0 0; }
  .currency, .currency:last-child { flex: 1; min-width: 0; padding: 0 8px; gap: 5px; }
  .currency b { font-size: clamp(16px, 3.5vw, 22px); }
  .currency small { font-size: 10px; letter-spacing: 0; }
  .coin-icon, .wood-icon, .light-icon { font-size: 20px; }
  .hud-controls > button { display: none !important; }
  .hud-controls #hud-menu { display: grid !important; font-size: 25px; }
  .quest-panel, .vigor-panel, .season-badge, .camera-panel, .backup-status, .controls-hint { display: none; }
  .region-dock { top: calc(66px + var(--safe-top)); left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); width: auto; transform: none; padding: 4px; gap: 4px; }
  .region-dock button { flex: 1; min-width: 0; min-height: 44px; padding: 3px 5px; gap: 5px; justify-content: center; }
  .region-dock b { font-size: 12px; }
  .region-dock small { display: block; font-size: 10px; letter-spacing: 0; }
  .region-glyph { width: 20px; font-size: 21px; flex-shrink: 0; }
  .adventure-nav { top: calc(126px + var(--safe-top)); left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); width: auto; transform: none; gap: 6px; }
  .adventure-nav button { flex: 1; min-width: 0; padding: 6px; font-size: 13px; white-space: nowrap; }
  .adventure-nav kbd { display: none; }
  .hotbar-wrap { bottom: calc(24px + var(--safe-bottom)); width: 550px; max-width: calc(100% - 20px - var(--safe-left) - var(--safe-right)); }
  .hotbar { padding: 5px; gap: 4px; }
  #seed-slots { gap: 4px; }
  .slot { height: 58px; }
  .slot canvas { width: 32px; height: 32px; }
  .slot kbd { display: none; }
  .slot small { font-size: 10px; }
  .bag-glyph, .book-glyph { font-size: 28px; line-height: 32px; }
  .hotbar-label { display: flex; padding-bottom: 6px; }
  .hotbar-label > span:last-child { display: none; }
  .joystick, .dungeon-mode .joystick { display: block; width: 88px; height: 88px; left: calc(16px + var(--safe-left)); bottom: calc(122px + var(--safe-bottom)); }
  .joystick > div, .dungeon-mode .joystick > div { top: calc(50% - 20px); left: calc(50% - 20px); }
  .interact-button { bottom: calc(126px + var(--safe-bottom)); right: calc(16px + var(--safe-right)); width: 76px; height: 76px; }
  .context-wrap { bottom: calc(128px + var(--safe-bottom)); width: calc(100% - 228px - var(--safe-left) - var(--safe-right)); max-width: 300px; }
  .context-hint { font-size: 12px; padding: 6px; line-height: 1.35; }
  .context-hint kbd { display: none; }
  .save-status, .dungeon-mode .save-status { display: block; text-align: center; left: 10px; right: 10px; bottom: calc(4px + var(--safe-bottom)); width: auto; max-width: none; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .quick-menu:not([hidden]) { display: block; position: absolute; z-index: 10; top: calc(62px + var(--safe-top)); right: calc(10px + var(--safe-right)); width: 350px; max-width: calc(100% - 20px - var(--safe-left) - var(--safe-right)); max-height: calc(100dvh - 78px - var(--safe-top) - var(--safe-bottom)); overflow: auto; overscroll-behavior: contain; border: 1px solid #bfa975aa; border-radius: 12px; padding: 12px; background: #163024fa; box-shadow: 0 16px 60px #001811cc; }
  .quick-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
  .quick-menu-heading b { font: 500 23px 'Space Grotesk', sans-serif; }
  .quick-menu-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-menu-actions button, .quick-camera button { min-height: 48px; padding: 10px; font-size: 14px; line-height: 1.35; border: 1px solid #c2c58540; border-radius: 7px; background: #304732; overflow-wrap: anywhere; }
  .quick-menu-actions button:last-child { grid-column: 1 / -1; }
  .quick-camera { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; margin-top: 14px; }
  .quick-camera button:not(:nth-child(2)) { font-size: 24px; }
  .quick-menu > p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 12px 2px 0; }
  .quick-menu-open .joystick, .quick-menu-open #interact, .quick-menu-open .dungeon-controls { visibility: hidden; }
  .dungeon-mode .quick-menu [data-quick]:not([data-quick="sound"]):not([data-quick="fullscreen"]) { display: none; }
  .dungeon-hud { left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); top: calc(68px + var(--safe-top)); transform: none; width: auto; max-width: none; padding: 10px 12px; }
  .dungeon-hud > div:first-child { display: flex; }
  .dungeon-hud #dungeon-wave { display: block; margin: 0; text-align: right; }
  .dungeon-hud label { margin: 8px 0 6px; }
  .dungeon-hud > button { margin: 2px 0 0 auto; padding: 5px 0; }
  .dungeon-controls { left: auto; right: calc(16px + var(--safe-right)); bottom: calc(28px + var(--safe-bottom)); transform: none; gap: 8px; }
  .dungeon-controls button { width: 108px; min-height: 78px; padding: 8px 4px; }
  .dungeon-controls button:last-child { width: 72px; }
  .dungeon-controls kbd { display: none; }
  .dungeon-mode .joystick { bottom: calc(26px + var(--safe-bottom)); }
  .dungeon-mode .camera-panel { display: none; }
  #toasts { top: calc(180px + var(--safe-top)); }
  .talent-tree { grid-template-columns: 1fr; }
  .talent-branch { padding: 12px; border: 1px solid #afba8830; border-radius: 9px; }
  .talent-node p, .path-finale p { min-height: 0; }
  .talent-node { grid-template-columns: 40px minmax(0, 1fr); }
  .talent-node canvas { width: 40px; height: 40px; }
  .training-row { display: block; }
  .training-row button { max-width: none; width: 100%; margin-top: 12px; }
}
@media (max-width: 480px) {
  .currency { padding: 0 5px; }
  .currency > span { display: none; }
  .region-glyph { display: none; }
  .region-dock b { font-size: 13px; }
  .region-dock small { font-size: 9px; }
  .adventure-nav button > span { margin-right: 2px; }
  .drawer { padding: 0 14px 18px; }
  .crop-card { display: grid; grid-template-columns: 45px minmax(0, 1fr); }
  .crop-card button { grid-column: 1 / -1; width: 100%; max-width: none; }
  .animal-row { flex-wrap: wrap; }
  .animal-row button { width: 100%; }
  .guardian-card { flex-wrap: wrap; }
  .dungeon-acts, .season-calendar, .region-grid { grid-template-columns: 1fr; }
  dialog, dialog.adventure-dialog, dialog.journey-dialog, dialog.cutscene-dialog { padding: 12px 14px 20px; width: calc(100% - 16px - var(--safe-left) - var(--safe-right)); max-height: calc(var(--view-height, 100dvh) - 16px - var(--safe-top) - var(--safe-bottom)); }
  .modal-title { font-size: 25px; }
  .modal-body { font-size: 16px; }
  .modal-actions { gap: 8px; }
  .modal-actions > button { width: 100%; }
  .cutscene-caption { min-height: 0; }
  .cutscene-controls { gap: 8px; }
  .cutscene-controls .primary-button { flex: 1; }
  .setting-row { gap: 12px; }
  .setting-row input { flex: 0 0 24px; width: 24px; height: 24px; }
}
/* Paisagem: navegação nos cantos, centro livre, ferramentas junto à base. */
@media (max-height: 600px) and (orientation: landscape) {
  .quick-menu .landscape-option { display: block; }
  .hud-top { right: auto; width: min(42%, 365px); }
  .wallet { height: 46px; }
  .currency { padding: 0 5px; }
  .currency > span { display: none; }
  .currency b { font-size: 17px; }
  .currency small { font-size: 9px; }
  .hud-controls { position: fixed; top: calc(8px + var(--safe-top)); right: calc(10px + var(--safe-right)); }
  .region-dock { top: calc(8px + var(--safe-top)); left: 43%; right: calc(65px + var(--safe-right)); height: 48px; padding: 2px; }
  .region-dock button { padding: 2px; gap: 2px; }
  .region-glyph, .region-dock small, .adventure-nav, .hotbar-label, .context-wrap, .save-status, .dungeon-mode .save-status { display: none; }
  .hotbar-wrap { bottom: calc(10px + var(--safe-bottom)); max-width: calc(100% - 226px - var(--safe-left) - var(--safe-right)); width: 500px; }
  .slot { height: 56px; }
  .slot canvas { width: 30px; height: 30px; }
  .slot small { font-size: 10px; }
  .joystick, .dungeon-mode .joystick { bottom: calc(16px + var(--safe-bottom)); width: 80px; height: 80px; }
  .interact-button { bottom: calc(18px + var(--safe-bottom)); width: 76px; height: 76px; }
  .dungeon-hud { top: calc(8px + var(--safe-top)); left: 43%; right: calc(66px + var(--safe-right)); padding: 6px 10px; min-height: 48px; }
  .dungeon-hud > div:first-child { padding-right: 45px; }
  .dungeon-hud b { font-size: 11px; }
  .dungeon-hud label { margin: 4px 0; font-size: 9px; }
  .dungeon-hud #dungeon-wave { display: none; }
  .dungeon-hud > button { position: absolute; right: 3px; top: 1px; width: 44px; height: 44px; font-size: 0; }
  .dungeon-hud > button::after { content: '↩'; font-size: 24px; }
  .dungeon-controls { bottom: calc(14px + var(--safe-bottom)); }
  .dungeon-controls button { min-height: 72px; }
  #toasts { top: calc(66px + var(--safe-top)); }
  .cutscene-caption { min-height: 0; }
}

/* Menu de ícones: o cenário fica livre até o jogador abrir os três pontos. */
.hud-controls { z-index: 12; }
#hud-menu { position: relative; width: 48px; height: 48px; flex-basis: 48px; border-color: #d7bd7770; background: #152d25f5; }
#hud-menu svg { width: 26px; height: 26px; fill: currentColor; }
#hud-menu[aria-expanded="true"] { color: #173022; background: #e2c985; border-color: #f7e4ad; }
.quick-menu-backdrop { position: absolute; inset: 0; z-index: 8; border: 0; background: #03171166; touch-action: none; }
.quick-menu-backdrop[hidden], .quick-menu[hidden] { display: none; }
.quick-menu:not([hidden]) { display: block; position: absolute; z-index: 10; top: calc(82px + var(--safe-top)); right: calc(24px + var(--safe-right)); width: 360px; max-width: calc(100% - 20px - var(--safe-left) - var(--safe-right)); max-height: calc(var(--view-height, 100dvh) - 96px - var(--safe-top) - var(--safe-bottom)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid #c9b77999; border-radius: 14px; padding: 16px; background: linear-gradient(145deg, #243c2d, #132b23); box-shadow: 0 16px 60px #001811aa, inset 0 1px #f7e6a914; animation: menu-reveal .16s ease-out; }
.quick-menu-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.quick-menu-heading > div { min-width: 0; }
.quick-menu-heading small { font-size: 12px; letter-spacing: 2px; color: #dbc98f; }
.quick-menu-heading h2 { font: 500 19px/1.25 'Space Grotesk', sans-serif; margin: 5px 0; }
.quick-menu-heading .square-button { width: 44px; height: 44px; flex: 0 0 44px; box-shadow: none; }
.menu-season { display: grid; gap: 3px; padding-bottom: 14px; color: #c9d6ba; }
.menu-season b { font-size: 13px; font-weight: 500; }
.menu-season small { font-size: 12px; color: #a9ba9f; }
.quick-menu-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quick-menu .quick-menu-actions .menu-tile { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; grid-column: auto; min-width: 0; min-height: 87px; padding: 12px 4px 9px; font-size: 14px; line-height: 1.2; text-align: center; border: 1px solid #bdc88c35; border-bottom: 3px solid #071d1755; border-radius: 9px; background: #48604633; overflow-wrap: normal; }
.menu-icon { display: grid; place-items: center; color: #d6dfa5; width: 30px; height: 30px; }
.menu-icon svg { display: block; width: 28px; height: 28px; }
.menu-label { max-width: 100%; font-size: 14px; line-height: 1.2; }
#talents-button .menu-icon, #vigor-panel .menu-icon { color: #eed08d; }
#dungeons-button .menu-icon, #journal .menu-icon { color: #cfb9e5; }
#maps .menu-icon, #backup .menu-icon { color: #a7d5d6; }
.menu-badge { position: absolute; top: 4px; right: 4px; font-size: 11px; padding: 2px 4px; border-radius: 4px; background: #0b251e; color: #c9d7b6; }
.quick-menu .menu-tile.tired .menu-badge { color: #f0ba85; }
.quick-menu .menu-tile.rebirth-ready, .quick-menu .menu-tile.event-ready { border-color: #d6bb71; background: #a2883626; }
.quick-menu .menu-tile.event-ready::after { content: '!'; position: absolute; right: 6px; top: 5px; width: 18px; height: 18px; border-radius: 4px; background: #e3cc86; color: #1b3022; font-weight: 700; }
.quick-menu .menu-tile[aria-pressed="true"] { border-color: #c7d9a8; }
.quick-menu button:focus-visible, .quick-menu summary:focus-visible { outline-offset: 1px; }
.menu-details { margin-top: 14px; border-block: 1px solid #c6c28b26; }
.menu-details summary { padding: 14px 2px; font-size: 14px; cursor: pointer; }
.quick-menu .region-dock { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inset: auto; width: auto; height: auto; transform: none; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; }
.quick-menu .region-dock button { display: flex; padding: 8px; min-height: 52px; gap: 6px; justify-content: flex-start; }
.quick-menu .region-dock .region-glyph { display: block; font-size: 22px; width: 24px; }
.quick-menu .region-dock b { font-size: 14px; }
.quick-menu .region-dock small { display: block; font-size: 11px; letter-spacing: 0; }
.quick-menu .quest-panel { display: block; position: static; width: auto; padding: 12px 0 14px; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.quick-menu .quest-panel h3 { font-size: 14px; margin: 2px 0 8px; }
.quick-menu .quest-panel p { font-size: 14px; line-height: 1.5; max-height: none; margin-bottom: 10px; }
.quick-menu .quest-panel > button { font-size: 14px; min-height: 44px; }
.quick-camera { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; margin-top: 14px; }
.quick-camera button { min-height: 44px; padding: 8px; border: 1px solid #c2c58540; border-radius: 7px; background: #304732; font-size: 14px; }
.quick-camera button:not(:nth-child(2)) { font-size: 24px; }
.menu-camera-state { display: block; text-align: center; margin-top: 8px; font-size: 11px; letter-spacing: 1px; color: #aebfa5; }
.quick-menu-open .joystick, .quick-menu-open #interact, .quick-menu-open .dungeon-controls { visibility: hidden; }
.dungeon-mode .quick-menu .menu-tile:not(#sound):not(#fullscreen), .dungeon-mode .quick-menu .menu-details, .dungeon-mode .menu-season { display: none; }
.dungeon-mode .quick-menu-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hotbar-wrap { width: 390px; }
#toasts { top: calc(100px + var(--safe-top)); }
@media (hover: hover) {
  .quick-menu .menu-tile:hover { background: #65774744; border-color: #d8c780aa; }
}
@media (max-width: 900px), (max-height: 600px) {
  .quick-menu:not([hidden]) { top: calc(64px + var(--safe-top)); right: calc(10px + var(--safe-right)); max-height: calc(var(--view-height, 100dvh) - 76px - var(--safe-top) - var(--safe-bottom)); }
  #toasts { top: calc(74px + var(--safe-top)); }
}
@media (max-width: 360px) {
  .quick-menu:not([hidden]) { padding: 12px; }
  .quick-menu-actions { gap: 6px; }
  .quick-menu .quick-menu-actions .menu-tile { min-height: 86px; }
}
@media (prefers-reduced-motion: reduce) { .quick-menu { animation: none !important; } }
@keyframes menu-reveal { from { opacity: 0; translate: 0 -5px; } to { opacity: 1; translate: 0 0; } }

/* Mixagem simples: volumes independentes, inclusive nas telas pequenas. */
.audio-settings { padding: 16px; margin: 8px 0 14px; border: 1px solid #b5c39933; border-radius: 10px; background: #0e241d66; }
.music-now { margin: 0 0 16px; display: grid; gap: 6px; }
.music-now span { font-size: 12px; letter-spacing: 1.8px; color: #cbb985; }
.music-now b { font-size: 18px; font-weight: 500; color: #ebdfb8; }
.audio-volume { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; margin: 12px 0; font-size: 14px; }
.audio-volume output { color: #d0dda9; font-variant-numeric: tabular-nums; }
.audio-volume input[type="range"] { width: 100%; min-width: 0; height: 32px; grid-column: 1/-1; accent-color: #dac27d; cursor: pointer; }
.audio-settings > p:last-child { color: #b6c5a9; font-size: 14px; line-height: 1.5; margin: 12px 0 0; }