/* no caret, text highlight or tap flash anywhere you can't type (house rule); the name box stays selectable */
html, body, div, p, span, h1, h2, h3, small, label, button, svg, main, section, b { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; caret-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }  /* keyboard users keep a focus ring */
input { -webkit-user-select: text; user-select: text; caret-color: auto; }

:root {
  --panel: clamp(60px, calc(var(--dvh) * 15), 150px);   /* the road band below the feet of the walkers */
  --hz: calc(var(--panel) + 118px);
  --gh: calc(var(--hz) / 0.78);           /* height of the ground tile; its top edge is the far edge of the grass */       /* the horizon (where grass meets the road), measured from the bottom */
  --ch: clamp(104px, calc(var(--dvh) * 38), 300px);       /* height of a full-size person; everything else is sized from this in real centimetres */
  --sky1: #cfe6ff; --sky2: #ffe3ef;
  --ink: #3a2430;
}
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: #bfe3ff; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ the world */
#world { position: fixed; inset: 0; overflow: hidden; }
#sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 70%); transition: background 1.5s; }
#sun { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fffbe0 0%, #ffe48a 45%, #ffc14d 100%); box-shadow: 0 0 60px 28px rgba(255, 224, 140, .55), 0 0 140px 80px rgba(255, 230, 170, .35); left: 14%; top: 9%; transition: left 2s, top 2s; }
#clouds { position: absolute; inset: 0 0 auto 0; height: 50%; overflow: hidden; }
.cloud { position: absolute; left: 0; opacity: .92; animation: drift linear infinite; will-change: transform; }
@keyframes drift { from { transform: translateX(calc(var(--dvw) * 110)); } to { transform: translateX(-340px); } }

.layer { position: absolute; left: 0; display: flex; will-change: transform; pointer-events: none; }
.layer svg { flex: none; height: 100%; width: auto; display: block; }
#L-hills { bottom: calc(var(--gh) - 50px); height: calc(var(--dvh) * 36); }
#L-town { bottom: calc(var(--gh) - 44px); height: calc(var(--dvh) * 30); }
#L-ground { bottom: 0; height: var(--gh); }
#L-fence { bottom: calc(var(--hz) - 10px); height: clamp(60px, calc(var(--dvh) * 11), 100px); }

#actors { position: absolute; inset: 0; pointer-events: none; }
.actor { position: absolute; bottom: calc(var(--panel) + 6px); display: flex; align-items: flex-end; gap: 0; will-change: transform; }
#player { left: 15%; z-index: 3; }
#npc { left: 0; z-index: 2; transform: translateX(calc(var(--dvw) * 120)); }
.actor .char { height: var(--ch); width: auto; flex: none; overflow: visible; display: block; }
.actor .char.dog, .actor .char.cat { height: calc(var(--ch) * .75); }
.actor .prop { height: calc(var(--ch) * .9); width: auto; flex: none; display: block; margin: 0 -6px; overflow: visible; }
.actor .prop.low { height: calc(var(--ch) * .5); }
.actor .prop.tall { height: calc(var(--ch) * 1.5); }
.actor .item { position: relative; display: flex; align-items: flex-end; }

