/* The cartoon story look (?toon): deep teal night market, lantern red-orange to press, cream ink.
   Nunito for words, Lilita One for heads (the Silly Ninja Defense pair). Everything is scoped to
   html[data-look="toon"], so the pixel game never sees it. */
html[data-look="toon"] {
  --bg: #0d4652; --panel: #0a3440; --ink: #fff4dc; --dim: #a9d3d6; --tile: #16606e; --edge: #072a33;
  --go: #ff5a36; --go-ink: #fff8ea; --amber: #ffc44f; --red: #ff5a47;
  --px: "Nunito", ui-rounded, system-ui, sans-serif; --head: "Lilita One", "Nunito", system-ui, sans-serif;
  --toon-ink: #14213d;
}
html[data-look="toon"] body { font: 700 17px/1.4 var(--px); -webkit-font-smoothing: antialiased; font-smooth: auto; }
html[data-look="toon"] h1, html[data-look="toon"] h2, html[data-look="toon"] #resRank, html[data-look="toon"] .bar .lvl { font-family: var(--head); letter-spacing: .02em; }

/* buttons: fat rounded, an ink outline and a hard drop like a sticker */
html[data-look="toon"] button { border: 3px solid var(--toon-ink); border-image: none; border-radius: 14px; background: #1b7383; color: var(--ink);
  font: 400 18px/1 var(--head); letter-spacing: .03em; padding: 0 18px; min-height: 50px; box-shadow: 0 4px 0 var(--toon-ink); image-rendering: auto; }
html[data-look="toon"] button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--toon-ink); }
html[data-look="toon"] button.go { background: var(--go); color: var(--go-ink); font-size: 24px; min-height: 60px; border-width: 3px; border-image: none; text-shadow: 0 2px 0 rgba(120,20,0,.45); }
html[data-look="toon"] button.go:hover, html[data-look="toon"] button.go:active { border-image: none; filter: brightness(1.06); }
html[data-look="toon"] button.icon { border: 0; box-shadow: none; background: none; color: var(--ink); font-family: var(--px); }
html[data-look="toon"] button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* bars */
html[data-look="toon"] .bar { background: var(--panel); box-shadow: none; }
html[data-look="toon"] .bar.top { box-shadow: 0 3px 0 var(--toon-ink); }
html[data-look="toon"] #controls { box-shadow: 0 -3px 0 var(--toon-ink); }
html[data-look="toon"] .chip { background: var(--edge); border-radius: 10px; font: 800 15px var(--px); }
html[data-look="toon"] .bar .lvl #lvlNum { display: none; }
html[data-look="toon"] .bar .lvl { font-size: clamp(15px, 4.6vw, 20px); white-space: nowrap; color: var(--amber); text-shadow: 0 2px 0 var(--toon-ink); }
html[data-look="toon"] kbd.glyph, html[data-look="toon"] kbd.cap { font: 900 13px/1 var(--px); background: var(--tile); border-radius: 7px; box-shadow: 0 3px 0 var(--toon-ink), 0 0 0 2px var(--toon-ink); }
html[data-look="toon"]:not(.touch) .act.on kbd.glyph { background: var(--go); color: var(--go-ink); box-shadow: 0 3px 0 var(--toon-ink), 0 0 0 2px var(--toon-ink); }
html[data-look="toon"] .act { font-family: var(--head); }
html[data-look="toon"] .touch .act, html[data-look="toon"].touch .act { border-radius: 14px; border-image: none; }
html[data-look="toon"].touch .act.on, html[data-look="toon"].touch .act.always.on { border: 3px solid var(--toon-ink); border-image: none; background: var(--go); color: var(--go-ink); }
html[data-look="toon"] #dpad .arm, html[data-look="toon"] #dpad .hub { border-radius: 10px; background: var(--tile); box-shadow: inset 0 -3px 0 var(--edge), 0 0 0 2px var(--toon-ink); }
html[data-look="toon"] #dpad .arm.lit { background: var(--go); }
html[data-look="toon"] #keys img { image-rendering: pixelated; }

