:root{--bg:#07130f;--panel:rgba(255,255,255,.08);--text:#f7fff9;--muted:rgba(247,255,249,.72);--green:#36d072;--gold:#f7c948;--red:#fb7185;--blue:#60a5fa;--shadow:0 30px 90px rgba(0,0,0,.36);--radius:24px}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(54,208,114,.25),transparent 34rem),radial-gradient(circle at bottom right,rgba(247,201,72,.14),transparent 28rem),var(--bg)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{border:0;border-radius:16px;padding:13px 16px;color:#06130d;background:var(--green);font-weight:900;cursor:pointer;transition:transform .12s ease,filter .12s ease}button:hover{transform:translateY(-1px);filter:brightness(1.06)}button.secondary{background:rgba(255,255,255,.12);color:var(--text);border:1px solid rgba(255,255,255,.14)}button.gold{background:var(--gold)}button.blue{background:var(--blue)}button.red{background:var(--red);color:#24030a}button.ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.14)}button.small{padding:9px 11px;border-radius:12px;font-size:13px}input,select,textarea{width:100%;padding:14px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.16);color:var(--text);background:rgba(0,0,0,.22);outline:none}textarea{min-height:96px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(54,208,114,.14)}label{display:grid;gap:7px;color:var(--muted);font-weight:800;font-size:13px}.app{width:min(1220px,calc(100vw - 32px));margin:0 auto;padding:26px 0 48px}.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}.brand{display:flex;gap:12px;align-items:center}.logo-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;color:#05120b;background:linear-gradient(135deg,var(--green),var(--gold));font-weight:1000;box-shadow:var(--shadow)}.brand h1{margin:0;font-size:22px;letter-spacing:-.03em}.brand small{color:var(--muted);font-weight:700}.card{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}.hero h2{margin:0;font-size:clamp(38px,5vw,70px);line-height:.92;letter-spacing:-.065em}.hero p{color:var(--muted);font-size:18px;line-height:1.55}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.badge{display:inline-flex;gap:7px;align-items:center;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);color:var(--muted);font-weight:800;font-size:13px}.badge.green{color:#d7ffe5;background:rgba(54,208,114,.14);border-color:rgba(54,208,114,.22)}.badge.gold{color:#fff4c5;background:rgba(247,201,72,.14);border-color:rgba(247,201,72,.22)}.project-list{display:grid;gap:14px}.project{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:16px;border-radius:20px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.11)}.project-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:rgba(54,208,114,.14);border:1px solid rgba(54,208,114,.2);font-size:26px}.project h3{margin:0 0 4px;font-size:21px}.project p{margin:0;color:var(--muted);line-height:1.38}.project-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.game-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card{text-align:left;padding:16px;border-radius:20px;min-height:130px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);cursor:pointer}.game-card.active{outline:3px solid rgba(54,208,114,.35);background:rgba(54,208,114,.13)}.game-card h3{margin:8px 0 6px}.game-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.35}.icon{font-size:32px}.code{font-size:clamp(42px,8vw,92px);line-height:1;letter-spacing:.08em;font-weight:1000;color:var(--gold);text-shadow:0 10px 35px rgba(247,201,72,.22)}.player-list{display:grid;gap:10px}.player{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.23);border:1px solid rgba(255,255,255,.10)}.player strong{font-size:17px}.empty{color:var(--muted);padding:24px;border-radius:18px;border:1px dashed rgba(255,255,255,.20);text-align:center}.notice{padding:12px 14px;border-radius:16px;background:rgba(96,165,250,.14);border:1px solid rgba(96,165,250,.24);color:#d9ecff;font-weight:800}.error{padding:12px 14px;border-radius:16px;background:rgba(251,113,133,.14);border:1px solid rgba(251,113,133,.24);color:#ffe4e9;font-weight:800}.modal{position:fixed;inset:0;display:none;place-items:center;padding:16px;background:rgba(0,0,0,.72);z-index:30}.modal.open{display:grid}.modal .card{width:min(980px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#0d2118;border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 120px rgba(0,0,0,.72)}.survey-builder{display:none;gap:14px}.survey-builder.open{display:grid}.survey-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.survey-editor-panel{padding:14px;border-radius:20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10)}.survey-question-list{display:grid;gap:10px}.survey-question-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}.survey-question-item.active{border-color:rgba(54,208,114,.55);box-shadow:0 0 0 3px rgba(54,208,114,.12)}.survey-question-item h4{margin:0 0 4px}.survey-question-item p{margin:0;color:var(--muted);font-size:13px}.answer-editor-list{display:grid;gap:9px}.answer-row{display:grid;grid-template-columns:34px 1fr 92px auto;gap:8px;align-items:center}.answer-num{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--gold);color:#06130d;font-weight:1000}.survey-preview{display:grid;gap:8px}.survey-preview-row{display:grid;grid-template-columns:1fr 74px;gap:10px;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.07)}.survey-preview-row strong:last-child{color:var(--gold);text-align:right}.screen-body{min-height:100vh;display:grid;place-items:center}.screen{width:min(1320px,calc(100vw - 36px));text-align:center}.screen h1{margin:0;font-size:clamp(46px,7vw,110px);letter-spacing:-.07em;line-height:.9}.screen .join-code{margin:20px 0}.screen .players{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}.screen .player{justify-content:center;min-height:74px;font-size:22px}@media(max-width:940px){.hero,.grid.two,.grid.three,.game-type-grid,.survey-meta{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.project{grid-template-columns:1fr}.project-actions{justify-content:flex-start}.answer-row{grid-template-columns:1fr}}


/* Quiz Live */
.quiz-answer-editor{display:grid;gap:9px}.quiz-answer-row{grid-template-columns:34px 1fr 120px}.quiz-correct{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;font-weight:900}.quiz-correct input{width:auto;box-shadow:none}.quiz-code-box{text-align:center}.quiz-big-code{font-size:clamp(50px,9vw,110px);line-height:1;letter-spacing:.08em;font-weight:1000;color:var(--gold);text-shadow:0 12px 35px rgba(247,201,72,.26)}.quiz-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.quiz-option{padding:18px;border-radius:20px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);text-align:left}.quiz-option.correct{border-color:rgba(54,208,114,.75);background:rgba(54,208,114,.16)}.quiz-option.wrong{border-color:rgba(251,113,133,.45);background:rgba(251,113,133,.12)}.quiz-letter{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--gold);color:#06130d;font-weight:1000;margin-right:10px}.ranking-list{display:grid;gap:10px}.ranking-row{display:grid;grid-template-columns:44px 1fr 90px;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10)}.ranking-row strong:last-child{text-align:right;color:var(--gold)}.answer-stat{display:grid;grid-template-columns:44px 1fr 70px;gap:10px;align-items:center}.statbar{height:18px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}.statbar span{display:block;height:100%;background:var(--green);border-radius:999px}.player-answer-btn{min-height:72px;font-size:18px;text-align:left}.player-answer-btn[disabled]{opacity:.65;cursor:not-allowed}@media(max-width:780px){.quiz-option-grid,.quiz-answer-row{grid-template-columns:1fr}.ranking-row{grid-template-columns:36px 1fr 72px}}


