:root {
  --paper: #efe6d2; --ink: #1c1813; --red: #d63c22; --red-deep: #a92c18; --danger: #ff6a1a;
  --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }
#game { position: fixed; inset: 0; overflow: hidden }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent }
[hidden] { display: none !important }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none }
.hp { position: absolute; top: calc(14px + var(--safe-t)); left: calc(14px + var(--safe-l)); width: min(44vw, 260px) }
.tag { display: block; font: 900 10px/1 Arial, sans-serif; letter-spacing: .22em; margin: 0 0 5px 3px }
.hp-track { position: relative; height: 18px; background: rgba(28,24,19,.12); border: 3px solid var(--ink); border-radius: 3px 9px 3px 9px; transform: skewX(-12deg); overflow: hidden;
  box-shadow: 3px 3px 0 var(--ink) }
.hp-track i { position: absolute; inset: 0; transform-origin: left center; transition: none }
#hp-ghost { background: #f7d9a8 }
#hp-fill { background: var(--red); background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(28,24,19,.45) calc(10% - 2px) 10%) }
.hp.hurt .hp-track { animation: hpHit .32s cubic-bezier(.2,.9,.3,1) }
.hp.hurt .tag { animation: tagHit .5s }
@keyframes hpHit { 0% { transform: skewX(-12deg) translate(0) } 15% { transform: skewX(-12deg) translate(-6px, 3px); background: #fff } 35% { transform: skewX(-12deg) translate(5px, -2px) } 60% { transform: skewX(-12deg) translate(-3px, 1px) } 100% { transform: skewX(-12deg) translate(0) } }
@keyframes tagHit { 0%, 60% { color: var(--red) } 100% { color: var(--ink) } }
.hp.low .hp-track { animation: low 0.7s ease-in-out infinite; border-color: #b0180c }
.hp.low .tag::after { content: '  HURTING'; color: #c4180c }
@keyframes low { 50% { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px rgba(255,40,20,.35) } }

.seal { position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%) rotate(-4deg); background: var(--red); color: var(--paper); padding: 4px 9px 5px; border-radius: 4px; text-align: center; box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--red) }
.seal span { display: block; font: 900 8px/1 Arial, sans-serif; letter-spacing: .25em }
.seal b { font: italic 900 24px/1 Georgia, serif }
.scorebox { position: absolute; top: calc(12px + var(--safe-t)); right: calc(66px + var(--safe-r)); text-align: right }
.scorebox b { display: block; font: italic 900 clamp(22px, 5vw, 34px)/1 Georgia, serif; letter-spacing: -.02em }
.scorebox small { font: 800 9px Arial, sans-serif; letter-spacing: .14em; opacity: .7 }
.pause-btn { pointer-events: auto; position: absolute; top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 46px; height: 46px; border: 3px solid var(--ink); background: var(--paper); border-radius: 50%; display: flex; gap: 5px; align-items: center; justify-content: center; box-shadow: 2px 2px 0 var(--ink) }
.pause-btn i { width: 5px; height: 16px; background: var(--ink); border-radius: 2px }
.pause-btn:active { transform: translate(2px, 2px); box-shadow: none }

.combo { position: absolute; right: calc(16px + var(--safe-r)); top: 22%; text-align: right; opacity: 0; transform: rotate(-6deg); transition: opacity .35s }
.combo.live { opacity: 1 }
.combo b { display: block; font: italic 900 clamp(54px, 13vw, 92px)/.8 Georgia, serif; letter-spacing: -.05em; color: var(--ink); -webkit-text-stroke: 0; text-shadow: 4px 4px 0 var(--paper), 6px 6px 0 rgba(28,24,19,.18) }
.combo span { display: block; font: 900 12px/1.4 Arial, sans-serif; letter-spacing: .24em; margin-top: 6px }
.combo-track { display: block; height: 4px; margin-top: 5px; background: rgba(28,24,19,.15) }
.combo-track i { display: block; height: 100%; background: var(--ink); transform-origin: right center }
.combo[data-heat="1"] b { color: #7a2a14 }
.combo[data-heat="2"] b, .combo[data-heat="2"] span { color: var(--red) }
.combo[data-heat="3"] b, .combo[data-heat="4"] b { color: var(--red); text-shadow: 4px 4px 0 var(--paper), 7px 7px 0 var(--ink) }
.combo[data-heat="3"] span, .combo[data-heat="4"] span { color: var(--red) }
.combo.pop b { animation: pop .28s cubic-bezier(.2,1.6,.4,1) }
@keyframes pop { 0% { transform: scale(1.55) rotate(-8deg) } 100% { transform: scale(1) } }

.banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; font: italic 900 clamp(52px, 14vw, 120px)/.85 Georgia, serif; letter-spacing: -.05em; color: var(--ink) }
.banner small { display: block; font: 900 12px/1 Arial, sans-serif; letter-spacing: .4em; margin-bottom: 8px; color: var(--red) }
.banner::before { content: ''; position: absolute; left: 50%; top: 52%; width: min(560px, 90vw); height: .55em; background: var(--red); opacity: .18; transform: translate(-50%, -50%) skewX(-18deg) scaleX(0); z-index: -1 }
.banner.show { animation: banner 1.5s ease-out forwards }
.banner.show::before { animation: swipe 1.5s ease-out forwards }
@keyframes banner { 0% { opacity: 0; transform: scale(1.6) } 12% { opacity: 1; transform: scale(1) } 75% { opacity: 1 } 100% { opacity: 0; transform: translateY(-14px) } }
@keyframes swipe { 0% { transform: translate(-50%, -50%) skewX(-18deg) scaleX(0) } 20% { transform: translate(-50%, -50%) skewX(-18deg) scaleX(1) } 100% { transform: translate(-50%, -50%) skewX(-18deg) scaleX(1) } }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px }
.title { justify-content: flex-start; padding-left: max(7vw, 24px); background: linear-gradient(90deg, rgba(239,230,210,.92) 0 38%, rgba(239,230,210,0) 75%) }
.title-card { max-width: 440px }
.kicker { font: 900 11px/1.4 Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--red); margin: 0 }
h1 { font: 900 clamp(76px, 15vw, 150px)/.74 Georgia, serif; letter-spacing: -.08em; margin: 16px 0 22px; transform: rotate(-3deg); transform-origin: left }
h1 em, h2 em { color: var(--red); font-style: italic }
.how { font: italic 19px/1.45 Georgia, serif; margin: 0 0 24px }
.how b { font-style: normal }
.go { border: 0; background: var(--red); color: #fff6e0; padding: 17px 28px; min-height: 54px; font: 900 15px Arial, sans-serif; letter-spacing: .16em; box-shadow: 5px 5px 0 var(--ink); border-radius: 3px 12px 3px 12px }
.go span { font-size: 22px; margin-left: 14px; vertical-align: -2px }
.go:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink) }
.go:focus-visible, .ghost:focus-visible, .pause-btn:focus-visible { outline: 3px solid var(--danger); outline-offset: 3px }
.ghost { border: 3px solid var(--ink); background: transparent; color: var(--ink); padding: 12px 22px; min-height: 48px; font: 900 13px Arial, sans-serif; letter-spacing: .14em; border-radius: 3px 10px 3px 10px }
.pause, .over { background: rgba(239,230,210,.82) }
.panel { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center }
h2 { font: 900 clamp(54px, 12vw, 96px)/.8 Georgia, serif; letter-spacing: -.06em; margin: 10px 0 18px; transform: rotate(-3deg) }
.stats { display: flex; gap: clamp(18px, 6vw, 44px); margin: 0 0 18px }
.stats div { display: flex; flex-direction: column }
.stats b { font: italic 900 clamp(28px, 7vw, 44px)/1 Georgia, serif }
.stats span { font: 900 9px Arial, sans-serif; letter-spacing: .2em; margin-top: 4px }
.error { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #fff; border: 3px solid var(--ink); padding: 12px; font: 700 14px Arial, sans-serif }

@media (max-width: 560px) {
  .title { align-items: flex-start; padding-top: calc(5vh + var(--safe-t)); background: linear-gradient(180deg, rgba(239,230,210,.94) 0 46%, rgba(239,230,210,0) 70%) }
  .how { font-size: 17px }
  .hp { width: 40vw }
  .scorebox { right: calc(64px + var(--safe-r)) }
  .seal { top: calc(58px + var(--safe-t)); left: calc(18px + var(--safe-l)); transform: rotate(-4deg) }
}
@media (max-height: 460px) {
  h1 { font-size: 72px; margin: 8px 0 12px }
  .how { font-size: 15px; margin-bottom: 12px }
  h2 { font-size: 52px; margin: 4px 0 10px }
  .stats { margin-bottom: 8px }
}
@media (min-width: 900px) and (min-height: 600px) {
  .hp { width: 340px; top: calc(20px + var(--safe-t)); left: calc(24px + var(--safe-l)) }
  .tag { font-size: 12px }
  .hp-track { height: 24px }
  .seal { top: 16px; padding: 6px 14px 7px }
  .seal span { font-size: 10px }
  .seal b { font-size: 34px }
  .scorebox { top: 16px; right: 92px }
  .scorebox b { font-size: 44px }
  .scorebox small { font-size: 11px }
  .pause-btn { width: 56px; height: 56px; top: 16px; right: 24px }
  .combo { right: 32px }
}
h2 { line-height: .9 }

/* ---------- game-over replay ---------- */
.over-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; padding-top: var(--safe-t) }
.replay { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px }
.replay canvas { position: static; width: min(74vw, 36vh, 360px); height: auto; aspect-ratio: 1; border-radius: 3px 12px 3px 12px; box-shadow: 5px 5px 0 var(--red); transform: rotate(-1.5deg); touch-action: auto }
.replay figcaption { display: flex; flex-direction: column; align-items: center; gap: 4px }
.clip-btn { background: var(--paper); min-height: 44px; padding: 9px 18px; font-size: 12px }
.clip-btn[disabled] { opacity: .55; cursor: default }
.clip-btn.ready { background: var(--ink); color: var(--paper) }
.clip-note { font: italic 13px Georgia, serif; opacity: .75 }
.over.has-replay h2 { font-size: clamp(40px, 9vw, 72px); margin: 4px 0 8px }
.over.has-replay .stats { margin-bottom: 8px }
.over.has-replay .panel { gap: 8px }
@media (orientation: landscape) and (max-height: 700px) {
  .over-wrap { flex-direction: row; gap: clamp(18px, 4vw, 48px); padding-top: 0 }
  .replay canvas { width: min(64vh, 42vw, 420px) }
  .over.has-replay h2 { font-size: clamp(36px, 9vh, 64px) }
}
@media (min-width: 900px) and (min-height: 700px) {
  .over-wrap { flex-direction: row; gap: 56px }
  .replay canvas { width: min(46vh, 440px) }
}
.ghost.more-games { text-decoration: none; display: inline-flex; align-items: center }
.more-link { font: italic 15px Georgia, serif; color: var(--ink); text-underline-offset: 3px; padding: 10px 6px; min-height: 44px }

