/* ===== IMR Mobile / Tablet UI ===== */

/* Generic touch improvements (always on) */
button, .btn, .btn_tab, .btn_tree, .elements, .img_btn {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* Popups always fit the screen and scroll if needed */
.popup {
	max-width: min(600px, 92vw) !important;
	max-height: 85vh !important;
	max-height: 85dvh !important;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 12px 18px !important;
	border-radius: 10px;
}
.popup > input { width: 100% !important; max-width: 300px; box-sizing: border-box; }
.popup .btn { min-height: 44px; min-width: 90px; margin: 4px; font-size: 16px; }

#inf_popup { position: fixed; inset: 0; z-index: 5; }
#inf_popup .pos_center { width: min(560px, 90vw); text-align: center; }
#inf_popup .btn { min-height: 56px; font-size: 18px; padding: 0 24px; }
#supernova_scene .btn { min-height: 56px; font-size: 18px; padding: 0 24px; }

/* Rescue / quick menu (visible in every mode) */
#m_menu_btn {
	position: fixed; z-index: 20; right: 10px; bottom: 10px;
	width: 46px; height: 46px; border-radius: 50%;
	background: #222; color: #fff; border: 2px solid #fff;
	font-size: 22px; display: flex; align-items: center; justify-content: center;
	opacity: .85;
}
#m_menu {
	position: fixed; z-index: 21; right: 10px; bottom: 64px;
	background: #181818; border: 2px solid #fff; border-radius: 12px;
	padding: 8px; width: 250px; display: none; color: #fff; font-size: 14px;
	max-height: 70vh; overflow-y: auto;
}
#m_menu.open { display: block; }
#m_menu button {
	display: block; width: 100%; min-height: 44px; margin: 4px 0;
	background: #2a2a2a; color: #fff; border: 1px solid #666; border-radius: 8px;
	font-size: 15px; text-align: left; padding: 0 12px;
}
#m_menu button.on { border-color: #4f4; color: #8f8; }
#m_menu .m_title { font-weight: bold; margin: 4px 4px 8px; }
#m_toast {
	position: fixed; z-index: 30; left: 50%; top: 14px; transform: translateX(-50%);
	background: #222; border: 2px solid #4f4; color: #fff; padding: 8px 16px;
	border-radius: 10px; display: none; font-size: 14px; max-width: 90vw; text-align: center;
}

/* ========== Mobile / tablet layout (body.m-ui) ========== */
body.m-ui { overflow: hidden; }
body.m-ui #app { height: 100%; height: 100dvh; }
body.m-ui #app > .table_center {
	display: block !important; position: relative;
}

/* Top bar */
#m_top { display: none; }
body.m-ui #m_top {
	display: flex; position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 48px;
	background: #111; border-bottom: 2px solid #fff; align-items: center; gap: 8px; padding: 0 8px;
	box-sizing: border-box;
}
body.m-ui #m_top .m_mass { flex: 1; font-size: 14px; line-height: 1.15; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.m-ui #m_top .m_mass small { color: #aaa; font-size: 11px; display: block; }
body.m-ui #m_top button {
	min-width: 44px; height: 38px; border-radius: 8px; background: #222; color: #fff; border: 1px solid #888; font-size: 13px;
}

/* Main area takes the full width */
body.m-ui #main_app {
	width: 100% !important; height: 100% !important;
	padding: 52px 6px 86px; box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}
body.m-ui #nav_btns { display: none !important; }

/* Bottom tab bar (re-uses the game's own tab buttons) */
body.m-ui #tabs {
	display: flex !important; position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
	width: 100% !important; height: 72px !important; flex-direction: row;
	overflow-x: auto; overflow-y: hidden; border-right: none; border-top: 2px solid #fff;
	background: #111; scrollbar-width: none; padding-right: 60px; box-sizing: border-box;
}
body.m-ui #tabs::-webkit-scrollbar { display: none; }
body.m-ui #tabs > div { width: auto !important; flex: 0 0 auto; }
body.m-ui #tabs .btn_tab {
	width: 74px !important; min-height: 0 !important; height: 66px !important; margin: 3px 1px; padding: 4px 2px;
	border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