.answer-detail-row{display:grid;grid-template-columns:1.2fr 1.4fr 80px 90px 90px;gap:10px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.10)}
.answer-detail-row.correct{border-color:rgba(54,208,114,.45);background:rgba(54,208,114,.10)}
.answer-detail-row.wrong{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.08)}
.answer-detail-row strong:last-child{text-align:right;color:var(--gold)}
@media(max-width:780px){.answer-detail-row{grid-template-columns:1fr}.answer-detail-row strong:last-child{text-align:left}}



/* Quiz v11 expanded creator */
.question-type-section{padding:14px;border-radius:20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10)}
.question-type-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.question-type-card{padding:12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);cursor:pointer;display:grid;gap:5px;min-height:112px}
.question-type-card.active{border-color:rgba(54,208,114,.75);background:rgba(54,208,114,.16);box-shadow:0 0 0 3px rgba(54,208,114,.11)}
.question-type-card .qt-icon{font-size:24px}.question-type-card strong{font-size:14px}.question-type-card small{color:var(--muted);line-height:1.25}
.future-type-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.future-type-grid span{padding:10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.16);color:var(--muted);font-weight:900}
.quiz-answer-row.expanded{grid-template-columns:34px 1fr 130px auto}.multi-player-option{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.12);color:var(--text);font-size:17px}.multi-player-option input{width:auto}
.word-cloud-box{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding:24px;border-radius:22px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12)}.word-cloud-box span{display:inline-flex;gap:6px;align-items:flex-start;font-weight:1000;color:var(--gold)}.word-cloud-box small{font-size:13px;color:var(--muted)}
@media(max-width:1000px){.question-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.future-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.question-type-grid,.future-type-grid,.quiz-answer-row.expanded{grid-template-columns:1fr}}


/* Państwa-miasta v12 */
.cities-category-list{display:grid;gap:9px}.cities-category-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.cities-letter-box{display:grid;gap:6px;place-items:center;padding:18px;border-radius:24px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.14)}.cities-letter-box strong{font-size:clamp(64px,12vw,150px);line-height:.9;color:var(--gold);font-weight:1000}.cities-letter-box span{color:var(--muted);font-weight:900}.cities-letter-box.big strong{font-size:clamp(96px,18vw,220px)}.cities-category-chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.cities-category-chips span{padding:12px 16px;border-radius:999px;background:rgba(54,208,114,.14);border:1px solid rgba(54,208,114,.24);font-weight:1000}.cities-table-wrap{display:grid;gap:16px;margin-top:14px}.cities-category-block{padding:14px;border-radius:20px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10)}.cities-answer-row{display:grid;grid-template-columns:1fr 1.2fr 110px auto auto 70px;gap:8px;align-items:center;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.06);margin-top:8px}.cities-answer-row.correct{background:rgba(54,208,114,.12);border:1px solid rgba(54,208,114,.2)}.cities-screen-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:22px;text-align:left}@media(max-width:900px){.cities-answer-row{grid-template-columns:1fr}.cities-category-row{grid-template-columns:1fr}}


