/* Dabixgle.io v2 — UI shell. Neon pink / cyan / lime on near-black. */
:root { --dx-bg: #07050f; --dx-panel: rgba(14, 10, 28, .92); --dx-line: rgba(240, 76, 188, .3); --dx-text: #eef0ff; --dx-muted: #b0a9cc;
  --pink: #f04cbc; --cyan: #3df5e6; --lime: #77f53d; --violet: #ad33e6; --gold: #ffd54a; --coral: #ff4d6d; }
.frame.dx { background: var(--dx-bg); touch-action: none; -webkit-tap-highlight-color: transparent; font-family: Nunito, "Noto Sans", system-ui, sans-serif; color: var(--dx-text); cursor: crosshair; }
.frame.dx canvas#game { width: 100%; height: 100%; display: block; }
.frame.dx .screen { position: absolute; inset: 0; cursor: default; }
.frame.dx [hidden] { display: none !important; }
.frame.dx svg { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.2em; flex: none; }
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); transition: background .5s; }
#vignette.hurt { background: radial-gradient(ellipse at center, rgba(255,40,80,0) 45%, rgba(255,40,80,.55) 100%); transition: none; }
#crosshair { position: absolute; left: 50%; top: 46%; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; z-index: 3; display: none; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; background: var(--lime); box-shadow: 0 0 6px var(--lime); }
#crosshair::before { left: 12px; top: 0; width: 2px; height: 26px; } #crosshair::after { top: 12px; left: 0; width: 26px; height: 2px; }
#crosshair i { position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: rgba(7,5,15,.9); }
body.playing #crosshair { display: block; } body.touch #crosshair { display: none !important; }