body.m-ui #tabs .btn_tab > div {
	position: static !important; transform: none !important; width: auto !important;
	font-size: 11px !important; text-align: center !important; line-height: 1.1; white-space: normal;
}
body.m-ui #tabs .btn_tab > iconify-icon {
	position: static !important; opacity: 1 !important; transform: none !important;
	width: 28px !important; height: 28px !important; font-size: 28px !important;
}
body.m-ui #tabs .btn_tab.choosed { background: #333; }
body.m-ui #m_menu_btn { bottom: 84px; }
body.m-ui #m_menu { bottom: 138px; }

/* Sub-tabs become a scrollable chip row */
body.m-ui #stabs_div { min-height: 0 !important; position: sticky; top: -6px; z-index: 5; background: #111; }
body.m-ui .stab_btn {
	display: flex; flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important;
	scrollbar-width: none; gap: 4px; padding: 4px 0;
}
body.m-ui .stab_btn::-webkit-scrollbar { display: none; }
body.m-ui .stab_btn > div, body.m-ui .stab_btn .btn_tab { flex: 0 0 auto; }
body.m-ui .stab_btn .btn_tab { width: auto !important; min-height: 38px; padding: 0 12px; white-space: nowrap; border-radius: 19px; }

/* Resources panel becomes a slide-in drawer */
body.m-ui #resources_table {
	display: block !important; position: fixed; z-index: 15; top: 48px; right: 0; bottom: 72px;
	width: min(300px, 86vw) !important; height: auto !important; background: #141414;
	transform: translateX(105%); transition: transform .2s ease; border-left: 2px solid #fff;
}
body.m-ui.m-res-open #resources_table { transform: none; }
#m_scrim { display: none; }
body.m-ui.m-res-open #m_scrim { display: block; position: fixed; inset: 0; z-index: 14; background: rgba(0,0,0,.45); }

/* Bigger touch targets for game buttons */
body.m-ui .btn { min-height: 44px; }
body.m-ui .btn_tree { margin: 10px; }
body.m-ui input[type=checkbox] { transform: scale(1.4); }

/* Wide content scrolls sideways instead of breaking the page */
body.m-ui #tab_frames { overflow-x: auto; }
body.m-ui .table_center { flex-wrap: wrap; }
body.m-ui #chal_upper { font-size: 13px; }
body.m-ui #main_app > div[style*="min-height: 60px"] { min-height: 0 !important; }
body.m-ui #main_app > br { display: none; }

/* Phone: tighter */
body.m-ui.m-phone #main_app { font-size: 13px; }
body.m-ui.m-phone .table_center > div[style*="width: 300px"],
body.m-ui.m-phone .table_center > div[style*="width:300px"] { width: 100% !important; max-width: 420px; }

/* Hold-to-buy feedback */
.m-holding { outline: 3px solid #4f4 !important; }

/* Hide mobile bars during full-screen reset scenes */
body.m-noapp #m_top, body.m-noapp #m_scrim { display: none !important; }
body.m-noapp #m_menu_btn { bottom: 10px !important; }
#supernova_scene { padding: 0 12px; }

/* =====================================================
   Theme: glassy space style (overrides the plain look)
   ===================================================== */
:root {
	--m-bg1: #0b0d1a; --m-bg2: #151a33;
	--m-glass: rgba(16, 18, 36, .96);
	--m-line: rgba(140, 150, 255, .28);
	--m-accent: #8b7bff; --m-accent2: #3fd8ff;
	--m-text: #e9ecff; --m-dim: #9aa3c7;
}

/* Background with soft nebula glow (only while the app is shown) */
body.m-ui #app {
	background:
		radial-gradient(120% 60% at 0% 0%, rgba(139,123,255,.16), transparent 60%),
		radial-gradient(100% 50% at 100% 100%, rgba(63,216,255,.12), transparent 60%),
		linear-gradient(180deg, var(--m-bg1), var(--m-bg2));
}