/* walking: bob, swing legs and arms. Standing: gentle breathing. */
.char .bob { transform-origin: 60px 228px; animation: breathe 3.2s ease-in-out infinite; }
.walking .char .bob { animation: bob .56s ease-in-out infinite; }
.char .legL, .char .legR, .char .armL, .char .armR { transform-box: view-box; }
.walking .char .legL { animation: swingA .56s ease-in-out infinite; }
.walking .char .legR { animation: swingB .56s ease-in-out infinite; }
.walking .char .armL { animation: swingB .56s ease-in-out infinite; }
.walking .char .armR { animation: swingA .56s ease-in-out infinite; }
.walking .char .pack { animation: packbounce .56s ease-in-out infinite; }
.char .head { transform-origin: 60px 90px; }
.walking .char .head { animation: headnod .56s ease-in-out infinite; }
.char .eye { animation: blink 4.6s infinite; transform-box: fill-box; transform-origin: center; }
.waving .char .armR { animation: wave .7s ease-in-out infinite; transform-origin: 84px 100px; }
.talking .char .head { animation: talk .3s ease-in-out infinite; }
.char.dog .tail, .char.cat .tail { animation: wag .5s ease-in-out infinite alternate; }
.char.cat .tail { animation-duration: 2.2s; }
.sad .char .bob { animation: droop 2.4s ease-in-out infinite; }
.hop .char { animation: hop .6s ease-out; }
@keyframes breathe { 50% { transform: scale(1, 1.012); } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes swingA { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes swingB { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-26deg); } }
@keyframes packbounce { 50% { transform: translateY(3px); } }
@keyframes headnod { 50% { transform: translateY(1.5px) rotate(1.2deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes wave { 0%, 100% { transform: rotate(150deg); } 50% { transform: rotate(205deg); } }
@keyframes talk { 50% { transform: translateY(-2px) rotate(-1.4deg); } }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes droop { 50% { transform: translateY(2px) scale(1, .985); } }
@keyframes hop { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 78% { transform: translateY(-5px); } 100% { transform: translateY(0); } }
.prop .butterfly { animation: flutter 1.4s ease-in-out infinite; }
.prop .kite { animation: kite 2.6s ease-in-out infinite; }
.prop .ripples ellipse { animation: ripple 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes flutter { 50% { transform: translate(-6px, -10px) rotate(-8deg); } }
@keyframes kite { 50% { transform: rotate(7deg); } }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* speech bubble above the other person */
.bubble { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) scale(.6); transform-origin: 50% 100%; opacity: 0; width: max-content; max-width: min(270px, calc(var(--dvw) * 62)); padding: 10px 14px; border-radius: 18px; background: #fff; color: #221c33; font-weight: 650; font-size: .98rem; line-height: 1.3; box-shadow: 0 8px 22px rgba(40, 20, 90, .25); transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; z-index: 6; pointer-events: none; }
.bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }

/* little emotes and sparkles */
#fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.fx { position: absolute; will-change: transform, opacity; animation: floatUp 1.8s ease-out forwards; font-size: 1.6rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2)); }
.fx.big { font-size: 2.6rem; animation-name: popUp; animation-duration: 1.4s; }
.fx.petal { font-size: .9rem; animation: petal linear forwards; opacity: .85; filter: none; }
@keyframes floatUp { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(0, -10px) scale(1.1); } 100% { transform: translate(var(--dx, 0), -120px) scale(.9); opacity: 0; } }
@keyframes popUp { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(1.25); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-20px) scale(1); opacity: 0; } }
@keyframes petal { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(calc(var(--dvw) * -70), calc(var(--dvh) * 36)) rotate(540deg); opacity: 0; } }
#glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0) 55%, rgba(40, 20, 90, .22) 100%); }

