:root {
  color-scheme: light;
  --paper: #f1eee1;
  --paper-deep: #e7e2d1;
  --paper-edge: #d8d2bf;
  --ink: #33302a;
  --ink-soft: #6b6558;
  --ink-faint: #9a9484;
  --felt: #dcd5c2;
  --bibi: #6b8cae;
  --lulu: #5d4a73;
  --secret: #d9a8b0;
  --orbit: #c9a961;
  --shadow-soft: 0 1px 3px rgba(51, 48, 42, .06);
  --shadow-lift: 0 4px 16px rgba(51, 48, 42, .10);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font: 400 15px/1.65 "Karla", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 18%, rgba(80, 72, 50, .025) 0 1px, transparent 1.6px) 0 0 / 7px 7px,
    var(--paper);
}

button { font: inherit; color: inherit; }

.window {
  width: min(100% - 32px, 748px);
  margin: 0 auto;
  padding: 34px 0 40px;
}

.room-heading { display: flex; align-items: start; justify-content: space-between; margin: 0 2px 18px; }
.room-heading h1 { margin: 0; font: 600 28px/1.15 "Fraunces", Georgia, serif; letter-spacing: -.02em; }
.room-heading p { margin: 5px 0 0; color: var(--ink-faint); font-size: 13px; }
.presence-dot { width: 8px; height: 8px; margin: 11px 4px; border-radius: 50%; background: var(--orbit); box-shadow: 0 0 0 5px rgba(201,169,97,.10); }

.room-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(107, 101, 88, .16);
  border-radius: 20px;
  background: var(--felt);
  box-shadow: var(--shadow-soft);
}

#room-scene { display: block; width: 100%; aspect-ratio: 12 / 7; }
#room-scene { touch-action: none; user-select: none; }
.felt { fill: var(--felt); filter: url(#felt-noise); opacity: .98; }
.felt-seam { fill: none; stroke: rgba(83,75,57,.07); stroke-width: 3; stroke-linecap: round; }
.ball { cursor: default; transition: transform 800ms cubic-bezier(.2,.8,.2,1); transform-box: fill-box; transform-origin: center; }
.pet-mode .ball { cursor: pointer; }
.pet-mode .ball:hover { filter: brightness(1.055); }
.ball.gesture-active { filter: brightness(1.04); }
#gesture-line { stroke: var(--ink-faint); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 10; pointer-events: none; transition: stroke 140ms ease-out, stroke-width 140ms ease-out, filter 140ms ease-out; }
#gesture-line[data-force="gentle"] { stroke: var(--ink-faint); stroke-width: 3; }
#gesture-line[data-force="travel"] { stroke: var(--ink-soft); stroke-width: 4; }
#gesture-line[data-force="fast"] { stroke: var(--orbit); stroke-width: 5; filter: drop-shadow(0 0 3px rgba(201,169,97,.30)); }
#gesture-line[data-force="risky"] { stroke: #a96570; stroke-width: 7; filter: drop-shadow(0 0 4px rgba(169,101,112,.34)); }
.ball > circle, .ball > .lulu-spines { transform-box: fill-box; transform-origin: center; transition: transform 140ms ease-out; }
.ball[data-pull="travel"] > circle, .ball[data-pull="travel"] > .lulu-spines { transform: scale(1.025,.985); }
.ball[data-pull="fast"] > circle, .ball[data-pull="fast"] > .lulu-spines { transform: scale(1.05,.965); }
.ball[data-pull="risky"] > circle, .ball[data-pull="risky"] > .lulu-spines { transform: scale(1.08,.92); }
.gesture-hint { position: absolute; left: 0; right: 0; bottom: 38px; margin: 0; text-align: center; color: rgba(51,48,42,.48); font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 180ms ease-out; }
.pet-bubble {
  position: absolute;
  z-index: 3;
  max-width: min(260px, 48%);
  margin: 0;
  padding: 8px 11px;
  border: 1px solid rgba(107,101,88,.14);
  border-radius: 12px 12px 12px 3px;
  color: var(--ink-soft);
  background: rgba(241,238,225,.94);
  box-shadow: var(--shadow-lift);
  font: 400 12px/1.45 "Karla", sans-serif;
  pointer-events: none;
  transform: translate(-8%, -112%);
}
.pet-bubble[data-ball="lulu"] { border-radius: 12px 12px 3px 12px; transform: translate(-88%, -112%); }
.room-shell:hover .gesture-hint, .room-shell:focus-within .gesture-hint { opacity: 1; }
body.physics-animating .ball { transition: none; }
.ball-shadow { fill: rgba(47, 41, 34, .18); filter: blur(5px); }
.ball-glint { fill: rgba(255,255,255,.34); transform: rotate(-18deg); }
.bibi-ball circle { stroke: rgba(50,66,82,.18); stroke-width: 2; }
.bibi-ball { animation: bibi-breathe 4.8s ease-in-out infinite; }
.lulu-spines { stroke: rgba(46,34,58,.25); stroke-width: 2; stroke-linejoin: round; }
.lulu-ball { animation: lulu-breathe 7s ease-in-out infinite; }

.tray {
  position: absolute;
  left: 7%; right: 7%; bottom: -1px;
  height: 34px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: rgba(51,48,42,.55);
  font-size: 12px;
  background: rgba(199,190,168,.76);
  border: 1px solid rgba(83,75,57,.14);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 4px 9px rgba(70,62,48,.08);
}
.tray-label { color: var(--ink-soft); font-weight: 500; }

.sound { min-height: 24px; margin: 14px 0 10px; text-align: center; color: var(--ink-faint); font: italic 400 14px/1.6 "Fraunces", Georgia, serif; transition: opacity .3s ease; }
.little-choice { margin: 14px 0 22px; padding: 16px 18px; border: 1px solid rgba(107,101,88,.11); border-radius: 13px; background: rgba(231,226,209,.62); text-align: center; }
.little-choice h2 { margin: 0 0 4px; font: 500 16px/1.4 "Fraunces", Georgia, serif; }
.little-choice p { margin: 3px auto; max-width: 54ch; color: var(--ink-soft); font-size: 13px; }
.little-choice-progress { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.little-choice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 11px; }
.little-choice-actions button { padding: 7px 11px; border: 0; border-radius: 8px; background: rgba(216,210,191,.72); cursor: pointer; }
.little-choice-actions button:hover { background: var(--paper-edge); }

.ball-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 4px 0 0; }
.ball-card { padding: 7px 0; text-align: left; border: 0; background: transparent; }
.ball-card:last-child { text-align: right; }
.ball-name { display: block; font-weight: 500; }
.ball-state { display: block; color: var(--ink-soft); }
.friendship-title { margin: 15px 0 3px; text-align: center; font: 500 18px/1.5 "Fraunces", Georgia, serif; }
.orbit { display: flex; justify-content: center; gap: 9px; color: var(--ink-faint); font-size: 13px; }
#orbit-dots { color: var(--orbit); letter-spacing: 2px; }

.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 28px 0 0; }
.actions button, .secondary button, .close-panel {
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
}
.actions button { padding: 10px 8px; font-weight: 500; transition: background 160ms ease-out; }
.actions button:hover, .actions button:focus-visible { background: rgba(216,210,191,.52); outline: none; }
.actions button[aria-pressed="true"] { background: rgba(216,210,191,.72); }
.preview-note { margin: 6px auto 0; max-width: 42ch; color: var(--ink-faint); text-align: center; font-size: 13px; }