/* Moves you can learn: a goal chip in the HUD, a full list from the title and pause screens (27 Oct). */
.goal { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) rotate(-1.5deg); max-width: min(92vw, 420px); background: var(--paper); border: 3px solid var(--ink); border-radius: 3px 10px 3px 10px; box-shadow: 3px 3px 0 var(--ink); padding: 6px 12px 7px; text-align: center; opacity: .92; transition: opacity .3s }
.goal span { font: 900 9px/1 Arial, sans-serif; letter-spacing: .26em; color: var(--red); margin-right: 8px; vertical-align: 2px }
.goal b { font: italic 900 17px/1.1 Georgia, serif }
.goal small { display: block; font: italic 13px/1.3 Georgia, serif; margin-top: 2px }
.goal.done { animation: goalDone 1.3s ease-out forwards }
.goal.done span { color: var(--ink) }
@keyframes goalDone { 0% { transform: translateX(-50%) scale(1.15) rotate(-3deg); background: var(--red); color: #fff6e0 } 30% { transform: translateX(-50%) scale(1) rotate(-1.5deg); background: var(--red); color: #fff6e0 } 100% { opacity: 0; transform: translateX(-50%) translateY(10px) } }
.banner i { display: block; font: 900 clamp(14px, 3.4vw, 20px)/1 Arial, sans-serif; letter-spacing: .32em; font-style: normal; margin-top: 10px; color: var(--ink) }
.title-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.moves { background: rgba(239,230,210,.94); overflow-y: auto; align-items: flex-start; padding-top: calc(24px + var(--safe-t, 0px)) }
.moves-panel { max-width: 560px; width: 100%; gap: 10px }
.moves-panel h3 { font: 900 clamp(40px, 9vw, 64px)/.9 Georgia, serif; letter-spacing: -.05em; margin: 4px 0 6px; transform: rotate(-2deg) }
.moves-list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; text-align: left }
.moves-list li { border-bottom: 2px solid rgba(28,24,19,.18); padding: 6px 2px 7px 26px; position: relative }
.moves-list li b { font: 900 12px/1.2 Arial, sans-serif; letter-spacing: .14em }
.moves-list li span { display: block; font: italic 14px/1.3 Georgia, serif }
.moves-list li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 13px; height: 13px; border: 2.5px solid var(--ink); border-radius: 2px 6px 2px 6px }
.moves-list li.got::before { background: var(--red); border-color: var(--red) }
.moves-list li.got b::after { content: '  LANDED'; color: var(--red); font-size: 9px; letter-spacing: .2em }
.moves-note { font: italic 14px/1.4 Georgia, serif; margin: 4px 0 6px; max-width: 460px }
.recap { max-width: 400px; text-align: left; font: 14px/1.35 Georgia, serif; margin: -6px 0 6px; display: flex; flex-direction: column; gap: 5px }
.recap:empty { display: none }
.recap p { margin: 0 }
.recap .k { font: 900 9px/1 Arial, sans-serif; letter-spacing: .22em; color: var(--red); margin-right: 6px }
.recap .pts { font: 900 10px/1.3 Arial, sans-serif; letter-spacing: .12em; opacity: .8 }
.recap .try { font-style: italic }
.over.has-replay h2 { font-size: clamp(40px, 9vw, 72px); margin: 4px 0 10px }
@media (max-height: 760px) and (orientation: portrait) { .over.has-replay .replay canvas { width: min(64vw, 30vh, 300px) } .recap { font-size: 13px } }
@media (orientation: landscape) and (max-height: 460px) {
  .over.has-replay .panel .kicker { display: none }
  .over.has-replay h2 { font-size: 36px; margin: 0 0 4px; line-height: .95 }
  .over.has-replay .stats b { font-size: 26px }
  .recap { font-size: 12.5px; gap: 3px; margin: -4px 0 2px }
}
@media (max-height: 460px) { .goal { padding: 4px 10px 5px; bottom: 8px } .goal b { font-size: 14px } .goal small { font-size: 11.5px } }

