@keyframes ci-pop {
  0% {
    transform: scale(0.3) rotate(-6deg);
    opacity: 0;
  }
  55% {
    transform: scale(1.06) rotate(1.5deg);
    opacity: 1;
  }
  75% {
    transform: scale(0.98) rotate(-0.5deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes ci-skip-nudge {
  0%, 100% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(4px);
  }
}
@keyframes ci-logo-in {
  0% {
    transform: scale(0.4) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}
@keyframes ci-logo-out {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-140px) scale(0.6);
    opacity: 0;
  }
}
@keyframes ci-logo-bob {
  0%, 100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}
@keyframes ci-ring {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}
@keyframes ci-dot {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-7px);
    opacity: 1;
  }
}
@keyframes ci-meter-up {
  0% {
    transform: translateX(-50%) scale(1);
  }
  35% {
    transform: translateX(-50%) scale(1.06);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
@keyframes ci-meter-down {
  0%, 100% {
    transform: translateX(-50%);
  }
  20% {
    transform: translateX(calc(-50% - 9px));
  }
  40% {
    transform: translateX(calc(-50% + 8px));
  }
  60% {
    transform: translateX(calc(-50% - 5px));
  }
  80% {
    transform: translateX(calc(-50% + 3px));
  }
}
@keyframes ci-delta {
  0% {
    transform: translateX(-10px) scale(0.6);
    opacity: 0;
  }
  20% {
    transform: translateX(0) scale(1.15);
    opacity: 1;
  }
  70% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(-18px) scale(0.95);
    opacity: 0;
  }
}
@keyframes ci-stamp {
  0% {
    transform: rotate(-14deg) scale(3.2);
    opacity: 0;
  }
  60% {
    transform: rotate(-14deg) scale(0.92);
    opacity: 1;
  }
  80% {
    transform: rotate(-14deg) scale(1.04);
  }
  100% {
    transform: rotate(-14deg) scale(1);
    opacity: 1;
  }
}
@keyframes ci-scroll-in {
  0% {
    transform: translateY(-40px) scaleY(0.2);
    opacity: 0;
  }
  60% {
    transform: translateY(6px) scaleY(1.03);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
}
#full-area.castle-interview {
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  background: #23202c;
  user-select: none;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  color: #2b1a10;
  letter-spacing: normal;
  line-height: normal;
}
#full-area.castle-interview span, #full-area.castle-interview b, #full-area.castle-interview i, #full-area.castle-interview em, #full-area.castle-interview p, #full-area.castle-interview dl, #full-area.castle-interview dt, #full-area.castle-interview dd, #full-area.castle-interview button, #full-area.castle-interview div, #full-area.castle-interview textarea {
  font-family: inherit;
  letter-spacing: normal;
}
#full-area.castle-interview p, #full-area.castle-interview dl, #full-area.castle-interview dt, #full-area.castle-interview dd {
  margin: 0;
  padding: 0;
}
#full-area.castle-interview i, #full-area.castle-interview em {
  font-style: normal;
}
#full-area.castle-interview button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#full-area.castle-interview #game-area {
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1) !important;
}
#full-area.castle-interview #gameContainer {
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #23202c;
}
#full-area.castle-interview #ci-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 720px;
  outline: none;
}
#full-area.castle-interview .ci-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  z-index: 4;
}
#full-area.castle-interview .ci-meter {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 16px 7px 18px;
  background: #fff8e8;
  border: 4px solid #2b1a10;
  border-radius: 999px;
  box-shadow: 0 4px 0 #2b1a10;
  border-width: 3px;
}
#full-area.castle-interview .ci-meter.up {
  animation: ci-meter-up 0.5s ease-out;
}
#full-area.castle-interview .ci-meter.down {
  animation: ci-meter-down 0.5s ease-out;
}
#full-area.castle-interview .ci-meter-label {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  color: #5b2a86;
  text-transform: uppercase;
  white-space: nowrap;
}
#full-area.castle-interview .ci-meter-track {
  position: relative;
  width: 260px;
  height: 18px;
  border: 3px solid #2b1a10;
  border-radius: 999px;
  background: #eadcbf;
  overflow: hidden;
}
#full-area.castle-interview .ci-meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px;
  background: #f2913a;
  transition: background 0.4s;
}
#full-area.castle-interview[data-meter=mid] .ci-meter-fill {
  background: #ffc933;
}
#full-area.castle-interview[data-meter=high] .ci-meter-fill, #full-area.castle-interview[data-meter=full] .ci-meter-fill {
  background: #2fae4a;
}
#full-area.castle-interview .ci-meter-pct {
  min-width: 46px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #2b1a10;
  text-align: right;
}
#full-area.castle-interview .ci-meter-delta {
  position: absolute;
  left: 100%;
  top: 50%;
  margin: -17px 0 0 12px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  color: #8cff6b;
  text-shadow: 0 3px 0 #2b1a10, 2px 0 0 #2b1a10, -2px 0 0 #2b1a10, 0 -2px 0 #2b1a10;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
