@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap");

/* Astra overrides – alleen actief als de app-div aanwezig is */
body:has(#root:not(:empty)) { background:var(--bg) !important; color:var(--text) !important; }
body:has(#root:not(:empty)) .site-header,
body:has(#root:not(:empty)) .site-footer,
body:has(#root:not(:empty)) .ast-breadcrumbs-wrapper { display:none !important; }
body:has(#root:not(:empty)) .ast-container,
body:has(#root:not(:empty)) .site-content { max-width:100% !important; padding:0 !important; }
body:has(#root:not(:empty)) .entry-title { display:none; }
body:has(#root:not(:empty)) #primary,
body:has(#root:not(:empty)) .ast-article-single { padding:0 !important; margin:0 !important; }

/* Register screen */
.register-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;text-align:center;padding:32px 16px;}
.register-screen .logo{font-size:56px;margin-bottom:16px;}
.register-screen h2{font-size:24px;color:var(--amber);margin-bottom:8px;}
.register-screen > p{font-size:14px;color:var(--text2);margin-bottom:28px;}
.register-form{width:100%;max-width:320px;text-align:left;}
.register-error{font-size:13px;color:#e08080;min-height:18px;margin-top:8px;text-align:center;}
.already-list{width:100%;max-width:320px;margin-top:28px;text-align:left;}
.already-list > p{font-size:13px;color:var(--text3);margin-bottom:8px;}
.already-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);}
.already-row:last-child{border-bottom:none;}
.order-dot{width:22px;height:22px;border-radius:50%;background:var(--surface3);color:var(--text2);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}


*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0d0a;--surface:#1a1712;--surface2:#242018;--surface3:#2e2a22;
  --amber:#e8a020;--amber2:#f5c354;--amber3:#fde8a0;
  --text:#f0ead8;--text2:#a89c80;--text3:#6b6050;
  --green:#4a7c59;--red:#8b3a3a;
  --border:rgba(232,160,32,0.15);--border2:rgba(232,160,32,0.3);
  --radius:12px;
}

/* Prevent any horizontal overflow on all screens */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;font-size:15px;}
h1,h2,h3{font-family:'Playfair Display',serif;}
#root h1,#root h2,#root h3{color:var(--text) !important;}
#root .section-title{color:var(--text) !important;}
#root .beer-info h3{color:var(--text) !important;}
#root .rank-info h3{color:var(--text) !important;}
#root .rank-num{color:var(--text3);}
#root p{color:inherit;}
.app{max-width:640px;margin:0 auto;padding:16px 14px 80px;}

/* NAV */
.nav{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px 0 18px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.nav-top{display:flex;align-items:center;justify-content:space-between;width:100%;}
.nav-logo{font-family:'Playfair Display',serif;font-size:20px;color:var(--amber);letter-spacing:.03em;white-space:nowrap;}
.nav-tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  width:100%;
}
.nav-tab{
  background:none;
  border:1px solid var(--border);
  color:var(--text2);
  padding:7px 4px;
  border-radius:99px;
  font-size:12px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .2s;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-tab.active,.nav-tab:hover{border-color:var(--amber);color:var(--amber);background:rgba(232,160,32,.08);}

@media(min-width:480px){
  .nav{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .nav-top{width:auto;flex:0 0 auto;}
  .nav-tabs{display:flex;flex-wrap:wrap;width:auto;gap:6px;}
  .nav-tab{padding:6px 14px;font-size:13px;}
}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;}
.card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.beer-num{width:32px;height:32px;border-radius:50%;background:var(--amber);color:var(--bg);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.beer-info h3{font-size:16px;font-weight:500;line-height:1.2;}
.beer-info span{font-size:13px;color:var(--text2);}

/* INPUTS */
input,select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none;transition:border .2s;}
input:focus,select:focus{border-color:var(--amber2);}
select option{background:var(--surface2);}
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* SLIDER */
.score-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.score-label{font-size:13px;color:var(--text2);width:72px;flex-shrink:0;}
input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:var(--surface3);border-radius:2px;border:none;padding:0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--amber);cursor:pointer;}
input[type=range]:focus{border:none;outline:none;}
.score-val{width:28px;text-align:right;font-size:14px;font-weight:500;color:var(--amber2);}
.score-total{text-align:right;font-size:13px;color:var(--text3);margin-top:4px;}
.score-total span{color:var(--amber);font-weight:500;font-size:15px;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;font-size:14px;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;font-weight:500;border:none;}
.btn-primary{background:var(--amber);color:var(--bg);}
.btn-primary:hover{background:var(--amber2);}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2);}
.btn-secondary:hover{border-color:var(--amber);color:var(--amber);}
.btn-full{width:100%;}
.btn-sm{padding:8px 16px;font-size:13px;}

/* PILLS */
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;background:rgba(232,160,32,.1);color:var(--amber2);border:1px solid rgba(232,160,32,.2);}
.pill-green{background:rgba(74,124,89,.15);color:#7ec99a;border-color:rgba(74,124,89,.3);}
.pill-red{background:rgba(139,58,58,.15);color:#e08080;border-color:rgba(139,58,58,.3);}

/* RESULTS */
.rank-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:10px;display:flex;align-items:center;gap:14px;}
.rank-card.gold{border-color:var(--amber);background:rgba(232,160,32,.06);}
.rank-num{font-family:'Playfair Display',serif;font-size:28px;color:var(--text3);width:36px;text-align:center;}
.rank-card.gold .rank-num{color:var(--amber);}
.rank-info{flex:1;}
.rank-info h3{font-size:15px;font-weight:500;}
.rank-info p{font-size:13px;color:var(--text2);margin-top:2px;}
.rank-score{text-align:right;}
.rank-score .big{font-family:'Playfair Display',serif;font-size:26px;color:var(--amber2);}
.rank-score .max{font-size:12px;color:var(--text3);}
.progress-bar{height:4px;background:var(--surface3);border-radius:2px;margin-top:6px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:2px;transition:width .5s;}

/* NAME SELECT */
.name-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.name-btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);}
.name-btn:hover,.name-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(232,160,32,.08);}
.name-btn .initial{font-family:'Playfair Display',serif;font-size:24px;display:block;margin-bottom:4px;}

