/* Design tokens and shared building blocks for FUSE's bright, chunky look.
style.css styles the game screens and HUD; menus.css styles panels and the lobby bars. */
:root {
--sky-top: #2f8fff;
--sky-mid: #6cc4ff;
--sky-bottom: #d4efff;
--ink: #12203a;
--ink-2: #33415c;
--muted: #6b7a95;
--paper: #ffffff;
--paper-2: #f2f6fc;
--paper-3: #e6edf7;
--line: #d6e0ee;
--blue: #2f7dff;
--blue-dark: #1b5fd6;
--red: #ff4b55;
--red-dark: #d1303b;
--green: #22c55e;
--green-dark: #149a46;
--yellow: #ffcc2e;
--yellow-dark: #d9a400;
--purple: #a855f7;
--purple-dark: #7c2fd0;
--orange: #ff8a1f;
--orange-dark: #d96a00;
--key: #ffcc2e;
--coin: #ffb000;
--team0: #2f7dff;
--team1: #ff4b55;
--team2: #22c55e;
--tier-standard: #dfe7f2;
--tier-prime: #ffcc2e;
--tier-galaxy: #a855f7;
--display: "Lilita One", "Nunito", system-ui, sans-serif;
--ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
--radius: 20px;
--radius-sm: 12px;
--shadow: 0 12px 34px rgba(18, 32, 58, 0.22);
--shadow-sm: 0 4px 12px rgba(18, 32, 58, 0.14);
--outline: 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink),
2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 5px 0 var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* No double-tap or pinch zoom anywhere (a zoomed game on a phone has no way back), and no
pull-to-refresh. Panning stays allowed so menus still scroll; the controls use touch-action: none.
`manipulation` is the fallback for browsers that can't parse the pan pair. */
html, body {
margin: 0;
height: 100%;
touch-action: manipulation;
touch-action: pan-x pan-y;
overscroll-behavior: none;
}
body {
background: var(--sky-mid);
color: var(--ink);
font-family: var(--ui);
font-weight: 700;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
/* Double-tapping text would otherwise select it and pop up the copy menu. */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Big outlined game titles: white letters with a dark navy outline and drop. */
.title {
margin: 0;
font-family: var(--display);
font-weight: 400;
color: #fff;
letter-spacing: 0.01em;
line-height: 0.95;
text-shadow: var(--outline);
}
/* Chunky 3D buttons. Colour variants set --b (face) and --d (the darker base underneath). */
.btn {
--b: var(--blue);
--d: var(--blue-dark);
--t: #fff;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 10px 20px;
border: 0;
border-radius: 14px;
background: var(--b);
color: var(--t);
font-family: var(--ui);
font-weight: 900;
font-size: 16px;
letter-spacing: 0.02em;
text-transform: uppercase;
box-shadow: 0 5px 0 var(--d), 0 8px 16px rgba(18, 32, 58, 0.18);
transform: translateY(0);
transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.12s ease;
user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--d), 0 3px 8px rgba(18, 32, 58, 0.18); }
.btn:disabled { filter: grayscale(0.7) brightness(1.05); opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.07); } }
.btn-blue { --b: var(--blue); --d: var(--blue-dark); }
.btn-green { --b: var(--green); --d: var(--green-dark); }
.btn-red { --b: var(--red); --d: var(--red-dark); }
.btn-yellow { --b: var(--yellow); --d: var(--yellow-dark); --t: var(--ink); }
.btn-purple { --b: var(--purple); --d: var(--purple-dark); }
.btn-orange { --b: var(--orange); --d: var(--orange-dark); }
.btn-white { --b: #fff; --d: #c3cfe0; --t: var(--ink); }
.btn-ghost { --b: rgba(255, 255, 255, 0.16); --d: rgba(18, 32, 58, 0.25); --t: #fff; backdrop-filter: blur(6px); }
.btn-lg { min-height: 60px; padding: 14px 30px; font-size: 22px; border-radius: 18px; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; box-shadow: 0 3px 0 var(--d); }
.btn-sm:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--d); }
/* Fingers need 44px targets; a mouse doesn't. */
@media (pointer: coarse) { .btn-sm { min-height: 44px; padding: 8px 14px; } }
.btn-icon { width: 46px; padding: 0; }
/* Keyboard hint chip. */
kbd {
display: inline-block;
min-width: 22px;
padding: 1px 6px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
box-shadow: 0 2px 0 #b9c6d9;
font-family: var(--ui);
font-weight: 900;
font-size: 12px;
text-align: center;
}
/* Tier badge: Standard (plain), Prime (yellow), Galaxy (purple). */
.tier {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tier-standard { background: var(--tier-standard); color: var(--ink); }
.tier-prime { background: var(--tier-prime); color: #4a3500; }
.tier-galaxy {
background: linear-gradient(120deg, #7c3aed, #c026d3 55%, #6366f1);
color: #fff;
}
/* Currency chip: 120 */
.cur {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.cur > i { display: inline-block; width: 20px; height: 20px; flex: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
.cur-keys > i { background-image: url("data:image/svg+xml;utf8,"); }
.cur-coins > i { background-image: url("data:image/svg+xml;utf8,"); }