/* Top bar */
body.m-ui #m_top {
	height: 54px; background: var(--m-glass);
	border-bottom: 1px solid var(--m-line);
	box-shadow: 0 6px 24px rgba(0,0,0,.45);
	padding: 0 10px; gap: 8px;
}
body.m-ui #m_top::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: linear-gradient(90deg, transparent, var(--m-accent), var(--m-accent2), transparent);
	opacity: .8;
}
body.m-ui #m_top .m_mass { line-height: 1.1; }
body.m-ui #m_top .m_mass .m_lbl { color: var(--m-dim); font-size: 9px; letter-spacing: 2px; font-weight: bold; }
body.m-ui #m_top #m_mass {
	font-size: 17px; font-weight: bold;
	background: linear-gradient(90deg, #fff, #c9c2ff 55%, var(--m-accent2));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
body.m-ui #m_top #m_gain { color: #7ef2b0; font-size: 11px; }
body.m-ui #m_top button, #m_menu_btn {
	display: flex; align-items: center; justify-content: center;
	color: var(--m-text); border: 1px solid var(--m-line);
	background: linear-gradient(160deg, rgba(139,123,255,.22), rgba(63,216,255,.08));
	transition: transform .1s, box-shadow .2s;
}
body.m-ui #m_top button { width: 42px; height: 40px; border-radius: 12px; }
body.m-ui #m_top button:active, #m_menu_btn:active { transform: scale(.92); }
body.m-res-open #m_res_btn { box-shadow: 0 0 0 2px var(--m-accent2), 0 0 14px rgba(63,216,255,.5); }
body.m-ui #main_app { padding-top: 58px; }

/* Floating menu button */
#m_menu_btn {
	width: 50px; height: 50px; border-radius: 16px; opacity: 1;
	background: linear-gradient(145deg, var(--m-accent), #4b6bff 60%, var(--m-accent2));
	border: 1px solid rgba(255,255,255,.35);
	box-shadow: 0 8px 22px rgba(80,90,255,.45), inset 0 1px 0 rgba(255,255,255,.4);
	color: #fff;
}

/* Menu panel */
#m_menu {
	width: 260px; padding: 10px; border-radius: 18px;
	background: var(--m-glass); border: 1px solid var(--m-line);
	box-shadow: 0 18px 40px rgba(0,0,0,.6);
	color: var(--m-text);
	transform-origin: bottom right;
}
#m_menu.open { animation: m_pop .16s ease-out; }
@keyframes m_pop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
#m_menu .m_title {
	font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--m-dim); margin: 2px 6px 8px;
}
#m_menu button {
	display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px; color: var(--m-text); padding: 0 12px; min-height: 46px;
}
#m_menu button svg { color: var(--m-accent2); flex: 0 0 auto; }
#m_menu button span { flex: 1; }
#m_menu button b { font-size: 12px; color: var(--m-dim); font-weight: normal; }
#m_menu button:active { background: rgba(139,123,255,.18); }
#m_menu button.on { border-color: rgba(126,242,176,.5); }
#m_menu button.on b { color: #7ef2b0; font-weight: bold; }
#m_menu button.warn svg { color: #ffb35c; }
#m_menu button.warn { border-color: rgba(255,179,92,.35); }

/* Toast */
#m_toast {
	top: 64px; border-radius: 14px; padding: 10px 18px;
	background: var(--m-glass); border: 1px solid rgba(126,242,176,.55); color: var(--m-text);
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

/* Bottom tab bar */
body.m-ui #tabs {
	height: 76px !important; padding: 4px 64px 4px 6px; gap: 4px;
	background: var(--m-glass); border-top: 1px solid var(--m-line);
	box-shadow: 0 -8px 24px rgba(0,0,0,.45);
}
body.m-ui #tabs .btn_tab {
	--tc: #c9c2ff;
	height: 66px !important; margin: 0; border-radius: 14px;
	background: transparent !important; border: 1px solid transparent !important;
	color: var(--m-dim) !important;
	transition: background .2s, box-shadow .2s, color .2s;
}
body.m-ui #tabs .btn_tab.atom { --tc: #3fd8ff; }
body.m-ui #tabs .btn_tab.sn { --tc: #ff5cf0; }
body.m-ui #tabs .btn_tab.qu { --tc: #7ef2b0; }
body.m-ui #tabs .btn_tab.dark { --tc: #b9b9c9; }
body.m-ui #tabs .btn_tab.inf { --tc: #ffb35c; }
body.m-ui #tabs .btn_tab.choosed {
	color: #fff !important;
	background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, transparent), color-mix(in srgb, var(--tc) 8%, transparent)) !important;
	border-color: color-mix(in srgb, var(--tc) 55%, transparent) !important;
	box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.15);
}
body.m-ui #tabs .btn_tab.choosed > div { color: #fff; }
body.m-ui #tabs .btn_tab.choosed::after {
	content: ""; position: absolute; top: 3px; left: 30%; right: 30%; height: 3px; border-radius: 3px;
	background: var(--tc); box-shadow: 0 0 8px var(--tc);
}
body.m-ui #tabs .btn_tab > div { font-size: 10.5px !important; letter-spacing: .2px; }