/* ---------- coins, shop, scrolls, extra life, daily, ads (28 Oct) ---------- */
:root { --gold: #e0a526; --gold-ink: #b7790c; --safe-b: env(safe-area-inset-bottom, 0px) }
.screen { padding: calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l)) }
/* the mon coin: gold disc, ink rim, square hole */
i.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f6d77a 0 22%, transparent 24%), var(--gold); border: .13em solid var(--ink); position: relative; vertical-align: -.14em; margin-right: .3em; flex: none }
i.coin::after { content: ''; position: absolute; left: 50%; top: 50%; width: .3em; height: .3em; background: var(--ink); transform: translate(-50%, -50%) }
.coinbox { position: absolute; top: calc(66px + var(--safe-t)); right: calc(14px + var(--safe-r)); display: flex; align-items: center; gap: 2px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 3px 9px 3px 9px; padding: 3px 9px 3px 6px; box-shadow: 2px 2px 0 var(--ink); font-size: 16px }
.coinbox b { font: italic 900 16px/1 Georgia, serif; min-width: 1.5em; text-align: right }
.coinbox.pop { animation: coinPop .22s cubic-bezier(.2,1.6,.4,1) }
@keyframes coinPop { 0% { transform: scale(1.22) rotate(-3deg); background: #fbe7a8 } 100% { transform: scale(1) } }
.mode-tag { display: block; font: 900 9px Arial, sans-serif; letter-spacing: .16em; color: var(--red); margin-top: 3px }
.chips { position: absolute; top: calc(52px + var(--safe-t)); left: calc(14px + var(--safe-l)); display: flex; flex-wrap: wrap; gap: 4px; max-width: 48vw }
.chip { font: 900 9px/1 Arial, sans-serif; letter-spacing: .14em; padding: 4px 6px; background: var(--red); color: #fff6e0; border-radius: 2px 6px 2px 6px }
.chip.guard { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); padding: 2px 6px }
@media (max-width: 560px) { .chips { top: calc(126px + var(--safe-t)) } }
@media (min-width: 900px) and (min-height: 600px) { .coinbox { top: 84px; right: 24px; font-size: 20px } .coinbox b { font-size: 20px } .chips { top: 64px; left: 28px } }

.title-actions.sub { margin-top: 10px; display: grid; grid-template-columns: repeat(4, auto); gap: 8px; justify-content: start }
.title-actions:not(.sub) .ghost { display: none }
.title-actions.sub .ghost { min-height: 46px; padding: 10px 14px; font-size: 12px; display: inline-flex; align-items: center; justify-content: center }
@media (max-width: 560px) { .title-actions.sub { grid-template-columns: 1fr 1fr; max-width: 330px } .title-actions .go { min-width: 200px } }
.dojo-btn b { font: inherit }
.dojo-btn i.coin { font-size: 14px }

.toast { position: absolute; left: 50%; top: calc(18% + var(--safe-t)); transform: translateX(-50%); background: var(--paper); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--gold); border-radius: 3px 12px 3px 12px; padding: 8px 16px 9px; text-align: center; pointer-events: none; z-index: 5; max-width: 90vw }
.toast small { display: block; font: 900 9px/1 Arial, sans-serif; letter-spacing: .3em; color: var(--gold-ink) }
.toast b { display: block; font: italic 900 22px/1.15 Georgia, serif; margin: 3px 0 }
.toast span { font: 800 11px Arial, sans-serif; letter-spacing: .08em }
.toast i.coin { font-size: 12px }
.toast.show { animation: toast 2.6s ease-out forwards }
@keyframes toast { 0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1.15) rotate(-2deg) } 10% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-1deg) } 82% { opacity: 1 } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) rotate(-1deg) } }

