* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #e8e6e0;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
/* wii P1 pointer cursor set by PrimmR - primmr.dev/projects/wii-pointer-cursors */
html, body, a, button { cursor: url('/assets/cursors/wii-pointer-p1.png') 19 1, auto; }

#plaza { display: block; width: 100vw; height: 100vh; animation: fadein .8s ease-out;
  cursor: url('/assets/cursors/wii-pointer-p1.png') 19 1, grab; touch-action: none; }
/* hovering a resident opens the hand; the fist is anchored at the knuckles
   so the hand does not jump when gripping (.dragging wins while it lasts) */
#plaza.point { cursor: url('/assets/cursors/wii-open-p1.png') 22 8, grab; }
#plaza.dragging { cursor: url('/assets/cursors/wii-closed-p1.png') 22 8, grabbing; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* wii-channel-style boot curtain: covers everything until the cast is dressed */
#ladybug { position: fixed; top: 0; left: 0; z-index: 35; cursor: pointer; will-change: transform; }
#credits { position: fixed; inset: 0; background: rgba(12, 16, 24, 0.9); z-index: 70; overflow: hidden; cursor: pointer; }
#credits .roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; color: #f4f1e8;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif; animation: creditroll 36s linear forwards; }
#credits .roll h2 { font-size: 30px; margin: 26px 0; }
#credits .roll p { margin: 13px 0; font-size: 16px; }
#credits .roll .sub { color: #b9c2cf; letter-spacing: 0.08em; margin: 22px 0; }
#credits .roll small { color: #8f9aab; }
@keyframes creditroll { from { transform: translateY(0); } to { transform: translateY(-320vh); } }
#ladybug canvas { display: block; }
#curtain { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(ellipse at 50% 42%, #f4f3ef 0%, #e8e6e0 62%, #dddad2 100%);
  transition: opacity .8s ease, transform .8s ease; }
#curtain.gone { opacity: 0; transform: translateY(-2.5%); pointer-events: none; }
#curtain-tile { width: 240px; height: 150px; border-radius: 26px;
  background: linear-gradient(#ffffff, #eceef1); border: 1px solid #d4d7dc;
  box-shadow: 0 10px 34px rgba(50,60,80,.18), inset 0 2px 0 #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  animation: tilebreathe 2.2s ease-in-out infinite; }
#curtain-tile b { font-size: 22px; letter-spacing: .08em; color: #4b5563; }
#curtain .dots { display: flex; gap: 8px; }
#curtain .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3aa0e8;
  animation: dothop 1.2s ease-in-out infinite; }
#curtain .dots i:nth-child(2) { animation-delay: .15s; }
#curtain .dots i:nth-child(3) { animation-delay: .3s; }
#curtain p { font-size: 13px; color: #8a919c; }
@keyframes tilebreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes dothop { 0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-7px); opacity: 1; } }

/* soft wii-style screen framing */
#vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(58,72,104,.22) 100%); }

/* rounded glossy chrome */
#logo { position: fixed; top: 16px; left: 18px; padding: 8px 18px; border-radius: 999px;
  background: linear-gradient(#ffffff, #eceef1); border: 1px solid #d4d7dc;
  box-shadow: 0 3px 10px rgba(60,70,90,.14), inset 0 1px 0 #fff;
  font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #4b5563; }

#status-pill { position: fixed; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; background: linear-gradient(#ffffff, #eceef1);
  border: 1px solid #d4d7dc; box-shadow: 0 3px 10px rgba(60,70,90,.14), inset 0 1px 0 #fff;
  font-size: 13px; color: #4b5563; }
#status-dot { width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e; }
#status-dot.offline { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }

#hud-buttons { position: fixed; top: 74px; right: 18px; display: flex; flex-direction: column; gap: 10px; }
#hud-buttons button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #cdd1d7;
  background: linear-gradient(#ffffff, #e7eaee); color: #6b7280; font-size: 15px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(60,70,90,.16), inset 0 1px 0 #fff; transition: transform .12s, color .12s; }
#hud-buttons button:hover { transform: scale(1.08); color: #2f86c8; }
#btn-people { font-size: 9px; letter-spacing: 1px; }
#btn-sound.off { color: #c6cad0; text-decoration: line-through; }

/* the board */
#ticker { position: fixed; bottom: 0; left: 0; right: 0; height: 44px;
  background: linear-gradient(#fdfdfe, #eef0f3); border-top: 1px solid #d4d7dc;
  box-shadow: 0 -4px 14px rgba(60,70,90,.10);
  overflow: hidden; display: flex; align-items: center; }
#board-label { flex: 0 0 auto; margin: 0 0 0 14px; padding: 5px 13px; border-radius: 999px;
  background: #3aa0e8; color: #fff; font-size: 12px; letter-spacing: .05em; z-index: 1;
  box-shadow: 0 2px 6px rgba(58,160,232,.4); }
#ticker-track { display: inline-flex; gap: 52px; white-space: nowrap; padding-left: 100vw;
  animation: scroll 60s linear infinite; }