/* Państwa-miasta v13 — STOP po uzupełnieniu pól */
.cities-countdown{
  margin-top:14px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(135deg,rgba(247,201,72,.22),rgba(251,113,133,.14));
  border:1px solid rgba(247,201,72,.38);
  display:grid;
  place-items:center;
  text-align:center;
  gap:4px;
}
.cities-countdown strong{
  font-size:clamp(42px,8vw,82px);
  line-height:.95;
  color:var(--gold);
  text-shadow:0 10px 34px rgba(247,201,72,.2);
}
.cities-countdown span{
  font-weight:1000;
  letter-spacing:.02em;
}
.cities-countdown small{
  color:var(--muted);
  font-weight:800;
}
.screen-countdown{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
button:disabled{
  cursor:not-allowed;
  opacity:.48;
  transform:none!important;
  filter:none!important;
}


/* Zgadnij hasło v14 */
.guess-word-list{display:grid;gap:12px}
.guess-word-row{display:grid;grid-template-columns:34px 1fr 1fr 1.2fr 120px auto;gap:10px;align-items:end;padding:12px;border-radius:18px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.12)}
.guess-mask{margin:18px 0;padding:20px;border-radius:22px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.14);font-size:clamp(36px,7vw,78px);letter-spacing:.16em;font-weight:1000;text-align:center;color:var(--gold);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-word}
.screen-mask{font-size:clamp(48px,8vw,120px)}
.guess-info{display:grid;gap:6px;padding:14px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.guess-info strong{color:var(--muted);font-size:13px;text-transform:uppercase}
.guess-info span{font-weight:900;font-size:18px}
.guess-mistakes{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:14px 0}
.guess-mistakes span{width:26px;height:26px;border-radius:999px;background:rgba(54,208,114,.55);border:1px solid rgba(255,255,255,.18)}
.guess-mistakes span.bad{background:var(--red)}
@media(max-width:1000px){.guess-word-row{grid-template-columns:1fr}}


/* Kubiq v15 — visual wow layer */
:root {
  --bg: #05110d;
  --panel-solid: #0d251a;
  --panel-deep: #081b13;
  --neon: #45ff9a;
  --mint: #9fffc6;
  --cyan: #63e6ff;
  --violet: #b790ff;
  --line: rgba(255,255,255,.16);
  --glass-line: rgba(255,255,255,.22);
}
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(69,255,154,.28), transparent 28rem),
    radial-gradient(circle at 86% 16%, rgba(99,230,255,.16), transparent 32rem),
    radial-gradient(circle at 52% 105%, rgba(247,201,72,.15), transparent 34rem),
    linear-gradient(135deg, #04100c 0%, #082317 52%, #06120f 100%);
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .33;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 20%, #000, transparent 78%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.045) 42%, transparent 52%);
  transform: translateX(-120%);
  animation: gl-sheen 12s ease-in-out infinite;
}
@keyframes gl-sheen {
  0%, 72% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.065)),
    linear-gradient(135deg, rgba(69,255,154,.06), rgba(99,230,255,.035));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 28%, transparent 68%, rgba(69,255,154,.13));
  opacity: .42;
}
.logo-mark {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0 2px, transparent 3px),
    linear-gradient(135deg, var(--neon), var(--gold));
  box-shadow: 0 16px 40px rgba(69,255,154,.26), inset 0 1px 0 rgba(255,255,255,.5);
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(69,255,154,.18), rgba(247,201,72,.12));
  z-index: -1;
  filter: blur(10px);
}
button, .badge, .game-card, .project, .question-type-card, .player-answer-btn { transform-style: preserve-3d; }
button {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.25);
}
button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.34) 45%, transparent 55%);
  transform: translateX(-130%);
  transition: transform .5s ease;
}
button:hover {
  transform: translateY(-3px) scale(1.012);
  filter: brightness(1.08) saturate(1.07);
  box-shadow: 0 18px 34px rgba(0,0,0,.28), 0 0 0 4px rgba(69,255,154,.08);
}
button:hover::after { transform: translateX(130%); }
button:active { transform: translateY(0) scale(.99); }
button.secondary, button.ghost { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.08)); }
button.gold { background: linear-gradient(135deg, #ffe16a, #f6bf2f); }
button.red { background: linear-gradient(135deg, #ff8094, #fb4668); }
.badge {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.badge.green { background: linear-gradient(135deg, rgba(69,255,154,.20), rgba(99,230,255,.08)); }
.badge.gold { background: linear-gradient(135deg, rgba(247,201,72,.25), rgba(69,255,154,.06)); }
.hero h2 { text-shadow: 0 16px 46px rgba(0,0,0,.28); }
.game-card {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  background:
    radial-gradient(circle at 18% 0%, rgba(69,255,154,.23), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.18);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.game-card::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -82px;
  top: -78px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 63%);
  transition: transform .28s ease, opacity .28s ease;
  opacity: .55;
}
.game-card::after {
  content: "";
  position: absolute;
  inset: auto 14px 14px auto;
  width: 58px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neon), var(--gold));
  opacity: .45;
  transition: width .25s ease, opacity .25s ease;
}
.game-card:hover {
  transform: translateY(-7px) rotateX(1deg) rotateY(-1deg);
  border-color: rgba(69,255,154,.5);
  box-shadow: 0 24px 58px rgba(0,0,0,.28), 0 0 0 5px rgba(69,255,154,.08);
}
.game-card:hover::before { transform: scale(1.25) translate(-8px, 10px); opacity: .78; }
.game-card:hover::after { width: 118px; opacity: .95; }
.game-card.active {
  outline: none;
  border-color: rgba(69,255,154,.75);
  background:
    radial-gradient(circle at 18% 0%, rgba(69,255,154,.32), transparent 40%),
    linear-gradient(180deg, rgba(69,255,154,.17), rgba(255,255,255,.07));
  box-shadow: 0 0 0 4px rgba(69,255,154,.14), 0 24px 58px rgba(0,0,0,.26);
}
.game-symbol, .ui-symbol {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(69,255,154,.95), rgba(247,201,72,.95));
  color: #03110a;
  font-size: 15px;
  font-weight: 1000;
  letter-spacing: -.03em;
  box-shadow: 0 14px 32px rgba(69,255,154,.18), inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.35);
}
.icon.game-symbol { font-size: 16px; }
.soon-symbol { background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(69,255,154,.14)); color: var(--text); }
.game-card-soon { opacity: .92; border-style: dashed; }
.game-card-soon .soon-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  color: #06130d;
  background: var(--gold);
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: .06em;
}
.project {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(69,255,154,.10), transparent 36%),
    rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.project:hover {
  transform: translateY(-4px);
  border-color: rgba(69,255,154,.34);
  box-shadow: 0 22px 44px rgba(0,0,0,.24);
}
.project-icon {
  background: linear-gradient(135deg, rgba(69,255,154,.95), rgba(99,230,255,.78));
  color: #03110a;
  font-weight: 1000;
  letter-spacing: -.05em;
  box-shadow: 0 16px 32px rgba(69,255,154,.17);
}
.question-type-card { transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.question-type-card:hover {
  transform: translateY(-4px);
  border-color: rgba(69,255,154,.48);
  box-shadow: 0 16px 34px rgba(0,0,0,.20);
}
.qt-icon.ui-symbol {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  font-size: 13px;
}
.future-type-grid span {
  position: relative;
  padding-left: 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.future-type-grid span:hover {
  transform: translateY(-3px);
  border-color: rgba(247,201,72,.42);
  background: rgba(247,201,72,.08);
}
.modal .card {
  background:
    radial-gradient(circle at top left, rgba(69,255,154,.15), transparent 30rem),
    linear-gradient(180deg, #10281e, #091b14);
  border-color: rgba(255,255,255,.24);
}
input, select, textarea {
  background: rgba(2,12,8,.42);
  border-color: rgba(255,255,255,.18);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.28); }
input:focus, select:focus, textarea:focus {
  transform: translateY(-1px);
  border-color: rgba(69,255,154,.82);
  box-shadow: 0 0 0 4px rgba(69,255,154,.13), 0 12px 28px rgba(0,0,0,.18);
}
.quiz-big-code, .code {
  background: linear-gradient(135deg, var(--gold), var(--neon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 16px 28px rgba(247,201,72,.16));
}
.quiz-option, .player-answer-btn, .ranking-row, .answer-detail-row {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.quiz-option:hover, .player-answer-btn:hover, .ranking-row:hover, .answer-detail-row:hover {
  transform: translateY(-2px);
  border-color: rgba(69,255,154,.32);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.screen .card { box-shadow: 0 34px 110px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.10); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; }
}


/* Kubiq v17 — unified game UI */
.game-shell {
  --game-accent: var(--neon);
  --game-accent-2: var(--gold);
  --game-soft: rgba(69,255,154,.12);
}

.game-quiz {
  --game-accent: #63e6ff;
  --game-accent-2: #45ff9a;
  --game-soft: rgba(99,230,255,.13);
}

.game-cities {
  --game-accent: #45ff9a;
  --game-accent-2: #f7c948;
  --game-soft: rgba(69,255,154,.13);
}

.game-guess {
  --game-accent: #f7c948;
  --game-accent-2: #b790ff;
  --game-soft: rgba(247,201,72,.14);
}

.game-shell .top {
  position: sticky;
  top: 14px;
  z-index: 20;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.065)),
    radial-gradient(circle at 16% 0%, var(--game-soft), transparent 42%);
  border: 1px solid rgba(255,255,255,.19);
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}

.game-shell .top::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--game-accent), var(--game-accent-2), transparent);
  opacity: .8;
}