/* game over: coins and the opt-in double */
.over-coins { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 22px; margin: -8px 0 4px }
.over-coins b { font: italic 900 26px/1 Georgia, serif; color: var(--gold-ink) }
.over-coins > span { font: 900 10px Arial, sans-serif; letter-spacing: .2em; margin-right: 6px }
.over-coins.pop { animation: coinPop .3s cubic-bezier(.2,1.6,.4,1) }
.ad-btn { min-height: 44px; padding: 8px 14px; font-size: 11px; display: inline-flex; align-items: center; gap: 6px }
.ad-btn b { font: inherit; color: var(--gold-ink) }
.ad-btn[disabled] { opacity: .5 }
.ad-chip { font: 900 8px/1 Arial, sans-serif; letter-spacing: .12em; background: var(--ink); color: var(--paper); padding: 3px 4px; border-radius: 2px; vertical-align: 1px }
.go .ad-chip { background: #fff6e0; color: var(--red); margin-right: 8px }
.over-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center }
.over-actions .ghost { min-height: 54px }

/* extra life card */
.cont { background: rgba(239,230,210,.7) }
.cont .panel { background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--red); padding: 22px 24px 18px; border-radius: 3px 16px 3px 16px; max-width: 360px; transform: rotate(-1deg); animation: contIn .35s cubic-bezier(.2,1.4,.4,1) }
@keyframes contIn { 0% { transform: scale(.85) rotate(-4deg); opacity: 0 } 100% { transform: scale(1) rotate(-1deg); opacity: 1 } }
.cont h2 { font-size: clamp(48px, 13vw, 76px); margin: 4px 0 8px }
.cont-how { font: italic 16px/1.4 Georgia, serif; margin: 0 0 6px }
.cont-left { font: 800 10px Arial, sans-serif; letter-spacing: .1em; opacity: .7 }