#ticker:hover #ticker-track { animation-play-state: paused; }
#ticker-track a, #ticker-track span { color: #4b5563; text-decoration: none; font-size: 14px; }
#ticker-track .price { font-weight: 700; letter-spacing: .02em; }
#ticker-track .price.up { color: #2e9450; }
#ticker-track .price.down { color: #d43a32; }
#ticker-track a:hover { color: #2f86c8; }
@keyframes scroll { to { transform: translateX(-100%); } }

/* cards + transcripts */
#panel { position: fixed; top: 74px; left: 18px; max-width: 350px; background: #fff; border-radius: 18px;
  border: 1px solid #d9dce1; box-shadow: 0 10px 34px rgba(50,60,80,.22), inset 0 1px 0 #fff;
  padding: 16px 18px; font-size: 14px; line-height: 1.5; color: #374151;
  animation: pop .16s ease-out; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#panel.hidden { display: none; }
#panel h3 { margin: 0 0 8px; font-size: 16px; color: #1f2937; padding-bottom: 7px;
  border-bottom: 2px solid #e5f2fb; }
#panel .line { margin: 5px 0; }
#panel .line b { color: #2f86c8; }
#panel a { color: #2f86c8; font-size: 13px; }
#panel .close { float: right; cursor: pointer; color: #9ca3af; font-size: 18px; width: 26px; height: 26px;
  text-align: center; line-height: 24px; border-radius: 50%; background: #f1f3f5; }
#panel .close:hover { color: #4b5563; background: #e5e8ec; }

/* residents grid */
#panel .folk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
#panel .folk button { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px;
  border: 1px solid #e2e5e9; background: #fafbfc; cursor: pointer; font: inherit; font-size: 13px;
  color: #374151; text-align: left; }
#panel .folk button:hover { background: #eef6fc; border-color: #bcdcf2; }
#panel .folk i { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
#panel .folk-away { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px;
  border: 1px dashed #e4e7eb; background: #fbfcfd; font-size: 13px; color: #9ca3af; }
#panel .folk-away i { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1); opacity: .45; }
#panel .folk-away.unmet i { background: #d7dade; }
#panel .folk-away small { color: #c0c5cc; font-style: italic; margin-left: auto; }

/* overheard-now list */
#panel .talks { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
#panel .talks button { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid #e2e5e9; background: #fafbfc; cursor: pointer;
  font: inherit; font-size: 13px; color: #374151; text-align: left; }
#panel .talks button:hover { background: #eef6fc; border-color: #bcdcf2; }
#panel .talks b { color: #2f86c8; }
#panel .talks small { color: #6b7280; font-style: italic; }

/* the registry button: the one piece of chrome allowed to show off */
#btn-holder { position: fixed; right: 18px; bottom: 64px; z-index: 30;
  padding: 11px 20px; border-radius: 999px; border: 1px solid #2f86c8;
  background: linear-gradient(#5cbcf5, #2f86c8); color: #fff; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .05em;
  box-shadow: 0 4px 16px rgba(58,160,232,.45), inset 0 1px 0 rgba(255,255,255,.55);
  animation: regbreathe 2.6s ease-in-out infinite; transition: transform .12s; }
