/* Compact action wheel. Empty space remains available to the map. */
#dragon-action-dock{left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));transform:none;width:204px;height:244px;max-width:none;display:block;pointer-events:none}
#dragon-action-dock .dragon-actions,#dragon-action-dock .learned-abilities{position:absolute;left:0;bottom:0;width:204px;height:204px;max-width:none;transform:none;display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;overflow:visible;pointer-events:none}
#dragon-action-dock .dragon-actions::before{content:"";position:absolute;inset:22px;border-radius:50%;background:#192d2455;pointer-events:none}
#dragon-action-dock button,#dragon-action-dock .passive-art{box-sizing:border-box;position:absolute;display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;min-width:0;min-height:0;margin:0;padding:0;border:2px solid #baa570;border-radius:50%;background:#253c30;color:#f8e4b5;box-shadow:0 2px 0 #13241d;font-size:14px;pointer-events:auto;touch-action:manipulation}
#dragon-action-dock #act-steal{left:79px;top:27px}
#dragon-action-dock #act-eat{left:131px;top:79px}
#dragon-action-dock #act-siege{left:27px;top:79px}
#dragon-action-dock #act-land{left:79px;top:131px}
#dragon-action-dock #act-element{left:77px;top:77px;width:50px;height:50px;min-width:0;background:#823e29;border-color:#e6b66f;color:#ffebc1}
#dragon-action-dock svg{display:block;width:23px;height:23px;flex-shrink:0;pointer-events:none}
#dragon-action-dock #act-element svg{width:27px;height:27px}
#dragon-action-dock #act-rest{left:143px;top:143px}
#dragon-action-dock #visit-lair{left:17px;top:143px}
#dragon-action-dock #visit-lair,#dragon-action-dock #act-rest,#dragon-action-dock .learned-abilities button,#dragon-action-dock .passive-art{width:44px;height:44px;border:0;box-shadow:none;background:transparent;isolation:isolate}
#dragon-action-dock #visit-lair::before,#dragon-action-dock #act-rest::before,#dragon-action-dock .learned-abilities button::before,#dragon-action-dock .passive-art::before{content:"";position:absolute;inset:5px;z-index:-1;border:1.5px solid #b8a778;border-radius:50%;background:#263d32}
#dragon-action-dock #visit-lair svg,#dragon-action-dock #act-rest svg,#dragon-action-dock .learned-abilities svg{width:18px;height:18px}
#dragon-action-dock [data-wheel-slot="0"]{left:17px;top:17px}
#dragon-action-dock [data-wheel-slot="1"]{left:143px;top:17px}
#dragon-action-dock [data-wheel-slot="2"]{left:143px;top:143px}
#dragon-action-dock button[aria-pressed="true"]{background:#6b5734;border-color:#fff0b2;box-shadow:0 0 0 1px #fff0b2}
#dragon-action-dock .learned-abilities button[aria-pressed="true"],#dragon-action-dock #act-rest[aria-pressed="true"]{background:transparent;box-shadow:none}
#dragon-action-dock .learned-abilities button[aria-pressed="true"]::before,#dragon-action-dock #act-rest[aria-pressed="true"]::before{background:#6b5734;border-color:#fff0b2}
#dragon-action-dock button:disabled{opacity:.65}
#dragon-action-dock button:focus-visible{outline:2px solid #ffe6aa;outline-offset:2px}
#dragon-action-dock button::after{display:none!important}
#dragon-action-dock .wheel-cooldown{position:absolute;bottom:-2px;right:-2px;padding:1px 3px;min-width:17px;border:1px solid #b5a37a;border-radius:5px;background:#15291f;color:#fff0c9;font:12px/1.25 system-ui,sans-serif;pointer-events:none}
#dragon-action-dock .passive-art{opacity:.7}
#dragon-action-dock [hidden]{display:none!important}
/* Messages and inspections no longer sit underneath the controls. */
body .map-tip,body:has(.learned-abilities:not([hidden])) .map-tip{left:230px;bottom:18px!important;transform:none;max-width:min(420px,calc(100% - 310px));pointer-events:none;white-space:normal;overflow-wrap:anywhere}
body .inspect{left:230px;bottom:68px;max-width:min(260px,calc(100% - 310px))}
@media(max-width:600px){body .map-tip,body:has(.learned-abilities:not([hidden])) .map-tip{left:12px;bottom:262px!important;max-width:calc(100% - 90px)}body .inspect{left:auto;right:10px;bottom:72px;max-width:calc(100% - 230px)}}
@media(max-width:420px){body .inspect{left:10px;right:auto;bottom:258px;max-width:calc(100% - 90px)}}

/* Phone portrait and short landscape: keep the world visible around the HUD. */
@media(max-width:700px),(max-height:500px){
  .dragon-hud{left:max(10px,env(safe-area-inset-left));top:8px;width:176px;min-width:0;max-width:calc(100% - 90px);padding:6px 8px;border-radius:6px;pointer-events:none}
  .dragon-hud>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:5px}
  .dragon-hud .dragon-heading,.dragon-hud #dragon-state{grid-column:1/-1;min-width:0}
  .dragon-hud .dragon-heading{flex-wrap:nowrap;gap:5px}
  .dragon-hud #dragon-name{font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dragon-hud .dragon-heading #dragon-gold{font-size:11px;flex-shrink:0}
  .dragon-hud #dragon-state{font-size:11px;line-height:1.25;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dragon-hud .dragon-vital-row{margin-top:2px;gap:3px}
  .dragon-hud .vital-icon{width:11px;height:11px;flex-basis:11px}
  .dragon-hud .dragon-vital-row progress{height:4px}
  body .map-tip{font-size:12px;line-height:1.3;padding:6px 8px;border-radius:5px}
  #realm-encounters{top:138px;bottom:auto;left:10px;transform:none;font-size:12px;padding:6px 8px;max-width:180px;min-height:36px;box-shadow:1px 2px 0 #152324}
}
@media(max-height:500px) and (min-width:601px){
  body .map-tip,body:has(.learned-abilities:not([hidden])) .map-tip{left:220px;bottom:10px!important;max-width:min(280px,calc(100% - 500px))}
  #realm-encounters{left:auto;right:12px;top:auto;bottom:10px;max-width:180px}
  #lair-compass{right:202px;bottom:12px;padding:2px 4px}
}


