* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #222; font-family: "Trebuchet MS", system-ui, sans-serif; color: #fff; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

.overlay { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; background: rgba(10, 14, 20, 0.45); z-index: 10; overflow: auto; padding: 20px; }
.panel { margin: auto; background: rgba(20, 24, 30, 0.92); border: 3px solid #ffd400; border-radius: 14px; padding: 24px 28px; max-width: 520px; box-shadow: 0 10px 40px rgba(0,0,0,.5); text-align: center; }
.panel.wide { max-width: 1000px; width: 100%; }
h1 { margin: 0; font-size: 42px; letter-spacing: 1px; color: #ffd400; text-shadow: 3px 3px 0 #000; transform: rotate(-1.5deg); }
h1 span { color: #ff7a00; }
h2 { margin: 0 0 8px; color: #ffd400; }
h3 { margin: 10px 0 4px; color: #ffb400; font-size: 17px; }
.sub { color: #ccc; margin: 6px 0 18px; }
label { display: block; margin-bottom: 12px; color: #ddd; }
input { font: inherit; padding: 9px 12px; border-radius: 8px; border: 2px solid #555; background: #111; color: #fff; outline: none; }
input:focus { border-color: #ffd400; }
#name { display: block; margin: 6px auto 0; width: 260px; text-align: center; font-size: 18px; }
.code { width: 90px; text-align: center; text-transform: uppercase; font-size: 18px; letter-spacing: 3px; }
.row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.or { color: #888; }
button { font: inherit; font-weight: bold; padding: 10px 18px; border-radius: 8px; border: 0; background: #444; color: #fff; cursor: pointer; }
button:hover { filter: brightness(1.2); }
button.primary { background: #ff7a00; color: #111; }
button.big { font-size: 22px; padding: 14px 30px; margin-top: 12px; }
button.small { padding: 4px 10px; font-size: 13px; }
.err { color: #ff6b6b; min-height: 1em; }
.roomcode { font-size: 20px; }
.roomcode b { font-size: 34px; color: #ffd400; letter-spacing: 6px; margin: 0 8px; }
#plist { list-style: none; padding: 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#plist li { padding: 8px 14px; border-radius: 20px; background: #333; border-left: 8px solid; }
.rules { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; text-align: left; margin-top: 18px; font-size: 14px; color: #ddd; border-top: 1px solid #444; padding-top: 8px; }
.rules p { margin: 0 0 6px; line-height: 1.35; }
kbd { background: #333; border: 1px solid #666; border-bottom-width: 3px; border-radius: 4px; padding: 0 5px; font-size: 12px; font-family: monospace; }
@media (max-width: 800px) { .rules { grid-template-columns: 1fr; } h1 { font-size: 28px; } }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 1px 1px 2px #000, 0 0 6px rgba(0,0,0,.6); }
#top { display: flex; justify-content: space-between; padding: 12px 16px; }
#tl, #tr { width: 260px; font-weight: bold; }
#tr { text-align: right; }
#strikes { font-size: 26px; letter-spacing: 4px; }
#score { font-size: 22px; color: #ffd400; }
#tc { text-align: center; }
#timer { font-size: 40px; font-weight: bold; font-family: monospace; }
#timer.low { color: #ff5050; animation: pulse 1s infinite; }
#stage { font-size: 18px; color: #ffd400; }
.bar { width: 240px; height: 10px; background: rgba(0,0,0,.5); border-radius: 6px; overflow: hidden; margin: 4px auto; border: 1px solid rgba(255,255,255,.3); }
.bar > div { height: 100%; background: #35c759; width: 0; transition: width .2s; }
#overall { font-size: 13px; color: #ccc; }
#stab.bad { color: #ff5050; animation: pulse 1s infinite; }
#banner { position: fixed; top: 120px; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: bold; padding: 10px 26px; border-radius: 10px; background: rgba(200, 20, 20, 0.85); border: 3px solid #fff; animation: pulse 0.8s infinite; white-space: nowrap; }
#banner.calm { background: rgba(30, 90, 160, 0.85); animation: none; }
@keyframes pulse { 50% { opacity: .65; } }
#toasts { position: fixed; right: 16px; top: 110px; width: 380px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.toast { background: rgba(0,0,0,.7); padding: 8px 12px; border-radius: 8px; border-left: 5px solid #aaa; font-size: 15px; animation: tin .3s; max-width: 100%; }
.toast.bad { border-color: #ff3b3b; background: rgba(90,0,0,.8); }
.toast.good { border-color: #35c759; }
.toast.alarm { border-color: #ffd400; background: rgba(120,60,0,.85); font-weight: bold; }
.toast.big { border-color: #ffd400; font-size: 20px; font-weight: bold; }
.toast.warn { border-color: #ff9a00; }
@keyframes tin { from { transform: translateX(60px); opacity: 0; } }
#cross { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 26px; color: rgba(255,255,255,.8); }
#hint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); font-size: 20px; font-weight: bold; text-align: center; white-space: pre-line; }
#hint .k { display: inline-block; background: #ffd400; color: #111; padding: 0 8px; border-radius: 5px; margin-right: 6px; text-shadow: none; }
#hold { position: fixed; left: 50%; top: 64%; transform: translateX(-50%); width: 200px; height: 12px; background: rgba(0,0,0,.6); border-radius: 6px; overflow: hidden; border: 2px solid #fff; }
#holdbar { height: 100%; width: 0; background: #ffd400; }
#bl { position: fixed; left: 16px; bottom: 16px; width: 340px; }
.meter { display: flex; align-items: center; gap: 8px; font-weight: bold; }
.meter .bar { margin: 4px 0; width: 220px; height: 14px; }
#hpbar { background: #ff3b3b; }
#prbar { background: linear-gradient(90deg, #ffd400, #ff7a00, #ff2020); }
#prlabel { font-style: italic; color: #ffd400; }
#helmet.no { color: #ff5050; font-weight: bold; animation: pulse 1s infinite; }
#carry { position: fixed; right: 20px; bottom: 20px; font-size: 22px; font-weight: bold; text-align: right; }
#chatlog { font-size: 14px; margin-bottom: 8px; max-height: 160px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#chatlog div { background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 4px; margin-top: 2px; }
#chat { pointer-events: auto; width: 100%; margin-bottom: 8px; }
#help { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: left; text-shadow: none; pointer-events: none; }
#toi { position: fixed; inset: 0; background: radial-gradient(circle, rgba(40,60,30,.4), rgba(10,20,5,.92)); z-index: 4; display: flex; align-items: center; justify-content: center; font-size: 28px; text-align: center; font-weight: bold; pointer-events: none; }
#dead .panel { border-color: #ff3b3b; }
#end-score { font-size: 18px; margin: 10px 0; line-height: 1.6; }
#end-score .total { font-size: 40px; color: #ffd400; font-weight: bold; }
#end-table { margin: 10px auto; border-collapse: collapse; font-size: 15px; }
#end-table td, #end-table th { padding: 6px 12px; border-bottom: 1px solid #444; }
#end-table th { color: #ffb400; }
#end-table .award { color: #ffd400; font-style: italic; }

/* ---------- dotyk / telefon ---------- */
body.touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch canvas#c { touch-action: none; }
#touch { position: fixed; inset: 0; z-index: 6; touch-action: none; }
#joy { position: fixed; left: calc(90px + env(safe-area-inset-left)); top: calc(100% - 100px); width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.35); pointer-events: none; }
#joy.active { background: rgba(255,255,255,.2); }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(255,212,0,.75); box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tbtn { position: fixed; border-radius: 50%; width: 64px; height: 64px; padding: 0; font-size: 26px; background: rgba(20,24,30,.55); border: 2px solid rgba(255,255,255,.5); color: #fff; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tbtn.pressed { background: rgba(255,212,0,.6); transform: scale(.94); }
.tbtn.mini { width: 42px; height: 42px; font-size: 18px; }
#t-use { right: calc(24px + env(safe-area-inset-right)); bottom: 70px; width: 92px; height: 92px; background: rgba(255,122,0,.75); border-color: #ffd400; }
#t-use b { font-size: 30px; }
#t-use span { font-size: 10px; max-width: 84px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#t-use.dim { opacity: .45; }
#t-jump { right: calc(130px + env(safe-area-inset-right)); bottom: 24px; }
#t-drink { right: calc(130px + env(safe-area-inset-right)); bottom: 100px; }
#t-drop { right: calc(24px + env(safe-area-inset-right)); bottom: 172px; width: 52px; height: 52px; font-size: 22px; }
#t-chat { right: calc(24px + env(safe-area-inset-right)); top: 96px; }
#t-stuck { right: calc(74px + env(safe-area-inset-right)); top: 96px; }
#rotate { position: fixed; inset: 0; z-index: 50; background: #14181e; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px; color: #ffd400; font-weight: bold; }
#rotate div { line-height: 1.6; }

body.touch #cross { font-size: 20px; }
body.touch #top { padding: 6px 10px; padding-left: calc(10px + env(safe-area-inset-left)); }
body.touch #tl, body.touch #tr { width: 190px; font-size: 13px; }
body.touch #strikes { font-size: 18px; }
body.touch #score { font-size: 16px; }
body.touch #timer { font-size: 26px; }
body.touch #stage { font-size: 12px; }
body.touch .bar { width: 160px; height: 7px; }
body.touch #overall { font-size: 11px; }
body.touch #banner { top: 78px; font-size: 16px; padding: 5px 14px; }
body.touch #toasts { top: 150px; width: 260px; right: calc(10px + env(safe-area-inset-right)); }
body.touch .toast { font-size: 12px; padding: 5px 8px; }
body.touch .toast.big { font-size: 14px; }
body.touch #hint { top: 56%; font-size: 15px; }
body.touch #hold { top: 63%; }
body.touch #bl { left: calc(10px + env(safe-area-inset-left)); bottom: auto; top: 62px; width: 200px; font-size: 12px; }
body.touch .meter .bar { width: 120px; height: 9px; }
body.touch #chatlog { font-size: 12px; max-height: 90px; }
body.touch #carry { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: 96px; font-size: 13px; text-align: center; }
body.touch #carry small { display: none; }
body.touch #chat { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); width: 70vw; z-index: 20; font-size: 16px; }
@media (max-height: 500px) {
  .panel { padding: 14px 16px; }
  h1 { font-size: 26px; }
  .sub { margin: 4px 0 10px; }
  .rules { font-size: 12px; gap: 10px; }
  #end-table { font-size: 11px; }
  #end-table td, #end-table th { padding: 3px 5px; }
  #end-score .total { font-size: 28px; }
}

/* ---------- v2 ---------- */
#money { font-size: 20px; color: #50ff70; }
#score.bump { animation: bump .35s; }
@keyframes bump { 50% { transform: scale(1.35); color: #fff; } }
#stagehint { font-size: 14px; color: #fff; margin-top: 2px; font-style: italic; }
#util { font-size: 15px; }
#util .bad { color: #ff5050; animation: pulse 1s infinite; }
#radio-ind { color: #ff60ff; animation: pulse .6s infinite; }
#cooler { font-size: 15px; }
#choices { position: fixed; z-index: 8; left: 50%; top: 63%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 90vw; }
#choices button { pointer-events: auto; background: rgba(20,24,30,.8); border: 2px solid #ffd400; color: #fff; font-size: 15px; padding: 6px 12px; }
#choices button.off { opacity: .4; border-color: #777; }
#choices button b { color: #ffd400; margin-right: 6px; }
#board { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); min-width: 420px; text-shadow: none; }
#board table { border-collapse: collapse; width: 100%; }
#board td, #board th { padding: 4px 10px; border-bottom: 1px solid #444; text-align: left; }
#tpl-box { margin: 10px 0; }
#vs-box { margin: 6px 0 10px; }
#vs-box input { width: auto; margin-right: 6px; }
#teams { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
#teams .team { background: #222; border-radius: 10px; padding: 8px 14px; min-width: 180px; border-top: 5px solid; }
#teams .team ul { list-style: none; padding: 0; margin: 6px 0; text-align: left; }
#teams button { font-size: 13px; padding: 4px 10px; }
#vspanel { margin-top: 4px; font-size: 15px; background: rgba(0,0,0,.45); border-radius: 8px; padding: 3px 10px; display: inline-block; }
body.touch #vspanel { font-size: 11px; }
#end-score .vs { font-size: 18px; margin: 6px 0; }
#tpl-box select { font: inherit; padding: 6px 10px; border-radius: 8px; background: #111; color: #fff; border: 2px solid #555; }
body.touch #choices { top: 60%; }
body.touch #choices button { font-size: 13px; padding: 8px 10px; }
body.touch #t-board { right: calc(124px + env(safe-area-inset-right)); top: 96px; }
body.touch #stagehint { font-size: 11px; }
body.touch #money { font-size: 14px; }
body.touch #util, body.touch #cooler { font-size: 12px; }
body.touch #board { min-width: 0; width: 90vw; font-size: 12px; top: 10%; }

#bottles { font-size: 15px; color: #ffd400; }
#bottles.bad { color: #ff5050; animation: pulse .6s infinite; }
body.touch #bottles { font-size: 12px; }

#t-down { right: calc(130px + env(safe-area-inset-right)); bottom: 176px; }