/* Andy Play kit: the look every game type shares for the kit's own screens (the grown-up's screens, "Dæmp alt",
   pause cards, "Hvem spiller?"). Calm on purpose: soft paper, navy ink, one blue for "go on", nothing that flashes.
   Brand tokens come from /colors_and_type.css (load it before this file); the fallbacks only keep a game type that
   forgets it readable. Everything is scoped under .ak, so a game type's own CSS and this never fight. */
.ak{
  --ak-ink:var(--eyet-navy,#1d2340); --ak-paper:var(--eyet-cream,#fffaf0); --ak-line:var(--eyet-mist,#e6dcc4);
  --ak-muted:var(--fg-secondary,#5a6180); --ak-go:var(--eyet-blue,#3d7bff); --ak-go-dark:var(--eyet-blue-deep,#2452c9);
  --ak-soft:var(--eyet-blue-tint,#e8f0ff); --ak-display:var(--font-display,"Montserrat",system-ui,sans-serif);
  --ak-body:var(--font-body,"Manrope",system-ui,sans-serif);
  color:var(--ak-ink); font-family:var(--ak-body); font-weight:600; font-size:16px; line-height:1.4;
  -webkit-user-select:none; user-select:none;
}
.ak [hidden],.ak[hidden]{display:none!important}
.ak .btn{font-family:var(--ak-display);font-weight:800;font-size:17px;line-height:1.1;color:#fff;background:var(--ak-go);
  border:0;border-bottom:4px solid var(--ak-go-dark);border-radius:14px;padding:11px 16px 9px;cursor:pointer;min-height:44px}
.ak .btn:active{transform:translateY(2px);border-bottom-width:2px}
.ak .btn:focus-visible{outline:3px solid var(--ak-ink);outline-offset:2px}
.ak .btn.go{background:var(--ak-go);border-bottom-color:var(--ak-go-dark)}
.ak .btn.plain{background:#fff;color:var(--ak-ink);border-bottom-color:var(--ak-line)}
.ak .btn[disabled]{background:#c9cede;border-bottom-color:#a9afc2;color:#fff;cursor:default}
.ak .row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.ak .muted{color:var(--ak-muted);font-weight:500}
.ak ul.plain{padding-left:20px;margin:8px 0}
.ak ul.plain li{margin:4px 0}
.ak a{color:var(--ak-go-dark)}

/* the window */
.ak-shade{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(29,35,64,.35)}
.ak-sheet{background:var(--ak-paper);border-radius:22px;box-shadow:0 12px 40px rgba(29,35,64,.25);width:min(560px,100%);
  max-height:min(86vh,760px);display:flex;flex-direction:column;overflow:hidden}
.ak-sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 8px}
.ak-sheet h2{font-family:var(--ak-display);font-weight:800;font-size:24px;margin:0}
.ak-body{overflow:auto;padding:4px 18px 12px;-webkit-overflow-scrolling:touch}
.ak-foot{border-top:1px solid var(--ak-line);padding:4px 18px 10px}
.ak-body p{margin:8px 0}

/* forms */
.ak .field{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-weight:800;font-size:14px}
.ak .field input,.ak .field textarea,.ak .field select,.ak .pasrow select,.ak .kidrow input{font:inherit;font-weight:600;font-size:16px;
  color:var(--ak-ink);background:#fff;border:3px solid var(--ak-line);border-radius:12px;padding:9px 11px;box-sizing:border-box;
  -webkit-user-select:text;user-select:text}
.ak .field textarea{resize:vertical}
.ak .opt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}

/* the sansepas editor */
.ak .pasrow{display:grid;grid-template-columns:1fr auto auto;gap:6px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ak-line)}
.ak .pasrow .pasname{display:flex;flex-direction:column;gap:2px;min-width:0}
.ak .pasrow .pasname .muted{font-size:12px}
.ak .pasrow label{display:flex;flex-direction:column;font-size:12px;font-weight:800;gap:2px}
.ak .cardkinds{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0;font-weight:700;font-size:15px}
.ak .cardkinds input{width:20px;height:20px;vertical-align:-4px}
@media (max-width:420px){.ak .pasrow{grid-template-columns:1fr 1fr}.ak .pasrow .pasname{grid-column:1/-1}}

/* children */
.ak .kidrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--ak-line);flex-wrap:wrap}
.ak .kidrow input{flex:1;min-width:100px}
.ak .kidrow .kidicon{font-size:26px;padding:6px 10px}
#who{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px;background:var(--ak-paper)}
#who h1{font-family:var(--ak-display);font-weight:800;font-size:32px;margin:0}
#who .whoList{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:720px}
#who .whoList .btn{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px;padding:16px;font-size:20px}
#who .whoList .btn span{font-size:56px;line-height:1}

/* pause cards */
.ak .cardic{font-size:72px;line-height:1;text-align:center;margin:8px 0}
.ak .cardq{font-family:var(--ak-display);font-weight:800;font-size:24px;text-align:center}
.ak .faces .btn{font-size:40px;padding:10px 18px}

