/* ===== SEARED BURN UP v5.3 — Final Tuning ===== */
/* 16:9: Timer(14vh) + Grid(67vh) + HighRank(19vh) */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  --font: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --black: #000;
  --red: #CC0000;
  --red-b: #FF0000;
  --white: #FFF;
  --gold: #FFD700;
  --ls: -0.03em;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100vw; height:100vh;
  overflow:hidden;
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  letter-spacing:var(--ls);
}

/* ===== BACKGROUND LOGO ===== */
.bg-logo {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  pointer-events:none;
  opacity:0.07;
}
.bg-logo img {
  width:80vw;
  max-width:1300px;
  filter:brightness(1.5);
  animation:logo-shake .12s infinite alternate;
}
@keyframes logo-shake {
  0%{transform:translate(-2px,-1px) rotate(-0.4deg)}
  100%{transform:translate(2px,1px) rotate(0.4deg)}
}

/* ===== WS BADGE ===== */
.ws-badge {
  position:fixed; bottom:4px; left:6px; z-index:100;
  display:flex; align-items:center; gap:4px;
  font-size:9px; color:rgba(255,255,255,.25);
}
.ws-dot { width:6px; height:6px; border-radius:50%; background:#F44; }
.ws-badge.connected .ws-dot { background:#4F4; }

/* ===== LAYOUT — #1: even taller timer ===== */
body {
  display:grid;
  grid-template-rows: 14vh 67vh 19vh;
  grid-template-areas: "timer" "grid" "rank";
}

/* ======================================================================
   1. TIMER BAR (14vh) — MUCH taller
   ====================================================================== */
.timer-bar {
  grid-area:timer;
  display:flex;
  align-items:center;
  padding:1vh 1.5vw;
  gap:0;
  background:rgba(0,0,0,.95);
  z-index:10;
}

/* Logo — bigger */
.timer-logo {
  height:12vh;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(204,0,0,.6));
}

/* #2: Total time — bigger than gauge text, numbers bold */
.timer-total {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  width:13vw;
}
.timer-total .t-number {
  font-size:clamp(54px, 9vh, 90px);
  font-weight:900;
  color:var(--red-b);
  letter-spacing:0;
}
.timer-total .t-unit {
  font-size:clamp(26px, 4vh, 42px);
  font-weight:800;
  color:var(--red-b);
  letter-spacing:var(--ls);
}

/* Gauge — lighter gray bg, neon ONLY on the fill */
.timer-gauge {
  flex:1;
  height:8vh;
  background:rgba(255,255,255,.2);
  border-radius:6px;
  position:relative;
  overflow:visible;
  border:1px solid rgba(255,255,255,.1);
}
.timer-gauge-fill {
  position:absolute;
  top:0; left:0; bottom:0;
  width:100%;
  background:linear-gradient(90deg,#880000,#DD0000,#FF0000,#EE2200);
  border-radius:6px;
  transition:width .5s linear;
  /* Neon glow on the FILL itself */
  box-shadow:
    0 0 14px rgba(255,0,0,.6),
    0 0 30px rgba(255,0,0,.45),
    0 0 55px rgba(255,20,20,.3),
    0 0 85px rgba(255,0,0,.18),
    0 0 120px rgba(200,0,0,.08);
  animation:fill-neon-pulse 2s ease-in-out infinite;
}
@keyframes fill-neon-pulse {
  0%,100%{ box-shadow:0 0 14px rgba(255,0,0,.6),0 0 30px rgba(255,0,0,.45),0 0 55px rgba(255,20,20,.3),0 0 85px rgba(255,0,0,.18),0 0 120px rgba(200,0,0,.08); }
  50%{ box-shadow:0 0 18px rgba(255,0,0,.7),0 0 38px rgba(255,0,0,.55),0 0 70px rgba(255,20,20,.38),0 0 105px rgba(255,0,0,.22),0 0 145px rgba(200,0,0,.1); }
}

/* Remaining text — #2: bigger, bold numbers */
.timer-remaining {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-weight:900;
  color:var(--white);
  text-shadow:0 2px 14px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.5);
  z-index:2;
  white-space:nowrap;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.timer-remaining .r-number {
  font-size:clamp(34px, 6.5vh, 64px);
  font-weight:900;
  letter-spacing:0;
}
.timer-remaining .r-unit {
  font-size:clamp(16px, 3vh, 28px);
  font-weight:800;
  color:var(--white);
  letter-spacing:var(--ls);
}

/* Phase badge — bigger */
.timer-phase-badge {
  font-size:clamp(15px, 2.6vh, 26px);
  font-weight:900;
  color:var(--white);
  background:var(--red);
  padding:10px 22px;
  border-radius:4px;
  white-space:nowrap;
  min-width:6vw;
  text-align:center;
  letter-spacing:var(--ls);
  margin-left:1vw;
}

/* ======================================================================
   2. PLAYER GRID (67vh)
   #4: double padding again
   #5: white neon glow gauge
   ====================================================================== */
.player-grid {
  grid-area:grid;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  padding:3px 3vw;
  z-index:1;
  overflow:hidden;
}
.grid-column {
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Player row */
.player-row {
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,255,255,.025);
  border-radius:3px;
  padding:3px 2vw;
  position:relative;
  flex:1;
  min-height:0;
  transition:background .3s;
}
.player-row:nth-child(even) { background:rgba(255,255,255,.04); }

.player-row.idle { opacity:.12; }
.player-row.waiting { opacity:1; }
.player-row.active  { opacity:1; background:rgba(255,50,50,.035); }
.player-row.finished { opacity:.7; }

/* Data line — italic, uniform, equal-spaced */
.player-data {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  width:100%;
  font-style:italic;
}

.p-name, .p-distance, .p-speed, .p-score, .p-distance-unit {
  font-size:clamp(15px, 2.6vh, 24px);
  font-weight:700;
  color:var(--white);
  white-space:nowrap;
  letter-spacing:var(--ls);
}
.p-name {
  flex:1.8;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:8em;
}
.p-distance {
  flex:2.2;
  font-weight:900;
  text-align:center;
}
.p-distance-unit {
  margin-left:2px;
}
.p-speed {
  flex:2.2;
  text-align:center;
}
.p-score {
  flex:1.8;
  font-weight:800;
  text-align:right;
  padding-left:12px;
}

/* Power gauge — bright glowing red bg, intense white neon fill */
.power-gauge {
  height:5px;
  background:rgba(255,40,40,.6);
  border-radius:3px;
  overflow:visible;
  margin-top:2px;
  box-shadow:0 0 4px rgba(255,0,0,.25);
}
.power-gauge-fill {
  height:100%;
  width:0%;
  border-radius:3px;
  background:#FFF;
  box-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 12px rgba(255,255,255,.8),
    0 0 20px rgba(255,255,255,.5),
    0 0 30px rgba(255,240,240,.25);
  transition:width .15s ease;
  animation:bar-glow 1.5s ease-in-out infinite;
}
@keyframes bar-glow {
  0%,100%{ box-shadow:0 0 5px rgba(255,255,255,1),0 0 12px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.5),0 0 30px rgba(255,240,240,.25); }
  50%{ box-shadow:0 0 8px rgba(255,255,255,1),0 0 18px rgba(255,255,255,.9),0 0 30px rgba(255,255,255,.6),0 0 42px rgba(255,240,240,.3); }
}
.power-gauge-fill.low {
  background:rgba(255,255,255,.8);
  box-shadow:0 0 5px rgba(255,255,255,.7), 0 0 12px rgba(255,255,255,.4), 0 0 20px rgba(255,240,240,.2);
}
.power-gauge-fill.mid {
  background:rgba(255,255,255,.92);
  box-shadow:0 0 6px rgba(255,255,255,.85), 0 0 16px rgba(255,255,255,.55), 0 0 26px rgba(255,240,240,.25);
}
.power-gauge-fill.high {
  background:#FFF;
  box-shadow:0 0 8px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,.7), 0 0 35px rgba(255,240,240,.35);
}
.power-gauge-fill.max {
  background:#FFF;
  box-shadow:0 0 10px rgba(255,255,255,1), 0 0 25px rgba(255,255,255,.9), 0 0 45px rgba(255,240,240,.5);
  animation:gauge-flash .2s ease infinite;
  height:8px; margin-top:-1.5px;
}
@keyframes gauge-flash { 0%,100%{opacity:1} 50%{opacity:.2} }

.p-idle {
  font-size:9px; color:rgba(255,255,255,.1); font-style:italic;
}

/* ======================================================================
   3. HIGH RANK BAR (19vh)
   #6: (SOLO) bigger but slightly smaller than MAN/WOMAN
   ====================================================================== */
.highrank-bar {
  grid-area:rank;
  display:flex;
  align-items:stretch;
  padding:2vh 2vw;
  gap:0;
  background:rgba(0,0,0,.95);
  border-top:3px solid var(--red);
  z-index:10;
}

.highrank-label {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(34px, 5vh, 60px);
  font-weight:900;
  font-style:italic;
  color:var(--red-b);
  text-shadow:0 0 18px rgba(255,0,0,.5), 0 0 40px rgba(255,0,0,.2);
  line-height:1.05;
  letter-spacing:-1px;
  min-width:10vw;
  text-align:center;
  margin-right:3vw;
  flex-shrink:0;
}

.rank-section {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}

.rank-header {
  font-size:clamp(24px, 3.8vh, 42px);
  font-weight:900;
  color:var(--white);
  letter-spacing:var(--ls);
  font-style:italic;
  display:flex;
  align-items:baseline;
  gap:4px;
  margin-bottom:6px;
}
.rank-header .rank-sub {
  font-size:.72em;
  font-weight:700;
  color:var(--white);
}

