:root{--bg:#11282b;--panel:#075459;--green:#157600;--red:#e21c23;--orange:#f28c18;--pink:#f41486;--blue:#0d83f7;--purple:#a550ad;--text:#fff;--gap:1.1vh;--radius:18px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}button{font:inherit;color:inherit;border:0;cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}.game{height:100dvh;width:100vw;padding:var(--gap);display:grid;grid-template-columns:minmax(270px,36vw) minmax(420px,1fr) minmax(250px,24vw);grid-template-rows:minmax(0,1fr) clamp(108px,16vh,142px);gap:var(--gap)}.opponents{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(76px,1fr);gap:var(--gap);min-width:0}.opp{background:var(--panel);border-radius:var(--radius);padding:2vh 1.6vw;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.2vw;min-width:0}.opp h2{margin:0;font-size:clamp(28px,3.5vw,58px);font-weight:600;letter-spacing:1px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.opp strong{font-size:clamp(26px,3.2vw,54px);font-weight:700;font-variant-numeric:tabular-nums;justify-self:end}.opp.mine{box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}.opp.active h2{animation:blinkName 1.2s linear infinite}.opp.active strong{color:#9df27e}@keyframes blinkName{0%,44%,100%{opacity:1}55%,88%{opacity:.28}}.opp-cards{display:none}.center{display:grid;grid-template-rows:18vh 18vh minmax(0,1fr) 19vh;gap:var(--gap);min-width:0;min-height:0}.rako-title{background:#5fbf45;color:#2a1738;border-radius:20px;font-size:clamp(54px,7vw,104px);font-weight:500;letter-spacing:5px}.rako-title.ready{box-shadow:0 0 0 5px #fff inset;animation:rakoBlink .85s linear infinite}@keyframes rakoBlink{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55)}}.timer-panel{background:var(--pink);border-radius:20px;display:grid;grid-template-columns:minmax(0,1fr) clamp(90px,11vw,150px);align-items:center;gap:2vw;padding:0 clamp(16px,2.2vw,34px);width:100%;height:100%;text-align:left}.timer-panel .timer-label{font-size:clamp(25px,3.5vw,48px);letter-spacing:2px;justify-self:start;white-space:nowrap}.timer-panel strong{font-size:clamp(54px,7vw,100px);font-weight:500;justify-self:center;text-align:center;min-width:1.55em}.piles{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.pile{border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;overflow:hidden}.pile span{font-size:clamp(20px,2.3vw,34px);position:absolute;top:2.2vh}.pile strong{font-size:clamp(80px,10vw,150px);font-weight:600;line-height:1;position:absolute;top:52%;transform:translateY(-43%)}.pile em{display:none}.draw{background:var(--blue)}.discard{background:var(--purple)}.held-box{background:var(--green);border-radius:18px;display:flex;align-items:center;justify-content:space-around;padding:0 3vw}.held-box.empty{opacity:.55}.held-box span{font-size:clamp(24px,3vw,44px)}.held-box strong{font-size:clamp(58px,7.5vw,104px);font-weight:400}.message{display:none}.side{display:grid;grid-template-rows:42% 1fr;gap:var(--gap);min-width:0}.panel{background:var(--panel);border-radius:var(--radius);padding:2vh 2vw;overflow:hidden}.panel h2{margin:0 0 1.5vh;text-align:center;font-size:clamp(24px,3vw,42px);font-weight:500;letter-spacing:2px}.log #logList{height:calc(100% - 5vh);overflow:hidden;font-size:clamp(12px,1.25vw,18px);line-height:1.45}.log-row{border-bottom:1px solid rgba(255,255,255,.12);padding:.4vh 0}.score{display:flex;flex-direction:column}.score-list{flex:1;min-height:0;overflow:hidden}.score-list{font-size:clamp(20px,2.1vw,34px);line-height:1.55}.score-row{display:grid;grid-template-columns:1fr auto;gap:1vw}.score-row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-row span:last-child{font-variant-numeric:tabular-nums}.score-row.active{color:#9df27e}.score-buttons{display:grid;grid-template-columns:1fr;gap:.8vh;margin-top:1vh}.score.admin-mode .score-buttons{grid-template-columns:1fr 1fr}#adminToggle,.seat-switch{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.25);border-radius:14px;padding:1vh;min-width:0}.seat-switch{font-size:clamp(11px,1.05vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.my-area{grid-column:1/4;background:var(--panel);border-radius:var(--radius);padding:clamp(8px,1.1vh,14px) clamp(10px,1vw,16px);display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,17vw,215px);gap:clamp(10px,1.2vw,18px);align-items:stretch;min-height:0;overflow:hidden}.my-rack{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.7vw,12px);height:100%;min-width:0;min-height:0;align-items:stretch;overflow:hidden}.card{border-radius:10px;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:clamp(22px,3.7vw,50px);line-height:1;font-weight:500;min-width:0;min-height:0;height:100%;max-height:100%;overflow:hidden}.card.good{background:var(--green)}.card.bad{background:var(--red)}.card.orange{background:var(--orange)}.my-stats{font-size:clamp(14px,1.45vw,21px);line-height:1.35;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:150px;max-width:215px;overflow:hidden}.stat-row{display:grid;grid-template-columns:1fr minmax(44px,auto);gap:.8vw;align-items:baseline}.stat-row span{text-align:left}.stat-row strong{text-align:right;font-variant-numeric:tabular-nums}.stat-name{font-size:clamp(16px,1.65vw,24px);margin-bottom:.35vh;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-score{margin-top:.45vh;padding-top:.45vh;border-top:1px solid rgba(255,255,255,.22)}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.52);display:flex;align-items:center;justify-content:center;z-index:10}.hidden{display:none}.dialog{width:min(720px,92vw);background:#f4efe4;color:#222;border-radius:22px;padding:28px;box-shadow:0 20px 80px rgba(0,0,0,.4)}.dialog h1{margin:0 0 20px}.seat-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.seat-buttons button,.admin-actions button,#saveSettingsBtn,#newRoundBtn{background:#0b555b;color:#fff;border-radius:14px;padding:16px;font-weight:700}.ghost{background:#ddd!important;color:#222!important}.danger{background:#c51f28!important}.admin label{display:block;font-weight:700;margin:14px 0}.admin input,.admin select{width:100%;font-size:22px;padding:10px;border-radius:10px;border:1px solid #bbb}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}@media(max-height:720px){:root{--gap:.7vh;--radius:20px}.game{grid-template-rows:minmax(0,1fr) clamp(104px,15.5vh,132px)}.center{grid-template-rows:15vh 16vh minmax(0,1fr) 15.5vh}.message{display:none}.panel{padding:1.4vh 1.4vw}.opp{padding:1.5vh 1.2vw}.opp h2{font-size:clamp(22px,3vw,46px)}.opp strong{font-size:clamp(21px,2.8vw,42px)}}

@media (orientation:landscape) and (max-height:820px){
  .game{padding:max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));grid-template-rows:minmax(0,1fr) clamp(102px,15vh,126px)}
  .my-area{border-radius:18px;grid-template-columns:minmax(0,1fr) clamp(145px,16vw,190px);gap:10px;padding:8px 10px}
  .my-rack{gap:5px}
  .card{font-size:clamp(22px,3.2vw,42px);border-radius:8px}
  .my-stats{font-size:clamp(13px,1.35vw,18px);min-width:145px;max-width:190px}
  .stat-name{font-size:clamp(15px,1.5vw,20px)}
}
@media (orientation:landscape) and (max-height:650px){
  .game{grid-template-rows:minmax(0,1fr) 96px}
  .my-area{grid-template-columns:minmax(0,1fr) 138px;padding:7px 9px}
  .card{font-size:clamp(20px,3vw,36px)}
  .my-stats{font-size:13px;min-width:138px;max-width:138px}
}

