:root {
  --ink: #2b1d14;
  --cream: #fff6e6;
  --yolk: #ffc21a;
  --yolk-dark: #e59a00;
  --red: #e8473a;
  --sky: #9fd8f0;
  --grass: #7cc05a;
  --card: #fffaf0;
  --muted: #7a6656;
  --shadow: 0 6px 0 var(--ink);
  font-family: 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); }
#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* screens */
.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; z-index: 5; }
.screen.show { display: flex; }
#loading { background: var(--sky); }
#home, #lobby, #how, #final, #modal { background: rgba(40, 70, 40, 0.18); }
#result { background: transparent; }

.logo { font-family: 'Lilita One', 'Nunito', sans-serif; font-size: clamp(54px, 9vw, 104px); color: #fff; letter-spacing: 1px; line-height: 1;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 8px 0 var(--ink); transform: rotate(-3deg); }
.logo span { color: var(--yolk); }
.tag { margin: 0 0 6px; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 6px rgba(0,0,0,.25); font-size: 18px; text-align: center; }
.hint { font-weight: 800; }
.bar { width: min(360px, 80vw); height: 18px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--yolk); transition: width .2s; }

.card { background: var(--card); border: 4px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; width: min(400px, 100%); display: flex; flex-direction: column; gap: 12px; }
.card.wide { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.card h2 { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 34px; margin: 0; text-align: center; }
.card h3 { margin: 10px 0 4px; font-weight: 900; }
.card p { margin: 0; line-height: 1.4; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 900; font-size: 14px; }
input { font: inherit; font-weight: 800; font-size: 18px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); outline: none; min-width: 0; }
input:focus { box-shadow: 0 0 0 4px rgba(255, 194, 26, .55); }
input.code { text-transform: uppercase; letter-spacing: 6px; text-align: center; flex: 1; font-family: 'Lilita One', sans-serif; font-size: 24px; }
.row { display: flex; gap: 10px; }
.or { text-align: center; color: var(--muted); font-weight: 800; font-size: 13px; position: relative; }
.or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed #d9c8b2; }
.or span { position: relative; background: var(--card); padding: 0 10px; }
.err { color: var(--red); font-weight: 900; min-height: 1.2em; font-size: 14px; }
.muted { color: var(--muted); font-weight: 700; }
.small { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

.btn { font: inherit; font-family: 'Lilita One', sans-serif; font-size: 20px; letter-spacing: .5px; color: var(--ink); background: var(--yolk); border: 3px solid var(--ink); border-radius: 14px;
  padding: 10px 18px; cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .06s, box-shadow .06s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.big { font-size: 26px; padding: 12px 22px; }
.btn.alt { background: #fff; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; }
.btn.tiny { font-size: 16px; padding: 6px 12px; }
.link { background: none; border: 0; font: inherit; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--ink); cursor: pointer; text-decoration: underline; font-size: 16px; }

/* lobby */
.lobbyTop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.roomCode { font-family: 'Lilita One', sans-serif; font-size: 48px; letter-spacing: 8px; line-height: 1; }
.players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.players li { display: flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; background: #fff; font-weight: 900; }
.players .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); flex: none; }
.players .badge { margin-left: auto; font-size: 11px; background: var(--ink); color: #fff; border-radius: 6px; padding: 2px 6px; }
.players .badge.bot { background: #8a7a6a; }
.players li.empty { border-style: dashed; color: #bba892; background: transparent; }
.hostControls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stepper { display: flex; align-items: center; gap: 8px; font-weight: 900; margin-right: auto; }
.stepper b { font-family: 'Lilita One', sans-serif; font-size: 24px; min-width: 26px; text-align: center; }
.lobbyBottom { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.lobbyBottom .muted { margin-left: auto; }

.how .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .how .cols { grid-template-columns: 1fr; } }
.keys { border-collapse: collapse; width: 100%; font-weight: 700; }
.keys td { padding: 5px 4px; border-bottom: 2px dashed #e6d7c3; }
kbd { font-family: inherit; font-weight: 900; background: #fff; border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: 8px; padding: 1px 7px; font-size: 13px; white-space: nowrap; }
.how .btn { align-self: center; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; font-weight: 900; }
#topBar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 6px 16px; }
#topBar b { font-family: 'Lilita One', sans-serif; font-size: 32px; font-weight: 400; min-width: 72px; text-align: center; }
#topBar b.low { color: var(--red); }
#matchLbl { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
#roleCard { position: absolute; top: 14px; left: 14px; background: var(--card); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 10px 14px; max-width: 300px; }
#roleCard .role { font-family: 'Lilita One', sans-serif; font-size: 24px; font-weight: 400; }
#roleCard .role.chicken { color: #e59a00; }
#roleCard small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.35; }
#scores { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
#scores div { display: flex; align-items: center; gap: 8px; background: rgba(255, 250, 240, .92); border: 3px solid var(--ink); border-radius: 12px; padding: 3px 10px; font-size: 15px; }
#scores div.me { background: #fff1c2; }
#scores .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
#scores b { margin-left: auto; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 18px; }
#scores .chk { font-size: 11px; background: var(--yolk); border: 2px solid var(--ink); border-radius: 6px; padding: 0 4px; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); opacity: .85; }
#bottomLeft { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; width: 260px; }
#weaponBox { display: flex; align-items: center; gap: 10px; background: var(--card); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 8px 12px; position: relative; overflow: hidden; }
#weaponIcon { width: 34px; height: 34px; border-radius: 10px; border: 3px solid var(--ink); background: var(--yolk) center/70% no-repeat; flex: none; }
#weaponName { font-family: 'Lilita One', sans-serif; font-size: 22px; font-weight: 400; }
#weaponBox .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.1); }
#weaponBox .cd i { display: block; height: 100%; width: 0; background: var(--ink); }
.stam { position: relative; height: 26px; border: 3px solid var(--ink); border-radius: 13px; background: #fff; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.stam i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#7fe07a, #45b84a); }
.stam i.low { background: linear-gradient(#ff9a7a, #e8473a); }
.stam span { position: relative; display: block; text-align: center; font-size: 13px; line-height: 20px; text-transform: uppercase; letter-spacing: 1px; }
#eggBox { position: absolute; right: 14px; bottom: 14px; background: var(--card); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); padding: 8px 12px; display: flex; gap: 6px; align-items: center; }
#eggBox .egg { width: 26px; height: 33px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 3px solid var(--ink); background: #fff1d9; }
#eggBox .egg.off { background: transparent; border-style: dashed; opacity: .5; }
#eggBox .next { width: 60px; height: 8px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
#eggBox .next i { display: block; height: 100%; background: var(--yolk); }
#eggBox span { font-size: 13px; color: var(--muted); }
#rushWarn { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 34px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; animation: pulse .4s infinite alternate; }
@keyframes pulse { to { transform: translateX(-50%) scale(1.12); } }
#banner { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: clamp(34px, 6vw, 70px); color: #fff;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); opacity: 0; transition: opacity .25s, transform .25s; transform: scale(.8); padding: 0 16px; }
#banner.on { opacity: 1; transform: scale(1); }
#banner small { display: block; font-size: .42em; -webkit-text-stroke: 2px var(--ink); margin-top: 8px; }
#toasts { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(560px, 90vw); }
#toasts div { background: rgba(43, 29, 20, .82); color: #fff; padding: 5px 14px; border-radius: 10px; font-size: 15px; animation: toast 2.6s forwards; }
#toasts div.me { background: var(--yolk); color: var(--ink); border: 2px solid var(--ink); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
#struggle { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); width: min(520px, 90vw); background: var(--card); border: 4px solid var(--ink); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 16px; }
#struggle .who { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 6px; }
#struggle .meter { position: relative; height: 30px; border: 3px solid var(--ink); border-radius: 15px; background: #ffe0d6; overflow: hidden; }
#struggle .meter i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#8ec5ff, #3d7be0); }
#struggle .timeBar { height: 8px; margin-top: 8px; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
#struggle .timeBar i { display: block; height: 100%; width: 0; background: var(--ink); }
#mashTxt { text-align: center; font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 30px; margin-top: 6px; animation: shake .15s infinite alternate; }
#mashTxt.watch { animation: none; font-size: 18px; color: var(--muted); font-family: 'Nunito'; font-weight: 900; }
@keyframes shake { from { transform: rotate(-2deg) scale(1); } to { transform: rotate(2deg) scale(1.05); } }
#clickToPlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.25); color: #fff; font-family: 'Lilita One', sans-serif; font-size: 40px; text-shadow: 0 4px 0 var(--ink); pointer-events: auto; cursor: pointer; }
#clickToPlay small { font-family: 'Nunito'; font-size: 16px; font-weight: 900; }

/* name tags */
#tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.nt { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; text-align: center; font-weight: 900; font-size: 14px; color: #fff; text-shadow: 0 0 3px var(--ink), 0 2px 0 var(--ink); }
.nt .sb { width: 54px; height: 6px; margin: 2px auto 0; border: 2px solid var(--ink); border-radius: 4px; background: #fff; overflow: hidden; }
.nt .sb i { display: block; height: 100%; background: #45b84a; }
.nt.chicken { color: var(--yolk); font-size: 16px; }
.nt .ind { font-size: 11px; color: var(--ink); background: var(--yolk); border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px; text-shadow: none; display: inline-block; margin-bottom: 2px; }

/* results */
.resTable { width: 100%; border-collapse: collapse; font-weight: 800; }
.resTable th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 4px 6px; }
.resTable td { padding: 7px 6px; border-top: 2px dashed #e6d7c3; }
.resTable td.n { display: flex; align-items: center; gap: 8px; }
.resTable .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.resTable .gain { color: #2e9b3a; }
.resTable tr.me td { background: #fff1c2; }
#result .card { background: rgba(255, 250, 240, .96); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px; height: 170px; }
.podium .step { width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 900; text-align: center; }
.podium .block { width: 100%; border: 3px solid var(--ink); border-radius: 12px 12px 0 0; display: flex; align-items: flex-start; justify-content: center; font-family: 'Lilita One', sans-serif; font-size: 30px; padding-top: 6px; }
.podium .p1 .block { height: 110px; background: var(--yolk); }
.podium .p2 .block { height: 80px; background: #dfe6ee; }
.podium .p3 .block { height: 60px; background: #f0b98a; }
#scores.big { left: 50%; right: auto; top: 90px; transform: translateX(-50%) scale(1.25); transform-origin: top center; }