@font-face {
  font-family: 'OneStoreMobileGothicTitleFont';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
  font-weight: normal;
  font-display: swap;
}

:root {
  --ink: #050505;
  --purple: #6525f5;
  --teal: #17d8b4;
  --pink: #f84291;
  --yellow: #ffd21a;
  --paper: #fffdf8;
}

* {
  box-sizing: border-box;
}

html {
  background: #191326;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  display: grid;
  place-items: start center;
  color: var(--ink);
  background: #191326;
  font-family: 'OneStoreMobileGothicTitleFont', "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.game-shell {
  position: relative;
  width: min(100%, 470px);
  min-height: 100svh;
  overflow: hidden;
  padding: 32px 16px 17px;
  background:
    radial-gradient(circle at 18% 21%, rgb(133 64 255 / 0.75), transparent 26%),
    radial-gradient(circle at 83% 47%, rgb(88 12 221 / 0.55), transparent 29%),
    linear-gradient(135deg, #7b2ff6 0%, #5a20ee 55%, #7024f4 100%);
  border: 2px solid var(--ink);
  border-radius: 28px;
  box-shadow: inset 0 0 28px rgb(34 0 105 / 0.25);
  isolation: isolate;
}

.game-shell::after {
  content: "";
  position: absolute;
  bottom: -31px;
  left: -20px;
  width: 82px;
  height: 69px;
  z-index: -1;
  border: 3px solid #000;
  border-radius: 46% 54% 37% 63%;
  background:
    radial-gradient(circle at 35% 38%, #000 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 55%, #000 0 2px, transparent 2.5px),
    var(--teal);
  transform: rotate(17deg);
}

.hero {
  position: relative;
  height: 164px;
  margin-top: -16px;
  z-index: 1;
}

.hero h1 {
  position: absolute;
  top: 26px;
  left: 68px;
  right: -5px;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: clamp(41px, 12vw, 56px);
  font-weight: normal;
  line-height: 0.83;
  letter-spacing: -5px;
  transform: rotate(-1deg);
}

.hero h1 span {
  display: block;
  -webkit-text-stroke: 3px #050505;
  paint-order: stroke fill;
}

.title-yellow {
  color: var(--yellow);
  text-shadow: 5px 5px 0 #050505, 8px 8px 0 #050505;
}

.title-white {
  margin-top: 10px;
  color: #fff;
  text-shadow: 5px 5px 0 #050505, 8px 8px 0 #050505;
}

.clapper {
  position: absolute;
  top: 4px;
  left: 10px;
  z-index: 5;
  width: 95px;
  height: 66px;
  transform: rotate(-7deg);
  filter: drop-shadow(3px 4px 0 #000);
}

.clapper__top,
.clapper__body {
  position: absolute;
  display: block;
  border: 3px solid #000;
}

.clapper__top {
  top: 0;
  left: -8px;
  width: 105px;
  height: 25px;
  transform: rotate(-13deg);
  transform-origin: left bottom;
  background: repeating-linear-gradient(115deg, #050505 0 14px, #fff 14px 26px);
}

.clapper__body {
  inset: 22px 0 0 5px;
  background: linear-gradient(145deg, #16d4b4, #0ab493);
}

.clapper__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 13px;
  border-bottom: 3px solid #000;
  background: repeating-linear-gradient(60deg, #050505 0 12px, #fff 12px 23px);
}

.speech {
  position: absolute;
  left: 5px;
  bottom: 22px;
  transform: translateX(calc(70% - 12px)) rotate(-6deg);
  display: grid;
  width: 59px;
  height: 51px;
  place-items: center;
  padding-bottom: 2px;
  background: white;
  border: 3px solid #000;
  border-radius: 50%;
  font-size: 27px;
  filter: drop-shadow(3px 4px 0 #000);
}

.speech::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: -8px;
  width: 13px;
  height: 13px;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  background: #fff;
  transform: rotate(34deg) skew(-12deg);
}

.hero__sparkle {
  position: absolute;
  color: #ffe024;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  line-height: 1;
}

.hero__sparkle--large {
  top: -1px;
  right: 6px;
  font-size: 64px;
  transform: rotate(-7deg);
}

.hero__sparkle--small {
  top: 50px;
  right: 54px;
  color: #fff;
  font-size: 29px;
}

.scoreboard {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.04fr 1fr 1.03fr;
  gap: 4px;
  margin: 0 0 11px;
  filter: drop-shadow(4px 6px 0 #070707);
}

.status-card {
  height: 84px;
  padding: 12px 13px 8px;
  overflow: hidden;
  border: 3px solid #000;
  border-radius: 9px;
  background: #fff;
}

.status-card--stage {
  background: linear-gradient(130deg, #1cdbb9, #16cfae);
}

.status-card--lives {
  background: linear-gradient(130deg, #ffdc20, #ffcc10);
}

.status-card--hint {
  background: linear-gradient(130deg, #ff4b9a, #f23d88);
}

.status-label {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: normal;
  letter-spacing: -1px;
}

.status-card strong {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(31px, 9.8vw, 44px);
  font-weight: normal;
  line-height: 0.9;
  letter-spacing: -3px;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  text-shadow: 2px 3px 0 #000;
}

.stage-total {
  margin-left: 3px;
  font-size: 15px;
  font-weight: normal;
}

.hearts {
  display: flex;
  gap: 2px;
  margin-top: 9px;
  white-space: nowrap;
}

.hearts span {
  color: #ff4d91;
  font-size: clamp(28px, 8.3vw, 40px);
  line-height: 0.7;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
}

.progress-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  height: 31px;
  margin-bottom: calc(17px + 31px);
  padding: 0 14px;
  background: #fff;
  border: 2.5px solid #000;
  border-radius: 8px;
  box-shadow: 3px 5px 0 #000;
  font-size: 12px;
  font-weight: normal;
}

.progress-track {
  position: relative;
  display: flex;
  height: 13px;
  overflow: hidden;
  border: 2px solid #aaa;
  border-radius: 999px;
  background: #e2e2e2;
}

.progress-track i {
  z-index: 2;
  flex: 1;
  border-right: 2px solid rgb(255 255 255 / 0.55);
}

.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 44.4%;
  background: linear-gradient(90deg, #12d7b5, #1dd6b9);
  border-right: 2px solid #000;
}

.quiz-card {
  position: relative;
  z-index: 2;
  height: 171px;
  background: var(--paper);
  border: 3px solid #000;
  border-radius: 17px;
  box-shadow: 3px 6px 0 #000;
}

.hint-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 5;
  min-width: 68px;
  height: 32px;
  padding: 0 10px;
  transform: translateX(-50%);
  border: 2.5px solid #000;
  border-radius: 8px;
  background: linear-gradient(#ffdd29, #ffd015);
  box-shadow: 2px 3px 0 #000;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

.hint-badge:active,
.submit-button:active {
  transform: translateY(2px);
  box-shadow: 1px 2px 0 #000;
}

.hint-badge:active {
  transform: translate(-50%, 2px);
}

.emoji-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: 100%;
  padding: 14px 25px 6px;
  text-align: center;
}

.emoji-row span {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: clamp(43px, 13.5vw, 63px);
  line-height: 1;
  filter: drop-shadow(1px 2px 0 rgb(0 0 0 / 0.35));
  transform-origin: center;
  transition: transform 180ms ease;
}

.emoji-row span:nth-child(1) { transform: rotate(-2deg); }
.emoji-row span:nth-child(2) { transform: scale(1.07); }
.emoji-row span:nth-child(3) { transform: scale(1.04) rotate(-3deg); }
.emoji-row span:nth-child(4) { transform: rotate(8deg); }
.emoji-row span:hover { transform: scale(1.15); }

.attention {
  position: absolute;
  top: 18px;
  width: 28px;
  height: 24px;
}

.attention::before,
.attention::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 14px;
  background: #000;
  border-radius: 3px;
}

.attention--left { left: 14px; transform: rotate(-28deg); }
.attention--right { right: 14px; transform: rotate(28deg); }
.attention::before { left: 5px; top: 4px; transform: rotate(-18deg); }
.attention::after { right: 5px; top: 0; transform: rotate(12deg); }

.side-shape {
  position: absolute;
  top: 54%;
  z-index: 4;
}

.side-shape--triangle {
  left: -9px;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 27px solid #000;
  transform: translateY(-50%);
}

.side-shape--triangle::after {
  content: "";
  position: absolute;
  top: -13px;
  left: -24px;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 21px solid #ff4b93;
}

.side-shape--circle {
  right: -10px;
  width: 31px;
  height: 31px;
  border: 3px solid #000;
  border-radius: 50%;
  background: var(--teal);
  transform: translateY(-50%);
}

.question-bubble {
  position: relative;
  z-index: 5;
  width: 61%;
  height: 46px;
  margin: -19px auto 18px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 3px solid #000;
  border-radius: 9px;
  box-shadow: 3px 5px 0 #000;
  font-size: clamp(20px, 6.2vw, 29px);
  font-weight: normal;
  letter-spacing: -2px;
}

.question-bubble::after {
  content: "";
  position: absolute;
  left: 47%;
  bottom: -12px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-right: 3px solid #000;
  border-bottom: 3px solid #000;
  transform: rotate(45deg);
}

.hint-text {
  position: absolute;
  top: 343px; /* 위쪽 진행률 패널 요소와 겹치지 않도록 더 아래로 이동 */
  z-index: 8;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  color: #fff;
  font-size: 15px; /* 가독성을 위해 크기를 살짝 키움 */
  font-weight: normal;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.45); /* 촌스러운 단색 테두리 대신 반투명하고 부드러운 그림자로 변경 */
}

.hint-text.is-visible {
  opacity: 1;
}

.result-message {
  position: absolute;
  z-index: 8;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

#answerForm {
  position: relative;
  z-index: 3;
}

.answer-field {
  position: relative;
  display: block;
  height: 61px;
  margin-bottom: 10px;
}

.answer-field input {
  width: 100%;
  height: 100%;
  padding: 0 49px 0 16px;
  color: #222;
  background: #fff;
  border: 3px solid #000;
  border-radius: 10px;
  outline: none;
  box-shadow: 3px 5px 0 #000;
  font-family: 'OneStoreMobileGothicTitleFont', "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  font-size: clamp(15px, 4.4vw, 21px);
  font-weight: normal;
  letter-spacing: -1px;
}

.answer-field input::placeholder {
  color: #999;
  opacity: 1;
}

.answer-field input:focus {
  border-color: #0f0f0f;
  box-shadow: 0 0 0 3px var(--teal), 3px 5px 0 #000;
}

.clear-button {
  position: absolute;
  top: 50%;
  right: 17px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 0 2px;
  transform: translateY(-50%);
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: #a4a4a4;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.submit-button {
  position: relative;
  width: 100%;
  height: 51px;
  padding: 0 16px;
  color: #000;
  border: 3px solid #000;
  border-radius: 10px;
  background: linear-gradient(#ffdf27, #ffce0e);
  box-shadow: 3px 6px 0 #000;
  font-size: clamp(23px, 7.5vw, 35px);
  font-weight: normal;
  letter-spacing: -2px;
  cursor: pointer;
}

.submit-button::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -10px;
  left: 8px;
  z-index: -1;
  height: 8px;
  border: 3px solid #000;
  background: repeating-linear-gradient(45deg, #fff 0 7px, #000 7px 13px);
}

.submit-button b {
  position: absolute;
  right: 18px;
  top: 42%;
  transform: translateY(-50%);
  font-family: Arial, sans-serif;
  font-size: 54px;
  line-height: 0.5;
}

.result-message {
  bottom: 63px;
  padding: 6px 14px;
  border: 2px solid #000;
  border-radius: 999px;
  background: #fff;
  box-shadow: 2px 3px 0 #000;
  font-size: 13px;
  font-weight: normal;
}

.result-message.is-correct { color: #007b62; }
.result-message.is-wrong { color: #d51f5f; }

.bottom-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 248px;
  height: 31px;
  margin: max(24px, calc(100svh - 695px)) auto 0;
  padding: 0 13px;
  color: #fff;
  border: 2px solid #000;
  border-radius: 999px;
  background: #030303;
  box-shadow: none;
  font-size: 12px;
  cursor: pointer;
}

.bottom-hint__star {
  color: var(--yellow);
  font-size: 16px;
}

.bottom-hint strong,
.bottom-hint b {
  color: var(--teal);
}

.bottom-hint b {
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1;
}

.confetti {
  position: absolute;
  z-index: 0;
}

.confetti--one {
  top: 115px;
  right: -4px;
  width: 34px;
  height: 13px;
  border: 3px solid #000;
  background: var(--teal);
  transform: rotate(-48deg);
}

.confetti--two {
  right: 28px;
  top: 83px;
  width: 17px;
  height: 17px;
  border: 3px solid #000;
  border-radius: 50%;
  background: #f04d9a;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Expressive neo-brutalist treatment: layered outlines, masks and individual tilts. */
.game-shell {
  border-width: 3px;
  border-radius: 30px 25px 31px 22px;
  box-shadow:
    inset 0 0 28px rgb(34 0 105 / 0.25),
    inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background: radial-gradient(circle, #fff 0 1.2px, transparent 1.5px) 0 0 / 15px 15px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 7%, #000 28%, #000 68%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 7%, #000 28%, #000 68%, transparent 96%);
}

.hero h1 {
  transform: rotate(-1deg);
}

.hero h1 span {
  -webkit-text-stroke-width: 3.5px;
  transform-origin: center;
}

.title-yellow {
  text-shadow: 4px 3px 0 #050505, 7px 6px 0 #050505, 9px 8px 0 rgb(0 0 0 / 0.28);
  transform: none;
}

.title-white {
  text-shadow: 5px 4px 0 #050505, 8px 7px 0 #050505, 10px 9px 0 rgb(0 0 0 / 0.25);
  transform: none;
}

.speech {
  border-width: 3.5px;
  border-radius: 52% 48% 46% 54% / 47% 52% 48% 53%;
  box-shadow: 3px 4px 0 #000;
  filter: none;
  isolation: isolate;
}

.speech::before,
.speech::after {
  content: "";
  position: absolute;
  border: 0;
  clip-path: polygon(0 0, 100% 100%, 66% 0);
  transform: none;
}

.speech::before {
  right: -1px;
  bottom: -13px;
  z-index: -2;
  width: 23px;
  height: 19px;
  background: #000;
}

.speech::after {
  right: 3px;
  bottom: -7px;
  z-index: -1;
  width: 14px;
  height: 11px;
  background: #fff;
}

.hero__sparkle {
  width: var(--spark-size);
  height: var(--spark-size);
  color: transparent;
  font-size: 0;
  -webkit-text-stroke: 0;
  filter: drop-shadow(3px 4px 0 #000);
}

.hero__sparkle::before,
.hero__sparkle::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 64% 62%, 50% 100%, 36% 64%, 0 50%, 35% 36%);
}

.hero__sparkle::before {
  inset: 0;
  background: #000;
}

.hero__sparkle::after {
  inset: 4px;
  background: var(--spark-color);
}

.hero__sparkle--large {
  --spark-size: 58px;
  --spark-color: #ffe024;
}

.hero__sparkle--small {
  --spark-size: 28px;
  --spark-color: #fff;
  filter: drop-shadow(2px 3px 0 #000);
  transform: none;
}

.scoreboard {
  gap: 2px;
  padding: 2px 0 4px;
  filter: none;
}

.status-card {
  border-width: 3.5px;
  border-radius: 10px 8px 11px 7px;
  box-shadow: 4px 5px 0 #000;
  transform: none;
  transform-origin: center bottom;
  transition: transform 160ms ease;
}

.status-card--stage {
}

.status-card--lives {
  z-index: 3;
}

.status-card--hint {
  z-index: 2;
}

.status-card strong {
  display: inline-block;
}

.status-card--stage strong { transform: none; }
.status-card--lives strong { transform: none; }

.hearts span {
  display: inline-block;
  transform-origin: center bottom;
}

.hearts span:nth-child(1),
.hearts span:nth-child(2),
.hearts span:nth-child(3) { transform: none; }

.status-card:hover {
  transform: translateY(-3px) scale(1.025);
}

.progress-panel {
  border-width: 3px;
  border-radius: 8px 11px 7px 9px;
  box-shadow: 4px 5px 0 #000;
  transform: none;
  transform-origin: center right;
}

.progress-track {
  transform: none;
  transform-origin: center;
}

.quiz-card {
  border-width: 3px;
  border-radius: 21px 17px 20px 15px;
  box-shadow: 6px 8px 0 #000, 9px 11px 0 rgb(0 0 0 / 0.2);
  transform: none;
  transform-origin: center top;
}

.hint-badge {
  border-width: 3px;
  border-radius: 8px 10px 7px 9px;
  transform: translateX(-50%);
}

.hint-badge:active {
  transform: translate(-50%, 2px);
}

.emoji-row span:nth-child(1) { transform: rotate(-2deg); }
.emoji-row span:nth-child(2) { transform: scale(1.07); }
.emoji-row span:nth-child(3) { transform: scale(1.04) rotate(-3deg); }
.emoji-row span:nth-child(4) { transform: rotate(8deg); }

.side-shape--triangle {
  transform: translateY(-50%);
}

.side-shape--circle {
  box-shadow: 2px 3px 0 #000;
  transform: translateY(-50%);
}

.question-bubble {
  border-width: 3px;
  border-radius: 11px 8px 12px 7px;
  height: 48px;
  margin-bottom: 20px;
  box-shadow: 4px 5px 0 #000;
  font-size: clamp(19px, 5.4vw, 25px);
  line-height: 1;
  transform: none;
  isolation: isolate;
}

.question-bubble::before,
.question-bubble::after {
  content: "";
  position: absolute;
  left: 51%;
  border: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: translateX(-50%);
}

.question-bubble::before {
  bottom: -18px;
  z-index: -2;
  width: 24px;
  height: 19px;
  background: #000;
}

.question-bubble::after {
  bottom: -10px;
  z-index: -1;
  width: 14px;
  height: 11px;
  background: #fff;
}

#answerForm {
  isolation: isolate;
}

.answer-field {
  transform: none;
  transform-origin: center;
}

.answer-field input {
  border-width: 3.5px;
  border-radius: 11px 8px 12px 9px;
  box-shadow: 5px 6px 0 #000;
}

.submit-button {
  border-width: 3px;
  border-radius: 11px 8px 12px 9px;
  height: 54px;
  padding-bottom: 2px;
  box-shadow: 5px 7px 0 #000;
  font-size: clamp(22px, 6.4vw, 30px);
  line-height: 1;
  transform: none;
  transform-origin: center top;
  isolation: isolate;
}

.submit-button::after {
  right: -4px;
  bottom: -10px;
  left: 4px;
  height: 13px;
  border-width: 3px;
  border-top: 0;
  border-radius: 0 0 9px 8px;
  clip-path: none;
}

.submit-button b {
  top: 50%;
  right: 17px;
  display: grid;
  width: 22px;
  height: 38px;
  place-items: center;
  font-size: 42px;
  line-height: 1;
}

.submit-button:active {
  transform: translateY(2px);
}

.bottom-hint {
  position: relative;
  z-index: 1;
  transform: none;
  box-shadow: 3px 4px 0 rgb(0 0 0 / 0.35);
}

.bottom-hint:active {
  transform: translateY(2px);
}

@media (min-width: 471px) {
  body {
    padding: 20px 0;
  }

  .game-shell {
    min-height: 808px;
    padding-top: 48px;
  }


  .bottom-hint {
    margin-top: 24px;
  }
}

@media (max-width: 355px) {
  .game-shell { padding-inline: 11px; }
  .hero h1 { left: 61px; letter-spacing: -4px; }
  .status-card { padding-inline: 9px; }
  .status-label { font-size: 13px; }
  .hearts { gap: 0; }
  .progress-panel { gap: 7px; padding-inline: 9px; }
  .emoji-row { padding-inline: 19px; }
  .question-bubble { width: 69%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* =========================================
   CLEAN NEO-BRUTALISM OVERRIDES
   ========================================= */

/* 1. Shell Background */
.game-shell {
  background: #5B24F3 !important;
}
.game-shell::before, .game-shell::after { display: none !important; }

/* 2. Cards & Progress */
.scoreboard {
  gap: 0 !important;
}

.status-card {
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  box-shadow: 3px 4px 0 #000 !important;
  transform: none !important; /* Disable scaling offsets */
}

.status-card + .status-card {
  margin-left: -3px !important;
}
.status-card--stage { background: var(--teal) !important; }
.status-card--lives { background: var(--yellow) !important; z-index: 3; }
.status-card--hint { background: var(--pink) !important; z-index: 2; }

.progress-panel {
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  box-shadow: 3px 4px 0 #000 !important;
}
.progress-track { display: none !important; }
.progress-segments { display: flex; gap: 4px; height: 16px; flex: 1; }
.progress-segments .segment { flex: 1; background: #E5E5E5; border: 2px solid #000; border-radius: 999px; }
.progress-segments .segment.filled { background: var(--teal); }

/* 3. Quiz Card & Inputs */
.quiz-card {
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 4px 5px 0 #000 !important;
}
.hint-badge {
  background: var(--yellow) !important;
  border: 3px solid #000 !important;
  box-shadow: 2px 3px 0 #000 !important;
}
.answer-field input {
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  box-shadow: 3px 4px 0 #000 !important;
}
.clear-button {
  background: #999 !important;
  width: 22px !important; height: 22px !important; font-size: 20px !important; padding-bottom: 2px !important;
}
.submit-button {
  background: var(--yellow) !important;
  border: 3px solid #000 !important;
  border-radius: 10px !important;
  box-shadow: 4px 5px 0 #000 !important;
  height: 60px !important;
}
.submit-button::after {
  background: repeating-linear-gradient(-45deg, #fff 0 10px, #000 10px 20px) !important;
  height: 22px !important; border: 3px solid #000 !important; border-top: none !important;   border-radius: 0 0 8px 8px !important; bottom: -20px !important; left: -4px !important; right: -4px !important; clip-path: none !important;
}

/* 4. Typography Details */
.hearts span { color: var(--pink) !important; -webkit-text-stroke: 3px #000 !important; font-size: clamp(34px, 10vw, 44px) !important; }
.hero h1 span { -webkit-text-stroke: 4px #000 !important; }
.title-yellow { color: var(--yellow) !important; text-shadow: 4px 4px 0 #000, 6px 6px 0 #000 !important; }
.title-white { color: #fff !important; text-shadow: 4px 4px 0 #000, 6px 6px 0 #000 !important; }


/* =========================================
   EMOJI SPEECH BUBBLE (SVG)
   =========================================
   speech_bubble_only.svg 를 배경으로 통째로 사용한다.
   몸통과 꼬리가 하나의 패스로 그려져 있어 테두리가
   이음새 없이 이어지고, drop-shadow가 전체 실루엣을 따라간다.
*/

.speech {
  /* CSS 꼬리 트릭 제거: speech_bubble_only.svg 를 통째로 배경으로 사용.
     몸통+꼬리가 하나의 패스라 테두리가 이음새 없이 이어진다. */
  width: 74px !important;
  height: 68px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url("speech_bubble_only.svg") center / 100% 100% no-repeat !important;
  display: grid !important;
  place-items: center !important;
  /* SVG에서 몸통 중심은 (48.3%, 42.5%) — 이모지를 몸통 중심으로 보정 */
  padding-bottom: 10px !important;
  padding-right: 3px !important;
  font-size: 28px !important;
  /* SVG 알파 채널을 따라 몸통+꼬리 전체에 그림자 생성 */
  filter: drop-shadow(2px 3px 0 #000) !important;
}

.speech::before,
.speech::after {
  display: none !important; /* 기존 CSS 삼각형 꼬리/그림자 제거 */
}

.question-bubble {
  border: 3px solid #000 !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 4px 0 #000) !important;
  height: 52px !important;
  font-size: clamp(22px, 7vw, 32px) !important;
  border-radius: 8px !important;
  margin-bottom: 28px !important;
}

.question-bubble::before {
  display: none !important; /* Remove the original black polygon shadow */
}

.question-bubble::after {
  content: "" !important;
  position: absolute !important;
  background: #fff !important;
  left: 50% !important;
  bottom: -11px !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  border-right: 3px solid #000 !important;
  border-bottom: 3px solid #000 !important;
  transform: translateX(-50%) rotate(45deg) !important;
  clip-path: none !important;
  z-index: -1 !important;
}

/* 단일 웨이트 폰트를 위한 강제 굵기 초기화 (Faux-bold 방지) */
h1, strong, b, th, .status-label, .stage-total {
  font-weight: normal !important;
}

/* =========================================
   STRIPED-SHADOW SUBMIT BUTTON
   =========================================
   시안 구조: 노란 카드 1장 + 그 "그림자" 1장.
   그림자는 검은 단색이 아니라 빗살무늬로 채워진
   동일한 모양의 카드다. 즉 레이어는 총 2장뿐이며,
   검은 box-shadow는 절대 추가하지 않는다.
   ========================================= */

.submit-button {
  position: relative !important;
  width: 100% !important;  /* input과 100% 너비 동일하게 맞춤 */
  height: 66px !important;          /* 54(카드) + 12(그림자 오프셋) */
  margin-bottom: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  cursor: pointer !important;
  color: #000 !important;
}

/* 빗살무늬 그림자: 노란 카드와 같은 모양을 오른쪽 아래로 밀어낸 것.
   검은 테두리만 있고 별도의 box-shadow는 없다.

   안티앨리어싱: repeating-linear-gradient의 "하드 스톱"(같은 위치에서
   색이 바뀌는 것)은 브라우저가 보간하지 않아서 사선 경계가 픽셀 단위로
   계단처럼 끊긴다. 스톱 사이에 0.9px 정도의 블렌드 구간을 넣으면
   경계가 서브픽셀로 부드럽게 섞여 계단현상이 사라진다. */
.submit-button::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 6px !important; /* 아래로 6px 이동 (input의 box-shadow 오프셋과 유사하게) */
  left: 5px !important; /* 오른쪽으로 5px 이동 (기존 9px에서 줄임) */
  right: -5px !important;
  bottom: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: repeating-linear-gradient(
    45deg,
    #000 0 6.1px,
    #fff 7px 13.1px,
    #000 14px
  ) !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
  backface-visibility: hidden !important;
}

/* 노란 카드 (본체) */
.submit-button::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 6px !important; /* 위에서 줄인 오프셋만큼 반영 */
  height: auto !important;
  box-sizing: border-box !important;
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  background: var(--yellow, #ffd426) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
}

/* 텍스트/꺾쇠는 노란 카드 영역(0 ~ height-12px) 기준 중앙 */
.submit-button span {
  position: absolute !important;
  z-index: 3 !important;
  top: 30px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  font-size: clamp(23px, 7.5vw, 32px) !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.submit-button b {
  position: absolute !important;
  z-index: 3 !important;
  top: 30px !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  transform: translateY(-50%) !important;
  font-family: Arial, sans-serif !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

/* 누르면 노란 카드가 그림자 쪽(오른쪽 아래)으로 내려앉는다 */
.submit-button:active {
  transform: none !important;
}
.submit-button:active::after {
  top: 6px !important;
  bottom: 0 !important;
  left: 5px !important;
  right: -5px !important;
}
.submit-button:active span,
.submit-button:active b {
  top: 36px !important;
}
.submit-button:active span {
  margin-left: 5px !important;
}
.submit-button:active b {
  right: 13px !important;
}