:root {
  --ink: #171426;
  --paper: #fff9ec;
  --purple: #6941d8;
  --purple-dark: #4d2bb3;
  --yellow: #ffd84d;
  --pink: #ff6fae;
  --mint: #63dfbd;
  --red: #ff5c57;
  --shadow: 7px 7px 0 var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,255,255,.24) 0 2px, transparent 3px),
    linear-gradient(135deg, #7654e5, #5934c9);
  background-size: 22px 22px, auto;
  font-family: "Outfit", sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }
button:not(:disabled):not(.category-art) {
  transition: translate .14s ease, transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
@media (hover: hover) {
  button:not(:disabled):not(.category-art):hover { translate: 0 -2px; }
  button:not(:disabled):not(.category-art):active { translate: 0 0; }
}
body.cursor-idle,
body.cursor-idle * { cursor: none !important; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 18px 30px;
  position: relative;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 5;
}

.icon-button, .lang-button, .round-pill {
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--paper);
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--ink);
}

.icon-button { width: 40px; height: 40px; border-radius: 50%; }
.lang-button { border-radius: 10px; padding: 7px 12px; }
.round-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 6px 13px; font-size: 12px; visibility: hidden; }

.screen { display: none; animation: pop .28s ease-out; }
.screen.active { display: block; }

@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.hero { text-align: center; padding: 26px 0 18px; color: white; }
.logo-mark { display: inline-flex; flex-direction: column; transform: rotate(-3deg); line-height: .78; text-shadow: 4px 4px 0 var(--ink); }
.logo-en { color: var(--yellow); font-size: clamp(54px, 16vw, 80px); font-weight: 800; letter-spacing: -4px; }
.logo-ar { font-family: "Changa", sans-serif; font-size: 30px; align-self: flex-end; color: white; margin-right: 8px; transform: rotate(4deg); }
.eyebrow { font-size: 11px; letter-spacing: 1.8px; font-weight: 800; }
.squiggle { width: 68px; height: 10px; margin: 8px auto 0; border-top: 4px solid var(--pink); border-radius: 50%; transform: rotate(-4deg); }

