/* Butler Shuffle — gedeelde stijl voor de schermontwerpen (statische mockups) */
/* Lettertypes: in het spel via lib/fonts/fonts.css (meegeleverd), niet meer via Google Fonts. */

:root {
  --ink: #2A1B12;
  --teak: #C8873F;
  --teak-l: #E2AE6A;
  --teak-d: #8A5524;
  --brass: #E2B13C;
  --brass-l: #F9E08F;
  --brass-d: #9A6B14;
  --silver: #DCE3EA;
  --silver-d: #8E9AA6;
  --ocean: #1C86C4;
  --ocean-d: #0B2E4F;
  --ocean-l: #58B9EE;
  --cream: #FFF6E0;
  --p1: #D8402F;
  --p2: #2F7FD8;
  --storm: #3A3378;
  --band-blue: #2F8FD8;
  --band-green: #3FA34D;
  --band-yellow: #F2C230;
  --band-red: #D8402F;
  --f-display: 'Lilita One', 'Arial Black', Impact, sans-serif;
  --f-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --f-quote: 'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Taalschakelaar: beide talen staan in de HTML, één is zichtbaar */
.lang-en .nl, .lang-nl .en { display: none; }

/* ============ Overzichtspagina ============ */
body {
  font-family: var(--f-body);
  font-weight: 700;
  color: var(--cream);
  background: #08223A radial-gradient(1200px 600px at 50% -100px, #17507F, #08223A 70%) no-repeat;
  min-height: 100vh;
  padding: 0 28px 80px;
}
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 4px;
  background: linear-gradient(#08223A 70%, rgba(8, 34, 58, 0));
}
.top h1 { font: 400 30px/1 var(--f-display); letter-spacing: .5px; color: var(--brass-l); }
.top h1 small { font: 800 13px var(--f-body); color: var(--cream); opacity: .75; margin-left: 10px; letter-spacing: .3px; }
.intro { max-width: 820px; font-size: 15px; line-height: 1.5; opacity: .9; margin: 4px 4px 26px; }
h2.sect { font: 400 24px var(--f-display); color: var(--brass-l); margin: 34px 4px 14px; letter-spacing: .5px; }

.langsw { display: flex; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 var(--ink); flex: none; }
.langsw button {
  font: 400 16px var(--f-display); letter-spacing: .5px; padding: 9px 16px; border: 0; cursor: pointer;
  background: #B67A38; color: var(--cream);
}
.lang-en .langsw .b-en, .lang-nl .langsw .b-nl { background: linear-gradient(var(--brass-l), var(--brass)); color: var(--ink); }

.guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.guide .blk { background: rgba(255, 246, 224, .07); border: 1px solid rgba(255, 246, 224, .18); border-radius: 16px; padding: 16px; }
.guide h3 { font: 800 12px var(--f-body); text-transform: uppercase; letter-spacing: 1.5px; opacity: .7; margin-bottom: 12px; }
.sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sw div { font-size: 10px; line-height: 1.25; }
.sw i { display: block; height: 38px; border-radius: 8px; border: 2px solid var(--ink); margin-bottom: 4px; }
.guide .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.guide .ty1 { font: 400 30px/1.1 var(--f-display); color: var(--brass-l); }
.guide .ty2 { font: 800 15px/1.4 var(--f-body); }
.guide .ty3 { font: italic 600 17px/1.4 var(--f-quote); }
.guide p.note { font-size: 12px; opacity: .75; line-height: 1.45; margin-top: 6px; }

.grid { display: flex; flex-wrap: wrap; gap: 34px 30px; align-items: flex-start; }
.card { width: 410px; }
.card.wide { width: auto; }
.card .duo { display: flex; gap: 22px; }
.card figcaption { margin-top: 12px; max-width: 410px; }
.card.wide figcaption { max-width: 640px; }
.card figcaption b { font: 400 19px var(--f-display); color: var(--brass-l); letter-spacing: .4px; display: block; margin-bottom: 4px; }
.card figcaption p { font-size: 13.5px; line-height: 1.45; opacity: .88; font-weight: 600; }

/* ============ Telefoonkader ============ */
.phone {
  position: relative; width: 410px; height: 864px;
  border: 10px solid #15120F; border-radius: 54px; background: #15120F;
  box-shadow: 0 0 0 2px #3A342D, 0 18px 40px rgba(0, 0, 0, .5);
}
.phone.mini { zoom: .74; }
.phone::before { content: ''; position: absolute; z-index: 30; top: 10px; left: 50%; width: 104px; height: 26px; margin-left: -52px; border-radius: 14px; background: #15120F; }
.phone::after { content: ''; position: absolute; z-index: 30; bottom: 8px; left: 50%; width: 130px; height: 5px; margin-left: -65px; border-radius: 3px; background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.scr { position: absolute; inset: 0; border-radius: 44px; overflow: hidden; background: var(--ocean-d); color: var(--ink); font-family: var(--f-body); font-weight: 800; }
.scr > svg.scene { position: absolute; inset: 0; width: 390px; height: 844px; display: block; }
.scr svg text { font-family: var(--f-display); }
.abs { position: absolute; }

/* ============ Bouwstenen in het spel ============ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 16px; border-radius: 18px; border: 3px solid var(--ink);
  font: 400 21px/1 var(--f-display); letter-spacing: .6px; text-transform: uppercase; color: var(--ink); text-align: center;
  background: linear-gradient(#F9E08F, #E2B13C 55%, #C48F1F);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), 0 5px 0 var(--ink);
}
.btn.teak { background: linear-gradient(#D9A05A, #B67A38 60%, #9A6128); color: var(--cream); text-shadow: 0 2px 0 var(--ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--ink); }
.btn.off { background: #B9B0A0; color: #6B6257; border-color: #6B6257; box-shadow: 0 5px 0 #6B6257; }
.btn.small { height: 46px; font-size: 16px; border-radius: 14px; }
.btn.round { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
.btn small { font: 800 10px var(--f-body); letter-spacing: .8px; display: block; margin-top: 3px; opacity: .8; }
.btn .col { display: block; }
.tag { font: 900 9px var(--f-body); letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 8px; background: var(--ink); color: var(--cream); }

.panel {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 46px, rgba(74, 40, 12, .32) 46px 48px),
    linear-gradient(#D9A05A, #B67A38);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: inset 0 0 0 3px var(--brass), inset 0 0 0 4px rgba(42, 27, 18, .5), 0 5px 0 rgba(0, 0, 0, .35);
}
.paper { background: var(--cream); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); }

.bg-ocean { background: radial-gradient(520px 300px at 50% 0, #1F6FA8, #0B2E4F 75%); }
.bg-ocean::before {
  content: ''; position: absolute; inset: 0; opacity: .12;
  background: radial-gradient(circle at 20px 0, transparent 17px, #fff 18px, #fff 20px, transparent 21px) 0 0 / 40px 26px;
}

.h-title { font: 400 28px/1.05 var(--f-display); color: var(--cream); text-shadow: 0 3px 0 var(--ink); letter-spacing: .5px; }
.h-label { font: 900 11px var(--f-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--brass-l); }

/* Scorebord */
.hud { position: absolute; left: 10px; right: 10px; top: 46px; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; z-index: 5; }
.hud .pl { display: flex; align-items: center; gap: 6px; width: 132px; padding: 4px 5px; border-radius: 10px; --pc: var(--p1); }
.hud .pl.p2 { flex-direction: row-reverse; text-align: right; --pc: var(--p2); }
.hud .pl.on { background: rgba(255, 246, 224, .25); box-shadow: 0 0 0 2px var(--brass-l); }
.hud .av { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 3px solid var(--pc); outline: 2px solid var(--ink); background: var(--cream); overflow: hidden; }
.hud .av svg { width: 100%; height: 100%; display: block; }
.hud .nm { font: 900 10px var(--f-body); letter-spacing: 1px; color: var(--cream); text-shadow: 0 1px 0 var(--ink); }
.hud .sc { font: 400 24px/1 var(--f-display); color: #FFE08A; text-shadow: 0 2px 0 var(--ink); }
.pips { display: flex; gap: 3px; margin-top: 3px; }
.p2 .pips { justify-content: flex-end; }
.pip { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--pc); }
.pip.used { background: transparent; border: 1.5px dashed rgba(255, 246, 224, .7); }
.hud .rnd { text-align: center; width: 92px; }
.hud .disc { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); background: radial-gradient(circle at 35% 30%, #FBE9A8, #E2B13C 60%, #B98416); line-height: 1; }
.hud .disc small { font: 900 6.5px var(--f-body); letter-spacing: .6px; }
.hud .disc b { font: 400 14.5px var(--f-display); }
.hud .loc { font: 900 8.5px var(--f-body); letter-spacing: .5px; color: var(--cream); text-shadow: 0 1px 0 var(--ink); white-space: nowrap; margin-top: 0; line-height: 1.1; }

.hint { position: absolute; z-index: 5; font: 800 12.5px/1.2 var(--f-body); color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 10px; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.hint b { font: 400 12px var(--f-display); background: var(--ink); color: var(--cream); border-radius: 6px; padding: 2px 5px; margin-right: 5px; letter-spacing: .5px; }
.ribbon { position: absolute; z-index: 5; font: 400 15px/1 var(--f-display); letter-spacing: .6px; color: var(--ink); padding: 7px 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: linear-gradient(#FFF0A8, #F2C230); box-shadow: 0 3px 0 var(--ink); }
.ribbon.warn { background: linear-gradient(#FF8A6B, #D8402F); color: var(--cream); text-shadow: 0 1.5px 0 var(--ink); }

.subtitle { position: absolute; left: 14px; right: 14px; z-index: 5; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 3px solid var(--ink); background: rgba(20, 14, 10, .88); color: var(--cream); box-shadow: inset 0 0 0 2px var(--brass-d); }
.subtitle .who { font: 900 9px var(--f-body); letter-spacing: 1.5px; color: var(--brass-l); margin-bottom: 3px; }
.subtitle q { font: italic 600 19px/1.25 var(--f-quote); quotes: none; }
.subtitle .av { width: 54px; height: 54px; flex: none; border-radius: 50%; background: var(--silver); border: 3px solid var(--brass); overflow: hidden; }

/* Menu- en keuzeschermen */
.logo { position: absolute; left: 0; right: 0; top: 62px; text-align: center; transform: rotate(-4deg); z-index: 4; }
.logo span { display: block; font: 400 74px/.92 var(--f-display); letter-spacing: 1px; color: var(--cream); -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); }
.logo span + span { color: #F6CB52; font-size: 66px; }
.tagline { position: absolute; left: 0; right: 0; top: 222px; text-align: center; z-index: 4; }
.tagline span { display: inline-block; white-space: nowrap; font: 900 10.5px var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; background: var(--ink); color: var(--brass-l); padding: 6px 12px; border-radius: 10px; transform: rotate(-4deg); }
.menu { position: absolute; left: 26px; right: 26px; bottom: 40px; display: grid; gap: 13px; z-index: 5; }
.menu .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.seg { display: flex; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 var(--ink); background: #B67A38; }
.seg > * { flex: 1; text-align: center; padding: 9px 4px; font: 400 15px var(--f-display); letter-spacing: .4px; color: var(--cream); border-left: 3px solid var(--ink); }
.seg > *:first-child { border-left: 0; }
.seg .sel { background: linear-gradient(var(--brass-l), var(--brass)); color: var(--ink); }

.chars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.char { position: relative; height: 186px; border-radius: 16px; border: 3px solid var(--ink); background: linear-gradient(#FFF6E0, #F1DFB6); overflow: hidden; text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.char > svg { width: 100%; height: 128px; display: block; }
.char .nm { font: 400 17px/1 var(--f-display); letter-spacing: .3px; }
.char .ds { font: 800 10.5px var(--f-body); opacity: .75; margin-top: 3px; }
.char.sel { box-shadow: 0 0 0 4px var(--brass), 0 0 0 7px var(--ink), 0 8px 0 rgba(0, 0, 0, .35); }
.char .tag { position: absolute; top: 8px; left: 8px; }
.char .tag.r { left: auto; right: 8px; }
.char.p1 .tag { background: var(--p1); }
.char.p2 .tag { background: var(--p2); }
.char.locked { background: linear-gradient(#5F7387, #3D4E60); color: var(--cream); }
.lvl small { display: block; font: 800 9px var(--f-body); letter-spacing: .5px; opacity: .8; margin-top: 2px; }
.lvl .st { display: block; font-size: 13px; letter-spacing: 2px; line-height: 1; margin-bottom: 3px; }

/* Lijsten: uitslag en instellingen */
.rows { padding: 0 12px; }
.rows .r { display: flex; align-items: center; gap: 8px; min-height: 31px; border-top: 2px dashed rgba(42, 27, 18, .2); font-size: 12.5px; }
.rows .r .n { width: 16px; font: 400 13px var(--f-display); opacity: .55; }
.rows .r .z { flex: 1; }
.rows .r .pt { font: 400 17px var(--f-display); min-width: 34px; text-align: right; }
.rows .r.zero { opacity: .6; }
.zchip { display: inline-block; min-width: 26px; text-align: center; font: 400 12px var(--f-display); padding: 2px 5px; border-radius: 7px; border: 2px solid var(--ink); background: var(--band-blue); color: #fff; }
.zchip.z25, .zchip.z50 { background: var(--band-green); }
.zchip.z100 { background: var(--band-yellow); color: var(--ink); }
.zchip.x3 { background: var(--ink); color: #FFE08A; }
.phd { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.phd .av { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--pc); outline: 2px solid var(--ink); overflow: hidden; background: #fff; flex: none; }
.phd .nm { flex: 1; font: 400 19px var(--f-display); }
.phd .tot { font: 400 30px/1 var(--f-display); color: var(--pc); -webkit-text-stroke: 1px var(--ink); }
.phd .tot small { display: block; font: 900 8px var(--f-body); letter-spacing: 1px; color: var(--ink); -webkit-text-stroke: 0; text-align: right; }

.set { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-top: 2px dashed rgba(42, 27, 18, .2); }
.set:first-child { border-top: 0; }
.set .tx { flex: 1; font: 400 18px var(--f-display); letter-spacing: .3px; }
.set .tx small { display: block; font: 700 11px/1.3 var(--f-body); opacity: .7; margin-top: 2px; letter-spacing: 0; }
.tog { position: relative; width: 78px; height: 36px; flex: none; border-radius: 18px; border: 3px solid var(--ink); background: #B9B0A0; font: 400 12px/30px var(--f-display); color: var(--ink); padding: 0 9px; text-align: right; }
.tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--silver); border: 2.5px solid var(--ink); }
.tog.on { background: linear-gradient(#6CC878, var(--band-green)); color: #fff; text-align: left; }
.tog.on::after { left: auto; right: 2px; background: var(--cream); }

.score-final { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; padding: 10px 12px 6px; color: var(--cream); }
.score-final .big { font: 400 46px/1 var(--f-display); color: #FFE08A; text-shadow: 0 3px 0 var(--ink); }
.score-final .nm { font: 900 10px var(--f-body); letter-spacing: 1.2px; text-shadow: 0 1px 0 var(--ink); }
.score-final .dash { font: 400 26px var(--f-display); opacity: .7; }
.rtab { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 12px 12px; }
.rtab div { background: rgba(42, 27, 18, .45); border-radius: 9px; padding: 5px 4px; text-align: center; color: var(--cream); font: 400 14px var(--f-display); }
.rtab small { display: block; font: 900 8px var(--f-body); letter-spacing: 1px; opacity: .8; }

/* Winkel: karakters en jachten */
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item { position: relative; height: 146px; border-radius: 14px; border: 3px solid var(--ink); background: linear-gradient(#FFF6E0, #F1DFB6); overflow: hidden; text-align: center; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.items.low .item { height: 122px; }
.item > svg { width: 100%; height: 74px; display: block; margin-top: 4px; }
.items.low .item > svg { height: 52px; }
.item .nm { font: 400 14.5px/1.1 var(--f-display); letter-spacing: .2px; }
.item .ds { font: 800 10px var(--f-body); opacity: .75; margin: 1px 0 4px; }
.item.locked { background: linear-gradient(#5F7387, #3D4E60); color: var(--cream); }
.item .lk { position: absolute; top: 14px; left: 0; right: 0; }
.items.low .item .lk { top: 6px; }
.item .lk svg { width: 34px; height: 40px; }
.item .own, .item .unl { display: inline-block; font: 400 12px/1 var(--f-display); letter-spacing: .4px; padding: 5px 10px; border-radius: 9px; border: 2px solid var(--ink); }
.item .own { background: var(--band-green); color: #fff; }
.item .unl { background: linear-gradient(var(--brass-l), var(--brass)); color: var(--ink); box-shadow: 0 2px 0 var(--ink); text-transform: uppercase; }