:root{
  --yellow1:#ffe000; --yellow2:#ffd000; --yellow3:#f3c300;
  --red1:#ff2e00; --red2:#e62100; --red3:#9f0f00; --red4:#ff6a4d;
  --white:#fff; --black:#111; --muted:#333; --shadow:rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,var(--yellow1),var(--yellow2) 45%,var(--yellow3));
  color:var(--black)
}
.max{max-width:1200px;margin:0 auto;padding:20px}
.brand{display:flex;gap:14px;align-items:center;justify-content:center;margin:8px 0 24px}
.brand img.brand-logo{height:72px;width:auto;display:block}

/* Card container */
.card{
  background:rgba(255,255,255,.08);
  backdrop-filter:saturate(120%) blur(3px);
  border-radius:22px;
  padding:24px;
  box-shadow:0 10px 30px var(--shadow);
  border:2px solid rgba(0,0,0,.06)
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;
  padding:18px 28px;border-radius:12px;border:0;color:#fff;font-weight:900;letter-spacing:1px;
  background:linear-gradient(#ff4b23,#e02200);
  box-shadow:0 10px 0 var(--red3), 0 10px 20px var(--shadow);
  text-transform:uppercase;transition:transform .06s ease
}
.btn:active{transform:translateY(3px);box-shadow:0 7px 0 var(--red3), 0 6px 12px var(--shadow)}
.btn.block{width:100%}
.btn.small{padding:12px 18px}
.btn.gray{background:linear-gradient(#f3f3f3,#d0d0d0);color:#111;box-shadow:0 8px 0 #a0a0a0, 0 10px 20px var(--shadow)}

.btn[disabled], .btn.disabled { 
  opacity:.5; 
  pointer-events:none; 
  box-shadow:0 6px 0 rgba(0,0,0,.2);
}

/* Grid helpers */
.row{display:grid;gap:18px}
.two{grid-template-columns:1fr 1fr}
.three{grid-template-columns:repeat(3,1fr)}

/* Start tile */
.start{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:center}
.token-tile{
  background:#cfb090 url('/gfx/hardbord_token.jpg') center/cover no-repeat;
  border-radius:28px; box-shadow:0 10px 0 rgba(0,0,0,.18), inset 0 0 0 6px rgba(0,0,0,.15);
  padding:22px; color:#111; height:300px; width:300px; display:flex; flex-direction:column; justify-content:space-between;
}
.start-title{
  grid-column: 1 / -1;            /* over beide kolommen */
  margin: 0 0 10px;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--black);
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.15;
}


/* Inputs */
.pill-input{
  width:100%; border:none; background:#f4f4f4; border-radius:999px;
  padding:16px 22px; font-size:26px; font-weight:800; color:#111;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12), 0 3px 0 rgba(255,255,255,.5)
}
.pill-input.is-invalid{
  outline: 3px solid #ff4b23;
  box-shadow: 0 0 0 3px rgba(255,75,35,.15), inset 0 -4px 0 rgba(0,0,0,.12);
}
.key.enter.disabled{
  opacity:.5;
  pointer-events:none;
  box-shadow:0 6px 0 rgba(0,0,0,.2);
}

/* Token keypad (10 kolommen) */
.keypad{display:grid;grid-template-columns:repeat(10,1fr);gap:14px;margin-top:16px}
.key{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#ff4b23,#e02200);color:#fff;font-weight:900;
  padding:18px;border-radius:10px;box-shadow:0 6px 0 var(--red3);cursor:pointer;user-select:none
}
.key.small{padding:12px 0}
.key.enter{grid-column:span 10}
.key.space{grid-column:span 6}

/* Screens */
.screen{display:none}
.screen.active{display:block}

/* Choice screen */
.choice{display:grid;gap:22px}

/* Virtueel keyboard: ALTIJD 11 kolommen */
.kbd-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:12px;margin-top:14px}
.kbd-grid .key{min-width:0;white-space:nowrap}

/* Summary */
.summary{display:grid;gap:12px;background:#fff;border-radius:16px;padding:16px;border:2px solid rgba(0,0,0,.1)}
.summary div{display:flex;gap:10px;align-items:center}
.label{min-width:120px;font-weight:700}

/* ==== Responsive / device gedrag ==== */

html, body { overflow-x: hidden; }

/* Phone (≤599px): OSK AAN, HTML-keyboards UIT */
@media (max-width: 599px){
  .max{ padding:12px; }
  .card{ padding:16px; border-radius:16px; }

  .brand{ margin:6px 0 16px; }
  .brand img.brand-logo{ height:56px; }

  .row{ gap:12px; }
  .two{ grid-template-columns:1fr; }
  .three{ grid-template-columns:repeat(2,1fr); }

  .start{ grid-template-columns:1fr; gap:12px; }
  .token-tile{ width:100%; height:300px; border-radius:18px; }

  .pill-input{ font-size:18px; padding:12px 14px; }

  /* Verberg HTML-keyboards */
  .keypad{ display:none !important; }
  #kbd, #mode-upper, #mode-lower, #mode-num { display:none !important; }

  .summary{ padding:12px; }
  .label{ min-width:96px; }
}

/* Tablet (600–1366px): HTML-keyboards AAN; OSK uit via JS */
@media (min-width: 600px) and (max-width: 1366px){
  .max{ padding:16px; }
  .card{ padding:18px; border-radius:18px; }
  .brand img.brand-logo{ height:60px; }

  .pill-input{ font-size:20px; padding:14px 16px; }
  .two{ grid-template-columns:1fr 1fr; }
  .three{ grid-template-columns:repeat(3,1fr); }
  .start{ grid-template-columns:1fr 1fr; }

  .kbd-grid{ gap:10px; }
  .key{ min-height:50px; padding:14px; }
  .key.space{ grid-column:span 8; }

  /* Toon HTML-keyboards */
  .keypad{ display:grid !important; }
  #kbd, #mode-upper, #mode-lower, #mode-num { display:initial !important; }

  #kbd.kbd-grid{
    display: grid !important;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(11, minmax(0,1fr)) !important;
  }
  /* Zorg dat elke key 1 cel gebruikt (niet per ongeluk full-width) */
  #kbd.kbd-grid .key{
    grid-column: auto !important;
    width: auto !important;
  }
  /* Alleen het TEKST-toetsenbord heeft een lange spatiebalk */
  #kbd.kbd-grid .key.space{ grid-column: span 8 !important; }
}

/* Scope breedte-regels strikt naar het TOKEN-keypad,
   zodat ze NIET op #kbd van toepassing zijn. */
.keypad .key.enter{ grid-column: 1 / -1; min-height: 52px; }
.keypad .key.space{ grid-column: span 6; }
}

/* Desktop (≥1367px) */
@media (min-width: 1367px){
  .max{ padding:20px; }
  .card{ padding:24px; border-radius:22px; }
  .brand img.brand-logo{ height:64px; }
  .pill-input{ font-size:22px; padding:14px 18px; }
  .kbd-grid{ gap:12px; }
  .key{ min-height:54px; padding:18px; }
  .key.space{ grid-column:span 6; }
}

/* iOS safe areas */
@supports (padding: max(0px)){
  .max{
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
}