#attack-btn {position:absolute;right:28px;bottom:100px;z-index:var(--z-control);width:104px;height:104px;border-radius:50%;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:radial-gradient(circle at 35% 25%,#646349,#282e24 72%);border:2px solid #c7b77e;color:#fff1c5;box-shadow:0 3px 12px #0008;touch-action:none;user-select:none;-webkit-user-select:none}
#attack-btn svg {width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#attack-btn span {font-size:14px}
#attack-btn kbd {font-size:11px}
#attack-btn.pressed {transform:scale(.94);background:#77704b;box-shadow:0 0 16px #e1c77b80}
/* Keep desktop rules intact; touch phones also use this layout in landscape. */
@media (max-width:750px), (pointer:coarse) and (max-width:1100px), (max-width:1100px) and (max-height:600px) {
  #game {
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
    --safe-left:env(safe-area-inset-left,0px);
    --safe-right:env(safe-area-inset-right,0px);
    --hotbar-slot:44px;
  }
  #game button {touch-action:manipulation}
  .hud-menu {top:calc(var(--safe-top) + 10px);right:calc(var(--safe-right) + 22px);flex-direction:row;gap:4px}
  .hud-menu button,.hud-menu #travel-btn {width:44px;height:44px;font-size:18px}
  .map-card {top:calc(var(--safe-top) + 64px);right:calc(var(--safe-right) + 22px);bottom:auto;width:112px;padding:6px}
  .map-card canvas {height:auto}
  .map-card .section-title {font-size:9px;margin-bottom:4px}
  .party-card {top:calc(var(--safe-top) + 64px);left:calc(var(--safe-left) + 22px);width:145px;padding:8px;max-height:150px;overflow:auto}
  .party-card .section-title {font-size:8px;letter-spacing:0;gap:4px;margin-bottom:4px}
  #party-btn {min-height:44px;min-width:44px}
  .party-card .small-note {display:none}
  .companion {margin:5px 0}
  .companion-name {font-size:9px}
  .companion-name small {font-size:8px}
  .hotbar {left:auto;right:calc(var(--safe-right) + 22px);transform:none;bottom:calc(var(--safe-bottom) + 30px);grid-template-columns:repeat(4,var(--hotbar-slot));gap:4px}
  .hotbar .slot.empty {display:none}
  #attack-btn {display:flex;right:calc(var(--safe-right) + 22px);bottom:calc(var(--safe-bottom) + 86px);width:76px;height:76px}
  #attack-btn kbd {display:none}
  #joystick {display:block;left:calc(var(--safe-left) + 24px);bottom:calc(var(--safe-bottom) + 100px);z-index:var(--z-control)}
  #game .experience-card {height:calc(12px + var(--safe-bottom));padding-bottom:var(--safe-bottom)}
  .experience-card .xp {bottom:var(--safe-bottom)}
  #game .experience-card #xp-text {bottom:var(--safe-bottom);line-height:11px}
  #game .resource-card {bottom:calc(12px + var(--safe-bottom));height:min(220px,32dvh)}
  .health-card {left:var(--safe-left)}
  .mana-card {right:var(--safe-right)}
  .interact-prompt {left:auto;right:calc(var(--safe-right) + 108px);transform:none;bottom:calc(var(--safe-bottom) + 86px);min-height:44px;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 232px);padding:8px;font-size:12px}
  #interact-label {font-size:12px;overflow-wrap:anywhere}
  .target-card {display:block;top:calc(var(--safe-top) + 224px);bottom:auto;width:210px;max-width:calc(100% - 44px);padding:8px}
  #boss-bar {top:calc(var(--safe-top) + 224px);width:calc(100% - var(--safe-left) - var(--safe-right) - 44px);padding:8px}
  #game:has(#boss-bar:not([hidden])) .target-card {display:none}
  .cast-panel {left:auto;right:calc(var(--safe-right) + 22px);transform:none;bottom:calc(var(--safe-bottom) + 174px);width:min(220px,calc(100% - 146px));padding:8px}
  #game .chat-panel[data-compact=true] {left:calc(var(--safe-left) + 22px);right:auto;width:min(320px,calc(100% - var(--safe-left) - var(--safe-right) - 44px));height:var(--chat-height,190px)}
  #game .chat-panel[data-compact=true] button {min-width:44px;min-height:44px}
  #game .chat-panel[data-compact=true] input {font-size:16px}
  #game .chat-panel[data-compact=true].chat-collapsed {left:calc(var(--safe-left) + 22px);right:auto;width:auto;height:88px;padding:4px;bottom:calc(var(--safe-bottom) + 30px);overflow:hidden}
  #game .chat-panel.chat-collapsed .chat-header {min-height:44px}
  .full-screen {padding:calc(var(--safe-top) + 20px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 16px);align-items:flex-start}
  .screen-content {width:100%;min-width:0}
  #class-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .class-card {padding:5px}
  .class-choice {min-height:245px;padding:5px}
  .class-choice strong {font-size:16px}
  .class-card:last-child {grid-column:1 / -1;width:min(250px,100%);justify-self:center}
  #class-screen {padding-bottom:calc(var(--safe-bottom) + 110px);scroll-padding-bottom:calc(var(--safe-bottom) + 110px)}
  #class-screen .class-start {position:fixed;z-index:var(--z-local-header);left:0;right:0;bottom:0;padding:12px calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 16px);background:#14211df5;border-top:1px solid var(--border)}
  #class-screen #begin-btn {display:block;min-height:48px;width:100%;max-width:420px;margin:0 auto}
  dialog,#catalog-dialog {width:calc(100% - var(--safe-left) - var(--safe-right) - 32px);max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);padding:16px;overflow:auto;overscroll-behavior:contain}
  .dialog-heading {gap:10px}
  .dialog-heading h2 {font-size:21px;overflow-wrap:anywhere}
  .dialog-heading button {flex:0 0 44px;width:44px;height:44px}
  dialog button {min-height:44px}
  .inventory-row {flex-wrap:wrap;gap:8px}
  .item-info {min-width:120px;overflow-wrap:anywhere}
  #catalog-search {font-size:16px;min-width:0;width:100%}
  dl {grid-template-columns:minmax(70px,auto) minmax(0,1fr)}
  #zone-banner {max-width:90%;white-space:normal;text-align:center;font-size:21px}
}

