:root{color-scheme:light;--paper:#faf6ec;--ink:#203b33;--muted:#4d6158;--line:#c7cdbf;--white:#fffdf6;--green:#255644;--panel:#fafaf4;--text-panel:#fffdf7;--panel-edge:#ffffffc9;--panel-shadow:inset 0 1px 0 #fff,0 4px 14px #172c2326;font-family:system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}
body{margin:0;display:grid;min-height:100dvh;grid-template-rows:1fr auto;background:var(--paper);color:var(--ink);font-size:18px;line-height:1.5}
body:has(#roundLayout:not([hidden])){height:100dvh;grid-template-rows:minmax(0,1fr) auto;background:#b7ad9b url("spilleunderlag.jpg") center / cover no-repeat}
[hidden]{display:none!important}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.58}
:focus-visible{outline:3px solid #865515;outline-offset:4px}
.top{width:calc(100% - 24px);max-width:1450px;margin:0 auto max(8px,env(safe-area-inset-bottom));border:1px solid var(--panel-edge);border-radius:24px;background:var(--panel);box-shadow:var(--panel-shadow)}
.top-inner{max-width:1450px;min-height:62px;margin:auto;padding:7px 24px;display:flex;gap:14px;justify-content:space-between;align-items:center}
.game-tools{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.game-tools button,#settings{white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:750;letter-spacing:-.02em}
.mark{display:block;border-radius:10px;width:42px;height:42px;flex:none;object-fit:contain}
.page{width:100%;max-width:1450px;margin:0 auto;padding:16px 24px max(16px,env(safe-area-inset-bottom))}
.page:has(#roundLayout:not([hidden])){display:grid;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.page:has(#won:not([hidden],.leaving)){grid-template-columns:minmax(0,1fr) clamp(225px,25vw,335px);column-gap:clamp(12px,2.3vw,30px)}
.caption{font-size:.72rem;font-weight:800;letter-spacing:.13em}
h1,h2{font-family:Georgia,serif;font-weight:500;line-height:1.08}
h1{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.055em;margin:5px 0 4px}
h2{font-size:clamp(1.65rem,4vw,2.1rem);letter-spacing:-.035em;margin:0}
p{margin:0 0 12px}
.small{color:var(--muted)}
.small{font-size:.9rem}
.layout{display:contents}
.playmat-slot{grid-column:1;grid-row:1;container-type:size;display:grid;align-content:center;justify-items:center;gap:6px;min-height:0;min-width:0;--frame-width:min(100%,calc(100cqh - 40px))}
.playmat{
  width:min(100%,calc(100dvh - 210px));width:var(--frame-width);aspect-ratio:1;
  position:relative;border-radius:2.8%;background:url("spilleramme.png") 48.3% 47.7% / 253% 189.75% no-repeat;
  box-shadow:0 6px 16px #3e2d2438
}
.playmat .board{position:absolute;inset:6.7%;border-radius:3px}
.board{display:grid;gap:clamp(3px,.5vw,7px);grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr))}
.tile{border:0;padding:0;border-radius:clamp(5px,.8vw,11px);position:relative;min-width:0;background-color:#a28d71;background-repeat:no-repeat;box-shadow:0 3px 4px #25170d99;touch-action:manipulation;user-select:none}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:linear-gradient(145deg,#fff2,transparent 25%,transparent 80%,#2b1d171f),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='grain'%3E%3CfeTurbulence baseFrequency='.64' numOctaves='3' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.12'/%3E%3C/svg%3E");box-shadow:inset 0 2px 1px #fff9,inset 2px 0 1px #fff3,inset -2px 0 1px #29190e50,inset 0 -4px 1px #29190e65}
.board :is(.tile,.gap):enabled{touch-action:none}
.board.drag-enabled .tile[data-movable=true]{cursor:grab}
.board .tile.dragging{cursor:grabbing}
.tile:disabled{opacity:1}
.tile-number{display:none;position:absolute;right:5%;bottom:5%;pointer-events:none}
.board.numbered:not(.solved) .tile-number{display:grid}
.tile-number span{border-radius:999px;background:#182923;color:#fff;padding:2px 5px;font-size:clamp(10px,1.15vw,15px);font-weight:750;line-height:1.15}
.board[data-compact=true] .tile-number span{font-size:clamp(6px,1vw,10px);padding:1px}
.tile[data-movable=true]::before{border:1px solid #fff7}
.tile:focus-visible{outline-offset:-5px;z-index:1}
.tile.hinted{z-index:1;outline:3px solid #ffe696;outline-offset:-4px}
.tile.hinted::after{content:"✦";display:grid;place-items:center;position:absolute;top:10px;right:10px;background:#ffe696;color:#284437;border-radius:50%;width:36px;height:36px;font-size:22px;box-shadow:0 2px 6px #0003}
.tile.sliding,.tile.dragging{z-index:2;box-shadow:0 5px 12px #24180bbf}
.gap{position:relative;z-index:1;border:1px solid #12344e;border-radius:7px;margin:2px;padding:0;background:transparent;box-shadow:inset 0 0 0 2px #e4f7ff,inset 0 2px 8px #102a4566;touch-action:manipulation}
.gap::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#e4f7ff29;box-shadow:0 0 10px 2px #e4f7ff,inset 0 0 0 2px #fff;pointer-events:none;opacity:.55;animation:gap-glow 4s ease-in-out infinite}
@keyframes gap-glow{0%,100%{opacity:.25}50%{opacity:1}}
.gap:disabled{opacity:1}
.gap:enabled:hover{border-color:#e4f7ff}
.board[data-compact=true]{gap:clamp(1px,.25vw,3px)}
.board[data-compact=true] :is(.tile,.gap){border-radius:2px}
.board[data-compact=true] .gap{margin:0}
.board[data-compact=true] .tile{box-shadow:0 1px 2px #25170d99}
.board[data-compact=true] .tile::before{box-shadow:inset 0 1px 1px #fff9,inset 0 -2px 1px #29190e65}
.board[data-compact=true] .tile.hinted{outline:2px solid #ffe696;outline-offset:-2px}
.board[data-compact=true] .tile.hinted::after{top:2px;right:2px;width:min(22px,calc(100% - 4px));height:auto;aspect-ratio:1;font-size:clamp(8px,1.4vw,14px)}
.board.solved{--landing-time:220ms;gap:2px}
.board.solved[data-compact=true]{gap:.75px}
.board.solved .tile{--wave:tile-wave 240ms ease-in-out calc(var(--landing-time) + var(--wave-delay));border-radius:1px;animation:var(--wave)}
.board.solved .last-tile{animation:tile-land var(--landing-time) ease-out,var(--wave)}
@keyframes tile-land{from{opacity:0;transform:translateY(-12%) scale(1.06);z-index:2}to{opacity:1;transform:none;z-index:2}}
@keyframes tile-wave{50%{transform:scale(1.065);filter:brightness(1.25);z-index:1}}
@media(prefers-reduced-motion:reduce){.board.solved .tile,.gap::after{animation:none}}
.preview-photo{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.preview-frame{overflow:hidden;border-radius:14px}
.preview-frame .preview-photo{transform-origin:top left}
.side{grid-column:2;grid-row:1;align-self:start;min-height:0;min-width:0;max-height:100%;overflow:auto;scrollbar-width:thin}
.side.leaving{position:fixed;z-index:2;pointer-events:none}
.side .help{padding:clamp(12px,1.7vw,24px);gap:10px}
.help{padding:25px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:28px;box-shadow:var(--panel-shadow);display:grid;gap:13px}
.help.celebration{background:var(--text-panel)}
.photoImport{display:grid;justify-items:start;gap:8px}
.photoImport p{margin:0}
.photoImport .fileStatus:empty{display:none}
.resetOptions{margin-top:20px}
.resetOptions summary{cursor:pointer;font-weight:650}
.resetOptions p{margin-top:8px}
.caption{margin:0;color:var(--muted)}
.help h2{margin-bottom:7px}
.primary,.outline,.quiet{min-height:48px;padding:9px 15px;border-radius:999px;font-weight:650;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1.25;text-align:center}
.outline{background:linear-gradient(#fff,#f4f7f1e8);border-color:#83998b;color:var(--ink);box-shadow:inset 0 1px 1px #fff,0 2px 4px #1b3a261a}
.outline:hover:not(:disabled),.quiet:hover{background:#e8efe8}
.outline[aria-pressed=true]{background:#dceae0;border-color:var(--green)}
.primary{background:linear-gradient(#326650,#204a3a);border-color:#1b4233;color:#fff;box-shadow:inset 0 1px 1px #ffffff60,0 2px 5px #14352838}
.primary:hover:not(:disabled){background:linear-gradient(#2c5b48,#173e30)}
.primary:active:not(:disabled),.outline:active:not(:disabled){box-shadow:inset 0 2px 6px #142d3840}
.quiet{background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.nudge{margin:0;padding:4px 9px;border-radius:12px;background:#f5edd3;font-size:.85rem}
.board-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;width:var(--frame-width)}
.board-meta p{margin:0;padding:2px 10px;border-radius:999px;background:var(--text-panel)}
.round-label{display:flex;gap:8px;align-items:center;font-size:.9rem;font-weight:650;white-space:nowrap}
.round-label span:first-child{color:var(--green)}
#greeting{font-size:clamp(1.2rem,2.5vw,1.55rem);margin:0 0 8px}
#previewCredit{margin:8px 0 0}
#nextCountdown{margin:0}
#speechStatus:empty,#saveError:empty{display:none}
dialog{background:var(--text-panel);color:var(--ink);border:1px solid var(--panel-edge);border-radius:30px;box-shadow:var(--panel-shadow),0 20px 60px #162f2659;padding:24px;width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto}
dialog::backdrop{background:#162f268f}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{--panel:#f7faf0c9;--text-panel:#fffdf6ed}
  .top,.help,dialog{-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15)}
  .top{background:linear-gradient(150deg,#f9fbf3eb,#e8f1e6d9)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  :root{--panel:#f5f8f1;--text-panel:#fffdf7;--panel-edge:#829489}
  .top,.help,dialog{-webkit-backdrop-filter:none;backdrop-filter:none}
  .top{background:var(--panel)}
}
#photoDialog{width:min(610px,calc(100% - 24px))}
#welcomeDialog{width:min(550px,calc(100% - 24px))}
#welcomeDialog h2{margin-bottom:12px}
#welcomeDialog .settings-tests button{flex:1 1 185px}
.dialog-head{display:flex;gap:15px;align-items:center;justify-content:space-between;margin-bottom:16px}
.settings-heading{display:flex;align-items:center;gap:12px}
.settings-heading>span{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#e8efe8;color:var(--green)}
.settings-heading p{margin:4px 0 0}
.settings-tests{display:flex;flex-wrap:wrap;gap:8px}
label{display:grid;gap:5px;font-weight:650;font-size:1rem}
input,select,textarea{width:100%;max-width:100%;min-height:46px;padding:7px 10px;border:1px solid #aab8aa;border-radius:8px;color:var(--ink);background:white;font:inherit}
textarea{resize:vertical;font-weight:400}
.familyFacts{margin:12px 0 5px}
.greetingVariables{margin:0 0 12px}
.greetingVariables summary{cursor:pointer;font-weight:650}
.greetingVariables p{margin:6px 0}
.computedAge output{display:flex;align-items:center;min-height:46px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#edf0e6}
.check{display:flex;gap:10px;align-items:center;min-height:44px;margin:8px 0 12px;cursor:pointer}
.check input{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--green)}
#voiceStatus,#soundStatus{margin:8px 0 0}
#voiceStatus:empty,#soundStatus:empty{display:none}
fieldset{min-width:0;margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:12px}
legend{padding:0 6px;font-weight:750}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.birthDate{margin:0;padding:0;border:0}
.birthDate legend{padding:0;margin-bottom:4px;font-weight:650;font-size:1rem}
.dateParts{display:grid;grid-template-columns:54px minmax(0,1fr) 74px;gap:6px}
.dateParts label{min-width:0;font-size:.85rem}
.picker,.photos{margin:12px 0}
.photos:not(:empty){display:grid;gap:10px}
.photo-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center}
.photo-row img{width:56px;height:56px;border-radius:8px;object-fit:cover}
.photo-story{grid-column:2 / -1}
.photo-story summary{cursor:pointer;font-weight:650;font-size:1rem}
.photo-story textarea{display:block;margin-top:6px}
.missingPhoto{display:grid;place-items:center;min-height:48px;border-radius:8px;background:#f5edd3;font-size:.7rem;color:var(--muted)}
.replacePhoto{grid-column:2 / -1}
.error{color:#8e321c}
#addMember{margin:12px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1101px),(orientation:landscape){
  .page:has(#won:not([hidden],.leaving)){--caption-space:40px;--caption-gap:6px}
  .page:has(#won:not([hidden],.leaving)) .playmat-slot{
    --frame-width:min(100%,calc(100cqh - var(--caption-space)));
    gap:var(--caption-gap)
  }
  .page:has(#won:not([hidden],.leaving)) .board-meta{
    min-height:calc(var(--caption-space) - var(--caption-gap));
    align-content:start
  }
  #won:not(.leaving){display:flex;flex-direction:column;align-self:stretch}
  #won:not(.leaving)::before{
    content:"";
    flex:0 1 calc(50% - var(--caption-space) / 2)
  }
  #won .celebration{flex:none}
}
@media(max-width:780px) and (orientation:landscape){
  .page:has(#won:not([hidden],.leaving)){--caption-space:64px}
}
@media(max-width:1100px) and (orientation:portrait){
  .page:has(#roundLayout:not([hidden])){display:flex;flex-direction:column}
  .layout{display:grid;flex:1;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px}
  .side{grid-column:1;grid-row:2;max-height:40dvh}
  .side .help{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #won .caption,#greeting,#nextCountdown,#speechStatus{grid-column:1 / -1}
}
@media(orientation:landscape){.page:has(#roundLayout:not([hidden])) h1{font-size:clamp(2rem,4vw,3.3rem)}}
@media(max-width:780px){
  .top-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding-inline:10px}
  .top-inner #settings{grid-column:2;grid-row:1}
  .game-tools{grid-column:1 / -1;justify-content:flex-start;gap:5px}
  .top button{min-height:44px;padding-inline:9px;font-size:.85rem}
  .page{padding-inline:12px}
  .mark{width:34px;height:34px}
  .brand{gap:7px;font-size:.98rem}
  .side button{padding-inline:8px;font-size:.9rem}
}
@media(max-width:430px){
  .game-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-tools button{white-space:normal}
  .nudge{grid-column:1 / -1}
  .playmat-slot{--frame-width:min(100%,calc(100cqh - 58px))}
}
@media(max-height:570px) and (orientation:landscape){
  .top-inner{min-height:48px;padding-block:4px}
  .top button,.side button{min-height:44px}
  .mark{width:34px;height:34px}
  .page{padding-block:6px 8px}
  .page:has(#roundLayout:not([hidden])) h1{font-size:clamp(1.65rem,7dvh,2.6rem);margin:0}
  .side .help{padding:9px;gap:5px}
}
@media(max-width:430px){dialog{padding:16px}.fields{grid-template-columns:1fr}.photo-row{grid-template-columns:48px minmax(0,1fr)}.photo-row img{width:48px;height:48px}.photo-row button{grid-column:2;justify-self:start}}