/* 先生にバレるな！ 固有のスタイル（共通部分は assets/css/game.css） */

.topbar h1 { font-size: clamp(1.1rem, 4vw, 1.8rem); }
.choices .oni { background: #3b2a1e; color: #fff; }
.choices input:checked + .oni { background: var(--red); color: #fff; }
.mischief-table { margin: 8px auto; border-collapse: collapse; font-size: 0.85rem; }
.mischief-table th, .mischief-table td { border: 2px solid var(--ink); padding: 3px 8px; background: #fff; }
.mischief-table th { background: #fff3a8; white-space: nowrap; }

.hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; font-weight: 700; }
.hud-item { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }
.hud-item b { font-size: 1.2rem; color: var(--red); }
.timer { font-variant-numeric: tabular-nums; }
.timer.hurry { color: var(--red); border-color: var(--red); }
.cards { display: flex; gap: 4px; align-items: center; }
.ycard { display: inline-block; width: 16px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; background: #fff; }
.ycard.on { background: var(--yellow); animation: pop 0.3s ease-out; }

/* ---------- 教室（一人称） ---------- */
.room {
  position: relative;
  aspect-ratio: 900 / 600;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background:
    linear-gradient(to bottom, #f3ead7 0 62%, #b5864f 62% 63%, #d9ae78 63%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.window {
  position: absolute; left: 2%; top: 8%; width: 13%; height: 36%;
  background: linear-gradient(#bfe3ff, #e8f5ff);
  border: 5px solid #a8743f; border-radius: 4px;
  box-shadow: inset 0 0 0 3px #fff;
}
.window::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2.5px; background: #a8743f; }
.clock {
  position: absolute; right: 4%; top: 7%;
  width: 7%; aspect-ratio: 1;
  background: #fff; border: 4px solid var(--ink); border-radius: 50%;
}
.clock span { position: absolute; left: 50%; bottom: 50%; width: 3px; background: var(--ink); transform-origin: 50% 100%; border-radius: 2px; }
.clock .hand-m { height: 40%; margin-left: -1.5px; transform: rotate(var(--m, 0deg)); }
.clock .hand-h { height: 26%; margin-left: -1.5px; transform: rotate(var(--h, 300deg)); }
.board {
  position: absolute; left: 20%; right: 20%; top: 6%; height: 30%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.07), transparent 60%), #2f5d46;
  border: 8px solid #a8743f; border-bottom-width: 12px; border-radius: 4px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
}
.chalk-lines { position: absolute; inset: 8% 6%; font-family: "Yomogi", var(--font); color: #f7f5ee; font-size: clamp(0.6rem, 1.9vw, 1.1rem); line-height: 1.5; overflow: hidden; white-space: nowrap; }
.podium {
  position: absolute; left: 42%; width: 16%; top: 44%; height: 14%;
  background: #a8743f; border: 3px solid var(--ink); border-radius: 4px 4px 0 0;
  z-index: 3;
}

.teacher {
  position: absolute;
  left: var(--x, 50%); top: var(--y, 50%);
  width: 12%; aspect-ratio: 80 / 130;
  transform: translate(-50%, -100%) scale(var(--s, 1));
  transform-origin: 50% 100%;
  z-index: 2;
  transition: left 0.1s linear, top 0.1s linear;
}
.teacher.walking { z-index: 5; }
.teacher .body, .teacher .body .art-svg { width: 100%; height: 100%; display: block; }
.teacher.writing .body { animation: write 0.35s ease-in-out infinite alternate; }
@keyframes write { to { translate: 4px -2px; } }
.bubble {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #fff; border: 3px solid var(--ink); border-radius: 12px;
  padding: 0 10px; font-weight: 900; font-size: clamp(0.7rem, 2vw, 1rem);
}
.bubble:empty { display: none; }
.bubble.angry { background: var(--red); color: #fff; font-size: clamp(1rem, 3.4vw, 1.6rem); animation: pop 0.3s ease-out; }

.classmates { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 4; }
.mate { position: absolute; transform: translate(-50%, -100%); }
.mate .art-svg { width: 100%; height: 100%; display: block; }
.mate-desk { position: absolute; transform: translate(-50%, 0); background: #c79a63; border: 3px solid var(--ink); border-radius: 4px; }

/* 自分の机 */
.desk {
  position: absolute; left: 6%; right: 6%; bottom: -4%; height: 30%;
  background: linear-gradient(#d7a46b, #c99257);
  border: 4px solid #7a522a; border-radius: 10px 10px 0 0;
  z-index: 6;
}
.textbook, .item { position: absolute; left: 50%; top: 10%; width: 34%; aspect-ratio: 80 / 60; transform: translateX(-50%); transition: transform 0.15s, opacity 0.15s; }
.textbook .art-svg, .item .art-svg { width: 100%; height: 100%; display: block; }
.textbook { z-index: 1; }
.item { z-index: 2; transform: translateX(-50%) translateY(120%); opacity: 0; }
.desk.active .item { transform: translateX(-50%); opacity: 1; }
.desk.hiding .item { transform: translateX(-50%) translateY(60%); opacity: 0.7; }
.hands { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; gap: 30%; pointer-events: none; z-index: 3; }
.hands .art { width: 16%; aspect-ratio: 1; }
.hands .art-svg { width: 100%; height: 100%; }
.desk.active .hands .art { animation: busy 0.25s ease-in-out infinite alternate; }
.desk.active .hands { gap: 8%; }
@keyframes busy { to { translate: 0 -10%; rotate: 8deg; } }

.big-text {
  position: absolute; left: 0; right: 0; top: 34%;
  text-align: center;
  font-size: clamp(1.8rem, 7vw, 3.6rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
  pointer-events: none;
  z-index: 8;
}
.big-text.show { animation: pop 0.3s ease-out; }
.big-text.red { color: var(--red); }
.big-text.yellow { color: var(--yellow); }
.flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; box-shadow: inset 0 0 0 10px rgba(217, 83, 79, 0.7), inset 0 0 90px rgba(217, 83, 79, 0.5); }

/* 操作 */
.controls { display: grid; gap: 8px; margin-top: 10px; }
.mischief { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mis-btn {
  display: grid; justify-items: center; gap: 1px;
  padding: 6px 4px;
  font-family: inherit; color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink); border-radius: 14px;
  cursor: pointer;
}
.mis-btn .art { width: 52px; height: 39px; }
.mis-btn small { font-size: 0.7rem; color: var(--ink-soft); }
.mis-btn.on { background: var(--yellow); box-shadow: var(--shadow); }
.mis-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sneak-btn {
  display: grid; justify-items: center;
  padding: 14px;
  font-family: inherit; color: #fff;
  background: #5a3a7a;
  border: 4px solid var(--ink); border-radius: 999px;
  box-shadow: 0 6px 0 rgba(59, 42, 30, 0.35);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.sneak-main { font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 900; }
.sneak-sub { font-size: 0.75rem; font-weight: 700; opacity: 0.85; }
.sneak-btn.pressed { background: #7a4fa3; transform: translateY(4px); box-shadow: 0 2px 0 rgba(59, 42, 30, 0.35); }
.sneak-btn:disabled { opacity: 0.5; }

.ranking { text-align: left; margin: 8px auto 12px; max-width: 260px; padding-left: 1.6em; }
.ranking li { font-weight: 700; margin-bottom: 4px; }
.ranking li.me { color: var(--red); }
.ranking .wait { color: var(--ink-soft); font-weight: 500; }
.ranking .art { width: 1.5em; height: 1.5em; vertical-align: middle; }

/* ボタンを押しているあいだ その悪いこと */
.mis-btn { padding: 10px 4px; touch-action: none; -webkit-user-select: none; user-select: none; }
.mis-btn .art { width: 64px; height: 48px; }
.mis-btn.pressed { background: #7a4fa3; color: #fff; transform: translateY(3px); box-shadow: 0 2px 0 rgba(59, 42, 30, 0.35); }
.mis-btn.pressed small { color: #f0e6ff; }
.hint.how { text-align: center; margin: 0; }

/* 目標の称号と進み具合 */
.goal { flex: 1 1 220px; display: grid; gap: 2px; }
.goal-text { font-size: 0.85rem; font-weight: 900; }
.goal-text b { color: #7a4fa3; }
.goal-bar { height: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.goal-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b39ddb, #7a4fa3); transition: width 0.2s; }
.goal.done .goal-bar span { background: linear-gradient(90deg, var(--yellow), var(--red)); }