*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg0);color:var(--ink);font-family:var(--font);overflow:hidden}
body{background:var(--page-bg)}
button{font:inherit;color:inherit;cursor:pointer}
input,select{font:inherit}
#app{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- κοινά ---------- */
.logo{font-weight:900;letter-spacing:.04em;font-size:calc(var(--u)*3.2);
  background:linear-gradient(180deg,#fff6c9,var(--gold) 45%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(var(--u)*1) #ffb30066)}
.btn{border:0;border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*1) calc(var(--u)*2.2);font-weight:800;font-size:calc(var(--u)*1.6);
  background:linear-gradient(180deg,#ffe07a,var(--gold2));color:#2a1600;box-shadow:0 calc(var(--u)*.4) 0 #a85b00, 0 calc(var(--u)*1) calc(var(--u)*2) #0008}
.btn:active{transform:translateY(2px)}
.btn.ghost{background:#ffffff14;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.small{font-size:calc(var(--u)*1.15);padding:calc(var(--u)*.6) calc(var(--u)*1.2)}
.chip{display:inline-block;padding:calc(var(--u)*.3) calc(var(--u)*1);border-radius:99px;background:#ffffff18;font-weight:600;font-size:calc(var(--u)*1.1)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*1.6);backdrop-filter:blur(6px)}
.muted{color:var(--dim)}
#toast{position:fixed;left:50%;bottom:calc(var(--u)*2);transform:translateX(-50%);z-index:50;pointer-events:none}
#toast div{background:#000c;border:1px solid var(--line);padding:calc(var(--u)*.8) calc(var(--u)*1.6);border-radius:12px;font-size:calc(var(--u)*1.3);margin-top:8px;animation:fadeup .3s}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}}

/* ---------- ρύθμιση ---------- */
.setup{margin:auto;width:min(96vw,1100px);padding:calc(var(--u)*2.4);display:grid;gap:calc(var(--u)*1.6)}
.setup h1{margin:0;display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.setup .sub{font-size:calc(var(--u)*1.3);color:var(--dim)}
.setup .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*1.2)}
.setup label{display:grid;gap:6px;font-size:calc(var(--u)*1.15);color:var(--dim);font-weight:600}
.setup select,.setup input{background:#0007;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:calc(var(--u)*.7) calc(var(--u)*1);font-size:calc(var(--u)*1.4)}
.teamsEdit{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*1)}
.teamsEdit input{width:100%;border-left:calc(var(--u)*.6) solid var(--c)!important}
.setup .row{display:flex;gap:calc(var(--u)*1);align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ---------- lobby ---------- */
.lobby{flex:1;display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*3);padding:calc(var(--u)*3);align-items:center}
.qrbox{background:#fff;border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*1.2);box-shadow:0 0 calc(var(--u)*4) #ffcf4a55}
.qrbox svg,.qrbox img{display:block;width:calc(var(--u)*30);height:calc(var(--u)*30)}
.joininfo{text-align:center;margin-top:calc(var(--u)*1.2)}
.joininfo .code{font-size:calc(var(--u)*5);font-weight:900;letter-spacing:.2em;color:var(--gold)}
.joininfo .url{font-size:calc(var(--u)*1.3);color:var(--dim)}
.lobbyTeams{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*22),1fr));gap:calc(var(--u)*1.2)}
.lteam{padding:calc(var(--u)*1.2);border-top:calc(var(--u)*.6) solid var(--c)}
.lteam h3{margin:0 0 6px;font-size:calc(var(--u)*2)}
.lteam .pl{font-size:calc(var(--u)*1.35);color:var(--dim);min-height:calc(var(--u)*2)}

/* ---------- παιχνίδι ---------- */
.top{display:flex;align-items:center;gap:calc(var(--u)*1.4);padding:calc(var(--u)*1) calc(var(--u)*2)}
.top .meta{display:flex;gap:calc(var(--u)*.8);align-items:center}
.top .spacer{flex:1}
.top .mini{display:flex;align-items:center;gap:calc(var(--u)*.8);font-size:calc(var(--u)*1.1);color:var(--dim)}
.top .mini .qrs{background:#fff;padding:3px;border-radius:6px}
.top .mini .qrs svg{display:block;width:calc(var(--u)*5.5);height:calc(var(--u)*5.5)}
.top .mini b{color:var(--gold);font-size:calc(var(--u)*1.8);letter-spacing:.12em}
.stage{flex:1;display:grid;grid-template-columns:1fr calc(var(--u)*30);gap:calc(var(--u)*1.6);padding:0 calc(var(--u)*2) calc(var(--u)*1);min-height:0}
.qhead{margin-bottom:calc(var(--u)*1)}
.qhead .cat{font-size:calc(var(--u)*1.2);color:var(--gold);font-weight:700;letter-spacing:.03em}
.qhead .title{font-size:calc(var(--u)*2.5);font-weight:800;line-height:1.15;margin-top:4px}
.left{display:flex;flex-direction:column;min-height:0}
.board{flex:1;display:grid;grid-auto-flow:column;gap:calc(var(--u)*.7) calc(var(--u)*1.2);min-height:0}
.tile{position:relative;display:flex;align-items:center;gap:calc(var(--u)*1);padding:0 calc(var(--u)*1);border-radius:calc(var(--u)*1);
  background:var(--tile-hidden);border:1px solid #ffffff22;box-shadow:inset 0 -3px 0 #0005, 0 4px 12px #0006;overflow:hidden;min-height:0}
.tile .n{flex:none;width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);border-radius:50%;display:grid;place-items:center;font-weight:900;
  font-size:calc(var(--u)*1.6);background:var(--coin);color:#2b1700;box-shadow:0 2px 6px #0008}
.tile .lab{flex:1;min-width:0;font-weight:800;font-size:calc(var(--u)*1.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .det{font-weight:600;font-size:calc(var(--u)*1.1);color:var(--dim);margin-left:6px}
.tile .pts{flex:none;font-weight:900;font-size:calc(var(--u)*1.4);padding:calc(var(--u)*.25) calc(var(--u)*.8);border-radius:99px;background:#0006;color:var(--gold);border:1px solid #ffcf4a55}
.tile.hidden .lab{color:#ffffff30;letter-spacing:.3em}
.tile.open{background:linear-gradient(90deg,var(--c,#3a3a7a) 0 calc(var(--u)*.7),var(--tile-open) calc(var(--u)*.7));animation:flip .6s cubic-bezier(.2,.9,.3,1.3)}
.tile.missed{background:var(--tile-missed)}
.tile.missed .lab{color:#cfc9ef99}
.tile.fresh{box-shadow:0 0 0 2px var(--gold), 0 0 calc(var(--u)*3) #ffcf4a99}
@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:none}}

.side{display:flex;flex-direction:column;gap:calc(var(--u)*.8);min-height:0}
.team{position:relative;padding:calc(var(--u)*.8) calc(var(--u)*1.1);border-radius:calc(var(--u)*1.2);background:#ffffff0d;border:1px solid var(--line);border-left:calc(var(--u)*.7) solid var(--c);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px calc(var(--u)*1);transition:transform .3s, box-shadow .3s}
.team .nm{font-weight:800;font-size:calc(var(--u)*1.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .tot{font-weight:900;font-size:calc(var(--u)*2.4);color:var(--gold);text-align:right;line-height:1}
.team .sub{font-size:calc(var(--u)*1.05);color:var(--dim)}
.team .qr{font-size:calc(var(--u)*1.3);font-weight:800;text-align:right}
.team.active{transform:scale(1.04);box-shadow:0 0 0 2px var(--c), 0 0 calc(var(--u)*3) var(--c);background:#ffffff1c}
.team.off{opacity:.55}
.timer{height:calc(var(--u)*.6);border-radius:99px;background:#ffffff1a;overflow:hidden;grid-column:1/-1}
.timer i{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--gold),var(--bad));transform-origin:left}

.banner{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:30;pointer-events:none;text-align:center;
  padding:calc(var(--u)*1.6) calc(var(--u)*3.4);border-radius:calc(var(--u)*2);background:#0b0a22ee;border:2px solid var(--c,var(--gold));
  box-shadow:0 0 calc(var(--u)*6) var(--c,#ffcf4a88);animation:pop .45s cubic-bezier(.2,.9,.3,1.4)}
.banner .big{font-size:calc(var(--u)*4);font-weight:900}
.banner .small{font-size:calc(var(--u)*1.6);color:var(--dim);margin-top:4px}
.banner.good .big{color:var(--good)} .banner.bad .big{color:var(--bad)} .banner.info .big{color:var(--gold)}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.6);opacity:0}}

.hostbar{display:flex;gap:calc(var(--u)*.6);padding:calc(var(--u)*.6) calc(var(--u)*2) calc(var(--u)*1);align-items:center;opacity:.35;transition:opacity .2s}
.hostbar:hover,.hostbar:focus-within{opacity:1}
.hostbar input{flex:0 1 calc(var(--u)*28);background:#0008;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:calc(var(--u)*.5) calc(var(--u)*1);font-size:calc(var(--u)*1.2)}
.hostbar .spacer{flex:1}

/* ---------- εισαγωγή ερώτησης / επιλογή ---------- */
.center{flex:1;display:grid;place-items:center;text-align:center;padding:calc(var(--u)*3)}
.intro .cat{font-size:calc(var(--u)*2);color:var(--gold);font-weight:800}
.intro .title{font-size:calc(var(--u)*4.4);font-weight:900;line-height:1.1;max-width:calc(var(--u)*90);margin:calc(var(--u)*1.2) auto}
.intro .info{font-size:calc(var(--u)*1.8);color:var(--dim)}
.intro .x2{display:inline-block;margin-top:calc(var(--u)*1.2);font-size:calc(var(--u)*2.2);font-weight:900;color:#2a1600;background:var(--gold);padding:calc(var(--u)*.4) calc(var(--u)*1.4);border-radius:12px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*2.4);margin-top:calc(var(--u)*2.4);width:min(90vw,calc(var(--u)*100))}
.choice{padding:calc(var(--u)*2.4);text-align:center;border-radius:calc(var(--u)*2);background:linear-gradient(180deg,#2e2970,#1a1746);border:2px solid #ffffff2a}
.choice .k{font-size:calc(var(--u)*4);font-weight:900;color:var(--gold)}
.choice .c{font-size:calc(var(--u)*2.2);font-weight:800;margin-top:6px}
.choice .m{font-size:calc(var(--u)*1.4);color:var(--dim);margin-top:6px}

/* ---------- αποτελέσματα ---------- */
.results{margin:auto;width:min(92vw,calc(var(--u)*90));display:grid;gap:calc(var(--u)*1)}
.results h2{margin:0;text-align:center;font-size:calc(var(--u)*3.2)}
.rrow{display:grid;grid-template-columns:calc(var(--u)*5) 1fr calc(var(--u)*12) calc(var(--u)*12) calc(var(--u)*12);align-items:center;gap:calc(var(--u)*1);
  padding:calc(var(--u)*1) calc(var(--u)*1.6);border-radius:calc(var(--u)*1.2);background:#ffffff10;border-left:calc(var(--u)*.7) solid var(--c);font-size:calc(var(--u)*1.9);font-weight:800;animation:fadeup .5s backwards}
.rrow .pl{font-size:calc(var(--u)*2.6);color:var(--gold);font-weight:900}
.rrow .v{text-align:right}
.rrow .v small{display:block;font-size:calc(var(--u)*1);color:var(--dim);font-weight:600}
.rhead{font-size:calc(var(--u)*1.1);color:var(--dim);font-weight:700;background:none;border:0;padding-top:0;padding-bottom:0;animation:none}
.podium{display:flex;gap:calc(var(--u)*2);align-items:flex-end;justify-content:center;margin:calc(var(--u)*2) 0}
.pod{width:calc(var(--u)*22);text-align:center}
.pod .bar{border-radius:calc(var(--u)*1.2) calc(var(--u)*1.2) 0 0;background:linear-gradient(180deg,var(--c),#0004);display:grid;place-items:center;font-size:calc(var(--u)*5);font-weight:900}
.pod .nm{font-size:calc(var(--u)*2.2);font-weight:900;margin-bottom:8px}
.pod .sc{font-size:calc(var(--u)*1.6);color:var(--gold);font-weight:800}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40}

/* ---------- κάρτες ---------- */
.chip.mod{background:var(--gold);color:#2a1600;font-weight:800}
.gem{flex:none;font-size:calc(var(--u)*1.5);filter:drop-shadow(0 0 6px #fff8)}
.team .hand{display:inline-flex;gap:3px;vertical-align:middle;margin-left:4px}
.team .hand i{display:inline-block;width:calc(var(--u)*1.1);height:calc(var(--u)*1.55);border-radius:3px;background:linear-gradient(135deg,var(--gold),#a35a00);box-shadow:0 1px 3px #0008;border:1px solid #fff6}
.pending{position:fixed;left:50%;bottom:calc(var(--u)*7);transform:translateX(-50%);z-index:25;padding:calc(var(--u)*1) calc(var(--u)*2.4);border-radius:calc(var(--u)*1.4);
  background:#0b0a22f0;border:2px solid var(--c);box-shadow:0 0 calc(var(--u)*4) var(--c);font-size:calc(var(--u)*2);font-weight:800;text-align:center;animation:pop .4s}
.pending span{font-size:calc(var(--u)*1.5);color:var(--gold)}
#bannerLayer{position:fixed;inset:0;pointer-events:none;z-index:30}
.cardShow{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:calc(var(--u)*1);animation:cardIn .7s cubic-bezier(.2,.9,.3,1.25)}
@keyframes cardIn{0%{transform:translate(-50%,-30%) rotateY(180deg) scale(.4);opacity:0}100%{transform:translate(-50%,-50%)}}
.cface{width:calc(var(--u)*24);height:calc(var(--u)*34);border-radius:calc(var(--u)*1.6);padding:calc(var(--u)*1.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1);text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 85%,#fff 15%),color-mix(in srgb,var(--c) 70%,#000 30%));border:calc(var(--u)*.5) solid #f3dfa4;box-shadow:0 calc(var(--u)*2) calc(var(--u)*5) #000c,0 0 calc(var(--u)*6) var(--c)}
.cface .ci{font-size:calc(var(--u)*7)}
.cface .cn{font-size:calc(var(--u)*3);font-weight:900;text-shadow:0 2px 6px #0008}
.cface .cd{font-size:calc(var(--u)*1.35);font-weight:600;line-height:1.3;color:#fff;opacity:.95}
.cwho{font-size:calc(var(--u)*2);font-weight:800;background:#000a;padding:calc(var(--u)*.5) calc(var(--u)*1.6);border-radius:99px}
.dice{display:flex;align-items:center;gap:calc(var(--u)*1.4)}
.die{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:calc(var(--u)*1.6);background:radial-gradient(circle at 30% 25%,#fff,#e6e1d6);box-shadow:inset 0 -4px 0 #0002,0 8px 20px #000a;
  display:grid;grid-template-columns:repeat(3,1fr);padding:calc(var(--u)*1.1);gap:calc(var(--u)*.4)}
.die i{border-radius:50%}
.die i.on{background:radial-gradient(circle at 35% 35%,#555,#111)}
.die.roll{animation:roll .25s linear infinite}
.die.roll i{visibility:hidden}
@keyframes roll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.85)}100%{transform:rotate(360deg) scale(1)}}
.dres{font-size:calc(var(--u)*5);font-weight:900;color:var(--gold);opacity:0;transition:opacity .3s}
.dice.done .dres{opacity:1}

/* ---------- Τι Έγραψε η Παρέα ---------- */
.crowdWrite{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.6);text-align:center}
.cwBig{font-size:calc(var(--u)*2.8);font-weight:800}
.cwBig b{color:var(--gold)}
.cwTime{font-size:calc(var(--u)*5);font-weight:900;color:var(--gold)}
.cwTeams{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2);justify-content:center}
.cwTeam{padding:calc(var(--u)*1) calc(var(--u)*1.6);border-radius:calc(var(--u)*1.2);background:#ffffff10;border-top:calc(var(--u)*.5) solid var(--c);min-width:calc(var(--u)*16)}
.cwTeam .nm{font-weight:800;font-size:calc(var(--u)*1.7);margin-bottom:6px}
.cwTeam .slots{display:flex;gap:6px;justify-content:center}
.cwTeam .slots i{width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);border-radius:50%;background:#ffffff1f;border:1px solid #ffffff33}
.cwTeam .slots i.on{background:var(--c);box-shadow:0 0 8px var(--c)}
.cwRules{font-size:calc(var(--u)*1.25)}
.crowdInfo{font-size:calc(var(--u)*1.6);color:var(--dim);margin-bottom:calc(var(--u)*1)}
.crowdInfo b{color:var(--gold)}
.words{flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:calc(var(--u)*.9);overflow:hidden}
.word{display:flex;align-items:center;gap:calc(var(--u)*.8);padding:calc(var(--u)*.7) calc(var(--u)*1.2);border-radius:calc(var(--u)*1);background:var(--tile-open);border-left:calc(var(--u)*.6) solid var(--c);animation:flip .5s}
.word.miss{background:var(--tile-missed);opacity:.75}
.word.fresh{box-shadow:0 0 0 2px var(--gold),0 0 calc(var(--u)*3) #ffcf4a99}
.word .wl{font-weight:800;font-size:calc(var(--u)*1.9)}
.word .wa{display:flex;gap:3px}
.word .wa i{width:calc(var(--u)*1);height:calc(var(--u)*1);border-radius:50%;box-shadow:0 0 0 1px #0006}
.word .wp{font-weight:900;color:var(--gold);font-size:calc(var(--u)*1.5)}
.whoBox{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.2);text-align:center;font-size:calc(var(--u)*1.6)}
.whoWord{font-size:calc(var(--u)*7);font-weight:900;color:var(--gold);text-shadow:0 0 calc(var(--u)*3) #ffcf4a66;animation:pop .5s}
.whoAuthors{font-size:calc(var(--u)*2.6);font-weight:800}
.whoVotes{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.2);justify-content:center;font-size:calc(var(--u)*1.5)}
.whoDelta{display:flex;gap:calc(var(--u)*1);flex-wrap:wrap;justify-content:center}
.whoDelta span{padding:calc(var(--u)*.4) calc(var(--u)*1.2);border-radius:99px;background:color-mix(in srgb,var(--c) 40%,transparent);font-weight:900;font-size:calc(var(--u)*1.8)}