/* Viewport-sized dashboard. Small windows scale the complete layout, never crop it. */
html,body{width:100%;height:100%;overflow:hidden}
body{position:relative}
main{width:100%;max-width:none;height:100dvh;padding:clamp(6px,1.5vmin,20px);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto minmax(0,1fr) 32px;gap:8px 16px;transform-origin:top left;margin:0}
header{margin:0;align-self:center}.brand-label{font-size:9px;margin:0 0 3px}h1{font-size:clamp(18px,2.6vmin,30px)}
nav{margin:0;padding:0;border:0;justify-self:end;width:min(100%,470px);gap:8px;align-items:center}nav label>span{margin-bottom:3px}select{height:44px}#race{width:86px}
.alerts{grid-column:1/-1;margin:0;display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;font-size:11px}.alerts button{padding:4px 10px;min-height:44px}.alerts p{margin:0;flex:1;min-width:140px}.alerts small{font-size:10px}
.board{grid-column:1/-1;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(6px,1vmin,14px)}
.boss{padding:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto 44px}.boss-head{padding:8px 10px;margin:0}.boss h2{font-size:clamp(16px,2.6vmin,30px)}
.dial{aspect-ratio:auto;height:100%;min-height:0;max-width:none;margin:0}.portrait{object-fit:contain}
.spawn{padding:6px 10px 0;font-size:clamp(25px,4.7vmin,64px)}.spawn small{font-size:10px;margin-bottom:3px}
.remaining,.remaining.pending{margin:4px 10px 6px;min-height:14px;font-size:clamp(10px,1.65vmin,18px);line-height:1.2}
.place{min-height:44px;margin:0;padding:4px 10px;font-size:clamp(10px,1.35vmin,15px);line-height:1.15}
footer{grid-column:1/-1;min-height:0;padding:0;align-items:center;flex-wrap:nowrap;font-size:10px;gap:8px}#stamp{padding:0}footer details{max-width:none}summary{min-height:30px;padding:7px 0;font-size:10px}
footer details[open]{position:absolute;z-index:10;bottom:8px;right:8px;max-width:calc(100% - 16px);width:440px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 8px 40px #0003;text-align:left}footer details[open] p{font-size:11px;line-height:1.5;margin:6px 0}footer a{min-height:30px}
@media(min-width:700px) and (min-aspect-ratio:8/5){.board{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}}
@media(max-width:550px){main{gap:5px 8px;grid-template-rows:auto auto minmax(0,1fr) 30px}header .brand-label{display:none}h1{font-size:17px}nav{gap:5px}nav label>span{font-size:8px}select{font-size:12px;padding:0 5px}#race{width:66px}.alerts{gap:3px 6px}.alerts p{font-size:10px;min-width:0;flex-basis:100%}.alerts small{font-size:9px}.alerts button{font-size:11px}.spawn{font-size:30px}.boss h2{font-size:16px}.place{font-size:10px;padding:3px 6px}.remaining,.remaining.pending{font-size:11px;margin:3px 6px 4px}}