@media (max-width:750px) and (orientation:landscape), (pointer:coarse) and (max-width:1100px) and (orientation:landscape), (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
  .map-card {width:100px}
  .party-card {display:block;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 186px);width:145px}
  #joystick {bottom:calc(var(--safe-bottom) + 34px)}
  .target-card {top:calc(var(--safe-top) + 10px);bottom:auto;width:220px;max-width:calc(100% - 420px);padding:6px}
  #boss-bar {top:calc(var(--safe-top) + 84px);width:220px;max-width:calc(100% - 320px)}
  .cast-panel {bottom:calc(var(--safe-bottom) + 174px);width:200px}
  #class-cards {grid-template-columns:repeat(3,minmax(0,1fr))}
  .class-card:last-child {grid-column:auto;max-width:none}
  #game .chat-panel[data-compact=true].chat-collapsed {left:calc(var(--safe-left) + 134px)}
}

#hotbar .slot, #game #attack-btn {touch-action:none}
#hotbar .slot.unavailable {opacity:.5;cursor:default}
/* Keep action notices above the player, who stays near the center of the world. */
#combat-feedback {position:absolute;z-index:var(--z-notice);left:50%;top:calc(var(--safe-top,0px) + clamp(72px,12vh,110px));transform:translateX(-50%);width:max-content;max-width:min(480px,calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - 32px));padding:8px 14px;border:1px solid #c7b77e;border-radius:8px;background:#14211df0;color:#fff1c5;font-size:12px;line-height:1.5;overflow-wrap:anywhere;text-align:center;pointer-events:none}