/* ------------------------------------------------------------ sheets (the cards at the bottom) */
.sheet { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(calc(var(--dvw) * 100) - 20px)); max-height: calc(calc(var(--dvh) * 100) - 20px); overflow: auto; box-sizing: border-box; padding: 16px 16px 14px; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 -4px 30px rgba(40, 20, 90, .22); z-index: 10; animation: sheetIn .45s cubic-bezier(.3, 1.2, .5, 1); }
@keyframes sheetIn { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
#panel { min-height: calc(var(--panel) - 20px); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.caption { font-size: 1.06rem; line-height: 1.42; font-weight: 560; min-height: 3.1em; padding: 2px 4px 4px; border-left: 4px solid var(--violet-light); padding-left: 12px; }
.caption.happy { border-color: #3fc79a; } .caption.sad, .caption.grumpy { border-color: #ff7a8a; } .caption.neutral { border-color: var(--violet-light); }
.choices { display: grid; gap: 9px; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px 9px 10px; border: 0; border-radius: 26px; background: var(--grad); color: #fff; font: inherit; font-weight: 700; font-size: 1.02rem; line-height: 1.25; text-align: left; cursor: pointer; box-shadow: 0 6px 14px rgba(58, 43, 208, .28); animation: choiceIn .42s cubic-bezier(.3, 1.5, .5, 1) backwards; transition: transform .12s, opacity .25s, filter .25s; }
.choice:nth-child(2) { animation-delay: .09s; } .choice:nth-child(3) { animation-delay: .18s; }
.choice:active { transform: scale(.97); }
.choice .em { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 1.35rem; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.choice.picked { transform: scale(1.02); }
.choices.locked .choice:not(.picked) { opacity: .28; filter: saturate(.3); pointer-events: none; }
.choices.locked .choice { pointer-events: none; }
@keyframes choiceIn { from { transform: translateY(24px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.big { display: block; width: 100%; border: 0; border-radius: 999px; padding: 15px 28px; background: var(--grad); color: #fff; font: inherit; font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 0 8px 18px rgba(58, 43, 208, .32); animation: choiceIn .4s cubic-bezier(.3, 1.5, .5, 1); }
.big:active { transform: scale(.97); }
.big:disabled { opacity: .5; box-shadow: none; cursor: default; }
.link { display: block; margin: 12px auto 2px; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* start / end */
#start { top: 0; bottom: auto; width: min(460px, calc(calc(var(--dvw) * 100) - 20px)); margin-top: max(10px, env(safe-area-inset-top)); max-height: none; padding: 18px 18px 16px; text-align: center; }
@media (max-height: 640px) { #start { top: 0; } }
.logo { margin: 0; font-size: 2.6rem; letter-spacing: .02em; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { margin: 2px 0 14px; color: var(--muted); font-weight: 600; }
.heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 14px 6px 12px; border-radius: 22px; border: 2px solid var(--line); background: linear-gradient(180deg, #e9f4ff, #fff1f7); color: #3a2430; font: inherit; cursor: pointer; transition: transform .12s, border-color .12s; }
.hero:hover, .hero:focus-visible { border-color: var(--violet); transform: translateY(-2px); }
.hero.chosen { border-color: transparent; background: var(--grad); color: #fff; transform: scale(1.04); }
.hero:disabled:not(.chosen) { opacity: .55; }
.hero .pic { display: flex; align-items: flex-end; justify-content: center; height: 150px; pointer-events: none; }
.hero .pic svg { width: auto; overflow: visible; display: block; }
.hero b { font-size: 1.35rem; letter-spacing: .02em; }
.welcome { font-size: 1.25rem; margin: 6px 0 2px; } .sub { color: var(--muted); font-weight: 600; margin: 4px 0 14px; line-height: 1.4; }
.err { color: #d33a5a; font-weight: 650; margin: 10px 0 0; }
#end { top: calc(var(--dvh) * 18); bottom: auto; text-align: center; }
#end h2 { margin: 4px 0 6px; }

#dots { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; display: flex; gap: 6px; z-index: 8; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#dots:empty { display: none; }
#dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(58, 36, 48, .25); transition: all .4s; }
#dots i.done { background: var(--violet); } #dots i.now { background: #ffb23f; transform: scale(1.35); box-shadow: 0 0 0 3px rgba(255, 178, 63, .35); }
#toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; background: #3a2430; color: #fff; font-weight: 650; z-index: 30; max-width: calc(calc(var(--dvw) * 100) - 30px); }

@media (prefers-reduced-motion: reduce) { .fx.petal, .cloud { animation: none; } .char .bob { animation: none; } }
@media (max-width: 420px) { .logo { font-size: 2.2rem; } .choice { font-size: .98rem; } }


/* ------------------------------------------------------------ the new game screen */
#probe { position: absolute; left: -10px; top: 0; width: 1px; height: var(--ch); visibility: hidden; pointer-events: none; }
#world { touch-action: none; cursor: grab; }
#stage { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform; }
.ent { position: absolute; bottom: calc(var(--panel) + 6px + var(--by, 0px)); display: flex; align-items: flex-end; pointer-events: none; transition: opacity .6s; }
.ent .who { position: relative; display: flex; align-items: flex-end; }
.ent svg { display: block; flex: none; overflow: visible; }
.ent.away { opacity: 0; }
.ent.gone { opacity: 0; }
.ent[data-tap]::before { content: ''; position: absolute; inset: -14px -18px; pointer-events: auto; border-radius: 50%; }
.ent.item::before { inset: -34px; }
.ent.hint::before { background: radial-gradient(circle, rgba(255, 226, 120, .75), rgba(255, 226, 120, 0) 68%); animation: pulse 1.1s ease-in-out infinite; }
.ent.hint::after { content: '👆'; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); font-size: 2rem; animation: nudge .9s ease-in-out infinite; z-index: 9; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.ent.pl { pointer-events: none; }
@keyframes pulse { 50% { transform: scale(1.18); opacity: .7; } }
@keyframes nudge { 50% { transform: translate(-50%, -8px); } }
.pl.back .char { transform: scaleX(-1); }
.pl.look-away .char { transform: scaleX(-1); }
.flip .who > .char { transform: scaleX(-1); }
.wave .char .armR { animation: wave .7s ease-in-out infinite; transform-origin: 84px 100px; }
.ent.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.ent.hop > .who > .char, .ent.hop > svg { animation: hop .6s ease-out 2; }
.ent.wobble { animation: wobble .5s ease-in-out 2; transform-origin: 50% 100%; }
@keyframes wobble { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
.ent.shy { opacity: .85; }
.ent.fall { animation: fall .5s ease-in; }
@keyframes fall { from { transform: translateY(-110px) rotate(-40deg); } to { transform: none; } }
.ent.flutter svg { animation: flutter2 1.1s ease-in-out infinite; }
@keyframes flutter2 { 50% { transform: translateY(-14px) rotate(14deg); } }
.ent.throw { z-index: 8; animation: arc .85s ease-in forwards; }
@keyframes arc { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--tx) / 2), calc(var(--ty) - var(--ch) * .9)); } 100% { transform: translate(var(--tx), var(--ty)); } }
.bubble.thought { background: #fff; border: 3px dotted #7040e0; font-style: italic; }

/* the callout with round pictures, above the hero */
#ask { position: fixed; left: 50%; top: max(66px, calc(var(--dvh) * 9)); transform: translateX(-50%) scale(.6); opacity: 0; width: min(calc(var(--dvw) * 94), 600px); box-sizing: border-box; padding: 14px 12px 12px; background: #fff; color: #3a2430; border: 3px solid #7040e0; border-radius: 34px; box-shadow: 0 10px 34px rgba(40, 20, 90, .32); z-index: 12; text-align: center; transition: transform .28s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; transform-origin: 50% 100%; }
#ask.open { transform: translateX(-50%) scale(1); opacity: 1; }
#ask::after { content: ''; position: absolute; left: 24%; bottom: -17px; width: 26px; height: 26px; background: #fff; border-right: 3px solid #7040e0; border-bottom: 3px solid #7040e0; transform: rotate(45deg); border-radius: 0 0 6px 0; }
#askTitle { font-weight: 800; font-size: 1.02rem; margin: 0 0 8px; color: #3a2430; }
#askRow { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 98px; padding: 0; border: 0; background: none; font: inherit; color: #3a2430; cursor: pointer; transition: transform .12s, opacity .2s; animation: choiceIn .35s both; }
.pick:nth-child(2) { animation-delay: .06s; } .pick:nth-child(3) { animation-delay: .12s; } .pick:nth-child(4) { animation-delay: .18s; }
.pick .pic { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font-size: 2.3rem; line-height: 1; background: radial-gradient(circle at 35% 30%, #fff, #efe9fb 70%); border: 4px solid #9a6bff; box-shadow: 0 5px 0 #7040e0, 0 8px 14px rgba(58, 43, 208, .28); overflow: hidden; word-break: keep-all; }
.pick .cap { font-size: .8rem; font-weight: 750; line-height: 1.15; max-width: 98px; }
.pick:active .pic { transform: translateY(3px); box-shadow: 0 2px 0 #7040e0; }
.pick.chosen .pic { background: var(--grad); border-color: #1c1165; box-shadow: 0 0 0 5px rgba(255, 178, 63, .6); }
#ask.locked .pick:not(.chosen) { opacity: .25; pointer-events: none; }
.pick.small { width: 62px; } .pick.small .pic { width: 54px; height: 54px; font-size: 1.7rem; border-width: 3px; }
.pick.gone { transform: scale(.2); opacity: 0; pointer-events: none; }
@media (max-width: 420px) { .pick { width: 86px; } .pick .pic { width: 68px; height: 68px; font-size: 2rem; } .pick .cap { font-size: .74rem; } }

/* the HUD: what Mum asked, the money, the bag */
#hud { position: fixed; left: 10px; top: max(10px, env(safe-area-inset-top)); display: flex; gap: 6px; z-index: 9; }
#hud .chip { border: 0; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #3a2430; font: inherit; font-weight: 800; font-size: 1rem; box-shadow: 0 2px 8px rgba(40, 20, 90, .18); }
#hud button.chip { cursor: pointer; font-size: 1.15rem; }
#cap { position: fixed; left: 50%; top: max(64px, calc(var(--dvh) * 9)); transform: translateX(-50%); max-width: min(calc(var(--dvw) * 92), 520px); padding: 10px 18px; border-radius: 22px; background: rgba(40, 20, 80, .88); color: #fff; font-weight: 650; text-align: center; z-index: 11; line-height: 1.35; }
#arrow { position: fixed; top: 46%; font-size: 2.2rem; z-index: 9; animation: nudge2 .9s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); pointer-events: none; }
@keyframes nudge2 { 50% { transform: scale(1.25); } }
#breeze { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 6; overflow: hidden; }
#breeze.on { opacity: 1; }
#breeze i { position: absolute; left: -30%; height: 3px; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); animation: gust .8s linear infinite; }
#breeze i:nth-child(1) { top: 40%; } #breeze i:nth-child(2) { top: 48%; animation-delay: .15s; } #breeze i:nth-child(3) { top: 56%; animation-delay: .3s; } #breeze i:nth-child(4) { top: 64%; animation-delay: .1s; } #breeze i:nth-child(5) { top: 72%; animation-delay: .4s; }
@keyframes gust { to { transform: translateX(380%); } }

/* start and end */
.pick-label { margin: 0 0 10px; font-weight: 700; color: var(--muted); }
.howto { margin: 10px 0 0; color: var(--muted); font-weight: 600; font-size: .9rem; }
#cards { display: flex; justify-content: center; gap: 10px; margin: 8px 0 6px; }
.card2 { flex: 1; max-width: 140px; background: var(--soft); border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.card2 span { font-size: 2.4rem; line-height: 1; } .card2 small { font-size: .75rem; font-weight: 700; color: var(--muted); line-height: 1.2; }

/* landscape first: an upright phone shows the game turned sideways (html.rot), and short screens get a tighter layout (html.short); both set by app.js */
html.short #ask { top: 42px; padding: 8px 10px 10px; border-radius: 26px; width: min(calc(var(--dvw) * 94), 640px); }
html.short #askTitle { font-size: .82rem; margin-bottom: 4px; }
html.short #askRow { gap: 6px 12px; }
html.short .pick { width: 80px; gap: 3px; }
html.short .pick .pic { width: 54px; height: 54px; font-size: 1.6rem; border-width: 3px; box-shadow: 0 3px 0 #7040e0, 0 5px 9px rgba(58, 43, 208, .25); }
html.short .pick .cap { font-size: .66rem; max-width: 80px; }
html.short .pick.small { width: 50px; }
html.short .pick.small .pic { width: 44px; height: 44px; font-size: 1.4rem; }
html.short #cap { top: 42px; font-size: .85rem; padding: 6px 14px; }
html.short #hud { top: 6px; }
html.short #hud .chip { padding: 4px 10px; font-size: .85rem; }
html.short #start { padding: 8px 16px 10px; width: min(520px, calc(calc(var(--dvw) * 100) - 20px)); }
html.short .logo { font-size: 1.7rem; }
html.short .tag { margin: 0 0 4px; font-size: .85rem; }
html.short .pick-label { margin: 0 0 6px; font-size: .85rem; }
html.short .howto { display: none; }
html.short .heroes { gap: 10px; }
html.short .hero { flex-direction: row; justify-content: center; padding: 6px 10px; gap: 10px; border-radius: 18px; }
html.short .hero .pic { height: 92px; }
html.short .hero .pic svg { height: 92px !important; }
html.short .hero b { font-size: 1.15rem; }
html.short #end { top: calc(var(--dvh) * 4); padding: 8px 14px 10px; }
html.short #end h2 { margin: 0 0 2px; font-size: 1.1rem; }
html.short .card2 span { font-size: 1.7rem; }
html.short .card2 { padding: 6px 4px; }
html.short #cards { margin: 4px 0; }
html.short .sub { margin: 2px 0 8px; font-size: .85rem; }
html.short .big { padding: 10px 24px; }


/* an upright phone: lay the whole game on its side so it reads as landscape */
html { --dvh: 1dvh; --dvw: 1vw; }
html.rot body { position: fixed; top: 0; left: var(--vhpx); width: var(--vwpx); height: var(--vhpx); transform: rotate(90deg); transform-origin: 0 0; overflow: hidden; }