.main-header { --bg:rgba(4, 10, 16, .58); --color:#fff; }
main#sub03 { width:100%; max-width:none; padding:0; overflow:hidden; background:#071018; }
main#sub03 > .container { position:relative; width:100%; max-width:none; margin:0; }
#sub0301 { position:relative; isolation:isolate; width:100%; height:100dvh; min-height:640px; overflow:hidden; background:radial-gradient(circle at 50% 42%, rgba(15, 118, 110, .06), rgba(4, 10, 16, .46) 62%, rgba(4, 10, 16, .78) 100%), linear-gradient(180deg, rgba(4, 10, 16, .08), rgba(4, 10, 16, .56)), url('/img/sub0301bg.png') center / cover no-repeat; }
#gameCanvas { position:relative; z-index:1; display:block; width:100%; height:100%; }
#minimap { position:absolute; z-index:4; top:112px; right:24px; display:none; width:288px; height:162px; overflow:hidden; border:1px solid rgba(255, 255, 255, .22); border-radius:8px; background:rgba(7, 16, 24, .76); box-shadow:0 18px 48px rgba(1, 9, 15, .34), inset 0 0 0 1px rgba(255, 255, 255, .04); cursor:crosshair; }
#monitor { position:fixed; z-index:5; top:292px; right:24px; display:none; width:288px; padding:12px; border:1px solid rgba(255, 255, 255, .16); border-radius:8px; background:rgba(7, 16, 24, .78); box-shadow:0 18px 48px rgba(1, 9, 15, .32), inset 0 0 0 1px rgba(255, 255, 255, .04); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
#monitor p { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:9px 10px; border-bottom:1px solid rgba(255, 255, 255, .08); color:rgba(232, 240, 246, .72); font-size:12px; line-height:1.2; letter-spacing:.02em; }
#monitor p:last-of-type { border-bottom:0; }
#monitor p span { color:#f8fafc; font-weight:700; font-variant-numeric:tabular-nums; }
#monitor p:nth-child(1) span { color:#7dd3fc; }
#monitor p:nth-child(2) span { color:#fb7185; }
#monitor p:nth-child(3) span { color:#fbbf24; }
#monitor a { display:flex; align-items:center; justify-content:center; width:100%; height:38px; margin-top:10px; border:1px solid rgba(255, 255, 255, .14); border-radius:6px; background:rgba(255, 255, 255, .08); color:#fff; font-size:12px; font-weight:650; text-decoration:none; transition:transform .18s ease, background .18s ease, border-color .18s ease; }
#monitor a:hover { border-color:rgba(255, 255, 255, .28); background:rgba(255, 255, 255, .14); transform:translateY(-1px); }
#monitor a:active { transform:translateY(0) scale(.98); }
#monitor a:focus-visible { outline:2px solid #ff7a2f; outline-offset:3px; }
main.on #minimap, main.on #monitor { display:block; }
#bull { position:absolute; z-index:3; top:50%; left:50%; display:none; max-width:min(32vw, 460px); transform:translate(-50%, -50%); pointer-events:none; }
#button-start { position:absolute; z-index:3; top:52%; left:50%; display:flex; align-items:center; justify-content:center; width:148px; height:54px; border:1px solid rgba(255, 255, 255, .16); border-radius:6px; background:#f36b21; box-shadow:0 16px 42px rgba(243, 107, 33, .3), inset 0 1px 0 rgba(255, 255, 255, .2); color:#fff; font-size:14px; font-weight:700; letter-spacing:.08em; transform:translate(-50%, -50%); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
#button-start::before { position:absolute; bottom:calc(100% + 26px); left:50%; color:#fff; font-size:clamp(28px, 3vw, 46px); font-weight:750; line-height:1; letter-spacing:.16em; text-shadow:0 6px 30px rgba(0, 0, 0, .46); content:'REBELLION'; transform:translateX(-48%); }
#button-start::after { position:absolute; top:calc(100% + 16px); left:50%; color:rgba(255, 255, 255, .7); font-size:10px; font-weight:600; letter-spacing:.18em; white-space:nowrap; content:'ENTER THE DISTRICT'; transform:translateX(-50%); }
#button-start:hover { background:#ff7a2f; box-shadow:0 20px 54px rgba(243, 107, 33, .4), inset 0 1px 0 rgba(255, 255, 255, .24); transform:translate(-50%, calc(-50% - 2px)); }
#button-start:active { transform:translate(-50%, -50%) scale(.98); }
#button-start:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media (max-width: 768px) {
	#sub0301 { min-height:560px; }
	#minimap { top:76px; right:12px; width:176px; height:99px; }
	#monitor { top:187px; right:12px; width:176px; padding:8px; }
	#monitor p { padding:7px 6px; font-size:10px; }
	#monitor a { height:34px; }
	#button-start { top:54%; width:132px; height:50px; }
	#button-start::before { bottom:calc(100% + 22px); font-size:clamp(24px, 9vw, 34px); letter-spacing:.11em; }
}
@media (prefers-reduced-motion: reduce) {
	#button-start, #monitor a { transition:none; }
}