html, body { margin: 0; width: 100%; height: 100%; }
body { background: #c0c0c0; color: #000; font: 16px "Times New Roman", Times, serif; user-select: none; cursor: none; }
body.menu-cursor, body.menu-cursor * { cursor: default !important; }
body.menu-cursor button, body.menu-cursor .choice, body.menu-cursor .diffcard { cursor: pointer !important; }
.page { height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; }
.banner { flex: 0 0 35px; box-sizing: border-box; background: #000080; color: white; padding: 4px 10px; font: 16px Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 15px; }
.banner b { letter-spacing: 1px; }
#sStage { font-size: 13px; }
.controls { margin-left: auto; display: flex; gap: 5px; }
button { font: 13px Arial, Helvetica, sans-serif; cursor: none; border: 2px solid; border-color: #fff #555 #555 #fff; background: #d4d0c8; color: #000; padding: 3px 10px; }
button:active { border-color: #555 #fff #fff #555; }
button[disabled] { opacity: 0.45; cursor: default; }
.frame { position: relative; flex: 1 1 auto; min-height: 240px; overflow: hidden; border: 2px solid; border-color: #777 #fff #fff #777; margin: 6px; background: #161820; cursor: none; }
#gl { display: block; width: 100%; height: 100%; }
.nogl { display: none; position: absolute; inset: 0; background: #d4d0c8; text-align: center; padding-top: 80px; font-size: 18px; }
.hitmark { display: none; position: absolute; color: white; font: bold 20px Arial, Helvetica, sans-serif; pointer-events: none; text-shadow: 1px 1px #000; }
.flash { position: absolute; inset: 0; background: #c00000; opacity: 0; pointer-events: none; }
.bigmsg { position: absolute; top: 30%; left: 0; right: 0; text-align: center; color: #ffff00; font: bold 40px Arial, Helvetica, sans-serif; letter-spacing: 3px; text-shadow: 2px 2px #000; pointer-events: none; display: none; }
.bars { position: absolute; bottom: 8px; left: 10px; right: 10px; pointer-events: none; z-index: 5; }
.bossbar-wrap { display: none; position: absolute; top: 8px; left: 10px; right: 10px; pointer-events: none; z-index: 5; text-align: center; }
.bossbar-wrap .barlabel { display: block; text-align: center; color: #ffe9a8; }
.bossbar { margin: 2px auto 0; max-width: 520px; }
.bossfill { background: linear-gradient(#fff8e0, #d8c070); }
.barwrap { margin-top: 4px; }
.barlabel { font: 10px Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 2px; text-shadow: 1px 1px #000; }
.bar { position: relative; height: 16px; background: #101010; border: 2px solid #e0e0e0; overflow: hidden; }
.bar .fill { height: 100%; width: 100%; background: #cc0000; }
.bar .seg { float: left; height: 100%; box-sizing: border-box; border-right: 2px solid #001040; }
.bar .seg:last-child { border-right: 0; }
.bar .seg u { display: block; height: 100%; width: 100%; background: #2050e0; text-decoration: none; }
#shieldWrap { display: none; }
.overlay { display: none; position: absolute; inset: 0; overflow: auto; box-sizing: border-box; background: rgba(0, 0, 0, 0.58); color: #fff; text-align: center; padding: 18px 10px; cursor: default; z-index: 10; }
.overlay.initial { background: #c0c0c0; color: #000; cursor: default; }
.overlay h2 { font: bold 26px Arial, Helvetica, sans-serif; color: #fff; margin: 8px 0 18px; text-shadow: 2px 2px #000; }
.upsub { margin: 0 auto 16px; font: 13px Arial, Helvetica, sans-serif; color: #ffe9a8; }
.overlay.initial .upsub { color: #000080; }
.overlay.initial h2 { color: #000080; text-shadow: none; }
.overlay p { margin: 10px auto; }
.choices { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.choice { width: 220px; min-height: 148px; box-sizing: border-box; text-align: left; padding: 12px; display: flex; flex-direction: column; gap: 9px; border-width: 2px; cursor: default; }
.choice strong { font-size: 17px; }
.choice span { font: 14px/1.4 "Times New Roman", Times, serif; }
.choice small { margin-top: auto; font-size: 12px; }
.choice.common { background: #78c878; }
.choice.rare { background: #7fa9ed; }
.choice.epic { background: #e77d7d; }
.choice:hover { outline: 2px solid #000; }
.choice.selected { outline: 3px solid #fff; box-shadow: 0 0 0 5px #000080 inset; }
#ovNext { margin-top: 18px; font-size: 15px; padding: 6px 20px; }
.frame.upgrading, .frame.paused, .frame.dead { cursor: default !important; }
.title-screen { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; overflow: auto; }
.title-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(7px) brightness(0.42) saturate(1.05); pointer-events: none; }
.title-dim { position: absolute; inset: 0; background: rgba(5, 8, 16, 0.35); pointer-events: none; }
.title-content { position: relative; z-index: 2; color: #fff; text-align: center; padding: 24px 16px; max-width: 1000px; box-sizing: border-box; }
.title-content h1 { font: bold 48px Arial, Helvetica, sans-serif; letter-spacing: 4px; margin: 0 0 22px; text-shadow: 3px 3px #000; color: #ffde6b; }
.diffgrid { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.diffcard { width: 230px; min-height: 128px; box-sizing: border-box; text-align: left; padding: 12px; display: flex; flex-direction: column; gap: 8px; border-width: 2px; background: #d4d0c8; color: #000; cursor: default; }
.diffcard strong { font-size: 17px; }
.diffcard span { font: 14px/1.4 "Times New Roman", Times, serif; }
.diffcard.selected { outline: 3px solid #ffde6b; box-shadow: 0 0 0 5px #000080 inset; }
.diffcard:hover { outline: 2px solid #ffde6b; }
.diffcard.ultimate-wide { display: block; width: 718px; max-width: 100%; margin: 0 auto 22px; text-align: center; }
.diffcard.ultimate-wide span { text-align: center; }
.title-permanent-count { margin: 0 0 12px; color: #ffe9a8; font: 13px Arial, Helvetica, sans-serif; }
.devbadge { margin: 0 0 12px; color: #ffb0b0; font: bold 13px Arial, Helvetica, sans-serif; letter-spacing: 1px; }
.startbtn { display: block; margin: 0 auto 12px; font: bold 20px Arial, Helvetica, sans-serif; padding: 10px 46px; background: #78c878; }
.wipebtn { display: block; margin: 0 auto; font: 12px Arial, Helvetica, sans-serif; padding: 5px 14px; background: #e0a0a0; }
.title-screen ~ #overlay { pointer-events: none; }
body.title-menu #sStage,
body.title-menu #btnPause,
body.title-menu .bars,
body.title-menu .bossbar-wrap,
body.title-menu .bigmsg,
body.title-menu .hitmark,
body.title-menu .flash { opacity: 0; visibility: hidden; }
.title-screen ~ .bars { opacity: 0; }
#titleScreen { isolation: isolate; }