/* =========================================
   BASIS — KLEUREN & THEMA
   ========================================= */

:root{
  --bg:#FDFDFD;
  --bg-donker:#E4E4E2;
  --bg-lichter:#C7C7C7;
  --text:#000000;
  --success-bg:#e6f4ea;
  --success-text:#1b5e20;
  --success-border:#2e7d32;

  --groen:#1C00CF;
  --geel:#836C28;
  --donkerblauw:#286C83;
  --lichtblauw:#FF252E;
  --rood:#C41A16;
  --oranje:#AA0D91;
  --paars:#4E1A7F;
  --grijs:#007400;

  --tip:rgba(0,0,0,0);
  --terminal-kleur:#0e9300;

  --radius:14px;
  --shadow:0 6px 16px rgba(0,0,0,.12);

  color-scheme: light dark;
}

/* Automatisch dark-mode volgen */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg:#262628;
    --bg-donker:#1b1b1d;
    --bg-lichter:#585858;
    --text:#dddddd;
    --success-bg:#1f2b21;
    --success-text:#b9f6ca;
    --success-border:#4caf50;

    --groen:#afe4af;
    --geel:#fcfdc6;
    --donkerblauw:#4c8cfc;
    --lichtblauw:#72cefd;
    --rood:#ef7587;
    --oranje:#e9be6f;
    --paars:#b44cd8;
    --grijs:#929da3;

    --terminal-kleur:#2afa15;
  }
}

/* Handmatige override (optioneel later via JS) */
html[data-theme="light"]{ }
html[data-theme="dark"]{
  --bg:#262628;
  --bg-donker:#1b1b1d;
  --bg-lichter:#585858;
  --text:#dddddd;
}


/* =========================================
   RESET & TYPOGRAFIE
   ========================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

h1,h2,h3,h4{
  margin:0 0 .6rem;
}

p{
  margin:.4rem 0 1rem;
}


/* =========================================
   LAYOUT / CONTAINER
   ========================================= */

.container{
  max-width:900px;
  margin:0 auto;
  padding:10px;
}

.page{
  padding:12px;
  max-width:720px;
  margin:0 auto;
  width:100%;
}

.page-narrow{
  max-width:720px;
  margin:0 auto;
  width:100%;
}

.page-header{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  background:var(--bg-donker);
  border:1px solid var(--bg-lichter);
  border-radius:var(--radius);
  margin-bottom:12px;
}

.page-header-super{
  background:rgba(196, 26, 22, 0.12);
  border-color:var(--rood);
}

.page-title{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.page-title h1{
  margin:0;
  font-size:1.3rem;
}

.page-user{
  font-size:.95rem;
  opacity:.8;
}

.page-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.icon-nav{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  width:100%;
}

.icon-nav-guest{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.icon-nav-row{
  display:flex;
  gap:8px;
  width:100%;
}

.nav-right{
  margin-left:auto;
}

.icon-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 8px;
  border-radius:14px;
  border:1px solid var(--bg-lichter);
  background:var(--bg);
  color:var(--text);
  min-height:64px;
  font-size:.85rem;
}

.icon-btn:disabled{
  opacity:.5;
}

.icon-svg{
  width:28px;
  height:28px;
  color:var(--donkerblauw);
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon-svg svg{
  width:24px;
  height:24px;
}

.home-logo{
  display:flex;
  justify-content:center;
  margin:12px 0 16px;
}

.home-logo img{
  width:min(240px, 70%);
  height:auto;
}

.page-footer{
  margin:16px 0 10px;
  text-align:center;
  font-size:.85rem;
  opacity:.6;
}

.page-footer a{
  color:inherit;
  text-decoration:none;
}

.card{
  background:var(--bg-donker);
  border:1px solid var(--bg-lichter);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
}

.card-spelers{
  margin-top:2em;
}

.player-select-group > div{
  margin-bottom:1.5em;
}

.section-subtitle{
  font-weight:600;
  margin-bottom:6px;
}

.section-subtitle-inline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:0;
}

.section-label{
  font-weight:600;
}

.alert{
  padding:10px 12px;
  border-radius:var(--radius);
  border:1px solid var(--bg-lichter);
  margin:10px 0;
}

.alert-success{
  background:var(--success-bg);
  border-color:var(--success-border);
  color:var(--success-text);
  font-weight:600;
}

.alert-error{
  background:rgba(196, 26, 22, 0.12);
  border-color:var(--rood);
  color:var(--rood);
  font-weight:600;
}

.player-panels{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}

.player-panel{
  background:var(--bg);
  border:1px solid var(--bg-lichter);
  border-radius:12px;
  padding:10px;
}

.player-name{
  font-weight:700;
  margin-bottom:6px;
}

.player-metrics{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.95rem;
}

.balance-negative{
  color:var(--rood);
  font-weight:600;
}

.archive-list{
  display:flex;
  flex-direction:column;
  gap:1em;
}

.archive-item{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--bg);
  border:1px solid var(--bg-lichter);
  border-radius:12px;
  padding:10px;
}

