@import url('https://fonts.googleapis.com/css2?family=Anton&family=Black+Han+Sans&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

#trot-worldcup-app{
  --ink:#121114; --ink-2:#1b1a1f; --line:#2c2a33;
  --paper:#f4f2f7; --mute:#a9a4b4;
  --lime:#b9f36c; --violet:#9d7cf2; --pink:#e58bf0; --cyan:#4fe3f2; --mint:#5cef9a;
  --neon:linear-gradient(100deg,#a463ee 0%,#5fb8f3 38%,#4fe3f2 60%,#5cef9a 100%);
  --display:'Anton','Black Han Sans',sans-serif;
  --kr:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
  --body:'Pretendard',-apple-system,'Apple SD Gothic Neo',sans-serif;
  position:relative; max-width:720px; margin:0 auto; overflow:hidden;
  background:
    radial-gradient(120% 60% at 110% -10%, rgba(157,124,242,.35), transparent 60%),
    radial-gradient(90% 50% at -20% 105%, rgba(79,227,242,.18), transparent 60%),
    var(--ink);
  color:var(--paper); font-family:var(--body); line-height:1.5; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
#trot-worldcup-app::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:36px 36px;
}
#trot-worldcup-app *,#trot-worldcup-app *::before,#trot-worldcup-app *::after{box-sizing:border-box}
#trot-worldcup-app img{display:block;max-width:100%}
#trot-worldcup-app button{font-family:inherit;cursor:pointer}
#trot-worldcup-app a{color:var(--lime);text-decoration:none}
#trot-worldcup-app a:hover{color:var(--cyan)}
#trot-worldcup-app .hidden{display:none !important}
#trot-worldcup-app .screen{position:relative;z-index:1;padding:44px 24px 56px}

/* ---------- INTRO ---------- */
#trot-worldcup-app .intro{display:flex;flex-direction:column;gap:28px;min-height:100%}
#trot-worldcup-app .hero{position:relative;text-align:center}
#trot-worldcup-app .kicker{
  display:inline-block; padding:7px 22px; border:2px solid var(--pink); border-radius:999px;
  color:var(--pink); font-family:var(--body); font-weight:800; font-size:13px; letter-spacing:.12em;
}
#trot-worldcup-app .title{
  margin:22px 0 0; font-family:'Black Han Sans','Pretendard',sans-serif; font-weight:400; font-size:clamp(34px,7.4vw,54px);
  line-height:1.12; letter-spacing:-.01em; color:var(--paper);
}
#trot-worldcup-app .title em{
  font-style:normal; color:var(--lime);
}
#trot-worldcup-app .title .world{
  display:block; margin-top:10px; font-family:var(--display); font-size:clamp(64px,15vw,112px);
  line-height:.92; letter-spacing:.01em; transform:skewX(-10deg);
  background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(79,227,242,.25));
}
#trot-worldcup-app .desc{margin:18px auto 0;max-width:400px;font-size:15px;color:var(--mute);text-wrap:pretty}

#trot-worldcup-app .poster-board{position:relative;margin:56px auto 0;width:100%;max-width:560px}
#trot-worldcup-app .poster-board::before{
  content:""; position:absolute; left:50%; top:50%; width:60%; aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg); border-radius:18px;
  background:linear-gradient(135deg,rgba(164,99,238,.55),rgba(79,227,242,.35));
  box-shadow:0 0 0 3px rgba(79,227,242,.6), 0 0 60px rgba(157,124,242,.45);
}
#trot-worldcup-app .fighter-strip{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0}
#trot-worldcup-app .fighter{position:relative;overflow:hidden;aspect-ratio:2/3}
#trot-worldcup-app .fighter img{width:100%;height:100%;object-fit:cover}
#trot-worldcup-app .fighter.left{clip-path:polygon(0 0,100% 0,88% 100%,0 100%);margin-right:-6%}
#trot-worldcup-app .fighter.right{clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);margin-left:-6%}
#trot-worldcup-app .fighter.left::after,#trot-worldcup-app .fighter.right::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(18,17,20,.85),transparent 45%);
}
#trot-worldcup-app .versus-word{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%) skewX(-12deg);
  font-family:var(--display); font-size:clamp(84px,20vw,148px); line-height:1;
  color:var(--lime); -webkit-text-stroke:3px var(--ink);
  text-shadow:6px 6px 0 var(--violet);
}

#trot-worldcup-app .intro-bottom{display:flex;flex-direction:column;align-items:center;gap:14px}
#trot-worldcup-app .start-btn,#trot-worldcup-app .restart-btn{
  position:relative; border:0; padding:18px 40px; min-height:56px;
  background:var(--lime); color:var(--ink); font-family:var(--kr); font-weight:800; font-size:20px; letter-spacing:-.02em;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);
  box-shadow:none; transition:transform .18s ease, background .18s ease;
}
#trot-worldcup-app .start-btn:hover,#trot-worldcup-app .restart-btn:hover{background:var(--cyan);transform:translateY(-2px)}
#trot-worldcup-app .small-note{margin:0;font-size:13px;color:var(--mute)}