.frame.dx .btn, .frame.dx .icon-btn, .top .icon-btn { font: 800 16px Nunito, system-ui, sans-serif; color: #fff; border: 0; cursor: pointer; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 44px; padding: 0 1.3em; transition: transform .12s, filter .12s; text-decoration: none; }
.frame.dx .btn { background: linear-gradient(180deg, #ff7fd6, #c7259a); color: #fff; box-shadow: 0 5px 0 #6e0f52, 0 10px 24px rgba(240, 76, 188, .3); }
.frame.dx .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } .frame.dx .btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 #6e0f52; }
.frame.dx .btn.alt { background: linear-gradient(180deg, #3a3560, #22203a); color: #e9e6ff; box-shadow: 0 5px 0 #15132a; } .frame.dx .btn.alt:active { box-shadow: 0 2px 0 #15132a; }
.frame.dx .btn.danger { background: linear-gradient(180deg, #ff7d8f, #d0304d); box-shadow: 0 5px 0 #7a1226; }
.frame.dx .icon-btn, .top .icon-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(14, 10, 28, .75); border: 1px solid var(--dx-line); backdrop-filter: blur(6px); }
.frame.dx .icon-btn svg, .top .icon-btn svg { width: 22px; height: 22px; } .top .icon-btn { width: 40px; height: 40px; }
.icon-btn .off, #mute .off { display: none; } .icon-btn.off .on, #mute.off .on { display: none; } .icon-btn.off .off, #mute.off .off { display: block; }
.frame.dx button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 4; font-family: Nunito, sans-serif; }
.hud-tl { position: absolute; left: calc(14px + env(safe-area-inset-left, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 8px; }
.hpwrap { display: flex; align-items: center; gap: 8px; } .hpbar { width: 180px; height: 14px; border-radius: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2); overflow: hidden; }
#hpFill { height: 100%; width: 100%; background: linear-gradient(90deg, #77f53d, #3df5e6); box-shadow: 0 0 12px var(--lime); transition: width .15s; } #hpFill.low { background: linear-gradient(90deg, #ff4d6d, #ff8a3d); box-shadow: 0 0 12px var(--coral); }
#hpText { font: 400 18px "Lilita One", sans-serif; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.chips { display: flex; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 10px 4px 7px; font: 800 13px Nunito, sans-serif; position: relative; }
.chip svg { width: 16px; height: 16px; } .chip.coins b { color: var(--gold); } .chip em { font-style: normal; color: var(--gold); }
#dashRing { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--cyan) var(--p, 100%), rgba(255,255,255,.15) 0); }
.hud-tc { position: absolute; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); text-align: center; width: 260px; }
.hud-tc .wave { font: 400 24px "Lilita One", sans-serif; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 14px rgba(240,76,188,.6); } .hud-tc .left { font: 800 12px Nunito, sans-serif; color: var(--dx-muted); }
.objbar { height: 4px; margin: 4px auto 0; width: 200px; border-radius: 2px; background: rgba(255,255,255,.15); } #objFill { height: 100%; width: 0; background: var(--pink); border-radius: 2px; box-shadow: 0 0 8px var(--pink); }
.hud-tr { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); top: calc(64px + env(safe-area-inset-top, 0px)); text-align: right; }
.hud-tr .score { font: 400 32px "Lilita One", sans-serif; text-shadow: 0 2px 0 rgba(0,0,0,.6); font-variant-numeric: tabular-nums; } .hud-tr .combo { font: 900 14px Nunito, sans-serif; color: var(--gold); min-height: 1em; text-shadow: 0 0 10px rgba(255,213,74,.7); }
.hud-br { position: absolute; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 6px 12px 6px 6px; }
.hud-br canvas { width: 80px; height: 32px; } .wtext b { display: block; font: 800 13px Nunito, sans-serif; } .wtext span { font: 400 20px "Lilita One", sans-serif; color: var(--gold); }
body.touch .hud-br { right: auto; left: 50%; transform: translateX(-50%); }
#hudBtns { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); display: flex; gap: 8px; z-index: 6; }
#banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; z-index: 5; width: min(90%, 640px); }
#banner b { display: block; font: 400 clamp(26px, 5vw, 46px)/1.05 "Lilita One", sans-serif; color: #fff; text-shadow: 0 4px 0 rgba(20,8,40,.6), 0 0 24px rgba(240,76,188,.7); letter-spacing: 1px; }
#banner span { display: inline-block; margin-top: 8px; font: 800 clamp(12px, 1.8vw, 15px)/1.4 Nunito, sans-serif; color: #fff; background: rgba(7,5,15,.8); border: 1px solid var(--dx-line); padding: 8px 16px; border-radius: 999px; }
#banner.show { animation: banner 3.6s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px); } }
#fsMsg { position: absolute; right: 14px; top: 60px; margin: 0; font-size: 12px; color: var(--coral); z-index: 5; }
#err { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px; background: rgba(120,0,30,.92); color: #fff; font: 12px/1.4 monospace; white-space: pre-wrap; max-height: 40%; overflow: auto; z-index: 50; }
#loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 12px; background: var(--dx-bg); z-index: 40; font: 800 14px Nunito, sans-serif; color: var(--dx-muted); }
#loading.on { display: flex; } .spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--pink); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

#intro { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background-size: cover; background-position: center; padding-bottom: 5%; transition: opacity .3s; }
#intro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,15,.2), rgba(7,5,15,0) 40%, rgba(7,5,15,.7)); }
#intro > *:not(.intro-title):not(.intro-tag) { position: relative; }
.intro-tag { position: absolute; top: 5%; font: 800 clamp(10px, 1.5vw, 13px) Nunito, sans-serif; letter-spacing: 2.5px; text-transform: uppercase; color: var(--cyan); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
#intro .intro-title { top: 11%; font-size: clamp(30px, 7vw, 74px); background: linear-gradient(180deg, #fff 30%, #f04cbc 70%, #3df5e6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 4px 0 rgba(40,10,70,.8)) drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.intro-sub { margin-bottom: 14px; font: 800 clamp(13px, 2.2vw, 20px) Nunito, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
#play-btn { font: 400 clamp(20px, 3.4vw, 32px) "Lilita One", Nunito, sans-serif; letter-spacing: 1px; color: #fff; background: linear-gradient(180deg, #ff7fd6, #c7259a); box-shadow: 0 6px 0 #6e0f52, 0 14px 40px rgba(240,76,188,.5); padding: .45em 1.6em; border-radius: 999px; display: inline-flex; align-items: center; gap: .3em; animation: breathe 2.2s ease-in-out infinite; }
#play-btn svg { width: .9em; height: .9em; } #play-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #6e0f52; animation: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.intro-foot { margin-top: 12px; font: 700 clamp(10px, 1.5vw, 13px) Nunito, sans-serif; color: #e5ddff; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }

.panelwrap { display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(4,2,10,.55); backdrop-filter: blur(4px); overflow: hidden; z-index: 8; }
.panel { position: relative; width: min(94%, 470px); max-height: 96%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; background: var(--dx-panel); border: 1px solid var(--dx-line); border-radius: 20px; padding: 18px 22px 20px; box-shadow: 0 10px 50px rgba(240,76,188,.25), inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(8px); animation: pop .32s cubic-bezier(.2, 1.4, .4, 1); scrollbar-width: thin; }
.panel.small { width: min(94%, 360px); } .panel.wide { width: min(96%, 560px); }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
.panel .tag { font: 800 11px Nunito, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }
.panel h2 { margin: 2px 0 8px; font: 400 clamp(24px, 4.5vw, 34px)/1.05 "Lilita One", Nunito, sans-serif; background: linear-gradient(90deg, #fff, #f04cbc 60%, #3df5e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel p { margin: 6px 0; color: var(--dx-muted); font-size: 14px; line-height: 1.5; } .panel p.sub { color: #fff; font-weight: 800; }
.panel .btns { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; } .panel .btns.col { flex-direction: column; align-items: stretch; } .panel .btns.col .btn { justify-content: center; }
.panel .hint { font-size: 12px; margin-top: 12px; }
kbd { display: inline-block; font: 800 11px Nunito, sans-serif; color: #fff; background: #2a2446; border: 1px solid #4a4070; border-bottom-width: 3px; border-radius: 6px; padding: 1px 6px; margin: 0 1px; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(14,10,28,.8); border: 1px solid var(--dx-line); border-radius: 999px; padding: 6px 12px; font: 800 15px Nunito, sans-serif; color: #fff; } .pill em { font-style: normal; color: var(--gold); } .pill.coins b { color: var(--gold); }
.stars { display: inline-flex; gap: 1px; } .stars i { display: inline-block; width: 15px; height: 15px; color: #3a3350; } .stars i.on { color: var(--gold); filter: drop-shadow(0 0 4px rgba(255,213,74,.7)); } .stars i svg { width: 100%; height: 100%; }
.panel p.obj { color: #fff; font-size: 15px; margin-top: 0; } .panel p.obj b { color: var(--lime); }
.criteria { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--dx-muted); } .criteria li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.panel p.tip { background: rgba(61,245,230,.08); border-left: 3px solid var(--cyan); padding: 8px 10px; border-radius: 0 10px 10px 0; color: #d8fffb; } .panel p.best { font-size: 12px; color: var(--gold); font-weight: 800; min-height: 1em; }

#menu { flex-direction: column; justify-content: flex-start; padding: 0; background: radial-gradient(ellipse at 50% 0%, rgba(240,76,188,.2), transparent 60%), rgba(4,2,10,.6); }
.mapbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; width: 100%; z-index: 2; padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .mapbar .grow { flex: 1; }
#menuHome { display: none; } body.touch #menuHome { display: inline-flex; }
.mapscroll { flex: 1; width: 100%; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 0 16px 20px; scrollbar-width: thin; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 760px; margin: 4px auto 14px; }
.mode { background: linear-gradient(180deg, rgba(40,30,70,.9), rgba(20,14,40,.9)); border: 1px solid var(--dx-line); border-radius: 16px; padding: 14px 12px; color: #fff; cursor: pointer; text-align: left; font-family: Nunito, sans-serif; transition: transform .15s, border-color .15s; }
.mode:hover { transform: translateY(-2px); border-color: var(--pink); } .mode b { display: block; font: 400 24px "Lilita One", sans-serif; } .mode span { display: block; font-weight: 800; font-size: 12px; color: var(--lime); margin: 2px 0 4px; } .mode small { display: block; font-size: 12px; color: var(--dx-muted); }
.mapscroll h3 { margin: 6px auto 10px; font: 400 20px "Lilita One", sans-serif; color: #fff; max-width: 760px; }
#stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 760px; margin: 0 auto; }
.node { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0 2px 4px; font-family: Nunito, sans-serif; }
.node b { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font: 400 22px "Lilita One", sans-serif; background: linear-gradient(180deg, #3a3560, #22203a); border: 2px solid #5a5090; box-shadow: 0 4px 0 #15132a; transition: transform .15s; } .node b svg { width: 22px; height: 22px; fill: #8a83b6; }
.node.d0 b { border-color: #f04cbc; } .node.d1 b { border-color: #77f53d; } .node.d2 b { border-color: #ff4d6d; }
.node.done b { background: linear-gradient(180deg, #ff7fd6, #c7259a); border-color: #ffd3f0; box-shadow: 0 4px 0 #6e0f52; }
.node.cur b { background: linear-gradient(180deg, #5bf7ea, #159e95); border-color: #c8fffb; color: #06302d; box-shadow: 0 4px 0 #0a5a55, 0 0 20px rgba(61,245,230,.6); animation: pulse 1.6s ease-in-out infinite; }
.node.boss b { border-radius: 50%; } .node.locked { cursor: not-allowed; opacity: .5; } .node:not(.locked):hover b { transform: translateY(-3px) scale(1.06); }
.node small { font: 800 10px/1.2 Nunito, sans-serif; color: var(--dx-muted); text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.bigstars { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; } .bigstars .stars i { width: 52px; height: 52px; opacity: .7; color: #5a5280; transform: scale(.7); } .bigstars .stars i:nth-child(2) { width: 64px; height: 64px; margin-top: -8px; } .bigstars .stars i.on { opacity: 1; color: var(--gold); }
.bigstars .stars i.pop { animation: starpop .6s cubic-bezier(.2, 1.6, .4, 1) forwards; } @keyframes starpop { 0% { transform: scale(2.4) rotate(-30deg); opacity: 0; } 60% { transform: scale(.9) rotate(5deg); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.score { text-align: center; margin: 4px 0 8px; } .score small { display: block; font: 800 11px Nunito, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); } .score b { font: 400 48px/1 "Lilita One", sans-serif; color: #fff; font-variant-numeric: tabular-nums; } #results.won .score b { color: var(--gold); text-shadow: 0 0 24px rgba(255,213,74,.5); }
.rows { list-style: none; margin: 0; padding: 0; } .rows li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; color: var(--dx-muted); } .rows li b { color: #fff; font-variant-numeric: tabular-nums; } .rows li.coins b { color: var(--gold); }

.shophead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uprow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.uptext b { display: block; font-size: 15px; color: #fff; } .uptext span { display: block; font-size: 12px; color: var(--dx-muted); } .uptext em { display: block; font-style: normal; font-size: 12px; color: var(--lime); font-weight: 800; }
.uptier { display: flex; gap: 3px; } .uptier i { width: 8px; height: 18px; border-radius: 3px; background: #22203a; border: 1px solid #4a4070; } .uptier i.on { background: var(--pink); border-color: #ffd3f0; box-shadow: 0 0 8px rgba(240,76,188,.6); }
.buy { font: 800 14px Nunito, sans-serif; color: #10240a; background: linear-gradient(180deg, #ffe68a, #f0b820); border: 0; border-radius: 12px; min-height: 40px; padding: 0 12px; cursor: pointer; box-shadow: 0 4px 0 #9a6a00; white-space: nowrap; } .buy:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a6a00; }
.buy.poor { filter: grayscale(.7); opacity: .6; cursor: not-allowed; } .buy.maxed { background: linear-gradient(180deg, #3a3560, #22203a); color: #cfc8ff; box-shadow: 0 4px 0 #15132a; cursor: default; }
.panel label.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 800; font-size: 14px; }
.panel input[type=range] { width: 50%; accent-color: var(--pink); } .panel input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--pink); }
.version { text-align: right; font-size: 11px; color: var(--dx-muted); margin-top: 6px; }

#touch { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.stick { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 124px; height: 124px; border-radius: 50%; background: rgba(14,10,28,.45); border: 2px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#stickL { left: calc(16px + env(safe-area-inset-left, 0px)); } #stickR { right: calc(16px + env(safe-area-inset-right, 0px)); }
.stick span { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font: 800 10px Nunito, sans-serif; letter-spacing: 2px; color: rgba(255,255,255,.6); }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9fe0, #c7259a 70%); box-shadow: 0 4px 10px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.5); pointer-events: none; }
#stickR .knob { background: radial-gradient(circle at 35% 30%, #9ffff6, #159e95 70%); }
#tbtns { position: absolute; right: calc(156px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; align-items: center; }
#tbtns button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); color: #fff; display: grid; place-items: center; padding: 0; box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.35); backdrop-filter: blur(4px); cursor: pointer; }
#tbtns button svg { width: 26px; height: 26px; pointer-events: none; } #tbtns button.on, #tbtns button:active { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 rgba(0,0,0,.35); filter: brightness(1.15); }
#tDash { background: linear-gradient(180deg, rgba(61,245,230,.95), rgba(21,158,149,.95)); color: #06302d; } #tBomb { background: linear-gradient(180deg, rgba(255,138,61,.95), rgba(200,80,20,.95)); } #tSwap { background: linear-gradient(180deg, rgba(173,51,230,.95), rgba(100,20,160,.95)); }
#rotateHint { display: none; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(7,5,15,.85); border: 1px solid var(--dx-line); font: 800 12px Nunito, sans-serif; color: #fff; z-index: 7; pointer-events: none; white-space: nowrap; }
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) { #rotateHint { display: block; } } #touch:not([hidden]) + #rotateHint { display: none !important; }
@media (max-width: 480px) { .stick { width: 100px; height: 100px; } .stick .knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; } #tbtns { right: calc(126px + env(safe-area-inset-right, 0px)); } #tbtns button { width: 50px; height: 50px; } .modes { grid-template-columns: 1fr; } .node b { width: 44px; height: 44px; font-size: 18px; } }

.frame.dx:fullscreen { border-radius: 0; width: 100vw; height: 100vh; }
body.fs .top, body.fs .info { display: none; } body.fs .stage { padding: 0; max-width: none; }
body.immersive { overflow: hidden; background: var(--dx-bg); } body.immersive .top, body.immersive .info { display: none; } body.immersive .stage { padding: 0; max-width: none; }
body.immersive .frame.dx { position: fixed; inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; z-index: 50; }
@media (prefers-reduced-motion: reduce) { #play-btn, .node.cur b, .panel { animation: none; } }
@media (max-width: 480px) and (orientation: portrait) { .hud-tc { top: calc(56px + env(safe-area-inset-top, 0px)); } .hud-tr { top: calc(110px + env(safe-area-inset-top, 0px)); } body.touch .hud-br { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } #banner { top: 30%; } }