.archive-line{
  font-weight:600;
  font-size:.95rem;
}

.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1em;
  gap:10px;
}

.pager-info{
  font-size:.9rem;
  opacity:.8;
}

.detail-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.player-cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.player-card{
  background:var(--bg);
  border:1px solid var(--bg-lichter);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.player-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.player-card-name{
  font-weight:700;
}

.player-card-score{
  font-size:.95rem;
}

.score-invalid{
  color:var(--rood);
  font-weight:600;
  margin-left:6px;
}

.score-valid{
  color:var(--success-text);
  font-weight:600;
  margin-left:6px;
}

.player-card-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.wind-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:8px;
  max-width:240px;
  margin:0 auto;
}

.wind-cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--bg-lichter);
  border-radius:14px;
  background:var(--bg);
  min-height:48px;
  cursor:pointer;
  font-weight:600;
}

.wind-cell input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.wind-cell input:checked + span{
  color:#fff;
}

.wind-cell input:checked ~ span{
  color:#fff;
}

.wind-cell input:checked + span,
.wind-cell input:checked ~ span{
  background:none;
}

.wind-cell input:checked + span,
.wind-cell input:checked ~ span{
  color:#fff;
}

.wind-cell input:checked ~ span{
  z-index:1;
}

.wind-cell input:checked ~ span,
.wind-cell input:checked + span{
  position:relative;
}

.wind-cell input:checked ~ span::before,
.wind-cell input:checked + span::before{
  content:"";
  position:absolute;
  inset:-12px;
  background:var(--donkerblauw);
  border-radius:14px;
  z-index:-1;
}

.wind-north{ grid-area:1 / 2; }
.wind-west{ grid-area:2 / 1; }
.wind-east{ grid-area:2 / 3; }
.wind-south{ grid-area:3 / 2; }

.winner-tiles{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:6px;
}

.winner-tile-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}


/* =========================================
   NAV / HEADER
   ========================================= */

.header{
  padding:10px;
  background:var(--bg-donker);
  border-bottom:1px solid var(--bg-lichter);
}

.header h1{
  font-size:1.2rem;
  margin:0;
}


/* =========================================
   BUTTONS
   ========================================= */

button,
.btn{
  display:inline-block;
  border-radius:var(--radius);
  border:1px solid transparent;
  padding:10px 14px;
  font-size:.95rem;
  background:var(--donkerblauw);
  color:#fff;
  cursor:pointer;
}

/* Button helpers */
.btn-primary,
.btn-secondary,
.btn-link,
.btn-disabled,
.btn-success,
.btn-danger,
.btn-neutral{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius);
  border:1px solid transparent;
  padding:12px 16px;
  font-size:1rem;
  min-height:44px;
  text-decoration:none;
}

.btn-primary{
  background:var(--donkerblauw);
  color:#fff;
}

.btn-secondary{
  background:var(--grijs);
  color:#fff;
}

.btn-success{
  background:var(--success-border);
  color:#fff;
}

.btn-danger{
  background:var(--rood);
  color:#fff;
}

.btn-neutral{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--bg-lichter);
}

.btn-link{
  background:transparent;
  color:var(--donkerblauw);
  border:1px solid var(--bg-lichter);
}

.btn-disabled{
  background:var(--bg-lichter);
  color:#666;
  border:1px solid var(--bg-lichter);
}

.page button,
.page .btn-primary,
.page .btn-secondary,
.page .btn-link,
.page .btn-success,
.page .btn-danger,
.page .btn-neutral,
.page .btn-toggle,
.page .btn-disabled{
  min-height:44px;
}

