*{box-sizing:border-box}
:root{--gold:#e1bd67;--gold2:#ffe3a0;--cream:#fff7e5;--ink:#17361f;--felt:#245d39;--dark:#0c1d12;--red:#bc4455;--green:#318054;--blue:#4968a8;--muted:#745f31;--shadow:0 18px 42px rgba(0,0,0,.30)}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 50% -20%,#438058 0,#1e4d31 38%,#0d2015 100%);color:#fff}
body{min-height:100vh;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 9%,rgba(255,218,127,.16),transparent 19%),radial-gradient(circle at 92% 8%,rgba(255,218,127,.14),transparent 21%),linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.26));z-index:0}
a{color:inherit}.wrap{position:relative;z-index:1;width:min(1120px,100%);margin:0 auto;padding:16px}.wrap.narrow{width:min(760px,100%)}
.brand{display:flex;gap:13px;align-items:center;justify-content:space-between;background:rgba(0,0,0,.34);border:2px solid var(--gold);border-radius:22px;padding:12px 15px;box-shadow:var(--shadow);margin-bottom:14px}.brand-left{display:flex;gap:12px;align-items:center}.brand img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 9px 8px rgba(0,0,0,.38));animation:kkbob 2.8s ease-in-out infinite}.brand h1{font-size:clamp(24px,4vw,42px);line-height:.95;margin:0;color:#ffe4a2}.brand p{margin:7px 0 0;font-weight:800;font-size:13px}.brand-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.panel{background:var(--cream);color:var(--ink);border:2px solid var(--gold);border-radius:20px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}.panel.dark{background:rgba(0,0,0,.33);color:#fff}.panel h2,.panel h3{margin:0 0 8px}.small{font-size:13px;line-height:1.45;color:var(--muted);font-weight:700}.dark .small{color:#f4dda3}.muted{opacity:.78}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:13px;padding:12px 14px;text-decoration:none;font:inherit;font-weight:1000;cursor:pointer;background:#2f7240;color:#fff;box-shadow:0 8px 17px rgba(0,0,0,.16);transition:transform .18s ease,filter .18s ease,opacity .18s ease}.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}.btn:active{transform:translateY(1px) scale(.98)}.btn:disabled{opacity:.48;cursor:not-allowed;transform:none}.btn.gold{background:var(--gold);color:var(--ink)}.btn.red{background:var(--red)}.btn.blue{background:var(--blue)}.btn.dark{background:#314b3b}.btn.pink{background:#c84162}.btn.green{background:#2f8152}.btn.wide{width:100%}.btn.smallbtn{font-size:12px;padding:8px 9px;border-radius:10px}
.game-link-card{display:block;text-decoration:none;min-height:205px;background:linear-gradient(150deg,#fffaf0,#eee0ba);border:2px solid var(--gold);border-radius:18px;padding:20px;color:var(--ink);box-shadow:0 12px 24px rgba(0,0,0,.18);transition:transform .2s ease}.game-link-card:hover{transform:translateY(-4px)}.game-link-card .icon{font-size:48px}.game-link-card h2{font-size:28px;margin:8px 0}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:7px 11px;background:#efe2bc;color:#684f17;font-size:12px;font-weight:1000}.status{min-height:20px;font-size:13px;font-weight:900;color:#775a1c}.status.error{color:#a31e33}.input{width:100%;border:1px solid #cfb467;border-radius:12px;background:#fffef9;padding:12px 13px;font:inherit;color:#17361f}.label{display:block;font-size:13px;font-weight:1000;margin-bottom:5px;color:#684f17}
.qrbox{display:grid;grid-template-columns:180px 1fr;gap:14px;align-items:center}.qrbox img{width:180px;height:180px;background:#fff;border-radius:15px;padding:7px;border:2px solid var(--gold)}.linkline{font-size:12px;word-break:break-all;background:#fff9e8;border:1px dashed #c8a55b;padding:9px;border-radius:10px;color:#5a4213}
.score-list,.player-list{display:grid;gap:7px}.score-row,.player-row{display:grid;grid-template-columns:38px 1fr auto;gap:9px;align-items:center;background:#fffdf6;border:1px solid #e3d0a0;border-radius:11px;padding:9px}.score-row .rank{font-weight:1000;color:#8b6d23}.score-row .points{font-weight:1000;font-size:18px}.player-row{grid-template-columns:1fr auto auto}.answered{color:#2e7b4c;font-weight:1000}.waiting{color:#9b6e18;font-weight:1000}.wrong{color:#aa3040;font-weight:1000}.right{color:#237947;font-weight:1000}
.phasebar{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}.phase{display:inline-flex;border-radius:999px;padding:7px 11px;background:#153c25;color:#fff4c8;font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.5px}.timer{font-size:22px;font-weight:1000;color:#9d303f}.progress{height:12px;border-radius:99px;overflow:hidden;background:#e1d2ad;border:1px solid #c9ac67}.progress i{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#be4c59,#e7c15f,#2e8150);transition:transform .4s linear}
.swipe-stage{position:relative;width:min(100%,470px);height:min(69vh,650px);min-height:430px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}.swipe-card{position:absolute;inset:0;border-radius:26px;overflow:hidden;border:3px solid var(--gold);background:#11251a;box-shadow:0 21px 38px rgba(0,0,0,.4);touch-action:none;cursor:grab;transform:translate3d(0,0,0) rotate(0deg);transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .25s ease}.swipe-card.dragging{transition:none;cursor:grabbing}.swipe-card img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}.swipe-card:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}.swipe-caption{position:absolute;z-index:3;left:18px;right:18px;bottom:17px;color:#fff}.swipe-caption b{font-size:25px}.swipe-caption small{display:block;margin-top:4px;font-weight:800;color:#ffe3a0}.swipe-stamp{position:absolute;z-index:5;top:26px;border:5px solid;border-radius:10px;padding:8px 11px;font-size:32px;font-weight:1000;letter-spacing:1px;opacity:0;transform:rotate(-12deg);text-shadow:0 2px 3px rgba(0,0,0,.25);background:rgba(255,255,255,.14)}.swipe-stamp.left{right:22px;color:#ff99aa;border-color:#ff99aa;transform:rotate(12deg)}.swipe-stamp.right{left:22px;color:#91f0b2;border-color:#91f0b2}.swipe-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;width:min(100%,560px);margin:0 auto}.choice{border-radius:18px;padding:15px 8px;border:0;color:#fff;font-size:18px;font-weight:1000;box-shadow:0 9px 17px rgba(0,0,0,.2);cursor:pointer}.choice.left{background:#bb4055}.choice.both{background:#946d18}.choice.right{background:#2f8050}.choice span{display:block;font-size:11px;opacity:.88;margin-top:4px}.choice:active{transform:scale(.97)}
.reveal{position:relative;width:min(100%,600px);margin:auto;border-radius:22px;overflow:hidden;border:3px solid var(--gold);background:#102319;box-shadow:var(--shadow)}.reveal img{display:block;width:100%;max-height:63vh;object-fit:cover}.reveal-label{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(transparent,rgba(0,0,0,.88));color:#fff;text-align:center;font-weight:1000;font-size:29px}.waitbox{text-align:center;padding:22px 10px}.waitbox .big{font-size:55px;display:block;margin-bottom:7px;animation:kkpulse 1.7s ease-in-out infinite}.center{text-align:center}.hero-petra{width:min(210px,43vw);filter:drop-shadow(0 17px 14px rgba(0,0,0,.35));animation:kkbob 2.8s ease-in-out infinite}.bigtitle{font-size:clamp(32px,6vw,66px);line-height:.95;font-weight:1000;color:#ffe4a2;text-shadow:0 5px 0 rgba(0,0,0,.23)}
.tv-wrap{position:relative;z-index:1;min-height:100vh;padding:18px;display:grid;grid-template-rows:auto 1fr;gap:14px}.tv-head{display:flex;align-items:center;justify-content:space-between;gap:15px;border:2px solid var(--gold);background:rgba(0,0,0,.35);border-radius:20px;padding:11px 16px}.tv-head h1{margin:0;color:#ffe3a0;font-size:clamp(24px,3vw,45px)}.tv-head p{margin:4px 0 0;font-weight:900}.tv-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:14px;min-height:0}.tv-stage{border:2px solid var(--gold);border-radius:22px;background:rgba(0,0,0,.34);min-height:0;padding:15px;display:flex;align-items:center;justify-content:center;overflow:hidden}.tv-side{display:grid;gap:13px;align-content:start}.tv-photo{position:relative;width:min(100%,820px);height:min(74vh,760px);border-radius:22px;overflow:hidden;border:4px solid var(--gold);box-shadow:0 20px 36px rgba(0,0,0,.4);background:#132c1e}.tv-photo img{display:block;width:100%;height:100%;object-fit:cover}.tv-answer{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.92));color:#fff;text-align:center;font-size:clamp(26px,4vw,60px);font-weight:1000}.tv-question{position:absolute;left:18px;top:16px;padding:10px 13px;background:rgba(0,0,0,.68);border:2px solid var(--gold);border-radius:13px;color:#ffe5a4;font-size:clamp(17px,2vw,28px);font-weight:1000}.tv-petra{width:115px;height:115px;object-fit:contain;filter:drop-shadow(0 11px 10px rgba(0,0,0,.34));animation:kkbob 2.8s ease-in-out infinite}.tv-side .panel{margin:0}.tv-side .score-row{padding:7px 9px}.confetti{pointer-events:none;position:fixed;inset:0;overflow:hidden;z-index:20}.confetti i{position:absolute;top:-30px;font-style:normal;font-size:24px;animation:fall 2.6s linear forwards}
@keyframes kkbob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes kkpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.8}}@keyframes fall{to{transform:translateY(110vh) rotate(520deg)}}
@media(max-width:820px){.tv-main{grid-template-columns:1fr}.tv-side{grid-template-columns:1fr 1fr}.tv-side .panel:last-child{grid-column:1/-1}.tv-photo{height:62vh}.brand{align-items:flex-start}.brand-actions{max-width:160px}.qrbox{grid-template-columns:130px 1fr}.qrbox img{width:130px;height:130px}}
@media(max-width:600px){.wrap{padding:9px}.brand{padding:10px;border-radius:17px}.brand img{width:57px;height:57px}.brand h1{font-size:23px}.brand p{font-size:11px}.brand-actions{display:none}.panel{padding:13px;border-radius:17px}.grid2,.grid3{grid-template-columns:1fr}.swipe-stage{height:61vh;min-height:390px}.swipe-caption b{font-size:20px}.choice{font-size:16px}.qrbox{display:block}.qrbox img{width:155px;height:155px;margin:0 auto 10px;display:block}.tv-wrap{padding:8px}.tv-main{display:block}.tv-side{display:none}.tv-stage{height:calc(100vh - 86px);padding:7px}.tv-photo{height:100%;max-height:none}.tv-head{padding:8px 10px}.tv-head p{font-size:11px}.tv-petra{width:64px;height:64px}}


/* v13: compacte en stabiele mobiele swipe-layout */
@supports(height:100dvh){
  .participant-page{min-height:100dvh}
}
@media(max-width:600px){
  .participant-page .wrap{padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .participant-page .brand{margin-bottom:8px}
  .participant-page .panel{margin-bottom:8px}
  .participant-page .swipe-stage{width:100%;height:clamp(300px,58dvh,570px);min-height:300px;margin-bottom:8px}
  .participant-page .swipe-buttons{width:100%;gap:8px;padding-bottom:max(2px,env(safe-area-inset-bottom))}
  .participant-page .choice{min-height:56px;padding:11px 6px;border-radius:15px;font-size:16px}
  .participant-page .swipe-card{border-radius:20px}
  .participant-page .swipe-caption{left:13px;right:13px;bottom:12px}
  .participant-page .swipe-caption b{font-size:18px}
  .participant-page .swipe-caption small{font-size:11px}
  .participant-page .swipe-stamp{top:16px;border-width:4px;padding:6px 8px;font-size:24px}
  .participant-page .reveal img{max-height:55dvh}
  .participant-page.play-mode{height:100vh;height:100dvh;overflow:hidden}
  .participant-page.play-mode .wrap{height:100vh;height:100dvh;width:100%;max-width:520px;padding-top:max(6px,env(safe-area-inset-top));display:flex;flex-direction:column}
  .participant-page.play-mode .brand{display:none}
  .participant-page.play-mode #app{height:100%;min-height:0;display:flex;flex-direction:column;gap:0}
  .participant-page.play-mode #app>.panel{flex:0 0 auto;padding:8px 10px;margin-bottom:6px;border-radius:14px}
  .participant-page.play-mode #app>.panel .phase{padding:5px 8px;font-size:10px}
  .participant-page.play-mode #app>.panel .timer{font-size:18px}
  .participant-page.play-mode #app>.panel .progress{height:9px;margin-top:6px!important}
  .participant-page.play-mode #app>.panel p.small{display:none}
  .participant-page.play-mode .swipe-stage{flex:1 1 auto;height:auto;min-height:0;max-height:none;margin-bottom:7px}
  .participant-page.play-mode .swipe-buttons{flex:0 0 auto}
}
@media(max-width:390px){
  .participant-page .brand img{width:49px;height:49px}
  .participant-page .brand h1{font-size:20px}
  .participant-page .brand p{margin-top:4px;font-size:10px}
  .participant-page.play-mode .choice{min-height:52px;font-size:15px}
  .participant-page.play-mode .choice span{font-size:10px}
}
@media(max-width:600px) and (orientation:landscape){
  .participant-page.play-mode .wrap{max-width:900px}
  .participant-page.play-mode #app{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,34vw);grid-template-rows:auto 1fr;gap:6px 8px}
  .participant-page.play-mode #app>.panel{grid-column:1/-1;margin:0}
  .participant-page.play-mode .swipe-stage{grid-column:1;grid-row:2;margin:0;width:100%;height:100%}
  .participant-page.play-mode .swipe-buttons{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr;justify-content:center;width:100%;padding:0}
  .participant-page.play-mode .choice{min-height:62px}
}