/* Fredoka cut to Latin, one width, weights 400 to 700: 28 KB, not 84 (round 21b,
   tools/font-subset.py). The pages load this in place of PerzKit's fonts.css, whose
   full Fredoka was still fetched for any character the cut lacks. Fredoka is
   the only face: the flat kit keeps Lilita One for the Perz wordmark alone. */
@font-face { font-family: Fredoka; src: url('assets/fonts/Fredoka-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
/* Draconia's UI on PerzKit's flat kit (vendor/perzkit, unedited): charcoal
   panels, cream text, Fredoka throughout, one fill and a 1 px border per
   control. The buttons, fields, toasts and title pill are ui.css, shared with
   the hatchery and the creator; only the layout over the canvas and the
   in-world bubbles are styled here, from the kit's tokens. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* the light theme's roles, for chat bubbles that sit in the bright world */
  --bubble-face: #FFFFFF;
  --bubble-text: #1B1C1F;
  --bubble-edge: #CFCBC2;
}
html, body { margin: 0; height: 100%; overflow: hidden; }
body.perz { background: #5cc8ff; -webkit-font-smoothing: antialiased; }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }
#stage.on-dragon { cursor: pointer; }
.perz p { margin: 0; }

/* ---------------------------------------------------------------- hint */
.perz .pill-note { text-wrap: nowrap; }
.pill-note { position: fixed; z-index: 4; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--perz-surface) 92%, transparent); border: 1px solid var(--perz-border-strong); color: var(--perz-text); font-size: var(--perz-type-metadata); white-space: nowrap; transition: opacity .6s var(--perz-ease-out); pointer-events: none; }
#hint.gone { opacity: 0; }
#hint[hidden] { display: none; }

/* ---------------------------------------------------------------- feed (behind ?feed) */
#feed-toggle { position: fixed; z-index: 5; top: calc(64px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
#feed { position: fixed; z-index: 5; top: calc(112px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 300px; max-height: min(52vh, 440px); overflow: auto; padding: 16px 20px; }
#feed[hidden], #feed-toggle[hidden] { display: none; }
#feed h2 { margin: 0 0 8px; }
#feed ol { list-style: none; margin: 0; padding: 0; }
#feed li { border-top: 1px solid var(--perz-border); }
#feed li:first-child { border-top: 0; }
#feed li button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 8px; width: 100%; padding: 8px 4px; border-radius: var(--perz-radius-control); }
#feed li button:hover { background: var(--perz-hover-overlay); }
#feed li button:focus-visible { outline: var(--perz-control-focus-width) solid var(--perz-focus); outline-offset: var(--perz-control-focus-offset); }
#feed time { font-variant-numeric: tabular-nums; color: var(--perz-text-secondary); font-size: var(--perz-type-metadata); }
#feed-empty { font-size: var(--perz-type-metadata); }

/* ---------------------------------------------------------------- debug panel */
#debug-toggle { position: fixed; z-index: 6; bottom: calc(12px + var(--safe-b)); left: calc(12px + var(--safe-l)); }
#debug { position: fixed; z-index: 6; left: calc(12px + var(--safe-l)); bottom: calc(60px + var(--safe-b)); width: 340px; max-height: calc(100vh - 84px); overflow: auto; padding: 16px 20px; font-size: 14px; }
#debug[hidden] { display: none; }
#debug h3 { margin: 16px 0 8px; }
#debug h3:first-child { margin-top: 0; }
#debug .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
#debug label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
#debug select, #debug input[type="text"] { min-height: 32px; padding: 4px 10px; border: 1px solid var(--perz-field-border); border-radius: var(--perz-radius-control); background: var(--perz-canvas); color: var(--perz-text); max-width: 100%; }
#debug input[type="text"] { flex: 1; min-width: 0; }
#debug input[type="text"]::placeholder { color: var(--perz-placeholder); }
#debug select { flex: 1; }
#debug input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--perz-blue-face); }
#debug input[type="color"] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--perz-field-border); border-radius: var(--perz-radius-small); background: none; cursor: pointer; }
#debug .stats { font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; background: var(--perz-quiet); border: 1px solid var(--perz-border); border-radius: var(--perz-radius-control); padding: 8px 12px; }

