/* The site is light everywhere; only the top bar and the match stay dark. */
:root {
  --bg: #c5d8b0; --panel: #fff; --fg: #1f2d1b; --dim: #41573c; --accent: #f59a23; --line: #a9c295;
  --ink: #3b0f08; --gold: linear-gradient(#ffe14d, #ffb51f 55%, #f97f12);
  --raised: inset 0 3px 0 #fff3b0, inset 0 -4px 0 #e8640a, 0 4px 0 var(--ink);
  --pressed: inset 0 3px 0 #fff3b0, inset 0 -2px 0 #e8640a, 0 1px 0 var(--ink);
  --error: #961c15; --good: #1c5f2d; --card: #fff; --soft: #eef3e8;
  --stage: linear-gradient(#cfe8f9, #eef8fd 66%, #b5d694 66.5%, #9cc77c);
}
#topbar, #soundBar, #game, body[data-screen="game"] {
  --bg: #1f3b2d; --panel: #2b4f3c; --fg: #f4efe0; --dim: #b8c7b4; --line: #ffffff24;
  --error: #ff9a8b; --good: #9fe07a; --card: #0002; --soft: #0003;
}
.fitting { color: var(--fg); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.45 ui-rounded, "Trebuchet MS", system-ui, sans-serif; }
/* The pages sit on a soft field of little leaves and seeds instead of a flat color. */
body:not([data-screen="game"]) {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 5px 9px at 30% 30%, #9fc27f55 98%, transparent),
    radial-gradient(ellipse 9px 5px at 75% 70%, #b2d0917a 98%, transparent),
    radial-gradient(circle 2.5px at 60% 20%, #ffffff66 98%, transparent);
  background-size: 88px 88px, 88px 88px, 44px 44px;
  background-attachment: fixed;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }

.screen { max-width: 440px; margin: 0 auto; padding: 32px 16px; display: flex; flex-direction: column; gap: 12px; }
h1 { margin: 0; font-size: 44px; letter-spacing: 2px; color: #27512f; }
h2 { margin: 0; font-size: 20px; }
.tagline { margin: 0; color: var(--dim); }
.field { display: flex; flex-direction: column; gap: 4px; color: var(--dim); font-size: 14px; }
input { background: var(--soft); border: 2px solid var(--line); border-radius: 8px; padding: 11px; min-width: 0; width: 100%; color: var(--fg); }
input:focus { outline: 2px solid var(--accent); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 0; min-width: 0; }
.btn { background: var(--panel); border: 2px solid var(--line); border-radius: 8px; padding: 11px 12px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.btn:hover { border-color: #ffffff60; }
.btn.primary { background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; color: var(--ink); font-weight: 800; box-shadow: var(--raised); }
.btn { transition: transform 0.08s, filter 0.12s; }
.btn:not(:disabled):hover { filter: brightness(1.05); }
.btn:not(:disabled):active { transform: translateY(2px); }
.btn.primary:not(:disabled):active { box-shadow: var(--pressed); }
.btn.is-on { background: #4cc35c; border-color: #4cc35c; color: #0f2a14; }
.error { min-height: 22px; margin: 0; color: var(--error); }
.rooms h2 { font-size: 15px; color: var(--dim); }
.online-now { margin: 0; font-weight: 800; color: var(--good); }
/* With the Plaza open, wide screens show it beside the buttons instead of far below them. */
@media (min-width: 900px) {
  #home:has(#plaza:not([hidden])) { display: grid; grid-template-columns: 440px minmax(0, 1fr); column-gap: 24px; max-width: 920px; align-content: start; }
  #home:has(#plaza:not([hidden])) > * { grid-column: 1; }
  #home:has(#plaza:not([hidden])) > #plaza { grid-column: 2; grid-row: 1 / span 30; align-self: start; position: sticky; top: 12px; background: var(--card); border-radius: 14px; padding: 12px 14px; box-shadow: 0 3px 10px #0000001a; }
  #home > #plaza #plazaLog { height: 300px; background: var(--soft); }
  #home > #plaza h2 { font-size: 18px; color: var(--fg); }
  #plazaJump { display: none; }
}
#feedList { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#feedList li { background: var(--card); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
#feedList a { color: var(--fg); font-weight: 800; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 14px; background: var(--soft); color: #8a9a80; font-size: 12px; opacity: 0.65; filter: grayscale(1); }
.badge-item.on { background: #fdf0d8; color: #24321f; opacity: 1; filter: none; font-weight: 700; }
.matches ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.matches li { display: flex; gap: 12px; justify-content: space-between; padding: 4px 10px; border-radius: 8px; background: var(--soft); font-size: 13px; }
.matches li.won { background: #dff3d4; }
.matches.history li { flex-wrap: wrap; gap: 2px 12px; padding: 6px 10px; }
.matches.history ul { gap: 5px; }
#helpLog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#helpLog li { background: var(--card); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
#helpLog b { display: block; margin-bottom: 4px; }
#helpLog small { display: block; margin-top: 6px; color: var(--dim); }
#helpForm input { flex: 3; }
#helpForm .btn { flex: 1; }
.age-notice { margin: 8px 16px; text-align: center; font-weight: 700; font-size: 14px; }
#boardCta { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--soft); }
#boardCta p { margin: 0 0 6px; font-size: 14px; }
#rate { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--soft); }
#rate p { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
#rate .row { flex-wrap: wrap; justify-content: flex-start; }
#hall { background: var(--card); border-radius: 10px; padding: 10px 12px; margin-block: 8px; }
#hall h3 { margin: 0 0 6px; }
#hallList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
#hallList li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
#hallList b { flex-basis: 100%; }
#items li.weekly { border-color: #e8bd3f; }
#clanPage.clan-wide { max-width: 980px; }
.clan-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.clan-features article { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--card); font-size: 14px; }
.clan-features .icon { font-size: 28px; line-height: 1.2; }
.clan-features b { font-size: 16px; }
.clan-features p { margin: 0; color: var(--dim); }
.clan-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; color: var(--dim); text-align: center; }
.clan-empty span { font-size: 36px; filter: grayscale(1); opacity: 0.5; }
.clan-form input, .clan-box .row input { width: 100%; min-width: 0; padding: 10px 12px; background: #f6f9f2; color: #24321f; border: 2px solid #c9d8bf; border-radius: 8px; }
@media (max-width: 760px) {
  .clan-features { grid-template-columns: minmax(0, 1fr); }
  .clan-features article { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; }
  .clan-features .icon { grid-row: 1 / 3; }
}
.clan-page { display: flex; flex-direction: column; gap: 12px; }
.clan-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(120deg, #1f3b2d, #2f6a4a); color: #fffdf2; }
.clan-hero h2 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.clan-hero p { margin: 2px 0 0; font-size: 14px; color: #d8e8d2; overflow-wrap: anywhere; }
.clan-emblem { flex: none; display: grid; place-items: center; width: 68px; height: 76px; padding-bottom: 8px; clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%); background: linear-gradient(160deg, hsl(var(--hue) 62% 48%), hsl(var(--hue) 62% 30%)); color: #fff; font-weight: 800; font-size: 18px; letter-spacing: 0.5px; }
.clan-numbers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.clan-numbers div { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 10px 4px; border-radius: 10px; background: var(--card); text-align: center; }
.clan-numbers b { font-size: 19px; overflow-wrap: anywhere; }
.clan-numbers span { font-size: 12px; color: var(--dim); }
.clan-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.clan-columns > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.clan-box p { margin: 0; }
.clan-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.clan-box h4 { margin: 4px 0 0; font-size: 14px; color: var(--dim); }
.clan-bar { height: 12px; border-radius: 999px; overflow: hidden; background: #dde7d3; }
.clan-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f5c63c, var(--accent)); }
.season-trophies, .trophy-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.season-trophies { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.season-trophies li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fdf0d8; border: 2px solid #f5c63c; font-size: 13px; }
.season-trophies .icon { font-size: 26px; }
.trophy-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.trophy { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 10px 6px; border: 2px solid #dde7d3; border-radius: 10px; background: var(--soft); text-align: center; font-size: 13px; }
.trophy .icon { font-size: 28px; line-height: 1.1; filter: grayscale(1); opacity: 0.45; }
.trophy small { color: var(--dim); }
.trophy.on .icon { filter: none; opacity: 1; }
.trophy.on.bronze { border-color: #d08b52; background: #f8ece0; }
.trophy.on.silver { border-color: #9fb1bd; background: #eef3f6; }
.trophy.on.gold { border-color: #f5c63c; background: #fdf3d3; }
.trophy-progress { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.trophy-progress .clan-bar { height: 6px; }
.member-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.member-text .who { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.member-text .who:hover { text-decoration: underline; }
.member-text small { color: var(--dim); font-size: 12px; }
.clan-open { font-weight: 700; text-align: start; }
.closet .clan-numbers { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); margin: 8px 0; }
.closet .clan-numbers div { background: var(--soft); }
@media (max-width: 760px) {
  .clan-columns { grid-template-columns: minmax(0, 1fr); }
  .clan-numbers { grid-template-columns: repeat(3, 1fr); }
  .clan-hero h2 { font-size: 20px; }
}
.clan-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.clan-people li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.clan-box { display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: 12px; padding: 12px 14px; }
.clan-box h3 { margin: 4px 0 0; }
.clan-log { list-style: none; margin: 0; padding: 8px 10px; height: 220px; overflow-y: auto; background: var(--soft); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; font-size: 14px; }
.clan-form { display: flex; flex-direction: column; gap: 8px; }
.clan-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.clan-members li { display: flex; align-items: center; gap: 8px; }
.clan-members .who { flex: 1; font-weight: 700; }
.clan-members .avatar-small { width: 40px; height: 40px; flex: none; object-fit: contain; }
.clan-box .row input { flex: 3; }
.clan-box .row .btn { flex: 1; }
.clan-log .linkish { margin-inline-start: 6px; }
.clan-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.clan-top li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; background: var(--soft); border-radius: 8px; font-size: 14px; }
.clan-top li span { margin-inline-start: auto; color: var(--dim); }
#plazaLog { list-style: none; margin: 6px 0; padding: 8px 10px; height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; background: var(--card); border-radius: 8px; overflow-wrap: anywhere; font-size: 14px; }
#plazaLog a { font-weight: 800; color: var(--fg); }
#plazaLog .empty { color: var(--dim); }
#plazaForm input { flex: 3 1 0; }
#plaza h3 { margin: 10px 0 4px; font-size: 14px; color: var(--dim); }
#plazaPeople { max-height: 220px; overflow-y: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { flex: 1 1 auto; padding: 7px 10px; border: 2px solid var(--line); border-radius: 18px; background: var(--card); color: var(--fg); font-weight: 700; cursor: pointer; }
.chips button.on { border-color: var(--accent); background: #fdf0d8; }
#mapPick, #botPick { padding: 9px; border: 2px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--fg); font: inherit; }
#online { font-weight: 400; }
ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#roomList li button { width: 100%; display: flex; justify-content: space-between; background: var(--card); border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; }
#roomList .empty { color: var(--dim); font-size: 14px; }
#players li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--card); border-radius: 8px; padding: 7px 10px; }
#players canvas { width: 32px; height: 32px; image-rendering: pixelated; }
#players .who { flex: 1 1 130px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#players .score { color: var(--dim); font-size: 14px; }
#players .ok { color: #7be08a; font-weight: 700; }

#game { max-width: none; height: 100dvh; padding: 6px; gap: 6px; align-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
/* Around the board: a forest at night, lighter in the middle where the round is. */
body[data-screen="game"] { background: radial-gradient(ellipse 70% 60% at 50% 50%, #2f6145 0%, #1d3d2c 55%, #10261b 100%) fixed; }
#hud { width: 100%; max-width: 1020px; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 15px; }
/* Who is still standing and the time before the water, as two pills that read at a glance. */
#alive:not(:empty), #clock:not(:empty) { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #0007; border: 1px solid #ffffff26; color: #fff4d6; font-size: 16px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #0008; }
#alive:not(:empty)::before { content: '🐾'; font-size: 14px; }
#clock:not(:empty)::before { content: '⏱'; font-size: 14px; }
#clock.soon { background: #b3261e; border-color: #ff8a7a; animation: clockSoon 0.5s ease-in-out infinite alternate; }
@keyframes clockSoon { to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { #clock.soon { animation: none; } }
#stats { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; overflow: hidden; }
.stat { display: inline-flex; align-items: center; gap: 3px; }
.stat canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.icon { background: var(--soft); border: 0; border-radius: 6px; width: 34px; height: 34px; cursor: pointer; }
.icon.off { opacity: 0.45; }
/* The boss: its face, its name and its life in segments, one for each blast it can take. */
#bossBar { width: 100%; max-width: 560px; display: flex; align-items: center; padding: 0 8px; }
#bossFace { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #f5c63c; box-shadow: 0 3px 0 #9a6a0e, 0 4px 14px #0008; background: #fff3d6; position: relative; z-index: 1; }
.boss-info { flex: 1; min-width: 0; display: grid; gap: 3px; margin-inline-start: -10px; }
#bossName { padding-inline-start: 18px; font-size: 16px; font-weight: 900; color: #ffe7a8; text-shadow: 0 2px 0 #3a1a08, 0 0 6px #000a; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-life { position: relative; height: 18px; border-radius: 0 9px 9px 0; background: #2a120a; border: 2px solid #f5c63c; box-shadow: inset 0 2px 4px #000a, 0 2px 0 #9a6a0e; overflow: hidden; }
.boss-life i { position: absolute; inset: 0 auto 0 0; width: calc(var(--hp, 1) * 100%); }
#bossLost { background: #fff1c9; transition: width .7s ease .25s; }
#bossLife { background: linear-gradient(#ffd25a, #ff8a1f 55%, #d9480f); transition: width .15s ease-out; }
#bossBar.angry #bossLife { background: linear-gradient(#ff8a6a, #e3261b 55%, #8f1208); animation: angry .5s ease-in-out infinite alternate; }
.boss-life::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--segs, 4) - 2px), #2a120a calc(100% / var(--segs, 4) - 2px) calc(100% / var(--segs, 4))); }
#bossBar.hit #bossFace { animation: bossHit .35s ease-out; }
@keyframes bossHit { 30% { transform: scale(1.15) rotate(-8deg); filter: brightness(1.6) saturate(2) hue-rotate(-20deg); } }
@keyframes angry { to { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { #bossBar.angry #bossLife, #bossBar.hit #bossFace { animation: none; } }
/* Before a boss fight: its face, name and a line, across the map like in fighting games. */
#bossIntro { position: absolute; inset: 50% 0 auto; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 16px; background: linear-gradient(90deg, transparent, #1c0b05e6 12%, #3a1408f2 50%, #1c0b05e6 88%, transparent); border-block: 3px solid #f5c63c; pointer-events: none; z-index: 5; animation: introBand .35s ease-out; }
#bossIntroFace { width: clamp(84px, 22vw, 132px); height: auto; border-radius: 50%; border: 4px solid #f5c63c; box-shadow: 0 0 0 4px #9a6a0e, 0 6px 24px #000c; background: #fff3d6; animation: introFace .5s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
.boss-intro-text { display: grid; gap: 2px; min-width: 0; animation: introText .45s ease-out .25s both; }
#bossIntroTitle { color: #ffcf6a; font-size: clamp(13px, 3.4vw, 17px); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }
#bossIntroName { color: #fff; font-size: clamp(26px, 7vw, 46px); font-weight: 900; line-height: 1.05; text-shadow: 0 3px 0 #a3360c, 0 0 18px #ff7a1f99; }
#bossIntroLine { color: #ffe7c4; font-size: clamp(13px, 3.4vw, 17px); font-style: italic; }
@keyframes introBand { from { opacity: 0; transform: translateY(-50%) scaleY(0); } }
@keyframes introFace { from { opacity: 0; transform: translateX(-60px) scale(.4) rotate(-20deg); } }
@keyframes introText { from { opacity: 0; transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { #bossIntro, #bossIntroFace, .boss-intro-text { animation: none; } }
#stage { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
canvas#canvas { image-rendering: pixelated; display: block; background: #000; border-radius: 10px; box-shadow: 0 8px 28px #0009; }
#banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000b; padding: 14px 24px; border-radius: 10px; font-size: clamp(22px, 5vw, 40px); font-weight: 800; text-align: center; pointer-events: none; max-width: 90%; }
#touch { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); }
#pad { display: grid; grid-template: repeat(3, 56px) / repeat(3, 56px); gap: 2px; }
#pad button { background: var(--soft); border: 0; border-radius: 8px; font-size: 20px; touch-action: none; }
#pad [data-dir="1"] { grid-area: 1 / 2; }
#pad [data-dir="3"] { grid-area: 2 / 1; }
#pad [data-dir="4"] { grid-area: 2 / 3; }
#pad [data-dir="2"] { grid-area: 3 / 2; }
#pad button.on, #bombBtn.on { background: var(--accent); color: #2c1b05; }
#bombBtn { flex: none; width: 112px; height: 112px; border-radius: 50%; border: 3px solid var(--ink); background: linear-gradient(#ff6a55, #e4322c 60%, #b81f1f); color: #fff; font-weight: 800; box-shadow: inset 0 3px 0 #ffb3a3, 0 4px 0 var(--ink); touch-action: none; }


.profile { display: flex; flex-wrap: wrap; gap: 4px 14px; background: var(--card); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.profile b { font-weight: 800; }
.capim { color: var(--good); font-weight: 700; font-size: 15px; }
.back { align-self: flex-start; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--dim); }
.tiers b { font-weight: 800; }
#rankList { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
#rank { max-width: 760px; }
.rank-hero { padding: 18px 20px; border-radius: 14px; background: linear-gradient(120deg, #1f3b2d, #2f6a4a); color: #fffdf2; }
.rank-hero h2 { margin: 0; font-size: 26px; }
.rank-hero p { margin: 4px 0 0; font-size: 14px; color: #d8e8d2; }
.rank-hero #seasonLine { margin-top: 8px; color: #f5c63c; font-weight: 700; }
#podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
#podium:empty { display: none; }
#podium article { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 12px 8px; border: 2px solid #c9d8bf; border-radius: 12px; background: var(--card); font-size: 14px; text-align: center; }
#podium .podium-1 { padding-block: 22px 16px; border-color: #f5c63c; background: linear-gradient(#fdf3d3, #fff); }
#podium .podium-2 { border-color: #9fb1bd; background: linear-gradient(#eef3f6, #fff); }
#podium .podium-3 { border-color: #d08b52; background: linear-gradient(#f8ece0, #fff); }
#podium .medal { font-size: 28px; line-height: 1; }
#podium .podium-1 .medal { font-size: 36px; }
#podium .rank-face { width: 72px; height: 72px; }
#podium .podium-1 .rank-face { width: 96px; height: 96px; }
#podium .who { max-width: 100%; overflow: hidden; color: inherit; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
#podium .who:hover { text-decoration: underline; }
#podium .tier { background: #24321f; border-radius: 9px; padding: 1px 8px; font-size: 12px; font-weight: 800; }
.rank-face { flex: none; object-fit: contain; }
#rank .tiers { justify-content: center; }
#rankMe { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fdf0d8; font-size: 14px; font-weight: 700; text-align: center; }
#rankList li { display: grid; grid-template-columns: 30px 42px minmax(0, 1fr) auto 52px; gap: 8px; align-items: center; background: var(--card); border-radius: 10px; padding: 6px 12px; font-size: 14px; }
#rankList li.rank-empty { display: block; text-align: center; }
#rankList li.me { border-color: var(--accent); background: #fdf0d8; }
#rankList .rank-face { width: 42px; height: 42px; }
#rankList .rank-text { display: flex; flex-direction: column; min-width: 0; }
#rankList .rank-text small { color: var(--dim); font-size: 12px; }
#rankList .pts { text-align: end; }
#rankList .pos { font-weight: 800; text-align: center; }
#rankList .who { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#rankList .pos { color: var(--dim); }
#items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
#items li { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--card); color: var(--fg); border-radius: 12px; padding: 8px 8px 10px; text-align: center; }
#items canvas { width: 64px; height: 64px; image-rendering: pixelated; }
#items .btn { width: 100%; min-height: 40px; padding: 7px 6px; font-size: 15px; line-height: 1.2; background: #fff; border-color: var(--line); color: #24321f; opacity: 1; }
#items .btn.primary { background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; color: var(--ink); font-weight: 800; box-shadow: var(--raised); }
#items .btn.is-on { background: #4cc35c; border-color: #4cc35c; color: #0f2a14; }
#items .btn:disabled { background: #e7ece2; border-color: #d7dfd0; color: #5b6a55; }
#shopClear { align-self: center; }
.shop-wallet { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.shop-wallet small { color: #d8e8d2; font-size: 12px; }
#shop { max-width: 1040px; }
.shop-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shop-hero > div { flex: 1 1 260px; }
.shop-hero .capim { flex: none; padding: 6px 14px; border-radius: 999px; background: #fdf3d3; color: #5a3d00; font-size: 16px; font-weight: 800; }
.shop-hero .capim:empty { display: none; }
#shopWeekly { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; border: 2px solid #f5c63c; border-radius: 12px; background: linear-gradient(100deg, #fdf3d3, #fff); color: #24321f; text-align: start; cursor: pointer; }
#shopWeekly:hover { filter: brightness(0.98); }
#shopWeekly.on { border-color: var(--accent); }
#shopWeekly canvas { flex: none; width: 60px; height: 60px; object-fit: contain; }
.weekly-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.weekly-text small { color: #8a5a00; font-weight: 800; }
.weekly-prices { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.weekly-prices s { color: var(--dim); font-size: 13px; }
.shop-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.shop-side { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shop-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#shopMsg:empty { display: none; }
@media (max-width: 820px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .shop-side { display: contents; }
  #fitting { position: sticky; top: 0; z-index: 5; padding: 6px; box-shadow: 0 4px 12px #0003; }
  #fitting .stage { aspect-ratio: 3 / 1; }
  #fitting p { display: none; }
}
#players .mute { background: none; border: 0; cursor: pointer; opacity: 0.6; padding: 0 2px; }
#players .mute.off { opacity: 1; color: var(--error); }
#players .tier { font-size: 12px; font-weight: 800; }

#chat { display: flex; flex-direction: column; gap: 6px; }
#chatLog { display: flex; flex-direction: column; gap: 2px; height: 130px; overflow-y: auto; background: var(--card); border-radius: 8px; padding: 6px 8px; font-size: 14px; overflow-wrap: anywhere; }
#chatLog:empty { display: none; }
#chatLog .sys { color: var(--dim); }
#chatLog b { font-weight: 800; }
#quickChat { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
#quickChat button { background: var(--soft); border: 0; border-radius: 12px; padding: 3px 9px; font-size: 13px; cursor: pointer; }
#chatForm { display: flex; gap: 6px; }
#chatForm input { flex: 1; padding: 8px; }
#chatForm .btn { padding: 8px 10px; }

#chatDock { position: absolute; left: 6px; bottom: 6px; width: min(240px, 60%); }
#chatDock #chatLog { height: auto; max-height: 96px; background: transparent; padding: 0; pointer-events: none; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000; font-size: 13px; overflow: hidden; }
#chatDock #chatBox { display: none; background: #000a; border-radius: 8px; padding: 6px; }
#chatDock.open #chatBox { display: block; }
#chatToggle { display: none; }
@media (pointer: coarse) { #chatToggle { display: block; } }

#overlay { position: absolute; pointer-events: none; overflow: hidden; }
.bubble { position: absolute; transform: translate(-50%, -100%); max-width: 200px; background: #fffdf2; color: #23180e; border-radius: 6px; padding: 2px 7px; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed { position: absolute; left: 6px; background: #0009; color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 13px; }

#soundBar { position: fixed; top: 8px; right: 8px; z-index: 20; display: flex; gap: 6px; }
#soundBar button { position: relative; width: 40px; height: 40px; padding: 8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--gold); color: var(--ink); cursor: pointer; box-shadow: inset 0 2px 0 #fff3b0, 0 2px 0 var(--ink); }
#soundBar button:hover { filter: brightness(1.1); }
#soundBar svg { display: block; width: 100%; height: 100%; }
#soundBar button[aria-pressed="false"] { background: #e8e6df; color: #6b6f68; }
#soundBar button[aria-pressed="false"]::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 3px; margin-top: -1.5px; background: #d3293a; border-radius: 2px; transform: rotate(-45deg); }
#hud { padding-right: 104px; }

#landing { max-width: 1040px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 36px; }
.hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1; }
.hero-sub { margin: 0; font-size: 19px; }
.hero-cta { font-size: 23px; padding: 14px 36px; border-radius: 18px; text-shadow: 0 1px 0 #ffe98f; animation: cta-pulse 2.4s ease-in-out infinite; }
@keyframes cta-pulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero-cta { animation: none; } }
.hero-capy { width: 100%; height: auto; max-width: 320px; max-height: 50vh; margin: 0 auto; display: block; overflow: visible; transform: scaleX(-1); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cards article { background: var(--card); border-radius: 12px; padding: 14px 16px; transition: transform 0.12s; box-shadow: 0 3px 10px #0000001a; }
.cards article:hover { transform: translateY(-3px); }
.cards h2 { font-size: 18px; color: var(--accent); margin-bottom: 4px; }
.cards p { color: var(--dim); }
.how h2 { font-size: 24px; margin-bottom: 12px; }
#missionList { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#missionList li { display: flex; justify-content: space-between; gap: 10px; background: var(--card); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
#missionList li.done { color: var(--dim); text-decoration: line-through; }
#missionList b { white-space: nowrap; }
.gift { margin: 0; padding: 8px 10px; background: #fdf0d8; border-radius: 8px; font-weight: 700; }
.about { color: var(--dim); max-width: 760px; }
.lang-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
#landingItems { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
#landingItems li { display: flex; align-items: center; gap: 8px; color: var(--dim); }
#landingItems canvas { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
#landingItems b { color: var(--fg); display: block; }
#landing footer { color: var(--dim); font-size: 14px; }

#capyLook { transform-box: view-box; transform-origin: 810px 800px; transition: transform 0.25s ease-out; }
.capy-head { transform-box: view-box; transform-origin: 810px 800px; animation: capy-nod 5s ease-in-out infinite; }
.capy-lid { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); animation: capy-blink 4.3s linear infinite; }
.hero-spark { transform-box: fill-box; transform-origin: center; animation: hero-spark 0.45s steps(2) infinite; }
@keyframes capy-nod {
  0%, 100% { transform: rotate(0); }
  14% { transform: rotate(-0.9deg); }
  28% { transform: rotate(0.7deg); }
  42% { transform: rotate(-0.6deg); }
  56% { transform: rotate(0); }
  76%, 88% { transform: rotate(1deg); }
}
@keyframes capy-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes hero-spark { 50% { transform: scale(0.45); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .capy-head, .capy-lid, .hero-spark { animation: none; }
  #capyLook { transition: none; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding-right: 68px; }
  .hero-capy { max-width: 220px; margin: 0 auto; order: -1; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  #hud { gap: 6px; font-size: 13px; }
  #stats { gap: 5px; }
  .stat canvas { width: 18px; height: 18px; }
}

#topbar { display: flex; align-items: center; gap: 18px; padding: 8px 108px 8px 14px; background: #18301f; border-bottom: 2px solid #0003; flex-wrap: wrap; }
#topbar .brand img { height: 40px; display: block; }
#topbar nav { display: flex; gap: 2px; flex-wrap: wrap; }
#topbar nav a { color: var(--fg); text-decoration: none; font-weight: 700; padding: 6px 10px; border-radius: 6px; }
#topbar nav a:hover { background: #ffffff14; }
#topbar nav a.active { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 600px) {
  #topbar { gap: 4px 8px; padding: 6px 92px 6px 10px; }
  #topbar .brand img { height: 30px; }
  #topbar nav { order: 3; flex: 0 0 calc(100vw - 20px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  [dir="rtl"] #topbar nav { margin-right: -82px; }
  #topbar nav::-webkit-scrollbar { display: none; }
  #topbar nav a { flex: none; padding: 5px 8px; font-size: 14px; }
  #langSelect { flex: 0 1 112px; min-width: 0; max-width: 112px; }
}
#badge, .badge { background: #e4483e; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; margin-left: 2px; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; background: #17110d; color: #fff; padding: 9px 16px; border-radius: 8px; max-width: calc(100vw - 32px); }
.btn { display: inline-block; text-align: center; text-decoration: none; color: inherit; }
.btn:disabled { opacity: 0.55; cursor: default; }
.hero-logo { margin: 0; line-height: 0; }
.hero-logo img { width: min(100%, 420px); }
.hero-logo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rules { list-style: disc; padding-left: 22px; gap: 4px; }
#landing footer a, .screen p a { color: #125230; }
#players a.who { color: inherit; }
#rankList a.who { color: inherit; text-decoration: none; }
#rankList a.who:hover { text-decoration: underline; }

.orkut { max-width: 1040px; margin: 0 auto; padding: 14px 12px 32px; display: grid; grid-template-columns: 200px minmax(0, 1fr) 230px; gap: 12px; align-items: start; }
.col-left, .col-center, .col-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.box { background: #fff; color: #24321f; border: 1px solid #c9d8bf; border-radius: 10px; padding: 12px 14px; }
.box h1 { margin: 0 0 2px; font-size: 26px; }
.box h2 { margin: -12px -14px 10px; padding: 7px 14px; font-size: 16px; background: #d6e6c9; border-radius: 10px 10px 0 0; color: #27512f; }
.box h3 { margin: 0 0 8px; font-size: 14px; color: #27512f; }
.box a { color: #1d6f42; }
.box .btn { color: #24321f; background: #eef3e8; border-color: #c9d8bf; }
.box .btn.primary { background: var(--gold); border: 3px solid var(--ink); border-radius: 14px; color: var(--ink); font-weight: 800; box-shadow: var(--raised); }
.box input, .box textarea { background: #f7faf4; color: #24321f; border: 1px solid #c9d8bf; border-radius: 6px; padding: 8px; width: 100%; font: inherit; resize: vertical; }
.photo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.photo h2 { margin: 4px 0 0; padding: 0; background: none; font-size: 18px; overflow-wrap: anywhere; }
.photo .tier { margin: 0; font-weight: 800; font-size: 14px; text-shadow: 0 0 1px #0006; }
.actions { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; }
.avatar { image-rendering: pixelated; width: 44px; height: 50px; display: block; }
.avatar.big { width: 128px; height: 146px; }
.avatar.small { width: 36px; height: 41px; }
.linkish { background: none; border: 0; padding: 0; color: #1d6f42; font-size: 13px; cursor: pointer; text-decoration: underline; }
.stats li { display: flex; justify-content: space-between; font-size: 14px; }
.status { margin: 0 0 8px; color: #55684d; font-style: italic; }
.luck { margin: 0 0 12px; background: #fdf5e3; border-radius: 6px; padding: 7px 10px; font-size: 14px; }
.bio { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.karma { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #eef3e8; border: 1px solid #c9d8bf; border-radius: 14px; padding: 3px 11px; font-size: 14px; color: inherit; font-family: inherit; }
button.chip { cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); }
.composer { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-bottom: 10px; }
.scrap { display: flex; gap: 10px; padding: 9px 8px; border-radius: 6px; }
.scrap:nth-child(odd) { background: #f3f7ee; }
.scrap-body { min-width: 0; flex: 1; }
.scrap-body header { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; }
.scrap-body time { color: #6f7f67; font-weight: 400; font-size: 13px; flex: none; }
.scrap-body p { margin: 2px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.scrap-body footer { display: flex; gap: 12px; }
.empty { color: #6f7f67; margin: 4px 0; font-size: 14px; }
.attention { border-color: var(--accent); }
.friends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.friends a { display: flex; flex-direction: column; align-items: center; font-size: 12px; text-decoration: none; min-width: 0; }
.friends span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people { margin-top: 8px; }
.people li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.people a { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; flex: 1; }
.loading { text-align: center; padding: 40px; color: #6f7f67; }
#editor { padding: 14px 12px 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.editor { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.editor h2 { margin-bottom: 0; }
.editor .field { color: #27512f; }
.preview { display: flex; justify-content: center; background: #6fbf5f; border-radius: 8px; padding: 10px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { background: #eef3e8; border: 2px solid #c9d8bf; border-radius: 8px; padding: 4px 9px; cursor: pointer; color: inherit; font: inherit; font-size: 14px; }
.swatch.on { border-color: var(--accent); background: #fdf0d8; }
.dot { display: block; width: 22px; height: 22px; border-radius: 50%; }
.hint { color: #55684d; font-size: 14px; margin: 0; }
@media (max-width: 860px) {
  .orkut { grid-template-columns: minmax(0, 1fr); }
  .col-center { order: 2; }
  .col-right { order: 3; }
}

#voiceHud.on, #voiceBtn.on { background: #4cc35c; border-color: #4cc35c; color: #0f2a14; }
#players .talking { font-size: 14px; }

.box h1 { color: #27512f; text-shadow: none; letter-spacing: 0; font-size: 26px; }
.photo .tier { background: #24321f; border-radius: 10px; padding: 1px 10px; font-size: 13px; text-shadow: none; }

/* Phones: stable height behind the browser bars, no accidental zoom, room for the notch. */
input, textarea, select { font-size: 16px; }
html, body, button, a { touch-action: manipulation; }
html:has(body[data-screen="game"]), body[data-screen="game"] { touch-action: none; }
#game { height: 100vh; height: 100dvh; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); padding-top: max(6px, env(safe-area-inset-top)); }
#soundBar { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); }
/* On the pages they stay in the top bar, instead of floating over what is being read. */
body:not([data-screen="game"]) #soundBar { position: absolute; }
body[data-screen="game"] { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
#game, #game * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#game input { -webkit-user-select: text; user-select: text; }
#pad { touch-action: none; }
#pad button { pointer-events: none; }
#bombBtn { -webkit-tap-highlight-color: transparent; }
@media (max-width: 400px) {
  #alive { display: none; }
  #hud { padding-right: 96px; gap: 4px; }
  .icon { width: 30px; height: 30px; }
  #soundBar button { width: 36px; height: 36px; padding: 7px; }
  #pad { grid-template: repeat(3, 50px) / repeat(3, 50px); }
  #bombBtn { width: 96px; height: 96px; }
}

#langSelect { margin-inline-start: auto; background: var(--soft); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 5px; font-size: 14px; max-width: 140px; }
#langSelect option { color: #111; }
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #0009; padding: 16px; }
.modal .box { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.modal .box h2 { margin-bottom: 0; }
.modal .field { color: #27512f; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.check input { width: auto; margin-top: 3px; }
.links { margin: 0; font-size: 13px; }
.modal .error { font-size: 14px; color: #b3261e; min-height: 0; }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal section[hidden] { display: none; }
.legal h1 { font-size: 28px; }
.legal h2 { margin-top: 8px; color: #27512f; }
.legal a { color: #1d6f42; }
.legal p { margin: 0; }
.draft { background: #b3261e; color: #fff; border-radius: 6px; padding: 6px 10px; }
/* The arena and the controls keep their layout in right-to-left languages. */
#stage, #touch, #pad, #hud { direction: ltr; }
#watching { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 3px 14px; border-radius: 12px; background: #000b; color: #ffd23b; font-weight: 800; white-space: nowrap; }
#emotes { position: absolute; right: 4px; bottom: 8px; z-index: 3; display: grid; grid-template-columns: repeat(2, 38px); gap: 4px; }
#emotes img { display: block; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
#emotes button { width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #f4efe0ee; color: #24321f; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 2px 6px #0005; }
.bubble.emote { font-size: 22px; font-weight: 800; padding: 1px 8px; background: #fffdf2f0; }
.bubble.emote:has(img) { padding: 0; background: none; overflow: visible; }
.bubble.emote img { display: block; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px #fffdf2, 0 2px 6px #0006; }
@media (pointer: coarse) and (orientation: portrait) {
  #emotes { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 16px); right: 8px; bottom: 6px; }
  #watching { bottom: 66px; }
}
#boost { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 2px 12px; border-radius: 12px; background: #6e432a; color: #fff; font-weight: 800; box-shadow: 0 2px 8px #0006; }
@media (max-width: 480px) {
  .chips button { flex-basis: 30%; }
}
.editor .danger { color: #b3261e; }

#players canvas { height: 38px; }
#items canvas { height: 76px; }

/* Four buttons share the lobby row, and translated labels can be long. */
#lobby .row .btn { flex: 1 1 40%; white-space: normal; }

#account form, #accCode { display: flex; flex-direction: column; gap: 8px; }
#account form[hidden], #accCode[hidden], #account .field[hidden], #account .check[hidden], #account .hint[hidden], #account .links[hidden], #account .linkish[hidden] { display: none; }
.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; background: #eef3e8; border: 1px solid #c9d8bf; border-radius: 6px; padding: 8px; font: inherit; font-weight: 700; color: #24321f; cursor: pointer; }
.tabs button.on { background: var(--accent); border-color: var(--accent); }
#accCodeText { display: block; text-align: center; font-size: 20px; letter-spacing: 2px; background: #fdf0d8; color: #24321f; padding: 12px; border-radius: 6px; user-select: all; overflow-wrap: anywhere; }
#guestBar { align-items: center; }
#guestBar .linkish { padding-block: 10px; color: #1d6f42; font-size: 14px; }
.handle { margin: 0; font-size: 14px; color: #55684d; overflow-wrap: anywhere; }
.status-id { color: #55684d; font-size: 14px; margin: 0 0 6px; }

/* Everything is vector art now, so images scale smoothly. */
canvas, canvas#canvas, .avatar, #players canvas, #items canvas, .stat canvas, #landingItems canvas { image-rendering: auto; }
#players canvas { width: 32px; height: 37px; }
#items canvas { width: 76px; height: 86px; object-fit: contain; }
.avatar { width: 44px; height: 51px; }
.avatar.big { width: 128px; height: 148px; }
.avatar.small { width: 36px; height: 42px; }

#board { background: var(--card); border-radius: 10px; padding: 10px 12px; }
#board h3 { margin: 0 0 6px; font-size: 24px; line-height: 1.15; }
#board h3.won { color: #b86a00; text-shadow: 0 2px 0 #ffe9a8; }
#board h3.won::before { content: '🏆 '; }
#boardToday { margin: -6px 0 8px; color: var(--dim); font-size: 13px; }
#boardToday:empty { display: none; }
/* After a round, what matters comes first: the next round, then the result. */
#lobby:has(#board:not([hidden])) > h2 { order: -6; }
#lobby:has(#board:not([hidden])) > #lobbyStatus { order: -5; }
#lobby:has(#board:not([hidden])) > #readyRow { order: -4; }
#lobby:has(#board:not([hidden])) > #shareRow { order: -3; }
#lobby:has(#board:not([hidden])) > #board { order: -2; }
#lobby:has(#board:not([hidden])) #share { background: var(--panel); border-color: var(--line); box-shadow: none; color: var(--fg); }
#boardReward { margin: 2px 0 8px; color: var(--good); font-size: 14px; font-weight: 700; }
#boardReward:empty { display: none; }
#boardList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#boardList li { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 4px 10px 4px 6px; border-radius: 12px; background: var(--soft); }
/* The winners stand out in gold, the rest follow in order. */
#boardList li.won { background: linear-gradient(90deg, #fff6d2, #ffe08a); box-shadow: inset 0 0 0 2px #f0b429; font-weight: 800; }
#boardList li.me .who { text-decoration: underline 2px #f59a23; text-underline-offset: 3px; }
#boardList .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.small { padding: 5px 9px; font-size: 13px; }
.friend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.friend-list li { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 6px; padding: 5px 8px; font-size: 14px; }
.friend-list a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.friend-list .avatar-small { width: 30px; height: 30px; flex: none; }
.friend-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-list .state { color: var(--dim); font-size: 12px; white-space: nowrap; }
.friend-list .state.on { color: var(--good); }
.friend-list .empty { background: none; color: var(--dim); padding: 0; }
#hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 88%; background: #000c; color: #fffdf2; border: 2px solid var(--accent); border-radius: 10px; padding: 8px 14px; font-weight: 700; text-align: center; pointer-events: none; }
#inviteToast { position: fixed; z-index: 30; top: 12px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--panel); border: 2px solid var(--accent); border-radius: 12px; padding: 10px 12px; box-shadow: 0 8px 24px #0007; }
#inviteToast span { flex: 1 1 100%; font-weight: 700; overflow-wrap: anywhere; }
#inviteToast .btn { flex: 1; }
#boardList canvas { width: 46px; height: 46px; flex: none; object-fit: contain; }
#boardList span:not(.who) { white-space: nowrap; }
#announce { position: fixed; z-index: 31; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); background: var(--accent); color: #2c1b05; border-radius: 10px; padding: 10px 14px; font-weight: 700; text-align: center; overflow-wrap: anywhere; box-shadow: 0 8px 24px #0007; }
.fitting { color: var(--fg); display: flex; flex-direction: column; gap: 10px; --fg: #f4efe0; background: linear-gradient(#2f5a42, #223d2d); border-radius: 14px; padding: 10px; box-shadow: 0 3px 10px #0003; }
.fitting .stage { display: block; cursor: pointer; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: var(--scene, var(--stage)) center / cover; }
.fitting p { margin: 0; text-align: center; font-weight: 700; }
#shopTabs { display: flex; flex-wrap: wrap; gap: 6px; }
#shopTabs button { flex: none; background: var(--card); border: 2px solid transparent; border-radius: 16px; padding: 5px 12px; font-weight: 700; cursor: pointer; }
#shopTabs button.on { background: var(--accent); border-color: var(--accent); color: #2c1b05; }
#items .thumb { width: 100%; display: flex; justify-content: center; background: radial-gradient(circle at 50% 42%, #eef6e2, #b3cf98); border: 0; border-radius: 9px; padding: 8px 0; cursor: pointer; }
#items .rarity-rare .thumb { background: radial-gradient(circle at 50% 42%, #e6f1fd, #92bcec); }
#items .rarity-epic .thumb { background: radial-gradient(circle at 50% 42%, #f1e7fd, #b892e6); }
#items .rarity-legendary .thumb { background: radial-gradient(circle at 50% 42%, #fff6cf, #e8bd3f); }
#items li { border: 2px solid #d7e2cd; }
#items li.trying { border-color: var(--accent); }
#items .name { flex: 1; font-weight: 700; font-size: 14px; }
#items li { position: relative; overflow: hidden; transition: transform 0.12s; }
#items li:hover { transform: translateY(-3px); }
#items li.rarity-epic { box-shadow: 0 0 0 2px #a765e680, 0 4px 14px #7a3fc455; }
#items li.rarity-legendary { box-shadow: 0 0 0 2px #f5c63c, 0 4px 18px #e8bd3f88; }
#items li.rarity-legendary .thumb { position: relative; overflow: hidden; }
#items li.rarity-legendary .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #ffffffb0 50%, transparent 65%); transform: translateX(-120%); animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { 55%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { #items li.rarity-legendary .thumb::after { animation: none; } }
#items .rarity { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); }
#items .rarity-rare .rarity { color: #1f62b3; }
#items .rarity-epic .rarity { color: #7a3fc4; }
#items .rarity-legendary .rarity { color: #9a6a00; }
.wardrobe { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wardrobe h3 { margin: 0 0 4px; font-size: 14px; }
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.piece { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 3px; min-height: 96px; background: #eef3e8; color: #24321f; border: 2px solid #c9d8bf; border-radius: 8px; padding: 5px 3px; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; }
.piece:hover { border-color: #8fb07c; }
.shelf-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; background: var(--soft); border: 2px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; cursor: pointer; text-align: start; }
.shelf-head:hover { border-color: var(--accent); }
.shelf-head span { flex: 1; min-width: 0; color: var(--dim); font-size: 14px; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf-head i { font-style: normal; font-size: 18px; line-height: 1; transition: transform 0.15s; }
.shelf-head[aria-expanded="true"] i { transform: rotate(180deg); }
.piece.on { border-color: var(--accent); background: #fdf0d8; }
.piece canvas { width: 50px; height: 57px; object-fit: contain; }
.col-left .btn { white-space: normal; padding-inline: 4px; overflow-wrap: anywhere; }
.dm-sheet { display: flex; flex-direction: column; height: min(620px, calc(100vh - 32px)); }
.dm-sheet:not([open]) { display: none; }
.dm-log { flex: 1; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; border-radius: 10px; background: var(--soft); }
.dm-log li { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; max-width: 85%; padding: 6px 10px; border-radius: 12px 12px 12px 3px; background: #fff; font-size: 14px; }
.dm-log li.mine { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: #fdf0d8; }
.dm-log li.dm-empty { align-self: center; background: none; color: var(--dim); }
.dm-text { flex-basis: 100%; overflow-wrap: anywhere; }
.dm-log small { color: var(--dim); font-size: 11px; }
.dm-note { margin: 6px 0 0; color: var(--error); font-size: 13px; }
.dm-note:empty { display: none; }
.dm-form { display: flex; gap: 8px; margin-top: 8px; }
.dm-form input { flex: 1; min-width: 0; padding: 10px 12px; background: #f6f9f2; color: #24321f; border: 2px solid #c9d8bf; border-radius: 8px; }
.fp-count { margin-inline-start: 4px; }
.reward-guide { border: 2px solid #f5c63c; border-radius: 12px; background: var(--card); font-size: 14px; }
.reward-guide summary { padding: 10px 14px; font-weight: 800; cursor: pointer; }
.reward-guide table { width: calc(100% - 28px); margin: 0 14px; border-collapse: collapse; text-align: center; }
.reward-guide th { padding: 6px 4px; color: var(--dim); font-size: 13px; }
.reward-guide td { padding: 5px 4px; border-top: 1px solid #dde7d3; }
.reward-guide td small { display: block; color: var(--dim); font-size: 12px; }
.reward-guide ul { margin: 10px 0 12px; padding-inline: 30px 14px; color: var(--dim); font-size: 13px; }
#homeGuide td { text-align: start; }
#homeGuide th { text-align: end; color: var(--fg); }
body[data-screen="game"] #toast { pointer-events: none; }
#practice { border-color: #f5c63c; background: #fdf3d3; color: #5a3d00; font-weight: 800; }
#practice::before { content: '🎓 '; }
#practice.new { background: linear-gradient(#ffe089, #f5c63c); box-shadow: 0 3px 0 #c99a1c; animation: learn 1.4s ease-in-out infinite; }
#bombBtn.teach { animation: learn 0.9s ease-in-out infinite; box-shadow: 0 0 0 4px #ffd23b; }
@keyframes learn { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #practice.new, #bombBtn.teach { animation: none; } }
#banner.victory { top: 50%; padding: 0; background: none; color: #ffd23b; font-size: clamp(44px, 11vw, 104px); line-height: 1.05; text-transform: uppercase; text-shadow: 0 4px 0 #8a5a00, 0 0 28px #000, 0 0 60px #ffb300aa; animation: win 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
#banner.victory.high { top: 16%; }
@keyframes win { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } }
@media (prefers-reduced-motion: reduce) { #banner.victory { animation: none; } }
/* Story mode: a big button that opens the list of stages, bosses shown on theirs. */
.btn.primary.story-cta { width: 100%; min-height: 62px; font-size: 22px; letter-spacing: .5px; color: #fff; text-shadow: 0 2px 0 #1d4f19;
  background: linear-gradient(#9be06a, #4fae3c 55%, #2f8a2c); border-color: #173d14;
  box-shadow: inset 0 3px 0 #d4f7b0, inset 0 -4px 0 #24701f, 0 4px 0 #173d14; }
.btn.primary.story-cta:not(:disabled):active { box-shadow: inset 0 3px 0 #d4f7b0, inset 0 -2px 0 #24701f, 0 1px 0 #173d14; }
/* The story trail: a dirt path through a sunny forest, with a round stop for each stage. */
.story-panel { padding: 10px 8px 4px; background: linear-gradient(#e9f6d6, #d4ebb6); border-color: #9cc77c; overflow: hidden; }
.story-panel > .hint { margin: 0 6px 4px; text-align: center; }
.trail { position: relative; margin: 0 -8px; }
.trail-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trail-path path { fill: none; stroke-linecap: round; }
.trail-dirt { stroke: #c99a5b; stroke-width: 26px; }
.trail-steps { stroke: #e7c48a; stroke-width: 6px; stroke-dasharray: 2 16; }
.trail-done { stroke: #f5c63c; stroke-width: 8px; stroke-dasharray: 14 10; filter: drop-shadow(0 0 4px #ffe58a); }
.trail-decor { position: absolute; transform: translate(-50%, -50%); font-size: 26px; opacity: .85; pointer-events: none; filter: saturate(.9); }
.trail-stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.stop { position: absolute; transform: translate(-50%, -50%); }
.stop-dot { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border-radius: 50%; cursor: pointer; font: inherit;
  background: linear-gradient(#fff6d2, #ffd75e); border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 #e0a227, 0 4px 0 var(--ink); }
.stop-dot:disabled { cursor: default; }
.stop-dot:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
.stop-dot:not(:disabled):active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #e0a227, 0 1px 0 var(--ink); }
.stop-mark { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1; }
.stop.cleared .stop-dot { background: linear-gradient(#b9ec8f, #5fb84a); box-shadow: inset 0 -4px 0 #3d8a30, 0 4px 0 var(--ink); }
.stop.cleared .stop-mark { color: #fff; text-shadow: 0 2px 0 #1d4f19; }
.stop.locked .stop-dot { background: #dfe3d8; border-color: #8a9483; box-shadow: 0 3px 0 #8a9483; cursor: default; }
.stop.locked .stop-mark { font-size: 18px; filter: grayscale(1); opacity: .7; }
/* A boss stop is bigger, its face in a golden frame, and the number sits on a badge. */
.stop.boss .stop-dot { width: 76px; height: 76px; overflow: visible; background: #fff3d6; border-color: #9a6a0e; box-shadow: 0 0 0 4px #f5c63c, 0 6px 0 4px #9a6a0e; }
.stop.boss .stop-dot img { width: 100%; height: 100%; border-radius: 50%; }
.stop.boss.locked .stop-dot img { filter: grayscale(1) brightness(.75); }
.stop.boss .stop-mark { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 14px; font-size: 15px; background: #fff6d2; border: 2px solid var(--ink); }
.stop.boss.cleared .stop-mark { background: #5fb84a; }
.stop.current .stop-dot { animation: stopPulse 1.1s ease-in-out infinite; }
@keyframes stopPulse { 50% { box-shadow: inset 0 -4px 0 #e0a227, 0 4px 0 var(--ink), 0 0 0 10px #ffd75e66; } }
.stop.boss.current .stop-dot { animation-name: bossPulse; }
@keyframes bossPulse { 50% { box-shadow: 0 0 0 4px #f5c63c, 0 6px 0 4px #9a6a0e, 0 0 0 16px #ff8a1f55; } }
.stop-here { position: absolute; left: 50%; bottom: calc(100% + 4px); width: 38px; height: 38px; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 2px 6px #0005; animation: hereBob 1.4s ease-in-out infinite; pointer-events: none; }
.stop.boss .stop-here { bottom: calc(100% + 12px); }
@keyframes hereBob { 50% { transform: translate(-50%, -5px); } }
.stop-label { position: absolute; top: 50%; transform: translateY(-50%); width: max-content; max-width: min(46vw, 190px); display: grid; gap: 1px; padding: 5px 9px; border-radius: 10px; background: #fffdf3e8; border: 1px solid #c9b98a; box-shadow: 0 2px 4px #0002; color: #3a2a12; line-height: 1.2; }
.stop-label.right { left: calc(100% + 12px); }
.stop-label.left { right: calc(100% + 12px); text-align: end; }
.stop.boss .stop-label.right { left: calc(100% + 20px); }
.stop.boss .stop-label.left { right: calc(100% + 20px); }
.stop-label b { font-size: 14px; }
.stop-label small { font-size: 12px; color: #6d5a36; }
.stop.locked .stop-label { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .stop.current .stop-dot, .stop-here { animation: none; } }
#playRow .btn { min-height: 64px; font-size: 18px; line-height: 1.15; white-space: normal; letter-spacing: .5px; text-transform: uppercase; }
#playRow #ranked { flex: 0 1 auto; padding-inline: 14px; font-size: 17px; letter-spacing: 0; text-transform: none; }
#home:has(#guestBar:not([hidden])) #ranked { display: none; }
#moreOptions { padding-bottom: 2px; }
#moreOptions[open] { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
#moreOptions summary { margin-inline: -12px; }
#moreOptions:not([open]) summary { margin-inline: 0; }
#moreOptions .hint { margin: 0; }
#banner.defeat { padding: 12px 28px; background: #000c; font-size: clamp(26px, 6vw, 52px); line-height: 1.1; }
#lobby:not(.practice) #playReal, #lobby:not(:has(#board:not([hidden]))) #playReal { display: none; }
#lobby.practice :is(#addBot, #removeBot, #voiceBtn, #switchTeam, #shareRow #share, #replayField, #botField, #mapField, #queueRow, #boardCta, #players, #friendsLobby, #groupLine, #chat) { display: none !important; }
#lobby.practice #lobbyStatus { display: none; }
/* Between stages of the story there is nobody to invite and nothing to set: only the stage and the way out. */
#lobby.story :is(#addBot, #removeBot, #voiceBtn, #switchTeam, #shareRow #share, #replayField, #botField, #mapField, #queueRow, #readyRow, #friendsLobby, #groupLine, #chat, #roomCode, #players) { display: none !important; }
#lobby:is(.practice, .story) #roomSettings { display: none !important; }
#lobby.practice #ready { background: var(--panel); border-color: var(--line); box-shadow: none; }
#lobby.practice #playReal { flex-basis: 100%; min-height: 56px; font-size: 20px; }
#lobby.public-room:has(#board:not([hidden])) #players { display: none; }
.emote-toggle { display: none; }
/* On a phone, or any window too narrow to keep them beside the board, the faces fold behind one button. */
@media (any-pointer: coarse) and (orientation: portrait), (max-width: 760px) {
  .emote-toggle { display: block; }
  #emotes button:not(.emote-toggle) { display: none; }
  #emotes.open button:not(.emote-toggle) { display: block; }
}
.landing-shot { margin: 0 auto; max-width: 640px; text-align: center; }
.landing-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 8px 24px #0004; }
.bonus-line { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fdf1d0; color: #5b3d00; font-weight: 700; text-align: center; }
#offerList { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.offer { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.offer h4 { margin: 0; font-size: 16px; }
.offer .btn { margin-top: auto; }
.offer-pieces { display: flex; gap: 6px; }
.offer-pieces button { width: 64px; height: 64px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #eef3e8; cursor: pointer; }
.offer-pieces canvas { width: 100%; height: 100%; object-fit: contain; }
#passBox { display: flex; flex-direction: column; gap: 8px; background: #2a2233; border-color: #e8741a; color: #fff; }
#passBox[hidden] { display: none; }
#passBox h3 { margin: 0; color: #ffa43f; }
#passBox .hint { color: #e6e0ee; }
#passEnds { font-weight: 700; }
#passCard { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid #e8741a; border-radius: 12px; background: #2a2233; color: #fff; text-align: start; font: inherit; cursor: pointer; }
#passCard[hidden] { display: none; }
#passCard b { color: #ffa43f; }
[data-pass='natal'] { --pass-back: #123c2a; --pass-edge: #d0433a; --pass-title: #ffd24a; }
#passCard[data-pass='natal'], #passBox[data-pass='natal'] { background: var(--pass-back); border-color: var(--pass-edge); }
#passCard[data-pass='natal'] b, #passBox[data-pass='natal'] h3 { color: var(--pass-title); }
[data-pass='natal'] #passFill { background: var(--pass-edge); }
#passBar { height: 10px; border-radius: 5px; background: #fff3; overflow: hidden; }
#passFill { display: block; height: 100%; background: #ffa43f; transition: width 0.3s; }
#passLevels { display: grid; grid-auto-flow: column; grid-auto-columns: 92px; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pass-level.next { border-color: #ffa43f; }
.pass-level { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid #fff3; border-radius: 10px; background: none; color: inherit; font-size: 12px; text-align: center; cursor: pointer; }
.pass-level canvas { width: 72px; height: 72px; border-radius: 8px; background: #efe9f5; object-fit: contain; }
.pass-level.locked canvas { filter: saturate(0.5); opacity: 0.75; }
.pass-level b { color: #ffd23b; }
#passBuy[hidden] { display: none; }
.supporter { margin: 0; color: #2c8141; font-weight: 800; }
#inviteBox { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--accent); }
#inviteBox[hidden] { display: none; }
#inviteText { margin: 0; font-size: 18px; font-weight: 800; }
#inviteJoin { min-height: 64px; font-size: 22px; }
#home.invited :is(#playRow, #practice, #storyBtn, #storyPanel, #ranked) { display: none; }
.piece:disabled { opacity: 0.45; cursor: not-allowed; }
.closet { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); color: inherit; }
.closet::backdrop { background: #0008; }
.closet a { color: #125230; }
.closet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.closet-head h2 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.closet section { margin-top: 10px; }
.closet h3 { margin: 0 0 4px; font-size: 14px; }
.closet .piece { cursor: default; }
.closet .piece:hover { border-color: #c9d8bf; }
.closet .piece.on:hover { border-color: var(--accent); }
.closet .worn { color: #9a5b00; }
.piece .nothing { font-size: 30px; line-height: 57px; color: #8a9a80; }
/* The hero's movement for HTML layers; the head pivots at the same point as #capyLook. */
.live { position: relative; width: 100%; transform: scaleX(-1); }
.live-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.live-look, .live-head { position: absolute; inset: 0; transform-origin: 51.27% 46.24%; }
.live-look { transition: transform 0.25s ease-out; }
.live-head { animation: capy-nod 5s ease-in-out infinite; }
.live-lid { position: absolute; border-radius: 50%; transform-origin: center top; transform: scaleY(0); animation: capy-blink 4.3s linear infinite; }
.live-spark { position: absolute; border-radius: 50%; animation: hero-spark 0.45s steps(2) infinite; }
.photo .live { width: 156px; margin: 6px auto; }
.photo .live::before { content: ''; position: absolute; inset: -6px; border-radius: 12px; background: var(--scene, var(--stage)) center / cover; }
/* Two wings, one on each side: they swing toward each other, meet, and open again together. */
.live-wing { transform-origin: 38.7% 52%; animation: 1.44s ease-in-out infinite; }
.live-wing.near { animation-name: wing-near; }
.live-wing.far { animation-name: wing-far; }
@keyframes wing-near {
  0%, 100% { transform: none; }
  50% { transform: rotate(31deg) scale(0.82, 0.9); }
}
@keyframes wing-far {
  0%, 100% { transform: none; }
  50% { transform: rotate(-29deg) scale(0.82, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .live-wing, .live-head, .live-lid, .live-spark { animation: none; }
  .live-look { transition: none; }
}
#friendsPage { width: 100%; max-width: 680px; margin: 0 auto; }
.fp-page { display: flex; flex-direction: column; gap: 12px; }
.fp-page h1, #friendsPage h1 { margin: 0; color: #27512f; font-size: 26px; text-shadow: none; }
.fp-note { margin: 0; min-height: 0; color: #b3261e; font-weight: 700; }
.fp-note:empty { display: none; }
.fp-section { display: flex; flex-direction: column; gap: 8px; }
.fp-section h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.fp-section input { width: 100%; padding: 10px 12px; background: #f6f9f2; color: #24321f; border: 2px solid #c9d8bf; border-radius: 8px; }
.fp-count { background: var(--accent); color: #2c1b05; border-radius: 10px; padding: 0 8px; font-size: 13px; font-weight: 800; }
.fp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fp-list .empty { color: #5d7157; font-size: 14px; }
.fp-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: #eef3e8; border-radius: 10px; padding: 6px 10px; }
.fp-who { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.fp-who:hover b { text-decoration: underline; }
.fp-avatar { width: 44px; height: 50px; flex: none; }
.fp-name { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fp-name b, .fp-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-name small { color: #5d7157; }
.fp-state { color: #5d7157; font-size: 13px; white-space: nowrap; }
.fp-state.on { color: #2c8141; font-weight: 700; }
.fp-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.btn.quiet { background: none; border-color: transparent; color: #5d7157; }
.btn.quiet:hover { color: #b3261e; }
.see-all { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #27512f; }
input[readonly] { opacity: 0.75; cursor: default; }
#players .btn.small { padding: 2px 9px; }
#capyPick { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 12px; padding: 8px 12px; }
#homeCapy { width: 104px; flex: none; }
#capyChoice { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#capyPick h2 { margin: 0 0 -2px; font-size: 14px; color: var(--dim); }
#furPicker { display: flex; flex-wrap: wrap; gap: 6px; }
.fur-dot { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #ffffff40; cursor: pointer; padding: 0; }
.fur-dot:hover { border-color: #ffffffa0; }
.fur-dot.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
/* Light cards need an edge, and league colors need a dark chip to be read. */
#rankList li, #players li, #roomList li button, .cards article, #capyPick, #board, .profile, .friend-list li { border: 1px solid var(--line); }
#game #chatLog, .fitting li { border: 0; }
.tiers span b, #rankList .tier, #players .tier { background: #24321f; border-radius: 9px; padding: 1px 8px; }
.fur-dot { border-color: #0003; }
.fur-dot:hover { border-color: #0008; }
/* Friend requests in the narrow column: one line for the person, one small line of actions. */
.requests { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.requests li { display: flex; flex-direction: column; gap: 4px; }
.requests a { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: inherit; font-weight: 700; }
.requests a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.requests .avatar { width: 32px; height: 36px; flex: none; }
.requests div { display: flex; gap: 6px; }
.requests .btn { flex: 1; padding: 4px 6px; font-size: 13px; }

/* A phone on its side: the map takes the whole height, with a thumb on each side of it. */
@media (orientation: landscape) and (max-height: 520px) and (any-pointer: coarse) {
  #game { display: grid; grid-template: minmax(0, 1fr) auto / 136px minmax(0, 1fr) 100px; gap: 4px 6px; padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  #hud { grid-area: 1 / 1; align-self: start; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; white-space: nowrap; }
  #stats { flex: 1 0 100%; flex-wrap: wrap; gap: 4px 8px; white-space: normal; }
  #stage { grid-area: 1 / 2 / 3 / 3; height: 100%; }
  #touch { display: contents; }
  #touch[hidden] { display: none; }
  #pad { grid-area: 2 / 1; align-self: end; grid-template: repeat(3, 44px) / repeat(3, 44px); }
  #bombBtn { grid-area: 2 / 3; align-self: end; justify-self: end; width: 92px; height: 92px; }
  #emotes { position: fixed; top: 52px; bottom: auto; right: max(6px, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, 44px); }
}

/* The items in hand, always with the same number. */
#inventory { position: absolute; right: 4px; top: 8px; z-index: 3; width: 186px; padding: 8px; border-radius: 12px; background: #f4efe0ee; color: #24321f; box-shadow: 0 2px 8px #0006; font-size: 11px; }
#inventory { transition: opacity 0.12s; }
#inventory.behind { opacity: 0.25; pointer-events: none; }
#inventory > b { display: block; margin-bottom: 4px; text-align: center; }
#inventoryList { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#inventoryList li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 6px; border-radius: 8px; font-size: 14px; font-weight: 800; }
#inventoryList li span { flex: 1; min-width: 0; line-height: 1.1; }
#inventoryList li[data-number] { background: #fff; box-shadow: inset 0 0 0 1px #d9c9a6; cursor: pointer; }
#inventoryList li[data-number]:hover { box-shadow: inset 0 0 0 2px var(--accent); }
#inventoryList kbd { flex: none; width: 24px; height: 24px; border-radius: 6px; background: #24321f; color: #fff; font: 800 15px/24px inherit; font-family: inherit; text-align: center; }
#inventoryList canvas { flex: none; width: 38px; height: 38px; }
@media (any-pointer: coarse) {
  #inventoryList kbd { display: none; }
  #inventoryList li[data-number] { touch-action: manipulation; box-shadow: inset 0 0 0 2px var(--accent); }
}
@media (any-pointer: coarse) and (orientation: portrait) {
  #inventory { top: auto; bottom: 60px; left: 0; right: 0; width: auto; padding: 4px; background: none; box-shadow: none; }
  #inventory > b { display: none; }
  #inventoryList { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; }
  #inventoryList li { min-height: 46px; gap: 4px; font-size: 12px; background: #f4efe0; }
  #inventoryList canvas { width: 34px; height: 34px; }
  #inventoryList li span { flex: none; max-width: 76px; }
}
@media (orientation: landscape) and (max-height: 520px) and (any-pointer: coarse) {
  #inventory { position: fixed; top: 108px; left: max(6px, env(safe-area-inset-left)); right: auto; width: 136px; padding: 0; background: none; box-shadow: none; }
  #inventory > b, #inventoryList li span { display: none; }
  #inventoryList { display: grid; grid-template-columns: repeat(3, 42px); gap: 3px; }
  #inventoryList li { justify-content: center; min-height: 42px; padding: 0; background: #f4efe0; font-size: 10px; }
  #inventoryList canvas { width: 32px; height: 32px; }
}

/* The room before a round: a ticket with its code, one tidy line per capybara, and the host's
   settings together in one card. Placed last, so it wins over the older rules above. */
#lobby > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 22px; }
#roomCode:not(:empty) { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 3px; padding: 1px 10px; border-radius: 8px; background: #fffaf0; border: 2px dashed #c99a5b; color: #7a4d26; }
#roomMode:not(:empty) { font-size: 13px; padding: 3px 11px; border-radius: 999px; background: #27512f; color: #fff; font-weight: 800; }
#lobbyStatus:not(:empty) { padding: 8px 12px; border-radius: 12px; background: #fffaf0b0; border: 1px dashed #b9a777; color: #4b3c1e; }
#players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#players li { flex-wrap: nowrap; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 14px; box-shadow: 0 2px 0 #0000000f; }
#players li.is-me { box-shadow: inset 0 0 0 2px #f59a23, 0 2px 0 #0000000f; }
#players canvas { width: 46px; height: 46px; flex: none; object-fit: contain; }
#players .player-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
#players .player-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
#players .player-name .who { flex: 0 1 auto; font-weight: 800; }
#players .bot-tag { flex: none; font-size: 11px; font-weight: 800; padding: 0 7px; border-radius: 999px; background: #e3ead9; color: #4f6448; text-transform: uppercase; letter-spacing: .5px; }
#players .score { font-size: 12.5px; }
#players .tier:empty, #players .ok:empty, #players .talking:empty { display: none; }
#players .ok { flex: none; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #5fb84a; color: #fff; text-shadow: 0 1px 0 #1d4f19; }
#roomSettings:has(.field:not([hidden])) { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
#roomSettings:not(:has(.field:not([hidden]))) { display: none; }
#bossPick { padding: 9px; border: 2px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--fg); font: inherit; }
#bossField:not([hidden]) span { color: #9a3f0a; font-weight: 800; }
#roomSettings select { width: 100%; }

/* The leagues as one row of pills: the name in its color and the points it starts at, together. */
#rank .tiers { gap: 6px; }
#rank .tiers span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 11px; border-radius: 999px; background: #24321f; color: #cfd8c8; font-size: 12px; box-shadow: 0 2px 0 #0000001f; }
#rank .tiers span b { background: none; padding: 0; font-size: 13px; }
/* Rows of the ranking: the position in a round badge, the face a little bigger. */
#rankList .rank-face { width: 46px; height: 46px; object-fit: contain; }
#rankList .pos { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #eef3e8; border: 2px solid #c9d8bb; font-weight: 900; font-size: 14px; color: #41573c; }
#rankList .pts { font-size: 18px; color: #27512f; }

/* Profile: numbers in tiles, the tools in one row, recent rounds with a colored result. */
.box .stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.box .stats li { display: grid; justify-items: center; justify-content: center; gap: 0; padding: 8px 4px 6px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); text-align: center; font-size: 12px; color: var(--dim); }
.box .stats li b { font-size: 20px; line-height: 1.1; color: var(--fg); font-variant-numeric: tabular-nums; }
.box .stats .stat-icon { font-size: 16px; }
.actions .tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.actions .btn.tool { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; font-size: 12px; line-height: 1.15; white-space: normal; border-radius: 12px; }
.actions .btn.tool span { font-size: 20px; }
.matches li { align-items: center; padding: 6px 10px; }
.matches li .result { min-width: 64px; text-align: center; padding: 1px 8px; border-radius: 999px; background: #e9c5c0; color: #7a1d14; font-size: 12px; }
.matches li.won .result { background: #5fb84a; color: #fff; }
.matches li .pts { font-weight: 800; }
.matches li .pts.muted { font-weight: 400; font-size: 11px; color: var(--dim); }
.clan-tag { display: inline-block; margin: 0 0 8px; padding: 2px 12px; border-radius: 999px; background: #27512f; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .5px; }
/* In the narrow left column of a wide screen the tools stack, icon beside the word, and the numbers pair up. */
@media (min-width: 861px) {
  .col-left .actions .tools { grid-template-columns: 1fr; }
  .col-left .actions .btn.tool { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 13px; text-align: start; }
  .col-left .actions .btn.tool span { font-size: 16px; }
  .col-left .box .stats { grid-template-columns: 1fr 1fr; }
}