.game-shell .logo-mark {
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0 2px, transparent 3px),
    linear-gradient(135deg, var(--game-accent), var(--game-accent-2));
}

.game-shell .brand small {
  color: rgba(248,250,252,.72);
  font-weight: 700;
}

.game-shell .card {
  border-radius: 28px;
}

.game-shell .card > h2,
.game-shell .card h2,
.game-shell .card h3 {
  letter-spacing: -.03em;
}

.game-shell .grid.two > .card:first-child .quiz-big-code,
.game-shell .quiz-code-box .quiz-big-code {
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1;
  letter-spacing: .05em;
  padding: 12px 0 16px;
}

.game-shell .quiz-big-code::selection,
.game-shell .guess-mask::selection,
.game-shell .cities-letter-box strong::selection {
  background: rgba(255,255,255,.28);
}

.role-admin .card:first-of-type,
.role-player #gameCard,
.role-screen .screen .card {
  background:
    radial-gradient(circle at top left, var(--game-soft), transparent 26rem),
    linear-gradient(180deg, rgba(255,255,255,.135), rgba(255,255,255,.065));
}

.role-player .hero .card:first-child::after,
.role-admin main > section:first-of-type .card:last-child::after,
.role-screen .screen .card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -96px;
  bottom: -96px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--game-soft), transparent 67%);
  pointer-events: none;
}

