/* Base page (round 5): the game view fills the window; the CABAL HUD itself lives in hud.css.
   Font: Data/Font/Font.ini (Portuguese) = arial.ttf, 11 px (decoded-source). */
:root{--hud-font:Arial,"Helvetica Neue",Helvetica,sans-serif;--text:#ffffff;--muted:#b9b9b9;--gold:#e8c06a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--text);font:11px var(--hud-font)}
body{overflow:hidden}
button,input{font:inherit}
[hidden]{display:none!important}
#world{position:fixed;inset:0}
#world canvas{display:block;width:100%;height:100%;touch-action:none}
/* World damage text precedes native UI rendering (AppMain.cpp:1222-1290). */
#floating-layer{position:fixed;inset:0;pointer-events:none;z-index:4}
.damage-number{position:absolute;transform:translate(-50%,-50%);color:#ffe14a;font:bold 18px var(--hud-font);text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;animation:float-damage .95s ease-out forwards;white-space:nowrap}
.damage-number.critical{font-size:24px;color:#ff9d2e}
.damage-number.heal{color:#7cf28a;font-size:15px}
.damage-number.incoming{color:#ff5a4a;font-size:15px}
@keyframes float-damage{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-46px}}
.toast{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:15;opacity:0;transition:opacity .2s;color:#ffe48a;font:bold 13px var(--hud-font);text-shadow:1px 1px 0 #000,-1px -1px 0 #000;pointer-events:none;text-align:center;max-width:calc(100vw - 32px)}
.toast.show{opacity:1}
.loading{position:fixed;inset:0;z-index:20;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .5s}
.loading-brand{font:bold 34px var(--hud-font);letter-spacing:10px;color:var(--gold)}
.loading-line{width:240px;height:3px;background:#222}
.loading-line>span{display:block;background:var(--gold);width:10%;height:100%;transition:width .3s}
.loading>p{color:var(--muted)}
.loading.finished{opacity:0;pointer-events:none}
.loading.error{padding:30px;text-align:center}
.loading.error p{max-width:550px;line-height:1.8}
dialog{max-width:420px;width:calc(100% - 32px);background:#0d1014;border:1px solid #4a5560;color:var(--text);padding:18px;box-shadow:0 20px 60px #000c}
dialog::backdrop{background:#000a}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dialog-heading h2{font:bold 14px var(--hud-font);margin:0;color:var(--gold)}
dialog p{color:var(--muted);line-height:1.6;margin:10px 0}
.icon-button{background:transparent;border:1px solid #4a5560;color:#ddd;width:28px;height:28px;cursor:pointer}
.audio-settings{border:1px solid #333;padding:10px;margin:10px 0}
.audio-volume{display:flex;gap:8px;align-items:center;margin-top:8px}
.button.danger{background:#5a1b16;border:1px solid #a33;color:#fff;padding:7px 12px;cursor:pointer}
.tiny{font-size:10px}
.class-options{display:grid;gap:8px;margin-top:12px}
.class-option{display:grid;gap:3px;text-align:left;background:#151a20;border:1px solid #4a5560;color:var(--text);padding:10px 12px;cursor:pointer}
.class-option strong{font:bold 13px var(--hud-font);color:var(--gold)}
.class-option small{color:var(--muted)}
.class-option:hover,.class-option:focus-visible{border-color:var(--gold);outline:none}
.class-option.current{border-color:#8ddac0}
.class-option.current strong::after{content:' · atual';color:#8ddac0;font-weight:normal}
.variant-options{display:grid;gap:6px;margin:12px 0 0;border:1px solid #4a5560;padding:8px 12px;color:var(--text)}
.variant-options legend{color:var(--gold);font-size:12px;padding:0 4px}
.variant-options label{display:flex;gap:8px;align-items:baseline;cursor:pointer}
.variant-options small{color:var(--muted)}
.world-opt-badge{position:absolute;left:50%;top:4px;transform:translateX(-50%);z-index:30;pointer-events:auto;font:11px/1.4 var(--hud-font,system-ui);color:var(--gold,#cea46a);background:#0b1114cc;border:1px solid #4a5560;border-radius:3px;padding:1px 8px;white-space:nowrap}
.class-unavailable{position:fixed;inset:0;z-index:25;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 16px;text-align:center}
.class-unavailable h2{font:bold 18px var(--hud-font);color:var(--gold);margin:0}
.class-unavailable p{color:var(--muted);max-width:520px;line-height:1.6;margin:0}
.class-unavailable ul{color:#d7a07a;max-width:min(560px,100%);text-align:left;margin:0;padding-left:18px;overflow-wrap:anywhere}
.button{background:#1d242c;border:1px solid #4a5560;color:#fff;padding:7px 12px;cursor:pointer}