/* The cabin. Its own look on purpose: nothing here is shared with the Symba
   shell, so a guest never sees a trace of it. The look is a pimped-out 2005
   profile page: tiled stars, table boxes with coloured title bars, bevel
   buttons, a ticker, glitter. Everything is still sized for a thumb. */
:root {
  --night: #05060f;
  --box: rgba(9, 11, 26, 0.93);
  --line: #6699cc;
  --text: #f1f1f1;
  --fog: #a9b8cc;
  --link: #ffcc33;
  --orange: #ff9933;
  --pink: #ff3399;
  --lime: #99dd22;
  --purple: #9966ff;
  --moss: #7cc36a;
  --ember: #f5a742;
  --blood: #ea5a4f;
  --s: 1;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text);
  font: 14px/1.45 Verdana, Geneva, Tahoma, sans-serif;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--night);
  background-image:
    radial-gradient(#ffffff 1px, transparent 1.6px),
    radial-gradient(#ff66cc 1px, transparent 1.6px),
    radial-gradient(#99ccff 1.2px, transparent 1.8px);
  background-size: 97px 97px, 131px 131px, 173px 173px;
  background-position: 0 0, 40px 60px, 90px 20px;
}
a { color: var(--link); }
h1, h2, h3 { margin: 0; }
button, input { font: inherit; color: inherit; }
.muted { color: var(--fog); }
.small { font-size: 12px; }
.glitter {
  font-family: "Arial Black", Impact, "Helvetica Neue", sans-serif; font-weight: 900; letter-spacing: -0.01em;
  background: linear-gradient(90deg, #ff66cc, #ffee66, #66ffee, #ff66cc, #ffee66); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: glitter 3s linear infinite;
}
@keyframes glitter { to { background-position: 300% 0; } }
.blink { animation: blink2 1s steps(2, start) infinite; }
@keyframes blink2 { to { visibility: hidden; } }

/* ---- plain pages (door, wall, me, houses) ---- */
.page { max-width: 520px; margin: 0 auto; padding: 16px 12px 96px; }
.page h1 { font: 900 27px/1.1 "Arial Black", Impact, sans-serif; margin: 6px 0 6px; color: #fff; text-shadow: 2px 2px 0 var(--pink); }
.page p { margin: 6px 0 12px; }
.card { background: var(--box); border: 2px solid var(--line); padding: 12px; margin: 12px 0; }
.card > b:first-child, .card > form > b:first-of-type { display: block; background: var(--orange); color: #000; margin: -12px -12px 10px; padding: 4px 10px; font-size: 13px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 2px outset #fff; border-radius: 0;
  background: #d9d9d9; color: #000; font: bold 13px Verdana, Geneva, sans-serif; cursor: pointer; text-decoration: none;
}
.btn:active { border-style: inset; }
.btn.go { background: var(--orange); border-color: #ffd9a6; }
.btn.danger { color: #b00020; }
.btn.wide { width: 100%; }
.btn:disabled { color: #777; }
.field {
  width: 100%; min-height: 44px; border: 2px inset #ccc; border-radius: 0;
  background: #fff; padding: 0 10px; color: #000; font-size: 16px;
}
.field:focus, .btn:focus-visible { outline: 2px dotted var(--link); outline-offset: 2px; }
.row { display: flex; gap: 8px; align-items: center; }
.row > .field { flex: 1; }
.back { display: inline-block; margin-bottom: 4px; font-weight: bold; }

/* faces */
.face {
  width: 64px; height: 64px; border-radius: 50%; background: #223 center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; font: 900 26px "Arial Black", sans-serif;
  color: #000; flex: none; border: 2px solid #fff;
}
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 6px; margin: 16px 0; }
.wall form { margin: 0; }
.wall button {
  all: unset; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%;
  cursor: pointer; text-align: center; font-weight: bold; font-size: 12px; line-height: 1.2; color: var(--link);
  text-decoration: underline;
}
.wall button:active .face { transform: scale(0.93); }
.wall .face { transition: transform 0.12s; }
.wall .taken .face { opacity: 0.45; border-color: var(--lime); }
.wall .taken button { color: var(--fog); }
.wall .hint { display: block; font-weight: normal; color: var(--fog); font-size: 11px; text-decoration: none; }
.code { font: 900 36px "Courier New", monospace; letter-spacing: 0.2em; color: var(--lime); background: #000; display: inline-block; padding: 2px 12px; border: 2px inset #666; margin: 4px 0 8px; }
.code-in { text-align: center; font-size: 24px; letter-spacing: 0.3em; }
.me-head { display: flex; align-items: center; gap: 14px; }
.me-head .face { width: 96px; height: 96px; font-size: 40px; }
.err { color: #ff6677; font-weight: bold; }

/* cost split */
.nights { display: flex; gap: 8px; flex-wrap: wrap; }
.night { flex: 1; min-width: 86px; gap: 8px; }
.night input { width: 20px; height: 20px; margin: 0; }
.shares { width: 100%; border-collapse: collapse; }
.shares td { padding: 7px 0; border-top: 1px dotted #4a5a78; vertical-align: baseline; }
.shares tr:first-child td { border-top: 0; }
.shares .who { overflow-wrap: anywhere; }
.shares .n { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.shares .amt { text-align: right; font-weight: bold; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shares .me td { color: var(--lime); }
.shares .sum td { border-top: 2px solid var(--line); font-weight: bold; }
select.field { appearance: auto; }

/* houses list */
.tabs { display: flex; gap: 8px; margin: 12px 0; }
.tabs a { flex: 1; text-align: center; }
.tabs a.on, .date-tabs button.on { background: var(--lime); border-style: inset; }
.house h3 { font-size: 16px; color: #fff; }
.house .price { font: 900 20px "Arial Black", sans-serif; color: var(--link); white-space: nowrap; }
.house .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.house.dead { opacity: 0.55; }
.house.dead .price { color: #ff6677; font: bold 13px Verdana, sans-serif; white-space: normal; text-align: right; }
.flag { display: inline-block; font-size: 11px; font-weight: bold; padding: 2px 7px; margin: 6px 6px 0 0; border: 1px solid; }
.flag.warn { background: #332200; color: var(--ember); }
.flag.ok { background: #0c2a12; color: var(--moss); }
.flag.plain { background: #1a2238; color: var(--fog); }

/* ---- the board ----
   The stage is laid out 400 units wide on every device and scaled to fit
   (--s, set by scale.js before first paint). Every tile has a fixed height.
   Together that means a sticker dropped next to the ring on one phone sits
   next to the ring on every other phone. */
.board-wrap { width: calc(400px * var(--s)); margin: 0 auto; position: relative; overflow: hidden; }
.stage { width: 400px; zoom: var(--s); position: relative; padding-bottom: 110px; font-size: 12.5px; }
.tile { margin: 0 10px 12px; background: var(--box); border: 2px solid var(--line); overflow: hidden; position: relative; }
.tile > * { margin-left: 10px; margin-right: 10px; }
.tile h2 { margin: 0 0 6px; padding: 0 8px; height: 24px; font: bold 13px/24px Verdana, Geneva, sans-serif; background: var(--line); color: #fff; overflow: hidden; white-space: nowrap; }
.tile h2 .more { float: right; font-size: 11px; font-weight: bold; color: inherit; }
textarea.field { font: inherit; font-size: 16px; resize: vertical; }
.top8 a { color: inherit; text-decoration: none; display: block; }
.tile .sub { color: var(--fog); font-size: 11.5px; height: 17px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.scene { height: 168px; position: relative; overflow: hidden; border-bottom: 2px solid var(--line); }
.scene svg { position: absolute; inset: 0; width: 400px; height: 168px; }
.scene h1 { position: absolute; left: 12px; top: 10px; font-size: 27px; line-height: 1; width: 200px; }
.scene .tag { position: absolute; left: 13px; top: 70px; font-size: 10.5px; color: #cfe0ff; width: 150px; line-height: 1.3; }
.scene .me-chip { position: absolute; right: 10px; top: 10px; text-decoration: none; text-align: center; font-size: 9.5px; font-weight: bold; color: var(--lime); }
.scene .me-chip .face { width: 46px; height: 46px; font-size: 20px; margin: 0 auto 2px; }
.eyes { opacity: 0; }
.spooky .eyes { opacity: 1; animation: blink 5s infinite; }
.spooky #window { fill: #26150a; }
@keyframes blink { 0%, 44%, 50%, 100% { opacity: 1; } 46%, 48% { opacity: 0; } }

.ticker { height: 24px; margin: 0 0 12px; background: #000; border-bottom: 2px solid var(--line); overflow: hidden; white-space: nowrap; font: bold 12px/22px "Courier New", monospace; color: var(--lime); }
.ticker span { display: inline-block; padding-left: 100%; animation: ticker 26s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

.t-dates { height: 506px; }
.date-tabs { display: flex; gap: 8px; margin-top: 8px; margin-bottom: 2px; height: 40px; }
.date-tabs button { flex: 1; min-height: 40px; padding: 0 4px; font-size: 12px; white-space: nowrap; }
#ring { display: block; width: 372px; height: 330px; margin: 0; }
#ring .slice { cursor: pointer; transition: opacity 0.15s; }
#ring.spin .wheel { animation: spin 3.2s cubic-bezier(0.1, 0.7, 0.1, 1); transform-origin: 186px 165px; }
@keyframes spin { to { transform: rotate(1800deg); } }
.answers { display: flex; gap: 8px; height: 48px; }
.answers button { flex: 1; min-height: 48px; padding: 0 4px; }
.answers button.on { border-style: inset; }
.answers button[data-a="yes"].on { background: var(--moss); border-color: #bfe8b4; }
.answers button[data-a="maybe"].on { background: var(--ember); border-color: #ffdca3; }
.answers button[data-a="no"].on { background: var(--blood); border-color: #f7b3ad; color: #fff; }

.t-top8 { height: 248px; border-color: var(--lime); }
.t-top8 h2 { background: var(--lime); color: #000; }
.top8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; height: 184px; margin-top: 6px; }
.top8 div { text-align: center; font-size: 10.5px; font-weight: bold; color: var(--link); height: 88px; overflow: hidden; }
.top8 .face { width: 64px; height: 64px; margin: 0 auto 3px; }
.top8 .empty { grid-column: 1 / -1; color: var(--fog); font-weight: normal; font-size: 12px; padding-top: 60px; }

.t-houses { height: 226px; border-color: var(--orange); }
.t-houses h2 { background: var(--orange); color: #000; }
.t-ideas { height: 226px; border-color: var(--pink); }
.t-ideas h2 { background: var(--pink); }
.rows { margin-top: 6px; margin-bottom: 8px; height: 102px; }
.rowline { display: flex; align-items: center; gap: 8px; height: 34px; border-top: 1px dotted #4a5a78; font-size: 13px; }
.rowline:first-child { border-top: 0; }
.rowline .n { width: 16px; color: var(--fog); font-weight: bold; flex: none; }
.rowline .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.rowline .v { font-weight: bold; color: var(--link); white-space: nowrap; flex: none; }
.tile .foot { display: flex; gap: 8px; height: 40px; }
.tile .foot .btn { flex: 1; min-height: 40px; font-size: 12px; padding: 0 6px; }

.t-wall { height: 760px; border-color: var(--purple); }
.t-wall h2 { background: var(--purple); margin-bottom: 0; }
.t-wall .tape { height: 22px; margin: 0; background: repeating-linear-gradient(45deg, #ffd400 0 14px, #111 14px 28px); border-bottom: 2px solid #000; }
.t-wall p { color: #7c88a6; font-weight: bold; text-align: center; margin-top: 300px; }

.t-count { height: 136px; text-align: center; border-color: #666; }
.skins { display: flex; gap: 6px; height: 44px; margin-top: 10px; }
.skins .btn { flex: 1; min-height: 44px; padding: 0 4px; font-size: 12px; }
.skins .btn.on { border-style: inset; background: var(--lime); }
#rain { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.t-count p { margin-top: 10px; margin-bottom: 4px; font-size: 11.5px; color: var(--fog); }
.odo { display: inline-block; font: 900 20px/1 "Courier New", monospace; letter-spacing: 3px; color: var(--lime); background: #000; border: 2px inset #777; padding: 4px 4px 4px 7px; }

.stickers { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.sticker { position: absolute; background: center / contain no-repeat; transform-origin: 50% 50%; will-change: transform; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
.sticker.settle { transition: left 0.35s, top 0.35s, width 0.35s, height 0.35s, transform 0.35s; }
.editing .sticker { pointer-events: auto; touch-action: none; cursor: grab; }
.editing .sticker.sel { outline: 2px dashed var(--lime); outline-offset: 3px; }
.stickers.hidden { display: none; }
.quake .sticker { animation: quake 0.18s 12 alternate; }
@keyframes quake { from { margin-left: -5px; margin-top: 2px; } to { margin-left: 5px; margin-top: -3px; } }

.bar {
  position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 6px; padding: 5px; z-index: 20;
  background: #c0c0c0; border: 2px outset #fff; max-width: calc(100vw - 12px);
}
.bar .btn { min-height: 46px; padding: 0 11px; font-size: 12.5px; white-space: nowrap; }
.bar .btn.on { border-style: inset; background: var(--lime); }
.bar .ico { min-width: 46px; padding: 0; font-size: 19px; }
[hidden] { display: none !important; }

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 40; max-width: 88vw;
  background: #ffffcc; color: #000; font-weight: bold; padding: 9px 14px; border: 2px solid #000; text-align: center; font-size: 13px;
}
.sheet { position: fixed; inset: 0; z-index: 30; overflow-y: auto; background: inherit; background-color: var(--night); }
.sheet .page { padding-bottom: 40px; }
.idea { display: flex; gap: 12px; align-items: flex-start; }
.idea .up { min-width: 54px; min-height: 54px; flex-direction: column; gap: 0; padding: 0; font-size: 16px; line-height: 1.1; }
.idea .up.on { background: var(--pink); border-style: inset; color: #fff; }
.idea .up small { font-size: 11px; }
.idea .body { flex: 1; min-width: 0; }
.idea .body b { display: block; overflow-wrap: anywhere; color: #fff; }
.idea .body a { font-size: 12px; overflow-wrap: anywhere; }
.idea .who { font-size: 11px; color: var(--fog); }
.idea .bin { background: none; border: 0; color: var(--fog); cursor: pointer; min-width: 36px; min-height: 36px; }
.stack > * { margin-bottom: 8px; }
.spark { position: fixed; z-index: 50; pointer-events: none; font-size: 14px; animation: spark 0.7s ease-out forwards; }
@keyframes spark { to { transform: translateY(18px) scale(0.3) rotate(90deg); opacity: 0; } }

/* ---- skins ----
   Each person picks their own (cabin_people.theme, set on <body>). A skin may
   change colour, type and corner radius. It must NOT change a height, a border
   width or a margin: the board has to stay the same shape for everyone, or a
   sticker placed in one skin lands somewhere else in another. */

/* Clean: the quiet one. Dark woods, rounded cards, one warm accent. */
body[data-theme="clean"] {
  background-image: none; background-color: #0c1510; color: #f4ecd9;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body[data-theme="clean"] a, body[data-theme="clean"] .rowline .v, body[data-theme="clean"] .house .price { color: #f5a742; }
body[data-theme="clean"] .muted, body[data-theme="clean"] .tile .sub { color: #9db0a3; }
body[data-theme="clean"] .glitter { background: none; color: #f4ecd9; -webkit-text-fill-color: #f4ecd9; animation: none; font-family: inherit; font-weight: 800; }
body[data-theme="clean"] .blink { animation: none; color: #9db0a3; }
body[data-theme="clean"] .page h1 { font: 800 26px/1.1 ui-rounded, system-ui, sans-serif; text-shadow: none; color: #f4ecd9; }
body[data-theme="clean"] .card, body[data-theme="clean"] .tile { background: #15251c; border-color: #2c4636; border-radius: 18px; }
body[data-theme="clean"] .card > b:first-child, body[data-theme="clean"] .card > form > b:first-of-type { background: none; color: #f4ecd9; font-size: 15px; }
body[data-theme="clean"] .tile h2 { background: none; color: #f4ecd9; font: 800 15px/24px ui-rounded, system-ui, sans-serif; padding: 0 10px; }
body[data-theme="clean"] .btn { background: #1d3327; color: #f4ecd9; border: 2px solid #2c4636; border-radius: 14px; font: 700 13px ui-rounded, system-ui, sans-serif; }
body[data-theme="clean"] .btn.go, body[data-theme="clean"] .idea .up.on { background: #f5a742; border-color: #f5a742; color: #2b1a03; }
body[data-theme="clean"] .btn.danger { color: #ea5a4f; }
body[data-theme="clean"] .tabs a.on, body[data-theme="clean"] .date-tabs button.on,
body[data-theme="clean"] .bar .btn.on, body[data-theme="clean"] .skins .btn.on { background: #f4ecd9; border-color: #f4ecd9; color: #0c1510; }
body[data-theme="clean"] .answers button.on { color: #0c1510; }
body[data-theme="clean"] .field { background: #0c1510; color: #f4ecd9; border: 2px solid #2c4636; border-radius: 14px; }
body[data-theme="clean"] .face { border-radius: 50%; border-color: #2c4636; }
body[data-theme="clean"] .wall button, body[data-theme="clean"] .top8 div { color: #f4ecd9; text-decoration: none; }
body[data-theme="clean"] .ticker { background: #101d16; color: #9db0a3; border-color: #2c4636; font: 600 12px/22px ui-rounded, system-ui, sans-serif; }
body[data-theme="clean"] .scene { border-color: #2c4636; }
body[data-theme="clean"] .scene .me-chip { color: #9db0a3; }
body[data-theme="clean"] .rowline { border-top: 1px solid #2c4636; }
body[data-theme="clean"] .bar { background: rgba(12, 21, 16, 0.95); border: 2px solid #2c4636; border-radius: 20px; }
body[data-theme="clean"] .toast { background: #f4ecd9; border-color: #f4ecd9; border-radius: 14px; }
body[data-theme="clean"] .t-wall .tape { background: #101d16; border-color: #101d16; }
body[data-theme="clean"] .t-wall p { color: #55665c; }
body[data-theme="clean"] .odo, body[data-theme="clean"] .code { color: #f5a742; border: 2px solid #2c4636; border-radius: 10px; background: #0c1510; }
body[data-theme="clean"] .sheet { background: #0c1510; }

/* Matrix: green on black, rain behind (matrix.js), faces run through the phosphor. */
body[data-theme="matrix"] { background: #000; color: #00ff41; font-family: "Courier New", Courier, monospace; }
body[data-theme="matrix"] a, body[data-theme="matrix"] .rowline .t, body[data-theme="matrix"] .rowline .v,
body[data-theme="matrix"] .house h3, body[data-theme="matrix"] .house .price, body[data-theme="matrix"] .idea .body b,
body[data-theme="matrix"] .top8 div, body[data-theme="matrix"] .wall button, body[data-theme="matrix"] .scene .me-chip { color: #00ff41; }
body[data-theme="matrix"] .muted, body[data-theme="matrix"] .tile .sub, body[data-theme="matrix"] .rowline .n,
body[data-theme="matrix"] .scene .tag, body[data-theme="matrix"] .wall .hint, body[data-theme="matrix"] .t-count p,
body[data-theme="matrix"] .t-wall p, body[data-theme="matrix"] .idea .who { color: #00a82b; }
body[data-theme="matrix"] .glitter { background: none; color: #00ff41; -webkit-text-fill-color: #00ff41; animation: none; font-family: "Courier New", monospace; text-shadow: 0 0 8px #00ff41; }
body[data-theme="matrix"] .page h1 { font: 900 26px/1.1 "Courier New", monospace; color: #00ff41; text-shadow: 0 0 8px #00ff41; }
body[data-theme="matrix"] .card, body[data-theme="matrix"] .tile { background: rgba(0, 12, 0, 0.86); border-color: #00a82b; }
body[data-theme="matrix"] .card > b:first-child, body[data-theme="matrix"] .card > form > b:first-of-type, body[data-theme="matrix"] .tile h2 { background: #003b00; color: #00ff41; font-family: "Courier New", monospace; }
body[data-theme="matrix"] .btn { background: #000; color: #00ff41; border: 2px solid #00ff41; font: bold 13px "Courier New", monospace; }
body[data-theme="matrix"] .btn.go, body[data-theme="matrix"] .tabs a.on, body[data-theme="matrix"] .date-tabs button.on,
body[data-theme="matrix"] .bar .btn.on, body[data-theme="matrix"] .skins .btn.on, body[data-theme="matrix"] .idea .up.on { background: #00ff41; color: #000; border-color: #00ff41; }
body[data-theme="matrix"] .btn.danger { color: #ff4d4d; }
body[data-theme="matrix"] .btn:disabled { color: #00a82b; }
body[data-theme="matrix"] .answers button.on { color: #000; }
body[data-theme="matrix"] .field { background: #000; color: #00ff41; border: 2px solid #00a82b; }
body[data-theme="matrix"] .face, body[data-theme="matrix"] #ring image, body[data-theme="matrix"] .scene svg { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(4) brightness(0.9); }
body[data-theme="matrix"] .face { border-color: #00ff41; }
body[data-theme="matrix"] .ticker, body[data-theme="matrix"] .scene { border-color: #00a82b; }
body[data-theme="matrix"] .rowline { border-top: 1px dotted #00a82b; }
body[data-theme="matrix"] .bar { background: #000; border: 2px solid #00ff41; }
body[data-theme="matrix"] .toast { background: #000; color: #00ff41; border-color: #00ff41; }
body[data-theme="matrix"] .t-wall .tape { background: repeating-linear-gradient(45deg, #00ff41 0 14px, #000 14px 28px); }
body[data-theme="matrix"] .sheet { background: #000; }
body[data-theme="matrix"] .flag { background: #000; color: #00ff41; }
body[data-theme="matrix"] .flag.warn { color: #ffb000; }

@media (prefers-reduced-motion: reduce) {
  .sticker.settle, #ring.spin .wheel, .quake .sticker, .spooky .eyes, .glitter, .blink, .ticker span, .spark { animation: none; transition: none; }
  .ticker span { padding-left: 8px; }
}