/* Toy-Brick Alpine Village: Golden Hour Light Studio. Layout + panels after the Figma frames "GH ·" (01-08). Kit tokens (--kit-*) come from kit/kit_ui.css */
:root { --bg: #151a24; --panel: rgba(21, 26, 36, .94); --glass: rgba(24, 27, 34, .72); --text: #f4f1ea; --soft: #c9c4b8; --mute: #8d93a3; --amber: #f5a623; --blue: #2f6bff; --good: #3ecf8e; --bad: #ff6a5c; --line: rgba(255, 255, 255, .14); --tile: rgba(255, 255, 255, .05); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; overflow: hidden; }
body.embed-mode, body.embed-mode #app { height: 100vh; height: 100dvh; }
#app { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#c:focus-visible { box-shadow: inset 0 0 0 3px var(--kit-warn); }
button { font-family: inherit; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--kit-warn); outline-offset: 2px; }
.pill { background: rgba(8, 11, 18, .82); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font: 600 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--good); }
#tc { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 8; display: flex; gap: 8px; align-items: center; }
#fpsb { pointer-events: none; } #fpsb.hide { display: none; } .pill.btn { color: var(--text); cursor: pointer; min-height: 32px; } .pill.btn:hover { border-color: var(--amber); }
body.m-photo #shotPill, body.m-photo #sciPill { display: none; }
/* categories (glass panel, 11 rows) */
#cats { position: absolute; left: 14px; top: 14px; width: 190px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 8px; display: flex; flex-direction: column; gap: 5px; z-index: 9; max-height: calc(100% - 28px); overflow: auto; }
.cat { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 10px 4px 6px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .07); color: var(--text); font: 600 14px Inter, sans-serif; cursor: pointer; text-align: left; }
.cat .ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 17px; flex: 0 0 auto; }
.cat.on { background: var(--blue); border-color: #7da1ff; } .cat.on .ic { background: rgba(255, 255, 255, .3); }
.cat:disabled { opacity: .45; cursor: default; }
#fly { position: absolute; left: 204px; top: 14px; width: 246px; max-height: calc(100% - 28px); overflow: auto; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 18px; padding: 10px; z-index: 9; display: flex; flex-direction: column; gap: 8px; }
#fly[hidden] { display: none; }
#fly h3 { margin: 0; font-size: 13px; color: var(--soft); letter-spacing: .04em; text-transform: uppercase; }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.slot { min-height: 58px; border-radius: 12px; border: 1px solid var(--line); background: var(--tile); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px; font: 600 11px Inter, sans-serif; text-align: center; }
.slot .ic { font-size: 20px; line-height: 1; } .slot.on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue) inset; background: rgba(47, 107, 255, .18); }
.tools { display: flex; flex-wrap: wrap; gap: 4px; } .tools .kit-btn { min-height: 38px; padding: 4px 9px; font-size: 12px; }
#fly .rw { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); }
#fly input[type=range] { width: 120px; accent-color: var(--amber); }
.kit-colours { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.kit-col { aspect-ratio: 1; min-width: 20px; border-radius: 6px; border: 2px solid rgba(0, 0, 0, .35); cursor: pointer; } .kit-col.on { outline: 3px solid #fff; outline-offset: 1px; }
/* toolbar */
#tb { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; z-index: 9; }
#tb .grp { display: flex; gap: 6px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; padding: 6px; }
#tb .tbtn { width: 48px; height: 48px; min-width: 44px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: var(--text); font-size: 21px; cursor: pointer; display: grid; place-items: center; }
#tb .tbtn.on { background: rgba(245, 166, 35, .22); border-color: var(--amber); } #tb .tbtn:disabled { opacity: .4; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(10px); z-index: 11; font-size: 13px; }
.panel[hidden] { display: none; }
#tbar { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); width: 340px; padding: 8px 14px 10px; z-index: 8; } .tbr { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .tbr b { font-size: 22px; color: #ffe9b8; } body.m-photo #tbar { display: none; } body.p-sun #tbar { display: none; }
.gtip { position: fixed; pointer-events: none; z-index: 30; padding: 4px 10px; border-radius: 999px; font: 700 12px Inter, sans-serif; background: var(--good); color: #05160d; white-space: nowrap; } .gtip.bad { background: var(--bad); color: #fff; } .gtip[hidden] { display: none; }
#layers { position: absolute; right: 14px; top: 76px; width: 200px; padding: 12px; z-index: 12; } #layers .rw { display: flex; gap: 8px; align-items: center; min-height: 34px; color: var(--soft); } #layers input { width: 20px; height: 20px; accent-color: var(--amber); }
.sheet header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .sheet h2 { margin: 0; font-size: 17px; } .sheet .sub { color: var(--mute); font-size: 12px; margin-top: 2px; }
.sheet .x { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--soft); font-size: 22px; cursor: pointer; }
#sunp { position: absolute; left: 464px; right: 14px; bottom: 14px; padding: 14px 18px; }
.timebig { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; } .timebig b { font-size: 34px; color: #ffe9b8; letter-spacing: -.01em; }
.badge { background: var(--amber); color: #20160a; font-weight: 700; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }
.lbl { display: flex; justify-content: space-between; color: var(--soft); font-size: 12.5px; margin: 8px 0 2px; } .lbl output { font-family: 'JetBrains Mono', monospace; color: #ffe9b8; }
input[type=range] { width: 100%; min-height: 30px; accent-color: var(--amber); }
input.tl { appearance: none; -webkit-appearance: none; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #0c1030 0%, #3a4b8c 22%, #f6c86a 32%, #fff3d6 50%, #f6c86a 68%, #f58b3a 80%, #3b3f78 90%, #0c1030 100%); }
input.tl::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); } input.tl::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .seg button { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--text); font: 600 12px Inter, sans-serif; cursor: pointer; } .seg button.on { background: var(--amber); color: #20160a; border-color: var(--amber); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; } .tile { border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; background: var(--tile); min-width: 0; } .tile small { display: block; color: var(--mute); font-size: 11px; } .tile b { font-size: 17px; color: #ffe9b8; white-space: nowrap; } .tile b.good { color: var(--good); } .tile b.bad { color: var(--bad); } .tile b.warn { color: var(--amber); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .kit-btn.pri { background: var(--amber); color: #20160a; border-color: var(--amber); } .kit-btn.mini { min-height: 32px; min-width: 40px; padding: 2px 8px; }
#dash { position: absolute; right: 14px; top: 76px; width: 392px; max-height: calc(100% - 90px); overflow: auto; padding: 16px; }
#dArc { width: 100%; height: auto; display: block; margin: 6px 0; } #dArc text { fill: var(--soft); font: 11px Inter, sans-serif; }
.note { color: var(--mute); font-size: 12px; margin: 6px 0; }
#camp { position: absolute; right: 14px; top: 14px; width: 364px; max-height: calc(100% - 28px); overflow: auto; padding: 16px; }
.sl { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; margin: 3px 0; } .sl label { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--soft); font-size: 12.5px; } .sl output { color: #ffe9b8; font-family: 'JetBrains Mono', monospace; } .sl input { grid-column: 1; } .sl:not(:has(button)) input { grid-column: 1 / -1; }
#hist { width: 100%; height: 64px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, .25); margin: 4px 0; }
#shotp { position: absolute; right: 14px; top: 76px; width: 364px; max-height: calc(100% - 90px); overflow: auto; padding: 16px; }
.prog { display: flex; align-items: center; gap: 10px; color: var(--soft); margin: 8px 0; } .prog i { flex: 1; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .12); overflow: hidden; } .prog u { display: block; height: 100%; background: var(--amber); width: 0; }
#shotL { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; } #shotL li { border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; background: var(--tile); cursor: pointer; } #shotL li.act { border-color: var(--amber); } #shotL li .n { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-size: 12px; } #shotL li.done .n { background: var(--good); color: #05160d; } #shotL li small { grid-column: 2 / -1; color: var(--mute); font-size: 11.5px; line-height: 1.35; display: none; } #shotL li.act small { display: block; }
.stars { font-size: 15px; letter-spacing: 1px; color: #ffc94a; } .stars .off { color: #555a66; }
/* viewfinder (photo mode) */
#vf { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 6; } body.m-photo #vf { display: block; }
#vf .cn { position: absolute; width: 36px; height: 36px; border: 0 solid #fff; } #vf .tl { left: 40px; top: 40px; border-width: 3px 0 0 3px; } #vf .tr { right: 40px; top: 40px; border-width: 3px 3px 0 0; } #vf .bl { left: 40px; bottom: 40px; border-width: 0 0 3px 3px; } #vf .br { right: 40px; bottom: 40px; border-width: 0 3px 3px 0; }
#vf .g3 { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33.2%, rgba(255, 255, 255, .5) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, .5) 66.6%, transparent 66.8%), linear-gradient(0deg, transparent 33.2%, rgba(255, 255, 255, .5) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, .5) 66.6%, transparent 66.8%); }
#focusbox { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid var(--amber); }
#chips { position: absolute; left: 62px; top: 18px; display: flex; gap: 6px; } #chips span { background: rgba(8, 11, 18, .85); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: 700 13px Inter, sans-serif; }
body.m-photo #cats, body.m-photo #fly, body.m-photo #tb { display: none; } body.m-photo #chips { left: 62px; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 40; transition: opacity .35s; } #flash.on { opacity: .85; transition: none; }
#live { position: absolute; left: -9999px; }
#load { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); font-size: 15px; z-index: 50; text-align: center; padding: 20px; }
.spin { width: 34px; height: 34px; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--amber); border-radius: 50%; margin: 0 auto 12px; animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg); } }
#dlg { position: fixed; inset: 0; background: rgba(8, 10, 16, .66); z-index: 80; display: grid; place-items: center; padding: 14px; } #dlg[hidden] { display: none; }
#dlg .card { position: relative; width: min(700px, 100%); max-height: calc(100dvh - 28px); overflow: auto; background: #1b1e27; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; font-size: 14px; line-height: 1.5; }
#dlg h2 { margin: 0 0 10px; font-size: 18px; } #dlg h3 { margin: 12px 0 4px; font-size: 14px; } #dlg .x { position: absolute; right: 10px; top: 8px; width: 44px; height: 44px; background: none; border: 0; color: var(--soft); font-size: 26px; cursor: pointer; }
#dlg details { border: 1px solid var(--line); border-radius: 10px; margin: 6px 0; padding: 6px 10px; } #dlg summary { cursor: pointer; font-weight: 700; min-height: 30px; display: flex; align-items: center; }
#dlg code, #dlg .eq { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 5px; } #dlg .eq { display: block; padding: 6px 10px; margin: 6px 0; overflow-x: auto; }
#dlg table { border-collapse: collapse; width: 100%; font-size: 12.5px; } #dlg td, #dlg th { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; } #dlg .pass { color: var(--good); } #dlg .fail { color: var(--bad); } #dlg .note { color: var(--soft); }
#dlg .photo img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; } #dlg .photo dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; margin: 10px 0; } #dlg .photo dt { color: var(--mute); } #dlg .photo dd { margin: 0; font-family: 'JetBrains Mono', monospace; }
.tour { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(430px, calc(100% - 24px)); background: #1b1e27; border: 2px solid var(--amber); border-radius: 14px; padding: 12px 14px; z-index: 70; font-size: 14px; }
.kit-toast { z-index: 90; }
@media (max-width: 640px) {
  #tbar { display: none; }
  #cats { left: 6px; right: 6px; top: auto; bottom: 6px; width: auto; flex-direction: row; overflow-x: auto; padding: 6px; border-radius: 16px; max-height: none; scrollbar-width: none; }
  .cat { flex: 0 0 auto; min-width: 88px; padding: 4px 8px 4px 5px; font-size: 12.5px; } .cat .ic { width: 26px; height: 26px; font-size: 15px; }
  #fly { left: 6px; right: 6px; top: auto; bottom: 66px; width: auto; max-height: 36dvh; } .slots { grid-template-columns: repeat(4, 1fr); }
  #tb { right: 6px; top: 8px; } #tb .tbtn { width: 42px; height: 42px; font-size: 18px; } #tb .grp { padding: 4px; gap: 4px; }
  #tc { left: 6px; top: 60px; transform: none; gap: 6px; } #tc .pill { font-size: 11px; padding: 4px 10px; }
  .sheet, #sunp, #dash, #camp, #shotp { left: 6px !important; right: 6px !important; top: auto !important; bottom: 6px !important; width: auto !important; transform: none !important; max-height: 56dvh !important; border-radius: 18px; padding: 12px 14px; }
  #layers { top: 58px; right: 6px; } .timebig b { font-size: 26px; } .two { grid-template-columns: 1fr; gap: 4px; } .tile b { font-size: 15px; }
  #vf .cn { width: 26px; height: 26px; } #vf .tl { left: 16px; top: 54px; } #vf .tr { right: 16px; top: 54px; } #vf .bl { left: 16px; bottom: 16px; } #vf .br { right: 16px; bottom: 16px; } #chips { left: 8px; top: 48px; gap: 4px; flex-wrap: wrap; width: 260px; } #chips span { padding: 3px 8px; font-size: 11px; }
  .tour { bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } #flash { transition: none; } }