/* A schoolkid's notebook: squared paper, ballpoint ink, highlighter, sticky notes and tape.
   Nothing is straight: borders use uneven radii so every box looks drawn by hand. */
:root { --ink: #1d2c5e; --paper: #fbf9f0; --line: #c9dcec; --red: #e2483d; --yellow: #ffe45c; --green: #8fdc9c; --pink: #ffb3d1; --blue: #a9d4f5;
  --hand: "Ink Free", "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", "Comic Neue", cursive;
  --wob: 255px 18px 225px 20px / 18px 225px 20px 255px; --wob2: 20px 225px 18px 255px / 225px 18px 255px 20px;
  --shadow: rgba(29, 44, 94, .2); --u: min(1vw, 1.78vh);
  /* notches and rounded corners of phones held sideways */
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); touch-action: none; user-select: none; -webkit-user-select: none;
  font-family: var(--hand); font-weight: 700; color: var(--ink); font-size: max(13px, calc(var(--u) * 1.5)); }
[hidden] { display: none !important; }
#safe { position: fixed; visibility: hidden; pointer-events: none; padding: 0 0 var(--sb) var(--sl); }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ic { width: 1.2em; height: 1.2em; vertical-align: -.25em; flex: none; }

/* a page torn out of the notebook, held by a piece of tape */
.paper { background-color: #fffef8; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 1.3em 1.3em; border: .14em solid var(--ink); border-radius: var(--wob); box-shadow: .3em .35em 0 var(--shadow); }
.paper::before { content: ""; position: absolute; top: -.75em; left: 50%; width: 5em; height: 1.4em; background: rgba(255, 228, 92, .7); transform: translateX(-50%) rotate(-3deg); border-left: .1em dashed rgba(29, 44, 94, .2); border-right: .1em dashed rgba(29, 44, 94, .2); }
/* a sticky note */
.note { background: var(--yellow); border-radius: .2em .2em 1em .2em / .2em .2em .5em .2em; box-shadow: .2em .3em 0 var(--shadow); transform: rotate(-2deg); }
/* a word gone over with the highlighter */
.tag { background: linear-gradient(transparent 12%, var(--blue) 12% 88%, transparent 88%); padding: 0 .6em; border-radius: .3em; white-space: nowrap; }
.ribbon { background: var(--pink); padding: .1em 1em; border: .12em solid var(--ink); border-radius: var(--wob2); text-transform: uppercase; letter-spacing: .04em; transform: rotate(-3deg); }

button, select, input { font: inherit; color: inherit; }
button { position: relative; border: .14em solid var(--ink); border-radius: var(--wob); background: #fffef8; padding: .35em 1.1em; cursor: pointer;
  box-shadow: .18em .22em 0 var(--shadow); transition: transform .08s, box-shadow .08s; }
button:nth-of-type(even) { border-radius: var(--wob2); }
button:hover { transform: translateY(-.1em) rotate(-1.5deg); }
button:active { transform: translate(.12em, .16em); box-shadow: 0 0 0 var(--shadow); }
button:disabled { opacity: .55; pointer-events: none; }
button.big { font-size: 1.9em; background: var(--yellow); padding: .2em 1.4em; }
button.go { background: var(--green); }
button.sq { padding: .35em .45em; line-height: 1; }
button.small { font-size: .75em; }
.row { display: flex; gap: .7em; align-items: center; justify-content: center; flex-wrap: wrap; }

#loading { position: fixed; inset: 0; display: grid; place-content: center; gap: 2em; z-index: 60; transition: opacity .3s; background-color: var(--paper);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 2.2em 2.2em; }
#loading .ball { width: 4em; height: 3.9em; margin: auto; border: .22em solid var(--ink); border-radius: 2em 2.2em 1em 1.1em; background: var(--yellow); animation: hop .5s infinite alternate cubic-bezier(.3, 0, .7, 1); }
#loading .bar, .xp .bar { width: 15em; height: 1em; border: .14em solid var(--ink); border-radius: var(--wob); background: #fffef8; overflow: hidden; }
#loading .bar i { display: block; height: 100%; background: var(--pink); animation: load .6s forwards; }
.xp .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-55deg, var(--green) 0 .35em, #6cc97e .35em .5em); transition: width 1s; }
@keyframes hop { to { transform: translateY(-2.5em) scale(.92, 1.08); } }
@keyframes load { from { width: 0; } to { width: 100%; } }
@keyframes pop { 0% { transform: var(--tf, none) scale(1.25); } }
@keyframes pulse { to { transform: scale(1.12); } }
@keyframes wiggle { from { transform: rotate(var(--r, -3deg)); } to { transform: rotate(calc(var(--r, -3deg) * -1)); } }

#menu { position: fixed; left: 0; right: 0; top: 2.5%; display: flex; flex-direction: column; align-items: center; gap: .6em; pointer-events: none; }
#menu > * { pointer-events: auto; }
/* the title: big felt-tip letters, each a different pen, never quite on the line */
#title { margin: 0; display: flex; gap: .04em; font-size: 4.6em; line-height: 1; padding: 0 .3em .05em; background: linear-gradient(transparent 62%, var(--yellow) 62% 92%, transparent 92%); }
#title span { color: var(--c); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; display: inline-block; transform-origin: 50% 80%; animation: wiggle 1.3s var(--d) infinite alternate steps(2); }
#title .sp { width: .35em; }
.who { display: flex; align-items: center; gap: .6em; padding: .3em .7em .3em 1em; font-size: 1.15em; }
.who button { box-shadow: none; }
#daily { position: fixed; left: 0; right: 0; bottom: calc(2% + var(--sb)); display: flex; gap: .7em; font-size: .85em; flex-wrap: wrap; justify-content: center; }
#daily span { background: #fffef8; border: .12em dashed var(--ink); border-radius: var(--wob2); padding: .15em .8em; }
#bSettings { position: fixed; top: calc(1.5% + var(--st)); right: calc(1.5% + var(--sr)); font-size: 1.1em; }

.topbox { position: fixed; top: 3%; left: 50%; transform: translateX(-50%) rotate(-.6deg); display: flex; flex-direction: column; gap: .55em; align-items: center; padding: .8em 1.3em .7em; max-width: 94vw; }
#lobby { font-size: 1.3em; gap: .45em; padding: .7em 1.1em .55em; width: max-content; max-width: calc(100vw - 2 * max(5.5em, var(--sl), var(--sr))); }
#lobby .row { gap: .5em; }
#lobby button { padding: .3em .8em; }
#lobbyInfo { font-size: 1.1em; }
#lobbyHint { font-size: .72em; opacity: .75; }
#lobbyHint:empty { display: none; }
#codeBox { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: .2em .6em .25em; }
#codeBox small { font-size: .5em; text-transform: uppercase; letter-spacing: .05em; }
#codeBox b { font-size: 1.5em; letter-spacing: .12em; }
#bStart { font-size: 1.35em; padding: .15em 1em; }
#bStart:not(:disabled) { animation: pulse .6s infinite alternate; }
#hostOpts { display: grid; grid-template-columns: 1fr 1fr; gap: .5em 1.6em; font-size: 1.05em; }
#hostOpts p { grid-column: 1 / -1; margin: .2em 0 0; font-size: .8em; opacity: .8; }
#hostOpts label, dialog label { display: flex; align-items: center; gap: .6em; justify-content: space-between; }
dialog label { width: 100%; }
#oGames { display: flex; gap: .35em; grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
#oGames button { padding: .15em .2em; font-size: 1.5em; box-shadow: none; opacity: .3; border-color: transparent; background: none; }
#oGames button.on { opacity: 1; background: var(--yellow); border-color: var(--ink); }
select { border: .12em solid var(--ink); border-radius: var(--wob2); padding: .05em .4em; background: #fffef8; }
input[type=checkbox] { width: 1.5em; height: 1.5em; accent-color: var(--ink); }
input[type=range] { accent-color: var(--red); }

#hud { position: fixed; top: 1.5%; left: 50%; transform: translateX(-50%); display: flex; gap: .7em; align-items: center; pointer-events: none; white-space: nowrap; }
#hudTitle { background: #fffef8; border: .12em solid var(--ink); border-radius: var(--wob); padding: .05em .7em; display: flex; gap: .4em; align-items: center; }
#hudTimer { font-size: 1.4em; min-width: 2.4em; text-align: center; background: linear-gradient(transparent 12%, var(--yellow) 12% 88%, transparent 88%); }
#hudTimer:empty { display: none; }
#hudTimer.hurry { background: linear-gradient(transparent 12%, #ff9c92 12% 88%, transparent 88%); animation: pulse .5s infinite alternate; }
#hudMut { font-size: .8em; }
#bLeave { position: fixed; top: calc(1.5% + var(--st)); right: calc(1.5% + var(--sr)); font-size: 1em; }

#reel, #card, #board { position: fixed; left: 50%; top: 50%; --tf: translate(-50%, -50%) rotate(-1.2deg); transform: var(--tf); text-align: center; }
#reel { padding: 1.2em 2.5em 1em; min-width: 22em; }
#reelIcon .ic { width: 6.5em; height: 6.5em; }
#reelName { font-size: 2.3em; }
#reel.hit { animation: pop .4s; background-color: var(--yellow); }
#card { padding: 1.1em 1.4em .9em; animation: pop .35s; }
#card h2, #board h2, dialog h2 { margin: 0; font-size: 2.1em; display: flex; gap: .35em; align-items: center; justify-content: center; }
#card h2, #board h2, dialog h2 { text-decoration: underline wavy var(--red); text-decoration-thickness: .06em; text-underline-offset: .15em; }
#card p { margin: .3em 0 .5em; font-size: 1.25em; }
#cardNew { position: absolute; top: -.5em; right: -1.4em; transform: rotate(9deg); background: var(--yellow); }
#cardMut { position: absolute; bottom: -1em; left: 50%; transform: translateX(-50%) rotate(-2deg); background: var(--green); font-size: 1.15em; white-space: nowrap; animation: pulse .5s infinite alternate; }
#demo { display: block; width: calc(var(--u) * 50); border: .14em solid var(--ink); border-radius: .4em; margin: auto; }
#cardKeys { font-size: .95em !important; margin: .6em 0 0 !important; display: flex; gap: .4em; align-items: center; justify-content: center; flex-wrap: wrap; }
#cardKeys kbd { font: inherit; border: .12em solid var(--ink); border-bottom-width: .22em; border-radius: .35em; padding: 0 .45em; background: #fffef8; }

#big { position: fixed; left: 50%; top: 42%; --tf: translate(-50%, -50%) rotate(-4deg); transform: var(--tf); font-size: 12em; line-height: 1; color: var(--red); -webkit-text-stroke: .03em var(--ink); paint-order: stroke fill;
  padding: 0 .15em; background: linear-gradient(transparent 55%, var(--yellow) 55% 90%, transparent 90%); pointer-events: none; animation: pop .3s; white-space: nowrap; }
#banner { position: fixed; left: -5%; right: -5%; top: 15%; text-align: center; font-size: 2.8em; background: var(--pink); border-block: .1em solid var(--ink); padding: .1em; --tf: rotate(-2deg); transform: var(--tf);
  pointer-events: none; animation: pop .4s; letter-spacing: .04em; text-transform: uppercase; }
