/* Cookie notice (consent.js). Colours follow index.html, with fallbacks for pages that don't define them. */
.tc{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));pointer-events:none}
.tc[hidden]{display:none}
.tc-in{pointer-events:auto;width:min(620px,100%);max-height:70vh;overflow:auto;background:var(--panel,rgba(9,22,42,.96));
  color:var(--paper,#f3f6fa);border:1px solid var(--line,rgba(243,246,250,.18));border-radius:10px;padding:16px 18px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);font:400 15px/1.45 var(--f-body,system-ui,sans-serif);backdrop-filter:blur(6px)}
.tc-h{margin:0 0 6px;font:700 20px var(--f-display,"Arial Narrow",sans-serif);letter-spacing:.06em;text-transform:uppercase}
.tc p{margin:0 0 8px}
.tc a{color:var(--paper,#f3f6fa)}
.tc-now{font-size:14px;color:var(--muted,#a9b8cc)}
.tc-list{margin:0 0 10px;padding-left:18px}
.tc-list li{margin-bottom:6px}
.tc-list span{display:block;font-size:14px;color:var(--muted,#a9b8cc)}
/* Accept and Reject look identical on purpose: equal prominence. */
.tc-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 8px}
.tc-b{flex:1 1 180px;padding:12px 14px;border-radius:6px;border:2px solid var(--paper,#f3f6fa);background:var(--sign,#1d4f91);
  color:var(--paper,#f3f6fa);font:700 16px var(--f-display,"Arial Narrow",sans-serif);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tc-b:hover{background:var(--sign-deep,#0e2a52)}
.tc-b:focus-visible{outline:3px solid var(--alert,#ff6a13);outline-offset:2px}
.tc-more{font-size:14px;margin:0}
@media (max-width:520px){
  .tc{padding:8px}
  .tc-in{padding:12px 14px;font-size:14px;line-height:1.4}
  .tc-h{font-size:17px}
  .tc-row{margin:8px 0 6px;gap:8px}
  .tc-b{flex-basis:120px;padding:10px 8px;font-size:15px}
}
/* keep the intro buttons reachable above the notice */
body:has(.tc:not([hidden])) #intro{padding-bottom:calc(24px + var(--tc-h,0px))}

/* Footer links on the intro card */
.tidle-legal{margin:0;font-size:13px;color:var(--muted,#a9b8cc)}
.tidle-legal a{color:var(--muted,#a9b8cc)}
.tidle-legal a:hover{color:var(--paper,#f3f6fa)}
/* Company line: on the intro card (hidden with it once play starts) and in the privacy page footer */
.tidle-company{font-size:11px;line-height:1.4;opacity:.75}