.form-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.advice-actions{
  margin-top:0;
  flex-direction:row;
  justify-content:space-between;
  margin-bottom:2em;
  margin-top:2em;
}

.advice-btn{
  width:40%;
  max-width:160px;
}

.saldo-sub{
  margin-top:2em;
}

.form-actions-top{
  margin-top:2em;
}

.login-actions{
  margin-top:3em;
}

.login-form{
  font-size:1.3em;
}

.game-start-form select{
  font-size:1.3em;
}

.game-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:2em;
  margin-bottom:2em;
}

.game-actions form{
  flex:1;
}

.game-actions form:last-child{
  text-align:right;
}

.inline-form{
  display:inline-block;
}

button.secondary,
.btn.secondary{
  background:var(--grijs);
}

button.danger,
.btn.danger{
  background:var(--rood);
}

button:disabled{
  opacity:.6;
  pointer-events:none;
}


/* =========================================
   FORMULIEREN
   ========================================= */

label{
  display:block;
  margin:8px 0 4px;
}

input,
select{
  width:100%;
  padding:10px;
  border-radius:var(--radius);
  border:1px solid var(--bg-lichter);
  background:var(--bg);
  color:var(--text);
}


/* =========================================
   TEGELS / KIEZER
   ========================================= */

.tile-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:4px;
}

.tile-btn{
  position:relative;
  border:1px solid var(--bg-lichter);
  border-radius:10px;
  background:var(--bg);
  padding:4px;
  text-align:center;
  cursor:pointer;
}

.tile-btn img{
  width:100%;
  height:auto;
  display:block;
}

.tile-btn.tile-added{
  animation:tile-pop .35s ease-out;
  box-shadow:0 0 0 3px rgba(34,139,34,.5);
}


@keyframes tile-pop{
  0%{transform:scale(1);}
  50%{transform:scale(1.07);}
  100%{transform:scale(1);}
}

.tile-btn.tile-used::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(200,0,0,0.5);
  border-radius:10px;
}

.plank{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:4px;
  padding:6px;
  background:#efc18a;
  border:1px solid var(--bg-lichter);
  border-radius:var(--radius);
}

.advice-page .plank{
  background:#efc18a;
  border-color:#d9a56a;
}

@media (min-width: 701px){
  .plank{
    grid-template-columns:repeat(6, 1fr);
  }
}

.plank-tile{
  position:relative;
  border:1px solid var(--bg-lichter);
  border-radius:10px;
  background:var(--bg);
  padding:4px;
  text-align:center;
  cursor:pointer;
}

.plank-tile.is-selected{
  border-color:var(--donkerblauw);
  box-shadow:0 0 0 2px rgba(40,108,131,.25);
}

.plank-tile img{
  width:100%;
  height:auto;
  display:block;
}