.game-shell .notice {
  border-radius: 20px;
  border-color: rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    radial-gradient(circle at left, var(--game-soft), transparent 32%);
}

.game-shell .badge.gold {
  border-color: color-mix(in srgb, var(--game-accent-2) 42%, transparent);
}

.game-shell button.gold,
.game-shell .badge.gold {
  background: linear-gradient(135deg, var(--game-accent-2), var(--game-accent));
  color: #04110c;
}

.game-shell button.secondary {
  border-color: rgba(255,255,255,.17);
}

.game-shell .player-list,
.game-shell .ranking-list,
.game-shell .cities-table-wrap {
  display: grid;
  gap: 10px;
}

.game-shell .player,
.game-shell .ranking-row,
.game-shell .answer-detail-row,
.game-shell .survey-preview-row,
.game-shell .answer-stat,
.game-shell .multi-player-option,
.game-shell .quiz-option {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.045)),
    radial-gradient(circle at 0% 0%, var(--game-soft), transparent 48%);
  border: 1px solid rgba(255,255,255,.13);
}

.game-shell .ranking-row {
  grid-template-columns: 54px 1fr 100px;
  min-height: 54px;
}

.game-shell .ranking-row strong:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  color: #04110c;
  background: linear-gradient(135deg, var(--game-accent), var(--game-accent-2));
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.game-shell .player strong,
.game-shell .ranking-row strong,
.game-shell .answer-detail-row strong {
  letter-spacing: -.02em;
}

.game-shell .quiz-letter,
.game-shell .answer-num {
  background: linear-gradient(135deg, var(--game-accent), var(--game-accent-2));
  color: #03110a;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.game-shell .quiz-option.correct,
.game-shell .answer-detail-row.correct {
  border-color: color-mix(in srgb, var(--game-accent) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--game-accent) 13%, transparent);
}

.game-shell .answer-detail-row.wrong {
  border-color: rgba(251,113,133,.42);
  background:
    linear-gradient(180deg, rgba(251,113,133,.13), rgba(255,255,255,.045));
}

.game-shell .statbar,
.game-shell .statbar span {
  border-radius: 999px;
}

.game-shell .statbar {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}

.game-shell .statbar span {
  background: linear-gradient(90deg, var(--game-accent), var(--game-accent-2));
  box-shadow: 0 0 22px color-mix(in srgb, var(--game-accent) 30%, transparent);
}

.role-screen .screen {
  width: min(1540px, calc(100vw - 32px));
}

.role-screen .screen .card {
  min-height: calc(100vh - 48px);
  display: grid;
  align-content: center;
  text-align: center;
  border-radius: 34px;
  padding: clamp(22px, 4vw, 58px);
}

.role-screen .screen h1 {
  font-size: clamp(36px, 6vw, 92px);
  line-height: .95;
  margin: 18px 0 24px;
  letter-spacing: -.06em;
}

.role-screen .screen h2 {
  letter-spacing: -.04em;
}

.role-screen #status {
  justify-self: center;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.role-player #gameCard {
  max-width: 980px;
  margin: 0 auto;
}

.role-player #joinCard .card {
  min-height: 260px;
}

.role-player #joinCard h2 {
  font-size: clamp(34px, 5vw, 68px);
  line-height: .95;
}

.cities-letter-box,
.guess-mask {
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 50% 0%, var(--game-soft), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 22px 60px rgba(0,0,0,.26);
}

.cities-letter-box strong,
.guess-mask {
  color: var(--game-accent-2);
  text-shadow: 0 18px 42px color-mix(in srgb, var(--game-accent-2) 22%, transparent);
}

.guess-mistakes span {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 20px rgba(0,0,0,.18);
}

.word-cloud-box {
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 0%, var(--game-soft), transparent 50%),
    rgba(0,0,0,.18);
}

.word-cloud-box span {
  color: var(--game-accent-2);
}

.empty {
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px dashed rgba(255,255,255,.15);
}

.game-shell .error {
  border-radius: 18px;
}

@media (max-width: 820px) {
  .game-shell .top {
    position: static;
    border-radius: 22px;
  }

  .game-shell .ranking-row {
    grid-template-columns: 44px 1fr auto;
  }

  .role-screen .screen {
    width: min(100%, calc(100vw - 18px));
  }
}


/* Kubiq v18 — auth/admin dashboard */
.auth-screen {
  min-height: 100vh;
  place-items: center;
  padding: 28px;
}

.auth-panel {
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: stretch;
}

.auth-panel h1 {
  font-size: clamp(48px, 8vw, 100px);
  line-height: .9;
  margin: 20px 0 14px;
  letter-spacing: -.07em;
}

.auth-panel p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.auth-card {
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(69,255,154,.16), transparent 26rem),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

#authMessage {
  margin-top: 14px;
}

