.game-skin-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.game-skin-navigation a { padding: 10px 16px; border: 1px solid #c9a86b; border-radius: 9px; background: #fff8e6; color: #49321f; font-weight: 750; text-decoration: none; }
.game-skin-navigation a[aria-current] { background: #296eb1; border-color: #296eb1; color: white; }
.game-skin-shop { box-sizing: border-box; min-width: 0; padding: clamp(16px, 2.5vw, 30px); border: 2px solid #c9a86b; border-radius: 18px; background: #fff7e3; color: #4b301c; container-type: inline-size; }
.game-skin-shop * { box-sizing: border-box; }
.game-skin-shop > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.game-skin-shop h2 { margin: 5px 0; font-size: clamp(23px, 2.5vw, 32px); }
.game-skin-shop p { line-height: 1.65; }
.game-skin-wallet { padding: 10px 14px; border: 1px solid #dfc289; border-radius: 10px; background: #fffcf2; white-space: nowrap; }
.game-skin-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; }
.game-skin-tabs a { margin-inline-start: auto; color: #265f94; }
.game-skin-shop button { min-height: 44px; padding: 8px 12px; font: inherit; font-weight: 700; border: 1px solid #c9a86b; border-radius: 9px; background: #fffaf0; color: #4b301c; cursor: pointer; }
.game-skin-shop button[aria-pressed="true"] { border-color: #2776be; background: #e6f1ff; box-shadow: inset 0 0 0 1px #2776be; }
.game-skin-shop button.primary { background: #2e6fdc; color: white; border-color: #2e6fdc; }
.game-skin-shop button:disabled { opacity: .55; cursor: default; }
.game-skin-shop :focus-visible, .game-skin-navigation a:focus-visible { outline: 3px solid #236fc2; outline-offset: 3px; }
.game-skin-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(250px, .9fr); gap: 20px; align-items: start; }
.game-skin-grid { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.game-skin-card { display: grid; min-width: 0; gap: 9px; padding: 12px; border: 1px solid #cfb27c; border-radius: 12px; background: #fffdf4; text-align: center; }
.game-skin-card strong, .game-skin-card h3 { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.game-skin-card-status, .game-skin-card small { font-size: .84rem; }
.game-skin-card-art { position: relative; display: block; height: 144px; overflow: hidden; border-radius: 9px; background: #f7edd7; }
.game-skin-card canvas { height: 100%; width: auto; max-width: 100%; }
.game-skin-preview { min-width: 0; padding: 14px; border: 1px solid #d8b67a; border-radius: 12px; background: #fffdf4; position: sticky; top: 12px; }
.game-skin-preview h3 { font-size: 1.1rem; margin: 0 0 10px; }
.game-skin-stage { position: relative; display: grid; place-items: center; overflow: hidden; height: 260px; background: #e9f0e1; border-radius: 10px; }
.game-skin-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.game-skin-directions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.game-skin-directions button { font-size: .82rem; padding: 5px 1px; }
.game-skin-quote { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #dfcba7; padding-top: 12px; }
.game-skin-quote > div { flex: 1; min-width: 70px; }
.game-skin-quote dt { font-size: .82rem; }
.game-skin-quote dd { margin: 5px 0; font-weight: 800; }
.game-skin-preview-controls > button:not([hidden]) { width: 100%; }
.game-skin-shop details { margin-top: 22px; padding: 14px; border: 1px solid #d8b67a; border-radius: 10px; }
.game-skin-shop summary { cursor: pointer; font-weight: 750; }
.game-skin-shop li { line-height: 1.8; margin-top: 6px; }
.game-skin-modal { position: fixed; inset: 0; z-index: 1500; padding: 20px; background: #21190cb3; display: grid; place-items: center; }
.game-skin-modal > section { background: #fffaf0; padding: 24px; width: min(100%, 480px); max-height: calc(100dvh - 40px); overflow: auto; border: 2px solid #c9a86b; border-radius: 16px; }
.game-skin-modal section > div { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.game-skin-admin .game-skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-skin-admin form label { display: grid; gap: 6px; text-align: left; }
.game-skin-admin input[type="number"] { width: 100%; min-height: 44px; padding: 8px; font: inherit; border: 1px solid #bca57a; border-radius: 8px; }
.game-skin-admin .game-skin-sale { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.teacher-home-page .game-skin-navigation a,
.game-skin-admin {
  background: var(--teacher-panel);
  border-color: var(--teacher-line);
  color: var(--teacher-text);
}
.teacher-home-page .game-skin-navigation a[aria-current] {
  background: var(--teacher-blue-soft);
  border-color: var(--teacher-blue);
}
.teacher-home-page .game-skin-navigation a:focus-visible,
.game-skin-admin :focus-visible { outline-color: var(--teacher-blue); }
.game-skin-admin .game-skin-card {
  background: var(--teacher-panel-soft);
  border-color: var(--teacher-line);
}
.game-skin-admin .game-skin-card-art { background: var(--teacher-panel-strong); }
.game-skin-admin input[type="number"] {
  background: var(--teacher-bg);
  border-color: var(--teacher-line);
  color: inherit;
}
.game-skin-admin input[type="checkbox"] { accent-color: var(--teacher-blue); }
.game-skin-admin details { border-color: var(--teacher-line); }
.game-skin-admin .economy-kicker, .game-skin-admin small { color: var(--teacher-muted); }
@container (max-width: 720px) { .game-skin-layout { grid-template-columns: 1fr; } .game-skin-preview { position: static; grid-row: 1; } .game-skin-stage { height: 220px; } .game-skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 390px) { .game-skin-admin .game-skin-grid { grid-template-columns: 1fr; } .game-skin-card-art { height: 120px; } .game-skin-shop h2 { font-size: 24px; } }