/* Photo mode (owned by PHOTO): fx-photo.js + ui-photo.js. Broadcast slabs, clubhouse type. */

/* the rest of the UI steps aside while photo mode is on (and fades back on exit) */
body.photo-on > :not(#c):not(#photo):not(#conn) { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s var(--ease) !important; }
body.photo-out > :not(#c):not(#photo) { transition: opacity .5s var(--ease) !important; }

#photo { position: fixed; inset: 0; z-index: 60; pointer-events: none; color: var(--hud-ink); font-family: var(--f-body);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
#photo.on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease) .05s; }
#photo kbd { font: 600 10px/1 var(--f-cond); letter-spacing: .06em; padding: 3px 4px 2px; border: 1px solid currentColor; border-radius: 3px; opacity: .55; }
#photo button { font: inherit; color: inherit; }
#photo .ico { width: 18px; height: 18px; }

/* input layer: the game canvas never sees the mouse in photo mode */
.ph-layer { position: absolute; inset: 0; cursor: crosshair; }
#photo.on .ph-layer { pointer-events: auto; }
.ph-layer.drag { cursor: grabbing; }

/* framing: crop mask (one box-shadow), thirds grid, signature preview */
.ph-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; --u: 1; }
.ph-frame.crop { box-shadow: 0 0 0 200vmax rgba(4, 9, 7, .9); outline: 1px solid rgba(244, 238, 220, .22); }
.ph-grid { position: absolute; inset: 0; display: none; }
#photo.grid .ph-grid { display: block; }
.ph-grid::before, .ph-grid::after { content: ''; position: absolute; border: 0 solid rgba(244, 238, 220, .42); }
.ph-grid::before { top: 0; bottom: 0; left: 33.333%; right: 33.333%; border-left-width: 1px; border-right-width: 1px; }
.ph-grid::after { left: 0; right: 0; top: 33.333%; bottom: 33.333%; border-top-width: 1px; border-bottom-width: 1px; }
.ph-mark { position: absolute; right: calc(34px * var(--u)); bottom: calc(34px * var(--u) - 4px * var(--u)); display: none; text-align: right;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
#photo.mark .ph-mark { display: block; }
.ph-mark b { display: block; font: italic 500 calc(34px * var(--u))/1 var(--f-display); color: var(--ivory); padding-bottom: calc(9px * var(--u));
  background: linear-gradient(rgba(224, 187, 92, .85), rgba(224, 187, 92, .85)) right bottom / calc(46px * var(--u)) max(1px, calc(1.5px * var(--u))) no-repeat; }
.ph-mark b em { color: var(--brass-hi); }
.ph-mark-sub { display: block; margin-top: calc(8px * var(--u)); font: 600 calc(15px * var(--u))/1 var(--f-cond); letter-spacing: calc(2.6px * var(--u));
  margin-right: calc(-2.6px * var(--u)); text-transform: uppercase; color: rgba(244, 238, 220, .86); }

/* autofocus brackets */
.ph-af { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; opacity: 0; pointer-events: none; }
.ph-af i { position: absolute; width: 12px; height: 12px; border: 2px solid var(--acc); }
.ph-af i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.ph-af i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.ph-af i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.ph-af i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.ph-af span { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 600 13px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; background: var(--slab); padding: 4px 7px 3px; border-radius: var(--rad); }
.ph-af.go { animation: ph-af 1.4s var(--ease) both; }
@keyframes ph-af { 0% { opacity: 0; transform: scale(1.5); } 15% { opacity: 1; transform: scale(1); } 22% { transform: scale(.92); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }

/* shutter */
.ph-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.ph-flash.go { animation: ph-flash .5s ease-out both; }
@keyframes ph-flash { 0% { opacity: .75; } 100% { opacity: 0; } }
#photo.click .ph-frame { animation: ph-blink .16s steps(1) both; }
@keyframes ph-blink { 0% { box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .55); } 100% { box-shadow: none; } }
#photo.click .ph-frame.crop { animation: none; }

/* top plate */
.ph-top { position: absolute; left: calc(var(--gut) + var(--sa-l)); right: calc(var(--gut) + var(--sa-r)); top: calc(var(--gut) + var(--sa-t));
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); }
.ph-tag { display: flex; align-items: stretch; background: var(--slab); border-radius: var(--rad); overflow: hidden; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.ph-roundel { display: grid; place-items: center; width: 38px; background: var(--acc); color: var(--acc-ink); }
.ph-word { font: 700 15px/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; padding: 12px 12px 10px 12px; }
.ph-sub { font: italic 500 16px/1 var(--f-display); padding: 11px 16px 10px 0; color: var(--hud-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.ph-sub:empty { display: none; }
.ph-time { font: 700 13px/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; background: var(--tvred); color: #fff; padding: 9px 11px 8px; border-radius: var(--rad); }
.ph-time:empty { display: none; }

/* toast */
.ph-toast { position: absolute; left: 50%; top: calc(var(--gut) + var(--sa-t) + 54px); transform: translate(-50%, -8px); opacity: 0; transition: opacity .25s, transform .3s var(--ease);
  background: var(--slab); padding: 9px 14px 8px; border-radius: var(--rad); font: 500 14px/1.2 var(--f-cond); letter-spacing: .04em; white-space: nowrap; border-left: 3px solid var(--acc); }
.ph-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ph-toast b { color: var(--acc); text-transform: uppercase; letter-spacing: .14em; margin-right: 6px; }
.ph-toast i { font-style: normal; color: var(--hud-mute); margin-left: 6px; }

/* toolbar */
.ph-bar { position: absolute; left: 50%; bottom: calc(var(--gut) + var(--sa-b) + 22px); transform: translateX(-50%); pointer-events: auto;
  display: flex; align-items: stretch; gap: 0; max-width: calc(100vw - 2 * var(--gut)); background: var(--slab); border-radius: var(--rad);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45)); transition: opacity .25s, transform .3s var(--ease); }
.ph-rows { display: flex; flex-direction: column; min-width: 0; }
.ph-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.ph-row + .ph-row { border-top: 1px solid var(--slab-line); }
.ph-g { padding: 9px 14px 10px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ph-g + .ph-g { border-left: 1px solid var(--slab-line); }
.ph-gh { font: 600 11px/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--hud-mute); display: flex; justify-content: space-between; gap: 10px; }
.ph-gh-r { color: var(--acc); letter-spacing: .1em; }
.ph-seg { display: flex; align-items: center; gap: 2px; }
.ph-seg kbd { margin-left: 6px; }
.ph-seg button { min-height: 28px; padding: 0 9px; border-radius: calc(var(--rad) / 1.5); font: 600 13px/1 var(--f-cond) !important; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .06); transition: background .15s, color .15s; }
.ph-seg button:hover { background: rgba(255, 255, 255, .12); }
.ph-seg button.on { background: var(--acc); color: var(--acc-ink); }
.ph-seg button:disabled { opacity: .35; cursor: default; }

.ph-sl { display: flex; flex-direction: column; gap: 3px; min-width: 128px; cursor: pointer; }
.ph-sl-h { display: flex; justify-content: space-between; font: 500 12px/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.ph-sl-h i { font-style: normal; color: var(--hud-mute); }
.ph-sl-h b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-g-lens, .ph-g:nth-child(4) { flex-direction: column; }
.ph-sl input { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; margin: 0; cursor: pointer; }
.ph-sl input::-webkit-slider-runnable-track { height: 3px; background: rgba(244, 238, 220, .22); border-radius: 2px; }
.ph-sl input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--hud-ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }
.ph-sl input:hover::-webkit-slider-thumb { background: var(--acc); }
.ph-sl input::-moz-range-track { height: 3px; background: rgba(244, 238, 220, .22); border-radius: 2px; }
.ph-sl input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--hud-ink); }
.ph-sl input:disabled { opacity: .35; cursor: default; }
.ph-sl input:focus-visible { outline: none; }
.ph-sl input:focus-visible::-webkit-slider-thumb { background: var(--acc); }

