.game-shell{
  --game-accent:#8b5cf6;
  --game-accent-2:#22d3ee;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  padding-top:30px;
}

.game-shell-heading{grid-column:1/-1}
.game-shell-heading>.eyebrow{display:inline-flex;margin:0 0 14px;color:#95a3ba;transition:color .16s ease}
.game-shell-heading>.eyebrow:hover{color:#fff}

.game-hero-panel{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:clamp(20px,3.4vw,32px);
  border:1px solid color-mix(in srgb,var(--game-accent) 22%,#ffffff12);
  border-radius:26px;
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--game-accent) 18%,transparent),transparent 28rem),
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--game-accent-2) 13%,transparent),transparent 24rem),
    linear-gradient(145deg,#111927,#0b101a 76%);
  box-shadow:0 20px 60px #0005,inset 0 1px #ffffff0c;
}

.game-symbol{
  width:76px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--game-accent) 38%,#ffffff18);
  border-radius:21px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 18%,#111827),color-mix(in srgb,var(--game-accent-2) 10%,#101827));
  color:#f8fbff;
  font:900 1.08rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 14px 32px #0004,inset 0 1px #ffffff18;
}

.game-hero-copy{min-width:0}
.game-hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.game-hero-meta .category{margin:0;color:var(--game-accent-2)}
.game-badge{padding:5px 9px;border:1px solid #ffffff16;border-radius:999px;background:#09111dcc;color:#b8c4d7;font-size:.7rem;font-weight:800}
.game-hero-copy h1{margin:0 0 8px;font-size:clamp(2.7rem,5.5vw,4.7rem);line-height:.95;letter-spacing:-.055em}
.game-hero-copy>p{margin:0;max-width:760px;color:#aebbd0;line-height:1.6;font-size:clamp(.95rem,1.6vw,1.08rem)}
.game-hero-panel>.pill{align-self:start;background:#07101aaa}

.game-quick-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.game-quick-facts span{padding:6px 9px;border:1px solid #ffffff12;border-radius:999px;background:#070f19a6;color:#b9c6d8;font-size:.72rem;font-weight:750}

.game-play-card{
  min-height:640px;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--game-accent) 18%,#ffffff13);
  background:linear-gradient(160deg,#111827,#0a0f18 74%);
  box-shadow:0 22px 65px #0005;
}

.game-play-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid #ffffff10;background:#0a1019d9}
.play-session{display:flex;flex-direction:column;gap:2px;min-width:0}
.play-session strong{font-size:.95rem}
.play-session #engine-label{font-size:.68rem;color:#6d7a91}
.session-kicker{color:var(--game-accent-2);font-size:.62rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.game-help-trigger{white-space:nowrap}

.game-controlbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:11px 18px;border-bottom:1px solid #ffffff0c;background:#0d1420}
.game-controlbar[hidden]{display:none!important}
.game-options,.game-actions{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.game-options:empty,.game-actions:empty{display:none}
.game-actions{justify-content:flex-end}

.game-control-group{display:flex;align-items:flex-end;gap:7px;flex-wrap:wrap}
.game-control-group-label,.game-control-label{display:block;color:#77869d;font-size:.62rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.game-control{display:grid;gap:5px}
.game-control--compact{display:flex;align-items:center;gap:7px}
.game-control--compact .game-control-label{font-size:.66rem}

.game-select,.game-action,.game-segmented-option{
  min-height:38px;
  border:1px solid #334158;
  border-radius:11px;
  background:#151f30;
  color:#eef4fc;
  font:750 .78rem/1 system-ui,sans-serif;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease;
}
.game-select{padding:0 34px 0 11px;color-scheme:dark}
.game-action{padding:0 12px}
.game-action:hover:not(:disabled),.game-segmented-option:hover:not(:disabled){transform:translateY(-1px);background:#1a293d;border-color:#526982}
.game-select:focus-visible,.game-action:focus-visible,.game-segmented-option:focus-visible{outline:3px solid color-mix(in srgb,var(--game-accent-2) 65%,white);outline-offset:2px}
.game-action--primary{border-color:color-mix(in srgb,var(--game-accent) 48%,#475569);background:linear-gradient(135deg,color-mix(in srgb,var(--game-accent) 48%,#172033),color-mix(in srgb,var(--game-accent-2) 22%,#172033));color:#fff}
.game-action--danger{border-color:#713648;background:#331923;color:#fecdd3}
.game-action--toggle.is-active{border-color:color-mix(in srgb,var(--game-accent-2) 60%,#475569);background:color-mix(in srgb,var(--game-accent-2) 18%,#132133);color:#dffbff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--game-accent-2) 25%,transparent)}
.game-action:disabled,.game-segmented-option:disabled{opacity:.4;cursor:default}

.game-segmented-control{gap:6px}
.game-segmented{display:flex;gap:4px;padding:3px;border:1px solid #2b374b;border-radius:12px;background:#0b121d}
.game-segmented-option{min-height:32px;padding:0 10px;border-color:transparent;background:transparent;color:#8897ad}
.game-segmented-option.is-active{background:#1d2a40;border-color:#43536b;color:#fff}

.game-board-tools{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(68px,1fr));
  gap:8px;
}
.game-board-tool{
  min-height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px 6px;
  border:1px solid #2f4058;
  border-radius:13px;
  background:#111c2b;
  color:#dce8f6;
  cursor:pointer;
  transition:transform .13s ease,background .13s ease,border-color .13s ease,box-shadow .13s ease;
}
.game-board-tool:hover:not(:disabled){transform:translateY(-1px);background:#17283b;border-color:#4f6885}
.game-board-tool:focus-visible{outline:3px solid color-mix(in srgb,var(--game-accent-2) 65%,white);outline-offset:2px}
.game-board-tool:disabled{opacity:.34;cursor:default}
.game-board-tool-icon{font:850 1.18rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#d9edff}
.game-board-tool-label{font-size:.66rem;font-weight:800;color:#899ab0}
.game-board-tool--toggle.is-active{border-color:color-mix(in srgb,var(--game-accent-2) 62%,#475569);background:color-mix(in srgb,var(--game-accent-2) 16%,#102033);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--game-accent-2) 22%,transparent)}
.game-board-tool--toggle.is-active .game-board-tool-icon,.game-board-tool--toggle.is-active .game-board-tool-label{color:#dffaff}
.game-board-tool--primary{border-color:color-mix(in srgb,var(--game-accent) 45%,#475569);background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 30%,#132033),color-mix(in srgb,var(--game-accent-2) 12%,#132033))}

.game-board-actions{
  width:min(760px,calc(100% - 36px));
  margin:0 auto 18px;
  padding:12px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:8px;
  border:1px solid #ffffff0e;
  border-radius:17px;
  background:linear-gradient(145deg,#0d1623,#090f18);
  box-shadow:0 12px 30px #0003,inset 0 1px #ffffff08;
}
.game-board-actions:empty,.game-board-actions[hidden]{display:none!important}
.game-board-actions>.game-board-tools{grid-column:1/-1}
.game-board-actions>.game-action,
.game-board-actions>.tool-button,
.game-board-actions>.game-board-tool{width:100%;min-height:56px;margin:0}
.game-board-actions>.game-action.game-board-tool,
.game-board-actions>.tool-button.game-board-tool{padding:7px 9px}
.game-board-actions>.game-action--primary.game-board-tool{border-color:color-mix(in srgb,var(--game-accent) 48%,#475569);background:linear-gradient(145deg,color-mix(in srgb,var(--game-accent) 30%,#132033),color-mix(in srgb,var(--game-accent-2) 12%,#132033))}

html[data-theme="light"] .game-board-actions{
  border-color:#d9e1ec;
  background:linear-gradient(145deg,#fff,#f3f6fa);
  box-shadow:0 12px 28px #25324a12,inset 0 1px #fff;
}

.game-shell .game-root{min-height:500px;padding:22px;overflow:auto}
.game-status-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;border-top:1px solid #ffffff0d;background:#080d15}
.game-status-wrap .game-status{flex:1;min-height:0;border-top:0}
.status-hint{padding-right:18px;color:#536178;font-size:.66rem;white-space:nowrap}

.game-guide-card{
  height:max-content;
  padding:24px;
  position:sticky;
  top:94px;
  border-color:#ffffff12;
  background:linear-gradient(155deg,#121928,#0b111b);
  box-shadow:0 18px 54px #0004;
}
.rules-kicker{margin:0 0 6px;color:var(--game-accent-2);font-size:.64rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.game-guide-card h2{margin:0 0 18px;font-size:1.45rem;letter-spacing:-.03em}
.game-guide-card ol{list-style:none;counter-reset:game-rules;padding:0;margin:0}
.game-guide-card ol li{counter-increment:game-rules;position:relative;padding-left:39px;color:#a7b4c8;line-height:1.58;font-size:.9rem}
.game-guide-card ol li::before{content:counter(game-rules);position:absolute;left:0;top:-2px;width:27px;height:27px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--game-accent-2) 30%,#ffffff16);border-radius:9px;background:#101a28;color:#e8fbff;font-size:.7rem;font-weight:900}
.game-guide-card ol li+li{margin-top:16px}

.game-tips{margin-top:22px;padding:15px;border:1px solid #ffffff0e;border-radius:15px;background:#090f19}
.game-tips h3{margin:0 0 10px;font-size:.8rem}
.game-tips ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.game-tips li{position:relative;padding-left:16px;color:#8493a9;font-size:.76rem;line-height:1.48}
.game-tips li::before{content:'•';position:absolute;left:0;color:var(--game-accent-2);font-weight:900}
.game-guide-links{display:grid;gap:8px;margin-top:18px}
.game-guide-links .button{display:block;margin:0;padding:10px 12px;text-align:center;font-size:.76rem;white-space:normal}
.game-guide-card .local-note{margin-bottom:0}

.related-games{width:min(1180px,calc(100% - 36px));margin:0 auto 100px;padding-top:2px}
.related-games-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 16px}
.related-games-head span{color:var(--game-accent-2,#22d3ee);font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.related-games-head h2{margin:5px 0 0;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.045em}
.related-games-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.related-game-card{display:grid;gap:8px;min-height:150px;padding:18px;border:1px solid #ffffff10;border-radius:17px;background:linear-gradient(145deg,#111827,#0b1019);transition:transform .16s ease,border-color .16s ease}
.related-game-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--game-accent-2,#22d3ee) 38%,#ffffff18)}
.related-game-card .category{margin:0;color:#8090a8;font-size:.62rem}
.related-game-card strong{font-size:1rem}
.related-game-card p{margin:0;color:#7f8da2;font-size:.78rem;line-height:1.45}
.related-game-card .related-arrow{margin-top:auto;color:var(--game-accent-2,#22d3ee);font-size:.75rem;font-weight:800}

.game-onboarding{width:min(620px,calc(100% - 28px));max-height:min(760px,calc(100vh - 28px));padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--game-accent-2) 30%,#ffffff18);border-radius:24px;background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--game-accent) 18%,transparent),transparent 19rem),radial-gradient(circle at 100% 0,color-mix(in srgb,var(--game-accent-2) 15%,transparent),transparent 20rem),#0b111c;color:#f7fbff;box-shadow:0 40px 120px #000b}
.game-onboarding::backdrop{background:#02050bc9;backdrop-filter:blur(9px)}
.onboarding-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid #ffffff18;border-radius:11px;background:#111a29;color:#b7c3d6;font-size:1.3rem;cursor:pointer}
.onboarding-brand{display:flex;align-items:center;gap:9px;padding:17px 62px 17px 22px;border-bottom:1px solid #ffffff0e;color:#8090a8;font-size:.7rem}
.onboarding-brand span{padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--game-accent-2) 10%,transparent);color:#cbf7ff;font-weight:800}
.onboarding-brand strong{color:#eef5ff}
.onboarding-intro{padding:27px 28px 12px}
.onboarding-intro .category{margin:0;color:var(--game-accent-2)}
.onboarding-intro h2{margin:.22em 0 .28em;font-size:clamp(2rem,5vw,3rem);line-height:.98;letter-spacing:-.05em}
.onboarding-intro>p:last-child{margin:0;color:#98a7bc;line-height:1.6}
.onboarding-progress{display:flex;gap:7px;padding:10px 28px 6px}
.onboarding-progress span{width:25px;height:4px;border-radius:999px;background:#263248}
.onboarding-progress span.active{width:46px;background:linear-gradient(90deg,var(--game-accent),var(--game-accent-2))}
.onboarding-steps{min-height:185px;padding:12px 28px 4px}
.onboarding-step[hidden]{display:none}
.onboarding-step-index{color:var(--game-accent-2);font-size:.67rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.onboarding-step h3{margin:9px 0 8px;font-size:1.32rem;letter-spacing:-.03em}
.onboarding-step p{margin:0;color:#aebbd0;line-height:1.68}
.onboarding-actions{display:flex;justify-content:space-between;gap:10px;padding:19px 28px 27px}
.onboarding-actions .button{min-width:116px;text-align:center}
.onboarding-actions .button.primary{background:linear-gradient(135deg,var(--game-accent),var(--game-accent-2));color:#071018;border:0}
.onboarding-actions .button:disabled{opacity:.35;cursor:default;transform:none}

@media(max-width:920px){
  .game-shell{grid-template-columns:1fr}
  .game-guide-card{position:static}
  .related-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){
  .game-shell{width:min(100% - 20px,1180px);padding-top:18px;gap:14px}
  .game-hero-panel{grid-template-columns:auto 1fr;padding:18px;border-radius:20px}
  .game-symbol{width:58px;border-radius:16px}
  .game-hero-copy h1{font-size:2.8rem}
  .game-hero-panel>.pill{display:none}
  .game-play-header{align-items:flex-start}
  .game-controlbar{align-items:stretch;flex-direction:column}
  .game-options,.game-actions{width:100%;justify-content:flex-start}
  .game-shell .game-root{padding:12px 8px 16px;min-height:0}
  .status-hint{display:none}
  .game-guide-card{padding:20px}
  .related-games{width:min(100% - 20px,1180px);margin-bottom:70px}
  .related-games-grid{grid-template-columns:1fr}
  .onboarding-intro,.onboarding-progress,.onboarding-steps,.onboarding-actions{padding-left:22px;padding-right:22px}
  .game-board-tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .game-board-tool{min-height:54px;border-radius:11px}
  .game-board-actions{width:calc(100% - 16px);margin-bottom:12px;padding:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .game-board-actions>.game-board-tools{grid-column:1/-1}
}

@media(max-width:430px){
  .game-hero-panel{grid-template-columns:1fr}
  .game-symbol{display:none}
  .game-options,.game-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .game-control{min-width:0}
  .game-select,.game-action{width:100%}
  .game-control-group{display:contents}
}

@media(prefers-reduced-motion:reduce){
  .game-action,.game-segmented-option,.related-game-card,.game-board-tool{transition:none}
}