/* scrolls */
.scrolls { background: rgba(28,24,19,.55) }
.scrolls-panel h3 { font: 900 clamp(40px, 10vw, 64px)/.9 Georgia, serif; letter-spacing: -.05em; margin: 2px 0 14px; color: var(--paper); transform: rotate(-2deg) }
.scrolls .kicker { color: #ffcf9a }
.scroll-cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 720px }
.scroll-card { width: min(200px, 28vw); min-height: 168px; background: var(--paper); border: 3px solid var(--ink); border-radius: 3px 14px 3px 14px; box-shadow: 5px 5px 0 var(--ink); padding: 14px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ink); text-align: center;
  justify-content: center; animation: scrollIn .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 90ms) }
.scroll-card .scroll-seal { width: 46px; height: 46px; display: grid; place-items: center; background: var(--red); color: #fff6e0; font: 900 26px/1 serif; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--red); transform: rotate(-5deg) }
.scroll-card b { font: 900 13px/1.2 Arial, sans-serif; letter-spacing: .12em }
.scroll-card small { font: italic 14px/1.3 Georgia, serif }
.scroll-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink) }
.scroll-card:focus-visible { outline: 3px solid var(--danger); outline-offset: 3px }
@keyframes scrollIn { 0% { opacity: 0; transform: translateY(30px) scaleY(.3) } 100% { opacity: 1; transform: none } }
@media (max-width: 560px) {
  .scroll-cards { flex-direction: column; width: 100%; max-width: 380px }
  .scroll-card { position: relative; width: 100%; min-height: 74px; align-items: flex-start; justify-content: center; text-align: left; padding: 12px 14px 12px 80px; gap: 3px }
  .scroll-card .scroll-seal { position: absolute; left: 16px; top: 50%; margin-top: -23px }
}