/* ---------- GAME ---------- */
#trot-worldcup-app .game{display:flex;flex-direction:column;gap:20px}
#trot-worldcup-app .game-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
#trot-worldcup-app .game-label{
  font-family:var(--display); font-size:34px; line-height:1; transform:skewX(-10deg); transform-origin:left;
  background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#trot-worldcup-app .game-sub{margin-top:8px;font-size:14px;color:var(--mute)}
#trot-worldcup-app .progress{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
#trot-worldcup-app .progress strong{font-family:var(--display);font-weight:400;font-size:22px;color:var(--mute);letter-spacing:.02em}
#trot-worldcup-app .progress strong span{font-size:34px;color:var(--lime)}
#trot-worldcup-app .progress > span{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--violet)}

#trot-worldcup-app .match-frame{
  position:relative; padding:18px; border-radius:20px; background:var(--ink-2);
  border:2px solid transparent;
  background-image:linear-gradient(var(--ink-2),var(--ink-2)),var(--neon);
  background-origin:border-box; background-clip:padding-box,border-box;
}
#trot-worldcup-app .match-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
#trot-worldcup-app .match-top h2{margin:0;font-family:var(--kr);font-weight:800;font-size:22px}
#trot-worldcup-app .stage{
  padding:5px 14px; border-radius:999px; background:var(--violet); color:var(--ink);
  font-family:var(--display); font-size:15px; letter-spacing:.06em;
}
#trot-worldcup-app .vs-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#trot-worldcup-app .candidate{
  position:relative; display:block; padding:0; border:0; border-radius:14px; overflow:hidden;
  background:#000; aspect-ratio:2/3; color:var(--paper); text-align:left;
  outline:3px solid transparent; outline-offset:-3px; transition:transform .2s ease, outline-color .2s ease, box-shadow .2s ease;
}
#trot-worldcup-app .candidate img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
#trot-worldcup-app .candidate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,17,20,.92) 0%,rgba(18,17,20,0) 50%);pointer-events:none}
#trot-worldcup-app .candidate:hover,#trot-worldcup-app .candidate:focus-visible{outline-color:var(--lime);box-shadow:0 12px 40px rgba(185,243,108,.25)}
#trot-worldcup-app .candidate:hover img{transform:scale(1.04)}
#trot-worldcup-app .candidate-info{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;gap:2px;padding:16px}
#trot-worldcup-app .candidate-name{display:flex;flex-direction:column;gap:4px;font-family:var(--kr);font-weight:800;font-size:clamp(22px,5vw,32px);line-height:1.1}
#trot-worldcup-app .candidate-group{font-size:.48em;font-weight:600;line-height:1.2;letter-spacing:.04em;color:var(--cyan)}
#trot-worldcup-app .candidate-group:empty{display:none}
#trot-worldcup-app .pick{
  align-self:flex-start; margin-top:10px; padding:5px 14px; background:var(--lime); color:var(--ink);
  font-family:var(--display); font-size:14px; letter-spacing:.1em;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
}
#trot-worldcup-app .candidate.right .pick{background:var(--pink)}
#trot-worldcup-app .vs-chip{
  position:absolute; left:50%; top:46%; z-index:2; width:64px; height:64px;
  display:grid; place-items:center; transform:translate(-50%,-50%) rotate(45deg);
  background:var(--ink); border:3px solid var(--cyan); border-radius:10px;
  box-shadow:0 0 24px rgba(79,227,242,.55); font-size:0;
}
#trot-worldcup-app .vs-chip::before{
  content:"VS"; transform:rotate(-45deg) skewX(-10deg); font-family:var(--display); font-size:26px; color:var(--lime);
}
#trot-worldcup-app .final-overlay{
  position:absolute; inset:-2px; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; border-radius:14px;
  background:radial-gradient(80% 60% at 50% 50%,rgba(157,124,242,.35),transparent 70%),var(--ink);
}
#trot-worldcup-app .final-kicker{
  padding:6px 18px; border:2px solid var(--pink); border-radius:999px; color:var(--pink);
  font-weight:800; font-size:13px; letter-spacing:.16em;
}
#trot-worldcup-app .final-title{
  margin:6px 0 0; font-family:var(--display); font-weight:400; font-size:clamp(72px,18vw,130px); line-height:.95;
  transform:skewX(-10deg); background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#trot-worldcup-app .final-desc{margin:4px 0 0;font-size:15px;color:var(--paper)}
