/* The board fills the whole screen. The canvas is never resized by the controls, which float above it. The camera (zoom and move) is a CSS transform. */
html, body { margin: 0; height: 100%; background: #1b1d1f; color: #fff; font: 15px/1.35 system-ui, sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
#stage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow: hidden; }
body.flipped #stage { transform: rotate(180deg); }          /* the student's rotate button: the board turned round (js/camera.js turns the pointer round to match) */
canvas#board { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; touch-action: none; transform-origin: 0 0; will-change: transform; }

/* NOTIFICATIONS, at the top of the screen. Amber bar = where the selected car is. Blue = guidance, red = a mistake or refusal, green = good news. */
#notices { position: fixed; z-index: 25; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: min(380px, calc(100vw - 400px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.notice { box-sizing: border-box; padding: 10px 14px; border-radius: 16px; background: rgba(16, 23, 43, .92); border: 1px solid rgba(255, 255, 255, .18); border-left: 6px solid #5c8dff;
  color: #fff; font-size: 15px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: drop .3s cubic-bezier(.2, .9, .3, 1.1); }
.notice.where { border-left-color: #fdc20f; display: flex; align-items: flex-start; gap: 10px; }
.notice.where b { display: block; text-transform: capitalize; }
.notice.where span { opacity: .92; }
.notice.bad, .notice.incorrect { border-left-color: #ff6b5e; }
.notice.good { border-left-color: #5ed08a; }
.dot { display: inline-block; flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: #888; border: 2px solid rgba(255, 255, 255, .85); box-sizing: border-box; }
@keyframes drop { from { transform: translateY(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (orientation: landscape) { body.right-open #notices { right: calc(max(10px, env(safe-area-inset-right)) + var(--panel-used, 340px) + 12px); width: min(380px, calc(100vw - var(--panel-used, 340px) - 190px)); } }          /* the notifications make way for whichever card is open on the right */   /* the notifications make way for the controls */
@media (orientation: portrait) { #notices { left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto; top: calc(max(10px, env(safe-area-inset-top)) + var(--toolbar-h, 58px)); } }
@media (max-height: 520px) { .notice { font-size: 13.5px; padding: 8px 12px; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .notice { animation: none; } }