/* the dojo shop */
.dojo { background: var(--paper); align-items: stretch; justify-content: center; padding-bottom: 0 }
.dojo-wrap { width: 100%; max-width: 640px; height: 100%; display: flex; flex-direction: column; gap: 8px; min-height: 0 }
.dojo-wrap > * { flex: none }
.dojo-wrap > .dojo-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 2px calc(86px + var(--safe-b)); touch-action: pan-y }
.dojo-head { display: flex; align-items: flex-end; justify-content: space-between }
.dojo-head h3 { font: 900 clamp(40px, 10vw, 64px)/.9 Georgia, serif; letter-spacing: -.05em; margin: 0; transform: rotate(-2deg) }
.wallet { font: italic 900 26px/1 Georgia, serif; display: flex; align-items: center; border: 3px solid var(--ink); padding: 5px 12px 5px 9px; border-radius: 3px 10px 3px 10px; box-shadow: 3px 3px 0 var(--gold) }
.wallet.pop { animation: coinPop .3s cubic-bezier(.2,1.6,.4,1) }
.dojo-preview { position: static; width: auto; height: min(26vh, 240px); aspect-ratio: 6 / 5; object-fit: contain; align-self: center; border: 3px solid var(--ink); border-radius: 3px 14px 3px 14px; background: var(--paper); touch-action: auto }
.tabs { display: flex; gap: 0; border-bottom: 3px solid var(--ink) }
.tab { flex: 1; min-height: 46px; border: 0; background: transparent; font: 900 13px Arial, sans-serif; letter-spacing: .18em; color: var(--ink); opacity: .55; border-radius: 3px 10px 0 0 }
.tab.on { opacity: 1; background: var(--ink); color: var(--paper) }
.dojo-list h4 { font: 900 10px/1 Arial, sans-serif; letter-spacing: .26em; color: var(--red); margin: 12px 0 6px }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }
.tile { min-height: 92px; border: 2.5px solid rgba(28,24,19,.35); background: transparent; border-radius: 3px 10px 3px 10px; padding: 8px 4px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink) }
.tile b { font: 900 10px/1.1 Arial, sans-serif; letter-spacing: .1em }
.tile small { font: 800 11px Arial, sans-serif; display: flex; align-items: center }
.tile small i.coin { font-size: 11px }
.tile.worn { border-color: var(--ink); background: rgba(28,24,19,.06) }
.tile.worn small { color: var(--red) }
.tile.locked { opacity: .6 }
.tile.locked .sw { filter: grayscale(.7) }
.tile.short small { opacity: .6 }
.tile.sel { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); transform: rotate(-1.5deg) }
.sw { display: block; width: 40px; height: 32px; border-radius: 3px 8px 3px 8px; border: 2.5px solid var(--ink) }
.sw.band { background: linear-gradient(transparent 38%, var(--c) 38% 62%, transparent 62%), #1c1813; border-radius: 50% }
.sw.pants { background: linear-gradient(90deg, var(--c) 0 50%, var(--d) 50%) }
.sw.pants.stripes { background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(28,24,19,.8) 6px 9px), linear-gradient(90deg, var(--c) 0 50%, var(--d) 50%) }
.sw.flair { background: var(--paper); position: relative; overflow: hidden }
.sw.f-none::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 3px; background: var(--ink) }
.sw.f-tails { background: linear-gradient(160deg, transparent 30%, var(--red) 30% 44%, transparent 44% 56%, var(--red) 56% 68%, transparent 68%), var(--paper) }
.sw.f-echo { background: radial-gradient(circle at 70% 50%, var(--ink) 0 6px, transparent 7px), radial-gradient(circle at 48% 50%, rgba(28,24,19,.4) 0 6px, transparent 7px), radial-gradient(circle at 26% 50%, rgba(28,24,19,.18) 0 6px, transparent 7px), var(--paper) }
.sw.f-petals { background: radial-gradient(ellipse 6px 3px at 30% 35%, #f2a7b8 98%, transparent), radial-gradient(ellipse 6px 3px at 65% 60%, #e48aa0 98%, transparent), radial-gradient(ellipse 5px 3px at 45% 75%, #fbd3dc 98%, transparent), var(--paper) }
.sw.f-goldstrike { background: radial-gradient(circle at 100% 100%, transparent 18px, var(--gold) 19px 24px, transparent 25px), var(--paper) }
.dojo-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l)); background: var(--paper); border-top: 3px solid var(--ink); display: flex; align-items: center; gap: 10px; justify-content: center }
.dojo-note { flex: 1; max-width: 360px; margin: 0; font: italic 14px/1.3 Georgia, serif }
.dojo-bar .go { padding: 12px 18px; min-height: 48px; font-size: 13px; display: inline-flex; align-items: center }
.dojo-bar .go[disabled] { opacity: .45; box-shadow: 2px 2px 0 var(--ink) }
.dojo-bar .go i.coin { font-size: 14px; margin-left: 6px }
.up { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 2px solid rgba(28,24,19,.15) }
.up-txt { flex: 1; display: flex; flex-direction: column; gap: 4px }
.up-txt b { font: 900 12px Arial, sans-serif; letter-spacing: .14em }
.up-txt small { font: italic 14px/1.3 Georgia, serif }
.up-txt em { color: var(--red); font-style: normal; font-weight: 700 }
.pips { display: flex; gap: 4px }
.pips i { width: 16px; height: 6px; border: 2px solid var(--ink); border-radius: 1px 4px 1px 4px }
.pips i.on { background: var(--red); border-color: var(--red) }
.up .buy { min-height: 46px; padding: 8px 14px; font-size: 14px; display: inline-flex; align-items: center }
.up .buy.short { opacity: .45 }
.up .buy.nope { animation: nope .3s }
@keyframes nope { 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.maxed { font: 900 10px Arial, sans-serif; letter-spacing: .2em; color: var(--red) }
.dojo-fine { font: italic 13px/1.4 Georgia, serif; opacity: .75; margin: 12px 0 0 }

/* daily */
.daily { background: rgba(239,230,210,.95); overflow-y: auto; align-items: flex-start }
.daily-panel { max-width: 480px; width: 100%; gap: 8px }
.daily-panel h3 { font: 900 clamp(40px, 10vw, 64px)/.9 Georgia, serif; letter-spacing: -.05em; margin: 2px 0 8px; transform: rotate(-2deg) }
.daily-today { width: 100%; border: 3px solid var(--ink); border-radius: 3px 16px 3px 16px; box-shadow: 5px 5px 0 var(--red); padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--paper) }
.daily-today small { font: 900 10px Arial, sans-serif; letter-spacing: .24em; color: var(--red) }
.daily-today > b { font: italic 900 32px/1 Georgia, serif }
.daily-today p { margin: 0; font: italic 15px/1.35 Georgia, serif }
.dt-best { font: 800 11px Arial, sans-serif; letter-spacing: .12em; margin: 4px 0 6px }
.dt-best b { font: italic 900 18px Georgia, serif; letter-spacing: 0 }
.daily-rules { font: italic 13px/1.4 Georgia, serif; opacity: .75; margin: 4px 0 }
.kicker.past { margin-top: 6px }
.daily-past { list-style: none; margin: 0; padding: 0; width: 100% }
.daily-past button { width: 100%; min-height: 48px; display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 8px; background: transparent; border: 0; border-bottom: 2px solid rgba(28,24,19,.15); padding: 6px 4px; text-align: left; color: var(--ink) }
.daily-past small { font: 800 10px Arial, sans-serif; letter-spacing: .12em; opacity: .7 }
.daily-past b { font: 900 11px Arial, sans-serif; letter-spacing: .12em }
.daily-past span { font: italic 900 16px Georgia, serif; color: var(--red) }

