:root{color-scheme:dark;font-family:system-ui,Segoe UI,sans-serif;color:#f2f4f6;background:#090b0e}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;color:inherit;background:#181d23;border:1px solid #48515b;border-radius:8px;min-width:44px;min-height:44px;padding:8px 16px;cursor:pointer}button:hover,button:focus-visible{border-color:#ff9a3c;outline:2px solid transparent;box-shadow:0 0 0 2px #ff7a18}.primary{background:linear-gradient(#ff9a3c,#e95d0e);color:#170b04;border:0;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.hidden{display:none!important}.screen{position:absolute;inset:0;display:flex;flex-direction:column}.art{background:linear-gradient(90deg,rgba(9,11,14,.72),rgba(9,11,14,.1)),url('assets/forge-brickbuster-artwork.png') center / cover}.brand{padding:24px 32px;font-size:12px;font-weight:800;letter-spacing:.2em}.brand span{color:#ff9a3c;margin-left:16px}.splashTitle{margin:auto 8% 12%}.splashTitle small,.menuBox small,.center small{color:#ff9a3c;letter-spacing:.3em;font-weight:800}h1{font-size:clamp(3rem,8vw,7rem);letter-spacing:-.055em;line-height:1;margin:.2em 0;text-shadow:0 4px 20px #000}h1 span{color:#ff7a18}.signal{height:3px;background:#ff7a18;width:160px;animation:signal 1.5s ease-in-out infinite alternate}.version{position:absolute;bottom:20px;right:24px;font-size:11px;color:#b4b9be}@keyframes signal{to{width:40px;opacity:.3}}.center{margin:auto;text-align:center;width:min(360px,80vw)}.center h2{font-size:2rem}.track{height:6px;background:#2a3139;border-radius:6px;overflow:hidden}.track div{height:100%;width:0;background:#ff7a18;transition:width .2s}.menuBox{margin:auto 7%;max-width:660px}.menuBox h1{font-size:clamp(3rem,7vw,6rem)}.menuBox p{color:#ced3d7}.menuActions{display:flex;gap:12px;margin:28px 0}.bar{padding:20px 32px;display:flex;gap:12px;align-items:center}.bar span{margin-left:auto;font-size:11px;color:#aab2b9}#game{background:radial-gradient(circle at 50% 30%,#222a30,#090b0e 70%);align-items:center;gap:8px;padding:12px}header,.hud{width:min(100%,960px);display:flex;justify-content:space-between;align-items:center;gap:8px}header strong{font-size:14px;letter-spacing:.1em;color:#ff7a18}header strong span{color:#fff}header div{display:flex;gap:8px}.hud{font-weight:800;color:#f6a65b}.stage{position:relative;min-width:0;min-height:0;width:min(100%,960px,calc((100dvh - 210px)*1.5));aspect-ratio:3/2;border:2px solid #46505a;border-radius:12px;overflow:hidden;box-shadow:0 16px 50px #000;background:#0b1116}canvas{width:100%;height:100%;display:block;touch-action:none}.overlay{position:absolute;inset:0;background:#090b0ee0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:16px}.overlay h2{font-size:clamp(1.6rem,5vw,3rem);margin:0}.overlay p{color:#c4ccd2}.touch{display:flex;gap:12px}.touch button{min-width:70px}#tip{margin:0;color:#aab2b9;font-size:12px;text-align:center}dialog{border:1px solid #5d6570;background:#181d23;color:#f2f4f6;border-radius:12px;max-width:min(540px,90vw);max-height:80dvh;overflow:auto;line-height:1.6;padding:32px}dialog::backdrop{background:#000b}.close{float:right}@media(max-height:600px){#game{gap:3px;padding:4px}.stage{width:min(100%,calc((100dvh - 135px)*1.5))}#tip{display:none}header button{min-height:36px;padding:4px 10px}.touch button{min-height:36px}}@media(max-width:580px){.brand{padding:18px}.menuBox{margin:auto 6%}.splashTitle{margin:auto 6% 20%}#game{justify-content:center}.hud{font-size:12px}.stage{width:100%}header strong{font-size:11px}.bar{padding:14px}.bar span{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Connect4-inspired launch shell and full-screen arcade arena */
#splash,#loading,#menu{background-image:linear-gradient(90deg,#050607ed 0%,#050607bd 36%,#05060730 78%),url('assets/forge-brickbuster-artwork.png');background-position:center;background-size:cover}
#splash .brand{position:absolute;top:4%;left:6%;display:flex;align-items:center;gap:16px;padding:0;color:#ff7a18;letter-spacing:.18em}#splash .brand img{width:76px;filter:drop-shadow(0 0 18px #ff7a1877)}
.splashTitle{margin:auto auto auto 7%;width:min(680px,84vw)}.splashTitle h1,.menuBox h1{font-size:clamp(3.1rem,7vw,6.8rem);line-height:.84;letter-spacing:-.07em;margin:18px 0}.splashTitle h1 span,.menuBox h1 span{display:block}.splashTitle p{color:#aab2b9;text-transform:uppercase;font-size:12px;letter-spacing:.17em}.splashTitle .signal{width:min(410px,75vw);height:3px;background:#30363d;margin-top:30px;overflow:hidden;animation:none}.signal i{display:block;width:35%;height:100%;background:#ff7a18;box-shadow:0 0 16px #ff7a18;animation:scan 1.25s ease-in-out infinite alternate}@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
#loading .center{text-align:left;margin:auto auto auto 7%;width:min(410px,78vw)}#loading h2{font-size:clamp(2rem,5vw,4rem);text-transform:uppercase;line-height:.95}#loading .track{height:4px}
#menu{justify-content:center}.menuBox{width:min(620px,calc(100vw - 28px));max-width:none;margin:0 0 0 5vw;padding:clamp(24px,4vw,46px);border:1px solid #4c3526;border-top:3px solid #ff7a18;background:linear-gradient(145deg,#11151af9,#06080af5);box-shadow:0 28px 100px #000}.menuHead,.menuFoot{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#9ca6b2;font-size:11px;letter-spacing:.1em}.menuHead img{width:56px}.menuBox>small{display:block;margin-top:30px}.menuBox h1{font-size:clamp(3rem,6vw,5.3rem)}.menuBox>p{color:#c3c9cf}.menuActions{margin:26px 0 10px}.menuActions .primary{width:100%;min-height:56px}.menuTools{display:flex;gap:8px;margin-bottom:26px}.menuTools button{font-weight:800}.menuFoot{border-top:1px solid #30363c;padding-top:16px;margin-top:25px}.menuFoot span{color:#ff7a18}
#game{background:linear-gradient(#080b0d44,#080b0d66),url('assets/forge-arena.png') center / cover no-repeat;justify-content:space-between;padding:10px 14px;gap:4px}#game header,#game .hud{width:min(100%,1500px);background:#090b0ebd;border:1px solid #62402c;border-radius:8px;padding:7px 12px;backdrop-filter:blur(4px)}#game header strong{display:flex;align-items:center;gap:5px}#game header strong img{width:30px;vertical-align:middle}#game .hud{justify-content:space-around;color:#ffb66f;font-size:clamp(12px,1.6vw,18px);letter-spacing:.1em}.stage{flex:1;width:min(100%,calc((100dvh - 155px)*1.5),1200px);max-height:calc(100dvh - 155px);border:3px solid #5f5448;border-top-color:#b5794b;background:#12171a url('assets/forge-arena.png') center / 100% 100% no-repeat;box-shadow:inset 0 0 40px #000,0 15px 60px #000b;border-radius:8px}#game canvas{background:transparent}.stage .overlay{background:#090b0edc;backdrop-filter:blur(5px)}#game .touch{position:absolute;bottom:10px;right:18px;z-index:2;opacity:.88}#game #tip{background:#090b0ea8;padding:3px 12px;border-radius:10px}#game .touch button{background:#11151acc}.overlay h2{color:#ff9a3c;text-shadow:0 0 20px #ff7a1888}
@media(hover:hover) and (pointer:fine){#game .touch{display:none}}@media(max-width:600px){#menu .menuBox{margin:auto}.splashTitle{margin:auto 6%}.stage{width:100%;flex:none;max-height:min(62dvh,calc(100vw * 2 / 3));margin:auto}#game{justify-content:center}#game .touch{position:static}#game #tip{display:none}#game header strong img{width:22px}#game header button{padding:5px;font-size:11px;min-height:38px}}@media(max-height:450px){#game .stage{max-height:calc(100dvh - 105px);width:min(100%,calc((100dvh - 105px)*1.5))}#game .hud{padding:2px 8px}#game header{padding:2px 8px}#game .touch{bottom:4px}}
/* BUILD 0003: a single arena image fills the entire game viewport */
#game{background:#090b0e url('assets/forge-arena.png') center center / cover no-repeat}
#game .stage{background:transparent;border:0;box-shadow:none;border-radius:0;max-width:none;max-height:calc(100dvh - 130px);width:min(calc(100dvh - 130px)*1.5,100%);overflow:visible}
#game canvas{background:transparent}
#game .stage .overlay{border:1px solid #b67543;border-top:3px solid #ff7a18;box-shadow:0 20px 70px #000}
#loading .center{width:min(620px,84vw)}#loading .loadLogo{display:block;width:76px;margin-bottom:18px}#loading h2{font-size:clamp(3rem,7vw,6.8rem);line-height:.84;letter-spacing:-.07em;margin:14px 0 25px}#loading h2 strong{display:block;color:#ff7a18}#loading .center>p{color:#c3c9cf;text-transform:uppercase;letter-spacing:.16em;font-size:12px}#loading #loadStatus{text-align:right}
@media(max-width:600px){#game .stage{width:100%;max-height:min(62dvh,calc(100vw * 2 / 3))}}@media(max-height:450px){#game .stage{max-height:calc(100dvh - 100px);width:min(calc((100dvh - 100px)*1.5),100%)}}
#game .stage{flex:none;aspect-ratio:3/2;max-height:none;width:auto;height:auto}
/* Continuous Connect4-style launch: loading happens inside the same splash composition. */
#splash .signal{background:#30363d;height:4px}
#splash .signal i{width:0;animation:none;transition:width .22s linear}
#splash #loadStatus{display:block;margin-top:8px;color:#aab2b9;letter-spacing:.12em;font-size:11px}
#game canvas{cursor:none}
/* BUILD 0005: the whole viewport is the playable arena, not a centered 3:2 island. */
#game{display:block;position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;padding:0;background:#090b0e url('assets/forge-arena.png') center / 100% 100% no-repeat}
#game .stage,#game .stage:nth-child(n){position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;max-height:none;margin:0;aspect-ratio:auto;overflow:hidden}
#game canvas{width:100%;height:100%;display:block;touch-action:none}
#game header,#game .hud{position:absolute;z-index:3;left:8px;right:8px;width:calc(100% - 16px);max-width:none;margin:0}
#game header{top:8px}#game .hud{top:66px}
#game #tip{position:absolute;z-index:3;left:50%;bottom:4px;transform:translateX(-50%);white-space:nowrap}
#game .touch{position:absolute;z-index:4;bottom:10px;right:12px}
#game .stage .overlay{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,90vw);min-height:250px}
@media(max-width:600px){#game header{top:4px}#game .hud{top:52px}#game #tip{display:none}#game .touch{left:50%;right:auto;transform:translateX(-50%)}}