/* SECTION TITLE */
.section-title{font-size:22px;margin-bottom:6px;}
.section-sub{font-size:14px;color:var(--text2);margin-bottom:24px;}

/* STATUS */
.status-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.status-row:last-child{border-bottom:none;}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);}
.status-dot.done{background:var(--green);}

/* EMPTY */
.empty{text-align:center;padding:40px 20px;color:var(--text3);}
.empty-icon{font-size:40px;margin-bottom:12px;}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--amber);color:var(--bg);padding:10px 20px;border-radius:99px;font-size:14px;font-weight:500;opacity:0;transition:opacity .3s;pointer-events:none;z-index:99;}
.toast.show{opacity:1;}

/* SAVED BADGE */
.saved-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--green);opacity:0;transition:opacity .5s;}
.saved-badge.show{opacity:1;}

/* MOBILE OVERRIDES — prevent overflow and fix tight layouts */
@media(max-width:479px){
  /* Cards */
  .card{padding:16px 14px;}
  .card-header{gap:10px;}

  /* Field row: stack on very small screens */
  .field-row{grid-template-columns:1fr;}

  /* Score row: tighter label */
  .score-row{gap:6px;}
  .score-label{width:60px;font-size:12px;}

  /* Rank cards: make score smaller so it fits */
  .rank-card{padding:12px 14px;gap:10px;}
  .rank-num{font-size:22px;width:28px;}
  .rank-score .big{font-size:20px;}
  .rank-score .max{font-size:11px;}
  .rank-info h3{font-size:14px;}

  /* Name grid: 2 columns on tiny screens */
  .name-grid{grid-template-columns:repeat(2,1fr);}

  /* Buttons in flex rows should wrap */
  .btn{padding:11px 16px;font-size:13px;}

  /* Status rows: allow text to wrap */
  .status-row{flex-wrap:wrap;gap:6px;}

  /* Section title smaller */
  .section-title{font-size:19px;}

  /* Toast max-width */
  .toast{max-width:calc(100vw - 32px);white-space:normal;text-align:center;bottom:16px;}

  /* Inline flex containers in JS-built views */
  [style*="display:flex"]{max-width:100%;}
}