/* ---------------------------------------------------------------- bubbles and the nameplate
   Placed by ui.js each frame and never overlapping. Chat bubbles are white
   cards with a 1 px edge, flat like the kit; the nameplate is the charcoal
   surface with the name in Fredoka 600. */
#bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.bubble { position: absolute; left: 0; top: 0; padding: 4px 12px; border-radius: var(--perz-radius-control); background: var(--bubble-face); color: var(--bubble-text); border: 1px solid var(--bubble-edge); font: 500 15px/1.35 var(--perz-font-body); white-space: nowrap; will-change: translate; transform-origin: 50% 100%; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--bubble-face); border-right: 1px solid var(--bubble-edge); border-bottom: 1px solid var(--bubble-edge); transform: rotate(45deg); }
.bubble.shifted::after { display: none; }
/* a Discord action's note over its dragon, and the plate's badge (round 17) */
.bubble.act { padding: 3px 12px; border-radius: 999px; background: var(--perz-surface); color: var(--perz-text); border-color: var(--perz-control-border); font-size: 14px; }
.bubble.act::after { background: var(--perz-surface); border-color: var(--perz-control-border); }
.plate-badge { padding: 1px 8px; border-radius: 999px; background: var(--perz-blue-face); color: var(--perz-on-accent); font: 600 11px/1.5 var(--perz-font-body); }
/* a plate with no room left fades out where it stands (round 16) */
.bubble { transition: opacity .25s var(--perz-ease-out); }
.bubble.faded { opacity: 0; }
.bubble.say { white-space: normal; max-width: 240px; }
.bubble.alarm { font-weight: 600; font-size: 17px; }
.bubble.zz { background: color-mix(in srgb, var(--bubble-face) 88%, transparent); color: #66676B; }
.bubble.label { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--perz-surface); color: var(--perz-text); border-color: var(--perz-control-border); }
.bubble.label::after { background: var(--perz-surface); border-color: var(--perz-control-border); }
.bubble.label .name { font: 600 16px/1.2 var(--perz-font-body); }
.bubble.label .star { width: 10px; height: 10px; color: var(--perz-focus); }
.bubble.label .owner { font-size: var(--perz-type-metadata); color: var(--perz-text-secondary); }
.bubble.pop { animation: pop .28s cubic-bezier(.3, 1.6, .5, 1); }
/* another visitor's name under their wisp: small and quiet, so the dragons stay the subject */
.bubble.wisp { padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--perz-surface) 78%, transparent); color: var(--perz-text); border: 0; font-size: 13px; }
.bubble.wisp::after { display: none; }
/* a keeper's plate: its name and the badge; it keeps its tooltip */
.bubble.keeper { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 10px; font-size: 13px; pointer-events: auto; cursor: default; }
.bubble.keeper::after { display: none; }
.npc-badge { padding: 0 6px; border-radius: 999px; background: var(--bubble-text); color: var(--bubble-face); font: 600 10px/1.6 var(--perz-font-body); letter-spacing: .04em; }
@keyframes pop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }

/* ---------------------------------------------------------------- population chip (top left) */
.pop { position: fixed; z-index: 5; top: calc(12px + var(--safe-t)); left: calc(12px + var(--safe-l)); }
.pop[hidden] { display: none; }
.pop-face { all: unset; position: relative; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; min-width: 176px; padding: 9px 14px; border-radius: var(--perz-radius-control); background: var(--perz-surface); border: 1px solid var(--perz-control-border); color: var(--perz-text); }
.pop-face:focus-visible { outline: var(--perz-control-focus-width) solid var(--perz-focus); outline-offset: var(--perz-control-focus-offset); }
@media (hover: hover) and (pointer: fine) { .pop-face:hover { background: var(--perz-raised); } }
.pop-count { font-size: var(--perz-type-metadata); color: var(--perz-text-secondary); }
.pop-count b { font: 600 20px/1.1 var(--perz-font-body); color: var(--perz-text); margin-right: 4px; font-variant-numeric: tabular-nums; }
.pop-next { font-size: var(--perz-type-metadata); color: var(--perz-text-secondary); white-space: nowrap; }
/* the Poola count, a small line under the bar (poola PLAN P3) */
.pop-poolas { font-size: var(--perz-type-small); color: var(--perz-text-secondary); margin-top: 2px; }
.pop-poolas[hidden] { display: none; }
.pop-line { display: none; }
.pop-bar { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--perz-border-strong); overflow: hidden; }
.pop-bar i { display: block; height: 100%; width: 0; background: var(--perz-focus); border-radius: inherit; transition: width .5s var(--perz-ease-out); }
#pop-goals { position: absolute; top: calc(100% + 10px); left: 0; width: 280px; padding: 14px 18px; }
#pop-goals[hidden] { display: none; }
#pop-goals h2 { font-size: var(--perz-type-subsection); margin: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.me-head .sheet-done { margin-left: auto; }
/* every panel has its Done, on a desktop too (QA-23 W4) */
#pop-goals ol { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
#pop-goals li { display: flex; align-items: center; gap: 10px; color: var(--perz-text-secondary); }
#pop-goals li b { color: var(--perz-text); font-weight: 600; margin-right: 4px; }
#pop-goals li.done { color: var(--perz-text); }
#pop-goals .star { width: 14px; height: 14px; color: var(--perz-focus); flex: none; }
#pop-goals .dot { width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; border: 1px solid var(--perz-text-secondary); flex: none; }
#pop-goals p { margin: 0; }
#pop-goals .pop-so-far { margin: 0 0 6px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--perz-text); }
#pop-goals .pop-members { margin: 0 0 2px; }
#pop-goals .pop-members + ol, #pop-goals .pop-so-far + ol { margin-top: 10px; }
#pop-goals .pop-members:empty { display: none; }
/* a join, a hatch or a goal: the shared toast (ui.css), under the title pill */
.pop-toast { top: calc(64px + var(--safe-t)); }
/* the world's title pill, top centre where there is room for it */
.world-title { position: fixed; z-index: 5; top: calc(12px + var(--safe-t)); left: 50%; translate: -50% 0; pointer-events: none; }
.world-title[hidden] { display: none; }
@media (max-width: 960px) { .perz .world-title { display: none; } }

/* ---------------------------------------------------------------- the HUD (top right): search, Discord, account, Make a Poola, Hatch a dragon */
/* one row, every control 40 px; the primary differs by its fill */
.hud { position: fixed; z-index: 6; top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); display: flex; align-items: center; gap: 8px; }
.hud[hidden], .hud [hidden] { display: none !important; }
#create { white-space: nowrap; }
.account { position: relative; display: flex; flex-direction: column; align-items: flex-end; }
.account[hidden], .account [hidden] { display: none; }
#me-panel { position: absolute; right: 0; top: 100%; }

/* the discriminator after a name, muted: Mochi#4821 */
.disc { color: var(--perz-text-secondary); font-family: var(--perz-font-body); font-weight: 500; font-size: .82em; margin-left: 1px; }