#appShell[style*="display:none"] + #projectModal,
body:has(#appShell[style*="display: none"]) #projectModal {
  display: none;
}

@media (max-width: 900px) {
  .auth-panel {
    grid-template-columns: 1fr;
  }
}


/* Kubiq v20 — global organization menu and branding */
.admin-menu-card {
  width: min(1120px, calc(100vw - 32px));
}

.admin-menu-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 18px;
  align-items: start;
}

.organization-preview-card {
  min-height: 340px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-accent, #45ff9a) 20%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.organization-logo-preview {
  width: 92px;
  height: 92px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 30px;
  font-weight: 1000;
  color: #06120f;
  background: linear-gradient(135deg, #45ff9a, #f7c948);
  box-shadow: 0 22px 54px rgba(69,255,154,.20);
  border: 1px solid rgba(255,255,255,.36);
}

.organization-preview-card h3 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: .98;
  margin: 14px 0 8px;
}

.organization-preview-card p {
  color: var(--muted);
  font-size: 17px;
  font-weight: 800;
  margin: 0;
}

.organization-preview-card small {
  display: inline-flex;
  margin-top: 16px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(248,250,252,.64);
  font-weight: 900;
}

.institution-brand-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: min(100%, 920px);
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-accent, var(--game-accent)) 22%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.11);
  backdrop-filter: blur(14px);
}

.role-screen .institution-brand-bar {
  justify-self: center;
  margin: 0 auto 22px;
}

.institution-brand-logo {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  color: #04110c;
  font-weight: 1000;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, var(--brand-accent, var(--game-accent)), var(--gold));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand-accent, var(--game-accent)) 24%, transparent);
  border: 1px solid rgba(255,255,255,.34);
}

.institution-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.institution-brand-logo.has-image {
  background: rgba(255,255,255,.09);
}

.institution-brand-text {
  display: grid;
  gap: 2px;
  text-align: left;
}

.institution-brand-text strong {
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: -.02em;
}

.institution-brand-text span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.institution-brand-bar small {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.16);
  color: rgba(248,250,252,.62);
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .admin-menu-layout {
    grid-template-columns: 1fr;
  }

  .institution-brand-bar {
    width: 100%;
  }
}


/* Kubiq v22 — organization color drives all themes */
body {
  --theme-primary: var(--brand-accent, var(--neon));
}

.logo-mark,
.project-icon,
.game-symbol,
.ui-symbol,
.organization-logo-preview,
.institution-brand-logo,
.game-shell .ranking-row strong:first-child,
.game-shell .quiz-letter,
.game-shell .answer-num {
  background: linear-gradient(135deg, var(--theme-primary), var(--gold)) !important;
}

.game-card {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--theme-primary) 28%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
}

.game-card:hover,
.game-card.active,
.project:hover,
.question-type-card:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 58%, transparent) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,.28), 0 0 0 5px color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}

.game-card::after,
.game-shell .statbar span {
  background: linear-gradient(90deg, var(--theme-primary), var(--gold)) !important;
}

.card {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--theme-primary) 11%, transparent), transparent 26rem),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.065)) !important;
}

button.gold,
.game-shell button.gold,
.badge.gold,
.game-shell .badge.gold {
  background: linear-gradient(135deg, var(--theme-primary), var(--gold)) !important;
}

button:hover {
  box-shadow: 0 18px 34px rgba(0,0,0,.28), 0 0 0 4px color-mix(in srgb, var(--theme-primary) 12%, transparent) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--theme-primary) 82%, white 0%) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-primary) 14%, transparent), 0 12px 28px rgba(0,0,0,.18) !important;
}

.quiz-big-code,
.code {
  background: linear-gradient(135deg, var(--gold), var(--theme-primary)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}


/* Kubiq v23 — full organization background theme */
.theme-preview-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.theme-preview-strip span {
  min-height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 24px rgba(0,0,0,.18);
}

body {
  background-color: var(--org-bg, #05110d) !important;
}

.screen-body {
  background-color: var(--org-bg, #05110d) !important;
}

.auth-screen,
#appShell,
.app,
.screen {
  position: relative;
}

.card,
.auth-card,
.admin-menu-card,
.organization-preview-card {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--theme-primary, var(--brand-accent, #45ff9a)) 13%, transparent), transparent 26rem),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
}

.organization-preview-card {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #45ff9a) 24%, transparent), transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--org-bg, #05110d) 92%, white 8%), color-mix(in srgb, var(--org-bg, #05110d) 78%, black 22%)) !important;
}

.institution-brand-bar {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, var(--brand-accent)) 24%, transparent), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
}

.empty,
.notice,
.answer-detail-row,
.ranking-row,
.player,
.survey-editor-panel,
.quiz-option {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--theme-primary, #45ff9a) 10%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
}


/* Kubiq v24 — landing page and product offer */
.landing-screen {
  min-height: 100vh;
  padding: 22px;
}

.landing-nav {
  width: min(1240px, 100%);
  margin: 0 auto 22px;
  position: sticky;
  top: 14px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.065)),
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--theme-primary, #45ff9a) 18%, transparent), transparent 42%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
}

.landing-wrap {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.landing-hero {
  min-height: 610px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 5vw, 66px);
}

