/* Off the Roof layout and game states only. Fonts, colours, borders and button looks come from the shared
   design system (shared/ui/hud-tokens.css before this file, hud-components.css after it). */
html,body{height:100%;margin:0;background:var(--hud-surface-canvas);color:var(--hud-text);font:var(--hud-text-body) var(--hud-font-body);overflow:hidden;}
#orCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair;}

.or-hud{position:fixed;inset:0;pointer-events:none;}
.or-hud>*{pointer-events:auto;}
.or-top{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--hud-space-2));transform:translateX(-50%);display:flex;gap:var(--hud-space-4);align-items:center;padding:var(--hud-space-2) var(--hud-space-4);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);}
.or-top>b{font:var(--hud-text-count) var(--hud-font-display);}
.or-scores{display:flex;gap:var(--hud-space-3);}
.or-score{--team:var(--hud-accent);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:78px;padding-bottom:2px;border-bottom:3px solid var(--team);}
.or-score b{font:var(--hud-text-sm) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.or-score i{font:var(--hud-text-sm) var(--hud-font-body);font-style:normal;color:var(--team);letter-spacing:2px;}
.or-score.is-out{opacity:.35;}
.or-score.is-you b{color:var(--team);}
.or-banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);margin:0;padding:var(--hud-space-2) var(--hud-space-6);pointer-events:none;white-space:nowrap;
  font:var(--hud-title-lg) var(--hud-font-display);text-shadow:var(--hud-title-shadow);background:var(--hud-surface-overlay);border-radius:var(--hud-radius);}
.or-banner[hidden]{display:none;}
.or-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--hud-space-3) + 112px);transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100% - var(--hud-space-6));box-sizing:border-box;padding:var(--hud-space-2) var(--hud-space-4);pointer-events:none;text-align:center;
  font:var(--hud-text-body) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);color:var(--hud-accent);background:var(--hud-surface-overlay);border-radius:var(--hud-radius);}
.or-hint[hidden]{display:none;}
.or-hint.is-urgent{color:var(--hud-text);outline:2px solid var(--hud-danger);}
.or-rivals{margin:0;color:var(--hud-accent);font:var(--hud-text-sm) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.or-rivals[hidden]{display:none;}
.or-spell.is-urgent{outline:3px solid var(--hud-danger);outline-offset:2px;animation:or-urgent .5s steps(2) infinite;}
@keyframes or-urgent{50%{outline-color:transparent;}}
@media (prefers-reduced-motion:reduce){.or-spell.is-urgent{animation:none;}}

.or-screen{position:fixed;inset:0;display:grid;place-items:center;padding:var(--hud-space-4);background:var(--hud-surface-overlay);}
.or-screen[hidden]{display:none;}
.or-card{width:min(620px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:var(--hud-space-6);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);text-align:center;display:flex;flex-direction:column;gap:var(--hud-space-3);align-items:center;}
.or-card h1{margin:0;font:var(--hud-title-xl) var(--hud-font-display);text-shadow:var(--hud-title-shadow);}
.or-card h2{margin:0;font:var(--hud-title-lg) var(--hud-font-display);}
.or-tag{margin:0;color:var(--hud-accent);font:var(--hud-text-body) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.or-how{margin:0;padding:0 0 0 var(--hud-space-4);text-align:left;display:grid;gap:var(--hud-space-2);color:var(--hud-text-muted);font:var(--hud-text-sm) var(--hud-font-body);line-height:var(--hud-leading);}
.or-keys{margin:0;font:var(--hud-text-xs) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);color:var(--hud-text);}
.or-go{min-height:var(--hud-control-comfortable);padding:0 var(--hud-space-6);}
.or-lang{min-height:var(--hud-control-compact);padding:0 var(--hud-space-4);opacity:.8;}
.or-credit{margin:0;color:var(--hud-text-muted);font:var(--hud-text-xs) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
@media (max-width:980px){.or-score{min-width:58px;}}

/* the shop between rounds */
.or-shop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100vw - var(--hud-space-6)));padding:var(--hud-space-4);display:grid;gap:var(--hud-space-3);pointer-events:auto;}
.or-shop-head{display:flex;align-items:baseline;gap:var(--hud-space-3);}
.or-shop-head h2{margin:0;flex:1;font:var(--hud-title-lg) var(--hud-font-display);}
.or-shop-head b{color:var(--hud-accent);font:var(--hud-text-body) var(--hud-font-label);}
.or-shop-head span{color:var(--hud-text-muted);font:var(--hud-text-sm) var(--hud-font-label);}
.or-shop-items{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hud-space-2);}
.or-item{display:grid;grid-template-columns:1fr auto;gap:2px var(--hud-space-2);text-align:left;padding:var(--hud-space-2) var(--hud-space-3);}
.or-item b{font:var(--hud-text-sm) var(--hud-font-display);}
.or-item i{font-style:normal;color:var(--hud-accent);letter-spacing:2px;font-size:var(--hud-text-sm);text-transform:none;}
.or-item small{grid-column:1/3;text-transform:none;color:var(--hud-text-muted);font:var(--hud-text-xs) var(--hud-font-body);line-height:1.2;}
.or-item em{grid-column:1/3;font-style:normal;font:var(--hud-text-xs) var(--hud-font-label);color:var(--hud-text);}
.or-item:disabled{opacity:.45;}
@media (max-width:760px){.or-shop-items{grid-template-columns:repeat(2,1fr);}}