/* ---------------------------------------------------------------- search */
.search { position: fixed; z-index: 7; top: calc(64px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 320px; padding: 14px 16px; }
.search[hidden] { display: none; }
.search h2 { font-size: var(--perz-type-subsection); margin: 0; }
.search-results { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.search-hit { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 8px 12px; border-radius: var(--perz-radius-control); color: var(--perz-text); }
.search-hit:hover, .search-hit[aria-selected="true"] { background: var(--perz-hover-overlay); }
.search-hit:focus-visible { outline: var(--perz-control-focus-width) solid var(--perz-focus); outline-offset: var(--perz-control-focus-offset); }
.hit-name { font-weight: 600; }
.hit-owner { font-size: var(--perz-type-metadata); color: var(--perz-text-secondary); white-space: nowrap; }
.search-empty { margin: 10px 0 0; }

/* ---------------------------------------------------------------- your dragon, small (under the HUD) */
/* your dragon's tag in a pill and the 40 px find button beside it */
.mine { position: fixed; z-index: 5; top: calc(64px + var(--safe-t)); right: calc(12px + var(--safe-r)); display: flex; align-items: center; gap: 8px; }
.mine[hidden] { display: none; }
.mine-label { display: flex; align-items: center; gap: 8px; height: var(--perz-control-height); padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--perz-control-border); color: var(--perz-text); font-size: 14px; font-weight: 600; }
.mine-star .star { display: block; width: 12px; height: 12px; color: var(--perz-focus); }
.mine-tag { white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.search:not([hidden]) ~ .mine, .hud:has(#me-panel:not([hidden])) ~ .mine { visibility: hidden; }

/* ---------------------------------------------------------------- the Discord card (in the middle) */
.dc-card { position: fixed; z-index: 15; left: 50%; top: 50%; translate: -50% -50%; width: min(360px, calc(100vw - 32px)); padding: 20px 24px 22px; text-align: center; }
.dc-card[hidden] { display: none; }
.dc-art { display: block; width: 168px; height: 168px; margin: -6px auto 4px; }
.perz .dc-card h2 { margin: 0 0 12px; }
.dc-card p { margin: 0 auto 8px; }
.dc-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dc-list li { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--perz-border-strong); border-radius: 999px; font-size: var(--perz-type-metadata); font-weight: 500; color: var(--perz-text-secondary); }
.dc-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.dc-buttons a { text-decoration: none; }
#dc-status { margin: 12px 0 0; min-height: 1.2em; }
#dc-status:empty { display: none; }
.perz #dc-link[hidden] { display: none; }

/* the chip ticks up with a small pop when a dragon joins */
.pop-face.bump { animation: bump .5s var(--perz-ease-out); }
@keyframes bump { 30% { scale: 1.08; } 100% { scale: 1; } }
/* guests: the sign-in button; signed in, the avatar and name, 40 px like the rest of the row */
.perz .me { all: unset; position: relative; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; height: var(--perz-control-height); padding: 3px 14px 3px 3px; border-radius: var(--perz-radius-control); background: var(--perz-surface); border: 1px solid var(--perz-control-border); color: var(--perz-text); font-size: 14px; font-weight: 600; }
.perz .me::after { content: ''; position: absolute; inset: -3px 0; }
.perz .me:focus-visible { outline: var(--perz-control-focus-width) solid var(--perz-focus); outline-offset: var(--perz-control-focus-offset); }
@media (hover: hover) and (pointer: fine) { .perz .me:hover { background: var(--perz-raised); } }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: calc(var(--perz-radius-control) - 3px); overflow: hidden; color: #121316; font: 600 14px/1 var(--perz-font-body); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 48px; height: 48px; font-size: 20px; border-radius: var(--perz-radius-media); }
#me-panel { margin-top: 10px; width: 340px; z-index: 1; padding: 16px 20px; }
.me-head { display: flex; align-items: center; gap: 12px; }
.me-head h2 { font-size: var(--perz-type-subsection); margin: 0; }
.me-head p { margin: 0; font-size: 13px; }
#me-panel h3 { font-size: 15px; margin: 14px 0 8px; }
#me-dragons { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#me-dragons .star { width: 12px; height: 12px; margin-right: 4px; color: currentColor; }
.me-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-top: 16px; }
.me-actions > button { white-space: nowrap; flex: none; }
#me-note { margin: 12px 0 0; }

/* ---------------------------------------------------------------- sound (bottom left; the control itself is sound.css) */
#sound { position: fixed; z-index: 5; left: calc(12px + var(--safe-l)); bottom: calc(12px + var(--safe-b)); }

/* ---------------------------------------------------------------- the intro card */
#gate { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: var(--perz-backdrop); transition: opacity .5s var(--perz-ease-out); }
#gate.gone { opacity: 0; pointer-events: none; }
#gate[hidden] { display: none; }
.gate-card { max-width: 480px; padding: 28px; text-align: center; }
.perz .gate-card h1 { margin: 0 0 20px; }
.gate-card p { margin: 0 auto 20px; }
.gate-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 16px; }
.perz .gate-card #gate-status { margin: 0 auto; font-size: var(--perz-type-metadata); }
.perz .gate-card #no-webgl { margin: 0 auto; }