.landing-hero h2 {
  max-width: 760px;
  font-size: clamp(48px, 8vw, 112px);
  line-height: .88;
  letter-spacing: -.075em;
  margin: 20px 0;
}

.landing-hero p {
  max-width: 700px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.55;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.landing-stage-card {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 28px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--theme-primary, #45ff9a) 28%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 34px 92px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12);
}

.landing-stage-card::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -92px;
  top: -92px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.20), transparent 68%);
}

.stage-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.stage-topline span,
.stage-topline strong {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 12px;
  font-weight: 1000;
}

.landing-stage-card h3 {
  font-size: clamp(38px, 4vw, 62px);
  line-height: .95;
  margin: 0;
  letter-spacing: -.055em;
}

.stage-question {
  padding: 16px;
  border-radius: 22px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
}

.stage-bars {
  display: grid;
  gap: 10px;
}

.stage-bars span {
  position: relative;
  overflow: hidden;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 1000;
}

.stage-bars span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, var(--theme-primary, #45ff9a), var(--gold));
  opacity: .38;
}

.stage-bars span {
  isolation: isolate;
}

.landing-stage-card small {
  color: rgba(248,250,252,.62);
  font-weight: 900;
}

.landing-section {
  display: grid;
  gap: 18px;
}

.section-heading {
  max-width: 820px;
}

.section-heading h2 {
  font-size: clamp(34px, 5vw, 70px);
  line-height: .95;
  margin: 14px 0 10px;
  letter-spacing: -.06em;
}

.section-heading p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.landing-grid {
  display: grid;
  gap: 16px;
}

.landing-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.landing-grid.games {
  grid-template-columns: repeat(4, 1fr);
}