/* touch: the canvas must not scroll or select under a thumb, and the spell row wraps on a phone */
#orCanvas{touch-action:none;-webkit-user-select:none;user-select:none;}

.or-shop[hidden]{display:none;}
@media (max-height:480px){.or-shop{padding:var(--hud-space-2);gap:var(--hud-space-2);}.or-shop-items{grid-template-columns:repeat(3,1fr);}.or-item small{display:none;}.or-top{transform:translateX(-50%) scale(.8);transform-origin:top center;}}

/* rooms on the title card */
.or-rooms{display:flex;gap:var(--hud-space-2);justify-content:center;align-items:stretch;flex-wrap:wrap;}
.or-code{width:6ch;text-align:center;text-transform:uppercase;background:var(--hud-surface-control);color:var(--hud-text);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);font:var(--hud-text-body) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.or-netstatus{margin:0;color:var(--hud-accent);font:var(--hud-text-sm) var(--hud-font-body);}

/* pick your dog on the title card */
.or-dogs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--hud-space-2);}
.or-dog{display:grid;text-align:left;padding:var(--hud-space-2) var(--hud-space-3);}
.or-dog b{font:var(--hud-text-sm) var(--hud-font-display);}
.or-dog small{text-transform:none;color:var(--hud-text-muted);font:var(--hud-text-xs) var(--hud-font-body);line-height:1.2;}
.or-dog.is-on{border-color:var(--hud-accent);}

