/* ========================================================== Obsidian Arena II ===
   The metal set: every mode button is a solid obsidian slab with a bevelled metal rim, its label
   and icon stamped in that metal — platinum (online), bronze (local table), rose gold (PvP),
   gunmetal amethyst (collection), gold (APE IN, the Vault). The rest of the menus — online,
   rooms, profile, leaderboards, dialogs — move onto the same obsidian stage. Loaded last. */

:root {
  --m-plat: linear-gradient(180deg, #ffffff, #d5dde6 40%, #8995a3 58%, #eef2f6);
  --m-bronze: linear-gradient(180deg, #ffdcb8, #d38c4c 42%, #84461c 60%, #eeae73);
  --m-rose: linear-gradient(180deg, #ffe7de, #eaa894 42%, #a95e4b 60%, #f8cdbd);
  --m-gun: linear-gradient(180deg, #e3dcf3, #9a8fb6 42%, #463d5e 60%, #c4b9e2);
  --m-gold: linear-gradient(180deg, #fff3c4, #f5c85a 42%, #b9831f 58%, #ffe39a);
  --obs-1: #2c2218; --obs-2: #18120c; --obs-3: #0a0705;
  --obs-ink: #f1e2bd; --obs-dim: #a8916a; --obs-hair: rgba(232, 192, 106, .24);
}

.m-plat { --metal: var(--m-plat); } .m-bronze { --metal: var(--m-bronze); } .m-rose { --metal: var(--m-rose); }
.m-gun { --metal: var(--m-gun); } .m-gold { --metal: var(--m-gold); }

/* a metal rim drawn as a gradient ring (so it can be any metal) */
.metal-rim, .am-row, .online-wrap .mode-card, .online-wrap .join-card {
  position: relative; isolation: isolate;
}
.am-row::before, .online-wrap .mode-card::after, .online-wrap .join-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--metal, var(--m-gold)); z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* stamped-metal icons */
.mi { display: inline-grid; place-items: center; flex: none; }
.mi svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .25)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .7)); }