.ph-looks { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-look { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px 0 5px; border-radius: calc(var(--rad) / 1.5);
  font: 600 13px/1 var(--f-cond) !important; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .06); transition: background .15s, box-shadow .15s; }
.ph-look:hover { background: rgba(255, 255, 255, .12); }
.ph-look.on { box-shadow: inset 0 0 0 1.5px var(--acc); color: var(--acc); }
.ph-sw { width: 20px; height: 20px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.ph-sw-natural { background: linear-gradient(160deg, #8cc2ef 0 40%, #5f9a45 40% 100%); }
.ph-sw-warm { background: linear-gradient(160deg, #f0c48a 0 40%, #8a9a4a 40% 100%); }
.ph-sw-cool { background: linear-gradient(160deg, #b9d3ea 0 40%, #5c8d78 40% 100%); }
.ph-sw-mono { background: linear-gradient(160deg, #d8d8d8 0 40%, #6b6b6b 40% 100%); }
.ph-sw-vintage { background: linear-gradient(160deg, #e9dcc0 0 40%, #9a9a6a 40% 100%); }
.ph-sw-tour { background: linear-gradient(160deg, #5fb0ff 0 40%, #2f9a2f 40% 100%); }

.ph-togs { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-tog { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 9px; border-radius: calc(var(--rad) / 1.5); background: rgba(255, 255, 255, .06);
  font: 600 13px/1 var(--f-cond) !important; letter-spacing: .08em; text-transform: uppercase; transition: background .15s, color .15s; }
.ph-tog:hover { background: rgba(255, 255, 255, .12); }
.ph-tog kbd { margin-left: 2px; }
.ph-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .6; }
.ph-tog.on .ph-dot { background: var(--acc); box-shadow: none; opacity: 1; }
.ph-tog.on { color: var(--hud-ink); }
.ph-cyc .ph-k { color: var(--hud-mute); }
.ph-cyc b { font-weight: 600; color: var(--acc); min-width: 3.4em; text-align: left; }

.ph-act { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; border-left: 1px solid var(--slab-line); padding: 8px; gap: 6px; }
.ph-shutter { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px; border-radius: calc(var(--rad) / 1.5); }
.ph-shutter:hover { background: rgba(255, 255, 255, .07); }
.ph-sh-ring { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--hud-ink); display: grid; place-items: center; transition: border-color .15s; }
.ph-sh-core { width: 36px; height: 36px; border-radius: 50%; background: var(--hud-ink); transition: transform .12s var(--ease), background .15s; }
.ph-shutter:hover .ph-sh-ring { border-color: var(--acc); }
.ph-shutter:hover .ph-sh-core { background: var(--acc); }
.ph-shutter:active .ph-sh-core { transform: scale(.82); }
.ph-sh-l { display: flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; }
.ph-exit { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: calc(var(--rad) / 1.5);
  font: 600 13px/1 var(--f-cond) !important; letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 255, 255, .06); }
.ph-exit:hover { background: var(--tvred); color: #fff; }
.ph-exit .ico { width: 14px; height: 14px; }

.ph-keys { position: absolute; left: 50%; bottom: calc(var(--sa-b) + 6px); transform: translateX(-50%); display: flex; gap: 14px; white-space: nowrap;
  font: 500 12px/1 var(--f-cond); letter-spacing: .06em; color: rgba(244, 238, 220, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); transition: opacity .25s; }
.ph-keys span { display: inline-flex; gap: 3px; align-items: center; }
.ph-keys kbd { opacity: .85; background: rgba(0, 0, 0, .35); border-color: rgba(244, 238, 220, .5); padding: 2px 3px 1px; }
.ph-hidden-hint { position: absolute; right: calc(var(--gut) + var(--sa-r)); bottom: calc(var(--gut) + var(--sa-b)); font: 500 12px/1 var(--f-cond); letter-spacing: .06em;
  color: rgba(244, 238, 220, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .4s .3s; pointer-events: none; }
.ph-hidden-hint kbd { opacity: .85; padding: 2px 3px 1px; }

/* H: clean screen for composing */
#photo.bare .ph-bar { opacity: 0; transform: translate(-50%, 20px); pointer-events: none; }
#photo.bare .ph-top, #photo.bare .ph-keys { opacity: 0; }
#photo.bare .ph-hidden-hint { opacity: 1; }
#photo.bare.on .ph-hidden-hint { animation: ph-hint 4s 1 both; }
@keyframes ph-hint { 0%, 70% { opacity: 1; } 100% { opacity: .25; } }

@media (max-width: 1180px) {
  .ph-sl { min-width: 104px; }
  .ph-g { padding: 8px 10px 9px; }
  .ph-keys { display: none; }
  .ph-bar { bottom: calc(var(--gut) + var(--sa-b)); }
}
@media (max-width: 860px) {
  .ph-look { font-size: 0 !important; gap: 0; padding: 0 5px; }
  .ph-sub { display: none; }
}

/* HUD actions bar: the photo button reuses .actions button styles */
#btn-photo .ico { width: 20px; height: 20px; }