/* IT Passport Gacha Web V0.2 */
:root {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: #1f2937;
  background: #eef7fc;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.95), rgba(228,245,255,.9) 50%, rgba(198,230,247,.9));
}
button { font: inherit; }
.app { width: 100%; padding: 14px; }
.game-frame {
  width: min(960px, calc(100vw - 28px), calc((100vh - 28px) * 4 / 3));
  margin: auto;
  aspect-ratio: 4 / 3;
  border: 5px solid #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 46px rgba(7, 61, 91, .24);
  background: #fff;
}
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  isolation: isolate;
}
.backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sprite, .image-button {
  position: absolute;
  transform: translate(-50%, -50%);
}
.sprite { pointer-events: none; }
.image-button {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  touch-action: manipulation;
}
.image-button > img { display: block; width: 100%; height: auto; pointer-events: none; }
.image-button:focus-visible, .help-button:focus-visible, .hotspot:focus-visible {
  outline: 3px solid #ffec5c;
  outline-offset: 3px;
}
.hidden { display: none !important; }

.title-image { left: 50%; top: 8.3%; width: 35.6%; z-index: 5; }
.version-label {
  position: absolute;
  left: 69.1%; top: 4.8%;
  z-index: 14;
  font-weight: 800;
  font-size: clamp(9px, 1.7vw, 18px);
  color: #123e78;
  background: rgba(255,255,255,.83);
  border: 1px solid rgba(18,62,120,.25);
  padding: .12em .35em;
  border-radius: .35em;
}
.subtitle-image { left: 27.1%; top: 18.3%; width: 34.2%; z-index: 5; }

.score {
  position: absolute;
  top: 3.2%;
  z-index: 12;
  min-width: 16%;
  padding: .28em .55em;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(9px, 1.7vw, 18px);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .2s;
}
.score.visible { opacity: 1; }
.score strong { font-size: 1.25em; margin-left: .35em; }
.score-left { left: 2.2%; background: rgba(235, 82, 127, .9); }
.score-right { right: 2.2%; background: rgba(38, 139, 214, .92); }

.logo-button { left: 28.1%; top: 8.3%; width: 5.95%; z-index: 9; }
.machine { left: 50%; top: 50%; width: 26.9%; z-index: 3; }
.machine-talk-area {
  position: absolute;
  left: 39.5%; top: 22%; width: 20%; height: 30%;
  border: 0; background: transparent; cursor: pointer; z-index: 5;
}
.handle-button { left: 50%; top: 58.9%; width: 6.9%; z-index: 8; transform-origin: center; }
.handle-button.spinning { animation: spin-handle .8s linear; }
.handle-button.broken { top: 86.7%; }
@keyframes spin-handle {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-720deg); }
}