#full-area.castle-interview .ci-meter-delta.down {
  color: #ff7a6b;
}
#full-area.castle-interview .ci-meter-delta.show {
  animation: ci-delta 1.3s ease-out forwards;
}
#full-area.castle-interview .ci-qchip {
  position: absolute;
  left: 50%;
  top: 67px;
  transform: translateX(-50%);
  padding: 5px 18px 6px;
  background: #fff8e8;
  border: 4px solid #2b1a10;
  border-radius: 999px;
  box-shadow: 0 3px 0 #2b1a10;
  border-width: 3px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: #5b2a86;
  text-transform: uppercase;
  white-space: nowrap;
}
#full-area.castle-interview .ci-qchip b {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #2b1a10;
}
#full-area.castle-interview .ci-bubble {
  position: absolute;
  top: 132px;
  min-width: 196px;
  padding: 27px 18px 15px;
  box-sizing: border-box;
  background: #fff8e8;
  border: 4px solid #2b1a10;
  border-radius: 24px;
  box-shadow: 0 6px 0 #2b1a10;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  z-index: 3;
}
#full-area.castle-interview .ci-bubble.show {
  animation: ci-pop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
#full-area.castle-interview .ci-bubble p {
  margin: 0 auto;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  color: #2b1a10;
}
#full-area.castle-interview .ci-bubble::after {
  content: "?";
  position: absolute;
  top: -18px;
  width: 38px;
  height: 38px;
  border: 3px solid #2b1a10;
  border-radius: 50%;
  background: #ffc933;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-size: 26px;
  line-height: 33px;
  text-align: center;
  color: #2b1a10;
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
#full-area.castle-interview .ci-bubble.question {
  min-width: 248px;
  background: #fff4c7;
}
#full-area.castle-interview .ci-bubble.question p {
  font-weight: 700;
  font-size: 23px;
}
#full-area.castle-interview .ci-bubble.question::after {
  opacity: 1;
  transform: scale(1);
}
#full-area.castle-interview .ci-bubble.question .ci-tail-fill {
  fill: #fff4c7;
}
#full-area.castle-interview .ci-bubble-name {
  position: absolute;
  top: -17px;
  padding: 3px 14px 4px;
  border: 3px solid #2b1a10;
  border-radius: 999px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