@media (max-width: 600px) {
  #feed { width: calc(100vw - 24px - var(--safe-l) - var(--safe-r)); max-height: 34vh; }
  #debug { width: calc(100vw - 24px - var(--safe-l) - var(--safe-r)); max-height: 46vh; }
  .gate-card { padding: 20px; }
  .gate-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .gate-buttons > button { width: 100%; justify-content: center; }
  .pill-note { font-size: 13px; padding: 6px 14px; bottom: calc(68px + var(--safe-b)); }
  /* the debug toggle moves to the bottom right on a phone, above the hint line */
  /* under the sheets, which open from the bottom over it */
  #debug-toggle { left: auto; right: calc(12px + var(--safe-r)); bottom: calc(60px + var(--safe-b)); z-index: 4; }
  #debug { left: auto; right: calc(12px + var(--safe-r)); bottom: calc(108px + var(--safe-b)); max-height: 52vh; z-index: 4; }
  /* The phone keeps the top of the screen for the world: the count is one
     line at most 40 % of the width and 40 px tall, sign-in an icon, and the
     goals and the account open as sheets from the bottom. */
  .me-name { display: none; }
  .perz .me { width: var(--perz-control-height); padding: 3px; }
  .pop-face { min-width: 0; max-width: 46vw; height: var(--perz-control-height); padding: 0 12px; gap: 0; align-content: center; }
  .pop-count, .pop-next, .pop-poolas { display: none !important; }
  .pop-line { display: block; white-space: nowrap; }
  .pop-line b { font: 600 16px/1 var(--perz-font-body); color: var(--perz-text); font-variant-numeric: tabular-nums; }
  .pop-bar { height: 4px; margin-top: 4px; }
  #pop-goals, #me-panel { position: fixed; z-index: 9; left: 0; right: 0; top: auto; bottom: 0; width: auto; margin: 0; max-height: 62vh; overflow: auto; border-radius: var(--perz-radius-panel) var(--perz-radius-panel) 0 0; border-bottom: 0; padding-bottom: calc(18px + var(--safe-b)); }
  /* under the top row and your dragon's chip, not over them */
  .pop-toast { top: calc(116px + var(--safe-t)); }
  /* an open sheet sits over the sound control, not under it */
  .pop:has(#pop-goals:not([hidden])), .hud:has(#me-panel:not([hidden])) { z-index: 10; }
  /* Hatch a dragon, the one primary, sits at the bottom right within thumb reach */
  #create { position: fixed; right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); padding: 0 20px; }
  .search { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 70vh; overflow: auto; border-radius: var(--perz-radius-panel) var(--perz-radius-panel) 0 0; border-bottom: 0; padding-bottom: calc(18px + var(--safe-b)); z-index: 10; }
  .mine { top: calc(64px + var(--safe-t)); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.pop { animation: none; }
  #gate, #hint, .pop-bar i { transition: none; }
  .pop-face.bump { animation: none; }
}

/* The kit sets display on .secondary, which beats the hidden attribute. */
#debug-toggle[hidden], #debug[hidden] { display: none !important; }
/* Make a Poola, beside Hatch a dragon (P3c): a floating secondary; off where the HUD has no room */
.hud .make-poola { white-space: nowrap; }
@media (max-width: 560px) { .hud .make-poola { display: none; } }
/* where the HUD has no room for it, Make a Poola sits in the goals sheet (QA-23 W3) */
.perz .pop-make-poola { display: none; margin-top: 12px; }
@media (max-width: 560px) { .perz .pop-make-poola { display: inline-flex; } }