.plank-action{
  position:absolute;
  top:4px;
  width:34px;
  height:26px;
  border:none;
  border-radius:8px;
  background:rgba(0,0,0,.7);
  color:#fff;
  font-size:12px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.plank-remove{
  right:4px;
}

.plank-flip{
  left:4px;
  top:auto;
  bottom:4px;
  opacity:0;
  pointer-events:none;
}

.plank-flip:disabled{
  opacity:0;
  pointer-events:none;
}

.plank-tile.is-selected .plank-flip:not(:disabled){
  opacity:1;
  pointer-events:auto;
}

.helper-text{
  font-size:.9rem;
  opacity:.8;
}

.score-display{
  font-size:1.3rem;
  font-weight:700;
  padding:8px 10px;
  background:var(--bg-donker);
  border:1px solid var(--bg-lichter);
  border-radius:var(--radius);
}

.score-count{
  font-size:1rem;
  font-weight:500;
  opacity:.8;
  margin-left:6px;
}

.score-breakdown{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  font-size:.95rem;
}

.score-breakdown h4{
  margin:0 0 6px 0;
  font-size:.95rem;
}

.score-breakdown ul{
  margin:0;
  padding-left:18px;
}

.score-breakdown li{
  margin-bottom:4px;
}

.breakdown-note{
  font-weight:600;
  margin-bottom:6px;
}

.score-breakdown .empty{
  opacity:.7;
}

.hand-validity{
  margin-left:6px;
  font-size:.85rem;
}

.hand-validity.valid{
  color:var(--success-text);
  font-weight:600;
}

.hand-validity.invalid{
  color:var(--rood);
  font-weight:600;
}

.tile-summary{
  margin-top:12px;
}

.score-points,
.score-doublings{
  margin-top:12px;
}

.score-summary{
  margin:1em 0;
}

.advice-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.advice-inline{
  margin:0 0 1em;
  background:rgba(40,108,131,.12);
  border-color:var(--donkerblauw);
}

.advice-item .btn-link{
  width:100%;
  justify-content:space-between;
}

.advice-example{
  display:none;
  margin-top:8px;
}

.advice-example.is-open{
  display:block;
}

.advice-lists{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:8px;
}

.advice-list-block{
  font-size:.95rem;
}

.advice-list-items{
  margin:1em 0;
}

.advice-spacer{
  margin:1em 0 0;
}

.plank-unused{
  color:var(--rood);
  font-weight:600;
}

.advice-sep{
  opacity:.55;
  font-weight:400;
}

.example-rows{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.example-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
}

.example-row img{
  width:100%;
  height:auto;
  border-radius:8px;
  border:1px solid var(--bg-lichter);
}

.accordion{
  margin:0 0 1em;
}

.accordion summary{
  font-weight:600;
  cursor:pointer;
  list-style:none;
}

.accordion summary::-webkit-details-marker{
  display:none;
}

.accordion summary::before{
  content:"+";
  display:inline-block;
  width:1.1em;
  margin-right:.4em;
  color:var(--donkerblauw);
  font-weight:700;
}

.accordion[open] summary::before{
  content:"–";
}

.accordion-body{
  margin-top:.6em;
}

.accordion .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.accordion table{
  min-width:560px;
}
.tile-summary h4{
  margin:0 0 6px 0;
  font-size:.95rem;
}

.tile-summary-list{
  display:block;
  font-size:.9rem;
}

.tile-summary-item{
  display:block;
  margin:0 0 4px;
  padding:0;
  border:0;
  background:transparent;
}

.btn-toggle{
  border:1px solid var(--bg-lichter);
  background:var(--bg);
  color:var(--text);
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
}

.btn-toggle.on{
  background:#1f7a2e;
  border-color:#1f7a2e;
  color:#fff;
}

.btn-toggle.off{
  background:var(--bg-lichter);
  border-color:var(--bg-lichter);
  color:#333;
}

.qa-page{
  padding:20px 16px;
}

.qa-title{
  margin:0 0 4px 0;
  font-size:1.4rem;
}

.qa-subtitle{
  margin:0 0 16px 0;
  opacity:.8;
}

.qa-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.qa-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--bg-lichter);
  border-radius:12px;
  background:var(--bg);
}

.qa-text{
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}

.qa-points{
  font-size:.9rem;
  opacity:.7;
}

.qa-buttons{
  display:flex;
  gap:8px;
}

.qa-btn{
  flex:1;
  text-align:center;
  padding:10px 0;
  border-radius:12px;
  border:1px solid var(--bg-lichter);
  cursor:pointer;
  font-weight:700;
}

.qa-btn input{
  display:none;
}

.qa-yes,
.qa-no{
  background:var(--bg-donker);
  color:var(--text);
}

.qa-btn.active{
  box-shadow:0 0 0 2px rgba(0,0,0,.15);
}

.qa-btn.qa-yes.active{
  background:#1f7a2e;
  color:#fff;
}

.qa-btn.qa-no.active{
  background:#c23b22;
  color:#fff;
}

.qa-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}

.qa-total{
  font-weight:600;
}

.score-count-warn{
  color:var(--rood);
  opacity:1;
}

@media (max-width: 420px){
  .tile-grid{
    grid-template-columns:repeat(5, 1fr);
  }
}

@media (max-width: 360px){
  .tile-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

.tile.selected{
  border-color:var(--groen);
}

.tile.flipped{
  filter:grayscale(.7) brightness(.7);
}


/* =========================================
   TABELLEN
   ========================================= */

.table{
  width:100%;
  border-collapse:collapse;
}

.table th,
.table td{
  padding:8px;
  border-bottom:1px solid var(--bg-lichter);
}

.table th{
  text-align:left;
  font-weight:600;
}


/* =========================================
   HELPER KLASSEN
   ========================================= */

.row{
  display:flex;
  gap:10px;
}

.space-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.text-center{ text-align:center; }
.small{ font-size:.85rem; }
.muted{ opacity:.7; }