@font-face {
  font-family: "Chillpan Chalk";
  src: url("/chillpan/chalk-note.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #f2f0e6;
  --muted: rgba(242, 240, 230, 0.64);
  --chalk: #eeeadd;
  --tray-height: 70px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #123c34;
  color: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
}

.app-shell {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent 30%, rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, #1d5148, #153f37 72%, #123c34);
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 7px);
}

#chalkboard, #chalkDust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--tray-height));
  display: block;
  cursor: none;
  touch-action: none;
}

#chalkDust { z-index: 1; pointer-events: none; }

.board-motto {
  position: absolute;
  z-index: 2;
  top: calc(24px + env(safe-area-inset-top, 0px));
  left: calc(28px + env(safe-area-inset-left, 0px));
  max-width: calc(100% - 56px);
  margin: 0;
  font-family: "Chillpan Chalk", cursive;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  color: transparent;
  background: repeating-linear-gradient(174deg, #eee9d8 0 1px, #c5ceba 1px 1.6px, #e4e4d2 1.6px 3px);
  background-clip: text;
  -webkit-background-clip: text;
  opacity: 0.85;
  transform: rotate(-2deg);
  transform-origin: left center;
  pointer-events: none;
  user-select: none;
}

.chalk-tray {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tray-height);
  border-top: 1px solid #83988e;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #5b7067 0, #afbab3 2px, #455b51 5px, #64796e 12px, #87998c 34px, #bec7ba 35px, #718276 38px, #a4afa1 41px, #66766a 46px, #374a40 51px, #21372e 53px, #294037 100%);
  box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.13);
}

.chalk-tray::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(229, 238, 219, 0.42);
  pointer-events: none;
}

.board-controls {
  position: absolute;
  z-index: 4;
  bottom: calc(var(--tray-height) + 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
}

#roomSelect, .new-chalk, .feedback-button {
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(242, 240, 230, 0.2);
  border-radius: 5px;
  background: rgba(15, 41, 34, 0.92);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#roomSelect { width: 96px; color-scheme: dark; }
#roomSelect:focus-visible, .new-chalk:focus-visible, .feedback-button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.new-chalk:hover, .feedback-button:hover { background: #244d41; }
.feedback-button { display: grid; place-items: center; width: 40px; flex-shrink: 0; padding: 0; text-decoration: none; }

.new-chalk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.sound-toggle { display: flex; align-items: center; gap: 6px; min-height: 40px; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.sound-toggle input { width: 14px; height: 14px; margin: 0; accent-color: #a8d5be; cursor: pointer; }

.chalk-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--chalk); }

.chalk-cursor {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 15px;
  height: 94px;
  display: grid;
  place-items: start center;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) rotate(-45deg);
  transform-origin: top center;
  transition: opacity 160ms ease;
  will-change: transform;
}

.chalk-cursor.is-visible { opacity: 1; }
.chalk-cursor.is-spent { opacity: 0.42; }

.chalk-cursor span {
  width: 100%;
  height: 100%;
  min-height: 13px;
  border-radius: 3px 3px 8px 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.08) 10%, transparent 20%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 7px),
    var(--chalk);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.06), 0 5px 18px rgba(0, 0, 0, 0.22);
}

.notice {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--tray-height) + 88px);
  width: max-content;
  max-width: calc(100% - 40px);
  transform: translateX(-50%);
  padding: 8px 12px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
  text-align: center;
  opacity: 0.84;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.notice.is-hidden { opacity: 0; }

[data-chalk-kind="rainbow"] .chalk-cursor span,
[data-chalk-kind="rainbow"] .chalk-swatch {
  background: linear-gradient(180deg, #f28eaa, #f5ad7c 20%, #f1d46f 40%, #82d9ad 60%, #85bdf3 80%, #c6a0ee);
}

[data-chalk-kind="gold"] .chalk-cursor span {
  background: linear-gradient(90deg, #b18b34, #f5dc94 36%, #edc568 64%, #bc9236);
}

[data-chalk-kind="eraser"] .chalk-cursor span {
  min-height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #c6bea5 0 24%, #a89c7e 24% 38%, #4d5650 38% 72%, #7b8781 72% 100%);
  box-shadow: inset 0 -2px 0 #303b35, 0 3px 7px rgba(0, 0, 0, 0.25);
}

[data-chalk-kind="eraser"] .chalk-swatch { border-radius: 1px; background: #c6bea5; }

.notice.is-hidden-find {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.4em;
  row-gap: 3px;
  max-width: min(520px, calc(100% - 40px));
  bottom: calc(var(--tray-height) + 88px);
  padding: 18px 22px;
  border-radius: 6px;
  background: rgba(9, 29, 23, 0.94);
  border: 1px solid rgba(241, 212, 111, 0.7);
  box-shadow: 0 0 22px rgba(241, 212, 111, 0.2), 0 8px 28px rgba(0, 0, 0, 0.32);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.8;
  opacity: 1;
  text-shadow: 0 0 8px currentColor, 0 2px 3px #071c14;
}

.notice.is-hidden-find:not(.is-hidden) { animation: chalk-discovery 450ms ease-out both, chalk-glow 1800ms ease-in-out 450ms 4; }
.notice.is-hidden-find.is-hidden { opacity: 0; }

@keyframes chalk-glow {
  0%, 100% { box-shadow: 0 0 22px rgba(241, 212, 111, 0.2), 0 8px 28px rgba(0, 0, 0, 0.32); }
  50% { box-shadow: 0 0 34px rgba(241, 212, 111, 0.45), 0 0 58px rgba(130, 217, 173, 0.16); }
}

@keyframes chalk-discovery {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .notice.is-hidden-find:not(.is-hidden) { animation: none; }
}

@media (max-width: 760px) {
  :root { --tray-height: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .board-controls { gap: 8px; }
  #roomSelect { width: 80px; }
  .feedback-button { width: 36px; }
  .new-chalk { gap: 8px; padding: 0 10px; font-size: 11px; }
  .notice.is-hidden-find { font-size: 19px; padding: 14px 16px; }
  .board-motto { left: calc(18px + env(safe-area-inset-left, 0px)); top: calc(18px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 36px); font-size: 26px; }
}