/* ============================================================
   MAGE'S MATE — premium responsive stylesheet
   Fully fluid: no page scroll, board + panels adapt to any
   viewport (chess.com style re-flow on small screens).
   ============================================================ */

:root {
  --ink: #201b15;
  --paper: #eadcc1;
  --paper-light: #f8efdc;
  --muted: #b0a084;
  --muted-dim: #8b7c63;
  --gold: #c89c4c;
  --gold-light: #efd08d;
  --gold-deep: #8a672a;
  --square-light: #e8d1a4;
  --square-dark: #6d4930;
  --board-frame: #3e291c;
  --panel: linear-gradient(150deg, #262019e0, #1a1713e0);
  --line: #c89c4c33;
  --line-strong: #c89c4c66;
  --shadow: 0 24px 60px #0908069c;
  --serif: "Cinzel", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);

  --topbar: clamp(52px, 7.2vh, 74px);
  --gutter: clamp(12px, 2.2vw, 34px);
}

/* ---------- board / set themes (data attributes from JS) ---------- */
body[data-board="emerald"] { --square-light:#c9c47e; --square-dark:#245644; --board-frame:#18342a }
body[data-board="mahogany"] { --square-light:#e1bf91; --square-dark:#763a2d; --board-frame:#3b1d18 }
body[data-board="library"] { --square-light:#d9cda8; --square-dark:#756044; --board-frame:#4a3d2c }
body[data-board="ivory"] { --square-light:#eee5c9; --square-dark:#9b8b6b; --board-frame:#5b503f }
body[data-board="midnight"] { --square-light:#b6c5bd; --square-dark:#2d4a4b; --board-frame:#121d23 }
body[data-set="ivory"] .piece.black { color:#24272a; text-shadow:1px 1px 0 #d6d0bd, -1px -1px 0 #111 }
body[data-set="bronze"] .piece { color:#b4773e; text-shadow:1px 1px 0 #e0aa62, -1px -1px 0 #352017 }
body[data-set="gold"] .piece { color:#d5a94e; text-shadow:1px 1px 0 #ffe4a0, -1px -1px 0 #382411 }
body[data-set="marble"] .piece.white { color:#ede9df; text-shadow:1px 1px 0 #888, -1px -1px 0 #fff }
body[data-set="obsidian"] .piece.white { color:#8f9aa1; text-shadow:1px 1px 0 #d2d7d9, -1px -1px 0 #111 }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #14120f;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body {
  background:
    radial-gradient(120% 90% at 50% -25%, #40341f 0%, #211d17 46%, #100f0d 100%);
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .1;
  background-image: repeating-linear-gradient(93deg, transparent 0 4px, #c9a46a 5px, transparent 6px 11px);
  mix-blend-mode: overlay;
}
.ambient {
  position: fixed; z-index: 0; pointer-events: none; border-radius: 50%;
  filter: blur(70px); opacity: .3;
}
.ambient-one {
  width: 48vmax; height: 48vmax; top: -18vmax; left: -14vmax;
  background: radial-gradient(circle, #c89c4c55, transparent 65%);
  animation: drift 18s ease-in-out infinite alternate;
}
.ambient-two {
  width: 42vmax; height: 42vmax; bottom: -18vmax; right: -12vmax;
  background: radial-gradient(circle, #2a554555, transparent 65%);
  animation: drift 22s 1s ease-in-out infinite alternate-reverse;
}
@keyframes drift { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.12) } }

button, select, input { font: inherit; }
button { cursor: pointer; color: inherit; border: 0; background: none; }
button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold-light); outline-offset: 3px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
.eyebrow {
  margin: 0; color: var(--gold); font: 600 clamp(8px, 1vw, 10px)/1.4 var(--sans);
  letter-spacing: .28em; text-transform: uppercase;
}

/* ---------- app shell ---------- */
#app {
  position: relative; z-index: 1;
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}
.y8-brand {
  position: fixed; left: calc(var(--gutter) / 2); bottom: calc(var(--gutter) / 2);
  z-index: 15; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 4px;
  background: #12110fb0; border: 1px solid var(--line-strong);
  backdrop-filter: blur(8px); opacity: .8;
  transition: opacity .2s, transform .2s, border-color .2s;
  pointer-events: auto;
}
.y8-brand:hover { opacity: 1; border-color: var(--gold); transform: translateY(-1px) }
.y8-brand img {
  height: clamp(26px, 3.8vh, 40px); width: auto; display: block;
  image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
main { flex: 1; min-height: 0; position: relative; }

.topbar {
  flex: none; height: var(--topbar);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: #12110fb0; backdrop-filter: blur(12px);
  animation: fade-down .5s var(--ease) both;
}
.brand { display: flex; align-items: center; gap: 10px; transition: opacity .2s; }
.brand:hover { opacity: .82 }
.brand-mark {
  display: grid; place-items: center;
  width: clamp(28px, 4vh, 36px); aspect-ratio: 1;
  border: 1px solid var(--gold); border-radius: 50%;
  font: clamp(15px, 2.2vh, 20px) var(--serif); color: var(--gold-light);
  box-shadow: 0 0 0 4px #c89c4c14;
}
.brand span span, .brand > span:last-child { display: grid; text-align: left; line-height: 1.1 }
.brand strong { font: 600 clamp(11px, 1.5vh, 14px) var(--serif); letter-spacing: .16em }
.brand small { font-size: clamp(7px, 1vh, 9px); letter-spacing: .34em; color: var(--muted) }
.top-stats {
  margin-left: auto; display: flex; gap: clamp(8px, 1.6vw, 18px);
  font-size: clamp(10px, 1.4vh, 12px); color: var(--muted); letter-spacing: .1em;
}
.top-stats b { color: var(--gold-light); font-variant-numeric: tabular-nums }
.icon-button {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--gold-light); font-size: 15px;
  transition: transform .25s var(--ease), background .25s;
}
.icon-button:hover { transform: rotate(70deg); background: #c89c4c1f }

/* ---------- screens ---------- */
.screen { display: none; height: 100%; min-height: 0; overflow: hidden; }
.screen.active { display: flex; flex-direction: column; animation: page-enter .45s var(--ease) both }
.inner-screen { overflow: hidden; }

/* ---------- menu ---------- */
.hero {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 1.4vh, 16px);
  width: min(760px, 100%); margin: 0 auto;
  padding: clamp(10px, 2.4vh, 30px) var(--gutter);
  text-align: center;
}
.crest {
  display: grid; place-items: center;
  width: clamp(44px, 8vh, 76px); aspect-ratio: 1;
  border: 1px solid var(--gold); border-radius: 50%;
  font: clamp(24px, 4.6vh, 46px) var(--serif); color: var(--gold-light);
  box-shadow: 0 0 0 8px #c89c4c0d, 0 0 50px #c89c4c33;
  animation: crest-in .7s var(--ease) both;
}
.hero h1 {
  font-size: clamp(26px, 6.4vh, 58px); line-height: 1.02; letter-spacing: .14em;
  color: var(--paper-light); text-shadow: 0 6px 30px #00000080;
  animation: title-reveal .8s .06s var(--ease) both;
}
.hero h1 em {
  display: block; font-style: normal; letter-spacing: .3em;
  color: var(--gold-light); font-size: .62em;
}
.tagline {
  margin: 0; color: var(--muted); font: italic clamp(11px, 1.7vh, 15px) var(--serif);
  letter-spacing: .06em; animation: fade-up .7s .18s var(--ease) both;
}

.menu-actions {
  width: 100%; max-width: 460px; display: grid; gap: clamp(6px, 1.1vh, 12px);
  margin-top: clamp(2px, 1vh, 10px);
}
.gold-button {
  position: relative; overflow: hidden;
  display: grid; align-content: center; gap: 2px;
  min-height: clamp(46px, 8.4vh, 74px);
  padding: clamp(7px, 1.3vh, 14px) clamp(12px, 2vw, 20px);
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: linear-gradient(120deg, #2a2219e0, #1b1712e0);
  text-align: left; color: var(--paper);
  box-shadow: inset 0 1px #ffffff10, 0 6px 18px #0006;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  animation: button-rise .55s var(--ease) both;
}
.menu-actions .gold-button:nth-child(2) { animation-delay: .07s }
.menu-actions .gold-button:nth-child(3) { animation-delay: .14s }
.gold-button span { font: 600 clamp(13px, 2vh, 17px) var(--serif); letter-spacing: .07em }
.gold-button small { font-size: clamp(8px, 1.2vh, 11px); color: var(--muted); letter-spacing: .06em }
.gold-button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, #ffffff1f 45%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.gold-button:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 26px #0008, 0 0 0 1px #c89c4c33 }
.gold-button:hover::after { transform: translateX(120%) }
.gold-button:active { transform: translateY(0) scale(.995) }
.gold-button.primary {
  background: linear-gradient(120deg, #4b381c, #29200f);
  border-color: var(--gold);
}
.gold-button.primary span { color: var(--gold-light) }

.clubhouse-tools {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(5px, 1vh, 10px); width: 100%; max-width: 720px;
  margin-top: clamp(6px, 1.4vh, 18px); padding-top: clamp(8px, 1.6vh, 18px);
  border-top: 1px solid var(--line);
  animation: fade-up .6s .28s var(--ease) both;
}
.club-tool {
  display: flex; align-items: center; gap: 10px;
  min-height: clamp(42px, 6.4vh, 58px); padding: 8px 12px;
  text-align: left; border: 1px solid #a78a6244; border-radius: 3px;
  background: var(--panel);
  transition: transform .22s var(--ease), border-color .22s, background .22s;
}
.club-tool:hover { transform: translateY(-2px); border-color: var(--gold); background: linear-gradient(120deg,#332a1fe0,#211c15e0) }
.club-tool .tool-icon {
  display: grid; place-items: center; flex: none;
  width: clamp(22px, 3.4vh, 30px); aspect-ratio: 1;
  border-radius: 50%; background: #c89c4c1f; color: var(--gold-light);
  font-size: clamp(12px, 1.9vh, 17px);
}
.club-tool > span:nth-child(2) { display: grid; min-width: 0 }
.club-tool b { font: 600 clamp(10px, 1.5vh, 13px) var(--serif); letter-spacing: .06em }
.club-tool small { font-size: clamp(7px, 1vh, 10px); color: var(--muted-dim) }
.club-tool i { margin-left: auto; font-style: normal; color: var(--gold); opacity: .6 }

.resume-button {
  margin-top: clamp(6px, 1.4vh, 14px); color: var(--gold-light);
  font: italic clamp(10px, 1.5vh, 13px) var(--serif); letter-spacing: .08em;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 3px;
  animation: pulse-soft 2.6s ease-in-out infinite;
}
.resume-button[hidden] { display: none }
.menu-footer {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 var(--gutter) clamp(8px, 1.6vh, 18px);
  justify-content: center; color: var(--muted-dim);
  font-size: clamp(7px, 1vh, 9px); letter-spacing: .3em;
}
.menu-footer .rule { flex: 0 1 120px; height: 1px; background: var(--line-strong) }

/* ---------- game screen ---------- */
#screen-game.active { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.game-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: clamp(6px, 1.4vh, 16px) var(--gutter) clamp(4px, 1vh, 12px);
  animation: fade-down .45s var(--ease) both;
}
.game-header > div { text-align: center; min-width: 0 }
.game-header h2 { font-size: clamp(13px, 2.4vh, 24px); letter-spacing: .08em; color: var(--paper-light) }
.back-button { color: var(--muted); font: clamp(10px, 1.4vh, 13px) var(--serif); transition: color .2s, transform .2s }
.back-button:hover { color: var(--gold-light); transform: translateX(-2px) }
.outline-button {
  white-space: nowrap;
  border: 1px solid #a78a6299; background: #201a14aa; color: var(--gold-light);
  padding: clamp(5px, .9vh, 9px) clamp(9px, 1.4vw, 16px); border-radius: 3px;
  font: clamp(9px, 1.3vh, 12px) var(--serif); letter-spacing: .08em;
  transition: background .2s, transform .2s, border-color .2s;
}
.outline-button:hover { background: #2f2517; border-color: var(--gold); transform: translateY(-1px) }

.game-layout {
  min-height: 0; display: grid; align-items: stretch; justify-content: center;
  grid-template-columns: minmax(120px, 210px) auto minmax(120px, 210px);
  grid-template-rows: minmax(0, auto);
  align-content: center;
  gap: clamp(8px, 1.6vw, 26px);
  padding: 0 var(--gutter) clamp(6px, 1.4vh, 18px);
}
.game-side {
  min-width: 0; height: 100%; min-height: 0;
  display: flex; flex-direction: column; gap: clamp(5px, 1vh, 12px);
  animation: fade-side .55s .1s var(--ease) both;
}
.right-side { animation-name: fade-side-right }
.right-side .game-tools { margin-top: auto }


.player-card {
  display: flex; align-items: center; gap: 9px;
  padding: clamp(6px, 1vh, 11px) clamp(7px, 1vw, 12px);
  border: 1px solid #a78a6240; border-radius: 4px; background: var(--panel);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.player-card.active-player {
  border-color: var(--gold); box-shadow: 0 0 0 1px #c89c4c33, 0 0 24px #c89c4c1f;
  transform: translateY(-1px);
}
.player-piece {
  display: grid; place-items: center; flex: none;
  width: clamp(26px, 4vh, 36px); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(15px, 2.4vh, 22px); background: #ffffff0d;
}
.white-piece { color: var(--paper-light) }
.black-piece { color: #2a2723; background: #b9a98d }
.player-card > div:nth-child(2) { display: grid; min-width: 0 }
.player-card small { font-size: clamp(7px, .95vh, 9px); letter-spacing: .26em; color: var(--muted-dim) }
.player-card strong { font: 600 clamp(10px, 1.4vh, 13px) var(--serif); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.clock {
  margin-left: auto; padding-left: 8px; color: var(--gold-light);
  font: 600 clamp(12px, 1.9vh, 17px) var(--serif); font-variant-numeric: tabular-nums;
}
.active-player .clock { animation: tick-glow 2s ease-in-out infinite }

.captured-block {
  border: 1px solid #a78a6226; border-radius: 4px; background: #1b171240;
  padding: clamp(4px, .8vh, 9px) 10px; min-height: 34px;
}
.captured-block > span {
  display: block; font-size: clamp(7px, .95vh, 9px); letter-spacing: .24em;
  color: var(--muted-dim); text-transform: uppercase;
}
.captured-pieces {
  font-size: clamp(12px, 1.9vh, 18px); line-height: 1.3; color: var(--paper);
  word-break: break-all; min-height: 1.2em;
}

.history-block {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid #a78a6226; border-radius: 4px; background: #1b171240; padding: 8px 10px;
}
.section-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: clamp(7px, 1vh, 9px); letter-spacing: .22em; color: var(--muted-dim);
  text-transform: uppercase; margin-bottom: 6px;
}
.move-history {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--gold-deep) transparent; padding-right: 4px;
}
.move-history::-webkit-scrollbar { width: 4px }
.move-history::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 4px }
.move-row {
  display: grid; grid-template-columns: 28px 1fr 1fr; gap: 4px;
  font-size: clamp(9px, 1.3vh, 12px); padding: 2px 0; color: var(--paper);
  animation: fade-up .3s var(--ease) both;
}
.move-number { color: var(--muted-dim) }
.empty-note { margin: 0; font: italic clamp(9px, 1.2vh, 11px) var(--serif); color: var(--muted-dim) }

.game-tools { display: grid; gap: 5px }
.tool-button {
  border: 1px solid #a78a6240; border-radius: 3px; background: #221c1580;
  padding: clamp(5px, .9vh, 9px) 8px; font-size: clamp(9px, 1.3vh, 12px);
  color: var(--paper); letter-spacing: .05em;
  transition: background .2s, border-color .2s, transform .2s;
}
.tool-button:hover { background: #33291c; border-color: var(--gold); transform: translateX(2px) }
.tool-button.danger { color: #e59b8b }
.tool-button.danger:hover { background: #3a2019; border-color: #c96a53 }

/* ---------- board ---------- */
.board-wrap {
  --board: min(
    calc(100dvh - var(--topbar) - clamp(96px, 17vh, 150px)),
    calc(100vw - 2 * var(--gutter) - 2 * 210px - 2 * clamp(8px, 1.6vw, 26px)),
    720px
  );
  width: var(--board);
  display: grid; gap: clamp(3px, .7vh, 8px); justify-items: center;
  animation: board-in .6s var(--ease) both;
}
.board-ornament {
  width: 100%; display: flex; justify-content: space-around; align-items: center;
  color: var(--gold); font: clamp(7px, 1vh, 10px) var(--serif); letter-spacing: .3em;
  opacity: .75;
}
.top-ornament { justify-content: center }
.chess-board {
  width: 100%; aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: clamp(3px, .7vh, 8px) solid var(--board-frame); border-radius: 3px;
  box-shadow: var(--shadow), 0 0 0 1px #c89c4c4d, inset 0 0 40px #00000055;
  overflow: hidden;
}
.square {
  position: relative; display: grid; place-items: center;
  border: 0; padding: 0; transition: background-color .2s;
}
.square.light { background: var(--square-light) }
.square.dark { background: var(--square-dark) }
.square.last-move::before {
  content: ""; position: absolute; inset: 0; background: #e0b64a3d;
}
.square.selected::before {
  content: ""; position: absolute; inset: 0;
  background: #f0c86b55; box-shadow: inset 0 0 0 2px var(--gold-light);
}
.square.legal::after {
  content: ""; position: absolute; width: 28%; aspect-ratio: 1; border-radius: 50%;
  background: #0f0d0a5c; animation: dot-in .22s var(--ease) both;
}
.square.capture::after {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  border: clamp(2px, .45vh, 4px) solid #0f0d0a66; animation: dot-in .22s var(--ease) both;
}
.square.check { animation: check-pulse 1.1s ease-in-out infinite }
.square:hover:not(.selected) { filter: brightness(1.06) }
.piece {
  position: relative; z-index: 1; line-height: 1; pointer-events: none;
  font-size: calc(var(--cell, 8vh) * 0.8);
  transition: transform .18s var(--ease);
  will-change: transform;
}
.piece.white { color: #f7f2e6; text-shadow: 0 1px 0 #8d8778, 0 2px 5px #0007 }
.piece.black { color: #1e1c19; text-shadow: 0 1px 0 #6b6355, 0 2px 5px #0007 }
.square:hover .piece { transform: translateY(-2px) scale(1.04) }
.sliding-piece { z-index: 3 }
.turn-status {
  font: italic clamp(9px, 1.4vh, 13px) var(--serif); color: var(--muted);
  letter-spacing: .1em; text-align: center;
}

/* piece size uses the board wrapper variable */
.board-wrap { --cell: calc(var(--board) / 8) }
.board-wrap .piece { font-size: calc(var(--cell) * 0.8) }

/* ---------- inner screens (collection / stats / howto / settings / tournament) ---------- */
.inner-screen.active { display: flex; flex-direction: column }
.inner-screen {
  width: min(1040px, 100%); margin: 0 auto;
  padding: clamp(10px, 2.4vh, 34px) var(--gutter) clamp(10px, 2vh, 26px);
}
.inner-heading { flex: none; margin-bottom: clamp(8px, 1.8vh, 22px) }
.inner-heading .back-button { display: block; margin-bottom: clamp(8px, 2vh, 26px) }
.inner-heading h2 { font-size: clamp(20px, 4.2vh, 42px); letter-spacing: .1em; color: var(--paper-light) }
.inner-heading > p:last-child { color: var(--muted); font: italic clamp(10px, 1.5vh, 15px) var(--serif); margin: 6px 0 0 }

.collection-tabs { flex: none; border-bottom: 1px solid var(--line); margin-bottom: clamp(8px, 1.6vh, 20px) }
.tab {
  color: var(--muted); padding: 8px 16px 10px; font: clamp(10px, 1.4vh, 13px) var(--serif);
  letter-spacing: .12em; border-bottom: 2px solid transparent; transition: .2s;
}
.tab.active { color: var(--gold-light); border-bottom-color: var(--gold) }
.collection-grid, .stats-grid, .howto-grid {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none;
  scrollbar-gutter: stable; padding-right: 4px;
}
.collection-grid::-webkit-scrollbar, .stats-grid::-webkit-scrollbar,
.howto-grid::-webkit-scrollbar, .settings-panel::-webkit-scrollbar { width: 0; height: 0; display: none }

.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: max-content; align-items: start; gap: clamp(8px, 1.4vw, 16px) }
.collection-card {
  display: flex; flex-direction: column;
  border: 1px solid #a78a6240; border-radius: 4px; background: var(--panel); overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  animation: fade-up .4s var(--ease) both;
}
.collection-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 26px #0007 }
.item-preview {
  flex: none; height: clamp(64px, 12vh, 110px); display: grid; place-items: center;
  background: var(--preview, #2a2219); font-size: clamp(26px, 5vh, 44px); color: var(--paper-light);
}
.preview-board {
  width: 60%; aspect-ratio: 1;
  background-image:
    linear-gradient(45deg, #0003 25%, transparent 25% 75%, #0003 75%),
    linear-gradient(45deg, #0003 25%, transparent 25% 75%, #0003 75%);
  background-size: 25% 25%; background-position: 0 0, 12.5% 12.5%;
  box-shadow: 0 0 0 1px #0004, 0 8px 20px #0006;
}
.item-info { flex: 1; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 5px }
.item-info h3 { font-size: clamp(12px, 1.7vh, 15px); letter-spacing: .05em }
.item-info p { margin: 0; font-size: clamp(9px, 1.2vh, 11px); color: var(--muted-dim) }
.item-action {
  margin-top: 3px; border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 6px 8px; font-size: clamp(9px, 1.2vh, 12px); color: var(--gold-light);
  background: #251e1580; transition: .2s;
}
.item-action:hover { background: #3a2e1c }
.item-action.locked { color: var(--muted) }
.item-action.unaffordable { opacity: .55 }
.item-action.is-equipped { border-color: var(--gold); color: var(--gold-light); background: #3a2e1c }
.item-action, .tab { touch-action: manipulation; cursor: pointer; -webkit-user-select: none; user-select: none }
.item-action { min-height: 40px }
.item-action:active { background: #4a3a22; transform: scale(.98) }
.tab { min-height: 42px }
.collection-card:active { border-color: var(--gold) }

.store-toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px); z-index: 40; pointer-events: none;
  max-width: min(92vw, 420px); text-align: center;
  padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 4px;
  background: linear-gradient(150deg, #2b2318f2, #191512f2); color: var(--gold-light);
  font-size: 12px; letter-spacing: .04em; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.store-toast.show { opacity: 1; transform: translate(-50%, 0) }

.rank-banner {
  flex: none; display: flex; align-items: center; gap: clamp(10px, 2vw, 20px);
  padding: clamp(10px, 2vh, 20px); margin-bottom: clamp(8px, 1.6vh, 20px);
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: linear-gradient(120deg, #382b18cc, #1c1813cc);
}
.rank-medal {
  display: grid; place-items: center; width: clamp(38px, 7vh, 62px); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-light);
  font-size: clamp(20px, 3.6vh, 32px);
}
.rank-banner > div:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 4px }
.rank-banner small { font-size: clamp(7px, 1vh, 9px); letter-spacing: .26em; color: var(--muted-dim) }
.rank-banner h3 { font-size: clamp(14px, 2.4vh, 22px); letter-spacing: .08em }
.rank-progress { height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden }
.rank-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  transition: width .8s var(--ease);
}
.rank-banner p { margin: 0; font-size: clamp(9px, 1.2vh, 11px); color: var(--muted) }
.rank-crown { color: var(--gold); font-size: clamp(18px, 3vh, 28px); opacity: .5 }

/* ---------- statistics: clean ledger bars ---------- */
.stats-grid { display: flex; flex-direction: column; gap: clamp(6px, 1.1vh, 10px); max-width: 640px; margin: 0 auto; width: 100% }
.stat-bar {
  border: 1px solid #a78a6226; border-radius: 6px; background: var(--panel);
  padding: clamp(8px, 1.3vh, 13px) clamp(10px, 1.6vw, 16px); display: grid; gap: 6px;
  animation: fade-up .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms);
  transition: border-color .25s, background .25s;
}
.stat-bar:hover { border-color: #a78a6266 }
.stat-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.stat-bar small { font-size: clamp(8px, 1.1vh, 10px); letter-spacing: .18em; color: var(--muted-dim); text-transform: uppercase; display: flex; align-items: center; gap: 8px }
.stat-icon { color: var(--gold); opacity: .8; font-size: 1.15em; letter-spacing: 0 }
.stat-bar strong { font: 600 clamp(13px, 2vh, 18px) var(--serif); color: var(--gold-light); font-variant-numeric: tabular-nums }
.stat-bar-track { height: 5px; border-radius: 99px; background: #ffffff0d; overflow: hidden }
.stat-bar-fill {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  box-shadow: 0 0 8px #c9a22755;
  animation: bar-grow .8s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms + 150ms);
}
@keyframes bar-grow { to { width: var(--w) } }

.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(8px, 1.4vw, 16px) }
.howto-grid article {
  border: 1px solid #a78a6233; border-radius: 4px; background: var(--panel);
  padding: clamp(10px, 1.8vh, 18px); display: grid; gap: 7px; align-content: start;
  animation: fade-up .45s var(--ease) both;
}
.howto-icon { color: var(--gold-light); font-size: clamp(18px, 3vh, 26px) }
.howto-grid h3 { font-size: clamp(12px, 1.8vh, 16px); letter-spacing: .06em }
.howto-grid p { margin: 0; font-size: clamp(10px, 1.4vh, 13px); line-height: 1.6; color: var(--muted) }

.settings-panel {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: clamp(8px, 1.4vh, 14px);
  align-content: start; scrollbar-width: none; scrollbar-gutter: stable;
}
.settings-panel > label, .fixed-clock {
  display: grid; gap: 6px; padding: clamp(10px, 1.6vh, 16px);
  border: 1px solid #a78a6233; border-radius: 4px; background: var(--panel);
  font: clamp(11px, 1.5vh, 14px) var(--serif); letter-spacing: .05em;
}
.settings-panel small { font-size: clamp(9px, 1.2vh, 11px); color: var(--muted-dim); font-family: var(--sans) }
.settings-panel select {
  background: #191510; color: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 8px 10px;
}
.fixed-clock strong { font-size: clamp(14px, 2.2vh, 20px); color: var(--gold-light) }
.fixed-clock i { font-style: normal; font-size: .6em; color: var(--muted) }
.toggle-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer }
.toggle-row > span { display: grid; gap: 3px }
.toggle-row input { display: none }
.toggle-row i {
  flex: none; width: 44px; height: 24px; border-radius: 999px; background: #ffffff17;
  border: 1px solid var(--line-strong); position: relative; transition: background .25s;
}
.toggle-row i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--muted); transition: transform .25s var(--ease), background .25s;
}
.toggle-row input:checked + i { background: #4a3717 }
.toggle-row input:checked + i::after { transform: translateX(20px); background: var(--gold-light) }

.tournament-ladder {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px); overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 8px; scrollbar-width: none;
}
.tournament-ladder::-webkit-scrollbar { display: none }
.tourney-step {
  position: relative; flex: 1 1 0; min-width: 128px; max-width: 200px;
  border: 1px solid #a78a6240; border-radius: 5px; background: var(--panel);
  padding: clamp(10px, 1.6vh, 18px) 12px clamp(10px, 1.4vh, 14px);
  display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center;
  animation: fade-up .45s var(--ease) both;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease), opacity .3s;
}
/* chain connector between links */
.chain-link {
  position: absolute; top: 50%; left: calc(-1 * clamp(10px, 1.6vw, 22px) - 2px);
  width: clamp(10px, 1.6vw, 22px); height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--gold-deep) 0 5px, transparent 5px 9px);
  opacity: .5;
}
.tourney-step:first-child .chain-link { display: none }
.tourney-step.done .chain-link, .tourney-step.current .chain-link { opacity: 1 }
.step-badge {
  width: clamp(28px, 4.4vh, 40px); height: clamp(28px, 4.4vh, 40px); border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(12px, 1.9vh, 17px);
  border: 1px solid var(--line-strong); background: #1b1611; color: var(--muted);
}
.step-body { display: grid; gap: 4px }
.tourney-step small { font-size: clamp(7px, 1vh, 9px); letter-spacing: .22em; color: var(--muted-dim) }
.tourney-step h3 { font-size: clamp(11px, 1.7vh, 15px) }
.tourney-step p { margin: 0; font-size: clamp(9px, 1.2vh, 11px); color: var(--muted) }
.tourney-step.done { border-color: #4c7a5e; box-shadow: inset 0 0 22px #2a55451f }
.tourney-step.done .step-badge { border-color: #4c7a5e; color: #8fd3aa; background: #1a2b22 }
.tourney-step.current { border-color: var(--gold); box-shadow: 0 0 0 1px #c89c4c33, 0 0 30px #c89c4c24; transform: translateY(-2px) }
.tourney-step.current .step-badge {
  border-color: var(--gold); color: var(--gold-light); background: #2c2213;
  animation: pulse-soft 2.4s ease-in-out infinite;
}
.tourney-step.locked { opacity: .45; filter: grayscale(.35) }
.tourney-step.locked .step-badge { filter: grayscale(1) }
.tournament-start { flex: none; margin: clamp(8px, 1.6vh, 18px) auto 0; width: min(420px, 100%); text-align: center; justify-items: center }
.tournament-start:disabled { opacity: .5; cursor: not-allowed }


/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: #08070599; backdrop-filter: blur(8px); animation: fade-in .25s ease both;
}
.modal[hidden] { display: none }
.modal-card {
  width: min(440px, 100%); border: 1px solid var(--gold); border-radius: 5px;
  background: linear-gradient(150deg, #32271b, #191612);
  padding: clamp(18px, 3.4vh, 34px); text-align: center; box-shadow: var(--shadow);
  animation: modal-in .4s var(--ease) both;
}
.modal-card h2 { font-size: clamp(17px, 2.8vh, 26px); margin: 8px 0 16px; letter-spacing: .08em }
.modal-card p { color: var(--muted); font-size: clamp(11px, 1.5vh, 14px); line-height: 1.6; margin: 0 0 16px }
.promotion-options { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap }
.promotion-options button {
  width: clamp(50px, 9vh, 70px); aspect-ratio: 1; border: 1px solid var(--line-strong);
  border-radius: 4px; background: #241d15; color: var(--paper-light);
  font-size: clamp(26px, 5vh, 40px); transition: transform .2s var(--ease), border-color .2s;
}
.promotion-options button:hover { transform: translateY(-3px) scale(1.05); border-color: var(--gold) }
.result-symbol { font-size: clamp(34px, 6vh, 54px); color: var(--gold-light); animation: crest-in .6s var(--ease) both }
.result-rewards { display: flex; justify-content: center; gap: 18px; margin-bottom: 18px; color: var(--muted) }
.result-rewards b { color: var(--gold-light) }
.result-card .gold-button { justify-items: center; text-align: center }

/* smooth open / close choreography */
.modal.closing { animation: fade-out .22s ease both }
.modal.closing .modal-card { animation: modal-out .22s var(--ease) both }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes modal-out { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(10px) scale(.97) } }

/* confirm dialog */
.confirm-card { width: min(400px, 100%); position: relative }
.confirm-symbol { font-size: clamp(26px, 4.4vh, 38px); color: var(--gold-light); animation: crest-in .5s var(--ease) both }
.confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.confirm-actions .outline-button, .confirm-actions .gold-button { min-width: 140px; justify-items: center; text-align: center }

/* checkmate flourish */
.result-card { position: relative; overflow: hidden }
.result-halo { position: absolute; inset: -40% -10%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-light) 30%, transparent), transparent 70%) }
.result-card.checkmate { border-color: var(--gold-light); box-shadow: var(--shadow), 0 0 40px -8px var(--gold) }
.result-card.checkmate .result-halo { animation: halo-pulse 2.2s var(--ease) infinite }
.result-card.checkmate .result-symbol { animation: crest-in .6s var(--ease) both, mate-throb 2.4s ease-in-out .6s infinite }
@keyframes halo-pulse { 0%, 100% { opacity: .18; transform: scale(.9) } 50% { opacity: .5; transform: scale(1.06) } }
@keyframes mate-throb { 0%, 100% { transform: none; text-shadow: none } 50% { transform: scale(1.08); text-shadow: 0 0 22px var(--gold) } }

/* ============================================================
   RESPONSIVE RE-FLOW
   ============================================================ */

/* tablets / narrow desktop: tighter side rails */
@media (max-width: 1024px) {
  .game-layout { grid-template-columns: minmax(110px, 168px) auto minmax(110px, 168px) }
  .board-wrap {
    --board: min(
      calc(100dvh - var(--topbar) - clamp(90px, 15vh, 130px)),
      calc(100vw - 2 * var(--gutter) - 2 * 150px - 2 * clamp(8px, 1.6vw, 26px)),
      620px
    );
  }
}

/* phones + short screens: chess.com style stacked layout */
@media (max-width: 780px) and (orientation: portrait), (max-width: 620px) {
  .clubhouse-tools { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .game-header { gap: 8px }
  .game-header .eyebrow { display: none }
  .game-header h2 { font-size: clamp(12px, 4vw, 17px); white-space: nowrap }
  .game-header .outline-button { font-size: 10px; padding: 6px 9px }
  .game-header .back-button { font-size: 11px }

  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    grid-template-rows: auto minmax(0, auto) auto;
    align-content: center; justify-items: center;
    gap: clamp(5px, 1.1vh, 10px);
  }
  .game-side {
    order: 0; width: min(100%, 560px); max-width: none; height: auto;
    flex-direction: row; align-items: stretch; gap: 6px; justify-self: stretch;
    justify-content: center; animation-name: fade-up;
  }
  .left-side { order: 1 }
  .board-wrap { order: 2 }
  .right-side { order: 3 }
  .game-side .player-card { flex: 1 1 auto; min-width: 0 }
  .captured-block {
    flex: 1 1 40%; min-width: 0; display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; min-height: 0;
  }
  .captured-block > span { display: none }
  .captured-pieces { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px }
  .history-block { display: none }
  .game-tools { display: flex; gap: 5px; flex: 1 1 auto; margin-top: 0 }
  .game-tools .section-label { display: none }
  .game-tools .tool-button { flex: 1; white-space: nowrap; font-size: 10px; padding: 7px 4px }
  .board-wrap {
    --board: min(
      calc(100dvh - var(--topbar) - clamp(150px, 26vh, 230px)),
      calc(100vw - 2 * var(--gutter)),
      560px
    );
  }
  .turn-status { font-size: 11px }
  .top-ornament { display: none }
  .inner-screen { padding-top: 12px }
  .collection-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) }
  .stats-grid { gap: 6px }
  .stat-bar { padding: 8px 12px; gap: 5px }
  .rank-crown { display: none }
  /* invisible (but working) scroll on phones */
  .collection-grid, .stats-grid, .howto-grid, .settings-panel, .tournament-ladder {
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-right: 0;
  }
  .collection-grid::-webkit-scrollbar, .stats-grid::-webkit-scrollbar,
  .howto-grid::-webkit-scrollbar, .settings-panel::-webkit-scrollbar,
  .tournament-ladder::-webkit-scrollbar { width: 0; height: 0; display: none }
  /* tournament becomes a vertical chain */
  .tournament-ladder {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    overflow-x: hidden; overflow-y: auto; gap: 18px; padding-bottom: 4px;
  }

  .y8-brand { display: none }
  .tourney-step {
    flex: none; max-width: none; min-width: 0; width: 100%;
    grid-template-columns: auto 1fr; justify-items: start; text-align: left;
    align-items: center; gap: 12px; padding: 12px 14px;
  }
  .chain-link {
    top: auto; bottom: 100%; left: calc(clamp(28px, 4.4vh, 40px) / 2 + 14px);
    width: 2px; height: 18px; transform: none;
    background: repeating-linear-gradient(180deg, var(--gold-deep) 0 5px, transparent 5px 9px);
  }

}

/* very small phones */
@media (max-width: 420px) {
  .menu-footer { display: none }
  .top-stats { font-size: 10px; gap: 8px }
  .menu-actions { max-width: 100% }
  .game-side { flex-wrap: wrap }
  .player-card small { display: none }
}

/* landscape phones: keep the board dominant, rails thin */
@media (max-height: 620px) and (orientation: landscape) and (min-width: 621px) {
  .menu-footer { display: none }
  .game-layout { grid-template-columns: minmax(100px, 150px) auto minmax(100px, 150px); gap: 10px }
  .game-header { padding-block: 3px }
  .game-header h2 { font-size: clamp(12px, 2.6vh, 18px) }
  .left-side .history-block { display: none }
  .board-wrap {
    --board: min(
      calc(100dvh - var(--topbar) - 72px),
      calc(100vw - 2 * var(--gutter) - 320px)
    );
  }
  .turn-status { font-size: 10px }
  .clubhouse-tools { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .club-tool small { display: none }
  .game-header { padding-block: 4px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- keyframes ---------- */
@keyframes page-enter { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
@keyframes fade-side { from { opacity: 0; transform: translateX(-16px) } to { opacity: 1; transform: none } }
@keyframes fade-side-right { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: none } }
@keyframes title-reveal { from { opacity: 0; letter-spacing: .3em; transform: translateY(10px) } to { opacity: 1; letter-spacing: .14em; transform: none } }
@keyframes crest-in { from { opacity: 0; transform: scale(.7) rotate(-14deg) } to { opacity: 1; transform: none } }
@keyframes button-rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes board-in { from { opacity: 0; transform: scale(.965) } to { opacity: 1; transform: none } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes dot-in { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
@keyframes check-pulse { 0%, 100% { box-shadow: inset 0 0 0 #ff9c8000 } 50% { box-shadow: inset 0 0 22px #ff8a6c99 } }
@keyframes tick-glow { 0%, 100% { opacity: 1 } 50% { opacity: .62 } }
@keyframes pulse-soft { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

/* ===== Table Talk: AI trash-talk bubbles ===== */
.banter-block{margin-top:14px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.banter-feed{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding:2px}
.banter-bubble{position:relative;align-self:flex-start;max-width:100%;background:#241f18;border:1px solid rgba(201,162,75,.35);border-left:3px solid #c9a24b;border-radius:4px 12px 12px 12px;padding:9px 12px 9px 10px;font-size:13px;line-height:1.45;color:#e9dfc8;font-style:italic;box-shadow:0 4px 14px rgba(0,0,0,.35);animation:banter-in .25s ease-out}
.banter-speaker{color:#c9a24b;margin-right:7px;font-style:normal}
.banter-caret{display:inline-block;width:7px;height:14px;margin-left:3px;vertical-align:-2px;background:#c9a24b;animation:banter-blink .8s steps(1) infinite}
@keyframes banter-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes banter-blink{50%{opacity:0}}

#ad-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(38,32,24,.96),rgba(12,10,8,.98));backdrop-filter:blur(6px);opacity:0;transition:opacity .26s ease}
#ad-overlay.visible{opacity:1}
#ad-overlay[hidden]{display:none}
.ad-overlay-card{text-align:center;padding:34px 30px;max-width:340px;border:1px solid rgba(201,162,75,.35);border-radius:18px;background:linear-gradient(180deg,rgba(30,26,20,.9),rgba(18,16,12,.9));box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ad-overlay-card h2{font-family:'Cinzel',serif;color:#efe3c8;font-size:1.15rem;margin:.35rem 0 .6rem}
.ad-overlay-card .eyebrow{color:#c9a24b;letter-spacing:.22em;font-size:.62rem}
.ad-note{color:rgba(239,227,200,.6);font-size:.75rem;margin:0}
.ad-spinner{position:relative;width:104px;height:104px;margin:0 auto 18px}
.ad-spinner span{position:absolute;top:50%;left:50%;font-size:1.4rem;color:#c9a24b;transform:rotate(calc(var(--i)*60deg)) translateY(-46px) rotate(calc(var(--i)*-60deg)) translate(-50%,-50%);animation:ad-pulse 1.8s ease-in-out infinite;animation-delay:calc(var(--i)*.15s);opacity:.35}
.ad-spinner:after{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,162,75,.25);border-top-color:#c9a24b;animation:ad-spin 1.4s linear infinite}
.ad-dots i{animation:ad-blink 1.2s steps(1) infinite;font-style:normal}
.ad-dots i:nth-child(2){animation-delay:.25s}
.ad-dots i:nth-child(3){animation-delay:.5s}
@keyframes ad-spin{to{transform:rotate(360deg)}}
@keyframes ad-pulse{0%,100%{opacity:.3}50%{opacity:1;text-shadow:0 0 12px rgba(201,162,75,.7)}}
@keyframes ad-blink{50%{opacity:.2}}

body.ad-frozen #app{pointer-events:none;filter:saturate(.7) brightness(.7)}
.double-cc{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}
.double-cc small{opacity:.75;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}

.global-toast { z-index: 120; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: min(92vw, 460px) }

.cloud-panel{display:grid;gap:.6rem;padding:1rem 1.1rem;border:1px solid rgba(200,169,106,.28);border-radius:14px;background:rgba(20,14,9,.35)}
.cloud-panel>span{display:flex;flex-direction:column;gap:.25rem;font-weight:600}
.cloud-panel small{font-weight:400;opacity:.72}
.cloud-panel small[data-state="online"]{color:#7dd8a0}
.cloud-panel small[data-state="syncing"]{color:#e2c98a}
.cloud-panel small[data-state="error"]{color:#e39a8f}
.cloud-panel strong{font-size:.95rem;letter-spacing:.04em;opacity:.9}