/* The loading screen's scenes (loading.js), inside #boot (web_shell.html). Sizes are in cqmin:
   #boot is a size container, so everything scales with the screen, wide or upright. */
#boot {
  --ld-text: #e8dcc4; --ld-dim: #a39079; --ld-green: #a6d86e; --ld-gold: #e8b44a;
  --ld-light: #e9d3a8; --ld-dark: #a9774b; --ld-wood: #5a3a22;
  container-type: size; color: var(--ld-text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#boot .ld { position: absolute; inset: 0; overflow: hidden; }
#boot img { -webkit-user-drag: none; user-select: none; }

/* before a scene is up (and if loading.js never comes): the logo and "loading…" */
#boot .ld-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqmin; }
#boot .ld-fallback .mark { height: min(36vh, 62vw); image-rendering: pixelated; }
#boot .ld-fallback .word { width: min(47vh, 80vw); image-rendering: pixelated; }

#boot .scr { position: absolute; inset: 0; padding-bottom: 7cqmin; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqmin; }
#boot .logo { display: flex; flex-direction: column; align-items: center; gap: 1cqmin; position: relative; z-index: 2; }
#boot .logo .mark { height: var(--mark, 18cqmin); image-rendering: pixelated; }
#boot .logo .word { width: var(--word, 34cqmin); image-rendering: pixelated; }
#boot .status3 { font-weight: 600; font-size: 2.6cqmin; }
/* "loading…" on every scene, in the same place */
#boot .lw { position: absolute; left: 0; right: 0; bottom: 3cqmin; text-align: center; font-size: 2.5cqmin; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ld-text); opacity: 0.8; z-index: 5; pointer-events: none; text-shadow: 0.2cqmin 0.2cqmin 0 #0b0806; }
#boot .lw i { display: inline-block; width: 1.6em; text-align: left; font-style: normal; }
@container (aspect-ratio < 1) { #boot .lw { font-size: 3.8cqmin; bottom: 6cqmin; } #boot .scr { padding-bottom: 12cqmin; } }

/* the game's board, from its own piece pictures */
#boot .board { position: relative; width: var(--bw, 50cqmin); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr);
  box-shadow: 0 0 0 1.1cqmin var(--ld-wood), 0 2.4cqmin 4cqmin rgba(0, 0, 0, 0.55); }
#boot .board .sq { position: relative; }
#boot .board .sq.l { background: var(--ld-light); }
#boot .board .sq.d { background: var(--ld-dark); }
#boot .board .sq.hl::after { content: ""; position: absolute; inset: 0; background: rgba(166, 216, 110, 0.48); }
#boot .board .sq.sel::after { content: ""; position: absolute; inset: 0; background: rgba(232, 180, 74, 0.6); }
#boot .board .sq.mate::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(224, 87, 63, 0.95), rgba(224, 87, 63, 0.25) 70%); animation: ld-matepulse 0.9s ease-in-out infinite alternate; }
@keyframes ld-matepulse { from { opacity: 0.55; } to { opacity: 1; } }
#boot .board .layer { position: absolute; inset: 0; pointer-events: none; }
#boot .board .pc { position: absolute; width: 12.5%; height: 12.5%; object-fit: contain; padding: 0.4%; box-sizing: border-box;
  transition: left 0.42s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.42s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s, transform 0.3s; }
#boot .board .pc.gone { opacity: 0; transform: scale(0.4); }