.rank-list {
  display:flex;
  flex-direction:column;
  gap:3px;
  overflow:hidden;
  font-style:italic;
}

.rank-item {
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:clamp(13px, 1.7vh, 18px);
  color:var(--white);
  white-space:nowrap;
  overflow:hidden;
  letter-spacing:var(--ls);
  transition:transform .3s ease, opacity .3s ease;
}
.rank-item .rank-number     { font-weight:900; color:var(--red-b); min-width:1.2em; }
.rank-item .rank-name       { font-weight:800; color:var(--white); }
.rank-item .rank-score      { font-weight:800; color:var(--white); letter-spacing:0; }
.rank-item .rank-score-unit { font-weight:800; color:var(--white); font-size:.85em; }
.rank-item .rank-detail     { font-weight:600; color:var(--white); font-size:.85em; }

/* Rank-up animation */
.rank-item.rank-up {
  animation:rank-up-flash .8s ease;
}
@keyframes rank-up-flash {
  0%   { background:rgba(255,215,0,.4); transform:scale(1.03); }
  30%  { background:rgba(255,215,0,.25); }
  100% { background:transparent; transform:scale(1); }
}

.rank-empty { font-size:10px; color:rgba(255,255,255,.15); font-style:italic; }

/* ===== FULLSCREEN COUNTDOWN OVERLAY ===== */
.countdown-overlay {
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.92);
  opacity:1;
  transition:opacity .5s;
}
.countdown-overlay.hidden {
  opacity:0;
  pointer-events:none;
}
.countdown-phase {
  font-size:clamp(48px,8vw,120px);
  font-weight:900;
  font-style:italic;
  color:var(--red-b);
  text-shadow:0 0 40px rgba(255,0,0,.5), 0 0 80px rgba(255,0,0,.2);
  letter-spacing:var(--ls);
  animation:pulse-text 1s ease infinite;
}
.countdown-number {
  font-size:clamp(120px,20vw,280px);
  font-weight:900;
  color:var(--white);
  text-shadow:0 0 40px rgba(255,0,0,.4);
  letter-spacing:0;
  line-height:1;
  animation:pulse-text 1s ease infinite;
}
@keyframes pulse-text {
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.05); opacity:.85}
}

/* READY state — big pulsing READY */
.countdown-ready {
  font-size:clamp(80px,14vw,200px);
  font-weight:900;
  font-style:italic;
  color:var(--red-b);
  text-shadow:0 0 60px rgba(255,0,0,.6), 0 0 120px rgba(255,0,0,.3);
  letter-spacing:.05em;
  animation:ready-pulse 1.5s ease-in-out infinite;
}
@keyframes ready-pulse {
  0%,100%{transform:scale(1); opacity:1; text-shadow:0 0 60px rgba(255,0,0,.6)}
  50%{transform:scale(1.08); opacity:.7; text-shadow:0 0 100px rgba(255,0,0,.9)}
}

/* START! zoom-burst */
.start-burst {
  font-size:clamp(60px,10vw,140px);
  font-weight:900;
  font-style:italic;
  color:var(--white);
  text-shadow:0 0 30px rgba(255,0,0,.6), 0 0 60px rgba(255,0,0,.3);
  letter-spacing:.1em;
  animation:start-zoom .6s cubic-bezier(.2,.8,.3,1) forwards;
  pointer-events:none;
}
@keyframes start-zoom {
  0%   { transform:scale(0.02); opacity:0; }
  20%  { opacity:1; }
  60%  { transform:scale(1.5); opacity:1; }
  100% { transform:scale(8); opacity:0; }
}

