#gcg-game-root{
  --bg:#07130f;
  --bg-2:#0f201a;
  --panel:rgba(11,24,20,.82);
  --panel-2:rgba(17,32,27,.88);
  --text:#f6edd6;
  --muted:#b8baab;
  --accent:#e8c56d;
  --line:rgba(255,255,255,.09);
  --success:#6fe3b0;
  --danger:#ff8e85;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#gcg-game-root *{box-sizing:border-box;}
#gcg-game-root button,#gcg-game-root select{font:inherit;}
#gcg-game-root .mdt-shell{position:relative; overflow:hidden; border-radius:28px; background:radial-gradient(circle at top, rgba(235,197,109,.18), transparent 28%), linear-gradient(180deg, rgba(6,16,13,.98), rgba(6,16,13,.94)); border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 90px rgba(0,0,0,.35); padding:22px;}
#gcg-game-root .mdt-shell.theme-jade{--accent:#e8c56d; --accent-2:#39d8a2;}
#gcg-game-root .mdt-shell.theme-crimson{--accent:#ffcf72; --accent-2:#ff867d;}
#gcg-game-root .mdt-shell.theme-azure{--accent:#8fe0ff; --accent-2:#72a9ff;}
#gcg-game-root .mdt-shell::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 0 25%, rgba(255,255,255,.03) 50%, transparent 75% 100%); mix-blend-mode:screen;}
#gcg-game-root .mdt-hero{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:8px 6px 18px;}
#gcg-game-root .mdt-kicker{display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:var(--accent); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;}
#gcg-game-root .mdt-hero h1{margin:0; font-size:clamp(28px,4vw,42px); line-height:1.05; font-weight:800;}
#gcg-game-root .mdt-hero p{margin:10px 0 0; max-width:760px; color:var(--muted); font-size:15px; line-height:1.55;}
#gcg-game-root .mdt-hero-badges{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
#gcg-game-root .mdt-hero-badges span{padding:10px 13px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.1); color:#f7f1da; font-size:13px; font-weight:600; white-space:nowrap;}
#gcg-game-root .mdt-topbar{display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px;}
#gcg-game-root .mdt-pill-group, #gcg-game-root .mdt-controls-inline{display:flex; gap:10px; flex-wrap:wrap;}
#gcg-game-root .mdt-mode-btn, #gcg-game-root .mdt-ghost, #gcg-game-root .mdt-action, #gcg-game-root .mdt-modal-actions button{appearance:none; border:none; cursor:pointer; border-radius:14px; padding:11px 14px; color:var(--text); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition:.2s ease; box-shadow:0 8px 18px rgba(0,0,0,.18);}
#gcg-game-root .mdt-mode-btn:hover, #gcg-game-root .mdt-ghost:hover, #gcg-game-root .mdt-action:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.09);}
#gcg-game-root .mdt-mode-btn.active, #gcg-game-root .mdt-action.primary, #gcg-game-root .mdt-modal-actions .primary{background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #a26f17)); color:#221609; border-color:transparent; font-weight:800;}
#gcg-game-root .mdt-action.accent{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 85%, #fff 10%), color-mix(in srgb, var(--accent-2) 70%, #0d4636)); color:#08150f; font-weight:800; border-color:transparent;}
#gcg-game-root .mdt-main{display:grid; grid-template-columns:minmax(260px,300px) minmax(0,1fr); gap:18px; align-items:start;}
#gcg-game-root .mdt-sidebar{display:flex; flex-direction:column; gap:14px;}
#gcg-game-root .mdt-panel{background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:16px; backdrop-filter:blur(14px);}
#gcg-game-root .mdt-panel-title{font-weight:800; font-size:15px; color:#fff3d1; margin-bottom:14px;}
#gcg-game-root .mdt-stat-grid, #gcg-game-root .mdt-legacy-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
#gcg-game-root .mdt-stat-grid div, #gcg-game-root .mdt-legacy-grid div{padding:12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);}
#gcg-game-root .mdt-stat-grid span, #gcg-game-root .mdt-legacy-grid span{display:block; color:var(--muted); font-size:12px; margin-bottom:6px;}
#gcg-game-root .mdt-stat-grid strong, #gcg-game-root .mdt-legacy-grid strong{font-size:20px; line-height:1; display:block; color:#fff7e2;}
#gcg-game-root .mdt-progress-wrap{margin-top:14px;}
#gcg-game-root .mdt-progress-label{display:flex; justify-content:space-between; gap:10px; color:var(--muted); margin-bottom:8px; font-size:12px;}
#gcg-game-root .mdt-progress{height:12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); overflow:hidden;}
#gcg-game-root .mdt-progress i{display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), color-mix(in srgb, var(--accent-2) 88%, #fff 12%)); box-shadow:0 0 18px rgba(255,220,122,.34);}
#gcg-game-root .mdt-actions{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
#gcg-game-root .mdt-field{display:grid; gap:8px; color:var(--muted); font-size:13px; margin-bottom:12px;}
#gcg-game-root .mdt-field select{padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); color:var(--text);}
#gcg-game-root .mdt-toggle{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px;}
#gcg-game-root .mdt-board-panel{min-width:0; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:16px; overflow:hidden;}
#gcg-game-root .mdt-board-top{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px;}
#gcg-game-root .mdt-message{padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); color:#fff6dc; font-weight:600;}
#gcg-game-root .mdt-board-legend{font-size:12px; color:var(--muted); max-width:380px; line-height:1.45;}
#gcg-game-root .mdt-board-scroller{overflow:auto; border-radius:24px; background:radial-gradient(circle at top center, rgba(255,231,164,.15), transparent 35%), linear-gradient(180deg, rgba(5,20,15,.98), rgba(7,23,18,.96)); padding:16px; border:1px solid rgba(255,255,255,.06); min-height:560px;}
#gcg-game-root .mdt-board-wrap{min-width:max-content;}
#gcg-game-root .mdt-board{position:relative; margin:0 auto; filter:drop-shadow(0 30px 30px rgba(0,0,0,.26));}
#gcg-game-root .mdt-tile{position:absolute; padding:0; background:transparent; border:none; cursor:pointer;}
#gcg-game-root .mdt-tile.removed{opacity:0; pointer-events:none; transform:scale(.88);}
#gcg-game-root .mdt-tile .tile-depth{position:absolute; inset:8px -8px -8px 8px; border-radius:12px; background:linear-gradient(160deg, rgba(28,16,6,.75), rgba(7,10,9,.78)); box-shadow:inset -2px -2px 10px rgba(255,255,255,.04), 10px 14px 22px rgba(0,0,0,.35);}
#gcg-game-root .mdt-tile .tile-surface{position:absolute; inset:0; border-radius:12px; background:linear-gradient(180deg, #fcf8ef 0%, #f6ebd4 45%, #efddbb 100%); border:2px solid rgba(114,84,40,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.04); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;}
#gcg-game-root .mdt-tile.free .tile-surface{box-shadow:0 0 0 2px rgba(255,240,170,.08), 0 14px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.75);}
#gcg-game-root .mdt-tile.free:hover .tile-surface{transform:translateY(-2px); box-shadow:0 0 0 2px rgba(255,240,170,.2), 0 18px 24px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.75);}
#gcg-game-root .mdt-tile.blocked .tile-surface{filter:saturate(.6) brightness(.82);}
#gcg-game-root .mdt-tile.selected .tile-surface{outline:3px solid var(--accent); outline-offset:2px; transform:translateY(-2px) scale(1.03);}
#gcg-game-root .tile-corner{position:absolute; font-size:11px; font-weight:800; letter-spacing:.02em;}
#gcg-game-root .top-left{top:8px; left:9px;}
#gcg-game-root .bottom-right{right:9px; bottom:8px;}
#gcg-game-root .tile-symbol{font-size:28px; font-weight:900; line-height:1;}
#gcg-game-root .tile-label{position:absolute; left:10px; right:10px; bottom:26px; text-transform:capitalize; font-size:10px; font-weight:700; letter-spacing:.08em; color:rgba(32,22,9,.58);}
#gcg-game-root .accent-emerald .tile-corner, #gcg-game-root .accent-emerald .tile-symbol{color:#1e8c66;}
#gcg-game-root .accent-ruby .tile-corner, #gcg-game-root .accent-ruby .tile-symbol{color:#b23d42;}
#gcg-game-root .accent-amber .tile-corner, #gcg-game-root .accent-amber .tile-symbol{color:#9a6418;}
#gcg-game-root .accent-sapphire .tile-corner, #gcg-game-root .accent-sapphire .tile-symbol{color:#2f5db6;}
#gcg-game-root .accent-silver .tile-corner, #gcg-game-root .accent-silver .tile-symbol{color:#626262;}
#gcg-game-root .accent-pink .tile-corner, #gcg-game-root .accent-pink .tile-symbol{color:#b33d87;}
#gcg-game-root .accent-teal .tile-corner, #gcg-game-root .accent-teal .tile-symbol{color:#257380;}
#gcg-game-root .mdt-overlay{position:absolute; inset:0; display:grid; place-items:center; padding:24px; background:rgba(4,11,9,.72); backdrop-filter:blur(12px); z-index:50;}
#gcg-game-root .mdt-overlay.hidden{display:none;}
#gcg-game-root .mdt-modal{width:min(100%,480px); border-radius:28px; background:linear-gradient(180deg, rgba(15,27,23,.98), rgba(9,20,17,.96)); border:1px solid rgba(255,255,255,.08); padding:24px; box-shadow:0 30px 80px rgba(0,0,0,.42);}
#gcg-game-root .mdt-modal-kicker{display:inline-flex; margin-bottom:10px; padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
#gcg-game-root .mdt-modal h2{margin:0 0 10px; font-size:30px;}
#gcg-game-root .mdt-modal p{margin:0 0 16px; color:var(--muted); line-height:1.55;}
#gcg-game-root .mdt-modal-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px;}
#gcg-game-root .mdt-modal-stats div{padding:12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);}
#gcg-game-root .mdt-modal-stats span{display:block; color:var(--muted); font-size:12px; margin-bottom:6px;}
#gcg-game-root .mdt-modal-stats strong{display:block; font-size:18px; color:#fff6e3;}
#gcg-game-root .mdt-modal-actions{display:flex; gap:12px; flex-wrap:wrap;}
#gcg-game-root .compact .mdt-board-scroller{min-height:500px;}

@media (max-width: 1100px){
  #gcg-game-root .mdt-main{grid-template-columns:1fr;}
  #gcg-game-root .mdt-sidebar{order:2;}
  #gcg-game-root .mdt-board-panel{order:1;}
}
@media (max-width: 780px){
  #gcg-game-root .mdt-shell{padding:16px; border-radius:22px;}
  #gcg-game-root .mdt-hero, #gcg-game-root .mdt-topbar, #gcg-game-root .mdt-board-top{flex-direction:column; align-items:stretch;}
  #gcg-game-root .mdt-hero-badges{justify-content:flex-start;}
  #gcg-game-root .mdt-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  #gcg-game-root .mdt-modal-stats{grid-template-columns:1fr;}
}
@media (max-width: 560px){
  #gcg-game-root .mdt-stat-grid, #gcg-game-root .mdt-legacy-grid, #gcg-game-root .mdt-actions{grid-template-columns:1fr 1fr;}
  #gcg-game-root .mdt-mode-btn, #gcg-game-root .mdt-ghost, #gcg-game-root .mdt-action{padding:10px 12px; font-size:14px;}
  #gcg-game-root .mdt-board-scroller{padding:10px; min-height:460px;}
  #gcg-game-root .mdt-hero p{font-size:14px;}
}