.away { margin: 29px 0 0; padding: 18px 20px; border-radius: 14px; background: rgba(231,226,209,.72); }
.away h2 { margin: 0 0 9px; color: var(--ink-soft); font: 500 15px/1.5 "Fraunces", Georgia, serif; }
.trace { margin: 7px 0; }
.trace em { font-family: "Fraunces", Georgia, serif; }
.trace-note { display: block; margin-top: 2px; color: var(--ink-soft); }
.trace time { display: block; color: var(--ink-faint); font-size: 12px; }

.secondary { display: flex; justify-content: center; gap: 24px; margin: 28px 0 0; }
.secondary button { padding: 5px 1px; color: var(--ink-soft); font-size: 13px; border-bottom: 1px solid transparent; border-radius: 0; }
.secondary button:hover { border-color: var(--paper-edge); }

dialog { width: min(100% - 32px, 560px); max-height: min(72vh, 620px); padding: 28px; border: 0; border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-lift); }
dialog::backdrop { background: rgba(51,48,42,.18); backdrop-filter: blur(2px); }
.close-panel { float: right; padding: 3px; color: var(--ink-faint); font-size: 13px; }
#panel-content h2 { margin: 0 0 18px; font: 500 23px/1.2 "Fraunces", Georgia, serif; }
.panel-item { padding: 12px 0; border-top: 1px solid rgba(107,101,88,.10); }
.panel-item:first-of-type { border-top: 0; }
.panel-item p { margin: 2px 0; }
.panel-meta { color: var(--ink-faint); font-size: 12px; }
.item-name { font-weight: 500; }
.item-hint { color: var(--ink-soft); }
.quiet-copy { color: var(--ink-faint); }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.paper-button, .choice-grid button {
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper-deep);
  cursor: pointer;
}
.paper-button:hover, .choice-grid button:hover { background: var(--paper-edge); }
.room-form { display: grid; gap: 12px; }
.room-form label, #login-form label { color: var(--ink-soft); font-size: 13px; }
.room-form textarea, .room-form select, .room-form input, #login-form input {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(107,101,88,.18);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.28);
  font: inherit;
}
.room-form textarea { min-height: 92px; resize: vertical; }
.form-status { min-height: 1.6em; color: var(--ink-soft); }
#login-form { display: grid; gap: 12px; }
#login-form h2 { margin: 0; font: 500 23px/1.2 "Fraunces", Georgia, serif; }
.tray-things { display: inline-flex; gap: 5px; font-size: 17px; }

@keyframes bibi-breathe { 0%,100% { scale: 1; } 50% { scale: 1.018 .985; } }
@keyframes lulu-breathe { 0%,100% { scale: 1; } 50% { scale: 1.025; } }

@media (max-width: 560px) {
  .window { width: min(100% - 24px, 748px); padding-top: 24px; }
  .room-heading h1 { font-size: 24px; }
  .room-shell { border-radius: 18px; }
  .ball-cards { gap: 12px; }
  .secondary { gap: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}