/* ══════════════════════════════════════
   RESET & BASE
   Figma: #F5F5F5, column, gap 24→19px
   ══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --f: 'Pretendard', sans-serif;
  --blue: #0096FA;
  --count-blue: #0099FF;
  --dark: #474747;
  --gray: #858585;
  --bg: #F5F5F5;
  --white: #FFFFFF;
  --correct: #0DBC00;
  --wrong: #F55F5F;
}

body {
  font-family: var(--f);
  background: var(--bg);
  min-height: 100vh;
  zoom: 0.9;
  -ms-overflow-style: none;
 }
::-webkit-scrollbar {
  display: none;
}

.hidden { display: none !important; }

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 100vh;
  overflow-y: auto;
}

/* ══════════════════════════════════════
   LOGO
   Figma: h:165, 40px Bold #0096FA
   80%: h:132, 32px
   ══════════════════════════════════════ */
.logo {
  width: 80%;
  height: 100px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.logo-text {
  font-size: 32px;
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  letter-spacing: -1.28px;
  line-height: normal;
}

/* ══════════════════════════════════════
   SCORE BAR
   Figma: Frame 4: w:1350(=3 cards), gap:64→51
   점수: 36px Medium #858585
   값: 64px Bold #474747
   나의 최고 점수: 64px Bold #858585
   80% sizes applied
   ══════════════════════════════════════ */
.score-bar {
  width: 100%;
  max-width: 1080px;    /* 1350×0.8 */
  padding: 0 2px;
  display: flex;
  gap: 51px;
  margin-bottom: 40px;
  align-items: center;
  align-self: center;
}
.score-group { display: flex; flex-direction: column; }
.score-label {
  font-size: 24px;
  font-weight: 500;
  color: var(--gray);
  letter-spacing: -2.02px;
  line-height: normal;
}
.score-value {
  font-size: 46px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -3.58px;
  line-height: normal;
}
.highscore-value {
  font-size: 46px;
  margin-top: 4px;
  font-weight: 700;
  color: var(--gray);
  letter-spacing: -3.58px;
  line-height: normal;
}

/* ══════════════════════════════════════
   GAME SCREEN — fills remaining height, centers content
   ══════════════════════════════════════ */
#game-screen {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding-top: 10px;
}

/* ══════════════════════════════════════
   MAIN GAME AREA
   Figma: Main w:1920 h:840, px:40
   80%: max-w:1536, px:32
   ══════════════════════════════════════ */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 20px;
}
.game-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 1200px;
}

/* ══════════════════════════════════════
   CARD
   Figma: 450×623, rounded:27, gap:35,
   shadow: 0px 14px 40px -21px rgba(0,0,0,0.17)
   Image: 450×351, opacity:0.8
   80%: 360×498, rounded:22, gap:28
   Image: 360×281
   ══════════════════════════════════════ */
.card {
  width: 360px;
  height: 498px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid transparent;
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.17);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.card:hover {
  transform: scale(1.02);
}

/* Result states — applied only to clicked card */
.card.correct {
  border-color: var(--correct);
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.17),
              0px 4px 45px 0px rgba(13,188,0,0.2);
}
.card.wrong {
  border-color: var(--wrong);
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.17),
              0px 4px 45px 0px rgba(245,95,95,0.2);
}

.card-img {
  width: 360px;
  height: 281px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.8;
  transition: opacity 0.3s, transform 0.3s;
}
.card:hover .card-img img {
  opacity: 1;
  transform: scale(1.02);
}
.img-source {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(71, 71, 71, 0.6);
  text-decoration: none;
  z-index: 2;
  cursor: pointer;
  transition: color 0.2s;
}
.img-source:hover {
  color: rgba(0, 153, 255, 1);
  text-decoration: underline;
}

