* { box-sizing: border-box }
:root { color-scheme: light; font-family: system-ui,sans-serif; background: #fff0d8; color: #41232b; --accent:#a52743 }
body { margin:0; height:100dvh; display:grid; place-items:center; overflow:hidden; background:#35232a }
[hidden] { display:none !important }
#arena { position:relative; width:min(100vw,calc(100dvh * 9 / 16)); aspect-ratio:9/16; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 32%,#fff7df 8%,#ffe1b7 63%,#f8bb93 100%) }
#board { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair }
#hud { position:absolute; inset:max(15px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) auto max(16px,env(safe-area-inset-left)); display:flex; justify-content:space-between; align-items:start; pointer-events:none }
#hud>div:first-child { display:grid; gap:2px; min-width:126px }
.eyebrow { font-size:.69rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; color:var(--accent) }
#score { font-weight:950; font-size:clamp(2.2rem,6vw,3.3rem); line-height:1; font-variant-numeric:tabular-nums }
#target,#ammo-count { color:#694238; font-size:.76rem; font-weight:800 }
.meter { width:115px; height:5px; border-radius:6px; background:#a2553940; overflow:hidden; margin-top:5px }
.meter i { display:block; height:100%; width:0; background:var(--accent); border-radius:inherit; transition:width .2s }
.controls { display:grid; grid-template-columns:repeat(2,46px); gap:8px; pointer-events:auto }
#finish { grid-column:1/-1 }
button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:45px; padding:.7em 1em; border:1px solid transparent; border-radius:13px; color:#fffaf1; background:var(--accent); box-shadow:0 4px 0 #0005; cursor:pointer; font:inherit; font-weight:850; line-height:1.1 }
button:hover:not(:disabled) { filter:brightness(1.12) }
button:active:not(:disabled) { transform:translateY(2px); box-shadow:0 1px 0 #0005 }
button:focus-visible { outline:3px solid #6d263c; outline-offset:3px }
button svg { width:19px; height:19px; flex:none }
button.secondary { background:#aa2d49; color:#fffaf1; border-color:#82213b }
button.icon { width:46px; padding:0 }
button:disabled { color:#694c45; background:#f2d8c5; border-color:#c69c88; cursor:default }
#ammo { position:absolute; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:grid; justify-items:center; gap:5px; pointer-events:none }
#cartridges { display:flex; gap:5px }
#cartridges i { width:8px; height:13px; border:1px solid #9b5147; border-radius:4px 4px 2px 2px; background:var(--accent); box-shadow:0 0 8px #ad355326 }
#cartridges i.spent { background:transparent; opacity:.42; box-shadow:none }
#ammo.low #ammo-count { color:#981f36 }
#guide { position:absolute; top:clamp(108px,21vh,146px); left:50%; width:max-content; max-width:calc(100% - 24px); transform:translateX(-50%); display:grid; gap:2px; padding:.6em 1em; border:1px solid #cc8d72; border-radius:12px; background:#fff7e8f5; text-align:center; pointer-events:none }
#guide span { color:#6e4840; font-size:.79rem }
#overlay { position:absolute; inset:0; display:grid; place-items:center; padding:12px; background:#5823325e }
#panel { width:min(100%,500px); max-height:100%; overflow:auto; padding:clamp(16px,4vh,35px) clamp(14px,4vw,36px); text-align:center; background:#fff5e6; border:1px solid #ca836b; border-radius:25px; box-shadow:0 18px 65px #5a20304d }
#panel:focus { outline:none }
#panel h1,#panel h2 { font-size:clamp(1.7rem,7vmin,3rem); letter-spacing:-.06em; margin:.13em 0 .23em; line-height:1; font-weight:950 }
#panel h1 { font-size:clamp(2.6rem,10vmin,4.45rem); text-transform:uppercase }
#panel h1 span { color:var(--accent) }
#panel p { color:#6e4840; margin:.45em auto 1.1em; font-size:.94rem }
.hero { position:relative; margin:0 auto 10px; width:145px; height:clamp(54px,17vh,120px); display:grid; place-items:center; background:radial-gradient(ellipse,#f2a7476b,transparent 67%) }
.hero img { position:absolute; height:83%; width:72%; object-fit:contain; filter:drop-shadow(0 6px 7px #7e322651) }
.hero img:first-child { transform:translateX(-31px) rotate(-19deg) scale(.72) }
.hero img:nth-child(2) { transform:translateX(33px) rotate(19deg) scale(.76) }
.hero img:last-child { transform:rotate(-8deg) }
.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.levels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:0 0 16px }
.tile { flex-direction:column; gap:4px; min-height:64px; padding:4px }
.tile img,.tile svg { width:24px; height:24px; object-fit:contain }
.tile:disabled svg { width:17px; height:17px }
.catalog { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin:12px 0 18px }
.catalog div { display:grid; justify-items:center; gap:3px; font-size:clamp(.58rem,2.6vw,.77rem); color:#694238 }
.catalog img { height:33px; width:100%; object-fit:contain }
.catalog .locked img { opacity:.48; filter:saturate(.25) }
.catalog b { color:var(--accent) }
.reward { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; margin:0 0 13px; border-radius:10px; border:1px solid #dfa287; background:#ffead5; font-size:.85rem }
.reward img { width:28px; height:28px; object-fit:contain }
#loading { position:absolute; inset:0; display:grid; place-items:center; color:#a52743; background:#fff0d8; font-weight:900 }
@media(max-height:405px) {
  #panel { padding-block:12px }
  .hero { height:54px; margin-bottom:4px }
  #panel p { margin-bottom:.65em }
  #guide { top:88px }
  #ammo { left:auto; right:max(16px,env(safe-area-inset-right)); transform:none }
}
@media(prefers-reduced-motion:reduce) { .meter i { transition:none } }
/* Generated skins use fixed corner slices so they fit tiles, menus and HUD controls. */
#panel {
  border:18px solid transparent;
  border-image:url(assets/smash-sherbet-panel.png) 80 fill / 18px stretch;
  background:none;
  box-shadow:none;
  padding:clamp(10px,2.6vh,23px) clamp(5px,2vw,18px);
}
button:not(:disabled) {
  border:9px solid transparent;
  border-image:url(assets/smash-sherbet-button.png) 42 78 fill / 9px stretch;
  background:none;
  box-shadow:none;
  padding:.35em .52em;
}
button.secondary:not(:disabled) { color:#fffaf1; filter:saturate(.73) brightness(.95) }
button.secondary:hover:not(:disabled) { filter:saturate(.85) brightness(1.08) }
button.icon:not(:disabled),button.tile:not(:disabled) { padding:0 }
.catalog small { font-size:.62rem; color:#825a4d }
.catalog { row-gap:12px }
.profile { display:grid; justify-items:center; gap:4px; margin:10px auto 13px }
.profile small { color:#694238; font-size:.76rem }
.profile .meter { width:min(175px,80%); margin-top:2px }
#panel:is([data-screen="levels"],[data-screen="shop"],[data-screen="collection"]) {
  height:min(100%,540px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#panel:is([data-screen="levels"],[data-screen="shop"],[data-screen="collection"]) .actions {
  flex:none;
  margin-top:12px;
}
.menu-scroll {
  position:relative;
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  padding:4px;
}
.menu-scroll::-webkit-scrollbar { display:none }
.menu-scroll { cursor:grab; user-select:none; touch-action:none }
.menu-scroll > :first-child { transition:transform .28s cubic-bezier(.2,.7,.3,1) }
.menu-scroll.dragging > :first-child { transition:none }
@media(prefers-reduced-motion:reduce) { .menu-scroll > :first-child { transition:none } }
.menu-scroll.dragging,.menu-scroll.dragging button { cursor:grabbing }
.menu-scroll img { -webkit-user-drag:none }
.menu-scroll button:disabled { pointer-events:none }
.menu-scroll:focus-visible { outline:2px solid #8f263f; border-radius:8px }
.menu-scroll .levels,.menu-scroll .guns { margin:0 }
.menu-scroll .catalog { grid-template-columns:1fr; gap:6px; margin:0 }
.menu-scroll .catalog div {
  grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center;
  justify-items:start;
  min-height:53px;
  padding:6px 8px;
  gap:7px;
  font-size:.75rem;
  border-bottom:1px solid #b4644259;
}
.levels .tile { min-height:45px; gap:1px }
.levels .tile small { font-size:.7rem }
.reward { margin-inline:3px }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:12px 0 }
.stats div { background:#ffe6cf; border-radius:9px; padding:8px 3px; display:grid; gap:4px }
.stats dt { font-size:.67rem; color:#694238 }
.stats dd { margin:0; font-weight:900; color:var(--accent) }
.records { padding:0; margin:0 0 12px; list-style:none; text-align:left }
.records li { display:flex; justify-content:space-between; padding:4px 7px; border-bottom:1px solid #b4644259; font-size:.81rem }
#panel h3 { margin:8px 0 4px; font-size:.9rem }
#panel[data-screen="home"] .actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:250px;
  margin-inline:auto;
  gap:5px;
}
.advance { margin:0 0 12px }
.advance button { min-width:155px }
#panel .payout { margin:0; font-weight:850; color:#8f263f }
#panel .wallet { font-weight:850; color:#8f263f }
.guns { display:grid; gap:7px; margin:0 0 14px; text-align:left }
.gun { display:grid; grid-template-columns:minmax(55px,.75fr) minmax(100px,1.25fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid #dfa287; border-radius:10px; background:#ffead5 }
.gun img { width:100%; max-height:58px; object-fit:contain }
.gun small { display:block; margin-top:3px; color:#694238; font-size:.74rem }
.gun button { font-size:.78rem; white-space:nowrap }
.gun button svg { display:none }
@media(max-width:355px) {
  .gun { grid-template-columns:48px minmax(0,1fr) auto; gap:5px; padding:5px }
  .gun button { padding-inline:2px }
}
@media(max-width:355px) {
  #panel[data-screen="home"] .actions button { gap:4px; padding-inline:0; font-size:.83rem }
  #panel[data-screen="home"] .actions svg { width:15px }
}