#full-area.castle-interview .ci-bubble-k {
  left: 18px;
  transform-origin: 100% 40%;
}
#full-area.castle-interview .ci-bubble-k::after {
  right: 14px;
}
#full-area.castle-interview .ci-bubble-k .ci-bubble-name {
  left: 16px;
  background: #e0352b;
}
#full-area.castle-interview .ci-bubble-k .ci-bubble-tail {
  left: auto;
  right: -56px;
  transform: scaleX(-1);
}
#full-area.castle-interview .ci-bubble-k.tail-left {
  transform-origin: 0 40%;
}
#full-area.castle-interview .ci-bubble-k.tail-left .ci-bubble-tail {
  left: -56px;
  right: auto;
  transform: none;
}
#full-area.castle-interview .ci-bubble-q {
  left: 976px;
  transform-origin: 0 40%;
}
#full-area.castle-interview .ci-bubble-q::after {
  left: 14px;
}
#full-area.castle-interview .ci-bubble-q .ci-bubble-name {
  right: 16px;
  background: #8a4fc4;
}
#full-area.castle-interview .ci-bubble-q.tail-right {
  transform-origin: 100% 40%;
}
#full-area.castle-interview .ci-bubble-q.tail-right .ci-bubble-tail {
  left: auto;
  right: -56px;
  transform: scaleX(-1);
}
#full-area.castle-interview .ci-bubble-tail {
  position: absolute;
  top: 30px;
  left: -56px;
  width: 64px;
  height: 64px;
  overflow: visible;
}
#full-area.castle-interview .ci-bubble-tail .ci-tail-shadow {
  fill: #2b1a10;
}
#full-area.castle-interview .ci-bubble-tail .ci-tail-fill {
  fill: #fff8e8;
}
#full-area.castle-interview .ci-bubble-tail .ci-tail-line {
  fill: none;
  stroke: #2b1a10;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
#full-area.castle-interview .ci-panel {
  position: absolute;
  left: 50%;
  top: 553px;
  width: 840px;
  height: 92px;
  margin-left: -420px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  z-index: 5;
}
#full-area.castle-interview .ci-mic {
  position: relative;
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #9b9b9b 0%, #6c6c6c 100%);
  border: 4px solid #2b1a10;
  border-radius: 50%;
  box-shadow: 0 5px 0 #2b1a10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.2s;
}
#full-area.castle-interview .ci-mic:hover {
  transform: translateY(-2px);
}
#full-area.castle-interview .ci-mic:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #2b1a10;
}
#full-area.castle-interview .ci-mic svg {
  position: relative;
  width: 40px;
  height: 40px;
  fill: #fff;
  stroke: #fff;
  z-index: 1;
}
#full-area.castle-interview .ci-mic .ci-icon-mic {
  display: none;
}
#full-area.castle-interview .ci-mic-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 4px solid rgba(224, 53, 43, 0.75);
  opacity: 0;
  pointer-events: none;
}
#full-area.castle-interview[data-listening=true] .ci-mic {
  background: linear-gradient(180deg, #ff6b5c 0%, #e0352b 100%);
}
#full-area.castle-interview[data-listening=true] .ci-mic .ci-icon-mic {
  display: block;
}
#full-area.castle-interview[data-listening=true] .ci-mic .ci-icon-off {
  display: none;
}
#full-area.castle-interview[data-listening=true] .ci-mic .ci-mic-ring {
  animation: ci-ring 1.2s ease-out infinite;
}
#full-area.castle-interview .ci-answer {
  position: relative;
  flex: 1 1 auto;
  height: 80px;
  padding: 7px 18px;
  background: #fff;
  border: 4px solid #2b1a10;
  border-radius: 18px;
  box-shadow: 0 5px 0 #2b1a10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
#full-area.castle-interview .ci-status {
  position: absolute;
  left: 14px;
  top: -15px;
  padding: 3px 10px 2px;
  background: #fff;
  border: 3px solid #2b1a10;
  border-radius: 999px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #5b2a86;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
#full-area.castle-interview .ci-status:empty {
  display: none;
}
#full-area.castle-interview[data-listening=true] .ci-status {
  color: #e0352b;
}
#full-area.castle-interview .ci-input {
  width: 100%;
  height: 29px;
  min-height: 29px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 29px;
  color: #2b1a10;
  user-select: text;
}
#full-area.castle-interview .ci-input::placeholder {
  color: #a99b8a;
  font-weight: 500;
}
#full-area.castle-interview .ci-send {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 82px;
  padding: 0;
  background: linear-gradient(180deg, #5fd36f 0%, #2fae4a 100%);
  border: 4px solid #2b1a10;
  border-radius: 18px;
  box-shadow: 0 5px 0 #2b1a10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.12s, filter 0.2s;
  --ci-progress: 0;
}
#full-area.castle-interview .ci-send span {
  position: relative;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  z-index: 1;
}
#full-area.castle-interview .ci-send:hover {
  transform: translateY(-2px);
}
#full-area.castle-interview .ci-send:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #2b1a10;
}
#full-area.castle-interview .ci-send:disabled {
  filter: grayscale(1) brightness(1.05);
  opacity: 0.6;
  cursor: default;
  transform: none;
}
#full-area.castle-interview .ci-send-ring {
  position: absolute;
  width: 76px;
  height: 76px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