#trot-worldcup-app .final-wait{width:120px;height:4px;margin-top:16px;border-radius:2px;background:var(--line);overflow:hidden;position:relative}
#trot-worldcup-app .final-wait::after{content:"";position:absolute;inset:0;width:40%;background:var(--neon);animation:iwcWait 1.1s ease-in-out infinite}
@keyframes iwcWait{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
#trot-worldcup-app .game-guide{margin:0;text-align:center;font-size:13px;color:var(--mute)}

/* ---------- RESULT ---------- */
#trot-worldcup-app .result{display:flex;flex-direction:column;gap:36px}
#trot-worldcup-app .result-hero{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:24px;align-items:end}
#trot-worldcup-app .result-hero img{
  width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:16px;
  box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--lime),14px 14px 0 6px var(--violet);
}
#trot-worldcup-app .result-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:6px; margin-left:10px; }
#trot-worldcup-app .winner-kicker{
  padding:6px 18px; border:2px solid var(--pink); border-radius:999px; color:var(--pink);
  font-weight:800; font-size:13px; letter-spacing:.16em;
}
#trot-worldcup-app .winner-name{
  margin:0; font-family:var(--kr); font-weight:800; font-size:clamp(48px,11vw,84px); line-height:1;
  background:var(--neon); -webkit-background-clip:text; background-clip:text; color:transparent;
}
#trot-worldcup-app .winner-name.winner-name--long{font-size:clamp(30px,5.8vw,46px);letter-spacing:-.04em;white-space:nowrap}
#trot-worldcup-app .rank-comment{font-size:15px;color:var(--paper);text-wrap:pretty}
#trot-worldcup-app .winner-fan-cafe{
  display:flex; align-items:center; justify-content:center; gap:7px; width:fit-content; margin-top:12px;
  padding:9px 13px; border:1px solid rgba(255,75,148,.65); border-radius:999px;
  background:rgba(255,75,148,.24); color:var(--paper) !important; font-weight:600; font-size:13px;
  backdrop-filter:blur(10px); transition:transform .2s ease, background .2s ease;
  animation:iwcWinnerCafeBeat .65s ease-in-out infinite alternate;
}
#trot-worldcup-app .winner-fan-cafe::before{
  content:""; display:block; width:17px; height:17px; flex:0 0 17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4b94' d='M12 21s-7.2-4.6-9.4-9C.9 8.8 2.7 5 6.4 5c2.2 0 3.7 1.2 4.6 2.4C11.9 6.2 13.4 5 15.6 5c3.7 0 5.5 3.8 3.8 7-2.2 4.4-9.4 9-9.4 9z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:iwcWinnerHeartBeat .65s ease-in-out infinite alternate;
}
#trot-worldcup-app .winner-fan-cafe:hover,#trot-worldcup-app .winner-fan-cafe:focus-visible{
  background:rgba(255,75,148,.38); transform:translateY(-3px) scale(1.03); animation:none;
}
@keyframes iwcWinnerCafeBeat{from{transform:scale(1)}to{transform:scale(1.03)}}
@keyframes iwcWinnerHeartBeat{from{transform:scale(1)}to{transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){
  #trot-worldcup-app .winner-fan-cafe{transition:none;animation:none}
  #trot-worldcup-app .winner-fan-cafe:hover,#trot-worldcup-app .winner-fan-cafe:focus-visible{transform:none}
  #trot-worldcup-app .winner-fan-cafe::before{animation:none}
}

#trot-worldcup-app .result-index{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#trot-worldcup-app .result-index a{
  display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:12px 18px;
  border:1px solid var(--line); border-radius:12px; background:var(--ink-2);
  color:var(--paper); font-weight:700; font-size:15px; transition:border-color .2s;
}
#trot-worldcup-app .result-index a span{color:var(--lime)}
#trot-worldcup-app .result-index a:hover{border-color:var(--lime);color:var(--paper)}

#trot-worldcup-app .result-section{scroll-margin-top:20px}
#trot-worldcup-app .section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--line)}
#trot-worldcup-app .section-title h3{margin:0;font-family:var(--kr);font-weight:800;font-size:26px}
#trot-worldcup-app .section-title span{font-family:var(--display);font-size:16px;letter-spacing:.08em;color:var(--violet);transform:skewX(-10deg)}

#trot-worldcup-app .top4-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#trot-worldcup-app .top4-item{position:relative;display:flex;flex-direction:column;gap:2px}
#trot-worldcup-app .top4-item img{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:12px;margin-bottom:8px}
#trot-worldcup-app .top4-item:first-child img{outline:3px solid var(--lime);outline-offset:-3px}
#trot-worldcup-app .top4-item small{font-family:var(--display);font-size:13px;letter-spacing:.08em;color:var(--cyan)}
#trot-worldcup-app .top4-item:first-child small{color:var(--lime)}
#trot-worldcup-app .top4-item b{font-size:16px;font-weight:800}

