/* trial-core.css — trial.html / trial-mini.html 共通の画面スタイル（演出は trial-fx.css） */
:root {
  --navy: #1e2a5a;
  --cream: #fdf8ec;
  --pink: #ffd6e0;
  --yellow: #fff1b8;
  --blue: #d9e6ff;
  --green: #d4f5e4;
  --rose: #ff6f9c;
  --sky: #3d6bff;
  --dopa: #ffd84a;
  --ok: #22b573;
  --ng: #ff5a6e;
  --bw: 3px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; overflow-x: clip; }
body {
  min-height: 100vh; min-height: 100dvh;
  background: var(--cream);
  color: var(--navy);
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Hiragino Sans', sans-serif;
  font-weight: 800;
  overflow-x: hidden; overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  user-select: none; -webkit-user-select: none;
}
button, a { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* ---------- background ---------- */
#tr-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 214, 224, .75) 0 110px, transparent 111px),
    radial-gradient(circle at 92% 62%, rgba(217, 230, 255, .8) 0 140px, transparent 141px),
    radial-gradient(circle at 20% 92%, rgba(255, 241, 184, .8) 0 120px, transparent 121px),
    linear-gradient(rgba(30, 42, 90, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 42, 90, .06) 1px, transparent 1px);
  background-size: auto, auto, auto, 22px 22px, 22px 22px;
}
#tr-fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }

.tr-app {
  position: relative; z-index: 1;
  width: 100%; max-width: 480px; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.tr-screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
.tr-screen.is-active { display: flex; }

/* ---------- generic pop parts ---------- */
.tr-pop {
  border: var(--bw) solid var(--navy);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 var(--navy);
  transition: transform .08s ease, box-shadow .08s ease;
}
button.tr-pop:active:not(:disabled), a.tr-pop:active { transform: translateY(4px); box-shadow: 0 0 0 var(--navy); }
.tr-pill {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2.5px solid var(--navy); border-radius: 999px;
  background: #fff; padding: 2px 10px; font-size: 13px; line-height: 1.4;
  white-space: nowrap; box-shadow: 0 2px 0 var(--navy);
}
.tr-pill small { font-size: 10px; font-weight: 800; opacity: .75; }

/* ---------- start screen ---------- */
.tr-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; font-size: 13px; text-decoration: none; border-radius: 999px;
}
.tr-logo {
  margin: 14px 0 0; text-align: center; line-height: 1.05;
  font-weight: 900; letter-spacing: .01em;
}
.tr-logo .l1, .tr-logo .l2 { display: block; }
.tr-logo .l1 { font-size: clamp(30px, 9vw, 42px); }
.tr-logo .l2 { font-size: clamp(38px, 12vw, 54px); margin-top: 2px; }
.tr-logo span span {
  display: inline-block;
  -webkit-text-stroke: 7px var(--navy); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--navy);
  transform: rotate(var(--r, 0deg));
}
.tr-tagline {
  align-self: center; margin: 10px 0 0; padding: 3px 14px; font-size: 13px;
  background: #fff; border: 2.5px solid var(--navy); border-radius: 999px; color: #b45309;
}
#tr-title-mascot {
  width: 150px; height: 150px; margin: 12px auto 4px;
  display: flex; align-items: center; justify-content: center;
}
#tr-title-mascot svg, #tr-mascot-slot svg { width: 100%; height: 100%; display: block; }
.tr-section-label { font-size: 12px; margin: 14px 2px 6px; opacity: .8; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-chip {
  padding: 7px 12px; font-size: 14px; border-radius: 14px;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.tr-chip small { font-size: 11px; opacity: .7; }
.tr-chip[aria-pressed="true"] { background: var(--dopa); }
.tr-count-chips { justify-content: center; }
.tr-count-chips .tr-chip { min-width: 72px; justify-content: center; font-size: 20px; padding: 8px 12px; }
.tr-start-btn {
  display: block; width: 100%; margin: 20px 0 0; padding: 14px 0;
  font-size: 24px; font-weight: 900; letter-spacing: .1em;
  background: var(--sky); color: #fff; border-radius: 20px;
  -webkit-text-stroke: 1px var(--navy);
}
.tr-start-btn:disabled { background: #b8c2dd; cursor: not-allowed; }
.tr-start-note { min-height: 1.2em; margin: 8px 0 0; font-size: 12px; text-align: center; color: #c2185b; }
.tr-toggles { display: flex; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tr-toggle { padding: 5px 10px; font-size: 12px; border-radius: 999px; box-shadow: 0 3px 0 var(--navy); }
.tr-toggle b { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #eee; font-size: 11px; }
.tr-toggle[aria-pressed="true"] b { background: var(--green); color: #127a4a; }
.tr-best { text-align: center; margin-top: 12px; font-size: 13px; opacity: .85; }
.tr-hint { text-align: center; margin-top: 6px; font-size: 11px; opacity: .55; font-weight: 700; }

/* ---------- HUD ---------- */
.tr-hud { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 3; }
.tr-hud-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tr-hud-left { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.tr-hud-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } /* タイマー・♪ は絶対に縮めない */
.tr-quit {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; padding: 0; font-size: 14px;
  box-shadow: 0 2px 0 var(--navy); border-width: 2.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 進捗ドットは常に1行。幅が足りなければドット径が縮む */
.tr-dots { display: flex; align-items: center; flex: 1 1 auto; flex-wrap: nowrap; gap: 3px; min-width: 0; overflow: hidden; }
.tr-dot { flex: 0 1 11px; min-width: 5px; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; border: 2px solid var(--navy); background: #fff; }
.tr-dots.is-many { gap: 2px; }
.tr-dots.is-many .tr-dot { border-width: 1.5px; }
.tr-dot.is-done { background: var(--sky); }
.tr-dot.is-now { background: var(--dopa); }
.tr-timer { font-variant-numeric: tabular-nums; }
.tr-timer .tt { font-size: 16px; font-weight: 900; }
.tr-timer.is-over .tt { color: var(--ng); }
.tr-timer.is-urgent { background: #ffe1e6; animation: tr-blink .5s steps(2) infinite; }
@keyframes tr-blink { 50% { background: #fff; } }
.tr-sound {
  width: 32px; height: 32px; border-radius: 50%; padding: 0; font-size: 15px;
  border-width: 2.5px; box-shadow: 0 2px 0 var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.tr-sound[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.tr-score-pills { display: flex; gap: 6px; }
.tr-pill-dopa { background: var(--dopa); font-size: 15px; padding: 3px 12px; max-width: 60%; overflow: hidden; }
.tr-pill-dopa .val { font-weight: 900; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* ---------- stage & card ---------- */
#tr-stage { position: relative; height: 120px; margin-top: 6px; z-index: 2; }
#tr-stage::after { /* 棚の線（マスコットが腰かけるライン） */
  content: ''; position: absolute; left: 6%; right: 6%; bottom: 10px; height: 3px;
  background: var(--navy); border-radius: 2px;
}
#tr-mascot-slot {
  position: absolute; left: 50%; bottom: 2px; width: 104px; height: 104px;
  transform: translateX(-50%); z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
}
#tr-card {
  position: relative; z-index: 1;
  border-radius: 22px; padding: 12px 14px 12px;
  min-height: 190px; margin-top: -2px;
  display: flex; flex-direction: column;
}
.tr-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tr-deck-badge {
  background: var(--sky); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11px;
  max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tr-qno { font-size: 13px; white-space: nowrap; }
.tr-q {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 4px; font-size: 34px; font-weight: 900; line-height: 1.3;
  overflow-wrap: anywhere; word-break: normal;
}
.tr-q.is-m { font-size: 26px; }
.tr-q.is-s { font-size: 20px; }
.tr-q.is-xs { font-size: 16px; line-height: 1.45; }
.tr-q-image {
  align-self: center; flex: 0 1 auto; min-width: 0; max-width: 100%; max-height: 28vh;
  margin: 8px 0 0; padding: 0; border: 2px solid var(--navy); border-radius: 12px;
  background: #fff; overflow: hidden; line-height: 0; cursor: zoom-in;
}
.tr-q-image img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(28vh - 4px);
  object-fit: contain;
}
.tr-card-has-image { min-height: 0; }
.tr-card-has-image .tr-q { font-size: 26px; padding-top: 7px; padding-bottom: 7px; }
.tr-card-has-image .tr-q.is-m { font-size: 22px; }
.tr-card-has-image .tr-q.is-s { font-size: 18px; }
.tr-card-has-image .tr-q.is-xs { font-size: 15px; }
.tr-q-sub { text-align: center; font-size: 12px; color: var(--sky); }

.tr-image-viewer {
  position: fixed; inset: 0; z-index: 100; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(10, 17, 45, .9);
}
.tr-image-viewer-close {
  width: 100%; height: 100%; padding: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.tr-image-viewer img {
  display: block; max-width: 100%; max-height: 100%; object-fit: contain;
  border: 2px solid var(--navy); border-radius: 14px; background: #fff;
}

#tr-choices {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px;
  margin-top: 16px; position: relative; z-index: 1;
}
.tr-choice {
  position: relative; min-height: 76px; padding: 8px 10px; border-radius: 16px;
  font-size: 20px; font-weight: 900; line-height: 1.25; text-align: center;
  display: flex; align-items: center; justify-content: center;
  overflow-wrap: anywhere; word-break: normal;
}
.tr-choice:nth-child(4n+1) { background: var(--pink); }
.tr-choice:nth-child(4n+2) { background: var(--yellow); }
.tr-choice:nth-child(4n+3) { background: var(--blue); }
.tr-choice:nth-child(4n+4) { background: var(--green); }
.tr-choice.is-m { font-size: 16px; }
.tr-choice.is-s { font-size: 13px; }
.tr-choice.is-xs { font-size: 11.5px; line-height: 1.35; }
.tr-choice .key {
  position: absolute; left: 7px; top: 5px; font-size: 10px; opacity: .45;
}
.tr-choice.is-wrong { background: #eceef4 !important; color: #9aa2bb; box-shadow: 0 0 0 var(--navy); transform: translateY(4px); cursor: default; }
.tr-choice.is-wrong::after {
  content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 54px; color: var(--ng); font-weight: 900; opacity: .85;
}
.tr-choice.is-correct { background: #fff !important; border-color: var(--ok); box-shadow: 0 4px 0 var(--ok); }
.tr-choice.is-correct::before {
  content: ''; position: absolute; inset: 8px; border: 5px solid var(--ok); border-radius: 50%; opacity: .6; pointer-events: none;
}
.tr-choice:disabled { cursor: default; }
.tr-choices-lock #tr-choices .tr-choice:not(.is-correct):not(.is-wrong) { cursor: wait; }

/* ---------- result modal ---------- */
.tr-modal {
  position: fixed; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(253, 248, 236, .55);
  overflow-y: auto;
}
.tr-modal.is-open { display: flex; }
#tr-result-card {
  width: 100%; max-width: 400px; border-radius: 26px; padding: 18px 16px 18px; text-align: center;
  margin: auto;
}
.tr-r-label {
  display: inline-block; background: var(--sky); color: #fff; border-radius: 999px;
  padding: 3px 14px; font-size: 13px; border: 2.5px solid var(--navy);
}
.tr-r-score { margin: 6px 0 0; line-height: 1; }
.tr-r-score .num {
  font-size: 84px; font-weight: 900; color: #f59e0b;
  -webkit-text-stroke: 8px var(--navy); paint-order: stroke fill; text-shadow: 0 6px 0 var(--navy);
  font-variant-numeric: tabular-nums;
}
.tr-r-score .unit { font-size: 28px; font-weight: 900; margin-left: 2px; }
.tr-r-sub { font-size: 13px; margin-top: 6px; }
.tr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.tr-tile { border: 2.5px solid var(--navy); border-radius: 14px; padding: 6px 4px 8px; background: #fffdf5; }
.tr-tile .k { font-size: 11px; opacity: .75; }
.tr-tile .v { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tr-tile .v small { font-size: 12px; margin-left: 1px; }
.tr-r-dopa { margin-top: 12px; font-size: 13px; }
.tr-r-dopa b { font-size: 20px; color: #d18a00; overflow-wrap: anywhere; }
.tr-r-combo { display: inline-block; margin-left: 10px; }
.tr-r-combo b { font-size: 18px; }
.tr-r-unlock { margin-top: 2px; font-size: 13px; color: #d97706; }
.tr-r-best { display: inline-block; margin-top: 8px; padding: 2px 12px; border-radius: 999px; background: var(--dopa); border: 2.5px solid var(--navy); font-size: 14px; }
.tr-r-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 16px; }
.tr-r-main { width: 88%; padding: 12px 0; font-size: 20px; font-weight: 900; background: var(--sky); color: #fff; border-radius: 18px; -webkit-text-stroke: .6px var(--navy); }
.tr-r-main small { font-size: 12px; margin-left: 4px; }
.tr-r-sec { width: 50%; padding: 7px 0; font-size: 15px; border-radius: 14px; }
.tr-weak { margin-top: 14px; text-align: left; border: 2.5px dashed var(--navy); border-radius: 14px; padding: 8px 10px; background: #fff7f9; }
.tr-weak h3 { margin: 0 0 4px; font-size: 13px; }
.tr-weak ul { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow-y: auto; }
.tr-weak li { font-size: 13px; padding: 4px 0; border-bottom: 1px dotted rgba(30, 42, 90, .25); overflow-wrap: anywhere; font-weight: 700; }
.tr-weak li:last-child { border-bottom: 0; }
.tr-weak li .ar { opacity: .5; margin: 0 4px; }
.tr-weak li .en { font-weight: 900; }

[hidden] { display: none !important; }

@media (max-width: 360px) {
  .tr-app { padding-left: 10px; padding-right: 10px; }
  .tr-hud .tr-pill { padding: 2px 7px; }
  .tr-timer small { font-size: 9px; }
  .tr-timer .tt { font-size: 14px; }
  .tr-hud-left, .tr-hud-right { gap: 4px; }
}
@media (max-height: 700px) {
  #tr-stage { height: 100px; }
  #tr-mascot-slot { width: 88px; height: 88px; }
  #tr-card { min-height: 160px; }
  .tr-choice { min-height: 66px; }
  .tr-q-image { max-height: 22vh; }
  .tr-q-image img { max-height: calc(22vh - 4px); }
  .tr-tagline {
  align-self: center; margin: 10px 0 0; padding: 3px 14px; font-size: 13px;
  background: #fff; border: 2.5px solid var(--navy); border-radius: 999px; color: #b45309;
}
#tr-title-mascot { width: 120px; height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-timer.is-urgent { animation: none; }
}