#full-area.castle-interview .ci-send-ring circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: calc(289px * (1 - var(--ci-progress)));
}
#full-area.castle-interview .ci-panel-tools {
  position: absolute;
  right: 112px;
  top: -48px;
  display: flex;
  gap: 12px;
}
#full-area.castle-interview .ci-tool {
  display: flex;
  align-items: center;
  padding: 8px 22px 9px;
  background: #fff8e8;
  border: 4px solid #2b1a10;
  border-radius: 999px;
  box-shadow: 0 4px 0 #2b1a10;
  border-width: 3px;
  transition: transform 0.12s;
}
#full-area.castle-interview .ci-tool span {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: #5b2a86;
}
#full-area.castle-interview .ci-tool:hover {
  transform: translateY(-2px);
}
#full-area.castle-interview .ci-tool:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2b1a10;
}
#full-area.castle-interview .ci-judging {
  position: absolute;
  left: 50%;
  top: 567px;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  padding: 10px 22px;
  background: #fff8e8;
  border: 4px solid #2b1a10;
  border-radius: 999px;
  box-shadow: 0 5px 0 #2b1a10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s;
  z-index: 5;
}
#full-area.castle-interview .ci-heard {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: #2b1a10;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 640px;
}
#full-area.castle-interview .ci-judging-dots {
  display: flex;
  gap: 6px;
}
#full-area.castle-interview .ci-judging-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5b2a86;
  animation: ci-dot 1s ease-in-out infinite;
}
#full-area.castle-interview .ci-judging-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
#full-area.castle-interview .ci-judging-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
#full-area.castle-interview .ci-verdict {
  position: absolute;
  left: 50%;
  top: 556px;
  width: 560px;
  margin-left: -280px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px 12px 14px;
  background: linear-gradient(180deg, #e6ffd9 0%, #c3f3ad 100%);
  border: 4px solid #2b1a10;
  border-radius: 20px;
  box-shadow: 0 6px 0 #2b1a10;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  z-index: 6;
  box-sizing: border-box;
}
#full-area.castle-interview .ci-verdict.show {
  animation: ci-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
#full-area.castle-interview .ci-verdict > i {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 4px solid #2b1a10;
  background: #2fae4a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-size: 38px;
  line-height: 1;
  box-sizing: border-box;
}
#full-area.castle-interview .ci-verdict.wrong {
  background: linear-gradient(180deg, #ffe3de 0%, #ffc2b8 100%);
}
#full-area.castle-interview .ci-verdict.wrong > i {
  background: #e0352b;
}
#full-area.castle-interview .ci-verdict.wrong b {
  color: #b81f17;
}
#full-area.castle-interview .ci-verdict-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#full-area.castle-interview .ci-verdict-body b {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: #1d7a33;
  line-height: 1.05;
}
#full-area.castle-interview .ci-verdict-body span {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #2b1a10;
}
#full-area.castle-interview .ci-verdict-body span:empty {
  display: none;
}
#full-area.castle-interview .ci-verdict-body em {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #5b4a3a;
}
#full-area.castle-interview .ci-verdict-body em:empty {
  display: none;
}
#full-area.castle-interview .ci-skiptalk {
  position: absolute;
  left: 0;
  right: 0;
  top: 579px;
  width: fit-content;
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px 0 34px;
  background: linear-gradient(180deg, #8a4fc4 0%, #5b2a86 100%);
  border: 4px solid #2b1a10;
  border-radius: 999px;
  box-shadow: 0 5px 0 #2b1a10;
  box-shadow: 0 5px 0 #2b1a10, inset 0 0 0 3px #ffc933, inset 0 -7px 0 rgba(43, 26, 16, 0.22);
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(43, 26, 16, 0.5);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), filter 0.15s;
  z-index: 7;
}
#full-area.castle-interview .ci-skiptalk::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 6px;
  height: 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
