.game-topbar { justify-content: space-between; }
.back-link { display: inline-flex; align-items: center; gap: 9px; color: #aeb3bf; font-size: 11px; font-weight: 600; }
.back-link:hover { color: white; }
.back-link svg { width: 16px; height: 16px; }
.game-top-tag { display: inline-flex; align-items: center; gap: 8px; color: #a3a9b5; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.game-top-tag .live-dot { width: 5px; height: 5px; background: #be8bff; box-shadow: 0 0 9px rgba(190,139,255,.5); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 254px; gap: 22px; max-width: 1340px; padding: 30px 38px 0; margin: 0 auto; }
.game-content { min-width: 0; }
.game-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.breadcrumb { display: flex; gap: 8px; margin-bottom: 19px; color: #777e8c; font-size: 9px; }
.breadcrumb a:hover { color: white; }
.game-intro .section-kicker { color: #aa85ca; }
.game-intro h1 { margin: 5px 0 4px; font: 700 clamp(29px, 3.7vw, 43px)/1.08 var(--font-display); letter-spacing: -.05em; }
.game-intro h1 span { color: #ff70a6; }
.game-intro p { max-width: 500px; margin: 0; color: #969daa; font-size: 11px; line-height: 1.6; }
.game-intro-mark { display: grid; flex: 0 0 auto; width: 62px; height: 62px; place-items: center; color: #f681b0; background: radial-gradient(circle, rgba(247,103,165,.23), rgba(164,107,255,.08) 68%, transparent 69%); border: 1px solid rgba(242,121,176,.15); border-radius: 50%; font-size: 28px; }
.play-area { overflow: hidden; padding: 17px; background: linear-gradient(145deg, #141721, #101219); border: 1px solid var(--line); border-radius: 12px; }
.difficulty-row { display: flex; align-items: center; gap: 10px; padding: 0 0 13px; }
.difficulty-row label { color: #838a98; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.difficulty-row select { min-height: 30px; padding: 0 27px 0 9px; color: #e7e2ee; color-scheme: dark; background: #1a1d28; border: 1px solid var(--line-strong); border-radius: 5px; font: 600 9px var(--font-body); }
.difficulty-row select:focus-visible { outline: 2px solid #bc92d8; outline-offset: 2px; }
.difficulty-row select:disabled { opacity: .55; }
.difficulty-hint { color: #858b99; font-size: 9px; }
.board-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.board-topline > div { display: flex; flex-direction: column; gap: 5px; }
.board-label { font-size: 8px; }
.board-status { color: #a0a6b2; font-size: 10px; }
.round-chip { padding: 6px 8px; color: #d2b4ed; background: rgba(164,107,255,.11); border: 1px solid rgba(164,107,255,.16); border-radius: 5px; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.board-wrap { position: relative; display: grid; width: 100%; min-height: 290px; place-items: center; overflow: hidden; padding: 19px; background: radial-gradient(ellipse at 50% 25%, rgba(140,84,171,.12), transparent 65%), #0d1017; border: 1px solid rgba(255,255,255,.055); border-radius: 9px; }
.game-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: min(100%, 390px); aspect-ratio: 1; gap: clamp(3px, .6vw, 6px); }
.game-cell { min-width: 0; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.15); transition: background-color .22s, transform .22s; }
.game-cell:nth-child(8n+1) { border-top-left-radius: 7px; }
.game-cell:focus-visible { outline-offset: 1px; z-index: 1; }
.board-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; background: rgba(10,12,18,.87); backdrop-filter: blur(5px); }
.overlay-icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 9px; color: #ff88b6; background: rgba(255,78,145,.13); border: 1px solid rgba(255,78,145,.2); border-radius: 13px; font-size: 23px; }
.board-overlay h2 { margin: 0; font: 600 21px var(--font-display); }
.board-overlay p { margin: 7px 0 15px; color: #9da3af; font-size: 11px; }
.board-overlay .button { min-height: 37px; }
.color-controls { display: flex; align-items: center; gap: 14px; padding: 14px 1px 12px; }
.controls-label { color: #838a98; font-size: 8px; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.color-buttons { display: flex; gap: 9px; }
.color-choice { position: relative; display: grid; width: 29px; height: 29px; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.14); border-radius: 50%; cursor: pointer; transition: transform .18s, border-color .18s, opacity .18s; }
.color-choice:hover:not(:disabled) { transform: scale(1.12); border-color: white; }
.color-choice:disabled { cursor: not-allowed; opacity: .38; }
.color-choice[aria-pressed="true"] { outline: 2px solid white; outline-offset: 2px; }
.color-choice:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.board-actions { display: flex; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.board-actions .button { min-height: 37px; }
.start-button:disabled { opacity: .55; cursor: default; transform: none; filter: none; }
.button-quiet { color: #a1a7b3; background: transparent; border-color: var(--line-strong); }
.button-quiet:hover:not(:disabled) { color: white; background: rgba(255,255,255,.05); }
.button-quiet:disabled { opacity: .4; cursor: not-allowed; }
.button-quiet svg { width: 14px; height: 14px; }
.control-hint { margin-left: auto; color: #767d8a; font-size: 8px; text-align: right; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.stat-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 77px; padding: 12px 13px; background: #12151d; border: 1px solid var(--line); border-radius: 8px; }
.stat-icon { position: absolute; top: 11px; right: 12px; font-size: 13px; }
.pink-icon { color: #ff72a8; }
.blue-icon { color: #75cfff; }
.gold-icon { color: #ebc274; }
.stat-label { color: #818895; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.stat-card strong { font: 600 19px var(--font-display); }
.stat-card strong small { color: #777e8b; font: 500 10px var(--font-body); }
.how-to-play { display: flex; gap: 12px; padding: 14px; margin-top: 12px; background: rgba(164,107,255,.055); border: 1px solid rgba(164,107,255,.1); border-radius: 8px; }
.how-icon { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; color: #bf8cf3; background: rgba(164,107,255,.13); border-radius: 8px; }
.how-icon svg { width: 16px; height: 16px; }
.how-to-play h2 { margin: 0 0 4px; font: 600 11px var(--font-display); }
.how-to-play p { margin: 0; color: #9298a6; font-size: 9px; line-height: 1.6; }
.game-side { display: flex; flex-direction: column; gap: 12px; padding-top: 58px; }
.side-card { padding: 16px; background: #12151d; border: 1px solid var(--line); border-radius: 10px; }
.goal-card { position: relative; overflow: hidden; background: radial-gradient(ellipse at 100% 0, rgba(201,85,172,.14), transparent 46%), #141620; }
.goal-card h2 { margin: 14px 0 8px; font: 600 19px/1.2 var(--font-display); letter-spacing: -.025em; }
.goal-card h2 span { color: #ff77aa; }
.goal-card > p { margin: 0; color: #969daa; font-size: 9px; line-height: 1.6; }
.goal-orb { position: absolute; top: 28px; right: 17px; display: grid; width: 42px; height: 42px; place-items: center; color: #ff82b2; background: radial-gradient(circle, rgba(255,112,172,.26), rgba(164,107,255,.08) 66%, transparent 67%); border: 1px solid rgba(255,126,180,.15); border-radius: 50%; font-size: 19px; }
.goal-progress { padding-top: 16px; margin-top: 17px; border-top: 1px solid var(--line); }
.goal-progress > span { color: #838a98; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.goal-progress > strong { float: right; color: #f3d9e4; font: 600 10px var(--font-display); }
.progress-track { height: 4px; overflow: hidden; margin-top: 9px; background: #282431; border-radius: 5px; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ff5f9b, #ab6aff); border-radius: inherit; transition: width .3s ease; }
.related-heading h2 { margin: 6px 0 11px; font: 600 15px var(--font-display); }
.related-game { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); }
.related-game > img { width: 37px; height: 37px; object-fit: cover; border-radius: 6px; }
.related-game > span:nth-child(2) { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.related-game strong { font-size: 9px; font-weight: 600; }
.related-game small { color: #818896; font-size: 7px; }
.related-game:hover strong { color: #f79aba; }
.all-games-link { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; margin-top: 4px; color: #e995b7; border-top: 1px solid var(--line); font-size: 9px; font-weight: 600; }
.all-games-link svg { width: 13px; height: 13px; }
.quote-card { padding: 13px 15px; background: linear-gradient(125deg, rgba(255,78,145,.09), rgba(164,107,255,.07)); border: 1px solid rgba(255,255,255,.06); border-radius: 9px; }
.quote-card > span { color: #f083ae; font: 700 30px/.7 var(--font-display); }
.quote-card p { margin: 6px 0 9px; color: #c9c4d2; font: 500 10px/1.5 var(--font-display); }
.quote-card small { color: #777e8c; font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.seo-content { max-width: none; padding: 19px 28px 27px; margin: 0; color: #b7bbc6; }
.seo-eyebrow { color: #bc92d8; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.seo-intro-heading { margin: 0 0 9px; color: #e9e4ef; font: 600 17px/1.3 var(--font-display); letter-spacing: -.02em; }
.seo-content > p { max-width: 900px; color: #a7adba; font-size: 11px; line-height: 1.85; }
.seo-content > p strong { color: #efc9dd; }
.seo-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 17px; }
.seo-columns > section { padding: 15px; background: #11141b; border: 1px solid var(--line); border-radius: 7px; }
.seo-columns h3 { margin: 0 0 8px; color: #e8e4ee; font: 600 12px/1.4 var(--font-display); }
.seo-columns p { margin: 0; color: #979eac; font-size: 9px; line-height: 1.75; }
.seo-guide-link { display: inline-flex; align-items: center; gap: 11px; padding: 12px 15px; margin-top: 20px; color: #ed9fbe; background: rgba(164,107,255,.07); border: 1px solid rgba(164,107,255,.16); border-radius: 6px; font-size: 10px; font-weight: 600; }
.seo-guide-link:hover { border-color: rgba(255,126,177,.35); }
.seo-guide-link span { font-size: 15px; }
.game-footer { display: flex; align-items: center; justify-content: space-between; max-width: 1340px; padding: 22px 38px 18px; margin: auto; color: #737a87; font-size: 9px; }
.game-footer a:hover { color: #e5e6ec; }
@media (max-width: 1100px) {
  .game-layout { grid-template-columns: minmax(0,1fr) 225px; gap: 16px; padding-right: 24px; padding-left: 24px; }
  .seo-content { padding-right: 24px; padding-left: 24px; }
  .game-footer { padding-right: 24px; padding-left: 24px; }
  .board-wrap { min-height: 250px; }
}
@media (max-width: 860px) {
  .game-layout { grid-template-columns: minmax(0,1fr); }
  .game-side { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: 0; }
  .goal-card { grid-row: span 2; }
  .quote-card { grid-column: 2; }
  .game-top-tag { margin-left: auto; }
}
@media (max-width: 760px) {
  .game-topbar { padding: 0 18px; }
  .game-layout { padding: 23px 18px 0; }
  .seo-content { padding-right: 20px; padding-left: 20px; }
  .game-footer { padding: 20px 18px 16px; }
}
@media (max-width: 560px) {
  .game-topbar { height: 58px; padding: 0 12px; }
  .game-top-tag { font-size: 7px; }
  .back-link { font-size: 10px; }
  .game-layout { gap: 17px; padding: 18px 13px 0; }
  .seo-content { padding: 16px 15px 20px; }
  .seo-columns { grid-template-columns: 1fr; gap: 8px; }
  .seo-columns > section { padding: 13px; }
  .game-intro { margin-bottom: 14px; }
  .breadcrumb { margin-bottom: 12px; }
  .game-intro h1 { font-size: 33px; }
  .game-intro p { max-width: 330px; font-size: 10px; }
  .game-intro-mark { width: 46px; height: 46px; font-size: 21px; }
  .play-area { padding: 11px; }
  .board-wrap { min-height: 0; padding: 10px; }
  .game-board { width: 100%; gap: 3px; }
  .game-cell { border-radius: 3px; }
  .color-controls { gap: 10px; padding: 12px 1px 10px; }
  .color-buttons { gap: 7px; }
  .color-choice { width: 27px; height: 27px; }
  .board-actions { flex-wrap: wrap; gap: 7px; }
  .board-actions .button { min-height: 35px; padding: 0 11px; }
  .control-hint { width: 100%; margin: 2px 0 0; text-align: left; }
  .stat-row { gap: 7px; }
  .stat-card { min-height: 68px; padding: 10px; }
  .game-side { grid-template-columns: 1fr; }
  .goal-card { grid-row: auto; }
  .quote-card { grid-column: auto; }
  .game-footer { padding: 18px 13px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-cell, .progress-track i, .color-choice { transition: none; }
}