:root{
  --mg-bg:#11161c;
  --mg-panel:#19212b;
  --mg-panel-2:#222c37;
  --mg-panel-3:#0f1419;
  --mg-line:rgba(255,255,255,.08);
  --mg-soft:rgba(255,255,255,.05);
  --mg-text:#eef3f8;
  --mg-muted:#aeb9c5;
  --mg-accent:#78a7ff;
  --mg-green:#57c38a;
  --mg-red:#ff6d6d;
  --mg-gold:#f1c76b;
  --mg-shadow:0 14px 36px rgba(0,0,0,.28);
  --mg-wood-1:#5b3d26;
  --mg-wood-2:#7a5438;
  --mg-felt-1:#234335;
  --mg-felt-2:#173127;
  --mg-red-marble:#d94f4f;
  --mg-blue-marble:#4b88ff;
  --mg-green-marble:#3fb06d;
  --mg-yellow-marble:#d8b24a;
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,#0d1218,#151d25);
  color:var(--mg-text);
  font-family:Arial,Helvetica,sans-serif;
}

button,
input,
select{
  font:inherit;
}

.marble-page{
  min-height:100vh;
  padding:14px;
}

.marble-app-shell,
.marble-embed-shell{
  width:100%;
}

.mg-shell{
  display:grid;
  gap:14px;
}

.mg-shell.full{
  grid-template-columns:minmax(260px,320px) minmax(360px,1fr) minmax(260px,320px);
  align-items:start;
}

.mg-board-card{
  width:100%;
}

.mg-shell.embed{
  grid-template-columns:1fr;
}

.mg-card{
  background:linear-gradient(180deg,var(--mg-panel),var(--mg-panel-2));
  border:1px solid var(--mg-line);
  border-radius:18px;
  box-shadow:var(--mg-shadow);
  overflow:hidden;
}

.mg-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--mg-line);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
}

.mg-card-head h2,
.mg-card-head h3{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

.mg-card-body{
  padding:14px;
  min-width:0;
}

.mg-tools-card,
.mg-tools-card .mg-card-body{
  overflow:visible;
}

.mg-left-col{
  overflow:visible;
}

.mg-link{
  color:#6fb3ff;
  text-decoration:none;
  font-weight:500;
}

.mg-link:hover{
  color:#9fd0ff;
  text-decoration:underline;
}

.mg-title{
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}

.mg-sub{
  color:var(--mg-muted);
  font-size:13px;
}

.mg-stack{
  display:grid;
  gap:14px;
}

.mg-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.mg-row.space{
  justify-content:space-between;
}

.mg-seat-label{
  color:var(--mg-text);
}

.mg-finish-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color:#eef3f8;
  vertical-align:middle;
}

.mg-finish-badge-icon{
  font-size:13px;
  line-height:1;
}

.mg-finish-badge.place-1{
  background:rgba(241,199,107,.18);
  border-color:rgba(241,199,107,.45);
  color:#ffe7a6;
}

.mg-finish-badge.place-2{
  background:rgba(210,220,235,.14);
  border-color:rgba(210,220,235,.35);
  color:#e8edf5;
}

.mg-finish-badge.place-3{
  background:rgba(181,120,84,.18);
  border-color:rgba(181,120,84,.40);
  color:#f0c7ab;
}

/* =========================
   HOW TO PLAY (GLOBAL)
   ========================= */

.mg-howto{
  overflow:hidden;
}

/* Headings */
.mg-howto h4{
  margin-top:16px;
  margin-bottom:6px;
  font-size:14px;
  font-weight:600;
  color:#e6e6e6;
}

/* Paragraphs */
.mg-howto p{
  margin:6px 0 10px;
  line-height:1.45;
  color:#cfcfcf;
}

/* Lists */
.mg-howto ul{
  margin:0 0 12px 18px;
  padding:0;
}

.mg-howto li{
  margin-bottom:5px;
  line-height:1.4;
  color:#cfcfcf;
}

/* Short section spacing */
.mg-howto-short ul{
  margin-bottom:10px;
}

/* Links */
.mg-howto a{
  color:#6fb3ff;
  text-decoration:none;
  font-weight:500;
}

.mg-howto a:hover{
  color:#9fd0ff;
  text-decoration:underline;
}

/* Toggle button (Learn more / Show less) */
.mg-howto-toggle{
  display:inline-block;
  margin-top:6px;
  font-size:13px;
  cursor:pointer;
  background:rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:8px;
  transition:background 0.15s ease;
}

.mg-howto-toggle:hover{
  background:rgba(255,255,255,0.12);
}

/* =========================
   LOBBY EXPAND / COLLAPSE
   ========================= */

.mg-howto-short,
.mg-howto-full{
  transition:opacity .22s ease, max-height .28s ease;
  overflow:hidden;
}

.mg-howto-short{
  opacity:1;
}

.mg-howto-full{
  opacity:0;
  max-height:0;
}

.mg-howto.expanded .mg-howto-short{
  opacity:0;
  max-height:0;
}