.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.mode-card { padding:22px; }
.mode-card h1 { margin:0; font-size:26px; }
.mode-card > p { margin:5px 0 18px; color:#655f73; }
.mode-choice { width:100%;min-height:88px;display:grid;grid-template-columns:54px 1fr 25px;align-items:center;gap:12px;margin-top:12px;padding:13px;border:3px solid var(--ink);border-radius:15px;color:var(--ink);text-align:left;text-decoration:none;box-shadow:4px 4px 0 var(--ink); }
.mode-choice.local-mode { background:var(--yellow); }
.mode-choice.online-mode { background:var(--mint); }
.mode-choice.host-screen-mode { background:#ff7a45; }
.mode-card>.how-to-play-button{background:#2f80ed;color:white}
.vote-deadline { min-width:48px;min-height:48px;display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:#fff8e8;font-weight:900; }
.category-card-grid{display:block!important}.category-section{margin:0 0 24px;padding:14px;border:3px solid var(--ink);border-radius:8px;background:rgba(255,255,255,.14);box-shadow:4px 4px 0 rgba(24,20,38,.6)}.category-section>h2{width:max-content;max-width:100%;margin:-30px 0 14px;padding:7px 14px;border:2px solid var(--ink);border-radius:7px;background:var(--yellow);box-shadow:3px 3px 0 var(--ink);font-size:18px}.category-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.category-card.disabled-category{opacity:.55;filter:grayscale(.75);cursor:not-allowed}.category-card.disabled-category .category-art{cursor:not-allowed}.host-tools{position:fixed;right:16px;bottom:16px;z-index:120}.host-tools-toggle{width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-size:24px}.host-tools-menu{position:absolute;right:0;bottom:62px;width:min(340px,calc(100vw - 32px));max-height:70vh;overflow:auto;padding:14px;border:3px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:6px 6px 0 var(--ink)}.host-tools-menu>button,.host-player-control button,.invite-row button{border:2px solid var(--ink);border-radius:7px;background:white;padding:8px;font-weight:800}.host-tools-menu>button{width:100%;margin-top:8px}.host-tools-menu .danger{background:#ff747d}.invite-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin:10px 0}.invite-row input{min-width:0;border:2px solid var(--ink);border-radius:7px;padding:8px}.host-player-control{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px;margin-top:7px;padding-top:7px;border-top:1px solid #c9c2d1}.host-player-control span{overflow:hidden;text-overflow:ellipsis}.answer-timer{position:static!important;inset:auto!important;max-width:100%}.draw-toolbar button,.draw-toolbar label{flex:0 0 auto}
@media(min-width:700px){.category-group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(orientation:landscape) and (min-width:900px){.category-group-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:520px){.category-section{padding:10px}.category-group-grid{gap:10px}.category-section>h2{font-size:15px}.host-tools{right:10px;bottom:10px}}

/* v75 category shelves */
.category-section{position:relative;margin:34px 0 38px;padding:38px 18px 48px;border:5px solid var(--ink);border-radius:8px;background:rgba(255,248,220,.82);box-shadow:7px 7px 0 rgba(24,20,38,.72);overflow:visible}
.category-section>h2{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 34px);margin:0;padding:9px 22px;border:4px solid var(--ink);border-radius:7px;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-size:clamp(20px,3vw,28px);line-height:1.15;text-align:center;z-index:3}
.coming-soon-ribbon{position:absolute;right:-45px;bottom:17px;width:190px;padding:7px 16px;transform:rotate(-38deg);background:#e9424f;color:#fff;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:13px;font-weight:900;text-align:center;z-index:4}
[dir="rtl"] .coming-soon-ribbon{right:auto;left:-45px;transform:rotate(38deg)}
.hide-game-language #langButton,.hide-game-language #onlineLang{display:none!important}
.how-to-play-button{width:100%;margin-top:14px}
.how-to-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;background:rgba(24,20,38,.72)}
.how-to-panel{position:relative;width:min(680px,100%);max-height:min(760px,90vh);overflow:auto;padding:28px;border:4px solid var(--ink);border-radius:8px;background:var(--paper);box-shadow:9px 9px 0 var(--ink)}
.how-to-panel h2{margin:0 46px 20px;text-align:center;font-size:clamp(28px,5vw,42px)}
.how-to-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.how-to-step{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start;padding:12px;border:2px solid var(--ink);border-radius:7px;background:#fff}
.how-to-step strong{display:grid;place-items:center;min-height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow)}
.how-to-step p{margin:2px 0;line-height:1.35}
.vote-power-dock{justify-content:center;margin:10px auto 14px}
.deleted-bluff{opacity:.28!important;filter:grayscale(1);text-decoration:line-through;cursor:not-allowed!important;transform:none!important}
.vote-deadline{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 10px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-size:22px;font-weight:900}
.mcq-timer{margin:8px auto 12px}
.screen.active>.board-continue,.online-screen.active>.board-continue{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);width:min(680px,calc(100vw - 28px));z-index:150;box-shadow:6px 6px 0 var(--ink)}
.screen.active>.board-continue:hover,.screen.active>.board-continue:active,.online-screen.active>.board-continue:hover,.online-screen.active>.board-continue:active{translate:0 0!important;transform:translateX(-50%)!important}
#categorySetupScreen.active,#trickSetupScreen.active,#onlineCategorySelect.active,#onlineTrickSelect.active{padding-bottom:96px}
.acting-stage{max-width:760px;margin:55px auto 0;padding:28px;text-align:center}
.acting-topic-label{margin:22px 0 5px;color:#655f73;font-weight:800}.acting-stage h1{font-size:clamp(30px,7vw,62px);margin:4px 0 20px}.acting-secret{padding:18px;border:3px dashed var(--ink);border-radius:8px;background:#fff;font-size:clamp(25px,6vw,48px);font-weight:900}.acting-countdown{display:grid;place-items:center;width:92px;height:92px;margin:22px auto;border:5px solid var(--ink);border-radius:50%;background:#ff7a45;color:white;box-shadow:5px 5px 0 var(--ink);font-size:38px;font-weight:900}
.question-meta.emoji-clue,.question-meta .emoji-clue{font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif;font-size:clamp(42px,9vw,78px);line-height:1.15;letter-spacing:8px;text-align:center;direction:ltr}
.online-card,.host-question-card{border-radius:10px}.online-screen .card{box-shadow:6px 6px 0 rgba(24,20,38,.85)}
.online-screen .primary-button,.online-screen .secondary-button{margin-top:12px}.online-screen .format-toggle,.online-screen .language-choice-grid{gap:14px}.online-screen .format-choice:nth-child(1){background:#ffd84d}.online-screen .format-choice:nth-child(2){background:#62d9c0}.online-screen .format-choice.selected{outline:4px solid #fff;box-shadow:4px 4px 0 var(--ink)}
.trick-art-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.power-chip .trick-chip-image{width:24px;height:24px;object-fit:cover;border:1px solid var(--ink);border-radius:5px;vertical-align:middle}
.online-screen .online-player{margin-bottom:4px}.online-screen .answers-grid{gap:14px}.online-screen .answer-option{background:#fff}.online-screen .answer-option:nth-child(2n){background:#fff6cf}
@media(max-width:620px){.category-section{padding:30px 10px 44px;border-width:4px}.category-section>h2{font-size:18px;padding:7px 14px}.coming-soon-ribbon{right:-55px;bottom:14px;font-size:11px}.how-to-steps{grid-template-columns:1fr}.how-to-panel{padding:20px 14px}}
.mode-choice .mode-icon-img { width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:white;font-size:26px;object-fit:cover; }
.mode-choice strong,.mode-choice small { display:block; }
.mode-choice small { margin-top:4px;font-size:12px; }
.mode-choice b { font-size:24px; }
.back-mode-button { margin:28px 0 13px;border:2px solid var(--ink);border-radius:9px;background:var(--paper);padding:7px 12px;font-weight:800;box-shadow:2px 2px 0 var(--ink); }
[dir="rtl"] .mode-choice { text-align:right; }

.setup-card { padding: 22px; }
.setup-card h1 { margin: 0; font-size: 25px; }
.setup-card > p { margin: 5px 0 18px; color: #655f73; }
.online-banner {
  display: grid;
  grid-template-columns: 12px 1fr 22px;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  background: var(--mint);
  border: 3px solid var(--ink);
  border-radius: 13px;
  padding: 11px 13px;
  box-shadow: 4px 4px 0 var(--ink);
}
.online-banner small { display: block; margin-top: 2px; }
.online-banner b { font-size: 22px; }
.online-dot { width: 11px; height: 11px; border-radius: 50%; background: #20b86a; border: 2px solid var(--ink); box-shadow: 0 0 0 3px rgba(32,184,106,.2); }
.section-title { margin: 17px 0 9px; font-size: 14px; }
.format-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}.format-choice{min-height:48px;border:2px solid var(--ink);border-radius:11px;background:white;font-weight:800;box-shadow:2px 2px 0 var(--ink)}.format-choice.selected{background:var(--mint)}.team-count-wrap{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:9px 12px;border:2px dashed #8d8499;border-radius:10px;font-weight:800}.team-count-wrap select{border:2px solid var(--ink);border-radius:8px;padding:5px 11px;background:white;font-weight:800}.hidden{display:none!important}.team-badge{display:inline-block;margin-inline-start:6px;padding:2px 7px;border:1px solid var(--ink);border-radius:999px;background:var(--mint);font-size:10px}.teammate-answer{background:#dcd6e8!important;opacity:.78}.teammate-label{display:block;color:var(--purple);font-size:10px;margin-top:3px}.representative-card{background:var(--yellow);border:2px solid var(--ink);border-radius:11px;padding:10px;margin-bottom:12px;font-weight:800}
.team-boards{display:grid;gap:12px;margin:17px 0}.team-board{border:3px solid var(--ink);border-radius:14px;padding:12px;background:#eee8fb;box-shadow:3px 3px 0 var(--ink)}.team-board-name{font-weight:800;background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;padding:6px 2px;margin-bottom:9px}.team-members{display:flex;flex-wrap:wrap;gap:6px;min-height:30px}.team-member{display:inline-flex;align-items:center;gap:5px;background:white;border:2px solid var(--ink);border-radius:999px;padding:4px 8px;font-size:12px;font-weight:800}.team-member button{border:0;background:transparent;font-weight:800;padding:0}.team-add-player{display:flex;gap:6px;margin-top:9px}.team-add-player input{padding:8px}.team-add-player button{width:39px;border:2px solid var(--ink);border-radius:9px;background:var(--mint);font-size:20px;font-weight:800}
.board-header{display:flex;justify-content:space-between;align-items:end;gap:15px;color:white;margin:34px 2px 18px}.board-header h1{margin:4px 0;font-size:clamp(24px,5vw,38px)}.board-header p{margin:0;opacity:.85}.selection-count,.board-round{flex:0 0 auto;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 13px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}.category-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.category-card{position:relative;min-height:210px;padding:0;border:3px solid var(--ink);border-radius:17px;overflow:hidden;background:var(--card-color);box-shadow:5px 5px 0 var(--ink);text-align:start;color:var(--ink)}.category-art{height:135px;display:grid;place-items:center;font-size:70px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.08));overflow:hidden}.category-logo{width:100%;height:100%;object-fit:cover;object-position:center}.category-card-body{padding:12px 13px}.category-card h3{margin:0;font-size:17px}.category-card.selected:after{content:"\2713";position:absolute;top:10px;left:10px;width:34px;height:34px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--mint);font-weight:800}.category-card:not(.selected){filter:saturate(.7)}.category-info{position:absolute;top:10px;right:10px;width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:white;font-weight:800;z-index:2}.category-info-pop{display:none;position:absolute;inset:45px 10px auto;background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:10px;font-size:12px;font-weight:700;z-index:3}.category-card.info-open .category-info-pop{display:block}.board-continue{margin:20px 0 8px}.leader-strip{display:flex;gap:8px;overflow-x:auto;padding:17px 2px 7px}.leader-chip{flex:0 0 auto;display:flex;gap:8px;align-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:7px 11px;box-shadow:2px 2px 0 var(--ink);font-weight:800}.leader-chip:first-child{background:var(--yellow)}.question-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:25px}.board-category{border:3px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:5px 5px 0 var(--ink);overflow:hidden}.board-category-head{display:grid;grid-template-columns:58px 1fr;align-items:center;background:var(--card-color);padding:10px}.board-category-art{width:48px;height:48px;display:grid;place-items:center;font-size:38px;text-align:center;overflow:hidden;border-radius:50%}.category-logo-compact{width:48px;height:48px;border-radius:50%;object-fit:cover}.board-category h3{margin:0;font-size:15px}.board-questions{display:grid;gap:7px;padding:10px}.board-question{border:2px solid var(--ink);border-radius:9px;background:white;padding:10px;font-weight:800;text-align:start}.board-question:hover:not(:disabled){background:var(--yellow)}.board-question:disabled{background:#d8d3df;color:#81798d;text-decoration:line-through}.board-screen .board-header{margin-top:12px}
.category-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.secondary-button{border:2px solid var(--ink);border-radius:999px;background:var(--mint);box-shadow:3px 3px 0 var(--ink);font-weight:800;padding:9px 14px;color:var(--ink)}.secondary-button:hover{transform:translate(-1px,-1px)}.answer-timer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;margin:8px 0 12px}.timer-watch{width:50px;height:50px;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);display:grid;place-items:center;position:relative;box-shadow:3px 3px 0 var(--ink);font-weight:800}.timer-watch:before{content:"";position:absolute;top:-9px;width:16px;height:8px;border:3px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0;background:var(--mint)}.timer-bar{height:16px;border:2px solid var(--ink);border-radius:999px;overflow:hidden;background:white}.timer-bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--pink));transition:width .2s linear}.answer-timer.time-up .timer-watch{animation:timer-ring .18s linear 6;background:var(--pink)}@keyframes timer-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@media (orientation:landscape) and (min-width:700px){.app-shell{width:min(96vw,1180px)}.category-card-grid{grid-template-columns:repeat(5,1fr)}.category-card{min-height:190px}.category-art{height:118px}.question-board{grid-template-columns:repeat(4,1fr)}.setup-card{max-width:760px;margin:auto}.answers-grid{grid-template-columns:1fr 1fr}}
@media (orientation:portrait) and (min-width:700px){.app-shell{width:min(92vw,820px)}.category-card-grid{grid-template-columns:repeat(3,1fr)}.question-board{grid-template-columns:repeat(2,1fr)}}

.category-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.category-choice {
  min-height: 56px;
  border: 2px solid var(--ink);
  border-radius: 11px;
  padding: 8px;
  background: white;
  color: var(--ink);
  display: grid;
  grid-template-columns: 25px 1fr 20px;
  align-items: center;
  gap: 5px;
  text-align: left;
  font-size: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
.category-choice > span { font-size: 18px; text-align: center; }
.category-choice > i {
  width: 20px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
}
.category-choice.selected { background: var(--yellow); }
.category-choice.selected > i { background: var(--mint); }
.category-choice:last-child { grid-column: 1 / -1; }

.player-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; min-height: 38px; }
.player-chip {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 7px 9px 7px 12px;
  background: var(--yellow);
  font-weight: 800;display:inline-flex;align-items:center;gap:6px;
}
.player-chip button { border: 0; background: transparent; font-weight: 800; margin-left: 7px; padding: 0; }

.add-player { display: flex; gap: 8px; margin-bottom: 16px; }
input {
  width: 100%;
  min-width: 0;
  border: 2px solid var(--ink);
  background: white;
  border-radius: 10px;
  padding: 12px 13px;
  outline: 0;
}
input:focus { box-shadow: 0 0 0 3px rgba(105,65,216,.25); }
.add-player button { flex: 0 0 46px; border: 2px solid var(--ink); border-radius: 10px; background: var(--mint); font-size: 25px; font-weight: 800; }

.primary-button {
  width: 100%;
  min-height: 50px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--pink);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform .12s, box-shadow .12s;
}
.primary-button:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--ink); }
.primary-button:active:not(:disabled) { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
.primary-button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.handoff-wrap { text-align: center; color: white; padding: 60px 12px 0; }
.handoff-wrap h2 { font-size: 34px; line-height: 1.08; margin: 20px 0 8px; }
.handoff-wrap p { margin: 0 0 24px; }
.mini-sticker { display: inline-block; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); padding: 7px 12px; font-weight: 800; transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--ink); }
.phone-art { width: 126px; height: 205px; border: 5px solid var(--ink); border-radius: 24px; background: var(--mint); margin: 24px auto 34px; box-shadow: 8px 8px 0 var(--ink); transform: rotate(5deg); }
.phone-speaker { width: 42px; height: 6px; background: var(--ink); border-radius: 9px; margin: 12px auto; }
.phone-face { font-size: 34px; margin-top: 47px; font-weight: 800; }

