.spa-app,
.spa-app * { box-sizing: border-box; }

.spa-app {
  --spa-orange: #f26522;
  --spa-orange-dark: #bd410c;
  --spa-blue: #2f80d8;
  --spa-ink: #20313b;
  --spa-muted: #65757f;
  --spa-line: #d7e1e7;
  --spa-bg: #f3f7fa;
  width: 100%;
  max-width: 1180px;
  margin: 20px auto;
  padding: 16px;
  color: var(--spa-ink);
  font-family: "Sarabun", "Noto Sans Thai", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.spa-app button,
.spa-app input,
.spa-app select { font: inherit; }

.spa-shell {
  overflow: hidden;
  border: 1px solid #e1e8ed;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(32, 49, 59, .12);
}

.spa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  color: #fff;
  background: linear-gradient(135deg, #f26522, #ff914d);
}

.spa-brand { display: flex; align-items: center; gap: 12px; }
.spa-header-side{display:flex;align-items:center;gap:10px}.spa-global-user{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:14px;background:#ffffff25;font-weight:800}.spa-global-user button{border:1px solid #fff8;border-radius:10px;padding:6px 9px;color:#8d271f;background:#fff;cursor:pointer;font-weight:900}
.spa-mascot{position:relative;display:inline-block;width:54px;height:58px;margin-left:4px;overflow:hidden}.spa-mascot img{display:block;width:100%;height:100%;object-fit:contain}.spa-mascot b{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);width:42px;color:#6d3119;font-size:7px;line-height:1;text-align:center;white-space:nowrap}
.spa-brand-mark { font-size: 2rem; }
.spa-brand h2 { margin: 0; color: #fff; font-size: clamp(1.25rem, 4vw, 1.8rem); }
.spa-brand p { margin: 2px 0 0; opacity: .92; font-size: .92rem; }

.spa-header-chip {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  font-weight: 800;
}

.spa-body { padding: 22px; background: linear-gradient(#fff, #fbfdfe); }
.spa-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.spa-title-row h1 { margin: 0; color: var(--spa-ink); font-size: clamp(1.55rem, 5vw, 2.25rem); line-height: 1.2; }
.spa-title-row p { margin: 6px 0 0; color: var(--spa-muted); }
.spa-back { border: 0; background: #eaf0f4; color: var(--spa-ink); border-radius: 12px; padding: 9px 13px; cursor: pointer; font-weight: 800; }

.spa-mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.spa-mode {
  min-height: 190px;
  padding: 20px;
  border: 2px solid var(--spa-line);
  border-radius: 20px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.spa-mode:hover,
.spa-mode:focus-visible { transform: translateY(-3px); border-color: var(--spa-orange); box-shadow: 0 10px 25px rgba(242,101,34,.15); outline: none; }
.spa-mode-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 13px; border-radius: 16px; background: #fff0e7; font-size: 1.8rem; }
.spa-mode h3 { margin: 0 0 6px; color: var(--spa-ink); font-size: 1.2rem; }
.spa-mode p { margin: 0; color: var(--spa-muted); line-height: 1.55; }

.spa-notice { margin: 16px 0; padding: 13px 15px; border-radius: 14px; background: #eaf3ff; color: #244c72; font-weight: 700; }
.spa-notice.is-error { background: #fff0eb; color: #a43112; }
.spa-notice.is-good { background: #e9f8f0; color: #126743; }

.spa-play-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 650px; margin: 0 auto 18px; }
.spa-play-choice button { min-height: 74px; border: 2px solid var(--spa-line); border-radius: 17px; background: #fff; color: var(--spa-ink); cursor: pointer; font-weight: 800; font-size: 1.05rem; }
.spa-play-choice button.is-active { border-color: var(--spa-orange); background: #fff0e7; color: #aa3b0b; }

.spa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.spa-player-card { padding: 17px; border: 1px solid var(--spa-line); border-radius: 18px; background: #f8fbfd; }
.spa-player-card:only-child { grid-column: 1 / -1; width: 100%; max-width: 580px; justify-self: center; }
.spa-player-card h3 { margin: 0 0 12px; color: var(--spa-blue); }
.spa-field { display: block; margin: 0 0 11px; font-weight: 800; }
.spa-field input,
.spa-field select { display: block; width: 100%; min-height: 46px; margin-top: 5px; padding: 9px 11px; border: 2px solid #cbd8e0; border-radius: 12px; background: #fff; color: var(--spa-ink); }
.spa-field input:focus,
.spa-field select:focus { outline: 3px solid rgba(47,128,216,.18); border-color: var(--spa-blue); }
.spa-known-student { padding:10px; border:2px dashed #b9c7d0; border-radius:13px; background:#f1f8ff; color:#245479; }
.spa-known-student small { color:#607985; font-weight:700; }
.spa-known-student select { background:#fff; }
.spa-login-guide{margin:0 auto 16px;max-width:720px;padding:13px 16px;border:2px solid #b8d9ef;border-radius:16px;background:#eff8ff;color:#274d66;line-height:1.7}.spa-login-guide strong{display:inline-block;margin-right:5px;color:#145886}.spa-entry-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}.spa-entry-tabs button{min-height:44px;border:2px solid #d6dde3;border-radius:12px;background:#fff;color:#42545e;font-weight:900;cursor:pointer}.spa-entry-tabs button.is-active{border-color:#f26522;color:#9b350d;background:#fff0e7;box-shadow:0 3px 0 #e5a17d}.spa-entry-panel[hidden]{display:none}.spa-number-lookup small{display:block;color:#397797}.spa-roster-matches{display:grid;gap:7px;min-height:48px;padding:8px;border-radius:13px;background:#edf6fb}.spa-roster-matches>span{align-self:center;color:#617782;font-weight:700}.spa-roster-matches button{display:grid;grid-template-columns:1fr auto;gap:3px;width:100%;padding:9px 11px;border:2px solid #b8d2df;border-radius:11px;background:#fff;color:#254b60;text-align:left;cursor:pointer;font-weight:800}.spa-roster-matches button small{grid-column:1/-1;color:#657984}.spa-roster-matches .spa-roster-picked{border-color:#50ad76;background:#effaf3;color:#17693a}
.spa-signed-in { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; padding:11px 14px; border:2px solid #a9dfbd; border-radius:15px; color:#155a31; background:#edf9f1; font-weight:800; }
.spa-signed-in button { flex:0 0 auto; min-height:40px; padding:7px 13px; border:0; border-radius:11px; color:#fff; background:#b14343; cursor:pointer; font-weight:900; }
.spa-class-choice,
.spa-room-code { width: 100%; max-width: 580px; margin: 0 auto 16px; }

.spa-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.spa-btn { min-height: 48px; padding: 10px 18px; border: 0; border-radius: 14px; cursor: pointer; font-weight: 900; }
.spa-btn-primary { color: #fff; background: var(--spa-orange); box-shadow: 0 6px 0 var(--spa-orange-dark); }
.spa-btn-primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--spa-orange-dark); }
.spa-btn-secondary { color: var(--spa-ink); background: #eaf0f4; }
.spa-btn-blue { color: #fff; background: var(--spa-blue); box-shadow: 0 6px 0 #15539d; }
.spa-btn:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }

.spa-game-layout { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(420px, 1.18fr); gap: 20px; align-items: start; }
.spa-prompt { padding: 16px; border: 1px solid #cbdcf2; border-radius: 18px; background: #edf5ff; }
.spa-prompt h3 { margin: 0 0 9px; }
.spa-instruction-list { display: grid; gap: 8px; max-height: 540px; overflow: auto; padding-right: 4px; }
.spa-instruction { padding: 10px 11px; border: 1px solid #d6e1e8; border-radius: 12px; background: #fff; }
.spa-instruction strong { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 9px; color: #fff; background: var(--spa-blue); }
.spa-segment { display: inline-flex; align-items: center; gap: 5px; margin: 3px 8px 3px 0; font-weight: 800; }
.spa-swatch { width: 17px; height: 17px; border: 1px solid rgba(0,0,0,.18); border-radius: 5px; }

.spa-workspace { min-width: 0; text-align: center; }
.spa-toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px; }
.spa-tool,
.spa-color { min-height: 44px; padding: 8px 11px; border: 2px solid transparent; border-radius: 12px; background: #fff; color: var(--spa-ink); box-shadow: 0 3px 10px rgba(32,49,59,.1); cursor: pointer; font-weight: 800; }
.spa-tool.is-active,
.spa-color.is-active { border-color: var(--spa-ink); transform: translateY(-2px); }
.spa-color { display: inline-flex; align-items: center; gap: 6px; }
.spa-tool-panel { position:sticky; top:10px; z-index:60; display:grid; grid-template-columns:minmax(190px,1fr) auto; align-items:center; gap:10px; margin:0 0 12px; padding:9px; border:3px solid #d9c7eb; border-radius:18px; background:rgba(255,255,255,.97); box-shadow:0 8px 24px rgba(73,43,102,.16); }
.spa-current-tool { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:8px 14px; border-radius:13px; color:#fff; background:#2f80d8; text-align:left; }
.spa-current-tool strong { font-size:.82rem; opacity:.9; }
.spa-current-tool span { font-size:1.12rem; font-weight:950; }
.spa-current-tool.is-fill { background:#b65414; }
.spa-current-tool.is-eraser { background:#9f3f79; }
.spa-current-tool.is-group-eraser { background:#6d4ab8; }
.spa-tool-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.spa-tool-choices .spa-tool { min-width:104px; border:3px solid #c9d4db; box-shadow:none; }
.spa-tool-choices .spa-tool.is-active { border-color:#172933; color:#172933; background:#ffdf70; box-shadow:0 0 0 4px rgba(255,201,51,.28); transform:none; }
.spa-tool-choices .spa-tool[data-tool="fill"].is-active { color:#fff; border-color:#77350d; background:#d56a24; box-shadow:0 0 0 4px rgba(213,106,36,.25); }
.spa-tool-choices .spa-tool[data-tool="eraser"].is-active { color:#fff; border-color:#6f2452; background:#c65b99; box-shadow:0 0 0 4px rgba(198,91,153,.25); }

.spa-board-scroll { width: 100%; max-height: 70vh; overflow: auto; padding: 8px; border-radius: 16px; background: #edf2f5; overscroll-behavior: contain; }
.spa-coordinate-grid { --spa-cell: 44px; display: grid; grid-template-columns: 34px repeat(var(--spa-size), var(--spa-cell)); grid-auto-rows: var(--spa-cell); width: max-content; margin: auto; user-select: none; -webkit-user-select: none; }
.spa-coordinate-grid[data-size="16"] { --spa-cell: 30px; }
.spa-coordinate-grid[data-size="24"] { --spa-cell: 27px; }
.spa-coordinate-grid[data-size="32"] { --spa-cell: 23px; }
.spa-coordinate-grid[data-size="45"] { --spa-cell: 17px; }
.spa-coordinate-grid[data-size="64"] { --spa-cell: 14px; }
.spa-axis { display: grid; place-items: center; color: #55666f; background: #f8fafb; font-size: .82rem; font-weight: 900; }
.spa-axis-corner { border-radius: 8px 0 0 0; }
.spa-pixel { position: relative; width: var(--spa-cell); height: var(--spa-cell); margin: 0; padding: 0; border: 1px solid #aebbc5; border-radius: 0; background: #fff; cursor: crosshair; touch-action: none; }
.spa-pixel:focus-visible { z-index: 2; outline: 3px solid #ffbf00; outline-offset: -3px; }
.spa-pixel.is-wrong::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: #d62121; background: rgba(255,255,255,.42); font-size: 1.1rem; font-weight: 900; }

.spa-status-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }
.spa-status-chip { padding: 7px 10px; border-radius: 999px; color: #40545f; background: #edf2f5; font-weight: 800; }
.spa-timer { color: #a83c0d; background: #fff0e7; }

.spa-picture-preview { max-width: 340px; margin: 12px auto; }
.spa-picture-preview .spa-coordinate-grid { transform-origin: top left; }
.spa-studio-top { display: grid; grid-template-columns: 1fr 180px; gap: 12px; margin-bottom: 12px; text-align: left; }
.spa-code-output { max-height: 240px; overflow: auto; margin-top: 12px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--spa-line); text-align: left; }

.spa-result { max-width: 720px; margin: 0 auto; text-align: center; }
.spa-result-icon { display: grid; place-items: center; width: 94px; height: 94px; margin: 0 auto 10px; border-radius: 24px; background: #fff0e7; font-size: 3rem; }
.spa-stars { min-height: 44px; color: #f1ad00; font-size: 2.1rem; letter-spacing: 5px; }
.spa-score { margin: 8px 0; color: var(--spa-orange); font-size: clamp(3rem, 11vw, 5rem); font-weight: 950; line-height: 1; }
.spa-score small { font-size: .34em; color: var(--spa-muted); }
.spa-best-list { display: grid; gap: 7px; max-width: 520px; margin: 16px auto; }
.spa-best-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 11px; background: #f3f7fa; }
.spa-leaderboard { width: 100%; margin-top: 18px; border-collapse: collapse; text-align: left; }
.spa-leaderboard th,
.spa-leaderboard td { padding: 9px 8px; border-bottom: 1px solid var(--spa-line); }
.spa-leaderboard th { color: #52626b; font-size: .9rem; }

.spa-privacy { margin-top: 18px; color: var(--spa-muted); font-size: .9rem; text-align: center; }
.spa-loading { padding: 50px 20px; text-align: center; color: var(--spa-muted); font-weight: 800; }

@media (max-width: 800px) {
  .spa-app { margin: 0 auto; padding: 8px; }
  .spa-shell { border-radius: 18px; }
  .spa-header,
  .spa-body { padding: 15px; }
  .spa-header-chip { display: none; }
  .spa-mode-grid,
  .spa-game-layout { grid-template-columns: 1fr; }
  .spa-mode { min-height: 0; }
  .spa-prompt { order: 2; }
  .spa-workspace { order: 1; }
  .spa-instruction-list { max-height: 300px; }
}

@media (max-width: 560px) {
  .spa-form-grid,
  .spa-play-choice,
  .spa-studio-top { grid-template-columns: 1fr; }
  .spa-title-row { align-items: center; }
  .spa-brand p { display: none; }
  .spa-coordinate-grid { --spa-cell: 39px; }
  .spa-coordinate-grid[data-size="16"] { --spa-cell: 27px; }
  .spa-coordinate-grid[data-size="24"] { --spa-cell: 24px; }
  .spa-coordinate-grid[data-size="32"] { --spa-cell: 21px; }
  .spa-coordinate-grid[data-size="45"] { --spa-cell: 15px; }
  .spa-coordinate-grid[data-size="64"] { --spa-cell: 12px; }
}
.spa-app { width:calc(100vw - 24px)!important; max-width:none!important; position:relative; left:50%; transform:translateX(-50%); padding:6px!important; background:#fff5fc; border-radius:24px; }
.spa-app .spa-board-scroll { position:relative; overflow:auto; max-height:none; padding:3px; scrollbar-width:none; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.spa-app .spa-board-scroll::-webkit-scrollbar { display:none; }
.spa-app .spa-coordinate-grid { width:100%; grid-template-columns:24px repeat(var(--spa-size),minmax(0,1fr)); grid-auto-rows:auto; }
.spa-app .spa-pixel { width:100%; height:auto; aspect-ratio:1; touch-action:none; }
.spa-app .spa-axis { min-width:0; font-size:clamp(8px,1.2vw,13px); }
.spa-app .spa-picture-preview { max-width:100%; }
.spa-app .spa-color,.spa-studio-dock .spa-color { font-size:0; padding:8px; }
.spa-app .spa-color .spa-swatch,.spa-studio-dock .spa-color .spa-swatch { width:25px;height:25px; }
.spa-app .spa-player-grid .spa-pixel { min-width:0; min-height:0; width:100%; height:100%; aspect-ratio:auto; }
.spa-app .spa-workspace { padding-bottom:82px; }
#spa-floating-zoom { position:fixed; z-index:100000; right:max(10px,env(safe-area-inset-right)); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; width:68px; padding:8px; border:2px solid #efd8fa; border-radius:22px; background:rgba(255,255,255,.98); box-shadow:0 6px 26px #5a367d35; font:600 15px Tahoma,sans-serif; color:#573568; pointer-events:auto; isolation:isolate; touch-action:manipulation; }
#spa-floating-zoom button { display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:46px;min-height:46px;padding:6px 10px;border:0;border-radius:14px;background:#f2e7ff;color:#673ea3;font:700 25px Tahoma,sans-serif;cursor:pointer;touch-action:manipulation; }
#spa-floating-zoom button[data-zoom="fit"] { background:#ffe4cf;color:#a64717; }
#spa-floating-zoom button span { font-size:14px; }
#spa-floating-zoom button:disabled { opacity:.4;cursor:default; }
#spa-floating-zoom button:focus-visible { outline:3px solid #2f80d8;outline-offset:2px; }
#spa-floating-zoom output { min-width:44px;text-align:center;font-size:13px; }
#spa-pan-joystick { position:fixed; z-index:100001; left:max(10px,env(safe-area-inset-left)); bottom:max(10px,env(safe-area-inset-bottom)); width:116px; padding:7px; border:2px solid #cce6f3; border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 7px 28px #204c6635; color:#28586f; text-align:center; font:800 13px Tahoma,sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }
#spa-pan-joystick .spa-joy-label { display:block; margin-bottom:3px; }
#spa-pan-joystick .spa-joy-base { position:relative; width:88px; height:88px; margin:auto; border:3px solid #8ec6df; border-radius:50%; background:radial-gradient(circle,#eefaff 0 24%,#d7eff9 25% 44%,#bee2f2 45% 100%); box-shadow:inset 0 4px 12px #2b708c24; touch-action:none; }
#spa-pan-joystick .spa-joy-base::before,#spa-pan-joystick .spa-joy-base::after { content:""; position:absolute; background:#76b7d3; opacity:.55; }
#spa-pan-joystick .spa-joy-base::before { width:2px; height:72px; left:41px; top:5px; }
#spa-pan-joystick .spa-joy-base::after { height:2px; width:72px; top:41px; left:5px; }
#spa-pan-joystick .spa-joy-knob { position:absolute; z-index:2; left:20px; top:20px; display:grid; place-items:center; width:42px; height:42px; border:3px solid #397e9b; border-radius:50%; background:linear-gradient(145deg,#fff,#a9d8ec); box-shadow:0 5px 10px #17465b55; font-size:20px; will-change:transform; }
.spa-studio-dock { --spa-ink:#20313b; position:fixed!important; z-index:100002; left:max(8px,env(safe-area-inset-left)); right:78px; top:max(6px,env(safe-area-inset-top)); bottom:auto; display:flex!important; flex-wrap:nowrap; gap:6px; align-items:center; min-height:68px; max-height:96px; padding:5px 7px; border:2px solid #ead8f7; border-radius:18px; color:var(--spa-ink); background:rgba(255,255,255,.98); box-shadow:0 8px 28px #47245f35; backdrop-filter:blur(10px); font-family:"Sarabun","Noto Sans Thai",Tahoma,sans-serif; font-size:13px; line-height:1.35; visibility:visible!important; opacity:1!important; }
.spa-studio-dock .spa-palette { flex:1 1 auto; min-width:260px; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:visible; margin:0; padding:4px; scrollbar-width:thin; }
.spa-studio-dock .spa-tool-panel { position:static; display:flex; grid-template-columns:none; margin:0; padding:4px; border-width:2px; box-shadow:none; }
.spa-studio-dock .spa-current-tool { min-width:78px;min-height:38px; padding:5px 7px; }
.spa-studio-dock .spa-current-tool strong { display:none; }
.spa-studio-dock .spa-tool-choices { flex-wrap:nowrap; }
.spa-studio-dock .spa-tool-choices .spa-tool { min-width:54px;min-height:38px;padding:5px 7px;font-size:18px; }
.spa-studio-dock .spa-tool-choices .spa-tool span{display:none}
.spa-studio-dock .spa-edit-actions { flex-wrap:nowrap; margin:0; }
.spa-studio-dock .spa-edit-actions .spa-tool { white-space:nowrap; }
.spa-icon-tool{width:46px;min-width:46px;font-size:19px}.spa-danger-tool{color:#9b2525!important;background:#fff0f0!important}.spa-brush-sizes{display:flex;align-items:center;gap:3px;padding-left:4px}.spa-brush-sizes b{font-size:11px}.spa-brush-sizes button{width:31px;height:31px;border:1px solid #bfcbd2;border-radius:9px;background:#fff;font-weight:900}.spa-brush-sizes button.is-active{color:#fff;background:#537ad8;border-color:#36569f}
.spa-mixer{position:relative;display:flex;align-items:center;gap:6px;min-width:max-content}.spa-color-state{display:flex;gap:4px}.spa-color-state span{display:grid;justify-items:center;font-size:9px;font-weight:800;white-space:nowrap}.spa-color-state i{display:block;width:25px;height:25px;border:2px solid #fff;border-radius:8px;box-shadow:0 0 0 1px #9daab2}.spa-custom-swatches{display:flex;gap:4px}.spa-custom-color{width:34px;height:34px;padding:0;border:3px solid #fff;border-radius:10px;background:var(--swatch);box-shadow:0 0 0 1px #aab4ba;cursor:pointer}.spa-custom-color.is-active{box-shadow:0 0 0 3px #25343c;transform:translateY(-2px)}.spa-mixer-toggle{min-height:36px;border:0;border-radius:10px;padding:6px 9px;color:#fff;background:#7551c6;font-weight:900;white-space:nowrap}.spa-mixer-sliders{position:fixed!important;z-index:100006;top:max(86px,calc(env(safe-area-inset-top) + 82px));left:max(10px,env(safe-area-inset-left));display:grid;gap:8px;width:min(420px,calc(100vw - 20px));box-sizing:border-box;padding:12px;border:2px solid #d8caed;border-radius:16px;background:#fff;box-shadow:0 12px 30px #34244e44}.spa-mixer-sliders[hidden]{display:none!important}.spa-mixer-sliders label{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:8px;font-weight:800}.spa-mixer-sliders input{width:100%}
.spa-gallery-portal { display:grid; grid-template-columns:minmax(230px,.9fr) minmax(260px,1.1fr) auto; gap:20px; align-items:center; width:100%; margin:24px 0 8px; padding:22px; border:3px solid #e7c46a; border-radius:26px; color:#3d2c24; background:linear-gradient(120deg,#fff8df,#f8e7bf 43%,#e7d2a7); box-shadow:0 12px 0 #b98d44,0 20px 38px #6b492c35; text-align:left; cursor:pointer; overflow:hidden; }
.spa-gallery-portal:hover,.spa-gallery-portal:focus-visible { transform:translateY(-3px); box-shadow:0 15px 0 #b98d44,0 24px 42px #6b492c42; outline:4px solid #7d5ce4; }
.spa-gallery-portal-copy { display:grid; gap:4px; }.spa-gallery-portal-copy small { color:#936b28; font-weight:950; letter-spacing:.12em; }.spa-gallery-portal-copy strong { font-size:clamp(21px,3vw,34px); }.spa-gallery-portal-copy em { color:#725844; font-style:normal; font-weight:700; }.spa-gallery-portal>b { padding:11px 15px; border-radius:999px; color:#fff; background:#7455d7; white-space:nowrap; }
.spa-gallery-preview { position:relative; display:flex; align-items:center; justify-content:center; min-height:126px; padding:8px; border-radius:16px; background:linear-gradient(#9e7751 0 8px,#f7f0e4 8px 100%); box-shadow:inset 0 -8px #c19b6f; }.spa-gallery-preview>i { color:#795d47; }.spa-mini-frame { position:relative; width:104px; padding:7px; border:7px ridge #ad7d37; background:#fff; box-shadow:0 6px 12px #3e2d1d38; }.spa-mini-frame canvas { display:block; width:100%; aspect-ratio:1; image-rendering:pixelated; }.spa-mini-frame.frame-0 { transform:rotate(-4deg); }.spa-mini-frame.frame-1 { z-index:2; transform:scale(1.08); }.spa-mini-frame.frame-2 { transform:rotate(4deg); }
.spa-app .spa-header { background:linear-gradient(120deg,#ff8d56,#ec71ae,#a689e9); }
.spa-app .spa-body { background:linear-gradient(145deg,#fffaf3,#fff4fb,#edfaff); }
.spa-app .spa-game-layout { grid-template-columns:minmax(200px,.55fr) minmax(0,1.45fr); }
.spa-credit { padding:16px;text-align:center;color:#6d5485;background:#f7eafd;font-size:14px; }
.spa-gallery-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.spa-gallery-head h1{margin:0}.spa-gallery-actions{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.spa-voter{background:#e4f8e9;color:#17652b;border-radius:999px;padding:9px 13px;font-weight:800}
.spa-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;align-items:start}.spa-gallery article{position:relative;background:#fff;border:2px solid #efdef5;border-radius:22px;padding:13px;text-align:center;box-shadow:0 9px 26px #39205b18;transition:transform .2s,box-shadow .2s}.spa-gallery article:hover{transform:translateY(-5px);box-shadow:0 16px 34px #39205b25}.spa-gallery article.is-top{border-color:#ffc84a;background:linear-gradient(#fffdf1,#fff)}.spa-gallery-open{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#f3f0f7;cursor:zoom-in}.spa-gallery canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated}.spa-gallery h3{margin:10px 0 3px}.spa-gallery p{margin:0 0 10px}.spa-gallery-rank{position:absolute;z-index:2;top:21px;left:21px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,#ffd74f,#ff8a32);color:#572900;border:2px solid #fff;font-weight:900;box-shadow:0 4px 10px #79440044}.spa-btn-heart{min-width:100px}.spa-gallery-dialog{width:min(90vw,760px);border:0;border-radius:24px;padding:18px;box-shadow:0 25px 80px #20143f66}.spa-gallery-dialog::backdrop{background:#211638a6;backdrop-filter:blur(5px)}.spa-gallery-dialog canvas{display:block;width:min(72vh,100%);margin:auto;aspect-ratio:1;image-rendering:pixelated}.spa-gallery-dialog h2,.spa-gallery-dialog p{text-align:center}.spa-gallery-close{display:block;margin-left:auto;border:0;border-radius:999px;padding:9px 14px;background:#302944;color:#fff;font:inherit;font-weight:800}.spa-known-student small{font-weight:500}.spa-known-student input{margin-bottom:7px}
@media(max-width:700px){.spa-gallery-head{flex-direction:column}.spa-gallery-actions{justify-content:flex-start}.spa-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.spa-gallery article{padding:8px;border-radius:16px}.spa-gallery-rank{top:14px;left:14px}.spa-gallery h3{font-size:16px}}
.spa-app input[type=color] { width:48px;height:44px;border:0;background:none;vertical-align:middle; }
@media(max-width:800px) { .spa-app .spa-game-layout { grid-template-columns:1fr; } .spa-tool-panel { top:6px; grid-template-columns:1fr; } .spa-current-tool { justify-content:center; } .spa-tool-choices { width:100%; } .spa-tool-choices .spa-tool { flex:1 1 92px; } }
@media(max-width:1000px){.spa-studio-dock{left:max(6px,env(safe-area-inset-left));right:74px}.spa-studio-dock .spa-palette{width:auto;overflow-x:auto}.spa-studio-dock .spa-current-tool{display:none}.spa-gallery-portal{grid-template-columns:1fr auto}.spa-gallery-portal-copy{grid-column:1/-1}.spa-gallery-preview{min-width:260px}}
@media(max-width:620px){#spa-pan-joystick{width:98px;padding:5px}#spa-pan-joystick .spa-joy-base{width:72px;height:72px}#spa-pan-joystick .spa-joy-base::before{height:58px;left:33px}#spa-pan-joystick .spa-joy-base::after{width:58px;top:33px}#spa-pan-joystick .spa-joy-knob{left:15px;top:15px;width:36px;height:36px}.spa-header-side{align-items:flex-end;flex-direction:column}.spa-mascot{display:none}.spa-global-user span{display:none}.spa-studio-dock{right:68px}.spa-color-state{display:none}.spa-signed-in{align-items:flex-start;flex-direction:column}.spa-gallery-portal{grid-template-columns:1fr;padding:15px}.spa-gallery-preview{min-width:0}.spa-gallery-portal>b{justify-self:start}.spa-mini-frame{width:80px}}
.spa-my-works-dialog{width:min(94vw,980px);max-height:88vh;border:0;border-radius:25px;padding:18px;background:#fffaf4;box-shadow:0 28px 90px #271b4766}.spa-my-works-dialog::backdrop{background:#23183d9e;backdrop-filter:blur(6px)}.spa-my-works-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:15px}.spa-my-works-head h2,.spa-my-works-head p{margin:0}.spa-my-works-head button{border:0;border-radius:999px;padding:9px 15px;color:#fff;background:#332b47;font:inherit;font-weight:900}.spa-my-works-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:13px;max-height:70vh;overflow:auto}.spa-my-work-card{display:grid;grid-template-columns:92px 1fr;gap:11px;align-items:center;width:100%;padding:10px;border:2px solid #e1d7ef;border-radius:17px;background:#fff;color:#263238;text-align:left;cursor:pointer}.spa-my-work-card:hover,.spa-my-work-card:focus-visible{border-color:#7655db;background:#f7f2ff;outline:3px solid #7655db33}.spa-my-work-card canvas{display:block;width:92px;height:92px;border-radius:10px;background:#fff;image-rendering:pixelated}.spa-my-work-card span{display:grid;gap:4px;min-width:0}.spa-my-work-card strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spa-my-work-card small{color:#65757f}.spa-my-work-card em{justify-self:start;padding:3px 7px;border-radius:999px;background:#f0e8ff;color:#5d3bbd;font-style:normal;font-weight:800}.spa-empty-works{grid-column:1/-1;padding:45px;text-align:center;color:#65757f;font-weight:800}
.spa-home-admin{text-align:center;margin:18px 0 4px}.spa-home-admin a{text-decoration:none}.spa-pa-nav{position:sticky;z-index:20;top:8px;display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:-4px 0 18px;padding:9px;border:2px solid #eadcff;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 8px 24px #4d347326;backdrop-filter:blur(10px)}.spa-pa-nav button,.spa-pa-nav a{border:0;border-radius:13px;padding:10px 15px;color:#51348c;background:#f0e9ff;font:inherit;font-weight:900;text-decoration:none;cursor:pointer}.spa-pa-nav .is-active{color:#fff;background:#7655d8;box-shadow:0 4px 0 #4d3498}.spa-pa-kicker{margin:0 0 5px;color:#d45529;font-weight:950;letter-spacing:.04em}.spa-pa-hearts{display:inline-block;margin-top:7px;padding:6px 10px;border-radius:999px;color:#a32654;background:#ffe9f1;font-weight:900}
.spa-floating-tools-label{flex:0 0 auto;padding:6px 8px;border-radius:10px;color:#fff;background:#7451c8;font-weight:950;white-space:nowrap}.spa-entry-tabs{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}.spa-entry-tabs button{min-height:48px;border:2px solid #d7cfe7;border-radius:13px;padding:8px;background:#fff;color:#3e3552;font:inherit;font-weight:900}.spa-entry-tabs button.is-active{border-color:#6847c7;color:#fff;background:#7655d8;box-shadow:0 4px 0 #4d3498}.spa-entry-help{margin:10px 0;padding:9px 11px;border-radius:11px;color:#284f65;background:#eaf8ff}.spa-entry-help.is-new{color:#74451d;background:#fff2dc}.spa-login-guide{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px}.spa-login-guide>*{padding:8px;border-radius:10px;background:#f3ecff}.spa-roster-picked{width:100%;border:3px solid #36a269!important;background:#eafff0!important;color:#175c34!important;font-weight:950!important}.spa-mixer-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.spa-mixer-head strong{font-size:20px}.spa-mixer-head button{border:0;border-radius:10px;padding:8px 12px;color:#fff;background:#ba3c4d;font:inherit;font-weight:900}.spa-mixed-preview{display:grid;place-items:center;min-height:86px;border:4px solid #fff;border-radius:14px;box-shadow:0 0 0 2px #66727a;font-weight:950;text-shadow:0 1px 3px #fff,0 -1px 3px #fff}.spa-mixer-sliders{border:3px solid #7655d8!important;box-shadow:0 18px 50px #34244e66!important}.spa-mixer-sliders p{margin:0;color:#56636b;font-size:12px;font-weight:750}
@media(max-width:700px){.spa-floating-tools-label{display:none}.spa-login-guide{grid-template-columns:1fr}.spa-entry-tabs{grid-template-columns:1fr}.spa-entry-tabs button{min-height:44px}}