/* Sub-tab chips */
body.m-ui #stabs_div {
	background: linear-gradient(180deg, rgba(11,13,26,.95), rgba(11,13,26,.75));
	margin: 0 -6px; padding: 0 6px; border-bottom: 1px solid rgba(255,255,255,.05);
}
body.m-ui .stab_btn { gap: 6px; padding: 8px 0; }
body.m-ui .stab_btn .btn_tab {
	min-height: 34px; border-radius: 17px; padding: 0 14px; font-size: 13px;
	background: rgba(255,255,255,.05); border-width: 1px;
}
body.m-ui .stab_btn .btn_tab.choosed {
	background: linear-gradient(135deg, rgba(139,123,255,.45), rgba(63,216,255,.25));
	border-color: rgba(201,194,255,.7) !important; color: #fff;
	box-shadow: 0 0 12px rgba(139,123,255,.35);
}
body.m-ui .main-line { background: linear-gradient(90deg, transparent, var(--m-line), transparent); height: 1px; border: none; }

/* Resources drawer */
body.m-ui #resources_table {
	top: 54px; bottom: 76px; padding: 8px; box-sizing: border-box;
	background: var(--m-glass); border-left: 1px solid var(--m-line);
	box-shadow: -12px 0 30px rgba(0,0,0,.5);
	border-radius: 18px 0 0 18px;
	transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
body.m-ui #resources_table > div {
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
	border-radius: 12px; padding: 4px 6px; box-sizing: border-box; margin: 0 0 6px; height: 50px;
}
body.m-ui.m-res-open #m_scrim { background: rgba(5,6,15,.55);}

/* Game buttons: rounder, softer */
body.m-ui .btn { border-radius: 10px; }
body.m-ui .btn:active:not(.locked) { transform: scale(.97); }
.popup {
	border-radius: 16px !important; border: 1px solid var(--m-line) !important;
	background: linear-gradient(180deg, #171a30, #0f1122) !important;
	box-shadow: 0 20px 50px rgba(0,0,0,.65);
}

/* Hold-to-buy glow */
.m-holding {
	outline: none !important;
	box-shadow: 0 0 0 2px #7ef2b0, 0 0 18px rgba(126,242,176,.6) !important;
}

body.m-ui #m_menu_btn { bottom: 88px; }
body.m-ui #m_menu { bottom: 146px; }
body.m-ui #tabs { gap: 0; }
body.m-ui #tabs > div:has(> .btn_tab[style*="display: none"]) { display: none; }
body.m-ui #tabs .btn_tab { margin: 0 2px; }
#m_menu button span, #m_menu .m_title { text-align: left; }
body.m-ui #m_top .m_mass { text-align: left; }
body.m-ui #m_top .m_mass { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
body.m-ui #m_top .m_mass > * { display: block; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ===== Performance ===== */
/* Blur effects were removed: they are very expensive on phones. Bars are now
   opaque, and each layer gets its own GPU layer so scrolling stays smooth. */
body.m-ui #m_top, body.m-ui #tabs, #m_menu_btn {
	transform: translateZ(0); will-change: transform;
}
body.m-ui #main_app { contain: layout paint; overscroll-behavior: contain; }
body.m-ui #tab_frames { contain: layout; }
body.m-ui #app { background-attachment: scroll; }
@media (prefers-reduced-motion: reduce) {
	#m_menu.open { animation: none; }
	body.m-ui #resources_table { transition: none; }
}
body.m-ui #resources_table { background: linear-gradient(180deg, #14172d, #0e1022); }
body.m-ui #m_top, body.m-ui #tabs, #m_menu { background-color: #111327; }

/* Tooltips (reset descriptions, etc.) must sit above the drawer, its dimmed
   backdrop and the bars, otherwise they end up hidden/dimmed behind them. */
#tooltip-div { z-index: 50 !important; background-color: #0b0d1a !important; box-shadow: 0 8px 24px rgba(0,0,0,.6); max-width: min(360px, 90vw); pointer-events: none; }