.character { width: 22.5%; z-index: 6; transition: filter .15s, transform .15s; }
.character:hover { filter: brightness(1.06); transform: translate(-50%, -50%) scale(1.025); }
.character.active { filter: drop-shadow(0 0 8px #fff06a) drop-shadow(0 0 5px #ff9d00); }
.left-character { left: 16.7%; top: 41.7%; }
.right-character { left: 83.3%; top: 41.7%; }
.cat-guide { left: 20.2%; top: 77.8%; width: 17.8%; z-index: 13; }
.decide-button { left: 50%; top: 91.7%; width: 12.6%; z-index: 13; }

.moving-capsule { left: 50%; top: 70.8%; width: 8.3%; z-index: 21; }
.open-capsule { left: 81.25%; top: 77.8%; width: 13%; z-index: 20; }

.speech-bubble {
  position: absolute;
  left: 7%; top: 22%;
  width: 64%;
  min-height: 13%;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 2.5% 4%;
  border: 3px solid #242424;
  border-radius: 24px;
  background: #fff;
  color: #222;
  text-align: center;
  font-weight: 700;
  font-size: clamp(12px, 2.25vw, 23px);
  line-height: 1.45;
  box-shadow: 0 5px 13px rgba(0,0,0,.2);
  pointer-events: none;
}
.speech-bubble::after {
  content: none;
}



.speech-bubble.turn-left-mode {
  left: 28%;
  top: 30%;
  width: 28%;
  min-height: 10%;
  padding: 1.8% 2.4%;
  font-size: clamp(11px, 1.75vw, 18px);
}
.speech-bubble.turn-right-mode {
  left: 44%;
  top: 30%;
  width: 28%;
  min-height: 10%;
  padding: 1.8% 2.4%;
  font-size: clamp(11px, 1.75vw, 18px);
}

.speech-bubble.cat-mode {
  left: 27%;
  top: 54%;
  width: 42%;
  min-height: 12%;
  padding: 2.2% 3.2%;
  font-size: clamp(11px, 1.95vw, 20px);
}

.question-panel, .explanation-panel {
  position: absolute;
  left: 4%; top: 22%; width: 70%;
  z-index: 26;
  border: 3px solid #303030;
  border-radius: 20px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 7px 18px rgba(0,0,0,.2);
}
.question-panel { min-height: 51%; padding: 2.3% 3%; }
.question-number {
  display: inline-block;
  margin-bottom: 1.3%;
  padding: .25em .75em;
  border-radius: 999px;
  background: #ff9b25;
  color: white;
  font-size: clamp(10px, 1.8vw, 18px);
  font-weight: 800;
}
.question-text {
  font-size: clamp(12px, 2.2vw, 23px);
  line-height: 1.45;
  font-weight: 800;
  color: #242424;
}
.choice-list {
  margin: 2.1% 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(11px, 1.9vw, 20px);
  line-height: 1.65;
  font-weight: 650;
}
.choice-list li { padding-left: .25em; }
.answer-buttons {
  position: absolute;
  left: 4.1%; top: 78%;
  width: 28%; height: 14%;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.answer-button { position: static; transform: none; width: 29%; }
.answer-button:hover { transform: scale(1.08); }
.answer-button[disabled] { opacity: .55; cursor: default; }

.explanation-panel {
  min-height: 39%;
  padding: 3% 3.5%;
  font-size: clamp(12px, 2.15vw, 23px);
  line-height: 1.55;
  font-weight: 700;
}
.explanation-title {
  display: inline-block;
  margin-bottom: 2%;
  padding: .2em .75em;
  border-radius: 999px;
  background: #6b5adf;
  color: #fff;
  font-weight: 800;
}
.next-button { left: 81.25%; top: 83.3%; width: 25%; z-index: 35; }
.game-end-button { left: 92.9%; top: 94.4%; width: 9.3%; z-index: 15; }
.help-button {
  position: absolute;
  left: 1.15%; bottom: 1.4%;
  z-index: 15;
  width: 5.2%; aspect-ratio: 1;
  border: 3px solid #111;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: clamp(14px, 3.3vw, 34px);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.modal-layer {
  position: absolute;
  inset: 0;
  z-index: 100;
  background: rgba(255,255,255,.08);
}
.modal-button {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.modal-button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.howto-layer { z-index: 120; background: #fff4df; }


@media (max-width: 540px) {
  .game-frame { border-width: 3px; border-radius: 10px; }
  .speech-bubble, .question-panel, .explanation-panel { border-width: 2px; border-radius: 14px; }
  .help-button { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ===== V0.2 IT Passport optimized additions ===== */
.subtitle-image { display:none; }
.subtitle-text {
  position:absolute; left:28%; top:14.7%; transform:translateX(-50%); z-index:7;
  padding:.22em .8em; border-radius:999px; background:rgba(255,255,255,.86);
  color:#135a83; font-size:clamp(9px,1.5vw,16px); font-weight:800; letter-spacing:.03em;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.version-label { left:70.8%; top:8.3%; transform: translateY(-50%); }
.it-guide { left:76.5%; top:9.1%; width:6.2%; z-index:10; }
.it-guide:hover { transform:translate(-50%,-50%) scale(1.07); }
.question-meta { display:flex; align-items:center; gap:1.1%; margin-bottom:1.4%; }
.question-number { margin-bottom:0; }
.question-category {
  display:inline-block; padding:.25em .72em; border-radius:999px; color:#fff; background:#2388c9;
  font-size:clamp(9px,1.55vw,16px); font-weight:800;
}
.explanation-panel { min-height:46%; top:20%; padding:2.4% 3.2%; font-size:clamp(11px,1.78vw,19px); }
.explanation-title { margin-bottom:1%; }
.related-title {
  display:inline-block; margin-top:2.1%; margin-bottom:.8%; padding:.18em .65em; border-radius:999px;
  background:#188464; color:#fff; font-weight:800;
}
.related-text { color:#1d4f42; font-weight:750; }
.cloud-event { left:102%; top:15%; width:9%; z-index:24; }
.packet-event { left:-10%; top:85%; width:10%; z-index:24; }
.result-overlay {
  position:absolute; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(10,43,66,.72); backdrop-filter:blur(3px);
}
.result-card {
  width:72%; min-height:48%; padding:6% 6% 5%; border:4px solid #fff; border-radius:28px;
  background:linear-gradient(180deg,#eefbff,#fff7e7); text-align:center; box-shadow:0 16px 40px rgba(0,0,0,.3);
}
.result-title { font-size:clamp(22px,5vw,50px); font-weight:1000; color:#135a83; letter-spacing:.07em; }
.result-text { margin:6% 0; font-size:clamp(14px,2.8vw,28px); line-height:1.7; font-weight:800; }
.result-text strong { font-size:1.25em; color:#e36621; }
.result-text span { font-size:.7em; color:#4f6470; }
.restart-button {
  border:0; border-radius:999px; padding:.7em 1.7em; background:#1769aa; color:#fff; font-size:clamp(12px,2vw,20px);
  font-weight:900; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.restart-button:hover { transform:translateY(-1px); }