#full-area.castle-interview .ci-skiptalk svg {
  position: relative;
  width: 28px;
  height: 28px;
  fill: #ffc933;
  filter: drop-shadow(0 2px 0 rgba(43, 26, 16, 0.5));
  animation: ci-skip-nudge 1.2s ease-in-out infinite;
}
#full-area.castle-interview[data-skippable=true] .ci-skiptalk {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#full-area.castle-interview[data-skippable=true] .ci-skiptalk:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}
#full-area.castle-interview[data-skippable=true] .ci-skiptalk:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #2b1a10, inset 0 0 0 3px #ffc933, inset 0 -7px 0 rgba(43, 26, 16, 0.22);
}
#full-area.castle-interview[data-phase=result] .ci-skiptalk {
  margin: 0 0 0 944px;
}
#full-area.castle-interview .ci-logo-intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(35, 32, 44, 0.35) 0%, rgba(20, 16, 28, 0.82) 75%);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}
#full-area.castle-interview .ci-logo-intro img {
  width: 780px;
  height: auto;
  will-change: transform;
  filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.25));
}
#full-area.castle-interview .ci-logo-intro.leaving img {
  animation: ci-logo-out 0.45s ease-in forwards;
}
#full-area.castle-interview[data-state=loading] .ci-logo-intro, #full-area.castle-interview[data-state=intro] .ci-logo-intro {
  opacity: 1;
}
#full-area.castle-interview[data-state=loading] .ci-logo-intro img, #full-area.castle-interview[data-state=intro] .ci-logo-intro img {
  animation: ci-logo-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both, ci-logo-bob 2.4s ease-in-out 0.7s infinite;
}
#full-area.castle-interview[data-state=intro] .ci-logo-intro.leaving img {
  animation: ci-logo-out 0.45s ease-in forwards;
}
#full-area.castle-interview .ci-error {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 28, 0.6);
  z-index: 9;
}
#full-area.castle-interview .ci-error-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 34px;
  text-align: center;
  background: #fff8e8;
  border: 4px solid #2b1a10;
  border-radius: 22px;
  box-shadow: 0 6px 0 #2b1a10;
}
#full-area.castle-interview .ci-error-card b {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: #e0352b;
}
#full-area.castle-interview .ci-error-card span {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
}
#full-area.castle-interview[data-state=error] .ci-error {
  display: flex;
}
#full-area.castle-interview[data-state=interview] .ci-hud, #full-area.castle-interview[data-state=contract] .ci-hud {
  opacity: 1;
  transform: translateY(0);
}
#full-area.castle-interview[data-state=interview][data-phase=answer] .ci-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#full-area.castle-interview[data-state=interview][data-phase=judging] .ci-judging {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#full-area.castle-interview .ci-contract {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 60px;
  background: rgba(20, 16, 28, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  z-index: 8;
}
#full-area.castle-interview[data-state=contract] .ci-bubble {
  visibility: hidden;
}
#full-area.castle-interview[data-state=contract] .ci-contract {
  opacity: 1;
  pointer-events: auto;
}
#full-area.castle-interview[data-state=contract] .ci-contract .ci-scroll {
  animation: ci-scroll-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