/* v3.2: kleine layoutcorrecties zonder basis-layout te veranderen */
.score-buttons{margin-top:auto;display:grid;grid-template-columns:1fr;gap:.7vw;align-items:stretch}
.score.admin-mode .score-buttons{grid-template-columns:1fr 1fr}
.score-buttons .seat-switch,.score-buttons #adminToggle{margin-top:0;width:100%;min-width:0;font-size:clamp(10px,1.05vw,15px);padding:.9vh .55vw;white-space:normal;line-height:1.15}
.opp h2{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(18px,2.25vw,38px)}
.center{grid-template-rows:18vh 18vh minmax(0,1fr) 19vh;}
.rako-title.ready{animation:rakoReadyBlink .85s ease-in-out infinite;box-shadow:0 0 0 5px #fff inset,0 0 24px rgba(255,255,255,.8)}
@keyframes rakoReadyBlink{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.45);transform:scale(1.015)}}
@media(max-height:720px){.center{grid-template-rows:15vh 16vh minmax(0,1fr) 15.5vh}.score-buttons .seat-switch,.score-buttons #adminToggle{font-size:clamp(9px,1vw,13px);padding:.7vh .4vw}.opp h2{font-size:clamp(16px,1.9vw,30px)}}
@media (orientation:landscape) and (max-height:820px){.opp h2{font-size:clamp(14px,1.55vw,25px);letter-spacing:.5px}.opp{padding:1.25vh .9vw}.opp-cards{gap:.65vh}.held-box{min-height:0}}
@media (orientation:landscape) and (max-height:650px){.score-buttons{gap:5px}.score-buttons .seat-switch,.score-buttons #adminToggle{font-size:11px;padding:6px 4px}.opp h2{font-size:clamp(13px,1.5vw,22px)}}


/* v3.4: geen extra kaders; handkaarten lichten op bij beurt; alleen gekozen trekkaart knippert */
.my-rack.my-turn-active .card{filter:brightness(1.16)}
.held-box.needs-swap{animation:heldNeedsSwap 1s ease-in-out infinite}
@keyframes heldNeedsSwap{0%,100%{filter:brightness(1)}50%{filter:brightness(1.42)}}


/* v3.5: tijdens beurt lichten beide stapels en alle handkaarten zichtbaar op, zonder rand/kader */
.pile.turn-choice-active{filter:brightness(1.28) saturate(1.08)}
.my-rack.my-turn-active .card,
.my-rack.my-turn-active .card:disabled{opacity:1;filter:brightness(1.32) saturate(1.12)}
.held-box.needs-swap{animation:heldNeedsSwap 1s ease-in-out infinite}

/* v3.7: RAKO-popup, logboek 7 regels, iPad web-app veilige stapelteksten */
.rako-dialog{text-align:center;width:min(620px,88vw);padding:clamp(24px,4vw,46px)}
.rako-dialog h1{font-size:clamp(58px,8vw,108px);line-height:.95;margin:0 0 18px;color:#157600;letter-spacing:4px}
.rako-winner{font-size:clamp(24px,3.6vw,44px);font-weight:700;margin:10px 0;color:#222}
.rako-points{font-size:clamp(34px,5vw,70px);font-weight:800;margin:12px 0 24px;color:#c51f28}
.next-round{background:#0b555b;color:#fff;border-radius:16px;padding:16px 28px;font-weight:800;font-size:clamp(18px,2.3vw,28px)}

.rako-dialog{
  width:min(1120px,94vw);
  max-height:92vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.rako-dialog h1{
  font-size:clamp(34px,4.6vw,68px);
  margin-bottom:8px;
}
.rako-winner{
  margin:4px 0;
}
.rako-points{
  margin:4px 0 12px;
  font-size:clamp(24px,3.6vw,48px);
}
.rako-results{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:10px;
  min-height:0;
  overflow:hidden;
  margin:8px 0 14px;
}
.rako-result{
  background:#fff;
  border:3px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:10px;
  color:#222;
  min-width:0;
}
.rako-result.winner{
  border-color:#157600;
  box-shadow:0 0 0 4px rgba(21,118,0,.18);
}
.rako-result-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.rako-result-head strong{
  text-align:left;
  font-size:clamp(18px,2vw,28px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rako-result-head em{
  font-style:normal;
  font-weight:800;
  color:#157600;
}
.mini-rack{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:4px;
  align-items:center;
}
.mini-card{
  aspect-ratio:1/1.15;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  color:#fff;
  font-size:clamp(13px,1.45vw,21px);
  font-weight:800;
  line-height:1;
}
.mini-card.good{background:var(--green)}
.mini-card.bad{background:var(--red)}
.mini-card.orange{background:var(--orange)}
.mini-gap-row{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:4px;
  margin:5px calc(5% + 2px) 0;
}
.mini-gap{
  min-width:0;
  min-height:18px;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(9px,.9vw,14px);
  line-height:1;
  font-weight:900;
  color:#222;
  background:#e9e9e9;
}
.mini-gap.zero{
  color:#777;
  background:#f1f1f1;
}
.mini-gap.has-penalty{
  color:#8a3800;
  background:#ffd9a8;
}
.mini-gap.break{
  color:#fff;
  background:#c51f28;
}
.score-build{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 8px;
  margin-top:8px;
  text-align:left;
  font-size:clamp(12px,1.15vw,17px);
}
.score-build strong{
  grid-column:1/3;
  padding-top:4px;
  border-top:1px solid #ddd;
  font-size:1.15em;
  text-align:right;
}
.rako-wait{
  font-size:clamp(16px,2vw,26px);
  font-weight:800;
  color:#555;
}
.rako-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.rako-actions .next-round{
  width:100%;
}
.pause-next{
  background:#f41486;
}
.access-dialog{
  width:min(420px,90vw);
}
.access-dialog label{
  display:block;
  font-weight:900;
  margin:0 0 14px;
}
.access-dialog input{
  width:100%;
  font-size:32px;
  padding:12px;
  border-radius:12px;
  border:1px solid #bbb;
  text-align:center;
}
.access-dialog button{
  width:100%;
  background:#0b555b;
  color:#fff;
  border-radius:14px;
  padding:16px;
  font-weight:900;
  font-size:22px;
}
.table-dialog{
  width:min(620px,92vw);
}
.table-dialog h1{
  text-align:center;
  font-size:clamp(34px,5vw,56px);
}
.table-buttons{
  display:grid;
  gap:14px;
}
.table-buttons button{
  width:100%;
  min-height:88px;
  background:#0b555b;
  color:#fff;
  border-radius:14px;
  padding:16px 18px;
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.table-buttons strong{
  font-size:clamp(25px,3.5vw,38px);
  line-height:1.05;
}
.table-buttons span{
  margin-top:6px;
  font-size:clamp(15px,2vw,20px);
  color:#d9f5ee;
}
.home-button{
  width:100%;
  margin-top:18px;
  background:#ddd;
  color:#222;
  border-radius:14px;
  padding:16px;
  font-weight:900;
  font-size:clamp(18px,2.4vw,24px);
}

@media (display-mode:standalone), (orientation:landscape) and (max-height:760px){
  .pile span{top:clamp(5px,1vh,10px);font-size:clamp(17px,2vw,28px);line-height:1;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.28)}
  .pile strong{top:60%;font-size:clamp(64px,8.5vw,124px)}
}
@media (orientation:landscape) and (max-height:620px){
  .pile span{font-size:clamp(15px,1.7vw,23px);top:4px}
  .pile strong{top:61%;font-size:clamp(56px,7.6vw,104px)}
}


/* v3.8: logboek nieuwste boven; web-app stapeltekst-fix teruggedraaid; denktijd-label naar links */
.pile span{font-size:clamp(20px,2.3vw,34px);position:absolute;top:2.2vh;line-height:normal;z-index:auto;text-shadow:none}
.pile strong{font-size:clamp(80px,10vw,150px);font-weight:600;line-height:1;position:absolute;top:52%;transform:translateY(-43%)}
.timer-panel .timer-label{justify-self:start}
@media (orientation:landscape) and (max-height:620px){
  .pile span{font-size:clamp(20px,2.3vw,34px);top:2.2vh}
  .pile strong{font-size:clamp(80px,10vw,150px);top:52%;transform:translateY(-43%)}
}

/* v4.1: RAKO feller geel; direct afleggen alleen na pakken van TREKSTAPEL */
.rako-title{color:#ffff00;text-shadow:0 2px 4px rgba(0,0,0,.35)}
.held-box{display:grid;grid-template-columns:minmax(0,1fr) clamp(90px,11vw,150px);align-items:center;gap:2vw;padding:0 clamp(16px,2.2vw,34px);justify-content:initial}
.held-box span{justify-self:start;white-space:nowrap}
.held-box strong{justify-self:center;text-align:center;min-width:1.55em}
.held-box.can-discard-held{cursor:pointer}
.rako-points{line-height:1.08}
.rako-penalty{font-size:clamp(20px,3vw,42px);color:#222;margin-top:10px;font-weight:800;letter-spacing:1px}
.check-row{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:12px;font-weight:700}
.check-row input{width:auto!important;transform:scale(1.4)}

/* v4.2: definitieve correctie RAKO-kleur en direct afleggen-regel */
.rako-title{
  color:#ffea00 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.35), 0 0 10px rgba(255,234,0,.85) !important;
}
.held-box.can-discard-held{
  cursor:pointer;
  filter:brightness(1.18) saturate(1.12);
}


/* v4.3 HARD FIXES - zichtbaar en cache-bust via index.html */
#rakoBtn.rako-title, button#rakoBtn {
  color:#fff200 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.45), 0 0 12px rgba(255,242,0,1), 0 0 22px rgba(255,242,0,.7) !important;
}
#heldBox[data-source="discard"], #heldBox[data-source=""] {
  cursor:default !important;
}
#heldBox[data-source="draw"].can-discard-held {
  cursor:pointer !important;
}


/* v4.4: echte correctie na controle van broncode */
#rakoBtn.rako-title,
#rakoBtn.rako-title:disabled,
#rakoBtn.rako-title.ready{
  color:#fff700 !important;
  opacity:1 !important;
  text-shadow:0 2px 3px rgba(0,0,0,.55),0 0 14px rgba(255,247,0,1),0 0 28px rgba(255,247,0,.85) !important;
}
#rakoBtn.rako-title.ready{
  animation:rakoTextBlink .7s steps(1,end) infinite !important;
}
@keyframes rakoTextBlink{
  0%,49%{
    color:#fff700;
    text-shadow:0 2px 3px rgba(0,0,0,.55),0 0 14px rgba(255,247,0,1),0 0 28px rgba(255,247,0,.85);
  }
  50%,100%{
    color:transparent;
    text-shadow:none;
  }
}

/* v4.7: geen tegenstander-rekken meer; alleen naam, beurt en totaalscore */
.opponents{
  display:grid;
  grid-template-columns:1fr;
  grid-auto-rows:minmax(76px,1fr);
}
.opp{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1.2vw;
}
.opp h2{
  margin:0 !important;
  font-size:clamp(28px,3.5vw,58px) !important;
  font-weight:600;
  text-align:left;
}
.opp strong{
  display:block;
  font-size:clamp(26px,3.2vw,54px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  justify-self:end;
}
.opp-score{
  justify-self:end;
  text-align:right;
  min-width:max-content;
}
.opp-score strong{
  display:block;
}
.opp-score span{
  display:block;
  margin-top:.2vh;
  font-size:clamp(11px,1.05vw,17px);
  line-height:1;
  font-weight:800;
  color:#fff700;
  white-space:nowrap;
}
.opp-cards,
.opp-card{
  display:none !important;
}
.opp.active h2{
  animation:blinkName 1.2s linear infinite;
}
.opp.active strong{
  color:#9df27e;
}
.score-list{
  font-size:clamp(20px,2.1vw,34px);
  line-height:1.55;
}
.score-row span:first-child{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.score-row span:last-child{
  font-variant-numeric:tabular-nums;
}
@media(max-height:720px){
  .opp h2{font-size:clamp(22px,3vw,46px) !important}
  .opp strong{font-size:clamp(21px,2.8vw,42px)}
}
@media (orientation:landscape) and (max-height:820px){
  .opp h2{font-size:clamp(22px,2.8vw,42px) !important}
}
@media (orientation:landscape) and (max-height:650px){
  .opp h2{font-size:clamp(18px,2.4vw,34px) !important}
  .opp strong{font-size:clamp(18px,2.3vw,32px)}
}

/* v4.8: RAKO naar linksboven; middenvakken hoger voor iPad-schermen */
.game{
  grid-template-columns:minmax(270px,36vw) minmax(420px,1fr) minmax(250px,24vw);
}
#rakoBtn.rako-title{
  grid-column:1;
  grid-row:1;
  align-self:start;
  justify-self:stretch;
  width:100%;
  height:clamp(84px,15.5vh,132px);
  min-height:0;
  border-radius:var(--radius);
  font-size:clamp(46px,5.3vw,82px);
  z-index:1;
}
.opponents{
  grid-column:1;
  grid-row:1;
  padding-top:calc(clamp(84px,15.5vh,132px) + var(--gap));
}
.center{
  grid-column:2;
  grid-row:1;
  grid-template-rows:minmax(108px,1fr) minmax(176px,1.45fr) minmax(108px,1fr) !important;
}
.side{
  grid-column:3;
  grid-row:1;
}
.my-area{
  grid-column:1/4;
  grid-row:2;
}
.piles{
  min-height:0;
}
.pile span{
  top:clamp(8px,1.5vh,18px);
  line-height:1;
}
.pile strong{
  top:58%;
  transform:translateY(-43%);
}
@media(max-height:720px){
  #rakoBtn.rako-title{
    height:clamp(72px,14vh,104px);
    font-size:clamp(38px,4.6vw,66px);
  }
  .opponents{
    padding-top:calc(clamp(72px,14vh,104px) + var(--gap));
  }
  .center{
    grid-template-rows:minmax(88px,1fr) minmax(150px,1.5fr) minmax(88px,1fr) !important;
  }
}
@media (orientation:landscape) and (max-height:650px){
  #rakoBtn.rako-title{
    height:72px;
    font-size:clamp(34px,4.1vw,58px);
  }
  .opponents{
    padding-top:calc(72px + var(--gap));
  }
  .center{
    grid-template-rows:minmax(78px,1fr) minmax(132px,1.5fr) minmax(78px,1fr) !important;
  }
  .pile span{
    top:7px;
    font-size:clamp(18px,2vw,28px);
  }
  .pile strong{
    font-size:clamp(72px,9vw,132px);
  }
}

/* v4.9: eigen stats naar links; kaarten onderaan breder en beter leesbaar */
.opp{
  grid-template-columns:1fr;
  align-content:center;
  padding-top:clamp(12px,1.6vh,24px);
  padding-bottom:clamp(12px,1.6vh,24px);
}
.opp-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1.2vw;
  min-width:0;
  align-self:center;
}
.opp-main > strong{
  display:block;
  font-size:clamp(26px,3.2vw,54px);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  justify-self:end;
}
.opp > strong{
  display:none;
}
.opp-own-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55vh .55vw;
  margin-top:1.4vh;
  padding-top:1.2vh;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:clamp(12px,1.15vw,18px);
  line-height:1.1;
}
.stat-cell,
.stat-formula{
  min-width:0;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
}
.stat-cell{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:start;
  gap:.45vw;
  padding:.48vh .55vw;
}
.stat-cell em,
.stat-formula em{
  font-style:normal;
  font-weight:900;
  color:#fff;
  white-space:nowrap;
}
.stat-cell strong,
.stat-formula strong{
  font-size:1.18em;
  font-variant-numeric:tabular-nums;
  color:#fff700;
}
.stat-formula{
  grid-column:1/4;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.45fr) auto;
  align-items:center;
  gap:.5vw;
  padding:.5vh .65vw;
}
.stat-cell.wide{
  grid-column:1/4;
}
.stat-formula small{
  font-size:.92em;
  font-weight:800;
  color:rgba(255,255,255,.86);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.my-area{
  grid-template-columns:1fr !important;
}
.my-stats{
  display:none !important;
}
.my-rack{
  gap:clamp(8px,1.05vw,16px) !important;
  padding-inline:clamp(2px,.25vw,4px);
}
.card{
  font-size:clamp(36px,5.25vw,80px);
  font-weight:800;
}
@media(max-height:720px){
  .opp-own-stats{
    font-size:clamp(13px,1.45vw,20px);
    gap:.35vh .65vw;
    margin-top:.8vh;
    padding-top:.8vh;
  }
  .card{
    font-size:clamp(32px,4.65vw,68px);
  }
}
@media (orientation:landscape) and (max-height:650px){
  .opp-own-stats{
    font-size:clamp(12px,1.35vw,18px);
  }
  .card{
    font-size:clamp(29px,4.25vw,60px);
  }
}

/* v4.14: duidelijk eigen speler links en visuele tijdbalk */
.opp.mine{
  background:#0d6f65;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 0 20px rgba(0,0,0,.2);
  align-content:start;
  row-gap:clamp(5px,.7vh,9px);
  padding-top:clamp(18px,2.2vh,30px);
  padding-bottom:clamp(18px,2.2vh,30px);
}
.opp.mine .opp-main h2::before{
  content:none;
  display:none;
}
.opp.ai-player{
  background:#0a4a50;
}
.opp h2 small{
  display:inline-block;
  margin-left:.55vw;
  font-size:.36em;
  font-weight:800;
  vertical-align:middle;
  color:#fff700;
}
.timer-panel{
  position:relative;
  overflow:hidden;
}
.timer-panel > span:not(.timer-bar),
.timer-panel > strong{
  position:relative;
  z-index:1;
}
.timer-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(10px,1.55vh,18px);
  background:rgba(255,255,255,.82);
  transform:scaleX(var(--timer-progress,0));
  transform-origin:left center;
  transition:transform .18s linear,background-color .18s linear;
  z-index:0;
}
.timer-panel.timer-low .timer-bar{
  background:#fff700;
  animation:timerBarBlink .65s ease-in-out infinite;
}
@keyframes timerBarBlink{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

/* v4.15: rechterkolom als beurt + rondewinnaars */
.side{
  grid-template-rows:32% 1fr;
}
.turn-panel,
.history-panel{
  display:flex;
  flex-direction:column;
}
.turn-panel #logList{
  flex:1;
  min-height:0;
  display:flex;
}
.turn-panel h2,
.history-panel h2{
  font-size:clamp(18px,2.15vw,34px);
  letter-spacing:1px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.turn-card{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:.75vh;
}
.turn-card span{
  font-size:clamp(16px,1.8vw,28px);
  letter-spacing:1.5px;
  color:#fff700;
  font-weight:800;
}
.turn-card strong{
  max-width:100%;
  font-size:clamp(32px,3.8vw,60px);
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.turn-card em{
  font-size:clamp(16px,1.65vw,26px);
  font-style:normal;
  opacity:.9;
}
.winner-list{
  flex:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:.8vh;
}
.winner-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:.15vh .8vw;
  padding:.65vh 0;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.winner-row span{
  font-size:clamp(12px,1.15vw,18px);
  opacity:.78;
}
.winner-row strong{
  grid-column:1;
  font-size:clamp(18px,1.9vw,30px);
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.winner-row em{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font-size:clamp(14px,1.35vw,22px);
  font-style:normal;
  font-weight:700;
  color:#9df27e;
  white-space:nowrap;
}
.winner-row.match-won em{
  color:#fff700;
}
.winner-empty{
  margin:auto;
  text-align:center;
  font-size:clamp(18px,1.8vw,28px);
  opacity:.7;
}
.history-panel.admin-mode .score-buttons{
  grid-template-columns:1fr 1fr;
}

/* v4.19: beheerkeuze Mens/AI */
.name-fields{
  grid-template-columns:1fr;
}
.name-player-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(92px,28%);
  gap:10px;
}
.name-player-row input,
.name-player-row select{
  min-width:0;
}
.name-player-row select:disabled{
  opacity:.65;
}
.seat-buttons button:disabled{
  opacity:.5;
}

/* v4.52: beheerpagina in tabs zodat iPad-hoogte niet buiten beeld valt */
.dialog.admin{
  width:min(760px,94vw);
  max-height:min(86vh,640px);
  padding:clamp(16px,2.4vh,24px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.admin-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  margin-bottom:clamp(10px,1.6vh,16px);
}
.dialog.admin h1{
  margin:0;
  font-size:clamp(26px,3.2vh,38px);
  line-height:1;
}
.admin-close{
  background:#ddd;
  color:#222;
  border-radius:10px;
  padding:8px 12px;
  font-weight:900;
}
.admin-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:clamp(10px,1.5vh,16px);
}
.admin-tab{
  background:#d9d1c2;
  color:#222;
  border-radius:10px;
  padding:clamp(9px,1.4vh,13px) 8px;
  font-weight:900;
  font-size:clamp(15px,1.8vh,20px);
}
.admin-tab.active{
  background:#0b555b;
  color:#fff;
}
.admin-tab-panel{
  display:none;
  min-height:0;
  overflow:auto;
  padding-right:4px;
}
.admin-tab-panel.active{
  display:block;
}
.admin label{
  margin:clamp(9px,1.25vh,13px) 0;
}
.admin input,
.admin select{
  font-size:clamp(18px,2.1vh,22px);
  padding:clamp(8px,1.2vh,10px);
}
.admin-actions{
  margin-top:0;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.admin-actions button,
#saveSettingsBtn,
#newRoundBtn{
  padding:clamp(12px,1.8vh,16px) 10px;
  min-height:0;
}
@media(max-height:620px){
  .dialog.admin{
    max-height:92vh;
    padding:12px;
  }
  .admin-head{
    margin-bottom:8px;
  }
  .dialog.admin h1{
    font-size:24px;
  }
  .admin-tabs{
    gap:6px;
    margin-bottom:8px;
  }
  .admin-tab{
    padding:8px 6px;
    font-size:15px;
  }
  .admin label{
    margin:8px 0;
  }
  .admin-actions{
    gap:8px;
  }
  .admin-actions button{
    padding:10px 8px;
    font-size:15px;
  }
}

/* v4.39: rechterkolom herbouwd; RAKO-knop naar rechts; links meer ruimte voor spelers */
#rakoBtn.rako-title{
  grid-column:auto;
  grid-row:auto;
  align-self:stretch;
  justify-self:stretch;
  width:100%;
  height:auto;
  min-height:0;
  border-radius:var(--radius);
  font-size:clamp(36px,4.3vw,72px);
  letter-spacing:3px;
  z-index:auto;
}
.side{
  grid-template-rows:repeat(3,minmax(72px,105px)) minmax(0,1fr) minmax(54px,72px);
}
.opponents{
  padding-top:0;
}
.turn-panel{
  padding:clamp(12px,1.6vh,22px) clamp(12px,1.6vw,22px);
}
.turn-panel h2{
  margin:0;
  font-size:clamp(16px,1.55vw,25px);
  line-height:1;
  letter-spacing:1px;
  color:#fff700;
}
.turn-panel #logList{
  flex:1;
  min-height:0;
  display:flex;
}
.turn-card{
  gap:0;
}
.turn-card strong{
  font-size:clamp(30px,3.4vw,56px);
}
.turn-card span,
.turn-card em{
  display:none;
}
.pause-side{
  background:var(--pink);
  border-radius:var(--radius);
  font-size:clamp(36px,4.3vw,72px);
  font-weight:900;
  letter-spacing:2px;
  color:#fff;
  min-width:0;
  min-height:0;
}
.pause-side.paused{
  animation:pauseTextBlink .7s steps(1,end) infinite;
}
@keyframes pauseTextBlink{
  0%,49%{color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.45),0 0 12px rgba(255,255,255,.9)}
  50%,100%{color:transparent; text-shadow:none}
}
.side-rako{
  min-height:0;
}
.history-panel{
  min-height:0;
}
.side-actions{
  padding:clamp(8px,1vh,12px);
  min-height:0;
  display:flex;
}
.side-actions .score-buttons{
  margin:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,.9vw,12px);
}
.side-actions .score-buttons .seat-switch,
.side-actions .score-buttons #adminToggle{
  min-height:0;
  padding:.7vh .5vw;
}
.history-panel h2{
  margin-bottom:clamp(6px,1vh,12px);
  font-size:clamp(14px,1.45vw,23px);
  letter-spacing:.4px;
}
.winner-list{
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
}
.winner-row{
  flex:0 0 auto;
}
.winner-row.current-round{
  color:#fff700;
  border-bottom-color:rgba(255,247,0,.45);
}
.winner-row.current-round strong{
  font-size:clamp(17px,1.8vw,28px);
}
.winner-row.current-round em{
  display:none;
}