.mg-howto.expanded .mg-howto-full{
  opacity:1;
  max-height:2000px;
  margin-top:6px;
}

/* =========================
   IN-GAME RULES (TABBED PANEL)
   ========================= */

.mg-howto-card{
  margin-top:10px;
}

.mg-howto-collapsible-toggle{
  display:inline-block;
  color:#6fb3ff;
  font-weight:500;
  cursor:pointer;
  text-decoration:none;
}

.mg-howto-collapsible-toggle:hover{
  color:#9fd0ff;
  text-decoration:underline;
}

.mg-howto-collapsible-body{
  display:none;
  margin-top:10px;
}

.mg-howto-inline.expanded .mg-howto-collapsible-body{
  display:block;
}

.mg-howto-inline .mg-card{
  margin:0;
  box-shadow:none;
  background:transparent;
  border:none;
}

.mg-howto-inline .mg-card-head{
  display:none;
}

.mg-right-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.mg-right-tab{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:#cfcfcf;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  box-shadow:none;
  outline:none;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .08s ease;
}

.mg-right-tab:hover{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.16);
  color:#ffffff;
}

.mg-right-tab:active{
  transform:translateY(1px);
}

.mg-player-indicators{
  display:flex;
  align-items:center;
  gap:6px;
}

/* Die icon */
.mg-turn-die{
  font-size:16px;
  line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* Pulse the player color dot when active */
.mg-player.active .mg-dot{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 0 0 2px rgba(120,167,255,.18),
    0 0 12px rgba(120,167,255,.45);
  animation:mg-turn-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes mg-turn-dot-pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}

.mg-turn-die{
  font-size:16px;
  animation:mg-die-bounce 1.4s ease-in-out infinite;
}

@keyframes mg-die-bounce{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
  100%{ transform:translateY(0); }
}

.mg-right-tab:focus-visible{
  border-color:rgba(111,179,255,0.70);
  box-shadow:0 0 0 2px rgba(111,179,255,0.18);
}

.mg-right-tab.active{
  background:rgba(111,179,255,0.18);
  border-color:rgba(111,179,255,0.45);
  color:#ffffff;
}

.mg-right-tab.active:hover{
  background:rgba(111,179,255,0.24);
  border-color:rgba(111,179,255,0.55);
}

.mg-log-card .mg-card-body{
  max-height:420px;
  overflow-y:auto;
}

.mg-howto{
  max-height:420px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.mg-standings-table{
  display:grid;
  gap:6px;
}

.mg-standings-head,
.mg-standings-row{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 60px 70px;
  gap:10px;
  align-items:center;
}

.mg-standings-head{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  font-size:12px;
  color:var(--mg-muted);
  font-weight:700;
}

.mg-standings-row{
  padding:10px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:14px;
}

.mg-standings-row > div:nth-child(1),
.mg-standings-row > div:nth-child(3),
.mg-standings-row > div:nth-child(4){
  text-align:center;
}

.mg-entry-seat-dot{
  stroke:none;
  opacity:.9;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}


.mg-entry-seat-dot.green{ fill:#3fb06d; }
.mg-entry-seat-dot.blue{ fill:#4b88ff; }
.mg-entry-seat-dot.red{ fill:#d94f4f; }
.mg-entry-seat-dot.yellow{ fill:#d8b24a; }

.mg-entry-seat-dot.purple{ fill:#8a5bd6; }
.mg-entry-seat-dot.orange{ fill:#e68a3f; }
.mg-entry-seat-dot.teal{ fill:#2fa7a0; }
.mg-entry-seat-dot.pink{ fill:#e46aa8; }
.mg-entry-seat-dot.cyan{ fill:#39c6e6; }
.mg-entry-seat-dot.lime{ fill:#8bcf3f; }
.mg-entry-seat-dot.maroon{ fill:#7a2f3a; }
.mg-entry-seat-dot.navy{ fill:#2d4c8f; }
.mg-entry-seat-dot.gold{ fill:#c9a227; }
.mg-entry-seat-dot.brown{ fill:#7a5230; }
.mg-entry-seat-dot.white{ fill:#f2f2f2; stroke:#999; }
.mg-entry-seat-dot.black{ fill:#202020; }

.mg-log-dot{
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    0 1px 3px rgba(0,0,0,.35);
}

.mg-log-dot.red{ background:var(--mg-red-marble); }
.mg-log-dot.blue{ background:var(--mg-blue-marble); }
.mg-log-dot.green{ background:var(--mg-green-marble); }
.mg-log-dot.yellow{ background:var(--mg-yellow-marble); }

.mg-log-dot.purple { background:#8a5bd6; }
.mg-log-dot.orange { background:#e68a3f; }
.mg-log-dot.teal   { background:#2fa7a0; }
.mg-log-dot.pink   { background:#e46aa8; }
.mg-log-dot.cyan   { background:#39c6e6; }
.mg-log-dot.lime   { background:#8bcf3f; }
.mg-log-dot.maroon { background:#7a2f3a; }
.mg-log-dot.navy   { background:#2d4c8f; }
.mg-log-dot.gold   { background:#c9a227; }
.mg-log-dot.brown  { background:#7a5230; }
.mg-log-dot.white  { background:#f2f2f2; border:1px solid #bfc4cc; }
.mg-log-dot.black  { background:#202020; }

.mg-log-dot.spectator{
  background:#888;
}

.mg-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#2a3746,#1f2933);
  color:var(--mg-text);
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  transition:transform .12s ease, opacity .12s ease, border-color .12s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

.mg-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}

.mg-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.mg-btn.primary{
  background:linear-gradient(180deg,#4c79dc,#315bb5);
}

.mg-btn.good{
  background:linear-gradient(180deg,#3b9c6d,#2f7d58);
}

.mg-btn.warn{
  background:linear-gradient(180deg,#a85f5f,#874848);
}

.mg-btn.ghost{
  background:rgba(255,255,255,.04);
}

.mg-board-bottom-spacer{
  height:28px;
}

.mg-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--mg-line);
  background:rgba(255,255,255,.04);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  color:var(--mg-muted);
}

.mg-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.08) inset, 0 0 8px rgba(255,255,255,.15);
}

.mg-dot.red{background:var(--mg-red-marble)}
.mg-dot.blue{background:var(--mg-blue-marble)}
.mg-dot.green{background:var(--mg-green-marble)}
.mg-dot.yellow{background:var(--mg-yellow-marble)}

.mg-dot.purple{background:#8a5bd6}
.mg-dot.orange{background:#e68a3f}
.mg-dot.teal{background:#2fa7a0}
.mg-dot.pink{background:#e46aa8}
.mg-dot.cyan{background:#39c6e6}
.mg-dot.lime{background:#8bcf3f}
.mg-dot.maroon{background:#7a2f3a}
.mg-dot.navy{background:#2d4c8f}
.mg-dot.gold{background:#c9a227}
.mg-dot.brown{background:#7a5230}
.mg-dot.black{background:#202020}
.mg-dot.white{
  background:#f2f2f2;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(0,0,0,.18),
    0 0 8px rgba(255,255,255,.15);
}

.mg-board-wrap{
  position:relative;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.05), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.10), transparent 42%),
    linear-gradient(180deg, #1f5f39 0%, #184b2d 100%);
  border-radius:24px;
  padding:14px;
}

.mg-board-shell{
  position:relative;
  overflow:hidden;
  border-radius:50%;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  aspect-ratio:1 / 1;
/*
  box-shadow:
    0 16px 36px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.04);
*/
}

.mg-board-shell::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
    inset 0 2px 10px rgba(255,255,255,.06),
    inset 0 -10px 22px rgba(0,0,0,.12);
  z-index:2;
}

.mg-board-inner{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.06), transparent 28%),
    radial-gradient(circle at 60% 75%, rgba(0,0,0,.08), transparent 38%);
}

.mg-board-svg{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
}

.mg-hole{
  fill:#4a2e1a;
  stroke:rgba(255,255,255,.08);
  stroke-width:1px;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));
}

.mg-home-hole-green,
.mg-home-hole-blue,
.mg-home-hole-red,
.mg-home-hole-yellow,
.mg-home-hole-purple,
.mg-home-hole-orange,
.mg-home-hole-teal,
.mg-home-hole-pink,
.mg-home-hole-cyan,
.mg-home-hole-lime,
.mg-home-hole-maroon,
.mg-home-hole-navy,
.mg-home-hole-gold,
.mg-home-hole-brown,
.mg-home-hole-white,
.mg-home-hole-black {
  stroke-width:2px;
}

.mg-home-hole-green  { stroke:rgba(137,203,160,1); }
.mg-home-hole-blue   { stroke:rgba(140,178,255,1); }
.mg-home-hole-red    { stroke:rgba(242,43,81,1); }
.mg-home-hole-yellow { stroke:rgba(202,243,28,1); }

.mg-home-hole-purple { stroke:rgba(182,133,255,1); }
.mg-home-hole-orange { stroke:rgba(255,176,92,1); }
.mg-home-hole-teal   { stroke:rgba(94,214,205,1); }
.mg-home-hole-pink   { stroke:rgba(255,145,198,1); }
.mg-home-hole-cyan   { stroke:rgba(109,232,255,1); }
.mg-home-hole-lime   { stroke:rgba(177,232,92,1); }
.mg-home-hole-maroon { stroke:rgba(170,86,102,1); }
.mg-home-hole-navy   { stroke:rgba(104,136,214,1); }
.mg-home-hole-gold   { stroke:rgba(232,202,92,1); }
.mg-home-hole-brown  { stroke:rgba(168,120,84,1); }
.mg-home-hole-white  { stroke:rgba(245,245,245,1); }
.mg-home-hole-black  { stroke:rgba(90,90,90,1); }

.mg-hole.legal{
  stroke:rgba(255,255,255,.55);
  stroke-width:2.4;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.3));
}

.mg-path-line{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mg-home-line{
  fill:none;
  stroke:rgba(255,255,255,.06);
  stroke-width:8;
  stroke-linecap:round;
}

.mg-marble{
  cursor:pointer;
  transform-box:fill-box;
  transform-origin:center;
  pointer-events:auto;
  transition:transform .6s ease;
  touch-action: manipulation;
}

.mg-marble-tap-target{
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

.mg-marble.legal{
  opacity:1;
}

.mg-marble-core{
  stroke:rgba(255,255,255,.28);
  stroke-width:1.5px;
}

.mg-marble-gloss{
  fill:rgba(255,255,255,.35);
}

.mg-marble.legal .mg-marble-core{
  stroke:rgba(255,255,255,.7);
  stroke-width:2px;
  animation:mg-legal-glow 1.2s ease-in-out infinite;
}

.mg-marble.legal:hover .mg-marble-core{
  stroke:#ffffff;
  stroke-width:3px;
}

.mg-marble.legal:hover .mg-marble-gloss{
  opacity:1;
}

.mg-marble.selected{
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.28));
}

.mg-marble.selected .mg-marble-core{
  stroke:#ffffff;
  stroke-width:3px;
}

@keyframes mg-legal-glow{
  0%{stroke-opacity:.55}
  50%{stroke-opacity:1}
  100%{stroke-opacity:.55}
}

.mg-center-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(36%,250px);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(17,22,28,.88),rgba(25,33,43,.93));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  padding:14px;
  text-align:center;
  backdrop-filter:blur(8px);
}

.mg-board-reaction-anchor{
  pointer-events:none;
}

.mg-board-reaction-float{
  pointer-events:none;
  animation:mg-board-reaction-float 3.2s ease-out forwards;
  transform-box:fill-box;
  transform-origin:center;
}

.mg-reaction-section{
  margin-top:10px;
  width:100%;
  min-width:0;
}

.mg-reaction-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  margin-bottom:8px;
}

.mg-reaction-bar,
.mg-reaction-bar *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.mg-reaction-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  min-width:0;
}

.mg-reaction-btn{
  min-width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.14);
  cursor:pointer;
  font-size:22px;
  line-height:1;
  touch-action:manipulation;
  max-width:100%;
}

.mg-reaction-btn:hover{
  transform:translateY(-1px);
}

.mg-reaction-options{
  margin-top:10px;
  width:100%;
  min-width:0;
}

.mg-reaction-options-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(36px, 1fr));
  gap:8px;
  margin-top:8px;
  width:100%;
  min-width:0;
}

.mg-reaction-option{
  height:36px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
  font-size:20px;
  max-width:100%;
}

.mg-reaction-option.selected{
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}

.mg-board-reaction{
  pointer-events:none;
  animation:mg-board-reaction-float 3.2s ease-out forwards;
}

.mg-board-reaction-text{
  font-size:48px;
  paint-order:stroke;
  stroke:rgba(0,0,0,.28);
  stroke-width:3px;
}

@keyframes mg-board-reaction-float{
  0%{
    opacity:0;
    transform:translate(0px, 0px) scale(.7);
  }
  12%{
    opacity:1;
    transform:translate(0px, -10px) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(12px, -108px) scale(1.58);
  }
}

.mg-die{
  width:74px;
  height:74px;
  margin:10px auto 12px;
  border-radius:18px;
  background:linear-gradient(180deg,#f6f8fb,#d8e0ea);
  color:#15212c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 18px rgba(0,0,0,.22);
}

.mg-status-banner{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--mg-line);
  font-size:13px;
}

.mg-board-status{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.mg-center-flash{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(.94);
  z-index:3000;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(12,16,22,.94);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:16px 22px;
  font-size:24px;
  font-weight:700;
  letter-spacing:.15px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  max-width:min(90vw, 520px);
  text-align:center;
}

.mg-center-flash.show{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

.mg-center-flash-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  flex:0 0 18px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    0 2px 6px rgba(0,0,0,.3);
}

.mg-center-flash-dot.red{background:var(--mg-red-marble)}
.mg-center-flash-dot.blue{background:var(--mg-blue-marble)}
.mg-center-flash-dot.green{background:var(--mg-green-marble)}
.mg-center-flash-dot.yellow{background:var(--mg-yellow-marble)}

.mg-center-flash-text{
  line-height:1.2;
}

.mg-penalty-pop{
  position:absolute;
  width:28px;
  height:28px;
  border-radius:50%;
  transform:translate(-50%, -50%) scale(.8);
  z-index:25;
  pointer-events:none;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    0 4px 10px rgba(0,0,0,.28);
  animation:mg-penalty-pop .9s ease-out forwards;
}

.mg-penalty-pop.red{background:var(--mg-red-marble)}
.mg-penalty-pop.blue{background:var(--mg-blue-marble)}
.mg-penalty-pop.green{background:var(--mg-green-marble)}
.mg-penalty-pop.yellow{background:var(--mg-yellow-marble)}

@keyframes mg-penalty-pop{
  0%{
    opacity:1;
    transform:translate(-50%, -50%) scale(.8);
    filter:blur(0);
  }
  35%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.35);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -85%) scale(.25);
    filter:blur(4px);
  }
}

.mg-name-edit{
  border:none;
  background:none;
  cursor:pointer;
  font-size:14px;
  opacity:.6;
  padding:2px 4px;
  transition:opacity .15s ease;
}

.mg-name-edit:hover{
  opacity:1;
}

.mg-players{
  display:grid;
  gap:10px;
}

.mg-player{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.mg-player.active{
  border-color:rgba(120,167,255,.55);
  box-shadow:0 0 0 1px rgba(120,167,255,.18) inset;
  background:rgba(120,167,255,.08);
}

.mg-player-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.mg-player-name{
  font-weight:700;
  font-size:14px;
}

.mg-player-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.mg-name-input{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:14px;
  min-width:120px;
}

.mg-name-input:focus{
  outline:none;
  border-color:#5ea3ff;
}

.mg-name-btn{
  padding:7px 10px;
}

.mg-mini-marbles{
  display:flex;
  gap:6px;
  margin-top:8px;
}

.mg-mini-marble{
  width:13px;
  height:13px;
  border-radius:50%;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.25);
}

.mg-color-picker{
  display:grid;
  grid-template-columns:repeat(8, 24px);
  gap:8px;
  margin:10px 0 2px;
}

.mg-color-chip{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  padding:0;
}

.mg-color-chip.selected{
  border-color:rgba(255,255,255,.95);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18),
    0 0 12px rgba(255,255,255,.35),
    0 2px 6px rgba(0,0,0,.22);
  animation:mgColorPulse 1.4s ease-in-out infinite;
}

@keyframes mgColorPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.mg-color-chip:hover{
  transform:scale(1.08);
}

.mg-color-chip.taken{
  opacity:.28;
  cursor:not-allowed;
}

.mg-color-chip.green{background:#3fb06d}
.mg-color-chip.blue{background:#4b88ff}
.mg-color-chip.red{background:#d94f4f}
.mg-color-chip.yellow{background:#d8b24a}
.mg-color-chip.purple{background:#8a5bd6}
.mg-color-chip.orange{background:#e68a3f}
.mg-color-chip.teal{background:#2fa7a0}
.mg-color-chip.pink{background:#e46aa8}
.mg-color-chip.cyan{background:#39c6e6}
.mg-color-chip.lime{background:#8bcf3f}
.mg-color-chip.maroon{background:#7a2f3a}
.mg-color-chip.navy{background:#2d4c8f}
.mg-color-chip.gold{background:#c9a227}
.mg-color-chip.brown{background:#7a5230}
.mg-color-chip.white{background:#f2f2f2}
.mg-color-chip.black{background:#202020}

.mg-log{
  max-height:480px;
  overflow:auto;
  display:grid;
  gap:8px;
}

.mg-log-item{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  font-size:13px;
  color:var(--mg-muted);
}

.mg-game-list{
  display:grid;
  gap:10px;
}

.mg-game-row{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  display:grid;
  gap:8px;
}

.mg-empty{
  color:var(--mg-muted);
  font-size:14px;
}

.mg-toast-wrap{
  position:fixed;
  right:14px;
  bottom:14px;
  display:grid;
  gap:8px;
  z-index:1200;
}

.mg-toast{
  min-width:220px;
  max-width:340px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,#263240,#1b2430);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 36px rgba(0,0,0,.28);
  color:var(--mg-text);
}

.mg-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  color:var(--mg-muted);
  font-size:13px;
}

.mg-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
}

.mg-overlay[hidden]{
  display:none;
}

.mg-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,10,14,.72);
  backdrop-filter:blur(4px);
}

.mg-overlay-panel{
  position:absolute;
  inset:14px;
  border-radius:22px;
  overflow:auto;
  background:linear-gradient(180deg,#11161c,#18212b);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  padding:14px;
}

.mg-overlay-close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:3;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.mg-embed-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--mg-line);
}

.mg-embed-body{
  padding:12px;
}

.mg-embed-board{
  max-width:760px;
  margin:0 auto;
}

.mg-full-link{
  color:#cfe0ff;
  text-decoration:none;
}

.mg-full-link:hover{
  text-decoration:underline;
}

.mg-choice-marker{
  cursor:pointer;
  pointer-events:all;
}

.mg-choice-ring{
  fill:rgba(255,255,255,.10);
  stroke:rgba(255,255,255,.95);
  stroke-width:3px;
  pointer-events:all;
  animation:mg-choice-pulse 1s ease-in-out infinite;
}

.mg-choice-dot{
  fill:rgba(255,255,255,.98);
  pointer-events:all;
}

.mg-choice-marker:hover .mg-choice-ring{
  stroke:#ffffff;
  stroke-width:4px;
}

@keyframes mg-choice-pulse{
  0%{opacity:.7}
  50%{opacity:1}
  100%{opacity:.7}
}

.mg-primary-actions .mg-btn.primary{
  min-height:56px;
  padding:0 22px;
  font-size:1.1rem;
}

.mg-reaction-bar,
.mg-reaction-bar *{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.mg-reaction-btn{
  cursor:pointer;
  touch-action:manipulation;
}

.mg-marble-moving-overlay{
  pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.32));
}

.mg-roll-tumbler{
  position:absolute;
  top:22px;
  right:22px;
  width:92px;
  height:92px;
  z-index:22;
  pointer-events:none;
  overflow:visible;
  background:transparent;
}

.mg-roll-tumbler-shadow{
  position:absolute;
  left:50%;
  top:78%;
  width:54px;
  height:16px;
  border-radius:50%;
  background:rgba(0,0,0,.22);
  filter:blur(4px);
  transform:translateX(-50%);
  transform-origin:center;
}

.mg-roll-tumbler-die{
  position:absolute;
  inset:0;
  width:92px;
  height:92px;
  display:block;
  overflow:visible;
  background:transparent;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.30));
}

.mg-roll-tumbler-die rect{
  fill:#fff;
  stroke:#111;
  stroke-width:4px;
}

.mg-roll-tumbler-die circle{
  fill:#111;
}

.mg-roll-tumbler.green .mg-roll-tumbler-die rect{
  stroke:rgba(63,176,109,.95);
}

.mg-roll-tumbler.blue .mg-roll-tumbler-die rect{
  stroke:rgba(75,136,255,.95);
}

.mg-roll-tumbler.red .mg-roll-tumbler-die rect{
  stroke:rgba(217,79,79,.95);
}

.mg-roll-tumbler.yellow .mg-roll-tumbler-die rect{
  stroke:rgba(216,178,74,.95);
}

.mg-roll-tumbler.animate{
  animation:mg-roll-tumble 1.35s cubic-bezier(.25,.8,.25,1) forwards;
}

.mg-roll-tumbler.animate .mg-roll-tumbler-shadow{
  animation:mg-roll-shadow 1.35s ease-out forwards;
}

.mg-roll-tumbler.animate .mg-roll-tumbler-die{
  animation:mg-roll-die-tilt 1.35s ease-out forwards;
  transform-origin:50% 50%;
}

.mg-roll-tumbler.resting{
  transform:translate(var(--mg-roll-jx, 0px), var(--mg-roll-jy, 0px)) rotate(7deg);
}

.mg-roll-tumbler.resting .mg-roll-tumbler-shadow{
  opacity:.22;
}

.mg-roll-tumbler .mg-roll-tumbler-die{
  transform:rotate(var(--mg-roll-final-angle, 0deg));
  transition:transform .12s ease-out;
}

.mg-roll-tumbler.just-landed .mg-roll-tumbler-die{
  animation:mg-die-land-bounce .36s ease-out;
}

.mg-roll-tumbler.purple .mg-roll-tumbler-die rect{
  stroke:#8a5bd6;
}

.mg-roll-tumbler.orange .mg-roll-tumbler-die rect{
  stroke:#e68a3f;
}

.mg-roll-tumbler.teal .mg-roll-tumbler-die rect{
  stroke:#2fa7a0;
}

.mg-roll-tumbler.pink .mg-roll-tumbler-die rect{
  stroke:#e46aa8;
}

.mg-roll-tumbler.cyan .mg-roll-tumbler-die rect{
  stroke:#39c6e6;
}

.mg-roll-tumbler.lime .mg-roll-tumbler-die rect{
  stroke:#8bcf3f;
}

.mg-roll-tumbler.maroon .mg-roll-tumbler-die rect{
  stroke:#7a2f3a;
}

.mg-roll-tumbler.navy .mg-roll-tumbler-die rect{
  stroke:#2d4c8f;
}

.mg-roll-tumbler.gold .mg-roll-tumbler-die rect{
  stroke:#c9a227;
}

.mg-roll-tumbler.brown .mg-roll-tumbler-die rect{
  stroke:#7a5230;
}

.mg-roll-tumbler.white .mg-roll-tumbler-die rect{
  stroke:#cccccc; /* darker so it's visible on white die */
}

.mg-roll-tumbler.black .mg-roll-tumbler-die rect{
  stroke:#111111;
}

.mg-die-face{
  opacity:0;
}

.mg-die-final-face{
  opacity:1;
}

.mg-roll-tumbler.animate .mg-die-final-face{
  animation:mg-die-final-reveal 1.35s linear forwards;
}

@keyframes mg-die-final-reveal{
  0%{ opacity:0; }
  72%{ opacity:0; }
  73%{ opacity:1; }
  100%{ opacity:1; }
}

.mg-roll-tumbler.animate .mg-die-face{
  animation:mg-die-face-cycle 1.35s steps(1,end) forwards;
}

.mg-roll-tumbler.animate .mg-die-face.frame-0{ animation-delay:0.00s; }
.mg-roll-tumbler.animate .mg-die-face.frame-1{ animation-delay:0.12s; }
.mg-roll-tumbler.animate .mg-die-face.frame-2{ animation-delay:0.24s; }
.mg-roll-tumbler.animate .mg-die-face.frame-3{ animation-delay:0.36s; }
.mg-roll-tumbler.animate .mg-die-face.frame-4{ animation-delay:0.48s; }
.mg-roll-tumbler.animate .mg-die-face.frame-5{ animation-delay:0.62s; }
.mg-roll-tumbler.animate .mg-die-face.frame-6{ animation-delay:0.78s; }
.mg-roll-tumbler.animate .mg-die-face.frame-7{ animation-delay:0.92s; }
.mg-roll-tumbler.animate .mg-die-face.frame-8{ animation-delay:1.05s; }
.mg-roll-tumbler.animate .mg-die-face.frame-9{ animation-delay:1.18s; }

@keyframes mg-die-face-cycle{
  0%{ opacity:1; }
  10%{ opacity:1; }
  11%{ opacity:0; }
  100%{ opacity:0; }
}

@keyframes mg-die-land-bounce{
  0%   { transform:translateY(0) scale(1); }
  35%  { transform:translateY(3px) scale(.96); }
  65%  { transform:translateY(-2px) scale(1.02); }
  100% { transform:translateY(0) scale(1); }
}

@keyframes mg-die-shadow-bounce{
  0%   { transform:scale(1); opacity:.22; }
  35%  { transform:scale(1.15,.8); opacity:.28; }
  65%  { transform:scale(.95,1.05); opacity:.20; }
  100% { transform:scale(1); opacity:.22; }
}

.mg-roll-tumbler.just-landed .mg-roll-tumbler-shadow{
  animation:mg-die-shadow-bounce .36s ease-out;
}

@keyframes mg-roll-die-tilt{
  0%{
    transform:rotate(-24deg) scale(.96);
  }
  20%{
    transform:rotate(18deg) scale(1.02);
  }
  40%{
    transform:rotate(-14deg) scale(.98);
  }
  60%{
    transform:rotate(12deg) scale(1.03);
  }
  78%{
    transform:rotate(-8deg) scale(.99);
  }
  90%{
    transform:rotate(10deg) scale(1.01);
  }
  100%{
    transform:rotate(7deg) scale(1);
  }
}

@keyframes mg-roll-tumble{
  0%{
    opacity:0;
    transform:translate(calc(var(--mg-roll-jx, 0px) - 220px), calc(var(--mg-roll-jy, 0px) + 135px)) scale(.42) rotate(-18deg);
  }
  16%{
    opacity:1;
    transform:translate(calc(var(--mg-roll-jx, 0px) - 135px), calc(var(--mg-roll-jy, 0px) + 92px)) scale(.72) rotate(12deg);
  }
  34%{
    transform:translate(calc(var(--mg-roll-jx, 0px) - 72px), calc(var(--mg-roll-jy, 0px) + 48px)) scale(.94) rotate(-10deg);
  }
  56%{
    transform:translate(calc(var(--mg-roll-jx, 0px) - 26px), calc(var(--mg-roll-jy, 0px) + 20px)) scale(1.06) rotate(14deg);
  }
  76%{
    transform:translate(calc(var(--mg-roll-jx, 0px) + 8px), calc(var(--mg-roll-jy, 0px) + 8px)) scale(.98) rotate(-6deg);
  }
  88%{
    transform:translate(calc(var(--mg-roll-jx, 0px) - 4px), calc(var(--mg-roll-jy, 0px) - 2px)) scale(1.03) rotate(9deg);
  }
  100%{
    opacity:1;
    transform:translate(var(--mg-roll-jx, 0px), var(--mg-roll-jy, 0px)) scale(1) rotate(7deg);
  }
}

@keyframes mg-roll-shadow{
  0%{
    opacity:0;
    transform:translateX(-50%) scale(.35);
  }
  24%{
    opacity:.28;
    transform:translateX(-50%) scale(1.08);
  }
  82%{
    opacity:.22;
    transform:translateX(-50%) scale(.96);
  }
  100%{
    opacity:.22;
    transform:translateX(-50%) scale(1);
  }
}

/* =========================
   MEDIA QUERIES
   ========================= */

@media (min-width: 700px) and (max-width: 1200px){
  .marble-page{
    padding:8px;
  }

  .mg-shell.full{
    display:grid;
    grid-template-columns:minmax(260px, 310px) minmax(0, 1fr);
    gap:16px;
    align-items:start;
    max-width:none;
  }

  .mg-left-col{
    grid-column:1;
    order:1;
    display:grid;
    gap:16px;
    overflow:visible;
    min-width:0;
  }

  .mg-board-col{
    grid-column:2;
    order:2;
    width:100%;
    min-width:0;
  }

  .mg-right-col{
    grid-column:1 / span 2;
    order:3;
    display:grid;
    gap:16px;
    min-width:0;
  }

  .mg-shell.full > .mg-card,
  .mg-shell.full > .mg-stack,
  .mg-card,
  .mg-card-body{
    min-width:0;
    max-width:100%;
    width:100%;
  }

  .mg-board-col .mg-card-body{
    padding:8px;
    min-width:0;
  }

  .mg-board-wrap{
    padding:8px;
    border-radius:16px;
  }

  .mg-card-head{
    padding:10px 12px;
  }

  .mg-card-body{
    padding:12px;
  }

  .mg-title{
    font-size:18px;
  }

  .mg-log{
    max-height:none;
  }

  .mg-reaction-options-grid{
    grid-template-columns:repeat(6, 1fr);
  }

  .mg-reaction-btn{
    min-width:40px;
    height:40px;
  }

  .mg-center-flash{
    font-size:20px;
    padding:14px 16px;
    max-width:84vw;
  }

  .mg-board-bottom-spacer{
    height:24px;
  }

  .mg-center-flash-dot{
    width:16px;
    height:16px;
    flex-basis:16px;
  }

  .mg-roll-tumbler{
    width:78px;
    height:78px;
    top:16px;
    right:16px;
  }

  .mg-roll-tumbler-die{
    width:78px;
    height:78px;
  }
}

/*
Alternate 2-column layout for 800–1200:
Board full width on top, left/right columns underneath side-by-side.

@media (min-width: 800px) and (max-width: 1200px){
  .marble-page{
    padding:8px;
  }

  .mg-shell.full{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
    max-width:none;
  }

  .mg-board-col{
    grid-column:1 / span 2;
    order:1;
    width:100%;
    min-width:0;
  }

  .mg-left-col{
    grid-column:1;
    order:2;
    display:grid;
    gap:16px;
    min-width:0;
  }

  .mg-right-col{
    grid-column:2;
    order:3;
    display:grid;
    gap:16px;
    min-width:0;
  }

  .mg-shell.full > .mg-card,
  .mg-shell.full > .mg-stack,
  .mg-card,
  .mg-card-body{
    min-width:0;
    max-width:100%;
    width:100%;
  }

  .mg-board-col .mg-card-body{
    padding:8px;
    min-width:0;
  }

  .mg-board-wrap{
    padding:8px;
    border-radius:16px;
  }
}
*/

@media (max-width: 699px){
  .marble-page{
    padding:2px;
  }

  .mg-shell.full{
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:none;
  }

  .mg-shell.full > .mg-card,
  .mg-shell.full > .mg-stack{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .mg-board-col{
    order:1;
    width:100%;
  }

  .mg-board-col .mg-card-body{
    padding:6px;
    min-width:0;
  }

  .mg-board-wrap{
    padding:6px;
    border-radius:16px;
  }

  .mg-left-col{
    order:2;
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:visible;
  }

  .mg-right-col{
    order:3;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .mg-board-wrap{
    padding: 0;
  }

  .mg-title-card{ order:1; }
  .mg-tools-card{ order:2; }
  .mg-players-card{ order:3; }
  .mg-links-card{ order:4; }
  .mg-log-card{ order:5; }

  .mg-card,
  .mg-card-body{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .mg-card-head{
    padding:10px 12px;
  }

  .mg-card-body{
    padding:12px;
  }

  .mg-title{
    font-size:18px;
  }

  .mg-primary-actions{
    gap:12px;
    min-width:0;
  }

  .mg-primary-actions .mg-btn{
    min-height:54px;
  }

  .mg-primary-actions .mg-btn.primary{
    min-width:110px;
    min-height:56px;
    font-size:1.15rem;
  }

  .mg-secondary-actions{
    margin-top:0;
  }

  .mg-log{
    max-height:none;
  }

  .mg-reaction-options-grid{
    grid-template-columns:repeat(6, 1fr);
  }

  .mg-reaction-btn{
    min-width:40px;
    height:40px;
  }

  .mg-choice-ring{
    stroke-width:4px;
  }

  .mg-center-flash{
    font-size:20px;
    padding:14px 16px;
    max-width:84vw;
  }

  .mg-board-bottom-spacer{
    height:24px;
  }

  .mg-center-flash-dot{
    width:16px;
    height:16px;
    flex-basis:16px;
  }

  .mg-roll-tumbler{
    width:78px;
    height:78px;
    top:16px;
    right:16px;
  }

  .mg-roll-tumbler-die{
    width:78px;
    height:78px;
  }

  .marble-page{
    padding:0;
  }

  .mg-board-col .mg-card{
    border-radius:0;
    border-left:0;
    border-right:0;
  }

  .mg-board-col .mg-card-body{
    padding:0;
  }

  .mg-board-wrap{
    padding:0;
    border-radius:0;
  }

  .mg-board-shell{
    width:100vw;
    max-width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
    border-radius:0;
  }

  .mg-board-shell::after{
    inset:0;
  }

  .mg-board-bottom-spacer{
    height:0;
  }
  .mg-board-svg{

    transform:scale(1.06);

    transform-origin:center;

  }

}