/* ══════════════════════════════════════
   INFO
   Figma: 287×187, absolute children
   JP: 32px Bold #474747 top:0 w:449 tracking:-2.24
   KR: 24px Medium #858585 top:49 tracking:-1.68
   Count: 48px Bold top:98 tracking:-3.36
   "작품": 24px Medium #858585 top:163 tracking:-1.68
   80%: 230×150, w:359
   ══════════════════════════════════════ */
.info {
  width: 230px;
  height: 150px;
  position: relative;
  flex-shrink: 0;
  text-align: center;
  line-height: normal;
}
.info > p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 359px;
  margin: 0;
  font-family: var(--f);
}
.info-jp {
  top: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -1.79px;
}
.info-kr {
  top: 39px;
  font-size: 19px;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -1.34px;
}
.info-count {
  top: 78px;
  font-size: 38px;
  font-weight: 700;
  color: var(--count-blue);
  letter-spacing: -2.69px;
  transition: color 0.3s;
}
.info-label {
  top: 130px;
  font-size: 19px;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -1.34px;
}

/* Unknown count state */
.info-count.unknown { color: var(--gray); }
.info-count.wrong-color { color: var(--wrong); }

/* ══════════════════════════════════════
   VS SECTION
   Figma: 450×237, rounded:27
   Frame: 174×auto, gap:29
   Q: 24px Bold #858585 tracking:-1.68
   VS: 64px Bold #474747 tracking:-4.48
   80%: 360×190, 139px, gap:23
   ══════════════════════════════════════ */
.vs-section {
  width: 360px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22px;
  flex-shrink: 0;
  z-index: -1;
}
.vs-frame {
  display: flex;
  flex-direction: column;
  gap: 23px;
  width: 220px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vs-question {
  font-size: 24px;
  font-weight: 500;
  color: var(--gray);
  letter-spacing: -1.34px;
  line-height: normal;
}
.vs-question p { margin: 0; }
.vs-text {
  font-size: 51px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -3.58px;
  line-height: normal;
  margin: 0;
}

/* ══════════════════════════════════════
   GAME OVER — responsive, mirrors main game screen
   Scale: 80% of Figma (same as main game)
   ══════════════════════════════════════ */
#gameover-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding-top: 30px;
}

/* "게임 오버" title (mirrors .logo structure) */
.go-header {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 20px;
}
.go-title {
  font-size: 41px;      /* 64 × 0.8 */
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -3px;
  line-height: normal;
  margin: 0;
}

/* Main row — mirrors .main + .game-row */
.go-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 96px;            /* 120 × 0.8 */
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

/* Left card — mirrors .card (360×498, same scale) */
.go-card {
  width: 360px;
  height: 498px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid transparent;
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.17);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}


.go-card-img {
  width: 360px;
  height: 281px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.go-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0.8;
}

/* Info block: column, space-between */
.go-info {
  width: 230px;
  height: 150px;
  position: relative;
  flex-shrink: 0;
  text-align: center;
  line-height: normal;
}
.go-info > p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 359px;
  margin: 0;
  font-family: var(--f);
}
.go-info-label {
  top: 130px;
  font-size: 19px;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -1.34px;
}
.go-info-count {
  top: 78px;
  font-size: 38px;
  font-weight: 700;
  color: var(--count-blue);
  letter-spacing: -2.69px;
  transition: color 0.3s;
}
.go-info-kr {
  top: 39px;
  font-size: 19px;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -1.34px;
}
.go-info-jp {
  top: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -1.79px;
}

/* Right panel: flex:1, mirrors right portion */
.go-right {
  flex: 1;
  max-width: 504px;     /* 630 × 0.8 */
  display: flex;
  flex-direction: column;
  gap: 50px;            /* 35 × 0.8 */
}

/* Scores row — Frame 15 */
.go-scores {
  display: flex;
  flex-direction: row;
  gap: 80px;
  align-items: flex-start;
  width: 100%;
}