#btn-holder:hover { transform: scale(1.07); animation-play-state: paused;
  background: linear-gradient(#6cc5f8, #3794d8); }
@keyframes regbreathe {
  0%, 100% { transform: scale(1);
    box-shadow: 0 4px 16px rgba(58,160,232,.45), inset 0 1px 0 rgba(255,255,255,.55); }
  50% { transform: scale(1.045);
    box-shadow: 0 6px 24px rgba(58,160,232,.65), inset 0 1px 0 rgba(255,255,255,.55); }
}
@media (prefers-reduced-motion: reduce) { #btn-holder { animation: none; } }

/* the registry: wallet desk + resident preview */
#panel input.reg { width: 100%; padding: 8px 11px; border-radius: 10px; border: 1px solid #d9dce1;
  font: inherit; font-size: 13px; color: #374151; background: #fafbfc; outline: none; }
#panel input.reg:focus { border-color: #bcdcf2; background: #fff; }
#panel button.follow:disabled { opacity: .55; cursor: default; }
.reg-preview { display: flex; justify-content: center; margin: 6px 0 2px; }
.reg-preview img { width: 150px; height: 150px; border-radius: 16px; border: 1px solid #d4d7dc;
  background: linear-gradient(#c2e2f6, #eaf6fd); }

/* fortune pill after tossing a coin in the fountain */
#fortune { position: fixed; transform: translate(-50%, -100%); padding: 4px 12px;
  border-radius: 999px; background: linear-gradient(#ffffff, #eceef1); border: 1px solid #d4d7dc;
  box-shadow: 0 2px 8px rgba(60,70,90,.18), inset 0 1px 0 #fff; font-size: 12.5px;
  color: #4b5563; pointer-events: none; white-space: nowrap; opacity: 0;
  transition: opacity .3s, top .3s; }
#fortune.show { opacity: 1; animation: pop .14s ease-out; }

/* small screens: tighter chrome, full-width cards */
@media (max-width: 640px) {
  #logo { font-size: 14px; padding: 6px 13px; top: 12px; left: 12px; }
  #status-pill { font-size: 11px; padding: 5px 10px; top: 12px; right: 12px; }
  /* the hud drops into a thumb row just above the ticker */
  #hud-buttons { top: auto; right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(48px + env(safe-area-inset-bottom)); flex-direction: row; gap: 7px; }
  #hud-buttons button { width: 38px; height: 38px; font-size: 13px; }
  #btn-people { font-size: 8px; }
  #panel { left: 10px; right: 10px; max-width: none; top: 56px; font-size: 13px;
    max-height: calc(100dvh - 175px); overflow-y: auto; }
  #ticker { height: 38px; bottom: env(safe-area-inset-bottom); }
  #ticker-track a, #ticker-track span { font-size: 12px; }
  /* the registry pill hops above the thumb row */
  #btn-holder { right: 10px; bottom: calc(96px + env(safe-area-inset-bottom));
    font-size: 13px; padding: 9px 15px; }
  .bubble3d { max-width: 170px; font-size: 12px; }
  #curtain-tile { width: 200px; height: 128px; }
}
button { touch-action: manipulation; }

/* speech bubbles over the plaza */
#bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bubble3d { position: absolute; transform: translate(-50%, -100%); max-width: 230px;
  background: rgba(255,255,255,.97); border: 1.5px solid #d5d8dd; border-radius: 12px;
  padding: 8px 11px; font-size: 13px; line-height: 1.35; color: #1f2937;
  filter: drop-shadow(0 3px 5px rgba(50,60,80,.16)); }
.bubble3d::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -6px;
  border: 6px solid transparent; border-top-color: rgba(255,255,255,.97); border-bottom: none;
  border-top-width: 8px; }

/* the group-photo camera flash */
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
  z-index: 60;
}
#flash.show { opacity: 0.85; }

/* the little quote-card button beside overheard lines */
button.qc {
  border: none;
  background: #eef4f8;
  color: #46b8de;
  border-radius: 8px;
  padding: 0 7px;
  margin-left: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 20px;
}
button.qc:hover { background: #dcedf6; }

/* the walk-with-them button on a resident's card */
#panel button.follow { border: 1px solid #bcdcf2; background: #eef6fc; color: #2f86c8;
  border-radius: 999px; padding: 5px 14px; cursor: pointer; font: inherit; font-size: 13px; }
#panel button.follow:hover { background: #dcedf6; }

/* the wanted poster, pinned bottom left */
#poster {
  position: fixed;
  left: 14px;
  bottom: 64px;
  width: 168px;
  background: #fdf8ec;
  border: 1px solid #e2d8bd;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(70, 80, 100, 0.22);
  padding: 12px 14px;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  color: #4b5563;
  transform: translateX(-220px) rotate(-3deg);
  transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
  z-index: 40;
  pointer-events: none;
}
#poster.show { transform: translateX(0) rotate(-3deg); }
#poster b { font-size: 11px; letter-spacing: 1px; color: #a08c5a; display: block; }
#poster h4 { margin: 4px 0 2px; font-size: 20px; color: #3f4652; }
#poster small { color: #94a0ad; display: block; margin-bottom: 6px; }
#poster i { font-size: 11px; color: #94a0ad; }
#poster.won { background: #eefbe8; border-color: #bfe0ad; }
#poster.gone { background: #f4f0ea; }

/* the stamp book in the diary */
.stamp-h { margin: 14px 0 6px; font-size: 14px; }
.stamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 20px;
  color: #cfd6dd;
  text-align: center;
}
.stamp.got { color: #46b8de; }
.stamp small { font-size: 9px; line-height: 1.2; color: #94a0ad; }