@media(max-height:720px){
  .side{
    grid-template-rows:repeat(3,minmax(60px,86px)) minmax(0,1fr) minmax(48px,62px);
  }
  #rakoBtn.rako-title{
    font-size:clamp(30px,3.7vw,58px);
  }
  .pause-side{
    font-size:clamp(30px,3.7vw,58px);
  }
}
@media (orientation:landscape) and (max-height:650px){
  .side{
    grid-template-rows:repeat(3,56px) minmax(0,1fr) 48px;
  }
  .turn-panel{
    padding:9px 10px;
  }
  .turn-panel h2{
    font-size:clamp(13px,1.35vw,20px);
  }
  .turn-card strong{
    font-size:clamp(23px,2.9vw,42px);
  }
}

/* v4.44: duidelijkere woorden voor oudere spelers */
.timer-panel .timer-label{
  font-size:clamp(36px,4.3vw,72px);
  font-weight:900;
  letter-spacing:2px;
}
.opp-score span{
  white-space:normal;
  line-height:1.08;
  max-width:7.8em;
  margin-top:0;
}
.opp-own-stats{
  font-size:clamp(12px,1.15vw,18px);
  gap:.45vh .55vw;
  margin-top:.45vh;
  padding-top:.9vh;
  padding-bottom:.65vh;
}
@media(max-height:720px){
  .timer-panel .timer-label{
    font-size:clamp(30px,3.7vw,58px);
  }
  .opp-own-stats{
    font-size:clamp(10px,1.05vw,15px);
  }
}