/* Full-height map: former header controls live in the menu and map toolbar. */
body>main{height:100dvh;min-height:0;display:block}
body>main>.world{height:100%;min-height:0}
.map-controls #zoom{display:none}
#world-options #new{font-size:14px;min-height:44px}
#world-options #new::after{content:none}
#world-options .world-day{margin:8px 0;color:#ead9ac;font-size:16px}
.right-actions #speed,.right-actions #pause,.right-actions #open-options{font-size:16px;text-align:center}
@media(min-height:551px) and (max-height:650px){
  body .right-actions{grid-template-columns:repeat(2,44px);gap:6px;top:68px}
  body .right-actions button{width:44px;height:44px;padding:5px}
}

/* Separate lower-right navigation pair: dragon camera, then lair compass. */
#dragon-navigation{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#dragon-navigation #focus-dragon{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:6px;border:1px solid #8c9975;border-radius:6px;background:#15251fed;color:#efdbad;box-shadow:0 4px 12px #0003;pointer-events:auto;touch-action:manipulation}
#dragon-navigation #focus-dragon svg{display:block;flex-shrink:0;image-rendering:pixelated;pointer-events:none}
#dragon-navigation #focus-dragon[aria-pressed="true"]{border-color:#efd69a;box-shadow:inset 0 0 0 1px #efd69a;background:#4a5134}
#dragon-navigation #focus-dragon:focus-visible{outline:2px solid #ffe4a3;outline-offset:3px}
#dragon-navigation #lair-compass{position:static;inset:auto;margin:0;padding:2px 5px 2px 2px;min-height:28px;max-width:76px;box-sizing:border-box}
@media(max-height:500px) and (min-width:601px){#realm-encounters{right:96px}}

/* Three stable learned slots sit beside the wheel, centred on the viewport. */
#learned-abilities{position:absolute;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;width:max-content;max-width:none;padding:5px;margin:0;overflow:visible;background:#15291ff2;border:1px solid #8e805d;border-radius:9px;box-shadow:0 3px 10px #0004;z-index:5}
#learned-abilities[hidden]{display:none!important}
#learned-abilities button{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:42px;height:34px;min-width:42px;margin:0;padding:4px;border:1px solid #bba875;border-radius:6px;background:#294335;color:#ffe5ac;touch-action:manipulation}
#learned-abilities svg{display:block;width:22px;height:22px;pointer-events:none}
#learned-abilities button::after{content:attr(data-shortcut);position:absolute;right:2px;bottom:0;padding:0 2px;margin:0;border:0;color:#f8e5b8;font:10px/13px system-ui;display:block}
#learned-abilities button[data-locked="true"]{opacity:.65;background:#343438;border-color:#68666a;color:#969398;box-shadow:none;cursor:default}
#learned-abilities button[data-locked="true"]::after{display:none}
#learned-abilities button[aria-pressed="true"]{background:#766039;border-color:#ffe4a2;box-shadow:inset 0 0 0 1px #ffe4a2}
#learned-abilities button:focus-visible{outline:2px solid #ffe4a2;outline-offset:3px}
#learned-abilities .wheel-cooldown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#12251ecc;color:#fff0cd;font:bold 18px system-ui;pointer-events:none}
body:has(#learned-abilities:not([hidden])) .map-tip{bottom:84px!important}
@media(max-width:600px){
  #dragon-action-dock{bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px))}
  body .map-tip,body:has(#learned-abilities:not([hidden])) .map-tip{bottom:336px!important}
  body .inspect{bottom:336px}
}

.dragon-heading .gold-coin-icon{width:20px;height:20px;vertical-align:-5px;image-rendering:pixelated}
@media(max-width:700px),(max-height:500px){.dragon-heading .gold-coin-icon{width:16px;height:16px;vertical-align:-4px}}

/* Action guidance stays directly above the centred three-slot action bar. */
body .map-tip,body:has(#learned-abilities:not([hidden])) .map-tip{
  left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(max(12px,env(safe-area-inset-bottom)) + 54px)!important;
  max-width:min(360px,calc(100% - 24px));box-sizing:border-box;text-align:center;
}

/* Autonomy shares the map toolbar; a slash means the player gives the orders. */
#dragon-control[aria-pressed="true"] .autonomy-off-slash{display:none}
#dragon-control:disabled{opacity:.5}
@media(max-height:650px){.right-actions #dragon-control{grid-column:2;grid-row:4}}

/* A steady halo avoids flicker and animation work; passives stay non-clickable. */
#dragon-action-dock #act-element.passive-active,#dragon-action-dock .passive-art.passive-active{opacity:1;border-color:var(--passive-glow,#c5a5ed);box-shadow:0 0 5px 1px var(--passive-glow,#c5a5ed),0 0 11px 1px #bcd4e438}