.shapefit-game {
  --sf-ink: #203a3d;
  --sf-muted: #52676a;
  --sf-paper: #fffdf6;
  --sf-line: #b9c9c5;
  color: var(--sf-ink);
  font-family: inherit;
}
.shapefit-game * { box-sizing: border-box; }
.shapefit-game .sf-shell { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(12px, 2vw, 24px); background: #f7f5e9; border: 1px solid #d4ddd6; border-radius: 18px; }
.shapefit-game p { color: var(--sf-ink); }
.shapefit-game .sf-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.shapefit-game .sf-heading h2 { margin:0; font-size:clamp(1.55rem, 2.6vw, 2.1rem); }
.shapefit-game .sf-kicker { margin:0 0 4px; color:#426b62; font-size:.75rem; font-weight:800; letter-spacing:.1em; }
.shapefit-game .sf-memory { margin:0; color:var(--sf-muted); font-size:.88rem; }
.shapefit-game .sf-instructions { margin:10px 0 14px; }
.shapefit-game .sf-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.shapefit-game .sf-tiers, .shapefit-game .sf-actions, .shapefit-game .sf-piece-actions { display:flex; gap:8px; flex-wrap:wrap; }
.shapefit-game button { min-height:44px; padding:9px 13px; border:1px solid #829b94; border-radius:10px; color:#203a3d; background:#fffdf6; font:inherit; font-weight:650; cursor:pointer; }
.shapefit-game button:hover:not(:disabled) { background:#e8f2e9; }
.shapefit-game button:focus-visible, .shapefit-game [tabindex="0"]:focus-visible { outline:3px solid #146f66; outline-offset:3px; }
.shapefit-game button:disabled { opacity:.55; cursor:not-allowed; }
.shapefit-game .sf-tiers [aria-pressed="true"] { background:#d8eadf; border-color:#397367; box-shadow:inset 0 0 0 1px #397367; }
.shapefit-game .sf-readouts { display:flex; gap:14px; flex:1; flex-wrap:wrap; color:var(--sf-muted); font-size:.9rem; }
.shapefit-game .sf-readouts strong { color:var(--sf-ink); }
.shapefit-game .sf-rewards { min-height:1.35em; margin:8px 0; color:#385750; font-size:.84rem; }
.shapefit-game .sf-play-area { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(280px, .8fr); align-items:start; gap:clamp(18px, 3vw, 34px); }
.shapefit-game .sf-board-panel, .shapefit-game .sf-tray-panel { min-width:0; }
.shapefit-game .sf-board-label { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 8px; }
.shapefit-game .sf-board-label strong { font-size:1.05rem; }
.shapefit-game .sf-board-label span { color:var(--sf-muted); font-size:.86rem; }
.shapefit-game .sf-board-frame { display:flex; justify-content:center; padding:10px; border:1px solid #d0d8d1; border-radius:14px; background:#fffdf8; }
.shapefit-game .sf-grid { position:relative; display:grid; grid-template-columns:repeat(var(--sf-cols), minmax(0, 1fr)); grid-template-rows:repeat(var(--sf-rows), minmax(0, 1fr)); width:min(100%, 610px); aspect-ratio:var(--sf-cols) / var(--sf-rows); overflow:hidden; border:1px solid #8da49c; border-radius:6px; touch-action:none; }
.shapefit-game .sf-cell { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; border:1px solid #dce5dc; }
.shapefit-game .sf-cell.is-void { background:#f4f5ed; }
.shapefit-game .sf-cell.is-target { background:#fffef9; border:1px dashed #779187; }
.shapefit-game .sf-cell.is-cursor { box-shadow:inset 0 0 0 3px #16796c; z-index:1; }
.shapefit-game .sf-target-dot { color:#9eb1a8; font-size:1rem; }
.shapefit-game .sf-cell.is-occupied { border:1px solid rgba(30,55,52,.5); }
.shapefit-game .sf-piece-mark { display:grid; place-items:center; width:100%; height:100%; color:#203a3d; font-size:clamp(.65rem, 1.2vw, 1rem); font-weight:900; }
.shapefit-game .sf-cursor-readout { margin:6px 0 0; color:var(--sf-muted); font-size:.82rem; }
.shapefit-game .sf-tray-heading h3 { margin:2px 0 3px; font-size:1.15rem; }
.shapefit-game .sf-tray-heading p { margin:0 0 10px; color:var(--sf-muted); font-size:.9rem; }
.shapefit-game .sf-tray { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:9px; }
.shapefit-game .sf-tray-piece { display:grid; grid-template-rows:auto auto auto; align-content:start; justify-items:center; gap:5px; min-width:0; min-height:118px; padding:9px 8px; border-color:#b9c9c5; text-align:center; }
.shapefit-game .sf-tray-piece.is-selected { border:2px solid #146f66; background:#e7f2e8; }
.shapefit-game .sf-piece-shape { display:grid; grid-template-columns:repeat(var(--sf-piece-cols), 19px); grid-template-rows:repeat(var(--sf-piece-rows), 19px); gap:2px; min-height:40px; align-content:center; justify-content:center; }
.shapefit-game .sf-piece-square { display:grid; place-items:center; border:1px solid rgba(28,52,50,.45); border-radius:3px; color:#183638; font-size:10px; }
.shapefit-game .sf-piece-name { font-size:.83rem; line-height:1.15; }
.shapefit-game .sf-piece-size { color:var(--sf-muted); font-size:.75rem; font-weight:500; }
.shapefit-game .sf-color-a .sf-piece-square, .shapefit-game .sf-color-a.is-occupied { background:#d5e8bf; }
.shapefit-game .sf-color-b .sf-piece-square, .shapefit-game .sf-color-b.is-occupied { background:#f4d7a1; }
.shapefit-game .sf-color-c .sf-piece-square, .shapefit-game .sf-color-c.is-occupied { background:#c5dfdf; }
.shapefit-game .sf-color-d .sf-piece-square, .shapefit-game .sf-color-d.is-occupied { background:#e8c8c7; }
.shapefit-game .sf-color-e .sf-piece-square, .shapefit-game .sf-color-e.is-occupied { background:#d5c9ea; }
.shapefit-game .sf-color-f .sf-piece-square, .shapefit-game .sf-color-f.is-occupied { background:#ecdcae; }
.shapefit-game .sf-color-g .sf-piece-square, .shapefit-game .sf-color-g.is-occupied { background:#bad8bb; }
.shapefit-game .sf-color-h .sf-piece-square, .shapefit-game .sf-color-h.is-occupied { background:#e7cbb2; }
.shapefit-game .sf-piece-actions { margin-top:10px; }
.shapefit-game .sf-selected-note { min-height:1.3em; margin:8px 0; color:var(--sf-muted); font-size:.85rem; }
.shapefit-game .sf-status { min-height:1.5em; margin:14px 0 5px; padding:10px 12px; border-left:4px solid #9baf9e; border-radius:4px; background:#eef2e9; }
.shapefit-game .sf-status.is-success { border-color:#337663; background:#e0f0df; font-weight:750; }
.shapefit-game .sf-status.is-paused { border-color:#a88744; }
.shapefit-game .sf-help { margin:7px 0 0; color:var(--sf-muted); font-size:.82rem; line-height:1.45; }
.shapefit-game .sf-ghost { position:absolute; z-index:3; display:grid; pointer-events:none; }
.shapefit-game .sf-ghost[hidden] { display:none; }
.shapefit-game .sf-ghost-square { display:grid; place-items:center; margin:2px; border:2px solid #2b655a; border-radius:5px; background:rgba(169, 218, 183, .82); color:#183638; font-weight:900; }
.shapefit-game .sf-ghost.is-invalid .sf-ghost-square { border-color:#a3423c; background:rgba(241, 174, 160, .82); }
.shapefit-game .sf-confirm { position:absolute; z-index:10; inset:0; display:grid; place-items:center; padding:20px; border-radius:18px; background:rgba(18, 36, 37, .58); }
.shapefit-game .sf-confirm > div { width:min(100%, 430px); padding:22px; border:1px solid #9cac9f; border-radius:14px; background:#fffdf6; box-shadow:0 12px 38px rgba(0,0,0,.22); }
.shapefit-game .sf-confirm h3 { margin:0 0 8px; }
.shapefit-game .sf-confirm p { color:#293f43; }
.shapefit-game .sf-confirm > div > div { display:flex; gap:8px; flex-wrap:wrap; }
@media (min-width: 851px) { .shapefit-game .sf-grid { width:auto; max-width:100%; height:min(400px, calc(100vh - 500px)); } }
@media (min-width: 851px) and (min-height: 761px) and (max-height: 950px) {
  .shapefit-game .sf-tray-piece { min-height:105px; padding:6px; gap:4px; }
  .shapefit-game .sf-piece-shape { grid-template-columns:repeat(var(--sf-piece-cols), 16px); grid-template-rows:repeat(var(--sf-piece-rows), 16px); gap:1px; min-height:34px; }
  .shapefit-game .sf-piece-actions button { flex:1 1 auto; padding:6px 7px; font-size:.82rem; }
  .shapefit-game .sf-status { margin-top:8px; padding:6px 10px; }
}
@media (max-width: 850px) { .shapefit-game .sf-play-area { grid-template-columns:1fr; } .shapefit-game .sf-grid { width:min(100%, 680px); } }
@media (max-width: 560px) { .shapefit-game .sf-heading { align-items:flex-start; flex-direction:column; gap:4px; } .shapefit-game .sf-tray { grid-template-columns:repeat(2, minmax(0, 1fr)); } .shapefit-game .sf-piece-shape { grid-template-columns:repeat(var(--sf-piece-cols), 16px); grid-template-rows:repeat(var(--sf-piece-rows), 16px); } }
@media (min-width: 851px) and (max-height: 760px) {
  .shapefit-game .sf-shell { padding:8px 12px; border-radius:12px; }
  .shapefit-game .sf-heading { justify-content:flex-end; min-height:1.1em; }
  .shapefit-game .sf-heading > div { display:none; }
  .shapefit-game .sf-memory { font-size:.76rem; line-height:1.15; }
  .shapefit-game .sf-instructions { margin:3px 0 6px; font-size:.84rem; line-height:1.25; }
  .shapefit-game .sf-toolbar { gap:6px 10px; }
  .shapefit-game .sf-tiers, .shapefit-game .sf-actions { gap:5px; }
  .shapefit-game button { min-height:38px; padding:6px 10px; }
  .shapefit-game .sf-rewards { min-height:1em; margin:3px 0; font-size:.76rem; line-height:1.15; }
  .shapefit-game .sf-play-area { grid-template-columns:minmax(0, 1.2fr) minmax(330px, .8fr); gap:12px; }
  .shapefit-game .sf-board-label { margin-bottom:4px; }
  .shapefit-game .sf-board-label strong { font-size:.95rem; }
  .shapefit-game .sf-board-frame { padding:5px; }
  .shapefit-game .sf-grid { width:auto; max-width:100%; height:min(350px, calc(100vh - 370px)); aspect-ratio:var(--sf-cols) / var(--sf-rows); }
  .shapefit-game .sf-cursor-readout { margin-top:3px; font-size:.74rem; }
  .shapefit-game .sf-tray-heading h3 { margin:0; font-size:1rem; }
  .shapefit-game .sf-tray-heading p { margin:0 0 5px; font-size:.8rem; }
  .shapefit-game .sf-tray { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:5px; }
  .shapefit-game .sf-tray-piece { min-height:94px; padding:5px 4px; gap:3px; }
  .shapefit-game .sf-piece-shape { grid-template-columns:repeat(var(--sf-piece-cols), 14px); grid-template-rows:repeat(var(--sf-piece-rows), 14px); gap:1px; min-height:29px; }
  .shapefit-game .sf-piece-actions { margin-top:6px; gap:5px; }
  .shapefit-game .sf-piece-actions button { flex:1 1 auto; padding:5px 7px; font-size:.84rem; }
  .shapefit-game .sf-selected-note { min-height:1em; margin:4px 0; font-size:.77rem; }
  .shapefit-game .sf-status { min-height:1.2em; margin:6px 0 3px; padding:5px 8px; }
  .shapefit-game .sf-help { margin-top:3px; font-size:.74rem; line-height:1.25; }
}
@media (prefers-reduced-motion: reduce) { .shapefit-game *, .shapefit-game *::before, .shapefit-game *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }