/* [75][97] 아래쪽 UI 기준선 한 곳: 푸터가 화면 크기·안전영역에 따라 자라면 단추도 그만큼 위로 올라간다 */
#ending.ending { position:relative; height:850svh; min-height:0; padding:0; background:#050606; color:#181c18; overflow:visible; border:0;
  --end-hud-frame:#193d7a;
  --end-hud-panel:#214b88;
  --end-hud-panel-hi:#8fbee5;
  --end-hud-panel-lo:#102d62;
  --end-hud-ink:#fffbea;
  --end-hud-accent:#f4d955;
  --end-ui-font:'IBM Plex Mono',monospace;
  --end-foot-b: max(clamp(10px,1.4vh,24px), env(safe-area-inset-bottom));
  /* [24] 푸터가 실제로 차지하는 높이. 넓은 화면에서는 한 줄(안에 든 링크의 손가락 과녁 44px 이 가장 높다),
     760px 이하에서는 styles.css 의 '@media(max-width:760px)' 규칙 때문에 세 줄(글자 두 줄 + 링크 44px)로 접힌다. */
  --end-foot-h: max(44px, calc(.6875rem * 1.7));
  --end-ui-b: max(30px, calc(var(--end-foot-b) + clamp(.5625rem,.52vw,.8125rem) * 1.6 + 8px));
  /* [24] 끝 화면의 두 단추(↓ · Replay)는 푸터 글자 위로 10px 띄운다.
     예전에는 푸터를 한 줄로만 잡아 1440x900 에서 22px, 720x450 에서 56px 씩 푸터를 덮었다. */
  --end-act-b: max(var(--end-ui-b), calc(var(--end-foot-b) + var(--end-foot-h) + 10px)); }
/* Clip the zoomed illustration without creating a scroll container. Hidden
   allowed focus/scrollIntoView to scroll this viewport by 271px with the HUD. */
.ending-stage { position:sticky; top:0; height:100svh; overflow:clip; isolation:isolate; background:#050606; }
.ending-room { position:absolute; inset:0; background:#fff; transform-origin:center; will-change:transform,opacity; }
.ending-room picture { position:absolute; inset:0; }
.ending-room img { position:absolute; display:block; width:100%; height:100%; object-fit:contain; max-width:none; }
.ending-room__empty { z-index:0; }
.ending-room__final { z-index:1; opacity:0; }
#ending[data-arrival="arrived"] .ending-room__final { opacity:1; }
.ending-arrival { position:absolute; z-index:4; pointer-events:none; overflow:visible; }
.ending-arrival img { position:absolute; left:-14.2857%; top:-10.9696%; width:127.9592%; height:122.8208%; max-width:none; }
@media (prefers-reduced-motion:reduce) {
  .ending-room__final { transition:none; }
}
/* [7] 느린 회선에서 방 그림이 오기 전 화면의 90% 가 흰 구멍이었다(실측 16.6초).
   그림이 실제로 그려질 자리에만 평균색을 미리 깔아 둔다 — 바탕그림을 그림과 같은 가로세로비의 SVG 한 장으로 두고
   background-size:contain 을 쓰면 object-fit:contain 과 정확히 같은 상자가 되므로, 그림이 오면 1px 도 남지 않는다.
   좌우 흰 여백은 완성 화면 그대로 유지된다. */
.ending-room img { background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1672' height='941'><rect width='100%' height='100%' fill='%23b3b1a9'/></svg>") center/contain no-repeat; }
@media (max-aspect-ratio:4/5) {
  /* 세로 화면은 세로판 그림(1024x1536)으로 바뀐다 — 비율과 평균색도 그 그림 값으로 */
  .ending-room img { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='1536'><rect width='100%' height='100%' fill='%239b9788'/></svg>"); }
}
.ending-chrome { position:absolute; inset:0; z-index:5; pointer-events:none; transition:opacity .16s; }
.ending-chrome button,.ending-chrome a { pointer-events:auto; }
.ending-wordmark { position:absolute; top:26px; left:3.3vw; color:inherit; text-decoration:none; font:italic 26px Georgia,serif; letter-spacing:.05em; }
/* [97] 아이폰 홈 인디케이터·푸터와 겹치지 않게 띄운다 (보통 화면은 그대로 30px) */
.ending-actions { position:absolute; inset:auto 3.3vw var(--end-act-b); display:flex; align-items:flex-end; justify-content:space-between; }
/* [97] 손가락 과녁 확보: 세로 10px→16px 패딩 + 최소 높이 44px */
.ending-actions button,.ending-skip { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:0; border-radius:0; padding:16px 8px; background:transparent; color:inherit; cursor:pointer; font:500 .75rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.ending-scroll { flex-direction:column; }
.ending-scroll span { display:block; text-align:center; font-size:27px; line-height:1.7; }
.ending-scroll { text-decoration:underline; text-underline-offset:6px; }
.ending-actions button:focus-visible,.ending-skip:focus-visible,.ending-wordmark:focus-visible { outline:2px solid #79ac38; outline-offset:6px; }
/* [26] 두 단추에 손을 올리거나 누를 때 반응이 전혀 없었다 — 밑줄 굵기와 투명도로 응답한다 */
@media (hover:hover) {
  .ending-actions button:hover,.ending-skip:hover { text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px; opacity:.72; }
}
.ending-actions button:active,.ending-skip:active { transform:translateY(1px); opacity:.55; }
.ending-crt-line { position:absolute; left:50%; top:50%; width:84%; height:2px; background:#e0eeeb; box-shadow:0 0 8px #c8dada,0 0 28px #b7ddd3; transform:translate(-50%,-50%); opacity:0; z-index:2; pointer-events:none; }
/* [R5-4] 3D 캔버스 전체에 pixelated 가 걸려 있었다 — CRT 화면 텍스처가 아니라 방 전체(사실적 톤의 배경판 포함)에
   최근접 보간이 적용되면서, devicePixelRatio 가 렌더러의 setPixelRatio 상한(1.5)보다 큰 화면(대부분의 스마트폰,
   dpr 2~3)에서 브라우저가 그 차이를 다시 확대할 때 계단현상(이음새·흐림처럼 보이는 원인)이 생겼다. 그림체 자체는
   손그림 톤이라 매끈한 보간(auto=bilinear)이 맞다. */
.ending-game { position:absolute; inset:0; width:100%; height:100%; opacity:0; image-rendering:pixelated; pointer-events:none; }
/* Full game HUD, based on the approved reference: bevelled steel-blue modules,
   a visible household roster, clock/transport, needs and inventory. */
.ending-game-ui { position:absolute; bottom:var(--end-ui-b); left:50%; width:min(1180px,calc(100vw - 44px)); min-height:108px; transform:translateX(-50%); display:grid; grid-template-columns:74px 122px 88px 96px minmax(180px,1fr) 202px auto; align-items:stretch; gap:4px; padding:5px; border:3px solid #172332; border-top-color:#9aabc0; border-left-color:#8296ad; border-radius:2px; background:linear-gradient(#536b86,#33485f); box-shadow:0 5px 0 #111b27,0 0 0 1px #c0ccda inset; color:#f7f1d8; font:700 .625rem/1.2 var(--end-ui-font); letter-spacing:.035em; z-index:4; opacity:0; pointer-events:none; image-rendering:pixelated; }
.ending-game-ui>* { min-width:0; border:2px solid #233346; border-top-color:#8fa3b9; border-left-color:#7d94ad; background:linear-gradient(135deg,#536b86,#354b63); box-shadow:inset -1px -1px #172536,inset 1px 1px #9aacc0; }
.ending-roster { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; }
.ending-portrait { display:block; min-height:42px; border:1px solid #172331; background-color:#beb08b; background-repeat:no-repeat; background-size:400% 200%; background-position:0 0; filter:saturate(.72) contrast(1.06); }
.ending-portrait--planner{background-image:url('assets/ending/r16-sprites/planner-sheet-v2.png')}.ending-portrait--researcher{background-image:url('assets/ending/r16-sprites/researcher-sheet-v2.png')}.ending-portrait--maker{background-image:url('assets/ending/r16-sprites/maker-sheet-v2.png')}.ending-portrait--producer{background-image:url('assets/ending/r16-sprites/producer-sheet-v2.png')}
.ending-sim-controls { padding:9px 8px 6px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; align-content:center; text-align:center; }
.ending-sim-controls b,.ending-sim-controls span { grid-column:1/-1; color:#eff976; text-shadow:1px 1px #172231; }
.ending-sim-controls span { color:#f6f0d4; font-size:.5625rem; }
.ending-sim-controls i { display:grid; place-items:center; height:25px; border:2px outset #7890aa; background:#405b76; font-style:normal; color:#dce8eb; }
.ending-active-sim { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:2px; padding:8px 4px; background:radial-gradient(circle at 50% 38%,#e2d3a1 0 15%,#6f8b4f 16% 22%,#344b62 23%); }
.ending-active-sim strong { margin-top:auto; font:900 1.25rem/1 Georgia,serif; color:#f0f675; text-shadow:2px 2px #213245; }
.ending-active-sim span,.ending-clock span { color:#cad5db; font-size:.5rem; }
.ending-clock { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px; }
.ending-clock b { color:#f4f78e; font-size:.9375rem; letter-spacing:.08em; }
.ending-needs { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto repeat(3,1fr); column-gap:8px; row-gap:4px; align-content:center; padding:8px 10px; transition:opacity .2s; }
.ending-roster .ending-portrait { pointer-events:auto; cursor:pointer; padding:0; }
.ending-roster .ending-portrait[aria-pressed="true"] { outline:2px solid var(--end-hud-accent); outline-offset:-2px; }
.ending-portrait:focus-visible,.ending-work-intent select:focus-visible { outline:2px solid #fffbea; outline-offset:2px; }
.ending-portrait:active { transform:scale(.97); }
.ending-work-intent { grid-column:1/-1; display:grid; grid-template-columns:64px 1fr; gap:3px 7px; align-items:center; letter-spacing:0; font-family:Arial,'Apple SD Gothic Neo',sans-serif; }
.ending-work-intent select { pointer-events:auto; color:var(--end-hud-ink); border:1px solid var(--end-hud-panel-hi); border-radius:0; background:var(--end-hud-panel-lo); min-width:0; min-height:28px; padding:2px; font:inherit; }
.ending-work-intent strong { font-size:12px; line-height:1.35; word-break:keep-all; }
.ending-work-intent small { grid-column:1/-1; color:#dfebed; font-size:10px; line-height:1.35; word-break:keep-all; }
@media(max-width:700px) {
  .ending-work-intent { grid-template-columns:1fr; gap:3px; }
  .ending-work-intent select { min-height:28px; }
  .ending-work-intent strong { font-size:11px; }
  .ending-work-intent small { font-size:10px; }
}
.ending-needs>span { grid-column:1/-1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff7cf; font-size:.625rem; }
.ending-needs label { display:contents; color:#cbd6dc; font-size:.5rem; }
.ending-needs label i { display:block; align-self:center; width:auto; height:7px; border:1px solid #15202c; background:#1a2733; box-shadow:inset 1px 1px #0e161f; overflow:hidden; }
/* r793: needs are live — the rush-job call crashes them red, the finished work refills them green. */
.ending-needs label i::after { content:''; display:block; height:100%; width:calc(var(--need,.75) * 100%); background:linear-gradient(90deg,hsl(calc(var(--need-h,96) * 1deg) 74% 62%),hsl(calc(var(--need-h,96) * 1deg) 46% 46%)); transition:width .18s linear; }
.ending-needs label:nth-of-type(1) i{--need:.78}.ending-needs label:nth-of-type(2) i{--need:.62}.ending-needs label:nth-of-type(3) i{--need:.88}
.ending-needs.is-alarm { animation:ending-shake .26s 3; }
@keyframes ending-shake { 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
/* r793: Sims-style notification, "+" pops and the pie menu. */
.ending-event { position:absolute; z-index:7; left:50%; top:max(20px,calc(env(safe-area-inset-top) + 14px)); max-width:min(460px,calc(100vw - 40px)); padding:10px 18px; border:2px solid #172536; border-top-color:#a1c4ed; border-left-color:#a1c4ed; background:linear-gradient(135deg,#3765a1,#24467d); box-shadow:0 4px 0 #102653; color:#fff2b7; font:700 1rem/1.35 Arial,'Apple SD Gothic Neo',sans-serif; letter-spacing:0; text-align:center; opacity:0; transform:translate(-50%,-10px); transition:opacity .18s,transform .18s; pointer-events:none; }
.ending-event.is-on { opacity:1; transform:translate(-50%,0); }
.ending-event[data-tone="ring"] { animation:ending-ring .18s 6; }
.ending-event[data-tone="alert"] { border-top-color:#f3a58e; border-left-color:#f3a58e; background:linear-gradient(135deg,#b23b2c,#7d2117); box-shadow:0 4px 0 #4c120c; }
.ending-event[data-tone="done"] { border-top-color:#b7f0a8; border-left-color:#b7f0a8; background:linear-gradient(135deg,#3f9548,#256b31); box-shadow:0 4px 0 #123d1a; }
@keyframes ending-ring { 25%{margin-left:-4px} 75%{margin-left:4px} }
.ending-pop { position:absolute; z-index:8; pointer-events:none; white-space:nowrap; font:800 .8125rem/1 Arial,'Apple SD Gothic Neo',sans-serif; letter-spacing:0; transform:translate(-50%,0); animation:ending-pop 1.2s ease-out forwards; }
.ending-pop--crew { color:#8dff7a; text-shadow:0 1px 0 #0d3312,0 0 6px #0d3312,0 0 2px #000; }
.ending-pop--need { color:#fff27a; font-size:.75rem; text-shadow:0 1px 0 #3b3200,0 0 5px #000; }
@keyframes ending-pop { 0%{opacity:0;transform:translate(-50%,4px) scale(.7)} 16%{opacity:1;transform:translate(-50%,-4px) scale(1.12)} 100%{opacity:0;transform:translate(-50%,-40px) scale(1)} }
.ending-pie { position:absolute; z-index:9; width:0; height:0; pointer-events:none; }
.ending-pie[hidden] { display:none; }
.ending-pie__name { position:absolute; left:0; top:-10px; transform:translate(-50%,-100%); padding:4px 10px; border-radius:999px; background:#fff7cf; color:#1d2a38; box-shadow:0 2px 0 #233346; font:700 .75rem/1.2 Arial,'Apple SD Gothic Neo',sans-serif; white-space:nowrap; animation:ending-pie-in .14s ease-out both; }
.ending-pie button { position:absolute; transform:translate(-50%,-50%); min-height:32px; padding:7px 14px; border:2px solid #172536; border-top-color:#a1c4ed; border-left-color:#a1c4ed; border-radius:16px; background:linear-gradient(#4f78ad,#2c4f84); box-shadow:0 3px 0 #102653; color:#fff2b7; font:700 .8125rem/1 Arial,'Apple SD Gothic Neo',sans-serif; white-space:nowrap; cursor:pointer; pointer-events:auto; animation:ending-pie-in .16s ease-out both; }
.ending-pie button:hover,.ending-pie button:focus-visible { background:linear-gradient(#fff07a,#e3cf3e); color:#1d2a38; outline:none; }
@keyframes ending-pie-in { from { opacity:0; scale:.6; } }
@media (max-width:760px) { .ending-event { font-size:.75rem; padding:8px 12px; } .ending-pie button { font-size:.75rem; padding:7px 11px; } }
@media (prefers-reduced-motion:reduce) { .ending-needs.is-alarm,.ending-event[data-tone="ring"] { animation:none; } .ending-pop { animation-duration:.01s; } }
.ending-inventory { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:6px; align-content:center; }
.ending-inventory button { pointer-events:auto; display:grid; justify-items:center; gap:3px; min-width:44px; min-height:55px; padding:4px 2px; border:2px outset #8297ad; background:#26394c; color:#f0e685; font:inherit; cursor:pointer; }
.ending-inventory button:active { border-style:inset; background:#182c45; }
.ending-inventory output { grid-column:1/-1; min-height:24px; color:#fff2b7; font-size:9px; line-height:1.35; text-align:center; overflow-wrap:anywhere; }
.ending-game-ui .ending-skip { pointer-events:auto; align-self:stretch; font-size:.625rem; white-space:normal; min-height:44px; padding:8px; border:2px solid #172536; border-top-color:#9aaec2; border-left-color:#9aaec2; border-radius:0; background:#5c7189; color:#fffbea; }
/* [80] 맨 끝 화면에서는 'Back to home ↗' 만 남기고 게임 진행 막대는 감춘다 */
#ending[data-phase="home"] .ending-needs { opacity:0; }
/* [80] 마지막 화면은 어두운 키비주얼 위다 — 패널 배경이 항상 코발트라 그대로도 읽히지만, 여유 대비를 위해 유지한다 */
#ending[data-phase="home"] .ending-skip { color:#eef3ea; text-shadow:0 1px 4px rgba(0,0,0,.72); }
.ending-home-match { position:absolute; inset:0; opacity:0; overflow:hidden; pointer-events:none; background:#050606; z-index:3; }
.ending-home-match img { position:absolute; left:50%; top:50%; width:max(100vw,177.7778svh); max-width:none; height:auto; transform:translate(-50%,-50%); }
.ending-home-copy{position:absolute;z-index:1;left:clamp(32px,5vw,72px);top:50%;width:min(51vw,690px);color:#f0e8d4;transform:translateY(-50%)}
.ending-home-scroll{position:absolute;z-index:1;left:50%;bottom:20px;transform:translateX(-50%);color:#f0e8d4;font:500 10px/1.2 'IBM Plex Mono',monospace;letter-spacing:.18em}
.ending-description,.ending-legacy { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%)!important; pointer-events:none!important; }
html.ending-in-game .site-nav { opacity:0!important; pointer-events:none!important; }
/* [42][75] 8px·불투명도 .45 고정이라 큰 화면에서 사실상 안 보였다 — 화면 크기에 따라 자라게 하고 안전영역을 지킨다 */
#ending .site-footer { position:absolute; bottom:var(--end-foot-b); left:clamp(24px,3.3vw,72px); right:clamp(24px,3.3vw,72px); z-index:6; padding:0; border:0; margin:0; font-size:clamp(.5625rem,.52vw,.8125rem); letter-spacing:.06em; opacity:.62; pointer-events:none; }
#ending:not([data-phase="room"]) .site-footer { visibility:hidden; }
.ending-fallback { display:none; position:absolute; top:42%; width:100%; text-align:center; color:#d6e0d0; font:.875rem 'IBM Plex Mono',monospace; z-index:4; }
#ending[data-renderer="unavailable"] .ending-fallback { display:block; }
#ending[data-waiting="true"] .ending-fallback { display:block; top:50%; transform:translateY(-50%); color:#d6e0d0; }
#ending[data-renderer="unavailable"] { height:100svh; }
#ending[data-renderer="unavailable"] .ending-fallback {
  top:auto;
  left:clamp(22px,3.3vw,72px);
  right:clamp(22px,3.3vw,72px);
  bottom:calc(var(--end-act-b) + max(56px,3rem + 12px));
  width:auto;
  margin:0;
  padding:8px 12px;
  background:#fff;
  color:#222;
}
.reduced-motion #ending.ending { height:100svh; }
.reduced-motion .ending-scroll, #ending[data-renderer="unavailable"] .ending-scroll { display:none; }
/* [24] styles.css 의 760px 분기에서 푸터가 세 줄로 접힌다 — 단추 기준선도 같이 올린다 */
@media (max-width:760px) {
  /* 푸터 글자 두 줄(10px x 줄간격 1.7 = 17px) + 링크 손가락 과녁 44px = 실측 78px */
  #ending.ending { --end-foot-h: calc(.625rem * 1.7 * 2 + 44px); }
}
@media (max-width:700px) {
  /* [24] 휴대폰에서는 푸터 자신이 max(17px, 안전영역) 에 붙는다 — 기준선 변수를 그 값으로 맞춘다 */
  #ending.ending { --end-foot-b: max(17px, env(safe-area-inset-bottom)); }
  .ending-wordmark { top:22px; left:22px; }
  /* [97] 모바일도 안전영역(홈 인디케이터) 위로 올린다 */
  .ending-actions { inset:auto 22px var(--end-act-b); }
  .ending-game-ui { left:22px; right:auto; width:calc(100vw - 44px); min-height:96px; transform:none; bottom:max(36px, calc(env(safe-area-inset-bottom) + 16px)); grid-template-columns:60px 76px minmax(118px,1fr) 72px; }
  .ending-roster,.ending-active-sim,.ending-inventory { display:none; }
  .ending-sim-controls { padding:5px 4px; }
  .ending-sim-controls b,.ending-sim-controls span { font-size:.5rem; }
  .ending-sim-controls i { height:20px; font-size:.5rem; }
  .ending-clock { padding:4px; gap:4px; }
  .ending-clock b { font-size:.6875rem; }
  .ending-needs { padding:5px; column-gap:4px; row-gap:3px; }
  .ending-needs>span { font-size:.5rem; }
  /* [42] 모바일 7px 는 너무 작다 */
  #ending .site-footer { left:22px; right:22px; font-size:.5625rem; }
  .ending-actions button { font-size:.625rem; }
  .ending-game-ui .ending-skip { font-size:.5625rem; justify-content:center; }
}
@media (max-width:980px) and (max-aspect-ratio:5/4) {
  .ending-home-match img { left:12.8vw; width:190.7vw; }
  .ending-home-copy{left:20px;right:20px;top:max(22px,calc(env(safe-area-inset-top) + 16px));width:auto;text-align:center;transform:none}
  .ending-home-copy .hero-vintage__title{width:min(84vw,340px);margin-inline:auto}
  .ending-home-copy .hero-vintage__statement{margin:10px auto 0}
}

.ending-screen { z-index:2; visibility:hidden; position:absolute; left:0; top:0; width:400px; height:320px; transform-origin:0 0; border-radius:28px / 32px; overflow:hidden; background:#090e10; isolation:isolate; backface-visibility:hidden; }
.ending-screen[style] { visibility:visible; }
.ending-programme { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 46%,#f5edcf 0 32%,#b4c6b7 33% 34%,transparent 35%),linear-gradient(135deg,#9bb9b0,#d1dac3 49%,#729d9b); transform-origin:center; will-change:transform,opacity; }
.ending-screen-title { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#203b36; font:600 61px/.88 var(--serif,'Libre Caslon Text',Georgia,serif); letter-spacing:-.05em; text-align:center; text-shadow:1px 2px 0 #f8eace,3px 4px 0 #c3b88770; }
.ending-screen-title em { display:block; font:inherit; font-size:68px; font-style:normal; letter-spacing:-.055em; }
.ending-glass { position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 22px #071d2f70,inset 3px 3px 9px #0c24294d; background:repeating-linear-gradient(0deg,#1029320c 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,transparent 62%,#071d2f20 100%); pointer-events:none; }
.ending-screen .ending-crt-line { width:88%; min-width:2px; height:2px; z-index:2; }

.ending-remote{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none}
.ending-qa-controls{position:fixed;right:8px;top:8px;z-index:10000;display:flex;gap:8px;padding:6px;background:#172332;color:white;font:12px monospace}
.ending-qa-controls input{width:70px;color:#111;background:white}
.ending-qa-controls{max-width:calc(100vw - 16px);flex-wrap:wrap}
.ending-qa-controls button{color:#111;background:white}
.ending-game-ui{background:linear-gradient(#3765a1,var(--end-hud-frame));border-top-color:#a1c4ed;border-left-color:#7198d3;box-shadow:0 5px #102653,inset 0 0 0 2px #4e80bc}
.ending-game-ui>*{background:linear-gradient(135deg,#4676b1,var(--end-hud-panel));border-top-color:var(--end-hud-panel-hi);border-left-color:#739dd7;box-shadow:inset -2px -2px var(--end-hud-panel-lo),inset 1px 1px #a0bce5}
.ending-game-ui .ending-sim-controls button{pointer-events:auto;grid-column:1/-1;min-height:30px;color:#fff1b5;background:#25487d;border:2px outset #90b6e3;cursor:pointer;font:700 17px var(--end-ui-font)}
.ending-game-ui button:focus-visible{outline:3px solid #f2e349;outline-offset:2px}
.ending-active-sim{background:#274d85 url('assets/ending/r10-image-first/character-original-v3/01-front.webp') center 25%/cover no-repeat}
.ending-active-sim strong{display:none}
.ending-active-sim span{background:#173b76;padding:3px 10px;color:white}
.ending-inventory svg{display:block;width:26px;height:26px;filter:drop-shadow(1px 2px 0 #182d58)}
.ending-game-ui .ending-sim-controls button[aria-pressed="true"]{background:#193052;border-style:inset;color:var(--end-hud-accent)}
.ending-portrait{background-size:1300% 520%;background-position:3% 0;filter:saturate(.8)}
@media (min-width:701px) and (max-width:900px){
  .ending-game-ui{grid-template-columns:48px 64px 52px 58px minmax(100px,1fr) 148px 74px;gap:3px;padding:4px;min-height:94px}
  .ending-roster{gap:2px;padding:2px}
  .ending-sim-controls{gap:2px;padding:5px 3px}
  .ending-sim-controls b,.ending-sim-controls span{font-size:.5rem}
  .ending-clock{gap:4px;padding:4px}
  .ending-clock b{font-size:.75rem}
  .ending-needs{column-gap:3px;padding:5px}
  .ending-inventory{gap:2px;padding:4px}
  .ending-game-ui .ending-skip{padding:3px;font-size:.5rem}
}
@media(max-width:700px){
  .ending-game-ui{grid-template-columns:48px 54px minmax(0,1fr)64px;gap:3px}
  .ending-needs>span{font-size:8px;letter-spacing:0}
  .ending-sim-controls{grid-column:1;grid-row:1}
  .ending-clock{grid-column:2;grid-row:1}
  .ending-needs{grid-column:3/-1;grid-row:1}
  .ending-game-ui .ending-sim-controls button{min-height:44px}
  .ending-work-intent{grid-template-columns:52px minmax(0,1fr)}
  .ending-work-intent select{min-height:44px}
  .ending-game-ui .ending-skip{grid-column:4;grid-row:2;min-height:44px}
  .ending-inventory{display:grid;grid-column:1/4;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px}
  .ending-inventory button{min-height:44px;grid-template-columns:24px auto;align-items:center;gap:2px;font-size:10px}
  .ending-inventory svg{width:24px;height:24px}
  .ending-inventory output{grid-column:1/-1;min-height:16px;align-self:center;text-align:center;font-size:9px;word-break:keep-all;overflow-wrap:normal}
  .ending-qa-controls input{width:48px}
}
#ending[data-arrival="arrived"] .ending-remote{opacity:1}

/* ===== r797 (user: "go with A, and fill the empty space below") =====
   Sims 1 style control console across the whole bottom edge: the round
   face of the selected staff member with its plumbob, the staff tabs on
   the console's top edge, the needs, a live staff list in the space the
   old bar left empty, the clock + pause, round action buttons, WHO WE ARE.
   Scoped to #ending .ending-hud-a so it overrides the older HUD rules. */
#ending .ending-hud-a{--a-deep:#162f63;--a-mid:#24498f;--a-hi:#8fb2ea;--a-line:#0d1d3f;--a-yel:#f6e25e;--a-txt:#eaf2ff;--a-dim:#b9cdf0;
  position:absolute;left:0;right:0;bottom:0;width:auto;min-height:0;height:var(--hud-h,156px);transform:none;z-index:6;
  display:grid;grid-template-columns:minmax(260px,1.25fr) minmax(220px,1fr) 136px auto auto;grid-template-rows:1fr;gap:12px;align-items:stretch;
  padding:16px 20px max(14px,env(safe-area-inset-bottom)) 196px;border:0;border-top:3px solid var(--a-hi);border-radius:0;
  background:linear-gradient(180deg,var(--a-mid),var(--a-deep) 70%);box-shadow:inset 0 2px 0 var(--a-line),0 -4px 12px #0006;
  font:500 12px/1.3 Arial,'Apple SD Gothic Neo',sans-serif;color:var(--a-txt)}
#ending .ending-hud-a>*{min-width:0;margin:0;border:0;border-radius:14px;background:none;box-shadow:none;padding:0}
#ending .ending-hud-a button{font:inherit;cursor:pointer}
#ending .ending-hud-a svg{width:20px;height:20px;flex:none;filter:none}
/* staff tabs on the console's top edge */
#ending .ending-hud-a .ending-roster{position:absolute;left:192px;top:-43px;display:flex;gap:4px;padding:0;background:none}
#ending .ending-hud-a .ending-portrait{width:44px;height:40px;border:3px solid var(--a-hi);border-bottom:0;border-radius:10px 10px 0 0;background-color:#3b5a8f;background-position:center 28%!important;background-size:cover!important;filter:saturate(.85) brightness(.9);pointer-events:auto}
#ending .ending-hud-a .ending-portrait[aria-pressed="true"]{height:44px;margin-top:-4px;border-color:var(--a-yel);filter:none}
/* the big round face + plumbob, rising above the console like Sims 1 */
#ending .ending-hud-a .ending-face{position:absolute;left:20px;bottom:max(14px,env(safe-area-inset-bottom));width:156px;height:156px;border-radius:50%;border:4px solid var(--a-hi);box-shadow:inset 0 0 0 3px var(--a-line),0 4px 0 #0b1734;background:radial-gradient(circle at 50% 35%,#4f74b3,#223f73);overflow:visible}
#ending .ending-hud-a .ending-face i{position:absolute;inset:3px;border-radius:50%;background-size:cover;background-position:center 28%}
#ending .ending-hud-a .ending-face__gem{position:absolute;left:50%;top:-40px;width:24px;height:36px;margin-left:-12px;background:linear-gradient(135deg,#a9f6a1,#2fae46);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:drop-shadow(0 2px 0 #0b1734);animation:hud-gem 3.2s ease-in-out infinite}
@keyframes hud-gem{50%{transform:translateY(-4px)}}
/* needs: who, task, why, PLAN/MAKE/RUN */
#ending .ending-hud-a .ending-needs{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto repeat(3,auto);gap:4px 8px;align-content:center;padding:4px 4px 4px 0;opacity:1}
#ending .ending-hud-a .ending-needs>span{grid-column:1/-1;color:var(--a-dim);font:600 10px var(--end-ui-font);letter-spacing:.08em}
#ending .ending-hud-a .ending-work-intent{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;font-family:Arial,'Apple SD Gothic Neo',sans-serif}
#ending .ending-hud-a .ending-work-intent select{grid-row:1/3;pointer-events:auto;height:32px;min-height:32px;padding:0 8px;border:2px solid var(--a-hi);border-radius:16px;background:var(--a-deep);color:var(--a-yel);font:700 12px Arial,'Apple SD Gothic Neo',sans-serif}
#ending .ending-hud-a [data-crew-task]{color:var(--a-yel);font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ending .ending-hud-a [data-crew-reason]{color:var(--a-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ending .ending-hud-a .ending-needs label{display:contents;color:var(--a-dim);font:600 10px var(--end-ui-font)}
#ending .ending-hud-a .ending-needs label i{height:10px;border:0;border-radius:5px;background:var(--a-line);box-shadow:inset 0 1px 0 #0007}
#ending .ending-hud-a .ending-needs label i::after{border-radius:5px}
/* the live staff list fills the space the old bar left empty */
#ending .ending-hud-a .ending-crew-list{display:grid;align-content:center;gap:4px;padding:8px;background:#0f2554;box-shadow:inset 0 0 0 2px #3f66a8}
#ending .ending-hud-a .ending-crew-list button{display:grid;grid-template-columns:28px 52px 1fr;align-items:center;gap:8px;height:34px;padding:0 8px 0 3px;border:0;border-radius:17px;background:transparent;color:var(--a-txt);text-align:left;pointer-events:auto}
#ending .ending-hud-a .ending-crew-list button[aria-pressed="true"]{background:#24498f;box-shadow:inset 0 0 0 2px var(--a-yel)}
#ending .ending-hud-a .ending-crew-list i{width:28px;height:28px;border-radius:50%;background:#3b5a8f center 28%/cover;box-shadow:0 0 0 2px var(--a-hi)}
#ending .ending-hud-a .ending-crew-list b{color:var(--a-yel);font-size:12px}
#ending .ending-hud-a .ending-crew-list span{color:var(--a-dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* clock (LCD) over STUDIO LIVE + pause */
#ending .ending-hud-a .ending-clock{grid-column:3;grid-row:1;align-self:start;display:grid;justify-items:center;padding:8px 0 6px;border:2px solid var(--a-hi);border-radius:12px;background:var(--a-line);color:#9df29a}
#ending .ending-hud-a .ending-clock b{font:600 24px/1 var(--end-ui-font);color:#9df29a}
#ending .ending-hud-a .ending-clock span{margin-top:4px;color:#7fa6e0;font:500 9px var(--end-ui-font);letter-spacing:.1em}
#ending .ending-hud-a .ending-sim-controls{grid-column:3;grid-row:1;align-self:end;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 0 0 6px;background:none}
#ending .ending-hud-a .ending-sim-controls b{color:var(--a-yel);font:700 12px var(--end-ui-font)}
#ending .ending-hud-a .ending-sim-controls span{flex:1;color:var(--a-dim);font:600 8px/1.1 var(--end-ui-font);letter-spacing:.06em}
#ending .ending-hud-a .ending-sim-controls button{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:2px solid var(--a-hi);border-radius:50%;background:var(--a-mid);color:#fff;pointer-events:auto}
#ending .ending-hud-a .ending-sim-controls button[aria-pressed="true"]{background:var(--a-yel);color:var(--a-deep)}
#ending .ending-hud-a .ending-active-sim{display:none}
/* round action buttons (+ the feedback line under them) */
#ending .ending-hud-a .ending-inventory{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:64px auto;gap:6px 10px;align-content:center;justify-items:center;padding:0;background:none}
#ending .ending-hud-a .ending-inventory button{display:grid;place-items:center;align-content:center;gap:2px;width:64px;height:64px;min-width:0;min-height:0;padding:0;border:3px solid var(--a-hi);border-radius:50%;background:radial-gradient(circle at 40% 32%,#5583cf,#1d3c78);box-shadow:0 3px 0 #0b1734;color:var(--a-yel);font:700 11px Arial,'Apple SD Gothic Neo',sans-serif;pointer-events:auto}
#ending .ending-hud-a .ending-inventory button:active{transform:translateY(2px);box-shadow:0 1px 0 #0b1734}
#ending .ending-hud-a .ending-inventory output{grid-column:1/-1;min-height:0;color:var(--a-dim);font-size:11px;text-align:center}
#ending .ending-hud-a .ending-skip{align-self:center;display:flex;align-items:center;gap:6px;height:48px;min-height:48px;padding:0 18px;border:3px solid var(--a-hi);border-radius:24px;background:var(--a-yel);color:var(--a-deep);font:700 13px var(--end-ui-font);white-space:nowrap;box-shadow:0 3px 0 #0b1734;pointer-events:auto}
#ending .ending-hud-a button:focus-visible,#ending .ending-hud-a select:focus-visible{outline:3px solid var(--a-yel);outline-offset:2px}
/* mid widths: drop the staff list text, keep faces */
@media (min-width:761px) and (max-width:1100px){
  #ending .ending-hud-a{grid-template-columns:minmax(220px,1fr) 128px 128px auto;padding-left:176px}
  #ending .ending-hud-a .ending-face{width:140px;height:140px}
  #ending .ending-hud-a .ending-roster{left:172px}
  #ending .ending-hud-a .ending-crew-list{display:none}
  #ending .ending-hud-a .ending-clock,#ending .ending-hud-a .ending-sim-controls{grid-column:2}
  #ending .ending-hud-a .ending-inventory{grid-template-columns:repeat(3,52px);grid-template-rows:52px auto}
  #ending .ending-hud-a .ending-inventory button{width:52px;height:52px}
  #ending .ending-hud-a .ending-skip{padding:0 12px;font-size:11px}
}
/* phones: a handheld-style lower screen filling everything under the room */
@media (max-width:760px){
  #ending .ending-hud-a{height:auto;left:0;right:0;width:auto;bottom:0;transform:none;
    grid-template-columns:92px 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"top top" "face needs" "list list" "inv inv";
    gap:10px;padding:10px 12px max(14px,env(safe-area-inset-bottom));border-top-width:3px}
  #ending .ending-hud-a .ending-roster{display:none}
  #ending .ending-hud-a .ending-face{grid-area:face;position:relative;left:auto;bottom:auto;width:92px;height:92px;align-self:center}
  #ending .ending-hud-a .ending-face__gem{top:-30px;width:18px;height:28px;margin-left:-9px}
  #ending .ending-hud-a .ending-needs{grid-area:needs;padding:0}
  #ending .ending-hud-a [data-crew-task]{font-size:14px}
  #ending .ending-hud-a .ending-crew-list{grid-area:list;display:grid;padding:6px}
  #ending .ending-hud-a .ending-crew-list button{height:40px;grid-template-columns:30px 52px 1fr}
  #ending .ending-hud-a .ending-crew-list i{width:30px;height:30px}
  #ending .ending-hud-a .ending-clock{grid-area:top;grid-column:auto;grid-row:auto;justify-self:end;display:flex;align-items:baseline;gap:6px;padding:4px 10px;align-self:center}
  #ending .ending-hud-a .ending-clock b{font-size:16px}
  #ending .ending-hud-a .ending-clock span{margin:0}
  #ending .ending-hud-a .ending-sim-controls{grid-area:top;grid-column:auto;grid-row:auto;justify-self:start;align-self:center;padding:0;gap:8px}
  #ending .ending-hud-a .ending-sim-controls span{flex:none}
  #ending .ending-hud-a .ending-inventory{grid-area:inv;display:grid;grid-template-columns:repeat(3,1fr) 1.35fr;grid-template-rows:auto;gap:8px;justify-items:stretch}
  #ending .ending-hud-a .ending-inventory button{width:auto;height:48px;border-radius:24px;grid-auto-flow:column;gap:6px;font-size:12px}
  #ending .ending-hud-a .ending-inventory output{display:none}
  #ending .ending-hud-a .ending-skip{grid-area:inv;justify-self:end;width:calc((100% - 24px) * 1.35 / 4.35);height:48px;min-height:48px;padding:0 8px;justify-content:center;font-size:11px}
}
/* r797 (user: "remove the needless Korean text"): one task line only — no
   reason sentence, no duplicate staff picker (tabs/list select), no hint
   line, and icon-only action buttons (names stay as tooltips/aria-labels). */
#ending .ending-hud-a [data-crew-reason],#ending .ending-hud-a .ending-work-intent select,#ending .ending-hud-a .ending-inventory output,#ending .ending-hud-a .ending-inventory button span{display:none}
#ending .ending-hud-a .ending-work-intent{grid-template-columns:1fr}
#ending .ending-hud-a [data-crew-task]{font-size:17px}
#ending .ending-hud-a .ending-inventory{grid-template-rows:64px}
#ending .ending-hud-a .ending-inventory svg{width:26px;height:26px}
#ending .ending-hud-a .ending-crew-list button{grid-template-columns:28px 1fr 24px}
#ending .ending-hud-a .ending-crew-ico{display:grid;place-items:center;color:var(--a-yel)}
#ending .ending-hud-a .ending-crew-ico svg{width:18px;height:18px}
@media (max-width:760px){
  #ending .ending-hud-a .ending-inventory{grid-template-rows:auto}
  #ending .ending-hud-a .ending-crew-list button{grid-template-columns:30px 1fr 24px}
}
/* r797 tidy: phone header row = [TVA STUDIO LIVE ‖] ........ [15:24 WORKDAY 06] */
@media (max-width:760px){
  #ending .ending-hud-a{grid-template-areas:"ctl clk" "face needs" "list list" "inv inv";grid-template-columns:92px 1fr}
  #ending .ending-hud-a .ending-sim-controls{grid-area:ctl;grid-column:1/2;justify-self:start;width:max-content}
  #ending .ending-hud-a .ending-clock{grid-area:clk;justify-self:end}
}
/* r797 tidy: a slightly smaller face on desktop (less upscaled pixel), icons centred in phone pills */
@media (min-width:1101px){
  #ending .ending-hud-a{padding-left:184px}
  #ending .ending-hud-a .ending-face{width:144px;height:144px}
  #ending .ending-hud-a .ending-roster{left:184px}
}
@media (max-width:760px){
  #ending .ending-hud-a .ending-inventory button{justify-content:center;justify-items:center}
  #ending .ending-hud-a .ending-skip{font-size:10px;gap:4px}
}
/* r797 tidy: mid widths give the round buttons their own auto column (the
   fixed 128px column made WHO WE ARE overlap the cat button on 844px). */
@media (min-width:761px) and (max-width:1100px){
  #ending .ending-hud-a{grid-template-columns:minmax(200px,1fr) 128px auto auto}
}
/* low screens (phones held sideways, short laptop windows): compact console */
@media (min-width:761px) and (max-height:500px){
  #ending .ending-hud-a{--hud-h:104px;padding:10px 16px max(10px,env(safe-area-inset-bottom)) 132px;gap:10px}
  #ending .ending-hud-a .ending-face{width:100px;height:100px;left:16px;bottom:max(10px,env(safe-area-inset-bottom))}
  #ending .ending-hud-a .ending-face__gem{top:-30px;width:18px;height:28px;margin-left:-9px}
  #ending .ending-hud-a .ending-roster{left:132px;top:-36px}
  #ending .ending-hud-a .ending-portrait{width:36px;height:33px}
  #ending .ending-hud-a .ending-portrait[aria-pressed="true"]{height:37px}
  #ending .ending-hud-a .ending-needs{gap:2px 8px}
  #ending .ending-hud-a [data-crew-task]{font-size:14px}
  #ending .ending-hud-a .ending-crew-list{display:none}
  #ending .ending-hud-a .ending-clock{padding:4px 0}
  #ending .ending-hud-a .ending-clock b{font-size:18px}
  #ending .ending-hud-a .ending-sim-controls button{width:32px;height:32px;min-height:32px}
  #ending .ending-hud-a .ending-inventory{grid-template-columns:repeat(3,48px);grid-template-rows:48px}
  #ending .ending-hud-a .ending-inventory button{width:48px;height:48px}
  #ending .ending-hud-a .ending-inventory svg{width:22px;height:22px}
  #ending .ending-hud-a .ending-skip{height:40px;min-height:40px;padding:0 12px;font-size:11px}
}
@media (min-width:761px) and (max-height:500px){
  #ending .ending-hud-a{grid-template-columns:minmax(170px,1fr) 104px auto auto auto}
  #ending .ending-hud-a .ending-needs>span{display:none}
  #ending .ending-hud-a .ending-needs{grid-template-rows:auto repeat(3,auto);gap:3px 8px;align-content:center}
  #ending .ending-hud-a .ending-needs label i{height:8px}
  #ending .ending-hud-a .ending-clock{grid-column:2;grid-row:1;align-self:center}
  #ending .ending-hud-a .ending-sim-controls{grid-column:3;grid-row:1;align-self:center;padding:0}
  #ending .ending-hud-a .ending-sim-controls b,#ending .ending-hud-a .ending-sim-controls span{display:none}
  #ending .ending-hud-a .ending-inventory{grid-column:4;grid-row:1}
  #ending .ending-hud-a .ending-skip{grid-column:5;grid-row:1}
}


/* r799 (user: "take out all the Korean, drop WHO WE ARE on the right, balance
   the bar"): no task sentence, no staff names (kept for screen readers only),
   no hover tooltips; staff become three face tiles; the groups spread evenly. */
#ending .ending-hud-a [data-crew-task],#ending .ending-hud-a .ending-crew-list b{display:none}
#ending .ending-hud-a .ending-needs{gap:7px 10px}
#ending .ending-hud-a .ending-needs>span{margin-bottom:3px}
#ending .ending-hud-a .ending-crew-list{grid-auto-flow:column;grid-auto-columns:64px;justify-content:center;align-content:center;align-items:center;gap:8px;padding:8px 12px}
#ending .ending-hud-a .ending-crew-list,#ending .ending-hud-a .ending-inventory,#ending .ending-hud-a .ending-clock{min-width:max-content}
#ending .ending-hud-a .ending-crew-list button{display:grid;grid-template-columns:none;justify-items:center;align-content:center;gap:6px;width:64px;height:auto;padding:8px 0 6px;border-radius:14px;text-align:center}
#ending .ending-hud-a .ending-crew-list i{width:44px;height:44px}
@media (min-width:1101px){
  #ending .ending-hud-a{grid-template-columns:minmax(240px,600px) auto 136px auto;justify-content:space-between;column-gap:24px}
}
@media (min-width:761px) and (max-width:1100px){
  #ending .ending-hud-a{grid-template-columns:minmax(200px,1fr) 128px auto;column-gap:20px}
}
@media (min-width:761px) and (max-height:500px){
  #ending .ending-hud-a{grid-template-columns:minmax(170px,1fr) 104px auto auto}
}
@media (max-width:760px){
  #ending .ending-hud-a .ending-crew-list{grid-auto-columns:1fr;justify-content:stretch;gap:8px;padding:6px 8px;min-width:0}
  #ending .ending-hud-a .ending-crew-list button{grid-auto-flow:column;grid-template-columns:none;justify-content:center;align-items:center;gap:10px;width:auto;height:48px;padding:0 10px}
  #ending .ending-hud-a .ending-crew-list i{width:34px;height:34px}
  #ending .ending-hud-a .ending-inventory{grid-template-columns:repeat(3,1fr);min-width:0}
}

/* r800 (user: "take this out too" — TVA / STUDIO LIVE / pause): the clock
   stands alone, centred in its column; phones get a full-width clock strip. */
#ending .ending-hud-a .ending-clock{align-self:center}
@media (min-width:761px) and (max-height:500px){
  #ending .ending-hud-a{grid-template-columns:minmax(170px,1fr) 104px auto}
  #ending .ending-hud-a .ending-inventory{grid-column:3}
}
@media (max-width:760px){
  #ending .ending-hud-a{grid-template-areas:"clk clk" "face needs" "list list" "inv inv"}
  #ending .ending-hud-a .ending-clock{grid-area:clk;justify-self:stretch;display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:12px;padding:6px 12px;margin-bottom:22px}
  #ending .ending-hud-a .ending-clock b{font-size:18px}
}

/* r803 (user: "the clock is wrong, take the clock out too"): no clock. PC:
   [bars][staff tiles][round buttons]; low screens: [bars][buttons]; phones:
   no top row, the face + bars lead the console. */
@media (min-width:1101px){
  #ending .ending-hud-a{grid-template-columns:minmax(240px,600px) auto auto}
}
@media (min-width:761px) and (max-width:1100px){
  #ending .ending-hud-a{grid-template-columns:minmax(200px,1fr) auto}
  #ending .ending-hud-a .ending-inventory{grid-column:2}
}
@media (min-width:761px) and (max-height:500px){
  #ending .ending-hud-a{grid-template-columns:minmax(170px,1fr) auto}
  #ending .ending-hud-a .ending-inventory{grid-column:2}
}
@media (max-width:760px){
  #ending .ending-hud-a{grid-template-areas:"face needs" "list list" "inv inv";padding-top:30px}
}