/* Ending burst — 3/2/1 (white) and STOP! (red): zoom from dot, no background */
.ending-burst {
  font-size:clamp(80px,14vw,220px);
  font-weight:900;
  font-style:italic;
  letter-spacing:.05em;
  animation:ending-zoom .85s cubic-bezier(.15,.8,.25,1) forwards;
  pointer-events:none;
}
.ending-burst.num  { color:#fff; text-shadow:0 0 40px rgba(255,100,100,.7); }
.ending-burst.stop { color:var(--red-b); text-shadow:0 0 40px rgba(255,0,0,.9), 0 0 80px rgba(255,0,0,.5); }
@keyframes ending-zoom {
  0%   { transform:scale(0.02); opacity:0; }
  15%  { opacity:1; }
  55%  { transform:scale(1.4); opacity:1; }
  100% { transform:scale(9); opacity:0; }
}

/* ===== Border glow ===== */
body::before {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  box-shadow:
    inset 0 0 60px rgba(200,0,0,.12),
    inset 0 0 120px rgba(100,0,0,.06);
}

/* ===== FINAL RANKING OVERLAY ===== */
.ranking-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4vh 4vw;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.ranking-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.ranking-overlay-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ro-logo {
  height: clamp(120px, 18vh, 250px);
  margin-bottom: 0;
  object-fit: contain;
  z-index: 10;
}

.ro-col-title {
  font-size: clamp(40px, 6.5vh, 80px);
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  margin-bottom: 3vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SOLO MODE */
.ro-solo-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  flex: 1;
  gap: 4vw;
  min-height: 0;
  margin-top: -6vh;
}

.ro-solo-col {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.ro-list-top3 {
  display: flex;
  flex-direction: column;
  gap: 2.5vh;
  margin-bottom: 3vh;
}

.ro-card-top3 {
  display: flex;
  flex-direction: column;
  border-left: 6px solid var(--red-b);
  padding-left: 1vw;
  min-height: clamp(60px, 10vh, 120px);
  justify-content: center;
}
.ro-card-top3.empty {
  border-left-color: transparent;
}

.ro-card-top3 .ro-rank {
  font-size: clamp(28px, 4vh, 48px);
  font-weight: 900;
  font-style: italic;
  color: var(--red-b);
  line-height: 1.1;
}

.ro-card-top3 .ro-name {
  font-size: clamp(32px, 5vh, 56px);
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.2;
}
.ro-card-top3 .ro-subname {
  font-size: clamp(16px, 2.5vh, 28px);
  font-weight: 700;
  font-style: italic;
  color: #ccc;
  margin-top: -4px;
}

.ro-card-top3 .ro-score {
  font-size: clamp(18px, 2.5vh, 32px);
  font-weight: 700;
  font-style: italic;
  color: #ddd;
  margin-top: 4px;
}

.ro-list-bottom2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2vw;
}

.ro-card-bottom2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ro-card-bottom2.empty {
  opacity: 0;
}

.ro-bottom-left {
  display: flex;
  flex-direction: column;
}

.ro-rank-small {
  font-size: clamp(20px, 2.8vh, 32px);
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.1;
}

.ro-name-small {
  font-size: clamp(20px, 2.8vh, 32px);
  font-weight: 900;
  font-style: italic;
  color: var(--white);
  line-height: 1.2;
}

.ro-subname-small {
  font-size: clamp(14px, 2vh, 22px);
  font-weight: 700;
  font-style: italic;
  color: #ccc;
  margin-top: -2px;
}

.ro-score-small {
  font-size: clamp(14px, 2vh, 24px);
  font-weight: 700;
  font-style: italic;
  color: #bbb;
  margin-top: 4px;
}

/* DUO MODE */
.ro-duo-title {
  margin-bottom: 7vh;
}

.ro-duo-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  align-items: center;
  gap: 7vh;
}

.ro-duo-top3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 4vw;
}

/* DUO MODE TEXT SIZES & ALIGNMENT */
.ro-duo-top3 .ro-card-top3 { margin: 0 auto; width: fit-content; }
.ro-duo-top3 .ro-card-top3 .ro-rank { font-size: clamp(36px, 5vh, 60px); }
.ro-duo-top3 .ro-card-top3 .ro-name { font-size: clamp(40px, 6.5vh, 70px); }
.ro-duo-top3 .ro-card-top3 .ro-subname { font-size: clamp(20px, 3vh, 34px); }
.ro-duo-top3 .ro-card-top3 .ro-score { font-size: clamp(24px, 3.5vh, 40px); }

.ro-duo-bottom2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 60%;
  gap: 6vw;
}

.ro-card-bottom2.duo {
  align-items: center;
  text-align: center;
}
.ro-card-bottom2.duo .ro-bottom-left {
  align-items: center;
}

.ro-duo-bottom2 .ro-rank-small { font-size: clamp(28px, 4vh, 48px); }
.ro-duo-bottom2 .ro-name-small { font-size: clamp(28px, 4vh, 48px); }
.ro-duo-bottom2 .ro-subname-small { font-size: clamp(20px, 3vh, 32px); }
.ro-duo-bottom2 .ro-score-small { font-size: clamp(20px, 3vh, 32px); }

.ro-footer {
  width: 100%;
  text-align: center;
  font-size: clamp(10px, 1.2vh, 16px);
  color: #888;
  margin-top: auto;
  padding-top: 2vh;
}