:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f8f7;background:#071113;--bg:#071113;--panel:#0d1a1c;--panel2:#112225;--line:rgba(255,255,255,.11);--muted:#92a7a7;--accent:#d9f3e8;--ink:#071113}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{min-height:100vh;background:radial-gradient(circle at 20% -10%,#173035 0,transparent 38%),linear-gradient(180deg,#081416 0,#071113 70%);color:#f5f8f7}.app-shell{width:min(100%,760px);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 16px calc(34px + env(safe-area-inset-bottom))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.brand-block{min-width:0}.brand-row{display:flex;align-items:center;gap:8px;font-size:25px;letter-spacing:.01em}.brand-mark{width:10px;height:10px;border-radius:50%;background:#bcebd6;box-shadow:0 0 0 6px rgba(188,235,214,.09)}.version{font-size:11px;font-weight:800;letter-spacing:.08em;padding:4px 7px;border:1px solid var(--line);border-radius:999px;color:#9fb3b3}.subtitle{font-size:12px;color:var(--muted);margin-top:2px;padding-left:18px;letter-spacing:.11em;text-transform:uppercase}.icon-button,.close-button{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#eef4f2;border-radius:15px;padding:10px 13px;font-weight:750;display:flex;align-items:center;gap:8px;backdrop-filter:blur(14px)}.catalog-icon{font-size:20px;line-height:1}.language-section{margin-bottom:14px}.language-title{font-size:12px;color:var(--muted);margin:0 0 8px 2px;text-transform:uppercase;letter-spacing:.09em}.languages{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}.languages::-webkit-scrollbar{display:none}.lang{scroll-snap-align:center;flex:0 0 78px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:#c5d2d0;border-radius:18px;padding:10px 8px 9px;text-align:center;font-weight:800;transition:transform .16s ease,background .16s ease,border-color .16s ease}.lang .flag{display:block;font-size:25px;line-height:1;margin-bottom:5px}.lang .code{font-size:11px;letter-spacing:.08em}.lang.active{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:translateY(-1px)}.scanner{position:relative;overflow:hidden;border-radius:30px;aspect-ratio:4/5;background:#020606;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.38)}.scanner video{display:block;width:100%;height:100%;object-fit:cover}.scanner-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 40%,rgba(0,0,0,.66) 100%);pointer-events:none}.focus-frame{position:absolute;inset:13% 10% 22%;pointer-events:none}.corner{position:absolute;width:46px;height:46px;border-color:rgba(225,246,238,.95)}.tl{left:0;top:0;border-left:3px solid;border-top:3px solid;border-radius:14px 0 0 0}.tr{right:0;top:0;border-right:3px solid;border-top:3px solid;border-radius:0 14px 0 0}.bl{left:0;bottom:0;border-left:3px solid;border-bottom:3px solid;border-radius:0 0 0 14px}.br{right:0;bottom:0;border-right:3px solid;border-bottom:3px solid;border-radius:0 0 14px 0}.scanner-copy{position:absolute;left:20px;right:20px;bottom:20px}.scanner-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:#c7d7d3;margin-bottom:5px}.camera-hint{font-size:18px;font-weight:750;line-height:1.25}.scan-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px 4px}.scan-button{border:0;background:transparent;color:#f4f8f7;padding:0;display:flex;align-items:center;gap:12px;font-weight:850;font-size:18px}.scan-ring{width:62px;height:62px;border-radius:50%;background:#ecf7f2;display:grid;place-items:center;box-shadow:0 9px 30px rgba(0,0,0,.35)}.scan-dot{width:42px;height:42px;border-radius:50%;border:2px solid #071113;background:transparent}.scan-label{white-space:nowrap}.scan-help{font-size:12px;line-height:1.35;color:var(--muted);max-width:190px;text-align:right}.result{margin-top:18px}.hidden{display:none!important}.status-card{border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:18px;color:#b9c8c5;text-align:center}.exhibit-sheet{border:1px solid var(--line);background:linear-gradient(180deg,#122326,#0c181a);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.3)}.exhibit-image{width:100%;height:230px;object-fit:cover;background:#071113}.sheet-content{padding:20px}.eyebrow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#92aaa5;font-weight:800}.sheet-title{font-size:28px;line-height:1.08;margin:7px 0 12px}.story{font-size:15px;line-height:1.62;color:#d0dcda}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.primary,.secondary{border-radius:15px;padding:13px 14px;font-weight:800}.primary{border:1px solid var(--accent);background:var(--accent);color:var(--ink)}.secondary{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#ecf3f1}.catalog{position:fixed;z-index:30;inset:0;background:rgba(5,12,13,.97);backdrop-filter:blur(16px);padding:calc(24px + env(safe-area-inset-top)) max(18px,calc((100vw - 720px)/2)) calc(28px + env(safe-area-inset-bottom));overflow:auto}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.section-heading h2{font-size:28px;margin:4px 0 0}.catalog-list{display:grid;gap:10px}.catalog-item{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:16px;cursor:pointer}.catalog-item strong{font-size:17px}.muted{color:var(--muted);font-size:13px;margin-top:4px}@media(min-width:700px){.app-shell{padding-left:24px;padding-right:24px}.scanner{aspect-ratio:16/10}.focus-frame{inset:14% 10% 22%}.catalog-list{grid-template-columns:1fr 1fr}}@media(max-width:430px){.icon-button span:last-child{display:none}.scan-help{max-width:145px}.scanner{aspect-ratio:3/4}.brand-row{font-size:23px}}
/* Eilanden 1.2 welcome flow */
.app-shell{padding-bottom:110px}.flag-switch{padding:5px;background:none;border:1px solid var(--line);border-radius:12px;cursor:pointer}.flag-switch img{display:block;width:38px;height:25px;border-radius:5px}.welcome{text-align:center;min-height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.welcome h1{font-size:clamp(30px,7vw,48px);letter-spacing:-.04em;line-height:1.1;margin:15px 0;max-width:600px}.intro{font-size:15px;line-height:1.65;color:var(--muted);max-width:480px;margin:8px auto 22px}.carousel-shell{position:relative;width:100%;display:flex;align-items:center;margin:12px 0 28px;direction:ltr}.flag-carousel{position:relative;height:190px;flex:1;perspective:800px;touch-action:pan-y;overflow:hidden}.flag-card{position:absolute;left:50%;top:50%;width:138px;height:92px;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;transform:translate(calc(-50% + var(--offset)*90px),-50%) scale(.5);filter:brightness(.45);box-shadow:0 16px 35px #0008;transition:transform .3s,filter .3s;z-index:1}.flag-card img{width:100%;height:100%;object-fit:cover;display:block}.flag-card.distance-1{transform:translate(calc(-50% + var(--offset)*90px),-50%) scale(.7) rotateY(calc(var(--offset)*-18deg));filter:brightness(.7);z-index:2}.flag-card.distance-0{transform:translate(-50%,-50%) scale(1.15);filter:none;z-index:3;outline:2px solid var(--accent);outline-offset:5px}.carousel-arrow{flex-shrink:0;width:36px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:white;font-size:30px;cursor:pointer;z-index:4}.wide{width:min(100%,330px);min-height:52px;font-size:16px;cursor:pointer}.camera-symbol{font-size:100px;line-height:1;color:var(--accent);padding:8px 0 28px}.error{color:#ffb4b4;max-width:430px;line-height:1.5}.scan-panel{display:flex;flex-direction:column;text-align:center}.assistant-link{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 32px);padding:13px 17px;border-radius:20px;border:1px solid #446058;background:#17312c;color:#e5f7ee;box-shadow:0 8px 24px #0006;font-size:14px;cursor:pointer}.assistant-link span:first-child{font-size:22px}dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));padding:30px;border:1px solid var(--line);border-radius:25px;background:var(--panel);color:#eef6f2;text-align:center}dialog::backdrop{background:#020909bb;backdrop-filter:blur(8px)}dialog .close-button{margin-inline-start:auto;cursor:pointer}dialog p{color:var(--muted);line-height:1.6}.assistant-symbol{font-size:55px;color:var(--accent);display:block;margin-top:15px}button:disabled{opacity:.55;cursor:wait}button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}@media(max-width:430px){.flag-card{width:116px;height:78px;transform:translate(calc(-50% + var(--offset)*68px),-50%) scale(.5)}.flag-card.distance-1{transform:translate(calc(-50% + var(--offset)*68px),-50%) scale(.7) rotateY(calc(var(--offset)*-18deg))}.flag-card.distance-0{transform:translate(-50%,-50%) scale(1.12)}.flag-carousel{height:170px}.welcome{min-height:70vh}}@media(prefers-reduced-motion:reduce){.flag-card{transition:none}}

/* v1.2.3 camera frame */
.focus-frame{inset:12% 9% 24%;border:1px solid rgba(217,243,232,.45);border-radius:30px;box-shadow:0 0 0 100vmax rgba(0,8,8,.12)}
.focus-frame .corner{width:38px;height:38px;border-color:#d9f3e8;border-width:3px;filter:drop-shadow(0 0 7px rgba(188,235,214,.5))}
.focus-frame .tl{left:-1px;top:-1px;border-radius:30px 0 0 0}.focus-frame .tr{right:-1px;top:-1px;border-radius:0 30px 0 0}.focus-frame .bl{left:-1px;bottom:-1px;border-radius:0 0 0 30px}.focus-frame .br{right:-1px;bottom:-1px;border-radius:0 0 30px 0}
@media(min-width:700px){.focus-frame{inset:12% 17% 25%}}
/* v1.2.4 supplied Art Nouveau frame, transparent overlay */
.scanner{aspect-ratio:4/3;border-radius:12px}
.scanner .focus-frame{inset:0;border:0;border-radius:0;box-shadow:none;background:url('/static/camera-frame-art-nouveau.png') center/100% 100% no-repeat;pointer-events:none;z-index:2}
.scanner .focus-frame .corner{display:none}
.scanner-copy{left:24%;right:24%;bottom:20%;text-align:center;z-index:3;text-shadow:0 2px 5px #000}
.scanner-kicker{font-size:10px}.camera-hint{font-size:clamp(12px,2.8vw,18px)}
.scanner-shade{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.4))}
@media(max-width:430px){.scanner{aspect-ratio:4/3}.scanner-kicker{display:none}}

/* v1.2.7: compact layout for phones held horizontally. */
@media (orientation: landscape) and (max-height: 600px) {
  .app-shell {
    width: 100%;
    padding: calc(8px + env(safe-area-inset-top))
      calc(12px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      calc(12px + env(safe-area-inset-left));
  }
  .topbar { margin-bottom: 8px; gap: 10px; }
  .brand-row { font-size: 20px; }
  .flag-switch img { width: 30px; height: 20px; }
  #scanScreen {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px 16px;
    height: calc(100vh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100dvh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 160px;
    padding-bottom: 0;
  }
  #scanScreen .scanner {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    width: 100%;
    height: auto;
    max-width: calc((100vh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3);
    max-width: calc((100dvh - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3);
    max-height: calc((100vw - 260px - env(safe-area-inset-left) - env(safe-area-inset-right)) * 3 / 4);
    aspect-ratio: 4 / 3;
  }
  .scanner-kicker { display: none; }
  .camera-hint { font-size: 12px; }
  .scan-panel { grid-column: 2; grid-row: 1; padding: 0; gap: 4px; }
  .scan-panel .wide { width: 100%; min-height: 44px; padding: 10px; }
  .scan-panel .intro { font-size: 12px; line-height: 1.35; margin: 2px 0; }
  #result {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    margin: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding-bottom: 58px;
  }
  .status-card { margin: 0; padding: 12px; border-radius: 14px; }
  .exhibit-image { height: 100px; }
  .sheet-content { padding: 12px; }
  .sheet-content h2 { font-size: 20px; margin: 6px 0; }
  .story { font-size: 13px; line-height: 1.45; }
  .actions { gap: 6px; margin-top: 10px; }
  .actions button { padding: 10px 6px; }
  .assistant-link { padding: 8px 12px; font-size: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .welcome { min-height: 0; padding: 0 0 46px; }
  .welcome h1 { font-size: 26px; margin: 6px 0; }
  .welcome .intro { font-size: 12px; line-height: 1.35; margin: 4px auto 8px; }
  .carousel-shell { max-width: 560px; margin: 0 0 8px; }
  .flag-carousel { height: 90px; }
  .flag-card { width: 100px; height: 66px; }
  .welcome .wide { min-height: 44px; padding: 10px 14px; }
  .camera-symbol { font-size: 45px; padding: 0 0 8px; }
  .error { font-size: 12px; margin: 4px 0; }
  dialog { max-height: calc(100dvh - 24px); overflow: auto; padding: 16px; }
  .assistant-symbol { font-size: 30px; margin-top: 4px; }
}

.topbar-actions{display:flex;align-items:center;gap:10px}
.dice-button{display:grid;place-items:center;width:42px;height:38px;padding:6px;color:var(--accent);border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer}
.dice-button svg{width:26px;height:26px}
#randomDialog{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:18px;overflow:auto;text-align:start}
.random-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.random-dialog-header .close-button{margin:0}
.random-photo{display:block;width:100%;height:clamp(130px,30vh,280px);object-fit:contain;background:transparent;margin:8px auto 16px}
#randomContent h2{margin:8px 0;font-size:26px}
#randomContent .story{white-space:pre-line}
#randomAgain{display:block;width:100%;margin-top:16px}
@media(orientation:landscape) and (max-height:600px){
 #randomDialog{width:min(800px,calc(100vw - 24px))}
 #randomContent .random-photo{float:inline-start;width:40%;height:180px;margin:0 16px 10px 0}
 #randomAgain{clear:both}
}

/* Mirrored square exploration buttons. */
#randomExhibitButton,#assistantLink{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));width:64px;height:64px;padding:0;display:grid;place-items:center;gap:0;border:1px solid #446058;border-radius:12px;background:#17312c;color:#e5f7ee;box-shadow:0 8px 24px #0006;z-index:40}
#randomExhibitButton{left:calc(16px + env(safe-area-inset-left));right:auto}
#assistantLink{right:calc(16px + env(safe-area-inset-right));left:auto}
#randomExhibitButton svg{width:42px;height:42px}
#assistantLink span:first-child{font-size:34px;line-height:1}
#assistantLink span[data-i18n]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(orientation:landscape) and (max-height:600px){#randomExhibitButton,#assistantLink{width:52px;height:52px;bottom:calc(8px + env(safe-area-inset-bottom))}#randomExhibitButton svg{width:36px;height:36px}#assistantLink span:first-child{font-size:30px}#result{padding-bottom:68px}}

/* Rolling random-exhibit dice */
.rolling-die{display:block;text-align:center;font-size:88px;color:var(--accent);padding:40px 0;animation:eilanden-dice .65s ease-in-out infinite;line-height:1}
#randomExhibitButton.is-rolling svg{animation:eilanden-dice .65s ease-in-out infinite}
@keyframes eilanden-dice{0%{transform:rotate(-15deg) scale(.9)}50%{transform:translateY(-10px) rotate(170deg) scale(1.12)}100%{transform:rotate(345deg) scale(.9)}}
@media(prefers-reduced-motion:reduce){.rolling-die,#randomExhibitButton.is-rolling svg{animation:none}}