:root {
  --sky: #7fb7e6;
  --green: #4caf50;
  --green-dark: #2e7d32;
  --orange: #ff8a3c;
  --brown: #6d4c41;
  --text: #1f2937;
  --muted: #5b6472;
  --card: rgba(255, 255, 255, .92);
  --f: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; background: var(--sky); color: var(--text); font-family: var(--f);
  overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body { position: fixed; inset: 0; touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
body:not(.touch) .touch-only { display: none !important; }
#loading { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--sky); font: 800 24px var(--f); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(127,183,230,.2), rgba(40,80,120,.55) 80%);
  animation: fadein .3s ease-out; overflow-y: auto;
}
.logo {
  font: 900 clamp(52px, 15vw, 110px)/1 var(--f); color: #fff; letter-spacing: -.02em;
  text-shadow: 0 3px 0 #2e7d32, 0 6px 0 #1b5e20, 0 12px 30px rgba(0,0,0,.35);
  animation: bob 3s ease-in-out infinite;
}
.logo.small { font-size: clamp(40px, 11vw, 72px); }
.tag { color: #fff; font-size: 18px; font-weight: 700; max-width: 380px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.online { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; font-size: 16px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.online i { width: 10px; height: 10px; border-radius: 50%; background: #7cff8a; box-shadow: 0 0 10px #7cff8a; animation: blink 1.4s ease-in-out infinite; }

form { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 330px; margin-top: 6px; }
#name-form input {
  width: 100%; font: 800 24px var(--f); text-align: center; color: var(--text); background: #fff;
  border: 3px solid #fff; border-radius: 18px; padding: 13px 16px; outline: none; box-shadow: 0 8px 24px rgba(0,0,0,.2);
  user-select: text; -webkit-user-select: text;
}
#name-form input:focus { border-color: var(--orange); }
.err { color: #fff; background: rgba(220,38,38,.8); border-radius: 10px; padding: 0 10px; font-weight: 700; font-size: 15px; min-height: 20px; }
.err:empty { background: none; }
.name-note { color: #fff; font: 700 14px/1.45 var(--f); max-width: 330px; background: rgba(0,0,0,.28); padding: 8px 14px; border-radius: 14px; }

.btn {
  font: 900 17px var(--f); letter-spacing: .04em; color: var(--text); background: #fff;
  border: 0; border-radius: 18px; padding: 13px 20px; cursor: pointer; box-shadow: 0 6px 0 #c8d3dc, 0 10px 20px rgba(0,0,0,.2);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c8d3dc, 0 4px 10px rgba(0,0,0,.2); }
.btn:disabled { opacity: .5; }
.btn.icon { padding: 13px 15px; }
.btn.primary { color: #fff; background: linear-gradient(180deg, #ffa353, #ff7a1a); box-shadow: 0 6px 0 #b24f0a, 0 10px 20px rgba(0,0,0,.25); }
.btn.primary:active { box-shadow: 0 2px 0 #b24f0a, 0 4px 10px rgba(0,0,0,.25); }
.btn.big { font-size: 24px; padding: 16px 36px; min-width: 260px; border-radius: 999px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.other { color: #fff; font: 800 15px var(--f); text-decoration: none; padding: 7px 16px; background: rgba(0,0,0,.25); border-radius: 999px; }
.colors { display: grid; grid-template-columns: repeat(6, 34px); justify-content: center; gap: 10px; }
.colors button { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.colors button:hover { transform: scale(1.1); }
.colors button[aria-checked="true"] { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--orange); }

/* menu card */
#scr-menu { justify-content: safe center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: radial-gradient(ellipse at center, rgba(20,45,75,.25), rgba(20,45,75,.6) 75%); }
.menu-card {
  width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 18px 20px 16px; border-radius: 26px; background: rgba(255,255,255,.95); color: var(--text);
  box-shadow: 0 20px 50px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.6);
}
.menu-hello { display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 20px var(--f); }
.menu-hello b { font-weight: 900; }
.menu-sec { display: flex; flex-direction: column; gap: 8px; }
.menu-sec h3 { font: 900 11px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; }
/* the settings, folded up: the title is the button, an arrow that turns when they are open (a details has no flex gap everywhere: a margin) */
.set-sec { display: block; }
.set-sec > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 6px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary::after { content: '▸'; color: var(--muted); font-size: 13px; transition: transform .15s; }
.set-sec[open] > summary::after { transform: rotate(90deg); }
.set-sec > .menu-set { margin-top: 4px; }
.menu-card .btn.big { min-width: 0; width: 100%; margin: 2px 0 4px; }
.menu-sec.now { border-top: 1px solid #e6ebf0; padding-top: 12px; }
.now-list { list-style: none; display: flex; flex-direction: column; gap: 4px; max-height: 128px; overflow-y: auto; }
.now-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #f3f6f9; font: 700 14px var(--f); text-align: left; }
.now-list li b { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-list li span { color: #c2610c; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-list li.muted { justify-content: center; color: var(--muted); background: none; }
.menu-tools { display: flex; gap: 10px; }
.menu-tools .btn { flex: 1; font-size: 15px; padding: 11px 14px; box-shadow: 0 4px 0 #d3dce4; background: #f3f6f9; }
.menu-tools .btn.icon { flex: 0 0 auto; }
.menu-tools .btn:active { box-shadow: 0 1px 0 #d3dce4; transform: translateY(3px); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.topbar { position: absolute; left: 10px; top: calc(10px + env(safe-area-inset-top)); right: calc(150px + env(safe-area-inset-right)); display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; pointer-events: none; }
.topbar > * { pointer-events: auto; flex: none; }
.round { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--card); color: var(--text); font: 800 20px var(--f); cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.pill { background: var(--card); border-radius: 999px; padding: 8px 12px; font: 800 15px var(--f); color: var(--text); box-shadow: 0 3px 10px rgba(0,0,0,.2); white-space: nowrap; }
#minimap { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(10px + env(safe-area-inset-top)); width: 130px; height: 130px; border-radius: 16px; background: rgba(255,255,255,.85); box-shadow: 0 3px 10px rgba(0,0,0,.2); }
#place {
  position: absolute; left: 50%; top: calc(62px + env(safe-area-inset-top)); transform: translateX(-50%);
  background: rgba(0,0,0,.35); color: #fff; font: 800 15px var(--f); padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
#hint {
  position: absolute; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--card); color: var(--text); font: 800 16px var(--f); padding: 8px 16px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.2); max-width: 92vw; text-align: center;
}
#hint b { color: #d97706; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
/* aiming a rifle: a big scope with lines and a dot, red with an animal under it; it kicks when you shoot and flashes gold on a hit */
#crosshair.scope { width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 2.5px solid #fff; box-shadow: none; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.9)); background: radial-gradient(circle, #fff 0 2.5px, transparent 3.2px); transition: border-color .12s, transform .12s; }
#crosshair.scope::before, #crosshair.scope::after { content: ''; position: absolute; left: 50%; top: 50%; }
#crosshair.scope::before { width: 84px; height: 2.5px; margin: -1.25px 0 0 -42px; background: linear-gradient(90deg, #fff 0 30%, transparent 30% 70%, #fff 70%); }
#crosshair.scope::after { width: 2.5px; height: 84px; margin: -42px 0 0 -1.25px; background: linear-gradient(180deg, #fff 0 30%, transparent 30% 70%, #fff 70%); }
#crosshair.scope.on { border-color: #ff3b30; transform: scale(.86); background: radial-gradient(circle, #ff3b30 0 3px, transparent 3.7px); }
#crosshair.scope.on::before { background: linear-gradient(90deg, #ff3b30 0 30%, transparent 30% 70%, #ff3b30 70%); }
#crosshair.scope.cant { border-color: #9e9e9e; opacity: .7; }   /* (aimed at game you may not shoot: your level, or enough today) */
#hunt-hud .hunt-no { color: #ffab91; font-weight: 900; } #hunt-hud .hunt-ok { color: #a5d6a7; font-weight: 900; }
#crosshair.scope.on::after { background: linear-gradient(180deg, #ff3b30 0 30%, transparent 30% 70%, #ff3b30 70%); }
#crosshair.kick { animation: ch-kick .25s ease-out; }
#crosshair.hit { animation: ch-hit .7s ease-out; border-color: #ffd54f; }
@keyframes ch-kick { 0% { transform: scale(1.35) translateY(-6px); } 100% { transform: scale(1); } }
@keyframes ch-hit { 0% { transform: scale(1.7) rotate(45deg); } 60% { transform: scale(1.1) rotate(45deg); } 100% { transform: scale(1) rotate(0); } }
#hunt-hud { position: absolute; left: 50%; top: calc(50% + 50px); transform: translateX(-50%); background: rgba(16, 22, 16, .62); color: #fff; font: 600 13px/1.2 system-ui, sans-serif; padding: 4px 11px; border-radius: 12px; white-space: nowrap; }
#hunt-hud.on { background: rgba(198, 40, 40, .85); }
#det-hud, #truf-hud { position: absolute; left: 50%; top: 104px; transform: translateX(-50%); background: rgba(16, 22, 16, .62); color: #fff; font: 600 13px/1.2 system-ui, sans-serif; padding: 4px 11px; border-radius: 12px; white-space: nowrap; letter-spacing: 1px; }
#det-hud.on, #truf-hud.on { background: rgba(46, 125, 50, .9); }
#det-stop { position: absolute; left: 50%; top: 136px; transform: translateX(-50%); pointer-events: auto; border: 0; border-radius: 12px; background: rgba(16, 22, 16, .62); color: #fff; font: 700 13px var(--f); padding: 6px 12px; cursor: pointer; }

/* chat */
/* the chat zone, bottom left: the notice and the chat lines are children of this one column (not each placed on its own), just above what sits
   under the left thumb: the joystick you walk with, or the bigger one you drive with on a phone (--zone-bottom) */
:root { --zone-bottom: 150px; }
body.touch.driving { --zone-bottom: 176px; }
#chat { position: absolute; left: 12px; bottom: max(calc(var(--zone-bottom) + env(safe-area-inset-bottom)), var(--over-hint, 0px));   /* (--over-hint: just above the line of help, when that sits down here too: app.js) */ display: flex; flex-direction: column; gap: 6px; width: min(330px, 60vw); max-width: 60vw; pointer-events: none; }
#chat-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
#chat-list li { background: rgba(15,20,30,.55); color: #fff; font: 700 14px var(--f); padding: 6px 11px; border-radius: 14px 14px 14px 4px; width: fit-content; max-width: 100%; word-break: break-word; animation: fadein .2s ease-out; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
#chat-list li b { color: #ffd166; }
#chat-list li.mine { background: rgba(217,119,6,.6); }
/* a private message: red, and a tap answers it (the rest of the chat lets the taps through to the game) */
#chat-list li.pm { background: rgba(198,40,40,.82); pointer-events: auto; cursor: pointer; }
#chat-list li.pm b { color: #ffe0e0; }
#chat-form.pm { box-shadow: 0 0 0 3px #e53935, 0 6px 20px rgba(0,0,0,.25); }
#who-list .who-btns button.who-pm { flex: none; min-width: 38px; padding: 6px 8px; font-size: 15px; }
#chat:has(#chat-form.hidden) #chat-list li:nth-last-child(n+7), #chat:has(#chat-form.hidden) #chat-list li.old { display: none; }
/* (the chat open: the last ten, old ones too, in a list you scroll through) */
#chat:has(#chat-form:not(.hidden)) #chat-list { max-height: min(42vh, 340px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; scrollbar-width: thin; }
/* a phone: the chat small, the last three lines; open the chat (the speech bubble) and you see the last ten */
@media (max-width: 520px) {
  #chat { width: min(250px, 58vw); }
  #chat-list { gap: 3px; }
  #chat-list li { font-size: 12px; line-height: 1.3; padding: 3px 9px; border-radius: 11px 11px 11px 3px; }
  #chat:has(#chat-form.hidden) #chat-list li:nth-last-child(n+4) { display: none; }
  #sys-list li { font-size: 12px; padding: 4px 9px; }
}
#sys-list { list-style: none; display: flex; flex-direction: column; }
#sys-list li { background: rgba(0,60,90,.6); color: #d7f2ff; font: italic 700 13px var(--f); padding: 5px 11px; border-radius: 10px; width: fit-content; max-width: 100%; word-break: break-word; animation: fadein .2s ease-out; }
/* one white bar: the text, and in it on the right the round orange button with the paper plane (pale while there is nothing to send) */
#chat-form { display: flex; flex-direction: row; align-items: center; gap: 6px; width: 100%; max-width: none; margin-top: 8px; padding: 4px 4px 4px 16px; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: auto; }
#chat-form input { flex: 1; min-width: 0; font: 700 16px var(--f); padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--text); user-select: text; -webkit-user-select: text; }
#chat-form button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 0; padding: 0; background: linear-gradient(180deg, #ffa53d, #f07a12); box-shadow: 0 2px 8px rgba(240,122,18,.45); cursor: pointer; transition: transform .1s ease, opacity .15s ease; }
#chat-form button svg { width: 20px; height: 20px; fill: #fff; transform: translateX(-1px); }
#chat-form button:active { transform: scale(.9); }
#chat-form:has(input:placeholder-shown) button { opacity: .45; box-shadow: none; }

/* palette */
#palette {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); pointer-events: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.2); max-width: min(760px, 92vw);
}
#palette .prow { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
#palette .prow::-webkit-scrollbar { display: none; }
#palette button { flex-shrink: 0; border: 3px solid transparent; cursor: pointer; }
#palette button.sw { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; line-height: 1; }
#palette button.tool { min-width: 52px; height: 46px; border-radius: 12px; background: #f1f4f7; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; }
#palette button.tool small { font: 800 10px var(--f); color: var(--muted); }
#palette button.on { border-color: var(--text); }
#palette button.tool.on { background: #ffd166; }
body:not(.touch) #palette { bottom: 84px; }
body.touch #palette { bottom: auto; top: calc(62px + env(safe-area-inset-top)); left: 10px; transform: none; max-width: calc(100vw - 20px); }
body.touch.building #place { display: none; }

/* touch controls */
#pad { position: absolute; inset: 0; pointer-events: none; }
#stick { position: absolute; left: calc(24px + env(safe-area-inset-left)); bottom: calc(28px + env(safe-area-inset-bottom)); width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.3); border: 2px solid rgba(255,255,255,.6); pointer-events: auto; touch-action: none; }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.acts, .build-acts { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: auto; }
.build-acts { left: 24px; right: auto; bottom: calc(166px + env(safe-area-inset-bottom)); flex-direction: row; align-items: center; }
body:not(.touch) .build-acts { display: none; }
body.touch.building #hint { bottom: calc(250px + env(safe-area-inset-bottom)); }
body.touch.building #chat { bottom: max(calc(240px + env(safe-area-inset-bottom)), var(--over-hint, 0px)); }
body:not(.touch) .acts { bottom: 16px; flex-direction: row; }
.tb { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--card); font-size: 26px; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.25); touch-action: none; }
.tb.big { width: 76px; height: 76px; font-size: 34px; }
/* not much height (phones with the browser bars): smaller buttons, so the column never reaches the map */
@media (max-height: 760px) { body.touch .tb { width: 50px; height: 50px; font-size: 23px; } body.touch .tb.big { width: 66px; height: 66px; font-size: 30px; } body.touch .acts { gap: 8px; } }
@media (max-height: 620px) { body.touch .tb { width: 44px; height: 44px; font-size: 20px; } body.touch .tb.big { width: 58px; height: 58px; font-size: 26px; } body.touch .acts { gap: 6px; } }
.tb { transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.tb.on { background: #ffd166; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff9f1c, 0 4px 14px rgba(0,0,0,.3); transform: scale(1.06); }
.pill.on, .round.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff9f1c, 0 4px 14px rgba(0,0,0,.3); }
#who-pill.on { background: #ffd166; }
.tb:active { transform: scale(.94); }
#t-put { background: linear-gradient(180deg, #ffa353, #ff7a1a); color: #fff; }
#t-action { background: linear-gradient(180deg, #8ad0ff, #3b9ff0); }

#toast {
  position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 30; pointer-events: none;
  padding: 8px 14px; border-radius: 14px; background: var(--card); color: var(--text); font: 800 15px/1.3 var(--f); width: max-content; max-width: min(86vw, 420px); text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
#big {
  position: fixed; left: 50%; top: 35%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
  width: max-content; max-width: 92vw; text-align: center; line-height: 1.1; overflow-wrap: break-word;   /* (on a phone: smaller, and onto a second line) */
  font: 900 clamp(26px, 9vw, 96px) var(--f); color: #fff; text-shadow: 0 4px 0 #d97706, 0 10px 30px rgba(0,0,0,.4);
}
#big.anim { animation: pop 2.2s ease-out forwards; }
#conn { position: fixed; left: 50%; bottom: 30%; transform: translateX(-50%); z-index: 40; padding: 10px 18px; border-radius: 14px; background: var(--card); font-weight: 800; }

/* ---------- ranking ---------- */
.modal {
  position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(20,40,60,.6); animation: fadein .2s ease-out;
}
.panel { width: 100%; max-width: 440px; max-height: 100%; display: flex; flex-direction: column; background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel h2 { font: 900 24px var(--f); letter-spacing: .06em; }
.x { background: #eef1f4; border: 0; border-radius: 50%; color: var(--text); font: 900 22px var(--f); width: 46px; height: 46px; flex: none; cursor: pointer; display: grid; place-items: center; }
.x:hover { background: #ffd166; }
.x:active { transform: scale(.9); background: #ffd166; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tab { font: 800 14px var(--f); letter-spacing: .08em; color: var(--muted); background: #f1f4f7; border: 0; border-radius: 12px; padding: 10px; cursor: pointer; }
.tab.active { color: #fff; background: var(--orange); }
.lb-note { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 6px; font-weight: 700; }
#lb-list { list-style: none; overflow-y: auto; touch-action: pan-y; flex: 1; min-height: 120px; }
#lb-list li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; padding: 10px 8px; border-bottom: 1px solid #eef1f4; font-size: 18px; font-weight: 700; }
#lb-list li .r { color: var(--muted); }
#lb-list li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lb-list li .s { font-weight: 900; }
#lb-list li:nth-child(1) .r, #lb-list li:nth-child(1) .s { color: #d97706; }
#lb-list li.me { background: #fff4e0; border-radius: 10px; }
#lb-list li.msg { display: block; text-align: center; color: var(--muted); border: 0; padding: 26px 8px; }
#lb-me { text-align: center; color: #d97706; font-weight: 800; font-size: 16px; padding-top: 10px; min-height: 18px; }
/* an idea or a fault (the menu): which of the two, the text, send */
#scr-fb .panel-head h2 { font-size: 19px; letter-spacing: .04em; }
#scr-fb .panel-head { gap: 10px; }
#fb-form { align-items: stretch; text-align: left; }   /* (a form is centred elsewhere, as on the name screen) */
/* (on a phone, with a screenshot added, it is taller than the screen: it scrolls, so Versturen can always be reached) */
#fb-form, #fb-reply .panel { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#fb-form > *, #fb-reply .panel > * { flex-shrink: 0; }
@media (max-height: 700px) { #fb-text { min-height: 90px; height: 90px; } .fb-shot img { max-height: 110px; } }
#fb-send { align-self: center; }
.fb-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fb-kind button { font: 800 14px var(--f); color: var(--muted); background: #f1f4f7; border: 0; border-radius: 12px; padding: 11px 8px; cursor: pointer; }
.fb-kind button.on { color: #fff; background: var(--orange); }
.fb-label { font: 800 15px var(--f); color: var(--text); margin-bottom: 6px; }
#fb-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; border: 0; border-radius: 14px; background: #f1f4f7; padding: 12px; font: 700 16px/1.4 var(--f); color: var(--text); outline: none; }
#fb-text:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--orange); }
.fb-note { font: 600 12px var(--f); color: var(--muted); margin: 6px 2px 12px; }
#fb-send:disabled { opacity: .6; cursor: default; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes blink { 50% { opacity: .4; } }
@keyframes pop { 0% { transform: translate(-50%, -50%) scale(0); } 12% { transform: translate(-50%, -50%) scale(1.15); } 20%, 85% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

@media (max-height: 640px) {
  .screen { gap: 8px; }
  .logo { font-size: clamp(36px, 10vw, 60px); }
  .menu-card { gap: 10px; padding: 14px 16px 12px; }
  .btn.big { padding: 12px 32px; }
}
@media (max-width: 520px) {
  #minimap { width: 100px; height: 100px; }
  body #gear { top: calc(116px + env(safe-area-inset-top)); font-size: 11px; padding: 2px 8px; }   /* (under the smaller map) */
  .pill { font-size: 13px; padding: 7px 10px; }
  #chat { width: min(260px, 58vw); }
  #hint { font-size: 14px; }
}

.tb.live { background: #ff5252; color: #fff; animation: blink 1.2s ease-in-out infinite; }
/* who is talking right now: just under the map (the map stays where it is) */
#talkers { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(146px + env(safe-area-inset-top)); max-width: 180px; background: #ff5252; color: #fff; font: 800 13px var(--f); padding: 6px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 7; }
@media (max-width: 520px) { #talkers { top: calc(116px + env(safe-area-inset-top)); max-width: 112px; font-size: 12px; } }
body.touch #chat-form { position: fixed; left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 12; }
body.touch #chat-form input { font-size: 17px; }

/* ---------- meeting each other ---------- */
button.pill { border: 0; cursor: pointer; font-family: var(--f); }
#compass {
  position: absolute; left: 50%; top: calc(100px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: #0b2a6f; color: #fff; border: 2px solid #ffd23a; font: 800 15px var(--f); box-shadow: 0 3px 10px rgba(0,0,0,.25); pointer-events: none;
}
#compass-arrow { display: inline-block; font-size: 22px; color: #ffd23a; transition: transform .15s ease; }
/* one line, never over the map; on a phone small and under the speed, so a message up top never lands on it */
#compass { white-space: nowrap; max-width: min(80vw, calc(100vw - 320px)); }
#compass-txt { overflow: hidden; text-overflow: ellipsis; }
/* (the ✕ on the bar: your own route stopped; the bar itself lets taps through, this one catches them) */
#compass-stop { flex: none; pointer-events: auto; width: 26px; height: 26px; margin-left: 2px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; font: 900 14px var(--f); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#compass-stop.hidden { display: none; }
#compass-stop:hover { background: rgba(255,255,255,.35); }
@media (max-width: 520px) {
  #compass { top: calc(100px + env(safe-area-inset-top)); font-size: 12px; padding: 3px 10px 3px 7px; gap: 5px; max-width: calc(100vw - 150px); }
  #compass-arrow { font-size: 16px; }
  #toast { font-size: 13px; padding: 6px 12px; }
  body.driving #hint { top: calc(142px + env(safe-area-inset-top)); font-size: 12px; }
}
/* driving with the blue line and the arrow to follow: the line of help says nothing more, away with it */
body.driving.navon #hint, body.driving.nav-on #hint, body.fly-stick.nav-on #hint { display: none; }   /* (in an aeroplane the speed is then in the route bar itself) */   /* (nav-on: set every frame, also in an aeroplane following the rings) */
/* aiming a rifle: the button to put it away */
#hunt-stop { position: absolute; left: 50%; top: calc(50% + 82px); transform: translateX(-50%); pointer-events: auto; border: 0; border-radius: 12px; background: rgba(16, 22, 16, .62); color: #fff; font: 700 13px var(--f); padding: 6px 12px; cursor: pointer; }
#emotes {
  position: absolute; right: 84px; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; gap: 6px; padding: 8px; border-radius: 18px;
  background: var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.25); pointer-events: auto; max-width: calc(100vw - 110px); flex-wrap: wrap; justify-content: flex-end;
}
body:not(.touch) #emotes { bottom: 84px; }
#emotes button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f1f4f7; font-size: 24px; cursor: pointer; }
#emotes button:active { transform: scale(.9); }
#who-panel {
  position: absolute; left: 10px; top: calc(60px + env(safe-area-inset-top)); width: min(360px, calc(100vw - 20px)); max-height: 60vh; overflow: auto;
  background: #fff; border-radius: 18px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); pointer-events: auto; touch-action: pan-y;
}
.who-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: sticky; top: -10px; z-index: 2; background: #fff; padding: 4px 0; margin: -4px 0 0; }
.who-head b { font: 900 17px var(--f); }
#who-list { list-style: none; margin-top: 6px; }
#who-list li { display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #eef1f4; font: 700 15px var(--f); }
#who-list li .who-btns { grid-column: 2 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
#who-list li .who-btns button { min-height: 38px; }
#who-list li .who-btns button:last-child { flex: 1; }
#who-list li.msg { display: block; color: var(--muted); font-weight: 600; padding: 12px 4px; }
#who-list .c { width: 12px; height: 12px; border-radius: 50%; }
#who-list .n { display: flex; flex-direction: column; min-width: 0; }
#who-list .n small { font-weight: 600; color: var(--muted); font-size: 12px; }
#who-list .d { color: var(--muted); font-size: 12px; }
#who-list button { border: 0; border-radius: 10px; padding: 6px 9px; background: #f1f4f7; font: 800 13px var(--f); cursor: pointer; }
#who-list button:last-child { background: var(--orange); color: #fff; }
#lb-list li { grid-template-columns: 1fr auto; }
#lb-list li .n { white-space: normal; font-size: 15px; font-weight: 600; }
#lb-list li .s { font-weight: 700; color: var(--muted); font-size: 13px; }

/* ---------- hats, travel, tikkertje ---------- */
.hats { display: grid; grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 6px; }
.hats .hat { height: 40px; border-radius: 12px; border: 2px solid transparent; background: #f3f6f9; font-size: 21px; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.hats .hat:hover { background: #e7edf3; }
.hats .hat.on { border-color: var(--orange); background: #fff1e4; transform: scale(1.06); }
/* the travel window: one calm system. A title, one small status line, a search field, one row of tabs, equal cards, two quiet actions */
#travel-panel {
  position: absolute; left: 50%; top: calc(60px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(500px, calc(100vw - 20px)); max-height: 72vh; overflow: auto;
  background: #fff; border-radius: 20px; padding: 14px 16px 12px; box-shadow: 0 18px 44px rgba(16,24,40,.28); pointer-events: auto; touch-action: pan-y;
}
/* the title bar covers the panel's own padding above it too: else the list showed scrolling past above "Waar wil je heen?" */
#travel-panel > .who-head { top: -14px; margin-top: -14px; padding-top: 14px; }
#travel-list { margin-top: 8px; }
/* the two buttons over the list ("Wat kan ik doen?" and the one to your holiday): small, side by side, so the places come first */
#travel-todo, #travel-vak { display: inline-block; vertical-align: top; font-size: 13px; letter-spacing: 0; padding: 7px 12px; border-radius: 12px; margin: 2px 6px 2px 0; max-width: 100%; text-align: left; box-shadow: 0 3px 0 #c8d3dc, 0 4px 8px rgba(0,0,0,.12); }
#travel-todo:active, #travel-vak:active { transform: translateY(2px); box-shadow: 0 1px 0 #c8d3dc, 0 2px 4px rgba(0,0,0,.12); }
/* the search box and the chips stay on top while the list scrolls under them (the panel has 10px padding: hence top -10px) */
.travel-head { position: sticky; top: -10px; z-index: 1; margin: 0 -12px; padding: 4px 12px 0; background: #fff; border-bottom: 1px solid #e6ebf0; display: flex; flex-direction: column; gap: 8px; }
.travel-search { position: relative; display: block; }
.travel-search::before { content: '🔍'; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; }
.travel-search input { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; background: #f1f4f7; padding: 10px 12px 10px 36px; font: 700 15px var(--f); color: var(--text); outline: none; }
.travel-search input:focus { box-shadow: inset 0 0 0 2px var(--orange); background: #fff; }
.travel-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.travel-chips::-webkit-scrollbar { display: none; }
.travel-chips button { flex: none; border: 0; border-radius: 999px; padding: 7px 12px; background: #f1f4f7; color: #51606e; font: 800 13px var(--f); cursor: pointer; white-space: nowrap; }
.travel-chips button.on { background: var(--orange); color: #fff; }
.travel-sec h3 { margin: 0; padding: 10px 0 6px; font: 900 12px var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.travel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 360px) { .travel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.travel-grid button { border: 0; border-radius: 12px; padding: 8px 4px 7px; background: #f6f8fa; box-shadow: inset 0 0 0 1px #e6ebf0; font: 800 12px/1.15 var(--f); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.travel-grid button .em { font-size: 22px; line-height: 1; }
.travel-grid button:hover { background: #fff6e0; }
/* "Nieuw in Epe": a red dot on the menu tile when there is news you have not seen; the updates a day at a time */
#btn-news { position: relative; }
.news-dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #e53935; box-shadow: 0 0 0 2px #fff; }
.news-day { margin: 14px 0 6px; font: 800 12px/1.2 var(--f); color: #8a94a0; text-transform: uppercase; letter-spacing: .05em; }
.news-item { padding: 9px 11px; margin: 0 0 7px; border-radius: 12px; background: #f6f8fa; box-shadow: inset 0 0 0 1px #e6ebf0; }
.news-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.news-em { font-size: 20px; line-height: 1; }
.news-item p { margin: 5px 0 0; font-size: 13px; line-height: 1.35; color: var(--text); }
.news-tag { margin-left: auto; padding: 2px 7px; border-radius: 999px; font: 800 10px/1.3 var(--f); }
.news-tag.k-werk { background: #e3f4e5; color: #1b5e20; } .news-tag.k-plek { background: #e3eefc; color: #0d47a1; } .news-tag.k-nieuw { background: #f3e5f5; color: #6a1b9a; }
.news-tag.k-beter { background: #fff4d6; color: #7a5600; } .news-tag.k-achter { background: #eceff1; color: #455a64; }
.news-go { margin-top: 7px; border: 0; border-radius: 9px; padding: 5px 10px; background: #ffd166; font: 800 12px var(--f); cursor: pointer; }
/* a place that is new: a golden edge and NIEUW in its corner (two weeks, until you have been there: see TRAVEL_NEW) */
.travel-grid button { position: relative; }
.travel-grid button.new { background: #fffaf0; box-shadow: inset 0 0 0 2px #e0a800, 0 0 8px rgba(240, 180, 0, .35); }
.travel-new { position: absolute; top: -6px; right: -4px; padding: 1px 5px; border-radius: 6px; background: linear-gradient(#ffd54f, #f0a800); color: #4a3300; font: 900 9px/1.3 var(--f); letter-spacing: .04em; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.travel-sec.recent .travel-grid button { background: #fff3ea; box-shadow: inset 0 0 0 1px #ffd9bf; }
.travel-grid mark { background: #ffe1c9; color: inherit; border-radius: 3px; }
.travel-empty { padding: 20px 8px; text-align: center; color: var(--muted); font: 700 14px var(--f); }
.travel-grid button:active { background: #ffd166; transform: scale(.97); }
.travel-map { width: 100%; margin-top: 10px; border: 0; border-radius: 14px; padding: 11px; background: #e8f3ff; color: #14508c; font: 800 14px var(--f); cursor: pointer; }
.travel-note { margin-top: 8px; font: 600 13px var(--f); color: var(--muted); text-align: center; }
#tagline {
  position: absolute; left: 50%; top: calc(132px + env(safe-area-inset-top)); transform: translateX(-50%); white-space: nowrap;
  padding: 7px 16px; border-radius: 999px; background: rgba(255,23,68,.9); color: #fff; font: 900 15px var(--f); box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
#tagline.it { animation: blink 0.8s ease-in-out infinite; }
#who-list li.tagrow { display: block; border: 0; padding: 4px 0 8px; }
#who-list li.tagrow button { width: 100%; padding: 10px; background: #ff1744; color: #fff; font-size: 15px; }

.tb.live.talking { box-shadow: 0 0 0 4px #ffeb3b, 0 3px 10px rgba(0,0,0,.25); }

/* ---------- money, houses and the car dealer ---------- */
#money { background: #ffd166; color: #3a2a00; }
#money .lbl { font-weight: 800; }
#money b { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.55); }
#money::after { content: ' ▾'; font-size: 11px; opacity: .7; }
/* phones: the clock goes, the buttons get short (👥 3 · 🎒 € 708) so nothing slides under the map */
@media (max-width: 760px) { #clock { display: none; } }
@media (max-width: 560px) {
  .topbar { gap: 6px; right: calc(118px + env(safe-area-inset-right)); }
  #money .lbl, #who-pill .lbl { display: none; }
  #money b { margin-left: 2px; }
}
#deal-panel {
  position: absolute; left: 50%; top: calc(60px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); max-height: 70vh; overflow: auto;
  background: #fff; border-radius: 18px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); pointer-events: auto; touch-action: pan-y;
}
.deal-note { margin: 8px 2px; font: 600 15px var(--f); }
.deal-note.muted { color: var(--muted); font-size: 13px; }
.deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.deal-btn { border: 0; border-radius: 12px; padding: 10px 8px; background: #f1f4f7; font: 800 15px var(--f); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.deal-btn small { font-weight: 700; color: var(--muted); font-size: 12px; }
.deal-btn:not(:disabled):active { background: #ffd166; }
.deal-btn:disabled { opacity: .45; cursor: default; }
.deal-colors { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 2px; }
.deal-colors button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #e0e0e0; cursor: pointer; }
.deal-colors button.on { border-color: #222; transform: scale(1.12); }
body.building:not(.touch) #hint { bottom: 200px; }
.credits { margin-top: 6px; color: rgba(255,255,255,.75); font: 600 12px var(--f); }
.credits a { color: #fff; }

/* the mirror beside the window of a clothes shop (drawMirror in app.js draws you in it); on a phone the window is shorter to make room under it */
#mirror { position: fixed; z-index: 2; border: 4px solid #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.3); pointer-events: none; box-sizing: border-box; }
#mirror span { position: absolute; left: 8px; top: 6px; font: 800 12px var(--f); color: #4a5560; }
body.mirror-on #hint { visibility: hidden; }
body #deal-panel.fitting.fitting { max-height: 52vh; max-height: 52dvh; }   /* (.fitting twice: over body.touch #deal-panel below) */
/* on a phone the panels stay clear of the round buttons on the right */
body.touch #who-panel { width: calc(100vw - 104px); max-width: 360px; }
body.touch #deal-panel { left: 10px; transform: none; width: calc(100vw - 104px); max-width: 420px; }
/* (and always end inside the screen, over the joystick if need be: what does not fit scrolls inside. dvh: the screen as you see it, browser bars and all) */
body.touch #deal-panel, body.touch #who-panel { max-height: calc(100vh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
/* the panels lie on top of the round buttons, and on a phone the travel map fits the screen and scrolls inside */
#travel-panel, #who-panel, #deal-panel { z-index: 2; }
body.touch #travel-panel { position: fixed; left: 10px; right: 10px; margin: 0 auto; transform: none; width: auto; max-width: 440px; top: calc(56px + env(safe-area-inset-top));
  max-height: calc(100vh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 380px) { #travel-list { grid-template-columns: 1fr; } }

#t-bag { position: relative; }

#palette button.item { min-width: 52px; height: 46px; border-radius: 12px; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5px; line-height: 1; }
#palette button.item small { font: 800 9px var(--f); color: var(--muted); margin-top: 2px; white-space: nowrap; }
#palette button.item.on { background: #ffd166 !important; }

/* casino */
/* Crazy Time (crazytime.js): the time, the Top Slot, the eight spots, the Cash Hunt targets, the bonus game */
.ct-status { text-align: center; font: 700 15px var(--f); margin: 6px 0; }
.ct-top { text-align: center; font: 700 14px var(--f); color: #b8860b; margin: 4px 0 6px; }
.ct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.ct-spot { position: relative; border: 0; border-radius: 12px; padding: 10px 4px 8px; color: #fff; font: 900 15px var(--f); cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.45); min-height: 58px; }
.ct-spot small { display: block; font: 600 10px var(--f); opacity: .9; margin-top: 2px; }
.ct-spot i { position: absolute; top: -6px; right: -4px; font: 900 11px var(--f); font-style: normal; background: #ffd54f; color: #3a2a00; border-radius: 999px; padding: 2px 6px; text-shadow: none; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.ct-spot:disabled { opacity: .55; cursor: default; }
.ct-spot.top { box-shadow: 0 0 0 3px #ffd54f; }
.ct-spot.hit { box-shadow: 0 0 0 4px #fff, 0 0 14px 4px #ffd54f; opacity: 1; }
.ct-hunt { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 8px 0; }
.ct-hunt button { border: 0; border-radius: 8px; background: #27ae60; font-size: 20px; padding: 6px 0; cursor: pointer; }
.ct-bonus { display: block; width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.ct-last { text-align: center; font: 600 14px var(--f); margin: 6px 0; }
/* bingo in the casino (bingo.js): the prizes, the last balls (the newest large), who won, your cards with what is drawn marked */
.bg-prizes { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; margin: 4px 0 8px; font: 700 13px var(--f); }
.bg-prizes .jp { flex-basis: 100%; text-align: center; color: #c62828; }
.bg-last { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 6px 0 8px; }
.bg-last i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 900 10px/1 var(--f); font-style: normal; color: #fff; box-shadow: inset 0 0 0 5px rgba(255,255,255,.25); }
.bg-last i b { font-size: 15px; }
.bg-last i.now { width: 54px; height: 54px; font-size: 12px; } .bg-last i.now b { font-size: 22px; }
.bg-last .b0 { background: #1e88e5; } .bg-last .b1 { background: #e53935; } .bg-last .b2 { background: #9e9e9e; } .bg-last .b3 { background: #43a047; } .bg-last .b4 { background: #f9a825; }
.bg-won { margin: 4px 0; padding: 7px 10px; border-radius: 10px; background: #fff4d6; font: 700 13.5px var(--f); text-align: center; }
.bg-won small { color: var(--muted); }
.bg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.bg-card { border-radius: 12px; padding: 6px; background: #f3f6fb; box-shadow: inset 0 0 0 2px #c9d4ea; text-align: center; }
.bg-card.line { box-shadow: inset 0 0 0 2px #43a047; } .bg-card.full { box-shadow: inset 0 0 0 3px #f9a825; background: #fff6d8; }
.bg-card small { display: block; margin-top: 4px; font: 700 11.5px var(--f); color: var(--muted); }
.bg-head, .bg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.bg-head b { font: 900 13px var(--f); color: #fff; border-radius: 4px; } .bg-head .b0 { background: #1e88e5; } .bg-head .b1 { background: #e53935; } .bg-head .b2 { background: #757575; } .bg-head .b3 { background: #43a047; } .bg-head .b4 { background: #f9a825; }
.bg-grid { margin-top: 2px; }
.bg-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: #fff; font: 800 13px var(--f); color: #1f2937; }
.bg-grid span.hit { background: #ffb300; color: #3a2a00; box-shadow: inset 0 0 0 2px #c77800; }
.bg-grid span.free { background: #1c2f6e; color: #ffd54f; }
/* (in the casino the window is black and gold) */
#deal-panel.lux .bg-prizes .jp { color: #ff8a80; } #deal-panel.lux .bg-prizes b { color: #ffd76a; }
#deal-panel.lux .bg-won { background: rgba(201,161,59,.12); border: 1px solid rgba(201,161,59,.4); color: #f3e9d2; } #deal-panel.lux .bg-won b { color: #ffd76a; } #deal-panel.lux .bg-won small { color: #a8987a; }
#deal-panel.lux .bg-card { background: #17131a; box-shadow: inset 0 0 0 1px #8a6e2a; } #deal-panel.lux .bg-card small { color: #c9b98f; }
#deal-panel.lux .bg-card.line { box-shadow: inset 0 0 0 2px #66bb6a; } #deal-panel.lux .bg-card.full { background: #2a2010; box-shadow: inset 0 0 0 3px #f0c45a; }
#deal-panel.lux .bg-grid span { background: #241c22; color: #f3e9d2; } #deal-panel.lux .bg-grid span.hit { background: linear-gradient(180deg, #f0c45a, #b98a1e); color: #1a1205; box-shadow: none; }
.ct-zoom { display: block; width: 100%; height: auto; border-radius: 10px; margin: 6px 0; }
.ct-status .ct-ovbtn { border: 0; border-radius: 999px; background: #ffd54f; color: #3a2a00; font: 800 12px var(--f); padding: 2px 10px; margin-left: 6px; cursor: pointer; }
.ct-overlay .ct-ovpanel { width: min(94vw, 560px); }
.ct-ctl { margin-top: 4px; }
.ct-say { text-align: center; font: 700 14px var(--f); margin: 6px 0; }
.ct-flaps { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.ct-flaps button { flex: 1; border: 0; border-radius: 12px; padding: 12px 0; color: #fff; font: 900 16px var(--f); text-shadow: 0 1px 2px rgba(0,0,0,.4); cursor: pointer; }
.cas-show { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.cas-show span { width: 64px; height: 64px; border-radius: 12px; background: #1b1b1b; border: 3px solid #d4af37; font-size: 40px; display: flex; align-items: center; justify-content: center; }
.cas-show .rn { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 900 32px var(--f); color: #fff; border: 3px solid #d4af37; }
.cas-show .rn.r { background: #c62828; } .cas-show .rn.z { background: #111; } .cas-show .rn.g { background: #2e7d32; } .cas-show .rn.w { background: #4a148c; font-size: 38px; }
.cas-show.cas-card { flex-wrap: wrap; gap: 5px; max-width: 290px; margin: 8px auto; }
.cas-show.cas-card span { width: 40px; height: 40px; border-radius: 9px; border-width: 2px; font-size: 22px; }
.cas-show.cas-card.many { gap: 3px; }
.cas-show.cas-card.many span { width: 22px; height: 22px; border-radius: 5px; border-width: 1px; font-size: 12px; }
.cas-show.bj { flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cas-show.bj span { position: relative; width: 52px; height: 74px; border-radius: 8px; background: linear-gradient(160deg, #fff, #f1ece0); color: #15161a; border: 1px solid #b9a67a; box-shadow: 0 3px 8px rgba(0,0,0,.45); font-size: 0; }
.cas-show.bj span b { font: 400 30px/1 Georgia, serif; }
.cas-show.bj span i { position: absolute; left: 4px; top: 3px; font: 900 11px/1.05 Georgia, serif; font-style: normal; text-align: center; }
.cas-show.bj span i.dn { left: auto; top: auto; right: 4px; bottom: 3px; transform: rotate(180deg); }
.cas-show.bj span.r { color: #b3141c; }
.cas-show.bj span.back { background: repeating-linear-gradient(45deg, #6e0f18 0 6px, #8a1620 6px 12px); border: 2px solid #e8c874; } .cas-show.bj span.back b { color: #e8c874; font-size: 24px; }
/* the casino and the hotel: the panel in black and gold */
#deal-panel.lux { background: linear-gradient(170deg, #1d1416, #0e0c0f 70%); color: #f3e9d2; border: 1px solid #c9a13b; box-shadow: 0 0 0 3px rgba(201,161,59,.18), 0 16px 40px rgba(0,0,0,.6); }
#deal-panel.lux .who-head { background: #1d1416; border-bottom: 1px solid rgba(201,161,59,.45); padding-bottom: 6px; margin-bottom: 4px; }
#deal-panel.lux .who-head b { color: #f0c45a; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .5px; }
#deal-panel.lux .x { background: rgba(255,255,255,.08); color: #f3e9d2; }
#deal-panel.lux .deal-note { color: #f3e9d2; } #deal-panel.lux .deal-note b { color: #ffd76a; } #deal-panel.lux .deal-note.muted { color: #a8987a; }
#deal-panel.lux .cas-show span { background: #0b0b0d; border-color: #c9a13b; box-shadow: inset 0 0 12px rgba(201,161,59,.25); }
#deal-panel.lux .cas-show.bj span { background: linear-gradient(160deg, #fff, #f1ece0); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
#deal-panel.lux .cas-show.bj span.back { background: repeating-linear-gradient(45deg, #6e0f18 0 6px, #8a1620 6px 12px); }
#deal-panel.lux .cas-msg { background: rgba(201,161,59,.1); border: 1px solid rgba(201,161,59,.3); border-radius: 10px; padding: 8px; }
#deal-panel.lux .cas-bets button { background: #17131a; color: #f3e9d2; border: 1px solid #8a6e2a; padding: 9px 13px; min-width: 52px; }
#deal-panel.lux .cas-bets button.on { background: linear-gradient(180deg, #f0c45a, #b98a1e); color: #1a1205; border-color: #ffe29a; box-shadow: 0 0 10px rgba(240,196,90,.5); }
#deal-panel.lux .cas-go { background: linear-gradient(180deg, #f0c45a, #a87a14); color: #1a1205; border: 1px solid #ffe29a; box-shadow: 0 4px 0 #6a4c08; }
#deal-panel.lux .cas-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #6a4c08; }
#deal-panel.lux .cas-go + .cas-go { background: linear-gradient(180deg, #3a2a30, #1f171b); color: #f3e9d2; border-color: #8a6e2a; box-shadow: 0 4px 0 #0a0809; }
#deal-panel.lux .deal-btn { background: #17131a; color: #f3e9d2; border: 1px solid #c9a13b; } #deal-panel.lux .deal-btn small { color: #c9b98f; } #deal-panel.lux .deal-btn:disabled { opacity: .45; }
#deal-panel.lux .tw-q button { background: #17131a; color: #f3e9d2; border: 1px solid #8a6e2a; } #deal-panel.lux .tw-q button.on { background: linear-gradient(180deg, #f0c45a, #b98a1e); color: #1a1205; border-color: #ffe29a; }
.cas-msg { text-align: center; min-height: 2.6em; }
.cas-bets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.cas-bets button { border: 2px solid #d4af37; background: #fff8e1; border-radius: 10px; padding: 7px 11px; font: 800 14px var(--f); cursor: pointer; }
.cas-bets button.on { background: #d4af37; color: #000; }
.cas-go { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 14px; padding: 14px; background: linear-gradient(180deg, #ff5252, #b71c1c); color: #fff; font: 900 17px var(--f); cursor: pointer; }
.cas-go:disabled { opacity: .5; }

/* ---------- the church organ ---------- */
.organ-keys { display: flex; position: relative; height: 120px; margin: 8px 0 4px; user-select: none; touch-action: none; }
.organ-keys .ok { flex: 1; border: 1px solid #555; border-radius: 0 0 6px 6px; background: #fffdf5; font: 800 11px var(--f); color: #888; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; cursor: pointer; }
.organ-keys .ok.b { flex: 0 0 0; width: 0; position: relative; z-index: 2; margin: 0 -11px; min-width: 22px; height: 72px; background: #222; border-color: #000; }
.organ-keys .ok.on { background: #ffd166; }
.organ-keys .ok.b.on { background: #ff9f1c; }

/* ---------- De Haan Makelaars: the houses for sale ---------- */
.realtor-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
@media (max-width: 420px) { .realtor-list { grid-template-columns: 1fr; } }
.realtor-card { background: #f1f4f7; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 3px; border-left: 4px solid #1f3a68; }
.realtor-card .rc-top { display: flex; justify-content: space-between; gap: 6px; font: 800 15px var(--f); }
.realtor-card .rc-top span { color: #1f3a68; }
.realtor-card .rc-street, .realtor-card .rc-facts { font: 700 12px var(--f); color: var(--muted); }
.realtor-card .rc-btns { display: flex; gap: 6px; margin-top: 4px; }
.realtor-card .rc-btns button { flex: 1; border: 0; border-radius: 10px; padding: 8px 6px; background: #fff; font: 800 13px var(--f); cursor: pointer; }
.realtor-card .rc-btns button.buy { background: #1f3a68; color: #fff; }
.realtor-card .rc-btns button:disabled { opacity: .45; cursor: default; }

/* the speedometer while driving: tap it to choose how fast you want to go */
#gear { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: calc(146px + env(safe-area-inset-top)); z-index: 1; pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap;   /* small, under the map, under the panels (the one for a job you get in for goes over it) */
  padding: 3px 9px; font-size: 12px; background: rgba(20,26,40,.42); color: #fff; box-shadow: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#gear.over { background: rgba(214,40,40,.8); color: #fff; }

/* the buttons for what a key does on a laptop (load the truck, spray shop, fuel): orange with a white rim and a thick edge that sinks when
   you tap it, breathing a little so you see it is there */
#act-bar .act { pointer-events: auto; border: 3px solid #fff; border-radius: 18px; padding: 12px 22px; font: 900 18px var(--f); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); background: linear-gradient(180deg, #ffb04a, #f07800); box-shadow: 0 6px 0 #a94f00, 0 10px 20px rgba(0,0,0,.35);
  cursor: pointer; touch-action: manipulation; animation: actPulse 1.6s ease-in-out infinite; white-space: nowrap; }
#act-bar .act:active { transform: translateY(5px); box-shadow: 0 1px 0 #a94f00, 0 4px 10px rgba(0,0,0,.3); animation: none; }
#act-bar .act.aid { padding: 9px 13px; font: 800 13px var(--f); color: #1c2733; text-shadow: none; background: rgba(255,255,255,.9); box-shadow: 0 4px 14px rgba(0,0,0,.25); border: 0; animation: none; }
@keyframes actPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* a phone upright: the hint wraps onto more lines left of the row of buttons on the right, instead of running under them */
@media (max-width: 600px) { body.touch #hint { left: 12px; right: 84px; transform: none; white-space: normal; max-width: none; } }

/* Mijn spullen: your houses one line each, the one you tap opens with its buttons */
.house-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.house-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 12px; padding: 9px 12px; background: #f1f4f7; color: var(--text); font: 800 15px var(--f); text-align: left; cursor: pointer; }
.house-row > span:first-child { flex: 1; min-width: 0; }
.house-row small { display: block; font-weight: 700; color: var(--muted); font-size: 12px; }
.house-row .hr-val { text-align: right; white-space: nowrap; }
.house-row .hr-up { color: #2e7d32; }
.house-row .hr-funda { color: #e65100; }
.house-row .hr-arrow { color: var(--muted); font-size: 13px; }
.house-row.open { background: #ffe9b3; }
.house-acts { margin-top: -2px; margin-bottom: 4px; padding: 8px; background: #fff6dc; border-radius: 12px; }
.house-acts .deal-btn { background: #fff; }
.deal-grid.three { grid-template-columns: repeat(3, 1fr); }
/* the amount of your own at the Veiling van Epe: as big as the button beside it, the font 16px so a phone does not zoom in */
.ve-bid { min-width: 0; border: 2px solid #d6dde4; border-radius: 12px; padding: 10px; font: 800 16px var(--f); background: #fff; color: #1b1b1b; }
#deal-panel.lux .ve-bid { background: #17131a; color: #f3e9d2; border-color: #c9a13b; }
/* Marktplaats: a tile for each thing for sale; tapped, its offers the cheapest first */
/* what the parts of the game put on the page themselves (the flights, the travel desk, the farm, diving, the jetski…): only in the village, never over the start page */
body.not-play #vl-chip, body.not-play #vak-btn, body.not-play #vlieg-btn, body.not-play #vl-pimp, body.not-play #jet-btn, body.not-play .boer-chip, body.not-play .boer-card, body.not-play .kaas-labels,
body.not-play .dz-go, body.not-play .dz-card, body.not-play .dk-hud, body.not-play .dk-pad, body.not-play .dk-tint, body.not-play .xp-drop, body.not-play .xp-card { display: none !important; }
.mp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-top: 6px; }
.mp-tile { border: 0; border-radius: 12px; padding: 10px 6px 8px; background: #f1f4f7; font: 800 13px var(--f); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.mp-tile b { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.mp-tile small { font-weight: 700; color: var(--muted); font-size: 11px; }
.mp-tile:active { background: #ffd166; }
.mp-from { font: 900 13px var(--f); color: var(--orange); white-space: nowrap; }
.mp-em { font-size: 28px; line-height: 1.1; }
.mp-back { border: 0; background: none; font: 800 14px var(--f); color: var(--orange); padding: 2px 0 6px; cursor: pointer; }
.mp-head { display: flex; align-items: center; gap: 10px; font: 900 18px var(--f); margin: 2px 0 4px; }
.mp-head .mp-em { font-size: 34px; }
.mp-offers { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.mp-offer { display: flex; align-items: center; gap: 10px; background: #f1f4f7; border-radius: 12px; padding: 6px 8px 6px 12px; }
.mp-o-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-o-info b { font: 900 16px var(--f); }
.mp-o-info small { font-weight: 700; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-buy { border: 0; border-radius: 10px; padding: 9px 14px; background: var(--orange); color: #fff; font: 800 14px var(--f); cursor: pointer; flex: none; }
.mp-buy:disabled { background: #cfd6dd; cursor: default; }
/* where did my money go */
.led-link { display: block; margin: -2px 0 8px; font: 800 14px var(--f); }
.led-row .mp-o-info b { font: 800 14px var(--f); white-space: normal; }
.led-row .mp-o-info small { white-space: normal; }
.led-amt { flex: none; font: 900 15px var(--f); font-variant-numeric: tabular-nums; }
.led-amt.up { color: #2e7d32; }
.led-amt.down { color: #c62828; }
.deal-grid.three .deal-btn { font-size: 13px; padding: 8px 7px; }

#t-run.on { outline: 3px solid #ff9800; background: #ffe0b2; transform: scale(1.08); }
#t-siren { font-size: 20px; }
#t-siren.on { outline: 3px solid #2979ff; }   /* (the siren on: a blue rim) */

/* ---------- the buttons at the bottom: one set — dark glass, a fine light rim, white line icons, an orange accent for what is on ---------- */
.tb { background: linear-gradient(180deg, rgba(38,48,72,.92), rgba(18,24,40,.92)); color: #fff; border: 1.5px solid rgba(255,255,255,.28); box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; position: relative; padding: 0; -webkit-tap-highlight-color: transparent; }
.tb.hidden { display: none; }
.tb .ic { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tb.big .ic { width: 46%; height: 46%; stroke-width: 2.2; }
body:not(.touch) .tb:hover { border-color: rgba(255,255,255,.6); transform: translateY(-2px); }
.tb:active { transform: scale(.93); }
.tb.on { background: linear-gradient(180deg, #ffb347, #ff8a1a); color: #1c1203; border-color: #ffe0b0; box-shadow: 0 0 0 3px rgba(255,159,28,.35), 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); transform: scale(1.06); }
.tb:disabled { opacity: .45; }
/* the action button: the same button, a size bigger, with an orange rim while there is something to do */
#t-action { background: linear-gradient(180deg, rgba(38,48,72,.95), rgba(18,24,40,.95)); border: 2px solid #ffb347; box-shadow: 0 0 0 4px rgba(255,159,28,.22), 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25); }
#t-action.on { background: linear-gradient(180deg, #ffb347, #ff8a1a); }
#t-put { background: linear-gradient(180deg, #ffb347, #ff8a1a); color: #1c1203; border-color: #ffe0b0; }
#t-run.on { outline: none; }
.tb.live { background: linear-gradient(180deg, #ff6b6b, #d92b2b); color: #fff; border-color: #ffc9c9; animation: none; box-shadow: 0 0 0 3px rgba(255,82,82,.35), 0 4px 12px rgba(0,0,0,.35); }
.tb.live.talking { box-shadow: 0 0 0 4px #ffe45c, 0 4px 12px rgba(0,0,0,.35); }
.tb .badge { position: absolute; top: -4px; right: -4px; }
/* on a computer they sit together in a dock */
body:not(.touch) .acts { gap: 8px; padding: 8px 10px; border-radius: 40px; background: rgba(12,16,28,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); align-items: center; }
body:not(.touch) .tb { width: 50px; height: 50px; font-size: 24px; } body:not(.touch) .tb.big { width: 62px; height: 62px; font-size: 30px; }

/* ---------- driving a car on a phone: the steering bar under the left thumb, the pedals under the right ---------- */
#drive-pad.hidden { display: none; }
body.driving #stick { display: none; }
body.driving #t-jump { display: none; }
#d-steer { position: absolute; left: 18px; bottom: calc(26px + env(safe-area-inset-bottom)); width: min(46vw, 230px); height: 76px; border-radius: 38px; background: linear-gradient(180deg, rgba(38,48,72,.82), rgba(18,24,40,.82)); border: 1.5px solid rgba(255,255,255,.3); box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
#d-steer .d-arrow { color: rgba(255,255,255,.75); font-size: 22px; pointer-events: none; }
#d-knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: linear-gradient(180deg, #ffffff, #d9dee8); box-shadow: 0 3px 8px rgba(0,0,0,.4); pointer-events: none; transition: transform .08s linear; }
#d-steer.on { border-color: #ffb347; } #d-steer.on #d-knob { background: linear-gradient(180deg, #ffb347, #ff8a1a); transition: none; }
#d-pedals { position: absolute; right: calc(84px + env(safe-area-inset-right)); bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
.ped { width: 68px; height: 84px; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.3); background: linear-gradient(180deg, rgba(38,48,72,.9), rgba(18,24,40,.9)); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; -webkit-tap-highlight-color: transparent; padding: 0; }
.ped .ic { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.ped small { font: 900 11px var(--f); letter-spacing: 1px; opacity: .85; pointer-events: none; }
.ped.gas { height: 108px; width: 76px; border-color: #8fe3a2; }
.ped.on { transform: scale(.95); background: linear-gradient(180deg, #ffb347, #ff8a1a); color: #1c1203; border-color: #ffe0b0; }
.ped.gas.on { background: linear-gradient(180deg, #7ee08f, #2fae4f); border-color: #d6ffe0; }
@media (max-height: 620px) { .ped { width: 58px; height: 70px; } .ped.gas { width: 64px; height: 88px; } #d-steer { height: 64px; } #d-knob { width: 52px; height: 52px; margin: -26px 0 0 -26px; } }

/* ---------- 📺 the livecam: the bar along the bottom, as on television; a quieter screen while watching ---------- */
#livecam { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px); padding: 8px 10px; border-radius: 14px; background: rgba(15, 18, 26, .82); color: #fff; font: 800 16px var(--f); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
#livecam.hidden { display: none; }
#livecam .live-txt { flex: 1; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#livecam .live-b { flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font: 800 16px var(--f); cursor: pointer; }
#livecam .live-x { background: #e5484d; }
body.livecam #pad, body.livecam #hint, body.livecam #compass, body.livecam #gear, body.livecam #emotes, body.livecam #crosshair, body.livecam #hunt-hud, body.livecam #det-hud, body.livecam #det-stop, body.livecam #touch, body.livecam .touch { display: none !important; }

/* ---------- the tools at the bottom of the start card: a grid that stays inside the card (they stood in one row that did not wrap, so
   the last ones stuck out). Two columns, every button as high as the next ---------- */
.menu-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; box-sizing: border-box; }
.menu-tools .btn { flex: none; min-width: 0; width: 100%; height: 44px; padding: 0 6px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; }
.menu-tools .btn.hidden { display: none; }
.menu-tools .btn.icon { flex: none; padding: 0; font-size: 18px; }
@media (max-width: 440px) { .menu-tools { gap: 6px; } .menu-tools .btn { font-size: 12px; padding: 0 3px; gap: 3px; letter-spacing: -.2px; } }

/* ---------- driving on a phone, the whole layout: steering under the left thumb (a left half and a right half), brake and gas under the right,
   the column of buttons reduced to the map and getting out and lifted over the pedals, the hint short and at the top ---------- */
body.driving .acts .tb { display: none; }
body.driving .acts #t-travel, body.driving .acts #t-action:not(.hidden) { display: inline-flex; }
body.driving .acts { bottom: calc(150px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right)); gap: 10px; }
body.driving #t-action { width: 58px; height: 58px; font-size: 26px; }
#d-pedals { right: calc(14px + env(safe-area-inset-right)); gap: 16px; }
#d-steer { left: 14px; width: min(44vw, 220px); height: 84px; border-radius: 22px; padding: 0; overflow: hidden; }
#d-steer .d-arrow { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }
#d-steer .d-arrow:first-child { border-right: 1.5px solid rgba(255,255,255,.28); }
#d-steer.l .d-arrow:first-child, #d-steer.r .d-arrow:last-child { background: linear-gradient(180deg, #ffb347, #ff8a1a); color: #1c1203; }
#d-knob { display: none; }
.ped { width: 64px; height: 84px; } .ped.gas { width: 72px; height: 104px; }
body.driving #hint { top: calc(124px + env(safe-area-inset-top)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); font-size: 13px; padding: 5px 12px; border-radius: 12px; white-space: nowrap; max-width: 78vw; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
@media (max-height: 620px) { .ped { width: 56px; height: 68px; } .ped.gas { width: 62px; height: 84px; } #d-steer { height: 68px; } body.driving .acts { bottom: calc(118px + env(safe-area-inset-bottom)); } }

/* ---------- the entrance: a card with a picture of the village on top (the casino), the gold name over it ---------- */
#scr-name { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: radial-gradient(ellipse at center, rgba(20,45,75,.25), rgba(20,45,75,.6) 75%); justify-content: safe center; }
.menu-card.entree { padding: 0; gap: 0; overflow: hidden; max-width: 420px; flex: none; }
.entree .hero { position: relative; height: 190px; background: #2d5f9a url(markt.jpg) center 22%/cover no-repeat; }
.entree .hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,4,2,.15) 0%, rgba(8,4,2,.35) 45%, rgba(8,4,2,.88) 100%); }
.entree .hero-in { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.entree .kicker { font: 900 12px var(--f); letter-spacing: .22em; color: #1a1205; background: linear-gradient(90deg, #f6d36b, #d4af37); padding: 4px 12px; border-radius: 999px; }
.entree .hero-title { font: 900 58px/1 var(--f); letter-spacing: -.01em; color: #f3cf5e;
  background: linear-gradient(180deg, #fff6cf 0%, #f3cf5e 48%, #c8932a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 10px rgba(255,190,60,.35)); }
.entree .online { font-size: 13px; color: #fff; margin-top: 2px; }
.entree .card-body { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px 16px; }
.entree .menu-hello { justify-content: flex-start; gap: 12px; text-align: left; }
/* (your personal messages: a small round button on the right of the hello, only when there are any, a red dot when one is unread) */
.dm-round { position: relative; margin-left: auto; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f6eedf; font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 0 #e3d3b6; }
.dm-round.hidden { display: none; }
.dm-round:hover { background: #f1e4cc; }
.dm-round .news-dot { top: 1px; right: 1px; }
/* (a page older than the server: the band at the top, asking to load again) */
#newver { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 100; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 9px 10px 9px 14px; border-radius: 14px; background: #1f2937; color: #fff; font: 700 14px var(--f); display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
#newver .nv-em { flex: none; font-size: 20px; }
#newver .nv-txt { flex: 1 1 auto; min-width: 0; line-height: 1.3; font-weight: 600; }
#newver .nv-txt b { font-weight: 900; }
@media (max-width: 600px) { #newver { top: calc(70px + env(safe-area-inset-top)); width: calc(100vw - 24px); } }
#newver button { flex: none; border: 0; border-radius: 10px; padding: 7px 12px; background: #ff8a1f; color: #fff; font: 900 14px var(--f); cursor: pointer; }
.me-dot { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 900 22px var(--f); color: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.15); }
.me-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.me-txt b { overflow: hidden; text-overflow: ellipsis; }
.link-btn { border: 0; background: none; padding: 2px 0; font: 800 14px var(--f); color: #c2610c; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #9a4a06; }
.entree .who { font: 900 24px var(--f); text-align: center; }
.entree form { max-width: none; margin: 0; }
.entree #name-form input { box-shadow: 0 0 0 1px #e1e7ee, 0 6px 18px rgba(0,0,0,.08); border-color: #f3f6f9; }
.entree #name-form input:focus { border-color: var(--orange); }
.entree .btn.big { min-width: 0; width: 100%; }
.entree .err { color: #fff; }
.entree .name-note { color: var(--muted); background: #f3f6f9; max-width: none; font-size: 13px; }
.name-new { width: 100%; background: #fff7ec; border: 2px solid #ffb36b; border-radius: 16px; padding: 12px 14px; text-align: center; font: 700 15px/1.4 var(--f); }
.name-new .small { font-size: 13px; color: var(--muted); margin-top: 4px; }
.name-new .row { margin-top: 10px; }
.name-new .btn { font-size: 15px; padding: 10px 14px; }
.shop-tip { font: 700 12.5px var(--f); color: var(--muted); text-align: center; }
@media (max-height: 640px) { .entree .hero { height: 130px; } .entree .hero-title { font-size: 44px; } .entree .card-body { gap: 10px; padding: 12px 16px; } }
/* (on the entrance card: four columns, a button with words takes two, the sound and the camera one each: two neat rows) */
.entree .menu-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.entree .menu-tools .btn { grid-column: span 2; }
.entree .menu-tools .btn.icon { grid-column: span 1; }
.name-new .row { flex-wrap: nowrap; }
.name-new .btn { flex: 1; min-width: 0; font-size: 14px; padding: 10px 8px; white-space: nowrap; }
/* (the entrance in the warm colours of the picture: dark round it, browser bars in the same dark (theme-color), the card cream, not cool grey) */
html, body { background: #140d07; }
#loading { background: radial-gradient(ellipse at center, #3a2410, #140d07 75%); color: #f3cf5e; }
#scr-menu, #scr-name { background: radial-gradient(ellipse at center, rgba(40,24,10,.35), rgba(16,10,5,.86) 78%); }
.menu-card.entree { background: #fffaf1; box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(243,207,94,.35); }
.entree .menu-tools .btn { background: #f6eedf; box-shadow: 0 4px 0 #e2d3b7; }
.entree .menu-tools .btn:active { box-shadow: 0 1px 0 #e2d3b7; }
.entree .now-list li { background: #f6eedf; }
.entree .menu-sec.now { border-top-color: #efe3cc; }
/* the settings in the menu: a row each, the name (and a word of help) on the left, every choice on the right, the one that is on in orange */
.menu-set { background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px #efe3cc, 0 2px 8px rgba(120, 80, 20, .06); padding: 2px 14px; }
/* the start page: how many are in the village, big; what to do as three tiles; the settings each with their picture */
.entree .live-count { margin-top: 6px; padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .5); box-shadow: 0 0 0 1px rgba(243, 207, 94, .35); font: 800 14px var(--f); gap: 9px; }
.entree .live-count b { font: 900 21px/1 var(--f); color: #f6d36b; margin-right: 2px; }
.entree .menu-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; gap: 8px; }   /* (three on a row: Livecam and Mijn vliegbrevet come on the next) */
.entree .menu-tools .btn.tile { grid-column: auto; height: auto; min-height: 76px; padding: 10px 4px 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font: 800 12.5px/1.15 var(--f); white-space: normal; text-align: center; border-radius: 16px; }
.entree .menu-tools .btn.tile.hidden { display: none; }
.t-ico { font-size: 26px; line-height: 1; }
/* (Livecam and Mijn vliegbrevet, only for some: a wide flat button under the three tiles, not a tile alone on a row) */
.entree .menu-tools .btn.tile.extra { grid-column: 1 / -1; min-height: 0; height: 46px; flex-direction: row; gap: 9px; font-size: 14px; }
.entree .menu-tools .btn.tile.extra .t-ico { font-size: 20px; }
/* (sharing the village on WhatsApp: a wide button as Livecam, in WhatsApp's own green) */
.entree .menu-tools .btn.tile.share { background: #25d366; color: #fff; box-shadow: 0 4px 0 #189c4a; }
.entree .menu-tools .btn.tile.share:hover { background: #22c35e; }
.set-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f6eedf; font-size: 17px; }
.set-row .set-name { flex: 1 1 90px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #efe3cc; text-align: left; flex-wrap: wrap; }
.set-row .seg, .set-row #set-steer { margin-left: auto; }
/* (a phone: every choice under its name, as wide as the row, the buttons equally wide: the same on every row) */
@media (max-width: 480px) {
  .set-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; }
  .set-row .seg, .set-row #set-steer { grid-column: 2; margin-left: 0; width: 100%; max-width: none; }
  .set-row .seg { display: flex; }
  .set-row .seg button { flex: 1; }
}
.set-row { row-gap: 6px; }
@media (pointer: coarse) { #set-cam-v { display: none; } }   /* (toets V: there is no keyboard on a phone) */
.set-row:last-child { border-bottom: 0; }
.set-row.hidden { display: none; }
.set-name { font: 800 14px var(--f); color: var(--text); min-width: 0; }
.set-name small { display: block; font: 600 12px var(--f); color: var(--muted); }
.set-name small.hidden { display: none; }
.seg { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: #f6eedf; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 11px; font: 800 13px var(--f); color: #6b5a44; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--orange); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.seg button:focus-visible, #set-steer:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
#set-steer { flex: none; max-width: 60%; border: 0; border-radius: 999px; background: #f6eedf; padding: 8px 12px; font: 800 13px var(--f); color: var(--text); }
@media (max-width: 360px) { .seg button { padding: 7px 8px; font-size: 12px; } }
.entree .name-note { background: #f6eedf; }
.entree #name-form input { border-color: #f6eedf; box-shadow: 0 0 0 1px #eadcc2, 0 6px 18px rgba(80,50,10,.08); }
.screen .other { background: rgba(0,0,0,.45); }
/* De Haan: the showpieces, gold-edged, above the list of all the houses */
.realtor-card.showpiece { background: linear-gradient(180deg, #fffaf0, #fbf1dc); border-left-color: #c8932a; box-shadow: 0 0 0 1px rgba(200,147,42,.25); }
.realtor-card.showpiece .rc-top span { color: #9a6b12; }
.realtor-card.showpiece .rc-btns button.buy { background: linear-gradient(180deg, #e2b13c, #c8932a); color: #1a1205; }
.realtor-card .rc-sold { flex: 1; font: 800 13px var(--f); color: #2e7d32; padding: 6px 2px; }
/* the Praten button: a green ring while you are in a party (then the microphone can go on), red while it is on */
.tb.party:not(.live) { box-shadow: 0 0 0 3px #3ccf6e, 0 4px 12px rgba(0,0,0,.35); }
.mic-switch .btn, .mic-switch button { font-size: 17px; padding: 14px 10px; }
.mic-switch button.live { background: linear-gradient(180deg, #ff6b6b, #d92b2b); color: #fff; }

/* ---------- steering with the joystick (the standard; see the menu): a round base, the knob you push left or right, no arrows ---------- */
#d-steer.joy { width: 132px; height: 132px; border-radius: 50%; overflow: visible; background: radial-gradient(circle, rgba(38,48,72,.55), rgba(18,24,40,.85)); border: 2px solid rgba(255,255,255,.35); }
#d-steer.joy .d-arrow { display: none; }
#d-steer.joy #d-knob { display: block; width: 62px; height: 62px; margin: -31px 0 0 -31px; }
#d-steer.joy.on { border-color: #ffb347; }
@media (max-height: 620px) { #d-steer.joy { width: 112px; height: 112px; } }
/* the joystick on the right, gas and brake on the left (the third choice in the menu) */
body.steer-swap #d-steer { left: auto; right: 14px; }
body.steer-swap #d-pedals { right: auto; left: 14px; flex-direction: row-reverse; }
body.steer-swap.driving .acts { bottom: calc(176px + env(safe-area-inset-bottom)); }
/* ---------- flying with the control stick (Vliegen: Knuppel + gas): the throttle on the right, a slider that stays where you leave it;
   the lowest tenth is the brake. --v (0…1) is where the grip stands; it stands left of the row of buttons, which keeps its place ---------- */
#fly-throttle { position: absolute; right: 110px; bottom: calc(26px + env(safe-area-inset-bottom)); width: 70px; height: min(46vh, 250px); border-radius: 20px; background: linear-gradient(180deg, rgba(38,48,72,.85), rgba(18,24,40,.9)); border: 2px solid rgba(255,255,255,.3); box-shadow: 0 4px 12px rgba(0,0,0,.35); pointer-events: auto; touch-action: none; --v: 0; }
#fly-throttle.hidden { display: none; }
#fly-fill { position: absolute; left: 26px; right: 26px; bottom: 26px; height: calc(var(--v) * (100% - 52px)); border-radius: 9px; background: linear-gradient(0deg, #2fae4f, #7ee08f 60%, #ffd54f); pointer-events: none; }
#fly-throttle::before { content: ''; position: absolute; left: 31px; right: 31px; top: 26px; bottom: 26px; border-radius: 4px; background: rgba(255,255,255,.18); pointer-events: none; }
#fly-grip { position: absolute; left: 6px; right: 6px; height: 40px; bottom: calc(26px + var(--v) * (100% - 52px)); transform: translateY(50%); border-radius: 12px; background: linear-gradient(180deg, #ffffff, #d9dee8); box-shadow: 0 3px 8px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; pointer-events: none; }
#fly-grip b { font: 900 13px var(--f); color: #1c2433; }
#fly-notch { position: absolute; left: 14px; right: 14px; height: 3px; bottom: calc(26px + 0.16 * (100% - 52px)); border-radius: 2px; background: rgba(255,255,255,.55); pointer-events: none; }   /* (the notch at nought: TH_IDLE in app.js; below it the brake) */
#fly-throttle small { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 900 10px var(--f); letter-spacing: 1px; color: rgba(255,255,255,.7); pointer-events: none; }
#fly-throttle.on { border-color: #8fe3a2; }
#fly-throttle.rem { border-color: #ff8a65; } #fly-throttle.rem #fly-grip { background: linear-gradient(180deg, #ffb347, #ff8a1a); } #fly-throttle.rem small { color: #ffb347; }
body.fly-stick #hint { top: calc(124px + env(safe-area-inset-top)); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); max-width: 86vw; white-space: normal; text-align: center; font-size: 13px; }   /* (as when driving: at the top, out of the way of the buttons) */
@media (max-height: 760px) { #fly-throttle { right: 94px; } }
@media (max-height: 620px) { #fly-throttle { width: 60px; right: 86px; } #fly-grip { height: 34px; } }
/* (a tablet or a laptop: the buttons are a row along the bottom, not a column on the right; the throttle stands above that row, against the right edge) */
body.bigtouch #fly-throttle, body:not(.touch) #fly-throttle { right: calc(24px + env(safe-area-inset-right)); bottom: calc(122px + env(safe-area-inset-bottom)); height: min(40vh, 250px); }
/* ---------- the bag: tiles in sections ---------- */
.bag-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 6px; font: 900 13px var(--f); letter-spacing: .04em; color: #3b4652; }
.bag-rows[hidden] { display: none; }
.bag-head.bag-click { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; padding: 6px 4px; margin: 10px -2px 4px; border-radius: 10px; }
.bag-head.bag-click:active { background: #eef2f6; }
.bag-fold { display: inline-block; width: 14px; font-style: normal; color: #7a8594; }
.bag-head span { min-width: 22px; padding: 1px 8px; border-radius: 999px; background: #eef2f6; color: #5b6472; font-size: 12px; text-align: center; }
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bag-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px 8px; border: 0; border-radius: 16px; background: #f4f7fa; box-shadow: inset 0 0 0 1px #e3e9ef; cursor: pointer; font-family: var(--f); text-align: center; transition: transform .08s ease, background .12s ease; }
.bag-tile:hover { background: #eaf1f8; }
.bag-tile:active { transform: scale(.96); }
.bag-tile.off { cursor: default; opacity: .75; }
.bag-tile .bt-e { font-size: 30px; line-height: 1.15; }
.bag-tile .bt-n { position: absolute; top: 6px; right: 7px; padding: 0 6px; border-radius: 999px; background: #ff8a3c; color: #fff; font: 900 11px/17px var(--f); }
.bag-tile .bt-name { font: 800 12.5px/1.2 var(--f); color: #1f2937; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bag-tile .bt-act { font: 700 11px/1.2 var(--f); color: #c2610c; }
.bag-tile .bt-extra { margin-top: 3px; padding: 3px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e3e9ef; font: 800 11px var(--f); color: #3b4652; }
/* "Mijn bezit" up top: clearly a button (a little arrow in a circle, it lifts under your finger) */
#money { cursor: pointer; box-shadow: 0 3px 0 #d4a72c, 0 6px 14px rgba(0,0,0,.18); transition: transform .08s ease, box-shadow .08s ease; }
#money:hover { filter: brightness(1.04); }
#money:active { transform: translateY(2px); box-shadow: 0 1px 0 #d4a72c, 0 3px 8px rgba(0,0,0,.18); }
#money::after { content: '▾'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; border-radius: 50%; background: rgba(58,42,0,.14); font-size: 11px; opacity: 1; }
/* the bucket of fish in the bag: small, beside the money */
.bag-crate { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #e8f4fb; color: #1f5b7a; font: 800 11.5px var(--f); vertical-align: 1px; }
.bag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -4px; }
.bag-chips .bag-crate { padding: 4px 10px; font-size: 13.5px; }   /* (in the bag: the bucket, the game and the ducks, easy to read at a glance) */
button.bag-crate { border: 0; margin: 0; cursor: pointer; }
/* the golden ducks in the bag: a gold label, the duck tinted gold */
.bag-crate.gold { background: linear-gradient(180deg, #fff3c4, #f2cf6b); color: #6b4a00; box-shadow: inset 0 0 0 1px #d4a640; }
.bag-crate .gem, .duck-list .gem { display: inline-block; filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1) drop-shadow(0 0 2px rgba(255, 200, 60, .8)); }
/* the bag as rows: picture, name (×n, a word under it), one button for what it does, a bin; what you have on in a soft orange */
.bag-rows { display: flex; flex-direction: column; border: 1px solid #e6ebf0; border-radius: 14px; overflow: hidden; }
.bag-sub { padding: 6px 10px 4px; background: #f6f8fa; border-bottom: 1px solid #e6ebf0; font: 800 11.5px var(--f); letter-spacing: .04em; color: #5b6472; text-align: left; }
.bag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 6px 7px 10px; border-bottom: 1px solid #e6ebf0; background: #fff; text-align: left; }
.bag-row:last-child { border-bottom: 0; }
.bag-row.on { background: #fff7ef; }
.bag-row.dim { opacity: .55; }
/* the mine and the smithy: the experience rising up after a swing, the small bar while the smith works, what you have (enough or not) */
.xp-drop { position: fixed; right: 18px; top: 38%; z-index: 60; pointer-events: none; font: 900 18px Nunito, system-ui, sans-serif; color: #ffe48a; text-shadow: 0 2px 0 #5a3a10, 0 0 8px rgba(0, 0, 0, .6); animation: xpdrop 1.6s ease-out forwards; }
@keyframes xpdrop { 0% { transform: translateY(20px); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
/* under the "+12 XP" on a big screen: the level of that skill with its bar, a few seconds (xpSeen in app.js; not on a phone) */
.xp-card { position: fixed; right: 12px; top: calc(38% + 34px); z-index: 60; pointer-events: none; width: 210px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 8px 11px 9px; border-radius: 12px; background: rgba(18, 22, 30, .82); color: #fff; font: 700 12.5px Nunito, system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.xp-card .xc-t { font-weight: 900; font-size: 14px; margin-bottom: 5px; }
.xp-card .xc-bar { height: 7px; border-radius: 5px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.xp-card .xc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb238, #ffe48a); transition: width .5s; }
.xp-card .xc-n { margin-top: 5px; opacity: .85; font-size: 11.5px; }
.wb-bar { display: inline-block; width: 70px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.wb-f { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a2a, #ffcf6a); transition: width .4s; }
.wb-x { border: 0; border-radius: 50%; width: 24px; height: 24px; background: rgba(255, 255, 255, .18); color: #fff; font: 800 13px system-ui; cursor: pointer; padding: 0; }
.need-ok { color: #2e9d4b; } .need-no { color: #c0392b; }
/* feedback: a screenshot from the album, small preview */
.fb-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 2px; }
.fb-shot label.btn { cursor: pointer; }
.fb-shot img { display: block; width: 100%; max-height: 180px; object-fit: contain; border-radius: 10px; background: #f1f4f7; }
/* the answer of the makers to an idea or a fault: it stays until you click it away */
#fb-reply { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 16, 28, .55); }
#fb-reply .panel { max-width: 440px; width: 100%; }
#fb-reply .fbr-mine { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #f1f4f7; color: #3b4652; font: 600 14px/1.35 var(--f); white-space: pre-wrap; }
#fb-reply .fbr-ans { margin: 8px 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff4e5; color: #3a2a00; font: 700 15px/1.4 var(--f); white-space: pre-wrap; border-left: 4px solid var(--orange); }   /* (at the smith: what you can't make now) */
.br-e { font-size: 22px; width: 28px; text-align: center; flex: none; }
.br-n { flex: 1 1 130px; min-width: 0; font: 800 14px/1.2 var(--f); color: var(--text); overflow-wrap: anywhere; }
.br-n i { font-style: normal; color: #5b6472; font-size: 13px; }
.br-n small { display: block; font: 600 12px var(--f); color: #5b6472; }
.bag-row.on .br-n small { color: #c2610c; font-weight: 800; }
.br-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-items: center; flex: none; max-width: 100%; margin-left: auto; }
.br-act { border: 0; border-radius: 10px; padding: 8px 11px; background: var(--orange); color: #fff; font: 800 13px var(--f); cursor: pointer; white-space: nowrap; }
.br-act.soft { background: #eef1f4; color: var(--text); }
.br-act.sell { background: #2e9d4b; }
.br-bin { border: 0; background: none; width: 32px; height: 34px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.br-bin:hover { background: #fdecec; }
.bag-row.ask { background: #fdecec; flex-wrap: wrap; }
.br-q { flex: 1 1 100%; font: 800 13px var(--f); color: #8f2424; }
.br-q small { display: block; font-weight: 700; color: #5b6472; }
.br-yes, .br-no { border: 0; border-radius: 10px; padding: 8px 11px; font: 800 13px var(--f); cursor: pointer; }
.br-yes { background: #d64545; color: #fff; }
.br-no { background: #fff; color: var(--text); }
.bag-banner { margin-top: 8px; padding: 8px 11px; border-radius: 12px; background: #e7f6eb; color: #1e6b33; font: 800 13px var(--f); text-align: left; }
/* the clothes of one part of you (a tap on Hoofddeksel, Bovenkleding … in the bag): a card over the game with all of them */
.slot-pop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20,30,45,.55); animation: fadein .15s ease-out; }
.slot-card { width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 18px; padding: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); box-sizing: border-box; }
.slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.slot-head b { font: 900 18px var(--f); color: var(--text); }
.slot-head .x { width: 38px; height: 38px; font-size: 18px; }
.slot-empty { margin: 10px 2px 0; font: 700 13px var(--f); color: #5b6472; text-align: center; }
/* the passes: small buttons; a tap shows the card big over everything */
.bag-passes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bag-pass { border: 0; border-radius: 10px; padding: 6px 10px; font: 800 13px var(--f); cursor: pointer; color: #fff; }
.bag-pass.fly { background: #2f6fb8; } .bag-pass.hunt { background: #5b7a32; } .bag-pass.ski { background: #c62828; }
.bag-pass.none { background: #f1f4f7; color: #5b6472; box-shadow: inset 0 0 0 1px #e6ebf0; }
.pass-big { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(20,30,45,.6); animation: fadein .15s ease-out; }
.pass-card { width: min(100%, 340px); aspect-ratio: 1.586; border-radius: 16px; padding: 16px 18px; color: #fff; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 16px 34px rgba(0,0,0,.4); box-sizing: border-box; }
.pass-card.fly { background: linear-gradient(135deg, #0b2a6f, #00a1de); }
.pass-card.hunt { background: linear-gradient(135deg, #3f5a2a, #7a9a42); }
.pass-card.ski { background: linear-gradient(135deg, #8e0000, #e53935); }
.pc-t { font: 900 11px var(--f); letter-spacing: .16em; opacity: .85; }
.pc-n { font: 900 24px var(--f); margin: 4px 0 auto; }
.pc-who { font: 900 18px var(--f); }
.pc-d { font: 700 12.5px/1.4 var(--f); opacity: .95; }
.pass-none { width: min(100%, 320px); border-radius: 16px; padding: 18px; background: #fff; color: var(--text); text-align: center; display: flex; flex-direction: column; gap: 8px; }
.pass-none .pc-n { font-size: 18px; margin: 0; }
.pass-none .pc-d { opacity: 1; color: #5b6472; font-size: 14px; }
.pass-close { border: 0; border-radius: 999px; padding: 9px 18px; background: #fff; font: 800 14px var(--f); cursor: pointer; }
/* the invitation to a party: a small card under the map, in purple, the green button to say yes */
/* the reporter at the Fletcher Hotel: a question with a few answers */
#fl-ask, .fl-ask { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(340px, 90vw); padding: 14px 16px; border-radius: 16px; background: var(--card); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.35); pointer-events: auto; z-index: 20; display: flex; flex-direction: column; gap: 7px; font: 700 14px var(--f); }
.fl-ask .fa-q, #fl-ask .fa-q { margin-bottom: 4px; } .fl-ask button, #fl-ask button { border: 0; border-radius: 10px; padding: 9px 12px; font: 700 14px var(--f); background: #eef3f8; color: #1c2733; cursor: pointer; text-align: left; } .fl-ask .fa-x, #fl-ask .fa-x { background: none; color: #78838f; text-align: center; }
#party-invite { position: absolute; right: 10px; top: calc(150px + env(safe-area-inset-top)); width: 190px; z-index: 6; padding: 9px 10px; border-radius: 14px; background: linear-gradient(180deg, #7b3fe4, #5b23c4); color: #fff; box-shadow: 0 6px 18px rgba(60,20,140,.45); font: 700 12.5px/1.3 var(--f); animation: piIn .35s ease-out; }
#party-invite .pi-txt b { font-weight: 900; }
#party-invite .pi-row { display: flex; gap: 6px; margin-top: 7px; }
#party-invite .pi-yes { flex: 1; border: 0; border-radius: 10px; padding: 8px 6px; background: #22c55e; color: #fff; font: 900 13px var(--f); cursor: pointer; box-shadow: 0 3px 0 #15803d; }
#party-invite .pi-yes:active { transform: translateY(2px); box-shadow: 0 1px 0 #15803d; }
#party-invite .pi-no { border: 0; border-radius: 10px; width: 34px; background: rgba(255,255,255,.2); color: #fff; font: 900 14px var(--f); cursor: pointer; }
@keyframes piIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) { #party-invite { top: calc(118px + env(safe-area-inset-top)); width: 170px; } }
/* after saying yes: the question whether the microphone should go on */
#mic-ask { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(10,15,30,.45); }
#mic-ask .ma-card { width: min(320px, 86vw); padding: 18px 18px 14px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); font-family: var(--f); }
#mic-ask .ma-big { font-size: 40px; }
#mic-ask b { font: 900 19px var(--f); }
#mic-ask p { margin: 6px 0 12px; font: 700 14px/1.4 var(--f); color: #5b6472; }
#mic-ask .ma-row { display: flex; gap: 8px; }
#mic-ask button { flex: 1; border: 0; border-radius: 14px; padding: 12px 8px; font: 900 15px var(--f); cursor: pointer; }
#mic-ask .ma-yes { background: #22c55e; color: #fff; box-shadow: 0 4px 0 #15803d; }
#mic-ask .ma-no { background: #eef2f6; color: #3b4652; }
/* (the layer of the game's buttons lets taps through to the game: these two must catch them themselves) */
#party-invite, #mic-ask { pointer-events: auto; }

/* the letter from a bottle: old paper, handwriting */
.note-paper { margin: 6px 2px 4px; padding: 16px 18px; background: linear-gradient(180deg, #fbf3dc, #f1e2b8); border-radius: 6px; box-shadow: inset 0 0 18px rgba(140,100,40,.25); font: italic 600 17px Georgia, "Times New Roman", serif; line-height: 1.45; color: #4a3720; transform: rotate(-0.6deg); }

.gold-row img.goldbar { width: 40px; height: auto; vertical-align: middle; margin-right: 6px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.gold-row { cursor: default; margin-top: 8px; box-sizing: border-box; }
.gold-row .hr-val small { white-space: normal; max-width: 130px; margin-left: auto; }
/* (the snowball of Westendorf (wdplay.js): on a tablet the buttons are a row along the bottom, so it stands just above that row, on the right) */
body.bigtouch #wd-ball { bottom: calc(122px + env(safe-area-inset-bottom, 0px)) !important; right: calc(24px + env(safe-area-inset-right, 0px)) !important; }
.gold-row .hr-val small.gold-win { color: #2e7d32; font-weight: 800; } .gold-row .hr-val small.gold-loss { color: #c62828; font-weight: 800; }   /* (the profit on your gold: small, under its worth) */

/* vliegschool: the card of a flying lesson (vliegschool.js): one small card in the top left corner, out of the line of flight (the ring you fly
   to hangs in the middle of the screen); the arrow at the edge of the screen; the glow on the button to press */
#vs-card{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 62px);z-index:34;box-sizing:border-box;width:min(calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)),290px);padding:6px 9px 7px;border-radius:12px;background:rgba(11,26,58,.86);color:#fff;font:700 13px/1.25 Nunito,system-ui,sans-serif;box-shadow:0 3px 10px rgba(0,0,0,.25);pointer-events:none}
#vs-card.warn{background:rgba(160,48,0,.94)}
#vs-card .top{display:flex;align-items:center;gap:5px;font-size:10.5px;letter-spacing:.5px;color:#9fc7ff}
#vs-card .top b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#vs-card button{pointer-events:auto;border:0;border-radius:8px;min-width:26px;height:24px;padding:0 6px;background:rgba(255,255,255,.14);color:#fff;font:800 12px Nunito,system-ui,sans-serif;cursor:pointer}
#vs-card .row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;gap:6px;margin:3px 0 0;padding:0;text-align:left}
#vs-card .do{font-size:14px;font-weight:800}
#vs-card .arr{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;font-size:15px;color:#ffd23a;flex:none}
#vs-card .how{font-size:11.5px;font-weight:600;color:#cfe0ff;margin-top:2px}
#vs-card .num{font-size:12px;font-weight:700;color:#cfe0ff;margin-top:2px}
#vs-card .how.hidden,#vs-card .num.hidden{display:none}
#vs-card .bar{height:3px;border-radius:2px;background:rgba(255,255,255,.18);margin-top:5px;overflow:hidden}
#vs-card .bar i{display:block;height:100%;background:#2f8cff}
#vs-card .big{display:flex;gap:6px;margin-top:6px}
#vs-card .big button{flex:1;height:32px;background:#ffb300;color:#3a2500}
#vs-edge{position:fixed;z-index:33;width:48px;height:48px;margin:-24px 0 0 -24px;line-height:48px;text-align:center;font-size:38px;color:#2f8cff;text-shadow:0 0 6px #fff,0 0 2px #fff;pointer-events:none}
.vs-pulse{animation:vsPulse 1s ease-in-out infinite!important}
@keyframes vsPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,210,58,.95)}50%{box-shadow:0 0 0 12px rgba(255,210,58,0)}}
@media (max-height:460px){#vs-card{top:calc(env(safe-area-inset-top,0px) + 56px);width:270px}}
/* ---------- quests: the Opdrachten button (an orange dot for a quest you can begin) and its panel: a card per quest, the steps ticked off ---------- */
#t-quest { position: relative; }
#t-quest .q-dot { display: none; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 0 2px rgba(18,24,40,.9), 0 0 8px #ffb020; }
#t-quest.q-new .q-dot { display: block; }
#t-quest.q-busy .q-dot { display: block; background: #2f8cff; box-shadow: 0 0 0 2px rgba(18,24,40,.9), 0 0 8px #2f8cff; }   /* (blue: on a quest) */
.quest-sec { margin: 12px 2px 0; font: 900 12px var(--f); letter-spacing: .06em; text-transform: uppercase; color: #5b6472; text-align: left; }
.quest-sec:first-child { margin-top: 2px; }
.quest-intro { font: 700 15px/1.5 var(--f); color: var(--text); margin: 4px 2px 10px; }
.quest-card { border: 1px solid #e6ebf0; border-radius: 14px; padding: 10px 12px; margin-top: 8px; text-align: left; }
.quest-card.done { background: #f3fbf5; border-color: #cfe9d6; }
.quest-card.paused { background: #f6f7f9; } .quest-card.paused .quest-steps li.now { background: #eef1f4; }
.quest-pill.paused { background: #eef1f4; color: #5b6472; }
.quest-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quest-top b { font: 900 16px var(--f); color: var(--text); }
.quest-pill { flex: none; border-radius: 999px; padding: 2px 9px; font: 800 12px var(--f); background: #fff1e4; color: #c2610c; }
.quest-pill.now { background: #e8f1fb; color: #1d4f86; } .quest-pill.done { background: #e7f6eb; color: #1e6b33; }
.quest-what { margin: 4px 0 6px; font: 600 13px/1.4 var(--f); color: #5b6472; }
.quest-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.quest-steps li { position: relative; padding: 5px 8px 5px 28px; border-radius: 10px; font: 700 14px/1.35 var(--f); color: var(--text); }
.quest-steps li::before { position: absolute; left: 8px; top: 5px; font-weight: 900; }
.quest-steps li.done { color: #7a8794; text-decoration: line-through; } .quest-steps li.done::before { content: "✓"; color: #2e9d4b; text-decoration: none; }
.quest-steps li.now { background: #fff6ec; } .quest-steps li.now::before { content: "●"; color: var(--orange); }
.quest-steps li.todo { color: #7a8794; } .quest-steps li.todo::before { content: "○"; }
.quest-steps li small { display: block; font: 600 12px/1.35 var(--f); color: #8a5a1c; margin-top: 2px; }
.quest-reward { margin: 8px 0 2px; font: 800 13px var(--f); color: #5b6472; }
/* the tour of the buttons (the first quest step): the screen dark but for one button with a ring round it, a balloon beside it */
#coach { position: fixed; inset: 0; z-index: 45; pointer-events: auto; }
#coach.hidden { display: none; }
#coach .c-ring { position: fixed; border: 3px solid #ffd23a; box-shadow: 0 0 0 9999px rgba(10,15,25,.62), 0 0 18px rgba(255,210,58,.8); transition: all .25s ease; pointer-events: none; }
#coach.c-free .c-ring { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; border-width: 0; }
#coach .c-bubble { position: fixed; background: #fff; color: var(--text); border-radius: 16px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.4); box-sizing: border-box; transition: left .25s ease, top .25s ease, bottom .25s ease; }
#coach .c-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#coach .c-top b { font: 900 17px var(--f); }
#coach .c-n { font: 800 12px var(--f); color: #5b6472; white-space: nowrap; }
#coach p { margin: 6px 0 10px; font: 700 14px/1.45 var(--f); color: #3b4652; }
#coach .c-btns { display: flex; gap: 6px; justify-content: flex-end; }
#coach .c-btns button { border: 0; border-radius: 10px; padding: 8px 12px; font: 800 14px var(--f); cursor: pointer; background: #eef1f4; color: var(--text); }
#coach .c-btns .c-skip { margin-right: auto; background: none; color: #5b6472; padding-left: 2px; }
#coach .c-btns .c-next { background: var(--orange); color: #fff; }
#coach .c-btns .hidden { display: none; }
@media (prefers-reduced-motion: reduce) { #coach .c-ring, #coach .c-bubble { transition: none; } }
/* the Super Yacht Marina: the shop of the four superyachts, the care of your own (app.js, yShopDraw); the bar aboard your own yacht */
#yshop { z-index: 80; }
#yshop .ys-panel { max-width: 520px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; background: linear-gradient(180deg, #0d1b2a, #13283d); color: #f4efe2; }
#yshop .ys-panel > * { flex-shrink: 0; }
#yshop .panel-head h2 { color: #e2bd4a; font-size: 21px; letter-spacing: .08em; }
#yshop .x { color: #fff; background: rgba(255,255,255,.14); }
.ys-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.ys-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 2px solid rgba(226,189,74,.25); border-radius: 14px; background: rgba(255,255,255,.05); color: #f4efe2; font: 700 13px var(--f); cursor: pointer; text-align: left; }
.ys-card b { font-weight: 900; font-size: 14px; } .ys-card span { color: #e2bd4a; font-weight: 900; } .ys-card small { color: #9fb4c8; }
.ys-card.on { border-color: #e2bd4a; background: rgba(226,189,74,.14); }
.ys-price { font: 900 34px var(--f); color: #e2bd4a; text-shadow: 0 2px 0 #5a4300; margin: 4px 0 2px; }
.ys-what { font: 700 14px var(--f); color: #dfe6ee; margin-bottom: 6px; }
.ys-list { margin: 0 0 8px 18px; padding: 0; font: 600 13px/1.5 var(--f); color: #c9d6e2; }
.dz-how { margin: 0 0 4px 18px; padding: 0; font: 600 13px/1.5 var(--f); color: #c9d6e2; }   /* (how deep-sea fishing goes, in the panel of your yacht) */
.ys-sec { font: 900 12px var(--f); letter-spacing: .08em; text-transform: uppercase; color: #e2bd4a; margin: 12px 0 6px; }
#ys-name, #ys-gname { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(226,189,74,.4); background: #0a1520; color: #fff; font: 900 16px var(--f); letter-spacing: .06em; text-transform: uppercase; }
#ys-prev { display: block; width: 100%; height: auto; margin-top: 8px; border-radius: 10px; }
.ys-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ys-chip { border: 2px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.06); color: #f4efe2; font: 800 13px var(--f); cursor: pointer; }
.ys-chip.on { border-color: #e2bd4a; background: #e2bd4a; color: #2a1d00; }
.ys-chip.locked { opacity: .5; cursor: default; } .ys-chip small { font-weight: 600; }
.ys-money { margin: 14px 0 8px; font: 700 15px var(--f); } .ys-money b { color: #e2bd4a; }
.ys-short { color: #ff8a80; font-weight: 800; }
.ys-buy { width: 100%; font-size: 17px; letter-spacing: .04em; }
.ys-buy:disabled { opacity: .45; cursor: default; }
.ys-note { display: block; margin-top: 8px; color: #9fb4c8; font: 600 12px var(--f); }
.ys-own { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(226,189,74,.14); border: 2px solid #e2bd4a; margin-bottom: 4px; }
.ys-own b { font: 900 17px var(--f); color: #e2bd4a; } .ys-own span { font: 700 13px var(--f); color: #dfe6ee; }
#yshop .btn { margin-top: 8px; }
.ys-guest { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .ys-guest .btn { margin-top: 0; white-space: nowrap; }
.ys-guests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ys-g { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font: 800 13px var(--f); }
.ys-g button { border: 0; border-radius: 50%; width: 22px; height: 22px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; padding: 0; }
#ybar { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 146px); transform: translateX(-50%); z-index: 34; display: flex; gap: 8px; }
#ybar button { border: 0; border-radius: 999px; padding: 8px 14px; background: #0d1b2a; color: #e2bd4a; font: 900 14px var(--f); box-shadow: 0 4px 12px rgba(0,0,0,.3); cursor: pointer; border: 2px solid #e2bd4a; }
/* the deep-sea fishing from a superyacht (diepzee.js): the button to start, the card while fishing, the fight, the Visdex */
.dz-go { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 192px); transform: translateX(-50%); z-index: 34; border: 2px solid #4fc3f7; border-radius: 999px; padding: 9px 16px; background: #0b2233; color: #bfe9ff; font: 900 15px var(--f); box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: pointer; }
.dz-card { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 36; box-sizing: border-box; width: min(94vw, 400px); padding: 12px 14px 14px; border-radius: 18px; background: rgba(8, 28, 44, .95); color: #fff; font: 800 14px var(--f); box-shadow: 0 8px 28px rgba(0,0,0,.45); border: 2px solid rgba(79,195,247,.5); touch-action: none; user-select: none; -webkit-user-select: none; }
.dz-head { font: 900 15px var(--f); color: #4fc3f7; margin-bottom: 6px; }
.dz-info { margin-bottom: 8px; color: #dfe9f2; font-weight: 700; }
.dz-baits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.dz-bait { display: flex; flex-direction: column; gap: 2px; border: 2px solid rgba(255,255,255,.18); border-radius: 12px; padding: 7px 6px; background: rgba(255,255,255,.06); color: #fff; font: 800 12px var(--f); cursor: pointer; }
.dz-bait small { color: #9fb4c8; font-weight: 700; } .dz-bait.on { border-color: #4fc3f7; background: rgba(79,195,247,.2); }
.dz-track { position: relative; height: 22px; border-radius: 11px; background: #123a4d; overflow: hidden; margin-bottom: 6px; }
.dz-zone { position: absolute; top: 0; bottom: 0; left: 35%; width: 30%; background: #3fae5a; opacity: .85; }
.dz-mark { position: absolute; top: 0; bottom: 0; width: 5px; background: #fff; left: 50%; }
.dz-prog { position: relative; height: 8px; border-radius: 4px; background: #123a4d; overflow: hidden; margin-bottom: 10px; }
.dz-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #ffd23a; }
.dz-row { display: flex; gap: 8px; align-items: center; }
.dz-act { flex: 1; border: 0; border-radius: 14px; padding: 13px 16px; background: #ff8a3c; color: #3a1c00; font: 900 16px var(--f); cursor: pointer; touch-action: none; }
.dz-act:disabled { opacity: .5; cursor: default; }
.dz-small { border: 0; border-radius: 12px; padding: 12px 12px; background: rgba(255,255,255,.12); color: #fff; font: 800 14px var(--f); cursor: pointer; }
#dzdex { z-index: 82; }
.dz-dex { max-width: 620px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; background: linear-gradient(180deg, #071b2a, #0c2a40); color: #eaf4fb; }
.dz-dex > * { flex-shrink: 0; }
.dz-dex .panel-head h2 { color: #4fc3f7; font-size: 20px; } .dz-dex .x { color: #fff; background: rgba(255,255,255,.14); }
.dz-count { font: 800 14px var(--f); color: #9fd8f5; margin-bottom: 8px; }
.dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.dz-f { --c: #9aa7b2; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 2px solid var(--c); font: 700 12px var(--f); }
.dz-f b { font: 900 13px var(--f); } .dz-f small { color: #b6c8d6; font-weight: 600; }
.dz-e { font-size: 26px; } .dz-t { color: var(--c); font: 900 11px var(--f); text-transform: uppercase; letter-spacing: .05em; }
.dz-unk { opacity: .55; } .dz-unk .dz-e { filter: grayscale(1); }
.dz-f.t0 { --c: #9aa7b2; } .dz-f.t1 { --c: #4fc3f7; } .dz-f.t2 { --c: #66bb6a; } .dz-f.t3 { --c: #ab47bc; } .dz-f.t4 { --c: #ffa726; } .dz-f.t5 { --c: #ef5350; } .dz-f.t6 { --c: #ffd700; }
.dz-hold, .dz-gear { display: flex; flex-direction: column; gap: 6px; }
.dz-h { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.06); font: 700 13px var(--f); }
.dz-h span { flex: 1; } .dz-h b { color: #ffd23a; }
.dz-h button { border: 0; border-radius: 10px; padding: 6px 10px; background: #ff8a3c; color: #3a1c00; font: 900 12px var(--f); cursor: pointer; }
/* (the bar of the yacht and the deep-sea button under the route banner, #compass, which sits lower on a small screen) */
@media (max-width: 520px) { #ybar { top: calc(env(safe-area-inset-top, 0px) + 172px); } .dz-go { top: calc(env(safe-area-inset-top, 0px) + 216px); } #ybar button, .dz-go { font-size: 13px; padding: 7px 12px; } }
.ys-titles { color: #e2bd4a; font: 800 12px var(--f); margin-top: 2px; }
.dz-map { margin: 6px 0 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,112,67,.18); border: 2px solid #ff7043; font: 700 13px var(--f); }
/* Marktplaats: what you sell, how many and for how much (renderSell in app.js) */
.mp-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; padding: 12px; border-radius: 14px; background: #fff7ec; border: 2px solid var(--orange); font: 700 14px var(--f); }
.mp-form label { display: flex; flex-direction: column; gap: 4px; }
.mp-form input { padding: 9px 10px; border-radius: 10px; border: 2px solid #e2d6c2; font: 800 16px var(--f); }
.mp-of, .mp-each { color: var(--muted); font: 600 12px var(--f); }
#vbar { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 146px); transform: translateX(-50%); z-index: 34; border: 2px solid #fff; border-radius: 999px; padding: 9px 16px; background: linear-gradient(180deg, #ff9b2f, #e8620c); color: #fff; font: 900 14px var(--f); text-shadow: 0 1px 2px rgba(0,0,0,.3); box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: pointer; white-space: nowrap; max-width: calc(100vw - 32px); }
#vbar:active { transform: translateX(-50%) scale(.96); }   /* (orange, a button to press: not the dark blue of the route banner above it) */
@media (max-width: 520px) { #vbar { top: calc(env(safe-area-inset-top, 0px) + 172px); font-size: 13px; } }
/* with the route banner showing (#compass, under it the bars of the yacht, the aeroplane and the deep sea), a passing message goes below all of
   that instead of over it (on a phone everything sits a little lower) */
body.nav-on #toast { top: calc(232px + env(safe-area-inset-top)); }
@media (max-width: 520px) { body.nav-on #toast { top: calc(214px + env(safe-area-inset-top)); max-width: calc(100vw - 150px); } }   /* (clear of the column of buttons on the right) */
/* pointing at something for an idea or a fault: the line that says to tap it */
.fb-aimbar { position: fixed; left: 50%; top: calc(150px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px; border-radius: 999px; background: #0b2a6f; color: #fff; border: 2px solid #ffd23a; font: 800 15px var(--f); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.fb-aimbar button { border: 0; border-radius: 50%; width: 28px; height: 28px; background: rgba(255,255,255,.18); color: #fff; font: 800 14px var(--f); cursor: pointer; }
/* the golden ducks you found, in your bag: where each one sat (no colours of its own: right in the dark theme too) */
.duck-list { margin: 4px 0 10px; font: 600 13px/1.45 var(--f); }
.duck-list ol { margin: 0; padding: 0; list-style: none; }
.duck-list li { display: flex; gap: 6px; align-items: baseline; margin: 2px 0; }   /* (the duck in front of each: the gold one of the button, .gem) */
.duck-list p { margin: 6px 0 0; opacity: .75; font-weight: 700; }
/* stop the job of Van der Haar (vanderhaar.js): small, right under the route banner */
.vdh-stop { position: fixed; left: 50%; top: calc(140px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 8; border: 0; border-radius: 999px; padding: 5px 12px; background: rgba(16, 22, 34, .7); color: #fff; font: 800 12px var(--f); cursor: pointer; }
@media (max-width: 520px) { .vdh-stop { top: calc(130px + env(safe-area-inset-top)); } }
/* the flights button (vliegschool.js): right under the little map, clear of the column of buttons on a phone (it lay over the map button) */
#vl-chip { top: calc(env(safe-area-inset-top, 0px) + 148px); }
@media (max-width: 520px) { #vl-chip { top: calc(env(safe-area-inset-top, 0px) + 116px); } }
/* diving to the wreck (duik.js): the air while under water, the buttons down and up on a phone, the dive shop */
.dk-hud { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 150px); transform: translateX(-50%); z-index: 33; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 999px; background: rgba(6, 34, 52, .88); color: #dff6ff; font: 900 14px var(--f); white-space: nowrap; pointer-events: none; }
.dk-bar { display: inline-block; width: 120px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; }
.dk-fill { display: block; height: 100%; width: 100%; background: #4fc3f7; transition: width .3s linear; }
.dk-fill.low { background: #ff6b5a; }
.dk-pad { position: fixed; right: 18px; bottom: calc(210px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; flex-direction: column; gap: 10px; }
.dk-pad button { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(6, 34, 52, .7); font-size: 26px; touch-action: none; user-select: none; -webkit-user-select: none; }
.dk-panel { max-width: 440px; }
.dk-rumor { font-style: italic; color: #456; margin: 4px 0 12px; }
.dk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08); }
.dk-row button { flex: none; border: 0; border-radius: 10px; padding: 8px 12px; background: #1e7fb8; color: #fff; font: 900 14px var(--f); cursor: pointer; }
.dk-note { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: #567; }
.dk-note li { margin: 3px 0; }
.dk-hud > div { display: flex; align-items: center; gap: 8px; }
.dk-net { font-size: 12px; color: #ffe082; }
.dk-net.full { color: #ff8a65; }
.dk-tint { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, rgba(40, 140, 190, .18), rgba(4, 40, 70, .42)); }
/* the cheese farm De Klepperhoeve (boerderij.js): the chip with your level and milk, the milking and cheese cards, the counter */
.boer-chip { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 112px); transform: translateX(-50%); z-index: 31; padding: 6px 14px; border-radius: 999px; width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; text-align: center; background: rgba(31, 77, 43, .9); color: #fff6d8; font: 900 13px var(--f); white-space: normal; pointer-events: none; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
body.nav-on .boer-chip { top: calc(env(safe-area-inset-top, 0px) + 150px); }
/* (no blurred chat bubbles on a phone: the village moves behind them, so the blur was made again every picture) */
body.touch #chat-list li { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15,20,30,.68); }
body:not(.nav-on):has(.boer-chip:not(.hidden)) #toast { top: calc(var(--topb, calc(env(safe-area-inset-top, 0px) + 154px)) + 8px); }   /* (a level chip up: what you caught or did is said under it, not over it) */
/* (measured in app.js: under the level chip and a timing card, as low as they reach; with the route banner never higher than its own place) */
html[style*="--topb"] body:not(.nav-on) #toast { top: calc(var(--topb) + 8px); }   /* (a timing card without a chip) */
html[style*="--topb"] body.nav-on #toast { top: max(calc(232px + env(safe-area-inset-top)), calc(var(--topb) + 8px)); }
@media (max-width: 520px) { html[style*="--topb"] body.nav-on #toast { top: max(calc(214px + env(safe-area-inset-top)), calc(var(--topb) + 8px)); } }
/* (in the chip: the text, and under it the bar towards the next level, lvlchip.js) */
.boer-chip .lc-t { display: block; }
.boer-chip .lc-bar { display: block; height: 6px; margin: 4px auto 1px; max-width: 240px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.boer-chip .lc-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: #8ee26b; transition: width .4s; }
.boer-card { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 36; box-sizing: border-box; width: min(92vw, 380px); padding: 12px 14px 14px; border-radius: 18px; background: rgba(255, 250, 238, .97); color: #3b2a1a; font: 800 14px var(--f); box-shadow: 0 8px 28px rgba(0,0,0,.35); border: 3px solid #1f4d2b; user-select: none; -webkit-user-select: none; }
.boer-card .bc-head { font: 900 16px var(--f); color: #1f4d2b; margin-bottom: 8px; }
.boer-card .bc-head small { font-weight: 700; color: #7a6a55; margin-left: 6px; }
.boer-card .bc-step { font: 900 15px var(--f); margin-bottom: 6px; }
.bc-track { position: relative; height: 26px; border-radius: 13px; background: #e7dcc6; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.15); }
.bc-zone { position: absolute; top: 0; bottom: 0; background: #57b04a; border-radius: 10px; }
.bc-mark { position: absolute; top: -2px; bottom: -2px; width: 5px; margin-left: -2px; background: #3b2a1a; border-radius: 3px; }
.bc-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bc-bucket { position: relative; flex: none; width: 34px; height: 40px; border: 3px solid #8f979b; border-top: 0; border-radius: 0 0 10px 10px; background: #dfe3e5; overflow: hidden; }
.bc-milk { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #fffdf5; transition: height .15s; }
.bc-milk.gold { background: #f2c94c; }
.bc-say { font-weight: 800; color: #5a4632; margin-top: 8px; }
.bc-row .bc-say { margin-top: 0; }
.boer-panel { max-width: 480px; }
.boer-panel h3 { margin: 14px 0 6px; font: 900 15px var(--f); color: #1f4d2b; }
.boer-panel h3 small { font-weight: 700; color: #7a6a55; }
.bp-lvl { display: flex; align-items: center; gap: 8px; }
.bp-bar { flex: 1; height: 10px; border-radius: 6px; background: #e7dcc6; overflow: hidden; }
.bp-fill { display: block; height: 100%; width: 0; background: #57b04a; }
.bp-milk { margin-top: 6px; color: #5a4632; }
.bp-kaas { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin: 4px 0; border-radius: 10px; background: #fbf3df; }
.bp-kaas.gold { background: linear-gradient(90deg, #fff1b8, #ffe08a); }
.bp-k-i { font-size: 22px; }
.bp-k-t { flex: 1; min-width: 0; }
.bp-k-t small { display: block; color: #7a6a55; font-weight: 700; }
.bp-kaas button, .bp-gear button, .bp-all { border: 0; border-radius: 10px; padding: 7px 10px; background: #1f4d2b; color: #fff; font: 900 13px var(--f); cursor: pointer; white-space: nowrap; }
.bp-kaas .bp-turn { background: #c98a1b; }
.bp-all { width: 100%; margin-top: 6px; padding: 9px; background: #2e7d32; }
.bp-gear { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(0,0,0,.08); }
.bp-gear small { color: #7a6a55; font-weight: 700; }
.bp-lock { color: #9a8a75; font-weight: 800; white-space: nowrap; }
.bp-empty { color: #7a6a55; }
.bp-tips { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: #6a5a45; }
.bp-tips li { margin: 3px 0; }
/* on a phone: the dive buttons left above the joystick (the right side holds the round buttons), the milking/cheese card up top (the action button stays free) */
@media (pointer: coarse), (max-width: 640px) {
  .dk-pad { right: auto; left: 22px; bottom: calc(250px + env(safe-area-inset-bottom, 0px)); }
  .boer-card { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 150px); }
}
/* the signs over your cheeses in the ripening room (boerderij.js) */
.kaas-labels { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.kaas-lab { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; padding: 2px 6px 3px; border-radius: 7px; background: rgba(43, 30, 16, .86); color: #ffe9a8; font: 800 10px var(--f); white-space: nowrap; text-align: center; }
.kaas-lab b { display: block; font-weight: 900; }
.kl-bar { display: block; width: 46px; height: 4px; margin: 3px auto 0; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.kl-fill { display: block; height: 100%; width: 0; background: #8bd46a; }
.moes-lab { font-size: 13px; padding: 3px 8px 4px; }   /* the vegetable beds in the Pluktuin: read from the path */
.moes-lab .kl-bar { width: 58px; }
/* Tuinier Wim in the Pluktuin: his answer, the questions you can ask him */
.tw-say { min-height: 3em; flex: none; }
.tw-q { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; flex: none; }
.tw-q button { border: 0; border-radius: 999px; padding: 7px 11px; background: #eef3e6; color: #1f4d2b; font: 800 13px var(--f); cursor: pointer; touch-action: manipulation; }
.tw-q button.on { background: #1f4d2b; color: #fff; }
.kp-panel .kp-hi { font-style: italic; color: #5a4632; margin: 2px 0 10px; }
.bp-kaas.took { background: #eef3e6; }
/* the panels of the farm, the Kaaspakhuis and the dive shop: they scroll (on an iPhone too: the page itself takes no touch) */
.boer-panel, .dk-panel { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.boer-panel button, .dk-panel button { touch-action: manipulation; }
/* on a narrow phone the line under a cheese wraps instead of being cut off; the milk's sell button like the others */
.bp-k-t b, .bp-k-t small { white-space: normal; overflow-wrap: anywhere; }
.bp-k-t small { line-height: 1.3; }
.bp-milksell { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 10px; padding: 9px 10px; background: #e3f0fb; color: #1d4f7a; font: 900 13px var(--f); cursor: pointer; }
.bp-milknote { display: block; margin-top: 4px; color: #7a6a55; font-weight: 700; }
@media (max-width: 420px) { .bp-kaas { padding: 7px 6px; gap: 6px; } .bp-kaas button { padding: 7px 8px; } }
/* what happened while you were away (showNotes in app.js) */
.notes-panel { max-width: 440px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.notes-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.notes-item { padding: 10px 12px; border-radius: 12px; background: #f3f6fa; font-weight: 700; }
.notes-item small { display: block; margin-top: 3px; color: #6b7785; font-weight: 600; }

/* personal messages from the admins: the conversation, theirs on the left, yours on the right; a box to answer */
#dm-box { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 16, 28, .55); }
#dm-box .panel { max-width: 460px; width: 100%; max-height: calc(100% - 20px); display: flex; flex-direction: column; overflow: hidden; }
#dm-box .dm-msgs { flex: 1 1 auto; min-height: 80px; max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
#dm-box .dm-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; font: 600 14px/1.4 var(--f); }
#dm-box .dm-msg.theirs { align-self: flex-start; background: #fff4e5; color: #3a2a00; border-left: 4px solid var(--orange); }
#dm-box .dm-msg.mine { align-self: flex-end; background: #eaf3ff; color: #1d2b3a; }
#dm-box .dm-msg small { display: block; font-weight: 700; opacity: .6; font-size: 11px; }
#dm-box .dm-msg p { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; }
#dm-box .dm-ta { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid #d5dbe2; padding: 10px 12px; font: 600 14px/1.35 var(--f); resize: vertical; }
#dm-box .dm-row { display: flex; gap: 8px; margin-top: 10px; }
#dm-box .dm-more { align-self: center; border: 0; background: #eef1f5; color: #3b4652; border-radius: 99px; padding: 6px 14px; font: 700 13px var(--f); cursor: pointer; }
/* the kart race with others (kartrace.js): the table of how it stands (left, under the top bar), the five lights, the panel at the pit */
#kr-ui { position: fixed; left: 12px; top: calc(62px + env(safe-area-inset-top)); z-index: 31; min-width: 190px; max-width: 62vw; padding: 7px 9px 8px; border-radius: 14px; background: rgba(16, 20, 28, .82); color: #fff; font: 800 12.5px Nunito, system-ui, sans-serif; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
#kr-ui .kr-head { font-weight: 900; font-size: 13px; margin-bottom: 4px; color: #ffd54f; }
#kr-ui .kr-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
#kr-ui .kr-row b { width: 16px; text-align: right; }
#kr-ui .kr-row i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
#kr-ui .kr-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kr-ui .kr-row em { font-style: normal; opacity: .85; }
#kr-ui .kr-row.me { color: #7fd1ff; }
#kr-ui .kr-row.out { opacity: .45; }
#kr-lights { position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 32; display: flex; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #15171b; box-shadow: 0 6px 22px rgba(0, 0, 0, .45); pointer-events: none; }
#kr-lights i { width: 30px; height: 30px; border-radius: 50%; background: #3a0b0b; box-shadow: inset 0 0 0 3px #000; }
#kr-lights i.on { background: radial-gradient(circle at 40% 35%, #ff8a80, #ff1a1a 55%, #b00000); box-shadow: 0 0 16px #ff1a1a, inset 0 0 0 3px #000; }
@media (max-width: 520px) { #kr-ui { top: calc(58px + env(safe-area-inset-top)); font-size: 11.5px; min-width: 160px; } #kr-lights i { width: 24px; height: 24px; } }
#kr-panel .kr-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#kr-panel .kr-pick span { width: 58px; font-weight: 900; }
#kr-panel .kr-pick button, #kr-panel .kr-cand button { border: 0; border-radius: 999px; padding: 7px 12px; background: #eef1f5; color: #1c2733; font: 800 13px Nunito, system-ui, sans-serif; cursor: pointer; }
#kr-panel .kr-pick button.on { background: #e63946; color: #fff; }
#kr-panel .kr-go { display: flex; gap: 8px; margin: 10px 0 4px; }
#kr-panel .kr-go button { flex: 1; border: 0; border-radius: 12px; padding: 11px 10px; background: #22c55e; color: #fff; font: 900 15px Nunito, system-ui, sans-serif; cursor: pointer; box-shadow: 0 3px 0 #15803d; }
#kr-panel .kr-go button:disabled { opacity: .45; cursor: default; }
#kr-panel .kr-go button.kr-no { flex: 0 0 auto; background: #eef1f5; color: #b42318; box-shadow: none; }
#kr-panel .kr-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-weight: 800; }
#kr-panel .kr-find input { width: 100%; box-sizing: border-box; border: 2px solid #e3e7ec; border-radius: 10px; padding: 8px 10px; font: 700 14px Nunito, system-ui, sans-serif; margin-top: 6px; }
#kr-panel .kr-cand { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; max-height: 160px; overflow: auto; }
#kr-panel .kr-clock { margin: 6px 0 2px; padding: 7px 10px; border-radius: 10px; background: #fff4e5; color: #8a4b00; font-weight: 800; }
#kr-panel .kr-x { border: 0; margin-left: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fde8e8; color: #b42318; font: 900 12px Nunito, system-ui, sans-serif; cursor: pointer; }
/* a phone: the place of the action button stays, empty when there is nothing to do, so the buttons above it never jump down under your thumb (chat by mistake) */
body.touch .acts #t-action.hidden { display: inline-flex !important; visibility: hidden; pointer-events: none; }
/* the dark theme, inside the windows: every light background, edge and dark letter of the rules above, the same hue but dark (or light) */
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #name-form input { background: hsl(0, 0%, 15%); border: 3px solid hsl(0, 0%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .btn { background: hsl(0, 0%, 15%); box-shadow: 0 6px 0 hsl(207, 22%, 27%), 0 10px 20px rgba(0,0,0,.2); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .btn:active { box-shadow: 0 2px 0 hsl(207, 22%, 27%), 0 4px 10px rgba(0,0,0,.2); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .menu-card { background: hsla(0, 0%, 15%, 0.95); box-shadow: 0 20px 50px rgba(0,0,0,.3), inset 0 0 0 1px hsla(0, 0%, 27%, 0.6); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .menu-sec.now { border-top: 1px solid hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .now-list li { background: hsl(210, 33%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .now-list li span { color: hsl(28, 60%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .menu-tools .btn { background: hsl(210, 33%, 18%); box-shadow: 0 4px 0 hsl(208, 24%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .menu-tools .btn:active { box-shadow: 0 1px 0 hsl(208, 24%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #hint b { color: hsl(32, 60%, 70%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #crosshair { border: 2px solid hsl(0, 0%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #crosshair.scope { background: radial-gradient(circle, hsl(0, 0%, 15%) 0 2.5px, transparent 3.2px); border: 2.5px solid hsl(0, 0%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .panel { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .x { background: hsl(210, 21%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .tab { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #lb-list li { border-bottom: 1px solid hsl(210, 21%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #lb-list li:nth-child(1) .r, :where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #lb-list li:nth-child(1) .s { color: hsl(32, 60%, 70%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #lb-list li.me { background: hsl(39, 35%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #lb-me { color: hsl(32, 60%, 70%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .fb-kind button { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #fb-text { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #fb-text:focus { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #who-panel { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .who-head { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #who-list li { border-bottom: 1px solid hsl(210, 21%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #who-list button { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .hats .hat { background: hsl(210, 33%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .hats .hat:hover { background: hsl(210, 33%, 21%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .hats .hat.on { background: hsl(29, 35%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #travel-panel { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #travel-todo, :where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #travel-vak { box-shadow: 0 3px 0 hsl(207, 22%, 27%), 0 4px 8px rgba(0,0,0,.12); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #travel-todo:active, :where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #travel-vak:active { box-shadow: 0 1px 0 hsl(207, 22%, 27%), 0 2px 4px rgba(0,0,0,.12); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-head { background: hsl(0, 0%, 15%); border-bottom: 1px solid hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-search input { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-search input:focus { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-chips button { background: hsl(210, 27%, 19%); color: hsl(209, 15%, 73%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-grid button { background: hsl(210, 29%, 17%); box-shadow: inset 0 0 0 1px hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-grid button:hover { background: hsl(43, 35%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .news-dot { box-shadow: 0 0 0 2px hsl(0, 0%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .news-item { background: hsl(210, 29%, 17%); box-shadow: inset 0 0 0 1px hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-grid button.new { background: hsl(40, 35%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-sec.recent .travel-grid button { background: hsl(26, 35%, 19%); box-shadow: inset 0 0 0 1px hsl(24, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-grid mark { background: hsl(27, 35%, 25%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .travel-map { background: hsl(211, 35%, 19%); color: hsl(210, 60%, 76%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #deal-panel { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .deal-btn { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .cas-bets button { background: hsl(46, 35%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .realtor-card { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .realtor-card .rc-top span { color: hsl(218, 54%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .realtor-card .rc-btns button { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .house-row { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .house-row .hr-up { color: hsl(123, 46%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .house-row .hr-funda { color: hsl(21, 60%, 70%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .house-row.open { background: hsl(43, 35%, 28%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .house-acts { background: hsl(45, 35%, 21%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .house-acts .deal-btn { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .ve-bid { background: hsl(0, 0%, 15%); border: 2px solid hsl(210, 21%, 27%); color: hsl(0, 0%, 85%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .mp-tile { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .mp-offer { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .mp-buy:disabled { background: hsl(210, 17%, 29%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .led-amt.up { color: hsl(123, 46%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .led-amt.down { color: hsl(0, 60%, 69%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #t-run.on { background: hsl(36, 35%, 29%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #t-put { border-color: hsl(36, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #d-steer { border: 1.5px solid hsla(0, 0%, 27%, 0.3); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #d-knob { background: linear-gradient(180deg, hsl(0, 0%, 15%), hsl(220, 25%, 26%)); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .ped { border: 1.5px solid hsla(0, 0%, 27%, 0.3); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .ped.on { border-color: hsl(36, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .ped.gas.on { border-color: hsl(135, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .dm-round { background: hsl(39, 35%, 22%); box-shadow: 0 3px 0 hsl(39, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .dm-round:hover { background: hsl(39, 35%, 26%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .link-btn:hover { color: hsl(28, 60%, 76%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree #name-form input { box-shadow: 0 0 0 1px hsl(212, 25%, 27%), 0 6px 18px rgba(0,0,0,.08); border-color: hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree .name-note { background: hsl(210, 33%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .name-new { background: hsl(35, 35%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .menu-card.entree { background: hsl(39, 35%, 17%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree .menu-tools .btn { background: hsl(39, 35%, 22%); box-shadow: 0 4px 0 hsl(39, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree .menu-tools .btn:active { box-shadow: 0 1px 0 hsl(39, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree .now-list li { background: hsl(39, 35%, 22%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree .menu-sec.now { border-top-color: hsl(39, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .menu-set { background: hsl(0, 0%, 15%); box-shadow: inset 0 0 0 1px hsl(39, 25%, 27%), 0 2px 8px rgba(120, 80, 20, .06); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .set-ico { background: hsl(39, 35%, 22%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .set-row { border-bottom: 1px solid hsl(39, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .seg { background: hsl(39, 35%, 22%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #set-steer { background: hsl(39, 35%, 22%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree .name-note { background: hsl(39, 35%, 22%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .entree #name-form input { border-color: hsl(39, 25%, 27%); box-shadow: 0 0 0 1px hsl(39, 25%, 27%), 0 6px 18px rgba(80,50,10,.08); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .realtor-card.showpiece { background: linear-gradient(180deg, hsl(40, 35%, 18%), hsl(41, 35%, 22%)); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .realtor-card.showpiece .rc-top span { color: hsl(39, 60%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .realtor-card .rc-sold { color: hsl(123, 46%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #d-steer.joy { border: 2px solid hsla(0, 0%, 27%, 0.35); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-head { color: hsl(211, 16%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-head.bag-click:active { background: hsl(210, 31%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-head span { background: hsl(210, 31%, 20%); color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-tile { background: hsl(210, 35%, 18%); box-shadow: inset 0 0 0 1px hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-tile:hover { background: hsl(210, 35%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-tile .bt-name { color: hsl(215, 28%, 82%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-tile .bt-act { color: hsl(28, 60%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-tile .bt-extra { background: hsl(0, 0%, 15%); box-shadow: inset 0 0 0 1px hsl(210, 25%, 27%); color: hsl(211, 16%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-crate { background: hsl(202, 35%, 20%); color: hsl(200, 59%, 77%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-rows { border: 1px solid hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-sub { background: hsl(210, 29%, 17%); border-bottom: 1px solid hsl(210, 25%, 27%); color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-row { background: hsl(0, 0%, 15%); border-bottom: 1px solid hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-row.on { background: hsl(30, 35%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .need-ok { color: hsl(136, 55%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .need-no { color: hsl(6, 60%, 69%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .fb-shot img { background: hsl(210, 27%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #fb-reply .fbr-mine { background: hsl(210, 27%, 19%); color: hsl(211, 16%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #fb-reply .fbr-ans { background: hsl(35, 35%, 20%); color: hsl(43, 60%, 85%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-n i { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-n small { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-row.on .br-n small { color: hsl(28, 60%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-act.soft { background: hsl(210, 21%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-bin:hover { background: hsl(0, 35%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-row.ask { background: hsl(0, 35%, 19%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-q { color: hsl(0, 60%, 74%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-q small { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .br-no { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-banner { background: hsl(136, 35%, 21%); color: hsl(136, 56%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .slot-card { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .slot-empty { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bag-pass.none { background: hsl(210, 27%, 19%); color: hsl(217, 11%, 72%); box-shadow: inset 0 0 0 1px hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .pass-none { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .pass-none .pc-d { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .pass-close { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .fl-ask button, :where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #fl-ask button { background: hsl(210, 35%, 19%); color: hsl(211, 29%, 83%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #mic-ask .ma-card { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #mic-ask p { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #mic-ask .ma-no { background: hsl(210, 31%, 20%); color: hsl(211, 16%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .note-paper { background: linear-gradient(180deg, hsl(45, 35%, 22%), hsl(44, 35%, 30%)); color: hsl(33, 40%, 81%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-sec { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-card { border: 1px solid hsl(210, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-card.done { background: hsl(135, 35%, 18%); border-color: hsl(136, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-card.paused { background: hsl(220, 20%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-card.paused .quest-steps li.now { background: hsl(210, 21%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-pill.paused { background: hsl(210, 21%, 20%); color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-pill { background: hsl(29, 35%, 20%); color: hsl(28, 60%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-pill.now { background: hsl(212, 35%, 20%); color: hsl(211, 60%, 76%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-pill.done { background: hsl(136, 35%, 21%); color: hsl(136, 56%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-what { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-steps li.now { background: hsl(32, 35%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-steps li small { color: hsl(34, 60%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .quest-reward { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #coach .c-bubble { background: hsl(0, 0%, 15%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #coach .c-n { color: hsl(217, 11%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #coach p { color: hsl(211, 16%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #coach .c-btns button { background: hsl(210, 21%, 20%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .mp-form { background: hsl(35, 35%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .mp-form input { border: 2px solid hsl(38, 25%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .dk-rumor { color: hsl(210, 20%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .dk-note { color: hsl(210, 17%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .boer-card { background: hsla(42, 35%, 18%, 0.97); color: hsl(29, 39%, 83%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .boer-card .bc-head { color: hsl(136, 43%, 80%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .boer-card .bc-head small { color: hsl(34, 18%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bc-track { background: hsl(40, 35%, 29%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bc-say { color: hsl(30, 29%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .boer-panel h3 { color: hsl(136, 43%, 80%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .boer-panel h3 small { color: hsl(34, 18%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-bar { background: hsl(40, 35%, 29%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-milk { color: hsl(30, 29%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-kaas { background: hsl(43, 35%, 21%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-k-t small { color: hsl(34, 18%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-gear small { color: hsl(34, 18%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-empty { color: hsl(34, 18%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-tips { color: hsl(34, 21%, 75%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .tw-q button { background: hsl(83, 35%, 22%); color: hsl(136, 43%, 80%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .kp-panel .kp-hi { color: hsl(30, 29%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-kaas.took { background: hsl(83, 35%, 22%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-milksell { background: hsl(207, 35%, 21%); color: hsl(208, 60%, 77%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .bp-milknote { color: hsl(34, 18%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .notes-item { background: hsl(214, 35%, 18%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) .notes-item small { color: hsl(212, 11%, 69%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #dm-box .dm-msg.theirs { background: hsl(35, 35%, 20%); color: hsl(43, 60%, 85%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #dm-box .dm-msg.mine { background: hsl(214, 35%, 19%); color: hsl(211, 33%, 82%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #dm-box .dm-ta { border: 1px solid hsl(212, 18%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #dm-box .dm-more { background: hsl(214, 26%, 20%); color: hsl(211, 16%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-ui .kr-row i { box-shadow: 0 0 0 1.5px hsla(0, 0%, 27%, 0.7); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-panel .kr-pick button, :where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-panel .kr-cand button { background: hsl(214, 26%, 20%); color: hsl(211, 29%, 83%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-panel .kr-go button.kr-no { background: hsl(214, 26%, 20%); color: hsl(4, 60%, 72%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-panel .kr-find input { border: 2px solid hsl(213, 19%, 27%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-panel .kr-clock { background: hsl(35, 35%, 20%); color: hsl(33, 60%, 78%); }
:where(html.dark :is(.panel, #deal-panel:not(.lux), #who-panel, #travel-panel, .menu-card, .slot-card)) #kr-panel .kr-x { background: hsl(0, 35%, 19%); color: hsl(4, 60%, 72%); }
/* the dark theme (Instellingen → Thema, html.dark from app.js): only the windows go dark (menu, travel, shops, who is where), the village stays as it is.
   The colours of the text are set on the windows themselves, so whatever is in them with var(--text) / var(--muted) follows */
html.dark :is(.menu-card, .menu-card.entree, .panel, #who-panel, #travel-panel, #deal-panel:not(.lux)) {
  --text: #e9eef3; --muted: #a3afbb; background: #1b222b; color: var(--text); box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 0 0 1px #2e3844;
}
:where(html.dark) :where(.menu-card, .panel, #who-panel, #travel-panel, #deal-panel:not(.lux)) :where(button, input, select, textarea) { color: inherit; }
:where(html.dark) .who-head, :where(html.dark) .travel-head { background: #1b222b; border-bottom-color: #2e3844; }
:where(html.dark) .menu-set { background: #222a34; box-shadow: inset 0 0 0 1px #2e3844; }
:where(html.dark) .set-row, :where(html.dark) #lb-list li, :where(html.dark) #who-list li { border-bottom-color: #2e3844; }
:where(html.dark) .menu-sec.now, :where(html.dark) .entree .menu-sec.now { border-top-color: #2e3844; }
/* the light tiles, fields and buttons inside them */
:where(html.dark) .btn, :where(html.dark) .menu-tools .btn, :where(html.dark) .entree .menu-tools .btn, :where(html.dark) .x, :where(html.dark) .tab, :where(html.dark) .fb-kind button, :where(html.dark) #fb-text, :where(html.dark) #fb-text:focus, :where(html.dark) #emotes button, :where(html.dark) #who-list button, :where(html.dark) .hats .hat, :where(html.dark) .travel-search input, :where(html.dark) .travel-search input:focus, :where(html.dark) .travel-chips button, :where(html.dark) .travel-grid button, :where(html.dark) .news-item, :where(html.dark) .now-list li, :where(html.dark) .entree .now-list li, :where(html.dark) .entree .name-note, :where(html.dark) .deal-btn, :where(html.dark) .house-acts .deal-btn, :where(html.dark) .house-row, :where(html.dark) .realtor-card, :where(html.dark) .realtor-card .rc-btns button, :where(html.dark) .mp-tile, :where(html.dark) .mp-offer, :where(html.dark) .ve-bid, :where(html.dark) .set-ico, :where(html.dark) .seg, :where(html.dark) #set-steer, :where(html.dark) #name-form input, :where(html.dark) .entree #name-form input {
  background: #27313c; color: #e9eef3; border-color: #3a4552;   /* (a fixed light colour, not var(--text): a .btn outside the dark windows (penalty, darts, an invite card) kept the dark text of the light theme) */
}
:where(html.dark) .btn, :where(html.dark) .menu-tools .btn, :where(html.dark) .entree .menu-tools .btn { box-shadow: 0 4px 0 #11161c, 0 8px 16px rgba(0,0,0,.3); }
:where(html.dark) .travel-grid button, :where(html.dark) .news-item { box-shadow: inset 0 0 0 1px #34404d; }
:where(html.dark) .x:hover, :where(html.dark) .travel-grid button:hover, :where(html.dark) .hats .hat:hover { background: #34404d; }
:where(html.dark) .seg button { color: #c9d2db; }
:where(html.dark) .travel-grid button.new { background: #2f2a1a; }
:where(html.dark) .travel-sec.recent .travel-grid button { background: #33281f; box-shadow: inset 0 0 0 1px #5a3f2a; }
:where(html.dark) .hats .hat.on { background: #3a2c1f; }
:where(html.dark) #lb-list li.me { background: #3a2c1f; }
:where(html.dark) .house-row.open { background: #43391f; }
:where(html.dark) .house-acts { background: #2e2a1f; }
:where(html.dark) .name-new { background: #2e2a1f; }
:where(html.dark) .travel-map { background: #1e3247; color: #b9dbff; }
:where(html.dark) .cas-bets button { background: #2e2a1f; color: var(--text); }
:where(html.dark) .now-list li span, :where(html.dark) .link-btn { color: #ffab66; }
:where(html.dark) .realtor-card .rc-top span { color: #9bb8e8; }
:where(html.dark) .travel-grid mark { background: #6a4426; }
:where(html.dark) .news-day { color: #8d99a6; }
:where(html.dark) .house-row .hr-up, :where(html.dark) .led-amt.up { color: #7bd88f; }
:where(html.dark) .led-amt.down { color: #ff8a80; }
:where(html.dark) .dk-rumor, :where(html.dark) .dk-note { color: #a9bccc; }
:where(html.dark) .dk-row { border-top-color: #2e3844; }
:where(html.dark) .boer-panel h3 { color: #8fd19e; }
:where(html.dark) .boer-panel h3 small { color: #c4b49c; }
/* the bag in the dark theme: its rows, tiles and headings (white rows had white letters) */
:where(html.dark) .slot-card { --text: #e9eef3; --muted: #a3afbb; background: #1b222b; color: var(--text); }
:where(html.dark) .bag-head { color: #d3dbe3; }
:where(html.dark) .bag-head span, :where(html.dark) .bag-head.bag-click:active { background: #2e3844; color: #c9d2db; }
:where(html.dark) .bag-fold { color: #9aa6b2; }
:where(html.dark) .bag-tile { background: #27313c; box-shadow: inset 0 0 0 1px #34404d; }
:where(html.dark) .bag-tile:hover { background: #2f3a46; }
:where(html.dark) .bag-tile .bt-name { color: var(--text); }
:where(html.dark) .bag-tile .bt-act, :where(html.dark) .bag-row.on .br-n small { color: #ffab66; }
:where(html.dark) .bag-tile .bt-extra { background: #1b222b; box-shadow: inset 0 0 0 1px #3a4552; color: #d3dbe3; }
:where(html.dark) .bag-rows { border-color: #34404d; }
:where(html.dark) .bag-sub { background: #222a34; border-bottom-color: #34404d; color: #a3afbb; }
:where(html.dark) .bag-row { background: #27313c; border-bottom-color: #34404d; }
:where(html.dark) .bag-row.on { background: #3a2c1f; }
:where(html.dark) .bag-row.ask { background: #43262a; }
:where(html.dark) .br-n i, :where(html.dark) .br-n small, :where(html.dark) .br-q small, :where(html.dark) .slot-empty { color: #a3afbb; }
:where(html.dark) .br-q { color: #ff9e9e; }
:where(html.dark) .br-act.soft, :where(html.dark) .br-no { background: #34404d; color: var(--text); }
:where(html.dark) .br-bin:hover { background: #43262a; }
:where(html.dark) .bag-banner { background: #1e3a28; color: #9ee0b0; }
:where(html.dark) .bag-crate { background: #1e3247; color: #b9dbff; }
:where(html.dark) .bag-pass.none { background: #27313c; color: #a3afbb; box-shadow: inset 0 0 0 1px #34404d; }
:where(html.dark) .bp-kaas { background: #2e2a1f; }
:where(html.dark) .bp-kaas.took { background: #24301f; }
:where(html.dark) .bp-k-t small, :where(html.dark) .bp-gear small, :where(html.dark) .bp-empty, :where(html.dark) .bp-milk, :where(html.dark) .bp-milknote, :where(html.dark) .bp-tips { color: #c4b49c; }
:where(html.dark) .bp-lock { color: #a8987a; }
:where(html.dark) .bp-gear { border-top-color: #2e3844; }
:where(html.dark) .bp-bar { background: #3a3326; }
:where(html.dark) .bp-milksell { background: #1e3247; color: #b9dbff; }
:where(html.dark) .bp-kaas.gold { background: linear-gradient(90deg, #4a3a12, #5e4814); }
/* the windows that set their colours in the code itself (the travel desk, the flying school, the island, the end cards of darts and penalties): style="…", so !important */
html.dark :is([style*="background:#fffdf7"], [style*="background: rgb(255, 253, 247)"], [style*="background: rgb(255, 255, 255); color: rgb(34, 34, 34)"]) { --text: #e9eef3; --muted: #a3afbb; background: #1b222b !important; color: var(--text) !important; }
html.dark :is([style*="background:#fff6dc"], [style*="background: rgb(255, 246, 220)"]) { background: #2e2a1f !important; }
html.dark :is([style*="background:#fffdf7"], [style*="background: rgb(255, 253, 247)"], [style*="background: rgb(255, 255, 255); color: rgb(34, 34, 34)"], .panel, #deal-panel:not(.lux)) :is([style*="color:#2b2b2b"], [style*="color: rgb(43, 43, 43)"], [style*="color:#222"], [style*="color: rgb(34, 34, 34)"]) { color: var(--text) !important; }
html.dark :is([style*="background:#fffdf7"], [style*="background: rgb(255, 253, 247)"], [style*="background: rgb(255, 255, 255); color: rgb(34, 34, 34)"], .panel, #deal-panel:not(.lux)) :is([style*="color:#6b6457"], [style*="color: rgb(107, 100, 87)"], [style*="color:#555"], [style*="color: rgb(85, 85, 85)"]) { color: var(--muted) !important; }
html.dark :is([style*="background:#fffdf7"], [style*="background: rgb(255, 253, 247)"], .panel, #deal-panel:not(.lux)) :is([style*="color:#2e7d32"], [style*="color: rgb(46, 125, 50)"]) { color: #7bd88f !important; }
/* (the white rows in those windows (the flight school, the island, the taxi, the restaurant, the jet ski, the holiday): light text came on a white row) */
html.dark :is([style*="background:#fffdf7"], [style*="background: rgb(255, 253, 247)"]) :is([style*="background:#fff;"], [style*="background: rgb(255, 255, 255)"]) { background: #27313c !important; border-color: #3a4552 !important; }
html.dark :is([style*="background:#fffdf7"], [style*="background: rgb(255, 253, 247)"]) :is([style*="background:#ffb300"], [style*="background: rgb(255, 179, 0)"]) { color: #2b2b2b !important; }   /* (the orange row: dark letters read better on it) */
/* bingo in the dark theme */
:where(html.dark) .bg-prizes .jp { color: #ff8a80; }
:where(html.dark) .bg-won { background: #3a321c; }
:where(html.dark) .bg-card { background: #222a34; box-shadow: inset 0 0 0 2px #34404d; }
:where(html.dark) .bg-card.line { box-shadow: inset 0 0 0 2px #66bb6a; } :where(html.dark) .bg-card.full { background: #3a321c; box-shadow: inset 0 0 0 3px #f9a825; }
:where(html.dark) .bg-grid span { background: #2f3a46; color: #e9eef3; }
:where(html.dark) .bg-grid span.hit { background: #ffb300; color: #3a2a00; }
/* ---------- parachute jumping at Schiphol (skydive.js): the button by the desk, the window, the buttons in the air ---------- */
.sky-desk { position: fixed; left: 50%; bottom: calc(206px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8; padding: 12px 20px; border: 0; border-radius: 999px; background: #ff7a1a; color: #fff; font: 800 16px var(--f); box-shadow: 0 4px 0 #c75a10; cursor: pointer; white-space: nowrap; }   /* (over the buttons of the game, under the menu (10) and the windows (20)) */
.sky-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; box-sizing: border-box; width: min(92vw, 420px); max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto; background: #fffdf7; border-radius: 20px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); font: 600 15px var(--f); color: #2b2b2b; }
.sky-h { font-size: 18px; margin-bottom: 8px; }
.sky-card { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; padding: 10px 12px; border-radius: 14px; border: 3px solid #e6e0d2; background: #fff; font: 700 15px var(--f); color: #2b2b2b; text-align: left; }
button.sky-card { cursor: pointer; }
.sky-card.go { background: #ff7a1a; border-color: #d85f0a; color: #fff; text-align: center; }
.sky-card.on { background: #fff3e0; border-color: #ffb74d; }
.sky-card:disabled { opacity: .5; cursor: default; }
.sky-sub { margin: 14px 0 6px; font-weight: 800; }
.sky-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sky-sw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px; border: 3px solid #e6e0d2; border-radius: 12px; background: #fff; font: 700 13px var(--f); color: #2b2b2b; cursor: pointer; }
.sky-sw i { display: block; width: 100%; height: 22px; border-radius: 7px; background: var(--sw, #ddd); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.sky-sw small { font-weight: 800; color: #8a7f6a; }
.sky-sw.on { border-color: #ff7a1a; background: #fff3e0; }
.sky-sw.buy small { color: #d84315; }
.sky-hud { position: fixed; left: 50%; top: calc(70px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 31; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.sky-alt { font: 900 22px var(--f); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.sky-row { display: flex; gap: 8px; pointer-events: auto; }
.sky-b { white-space: nowrap; border: 0; border-radius: 999px; padding: 10px 16px; background: rgba(20,24,32,.85); color: #fff; font: 800 15px var(--f); box-shadow: 0 3px 10px rgba(0,0,0,.3); cursor: pointer; touch-action: manipulation; }
.sky-b.on { background: #ff7a1a; }
.sky-b:disabled { opacity: .55; cursor: default; }
:where(html.dark) .sky-panel { background: #1b222b; color: #e9eef3; box-shadow: 0 12px 40px rgba(0,0,0,.55), inset 0 0 0 1px #2e3844; }
:where(html.dark) .sky-card, :where(html.dark) .sky-sw { background: #27313c; border-color: #3a4552; color: #e9eef3; }
:where(html.dark) .sky-card.on, :where(html.dark) .sky-sw.on { background: #3a2c1f; border-color: #ff7a1a; }
:where(html.dark) .sky-card.go { background: #ff7a1a; border-color: #d85f0a; color: #fff; }
:where(html.dark) .sky-sw small { color: #a3afbb; }
:where(html.dark) .sky-sw.buy small { color: #ffab66; }
/* Westendorf: the windows as the cheese farm's (wdplay.js) */
.wd-modal .wd-panel { max-height: 100%; }
.wd-row { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; box-sizing: border-box; }
button.wd-row { cursor: pointer; }
button.wd-row:active { filter: brightness(.94); }
.wd-row.on { box-shadow: inset 0 0 0 2px #57b04a; }
.wd-row.todo { background: #fff; box-shadow: inset 0 0 0 2px #efe3c8; }
.wd-row button:disabled { opacity: .45; cursor: default; }
.wd-go { font: 900 22px var(--f); color: #1f4d2b; padding: 0 4px; }
.wd-main { display: block; margin: 8px 0; }
.wd-say { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 6px; padding: 10px 12px; border-radius: 14px; background: #fff4dc; color: #5a4632; font-weight: 700; }
.wd-say b:first-child { display: block; color: #1f4d2b; }
.wd-say-i { font-size: 30px; line-height: 1; }
.wd-cols { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.wd-cols button { border: 2px solid #e7dcc6; border-radius: 999px; padding: 6px 10px; background: #fff; font: 800 13px var(--f); color: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.wd-cols button span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); }
.wd-cols button.on { border-color: #1f4d2b; box-shadow: 0 0 0 2px #57b04a; }
.wd-cols button.off { opacity: .45; }
.wd-buy { display: flex; gap: 6px; flex: none; }
:where(html.dark) .wd-row.todo, :where(html.dark) .wd-cols button { background: hsl(43, 30%, 17%); box-shadow: inset 0 0 0 2px hsl(40, 30%, 26%); }
:where(html.dark) .wd-say { background: hsl(40, 35%, 20%); color: hsl(30, 29%, 82%); }
:where(html.dark) .wd-say b:first-child, :where(html.dark) .wd-go { color: #8fd19e; }
/* trying clothes on, on a phone: the mirror under the window takes the place of the joystick */
body.mirror-low #stick { display: none; }
/* share and earn: the story picture small in the window */
.deel-panel .deel-img { display: block; width: 46%; margin: 6px auto 8px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.deel-panel .deel-pick { display: block; text-align: center; cursor: pointer; }
.deel-panel .bp-all { display: block; width: 100%; text-align: center; }
/* the gold tile of the menu: share on your story and earn (two wide, beside WhatsApp) */
.entree .menu-tools .btn.tile.goud { grid-column: span 2; background: linear-gradient(180deg, #ffe9a6, #f3c84b); color: #3b2a06; box-shadow: 0 4px 0 #b88a1c; }
.entree .menu-tools .btn.tile.goud:hover { background: linear-gradient(180deg, #fff0bd, #f6cf5c); }
:where(html.dark) .entree .menu-tools .btn.tile.goud { background: linear-gradient(180deg, #e9c45a, #c79a28); color: #23180a; box-shadow: 0 4px 0 #7a5a12; }
/* the big one on top of Doen: share Ons Dorp, € 10.000 and the gold crown. The whole row, the icon beside two lines, a light gliding over it */
.entree .menu-tools .btn.tile.goud.deel-big { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 16px; text-align: left; position: relative; overflow: hidden; font-size: 15px; }
.deel-big .t-ico { font-size: 30px; }
.deel-big .deel-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.deel-big .deel-t b { font-size: 16px; font-weight: 900; }
.deel-big .deel-t small { font-size: 13px; font-weight: 700; opacity: .85; }
.deel-big::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: deel-glans 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes deel-glans { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .deel-big::after { animation: none; display: none; } }
.t-ico .wa-logo { width: 1.15em; height: 1.15em; display: block; }   /* (the WhatsApp logo on the tile, as large as the emoji of the others) */
/* Westendorf: a row of a shop just bought from lights up a moment */
@keyframes wdFlash { 0% { background: #c8f0c0; } 100% { background: transparent; } }
.bp-gear.wd-flash { animation: wdFlash 1.4s ease-out; border-radius: 10px; }
body:has(.wd-modal[style*="flex"]) #toast { z-index: 65; }   /* (a window of Westendorf open: what you bought or did is said over it, not behind it) */
/* Service Apotheek Epe (apotheek.js): the drawers to choose from, the lab game */
.apo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 8px; }
.apo-la { border: 2px solid #e7dcc6; border-radius: 10px; padding: 7px 6px; background: #fbf3df; font: 800 13px var(--f); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.apo-la small { font-weight: 700; color: #7a6a55; }
.apo-la.on { border-color: #1f4d2b; background: #e3f1dc; box-shadow: 0 0 0 2px #57b04a; }
.apo-game { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(10,20,30,.6); touch-action: none; }
.apo-card { width: min(420px, 94vw); background: #ffffff; border-radius: 18px; padding: 12px; box-sizing: border-box; box-shadow: 0 10px 40px rgba(0,0,0,.4); font: 700 14px var(--f); color: #1f2d36; }
.apo-txt { min-height: 42px; margin: 2px 4px 8px; line-height: 1.35; }
.apo-cv { display: block; width: 100%; border-radius: 12px; }
.apo-row { display: flex; gap: 8px; margin-top: 10px; }
.apo-btn { flex: 1; border: 0; border-radius: 14px; padding: 14px; background: linear-gradient(#4fb0e0, #1f7fb5); color: #fff; font: 900 18px var(--f); cursor: pointer; box-shadow: 0 4px 0 #165c84; touch-action: none; user-select: none; -webkit-user-select: none; }
.apo-stop { flex: none; border: 0; border-radius: 14px; padding: 14px; background: #e3e7ea; color: #33414c; font: 800 14px var(--f); cursor: pointer; }
:where(html.dark) .apo-la { background: hsl(43, 30%, 17%); border-color: hsl(40, 30%, 26%); }
:where(html.dark) .apo-la small { color: hsl(34, 18%, 72%); }
:where(html.dark) .apo-la.on { background: hsl(120, 25%, 20%); }
:where(html.dark) .apo-card { background: hsl(210, 20%, 15%); color: hsl(210, 20%, 90%); }
:where(html.dark) .apo-stop { background: hsl(210, 15%, 25%); color: hsl(210, 20%, 90%); }
/* Service Apotheek Epe: the bench at counter 3 (apotheek.js bench) */
.apo-bench { max-width: 520px; }
.apo-rx { border-radius: 14px; overflow: hidden; border: 2px solid #d5dde3; margin: 2px 0 10px; background: #fff; }
.apo-rx-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: #3a6585; color: #fff; font: 800 14px var(--f); }
.apo-rx-h small { font-weight: 600; opacity: .85; }
.apo-rx-b { padding: 8px 12px; font: 700 15px/1.4 var(--f); color: #1f2d36; }
.apo-steps { display: flex; gap: 4px; margin-bottom: 10px; }
.apo-steps span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 999px; background: #eef1f3; color: #7a8790; font: 800 12px var(--f); }
.apo-steps span.on { background: #3a6585; color: #fff; }
.apo-steps span.done { background: #d8ecd0; color: #2e6b2e; }
.apo-stage { display: flex; flex-direction: column; gap: 8px; }
.apo-say { font: 800 16px var(--f); text-align: center; color: #1f2d36; }
.apo-big { font-size: 64px; text-align: center; line-height: 1.1; }
.apo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 8px; border-radius: 10px; background: #e9e4dc; }
.apo-drawer { position: relative; height: 54px; border: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(#fbfaf8, #efece7); box-shadow: inset 0 0 0 3px #7a3d32, 0 2px 0 #c9c2b8; font: inherit; transition: transform .25s, box-shadow .25s; }
.apo-drawer .apo-dl { position: absolute; left: 10px; top: 8px; font: 800 12px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; color: #33414c; }
.apo-drawer .apo-dg { position: absolute; right: 10px; bottom: 9px; width: 34px; height: 6px; border-radius: 3px; background: #b0b8be; }
.apo-drawer:hover { box-shadow: inset 0 0 0 3px #a24b3c, 0 2px 0 #c9c2b8; }
.apo-drawer.open { transform: translateY(-4px) scale(1.06); box-shadow: inset 0 0 0 3px #43a047, 0 8px 16px rgba(0,0,0,.25); background: linear-gradient(#e8f5e1, #d0ebc3); }
.apo-drawer.bad { animation: apoShake .35s; box-shadow: inset 0 0 0 3px #e53935; }
@keyframes apoShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.apo-tray { min-height: 92px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 10px; border-radius: 12px; background: #f4f6f7; border: 2px dashed #c9d2d8; }
.apo-strip { display: grid; grid-template-columns: repeat(5, 12px); gap: 3px; padding: 5px; border-radius: 6px; background: linear-gradient(135deg, #e6eaee, #c7cfd6); box-shadow: inset 0 0 0 1px #aab4bc; }
.apo-loose { display: flex; flex-wrap: wrap; gap: 3px; max-width: 120px; padding: 5px; }
.apo-strip i, .apo-loose i { width: 12px; height: 8px; border-radius: 4px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.15); }
.apo-count { text-align: center; font: 700 15px var(--f); color: #5b6b76; }
.apo-count b { font: 900 26px var(--f); color: #1f2d36; }
.apo-count b.ok { color: #2e7d32; }
.apo-count b.over { color: #c62828; }
.apo-btns { display: flex; gap: 6px; }
.apo-b { flex: 1; border: 0; border-radius: 12px; padding: 12px 4px; background: #e3edf3; color: #1f3a52; font: 900 15px var(--f); cursor: pointer; box-shadow: 0 3px 0 #b8c8d3; }
.apo-b:active { transform: translateY(2px); box-shadow: 0 1px 0 #b8c8d3; }
.apo-label { text-align: left; border: 2px solid #d5dde3; border-radius: 10px; padding: 8px 12px 8px; background: #fff; font: 700 14px/1.4 var(--f); color: #1f2d36; cursor: pointer; }
.apo-label:hover { border-color: #3a6585; }
.apo-lh { display: block; font: 800 11px var(--f); color: #3a6585; letter-spacing: .05em; text-transform: uppercase; }
.apo-la2 { color: #8a4b00; }
.apo-label small { display: block; color: #7a8790; font-weight: 600; }
:where(html.dark) .apo-rx, :where(html.dark) .apo-label { background: hsl(210, 20%, 17%); border-color: hsl(210, 15%, 30%); }
:where(html.dark) .apo-rx-b, :where(html.dark) .apo-say, :where(html.dark) .apo-label, :where(html.dark) .apo-count b { color: hsl(210, 20%, 90%); }
:where(html.dark) .apo-steps span { background: hsl(210, 15%, 24%); color: hsl(210, 15%, 70%); }
:where(html.dark) .apo-tray { background: hsl(210, 15%, 18%); border-color: hsl(210, 15%, 32%); }
:where(html.dark) .apo-b { background: hsl(210, 25%, 25%); color: hsl(210, 30%, 90%); box-shadow: 0 3px 0 hsl(210, 25%, 15%); }
:where(html.dark) .apo-wall { background: hsl(30, 10%, 22%); }
/* the pharmacy: a hurry, two medicines side by side */
.apo-spoed { margin: -4px 0 8px; padding: 6px 10px; border-radius: 10px; background: #ffe5e0; color: #a3271a; font: 700 14px var(--f); text-align: center; animation: apoPulse 1s infinite alternate; }
@keyframes apoPulse { to { background: #ffd0c7; } }
.apo-pair { display: flex; justify-content: center; align-items: center; gap: 12px; font: 900 28px var(--f); color: #7a8790; }
.apo-pair i { width: 56px; height: 26px; border-radius: 13px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 0 0 2px rgba(0,0,0,.12); }
:where(html.dark) .apo-spoed { background: hsl(8, 50%, 22%); color: hsl(8, 80%, 85%); }
/* the pharmacy: the board of orders, the machines (apotheek.js) */
.apo-orders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.apo-order { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 10px; border: 0; border-radius: 16px; background: linear-gradient(#ffffff, #eef4f7); box-shadow: 0 4px 0 #c9d6de, inset 0 0 0 2px #d5e1e8; font: inherit; color: #1f2d36; cursor: pointer; text-align: center; transition: transform .12s; }
.apo-order:hover { transform: translateY(-3px); }
.apo-order b { font: 900 14px/1.15 var(--f); }
.apo-order small { font: 700 11px var(--f); color: #6b7a84; }
.apo-oi { font-size: 40px; line-height: 1.1; }
.apo-op { margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: #e3f1dc; color: #2e6b2e; font: 900 13px var(--f); }
.apo-order.big { background: linear-gradient(#fff8e1, #ffecb3); box-shadow: 0 4px 0 #e0b84a, inset 0 0 0 2px #f3d77a; }
.apo-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: #ff8f00; color: #fff; font: 900 10px var(--f); }
.apo-ghead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.apo-ghead b { display: block; font: 900 17px var(--f); }
.apo-ghead small { font: 700 12px var(--f); color: #6b7a84; }
.apo-gi { font-size: 34px; }
.apo-taps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.apo-tap { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 0; border-radius: 12px; background: #eef2f5; font: 800 13px var(--f); color: #33414c; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 3px 0 #c9d2d8; }
.apo-tap i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.apo-tap:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9d2d8; }
.apo-end { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.apo-end span { font-size: 34px; color: #ffb300; letter-spacing: 4px; }
.apo-end span i { font-style: normal; color: #d5dde3; }
.apo-end b { font: 900 18px var(--f); }
.apo-end small { font: 700 13px var(--f); color: #6b7a84; }
:where(html.dark) .apo-order { background: linear-gradient(hsl(210, 20%, 20%), hsl(210, 20%, 16%)); color: hsl(210, 20%, 90%); box-shadow: 0 4px 0 hsl(210, 20%, 10%), inset 0 0 0 2px hsl(210, 15%, 30%); }
:where(html.dark) .apo-order.big { background: linear-gradient(hsl(40, 40%, 24%), hsl(40, 40%, 18%)); }
:where(html.dark) .apo-tap { background: hsl(210, 15%, 24%); color: hsl(210, 20%, 90%); }
.apo-game .apo-card { width: min(600px, 96vw); }   /* (the machines: as big as fits) */
/* the pharmacy: the tabs of the bench, the product of the day, the cabinet */
.apo-board { max-width: 560px; }
.apo-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.apo-tabs button { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 7px 6px; background: #eef2f5; color: #4f606b; font: 800 12px var(--f); cursor: pointer; white-space: nowrap; }
.apo-tabs button.on { background: #3a6585; color: #fff; }
.apo-theme { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: #fff3e0; color: #8a4b00; font: 700 13px var(--f); text-align: center; }
.apo-tag.hot { background: #e53935; }
.apo-order.leeg { opacity: .55; }
.apo-sup { color: #8a4b00 !important; }
.apo-kast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.apo-jar { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: #f6f8fa; box-shadow: inset 0 0 0 2px #e3e9ee; text-align: center; }
.apo-jar b { font: 800 12px/1.2 var(--f); }
.apo-jar small { font: 700 10px var(--f); color: #6b7a84; }
.apo-jar.lock { opacity: .5; }
.apo-medal { position: absolute; top: 2px; right: 4px; font-size: 18px; }
:where(html.dark) .apo-tabs button { background: hsl(210, 15%, 24%); color: hsl(210, 15%, 80%); }
:where(html.dark) .apo-tabs button.on { background: #3a6585; color: #fff; }
:where(html.dark) .apo-theme { background: hsl(30, 40%, 20%); color: hsl(30, 80%, 85%); }
:where(html.dark) .apo-jar { background: hsl(210, 15%, 18%); box-shadow: inset 0 0 0 2px hsl(210, 15%, 28%); }
.apo-next { margin: 0 0 8px; padding: 7px 10px; border-radius: 10px; background: #e8f1f7; color: #1f3a52; font: 700 13px var(--f); text-align: center; }
:where(html.dark) .apo-next { background: hsl(210, 25%, 22%); color: hsl(210, 30%, 88%); }

/* a big touch screen (a fold phone opened, a tablet; app.js resize sets body.bigtouch): the start card at full size and the round buttons
   in a row in their pill, as on a laptop, not the small column of a phone held on its side */
body.bigtouch .entree .hero { height: 190px; } body.bigtouch .entree .hero-title { font-size: 58px; } body.bigtouch .entree .card-body { gap: 14px; padding: 16px 20px 16px; }
body.bigtouch.touch .tb { width: 56px; height: 56px; font-size: 26px; } body.bigtouch.touch .tb.big { width: 70px; height: 70px; font-size: 32px; }
body.bigtouch .acts { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 40px; background: rgba(12,16,28,.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14);
  right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); }
body.bigtouch.driving .acts { bottom: calc(150px + env(safe-area-inset-bottom)); }
:where(html.dark) .gold-row .hr-val small.gold-win { color: #81c784; } :where(html.dark) .gold-row .hr-val small.gold-loss { color: #ef9a9a; }
/* the dark theme outside the windows too: what floats over the village (the hint with E, the notices, the pills and round buttons at the top,
   the emotes, the palette, the connection notice, a question card), the tips of the coach, the passes, the timing card of a task; the speech
   bubbles over the heads are drawn dark in app.js (bubbleTex) */
html.dark { --card: rgba(27, 34, 43, .94); }
html.dark :is(#hint, #toast, .round, .pill, #palette, #emotes, #conn, #fl-ask, .fl-ask) { --text: #e9eef3; --muted: #a3afbb; color: var(--text); }
:where(html.dark) #hint b { color: #ffb74d; }
:where(html.dark) :is(#coach .c-bubble, #mic-ask .ma-card, .pass-none) { --text: #e9eef3; --muted: #a3afbb; background: #1b222b; color: var(--text); }
:where(html.dark) .pass-close { background: #27313c; color: #e9eef3; }
:where(html.dark) .boer-card { background: rgba(27, 34, 43, .97); color: #e9eef3; border-color: #3f8a52; }
:where(html.dark) .boer-card .bc-head { color: #8fd19e; }
:where(html.dark) .boer-card .bc-head small { color: #c4b49c; }
:where(html.dark) .bc-track { background: #3a3326; }
:where(html.dark) .bc-mark { background: #fff6d8; }
:where(html.dark) #act-bar .act.aid { background: rgba(27, 34, 43, .92); color: #e9eef3; }
html.dark #money { --text: #3a2a00; color: #3a2a00; }   /* (the money pill stays yellow: dark letters on it) */
/* the windows of the travel desk, the island, the horeca, the taxi, the flying school, the jetski, darts and penalties: their colours are in the
   code itself (inline), so dark here with !important, the inline colours of their text and their white buttons along with it (as the browser
   writes them: #hex in innerHTML, rgb() after style.cssText) */
:where(html.dark) .inl-card { background: #1b222b !important; color: #e9eef3 !important; }
:where(html.dark) .inl-card :is([style*="color:#2b2b2b"], [style*="color: rgb(43, 43, 43)"], [style*="color:#222"], [style*="color: rgb(34, 34, 34)"]) { color: #e9eef3 !important; }
:where(html.dark) :is(.inl-card, .panel, #deal-panel:not(.lux)) :is([style*="color:#6b6457"], [style*="color: rgb(107, 100, 87)"], [style*="color:#555"], [style*="color: rgb(85, 85, 85)"]) { color: #b4bcc6 !important; }
:where(html.dark) :is(.inl-card, .panel, #deal-panel:not(.lux)) :is([style*="color:#2e7d32"], [style*="color: rgb(46, 125, 50)"]) { color: #8fd19e !important; }
:where(html.dark) :is(.inl-card, .panel, #deal-panel:not(.lux)) :is([style*="color:#c62828"], [style*="color: rgb(198, 40, 40)"]) { color: #ff8a80 !important; }
:where(html.dark) .inl-card :is([style*="background:#fff;"], [style*="background: rgb(255, 255, 255)"], [style*="background: rgb(255, 253, 247)"], [style*="background: rgb(244, 241, 234)"], [style*="background: rgb(255, 246, 220)"]) { background: #27313c !important; color: #e9eef3 !important; border-color: #3a4652 !important; }
:where(html.dark) .inl-card [style*="background: rgb(227, 245, 253)"] { background: #173447 !important; color: #e9eef3 !important; }
/* the milking card and the rest of a timing card: what it says; the coach: the step number and Overslaan; the news: the yellow button keeps dark letters */
:where(html.dark) .bc-say { color: #d9c9b0; }
:where(html.dark) #coach :is(.c-n, .c-btns .c-skip) { color: #a3afbb; }
:where(html.dark) .news-go { color: #3a2a00; }
:where(html.dark) #mirror span { color: #c4ccd4; }
/* on a phone the card sits up top, under the green level chip (lower still with the route banner, which moves the chip down) */
@media (pointer: coarse), (max-width: 640px) { .boer-card { top: calc(var(--chipb, calc(env(safe-area-inset-top, 0px) + 190px)) + 8px); } }
/* travelling (fadeOut in app.js): an evening sky with the place you go to, the way the light moves along the bar */
#tp-fade { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity .4s; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 115%, #ffd9a3 0%, #ff9f6b 22%, #c86b9a 45%, #4b5aa8 72%, #1d2b5c 100%); }
#tp-fade.on { opacity: 1; transition-duration: .18s; }   /* (quick to cover, slower to go: you see where you came) */
#tp-fade .tp-in { display: none; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(20, 20, 60, .45); padding: 0 16px; transform: translateY(6px); transition: transform .35s ease-out; }
#tp-fade.named .tp-in { display: block; }
#tp-fade.on .tp-in { transform: none; }
#tp-fade .tp-e { font-size: 56px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
#tp-fade .tp-t { font: 700 13px/1.2 Nunito, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
#tp-fade .tp-n { font: 900 26px/1.2 Nunito, system-ui, sans-serif; margin-top: 4px; max-width: 80vw; }
#tp-fade .tp-bar { width: 160px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
#tp-fade .tp-bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: #fff; animation: tp-go 0.9s ease-in-out infinite; }
@keyframes tp-go { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { #tp-fade .tp-bar i { animation: none; width: 100%; opacity: .6; } }

/* ---------- Bierbrouwerij Het Anker (brouwerij.js): the brewing panel at the bottom, dark oak in both themes; the thermometer runs 10° to 100°,
   the bands are the mash heats (dry, balanced, full) and the red line where the enzymes die ---------- */
.br-panel { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(580px, calc(100vw - 16px)); z-index: 60;
  background: linear-gradient(180deg, #3d2819, #2a1a10); color: #f6ead6; border: 2px solid #8a5a32; border-radius: 18px; padding: 10px 14px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  font: 600 14px var(--f); max-height: 52vh; overflow-y: auto; user-select: none; -webkit-user-select: none; }
.br-head { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.br-steps { display: flex; gap: 5px; margin-left: auto; }
.br-steps i { width: 10px; height: 10px; border-radius: 50%; background: #5a4130; } .br-steps i.ok { background: #c9a460; } .br-steps i.on { background: #ffb04a; box-shadow: 0 0 8px #ffb04a; }
.br-x { border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 8px; width: 30px; height: 30px; font: 900 15px var(--f); cursor: pointer; }
.br-gauge { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 8px 0 4px; }
.br-temp { grid-row: span 2; text-align: center; min-width: 86px; } .br-temp b { display: block; font: 900 32px/1 var(--f); color: #ffd27a; font-variant-numeric: tabular-nums; }
.br-temp small { display: block; font-size: 11px; color: #e6cfa8; margin-top: 2px; }
.br-bar { position: relative; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #4a7fb0, #7fb0c8 35%, #e0c070 60%, #e07a3a 80%, #c0392b); }
.br-bar span { position: absolute; top: 0; bottom: 0; }
.br-z1 { left: 57.8%; width: 3.3%; background: rgba(255,255,255,.35); } .br-z2 { left: 61.1%; width: 3.3%; background: rgba(255,255,255,.55); } .br-z3 { left: 64.4%; width: 4.4%; background: rgba(255,255,255,.35); }
.br-z4 { left: 75.6%; width: 2px; background: #ff2d2d; }
.br-needle { width: 4px; margin-left: -2px; top: -5px !important; bottom: -5px !important; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.6); transition: left .2s linear; }
.br-fire { font-size: 15px; letter-spacing: 1px; } .br-fire small { margin-left: 8px; font-size: 12px; color: #e6cfa8; letter-spacing: 0; }
.br-info { margin: 4px 0 8px; font-size: 13px; line-height: 1.35; color: #f1dfc0; }
.br-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.br-btns button { position: relative; border: 2px solid #b0804e; border-radius: 12px; padding: 9px 8px; background: linear-gradient(180deg, #7a5232, #5c3c24); color: #fff; font: 800 14px var(--f);
  cursor: pointer; touch-action: manipulation; display: flex; align-items: center; justify-content: center; gap: 6px; }
.br-btns button span { font-size: 18px; } .br-btns button:active:not(:disabled) { transform: translateY(2px); }
.br-btns button:disabled { opacity: .4; cursor: default; }
.br-btns kbd { position: absolute; top: 3px; right: 5px; font: 800 10px var(--f); color: #ffd27a; opacity: .9; }
@media (max-width: 480px) { .br-panel { padding: 8px 10px 10px; } .br-temp b { font-size: 26px; } .br-btns { grid-template-columns: repeat(3, 1fr); gap: 6px; } .br-btns button { font-size: 12px; padding: 8px 4px; flex-direction: column; gap: 2px; } }
/* (Gerrit, the cellar and the kettle: small buttons side by side, the kilos between − and +, the big one to begin) */
.br-buy { display: inline-flex; align-items: center; gap: 6px; } .br-buy button.on { background: #b8733a; }
.br-kg b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.br-go { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 12px; padding: 12px; background: linear-gradient(180deg, #ffb04a, #e07800); color: #fff; font: 900 16px var(--f); cursor: pointer; }
.br-go:disabled { opacity: .45; cursor: default; }
.br-none { color: #6b6457; font-size: 13px; margin: 6px 2px; }
.br-unknown { opacity: .6; }
:where(html.dark) .br-none { color: #b9b0a0; }
/* (under the thermometer: the fire and the bar of this step, the sugar, the hour of the boil; red edge when it is too hot, green when the yeast can go in) */
.br-row { display: flex; align-items: center; gap: 10px; }
.br-prog { position: relative; flex: 1; height: 20px; border-radius: 10px; background: rgba(255,255,255,.12); overflow: hidden; }
.br-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #c9a227, #ffd27a); border-radius: 10px; transition: width .15s linear; }
.br-prog em { position: relative; display: block; text-align: center; font: 800 12px/20px var(--f); font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.br-panel.hot { border-color: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.35), 0 10px 30px rgba(0,0,0,.45); }
.br-panel.ready { border-color: #43d14b; box-shadow: 0 0 0 3px rgba(67,209,75,.35), 0 10px 30px rgba(0,0,0,.45); }