/* Context, notifications and controls share one flow, including after fonts load. */
#game-shell{--combat-hud-bottom:24px;--combat-hud-height:150px;--combat-hud-width:380px}
#game-shell .bottom-hud{bottom:var(--combat-hud-bottom);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px) minmax(0,1fr);align-items:end;gap:20px;pointer-events:none}
#game-shell .control-tip{grid-column:1;grid-row:1;min-width:0}
#game-shell .coordinate{grid-column:3;grid-row:1;position:static;min-width:0;justify-self:end;padding-bottom:10px}
#game-shell .combat-controls{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:8px;min-width:0;width:100%;pointer-events:none}
#game-shell .combat-controls .interaction-hint{position:static;display:block;transform:none;width:100%;max-width:none;margin:0;padding:9px 12px;border:1px solid #53604a;border-radius:7px;background:#152019f5;color:#d4ceb6;font-size:13px;line-height:1.6;white-space:normal;overflow-wrap:anywhere;text-align:center;box-shadow:0 4px 16px #0003}
#game-shell .combat-controls .toasts{position:static;transform:none;width:100%;max-width:none;max-height:min(25dvh,180px);overflow:hidden;align-items:stretch;gap:6px}
#game-shell .combat-controls .toasts:empty{display:none}
#game-shell .combat-controls .toast{padding:8px 12px;border-radius:7px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
#game-shell .action-dock{width:100%;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 64px;gap:6px;padding:6px;border-color:#43513e;border-radius:10px;background:#111b16f5;pointer-events:auto}
#game-shell .action-dock>button{min-width:0;min-height:72px;border-radius:6px}
#game-shell .action-slot{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;justify-items:start;column-gap:7px;row-gap:2px;height:auto;padding:8px}
#game-shell .action-slot .slot-icon{grid-column:1;grid-row:1 / 3;align-self:center;font-size:22px;line-height:1}
#game-shell .action-slot strong,#game-shell .action-slot small{grid-column:2;margin:0}
#game-shell .action-dock :is(.action-slot strong,.attack-button strong){font-size:16px;line-height:1.5}
#game-shell .action-dock :is(.action-slot small,.attack-button small){font-size:12px;line-height:1.5}
#game-shell .attack-button{gap:8px;padding:8px 10px;justify-content:center}
#game-shell .attack-button>span:first-child{font-size:24px;line-height:1}
#game-shell .attack-button>div{min-width:0}
#game-shell .attack-button small{margin-top:2px}
#game-shell .auto-attack-button{padding:8px 3px}
#game-shell .action-dock>button:focus-visible{outline:2px solid #ead39b;outline-offset:2px}
/* A resized chat stays beside the controls on wide screens. */
@media(min-width:1101px){
  #game-shell .chat-panel{max-width:calc((100% - var(--combat-hud-width))/2 - 50px)}
}
/* Stack chat above the complete controls group when there is no side column. */
@media(max-width:1100px){
  #game-shell .bottom-hud{display:flex;justify-content:center}
  #game-shell .combat-controls{max-width:380px}
  #game-shell .control-tip,#game-shell .coordinate{display:none}
  #game-shell .location{bottom:calc(var(--combat-hud-bottom) + var(--combat-hud-height) + 75px)}
  #game-shell .location h1{font-size:20px}
  #game-shell .location .zone-tag{margin-bottom:6px}
  #game-shell .location p,#game-shell .location .weather{display:none}
  #game-shell .chat-panel:not(.chat-keyboard){bottom:calc(var(--combat-hud-bottom) + var(--combat-hud-height) + 12px)}
  #game-shell .chat-panel.expanded{max-height:calc(100dvh - var(--combat-hud-bottom) - var(--combat-hud-height) - 100px)}
  #game-shell .chat-panel.expanded #chat-body{min-height:0;flex:1 1 auto}
  #game-shell .chat-panel.expanded .chat-history{min-height:0}
}
@media(max-width:760px){
  #game-shell{--combat-hud-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  #game-shell .bottom-hud{left:12px;right:12px}
  #game-shell .mobile-tabs{height:calc(58px + env(safe-area-inset-bottom,0px))}
  #game-shell .combat-controls{max-width:370px;gap:7px}
  #game-shell .combat-controls .interaction-hint{padding:7px 10px;font-size:12px;line-height:1.5}
  #game-shell .combat-controls .toast:not(:last-child){display:none}
  #game-shell .action-dock{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 60px;gap:5px;padding:5px}
  #game-shell .action-dock>button{min-height:66px}
  #game-shell .action-slot{height:auto;min-height:66px;padding:6px;column-gap:5px;grid-template-columns:18px minmax(0,1fr)}
  #game-shell .action-slot .slot-icon{font-size:18px}
  #game-shell .action-dock :is(.action-slot strong,.attack-button strong){font-size:15px}
  #game-shell .attack-button{padding:6px;gap:5px}
  #game-shell .attack-button>span:first-child{display:none}
  #game-shell .chat-panel.chat-keyboard.expanded{max-height:calc(var(--chat-viewport-height) - 90px)}
}
@media(max-width:360px){
  #game-shell .action-slot{display:flex;gap:2px;align-items:center}
  #game-shell .action-slot .slot-icon{display:none}
  #game-shell .attack-button>span:first-child{display:none}
}