/* famous games */
#boot .famous { --mark: 11cqmin; --word: 26cqmin; --bw: 52cqmin; gap: 2.4cqmin; }
#boot .famous .cap { display: flex; flex-direction: column; align-items: center; gap: 0.3cqmin; z-index: 2; }
#boot .famous .gname { font-size: 2.4cqmin; font-weight: 700; color: var(--ld-gold); letter-spacing: 0.08em; text-transform: uppercase; }
#boot .famous .mv { font-size: 4.2cqmin; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1.2em; }
#boot .famous .mv.mate { color: var(--ld-green); }
#boot .famous .who { font-size: 2.1cqmin; color: var(--ld-dim); }
#boot .famous .glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(232, 180, 74, 0.12), transparent 60%); }
@container (aspect-ratio < 1) { #boot .famous { --bw: 86cqmin; --mark: 20cqmin; --word: 54cqmin; } #boot .famous .mv { font-size: 7cqmin; } #boot .famous .who { font-size: 3.4cqmin; } #boot .famous .gname { font-size: 4cqmin; } }

/* knight's tour: the classic numbered board */
#boot .tour { --bw: 64cqmin; gap: 2.4cqmin; --word: 28cqmin; }
#boot .tour .board .sq b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6cqmin; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.4s, color 0.4s; }
#boot .tour .board .sq.l b { color: #6b4a2b; }
#boot .tour .board .sq.d b { color: #f2e3c4; }
#boot .tour .board .sq.v b { opacity: 0.85; }
#boot .tour .board .sq.v::before { content: ""; position: absolute; inset: 0; background: rgba(126, 186, 72, 0.22); }
#boot .tour .board .sq.new::before { background: rgba(126, 186, 72, 0.55); }
#boot .tour svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#boot .tour .kn { position: absolute; width: 12.5%; height: 12.5%; transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1), top 0.38s cubic-bezier(0.4, 0, 0.2, 1); z-index: 3; }
#boot .tour .kn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.8cqmin 0.6cqmin rgba(0,0,0,0.6)); }
#boot .tour .kn.hop img { animation: ld-hop 0.38s ease-out; }
@keyframes ld-hop { 45% { transform: translateY(-38%) scale(1.12); } }
#boot .tour .cap { font-size: 2.4cqmin; color: var(--ld-dim); }
#boot .tour .cap.done { color: var(--ld-green); font-weight: 700; }
@container (aspect-ratio < 1) { #boot .tour { --bw: 90cqmin; --word: 56cqmin; } #boot .tour .board .sq b { font-size: 3.6cqmin; } #boot .tour .cap { font-size: 3.6cqmin; } }

/* the board sets itself (isometric, as the logo's tile) */
#boot .iso canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#boot .iso .pcs { position: absolute; inset: 0; pointer-events: none; }
#boot .iso .ip { position: absolute; transform: translate(-50%, -100%); }
#boot .iso .ip.drop { animation: ld-drop 0.55s cubic-bezier(0.3, 0, 0.5, 1); }
@keyframes ld-drop { 0% { transform: translate(-50%, -100%) translateY(-40cqmin); opacity: 0; } 55% { opacity: 1; } 70% { transform: translate(-50%, -100%) scaleY(0.88); } 85% { transform: translate(-50%, -100%) translateY(-1.6cqmin); } 100% { transform: translate(-50%, -100%); } }
#boot .iso .top { position: absolute; left: 0; right: 0; top: 5cqmin; display: flex; justify-content: center; --word: 40cqmin; }
#boot .iso .fin { position: absolute; left: 0; right: 0; bottom: 9cqmin; text-align: center; font-size: 3cqmin; font-weight: 700; color: var(--ld-green); letter-spacing: 0.08em; }
@container (aspect-ratio < 1) { #boot .iso .top { top: 14cqmin; --word: 70cqmin; } #boot .iso .fin { bottom: 18cqmin; font-size: 5cqmin; } }

/* living key art */
#boot .art .scene { position: absolute; inset: -4%; background: center / cover no-repeat; opacity: 0; transition: opacity 1.6s ease; }
#boot .art .scene.on { opacity: 1; }
#boot .art .dark { position: absolute; inset: 0; background: #0b0806; pointer-events: none; }
#boot .art .veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 10, 8, 0.9) 0%, rgba(14, 10, 8, 0.3) 34%, rgba(14, 10, 8, 0) 55%),
    radial-gradient(ellipse at 50% 58%, rgba(14, 10, 8, 0.15) 0%, rgba(14, 10, 8, 0.55) 62%, rgba(14, 10, 8, 0.9) 100%); }
#boot .art .torch { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 50, 0.22), transparent 60%); mix-blend-mode: screen; }
#boot .art canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#boot .art .scr { --mark: 26cqmin; --word: 48cqmin; gap: 1.6cqmin; }
#boot .fillmark { position: relative; height: var(--mark); aspect-ratio: 1; z-index: 2; }
#boot .fillmark img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#boot .fillmark .dim { filter: brightness(0.32) saturate(0.35); }
#boot .fillmark .lit { clip-path: inset(var(--cut, 100%) 0 0 0); filter: drop-shadow(0 0 1.4cqmin rgba(255, 190, 90, 0.55)); }
#boot .fillmark .edge { position: absolute; left: 22%; right: 22%; height: 1.2cqmin; top: var(--cut, 100%); margin-top: -0.6cqmin;
  background: radial-gradient(ellipse, rgba(255, 236, 170, 0.95), rgba(255, 170, 60, 0.35) 55%, transparent 75%); filter: blur(0.3cqmin); }
#boot .art .word { width: var(--word); image-rendering: pixelated; position: relative; z-index: 2; }
@container (aspect-ratio < 1) { #boot .art .scr { --mark: 48cqmin; --word: 76cqmin; } }

/* puzzles while you wait */
#boot .puz { --bw: 54cqmin; gap: 2.2cqmin; --word: 22cqmin; }
#boot .puz .ask { font-size: 3cqmin; font-weight: 700; display: flex; gap: 1.4ch; align-items: baseline; }
#boot .puz .ask small { color: var(--ld-dim); font-weight: 600; font-size: 0.8em; }
#boot .puz .board { pointer-events: auto; cursor: pointer; touch-action: manipulation; }
#boot .puz .board.shake { animation: ld-shake 0.35s; }
@keyframes ld-shake { 20% { transform: translateX(-1.2cqmin); } 40% { transform: translateX(1.2cqmin); } 60% { transform: translateX(-0.8cqmin); } 80% { transform: translateX(0.6cqmin); } }
#boot .puz .say { font-size: 2.5cqmin; color: var(--ld-dim); min-height: 1.4em; text-align: center; }
#boot .puz .say.good { color: var(--ld-green); font-weight: 700; }
@container (aspect-ratio < 1) { #boot .puz { --bw: 88cqmin; --word: 50cqmin; } #boot .puz .ask { font-size: 4.6cqmin; flex-direction: column; align-items: center; gap: 0.6cqmin; } #boot .puz .say { font-size: 3.8cqmin; } }

/* pawn to queen (2D) */
#boot .march { gap: 5cqmin; }
#boot .march .lane { position: relative; width: var(--lw, 84cqmin); aspect-ratio: 8 / 1; display: grid; grid-template-columns: repeat(8, 1fr); box-shadow: 0 0 0 1cqmin var(--ld-wood), 0 2.4cqmin 4cqmin rgba(0,0,0,0.55); }
#boot .march .lane > i { display: block; }
#boot .march .lane > i:nth-child(odd) { background: var(--ld-dark); }
#boot .march .lane > i:nth-child(even) { background: var(--ld-light); }
#boot .march .lane > i.past { box-shadow: inset 0 0 0 100cqmin rgba(166, 216, 110, 0.32); }
#boot .march .lane > i:nth-child(8) { box-shadow: inset 0 0 0 0.5cqmin var(--ld-gold); }
#boot .march .walker { position: absolute; top: -40%; width: 12.5%; height: 140%; transition: left 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
#boot .march .walker img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; transition: opacity 0.35s, transform 0.35s; filter: drop-shadow(0 0.8cqmin 0.6cqmin rgba(0,0,0,0.55)); }
#boot .march .walker img.p { animation: ld-idle 1.6s ease-in-out infinite; }
@keyframes ld-idle { 50% { transform: translateY(-3%); } }
#boot .march .walker .q { opacity: 0; transform: scale(0.5); }
#boot .march .walker.promoted .p { opacity: 0; transform: scale(1.4); animation: none; }
#boot .march .walker.promoted .q { opacity: 1; transform: scale(1); }
#boot .march .burst { position: absolute; left: 50%; top: 55%; width: 300%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.2); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.85), rgba(232, 180, 74, 0.25) 40%, transparent 65%); opacity: 0; pointer-events: none; }
#boot .march .walker.promoted .burst { animation: ld-burst 0.9s ease-out forwards; }
@keyframes ld-burst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
#boot .march .cap { font-size: 3cqmin; font-weight: 700; min-height: 1.3em; font-variant-numeric: tabular-nums; }
#boot .march .cap.done { color: var(--ld-gold); }
@container (aspect-ratio < 1) { #boot .march { --lw: 92cqmin; --mark: 30cqmin; --word: 64cqmin; } #boot .march .cap { font-size: 5cqmin; } }

/* 3D: the words over the scene */
#boot .ov-top { position: absolute; left: 0; right: 0; top: 5cqmin; display: flex; justify-content: center; --mark: 12cqmin; --word: 30cqmin; pointer-events: none; }
#boot .ov-bot { position: absolute; left: 0; right: 0; bottom: 9cqmin; display: flex; flex-direction: column; align-items: center; gap: 0.6cqmin; pointer-events: none; text-shadow: 0.2cqmin 0.2cqmin 0 #0b0806; }
#boot .who3 { font-size: 2.6cqmin; color: var(--ld-dim); min-height: 1.3em; }
#boot .who3.in { color: var(--ld-green); font-weight: 700; font-size: 3cqmin; }
@container (aspect-ratio < 1) { #boot .ov-top { top: 12cqmin; --mark: 24cqmin; --word: 64cqmin; } #boot .ov-bot { bottom: 16cqmin; } #boot .who3 { font-size: 4cqmin; } #boot .who3.in { font-size: 4.8cqmin; } }

@media (prefers-reduced-motion: reduce) {
  #boot .art .scene { transition: opacity 0.4s; }
  #boot .tour .kn.hop img, #boot .iso .ip.drop, #boot .march .walker img.p { animation: none; }
}