/* v4.50: lage browserhoogtes veilig houden; scoretabel mag nooit uit het spelersvak lopen */
@media(min-width:1300px) and (max-height:820px){
  .opp.mine{
    padding-top:12px;
    padding-bottom:14px;
    row-gap:4px;
  }
  .opp.mine .opp-main h2{
    font-size:clamp(32px,5vh,48px) !important;
    line-height:.96;
  }
  .opp.mine .opp-score strong{
    font-size:clamp(34px,5.3vh,50px);
    line-height:.92;
  }
  .opp-score span{
    font-size:clamp(10px,1.35vh,13px);
    line-height:1.02;
  }
  .opp-own-stats{
    margin-top:2px;
    padding-top:5px;
    padding-bottom:4px;
    gap:3px 5px;
    font-size:clamp(10px,1.32vh,13px);
    line-height:1;
  }
  .stat-cell{
    padding:3px 6px;
    border-radius:6px;
  }
  .stat-formula{
    padding:3px 6px;
    border-radius:6px;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr) auto;
  }
  .stat-formula small{
    font-size:.86em;
  }
}
@media(max-height:620px){
  .opp.mine{
    padding-top:10px;
    padding-bottom:12px;
    row-gap:4px;
  }
  .opp.mine .opp-main h2{
    font-size:clamp(26px,4.2vh,42px) !important;
    line-height:.95;
  }
  .opp.mine .opp-score strong{
    font-size:clamp(28px,5vh,44px);
    line-height:.9;
  }
  .opp-score span{
    font-size:10px;
    line-height:1.02;
  }
  .opp-own-stats{
    margin-top:2px;
    padding-top:5px;
    padding-bottom:3px;
    gap:3px 5px;
    font-size:10px;
    line-height:1;
  }
  .stat-cell{
    padding:3px 6px;
    border-radius:6px;
  }
  .stat-formula{
    padding:3px 6px;
    border-radius:6px;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr) auto;
  }
  .stat-formula small{
    font-size:.86em;
  }
}
@media(max-height:540px){
  .opp.mine{
    padding-top:7px;
    padding-bottom:8px;
    row-gap:2px;
  }
  .opp.mine .opp-main h2{
    font-size:28px !important;
  }
  .opp.mine .opp-score strong{
    font-size:30px;
  }
  .opp-score span{
    font-size:9px;
  }
  .opp-own-stats{
    font-size:8.5px;
    gap:2px 4px;
    padding-top:3px;
    padding-bottom:2px;
  }
  .stat-cell,
  .stat-formula{
    padding:1px 4px;
    border-radius:5px;
  }
  .stat-formula small{
    font-size:.82em;
  }
}