/* ----------------------------------------------------------- the menu --- */
.am-rows { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.am-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  padding: 11px 14px; border: 0; border-radius: 14px; text-align: left; color: var(--obs-ink); cursor: pointer;
  background: linear-gradient(180deg, var(--obs-1) 0%, var(--obs-2) 48%, var(--obs-3) 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .9), 0 10px 20px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .09), inset 0 -3px 6px rgba(0, 0, 0, .55);
  transition: transform .15s, box-shadow .15s;
}
.am-row:hover { transform: translateY(-2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .9), 0 14px 26px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .12), inset 0 -3px 6px rgba(0, 0, 0, .55); }
.am-row:active { transform: translateY(1px); }
.am-row:focus-visible { outline: 2px solid #ffd77a; outline-offset: 3px; }
.am-row .mi { grid-row: span 2; width: 44px; height: 44px; padding: 8px; border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .1), rgba(0, 0, 0, .45)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(255, 255, 255, .08); }
.am-row b { font-family: var(--num); font-weight: 800; font-size: 18px; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)); }
.am-row:hover b { color: transparent; }
.am-row span:not(.mi) { margin: 0; font-size: 12px; color: var(--obs-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-row.am-vault { grid-column: 1 / -1; background: linear-gradient(180deg, #1a130b, #050403); }
.am-row.am-vault b { background: var(--metal); -webkit-background-clip: text; background-clip: text; }
.am-row.am-vault.locked { filter: saturate(.7); }

/* APE IN: polished gold slab, engraved letters, a bevel and a dark gap before the outer hairline */
.am-play { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -3px 0 rgba(120, 76, 10, .6), 0 0 0 1px #7a5410, 0 0 0 4px rgba(20, 14, 6, .9), 0 0 0 5px rgba(245, 200, 90, .55), 0 14px 30px rgba(245, 180, 60, .25); }
.am-play:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -3px 0 rgba(120, 76, 10, .6), 0 0 0 1px #7a5410, 0 0 0 4px rgba(20, 14, 6, .9), 0 0 0 5px rgba(255, 220, 130, .8), 0 20px 40px rgba(245, 180, 60, .35); }

/* the Tutorial chip in the top bar */
.am-tut { display: inline-flex; align-items: center; gap: 7px; }
.am-tut .mi { width: 15px; height: 15px; }

/* shorter desktop screens */
@media (min-width: 821px) and (max-height: 820px) {
  .am-row { padding: 8px 12px; grid-template-columns: 38px minmax(0, 1fr); }
  .am-row .mi { width: 38px; height: 38px; padding: 7px; }
  .am-row b { font-size: 16px; }
}

/* phones: the five (or four) as metal-rimmed tiles in the dock */
@media (max-width: 820px) {
  .am-rows { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .am-rows:has(.am-vault) { grid-template-columns: repeat(5, 1fr); }
  .am-row { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; row-gap: 3px; padding: 7px 2px 6px; border-radius: 11px; text-align: center; }
  .am-row::before { padding: 1.5px; }
  .am-row .mi { grid-row: auto; width: 26px; height: 26px; padding: 0; background: none; box-shadow: none; }
  .am-row span.mi { display: inline-grid; } /* the old dock rule hid every span */
  .am-row b { font-size: 9.5px; letter-spacing: .08em; }
  .am-row span:not(.mi), .am-row span.live { display: none; }
  .am-row.am-vault { grid-column: auto; }
  .am-tut span:not(.mi) { display: none; }
  .am-tut { padding: 0 10px; }
}

/* ----------------------------------------------------------- the splash --- */
.loading { background: radial-gradient(50% 45% at 50% 45%, rgba(245, 200, 90, .16), transparent 70%), #070504; }
.loading .logo-word { background: var(--m-gold); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 0 #5a3a08); text-shadow: none; }
.loading-crh { width: min(70vw, 420px); height: auto; margin: 12px auto 18px; display: block; }
.loading-hello { font-family: var(--num); font-weight: 700; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--obs-dim); margin-bottom: 8px; text-align: center; }
.loading-bar { background: rgba(255, 255, 255, .08); }
.loading-bar span { background: var(--m-gold); }

/* --------------------------------------------- the other menus: obsidian --- */
.menu:not([data-view="main"]) { background: radial-gradient(60% 50% at 80% 0%, rgba(245, 200, 90, .1), transparent 70%), linear-gradient(180deg, rgba(18, 13, 8, .9), rgba(7, 5, 4, .97)); }
.online-wrap .online-title { font-family: var(--num); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  background: var(--m-plat); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.online-wrap .menu-sub { color: var(--obs-dim); }
.online-wrap .mode-card, .online-wrap .join-card {
  background: linear-gradient(180deg, #1c150e, #0b0806); border: 0; border-radius: 16px; box-shadow: 0 12px 26px rgba(0, 0, 0, .45); backdrop-filter: none;
}
.online-wrap .mode-card::before { display: none; }
.online-wrap .mode-card .tier, .online-wrap .join-card .tier { color: #2a1a04; background: var(--metal); border: 0; letter-spacing: .14em; font-family: var(--num); font-weight: 800; }
.online-wrap .mode-card h3, .online-wrap .join-card h3 { font-family: var(--num); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8)); }
.online-wrap .mode-card p { color: #d6c59d; }
.online-wrap .mode-card .play { color: var(--obs-ink); font-family: var(--num); letter-spacing: .14em; }
.online-wrap .big-ico.mi { width: 52px; height: 52px; padding: 10px; border-radius: 14px; filter: none;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .1), rgba(0, 0, 0, .45)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.online-wrap .code-input { color: var(--obs-dim); background: #050403; border: 0; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .9), inset 0 -1px 0 rgba(255, 255, 255, .06); }
.online-wrap .code-input::placeholder { color: rgba(232, 192, 106, .25); }

/* rooms: the code cut in gold, seats as plates with gold-rimmed avatars */
.room-head { background: linear-gradient(180deg, #1a130b, #0b0806); border: 1px solid var(--obs-hair); }
.room-code { background: var(--m-gold); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .9)); }
.lobby-seat { background: linear-gradient(180deg, #19130c, #0c0906); border: 1px solid rgba(255, 255, 255, .07); }
.lobby-seat.you { border-color: rgba(245, 200, 90, .6); box-shadow: 0 0 18px rgba(245, 200, 90, .12); }
.lobby-seat .ls-av { border-color: #f5c85a; background: #050403; }
.rules-list { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .07); }
.section-title { background: var(--m-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title small { -webkit-text-fill-color: var(--obs-dim); }

/* dialogs everywhere (profile, leaderboards, collection, daily, settings, rules, pause, results) */
.modal { background: radial-gradient(70% 40% at 50% 0%, rgba(245, 200, 90, .08), transparent 70%), linear-gradient(180deg, #1a130b, #0b0806);
  border: 1px solid var(--obs-hair); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 241, 189, .08); }
.modal h2 { color: var(--obs-ink); }
.modal .lead { color: #cdbb92; }
.modal-root { background: rgba(5, 3, 2, .7); }

/* buttons: gold for the main action, obsidian for the rest */
.btn { background: linear-gradient(180deg, var(--obs-1), var(--obs-3)); border: 1px solid var(--obs-hair); color: var(--obs-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 0 rgba(0, 0, 0, .8); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-primary { background: var(--m-gold); color: #2a1a04; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 0 rgba(120, 76, 10, .5), 0 4px 0 #6e4a10, 0 10px 24px rgba(245, 180, 60, .25); }
.btn-primary:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 0 #6e4a10; }
.btn-danger { background: linear-gradient(180deg, #ff6b81, #b81a3a); color: #fff; border: 0; }
.input { background: #070504; border-color: rgba(255, 255, 255, .09); color: var(--obs-ink); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); }
.input:focus { border-color: #f5c85a; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7), 0 0 0 3px rgba(245, 200, 90, .2); }
select.input option { background: #120d08; }
.acct-card { background: linear-gradient(180deg, #19130c, #0c0906); border-color: var(--obs-hair); }
.acct-card h3 { color: #f5c85a; }
.acct-card p { color: #d6c59d; }
.net-chip { background: rgba(0, 0, 0, .35); }

@media (prefers-reduced-motion: reduce) { .am-row { transition: none; } }