.landing-feature,
.landing-game,
.offer-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: 20px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #45ff9a) 14%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.landing-feature:hover,
.landing-game:hover,
.offer-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--theme-primary, #45ff9a) 48%, transparent);
  box-shadow: 0 26px 58px rgba(0,0,0,.28), 0 0 0 5px color-mix(in srgb, var(--theme-primary, #45ff9a) 10%, transparent);
}

.landing-feature strong,
.landing-game h3,
.offer-card h3 {
  display: block;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 12px 0 8px;
}

.landing-feature span,
.landing-game p,
.offer-card p,
.offer-card li {
  color: var(--muted);
  line-height: 1.5;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.offer-card {
  min-height: 360px;
}

.offer-card.featured {
  border-color: color-mix(in srgb, var(--theme-primary, #45ff9a) 58%, transparent);
  transform: translateY(-8px);
}

.offer-card ul {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  margin-top: 20px;
}

.final-cta {
  text-align: center;
  justify-items: center;
  padding: clamp(30px, 5vw, 62px);
}

.final-cta h2 {
  max-width: 900px;
  font-size: clamp(34px, 5vw, 78px);
  line-height: .92;
  letter-spacing: -.06em;
  margin: 12px 0;
}

.final-cta p {
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 1050px) {
  .landing-hero,
  .landing-grid.four,
  .landing-grid.games,
  .offer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .landing-hero-content {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .landing-screen {
    padding: 12px;
  }

  .landing-nav {
    position: static;
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-hero,
  .landing-grid.four,
  .landing-grid.games,
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: unset;
    padding: 22px;
  }

  .landing-stage-card {
    min-height: 330px;
  }

  .offer-card.featured {
    transform: none;
  }
}


/* Kubiq v25 — contrast and readability fixes */
:root {
  --on-light: #06130d;
  --on-accent: #06130d;
}

button,
button.gold,
.badge.gold,
.badge.green,
.game-shell button.gold,
.game-shell .badge.gold,
.stage-topline span,
.stage-topline strong,
.soon-chip {
  color: var(--on-accent) !important;
  text-shadow: none !important;
}

button.gold,
.badge.gold,
.badge.green,
.game-shell button.gold,
.game-shell .badge.gold {
  background:
    linear-gradient(135deg, var(--theme-primary, var(--brand-accent, #45ff9a)), var(--gold)) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 12px 26px color-mix(in srgb, var(--theme-primary, #45ff9a) 16%, transparent) !important;
}

button.secondary,
.badge,
.stage-topline span,
.stage-topline strong {
  color: #f8fafc !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

button.ghost {
  color: #dbeafe !important;
}

.landing-nav button.gold,
.landing-actions button.gold,
.final-cta button.gold,
#landingDemoLoginBtn,
#landingBottomLoginBtn,
#landingLoginBtn,
#saveProjectBtn,
#saveOrgSettingsBtn,
#newProjectBtn,
#loginBtn {
  color: #06130d !important;
  font-weight: 1000 !important;
  letter-spacing: -.01em;
}

.badge.gold,
.badge.green {
  font-weight: 1000 !important;
}

.game-card .badge,
.landing-feature .badge,
.offer-card .badge,
.section-heading .badge,
.card > .badge,
.landing-hero .badge {
  min-height: 32px;
}

.project button,
.project .badge,
.question-type-card,
.type-pill,
.small,
button.small {
  font-weight: 1000 !important;
}

.game-symbol,
.ui-symbol,
.logo-mark,
.project-icon,
.organization-logo-preview,
.institution-brand-logo,
.branding-logo-preview {
  color: #06130d !important;
  text-shadow: none !important;
}

.quiz-big-code,
.code {
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.24));
}

input[type="color"] {
  min-height: 48px;
  padding: 6px !important;
}

.offer-card.featured .badge.gold,
.landing-stage-card .stage-topline strong {
  color: #06130d !important;
}


/* Kubiq v26 — onboarding, restricted demo and mobile polish */
.demo-restriction {
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-color: color-mix(in srgb, var(--theme-primary, #45ff9a) 44%, transparent) !important;
}

.demo-restriction h2 {
  margin: 10px 0 6px;
  font-size: clamp(26px, 4vw, 48px);
  line-height: .96;
  letter-spacing: -.055em;
}

.demo-restriction p {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
}

.onboarding-card {
  position: relative;
  overflow: hidden;
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.onboarding-steps article {
  position: relative;
  min-height: 210px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--theme-primary, #45ff9a) 13%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
}

.onboarding-steps article > strong {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #06130d;
  background: linear-gradient(135deg, var(--theme-primary, #45ff9a), var(--gold));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--theme-primary, #45ff9a) 18%, transparent);
}

.onboarding-steps h3 {
  margin: 16px 0 8px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.035em;
}

.onboarding-steps p {
  color: var(--muted);
  line-height: 1.5;
  min-height: 58px;
}

.project-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-actions .secondary {
  min-width: max-content;
}

input#importProjectsInput {
  display: none !important;
}

@media (max-width: 900px) {
  .demo-restriction {
    align-items: flex-start;
    flex-direction: column;
  }

  .onboarding-steps {
    grid-template-columns: 1fr;
  }

  .project {
    grid-template-columns: 48px 1fr;
  }

  .project-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .project-actions button {
    flex: 1 1 150px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .app,
  .landing-screen {
    padding: 12px;
  }

  .top,
  .game-shell .top {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  .brand {
    gap: 10px;
  }

  .brand h1 {
    font-size: 19px;
  }

  .brand small {
    font-size: 11px;
  }

  .logo-mark {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .card {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .hero {
    grid-template-columns: 1fr !important;
  }

  button,
  .button-like,
  input,
  select,
  textarea {
    min-height: 48px;
    font-size: 16px;
  }

  button.small {
    min-height: 44px;
    font-size: 14px;
  }

  label {
    gap: 8px;
  }

  .quiz-option,
  .multi-player-option,
  .answer-detail-row,
  .ranking-row,
  .player {
    padding: 14px !important;
    min-height: 56px;
  }

  .quiz-option {
    grid-template-columns: 44px 1fr !important;
    gap: 10px;
  }

  .quiz-letter,
  .answer-num {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }

  .role-player #joinCard h2 {
    font-size: clamp(32px, 10vw, 48px);
  }

  .role-player #gameCard {
    width: 100%;
  }

  .screen .card,
  .role-screen .screen .card {
    min-height: calc(100vh - 24px);
    padding: 18px !important;
  }

  .role-screen .screen h1 {
    font-size: clamp(34px, 14vw, 64px);
  }

  .institution-brand-bar {
    width: 100%;
    align-items: flex-start;
  }

  .institution-brand-bar small {
    display: none;
  }

  .landing-actions,
  .row {
    width: 100%;
  }

  .landing-actions button,
  .row button {
    flex: 1 1 auto;
  }
}


/* Kubiq v27 — invite-only admin access */
#registerAccessCode {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
}

.auth-card .notice {
  font-size: 14px;
}

.demo-restriction {
  border-color: color-mix(in srgb, var(--gold) 44%, transparent) !important;
}


/* Kubiq v31 — polished validation popups */
.kubiq-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 7, .62);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.kubiq-popup-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.kubiq-popup {
  width: min(520px, 100%);
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--theme-primary, #45ff9a) 24%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 34px 92px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}

.kubiq-popup-overlay.open .kubiq-popup {
  transform: translateY(0) scale(1);
}

.kubiq-popup-mark {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 1000;
  color: #06130d;
  background: linear-gradient(135deg, var(--theme-primary, #45ff9a), var(--gold));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--theme-primary, #45ff9a) 20%, transparent);
}

.kubiq-popup-overlay[data-type="error"] .kubiq-popup-mark {
  background: linear-gradient(135deg, #ff5f6d, var(--gold));
}

.kubiq-popup h2 {
  margin: 4px 34px 8px 0;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.04em;
}

.kubiq-popup p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 800;
}

.kubiq-popup-details {
  display: none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  color: rgba(248,250,252,.82);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
}

.kubiq-popup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.kubiq-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 14px;
  color: #f8fafc !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
}

.kubiq-toast-wrap {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
}

.kubiq-toast {
  padding: 14px 16px;
  border-radius: 18px;
  color: #f8fafc;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
  transform: translateY(8px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  font-weight: 900;
}

.kubiq-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.kubiq-toast.success {
  color: #06130d;
  background: linear-gradient(135deg, var(--theme-primary, #45ff9a), var(--gold));
}

@media (max-width: 640px) {
  .kubiq-popup {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .kubiq-popup-mark {
    width: 50px;
    height: 50px;
    border-radius: 18px;
  }
}