/* placeholder ad card */
.ad { background: rgba(28,24,19,.92); z-index: 20 }
.ad-card { width: min(380px, 92vw); background: var(--paper); border-radius: 3px 16px 3px 16px; padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 6px 6px 0 var(--red) }
.ad-top { display: flex; align-items: center; gap: 8px }
.ad-tag { font: 900 10px/1 Arial, sans-serif; letter-spacing: .14em; background: var(--ink); color: var(--paper); padding: 4px 6px; border-radius: 2px }
.ad-what { flex: 1; font: italic 13px Georgia, serif; opacity: .75 }
.ad-skip { border: 2px solid var(--ink); background: transparent; font: 900 11px Arial, sans-serif; letter-spacing: .14em; min-height: 40px; min-width: 64px; border-radius: 3px 8px 3px 8px; color: var(--ink) }
.ad-body { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 }
.ad-ring { width: 86px; height: 86px; transform: rotate(-90deg) }
.ad-ring circle { fill: none; stroke: rgba(28,24,19,.15); stroke-width: 7 }
.ad-ring .ad-run { stroke: var(--red); stroke-dasharray: 276.5; stroke-linecap: round }
.ad-count { position: absolute; top: 28px; font: italic 900 30px/1 Georgia, serif }
.ad-body h3 { font: italic 900 30px/1 Georgia, serif; margin: 12px 0 6px }
.ad-body p { font: 14px/1.4 Georgia, serif; margin: 0; max-width: 300px }
.ad.done .ad-count { color: var(--red) }
.ad-collect[disabled] { opacity: .45; box-shadow: 2px 2px 0 var(--ink) }
.cont-row { display: flex; gap: 10px }
.coin-from { flex-basis: 100%; text-align: center; font: 800 9px Arial, sans-serif; letter-spacing: .14em; opacity: .65 }
.coin-from:empty { display: none }
.ups-toggle { margin-top: 14px; min-height: 46px }
.ups-toggle[aria-pressed="false"] { opacity: .6 }
@media (max-width: 560px) { .title h1 { font-size: clamp(64px, 19vw, 96px); margin: 10px 0 14px } .title .how { margin-bottom: 16px } }