#note, #toast { position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%) rotate(-1deg); background: var(--yellow); border: .12em solid var(--ink); border-radius: var(--wob); padding: .2em 1.2em; pointer-events: none; white-space: nowrap; }
#toast { bottom: auto; top: 15%; background: var(--pink); z-index: 40; }

#board { width: calc(var(--u) * 62); padding: 1em 1em 1em; }
#rows { position: relative; margin-top: .6em; --tf: none; }
.rowp { position: absolute; left: 0; right: 0; height: 2.45em; display: flex; align-items: center; gap: .6em; transition: top .7s cubic-bezier(.3, 1.4, .5, 1); background: #fffef8; border: .1em solid var(--ink); border-radius: var(--wob2); padding: 0 .9em 0 .35em; overflow: hidden; }
.rowp:nth-child(odd) { border-radius: var(--wob); }
.rowp.me { border-width: .2em; background: #fff8c9; }
.rowp .fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .38; transition: width .9s; }
.rowp > * { position: relative; }
.rowp .dot { width: 1.9em; height: 1.9em; border: .1em solid var(--ink); border-radius: 45% 55% 50% 50%; display: grid; place-content: center; flex: none; }
.rowp .dot .ic { width: 1.15em; height: 1.15em; vertical-align: 0; }
.rowp .pl { width: 1.3em; font-size: 1.3em; }
.rowp .nm { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: .35em; align-items: center; }
.rowp .sc { opacity: .75; display: flex; align-items: center; }
.rowp .sc .ic { filter: brightness(0) saturate(100%) invert(72%) sepia(60%) saturate(900%) hue-rotate(2deg); }
.rowp .pt { background: var(--green); border: .1em solid var(--ink); border-radius: var(--wob); padding: 0 .55em; animation: pop .4s; display: flex; gap: .25em; align-items: center; }
.rowp .pt:empty { display: none; }
.rowp .tot { font-size: 1.4em; min-width: 1.6em; text-align: right; }
.rowp .ar { width: 0; height: 0; border: .4em solid transparent; }
.rowp .ar.up { border-bottom-color: #2f8f4b; margin-bottom: .4em; }
.rowp .ar.down { border-top-color: var(--red); margin-top: .4em; }

#podium { position: fixed; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .55em; align-items: center; }
.xp { display: flex; gap: .7em; align-items: center; padding: .3em 1em; white-space: nowrap; }
.xp .bar { width: min(15em, 40vw); }
#xpNew { animation: pulse .5s infinite alternate; background: var(--yellow); }
#podium .row button { font-size: 1.3em; }

#bEmote { position: fixed; left: calc(1.5% + var(--sl)); bottom: 3%; font-size: 1.25em; }
#emotes { position: fixed; left: calc(1.5% + var(--sl)); bottom: calc(3% + 4.2em); display: grid; grid-template-columns: repeat(4, auto); gap: .35em; padding: .8em .5em .5em; }
#emotes button { box-shadow: none; padding: .1em; border-color: transparent; background: none; }
#emotes button .ic { width: 2.2em; height: 2.2em; vertical-align: 0; }
#emotes button.txt { grid-column: span 4; font-size: .8em; background: #fffef8; border-color: var(--ink); padding: .15em; }
#bAct { position: fixed; right: calc(4% + var(--sr)); bottom: 8%; width: calc(6.6em * var(--ctl, 1)); height: calc(6.6em * var(--ctl, 1)); border-radius: 50% 46% 52% 48%; background: #ff9c92; opacity: .92; font-size: 1.05em; padding: 0; border-width: .2em; }
#bAct .ic { display: block; margin: 0 auto .1em; width: 2em; height: 2em; filter: brightness(0) saturate(100%) invert(14%) sepia(40%) saturate(2500%) hue-rotate(210deg); }
#pad { position: fixed; right: calc(3% + var(--sr)); bottom: 5%; display: grid; grid-template-areas: ". u ." "l d r"; gap: .35em; }
#pad button { width: calc(3.7em * var(--ctl, 1)); height: calc(3.7em * var(--ctl, 1)); padding: 0; font-size: 1.2em; }
#pad .ic { width: 1.9em; height: 1.9em; vertical-align: 0; filter: brightness(0) saturate(100%) invert(14%) sepia(40%) saturate(2500%) hue-rotate(210deg); }
#pad [data-d="2"] { grid-area: u; background: #8fdc9c; } #pad [data-d="0"] { grid-area: l; background: #ffb3d1; }
#pad [data-d="1"] { grid-area: d; background: #8fe0e0; } #pad [data-d="3"] { grid-area: r; background: #ffc98a; }
#pad [data-d="0"] .ic { transform: rotate(-90deg); } #pad [data-d="1"] .ic { transform: rotate(180deg); } #pad [data-d="3"] .ic { transform: rotate(90deg); }
body:not(.touch) #bAct, body:not(.touch) #pad { display: none !important; }

dialog { padding: 1.4em 1.7em 1.2em; text-align: center; color: var(--ink); max-width: 92vw; max-height: 94vh; overflow: visible; }
dialog[open] { display: flex; flex-direction: column; gap: .7em; align-items: center; }
dialog::backdrop { background: rgba(29, 44, 94, .45); }
dialog p { margin: 0; max-width: 30em; }
/* the close cross sits inside the corner, so a scrolling dialog never cuts it off */
dialog .x { position: absolute; right: .45em; top: .45em; font-size: 1em; padding: .3em .35em; background: #ff9c92; border-radius: 50% 46% 52% 48%; z-index: 2; }
dialog h2 { padding: 0 1.6em; }
#codeIn { width: 5.2em; text-align: center; font-size: 1.7em; letter-spacing: .15em; text-transform: uppercase; border: 0; border-bottom: .12em dashed var(--ink); padding: 0; background: none; user-select: text; -webkit-user-select: text; }
#tabs button { font-size: .75em; padding: .2em .8em; box-shadow: none; }
#tabs button.on { background: var(--yellow); }
#grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55em; max-height: 50vh; overflow: auto; padding: .3em; }
#grid button { position: relative; padding: 0; width: 5.2em; height: 5.2em; overflow: hidden; box-shadow: none; }
#grid button.on { background: var(--yellow); border-width: .22em; }
#grid button.lock canvas { opacity: .3; }
#grid button small { position: absolute; left: 0; right: 0; bottom: .2em; font-size: .55em; display: flex; gap: .2em; justify-content: center; align-items: center; }
#grid canvas { width: 100%; height: 100%; }
#keysBox { width: 100%; display: flex; flex-direction: column; gap: .4em; align-items: center; border-top: .12em dashed var(--ink); padding-top: .5em; }
#keysBox h3 { margin: 0; font-size: 1.1em; }
#keysBox small { opacity: .75; font-size: .7em; }
#keys { display: grid; grid-template-columns: repeat(5, auto); gap: .5em; }
#keys label { flex-direction: column; gap: .1em; font-size: .75em; width: auto; }
#keys button { min-width: 3.2em; padding: .25em .5em; border-bottom-width: .28em; border-radius: .4em; box-shadow: none; }
#keys button.wait { background: var(--yellow); animation: pulse .4s infinite alternate; }
body.touch #keysBox { display: none; }
body.touch #bEmote { bottom: auto; top: calc(1.5% + var(--st)); }
body.touch #emotes { bottom: auto; top: calc(1.5% + 4.2em); }

/* Phones held upright: the whole game waits behind this page until the phone is turned sideways. */
#rotate { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 6vw; background: rgba(29, 44, 94, .55); }
#rotate .paper { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4vw; padding: 8vw 6vw 6vw; text-align: center; font-size: 5vw; transform: rotate(-1.5deg); }
#rotate .ic { width: 34vw; height: 34vw; animation: tilt 1.6s infinite ease-in-out; }
#rotate h2 { margin: 0; font-size: 1.6em; text-decoration: underline wavy var(--red); text-decoration-thickness: .06em; text-underline-offset: .15em; }
#rotate p { margin: 0; font-size: 1.05em; }
#rotate button.big { font-size: 1.25em; }
#rotate button.small { font-size: .8em; box-shadow: none; opacity: .8; }
@keyframes tilt { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
/* Phones held sideways: keep the lobby panel to two short lines so the arena stays visible. */
@media (max-height: 450px) {
  #lobbyHint { display: none; }
  #lobby { gap: .3em; padding: .5em .9em .45em; }
  #lobbyInfo { font-size: .9em; }
}

/* Accessibility settings */
#dSettings { max-height: 94vh; overflow: auto; }
#dSettings .cols { display: flex; gap: 1.6em; align-items: flex-start; width: 100%; }
#genBox { display: flex; flex-direction: column; gap: .5em; min-width: 13em; }
#dSettings .cols > div { flex: 1; }
@media (max-aspect-ratio: 1/1) { #dSettings .cols { flex-direction: column; } }
#accessBox { display: flex; flex-direction: column; gap: .5em; align-items: center; border-left: .12em dashed var(--ink); padding-left: 1.2em; min-width: 13em; }
#accessBox label { width: 100%; }
#accessBox h3 { margin: 0; font-size: 1.1em; }
body:not(.touch) #accessBox .tch { display: none; }
/* joystick on the right: the action button (and the dance arrows) move to the left */
body.ctl-right #bAct { right: auto; left: calc(4% + var(--sl)); }
body.ctl-right #pad { right: auto; left: calc(3% + var(--sl)); }
body.big-text { font-size: max(16px, calc(var(--u) * 1.85)); }
body.calm *, body.calm *::before { animation: none !important; transition: none !important; }