/* "Dæmp alt": the game underneath goes dark and still; the window stays bright enough to read */
body.damped canvas{filter:brightness(.55) saturate(.35);transition:filter .6s}
body.damped .ak-shade{background:rgba(29,35,64,.55)}

/* Building screens (Verden's Byggeplads, and later ones): the Synaura Byggeplads's rules. A fixed layout (bar on top,
   two panels of constant width, the game visible in the middle, one status line at the bottom that never clears
   itself); nothing moves, only colours change; a chosen thing shows by a marker and a border as well as colour. */
.ak-builder{position:fixed;inset:0;z-index:55;display:grid;grid-template-columns:280px 1fr 340px;grid-template-rows:auto 1fr auto;pointer-events:none}
.ak-builder > *{pointer-events:auto;background:var(--ak-paper)}
.ak-builder .ak-bar{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ak-line)}
.ak-builder .ak-bar h2{font-family:var(--ak-display);font-weight:800;font-size:22px;margin:0 auto 0 0}
.ak-builder .ak-left,.ak-builder .ak-right{overflow:auto;padding:10px 14px;-webkit-overflow-scrolling:touch}
.ak-builder .ak-left{grid-column:1;border-right:1px solid var(--ak-line)}
.ak-builder .ak-right{grid-column:3;border-left:1px solid var(--ak-line)}
.ak-builder .ak-status{grid-column:1/-1;margin:0;padding:8px 14px;border-top:1px solid var(--ak-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
.ak-builder .ak-h{font-weight:800;font-size:14px;margin:12px 0 4px}
.ak-route{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.ak-route li{display:grid;grid-template-columns:1fr 40px 40px;gap:4px;align-items:center}
.ak-route .ak-pick{font:inherit;font-weight:700;text-align:left;background:#fff;color:var(--ak-ink);border:2px solid var(--ak-line);border-radius:10px;padding:8px;min-height:44px;cursor:pointer;transition:background-color .15s}
.ak-route li.on .ak-pick{background:var(--ak-soft);border:3px solid var(--ak-go)}
.ak-route .ak-mark{display:inline-block;width:1.2em;color:var(--ak-go-dark)}
.ak .ak-mini{min-height:44px;padding:6px 0;font-size:18px}
.ak-swatches{display:flex;flex-wrap:wrap;gap:6px}
.ak-sw{width:36px;height:36px;border-radius:10px;border:2px solid rgba(29,35,64,.2);cursor:pointer;padding:0}
.ak-sw.on{border:4px solid var(--ak-ink);box-shadow:inset 0 0 0 2px #fff}
.ak-slots{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ak-slot{display:flex;flex-direction:column;font-size:12px;font-weight:800;gap:2px}
.ak-slot select{font:inherit;font-size:15px;font-weight:600;padding:6px;border:2px solid var(--ak-line);border-radius:10px;background:#fff;color:var(--ak-ink)}
.ak-busy{border:2px solid var(--ak-line);border-radius:12px;padding:8px 10px;margin-bottom:6px}
.ak-busy.over{border-color:#d9a400;background:#fff6d6}
.ak-busyword{font-family:var(--ak-display);font-weight:800}
.ak-busybar{position:relative;height:10px;background:var(--ak-line);border-radius:6px;margin:6px 0}
.ak-busybar i{position:absolute;left:0;top:0;bottom:0;background:var(--ak-go);border-radius:6px}
.ak-busy.over .ak-busybar i{background:#d9a400}
.ak-busybar b{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--ak-ink)}
.ak-busyline{font-size:13px;font-weight:600}
.ak-back{position:fixed;left:12px;bottom:12px;z-index:56}
@media (max-width:820px){
  .ak-builder{grid-template-columns:1fr;grid-template-rows:auto 34vh auto auto auto;overflow:auto;pointer-events:auto;background:transparent}
  .ak-builder .ak-left,.ak-builder .ak-right{grid-column:1;border:0;border-top:1px solid var(--ak-line);overflow:visible}
  .ak-builder .ak-left{grid-row:3}.ak-builder .ak-right{grid-row:4}.ak-builder .ak-status{grid-row:5;white-space:normal}
  .ak-builder .ak-bar{flex-wrap:wrap}
}

/* A child's building screen (Verden's Min verden): the bar on top, the place in the middle, the palette at the bottom
   showing one category at a time, so its height never changes. Big, plain buttons; the chosen one has a border too. */
.ak-builder.ak-min{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
.ak-min .ak-palette{grid-row:3;border-top:1px solid var(--ak-line)}
.ak-min .ak-tabs{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.ak-min .ak-items{display:flex;gap:8px;padding:8px 12px;overflow-x:auto;min-height:92px}
.ak-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:92px;height:84px;
  font:inherit;font-weight:800;font-size:13px;color:var(--ak-ink);background:#fff;border:2px solid var(--ak-line);border-radius:14px;cursor:pointer;transition:background-color .15s}
.ak-item span{font-size:32px;line-height:1}
.ak-item.on{background:var(--ak-soft);border:4px solid var(--ak-go)}
.ak-min .ak-status{border-top:0;padding-top:0}