:root {
  --ink: #1d1a17; --paper: #f5efe1; --paper2: #fffaf0; --accent: #d9452b; --muted: #6b6257;
  --gold: #e7b416; --silver: #a9b0b8; --bronze: #c07a3f;
  --font: "Gochi Hand", "Comic Sans MS", "Marker Felt", cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #2a2622; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font); color: var(--ink); display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); background: var(--paper); overflow: hidden; }
#stage { font-size: clamp(12px, calc(min(100vw, 177.78dvh) * 0.019), 26px); }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

button { font-family: var(--font); font-size: inherit; color: var(--ink); background: var(--paper2); border: 3px solid var(--ink); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px;
  padding: .35em 1em; min-height: 44px; min-width: 44px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
button:hover { background: #fff; }
button:active, button.pressed { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
button:focus-visible { outline: 3px dashed var(--accent); outline-offset: 3px; }
button.big { font-size: 1.35em !important; background: var(--accent); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }

.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(245, 239, 225, .82); z-index: 5; }
#title { background: transparent; }
.titleCard { text-align: center; margin-top: -4%; }
.titleCard { max-width: 95%; max-height: 100%; overflow: auto; padding: .45em .55em .7em; margin-top: 0; }
h1 { margin: 0 0 .1em; line-height: .95; }
h1 span { display: inline-block; font-size: 3.3em !important; margin: 0 .12em; }
h1 .t1 { transform: rotate(-4deg); } h1 .t2 { transform: rotate(3deg) translateY(.08em); color: var(--accent); } h1 .t3 { transform: rotate(-2deg); }
.tagline { margin: .2em 0 1em; font-size: 1.2em !important; }
.proto { color: var(--muted); margin-top: 1em; }
.col { display: flex; flex-direction: column; gap: .6em; align-items: center; }
.row { display: flex; gap: .6em; justify-content: center; flex-wrap: wrap; margin-top: .8em; }
.small, .small * { font-size: .85em !important; }
.muted { color: var(--muted); margin: .25em 0; }
.menuActions { margin-top: 0; }
.accountRow { align-items: center; }
#m-connect { align-items: center; display: inline-flex; gap: .5em; }
#m-connect[hidden], .providerMarks[hidden], #cynnx-game-chip { display: none; }
.providerMarks { display: inline-flex; align-items: center; gap: .2em; }
.providerMarks img, .providerMarks svg { width: 18px; height: 18px; }
#lessonHud { position: absolute; z-index: 4; top: 1.5%; left: 1%; max-width: calc(100% - 115px); display: flex; align-items: center; gap: .65em; }
#lessonHud p { margin: 0; background: var(--paper2); border: 2px solid var(--ink); border-radius: 12px; padding: .45em .7em; }
.extrasCard { width: min(36em, 94%); padding: .7em 1.1em 1em; }
.extrasCard .selectHead { gap: .5em; margin-bottom: .35em; }
.extrasCard .selectHead h2 { flex: 1; font-size: 1.7em !important; }
.profileChoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .55em; margin: .65em 0; }
.profileChoices label { display: grid; gap: .2em; text-align: left; }
.profileChoices select, .profileChoices input { width: 100%; min-height: 44px; font: inherit; }
.playerName { font-weight: bold; }
.badgeList, .dailyTiles, .boardList { list-style: none; padding: 0; }
.badgeList li { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: .2em .6em; padding: .35em .6em; margin: .28em 0; border: 1px dashed var(--ink); border-radius: 9px; }
.badgeList li span { grid-row: 2; color: var(--muted); }
.earnedBadge { background: #e7f0d4; }
.communityLink { display: inline-flex; min-height: 44px; align-items: center; color: #963627; padding: .3em .55em; }
.dailyTiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25em; }
.dailyTiles li { display: flex; flex-direction: column; justify-content: center; min-height: 2.6em; overflow-wrap: anywhere; line-height: 1.1; border: 1px solid var(--ink); border-radius: 7px; padding: .14em; }
.dailyTiles li small { font-size: .69em; }
.dailyTiles .claimedDay { background: #e7f0d4; }
.dailyTiles .nextDay { background: #f6df98; }
.boardList { display: grid; grid-template-columns: repeat(2, 1fr); gap: .2em; }

.card { background: var(--paper2); border: 3px solid var(--ink); border-radius: 22px 16px 24px 14px / 14px 24px 16px 22px; padding: 1em 1.6em; box-shadow: 6px 6px 0 var(--ink);
  text-align: center; max-width: 92%; max-height: 94%; overflow: auto; transform: rotate(-.6deg); }
.card h2 { margin: 0; font-size: 2.4em !important; color: var(--accent); }
.cause { margin: .1em 0 .3em; font-size: 1.15em !important; }
.bigTime span { display: block; font-size: 3em !important; line-height: 1; }
.bigTime small { color: var(--muted); }
.medal { margin: .4em auto; display: inline-block; padding: .1em .8em; border: 3px solid var(--ink); border-radius: 999px; transform: rotate(-6deg); font-size: 1.2em !important; }
.medal.gold { background: var(--gold); } .medal.silver { background: var(--silver); } .medal.bronze { background: var(--bronze); color: #fff; } .medal.none { background: #eee; color: var(--muted); }
.medal.pop { animation: stamp .35s ease-out; }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-14deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }

#hudButtons { position: absolute; top: 1.5%; right: 1%; display: flex; gap: .5em; z-index: 4; }
.iconBtn { padding: 0; width: 2.2em; height: 2.2em; font-size: 1.1em !important; }

.selectWrap { width: 94%; text-align: center; max-height: 94%; overflow: auto; }
.selectHead { display: flex; align-items: center; justify-content: space-between; }
.selectHead h2 { margin: 0; font-size: 2em !important; }
.worldNav { display: flex; align-items: center; justify-content: center; gap: .8em; margin-top: .3em; }
.worldNav h3 { margin: 0; text-align: center; font-size: 1.4em !important; }
.world h3 { margin: .4em 0 .2em; font-size: 1.3em !important; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5em; }
.lvl { display: flex; flex-direction: column; align-items: center; padding: .3em .2em; line-height: 1.1; min-height: 3.6em; }
.lvl b { font-size: 1.2em !important; } .lvl span { font-size: .75em !important; color: var(--muted); }
.lvl .m { width: .9em; height: .9em; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; margin-top: .15em; }
.lvl .m.gold { background: var(--gold); } .lvl .m.silver { background: var(--silver); } .lvl .m.bronze { background: var(--bronze); } .lvl .m.none { background: transparent; }
.lvl.locked { background: #e6dfd0; }

#touch { position: fixed; inset: auto 0 0 0; height: 0; z-index: 10; pointer-events: none; }
#touch .pad { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 14px; pointer-events: auto; }
#touch .pad.left { left: calc(14px + env(safe-area-inset-left)); }
#touch .pad.right { right: calc(14px + env(safe-area-inset-right)); }
#touch button { width: 68px; height: 68px; border-radius: 50%; font-size: 30px; background: rgba(255, 250, 240, .72); box-shadow: 3px 3px 0 rgba(29,26,23,.7); touch-action: none; }
#touch button.jump { width: 84px; height: 84px; background: rgba(217, 69, 43, .78); color: #fff; }
#touch button.on { transform: translate(3px, 3px); box-shadow: none; background: #fff; }
#touch button.jump.on { background: var(--accent); }
body.touch .desktopOnly { display: none; }

#rotate { position: fixed; inset: 0; z-index: 20; background: var(--paper); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; padding: 24px; }
#rotate .phone { font-size: 64px; }

@media (prefers-reduced-motion: reduce) { .medal.pop { animation: none; } button { transition: none; } }