.xg-game { padding-block: 28px 64px; color: #344c3f; }
.xg-game *, .xg-game *::before, .xg-game *::after { box-sizing: border-box; }
.xg-game button, .xg-game select { font: inherit; }
.xg-game button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.xg-game button:focus-visible, .xg-game select:focus-visible, .xg-game a:focus-visible, .xg-game [tabindex]:focus-visible { outline: 4px solid #395f49; outline-offset: 5px; }
.xg-game [hidden] { display: none !important; }
.xg-back { color: #42664e; font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.xg-header { text-align: center; max-width: 730px; margin: 22px auto 28px; }
.xg-eyebrow { display: inline-grid; place-items: center; min-width: 64px; min-height: 64px; border-radius: 24px; background: #edebd5; color: #46684d; font-size: 34px; transform: rotate(-5deg); }
.xg-header h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.1; margin: 18px 0 13px; letter-spacing: -0.035em; }
.xg-header p { font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.65; margin: 0; color: #5a6b5d; }
.xg-board { max-width: 980px; margin: 0 auto; padding: clamp(16px, 3.5vw, 36px); border: 1px solid #dfe5d2; background: #fffdf6; border-radius: 30px; box-shadow: 0 12px 36px #3b59300b; }
.xg-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.xg-counter { color: #53634f; background: #f0f3e7; border-radius: 20px; padding: 10px 17px; font-size: .95rem; white-space: nowrap; }
.xg-counter strong { color: #305741; }
.xg-select-label { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .9rem; font-weight: 700; }
.xg-select-label select { min-height: 44px; padding: 8px 30px 8px 12px; border-radius: 14px; border: 1px solid #b9c8b1; color: #344c3f; background: white; }
.xg-btn { border: 1.5px solid #cbd8bf; background: #f1f5e8; color: #365a42; padding: 12px 20px; border-radius: 17px; cursor: pointer; min-height: 48px; font-weight: 800 !important; line-height: 1.2; transition: background .18s, transform .18s; }
.xg-btn:hover:not(:disabled) { background: #e6efd8; transform: translateY(-2px); }
.xg-btn:active:not(:disabled) { transform: translateY(1px); }
.xg-btn:disabled { opacity: .45; cursor: default; }
.xg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; justify-content: center; }
.xg-btn[data-xg-action="save"], .xg-btn[data-xg-action="next"], .xg-btn[data-xg-action="play"] { background: #41664b; color: #fffef5; border-color: #41664b; }
.xg-btn[data-xg-action="save"]:hover, .xg-btn[data-xg-action="next"]:hover, .xg-btn[data-xg-action="play"]:hover { background: #31523b; }
.xg-status { min-height: 50px; margin: 22px 0 0; padding: 12px 20px; border-radius: 16px; text-align: center; color: #3d6446; font-size: 1rem; background: #eff4e7; line-height: 1.5; }
.xg-status:empty { visibility: hidden; }
.xg-keyboard { text-align: center; color: #697463; font-size: .85rem; margin: 18px 0; }
.xg-puzzle-layout { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 28px; align-items: center; }
.xg-puzzle-grid { display: grid; grid-template-columns: repeat(var(--xg-grid-size, 3), 1fr); aspect-ratio: 385 / 300; gap: 5px; padding: 7px; background: #d8dfca; border-radius: 20px; overflow: hidden; }
.xg-piece { position: relative; min-width: 0; padding: 0; border: 2px solid transparent; border-radius: 8px; background-color: #f7edd7; background-image: url('/assets/gosmeda.svg'); background-repeat: no-repeat; cursor: pointer; transition: box-shadow .18s, border-color .18s, filter .18s; }
.xg-piece:hover:not(:disabled) { box-shadow: inset 0 0 0 3px #fff8; }
.xg-piece.is-selected { border-color: #355c43; box-shadow: inset 0 0 0 4px #f5c64d; }
.xg-piece.is-hint { border: 3px dashed #284f37; }
.xg-piece:disabled { cursor: default; }
.xg-piece-position { position: absolute; bottom: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #35543c; font-size: .7rem; background: #fffdf5d9; line-height: 1; }
.xg-puzzle-preview { margin: 0; padding: 15px 10px; background: #f5eddc; border-radius: 21px; border: 1px dashed #cabb9c; transform: rotate(2deg); }
.xg-puzzle-preview img { width: 100%; display: block; }
.xg-puzzle-preview figcaption { padding: 13px 8px 2px; text-align: center; font-size: .8rem; line-height: 1.4; color: #6c7056; }
.xg-rhythm-pads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 36px auto; max-width: 740px; }
.xg-note { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1 / 1.1; border: 3px solid #4d654a35; border-radius: 34px 34px 24px 24px; color: #334d3d; cursor: pointer; box-shadow: 0 7px 0 #4c66301c; transition: transform .15s, box-shadow .15s, filter .15s; padding: 16px 5px; font-weight: 800 !important; }
.xg-note-0 { background: #f4d67e; transform: rotate(-3deg); }
.xg-note-1 { background: #b7d6a7; transform: rotate(2deg); }
.xg-note-2 { background: #e6b4c1; transform: rotate(-2deg); }
.xg-note-3 { background: #aacdda; transform: rotate(3deg); }
.xg-note:disabled { cursor: default; }
.xg-note-symbol { font-family: Georgia, serif; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; }
.xg-note-number { font-size: .68rem; opacity: .65; }
.xg-note.is-lit, .xg-note:active:not(:disabled) { transform: translateY(-7px) rotate(0); box-shadow: 0 0 0 5px #fffdf6, 0 0 0 9px #41664b; filter: brightness(1.13); }
.xg-pattern-path { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; background: #f3efdf; padding: 27px 15px; border-radius: 20px; min-height: 112px; }
.xg-path-shape { display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto; background: #fffdf6; border-radius: 18px; }
.xg-shape { display: block; width: 51px; height: 51px; fill: currentColor; }
.xg-missing { color: #7f8b6f; font-size: 2rem; font-weight: 800; border: 2px dashed #a5af8b; }
.xg-prompt { font-size: 1.25rem; text-align: center; margin: 25px 0 16px; }
.xg-pattern-options { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.xg-shape-option { display: flex; align-items: center; flex-direction: column; gap: 10px; background: #fff; min-width: 112px; padding: 15px 18px; border: 2px solid #d9e1ce; border-radius: 23px; color: #48614a; cursor: pointer; font-size: .85rem !important; }
.xg-shape-option .xg-shape { width: 65px; height: 65px; }
.xg-shape-option:hover:not(:disabled) { border-color: #729961; background: #f6faef; }
.xg-shape-option.is-correct { border-color: #588849; background: #eaf3d9; }
.xg-shape-option.is-try-again { border-style: dashed; }
.xg-shape-option:disabled { cursor: default; }
.xg-hint { text-align: center; padding-top: 17px; font-size: .95rem; }
.xg-hint-shapes { display: flex; align-items: center; justify-content: center; gap: 8px; }
.xg-paint-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 25px; align-items: start; }
.xg-label { font-size: .9rem; margin: 0 0 13px; font-weight: 800; }
.xg-palette { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 20px; }
.xg-swatch { display: grid; place-items: center; width: 43px; height: 43px; min-width: 43px; border-radius: 50%; border: 2px solid #3f5b382b; background: var(--xg-color); cursor: pointer; color: #183c2d; font-size: 1.25rem !important; font-weight: 900 !important; }
.xg-swatch[aria-pressed="true"] { outline: 3px solid #47684c; outline-offset: 3px; }
.xg-swatch span { text-shadow: 0 1px 3px #fff; }
.xg-paint-stage { min-height: 260px; overflow: hidden; border-radius: 23px; border: 1px solid #d9e1ce; background: #e7f1ef; display: grid; align-items: center; }
.xg-paint-stage > p { padding: 30px; text-align: center; }
.xg-paint-stage > svg { width: 100%; height: auto; display: block; }
.xg-paint-stage [role="button"]:hover { filter: brightness(1.04); }
.xg-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.xg-region { padding: 11px 5px; min-height: 46px; color: #416047; border: 1px solid #cdd9c3; border-radius: 13px; background: #f5f6ec; cursor: pointer; font-size: .85rem !important; }
.xg-region:hover:not(:disabled) { background: #e8efdb; }
.xg-region:disabled { opacity: .45; cursor: default; }
.xg-paint-tools .xg-actions { flex-direction: column; margin-top: 20px; }
.xg-paint-tools .xg-btn { width: 100%; font-size: .88rem; padding-inline: 10px; }
@media (max-width: 700px) {
  .xg-puzzle-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .xg-puzzle-preview { width: 130px; justify-self: center; padding: 6px; }
  .xg-puzzle-preview figcaption { padding: 5px; font-size: .72rem; }
  .xg-paint-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .xg-paint-tools .xg-actions { flex-direction: row; }
  .xg-paint-tools .xg-btn { width: auto; flex: 1 1 auto; }
  .xg-regions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xg-rhythm-pads { gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 370px; }
  .xg-note { aspect-ratio: 1.1 / 1; padding: 10px; border-radius: 25px; }
  .xg-note-symbol { font-size: 3rem; }
}
@media (max-width: 420px) {
  .xg-board { padding: 15px; border-radius: 23px; }
  .xg-header { margin-block: 22px; }
  .xg-toolbar { gap: 12px; margin-bottom: 17px; }
  .xg-select-label { font-size: .8rem; }
  .xg-puzzle-grid { gap: 3px; padding: 4px; border-radius: 14px; }
  .xg-piece-position { width: 18px; height: 18px; font-size: .6rem; bottom: 3px; right: 3px; }
  .xg-path-shape { width: 47px; height: 47px; border-radius: 14px; }
  .xg-path-shape .xg-shape { width: 39px; height: 39px; }
  .xg-pattern-path { gap: 7px; padding: 17px 8px; }
  .xg-pattern-options { gap: 8px; }
  .xg-shape-option { min-width: 80px; padding: 12px 9px; }
  .xg-shape-option .xg-shape { width: 49px; height: 49px; }
  .xg-palette { gap: 9px; }
  .xg-swatch { width: 39px; height: 39px; min-width: 39px; }
  .xg-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .xg-game *, .xg-game *::before, .xg-game *::after { transition: none !important; animation: none !important; }
  .xg-note.is-lit { transform: none; }
}