:root{
  color-scheme:dark;
  --bg:#0b0b0b;
  --ink:#f6f2ea;
  --muted:#9a978f;
  --screen:#111317;
  --screen-edge:#363942;
  --body:#1a1b1e;
  --body-hi:#24262a;
  --button:#f0dfad;
  --button-shadow:#9c8350;
  --action:#ffad49;
  --action-shadow:#ad6725;
  --accent:#7df6c2;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100svh;overflow-x:hidden}
button{font:inherit;color:inherit}
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;padding:18px 16px 16px;background:radial-gradient(circle at 50% 46%,#17171a 0,#0b0b0b 44%,#080808 100%)}
.site-head{width:min(100%,920px);display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:2px 3px 12px}
.wordmark{color:#fff;text-decoration:none;font-size:clamp(22px,4vw,34px);font-weight:1000;letter-spacing:-.04em}
.site-kicker{color:var(--muted);font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;text-align:right}
.charm{position:relative;display:grid;place-items:center;padding-top:22px;filter:drop-shadow(0 28px 56px rgba(0,0,0,.54))}
.loop{position:absolute;top:0;width:66px;height:44px;border:10px solid #4a4b50;border-bottom-width:8px;border-radius:34px 34px 12px 12px;background:#17181b;box-shadow:inset 0 0 0 2px #6d6f75,0 3px 0 #080808;z-index:0}
.loop i{position:absolute;inset:8px 13px;border-radius:20px;background:#0b0b0b}
.charm-body{position:relative;z-index:1;width:min(94vw,490px);padding:20px 20px 17px;border:1px solid #34363b;border-radius:42px;background:linear-gradient(155deg,var(--body-hi),#121316 58%,#191a1d);box-shadow:inset 0 1px 0 #ffffff12,inset 0 -6px 18px #0008,0 0 0 7px #090909}
.screen-shell{padding:11px 11px 13px;border-radius:28px;background:#08090b;box-shadow:inset 0 0 0 1px #3a3d43,inset 0 0 0 7px #111216,0 7px 22px #0008}
.screen-status{height:27px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;color:#d9dde5;font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-align:center;text-transform:uppercase;user-select:none}
.status-home{border:0;background:none;color:var(--accent);font:1000 10px/1 ui-monospace,monospace;padding:6px;cursor:pointer;text-align:left}
#screenCount{text-align:right;opacity:.68;padding-right:5px}
.screen{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:15px;background:#111317;box-shadow:inset 0 0 0 2px #282b31,0 0 26px #0009;image-rendering:pixelated}
.launcher{position:absolute;inset:0;padding:14px 14px 10px;display:grid;grid-template-rows:auto 1fr auto;gap:9px;background:radial-gradient(circle at 80% 12%,#2a2442 0,#161525 32%,#111317 68%),linear-gradient(#111317,#111317)}
.launcher-copy{display:grid;gap:2px}
.launcher-copy b{font:1000 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em}
.launcher-copy span{font:700 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a8a8b5}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:9px}
.app-icon{min-width:0;border:0;background:transparent;color:#eee;display:grid;justify-items:center;gap:5px;padding:0;cursor:pointer;outline:none}
.app-tile{position:relative;width:min(72px,18vw);aspect-ratio:1;border-radius:17px;display:grid;place-items:center;background:var(--tile,#313440);box-shadow:inset 0 0 0 1px #ffffff26,inset 0 -9px 18px #0002,0 6px 13px #0005;transition:transform .09s,outline .09s,filter .09s}
.app-icon.selected .app-tile{outline:3px solid #f6e8ad;outline-offset:2px;transform:translateY(-1px);filter:brightness(1.12)}
.app-glyph{font:1000 clamp(20px,7vw,33px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:0 2px 0 #0005}
.app-icon small{display:block;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#dfe0e5;letter-spacing:.03em}
.launcher-hint{font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center;color:#777b86;letter-spacing:.08em}
.app-stage{position:absolute;inset:0;background:#000}
.app-stage iframe{width:100%;height:100%;border:0;display:block;background:#000;image-rendering:pixelated}
.screen-back{position:absolute;left:7px;top:7px;z-index:8;width:26px;height:26px;border:1px solid #ffffff30;border-radius:50%;background:#0009;color:#fff;font:1000 22px/20px system-ui;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);opacity:.7}
.screen-back:active{transform:translateY(1px)}
.controls{margin:14px auto 0;display:none;grid-template-columns:1fr 92px;align-items:center;gap:18px;width:min(100%,350px)}
.stick{position:relative;width:126px;height:126px;border-radius:50%;justify-self:center;touch-action:none;user-select:none;background:radial-gradient(circle at 44% 38%,#34373e 0,#22252b 56%,#121317 100%);box-shadow:inset 0 0 0 2px #4c5058,inset 0 -12px 25px #0007,0 8px 0 #08090b,0 13px 24px #0009}
.stick-ring{position:absolute;inset:13px;border:1px solid #ffffff14;border-radius:50%;box-shadow:inset 0 0 0 1px #0007}
.stick-mark{position:absolute;z-index:1;color:#f0dfad;opacity:.72;font:900 13px/1 system-ui;pointer-events:none;text-shadow:0 2px 0 #0008;user-select:none}
.stick-up{left:50%;top:10px;transform:translateX(-50%)}
.stick-right{right:10px;top:50%;transform:translateY(-50%)}
.stick-down{left:50%;bottom:9px;transform:translateX(-50%)}
.stick-left{left:10px;top:50%;transform:translateY(-50%)}
.stick-knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#6b707a 0,#3d4149 42%,#282b31 100%);box-shadow:inset 0 1px 0 #ffffff35,inset 0 -8px 14px #0005,0 7px 11px #0008;transform:translate(0,0);will-change:transform;pointer-events:none}
.stick.active .stick-knob{filter:brightness(1.08)}
.side-controls{height:100%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto;align-content:center;justify-items:center;gap:16px 10px}
.round-button{width:58px;height:58px;border-radius:50%;border:0;color:#111;font-weight:1000;font-size:17px;touch-action:none;cursor:pointer;user-select:none}
.a-button{background:linear-gradient(#ffbd60,#ffa13c);box-shadow:inset 0 1px 0 #fff8,0 6px 0 #a76524}
.b-button{background:linear-gradient(#cdd6e7,#929caf);box-shadow:inset 0 1px 0 #fff9,0 6px 0 #535967}
.round-button:active,.round-button.held{transform:translateY(4px)}
.a-button:active,.a-button.held{box-shadow:inset 0 1px 0 #fff8,0 2px 0 #a76524}
.b-button:active,.b-button.held{box-shadow:inset 0 1px 0 #fff9,0 2px 0 #535967}
.home-button{grid-column:1/3;width:30px;height:30px;border-radius:50%;border:1px solid #62656d;background:#25272c;color:#8b8f99;box-shadow:0 4px 0 #090909;cursor:pointer}
.home-button:active{transform:translateY(2px);box-shadow:0 2px 0 #090909}
.app-caption{min-height:34px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#8c8f96;font:800 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;letter-spacing:.07em}
.app-caption b{color:#c8cbd2}.app-caption span{text-align:right}
.site-foot{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 0 0;color:#65676d;font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}.site-foot .dot{opacity:.45}
@media(max-width:560px){
  .page{padding:10px 8px 12px;align-items:start}
  .site-head{padding:2px 8px 8px}.site-kicker{font-size:8px;max-width:150px}
  .charm{padding-top:18px;width:100%}.loop{width:58px;height:38px;border-width:8px}
  .charm-body{width:min(96vw,430px);padding:13px;border-radius:34px}.screen-shell{padding:8px 8px 10px;border-radius:24px}.screen-status{height:24px}
  .launcher{padding:11px 11px 8px}.app-grid{gap:7px}.app-tile{width:min(66px,19vw);border-radius:15px}.app-icon small{font-size:7px;max-width:70px}
  .controls{margin-top:10px;grid-template-columns:1fr 86px;gap:10px;width:min(100%,320px)}
  .stick{width:116px;height:116px}.stick-knob{width:58px;height:58px;margin:-29px}.round-button{width:52px;height:52px;font-size:15px}.side-controls{gap:12px 8px}
  .app-caption{font-size:8px;margin-top:5px}.site-foot{font-size:8px;padding-top:8px}
}
@media(max-height:750px) and (orientation:landscape){
  .page{display:flex;gap:18px;justify-content:center;align-items:center;padding:10px}.site-head,.site-foot{display:none}.charm{padding-top:14px}.charm-body{width:min(63vh,430px);padding:10px}.screen-status{height:21px}.controls{position:absolute;left:calc(100% + 20px);top:52%;transform:translateY(-50%);width:250px;grid-template-columns:140px 90px}.stick{width:112px;height:112px}.app-caption{display:none}
}

/* TinySlop input policy: keyboard on desktop, analog stick + A/B on touch devices. */
@media (pointer:coarse){
  .controls{display:grid}
}
@media (hover:hover) and (pointer:fine){
  .controls{display:none!important}
  .charm-body{padding-bottom:12px}
  .app-caption{margin-top:10px}
}


/* v5 deterministic TinySlop input modes */
/* Desktop: keyboard does the game input. Only the tiny home button remains below the screen. */
html.desktop-ui .controls{
  display:flex!important;
  width:100%!important;
  margin:10px auto 0!important;
  justify-content:center!important;
  align-items:center!important;
  gap:0!important;
}
html.desktop-ui .controls .stick,
html.desktop-ui .controls .round-button{display:none!important}
html.desktop-ui .controls .side-controls{
  display:flex!important;
  width:auto!important;
  height:auto!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}
html.desktop-ui .controls .home-button{
  display:block!important;
  grid-column:auto!important;
  margin:0!important;
}

/* Phone/tablet: always show the real analog-style stick plus A/B and home. */
html.touch-ui .controls{
  display:grid!important;
  grid-template-columns:1fr 92px!important;
  align-items:center!important;
  gap:18px!important;
  width:min(100%,350px)!important;
  margin:12px auto 0!important;
}
html.touch-ui .controls .stick{display:block!important}
html.touch-ui .controls .round-button{display:block!important}
html.touch-ui .controls .side-controls{
  height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  justify-items:center!important;
  gap:16px 10px!important;
}
html.touch-ui .controls .home-button{display:block!important;grid-column:1/3!important}

/* SlopWorm already owns its touch interaction. Do not layer a fake movement scheme on top. */
html.touch-ui.native-touch-app .controls{
  display:flex!important;
  justify-content:center!important;
  width:100%!important;
}
html.touch-ui.native-touch-app .controls .stick,
html.touch-ui.native-touch-app .controls .round-button{display:none!important}
html.touch-ui.native-touch-app .controls .side-controls{
  display:flex!important;
  width:auto!important;
  height:auto!important;
  align-items:center!important;
  justify-content:center!important;
}
html.touch-ui.native-touch-app .controls .home-button{
  grid-column:auto!important;
  margin:0!important;
}

@media(max-width:560px){
  html.touch-ui .controls{grid-template-columns:1fr 86px!important;gap:10px!important;width:min(100%,320px)!important}
  html.touch-ui .stick{width:116px!important;height:116px!important}
  html.touch-ui .stick-knob{width:58px!important;height:58px!important;margin:-29px!important}
  html.touch-ui .round-button{width:52px!important;height:52px!important;font-size:15px!important}
  html.touch-ui .side-controls{gap:12px 8px!important}
}