#full-area.castle-interview .ci-scroll {
  position: relative;
  width: 560px;
  transform-origin: 50% 0;
}
#full-area.castle-interview .ci-scroll-roll {
  position: relative;
  height: 30px;
  margin: 0 -22px;
  border: 4px solid #2b1a10;
  border-radius: 16px;
  background: linear-gradient(180deg, #e9c98a 0%, #f8e2b0 40%, #c99a55 100%);
  z-index: 2;
}
#full-area.castle-interview .ci-scroll-roll::before, #full-area.castle-interview .ci-scroll-roll::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 3px solid #2b1a10;
  border-radius: 50%;
  background: radial-gradient(circle, #8a5a1e 30%, #c99a55 32%);
}
#full-area.castle-interview .ci-scroll-roll::before {
  left: 6px;
}
#full-area.castle-interview .ci-scroll-roll::after {
  right: 6px;
}
#full-area.castle-interview .ci-scroll-paper {
  position: relative;
  margin: -6px 0;
  padding: 24px 40px 24px;
  border-left: 4px solid #2b1a10;
  border-right: 4px solid #2b1a10;
  background: radial-gradient(ellipse at 20% 30%, rgba(201, 154, 85, 0.25) 0%, rgba(201, 154, 85, 0) 45%), radial-gradient(ellipse at 80% 75%, rgba(201, 154, 85, 0.28) 0%, rgba(201, 154, 85, 0) 50%), linear-gradient(90deg, #e8cf98 0%, #f6e4bb 12%, #fbf0d4 50%, #f6e4bb 88%, #e8cf98 100%);
  text-align: center;
  z-index: 1;
}
#full-area.castle-interview .ci-contract-title {
  font-family: "Pirata One", "Lilita One", Georgia, serif;
  font-size: 50px;
  line-height: 1;
  color: #5b2a86;
}
#full-area.castle-interview .ci-contract-sub {
  margin-top: 2px;
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #8a6a3a;
  text-transform: uppercase;
  letter-spacing: 3px;
}
#full-area.castle-interview .ci-contract-terms {
  margin: 18px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
#full-area.castle-interview .ci-contract-terms > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 2px dashed rgba(138, 106, 58, 0.45);
}
#full-area.castle-interview .ci-contract-terms dt {
  flex: 0 0 110px;
  font-family: "Pirata One", "Lilita One", Georgia, serif;
  font-size: 24px;
  color: #8a6a3a;
}
#full-area.castle-interview .ci-contract-terms dd {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #2b1a10;
}
#full-area.castle-interview .ci-contract-terms dd b {
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: #c98a12;
}
#full-area.castle-interview .ci-contract-terms dd span {
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
}
#full-area.castle-interview .ci-contract-best {
  min-height: 22px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #5b2a86;
}
#full-area.castle-interview .ci-contract-signs {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#full-area.castle-interview .ci-contract-signs span {
  flex: 1;
  padding-top: 4px;
  border-top: 2px solid rgba(43, 26, 16, 0.6);
  font-family: "Pirata One", "Lilita One", Georgia, serif;
  font-size: 20px;
  color: #4a3320;
}
#full-area.castle-interview .ci-stamp {
  position: absolute;
  right: 22px;
  bottom: 104px;
  padding: 6px 16px 4px;
  border: 6px solid #2fae4a;
  border-radius: 12px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: #2fae4a;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 3px rgba(47, 174, 74, 0.35);
  opacity: 0;
  transform: rotate(-14deg) scale(3);
  mix-blend-mode: multiply;
  pointer-events: none;
}
#full-area.castle-interview .ci-stamp.slam {
  animation: ci-stamp 0.35s cubic-bezier(0.3, 0.9, 0.4, 1) forwards;
}
#full-area.castle-interview .ci-contract.fired .ci-stamp {
  border-color: #e0352b;
  color: #e0352b;
  box-shadow: inset 0 0 0 3px rgba(224, 53, 43, 0.35);
  font-size: 40px;
}
#full-area.castle-interview .ci-contract.fired .ci-contract-terms dd b {
  color: #9c8a74;
}
#full-area.castle-interview .ci-contract-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 14px;
}
#full-area.castle-interview .ci-btn {
  padding: 10px 22px 11px;
  font-family: "Lilita One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.12s;
}
#full-area.castle-interview .ci-btn:hover {
  transform: translateY(-2px);
}
#full-area.castle-interview .ci-btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #2b1a10;
}
#full-area.castle-interview .ci-btn-green {
  background: linear-gradient(180deg, #5fd36f 0%, #2fae4a 100%);
  border: 4px solid #2b1a10;
  border-radius: 16px;
  box-shadow: 0 5px 0 #2b1a10;
}
#full-area.castle-interview .ci-btn-blue {
  background: linear-gradient(180deg, #5b95ff 0%, #2f6fe0 100%);
  border: 4px solid #2b1a10;
  border-radius: 16px;
  box-shadow: 0 5px 0 #2b1a10;
}