/* popups: a cream card with an ink outline over a teal wash */
html[data-look="toon"] .screen.over { background: rgba(4,30,38,.72); }
html[data-look="toon"] .over .panel { border: 4px solid var(--toon-ink); border-image: none; border-radius: 22px; background: #fff4dc; color: var(--toon-ink); box-shadow: 0 8px 0 var(--toon-ink); padding: 18px 20px; image-rendering: auto; }
html[data-look="toon"] .over .panel h2 { color: var(--toon-ink); }
html[data-look="toon"] .over .panel button:not(.go) { background: #d8eef0; color: var(--toon-ink); }
html[data-look="toon"] .keysHelp kbd { color: #c23a1e; font-family: var(--px); font-weight: 900; }
html[data-look="toon"] #resRank { color: var(--go); text-shadow: 0 4px 0 var(--toon-ink); }
html[data-look="toon"] #resStats dd { font-family: var(--px); }
html[data-look="toon"] #resStats dt, html[data-look="toon"] #bResLevels { }
html[data-look="toon"] .over .panel dd { color: var(--toon-ink); }
html[data-look="toon"] #resStats dt, html[data-look="toon"] .over .panel dt, html[data-look="toon"] .over .panel .dim, html[data-look="toon"] .over .panel p { color: #3d5a66; }
html[data-look="toon"] #resStats .total { border-top: 3px solid var(--toon-ink); }
html[data-look="toon"] .resArt { object-fit: contain; background: radial-gradient(circle at 50% 70%, #2a8090, #0d4652 70%); border-radius: 14px; border: 3px solid var(--toon-ink); image-rendering: auto; max-height: 24vh; padding-top: 6px; }
html[data-look="toon"] .screen:not(.over) { background: var(--bg); }
html[data-look="toon"] #flash { background: rgba(255,90,54,.25); }
html[data-look="toon"] #flash .card { display: none; }

/* the title: lanterns strung across the top, the cast on stage, the name big in the middle */
.toon-hero { display: none; }
html[data-look="toon"] #title { background: radial-gradient(ellipse at 50% 85%, #1f8796 0%, #0d4652 55%, #072a33 100%); }
html[data-look="toon"] #title .art, html[data-look="toon"] #title h1 picture { display: none; }
html[data-look="toon"] #title .menu { background: var(--panel); box-shadow: 0 -3px 0 var(--toon-ink); }
html[data-look="toon"] .toon-hero { display: block; position: absolute; inset: 0 0 var(--menu-h, 0px) 0; overflow: hidden; pointer-events: none; }
.toon-hero .lights { position: absolute; top: -4%; width: 40%; max-width: 520px; animation: sway 4s ease-in-out infinite; transform-origin: 50% 0; }
.toon-hero .lights.l { left: -4%; } .toon-hero .lights.r { right: -4%; animation-delay: -2s; }
.toon-hero .who { position: absolute; bottom: 4%; height: min(56%, 520px); width: auto; transform-origin: 50% 100%; animation: breathe 3s ease-in-out infinite; filter: drop-shadow(0 8px 0 rgba(4,24,32,.35)); }
.toon-hero .mochi { left: 4%; z-index: 1; } .toon-hero .bao { left: 24%; height: min(44%, 420px); animation-delay: -1s; }
.toon-hero .wasabi { right: 5%; height: min(64%, 600px); animation: boss 2.4s ease-in-out infinite; }
.toon-hero .guard { right: 25%; height: min(46%, 440px); animation-delay: -1.6s; }
.toon-hero .name { position: absolute; left: 0; right: 0; top: 20%; text-align: center; z-index: 2; }
html[data-look="toon"] #title .toon-hero h1 { position: static; line-height: .9; display: block; margin: 0; font: 400 clamp(44px, 9.5vw, 120px)/.9 var(--head); color: #fff4dc; letter-spacing: .01em;
  -webkit-text-stroke: 3px var(--toon-ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--toon-ink); }
html[data-look="toon"] #title .toon-hero h1::after { display: none; }
html[data-look="toon"] #title .toon-hero h1 span { display: block; color: var(--go); }
.toon-hero .chap { display: inline-block; margin-top: 16px; padding: 6px 16px 5px; border: 3px solid var(--toon-ink); border-radius: 12px; background: var(--amber); color: var(--toon-ink);
  font: 400 clamp(16px, 2.4vw, 24px)/1.1 var(--head); box-shadow: 0 4px 0 var(--toon-ink); transform: rotate(-2deg); }
@keyframes sway { 50% { transform: rotate(1.6deg) } }
@keyframes breathe { 50% { transform: scale(1.02, .98) } }
@keyframes boss { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-2%) rotate(-1.5deg) } }
@media (orientation: portrait) {
  .toon-hero .lights { width: 70%; }
  .toon-hero .name { top: 13%; }
  .toon-hero .who { height: min(34%, 330px); bottom: 3%; }
  .toon-hero .mochi { left: 2%; } .toon-hero .bao { display: none; } .toon-hero .guard { display: none; }
  .toon-hero .wasabi { right: 0; height: min(42%, 400px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .toon-hero .name { top: 6%; }
  html[data-look="toon"] #title .toon-hero h1 { font-size: clamp(36px, 12vh, 64px); }
  .toon-hero .chap { margin-top: 8px; font-size: 15px; }
  .toon-hero .bao, .toon-hero .guard { display: none; }
  .toon-hero .who { height: 62%; } .toon-hero .wasabi { height: 70%; }
  .toon-hero .lights { width: 26%; }
}
@media (prefers-reduced-motion: reduce) { .toon-hero * { animation: none !important } }

/* the story's dialogue box in this look */
html[data-look="toon"] .dlg { --dlg-ink: #14213d; --dlg-paper: #fff4dc; --dlg-edge: #14213d; --dlg-radius: 18px; --dlg-font: "Nunito", ui-rounded, system-ui, sans-serif;
  --dlg-display: "Lilita One", "Nunito", sans-serif; --dlg-portrait: min(46vh, 440px); --dlg-box-w: 820px;
  background: linear-gradient(to top, rgba(4,24,32,.6), rgba(4,24,32,0) 55%); }
html[data-look="toon"] .dlg-box { font-weight: 700; box-shadow: 0 6px 0 #14213d; }
html[data-look="toon"] .dlg-portrait img { filter: drop-shadow(0 6px 0 rgba(4,24,32,.4)); }
@media (max-width: 600px) { html[data-look="toon"] .dlg { --dlg-portrait: 30vh } html[data-look="toon"] .dlg-portrait { bottom: 92px; } }
@media (max-height: 500px) { html[data-look="toon"] .dlg { --dlg-portrait: 58vh } html[data-look="toon"] .dlg-box { min-height: 0; padding: 14px 16px 12px; font-size: 16px; } }

/* ?tweaks */
#tweaks { position: fixed; left: 8px; top: calc(60px + var(--safe-t)); z-index: 2000; background: rgba(7,42,51,.92); border: 2px solid #14213d; border-radius: 12px; padding: 6px 8px; display: grid; gap: 4px; font: 800 13px var(--px, system-ui); color: #fff4dc; }
#tweaks .tw-row { display: flex; align-items: center; gap: 4px; }
#tweaks .tw-row span { width: 44px; }
#tweaks button { min-height: 28px; padding: 0 8px; font: 800 12px var(--px, system-ui); border-radius: 8px; box-shadow: none; border: 2px solid #14213d; background: #16606e; }
#tweaks button.on { background: #ff5a36; }

/* level select: sticker cards with the map in its chapter's colours */
html[data-look="toon"] #levelList button { border: 3px solid var(--toon-ink); border-image: none; border-radius: 16px; background: #fff4dc; color: var(--toon-ink);
  box-shadow: 0 4px 0 var(--toon-ink); font: 400 17px/1.1 var(--head); min-height: 0; padding: 8px 10px 10px; image-rendering: auto; }
html[data-look="toon"] #levelList button:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--toon-ink); }
html[data-look="toon"] #levelList button:active:not([disabled]) { transform: translateY(3px); box-shadow: 0 1px 0 var(--toon-ink); }
html[data-look="toon"] #levelList .thumb { background: #0c3440; border-radius: 10px; border: 2px solid var(--toon-ink); }
html[data-look="toon"] #levelList .thumb canvas { image-rendering: auto; }
html[data-look="toon"] #levelList .n { color: #c23a1e; }
html[data-look="toon"] #levelList .best { color: #3d5a66; font-family: var(--px); font-weight: 900; }
html[data-look="toon"] #levelList .best.ghost { color: #c23a1e; }
html[data-look="toon"] #levelList li.chapter { font-size: 24px; color: var(--ink); text-shadow: 0 2px 0 var(--toon-ink); }
html[data-look="toon"] #levelList li.chapter span { color: var(--amber); font-family: var(--head); }
html[data-look="toon"] #levelList button[disabled] { opacity: .55; filter: saturate(.4); }

/* the packing screen, how to play, the briefing card: the same cream stickers, no pixel frames */
html[data-look="toon"] #loShelf .offer, html[data-look="toon"] .demo, html[data-look="toon"] .guard-card, html[data-look="toon"] .row-i, html[data-look="toon"] .ctl-col,
html[data-look="toon"] #loBag .slot { border: 3px solid var(--toon-ink); border-image: none; border-radius: 14px; background: #fff4dc; color: var(--toon-ink); box-shadow: 0 4px 0 var(--toon-ink); image-rendering: auto; }
html[data-look="toon"] #loBag .slot { background: #d8eef0; }
html[data-look="toon"] #loBag .slot.full { border-image: none; background: #fff4dc; }
html[data-look="toon"] #loShelf .offer *, html[data-look="toon"] .guard-card *, html[data-look="toon"] .row-i *, html[data-look="toon"] .ctl-col * { color: inherit; }
html[data-look="toon"] #loShelf .offer .dim, html[data-look="toon"] .guard-card .dim, html[data-look="toon"] .row-i .dim { color: #3d5a66; }
html[data-look="toon"] #brief { border: 4px solid var(--toon-ink); border-image: none; border-radius: 22px; background: #fff4dc; color: var(--toon-ink); box-shadow: 0 8px 0 var(--toon-ink); image-rendering: auto; }
html[data-look="toon"] #brief * { color: inherit; }

/* how to play */
html[data-look="toon"] .demo, html[data-look="toon"] .guard-card, html[data-look="toon"] .row-i, html[data-look="toon"] .ctl-col { padding: 10px; }
html[data-look="toon"] .demo-cv { background: var(--edge); border-radius: 10px; border: 2px solid var(--toon-ink); overflow: hidden; }
html[data-look="toon"] .demo-cv canvas, html[data-look="toon"] .how-lead img, html[data-look="toon"] .guard-card img, html[data-look="toon"] .row-i img { image-rendering: auto; }
html[data-look="toon"] .demo figcaption span, html[data-look="toon"] .stat, html[data-look="toon"] .row-i span, html[data-look="toon"] .guard-txt p { color: #3d5a66; }
html[data-look="toon"] .demo-tag { background: var(--toon-ink); color: #fff4dc; border-radius: 8px; }
html[data-look="toon"] .how-lead img { max-height: 40vh; object-fit: contain; background: radial-gradient(circle at 50% 70%, #2a8090, #0d4652 70%); border-radius: 18px; border: 3px solid var(--toon-ink); }
html[data-look="toon"] .guard-card img { object-fit: contain; background: #d8eef0; border-radius: 12px; }
html[data-look="toon"] .row-i img, html[data-look="toon"] .row-i .wicon { object-fit: contain; background-color: #d8eef0; border-radius: 10px; }
html[data-look="toon"] .stat i { background: linear-gradient(90deg, #c23a1e calc(var(--v) * 100%), #d8eef0 0); }
html[data-look="toon"] .guard-txt .tag { color: #c23a1e; }
html[data-look="toon"] .how-h { color: var(--amber); font-family: var(--head); font-weight: 400; }
html[data-look="toon"] .demo figcaption b, html[data-look="toon"] .row-i b, html[data-look="toon"] .ctl-col > b, html[data-look="toon"] .guard-txt b { color: var(--toon-ink); }
html[data-look="toon"] .how-lead img { max-width: 420px; justify-self: center; }