#trot-worldcup-app .data-note{margin:0 0 14px;font-size:13px;color:var(--mute)}
#trot-worldcup-app .ranking{display:flex;flex-direction:column;gap:6px}
#trot-worldcup-app .rank-row{
  display:grid; grid-template-columns:40px 72px minmax(0,1fr) 64px; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px; background:var(--ink-2);
}
#trot-worldcup-app .rank-num{font-family:var(--display);font-size:20px;color:var(--mute);transform:skewX(-10deg)}
#trot-worldcup-app .rank-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trot-worldcup-app .bar-track{height:8px;border-radius:4px;background:#2a2830;overflow:hidden}
#trot-worldcup-app .bar{height:100%;border-radius:4px;background:var(--violet)}
#trot-worldcup-app .rank-vote{text-align:right;font-family:var(--display);font-size:16px;letter-spacing:.02em;color:var(--paper)}
#trot-worldcup-app .rank-row.top-rank{background:linear-gradient(90deg,rgba(157,124,242,.18),var(--ink-2) 70%)}
#trot-worldcup-app .rank-row.top-rank .rank-num{color:var(--lime);font-size:24px}
#trot-worldcup-app .rank-row.top-rank .bar{background:var(--neon)}

#trot-worldcup-app .result-share{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;border-radius:16px;border:1px dashed var(--line)}
#trot-worldcup-app .result-share-title{font-family:var(--kr);font-weight:800;font-size:20px;text-align:center}
#trot-worldcup-app .result-share-list{display:flex;gap:12px;margin:0;padding:0;list-style:none}
#trot-worldcup-app .result-share-btn{
  display:block; width:50px; height:50px; padding:0; border:0; border-radius:50%;
  background-color:transparent; background-position:center; background-size:cover; background-repeat:no-repeat;
  transition:transform .18s;
}
#trot-worldcup-app .result-share-btn:hover{transform:translateY(-3px) rotate(-6deg)}
#trot-worldcup-app .result-share-btn.kakao{background-image:url("https://image.ajunews.com/images/site/news/kr/visual/26/img/icon_kakao.png")}
#trot-worldcup-app .result-share-btn.band{background-image:url("https://image.ajunews.com/images/site/news/kr/visual/26/img/icon_band.png")}
#trot-worldcup-app .result-share-btn.twitter{background-image:url("https://image.ajunews.com/images/site/news/kr/visual/26/img/icon_twitter.png")}
#trot-worldcup-app .result-share-btn.url{background-image:url("https://image.ajunews.com/images/site/news/kr/visual/26/img/icon_url.png")}
#trot-worldcup-app .result-share-notice{margin:0;min-height:1.5em;font-size:13px;color:var(--lime)}

#trot-worldcup-app .share-card{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:32px 24px; text-align:center;
  border-radius:20px; overflow:hidden; background:var(--violet); color:var(--ink);
}
#trot-worldcup-app .share-card::before{
  content:""; position:absolute; right:-60px; top:-60px; width:180px; height:180px; border-radius:24px;
  transform:rotate(45deg); background:var(--ink); opacity:.12;
}
#trot-worldcup-app .share-card strong{position:relative;font-family:var(--kr);font-weight:800;font-size:24px}
#trot-worldcup-app .share-card p{position:relative;margin:0 0 8px;max-width:420px;font-size:14px;font-weight:500}
#trot-worldcup-app .share-card .restart-btn{background:var(--ink);color:var(--lime)}
#trot-worldcup-app .share-card .restart-btn:hover{background:var(--lime);color:var(--ink)}

#trot-worldcup-app .credits-photo{margin:0;font-size:12px;color:var(--mute)}
#trot-worldcup-app .credits-byline{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:-24px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}
#trot-worldcup-app .credits-byline > div{display:flex;gap:8px}
#trot-worldcup-app .credits-role{color:var(--mute)}
#trot-worldcup-app .credits-name{font-weight:700}

@media (max-width:560px){
  #trot-worldcup-app .screen{padding:32px 16px 44px}
  #trot-worldcup-app .candidate-group{display:none}
  #trot-worldcup-app .result-hero{grid-template-columns:1fr;gap:28px}
  #trot-worldcup-app .result-hero img{max-width:280px;margin:0 auto}
  #trot-worldcup-app .result-copy{align-items:center;text-align:center}
  #trot-worldcup-app .top4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #trot-worldcup-app .rank-row{grid-template-columns:30px 60px minmax(0,1fr) 52px;gap:8px;padding:9px 10px}
  #trot-worldcup-app .vs-chip{width:50px;height:50px}
  #trot-worldcup-app .vs-chip::before{font-size:20px}
  #trot-worldcup-app .match-frame{padding:12px}
  #trot-worldcup-app .vs-grid{gap:8px}
}