.go-slabel {
  font-size: 24px;      /* 36 × 0.8 */
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -2.02px;
  line-height: normal;
  margin: 0 0 4px;
}
.go-sval {
  font-size: 42px;      /* 64 × 0.8 */
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -3.57px;
  line-height: normal;
  margin: 0;
}
.go-hsval {
  font-size: 42px;      /* 64 × 0.8 */
  font-weight: 600;
  color: var(--gray);
  letter-spacing: -3px;
  line-height: normal;
  margin: 0;
}

/* Tag section — Frame 14 */
.go-tags-section {
  display: flex;
  flex-direction: column;
  gap: 25px;            /* 31 × 0.8 */
  width: 100%;
  flex: 1;
}

.go-taglabel {
  font-size: 24px;      /* 36 × 0.8 */
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -2.02px;
  line-height: normal;
  margin: 0;
}

/* Tag list — Frame 7 */
.go-taglist {
  display: flex;
  flex-direction: column;
  gap: 12px;            /* 15 × 0.8 */
  padding: 0px;         /* 10 × 0.8 */
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  -ms-overflow-style: none;
}
.go-taglist ::-webkit-scrollbar{
  display:none;
}

/* Tag item row */
.go-tagitem {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;            /* 27 × 0.8 */
  width: 100%;
  min-height: 71px;     /* 89 × 0.8 */
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

/* Thumbnail */
.go-thumb {
  width: 68px;          /* 89 × 0.8 */
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.go-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tag text */
.go-tjp {
  font-size: 26px;      /* 32 × 0.8 */
  font-weight: 600;
  color: var(--dark);
  letter-spacing: -1.79px;
  line-height: normal;
  margin: 0;
}
.go-tkr {
  font-size: 19px;      /* 24 × 0.8 */
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -1.34px;
  line-height: normal;
  margin: 0;
}

/* RetryButton footer */
.go-footer {
  width: 100%;
  height: 153px;        /* 191 × 0.8 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

/* Button: 278×79 → 222×63, radius:24→19 */
.go-btn {
  font-family: var(--f);
  font-size: 24px;      /* 32 × 0.8 */
  font-weight: 500;
  color: #F5F5F5;
  background: #0099FF;
  letter-spacing: -1.79px;
  width: 200px;         /* 278 × 0.8 */
  height: 63px;         /* 79 × 0.8 */
  border-radius: 19px;  /* 24 × 0.8 */
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.17);
}
.go-btn:hover { background: #0080d6; }

/* ══════════════════════════════════════
   START SCREEN
   Figma: Slide 16:9-6, bg #F5F5F5
   ══════════════════════════════════════ */
#start-screen {
  width: 100%;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

/* Center content */
.start-content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Title: Figma 82px @ 2134px canvas → ~40px */
.start-title {
  font-size: 55px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.04em;
  line-height: 1.18;
  margin: 0;
}

/* Description: Figma 36px → ~18px */
.start-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--gray);
  letter-spacing: -0.04em;
  line-height: 1.6;
  margin: 0;
}

/* Play button: matches go-btn sizing */
#start-btn {
  font-family: var(--f);
  font-size: 24px;
  font-weight: 500;
  color: #F5F5F5;
  background: var(--count-blue);
  letter-spacing: -0.07em;
  width: 185px;
  height: 63px;
  border-radius: 19px;
  border: none;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.17);
  margin-top: 30px;
}
#start-btn:hover {
  background: #0080d6;
  transform: scale(1.03);
}

/* Disclaimer at bottom */
.start-disclaimer {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 11px;
  font-weight: 300;
  color: #AAAAAA;
  letter-spacing: -0.04em;
  line-height: 1.7;
  white-space: nowrap;
  z-index: 1;
}

/* Floating tag chips (injected by JS) */
.floating-tag {
  position: absolute;
  border-radius: 15px;
  padding: 12px 22px;
  font-family: var(--f);
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.04em;
  white-space: nowrap;
  box-shadow: 0px 11px 32px -17px rgba(0,0,0,0.22);
  pointer-events: none;
  z-index: 0;
  will-change: left, top;
  transition: opacity 0.5s ease;
}