/* ── v2.2.0: Pincode ──────────────────────────────────────────────────────── */
.pin-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--amber); background: transparent;
  transition: background .15s;
}
.pin-key-empty { visibility: hidden !important; pointer-events: none; }
@keyframes shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)}
}

/* ── v2.2.0: Reglement popup ──────────────────────────────────────────────── */
@keyframes bob {
  0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}
}
@keyframes reg-backdrop-fade {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes reg-popup-slide {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes reg-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.reg-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  background: rgba(10, 7, 3, 0.55);
  backdrop-filter: blur(8px) saturate(0.7);
  -webkit-backdrop-filter: blur(8px) saturate(0.7);
  opacity: 0; transition: opacity 0.28s ease;
}
.reg-backdrop-in { opacity: 1; }

.reg-popup {
  width: 100%; max-width: 560px;
  height: 92vh; max-height: 92vh;
  background: #1e1507;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(232,160,32,0.25);
  border-bottom: none;
  box-shadow: 0 -8px 48px rgba(0,0,0,0.6), 0 -2px 12px rgba(232,160,32,0.08);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(32px) scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34,1.2,0.64,1);
}
.reg-popup-in {
  opacity: 1; transform: translateY(0) scale(1);
}

.reg-popup-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(232,160,32,0.15);
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(40,28,10,0.95) 0%, rgba(30,21,7,0) 100%);
}
.reg-popup-titel {
  font-family: 'Playfair Display', serif;
  font-size: 18px; color: var(--amber); margin: 0;
}
.reg-popup-sub {
  font-size: 11px; color: var(--text3); margin: 3px 0 0;
}
.reg-close-btn {
  background: rgba(255,255,255,0.07); border: none; border-radius: 50%;
  width: 30px; height: 30px; color: var(--text2); font-size: 13px;
  cursor: pointer; flex-shrink: 0; margin-left: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.reg-close-btn:hover { background: rgba(255,255,255,0.14); color: var(--text1); }

.reg-popup-body {
  flex: 1; overflow-y: auto; padding: 16px 20px 8px;
  -webkit-overflow-scrolling: touch;
  /* Zacht fade-edge bovenaan */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 24px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 24px);
}
.reg-popup-footer {
  padding: 12px 20px 28px; border-top: 1px solid rgba(232,160,32,0.12);
  background: #1e1507; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.reg-hint {
  text-align: center; font-size: 13px; color: var(--text2); margin: 0;
  animation: bob 2.2s ease-in-out infinite;
}
.reg-acc-btn.reg-fade-in {
  animation: reg-fade-in 0.35s ease forwards;
}

.reg-para {
  font-size: 0.87em; line-height: 1.7; color: #d8c5a0; margin: 0 0 4px;
}
.reg-para:empty { height: 8px; }
.reg-trigger { color: inherit; cursor: default; user-select: text; }


/* ── v2.6.4: Michel beheer/reset ─────────────────────────────────────────── */
.reset-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.reset-card{margin-bottom:0;}
.reset-danger{border-color:rgba(179,45,46,.45);}
.btn-danger{background:#b32d2e;color:#fff;border:1px solid #d63638;}
.btn-danger:hover{background:#d63638;color:#fff;}
@media(min-width:560px){.reset-grid{grid-template-columns:1fr 1fr;}}