/* CONTROLS and CARS: two separate floating cards, each with its own button. Both float above the board and never change its size.
   Built for fingers first: big targets, no scrolling, everything for a decision visible at once. JS sets --cols and --rowh so that every choice fits. */
button { font: inherit; color: #fff; background: #12295c; border: 2px solid #3b4a6b; border-radius: 12px; min-height: 44px; padding: 6px 12px; cursor: pointer; touch-action: manipulation; }
button:active:not(:disabled) { background: #1b3a80; }
button:disabled { opacity: .4; cursor: default; }
p { margin: 0 0 8px; }

/* the two buttons that open the cards */
.fab { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 18px 8px 14px; min-height: 48px; font-weight: 700; font-size: 16px;
  background: rgba(18, 41, 92, .95); border-color: rgba(255, 255, 255, .28); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.fab b { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: #fdc20f; color: #111; }
#dock { position: fixed; z-index: 20; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
body.panel-open #dock, body.route-open #dock { display: none; }
body.route-away #dock { display: inline-flex; }          /* the routes are hidden: this brings them back */
#route .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .x-btn.wide { width: auto; min-width: 64px; padding: 0 14px; font-size: 14px; font-weight: 700; }

/* a card */
.card { position: fixed; z-index: 30; box-sizing: border-box; padding: 10px 12px 12px; color: #fff; background: rgba(14, 22, 45, .95); border: 1px solid rgba(255, 255, 255, .16); border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: rise .25s ease; }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 6px; font-size: 17px; }
.card-head strong { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.x-btn { flex: none; width: 40px; min-height: 40px; height: 40px; padding: 0; font-size: 24px; line-height: 1; border-radius: 999px; }

/* CARS card: top left */
#carsCard { right: max(10px, env(safe-area-inset-right)); top: var(--panel-top, 10px); width: min(340px, calc(100vw - 20px)); }
body.dragging #carsCard { opacity: 0; pointer-events: none; transition: opacity .12s; }       /* the card steps aside while a car is carried to the board */
#trayRow, #trayRowB { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
#tray, #trayB { flex: none; width: 76px; height: 126px; touch-action: none; cursor: grab; background: #17224a; border: 2px dashed #5c8dff; border-radius: 14px; }
#tray.empty, #trayB.empty { cursor: default; border-color: #3b4a6b; opacity: .5; }
#trayText, #trayTextB { margin: 0; font-size: 15px; }
#carList { display: flex; flex-wrap: wrap; gap: 8px; }
.carchip { display: inline-flex; border-radius: 12px; overflow: hidden; border: 2px solid transparent; }
.carchip.on { border-color: #fff; box-shadow: 0 0 0 2px #fdc20f; }
.carchip.blk { border-color: #5a6272; } .carchip .lbl { display: inline-flex; align-items: center; padding: 4px 12px; min-height: 44px; font-weight: 700; background: #2d3340; color: #fff; }
.carchip button { border: 0; border-radius: 0; min-height: 44px; font-weight: 700; text-transform: capitalize; }
.carchip .pick { padding: 4px 12px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.carchip .rm { width: 40px; padding: 0; font-size: 20px; background: rgba(0, 0, 0, .45); }

/* CONTROLS card: right side. JS sets --panel-top (below the notifications), --panel-w, --cols, --rowh. */
#panel, #route { right: max(10px, env(safe-area-inset-right)); top: var(--panel-top, 10px); width: var(--panel-w, 340px); overflow: hidden; }
#route { overflow-y: auto; }          /* if a very small screen still cannot show every route at once, the rest can be scrolled to; nothing is ever cut off for good */
.low { top: calc(var(--toolbar-h, 58px) + 2px) !important; }          /* a wide route panel stands below the toolbar */
#optHead { margin: 0 0 8px; font-size: 14px; opacity: .85; }
#optHead:empty { display: none; }
.grid { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-auto-rows: var(--rowh, 48px); gap: var(--gap, 8px); }
.grid button { min-height: 0; padding: 4px 10px; font-size: var(--fs, 15px); font-weight: 600; line-height: 1.18; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.grid button.soft { opacity: .72; border-style: dashed; }                                  /* a move the rules refuse: shown on the student side (and while teaching with Invalid moves on), still tappable, it says why */
.grid button.row { display: grid; grid-template-columns: 30px 64px 1fr; gap: 6px; text-align: left; justify-content: stretch; } .grid button.row span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid button.row.stack { grid-template-columns: 26px 1fr; line-height: 1.15; } .grid button.row.stack span:last-child { white-space: normal; }
.grid .empty { grid-column: 1 / -1; display: flex; align-items: center; margin: 0; opacity: .85; }
#change { width: 100%; margin: 0 0 8px; min-height: 48px; background: #fdc20f; color: #111; border-color: #fdc20f; font-weight: 700; font-size: 16px; }
#change:disabled { background: #3b4a6b; color: #9aa6c3; border-color: #3b4a6b; opacity: 1; }
#route { z-index: 40; }

/* ZOOM buttons: bottom left */
#zoom { position: fixed; z-index: 15; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
body:not([data-page="class"]) #zrot { display: none; }          /* the rotate button is the student's only */
#zoom button { width: 46px; height: 46px; padding: 0; font-size: 24px; line-height: 1; border-radius: 14px; background: rgba(18, 41, 92, .92); border-color: rgba(255, 255, 255, .28); box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }

/* PHONES, UPRIGHT: the controls become a drawer at the bottom, the cars card stays at the top */
@media (orientation: portrait) {
  #panel, #route { left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 20px 20px 0 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  body.panel-open #zoom, body:has(#route:not([hidden])) #zoom { display: none; }
}
/* FINGERS: bigger everything */
@media (pointer: coarse) {
  .fab { min-height: 54px; font-size: 17px; }
  #zoom button { width: 54px; height: 54px; }
  .x-btn { width: 46px; height: 46px; min-height: 46px; }
  #tray, #trayB { width: 88px; height: 146px; }
  .carchip button { min-height: 48px; }
}
@media (max-height: 520px) and (orientation: landscape) { #tray, #trayB { width: 56px; height: 94px; } .card-head { min-height: 34px; margin-bottom: 2px; } #trayText { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
#colourDots { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; } .dotpick { width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); } .dotpick.on { border-color: #fff; box-shadow: 0 0 0 3px #fdc20f; } .dotpick:disabled { opacity: .3; }
@media (pointer: coarse) { .dotpick { width: 44px; height: 44px; min-height: 44px; } }
.grid button.back, button.back { background: transparent; border-style: dashed; font-weight: 600; }          /* changed my mind: back to the other options */

/* the routes on a phone on its side: a narrow card of small one-line buttons */
#route.compact { padding: 8px 10px 10px; } #route.compact .card-head { min-height: 30px; margin-bottom: 4px; } #route.compact .card-head strong { font-size: 15px; } #route.compact .x-btn { height: 32px; min-height: 32px; width: auto; padding: 0 12px; font-size: 13px; }
#route.compact .grid button.row.chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px 4px; min-height: 0; text-align: center; line-height: 1.15; } #route.compact .grid button.row.chip b { font-size: 12.5px; white-space: nowrap; } #route.compact .grid button.row.chip small { font-size: 11.5px; opacity: .9; white-space: nowrap; }
#panel.at-bottom, #route.at-bottom { top: auto !important; bottom: max(10px, env(safe-area-inset-bottom)); }
/* the student's route card, moved by hand (js/routedrag.js): it stands where it was put, and slides only to keep clear of a car */
#route .grip, #panel .grip { display: none; } #route.free .grip, #panel.free .grip { display: inline-block; margin-right: 8px; opacity: .7; font-size: 1.1em; line-height: 1; }
#route.free, #panel.free { left: var(--rx) !important; top: var(--ry) !important; right: auto !important; bottom: auto !important; transition: left .2s ease, top .2s ease; }
#route.free .card-head, #panel.free .card-head { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } #route.free.dragging, #panel.free.dragging { transition: none; } #route.free.dragging .card-head, #panel.free.dragging .card-head { cursor: grabbing; }

/* the zoom buttons fold away behind one small button (js/controls.js) */
#zoom.folded > button:not(#zfold) { display: none; }
#zfold { opacity: .85; } #zfold .z-shut, #zoom.folded #zfold .z-open { display: none; } #zoom.folded #zfold .z-shut { display: block; } #zfold svg { margin: auto; }
#route.free, #panel.free { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } #route.free.dragging, #panel.free.dragging { cursor: grabbing; } #route.free button, #panel.free button { cursor: pointer; }          /* the whole card can be dragged, not only its title bar (both sides) */
/* an inner card inside the options card: a group of choices that belong together (the minor road's lanes, the lane after a U-turn), title on top, the choices below */
#opts .optgroup { grid-column: 1 / -1; grid-row: span 2; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .22); }
#opts .og-title { flex: none; font-size: 13px; line-height: 1.1; font-weight: 800; letter-spacing: .03em; opacity: .9; padding: 0 2px; }
#opts .og-btns { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 6px; }
#opts .og-btns button { min-height: 0; height: 100%; font-size: var(--fs, 15px); padding: 4px 6px; }
.grid button.aux, button.aux { border-style: solid; border-color: rgba(253, 194, 15, .7); color: #fdc20f; }          /* Move precisely: the arrows instead of this card */

/* THE OPTIONS CARD ON A PHONE (the instructor, 23 Oct): Change Lane stands first, above the moves (a student reading the lane buttons of an inner card did not look for it at the
   bottom); the moves scroll with a finger when there are more than fit (the card is still moved by its other parts) */
#opts.scrolls { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#panel #change[hidden] { display: none; }
/* PICTURE BUTTONS (js/icons.js, 23 Oct): the move's arrow, a few words, a big lane number. Small, but every button is a fingertip high. */
.grid button.pic { display: flex; align-items: center; justify-content: flex-start; gap: 5px; padding: 4px 6px; text-align: left; font-size: var(--fs, 14.5px); font-weight: 700; line-height: 1.12; }
.grid button.pic .ic { flex: none; width: 20px; height: 20px; }
#opts .og-title { display: flex; align-items: center; gap: 5px; } #opts .og-title .ic { flex: none; }
.grid button.pic .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lnum { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 13px; background: #fdc20f; color: #111; font-size: 16px; font-weight: 900; line-height: 1; }
.grid button.pic.only-num { justify-content: center; padding: 2px; } .grid button.pic.only-num .lnum { min-width: 30px; height: 30px; font-size: 18px; }
#change.pic { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-bottom: 6px; font-size: 15px; }
#panel .card-head, #route .card-head { min-height: 36px; margin-bottom: 6px; }
.grid button.rpic { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 2px 6px 2px 14px; }
.grid button.rpic .rw { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1.1; } .grid button.rpic .rw small { font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: .95; }
.grid button.rpic .rn { position: absolute; top: 3px; left: 6px; font-style: normal; font-size: 11px; font-weight: 800; opacity: .7; }
.grid button.rpic .rt { flex: none; } .grid button.rpic .lnum { height: 22px; font-size: 13.5px; padding: 0 8px; }
#route.compact .grid button.rpic { padding: 2px 4px; }
/* THE CARS CARD SCROLLS (23 Oct): with many cars and blockers the list below the trays runs off a phone's screen; the card now scrolls with a finger (the trays still drag) */
#carsCard { max-height: calc(100dvh - var(--panel-top, 10px) - 10px); max-height: calc(100vh - var(--panel-top, 10px) - 10px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
@supports (height: 100dvh) { #carsCard { max-height: calc(100dvh - var(--panel-top, 10px) - 10px); } }