html,body{height:100%;margin:0}body{background:var(--background);color:var(--text);font-family:var(--font);touch-action:manipulation;grid-template:"header""map"1fr"xp""controls"/100%;height:100dvh;display:grid}.controls,.map canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:is(h1,h2,h3,h4,legend,th,summary){font-family:var(--display)}button,select,input{font:inherit;color:inherit;background:var(--control);border:1px solid var(--line);border-radius:var(--radius);padding:.25rem .5rem}button:not(:disabled){cursor:pointer}button:not(:disabled):hover,button:focus-visible,select:focus-visible,input:focus-visible{border-color:var(--accent);outline:none}:has(>.badge){--badge-edge:.2rem;position:relative}button:has(>.badge){padding:.55rem}.badge{font:700 .75rem/1 var(--font);color:var(--badge);-webkit-text-stroke:3px var(--badgeOutline);paint-order:stroke fill;pointer-events:none;top:var(--badge-edge);position:absolute}.badge.hotkey{left:var(--badge-edge)}.badge.count{right:var(--badge-edge)}.badge.cooldown{font-size:1.5rem;inset:50% auto auto 50%;translate:-50% -50%}button:disabled{color:var(--muted)}dialog{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:.25rem .25rem #0006}fieldset{border:1px solid var(--line);border-radius:var(--radius);margin:0 0 .5rem}header{border-bottom:1px solid var(--line);grid-area:header;align-items:center;gap:.5rem;padding:.25rem .5rem;display:flex}header>.readout{flex-wrap:wrap;flex:1;gap:0 .75rem;min-width:0;display:flex}header>.readout>*{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}dialog label{padding:.5rem 0;display:block}dialog .indent{padding-left:1.5rem}dialog input[type=number]{width:5rem}.map{grid-area:map;min-height:0;position:relative}canvas{width:100%;height:100%;display:block;position:absolute;inset:0}canvas.minimap{aspect-ratio:1;touch-action:none;cursor:grab;width:min(13.5rem,60vw);height:auto;margin-bottom:.5rem;position:static}dl.sheet{grid-template-columns:1fr auto;align-items:baseline;gap:.125rem 1rem;margin:0 0 .5rem;display:grid}dl.sheet dt{color:var(--muted)}dl.sheet dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}[data-tip=info]{-webkit-text-decoration:underline dotted var(--muted);text-decoration:underline dotted var(--muted);text-underline-offset:.2em;cursor:help}[data-tip=action]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}[aria-describedby=tooltip][data-tip=info]{-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.tooltip{z-index:10;background:var(--surface);max-width:min(18rem,100vw - .5rem);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);pointer-events:none;padding:.375rem .5rem;font-size:.9rem;line-height:1.3;position:fixed;box-shadow:.25rem .25rem #00000080}.tooltip[hidden]{display:none}.tooltip>strong{font-family:var(--display);font-size:1.05em;display:block}.tooltip>div{justify-content:space-between;gap:1rem;display:flex}.tone-common{color:var(--common)}.tone-uncommon{color:var(--uncommon)}.tone-rare{color:var(--rare)}.tone-epic{color:var(--epic)}.tone-good{color:var(--good)}.tone-bad{color:var(--bad)}.tone-muted{color:var(--muted)}.target-frame{background:var(--overlay);color:var(--text);pointer-events:none;gap:.125rem;padding:.25rem .5rem;font-size:.85rem;display:grid;position:absolute;top:.25rem;left:.25rem}.bar .amount{text-align:right;font-variant-numeric:tabular-nums;display:inline-block}.bar{align-items:center;gap:.5rem;display:flex}.vitals{grid-template-columns:auto auto;display:grid}.vitals>.bar{grid-column:span 2;grid-template-columns:subgrid;display:grid}.xp{border-top:1px solid var(--line);grid-area:xp;padding:.125rem .5rem}.xp>progress{flex:1}.bar .badge.count{top:0;right:0;translate:75% -35%}header>.readout>.dead{color:var(--danger);white-space:normal;font-weight:700}.controls{grid-area:controls;grid-template-columns:3fr 1fr;grid-template-areas:"bar bar""pad side";gap:.5rem;padding:.5rem;display:grid}.action-bar{grid-area:bar;grid-template-columns:repeat(6,1fr);gap:.25rem;margin:0;padding:0;list-style:none;display:grid}.pad{grid-area:pad;grid-template-columns:repeat(3,1fr);gap:.25rem;display:grid}.side{grid-area:side;gap:.25rem;display:grid}.controls button{width:100%;min-height:3rem}dialog.menu button,table.bindings button{width:100%;min-height:2.5rem}table.bindings{width:100%}table.bindings th{text-align:left;font-weight:400}.controls button[aria-pressed=true],dialog button[aria-pressed=true]{outline:3px solid var(--accent)}dialog menu.list{gap:.25rem;margin:0 0 .5rem;padding:0;list-style:none;display:grid}dialog menu.list button{text-align:left;width:100%}.panels{z-index:5;box-sizing:border-box;pointer-events:none;flex-wrap:wrap;grid-area:map/1/controls;justify-content:flex-end;place-self:start end;align-items:flex-start;gap:.25rem;max-height:100%;padding:.25rem;display:flex;overflow:auto}.panels dialog{pointer-events:auto;max-width:min(24rem,100%);margin:0;padding:0 .5rem .5rem;position:static}fieldset.frame{border-color:var(--accent);--legend-size:1.1rem;--legend-line:1.25;--legend-pad:.25rem;--frame-inset:.75rem;padding-inline:var(--frame-inset);margin:0;position:relative}fieldset.frame>:is(legend,button.close){font:var(--legend-size) / var(--legend-line) var(--display);padding:0 var(--legend-pad)}fieldset.frame>button.close{top:calc(-1 * var(--legend-size) * var(--legend-line));right:var(--frame-inset);background:var(--surface);border:none;position:absolute}.panel-slot:not(:has(>dialog[open])){display:none}