/* The bottom band, on the Dog Wars pattern: the vitals of the dog you play on the left, the skill bar of icon slots beside it. */
.or-bar{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + var(--hud-space-3));transform:translateX(-50%);display:flex;gap:var(--hud-space-2);align-items:stretch;max-width:calc(100vw - var(--hud-space-4));}
.or-vitals{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto auto;gap:2px var(--hud-space-3);align-items:center;padding:var(--hud-space-2);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);}
.or-face{grid-row:1/4;width:72px;height:72px;border-radius:var(--hud-radius);}
.or-vital{display:flex;align-items:baseline;gap:var(--hud-space-2);min-width:118px;justify-content:space-between;}
.or-vital b{font-size:var(--hud-text-sm);}
.or-vital-rattle b{font-size:var(--hud-text-count);color:var(--rattle,var(--hud-text));}
.or-meter{position:relative;flex:1;min-width:64px;height:8px;border-radius:4px;background:var(--hud-surface-inset);overflow:hidden;align-self:center;}
.or-meter i{position:absolute;inset:0 auto 0 0;width:0;background:var(--hud-accent);border-radius:4px;transition:width .15s linear;}
.or-meter i.is-low{background:var(--hud-danger);}
.or-spells{display:flex;gap:var(--hud-space-2);align-items:center;padding:var(--hud-space-2);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);}
.or-spell{--cd:0;position:relative;flex:none;width:64px;height:64px;padding:0;overflow:hidden;border:var(--hud-border-width) solid var(--hud-border-subtle);cursor:pointer;color:var(--hud-text);}
.or-spell .or-icon{position:absolute;inset:0;background-repeat:no-repeat;filter:saturate(.55) brightness(.6);}
.or-spell.ready .or-icon{filter:none;}
.or-spell::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--cd)*100%);background:var(--hud-surface-overlay);opacity:.72;pointer-events:none;}
.or-spell kbd{position:absolute;left:2px;top:2px;z-index:1;padding:0 4px;border-radius:3px;background:var(--hud-surface-overlay);font:var(--hud-text-xs) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);color:var(--hud-accent);}
.or-spell .hud-skill-state{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:none;text-shadow:0 1px 3px #000;}
.or-spell .hud-skill-state:empty{display:none;}
.or-spell b{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1px 2px;background:var(--hud-surface-overlay);font:var(--hud-text-xs) var(--hud-font-label);letter-spacing:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.or-spell.is-locked{cursor:default;}
.or-spell.is-locked .or-icon{filter:grayscale(1) brightness(.35);}
.or-spell.is-locked .hud-skill-state{font:var(--hud-text-xs) var(--hud-font-label);color:var(--hud-text-muted);}
.or-mini{position:absolute;right:calc(env(safe-area-inset-right) + var(--hud-space-3));bottom:calc(env(safe-area-inset-bottom) + var(--hud-space-3));display:grid;gap:2px;padding:var(--hud-space-2);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);pointer-events:none;}
.or-mini canvas{width:132px;height:132px;display:block;}
.or-score{flex-direction:row;gap:var(--hud-space-2);}
.or-score canvas{width:34px;height:34px;border-radius:var(--hud-radius);}
.or-score span{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.or-score em{font:var(--hud-text-xs) var(--hud-font-body);font-style:normal;color:var(--hud-text-muted);font-variant-numeric:tabular-nums;}
@media (max-width:1180px){.or-mini canvas{width:96px;height:96px;}.or-mini .hud-readout-label{display:none;}}
@media (max-width:980px){.or-spell{width:52px;height:52px;}.or-spell b{display:none;}.or-face{width:52px;height:52px;}.or-vital{min-width:92px;}.or-mini{bottom:auto;top:calc(env(safe-area-inset-top) + var(--hud-space-2));}.or-score canvas{display:none;}}
@media (max-width:760px){.or-bar{flex-direction:column-reverse;align-items:center;}.or-spells{flex-wrap:wrap;justify-content:center;}.or-vitals{grid-template-columns:auto auto auto auto;grid-template-rows:auto;}.or-face{grid-row:auto;width:36px;height:36px;}.or-vital{min-width:0;flex-direction:column;align-items:flex-start;gap:0;}.or-mini canvas{width:72px;height:72px;}}
@media (max-height:480px){.or-spell{width:44px;height:44px;}.or-spell kbd{display:none;}.or-mini canvas{width:64px;height:64px;}}

/* progression: the level readout on the cards, and the unlock track as a strip of icon chips */
.or-level{display:grid;grid-template-columns:auto 1fr auto;gap:var(--hud-space-1) var(--hud-space-3);align-items:center;width:100%;box-sizing:border-box;padding:var(--hud-space-2) var(--hud-space-3);text-align:left;}
.or-level .or-next,.or-level .or-track{grid-column:1/4;}
.or-next{color:var(--hud-accent);font:var(--hud-text-sm) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.or-next:empty{display:none;}
.or-xp{height:10px;}
#orEndGain{color:var(--hud-accent);}
.or-track{display:flex;flex-wrap:wrap;gap:var(--hud-space-1);justify-content:center;}
.or-track:empty{display:none;}
.or-chip{position:relative;display:flex;align-items:center;gap:var(--hud-space-1);padding:2px var(--hud-space-2) 2px 2px;border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:var(--hud-radius);background:var(--hud-surface-inset);font:var(--hud-text-xs) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.or-chip i{width:28px;height:28px;border-radius:3px;background-color:var(--hud-surface-canvas);background-repeat:no-repeat;display:grid;place-items:center;font-style:normal;color:var(--hud-accent);}
.or-chip canvas{width:28px;height:28px;}
.or-chip.is-locked{opacity:.5;}
.or-chip.is-locked i,.or-chip.is-locked canvas{filter:grayscale(1) brightness(.6);}
.or-chip.is-new{border-color:var(--hud-accent);box-shadow:0 0 10px color-mix(in srgb,var(--hud-accent) 50%,transparent);}
.or-chip small{color:var(--hud-text-muted);}
.or-dogs{grid-template-columns:repeat(4,1fr);width:100%;}
.or-dog{grid-template-columns:auto 1fr;column-gap:var(--hud-space-2);align-items:center;}
.or-dog canvas{grid-row:1/3;width:40px;height:40px;}
.or-dog:disabled{opacity:.45;}
.or-item{grid-template-columns:auto 1fr auto;}
.or-item .or-icon{grid-row:1/4;width:44px;height:44px;border-radius:var(--hud-radius);background-repeat:no-repeat;}
.or-item small,.or-item em{grid-column:2/4;}
.or-card{width:min(720px,100%);}
@media (max-width:760px){.or-dogs{grid-template-columns:repeat(2,1fr);}}
.or-level.hud-reward-display .or-meter{grid-column:1/3;}
.or-level.hud-reward-display{padding:var(--hud-space-3) var(--hud-space-4);}
@media (max-height:480px){.or-shop-items{grid-template-columns:repeat(4,1fr);}.or-item .or-icon{width:32px;height:32px;}.or-go{min-height:var(--hud-control-compact);}}