.question-card { margin-top: 34px; padding: 22px; position: relative; }
.category { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; background: var(--yellow); border: 2px solid var(--ink); padding: 5px 8px; transform: rotate(-2deg); }
.question-card h2 { font-size: 27px; line-height: 1.12; margin: 18px 0; }
.question-image-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 10px;
  margin-inline: auto;
  border: 3px solid var(--ink);
  border-radius: 13px;
  overflow: hidden;
  background: transparent;
  position: relative;
}
.question-image-wrap.hidden { display: none; }
.question-image-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(260px, 64vh, 560px);
}
.question-image-wrap small {
  position: absolute;
  right: 6px;
  bottom: 5px;
  border-radius: 5px;
  padding: 3px 6px;
  background: rgba(23,20,38,.78);
  color: white;
  font-size: 9px;
}
.secret-answer { border-top: 2px dashed #aaa2b5; padding-top: 15px; }
.secret-answer span { display: block; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.secret-answer strong { display: block; font-size: 21px; margin-top: 5px; }
.secret-answer.hidden { display: none; }
.input-card { margin-top: 22px; padding: 20px; position: relative; }
.turn-label { color: var(--purple); font-weight: 800; }
.input-card p { margin: 4px 0 13px; }
.input-card form { display: grid; gap: 11px; }
.smart-note {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #655f73;
  font-size: 11px;
  font-weight: 700;
}
.smart-note > span:first-child {
  color: var(--purple);
  font-size: 16px;
}

.vote-heading { color: white; margin: 36px 4px 18px; }
.vote-heading h2 { font-size: 28px; margin: 15px 0 4px; }
.vote-heading p { margin: 0; opacity: .86; }
.answers-grid { display: grid; gap: 12px; }
.answer-option {
  text-align: left;
  padding: 16px;
  min-height: 68px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 700;
  display: flex;
  gap: 12px;
  align-items: center;
}
.answer-option:hover { background: var(--yellow); }
.answer-option.vote-correct {
  background: #b9f4cf;
  border-color: #16884a;
  animation: vote-correct .58s ease both;
}
.answer-option.vote-wrong {
  background: #ffb6b0;
  border-color: #c62d2d;
  animation: vote-wrong .5s ease both;
}
@keyframes vote-correct {
  0% { box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 rgba(30, 190, 99, 0); }
  55% { transform: scale(1.025); box-shadow: 4px 4px 0 var(--ink), 0 0 0 8px rgba(30, 190, 99, .34); }
  100% { box-shadow: 4px 4px 0 var(--ink), 0 0 18px 5px rgba(30, 190, 99, .26); }
}
@keyframes vote-wrong {
  0%, 100% { transform: translateX(0); box-shadow: 4px 4px 0 var(--ink), 0 0 15px 4px rgba(220, 46, 46, .28); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); box-shadow: 4px 4px 0 var(--ink), 0 0 0 8px rgba(220, 46, 46, .34); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.answer-letter { width: 31px; height: 31px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--mint); flex: 0 0 auto; }

#resultScreen { text-align: center; color: white; padding-top: 34px; }
.result-burst { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 20px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 50% 42% 48% 38%; box-shadow: 5px 5px 0 var(--ink); font-size: 42px; font-weight: 800; transform: rotate(8deg); }
#resultScreen h2 { font-size: 29px; line-height: 1.15; margin: 9px 0 24px; }
.score-list { display: grid; gap: 9px; margin-bottom: 24px; text-align: left; }
.score-row { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; box-shadow: 3px 3px 0 var(--ink); font-weight: 800; }
.score-row:first-child { background: var(--yellow); }
.score-row.rank-moved { animation: leaderboard-reorder .62s cubic-bezier(.2,.8,.2,1) both; }
.score-row.rank-up { box-shadow: 3px 3px 0 var(--ink), 0 0 0 3px rgba(73, 210, 142, .28); }
@keyframes leaderboard-reorder {
  from { transform: translateY(var(--rank-offset)); }
  to { transform: translateY(0); }
}
.score-points { color: var(--purple); }

@media (prefers-reduced-motion: reduce) {
  .answer-option.vote-correct,
  .answer-option.vote-wrong,
  .score-row.rank-moved { animation: none; }
  button:not(:disabled):not(.category-art) { transition: none; }
}

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: white; padding: 10px 16px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s; z-index: 20; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

[dir="rtl"] { font-family: "Changa", sans-serif; }
[dir="rtl"] .answer-option { text-align: right; }
[dir="rtl"] .logo-mark { direction: ltr; }
[dir="rtl"] .category-choice { text-align: right; }
[dir="rtl"] .question-image-wrap small { left: 6px; right: auto; }
.board-question.locked-question { background: #ece9f1; color: #756d82; text-decoration: none; }

.category-card {
  cursor: pointer;
  display: grid;
  grid-template-rows: minmax(152px, 1fr) auto;
}
.category-art {
  width: 100%;
  height: 152px;
  min-height: 152px;
  border: 0;
  padding: 0;
  color: var(--ink);
}
.category-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-card-body {
  display: flex;
  align-items: center;
  min-height: 64px;
}
.category-card h3 { line-height: 1.05; }
.board-category-art .category-logo,
.category-logo-compact {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.answer-timer {
  --timer-progress: 0%;
  --timer-angle: 0deg;
  --clock-size: 146px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding-top: 18px;
}
.timer-watch {
  width: var(--clock-size);
  height: var(--clock-size);
  border: 6px solid var(--ink);
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.7) 0 9%, transparent 10%),
    radial-gradient(circle at center, var(--paper) 0 21%, transparent 22%),
    radial-gradient(circle at center, transparent 0 59%, #ffd84d 60% 72%, transparent 73%),
    conic-gradient(#ff7474 0 var(--timer-progress), white var(--timer-progress) 100%);
  font-size: 28px;
  outline: 5px solid #ffd84d;
  outline-offset: -17px;
  box-shadow: 8px 9px 0 rgba(23,20,38,.18);
}
.timer-watch:before {
  top: -34px;
  left: 8px;
  width: calc(100% - 16px);
  height: 43px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 17% 78%, var(--mint) 0 23px, var(--ink) 24px 28px, transparent 29px),
    radial-gradient(circle at 83% 78%, var(--mint) 0 23px, var(--ink) 24px 28px, transparent 29px),
    linear-gradient(var(--ink), var(--ink)) 50% 8px / 42px 5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 50% 8px / 5px 20px no-repeat;
  z-index: 0;
}
.timer-watch:after {
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  bottom: 50%;
  width: 5px;
  height: 43%;
  border-radius: 999px;
  background: var(--ink);
  transform-origin: 50% 100%;
  transform: rotate(var(--timer-angle));
  box-shadow: 0 0 0 1px var(--ink);
  z-index: 1;
}
.timer-watch span {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-size: 22px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
}
.timer-watch span:before,
.timer-watch span:after {
  content: "";
  position: absolute;
  bottom: -76px;
  width: 24px;
  height: 7px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: var(--mint);
  z-index: -2;
}
.timer-watch span:before {
  left: -39px;
  transform: rotate(-32deg);
}
.timer-watch span:after {
  right: -39px;
  transform: rotate(32deg);
}
.timer-bar { display: none; }
.answer-timer.time-up .timer-watch {
  animation: timer-ring .18s linear 8;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.7) 0 9%, transparent 10%),
    radial-gradient(circle at center, var(--paper) 0 21%, transparent 22%),
    radial-gradient(circle at center, transparent 0 59%, #ffd84d 60% 72%, transparent 73%),
    conic-gradient(#ff7474 0 100%);
}
@media (orientation:landscape) and (min-width:700px) {
  .category-card { min-height: 210px; }
  .category-art { height: 146px; min-height: 146px; }
}

.answer-timer {
  --clock-size: 118px;
  --clock-blue: #12364d;
  --timer-red: #ff747a;
  padding-top: 22px;
  margin-bottom: 12px;
}
.timer-watch {
  border: 4px solid var(--clock-blue);
  outline: 0;
  background:
    radial-gradient(circle at center, var(--paper) 0 21%, transparent 22%),
    repeating-conic-gradient(from -1.5deg, var(--clock-blue) 0 3deg, transparent 3deg 30deg),
    radial-gradient(circle at center, transparent 0 72%, var(--paper) 73% 77%, transparent 78%),
    conic-gradient(var(--timer-red) 0 var(--timer-progress), white var(--timer-progress) 100%);
  box-shadow: 5px 7px 0 rgba(18,54,77,.14);
}
.timer-watch:before {
  top: -33px;
  left: -2px;
  width: calc(100% + 4px);
  height: 40px;
  background:
    radial-gradient(circle at 14% 78%, var(--clock-blue) 0 18px, transparent 19px),
    radial-gradient(circle at 86% 78%, var(--clock-blue) 0 18px, transparent 19px),
    radial-gradient(circle at 14% 78%, #eaf4ef 0 10px, transparent 11px),
    radial-gradient(circle at 86% 78%, #eaf4ef 0 10px, transparent 11px),
    linear-gradient(var(--clock-blue), var(--clock-blue)) 50% 5px / 45px 5px no-repeat,
    linear-gradient(var(--clock-blue), var(--clock-blue)) 50% 5px / 5px 20px no-repeat;
}
.timer-watch:after {
  left: calc(50% - 1.5px);
  width: 3px;
  height: 36%;
  background: var(--clock-blue);
  box-shadow: 0 0 0 1px var(--clock-blue);
}
.timer-watch span {
  width: 42px;
  height: 42px;
  border: 3px solid var(--clock-blue);
  color: var(--ink);
  font-size: 19px;
  box-shadow: 0 0 0 2px var(--paper);
}
.timer-watch span:before,
.timer-watch span:after {
  bottom: -61px;
  width: 18px;
  height: 5px;
  border: 3px solid var(--clock-blue);
  background: var(--clock-blue);
}
.timer-watch span:before { left: -31px; }
.timer-watch span:after { right: -31px; }
.answer-timer.time-up .timer-watch {
  background:
    radial-gradient(circle at center, var(--paper) 0 21%, transparent 22%),
    repeating-conic-gradient(from -1deg, transparent 0 27deg, var(--clock-blue) 27deg 30deg),
    radial-gradient(circle at center, transparent 0 72%, var(--paper) 73% 77%, transparent 78%),
    conic-gradient(var(--timer-red) 0 100%);
}

@media (max-width: 370px) {
  .app-shell { padding-inline: 12px; }
  .setup-card { padding: 17px; }
  .question-card h2 { font-size: 23px; }
}

.trick-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.trick-card{position:relative;min-height:166px;border:3px solid var(--ink);border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.08)),var(--trick-color);box-shadow:4px 4px 0 var(--ink);overflow:hidden;color:var(--ink);padding:0;text-align:center;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}.trick-card:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);filter:saturate(1.05)}.trick-art{height:105px;display:grid;place-items:center;font-size:58px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.75),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.15),rgba(0,0,0,.08));pointer-events:none}.trick-card h3{margin:0;padding:10px 12px 12px;font-size:15px;line-height:1.05}.trick-card.selected{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.trick-card.selected:after{content:"\2713";position:absolute;top:10px;left:10px;width:33px;height:33px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--mint);font-weight:800}.trick-card.used{filter:grayscale(1);opacity:.45}.trick-info{position:absolute;top:10px;right:10px;width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;background:white;font-weight:800;z-index:3;cursor:pointer}.trick-info-pop{display:none;position:absolute;inset:48px 9px auto;background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:10px;font-size:11px;font-weight:700;z-index:4;text-align:start}.trick-card.info-open .trick-info-pop{display:block}.power-dock{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 13px}.power-chip{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);padding:8px 11px;box-shadow:2px 2px 0 var(--ink);font-weight:800}.power-chip.active{background:var(--yellow)}.power-chip.used{opacity:.38;text-decoration:line-through}.power-targets{display:flex;gap:8px;flex-wrap:wrap;background:#eee8fb;border:2px solid var(--ink);border-radius:12px;padding:10px;margin-bottom:12px}.power-targets strong{width:100%}.target-choice{border:2px solid var(--ink);border-radius:999px;background:white;padding:7px 11px;font-weight:800}.hint-box{margin-top:12px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:11px;padding:10px;font-weight:800}.answer-option.choice-selected{background:var(--yellow);transform:translate(-2px,-2px)}.power-active-note{background:var(--pink);border:2px solid var(--ink);border-radius:9px;padding:6px 10px;font-size:11px;font-weight:800}
@media (orientation:landscape) and (min-width:700px){.trick-card-grid{grid-template-columns:repeat(5,1fr)}}

.game-fx-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;text-align:center;background:rgba(23,20,38,.88);color:white;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s}.game-fx-overlay.show{opacity:1;visibility:visible}.fx-scene{position:relative;width:min(86vw,520px);height:210px;margin:auto}.fx-title{font-size:clamp(31px,8vw,62px);line-height:1;margin:8px 16px;text-shadow:4px 4px 0 var(--ink)}.fx-subtitle{font-size:clamp(16px,4vw,24px);font-weight:800;margin:10px}.fx-thief,.fx-police,.fx-victim,.fx-points,.fx-double-card,.fx-arrow,.fx-sad{position:absolute;display:grid;place-items:center}.fx-thief{font-size:88px;left:5%;top:45px;animation:thief-run .55s infinite alternate}.fx-police{font-size:82px;right:3%;top:53px;animation:police-chase .34s infinite alternate}.fx-victim{font-size:65px;left:42%;bottom:0;animation:victim-sob .42s infinite}.fx-points{font-size:48px;font-weight:900;color:var(--yellow);left:34%;top:15px;animation:points-stolen 1s infinite}.fx-double-card{width:145px;height:145px;left:calc(50% - 72px);top:22px;border:5px solid var(--ink);border-radius:24px;background:var(--pink);color:var(--ink);font-size:68px;font-weight:900;box-shadow:9px 9px 0 var(--ink);animation:double-pop .55s infinite alternate}.fx-arrow{font-size:86px;right:10%;top:45px}.double-win .fx-arrow{color:var(--mint);animation:arrow-up .75s infinite}.double-loss .fx-arrow{color:#ff7468;animation:arrow-down .75s infinite}.fx-sad{font-size:65px;left:8%;bottom:4px;animation:victim-sob .42s infinite}.double-win{background:radial-gradient(circle,#6941d8,#171426 68%)}.double-loss{background:radial-gradient(circle,#923b55,#171426 70%)}.steal{background:repeating-linear-gradient(135deg,#171426 0 28px,#342c62 28px 56px)}
@keyframes thief-run{to{transform:translate(35px,-9px) rotate(-8deg)}}@keyframes police-chase{to{transform:translate(-35px,7px) rotate(6deg)}}@keyframes victim-sob{50%{transform:translateY(7px) rotate(-5deg)}}@keyframes points-stolen{50%{transform:translateX(-42px) rotate(-12deg) scale(1.2)}}@keyframes double-pop{to{transform:scale(1.12) rotate(5deg)}}@keyframes arrow-up{50%{transform:translateY(-35px) scale(1.2)}}@keyframes arrow-down{50%{transform:translateY(35px) scale(1.2)}}
.fx-team-character{position:absolute;width:145px;height:180px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 4px rgba(0,0,0,.28))}.fx-happy-character{left:2%;bottom:0;animation:character-jump .52s infinite alternate}.fx-sad-character{right:3%;bottom:0;animation:character-cry .45s infinite}.fx-tears{position:absolute;right:18%;top:45px;font-size:34px;animation:tears-fall .7s infinite}.fx-double-character{left:4%;bottom:0;animation:character-jump .52s infinite alternate}.fx-lose-character{animation:character-cry .45s infinite}.steal .fx-police{right:36%;top:72px;font-size:60px}.steal .fx-points{left:42%;top:20px}
@keyframes character-jump{to{transform:translateY(-25px) rotate(5deg)}}@keyframes character-cry{50%{transform:translateY(8px) rotate(-5deg) scale(.96)}}@keyframes tears-fall{to{transform:translateY(50px);opacity:.2}}

.character-sprite{display:inline-block;width:120px;height:150px;background-position:center bottom;background-size:contain;background-repeat:no-repeat;flex:0 0 auto;filter:drop-shadow(0 4px 3px rgba(23,20,38,.18))}.character-0{background-image:url("assets/characters/character-0.png?v=57")}.character-1{background-image:url("assets/characters/character-1.png?v=57")}.character-2{background-image:url("assets/characters/character-2.png?v=57")}.character-3{background-image:url("assets/characters/character-3.png?v=57")}.character-4{background-image:url("assets/characters/character-4.png?v=57")}.character-5{background-image:url("assets/characters/character-5.png?v=57")}.character-6{background-image:url("assets/characters/character-6.png?v=57")}.character-7{background-image:url("assets/characters/character-7.png?v=57")}.character-8{background-image:url("assets/characters/character-8.png?v=57")}.character-9{background-image:url("assets/characters/character-9.png?v=57")}.character-10{background-image:url("assets/characters/character-10.png?v=57")}.character-11{background-image:url("assets/characters/character-11.png?v=57")}.character-12{background-image:url("assets/characters/character-12.png?v=57")}.character-13{background-image:url("assets/characters/character-13.png?v=57")}.character-14{background-image:url("assets/characters/character-14.png?v=57")}.character-15{background-image:url("assets/characters/character-15.png?v=57")}.character-16{background-image:url("assets/characters/character-16.png?v=57")}.character-17{background-image:url("assets/characters/character-17.png?v=57")}.character-18{background-image:url("assets/characters/character-18.png?v=57")}.character-19{background-image:url("assets/characters/character-19.png?v=57")}.character-20{background-image:url("assets/characters/character-20.png?v=57")}.character-21{background-image:url("assets/characters/character-21.png?v=57")}.character-22{background-image:url("assets/characters/character-22.png?v=57")}.character-23{background-image:url("assets/characters/character-23.png?v=57")}.character-24{background-image:url("assets/characters/character-24.png?v=57")}.character-25{background-image:url("assets/characters/character-25.png?v=57")}.character-26{background-image:url("assets/characters/character-26.png?v=57")}.character-27{background-image:url("assets/characters/character-27.png?v=57")}.character-28{background-image:url("assets/characters/character-28.png?v=57")}.character-29{background-image:url("assets/characters/character-29.png?v=57")}.character-30{background-image:url("assets/characters/character-30.png?v=57")}.character-31{background-image:url("assets/characters/character-31.png?v=57")}.character-32{background-image:url("assets/characters/character-32.png?v=57")}.character-33{background-image:url("assets/characters/character-33.png?v=57")}.character-34{background-image:url("assets/characters/character-34.png?v=57")}.character-35{background-image:url("assets/characters/character-35.png?v=57")}.character-36{background-image:url("assets/characters/character-36.png?v=57")}.character-37{background-image:url("assets/characters/character-37.png?v=57")}.character-38{background-image:url("assets/characters/character-38.png?v=57")}.character-39{background-image:url("assets/characters/character-39.png?v=57")}.character-40{background-image:url("assets/characters/character-40.png?v=57")}.character-41{background-image:url("assets/characters/character-41.png?v=57")}.character-42{background-image:url("assets/characters/character-42.png?v=57")}.character-43{background-image:url("assets/characters/character-43.png?v=57")}.character-44{background-image:url("assets/characters/character-44.png?v=57")}.character-45{background-image:url("assets/characters/character-45.png?v=57")}.character-46{background-image:url("assets/characters/character-46.png?v=57")}.character-47{background-image:url("assets/characters/character-47.png?v=57")}.character-48{background-image:url("assets/characters/character-48.png?v=57")}.character-49{background-image:url("assets/characters/character-49.png?v=57")}.character-50{background-image:url("assets/characters/character-50.png?v=57")}.character-51{background-image:url("assets/characters/character-51.png?v=57")}.character-52{background-image:url("assets/characters/character-52.png?v=57")}.character-53{background-image:url("assets/characters/character-53.png?v=57")}.character-54{background-image:url("assets/characters/character-54.png?v=57")}.character-55{background-image:url("assets/characters/character-55.png?v=57")}.character-56{background-image:url("assets/characters/character-56.png?v=57")}.character-57{background-image:url("assets/characters/character-57.png?v=57")}.character-58{background-image:url("assets/characters/character-58.png?v=57")}.character-59{background-image:url("assets/characters/character-59.png?v=57")}.character-60{background-image:url("assets/characters/character-60.png?v=57")}.character-61{background-image:url("assets/characters/character-61.png?v=57")}.character-62{background-image:url("assets/characters/character-62.png?v=57")}.character-63{background-image:url("assets/characters/character-63.png?v=57")}.character-64{background-image:url("assets/characters/character-64.png?v=57")}.character-65{background-image:url("assets/characters/character-65.png?v=57")}.character-66{background-image:url("assets/characters/character-66.png?v=57")}.character-67{background-image:url("assets/characters/character-67.png?v=57")}.character-68{background-image:url("assets/characters/character-68.png?v=57")}.character-69{background-image:url("assets/characters/character-69.png?v=57")}.character-70{background-image:url("assets/characters/character-70.png?v=57")}.character-71{background-image:url("assets/characters/character-71.png?v=57")}.character-72{background-image:url("assets/characters/character-72.png?v=57")}.character-73{background-image:url("assets/characters/character-73.png?v=57")}.character-74{background-image:url("assets/characters/character-74.png?v=57")}.character-75{background-image:url("assets/characters/character-75.png?v=57")}.character-76{background-image:url("assets/characters/character-76.png?v=57")}.character-77{background-image:url("assets/characters/character-77.png?v=57")}.character-78{background-image:url("assets/characters/character-78.png?v=57")}.character-79{background-image:url("assets/characters/character-79.png?v=57")}.character-80{background-image:url("assets/characters/character-80.png?v=57")}.character-81{background-image:url("assets/characters/character-81.png?v=57")}.character-82{background-image:url("assets/characters/character-82.png?v=57")}.character-83{background-image:url("assets/characters/character-83.png?v=57")}.character-84{background-image:url("assets/characters/character-84.png?v=57")}.character-85{background-image:url("assets/characters/character-85.png?v=57")}.character-86{background-image:url("assets/characters/character-86.png?v=57")}.character-87{background-image:url("assets/characters/character-87.png?v=57")}.character-picker,.character-modal-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;align-items:end}.character-group-gap{grid-column:1/-1;height:8px;pointer-events:none}.character-choice{min-width:0;height:112px;border:2px solid var(--ink);border-radius:13px;background:#eee8fb;overflow:hidden;padding:0}.character-choice .character-sprite{width:86px;height:105px;margin:auto}.character-choice.selected{background:var(--mint);box-shadow:3px 3px 0 var(--ink);transform:translateY(-2px)}.character-mini{width:29px;height:34px}.character-tiny{width:25px;height:30px}.character-small{width:54px;height:67px;vertical-align:middle}.character-medium{width:82px;height:102px}.character-large{width:150px;height:188px}.character-trigger{flex:0 0 52px!important;width:52px!important;height:48px;border:2px solid var(--ink);border-radius:10px;background:var(--yellow);padding:0!important;overflow:hidden;box-shadow:2px 2px 0 var(--ink)}.character-trigger .character-sprite{width:45px;height:47px}.name-character-row{display:flex;gap:8px}.character-modal{position:fixed;inset:0;z-index:900;background:rgba(23,20,38,.72);display:grid;place-items:center;padding:18px}.character-modal-card{position:relative;width:min(94vw,720px);max-height:88vh;overflow:auto;background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:22px;box-shadow:8px 8px 0 var(--ink)}.character-modal-card h2{margin:0 40px 18px}.character-modal-close{position:sticky;top:0;float:right;width:35px;height:35px;border:2px solid var(--ink);border-radius:50%;background:var(--pink);font-size:22px;font-weight:800;z-index:2}.team-add-player{display:flex}.team-add-player .character-trigger{flex-basis:46px!important;width:46px!important;height:42px}.active-player-heading{display:flex;align-items:center;gap:10px;padding-right:60px}.active-player-heading p{margin:4px 0 13px}.handoff-wrap #handoffCharacter{height:150px;margin-top:15px}.handoff-wrap .character-large{transform:translateY(-12px)}.vote-heading #voteCharacter{float:inline-end;margin-top:-20px}.board-header h1{display:flex;align-items:center;gap:8px}.representative-card{display:flex;align-items:center;gap:8px}
.character-picker-title{margin:10px 0 3px;font-size:12px;color:var(--purple)}
.score-player{display:flex;align-items:center;gap:7px}

@media(max-width:520px){.character-modal-grid{grid-template-columns:repeat(3,1fr)}.character-choice{height:105px}}

/* Draw category */
.draw-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.draw-header h1{margin:8px 0 4px;font-size:clamp(24px,4vw,42px)}.draw-header p{margin:0;font-weight:700}.draw-countdown{flex:0 0 72px;width:72px;height:72px;border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);font-size:26px;font-weight:900}.draw-countdown.urgent{background:#ff747d;animation:draw-timer-pulse .7s ease-in-out infinite alternate}.draw-studio{width:min(100%,900px);margin:0 auto}.draw-canvas{display:block;width:100%;aspect-ratio:8/5;background:#fff;border:3px solid var(--ink);border-radius:8px;box-shadow:6px 6px 0 var(--ink);touch-action:none;cursor:crosshair}.draw-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:10px;border:3px solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fff7df,#efe8dc);box-shadow:4px 4px 0 var(--ink)}.draw-tool,.draw-color-control,.draw-size-control button{width:48px;height:48px;border:2px solid var(--ink);border-radius:12px;background:white;font:900 18px/1 inherit;display:grid;place-items:center;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}.draw-tool:hover,.draw-color-control:hover,.draw-size-control button:hover{transform:translateY(-2px);box-shadow:3px 4px 0 var(--ink);background:var(--yellow)}.draw-tool.active,.draw-size-control button.active{background:var(--mint);box-shadow:3px 4px 0 var(--ink);transform:translateY(-2px)}.draw-color-control{position:relative;overflow:hidden}.draw-color-control input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.draw-color-control span{width:27px;height:27px;border:3px solid var(--ink);border-radius:50%;background:#171426;box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}.draw-size-control{display:flex;margin-inline-start:4px;border:2px solid var(--ink);border-radius:13px;overflow:hidden;box-shadow:2px 2px 0 var(--ink)}.draw-size-control button{border:0;border-radius:0;box-shadow:none;width:44px;font-size:13px}.draw-size-control button:hover,.draw-size-control button.active{box-shadow:none}.draw-submit{margin-inline-start:auto;min-width:160px;width:auto}.tool-icon{position:relative;display:block;width:28px;height:28px}.brush-icon:before{content:"";position:absolute;left:11px;top:1px;width:7px;height:23px;border:2px solid var(--ink);border-radius:6px;background:var(--pink);transform:rotate(-38deg)}.brush-icon:after{content:"";position:absolute;left:2px;bottom:1px;width:15px;height:7px;border:2px solid var(--ink);border-radius:50% 50% 45% 45%;background:var(--ink);transform:rotate(-38deg)}.eraser-icon:before{content:"";position:absolute;left:4px;top:8px;width:21px;height:13px;border:2px solid var(--ink);border-radius:4px;background:linear-gradient(90deg,#ff9fd0 0 55%,#f6f2eb 55%);transform:rotate(-28deg)}.fill-icon:before{content:"";position:absolute;left:4px;top:5px;width:16px;height:14px;border:2px solid var(--ink);border-radius:4px;background:var(--mint);transform:rotate(-35deg)}.fill-icon:after{content:"";position:absolute;right:3px;bottom:3px;width:9px;height:9px;border:2px solid var(--ink);border-radius:50% 50% 55% 0;background:var(--mint);transform:rotate(-35deg)}.line-icon:before{content:"";position:absolute;left:4px;top:13px;width:23px;height:3px;background:var(--ink);border-radius:999px;transform:rotate(-42deg)}.circle-icon:before{content:"";position:absolute;inset:4px;border:3px solid var(--ink);border-radius:50%;background:#fff}.square-icon:before{content:"";position:absolute;inset:5px;border:3px solid var(--ink);border-radius:4px;background:#fff}.triangle-icon:before{content:"";position:absolute;left:4px;top:3px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:21px solid var(--ink)}.triangle-icon:after{content:"";position:absolute;left:8px;top:10px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid #fff}.draw-final,.draw-watch{width:min(100%,760px);margin:14px auto 20px}.draw-final img,.draw-watch img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;background:#fff;border:3px solid var(--ink);border-radius:8px;box-shadow:5px 5px 0 var(--ink)}.draw-watch p{text-align:center;font-weight:800}.draw-blind{width:min(100%,620px);margin:60px auto;padding:30px;border:3px solid var(--ink);border-radius:8px;background:var(--yellow);box-shadow:7px 7px 0 var(--ink);font-size:22px;font-weight:900;text-align:center}@keyframes draw-timer-pulse{to{transform:scale(1.06)}}
@media(max-width:620px){.draw-header{align-items:center}.draw-countdown{flex-basis:58px;width:58px;height:58px;font-size:21px}.draw-toolbar{gap:6px}.draw-tool,.draw-color-control,.draw-size-control button{width:40px;height:40px}.draw-submit{width:100%;margin-inline-start:0}.draw-canvas{box-shadow:4px 4px 0 var(--ink)}}
.category-card.disabled-category{opacity:.45;filter:grayscale(.55);cursor:not-allowed}.category-card.disabled-category .category-art{cursor:not-allowed}
.category-card.category-group-start{margin-inline-start:18px}.language-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}.language-choice-grid .format-choice{min-height:72px;font-size:22px}.team-question-lanes{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important}.team-question-lane{display:grid;gap:9px}.team-question-lane small{text-align:center;font-weight:900}.team-question-lane.rival-lane{opacity:.38;filter:grayscale(.45)}.team-question-lane .board-question{width:100%}.final-leaderboard-card{max-width:720px;margin:30px auto}.winner-crown{font-size:64px;color:#ffd23f;text-shadow:3px 3px 0 var(--ink)}.final-leaderboard-card h1{font-size:clamp(34px,7vw,72px);margin:10px 0 24px}.final-leaderboard-card .score-list{margin-bottom:24px}
@media(max-width:700px){.category-card.category-group-start{margin-inline-start:0;margin-top:18px}.team-question-lanes{grid-template-columns:1fr 1fr}.team-question-lane small{font-size:11px}.language-choice-grid{grid-template-columns:1fr}}

/* Compact answer timer clock */
.answer-timer {
  --clock-size: 86px;
  --clock-blue: #12364d;
  --timer-red: #ff6b72;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding-top: 14px;
  margin: 0 0 10px;
}
.timer-watch {
  width: var(--clock-size);
  height: var(--clock-size);
  border: 4px solid var(--clock-blue);
  border-radius: 50%;
  outline: 0;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at center, #fffaf0 0 23%, transparent 24%),
    repeating-conic-gradient(from -1.5deg, var(--clock-blue) 0 3deg, transparent 3deg 30deg),
    radial-gradient(circle at center, transparent 0 76%, #fffaf0 77% 81%, transparent 82%),
    conic-gradient(var(--timer-red) 0 var(--timer-progress), #fffaf0 var(--timer-progress) 100%);
  box-shadow: 0 7px 0 rgba(18,54,77,.12);
  color: var(--ink);
}
.timer-watch:before {
  content: "";
  position: absolute;
  top: -23px;
  left: -1px;
  width: calc(100% + 2px);
  height: 30px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 82%, var(--clock-blue) 0 12px, transparent 13px),
    radial-gradient(circle at 82% 82%, var(--clock-blue) 0 12px, transparent 13px),
    radial-gradient(circle at 18% 82%, #f4fbf7 0 6px, transparent 7px),
    radial-gradient(circle at 82% 82%, #f4fbf7 0 6px, transparent 7px),
    linear-gradient(var(--clock-blue), var(--clock-blue)) 50% 5px / 33px 4px no-repeat,
    linear-gradient(var(--clock-blue), var(--clock-blue)) 50% 5px / 4px 15px no-repeat;
  z-index: 0;
}
.timer-watch:after {
  content: "";
  position: absolute;
  left: calc(50% - 1.5px);
  bottom: 50%;
  width: 3px;
  height: 31%;
  border-radius: 999px;
  background: var(--clock-blue);
  transform-origin: 50% 100%;
  transform: rotate(var(--timer-angle));
  box-shadow: none;
  z-index: 1;
}
.timer-watch span {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 3px solid var(--clock-blue);
  border-radius: 50%;
  background: #fffaf0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 0 0 2px #fffaf0;
}
.timer-watch span:before,
.timer-watch span:after {
  content: "";
  position: absolute;
  bottom: -47px;
  width: 14px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--clock-blue);
  z-index: -1;
}
.timer-watch span:before {
  left: -23px;
  transform: rotate(-24deg);
}
.timer-watch span:after {
  right: -23px;
  transform: rotate(24deg);
}
.timer-bar {
  display: none;
}
.answer-timer.time-up .timer-watch {
  animation: timer-ring .14s linear 8;
  background:
    radial-gradient(circle at center, #fffaf0 0 23%, transparent 24%),
    repeating-conic-gradient(from -1.5deg, var(--clock-blue) 0 3deg, transparent 3deg 30deg),
    radial-gradient(circle at center, transparent 0 76%, #fffaf0 77% 81%, transparent 82%),
    conic-gradient(var(--timer-red) 0 100%);
}

/* Final compact alarm clock override */
.answer-timer {
  --clock-size: 54px;
  --clock-blue: #12364d;
  --timer-red: #ff6974;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 18px;
  right: 20px;
  min-height: auto;
}
.timer-watch {
  width: var(--clock-size);
  height: var(--clock-size);
  border: 4px solid var(--clock-blue);
  border-radius: 50%;
  outline: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at center, #fffaf0 0 23%, transparent 24%),
    repeating-conic-gradient(from -1.5deg, var(--clock-blue) 0 3deg, transparent 3deg 30deg),
    radial-gradient(circle at center, transparent 0 73%, #fffaf0 74% 78%, transparent 79%),
    conic-gradient(var(--timer-red) 0 var(--timer-progress), #fffaf0 var(--timer-progress) 100%);
  box-shadow: 0 4px 0 rgba(18, 54, 77, .12);
  color: var(--ink);
}
.timer-watch:before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 18px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 78%, var(--clock-blue) 0 7px, transparent 8px),
    radial-gradient(circle at 82% 78%, var(--clock-blue) 0 7px, transparent 8px),
    linear-gradient(var(--clock-blue), var(--clock-blue)) 50% 4px / 22px 3px no-repeat,
    linear-gradient(var(--clock-blue), var(--clock-blue)) 50% 4px / 4px 10px no-repeat;
  z-index: 0;
}
.timer-watch:after {
  content: "";
  position: absolute;
  left: calc(50% - 1.5px);
  bottom: 50%;
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--clock-blue);
  transform-origin: 50% 100%;
  transform: rotate(var(--timer-angle));
  box-shadow: none;
  z-index: 1;
}
.timer-watch span {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 3px solid var(--clock-blue);
  border-radius: 50%;
  background: #fffaf0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 0 0 2px #fffaf0;
}
.timer-watch span:before,
.timer-watch span:after {
  display: none;
}
.timer-bar {
  display: none;
}
.answer-timer.time-up .timer-watch {
  animation: timer-ring .14s linear 8;
  background:
    radial-gradient(circle at center, #fffaf0 0 23%, transparent 24%),
    repeating-conic-gradient(from -1.5deg, var(--clock-blue) 0 3deg, transparent 3deg 30deg),
    radial-gradient(circle at center, transparent 0 73%, #fffaf0 74% 78%, transparent 79%),
    conic-gradient(var(--timer-red) 0 100%);
}

.question-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: -6px 0 14px;
  padding: 8px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(23, 20, 38, .16);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}
.question-meta.hidden {
  display: none;
}
.question-meta img {
  width: 34px;
  height: 23px;
  object-fit: cover;
  border: 1px solid rgba(23, 20, 38, .35);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(23, 20, 38, .15);
  flex: 0 0 auto;
}
.question-meta.question-meta-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.question-meta-item {
  min-width: 0;
  padding: 10px 12px;
  border-inline-end: 2px solid var(--ink);
}
.question-meta-item:last-child { border-inline-end: 0; }
.question-meta-item small,
.question-meta-item strong {
  display: block;
  overflow-wrap: anywhere;
}
.question-meta-item small {
  margin-bottom: 3px;
  color: #5a5667;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.question-meta-item strong {
  font-size: 15px;
  line-height: 1.2;
}
[dir="rtl"] .question-meta {
  direction: rtl;
}

.question-audio-wrap {
  width: min(100%, 420px);
  margin: 18px 0 8px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 4px 4px 0 rgba(23, 20, 38, .16);
}
.question-audio-wrap.hidden { display: none; }
.question-audio-button {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
  text-align: start;
  font-weight: 800;
}
.question-audio-button:hover { background: #fff6cf; }
.question-audio-button:focus-visible { outline: 4px solid var(--purple); outline-offset: -4px; }
.question-audio-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding-left: 2px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  font-size: 15px;
  box-shadow: 2px 2px 0 var(--ink);
}
.question-audio-button b {
  min-width: 42px;
  padding: 5px 7px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--mint);
  text-align: center;
  font-size: 13px;
}
.question-audio-track { height: 7px; background: #e9e5dc; }
.question-audio-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width .05s linear;
}
.question-audio-wrap.playing .question-audio-icon {
  animation: sound-pulse .72s ease-in-out infinite alternate;
}
@keyframes sound-pulse {
  to { transform: scale(1.08); background: var(--mint); }
}
[dir="rtl"] .question-audio-button { direction: rtl; text-align: right; }
[dir="rtl"] .question-audio-icon { padding-left: 0; padding-right: 2px; }

@media (max-width: 370px) {
  .question-audio-button { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; padding: 8px; font-size: 14px; }
  .question-audio-icon { width: 32px; height: 32px; }
}

@media (max-width: 640px) {
  .question-meta.question-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-meta-item:nth-child(2) { border-inline-end: 0; }
  .question-meta-item:nth-child(-n + 2) { border-bottom: 2px solid var(--ink); }
}

/* Live trick cards */
.live-power-area {
  margin: 14px 0 16px;
  padding: 12px;
  border: 2px dashed rgba(23, 20, 38, .4);
  border-radius: 8px;
  background: #fff8dc;
}
.live-power-area.hidden { display: none; }
.live-power-area .power-dock { margin: 0; }

/* Winner stage */
.final-leaderboard-card {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 6vw, 58px);
  border-width: 4px;
  background: #fffaf0;
  box-shadow: 12px 12px 0 var(--ink);
}
.final-leaderboard-card > * { position: relative; z-index: 2; }
.winner-crown {
  font-size: 110px;
  line-height: 1;
  filter: drop-shadow(5px 5px 0 var(--ink));
  margin: 0 auto 10px;
  text-align: center;
  opacity: 0;
  transform: scale(0.3) translateY(100px);
}
.show-final .winner-crown, .active .winner-crown {
  animation: springUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.1s;
}
.winner-burst {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 77, 0.2) 0deg 15deg, transparent 15deg 30deg);
  border-radius: 50%;
  z-index: 0;
  opacity: 0;
  transform: scale(0);
  mask-image: radial-gradient(circle, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 30%, transparent 70%);
  pointer-events: none;
}
.show-final .winner-burst, .active .winner-burst {
  animation: popBurst 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, spin 20s linear infinite;
}
.winner-burst span { display: none; }

#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}

@keyframes spin { 0% { transform: scale(1) rotate(0deg); } 100% { transform: scale(1) rotate(360deg); } }
@keyframes popBurst { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes springUp { 0% { transform: scale(0.3) translateY(100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.final-leaderboard-card .eyebrow { margin-top: 20px; font-size: 18px; }
.final-leaderboard-card h1 { margin: 6px 0 8px; font-size: clamp(48px, 10vw, 92px); line-height: .95; }
.final-winning-score {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 10px;
  margin: 10px auto 28px;
  padding: 10px 18px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--ink);
}
.final-winning-score strong { font-size: clamp(42px, 8vw, 70px); line-height: 1; }
.final-winning-score span { font-size: 15px; font-weight: 900; }
.final-leaderboard-card .score-list { max-width: 560px; margin: 0 auto 26px; }
@keyframes winner-pop { from { opacity: 0; transform: translateY(18px) scale(.65) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* Big Screen Mode */
.big-screen-create { width: 100%; margin-top: 10px; min-height: 54px; border: 3px solid var(--ink); background: var(--mint); font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
.big-screen-stage { min-height: calc(100vh - 110px); }
.host-stage-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; margin-bottom: 20px; }
.host-stage-top h1 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 54px); }
.host-room-code { flex: 0 0 auto; font-size: clamp(28px, 4vw, 48px); letter-spacing: 6px; }
.host-question-card { max-width: 1040px; margin: 0 auto; padding: clamp(24px, 4vw, 52px); text-align: center; }
.host-question-card .question-image-wrap { margin: 18px auto; }
.host-question-card h2 { font-size: clamp(30px, 5vw, 62px); line-height: 1.08; }
.host-question-card .question-audio-wrap { margin: 18px auto; padding: 10px; }
.host-question-card audio { width: 100%; }
.host-progress { max-width: 560px; margin: 28px auto 0; }
.host-progress strong { display: block; font-size: clamp(42px, 7vw, 76px); line-height: 1; }
.host-progress span { display: block; margin: 7px 0 12px; font-weight: 900; }
.host-progress > div { height: 18px; overflow: hidden; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
.host-progress i { display: block; width: 0; height: 100%; background: var(--mint); transition: width .25s ease; }
.host-score-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 22px auto; }
.host-score { min-width: 170px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 8px; background: #fff; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); }
.host-score.leading { background: var(--yellow); }
.host-score strong { font-size: 30px; }
.host-stage-action { max-width: 520px; margin: 20px auto; }
.phone-wait-screen { display: none; place-items: center; min-height: calc(100vh - 130px); }
.phone-wait-screen.active { display: grid; }
.phone-wait-screen .online-card { max-width: 560px; }
.phone-wait-icon { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 18px; border: 4px solid var(--ink); border-radius: 50%; background: var(--mint); font-size: 44px; font-weight: 900; box-shadow: 5px 5px 0 var(--ink); animation: phone-look-up 1.2s ease-in-out infinite alternate; }
@keyframes phone-look-up { to { transform: translateY(-8px); } }
@media (max-width: 640px) {
  .host-stage-top { align-items: center; }
  .host-room-code { font-size: 24px; letter-spacing: 3px; }
  .final-leaderboard-card { box-shadow: 7px 7px 0 var(--ink); }
  .final-winning-score { grid-template-columns: 1fr; gap: 2px; }
}


/* v80 polish: trick cards should read like game/category cards, not text over art */
.trick-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.trick-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(116px, 1fr) auto;
  min-height: 190px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  color: var(--ink);
  padding: 0;
  text-align: start;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.trick-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
  filter: saturate(1.04);
}
.trick-art {
  min-height: 116px;
  height: 100%;
  display: grid;
  place-items: center;
  background: #fff;
  pointer-events: none;
  overflow: hidden;
}
.trick-art-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.trick-card h3 {
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  background: var(--trick-color, var(--mint));
  border-top: 3px solid var(--ink);
  font-size: 16px;
  line-height: 1.1;
  font-weight: 900;
  overflow-wrap: anywhere;
}
.trick-card.selected {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.trick-card.selected:after {
  content: "\2713";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--mint);
  font-weight: 900;
  z-index: 5;
}
.trick-info {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: white;
  font-weight: 900;
  z-index: 6;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(23,20,38,.2);
}
.trick-info-pop {
  display: none;
  position: absolute;
  inset: 52px 10px auto;
  max-height: calc(100% - 64px);
  overflow: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  font-weight: 800;
  z-index: 7;
  text-align: start;
  box-shadow: 3px 3px 0 rgba(23,20,38,.22);
}
.trick-card.info-open .trick-info-pop { display: block; }
@media (orientation: landscape) and (min-width: 700px) {
  .trick-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .trick-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .trick-card { min-height: 170px; grid-template-rows: 102px auto; }
  .trick-card h3 { font-size: 14px; min-height: 50px; padding: 10px 11px; }
}

/* v80 polish: neat multi-line hints */
.question-meta .hint-list {
  display: grid;
  gap: 7px;
  width: min(100%, 680px);
}
.question-meta:has(.hint-list) {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 0 16px;
  padding: 12px;
}
.hint-line {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border: 2px solid rgba(23,20,38,.22);
  border-radius: 8px;
  background: #fffaf0;
}
.hint-line b {
  color: var(--purple);
  font-size: 12px;
  text-transform: uppercase;
}
.hint-line span {
  font-weight: 900;
  overflow-wrap: anywhere;
}
[dir="rtl"] .hint-line { grid-template-columns: minmax(84px, auto) 1fr; }
@media(max-width:560px){.hint-line{grid-template-columns:1fr}.hint-line b{font-size:11px}}


.round-details{margin:16px 0;display:grid;gap:8px;text-align:start}
.round-details h3{margin:10px 0 2px;font-size:16px}
.round-detail-row,.round-delta-row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:9px 11px;box-shadow:2px 2px 0 var(--ink);font-weight:800}
.round-detail-row small{display:block;font-size:12px;opacity:.78;margin-top:3px;line-height:1.25}
.round-detail-row.is-correct{background:#dcffe9}
.round-detail-row.is-wrong{background:#ffe0dd}
.round-delta-row b{font-size:18px}
.host-stage-question .round-details{font-size:15px;margin-top:14px}

.board-category-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.question-audio-button { display: inline-flex; align-items: center; gap: 10px; background: var(--purple, #6941d8); color: white; border: 3px solid var(--ink, #0d0b1a); border-radius: 999px; padding: 12px 22px; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 4px 4px 0 var(--ink, #0d0b1a); transition: transform 0.1s, box-shadow 0.1s; margin: 8px 0; } .question-audio-button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink,#0d0b1a); } .audio-btn-icon { font-size: 20px; } .audio-plays-left { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 800; background: var(--yellow,#ffd84d); color: var(--ink,#0d0b1a); border: 2px solid var(--ink,#0d0b1a); border-radius: 999px; padding: 3px 10px; }

/* --- CIRCULAR TIMER --- */
body { transition: background-color 0.1s ease; }
body.flash { background-color: var(--pink) !important; background-image: none !important; }

.timer-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: #fffaf0;
  padding: 15px;
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--ink);
  color: var(--ink);
  transition: transform 0.2s ease;
  margin: 10px auto;
  max-width: fit-content;
}

.timer-widget.hidden { display: none !important; }

.timer-widget.pulse {
  animation: heartPulse 0.5s ease-in-out infinite alternate;
}

.circular-timer {
  position: relative;
  width: 100px;
  height: 100px;
}

.circular-timer svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-track {
  fill: none;
  stroke: rgba(13, 11, 26, 0.1);
  stroke-width: 12;
}

.timer-path {
  fill: none;
  stroke: var(--mint);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 283; /* 2 * pi * 45 ≈ 282.7 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

.timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}

.timer-widget.status-warning .timer-path { stroke: var(--orange); }
.timer-widget.status-danger .timer-path { stroke: var(--pink); }
.timer-widget.status-danger .timer-text { color: var(--pink); }

@keyframes heartPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* --- LOBBY IMPROVEMENTS --- */
.host-badge {
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  padding: 2px 5px;
  font-size: 12px;
  margin-inline-start: 5px;
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-block;
  animation: floatIcon 3s ease-in-out infinite;
  vertical-align: text-bottom;
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.team-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  margin-inline-start: 8px;
  vertical-align: middle;
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--card-color, #fffaf0);
  color: var(--ink);
}

/* Quick-shift team buttons for Host */
.team-shift-btn {
  background: white;
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px;
  font-weight: 900;
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  transition: transform 0.1s;
  margin: 0 4px;
}
.team-shift-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--yellow);
}
.team-shift-btn:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--ink);
}

/* Make View Transitions a bit faster and bouncy */
::view-transition-group(*) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vote-waiting-card{grid-column:1/-1;background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:24px;text-align:center}.vote-waiting-card h2{margin:0 0 10px}.vote-waiting-card p{margin:6px 0;font-weight:800}.phone-wait-screen p{white-space:pre-line}