/* Current NURDIVE UI. Shared layout, components and responsive states. */
:root { --card: #fff; --warn: #d98a32; }
.game-hidden { display: none; }
@media (max-width: 760px) {

}
* { box-sizing: border-box; }
body { margin: 0px; color: var(--ink); font-family: "Noto Sans JP", sans-serif; min-height: 100vh; }
.noise { position: fixed; inset: 0px; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.app-shell { min-height: calc(-48px + 100vh); position: relative; }
.topbar { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; font-family: "Noto Sans JP"; font-size: 23px; font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand strong { font: 700 16px / 1 "Noto Sans JP"; letter-spacing: 0.14em; }
.brand small { font-size: 10px; margin-top: 5px; letter-spacing: 0.24em; color: var(--muted); }
.shift { margin: auto; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); }
.shift b { color: var(--ink); margin-left: 8px; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--mint); box-shadow: rgba(105, 213, 193, 0.18) 0px 0px 0px 5px; }
.icon-btn { border: 1px solid var(--line); width: 38px; height: 38px; border-radius: 50%; }
.status-strip { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; align-items: center; color: rgb(255, 255, 255); }
.eyebrow { margin: 0px 0px 7px; font-size: 10px; letter-spacing: 0.22em; font-weight: 700; color: var(--teal); }
.status-strip .eyebrow { color: var(--mint); }
.condition-line { display: flex; align-items: baseline; }
.condition-line span { font-size: 11px; color: rgb(169, 189, 192); }
.vitals { display: flex; }
.vitals div { border-left: 1px solid rgb(53, 81, 87); padding-left: 16px; }
.vitals span, .vitals strong, .vitals small { display: inline; }
.vitals span { display: block; font-size: 9px; letter-spacing: 0.12em; color: rgb(131, 160, 165); }
.vitals strong { margin-right: 2px; }
.vitals small { font-size: 9px; color: rgb(131, 160, 165); }
.health-wrap > div:first-child { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.12em; }
.health-wrap b { color: var(--mint); }
.health-track, .progress-track { height: 5px; background: rgb(41, 70, 75); margin-top: 9px; overflow: hidden; }
.health-track i, .progress-track i { display: block; width: 100%; height: 100%; background: var(--mint); transition: width 0.5s, background 0.4s; }
.case-number { display: flex; align-items: baseline; }
.case-number span { letter-spacing: 0.15em; margin-right: 5px; color: var(--muted); }
.case-number small { font-weight: 700; }
.progress-track { background: rgb(215, 225, 221); margin: 17px 0px 30px; }
.progress-track i { width: 10%; background: var(--teal); }
.case-meta { margin: 0px; }
.case-meta div { border-bottom: 1px solid var(--line); }
.case-meta dt { color: var(--muted); margin-bottom: 4px; }
.case-meta dd { margin: 0px; font-weight: 700; }
.streak-card { margin-top: 30px; padding: 18px; color: rgb(255, 255, 255); }
.streak-card span, .streak-card small { display: block; font-size: 9px; color: rgb(145, 170, 174); letter-spacing: 0.13em; }
.streak-card strong { display: block; margin: 7px 0px; }
.streak-card strong b { font-size: 28px; color: var(--mint); }
.text-btn { border: 0px; background: transparent; color: var(--muted); font-size: 11px; margin-top: 25px; cursor: pointer; }
.question-panel { display: flex; flex-direction: column; position: relative; }
.question-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }
.source-badge { font-weight: 700; color: var(--teal); background: rgb(224, 243, 239); padding: 6px 10px; }
.instruction { color: var(--muted); }
.lead { color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; margin: 0px 0px 12px; }
.question-body h1 { max-width: 780px; }
.choices { display: grid; }
.choice { display: flex; align-items: center; width: 100%; border: 1px solid var(--line); background: rgb(255, 255, 255); color: var(--ink); cursor: pointer; }
.choice:disabled { transform: none; }
.choice-index { display: grid; place-items: center; border: 1px solid var(--line); margin-right: 14px; font-weight: 700; }
.selected .choice-index { background: var(--teal); color: rgb(255, 255, 255); border-color: var(--teal); }
.feedback { display: none; }
.feedback.show { display: grid; }
.feedback.correct-feedback { border-color: var(--teal); }
.feedback-icon { display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: rgb(255, 255, 255); font-weight: 700; }
.correct-feedback .feedback-icon { background: var(--teal); }
.feedback-label { font-weight: 700; letter-spacing: 0.18em; color: var(--danger); margin: 0px 0px 3px; }
.correct-feedback .feedback-label { color: var(--teal); }
.feedback h2 { margin: 0px 0px 7px; }
.feedback p { margin: 0px; }
.consequence { margin-top: 12px; background: rgba(217, 75, 75, 0.08); font-weight: 700; }
.correct-feedback .consequence { background: rgba(12, 129, 125, 0.08); }
details { margin-top: 12px; font-size: 11px; }
summary { cursor: pointer; color: var(--teal); font-weight: 700; }
#choiceNotes p { margin-top: 7px; }
.action-row { margin-top: auto; min-height: 82px; display: flex; align-items: center; justify-content: flex-end; }
.action-row > span { margin-right: auto; color: var(--muted); }
kbd { border: 1px solid rgb(204, 216, 212); background: rgb(255, 255, 255); padding: 2px 5px; box-shadow: rgb(187, 200, 196) 0px 1px 0px; }
.primary-btn { border: 0px; color: rgb(255, 255, 255); padding: 14px 19px; font-weight: 700; cursor: pointer; min-width: 155px; }
.primary-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.primary-btn span { float: right; margin-left: 28px; }
.result-modal { position: fixed; inset: 0px; background: rgba(9, 31, 35, 0.72); display: grid; place-items: center; z-index: 10; backdrop-filter: blur(8px); }
.result-modal[hidden] { display: none; }
.result-card { text-align: center; }
.result-card h2 { font: 700 34px "Noto Sans JP"; margin: 5px; }
.score-ring { width: 150px; height: 150px; border-width: 8px; border-style: solid; border-right-color: rgb(220, 235, 231); border-bottom-color: rgb(220, 235, 231); border-left-color: rgb(220, 235, 231); border-image: none; border-top-color: var(--teal); border-radius: 50%; display: flex; align-items: baseline; justify-content: center; padding-top: 42px; margin: 25px auto; }
.score-ring strong { font-size: 48px; }
.score-ring span { color: var(--muted); }
.result-card > p { font-size: 13px; color: var(--muted); }
.result-stats { display: flex; justify-content: center; gap: 30px; margin: 25px 0px; }
.result-stats b { display: block; font-size: 20px; color: var(--teal); }
body.critical .app-shell { animation: 1.4s ease 0s infinite normal none running critical; }
body.blur .question-body { animation: 4s ease 0s infinite normal none running softBlur; }
@keyframes rise { 
  0% { opacity: 0; transform: translateY(8px); }
}
@keyframes critical { 
  50% { box-shadow: rgba(217, 75, 75, 0.28) 0px 22px 80px; }
}
@keyframes softBlur { 
  50% { filter: blur(0.35px); }
}
@media (max-width: 760px) {
.vitals { display: none; }
.side-panel { border-right: 0px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.side-panel > .eyebrow, .case-meta, .text-btn { display: none; }
.progress-track { margin: 9px 0px; }
.streak-card { margin: 0px; padding: 11px; }
.instruction { display: none; }
.primary-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.side-panel { padding-left: 24px; padding-right: 24px; }
.self-panel { min-width: 0px; }
.self-heading { display: flex; align-items: start; justify-content: space-between; }
.self-heading h2 { font: 700 16px "Noto Sans JP"; margin: 0px; }
.self-heading > span { font-size: 8px; letter-spacing: 0.12em; color: var(--teal); border: 1px solid rgb(185, 217, 210); padding: 5px 7px; }
.avatar-stage { margin: 17px 0px 12px; position: relative; display: grid; place-items: center; }
.scan-line { position: absolute; left: 0px; right: 0px; height: 1px; background: linear-gradient(90deg,transparent,var(--mint),transparent); box-shadow: 0 0 8px var(--mint); }
.avatar { height: 258px; overflow: visible; }
.body-part { fill: url("#bodyFill"); stroke: rgb(91, 141, 132); stroke-width: 1.5; transition: 0.5s; }
.lung { fill: rgba(255, 255, 255, 0.36); stroke: rgb(120, 166, 158); }
.heart { fill: rgb(217, 106, 104); animation: 1.2s ease 0s infinite normal none running heartbeat; transform-origin: 90px 138px; }
.pain-point { fill: rgb(235, 88, 88); opacity: 0; filter: drop-shadow(rgb(243, 56, 56) 0px 0px 6px); }
.avatar-callout { position: absolute; right: 9px; top: 12px; }
.avatar-callout b, .avatar-callout span { display: block; }
.symptom-chips { display: flex; gap: 5px; flex-wrap: wrap; min-height: 25px; }
.symptom-chips span { padding: 5px 7px; background: rgb(254, 232, 230); color: rgb(180, 61, 61); border: 1px solid rgb(243, 195, 191); }
.symptom-chips .empty-chip { background: rgb(232, 244, 240); color: var(--teal); border-color: rgb(202, 227, 220); }
.record-head { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.record-head p { margin: 0px; }
.record-head span { font-size: 9px; color: var(--muted); }
.record-log { height: 184px; overflow: auto; padding-right: 5px; scrollbar-width: thin; }
.empty-record { font-size: 10px; line-height: 1.7; }
.record-item { padding: 11px 0px; border-bottom: 1px solid var(--line); animation: 0.25s ease 0s 1 normal none running rise; }
.record-item small { display: block; font-size: 8px; letter-spacing: 0.1em; color: var(--muted); }
.record-item p { font-size: 10px; line-height: 1.55; margin: 4px 0px; }
.record-item p::before { content: "「"; }
.record-item p::after { content: "」"; }
.record-item b { display: block; font-size: 9px; color: var(--teal); }
.record-item.wrong-record b { color: var(--danger); }
.avatar-stage.hypoxia-avatar .body-part { fill: rgb(153, 183, 200); filter: drop-shadow(rgba(64, 126, 160, 0.35) 0px 0px 5px); }
.avatar-stage.hypoxia-avatar .lung { fill: rgb(113, 148, 170); animation: 1.8s ease 0s infinite normal none running lungs; }
.avatar-stage.arrhythmia-avatar .heart { animation: 0.34s ease 0s infinite normal none running heartbeat; fill: rgb(232, 61, 77); }
.avatar-stage.joint-avatar .foot, .avatar-stage.nerve-avatar .shoulder { opacity: 1; animation: 1s ease 0s infinite normal none running pain; }
.avatar-stage.weak-avatar .avatar { transform: translateY(4px) rotate(1deg); }
.avatar-stage.tremor-avatar .avatar { animation: 0.16s ease 0s infinite normal none running tremor; }
.avatar-stage.blur-avatar .head { filter: drop-shadow(rgb(217, 138, 50) 0px 0px 7px); }
@keyframes heartbeat { 
  50% { transform: scale(1.13); }
}
@keyframes lungs { 
  50% { opacity: 0.38; }
}
@keyframes pain { 
  50% { opacity: 0.25; }
}
@keyframes tremor { 
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}
@media (max-width: 1040px) and (min-width: 761px) {
.game-grid { grid-template-columns: 210px 1fr; }
.self-panel { grid-column: 1 / -1; border-left: 0px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 220px 1fr; gap: 0px 22px; }
.self-heading, .avatar-stage, .symptom-chips { grid-column: 1; }
.record-head, .record-log { grid-column: 2; }
.record-head { grid-row: 1; margin-top: 0px; }
.record-log { grid-row: 2 / 4; height: 285px; }
.avatar-stage { height: 235px; }
.avatar { height: 215px; }
}
@media (max-width: 760px) {
.game-grid { grid-template-columns: 1fr; }
.self-panel { border-top: 1px solid var(--line); }
.avatar-stage { height: 270px; }
.avatar { height: 245px; }
.record-log { height: 190px; }
}
.body-alert { display: none; position: absolute; padding: 4px 7px; background: rgb(216, 50, 67); color: rgb(255, 255, 255); font-size: 8px; font-weight: 700; box-shadow: rgba(216, 50, 67, 0.55) 0px 0px 14px; animation: 0.8s ease 0s infinite normal none running alertBlink; }
.head-alert { left: 7px; top: 42px; }
.chest-alert { right: 5px; top: 112px; }
.limb-alert { left: 6px; bottom: 28px; }
.avatar-stage.show-head .head-alert, .avatar-stage.show-chest .chest-alert, .avatar-stage.show-limb .limb-alert { display: block; }
.avatar-stage.severe { background-color: rgb(249, 230, 228); border-color: rgb(223, 119, 119); }
.avatar-stage.severe .body-part { stroke: rgb(200, 52, 69); stroke-width: 2.5; }
.avatar-stage.severe::after { content: "CRITICAL"; position: absolute; left: 8px; top: 8px; color: rgb(216, 50, 67); font: 700 10px monospace; letter-spacing: 0.16em; }
.avatar-stage.dead-avatar { background: rgb(36, 30, 36); }
.avatar-stage.dead-avatar .avatar { filter: grayscale(1); opacity: 0.48; transform: rotate(5deg) translateY(12px); }
.avatar-stage.dead-avatar .heart { animation: auto ease 0s 1 normal none running none; fill: rgb(95, 85, 92); }
.avatar-stage.dead-avatar .scan-line { display: none; }
.danger-flash { animation: 0.45s ease 0s 3 normal none running dangerFlash; }
.result-card.death { border-top: 8px solid var(--danger); }
.result-card.death .score-ring { border-right-color: rgb(234, 213, 213); border-bottom-color: rgb(234, 213, 213); border-left-color: rgb(234, 213, 213); border-top-color: var(--danger); }
.result-card.death h2 { color: var(--danger); }
@keyframes alertBlink { 
  50% { opacity: 0.32; }
}
@keyframes dangerFlash { 
  50% { background: rgb(245, 205, 205); }
}
.face path { fill: none; stroke: rgb(49, 90, 88); stroke-width: 2; stroke-linecap: round; }
.flush { opacity: 0; stroke: rgb(216, 91, 100) !important; stroke-width: 4 !important; }
.sweat { fill: rgb(104, 185, 207); opacity: 0; }
.sick-marks { fill: rgb(143, 109, 158); opacity: 0; }
.pain-burst { fill: none; stroke: rgb(237, 52, 78); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.breath { display: none; position: absolute; width: 24px; height: 13px; border-radius: 50%; border: 2px solid rgb(145, 201, 213); right: 44px; top: 68px; opacity: 0.65; animation: 1.5s ease 0s infinite normal none running breathOut; }
.breath-two { animation-delay: 0.5s; }
.ecg-line { display: none; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 25px; background: rgba(7, 37, 41, 0.84); overflow: hidden; }
.ecg-line i { position: absolute; left: -30%; top: 5px; width: 160%; height: 17px; border-top: 2px solid rgb(97, 231, 197); clip-path: polygon(0px 45%, 18% 45%, 20% 0px, 22% 100%, 24% 45%, 100% 45%); animation: 1s linear 0s infinite normal none running ecgMove; }
.ecg-line span { position: absolute; right: 3px; top: 2px; color: rgb(117, 217, 196); font: 7px monospace; }
.avatar-stage.severe .sweat, .avatar-stage.show-head .sweat, .avatar-stage.show-chest .sweat, .avatar-stage.show-limb .sweat { opacity: 1; animation: 1.2s ease 0s infinite normal none running sweatDrop; }
.avatar-stage.severe .flush { opacity: 0.75; }
.avatar-stage.severe .mouth { stroke-width: 4; transform: translateY(3px); }
.avatar-stage.hypoxia-avatar .mouth { stroke: rgb(56, 88, 160); stroke-width: 4; }
.avatar-stage.hypoxia-avatar .breath { display: block; }
.avatar-stage.hypoxia-avatar .sick-marks, .avatar-stage.blur-avatar .sick-marks { opacity: 0.7; }
.avatar-stage.joint-avatar .pain-burst, .avatar-stage.nerve-avatar .pain-burst { opacity: 1; animation: 0.55s ease 0s infinite normal none running burst; }
.avatar-stage.arrhythmia-avatar .ecg-line { display: block; }
.avatar-stage.arrhythmia-avatar .torso { filter: drop-shadow(rgba(220, 30, 55, 0.7) 0px 0px 9px); }
.avatar-stage.weak-avatar .arm { transform-origin: center center; transform: rotate(5deg); }
.avatar-stage.dead-avatar .eye { stroke-width: 3; }
.avatar-stage.dead-avatar .mouth { stroke-width: 3; }
.avatar-stage.dead-avatar .sweat, .avatar-stage.dead-avatar .breath { display: none; }
.avatar-stage.dead-avatar .sick-marks { opacity: 0.4; }
@keyframes breathOut { 
  0% { transform: translate(0px, 0px) scale(0.4); opacity: 0.8; }
  100% { transform: translate(28px, -12px) scale(1.4); opacity: 0; }
}
@keyframes ecgMove { 
  100% { transform: translateX(25%); }
}
@keyframes burst { 
  50% { opacity: 0.25; transform: scale(1.1); }
}
@keyframes sweatDrop { 
  50% { transform: translateY(4px); opacity: 0.45; }
}
.report-link { margin-top: 14px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(199, 212, 209); border-image: none; background: transparent; padding: 3px 0px; color: var(--muted); cursor: pointer; }
.report-link:hover { color: var(--danger); }
.report-modal { position: fixed; inset: 0px; z-index: 20; display: grid; place-items: center; background: rgba(9, 31, 35, 0.72); backdrop-filter: blur(8px); }
.report-modal[hidden] { display: none; }
.report-card { position: relative; background: rgb(255, 255, 255); padding: 35px; box-shadow: var(--shadow); }
.report-card h2 { font: 700 24px "Noto Sans JP"; margin: 4px 0px; }
.report-close { position: absolute; right: 18px; top: 15px; border: 0px; background: none; font-size: 25px; color: var(--muted); }
.report-question { font-size: 11px; color: var(--teal); background: rgb(237, 247, 244); padding: 9px; }
.report-card label { display: block; margin-top: 14px; font-weight: 700; }
.report-card select, .report-card textarea, .report-card input { display: block; width: 100%; margin-top: 7px; padding: 11px; border: 1px solid var(--line); background: rgb(250, 252, 251); }
.report-note, .report-status { font-size: 9px; color: var(--muted); }
.report-status { color: var(--teal); font-weight: 700; }
.result-actions button { flex: 1 1 0%; }
.secondary-btn { border: 1px solid var(--line); background: rgb(255, 255, 255); color: var(--ink); padding: 13px 12px; font-weight: 700; cursor: pointer; }
.secondary-btn:hover { border-color: var(--teal); color: var(--teal); }
.legal-note { width: min(1240px, 100% - 40px); text-align: center; }
.legal-note a { color: var(--teal); margin-left: 12px; }
.icon-btn { font-size: 11px; font-weight: 700; cursor: pointer; }
.icon-btn.sound-on { background: var(--teal); color: rgb(255, 255, 255); border-color: var(--teal); }
@media (max-width: 760px) {
.legal-note { width: calc(100% - 28px); margin: 12px auto; }
.result-actions { flex-direction: column; }
}
.explanation-sources { padding: 16px; border: 1px solid rgb(191, 218, 216); border-radius: 12px; background: rgb(238, 247, 246); color: rgb(23, 63, 74); overflow-wrap: anywhere; }
.explanation-sources ul { margin: 8px 0px 16px; padding-left: 20px; }
.explanation-sources li + li { margin-top: 8px; }
.explanation-sources a { text-decoration: underline; text-underline-offset: 3px; }
.explanation-sources a:focus-visible { outline: rgb(131, 228, 221) solid 2px; outline-offset: 3px; }
.explanation-sources p { margin: 6px 0px 12px; }
.game-hidden, .title-screen[hidden] { display: none !important; }
.title-screen:not([hidden]) ~ .legal-note { display: none; }
.title-screen { position: relative; overflow: hidden; color: rgb(237, 249, 245); padding: 0px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; font-family: "Noto Sans JP", sans-serif; }
.title-top, .title-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; font: 700 9px monospace; }
.title-top { border-bottom: 1px solid rgb(28, 58, 63); }
.title-footer { margin-top: auto; border-top: 1px solid rgb(28, 58, 63); }
.title-content { position: relative; z-index: 2; flex: 1 1 0%; display: grid; width: 100%; margin: auto; }
.title-kicker { font: 700 10px monospace; }
.title-kicker i { display: inline-block; width: 28px; height: 1px; background: rgb(105, 213, 193); vertical-align: middle; margin-right: 9px; }
.title-copy h1 { font: 700 clamp(70px, 10vw, 138px) / 0.8 "Noto Sans JP", "Noto Sans JP", sans-serif; color: rgb(237, 249, 245); }
.start-btn { border: 0px; text-align: left; font: 700 14px "Noto Sans JP", sans-serif; cursor: pointer; transition: 0.2s; }
.start-btn:hover { transform: translateY(-2px); }
.start-btn small { display: block; font: 700 8px monospace; letter-spacing: 0.2em; margin-bottom: 4px; }
.start-btn b { float: right; font-size: 20px; }
.how-btn { border: 1px solid rgb(53, 81, 88); background: transparent; color: rgb(189, 208, 208); font-weight: 700; cursor: pointer; }
.how-btn:hover { border-color: rgb(105, 213, 193); color: rgb(105, 213, 193); }
.last-result { display: flex; font: 9px monospace; }
.how-panel { left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: rgb(0, 0, 0) 0px 35px 100px; }
.how-panel[hidden] { display: none; }
.how-panel > button { position: absolute; right: 15px; top: 12px; border: 0px; background: none; font-size: 25px; }
.how-panel h2 { font: 700 25px "Noto Sans JP", "Noto Sans JP", sans-serif; }
.how-panel ol { padding: 0px; list-style: none; }
.how-panel li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 14px 0px; border-bottom: 1px solid rgb(220, 229, 225); }
.how-panel li span { color: rgb(105, 128, 134); line-height: 1.6; }
.how-panel > p:last-child { color: rgb(217, 75, 75); font-weight: 700; }
@media (max-width: 760px) {
.title-content { grid-template-columns: 1fr; }
.title-actions { flex-direction: column; }
.start-btn { min-width: 0px; width: 100%; }
.how-btn { padding: 15px; }

}
.premium-setup { display: grid; }
.mode-card { color: rgb(158, 183, 186); text-align: left; cursor: pointer; transition: 0.2s; }
.mode-card:hover, .mode-card.active { border-color: rgb(105, 213, 193); background: rgba(105, 213, 193, 0.1); color: rgb(232, 250, 245); }
.mode-card b, .mode-card small { display: block; }
.category-picker { align-items: center; justify-content: space-between; margin-top: 8px; font: 8px monospace; }
.category-picker select { color: rgb(216, 238, 234); font: 10px "Noto Sans JP"; }
.premium-player { display: flex; align-items: center; gap: 11px; margin-left: auto; margin-right: 14px; }
.level-orb { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--mint); font: 700 10px monospace; }
.xp-copy { font-size: 8px; color: var(--muted); min-width: 105px; }
.xp-copy b { display: block; font-size: inherit; margin-bottom: 4px; }
.xp-track { width: 105px; height: 3px; background: rgb(219, 228, 225); }
.xp-track i { display: block; height: 100%; background: var(--teal); transition: width 0.5s; }
.bookmark-btn { color: var(--muted); padding: 6px 10px; font-size: 15px; cursor: pointer; }
.bookmark-btn.saved { background: rgb(255, 241, 202); border-color: rgb(224, 184, 83); color: rgb(184, 124, 0); }
.mastery-tag { font-size: 8px; padding: 5px 8px; border: 1px solid rgb(185, 217, 210); color: var(--teal); letter-spacing: 0.08em; }
.premium-toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; max-width: 320px; padding: 15px 18px; background: rgb(16, 42, 48); color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 45px; border-left: 3px solid var(--mint); animation: 0.3s ease 0s 1 normal none running toastIn; }
.premium-toast b, .premium-toast span { display: block; }
.premium-toast b { color: var(--mint); }
.premium-toast span { margin-top: 4px; color: rgb(189, 208, 208); }
.analytics { margin: 18px 0px; text-align: left; }
.analytics h3 { letter-spacing: 0.08em; }
.analytic-row { display: grid; gap: 8px; align-items: center; margin: 8px 0px; }
.analytic-bar { height: 6px; background: rgb(227, 235, 232); }
.analytic-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--teal),var(--mint)); }
.title-metrics { display: flex; margin-top: 16px; }
.title-metric { border-left: 1px solid rgb(49, 80, 86); }
.title-metric span, .title-metric b { display: block; }
.title-metric span { font: 7px monospace; }
.title-metric b { font: 700 14px monospace; margin-top: 4px; }
.install-btn { z-index: 4; border: 1px solid rgb(49, 80, 86); background: transparent; color: rgb(142, 173, 175); padding: 8px 12px; font: 8px monospace; cursor: pointer; }
.install-btn:hover { border-color: rgb(105, 213, 193); color: rgb(105, 213, 193); }
.daily-badge { color: rgb(226, 183, 92) !important; border-color: rgb(112, 95, 54) !important; }
.question-panel.mastered::before { content: "MASTERED"; position: absolute; right: 0px; top: 74px; padding: 4px 9px; background: rgb(12, 129, 125); color: rgb(255, 255, 255); font: 7px monospace; letter-spacing: 0.12em; z-index: 2; }
@keyframes toastIn { 
  0% { opacity: 0; transform: translateY(12px); }
}
@media (max-width: 900px) {
.premium-player { display: none; }
.premium-setup { grid-template-columns: 1fr; }
.mode-card { padding: 9px; }
.category-picker { align-items: flex-start; gap: 8px; flex-direction: column; }
.category-picker select { max-width: none; width: 100%; }
.install-btn { right: 24px; }
.title-metrics { flex-wrap: wrap; }
}
.premium-setup:has(.challenge-card) { grid-template-columns: repeat(4, 1fr); }
.challenge-card { border-color: rgb(88, 109, 114); }
.daily-card { border-color: rgb(130, 109, 53); }
.daily-card.active { border-color: rgb(255, 211, 111); background: rgba(255, 211, 111, 0.1); color: rgb(255, 231, 170); }
@media (max-width: 900px) {
.premium-setup:has(.challenge-card) { grid-template-columns: 1fr 1fr; }
.premium-setup .mode-card:nth-child(2) { grid-column: auto; }
.premium-setup .daily-card { grid-column: 1 / -1; }
}
.avatar-stage { height: auto; }
.clinical-overlay { position: absolute; inset: 0px; pointer-events: none; }
.organ-marker { position: absolute; display: none; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid; font: 700 8px / 1.25 "Noto Sans JP"; animation: 1.15s ease 0s infinite normal none running markerPulse; }
.organ-marker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentcolor; box-shadow: rgba(211, 53, 69, 0.13) 0px 0px 0px 4px; }
.zone-head { left: 4px; top: 55px; }
.zone-chest { right: 4px; top: 110px; }
.zone-abdomen { right: 3px; top: 184px; }
.zone-limb { left: 3px; bottom: 43px; }
.avatar-stage.zone-head .zone-head, .avatar-stage.zone-chest .zone-chest, .avatar-stage.zone-abdomen .zone-abdomen, .avatar-stage.zone-limb .zone-limb { display: flex; }
.avatar-stage.skin-jaundice .body-part { fill: rgb(232, 200, 111); }
.avatar-stage.skin-rash .body-part { fill: rgb(233, 163, 160); stroke: rgb(197, 77, 89); }
.avatar-stage.skin-pale .body-part { fill: rgb(220, 229, 229); }
.avatar-stage.zone-abdomen .torso { filter: drop-shadow(rgba(218, 137, 47, 0.65) 0px 0px 9px); }
.avatar-stage.zone-head .head { filter: drop-shadow(rgba(139, 92, 178, 0.7) 0px 0px 9px); }
.avatar-stage.zone-limb .arm, .avatar-stage.zone-limb .leg { filter: drop-shadow(rgba(214, 58, 76, 0.55) 0px 0px 7px); }
.clinical-card { margin: 10px 0px 13px; border: 1px solid rgb(217, 227, 223); }
.clinical-card-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; background: rgb(16, 46, 51); color: rgb(255, 255, 255); }
.clinical-card-head b { font-size: 10px; }
.severity-pill { padding: 3px 6px; background: rgb(215, 71, 82); font: 700 7px monospace; letter-spacing: 0.09em; }
.clinical-list { display: grid; gap: 0px; margin: 0px; padding: 0px; list-style: none; }
.clinical-list li { display: grid; grid-template-columns: 23px 1fr; gap: 7px; padding: 8px 10px; border-top: 1px solid rgb(229, 236, 233); font-size: 9px; line-height: 1.45; }
.clinical-list i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(255, 240, 239); color: rgb(198, 61, 73); font: 700 10px monospace; }
.clinical-list b, .clinical-list span { display: block; }
.clinical-list span { color: rgb(98, 119, 122); margin-top: 2px; }
.clinical-note { padding: 8px 10px; background: rgb(241, 247, 245); color: rgb(86, 112, 115); font-size: 8px; line-height: 1.55; }
.mobile-symptom-dock { display: none; }
.avatar-stage.symptomatic .mouth { d: path("M 80 51 Q 90 58 100 51"); }
.avatar-stage.symptomatic .sweat { opacity: 1; }
.avatar-stage.skin-rash .sick-marks { opacity: 0.9; fill: rgb(185, 47, 69); }
.avatar-stage.zone-head .eye { transform: translateY(2px); }
@keyframes markerPulse { 
  50% { transform: scale(1.04); box-shadow: rgba(211, 53, 69, 0.27) 0px 5px 20px; }
}
@media (max-width: 760px) {
.self-heading { position: sticky; top: 0px; z-index: 5; background: rgb(247, 250, 248); padding: 8px 0px; }
.avatar-stage { margin-top: 8px; }
.avatar-callout { top: 12px; right: 10px; background: rgba(255, 255, 255, 0.9); padding: 6px; text-align: left; }
.avatar-callout span { max-width: 135px; font-size: 10px; line-height: 1.45; }
.organ-marker { padding: 6px 8px; }
.clinical-list li { font-size: 11px; padding: 10px 12px; }
.clinical-note { font-size: 10px; }
.mobile-symptom-dock { position: fixed; display: none; z-index: 19; left: 10px; right: 10px; bottom: 10px; border-width: 0px 0px 0px 4px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(238, 83, 96); border-image: none; background: rgb(16, 46, 51); color: rgb(255, 255, 255); padding: 11px 42px 11px 12px; text-align: left; box-shadow: rgba(0, 0, 0, 0.32) 0px 12px 35px; font: 700 11px / 1.4 "Noto Sans JP"; }
.mobile-symptom-dock.show { display: block; animation: 0.28s ease 0s 1 normal none running dockIn; }
.mobile-symptom-dock small { display: block; margin-top: 2px; color: rgb(185, 209, 208); font-size: 9px; font-weight: 500; }
.mobile-symptom-dock::after { content: "身体図を見る ↑"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: rgb(104, 221, 197); font-size: 8px; writing-mode: vertical-rl; }
@keyframes dockIn { 
  0% { opacity: 0; transform: translateY(20px); }
}
}
@keyframes impactHit { 
  0% { opacity: 0; transform: scale(1.16); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes impactFade { 
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes vitalAlarm { 
  50% { background: rgb(87, 25, 34); }
}
@media (max-width: 760px) {

}
.avatar-stage { min-height: 410px; padding: 20px 5px 32px; border-color: rgb(40, 84, 90); }
.clinical-overlay { z-index: 4; }
.organ-marker { background: rgba(7, 27, 31, 0.92); color: rgb(255, 104, 117); border-color: rgba(255, 104, 117, 0.7); box-shadow: rgba(255, 55, 75, 0.35) 0px 0px 18px; }
.avatar-callout { z-index: 5; padding: 8px; background: rgba(5, 23, 27, 0.85); border-left: 2px solid rgb(101, 221, 196); text-align: left; }
.avatar-callout b { color: rgb(122, 241, 214); }
.avatar-callout span { color: rgb(209, 223, 223); line-height: 1.45; }
.scan-line { z-index: 3; }
.damage-impact { position: fixed; z-index: 80; inset: 0px; place-items: center; pointer-events: none; background: radial-gradient(circle, transparent 25%, rgba(90, 0, 10, 0.67)); animation: 1.25s ease 0s 1 normal forwards running impactFade; }
.damage-impact-core { min-width: min(430px, 88vw); padding: 23px 27px; background: rgba(5, 17, 21, 0.94); border-width: 1px 1px 1px 7px; border-style: solid; border-color: rgb(255, 83, 99) rgb(255, 83, 99) rgb(255, 83, 99) rgb(255, 53, 75); border-image: none; color: rgb(255, 255, 255); box-shadow: rgba(238, 40, 61, 0.58) 0px 0px 75px; animation: 0.36s cubic-bezier(0.2, 0.9, 0.25, 1) 0s 1 normal none running impactHit; }
.damage-impact header { display: flex; justify-content: space-between; align-items: center; color: rgb(255, 102, 116); font: 700 9px monospace; letter-spacing: 0.18em; }
.damage-impact strong { display: block; margin: 8px 0px 4px; font: 700 clamp(28px, 7vw, 48px) / 1 "Noto Sans JP"; }
.damage-impact strong em { font-style: normal; color: rgb(255, 83, 99); }
.damage-impact p { margin: 9px 0px 0px; color: rgb(185, 204, 204); font-size: 11px; }
.vital-delta { display: flex; gap: 8px; margin-top: 15px; }
.vital-delta span { flex: 1 1 0%; padding: 7px; background: rgb(16, 43, 48); color: rgb(203, 220, 219); font: 700 9px monospace; }
.vital-delta b { color: rgb(255, 102, 116); margin-left: 4px; }
.status-strip.vital-alarm { animation: 0.45s ease 0s 3 normal none running vitalAlarm; }
@keyframes impactHit { 
  0% { opacity: 0; transform: scale(1.16); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes impactFade { 
  70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes vitalAlarm { 
  50% { background: rgb(87, 25, 34); }
}
@media (max-width: 760px) {
.damage-impact-core { padding: 18px; }
.damage-impact strong { font-size: 31px; }
.vital-delta { flex-wrap: wrap; }
.vital-delta span { min-width: 42%; }
.organ-marker { font-size: 10px; }
.zone-head { top: 92px; }
.zone-chest { top: 205px; }
.zone-abdomen { top: 310px; }
.zone-limb { bottom: 67px; }
}
.avatar-stage .avatar { height: 375px; position: relative; z-index: 2; filter: drop-shadow(rgba(0, 0, 0, 0.38) 0px 15px 18px); display: block !important; }
.avatar-stage .body-part { fill: rgba(111, 177, 171, 0.22); stroke: rgb(116, 199, 186); stroke-width: 1.3; }
.anatomy-organs .organ { fill: rgba(112, 175, 166, 0.25); stroke: rgb(142, 216, 204); stroke-width: 1; transition: 0.25s; }
.anatomy-organs .brain { fill: rgba(143, 111, 181, 0.42); }
.anatomy-organs .airway { fill: rgba(113, 191, 211, 0.42); }
.avatar-stage .lung { fill: rgba(105, 175, 192, 0.32); stroke: rgb(135, 202, 212); }
.avatar-stage .heart { fill: rgb(169, 74, 88); stroke: rgb(239, 117, 130); }
.anatomy-organs .liver { fill: rgba(143, 89, 62, 0.5); }
.anatomy-organs .stomach { fill: rgba(204, 140, 96, 0.42); }
.anatomy-organs .kidney { fill: rgba(155, 91, 75, 0.48); }
.anatomy-organs .intestine { fill: rgba(190, 140, 106, 0.34); }
.anatomy-organs .bladder { fill: rgba(103, 153, 190, 0.45); }
.anatomy-organs .joint { fill: rgba(126, 191, 180, 0.4); }
.avatar-stage[class*="affected-"] .organ, .avatar-stage[class*="affected-"] .lung, .avatar-stage[class*="affected-"] .heart { opacity: 0.2; }
.avatar-stage.affected-brain .brain, .avatar-stage.affected-airway .airway, .avatar-stage.affected-lungs .lung, .avatar-stage.affected-heart .heart, .avatar-stage.affected-liver .liver, .avatar-stage.affected-stomach .stomach, .avatar-stage.affected-kidneys .kidney, .avatar-stage.affected-intestine .intestine, .avatar-stage.affected-bladder .bladder, .avatar-stage.affected-joints .joint { opacity: 1; fill: rgb(237, 48, 73); stroke: rgb(255, 255, 255); stroke-width: 2.2; animation: 0.62s ease 0s infinite normal none running organEmergency; }
.avatar-stage.affected-systemic .body-part { fill: rgba(226, 45, 66, 0.45); stroke: rgb(255, 106, 120); animation: 0.7s ease 0s infinite normal none running organEmergency; }
.avatar-stage.affected-blood .heart, .avatar-stage.affected-blood .liver { opacity: 1; fill: rgb(229, 39, 64); stroke: rgb(255, 255, 255); filter: drop-shadow(rgb(229, 39, 64) 0px 0px 10px); animation: 0.62s ease 0s infinite normal none running organEmergency; }
.anatomy-status { position: absolute; z-index: 6; left: 8px; right: 8px; bottom: 7px; display: flex; gap: 5px; flex-wrap: wrap; }
.anatomy-status span { padding: 5px 7px; border: 1px solid rgb(49, 85, 90); color: rgb(127, 161, 164); font: 700 7px monospace; letter-spacing: 0.08em; }
.anatomy-status span.active { border-color: rgb(255, 83, 99); background: rgb(95, 20, 32); color: rgb(255, 255, 255); box-shadow: rgba(255, 50, 70, 0.48) 0px 0px 13px; }
.anatomy-caption { position: absolute; z-index: 6; left: 9px; top: 9px; padding: 6px 8px; background: rgba(4, 22, 26, 0.9); color: rgb(141, 216, 202); font: 700 8px monospace; letter-spacing: 0.12em; }
.avatar-stage[class*="affected-"] .anatomy-caption { color: rgb(255, 104, 117); }
@keyframes organEmergency { 
  50% { opacity: 0.38; filter: drop-shadow(rgb(255, 32, 61) 0px 0px 2px); }
}
@media (max-width: 760px) {
.avatar-stage .avatar { height: 480px; }
.avatar-stage { min-height: 535px; }
.anatomy-status span { font-size: 8px; padding: 6px 8px; }
}
.anatomy-organs .intestine-loop { fill: none; stroke-width: 1.4; }
.anatomy-organs .colon { fill: rgba(190, 140, 106, 0.16); stroke-width: 1.5; }
.anatomy-organs .liver { stroke: rgb(211, 154, 117); stroke-width: 1.25; }
.anatomy-organs .stomach { stroke: rgb(239, 189, 141); stroke-width: 1.25; }
.anatomy-organs .kidney { opacity: 0.78; }
.anatomy-organs .ureter { fill: none; stroke: rgb(120, 185, 208); stroke-width: 1; }
.anatomy-organs .pelvis-guide { fill: none; stroke: rgba(142, 216, 204, 0.65); stroke-width: 1; }
.anatomy-organs .knee { fill: rgba(126, 191, 180, 0.18); stroke-width: 1.2; }
.disease-episodes article { margin: 8px 0px; padding: 12px; border-left: 3px solid rgb(198, 78, 88); background: rgba(190, 55, 65, 0.08); }
.disease-episodes b { font-size: 13px; }
.disease-episodes p, .simulator-note { font-size: 12px; line-height: 1.7; margin: 5px 0px; }
.simulator-note { opacity: 0.75; }
.sim-breathing .lung { transform-box: fill-box; transform-origin: center center; animation: 1.2s ease-in-out 0s infinite normal none running simBreathing !important; }
.sim-irregular .heart { transform-box: fill-box; transform-origin: center center; animation: 1.3s ease 0s infinite normal none running simIrregular !important; }
.sim-chest-pain .heart, .sim-upper-abdomen .torso { filter: drop-shadow(rgb(230, 83, 83) 0px 0px 8px); }
.sim-weakness .arm { transform: translateY(5px); fill: rgb(214, 161, 109); }
.sim-leg-weakness .leg { fill: rgb(214, 161, 109); stroke: rgb(255, 173, 102); }
.sim-edema .leg { stroke: rgb(230, 125, 125); stroke-width: 5; }
.sim-face-edema .head { stroke: rgb(230, 125, 125); stroke-width: 5; }
.sim-ears .head { stroke: rgb(223, 173, 85); stroke-width: 3; }
.sim-upper-abdomen .torso { fill: rgba(229, 102, 68, 0.35); }
.sim-tremor .arm { animation: 0.22s ease 0s infinite normal none running simTremor; }
.sim-tremor .sweat { opacity: 1; }
@keyframes simBreathing { 
  50% { transform: scale(1.08, 1.04); }
}
@keyframes simIrregular { 
  0%, 35%, 75%, 100% { transform: scale(1); }
  12%, 48%, 58% { transform: scale(1.14); }
}
@keyframes simTremor { 
  50% { transform: translateX(1.5px); }
}
@media (prefers-reduced-motion: reduce) {

}
.sim-stiffness .arm, .sim-stiffness .leg { stroke: rgb(228, 166, 94); stroke-width: 3; fill: rgba(226, 166, 94, 0.35); }
.sim-chromosome::after { content: "21番染色体"; position: absolute; left: 12px; bottom: 16px; color: rgb(255, 225, 162); border: 1px solid rgb(207, 167, 91); padding: 7px; font-size: 12px; }
.sim-leg-vessels .leg { stroke: rgb(213, 107, 130); stroke-width: 4; fill: rgba(185, 70, 108, 0.3); }
.sim-arm-pain .arm { stroke: rgb(255, 150, 109); stroke-width: 3; fill: rgba(218, 110, 71, 0.35); }
.sim-arm-cold .arm { stroke: rgb(115, 208, 240); stroke-width: 3; fill: rgba(101, 170, 208, 0.25); }
.sim-pain .avatar { filter: drop-shadow(rgb(197, 107, 76) 0px 0px 8px); }
.sim-head-wound .head { stroke: rgb(215, 114, 108); stroke-width: 4; }
.sim-stoma .torso { stroke: rgb(255, 171, 121); stroke-width: 3; }
.sim-stoma::after { content: "ストーマ"; position: absolute; left: 12px; bottom: 16px; color: rgb(255, 171, 121); font-size: 12px; }
.sim-eyes .eye { stroke: rgb(255, 194, 107); stroke-width: 4; }
.sim-electrolyte .torso { stroke: rgb(217, 170, 255); stroke-width: 3; }
.sim-bone .arm, .sim-bone .leg { stroke: rgb(237, 212, 168); stroke-width: 3; }
.sim-hemiparesis .arm:first-of-type, .sim-hemiparesis .leg:first-of-type { opacity: 0.6; }
.sim-hemiparesis .arm, .sim-hemiparesis .leg { stroke: rgb(216, 163, 104); stroke-width: 2; }
.sim-pelvis .pelvis-guide { stroke: rgb(255, 142, 145); stroke-width: 4; filter: drop-shadow(rgb(213, 97, 107) 0px 0px 5px); }
.sim-skin .body-part, .sim-itch .body-part { stroke: rgb(227, 178, 119); stroke-width: 2.5; }
.sim-esophagus .torso { stroke: rgb(225, 158, 116); stroke-width: 3; }
.sim-distress .avatar { filter: drop-shadow(rgb(180, 160, 212) 0px 0px 12px); }
.sim-balance .avatar { transform-origin: center bottom; animation: 3s ease-in-out 0s infinite normal none running simBalance; }
.sim-seizure .arm, .sim-seizure .leg { animation: 0.8s ease-in-out 0s infinite normal none running simConvulsion; }
.sim-pharynx .head { stroke: rgb(233, 160, 104); stroke-width: 3; }
.sim-speech .mouth { stroke: rgb(233, 160, 104); stroke-width: 4; }
.sim-arrest .heart { fill: rgb(124, 116, 121); stroke: rgb(222, 208, 214); animation: auto ease 0s 1 normal none running none !important; }
.sim-fever .body-part { fill: rgba(205, 115, 83, 0.35); }
.sim-infection .avatar { filter: drop-shadow(rgb(221, 165, 110) 0px 0px 9px); }
.sim-breast .torso { stroke: rgb(237, 169, 148); stroke-width: 3; }
.sim-neglect .avatar { filter: drop-shadow(rgb(146, 134, 188) -10px 0px 6px); }
.sim-bilirubin .body-part { fill: rgba(232, 195, 89, 0.4); stroke: rgb(229, 200, 133); }
@keyframes simBalance { 
  50% { transform: rotate(1.5deg); }
}
@keyframes simConvulsion { 
  50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
.avatar-stage * { animation: auto ease 0s 1 normal none running none !important; }
}
.auth-gate { position: fixed; z-index: 200; inset: 0px; display: grid; place-items: center; padding: 20px; }
.auth-gate[hidden] { display: none; }
.auth-grid { position: absolute; inset: 0px; opacity: 0.12; background-image: linear-gradient(rgba(105, 213, 193, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(105, 213, 193, 0.28) 1px, transparent 1px); background-size: 38px 38px; }
.auth-brand { font: 700 30px "Noto Sans JP"; letter-spacing: 0.06em; }
.auth-brand span { color: rgb(105, 213, 193); }
.auth-card h1 { margin: 30px 0px 6px; font: 700 22px "Noto Sans JP"; }
.auth-lead { margin: 0px 0px 24px; color: rgb(145, 170, 173); }
.auth-card label { display: block; margin: 15px 0px 0px; color: rgb(139, 165, 167); font-weight: 700; }
.auth-card input { display: block; width: 100%; margin-top: 7px; padding: 13px 14px; outline: 0px; font: 700 15px "Noto Sans JP"; }
.auth-card input:focus { border-color: rgb(105, 213, 193); box-shadow: rgba(105, 213, 193, 0.1) 0px 0px 0px 3px; }
.pin-wrap { display: grid; gap: 7px; }
.pin-wrap button { margin-top: 7px; width: 46px; border: 1px solid rgb(49, 81, 88); cursor: pointer; }
.auth-submit { width: 100%; margin-top: 23px; padding: 14px; cursor: pointer; }
.auth-submit:disabled { opacity: 0.5; }
.auth-message { min-height: 17px; margin: 10px 0px 0px; }
.auth-note { margin: 20px 0px 0px; padding-top: 14px; border-top: 1px solid rgb(36, 69, 74); }
.account-chip { display: flex; align-items: center; gap: 7px; margin-right: 9px; border: 1px solid var(--line); font-size: 9px; }
.account-chip i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-weight: 700; }
.account-chip button { border: 0px; background: none; color: var(--muted); font-size: 8px; cursor: pointer; }
.welcome-user { margin-top: 13px; font: 700 9px monospace; }
.welcome-user b { color: rgb(105, 213, 193); }
@media (max-width: 760px) {
.account-chip { margin-left: auto; }
.account-chip span { display: none; }
.premium-player { display: none; }
}
.auth-gate { overflow-y: auto; align-items: safe center; }
.auth-card [hidden] { display: none !important; }
.auth-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 22px 0px 0px; font-size: 12px; color: rgb(169, 195, 196); }
.auth-switch button { border: 0px; background: none; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 8px; }
.auth-switch button:disabled { opacity: 0.5; cursor: wait; }
.auth-switch button:focus-visible, .pin-wrap button:focus-visible { outline: rgb(131, 227, 204) solid 2px; outline-offset: 3px; }
.auth-card { margin-block: auto; }
.auth-card label { letter-spacing: 0.03em; }
.auth-service-intro { font-size: 13px; line-height: 1.9; color: rgb(192, 217, 211); margin: 16px 0px; }
.auth-service-intro a, .title-search-intro a { color: rgb(164, 234, 215); text-underline-offset: 4px; }
.title-search-intro { font-size: 13px; line-height: 1.9; color: rgb(192, 217, 211); margin-bottom: 18px; }
.auth-guest { width: 100%; margin-top: 18px; padding: 13px; border: 1px solid rgb(105, 213, 193); background: transparent; color: rgb(180, 241, 229); cursor: pointer; font: inherit; }
.auth-card .auth-checkbox { display: flex; align-items: center; gap: 9px; line-height: 1.6; }
.auth-card .auth-checkbox input { width: auto; margin: 0px; }
.auth-card, .auth-card input { box-sizing: border-box; }
:root { --ease: cubic-bezier(.2,.8,.2,1); }
.bookmark-btn { border: 1px solid var(--line); background: rgb(255, 255, 255); }
.topbar { backdrop-filter: blur(16px); z-index: 8; }
.choice { position: relative; overflow: hidden; transition: transform .2s var(--ease),border-color .2s,box-shadow .2s; }
.choice::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, transparent, rgba(105, 213, 193, 0.12), transparent); transform: translateX(-110%); }
.choice:hover::after { transform: translateX(110%); transition: transform 0.55s; }
.choice:focus-visible, .primary-btn:focus-visible, .mode-card:focus-visible, .auth-card input:focus-visible { outline: rgba(105, 213, 193, 0.48) solid 3px; outline-offset: 2px; }
.choice.correct { box-shadow: inset 5px 0 var(--teal),0 8px 25px rgba(12,129,125,.1); }
.choice.wrong { box-shadow: inset 5px 0 var(--danger),0 8px 25px rgba(217,75,75,.1); }
.sync-state { display: inline-flex; align-items: center; gap: 5px; margin-left: 5px; padding: 3px 6px; border-radius: 10px; background: rgb(232, 244, 240); color: rgb(22, 118, 111); font: 700 7px monospace; white-space: nowrap; }
.sync-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(41, 185, 159); }
.sync-state.syncing::before { animation: 0.7s ease 0s infinite normal none running syncPulse; }
.sync-state.error { background: rgb(255, 240, 239); color: rgb(189, 54, 68); }
.sync-state.error::before, .sync-state.offline::before { background: rgb(217, 75, 75); }
.sync-state.offline { background: rgb(244, 241, 232); color: rgb(139, 116, 64); }
.network-toast { position: fixed; z-index: 190; left: 50%; top: 14px; transform: translateX(-50%); padding: 9px 14px; background: rgb(16, 44, 49); color: rgb(255, 255, 255); border: 1px solid rgb(49, 83, 90); box-shadow: rgba(0, 0, 0, 0.24) 0px 12px 35px; font-size: 10px; animation: networkIn .3s var(--ease); }
.mobile-anatomy-jump { display: none; }
.question-panel { isolation: isolate; }
.feedback.show { box-shadow: rgba(25, 54, 58, 0.08) 0px 14px 35px; }
.clinical-card { box-shadow: rgba(17, 47, 51, 0.07) 0px 10px 28px; }
.anatomy-status span.active { animation: 1.1s ease 0s infinite normal none running activeChip; }
.status-strip { transition: background 0.3s; }
.premium-toast { border-radius: 2px; backdrop-filter: blur(10px); }
@keyframes syncPulse { 
  50% { opacity: 0.25; transform: scale(0.7); }
}
@keyframes networkIn { 
  0% { opacity: 0; transform: translate(-50%, -10px); }
}
@keyframes activeChip { 
  50% { border-color: rgb(255, 137, 147); }
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 760px) {
body { padding-bottom: 68px; }
.topbar { position: sticky; top: 0px; }
.account-chip { padding: 5px; }
.account-chip button { font-size: 0px; }
.account-chip button::after { content: "退出"; font-size: 8px; }
.sync-state { position: fixed; top: 69px; right: 8px; z-index: 15; box-shadow: rgba(0, 0, 0, 0.12) 0px 5px 15px; }
.mobile-anatomy-jump { position: fixed; z-index: 18; display: flex; align-items: center; gap: 8px; right: 12px; bottom: 12px; border: 1px solid rgb(65, 113, 118); background: rgba(7, 31, 36, 0.94); color: rgb(255, 255, 255); padding: 10px 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 32px; font: 700 9px "Noto Sans JP"; backdrop-filter: blur(10px); }
.mobile-anatomy-jump b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(228, 61, 80); color: rgb(255, 255, 255); }
.mobile-anatomy-jump.has-symptom { border-color: rgb(255, 83, 99); animation: 1s ease 0s infinite normal none running activeChip; }
.mobile-symptom-dock.show ~ .mobile-anatomy-jump { bottom: 78px; }
.choice-index { flex: 0 0 30px; }
.action-row { position: sticky; bottom: 0px; z-index: 7; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); }
}
.end-shift-btn { margin-left: auto; margin-right: 10px; border: 1px solid rgb(216, 163, 168); padding: 9px 12px; font: 700 9px "Noto Sans JP"; cursor: pointer; }
.end-shift-btn:hover { background: rgb(169, 46, 59); color: rgb(255, 255, 255); }
.result-actions { flex-wrap: wrap; justify-content: center; }
.result-actions button { margin: 0px !important; }
@media (max-width: 760px) {
.result-actions { display: grid; }
.result-actions button { width: 100%; }
}
.feedback details[open] { margin-top: 18px; }
.feedback details[open] > summary { margin-bottom: 10px; }
.choice-rationale { border: 1px solid var(--line); background: rgb(255, 255, 255); margin: 0px !important; }
.choice-rationale + .choice-rationale { border-top: 0px; }
.choice-rationale header { display: flex; }
.choice-rationale header i { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 6px; font-style: normal; font-weight: 700; }
.choice-rationale header b { font-size: 12px; }
.choice-rationale header span { margin-left: auto; padding: 3px 6px; font: 700 7px monospace; }
.choice-rationale p { margin: 11px 0px 0px !important; color: rgb(62, 85, 88) !important; font-size: 11px !important; line-height: 1.9 !important; }
.choice-rationale.is-correct header { color: rgb(38, 155, 76); }
.choice-rationale.is-correct header i { background: rgb(98, 202, 121); color: rgb(255, 255, 255); }
.choice-rationale.is-wrong header i { background: rgb(200, 202, 204); color: rgb(255, 255, 255); }
.choice-rationale.is-wrong header { color: rgb(54, 71, 74); }
@media (max-width: 760px) {
.choice-rationale header b { font-size: 13px; }
.choice-rationale p { font-size: 12px !important; line-height: 1.85 !important; }
}
.account-chip { cursor: pointer; }
.account-chip small { font: 700 7px monospace; }
.account-chip:hover { border-color: var(--teal); box-shadow: rgba(12, 129, 125, 0.12) 0px 5px 18px; }
.mypage { position: fixed; z-index: 160; inset: 0px; display: grid; place-items: center; }
.mypage[hidden] { display: none; }
.mypage-shell { height: min(720px, -40px + 100vh); display: grid; grid-template-columns: 210px 1fr; background: rgb(247, 250, 248); overflow: hidden; }
.mypage-side { position: relative; padding: 28px 20px; color: rgb(255, 255, 255); }
.mypage-side h2 { margin: 0px; font: 700 21px "Noto Sans JP"; letter-spacing: 0.08em; }
.mypage-identity { margin: 30px 0px 25px; }
.mypage-avatar { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: rgb(105, 213, 193); color: rgb(9, 38, 43); font-size: 25px; font-weight: 700; }
.mypage-identity b, .mypage-identity small { display: block; }
.mypage-identity b { margin-top: 12px; font-size: 13px; }
.mypage-identity small { margin-top: 4px; color: rgb(113, 147, 152); font: 8px monospace; }
.mypage-nav { display: grid; gap: 5px; }
.mypage-nav button { border-width: 0px 0px 0px 2px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor transparent; border-image: none; background: transparent; color: rgb(129, 159, 162); padding: 11px; text-align: left; font: 700 10px "Noto Sans JP"; cursor: pointer; }
.mypage-nav button.active { border-color: rgb(105, 213, 193); background: rgba(105, 213, 193, 0.1); color: rgb(255, 255, 255); }
.mypage-logout { position: absolute; left: 20px; right: 20px; bottom: 22px; border: 1px solid rgb(49, 81, 87); background: transparent; color: rgb(155, 178, 180); padding: 10px; font-size: 9px; cursor: pointer; }
.mypage-main { position: relative; overflow: auto; }
.mypage-close { position: absolute; right: 22px; top: 17px; border: 0px; background: none; color: rgb(113, 132, 135); font-size: 27px; cursor: pointer; }
.mypage-panel[hidden] { display: none; }
.mypage-kicker { margin: 0px; color: var(--teal); font: 700 9px monospace; letter-spacing: 0.17em; }
.mypage-panel h3 { margin: 7px 0px 25px; font: 700 27px "Noto Sans JP"; }
.profile-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.profile-metric { border: 1px solid var(--line); background: rgb(255, 255, 255); }
.profile-metric span, .profile-metric b { display: block; }
.profile-metric span { color: rgb(129, 148, 151); font: 7px monospace; letter-spacing: 0.1em; }
.profile-metric b { margin-top: 7px; font: 700 22px monospace; color: rgb(22, 61, 65); }
.category-summary { margin-top: 25px; }
.category-score { display: grid; gap: 9px; align-items: center; margin: 10px 0px; }
.category-score div { height: 7px; background: rgb(223, 233, 230); }
.category-score i { display: block; height: 100%; background: linear-gradient(90deg, rgb(12, 129, 125), rgb(105, 213, 193)); }
.history-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.history-toolbar span { font-size: 9px; color: var(--muted); }
.history-list { display: grid; gap: 8px; }
.history-entry { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; background: rgb(255, 255, 255); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--danger); }
.history-entry.ok { border-left-color: var(--teal); }
.history-entry > i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgb(255, 240, 239); color: var(--danger); font-style: normal; font-weight: 700; }
.history-entry.ok > i { background: rgb(232, 245, 241); color: var(--teal); }
.history-entry b, .history-entry small { display: block; }
.history-entry small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.history-entry time { font: 7px monospace; color: rgb(132, 150, 153); }
.history-empty { text-align: center; color: var(--muted); }
.account-form { max-width: 460px; }
.account-form label { display: block; margin-top: 16px; font-weight: 700; }
.account-form input { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line); background: rgb(255, 255, 255); }
.account-form button { margin-top: 18px; }
.account-status { min-height: 18px; color: var(--teal); }
.danger-zone { max-width: 460px; margin-top: 34px; padding: 19px; border: 1px solid rgb(237, 198, 200); background: rgb(255, 248, 247); }
.danger-zone h4 { margin: 0px; color: var(--danger); }
.danger-zone p { color: var(--muted); }
.danger-zone button { border: 1px solid var(--danger); background: rgb(255, 255, 255); color: var(--danger); padding: 10px 13px; font-weight: 700; cursor: pointer; }
.delete-confirm { margin-top: 12px; }
.delete-confirm[hidden] { display: none; }
@media (max-width: 700px) {
.mypage { padding: 0px; }
.mypage-shell { height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.mypage-side { padding: 15px 16px; }
.mypage-side h2 { font-size: 16px; }
.mypage-identity { display: flex; align-items: center; gap: 9px; margin: 11px 0px; }
.mypage-avatar { width: 37px; height: 37px; font-size: 16px; }
.mypage-identity b { margin: 0px; }
.mypage-nav { display: flex; overflow: auto; }
.mypage-nav button { white-space: nowrap; border-left: 0px; border-bottom: 2px solid transparent; }
.mypage-nav button.active { border-bottom-color: rgb(105, 213, 193); }
.mypage-logout { inset: 15px 15px auto auto; width: auto; }
.mypage-main { padding: 28px 17px; }
.mypage-panel h3 { font-size: 22px; margin-bottom: 18px; }
.profile-metrics { grid-template-columns: 1fr 1fr; }
.category-score { grid-template-columns: 88px 1fr 32px; }
.history-entry { grid-template-columns: 34px 1fr; }
.history-entry time { grid-column: 2; }
.account-chip small { display: none; }
}
.title-ranking-btn { border: 1px solid rgb(53, 81, 88); background: rgba(7, 27, 32, 0.75); color: rgb(191, 230, 223); font: 700 10px "Noto Sans JP"; letter-spacing: 0.05em; cursor: pointer; }
.title-ranking-btn:hover { border-color: rgb(105, 213, 193); color: rgb(255, 255, 255); }
.ranking-rule { margin: -15px 0px 18px; color: var(--muted); }
.ranking-list { display: grid; gap: 7px; }
.ranking-row { display: grid; grid-template-columns: 48px minmax(130px, 1.5fr) repeat(4, minmax(48px, 0.65fr)); align-items: center; gap: 8px; padding: 12px 13px; border: 1px solid var(--line); background: rgb(255, 255, 255); }
.ranking-row.is-me { border-color: rgb(12, 129, 125); background: rgb(237, 249, 245); box-shadow: rgb(12, 129, 125) 3px 0px inset; }
.ranking-rank { font: 700 15px monospace; color: rgb(22, 61, 65); }
.ranking-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ranking-name small { margin-left: 6px; padding: 2px 4px; background: rgb(12, 129, 125); color: rgb(255, 255, 255); font: 700 6px monospace; }
.ranking-row > span:not(.ranking-name) small, .ranking-row > span:not(.ranking-name) b { display: block; }
.ranking-row > span:not(.ranking-name) small { color: var(--muted); font: 7px monospace; }
.ranking-row > span:not(.ranking-name) b { margin-top: 3px; font: 700 11px monospace; }
.ranking-loading, .ranking-notice { padding: 35px; text-align: center; background: rgb(255, 255, 255); border: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.ranking-notice b, .ranking-notice span { display: block; }
.ranking-notice b { margin-bottom: 7px; color: var(--ink); }
@media (max-width: 700px) {
.ranking-row { grid-template-columns: 38px minmax(95px, 1fr) repeat(2, 48px); }
.ranking-row > span:nth-last-child(-n+2) { display: none; }
.title-ranking-btn { width: 100%; }
}
.mypage-nav .admin-nav { color: rgb(255, 212, 123); border-color: rgba(255, 212, 123, 0.35); }
.admin-tabs { display: flex; gap: 7px; margin: -10px 0px 18px; }
.admin-tabs button { border: 1px solid var(--line); background: rgb(255, 255, 255); padding: 10px 14px; font: 700 9px "Noto Sans JP"; cursor: pointer; }
.admin-tabs button.active { border-color: rgb(12, 129, 125); background: rgb(12, 129, 125); color: rgb(255, 255, 255); }
.admin-view[hidden] { display: none; }
.admin-users { width: 100%; border-collapse: collapse; background: rgb(255, 255, 255); font-size: 10px; }
.admin-users th, .admin-users td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; }
.admin-view h4 { margin: 22px 0px 10px; font-size: 11px; }
.admin-answers { display: grid; gap: 7px; }
.admin-answer { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 11px; border: 1px solid var(--line); background: rgb(255, 255, 255); }
.admin-answer > i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; font-style: normal; font-weight: 700; }
.admin-answer.ok > i { background: rgb(228, 246, 239); color: rgb(8, 120, 111); }
.admin-answer.ng > i { background: rgb(255, 240, 240); color: rgb(200, 51, 69); }
.admin-answer b, .admin-answer span, .admin-answer small { display: block; }
.admin-answer b { font-size: 9px; }
.admin-answer span { margin: 3px 0px; font-size: 10px; line-height: 1.5; }
.admin-answer small { color: var(--muted); font-size: 8px; }
.admin-search { width: 100%; margin-bottom: 20px; padding: 12px; border: 1px solid var(--line); background: rgb(255, 255, 255); }
.admin-questions { display: grid; gap: 10px; }
.admin-question { padding: 15px; border: 1px solid var(--line); background: rgb(255, 255, 255); }
.admin-question header { display: flex; justify-content: space-between; color: var(--teal); font: 8px monospace; }
.admin-question p { font-size: 11px; font-weight: 700; line-height: 1.6; }
.admin-question ol { padding-left: 25px; font-size: 9px; line-height: 1.8; }
.admin-question li.answer { color: rgb(8, 120, 111); font-weight: 700; background: rgb(234, 248, 243); }
.admin-question > small { display: block; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; line-height: 1.6; }
@media (max-width: 700px) {
.admin-users th, .admin-users td { padding: 7px 5px; font-size: 8px; }
.admin-question { padding: 11px; }
.admin-answer span { font-size: 9px; }
}
.ranking-tabs { display: flex; gap: 6px; margin: -10px 0px 22px; overflow-x: auto; }
.ranking-tabs button { white-space: nowrap; border: 1px solid var(--line); background: rgb(255, 255, 255); padding: 9px 12px; color: var(--muted); font: 700 9px "Noto Sans JP"; cursor: pointer; }
.ranking-tabs button.active { border-color: rgb(12, 129, 125); background: rgb(12, 129, 125); color: rgb(255, 255, 255); }
.ranking-row .challenge-score b { font-size: 17px; color: rgb(12, 129, 125); }
.admin-answer-guide { margin: 0px 0px 22px; padding: 14px 16px; border: 1px solid rgb(213, 168, 66); background: rgb(255, 249, 232); box-shadow: rgb(213, 168, 66) 3px 0px inset; }
.admin-answer-guide header { display: flex; align-items: center; justify-content: space-between; color: rgb(114, 82, 12); font: 700 8px monospace; letter-spacing: 0.12em; }
.admin-answer-guide header button { border: 1px solid rgb(213, 168, 66); background: rgb(255, 255, 255); color: rgb(114, 82, 12); padding: 6px 9px; cursor: pointer; }
.admin-answer-guide div { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; }
.admin-answer-guide div span { padding: 4px 7px; background: rgb(114, 82, 12); color: rgb(255, 255, 255); font: 700 8px monospace; }
.admin-answer-guide p { margin: 8px 0px 0px; color: rgb(110, 98, 80); font-size: 9px; line-height: 1.6; }
.admin-answer-guide.hidden-answer { background: rgb(245, 245, 242); border-color: var(--line); box-shadow: none; }
.choice.admin-correct-choice:not(:disabled) { border-color: rgb(213, 168, 66); background: rgb(255, 249, 232); box-shadow: rgb(213, 168, 66) 4px 0px inset; }
.choice.admin-correct-choice:not(:disabled)::after { content: "ADMIN 正答"; margin-left: auto; color: rgb(114, 82, 12); font: 700 8px monospace; letter-spacing: 0.06em; }
.ranking-personal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0px; padding: 16px; border: 1px solid var(--line); background: rgb(255, 255, 255); }
.ranking-personal > b, .ranking-personal > span { font-size: 12px; }
.ranking-personal > strong { font-size: 24px; color: var(--teal); }
.ranking-personal > small { flex-basis: 100%; font-size: 11px; color: var(--muted); line-height: 1.6; }
.ranking-personal button { margin-left: auto; }
:root { --mint: #72d8c1; --soft-shadow: 0 10px 30px rgba(10,36,41,.08); }
html { background: rgb(233, 239, 236); }
body { letter-spacing: 0.01em; }
.noise { opacity: 0.018; }
button:active { transform: translateY(1px); }
.title-top, .title-footer { padding: 22px 0px; }
.mode-card { border: 1px solid rgba(139, 182, 177, 0.2); }
.mode-card:hover { border-color: rgba(114, 216, 193, 0.6); }
.category-picker { border-radius: var(--radius-sm); }
.category-picker select { border: 1px solid rgba(137, 181, 176, 0.2); border-radius: 7px; background: rgb(13, 43, 47); padding: 8px 10px; }
.title-metric { border-left-color: rgba(139, 182, 177, 0.22); padding: 6px 14px; }
.title-metric b { color: rgb(216, 239, 234); }
.how-btn, .title-ranking-btn { border: 1px solid rgba(145, 188, 182, 0.25); border-radius: 10px; padding: 0px 22px; }
.title-ranking-btn { width: max-content; margin-top: 12px; padding: 11px 16px; }
.how-btn:hover, .title-ranking-btn:hover { background: rgba(114, 216, 193, 0.08); }
.brand-mark { clip-path: none; }
.account-chip { padding: 6px 11px; }
.end-shift-btn { border-radius: 8px; }
.health-track, .progress-track { border-radius: 99px; }
.health-track i, .progress-track i { border-radius: 99px; }
.side-panel { border-color: rgb(220, 229, 225); }
.case-meta div { padding: 17px 0px; }
.streak-card { border-radius: 12px; background: linear-gradient(145deg, rgb(18, 54, 59), rgb(11, 41, 45)); box-shadow: rgba(9, 43, 47, 0.14) 0px 12px 30px; }
.question-panel { background: rgba(255, 255, 255, 0.9); }
.source-badge, .mastery-tag { padding: 7px 11px; }
.question-body { padding-top: 38px; }
.choices { gap: 12px; }
.choice { border-radius: 11px; border-color: rgb(216, 226, 223); padding: 16px 18px; box-shadow: rgba(12, 47, 51, 0.024) 0px 3px 10px; }
.choice:hover { transform: translateY(-1px); border-color: rgb(119, 185, 174); box-shadow: rgba(12, 70, 68, 0.08) 0px 9px 22px; }
.choice-index { border-radius: 7px; }
.primary-btn, .secondary-btn { border-radius: 9px; padding: 14px 19px; }
.primary-btn { background: linear-gradient(135deg, rgb(21, 59, 64), rgb(11, 41, 46)); box-shadow: rgba(10, 43, 47, 0.14) 0px 8px 20px; }
.primary-btn:hover { background: linear-gradient(135deg, rgb(14, 113, 109), rgb(9, 97, 94)); }
.self-heading { margin-bottom: 15px; }
.avatar-stage { border: 1px solid rgba(81, 142, 138, 0.32); border-radius: 14px; background: radial-gradient(at 50% 38%, rgba(59, 130, 126, 0.2), transparent 48%), linear-gradient(rgb(6, 29, 33), rgb(11, 48, 51) 70%, rgb(7, 25, 28)); overflow: hidden; }
.anatomy-caption { border-radius: 5px; }
.anatomy-status span { border-radius: 5px; background: rgba(5, 23, 27, 0.88); }
.clinical-card { border-radius: 12px; border-color: rgb(212, 223, 219); background: rgba(255, 255, 255, 0.78); }
.symptom-chips span { border-radius: 99px; }
.record-log { border-radius: 10px; }
.record-entry { border-radius: 8px; }
.feedback { border-top: 1px solid rgb(234, 214, 215); border-right: 1px solid rgb(234, 214, 215); border-bottom: 1px solid rgb(234, 214, 215); border-image: none; border-left: 4px solid var(--danger); border-radius: 12px; background: rgb(255, 249, 248); }
.feedback.correct-feedback { border-top-color: rgb(201, 229, 218); border-right-color: rgb(201, 229, 218); border-bottom-color: rgb(201, 229, 218); border-left-color: var(--teal); background: rgb(243, 250, 247); }
.choice-rationale { padding: 17px; border-color: rgb(220, 228, 225); }
.choice-rationale:first-child { border-radius: 10px 10px 0px 0px; }
.choice-rationale:last-child { border-radius: 0px 0px 10px 10px; }
.result-modal, .mypage { background: rgba(3, 19, 22, 0.75); backdrop-filter: blur(16px); }
.score-ring { box-shadow: rgba(12, 129, 125, 0.08) 0px 0px 0px 1px inset; }
.mypage-shell { border-radius: 18px; box-shadow: rgba(0, 0, 0, 0.38) 0px 40px 120px; }
.mypage-avatar { box-shadow: rgba(70, 210, 184, 0.2) 0px 12px 28px; }
.mypage-nav button { border-radius: 7px; }
.profile-metric, .history-entry, .ranking-row, .admin-question, .admin-answer { border-radius: 10px; box-shadow: rgba(17, 53, 56, 0.035) 0px 4px 14px; }
.ranking-tabs button, .admin-tabs button { border-radius: 8px; }
.auth-card input, .auth-submit { border-radius: 9px; }
@media (max-width: 1120px) {
.self-panel { grid-column: 1 / -1; border-left: 0px; border-top: 1px solid rgb(215, 225, 221); display: grid; gap: 24px; }
.self-heading { grid-column: 1 / -1; }
.avatar-stage { grid-row: 2 / 7; }
}
@media (max-width: 760px) {
body { background: rgb(238, 243, 240); }
.premium-setup:has(.challenge-card) { gap: 7px; }
.title-actions { gap: 8px; }
.topbar { height: 66px; }
.shift { display: none; }
.end-shift-btn { margin-right: 7px; }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.case-meta div { padding: 10px; border-bottom: 0px; }
.self-panel { display: block; }
.avatar-stage { border-radius: 12px; }
.result-card { border-radius: 16px; }
.title-ranking-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
button { transition: none; }
}
@media (max-width: 760px) {
.side-panel .case-meta { grid-column: 1 / -1; grid-template-columns: 2fr 1fr 1fr; min-width: 0px; }
.side-panel .case-meta div { min-width: 0px; }
.source-badge a { color: inherit; text-underline-offset: 2px; }
.question-body h1, .choice > span:last-child { white-space: pre-line; }
}
#feedbackText { white-space: pre-line; }
.explanation-sources { margin-top: 16px; border-top: 1px solid rgb(203, 218, 213); padding-top: 10px; }
.explanation-sources a { display: block; color: rgb(23, 103, 91); margin: 8px 0px; overflow-wrap: anywhere; }
.how-panel { position: fixed; width: min(640px, 100% - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 28px; }
.how-panel h2 { font-size: 22px; padding-right: 20px; }
.how-panel h3 { margin: 24px 0px 8px; }
.usage-notice p { margin: 0px 0px 14px; color: rgb(48, 75, 80); }
.how-btn { line-height: 1.6; }
.how-panel > button { cursor: pointer; }
.title-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.title-account-actions .title-ranking-btn { margin-top: 0px; }
.question-source { margin: 20px 0px 14px; color: rgb(217, 234, 230); }
.question-source legend { font-weight: 700; margin-bottom: 9px; }
.question-source-options { display: grid; gap: 10px; }
.question-source-options label { position: relative; cursor: pointer; }
.question-source-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.question-source-options span { display: block; border: 1px solid rgb(52, 83, 86); border-radius: 10px; padding: 13px 15px; background: rgba(255, 255, 255, 0.035); }
.question-source-options b, .question-source-options small { display: block; }
.question-source-options small { font-size: 11px; margin-top: 5px; color: rgb(157, 186, 182); }
.question-source-options input:checked + span { border-color: rgb(105, 213, 193); background: rgba(105, 213, 193, 0.12); box-shadow: rgb(105, 213, 193) 0px 0px 0px 1px inset; }
.question-source-options input:focus-visible + span { outline: rgb(229, 255, 248) solid 3px; outline-offset: 3px; }
#questionSourceNotice { font-size: 11px; line-height: 1.7; color: rgb(171, 198, 192); margin: 9px 0px 0px; }
.start-btn:disabled, .premium-setup button:disabled, #premiumCategory:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
@media (max-width: 480px) {
.question-source-options { gap: 8px; }
.question-source-options span { padding: 12px 10px; }
.question-source-options b { font-size: 13px; }
}
.year-publication-note { margin: 8px 0px 16px; }
.official-pdf-library { border: 1px solid rgb(71, 99, 99); border-radius: 12px; background: rgb(16, 44, 47); color: rgb(217, 234, 230); padding: 18px 20px; }
.official-pdf-library summary { cursor: pointer; font-weight: 700; }
.official-pdf-library summary span { font-size: 11px; font-weight: 400; color: rgb(172, 196, 193); margin: 7px 0px 0px; }
.official-pdf-library > p { font-size: 12px; line-height: 1.7; color: rgb(172, 196, 193); }
.official-pdf-year { padding: 14px 0px; border-top: 1px solid rgb(52, 83, 86); }
.official-pdf-year h3 { font-size: 14px; margin: 0px 0px 10px; }
.official-pdf-year > div { display: flex; flex-wrap: wrap; gap: 10px; }
.official-pdf-year a { color: rgb(167, 244, 223); padding: 10px 12px; border: 1px solid rgb(71, 99, 99); border-radius: 6px; text-decoration: none; }
.official-pdf-year a:hover { background: rgb(37, 73, 74); }
.official-pdf-library :focus-visible { outline: rgb(167, 244, 223) solid 2px; outline-offset: 4px; }
.daily-challenge { border: 1px solid rgba(104, 210, 192, 0.4); border-radius: 14px; background: rgb(21, 57, 59); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.daily-challenge h2 { margin: 0px 0px 8px; color: rgb(167, 244, 223); }
.daily-challenge p { font-size: 12px; line-height: 1.7; margin: 3px 0px; color: rgb(192, 214, 216); }
.daily-challenge button { border: 1px solid rgb(116, 216, 200); border-radius: 8px; background: rgb(117, 215, 197); color: rgb(9, 43, 45); padding: 14px 18px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 700; cursor: pointer; }
.daily-challenge button:focus-visible { outline: white solid 3px; outline-offset: 4px; }
.category-picker[hidden] { display: none !important; }
.projection-echo { position: absolute; z-index: 1; pointer-events: none; opacity: 0; overflow: visible; transition: opacity 0.65s, transform 0.65s; filter: drop-shadow(rgb(162, 149, 213) 0px 0px 12px); }
.projection-echo * { animation: auto ease 0s 1 normal none running none !important; fill: transparent !important; stroke: rgb(184, 173, 231) !important; stroke-width: 1.6 !important; }
.projection-echo .anatomy-organs, .projection-echo .sweat, .projection-echo .sick-marks, .projection-echo .pain-burst, .projection-echo .pain-point { display: none; }
.projection-overlap .projection-echo { opacity: calc(.25 + var(--projection-depth)*.4); transform: translateX(calc(8px + var(--projection-depth)*15px)); animation: 5s ease-in-out 0s infinite normal none running projectionDrift; }
.projection-overlap { box-shadow: rgba(98, 91, 130, 0.2) 0px 0px 50px inset; }
.projection-lost .projection-echo { opacity: 0.75; transform: translateX(22px); }
.projection-lost svg.avatar { opacity: 0.58; filter: drop-shadow(rgb(170, 161, 208) -6px 0px 7px); }
.projection-note { border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgba(180, 167, 212, 0.3) rgba(180, 167, 212, 0.3) rgba(180, 167, 212, 0.3) rgb(166, 149, 204); border-image: none; background: linear-gradient(120deg, rgba(48, 43, 67, 0.125), rgba(133, 116, 173, 0.047)); padding: 14px; margin: 12px 0px; color: inherit; }
.projection-note[hidden] { display: none; }
.projection-note span { display: block; font: 700 9px / 1.8 monospace; letter-spacing: 0.18em; color: rgb(140, 119, 170); }
.projection-note b { display: block; font-size: 13px; margin: 4px 0px; }
.projection-note p { font-size: 12px; line-height: 1.7; margin: 0px; }
.boundary-chip { border-color: rgb(157, 138, 187) !important; color: rgb(157, 138, 187) !important; }
#projectionProgress { display: block; font-size: 10px; line-height: 1.6; margin-top: 6px; color: inherit; opacity: 0.75; }
.self-panel .avatar-callout { max-width: 180px; }
.self-panel .avatar-callout span { overflow-wrap: anywhere; }
.result-card.death { border-color: rgb(157, 138, 187); }
@keyframes projectionDrift { 
  50% { transform: translateX(calc(-5px - var(--projection-depth)*10px)); }
}
@media (prefers-reduced-motion: reduce) {
.projection-echo { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.feedback.boundary-feedback { border-color: rgb(181, 163, 205); background: linear-gradient(130deg, rgb(246, 242, 250), rgb(255, 255, 255)); }
.boundary-feedback #feedbackIcon { background: rgb(153, 131, 178); }
.boundary-feedback #feedbackLabel { color: rgb(139, 112, 167); }
.boundary-feedback #consequence { background: rgb(238, 231, 245); color: rgb(101, 80, 121); }
.avatar-stage svg.avatar .clinical-hotspot { opacity: 1; fill: rgb(238, 53, 78) !important; stroke: rgb(255, 177, 184) !important; stroke-width: 2.6 !important; animation: 1.6s ease-in-out 0s infinite normal none running affectedLocationPulse !important; }
.avatar-stage svg.avatar .clinical-hotspot:is(.eye, .mouth, .pelvis-guide, .intestine-loop) { fill: none !important; stroke: rgb(255, 82, 107) !important; stroke-width: 3.5 !important; }
.avatar-stage.sim-breathing svg.avatar .lung.clinical-hotspot { animation: 1.6s ease-in-out 0s infinite normal none running affectedLocationPulse, 1.2s ease-in-out 0s infinite normal none running simBreathing !important; }
.avatar-stage.sim-irregular:not(.sim-arrest) svg.avatar .heart.clinical-hotspot { animation: 1.6s ease-in-out 0s infinite normal none running affectedLocationPulse, 1.3s ease 0s infinite normal none running simIrregular !important; }
@keyframes affectedLocationPulse { 
  0%, 100% { opacity: 1; filter: drop-shadow(rgb(245, 53, 86) 0px 0px 8px); }
  50% { opacity: 0.35; filter: drop-shadow(rgb(245, 53, 86) 0px 0px 2px); }
}
@media (prefers-reduced-motion: reduce) {
.avatar-stage svg.avatar .clinical-hotspot { opacity: 1; filter: drop-shadow(rgb(245, 53, 86) 0px 0px 5px); animation: auto ease 0s 1 normal none running none !important; }
}
.battle-launch { margin: 24px 0px; padding: 24px; border: 1px solid rgb(135, 220, 197); border-radius: 16px; background: linear-gradient(135deg, rgb(26, 81, 77), rgb(18, 53, 51)); box-shadow: rgba(0, 0, 0, 0.133) 0px 14px 36px; }
.battle-launch h2 { font-size: 24px; line-height: 1.4; margin: 8px 0px 10px; color: rgb(234, 255, 248); }
.battle-launch p { font-size: 13px; line-height: 1.8; color: rgb(201, 232, 223); margin: 0px; }
.battle-launch button { width: 100%; margin-top: 18px; min-height: 52px; border: 0px; border-radius: 10px; background: rgb(163, 240, 212); color: rgb(10, 51, 46); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.battle-launch button span { float: right; margin-right: 20px; }
.battle-kicker { font: 700 10px / 1.6 monospace; letter-spacing: 0.15em; color: rgb(143, 214, 194); }
.battle-screen { position: fixed; inset: 0px; z-index: 160; overflow-y: auto; overscroll-behavior: contain; color: rgb(20, 55, 49); padding: 24px; }
.battle-screen[hidden] { display: none; }
.battle-shell { max-width: 900px; margin: 0px auto 50px; }
.battle-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0px 24px; border-bottom: 1px solid rgb(207, 223, 214); }
.battle-header h1 { font-size: 24px; margin: 4px 0px; }
.battle-header .battle-kicker { color: rgb(71, 123, 108); }
.battle-quiet { border: 1px solid rgb(189, 213, 202); border-radius: 8px; background: rgb(255, 255, 255); color: rgb(37, 91, 78); padding: 10px 14px; min-height: 44px; cursor: pointer; font-size: 12px; }
.battle-notice { font-size: 13px; line-height: 1.7; color: rgb(36, 108, 84); margin: 16px 0px; }
.battle-notice:empty { display: none; }
.battle-notice.is-error { color: rgb(156, 55, 72); background: rgb(255, 241, 241); padding: 14px; border-radius: 8px; }
.battle-intro { padding: 30px 0px 20px; }
.battle-intro h2 { font-size: 28px; margin: 8px 0px 14px; line-height: 1.4; }
.battle-intro p { font-size: 14px; line-height: 1.8; }
.battle-eyebrow { color: rgb(52, 124, 103); font-size: 12px; letter-spacing: 0.08em; }
.battle-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.battle-card { padding: 24px; border: 1px solid rgb(207, 222, 214); border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgba(27, 69, 59, 0.03) 0px 8px 24px; }
.battle-card h3 { margin: 0px 0px 16px; font-size: 18px; }
.battle-card p { font-size: 14px; line-height: 1.8; }
.battle-card label { display: block; font-size: 13px; margin: 12px 0px; }
.battle-card input { width: 100%; border: 1px solid rgb(171, 202, 188); border-radius: 8px; padding: 14px; letter-spacing: 0.2em; background: rgb(247, 251, 248); font-size: 22px !important; }
.battle-primary { width: 100%; min-height: 50px; margin-top: 18px; padding: 14px 20px; border: 0px; border-radius: 9px; background: rgb(17, 106, 85); color: white; font-size: 15px; font-weight: 700; cursor: pointer; }
.battle-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.battle-rules { margin: 28px 0px; padding: 20px; border-radius: 12px; background: rgb(230, 240, 233); }
.battle-rules h3 { font-size: 15px; margin: 0px 0px 12px; }
.battle-rules ul { padding-left: 22px; margin: 0px; }
.battle-rules li + li { margin-top: 8px; }
.battle-lobby, .battle-result { text-align: center; max-width: 640px; margin: 32px auto; }
.battle-code { font: 700 48px / 1.5 monospace; letter-spacing: 0.18em; margin: 16px 0px; color: rgb(18, 93, 73); }
.battle-subtle { font-size: 12px; color: rgb(88, 123, 108); }
.battle-scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0px; }
.battle-scoreboard article { min-width: 0px; padding: 18px; border: 1px solid rgb(207, 223, 215); background: white; border-radius: 12px; text-align: left; }
.battle-scoreboard article.is-me { border-color: rgb(79, 167, 139); box-shadow: rgb(79, 167, 139) 0px 3px inset; }
.battle-scoreboard article > span { display: block; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.battle-scoreboard small { font-size: 11px; font-weight: 400; }
.battle-scoreboard strong { display: block; font-size: 30px; margin-top: 10px; }
.battle-scoreboard p { font-size: 12px; margin: 8px 0px 0px; color: rgb(93, 124, 112); }
.battle-round { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0px; font-size: 14px; }
.battle-round b { padding: 8px 12px; background: rgb(222, 238, 228); border-radius: 8px; color: rgb(27, 98, 76); font-variant-numeric: tabular-nums; }
.battle-round b.is-urgent { background: rgb(255, 233, 233); color: rgb(170, 50, 71); }
.battle-question-card { padding: 28px; border: 1px solid rgb(213, 226, 217); border-radius: 14px; background: white; }
.battle-question { white-space: pre-line; margin: 18px 0px; }
.battle-source { font-size: 12px; color: rgb(82, 125, 108); line-height: 1.7; }
.battle-instruction { font-size: 13px; color: rgb(67, 108, 92); }
.battle-choices { display: grid; gap: 12px; }
.battle-choice { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; border: 1px solid rgb(204, 222, 211); border-radius: 10px; background: rgb(255, 255, 255); color: rgb(23, 60, 48); min-height: 56px; font-size: 15px; line-height: 1.8; cursor: pointer; }
.battle-choice > span:first-child { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgb(209, 228, 217); border-radius: 6px; font-size: 12px; }
.battle-choice > span:last-child { white-space: pre-line; overflow-wrap: anywhere; }
.battle-choice.is-selected { border-color: rgb(20, 118, 83); background: rgb(232, 246, 236); box-shadow: rgb(20, 118, 83) 3px 0px inset; }
.battle-choice.is-correct { border-color: rgb(22, 140, 96); background: rgb(227, 245, 233); }
.battle-choice.is-wrong { border-color: rgb(206, 101, 116); background: rgb(255, 240, 241); }
.battle-choice:disabled { cursor: default; }
.battle-review { margin-top: 24px; padding: 20px; border-radius: 12px; background: rgb(238, 247, 240); }
.battle-review h3 { font-size: 18px; }
.battle-review summary { cursor: pointer; line-height: 2; }
.battle-review article { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(203, 222, 209); font-size: 14px; line-height: 1.8; }
.battle-review article p { margin-bottom: 0px; }
.battle-countdown { text-align: center; padding: 80px 20px; background: white; border-radius: 14px; font-size: 20px; }
.battle-result > h2 { font-size: 36px; }
.battle-result > p { font-size: 14px; line-height: 1.8; }
body:has(#battleScreen:not([hidden])) #anatomyJump { display: none !important; }
@media (max-width: 600px) {
.battle-screen { padding: 16px; }
.battle-header { gap: 10px; padding: 10px 0px 18px; }
.battle-header h1 { font-size: 20px; }
.battle-header .battle-kicker { font-size: 8px; }
.battle-header .battle-quiet { font-size: 11px; padding: 8px 10px; }
.battle-entry-grid { grid-template-columns: 1fr; }
.battle-intro h2 { font-size: 25px; }
.battle-card { padding: 20px; }
.battle-scoreboard { gap: 10px; }
.battle-scoreboard article { padding: 14px; }
.battle-question-card { padding: 18px 14px; }
.battle-question { font-size: 18px; }
.battle-choice { padding: 14px 12px; font-size: 14px; }
.battle-launch { padding: 20px; }
.battle-launch h2 { font-size: 22px; }
.battle-code { font-size: 40px; }
.battle-result > h2 { font-size: 28px; }
}
.battle-history { text-align: left; margin: 24px 0px; }
.battle-history > details { margin: 12px 0px; padding: 16px; background: white; border: 1px solid rgb(206, 223, 213); border-radius: 10px; }
.battle-history summary { cursor: pointer; line-height: 1.8; }
.battle-history summary small { display: block; font-size: 11px; color: rgb(90, 122, 108); }
.battle-history article { padding: 12px 0px; border-top: 1px solid rgb(213, 227, 219); font-size: 14px; line-height: 1.8; }
.battle-rank { display: block; margin-top: 10px; color: rgb(17, 106, 85); font-size: 18px; }
@media (min-width: 760px) {
.battle-scoreboard { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
#battleScreen { color: var(--match-text); padding: 24px max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)); color-scheme: dark; }
#battleScreen .battle-shell { max-width: 1000px; margin: 0px auto 32px; }
#battleScreen .battle-header { align-items: center; border-bottom: 1px solid var(--match-line); padding: 8px 0px 24px; gap: 20px; }
#battleScreen .battle-header h1 { font-size: 25px; line-height: 1.5; margin: 6px 0px 0px; color: var(--match-text); letter-spacing: 0.04em; }
#battleScreen .battle-kicker, #battleScreen .battle-eyebrow { font: 700 11px / 1.7 monospace; letter-spacing: 0.12em; color: var(--match-accent); }
#battleScreen .battle-quiet { border: 1px solid var(--match-line); border-radius: 10px; color: var(--match-text); min-height: 46px; font-size: 13px; padding: 11px 16px; box-shadow: none; }
#battleScreen :focus-visible { outline: rgb(164, 244, 223) solid 3px; outline-offset: 4px; }
#battleScreen .battle-primary { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 54px; border: 1px solid transparent; border-radius: 10px; font: 700 15px / 1.7 "Noto Sans JP", sans-serif; padding: 14px 18px; box-shadow: none; touch-action: manipulation; }
#battleScreen .battle-primary > span { margin-left: auto; font-size: 19px; line-height: 1; }
#battleScreen .battle-primary:disabled { opacity: 0.5; cursor: not-allowed; }
#battleScreen .battle-primary:not(:disabled):active, #battleScreen .battle-quiet:not(:disabled):active { transform: translateY(1px); }
#battleScreen .battle-notice { margin: 16px 0px; padding: 14px 18px; background: rgb(25, 60, 55); border: 1px solid rgb(74, 124, 107); color: rgb(198, 244, 226); border-radius: 10px; font-size: 13px; line-height: 1.85; }
#battleScreen .battle-notice:empty { display: none; }
#battleScreen .battle-notice.is-error { background: rgb(55, 42, 50); border-color: rgb(139, 96, 106); color: rgb(255, 209, 215); }
#battleScreen .battle-card { border: 1px solid var(--match-line); border-radius: 16px; background: var(--match-surface); box-shadow: none; padding: 26px; min-width: 0px; }
#battleScreen .battle-random-entry { display: grid; grid-template-columns: minmax(0px, 1.25fr) minmax(240px, 0.75fr); align-items: center; gap: 40px; padding: 36px; margin-top: 28px; background: linear-gradient(120deg, rgb(23, 59, 64), rgb(16, 42, 49)); border-color: rgb(98, 142, 136); }
#battleScreen .battle-entry-copy h2 { font-size: 34px; line-height: 1.5; letter-spacing: 0.02em; margin: 12px 0px; color: var(--match-text); }
#battleScreen .battle-card p, #battleScreen .battle-intro > p:last-child { font-size: 14px; line-height: 1.95; color: var(--match-muted); margin: 10px 0px 0px; }
#battleScreen .battle-entry-action { padding: 24px; border: 1px solid rgb(68, 107, 107); border-radius: 12px; background: rgb(11, 37, 43); }
#battleScreen .battle-entry-action > p { font-size: 12px; text-align: center; color: var(--match-muted); margin-top: 14px; }
#battleScreen .battle-ready { display: flex; align-items: center; gap: 8px; font: 700 10px / 1.8 monospace; letter-spacing: 0.09em; color: var(--match-muted); }
#battleScreen .battle-ready i { width: 7px; height: 7px; border-radius: 50%; background: var(--match-accent); }
#battleScreen .battle-facts { display: flex; list-style: none; padding: 0px; margin: 26px 0px 0px; gap: 24px; }
#battleScreen .battle-facts li { font-size: 11px; color: var(--match-muted); border-left: 1px solid rgb(80, 117, 116); padding-left: 14px; }
#battleScreen .battle-facts b { display: block; color: var(--match-text); font: 600 25px / 1.4 monospace; margin-bottom: 3px; }
#battleScreen .battle-intro { padding: 34px 0px 18px; }
#battleScreen .battle-intro h2 { font-size: 23px; line-height: 1.6; color: var(--match-text); margin: 8px 0px; }
#battleScreen .battle-intro .battle-eyebrow { margin: 0px; }
#battleScreen .battle-entry-grid { gap: 16px; align-items: stretch; }
#battleScreen .battle-entry-grid .battle-card { display: flex; flex-direction: column; }
#battleScreen .battle-entry-grid h3 { font-size: 20px; line-height: 1.6; margin: 8px 0px; color: var(--match-text); }
#battleScreen .battle-card-index { font: 700 10px / 1.8 monospace; letter-spacing: 0.13em; color: var(--match-muted); }
#battleScreen .battle-create-card .battle-primary { background: rgb(35, 71, 74); border-color: rgb(102, 139, 135); color: rgb(197, 246, 229); margin-top: auto; }
#battleScreen .battle-create-card p { margin-bottom: 24px; }
#battleScreen #battleJoinForm label { font-size: 13px; color: var(--match-muted); margin: 8px 0px; }
#battleScreen .battle-join-controls { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 10px; align-items: stretch; }
#battleScreen .battle-join-controls input { min-width: 0px; width: 100%; letter-spacing: 0.13em; padding: 12px 14px; border: 1px solid rgb(108, 145, 141); background: rgb(7, 30, 36); color: var(--match-text); border-radius: 10px; min-height: 54px; font: 600 23px / 1.5 monospace !important; }
#battleScreen .battle-join-controls input::placeholder { color: rgb(136, 167, 165); opacity: 1; }
#battleScreen .battle-join-controls .battle-primary { margin: 0px; background: rgb(35, 71, 74); border-color: rgb(102, 139, 135); color: rgb(197, 246, 229); font-size: 14px; padding: 12px 16px; }
#battleScreen #battleCodeHint { font-size: 12px; line-height: 1.8; color: var(--match-muted); margin-top: 12px; }
#battleScreen .battle-rules { margin: 24px 0px 0px; padding: 0px 20px; background: transparent; border: 1px solid var(--match-line); border-radius: 12px; }
#battleScreen .battle-rules > summary { cursor: pointer; font-size: 13px; color: var(--match-muted); min-height: 56px; padding: 16px 0px; line-height: 1.8; }
#battleScreen .battle-rules ul { padding: 0px 0px 20px 22px; color: var(--match-muted); font-size: 13px; line-height: 1.95; }
#battleScreen .battle-lobby { max-width: 740px; margin: 32px auto; text-align: center; border: 1px solid var(--match-line); border-radius: 18px; padding: 32px; background: rgb(16, 43, 49); }
#battleScreen .battle-lobby h2 { font-size: 26px; line-height: 1.6; margin: 12px 0px; color: var(--match-text); }
#battleScreen .battle-lobby > p { font-size: 14px; line-height: 1.9; color: var(--match-muted); }
#battleScreen .battle-code { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 600; font-stretch: normal; font-size: clamp(34px, 7vw, 56px); line-height: 1.6; font-family: monospace; letter-spacing: 0.17em; margin: 20px 0px 12px; padding: 12px; border: 1px dashed rgb(99, 142, 134); background: rgb(7, 30, 35); border-radius: 12px; color: var(--match-accent); overflow-wrap: normal; }
#battleScreen .battle-lobby .battle-subtle { font-size: 13px; color: var(--match-muted); }
#battleScreen #battleMatchTimer { min-height: 50px; padding: 12px; border-radius: 10px; background: rgb(33, 65, 63); color: rgb(199, 246, 229); font-size: 16px; font-weight: 700; }
#battleScreen .battle-search-mark { margin: 0px auto; color: var(--match-accent); font: 400 60px / 1.2 sans-serif; animation: 2.6s ease-in-out 0s infinite normal none running match-search; }
@keyframes match-search { 
  50% { opacity: 0.4; transform: scale(0.94); }
}
#battleScreen .battle-scoreboard { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 10px; margin: 24px 0px; }
#battleScreen .battle-scoreboard article { padding: 16px; background: rgb(18, 46, 52); color: var(--match-text); border: 1px solid var(--match-line); border-radius: 12px; box-shadow: none; min-width: 0px; }
#battleScreen .battle-scoreboard article.is-me { background: rgb(28, 62, 61); border-color: rgb(142, 218, 195); box-shadow: rgb(142, 218, 195) 0px 3px inset; }
#battleScreen .battle-scoreboard article > span { font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--match-text); }
#battleScreen .battle-scoreboard article > span small { display: block; font-size: 11px; color: var(--match-accent); }
#battleScreen .battle-scoreboard strong { font: 600 29px / 1.4 monospace; margin: 10px 0px 0px; color: var(--match-text); }
#battleScreen .battle-scoreboard strong small { font: 400 11px / 1.5 "Noto Sans JP", sans-serif; color: var(--match-muted); }
#battleScreen .battle-scoreboard p { margin: 8px 0px 0px; font-size: 12px; line-height: 1.7; color: var(--match-muted); }
#battleScreen[data-phase="lobby"] .battle-scoreboard { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
#battleScreen[data-phase="lobby"] .battle-scoreboard strong { display: none; }
#battleScreen .battle-round { gap: 12px; font-size: 14px; color: var(--match-text); padding: 8px 0px 18px; flex-wrap: wrap; }
#battleScreen .battle-round > span { font-weight: 700; }
#battleScreen .battle-round b { font-size: 13px; color: var(--match-accent); background: rgb(22, 55, 59); border: 1px solid rgb(66, 105, 106); border-radius: 8px; padding: 9px 12px; font-variant-numeric: tabular-nums; }
#battleScreen .battle-round b.is-urgent { background: rgb(64, 44, 52); border-color: rgb(165, 116, 126); color: rgb(255, 208, 216); }
#battleScreen .battle-question-card { padding: 30px; background: rgb(248, 250, 246); color: rgb(25, 58, 60); border: 1px solid rgb(209, 223, 214); border-radius: 16px; color-scheme: light; }
#battleScreen .battle-question-card :focus-visible, #battleScreen .battle-history :focus-visible { outline-color: rgb(13, 121, 102); }
#battleScreen .battle-question { font-size: 21px; line-height: 1.95; color: rgb(24, 58, 60); margin: 16px 0px 24px; }
#battleScreen .battle-source, #battleScreen .battle-instruction { font-size: 13px; line-height: 1.85; color: rgb(82, 110, 105); }
#battleScreen .battle-choice { padding: 16px; min-height: 62px; border: 1px solid rgb(174, 191, 183); background: rgb(255, 255, 255); color: rgb(25, 58, 60); border-radius: 10px; font: 500 16px / 1.85 "Noto Sans JP", sans-serif; gap: 12px; box-shadow: none; }
#battleScreen .battle-choice > span:first-child { flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px; font-size: 13px; border-color: rgb(181, 201, 188); background: rgb(237, 244, 237); color: rgb(34, 94, 80); }
#battleScreen .battle-choice > span:first-child::after { display: none; }
#battleScreen .battle-choice > span:last-child { min-width: 0px; overflow-wrap: anywhere; }
#battleScreen .battle-choice.is-selected { background: rgb(228, 244, 234); border-color: rgb(20, 116, 94); box-shadow: rgb(20, 116, 94) 3px 0px inset; }
#battleScreen .battle-choice.is-correct { background: rgb(228, 244, 231); border-color: rgb(19, 118, 92); }
#battleScreen .battle-choice.is-wrong { background: rgb(255, 240, 242); border-color: rgb(172, 66, 83); }
#battleScreen .battle-choice:disabled { opacity: 1; }
#battleScreen .battle-choice:disabled:not(.is-correct):not(.is-selected):not(.is-wrong) { color: rgb(97, 119, 111); background: rgb(238, 243, 237); }
#battleScreen .battle-option-state { display: block; color: rgb(52, 97, 88); font-size: 12px; line-height: 1.8; margin-bottom: 4px; font-weight: 700; }
#battleScreen .is-wrong .battle-option-state { color: rgb(161, 46, 67); }
#battleScreen .battle-answer { margin-top: 22px; background: rgb(18, 63, 61); color: rgb(255, 255, 255); }
#battleScreen .battle-answer:disabled { background: rgb(219, 230, 223); color: rgb(84, 109, 98); opacity: 1; border-color: rgb(179, 201, 187); }
#battleScreen .battle-review { padding: 22px; background: rgb(233, 244, 233); border: 1px solid rgb(176, 203, 183); border-radius: 12px; margin-top: 24px; color: rgb(25, 58, 60); }
#battleScreen .battle-review h3 { font-size: 20px; margin: 0px 0px 12px; }
#battleScreen .battle-review summary { font-size: 15px; min-height: 48px; cursor: pointer; }
#battleScreen .battle-review article, #battleScreen .battle-history article { background: rgb(255, 255, 255); border: 1px solid rgb(204, 220, 208); border-radius: 10px; padding: 18px; font-size: 15px; line-height: 1.95; color: rgb(41, 75, 68); margin-top: 12px; }
#battleScreen .battle-countdown { background: rgb(17, 46, 52); border: 1px solid var(--match-line); border-radius: 16px; color: var(--match-accent); padding: 70px 24px; font-size: 23px; line-height: 1.9; }
#battleScreen .battle-result { max-width: 900px; margin: 32px auto; }
#battleScreen .battle-result > h2 { font-size: 38px; line-height: 1.5; color: var(--match-text); margin: 12px 0px; }
#battleScreen .battle-result > p { color: var(--match-muted); font-size: 14px; line-height: 1.9; }
#battleScreen .battle-rank { font: 700 22px / 1.6 "Noto Sans JP", sans-serif; color: var(--match-accent); margin-top: 12px; }
#battleScreen .battle-result > [data-battle="new"] { max-width: 440px; margin: 24px auto 32px; }
#battleScreen .battle-history { padding-top: 24px; border-top: 1px solid var(--match-line); text-align: left; }
#battleScreen .battle-history > h3 { font-size: 21px; margin: 0px 0px 20px; color: var(--match-text); }
#battleScreen .battle-history > details { background: rgb(246, 250, 244); color: rgb(25, 58, 60); border: 1px solid rgb(182, 203, 189); border-radius: 12px; padding: 18px; margin: 12px 0px; color-scheme: light; }
#battleScreen .battle-history summary { font-size: 14px; line-height: 1.9; cursor: pointer; min-height: 44px; }
#battleScreen .battle-history summary small { font-size: 12px; line-height: 1.8; color: rgb(92, 115, 104); }
@media (hover: hover) {
#battleScreen .battle-primary:not(:disabled):hover { background: rgb(182, 246, 227); color: rgb(8, 46, 40); }
#battleScreen .battle-quiet:not(:disabled):hover { border-color: rgb(142, 218, 195); background: rgb(30, 66, 69); }
#battleScreen .battle-choice:not(:disabled):hover { border-color: rgb(19, 118, 92); background: rgb(239, 248, 240); }
#battleScreen .battle-answer:not(:disabled):hover { background: rgb(23, 99, 81); color: white; }
}
@media (max-width: 760px) {
#battleScreen { padding: max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); }
#battleScreen .battle-shell { margin-bottom: 16px; }
#battleScreen .battle-header { gap: 12px; padding: 0px 0px 18px; align-items: center; }
#battleScreen .battle-header .battle-kicker { font-size: 9px; letter-spacing: 0.06em; }
#battleScreen .battle-header h1 { font-size: 20px; margin-top: 4px; }
#battleScreen .battle-header .battle-quiet { font-size: 11px; padding: 10px 12px; white-space: nowrap; }
#battleScreen .battle-random-entry { grid-template-columns: minmax(0px, 1fr); gap: 22px; margin-top: 20px; padding: 22px; }
#battleScreen .battle-entry-copy h2 { font-size: 27px; line-height: 1.6; margin: 10px 0px; }
#battleScreen .battle-card p { font-size: 14px; }
#battleScreen .battle-facts { gap: 20px; margin-top: 20px; }
#battleScreen .battle-facts b { font-size: 24px; }
#battleScreen .battle-entry-action { padding: 18px; }
#battleScreen .battle-entry-action .battle-primary { margin-top: 12px; }
#battleScreen .battle-intro { padding: 30px 0px 16px; }
#battleScreen .battle-intro h2 { font-size: 21px; }
#battleScreen .battle-entry-grid { grid-template-columns: minmax(0px, 1fr); gap: 12px; }
#battleScreen .battle-card { padding: 22px; }
#battleScreen .battle-join-controls { grid-template-columns: minmax(0px, 1fr); }
#battleScreen .battle-join-controls input { text-align: center; letter-spacing: 0.24em; font-size: 26px !important; }
#battleScreen .battle-rules { padding: 0px 16px; }
#battleScreen .battle-rules > summary { font-size: 13px; }
#battleScreen .battle-lobby { padding: 22px 16px; margin: 22px 0px; border-radius: 14px; }
#battleScreen .battle-lobby h2 { font-size: 22px; }
#battleScreen .battle-scoreboard, #battleScreen[data-phase="lobby"] .battle-scoreboard { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; margin: 20px 0px; }
#battleScreen .battle-scoreboard article { padding: 12px; }
#battleScreen .battle-scoreboard article > span { font-size: 12px; }
#battleScreen .battle-scoreboard strong { font-size: 25px; margin-top: 6px; }
#battleScreen .battle-scoreboard p { font-size: 11px; margin-top: 5px; }
#battleScreen[data-phase="question"] .battle-scoreboard, #battleScreen[data-phase="review"] .battle-scoreboard, #battleScreen[data-phase="countdown"] .battle-scoreboard { margin: 18px 0px 16px; }
#battleScreen[data-phase="question"] .battle-scoreboard article, #battleScreen[data-phase="review"] .battle-scoreboard article, #battleScreen[data-phase="countdown"] .battle-scoreboard article { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 4px 8px; align-items: center; }
#battleScreen[data-phase="question"] .battle-scoreboard strong, #battleScreen[data-phase="review"] .battle-scoreboard strong, #battleScreen[data-phase="countdown"] .battle-scoreboard strong { font-size: 21px; margin: 0px; }
#battleScreen[data-phase="question"] .battle-scoreboard p, #battleScreen[data-phase="review"] .battle-scoreboard p, #battleScreen[data-phase="countdown"] .battle-scoreboard p { grid-column: 1 / -1; margin: 0px; }
#battleScreen .battle-round { font-size: 13px; gap: 8px; padding: 4px 0px 16px; }
#battleScreen .battle-round b { font-size: 12px; padding: 8px 10px; }
#battleScreen .battle-question-card { padding: 20px 14px; border-radius: 12px; }
#battleScreen .battle-question { font-size: 18px; line-height: 1.95; margin: 16px 0px 22px; }
#battleScreen .battle-choice { font-size: 16px; padding: 14px 12px; gap: 10px; }
#battleScreen .battle-choice > span:first-child { width: 27px; height: 27px; }
#battleScreen .battle-answer:not(:disabled) { position: sticky; bottom: env(safe-area-inset-bottom); z-index: 2; border: 8px solid rgb(248, 250, 246); min-height: 66px; border-radius: 16px; margin-inline: -4px; width: calc(100% + 8px); }
#battleScreen .battle-review { padding: 16px; }
#battleScreen .battle-review article, #battleScreen .battle-history article { padding: 14px; }
#battleScreen .battle-countdown { padding: 56px 20px; font-size: 20px; }
#battleScreen .battle-result > h2 { font-size: 30px; }
#battleScreen .battle-history > details { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
#battleScreen *, #battleScreen ::before, #battleScreen ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 761px) {
#battleScreen .battle-scoreboard, #battleScreen[data-phase="lobby"] .battle-scoreboard { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
#battleScreen .battle-scoreboard:has(article:only-child) { grid-template-columns: minmax(0px, 1fr); }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 4px; }
.title-screen :focus-visible, .auth-gate :focus-visible { outline-color: rgb(167, 244, 223); }
.title-top { gap: 20px; align-items: center; letter-spacing: 0.12em; }
.title-top .title-account-actions { margin: 0px 0px 0px auto; flex-wrap: nowrap; flex-shrink: 0; }
.title-account-actions .title-ranking-btn { font-size: 12px; min-height: 44px; padding: 10px 16px; width: auto; white-space: nowrap; }

.title-copy { min-width: 0px; }
.title-copy h1 { margin-top: 24px; }
.welcome-user { font-family: inherit; line-height: 1.6; letter-spacing: 0px; }
.question-source { margin-top: 20px; }
.category-picker { flex-wrap: wrap; }
.category-picker select { min-width: 0px; font-size: 14px !important; }
.year-publication-note { color: rgb(166, 196, 192); font-size: 12px; line-height: 1.8; }
.premium-setup { gap: 10px; margin-top: 20px; }
.mode-card { min-width: 0px; }
.mode-card small { margin-top: 6px; }
.title-actions { display: grid; grid-template-columns: minmax(0px, 1fr); margin-top: 24px; }
.start-btn { width: 100%; min-width: 0px; }
.how-btn { min-height: 44px; padding: 12px 18px; font-size: 13px; }
.daily-challenge { padding: 20px; gap: 14px; margin-top: 24px; }
.daily-challenge h2 { font-size: 18px; }
.daily-challenge button { min-height: 48px; font-size: 14px; }
.official-pdf-library summary { color: rgb(176, 238, 225); }
.official-pdf-library { margin-top: 16px; }
.title-footer { gap: 12px; flex-wrap: wrap; font-size: 10px; }
.last-result { line-height: 1.6; }
body:has(#titleScreen:not([hidden])) #anatomyJump, body:has(#authGate) #anatomyJump, body:has(#mypage:not([hidden])) #anatomyJump, body:has(#reportModal:not([hidden])) #anatomyJump, body:has(#resultModal:not([hidden])) #anatomyJump { display: none !important; }
#anatomyJump { bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; }
.question-panel, .self-panel { min-width: 0px; }
.question-head { gap: 10px; flex-wrap: wrap; }
.source-badge { font-size: 11px; line-height: 1.6; white-space: normal; }
.question-body h1 { font-size: 21px; line-height: 1.85; overflow-wrap: anywhere; }
.choice { min-height: 56px; font-size: 15px; line-height: 1.75; text-align: left; }
.choice:disabled { cursor: default; }
.choice:disabled:hover { transform: none; }
.action-row .primary-btn { font-size: 14px; }
.feedback p, .choice-rationale p { font-size: 14px; line-height: 1.9; }
.choice-rationale header { line-height: 1.7; flex-wrap: wrap; gap: 8px; }
#detailBox > summary { padding: 12px 0px; cursor: pointer; }
.report-link { min-height: 44px; font-size: 12px; }
.avatar-callout { max-width: 58%; line-height: 1.65; font-size: 12px !important; }
.avatar-callout b { font-size: 12px !important; }
.avatar-callout span { font-size: 11px !important; }
.clinical-card p, .symptom-chips span, .record-entry { font-size: 12px; line-height: 1.75; }
.mypage { padding: 24px; }
.mypage-shell { width: min(1060px, 100%); max-height: calc(100dvh - 48px); }
.mypage-main { min-width: 0px; padding: 34px; }
.mypage-panel h3 { padding-right: 44px; line-height: 1.4; }
.mypage-nav button { min-height: 44px; }
.mypage-close, .report-close, #howClose { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.mypage-close:hover, .report-close:hover, #howClose:hover { background: rgb(226, 238, 234); }
.profile-metric { padding: 20px; }
.profile-metric b { font-size: 28px; }
.history-entry small, .history-entry time { font-size: 11px; line-height: 1.7; }
.history-empty { font-size: 13px; padding: 32px 20px; border: 1px dashed rgb(204, 220, 214); border-radius: 12px; background: rgb(255, 255, 255); margin-top: 16px; }
.account-form input { min-height: 48px; border-radius: 8px; }
.account-form button, .danger-zone button, .mypage-logout { min-height: 44px; font-size: 12px; }
.danger-zone { border-radius: 12px; }
.account-status { font-size: 12px; }
.ranking-tabs button { min-height: 44px; font-size: 12px; }
.ranking-rule { font-size: 12px; line-height: 1.8; }
.ranking-name { font-size: 13px; }
.ranking-row > span:not(.ranking-name) small { font-size: 10px; }
.ranking-row > span:not(.ranking-name) b { font-size: 14px; }
.auth-card { width: min(460px, 100%); }
.auth-lead { line-height: 1.85; }
.auth-message { font-size: 12px; line-height: 1.75; }
.auth-note { font-size: 11px; line-height: 1.8; }
.auth-submit { min-height: 48px; font-size: 15px; }
.pin-wrap button { min-width: 48px; }
.report-card { width: min(580px, 100% - 24px); max-height: calc(100dvh - 32px); overflow: auto; border-radius: 16px; }
.report-card input, .report-card select, .report-card textarea { border-radius: 8px; }
.how-panel { scrollbar-gutter: stable; }
.how-panel h2 { line-height: 1.5; }
.how-panel li { font-size: 13px; line-height: 1.8; }
@media (max-width: 1120px) {
.game-grid { grid-template-columns: 180px minmax(0px, 1fr); }
.self-panel { grid-template-columns: minmax(260px, 400px) minmax(0px, 1fr); }
.title-content { gap: 24px; }
.title-copy h1 { font-size: clamp(62px, 8vw, 96px); }
}
@media (max-width: 760px) {
.title-top { gap: 8px; }
.title-top .title-account-actions { gap: 6px; }
.title-account-actions .title-ranking-btn { font-size: 11px; padding: 8px 10px; }
.title-content { display: block; position: relative; }
.title-copy h1 { position: relative; z-index: 1; }
.welcome-user { margin: 12px 0px; }
.premium-setup { gap: 8px; display: grid !important; grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
.mode-card { min-height: 68px; }
.mode-card b { font-size: 11px; }
.mode-card small { font-size: 10px; }
.category-picker { display: grid; padding: 12px; }
.category-picker select { width: 100%; font-size: 14px !important; }
.title-metrics { margin: 16px 0px; }
.title-metric { padding: 4px 12px; }
.title-actions { margin-top: 18px; }
.daily-challenge button { width: 100%; }

.condition-line { flex-wrap: wrap; gap: 8px; }
.condition-line strong { font-size: 18px; white-space: normal; }
.condition-line span { font-size: 11px; line-height: 1.7; }
.side-panel .streak-card { display: none; }
.side-panel .case-meta { margin: 10px 0px 0px; }
.side-panel .case-number { margin-bottom: 10px; }
.choice { padding: 14px 12px; font-size: 14px; }
.avatar-callout { max-width: 54%; }
.mypage { padding: 0px; }
.mypage-shell { height: 100dvh; max-height: 100dvh; border-radius: 0px; grid-template-columns: 1fr; grid-template-rows: auto minmax(0px, 1fr); }
.mypage-main { padding: 24px 16px 32px; overflow-y: auto; }
.mypage-close { top: 12px; right: 12px; }
.mypage-side { padding: 16px; }
.mypage-nav { gap: 4px; }
.mypage-nav button { padding: 10px; }
.profile-metrics { gap: 10px; }
.profile-metric { padding: 16px; }
.profile-metric b { font-size: 26px; }
.mypage-panel h3 { font-size: 21px; }
.mypage-logout { top: 12px; right: 16px; }
.history-entry { min-width: 0px; }
.history-entry > div { min-width: 0px; overflow-wrap: anywhere; }
.how-panel { padding: 24px 20px; }
.how-panel h2 { font-size: 20px; }
.how-panel li { grid-template-columns: 1fr; gap: 4px; }
.legal-note { padding: 22px 18px 80px; line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
button, .choice { transition: none; }
html { scroll-behavior: auto; }
}
.title-support { min-width: 0px; padding-top: 30px; }
.title-support .daily-challenge { display: block; }
.title-support .daily-challenge button { margin-top: 16px; width: 100%; }
.title-support .official-pdf-library { margin-top: 16px; }
@media (max-width: 760px) {
.title-support .daily-challenge button { margin-top: 16px; }
}
@media (max-width: 760px) {
.category-score { margin-bottom: 16px; }
.category-score > span { font-size: 12px; }
}
.case-context { margin: 4px 0px 24px; padding: 18px 20px; border: 1px solid rgb(214, 228, 222); border-radius: 12px; }
.case-context[hidden], .question-annotations[hidden] { display: none; }
.case-context section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(214, 228, 222); }
.case-context h2 { margin: 0px 0px 8px; color: rgb(22, 118, 109); letter-spacing: 0.05em; }
.case-context p { font-weight: 400; margin: 0px; white-space: pre-line; overflow-wrap: anywhere; }
.question-annotations { margin: 12px 0px 20px; color: rgb(83, 113, 108); }
.question-annotations summary { cursor: pointer; line-height: 2; }
.question-annotations p { line-height: 1.8; overflow-wrap: anywhere; }
.question-body h1 { white-space: pre-line; }
@media (max-width: 760px) {
.case-context { padding: 16px; margin-bottom: 20px; }
}
:root { --background: #07191e; --surface: #102c32; --text: #e6f2ee; --muted: #536c70; --accent: #8be6cf; --danger: #ae3044; --success: #087263; --ink: #19383c; --paper: #f2f6f3; --teal: #087263; --line: #cbdad3; --radius: 14px; --radius-sm: 10px; --shadow: 0 16px 48px #0002; --ui-focus: #087263; }
body { font-size: 15px; line-height: 1.7; }
.noise { display: none; }
[hidden] { display: none !important; }
button { touch-action: manipulation; box-shadow: none; transition: background 0.18s, border-color 0.18s, transform 0.18s; }
button:disabled { cursor: not-allowed; }
a { text-underline-offset: 4px; }
button, input, select, textarea { font-family: inherit; }
p, h1, h2, h3, dd, summary { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
input, select, textarea { border-radius: 10px; font-size: 16px !important; }
button, a, summary { scroll-margin-block: 100px; }
.primary-btn, .secondary-btn, .battle-primary, .battle-quiet, .auth-submit { border-radius: 10px; min-height: 48px; font-size: 14px; }
.primary-btn, .battle-primary { background: rgb(18, 60, 64); color: rgb(255, 255, 255); box-shadow: none; }
.primary-btn:hover, .battle-primary:hover { background: rgb(8, 107, 97); }
.title-screen { min-height: 100svh; background: radial-gradient(ellipse at 85% 25%,#163e43,transparent 55%),var(--background) !important; }
.title-top, .title-footer { width: min(1180px, 100%); margin-inline: auto; color: rgb(166, 192, 190); font-size: 11px; line-height: 1.8; letter-spacing: 0.06em; border-color: rgb(52, 81, 89); }
.title-content { max-width: 1180px; padding: 56px 0px 44px; grid-template-columns: minmax(0px, 1.12fr) minmax(0px, 0.88fr); }
.title-copy h1 { line-height: 1; margin: 20px 0px 0px; text-shadow: none; }
.title-copy h1 span { color: var(--accent); }
.title-kicker { letter-spacing: 0.1em; color: var(--accent); }
.title-actions { margin: 20px 0px; gap: 10px; }
.start-btn { min-height: 70px; background: var(--accent); border-radius: 10px; color: rgb(9, 45, 42); font-size: 18px; box-shadow: none; padding: 16px 22px; }
.start-btn small { font-size: 11px; }
.start-btn:hover { background: rgb(170, 242, 223); box-shadow: rgba(139, 230, 207, 0.125) 0px 4px 20px; }
.how-btn, .title-ranking-btn { border-color: rgb(63, 98, 104); background: rgb(16, 44, 50); backdrop-filter: none; color: rgb(212, 230, 224); }
.shift-setup { border: 1px solid rgb(63, 98, 104); border-radius: 14px; background: rgb(12, 36, 42); margin: 24px 0px 0px; overflow: hidden; }
.shift-setup > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; min-height: 68px; list-style: none; cursor: pointer; }
.shift-setup > summary::-webkit-details-marker { display: none; }
.shift-setup > summary::after { content: "＋"; color: var(--accent); font-size: 24px; }
.shift-setup[open] > summary::after { content: "−"; }
.shift-setup > summary b { display: block; font-size: 14px; color: rgb(230, 242, 238); }
#setupSummary { display: block; font-size: 12px; line-height: 1.8; color: rgb(177, 201, 198); margin-top: 2px; }
.shift-setup-content { padding: 0px 18px 18px; border-top: 1px solid rgb(63, 98, 104); }
.setup-label { font-size: 13px; color: rgb(212, 230, 224); margin: 18px 0px 8px; }
.question-source { border: 0px; padding: 0px; min-width: 0px; }
.question-source legend { font-size: 13px; color: rgb(212, 230, 224); }
.question-source-options { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.question-source-options label { border-radius: 10px; border-color: rgb(63, 98, 104); min-width: 0px; }
.question-source-options b { font-size: 13px; }
.question-source-options small, #questionSourceNotice, .year-publication-note { font-size: 12px; color: rgb(177, 201, 198); line-height: 1.85; }
.premium-setup { margin: 10px 0px 16px; grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.mode-card { min-height: 100px; padding: 14px 10px; background: rgb(16, 44, 50); border-color: rgb(63, 98, 104); box-shadow: none; backdrop-filter: none; }
.mode-card b { font-size: 13px; }
.mode-card small { font-size: 12px; color: rgb(177, 201, 198); }
.mode-card em { display: block; font-size: 11px; color: rgb(177, 201, 198); font-style: normal; margin-top: 8px; }
.mode-card.active { border-color: var(--accent); background: rgb(27, 66, 62); box-shadow: inset 0 3px var(--accent); }
.mode-card:hover { transform: none; box-shadow: none; }
.mode-card.active small { color: rgb(225, 241, 235); }
.category-picker { display: grid; grid-template-columns: 90px minmax(0px, 1fr); padding: 8px 0px; margin: 0px; gap: 12px; border: 0px; background: none; font-size: 13px; letter-spacing: 0px; color: rgb(177, 201, 198); }
.category-picker select { max-width: none; width: 100%; min-height: 48px; border-color: rgb(63, 98, 104); }
.title-metric { min-width: 0px; }
.title-metric span { color: rgb(177, 201, 198); }
.last-result { flex-wrap: wrap; gap: 4px 12px; color: rgb(166, 192, 190); }
.last-result b { color: rgb(177, 201, 198); }
.title-support { padding: 0px; }
.daily-challenge, .battle-launch, .official-pdf-library { background: rgb(16, 44, 50); border: 1px solid rgb(63, 98, 104); border-radius: 14px; box-shadow: none; margin: 16px 0px 0px; padding: 20px; }
.daily-challenge h2, .battle-launch h2 { font-size: 20px; color: rgb(230, 242, 238); margin: 0px 0px 8px; }
.daily-challenge p, .battle-launch p { font-size: 13px; color: rgb(177, 201, 198); line-height: 1.85; }
.daily-challenge button, .battle-launch button { min-height: 48px; border: 1px solid rgb(99, 139, 137); background: rgb(25, 59, 64); color: rgb(170, 242, 223); border-radius: 10px; font-size: 14px; padding: 12px; }
.battle-kicker { font-size: 11px; }
.official-pdf-library summary { font-size: 14px; min-height: 44px; }
.official-pdf-library summary span, .official-pdf-library p, .official-pdf-year h3 { font-size: 12px; color: rgb(177, 201, 198); }
.official-pdf-year a { min-height: 44px; font-size: 12px; }
.install-btn { position: relative; bottom: auto; right: auto; align-self: center; min-height: 44px; margin: 0px 0px 20px; font-size: 12px; }
.app-shell { width: min(1320px, 100% - 40px); margin: 20px auto; border-radius: 16px; overflow: visible; }
.topbar { min-height: 70px; height: auto; padding: 12px 24px; gap: 12px; color: rgb(230, 242, 238); border-color: rgb(52, 81, 89); border-radius: 16px 16px 0px 0px; }
.brand, .shift b { color: rgb(230, 242, 238); }
.brand small, .shift { color: rgb(177, 201, 198); }
.account-chip { min-height: 44px; border-radius: 10px; margin: 0px; background: rgb(23, 55, 61); color: rgb(230, 242, 238); border-color: rgb(63, 98, 104); box-shadow: none; }
.account-chip small { color: var(--accent); font-size: 10px; }
.account-chip i { background: var(--accent); color: rgb(9, 45, 42); }
.icon-btn { min-width: 44px; min-height: 44px; flex-shrink: 0; background: rgb(23, 55, 61); color: var(--accent); border-color: rgb(63, 98, 104); }
.end-shift-btn { min-height: 44px; font-size: 12px; background: rgb(23, 55, 61); color: rgb(212, 230, 224); border-color: rgb(63, 98, 104); margin: 0px; }
.premium-player { margin: 0px 0px 0px auto; }
.xp-copy b { color: rgb(212, 230, 224); }
.level-orb { background: rgb(23, 55, 61); color: var(--accent); }
.game-grid { display: grid; grid-template-columns: minmax(0px, 1fr) 320px; grid-template-rows: auto 1fr; min-height: 0px; }
.side-panel { grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 24px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); background: rgb(237, 243, 238); }
.side-panel > .eyebrow, .side-panel .streak-card { display: none; }
.side-panel .case-number { gap: 5px; margin: 0px; }
.case-number span { writing-mode: horizontal-tb; font-size: 11px; margin: 0px; }
.case-number strong { font: 700 26px / 1.2 monospace; }
.case-number small { font-size: 13px; color: var(--muted); }
.side-panel > .progress-track { order: 4; flex-basis: 100%; height: 3px; margin: 0px; }
.side-panel .case-meta { display: flex; flex: 1 1 0%; gap: 14px; margin: 0px; min-width: 0px; }
.side-panel .case-meta div { padding: 0px; border: 0px; min-width: 0px; }
.case-meta dt { font-size: 11px; }
.case-meta dd { font-size: 12px; line-height: 1.65; }
.side-panel .text-btn { min-height: 44px; margin: 0px; font-size: 12px; padding: 8px; }
.question-panel { grid-area: 2 / 1; border-radius: 0px 0px 0px 16px; scroll-margin-top: 12px; }
.question-head { background: rgb(245, 248, 244); padding: 14px 24px; align-items: center; }
.source-badge, .mastery-tag { font-size: 11px; border-radius: 6px; color: rgb(50, 102, 92); background: rgb(231, 241, 233); }
.instruction { font-size: 12px; letter-spacing: 0px; }
.bookmark-btn { margin-left: auto; min-width: 44px; min-height: 44px; border-radius: 10px; }
.question-body { padding: 28px 32px 24px; }
.question-body h1 { font: 700 21px / 1.95 "Noto Sans JP", sans-serif; margin: 0px 0px 26px; }
.question-body .lead { font-size: 13px; line-height: 1.85; }
.lead:empty { display: none; }
.case-context { border-left: 3px solid rgb(96, 154, 141); background: rgb(241, 246, 239); }
.case-context p { font-size: 16px; line-height: 1.95; }
.case-context h2 { font-size: 13px; }
.question-annotations { font-size: 13px; }
.question-annotations summary { min-height: 44px; }
.choice, .battle-choice { align-items: flex-start; gap: 12px; min-height: 64px; padding: 16px; border: 1px solid rgb(174, 191, 183); border-radius: 10px; font: 500 16px / 1.85 "Noto Sans JP", sans-serif; box-shadow: none; transform: none; }
.choice > span:last-child, .battle-choice > span:last-child { min-width: 0px; flex: 1 1 0%; overflow-wrap: anywhere; white-space: pre-line; }
.choice-index { margin: 0px; width: 30px; height: 30px; font-size: 13px; flex-shrink: 0; }
.choice.selected { background: rgb(227, 243, 235); border-color: rgb(8, 114, 99); box-shadow: rgb(8, 114, 99) 3px 0px inset; }
.choice.correct { background: rgb(225, 244, 232); border-color: rgb(8, 114, 99); }
.choice.wrong { background: rgb(255, 240, 242); border-color: rgb(174, 48, 68); }
.choice:disabled { opacity: 1; }
.choice:disabled:not(.correct):not(.wrong) { color: rgb(82, 105, 97); background: rgb(242, 245, 241); }
.choice-state { display: block; font-size: 12px; font-weight: 700; color: rgb(8, 114, 99); margin-bottom: 4px; }
.choice.wrong .choice-state { color: rgb(174, 48, 68); }
.choice.correct.wrong { background: rgb(225, 244, 232); border-color: rgb(8, 114, 99); }
.choice.correct.wrong .choice-state { color: rgb(8, 114, 99); }
.choice:hover, .choice:disabled:hover { transform: none; box-shadow: none; }
@media (hover: hover) {
.choice:not(:disabled):hover { border-color: rgb(8, 114, 99); background: rgb(238, 248, 241); }
}
.action-row { position: sticky; bottom: 0px; z-index: 6; gap: 12px; padding: 16px 24px max(16px,env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 0px 0px 0px 16px; }
.action-row .primary-btn { min-height: 52px; min-width: 180px; margin-left: auto; }
.action-row > span { font-size: 11px; }
.feedback { grid-template-columns: 32px minmax(0px, 1fr); gap: 12px; padding: 20px; margin: 4px 24px 24px; box-shadow: none; scroll-margin-block: 20px; }
.feedback-icon { width: 32px; height: 32px; box-shadow: none; }
.feedback h2 { font-size: 19px; line-height: 1.65; }
.feedback p { font-size: 15px; line-height: 1.95; }
.feedback-label { font-size: 11px !important; }
.consequence { font-size: 13px; line-height: 1.85; padding: 12px; border-radius: 8px; }
#choiceNotes { display: grid; gap: 12px; padding-top: 8px; }
#detailBox > summary { font-size: 15px; min-height: 48px; }
.choice-rationale, .choice-rationale:first-child, .choice-rationale:last-child { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: rgb(255, 255, 255); }
.choice-rationale.is-correct { background: rgb(237, 247, 238); border-color: rgb(138, 182, 161); }
.choice-rationale header { font-size: 14px; align-items: flex-start; }
.choice-rationale header b { flex: 1 1 0%; min-width: 0px; }
.choice-rationale header i { flex-shrink: 0; }
.choice-rationale header span { flex-basis: 100%; font-size: 12px; background: none; color: var(--muted); }
.choice-rationale p { font-size: 15px; line-height: 2; margin: 12px 0px 0px; }
.explanation-sources { font-size: 12px; line-height: 1.9; }
.learning-trust { padding: 16px 24px; font-size: 12px; line-height: 1.9; color: var(--muted); border-top: 1px solid var(--line); }
.learning-trust p { margin: 0px; }
.trust-link, .report-link { min-height: 44px; font-size: 12px; cursor: pointer; background: none; border: 0px; color: rgb(40, 108, 96); text-decoration: underline; text-underline-offset: 4px; padding: 8px 0px; text-align: left; }
.status-strip { padding: 18px 24px; gap: 24px; background: rgb(12, 36, 42); box-shadow: none; }
.condition-line { flex-wrap: wrap; gap: 4px 12px; }
.condition-line strong { font-size: 18px; }
.condition-line span, .health-wrap > div:first-child { font-size: 12px; }
.vitals { gap: 20px; }
.vitals span, .vitals small { font-size: 11px; color: rgb(177, 201, 198); }
.vitals strong { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 700; font-stretch: normal; font-size: 27px; line-height: 1.5; font-family: monospace; color: var(--accent); }
.health-track { height: 7px; }
.health-wrap small { font-size: 11px; }
.self-panel { grid-area: 1 / 2 / 3; display: block; padding: 24px 18px; background: rgb(234, 241, 236); border-left: 1px solid var(--line); border-radius: 0px 0px 16px; }
.self-heading h2 { font-size: 18px; }
.avatar-stage { box-shadow: none; }
.clinical-card p, .record-item p, .record-entry, .disease-episodes p { font-size: 13px; line-height: 1.85; }
.simulator-note, .empty-record, .record-item small, .record-item b { font-size: 12px; line-height: 1.85; }
.symptom-chips span { font-size: 12px; }
#anatomyJump { position: static; display: none; min-height: 48px; width: 100%; margin: 0px; border-radius: 10px; background: rgb(23, 61, 64); color: rgb(180, 239, 223); border: 1px solid rgb(65, 105, 108); padding: 10px 14px; box-shadow: none; font-size: 13px; }
.damage-impact { display: none; }
.danger-flash, .status-strip.vital-alarm { animation: 0.5s ease-out 0s 1 normal none running monitor-feedback; }
.feedback.show { animation: 0.35s ease-out 0s 1 normal none running answer-feedback; }
@keyframes monitor-feedback { 
  50% { opacity: 0.65; }
}
@keyframes answer-feedback { 
  0% { opacity: 0.25; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
.scan-line { animation: auto ease 0s 1 normal none running none; opacity: 0.15; }
.pulse-dot { animation: auto ease 0s 1 normal none running none; }
body:has(.feedback:not(.show)) .avatar-stage * { animation-play-state: paused !important; }
.result-modal, .report-modal, .mypage { background: rgba(2, 14, 19, 0.863); backdrop-filter: none; overscroll-behavior: contain; }
.result-modal { padding: 16px; overflow: auto; align-items: safe center; }
.result-card { width: min(640px, 100%); padding: 30px; max-height: calc(100dvh - 32px); overflow-y: auto; border-radius: 16px; }
.result-card h2 { font-size: 26px; line-height: 1.55; }
.result-card p { font-size: 14px; line-height: 1.9; }
.result-summary { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; margin: 20px 0px; }
.result-summary div { border: 1px solid var(--line); padding: 14px 6px; }
.result-summary span { display: block; font-size: 11px; color: var(--muted); }
.result-summary b { display: block; font-size: 22px; color: rgb(8, 114, 99); }
.result-stats { font-size: 13px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.result-actions #retryButton { grid-area: 1 / 1 / auto / -1; }
.result-actions button { min-height: 52px; font-size: 14px; }
.analytics h3 { font-size: 14px; }
.analytic-row { font-size: 12px; grid-template-columns: minmax(0px, 1fr) 80px 36px; }
.report-card h2 { padding-right: 34px; }
.report-card label { font-size: 14px; }
.report-question, .report-note, .report-status { font-size: 12px; line-height: 1.85; }
.how-panel h3 { font-size: 16px; }
.usage-notice p { font-size: 15px; line-height: 2; }
.how-panel > p:last-child { font-size: 13px; line-height: 1.9; }
.how-panel { z-index: 190; }
.mypage-nav button { font-size: 14px; }
.category-summary h4 { font-size: 14px; }
.category-score { font-size: 13px; grid-template-columns: minmax(0px, 1fr) 110px 40px; line-height: 1.8; }
.history-entry b { font-size: 14px; line-height: 1.85; }
.history-entry small, .history-entry time, .history-toolbar span { font-size: 12px; line-height: 1.8; }
.ranking-tabs, .admin-tabs { flex-wrap: wrap; overflow: visible; }
.account-form label { font-size: 14px; }
.danger-zone p { font-size: 13px; line-height: 1.9; }
.auth-lead { font-size: 14px; }
.auth-card label { font-size: 13px; }
.auth-note, .auth-message { font-size: 12px; line-height: 1.85; }
.auth-note { color: rgb(177, 201, 198); }
.pin-wrap { grid-template-columns: minmax(0px, 1fr) auto; }
.battle-screen { background: rgb(237, 243, 238); }
.battle-question { font-size: 21px; line-height: 1.95; }
.battle-rules ul { font-size: 14px; line-height: 1.95; }
.battle-review article, .battle-history article { padding: 16px; border: 1px solid var(--line); background: white; border-radius: 10px; margin-top: 12px; font-size: 15px; line-height: 1.95; }
.battle-review summary { min-height: 48px; font-size: 15px; }
.battle-choice.is-correct > span:first-child::after { content: "○"; color: rgb(8, 114, 99); }
.battle-choice.is-wrong > span:first-child::after { content: "×"; color: rgb(174, 48, 68); }
.battle-choice.is-correct > span:first-child, .battle-choice.is-wrong > span:first-child { height: 48px; }
.premium-toast, .network-toast { bottom: calc(90px + env(safe-area-inset-bottom)); right: 16px; max-width: calc(-32px + 100vw); border-radius: 10px; pointer-events: none; }
.premium-toast b { font-size: 13px; }
.premium-toast span { font-size: 12px; }
.legal-note { line-height: 1.9; margin: 24px auto; padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 1100px) {
.title-content { gap: 32px; }
.game-grid { grid-template-columns: minmax(0px, 1fr) 280px; }
.status-strip { gap: 16px; }
.self-panel { padding: 20px 14px; }
.question-body { padding: 24px; }
.shift { display: none; }
.case-meta { flex-wrap: wrap; }
}
@media (max-width: 760px) {
.title-screen { padding: 0 max(16px,env(safe-area-inset-left)); }
.title-top { padding: 12px 0px; }
.title-copy h1 { margin: 16px 0px 0px; }
.title-support { display: block; }
.title-actions { margin: 16px 0px; }
.shift-setup { margin-top: 20px; }
.shift-setup-content { padding: 0px 12px 14px; }
.shift-setup > summary { padding: 14px; }
.mode-card { padding: 12px 7px; }
.mode-card b, .mode-card small { font-size: 11px; }
.category-picker { grid-template-columns: 1fr; gap: 4px; }
.daily-challenge, .battle-launch, .official-pdf-library { padding: 18px; }
.title-footer { padding: 20px 0px; }
.app-shell { width: 100%; margin: 0px; display: flex; flex-direction: column; min-height: 100dvh; }
.app-shell.game-hidden { display: none; }
.topbar { padding: 10px 12px; min-height: 64px; gap: 8px; flex-wrap: wrap; border-radius: 0px; order: 0; }
.brand { gap: 7px; }
.brand-mark { width: 32px; height: 36px; font-size: 22px; }
.brand strong { font-size: 14px; letter-spacing: 0.06em; }
.brand small { font-size: 10px; }
.end-shift-btn { font-size: 11px; padding: 8px; margin-left: auto; }
.account-chip { order: 4; min-width: 44px; justify-content: center; }
.account-chip span, .account-chip small { display: none; }
.icon-btn { order: 5; }
.premium-player, .shift { display: none; }
.game-grid { display: contents; }
.side-panel { order: 1; padding: 12px 16px; gap: 8px 14px; }
.side-panel .case-meta { flex-basis: 100%; order: 3; gap: 8px; width: 100%; }
.side-panel .case-meta div:first-child { flex: 1 1 0%; }
.side-panel .case-meta div { padding: 0px; }
.case-meta dt { font-size: 10px; margin: 0px; }
.case-meta dd { font-size: 12px; }
.side-panel .text-btn { margin-left: auto; font-size: 11px; }
.side-panel > .progress-track { order: 4; }
.case-number strong { font-size: 24px; }
.question-panel { order: 2; border-radius: 0px; }
.question-head { padding: 12px 16px; }
.question-head .instruction { flex-basis: 100%; order: 4; font-size: 12px; }
.source-badge { max-width: calc(100% - 54px); font-size: 11px; }
.mastery-tag { font-size: 10px; }
.question-panel.mastered::before { display: none; }
.question-body { padding: 22px 16px 20px; }
.question-body h1 { line-height: 1.95; margin-bottom: 24px; }
.case-context p { font-size: 16px; }
.choice, .battle-choice { font-size: 16px; line-height: 1.85; min-height: 62px; padding: 14px 12px; gap: 10px; }
.choice-index { width: 28px; height: 28px; }
.action-row { padding: 12px 16px max(12px,env(safe-area-inset-bottom)); border-radius: 0px; }
.action-row > span { display: none; }
.action-row .primary-btn { width: 100%; min-width: 0px; margin: 0px; min-height: 54px; font-size: 16px; }
.feedback { grid-template-columns: minmax(0px, 1fr); margin: 0px 12px 20px; padding: 16px; gap: 8px; }
.feedback-icon { width: 28px; height: 28px; }
.feedback h2 { font-size: 18px; }
.choice-rationale { padding: 14px; }
.learning-trust { padding: 16px; }
.status-strip { order: 3; grid-template-columns: 1fr; padding: 20px 16px; gap: 16px; }
.self-panel { order: 4; border-radius: 0px; padding: 24px 16px; border-left: 0px; }
.vitals { gap: 12px; justify-content: space-between; }
.vitals strong { font-size: 28px; }
#anatomyJump { display: block; flex-basis: 100%; order: 5; }
.result-card { padding: 24px 18px; }
.result-card h2 { font-size: 24px; }
.result-actions { grid-template-columns: 1fr; }
.result-actions #retryButton { grid-area: 1 / 1; }
.result-actions #reviewButton { grid-row: 2; }
.result-actions #resultHomeButton { grid-row: 3; }
.analytic-row { grid-template-columns: minmax(0px, 1fr) 60px 36px; }
.category-score { grid-template-columns: minmax(0px, 1fr) 40px; gap: 5px 10px; }
.category-score > span { grid-column: 1 / -1; }
.ranking-row { grid-template-columns: 28px minmax(0px, 1fr) 48px 48px; gap: 6px; padding: 12px 8px; }
.ranking-name { font-size: 12px; }
.mypage-nav { flex-wrap: wrap; overflow: visible; }
.mypage-main { padding-bottom: max(24px,env(safe-area-inset-bottom)); }
.battle-screen { padding: max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom)); }
.battle-question { font-size: 18px; }
.battle-choice { font-size: 16px; }
.battle-round { gap: 8px; font-size: 13px; }
.battle-review { padding: 16px; }
.legal-note { padding-bottom: max(24px,env(safe-area-inset-bottom)); font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: auto; }
body { padding-bottom: 0px; }
.topbar, .action-row, #anatomyJump { backdrop-filter: none; }
.topbar { position: relative; top: auto; }
body.critical .app-shell, body.blur .question-body { animation: auto ease 0s 1 normal none running none !important; }
body.hypoxia .question-panel { filter: none; }
.choice::after { display: none; }
.mobile-anatomy-jump.has-symptom { animation: auto ease 0s 1 normal none running none; }
#anatomyJump b { display: inline-grid; margin-right: 8px; background: rgb(51, 90, 88); color: rgb(212, 244, 231); vertical-align: middle; }
body:has(#resultModal:not([hidden])) .premium-toast { display: none; }
.title-screen :focus-visible, .auth-gate :focus-visible, .topbar :focus-visible { outline-color: rgb(182, 248, 231); }
.choice:focus-visible, .primary-btn:focus-visible { outline: rgb(8, 114, 99) solid 3px; outline-offset: 3px; }
@media (max-width: 760px) {
.brand small { display: block; }
.action-row { scroll-margin-block: 0px; }
.title-content { padding-top: 24px; }
}
@media (max-width: 760px) {
.status-strip .vitals { display: flex; }
.question-head .instruction { display: block; }
.result-summary span { font-size: 11px; letter-spacing: 0px; }
}
.choice-rationale p { color: rgb(49, 79, 80); }
.choice-rationale header { color: rgb(25, 56, 60); }
.feedback p { color: rgb(49, 79, 80); }
.feedback .feedback-label { color: rgb(160, 45, 64); }
.feedback.correct-feedback .feedback-label { color: rgb(8, 114, 99); }
.empty-record { color: rgb(93, 115, 117); }
.avatar-callout span { max-width: 120px; }
.question-head .instruction { color: rgb(83, 108, 112); }
.result-card.death #resultEyebrow { color: rgb(113, 82, 130); }
@media (min-width: 761px) {
.action-row { position: static; }
}
.action-row:has(#submitButton:not([hidden]):disabled) { position: static; }
:root { --ui-space: 16px; --ui-radius: 14px; --ui-dark-border: #395d63; --ui-dark-muted: #b2cac5; }
.title-copy h1 { font-family: "Noto Sans JP", "Noto Sans JP", sans-serif; font-size: clamp(72px, 8vw, 110px); white-space: nowrap; letter-spacing: -0.055em; }
.title-content { gap: 56px; align-items: start; }
.title-top > span:first-child { font-family: "Noto Sans JP", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; }
.title-kicker { font-family: "Noto Sans JP", sans-serif; font-size: 11px; }
.welcome-user { font-size: 11px; font-weight: 500; color: var(--ui-dark-muted); }
.title-top .title-account-actions button { font-weight: 500; }
.title-metrics { gap: 24px; padding: 16px 0px; margin: 20px 0px 0px; border-top: 1px solid var(--ui-dark-border); }
.title-metric { padding-left: 0px; border: 0px; }
.title-metric span { font-family: "Noto Sans JP", sans-serif; font-size: 10px; letter-spacing: 0.1em; }
.title-metric b { font-family: "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 600; }
.last-result { margin-top: 12px; font-family: inherit; font-size: 11px; }
.last-result b { font-weight: 500; }
.title-footer { font-family: inherit; font-weight: 400; letter-spacing: 0px; line-height: 1.9; }
.title-support .daily-challenge, .title-support .battle-launch, .title-support .official-pdf-library { border-color: var(--ui-dark-border); border-radius: var(--ui-radius); }
.title-support .daily-challenge h2, .title-support .battle-launch h2 { font-size: 19px; line-height: 1.6; }
.title-support .daily-challenge p, .title-support .battle-launch p { font-size: 13px; font-weight: 400; }
.title-support .daily-challenge button, .title-support .battle-launch button { font-weight: 600; }
.title-support .official-pdf-library { padding-block: 12px; }
.official-pdf-library summary { display: block; list-style: none; padding: 8px 0px; }
.official-pdf-library summary::before { content: "＋"; margin-right: 10px; }
.official-pdf-library[open] summary::before { content: "−"; }
.official-pdf-library summary span { display: block; margin-left: 24px; margin-top: 5px; }
.mode-card { border-radius: 10px; }
.shift-setup-content { padding-top: 4px; }
.question-source-options label { min-height: 70px; }
.title-copy .how-btn { background: transparent; border-color: rgb(52, 86, 92); color: rgb(193, 215, 209); font-weight: 500; }
.question-head .mastery-tag { font-family: inherit; font-size: 11px; letter-spacing: 0px; }
.question-body h1 { letter-spacing: 0px; font-weight: 600; }
.question-panel .choice { font-weight: 400; }
.question-panel .choice-index { font-family: inherit; font-weight: 600; }
.question-panel .feedback h2 { font-weight: 700; }
.feedback .choice-rationale p { font-weight: 400; }
.question-panel .source-badge { font-weight: 500; }
.learning-trust { font-weight: 400; }
.question-panel .instruction { letter-spacing: 0px; }
.mypage-shell { border: 1px solid rgb(66, 101, 106); }
.mypage-side { background: rgb(16, 43, 49); }
.mypage-side .mypage-identity small { font-size: 10px; letter-spacing: 0.03em; color: rgb(170, 198, 192); }
.mypage-main { background: rgb(244, 248, 243); }
.mypage-nav button { font-weight: 500; line-height: 1.7; }
.profile-metric { border-radius: 12px; box-shadow: none; }
.profile-metric b { font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.profile-metric span { font-family: inherit; font-size: 11px; }
.history-entry { box-shadow: none; padding: 16px; }
.history-entry b { font-weight: 500; }
.history-entry time { font-family: inherit; }
.ranking-row { box-shadow: none; }
.mypage-close, .report-close, #howClose { border-radius: 10px; background: rgb(232, 240, 233); font-size: 24px; }
@media (max-width: 760px) {
.title-content { padding: 24px 0px; }
.title-copy h1 { font-size: clamp(53px, 17.5vw, 88px); }
.title-top > span:first-child { font-size: 9px; line-height: 1.7; max-width: 100px; letter-spacing: 0.05em; }
.title-kicker { font-size: 10px; letter-spacing: 0.035em; }
.title-kicker i { width: 18px; margin-right: 7px; }
.title-actions { margin-bottom: 12px; }
.start-btn { font-size: 17px; font-weight: 700; min-height: 66px; }
.title-support { margin-top: 22px; }
.title-support .daily-challenge { margin-top: 0px; }
.title-metrics { gap: 26px; padding-top: 14px; margin-top: 18px; }
.title-metric b { font-size: 21px; }
.title-metric span { font-size: 9px; }
.last-result { margin: 10px 0px 0px; }
.mypage-shell { border: 0px; }
.mypage-main { padding-top: 26px; }
.mypage-nav button { font-size: 12px; }
.question-body h1 { font-size: 18px; }
.question-head { gap: 8px; }
.question-head .source-badge { max-width: calc(100% - 56px); }
}
body:has(#titleScreen:not([hidden])) .premium-toast { display: none; }
.result-sponsor { margin-top: 40px; padding-top: 16px; border-top: 1px solid rgb(220, 230, 226); text-align: center; }
.result-sponsor-label { display: block; color: rgb(96, 117, 112); font-size: 10px; margin-bottom: 4px; }
.result-sponsor a { display: flex; align-items: center; justify-content: center; min-height: 44px; max-width: 320px; margin: 0px auto; color: rgb(83, 106, 100); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.result-sponsor a:focus-visible { outline: rgb(8, 114, 99) solid 2px; outline-offset: 3px; }
.study-home { margin-top: 20px; }
.study-kicker { font-size: 11px; letter-spacing: 0.16em; color: rgb(65, 109, 105); }
.study-home p, .study-dialog p { font-size: 13px; line-height: 1.8; }
.study-actions { flex-wrap: wrap; }
.study-home button, .study-dialog button, .study-question button { background: rgb(23, 94, 88); color: white; border: 0px; border-radius: 9px; padding: 11px 15px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; cursor: pointer; }
.study-home button:disabled { opacity: 0.5; cursor: default; }
.study-dialog { overflow: auto; }
.study-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.study-dialog h3 { margin-top: 28px; }
.study-dialog select { max-width: 100%; color: rgb(23, 61, 59); }
.study-map-row { display: grid; align-items: center; border-bottom: 1px solid rgb(217, 230, 227); }
.study-map-row small, .study-saved-row small { display: block; margin-top: 5px; }
.study-map-row progress { display: block; width: 100%; }
.study-saved-row { border-bottom: 1px solid rgb(217, 230, 227); overflow-wrap: anywhere; }
.study-saved-row p { white-space: pre-line; }
.study-saved-row blockquote { margin: 10px 0px; white-space: pre-wrap; }
.study-saved-row button { margin-top: 12px; }
.study-question fieldset { border: 0px; padding: 0px; margin: 0px; }
.study-question legend small { color: rgb(101, 123, 118); }
.study-question [data-confidence] { background: rgb(240, 245, 243); color: rgb(49, 93, 84); border: 1px solid rgb(183, 204, 197); }
.study-question [aria-pressed="true"] { background: rgb(23, 94, 88); color: white; border-color: rgb(23, 94, 88); }
.study-question button:disabled { cursor: default; opacity: 0.7; }
.study-question details { font-size: 13px; margin-top: 12px; }
.study-question summary { cursor: pointer; }
.study-question label { display: block; margin: 8px 0px; }
.study-question textarea { display: block; box-sizing: border-box; width: 100%; padding: 12px; border: 1px solid rgb(183, 204, 197); border-radius: 9px; font: inherit; background: rgb(255, 255, 255); color: rgb(23, 61, 59); resize: vertical; margin-bottom: 10px; }
.study-question #studySchedule, .study-question #studySaveStatus { font-size: 12px; line-height: 1.7; }
.study-home button:focus-visible, .study-dialog button:focus-visible, .study-question button:focus-visible { outline: rgb(225, 163, 59) solid 3px; outline-offset: 3px; }
@media (max-width: 540px) {
.study-dialog { padding: 18px; }
.study-map-row { grid-template-columns: minmax(0px, 1fr) 70px; gap: 10px; }
.study-map-row button { grid-column: 1 / -1; justify-self: start; }
.study-actions { flex-direction: column; }
.study-home { padding: 18px; }
.study-dialog h2 { font-size: 18px; }
}
.study-home { border: 1px solid rgb(57, 93, 99); border-radius: 14px; background: rgb(16, 44, 50); color: rgb(230, 242, 238); margin: 16px 0px 0px; padding: 20px; }
.study-home .study-kicker { color: rgb(157, 223, 207); font: 600 10px / 1.7 "Noto Sans JP", sans-serif; letter-spacing: 0.14em; }
.study-home h2 { font-size: 19px; line-height: 1.6; margin: 8px 0px; color: rgb(230, 242, 238); }
.study-home p { font-size: 13px; font-weight: 400; line-height: 1.9; color: rgb(178, 202, 197); margin: 8px 0px 16px; }
.study-actions { display: grid; grid-template-columns: minmax(0px, 1fr); gap: 8px; }
.study-home button { min-height: 48px; padding: 12px 14px; font-size: 14px; font-weight: 600; border-radius: 10px; border: 1px solid rgb(99, 139, 137); background: rgb(25, 59, 64); color: rgb(185, 242, 223); }
.study-home #studyStart:not(:disabled) { background: rgb(139, 230, 207); color: rgb(9, 46, 41); border-color: rgb(139, 230, 207); }
.study-home #studyStart:disabled { background: transparent; border-color: rgb(57, 93, 99); color: rgb(178, 202, 197); opacity: 1; cursor: default; font-weight: 400; font-size: 12px; }
.study-home :focus-visible { outline: rgb(170, 242, 223) solid 3px; outline-offset: 3px; }
.study-dialog { width: min(900px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0px 28px 28px; border: 1px solid rgb(155, 186, 176); box-shadow: rgba(0, 0, 0, 0.267) 0px 24px 64px; overscroll-behavior: contain; }
.study-dialog::backdrop { background: rgba(3, 19, 24, 0.863); }
.study-dialog > header { position: sticky; top: 0px; z-index: 3; padding: 22px 0px 16px; background: rgb(246, 249, 243); gap: 18px; border-bottom: 1px solid rgb(201, 219, 206); }
.study-dialog .study-kicker { font-size: 10px; letter-spacing: 0.12em; color: rgb(82, 115, 107); }
.study-dialog h2 { font-size: 23px; line-height: 1.6; margin: 5px 0px 0px; padding: 0px; font-weight: 700; }
.study-dialog #studyClose { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0px; border: 1px solid rgb(182, 204, 190); border-radius: 10px; background: rgb(230, 239, 229); color: rgb(38, 78, 68); font-size: 24px; }
.study-dialog > p, .study-dialog section > p { font-size: 14px; line-height: 1.9; }
.study-dialog label { display: grid; grid-template-columns: 130px minmax(0px, 1fr); gap: 12px; align-items: center; font-size: 13px; margin: 16px 0px; max-width: 500px; }
.study-dialog select { min-width: 0px; width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; border: 1px solid rgb(171, 198, 181); background: rgb(255, 255, 255); border-radius: 10px; }
.study-jump { position: sticky; top: 103px; z-index: 2; display: flex; gap: 8px; padding: 12px 0px; background: rgb(246, 249, 243); }
.study-jump button { flex: 1 1 0%; min-height: 46px; border: 1px solid rgb(174, 197, 181); border-radius: 10px; background: rgb(231, 240, 230); color: rgb(33, 79, 66); font-weight: 600; font-size: 13px; }
.study-dialog section { padding-top: 8px; }
.study-dialog h3 { font-size: 20px; line-height: 1.6; margin: 24px 0px 12px; }
.study-dialog #studySavedSection { border-top: 1px solid rgb(185, 206, 191); margin-top: 28px; }
.study-dialog button { min-height: 44px; font-size: 13px; line-height: 1.7; touch-action: manipulation; }
.study-map-row { grid-template-columns: minmax(0px, 1fr) 100px 110px; gap: 16px; padding: 16px; border: 1px solid rgb(205, 222, 208); border-radius: 12px; background: white; margin: 10px 0px; }
.study-map-row b { font-size: 14px; font-weight: 600; line-height: 1.7; }
.study-map-row small, .study-saved-row small { font-size: 12px; line-height: 1.8; color: rgb(82, 108, 95); }
.study-map-row > div { min-width: 0px; overflow-wrap: anywhere; }
.study-map-row button { background: rgb(232, 243, 232); color: rgb(29, 96, 75); border: 1px solid rgb(171, 201, 181); font-weight: 600; }
.study-map-row progress { height: 7px; accent-color: rgb(40, 125, 93); margin-top: 8px; }
.study-saved-row { border: 1px solid rgb(199, 218, 203); border-radius: 12px; padding: 18px; background: white; margin: 12px 0px; }
.study-saved-row p { font-size: 15px; line-height: 1.95; color: rgb(41, 74, 64); }
.study-saved-row blockquote { padding: 14px; font-size: 14px; line-height: 1.9; border-left: 3px solid rgb(120, 168, 139); border-radius: 6px; background: rgb(239, 245, 236); }
.study-question { margin: 22px 0px 0px; padding: 18px 0px 0px; border-top: 1px solid rgb(207, 221, 208); color: rgb(54, 86, 74); }
.study-question legend { font-size: 13px; line-height: 1.8; font-weight: 500; margin-bottom: 12px; }
.study-question legend small { font-size: 11px; }
.study-question button { min-height: 44px; font-size: 13px; line-height: 1.7; border-radius: 10px; padding: 11px 15px; }
.study-question [data-confidence] { min-width: 100px; margin-right: 8px; font-weight: 500; }
.study-question [data-confidence][aria-pressed="true"] { box-shadow: rgb(23, 94, 88) 0px 0px 0px 2px inset; background: rgb(223, 238, 224); color: rgb(23, 75, 54); font-weight: 700; }
.study-question [data-confidence][aria-pressed="true"]::before { content: "✓ "; font-weight: 700; }
.study-question summary { min-height: 44px; padding: 10px 0px; color: rgb(65, 103, 89); line-height: 1.8; }
.study-question label { font-size: 13px; line-height: 1.85; }
.study-question textarea { font-size: 16px; line-height: 1.8; }
.study-question #studySchedule:empty { display: none; }
.study-question #studySaveStatus { display: block; margin-top: 8px; }
.study-dialog :focus-visible, .study-question :focus-visible { outline: rgb(8, 114, 99) solid 3px; outline-offset: 3px; }
@media (max-width: 600px) {
.study-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 0 16px max(20px,env(safe-area-inset-bottom)); border-radius: 14px; scroll-padding-top: 160px; }
.study-dialog > header { padding: 16px 0px 12px; gap: 12px; }
.study-dialog h2 { font-size: 19px; }
.study-dialog .study-kicker { font-size: 9px; }
.study-jump { top: 91px; padding: 10px 0px; }
.study-jump button { font-size: 12px; padding: 10px; }
.study-dialog > p, .study-dialog section > p { font-size: 13px; }
.study-dialog label { grid-template-columns: 1fr; gap: 6px; max-width: none; }
.study-dialog section { scroll-margin-top: 155px; }
.study-dialog h3 { font-size: 18px; }
.study-map-row { grid-template-columns: minmax(0px, 1fr) 70px; gap: 12px; padding: 14px; }
.study-map-row button { grid-column: 1 / -1; width: 100%; justify-self: stretch; }
.study-map-row b { font-size: 13px; }
.study-map-row small { font-size: 11px; }
.study-saved-row { padding: 14px; }
.study-home { padding: 18px; }
.study-question [data-confidence] { min-width: 0px; max-width: calc(50% - 12px); padding: 10px 14px; }
.study-question legend small { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.study-dialog *, .study-home *, .study-question * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; scroll-behavior: auto !important; }
}
.study-dialog .study-jump { position: relative; top: auto; }
.study-dialog { scroll-padding-top: 130px; }
.study-dialog section { scroll-margin-top: 130px; }
.friends-intro, .friends-empty { color: rgb(82, 110, 115); line-height: 1.8; }
.friends-own { padding: 16px; background: rgb(237, 247, 243); border: 1px solid rgb(212, 227, 221); border-radius: 12px; overflow-wrap: anywhere; }
.friends-own strong { display: block; margin-top: 6px; color: rgb(8, 115, 107); }
.friends-form { margin-top: 24px; }
.friends-form label { display: block; margin-bottom: 10px; }
.friends-form > div { display: flex; gap: 8px; }
.friends-form input { min-width: 0px; flex: 1 1 0%; padding: 12px; background: rgb(255, 255, 255); border: 1px solid rgb(138, 166, 163); border-radius: 8px; color: rgb(18, 60, 64); font: inherit; }
.friends-form button, .friends-toolbar button, .friend-actions button { padding: 10px 14px; border: 1px solid rgb(100, 119, 136); border-radius: 8px; background: rgb(32, 53, 68); color: rgb(236, 245, 249); font: inherit; cursor: pointer; }
.friends-form button, .friend-actions [data-friend-action="accept"] { background: rgb(162, 236, 217); color: rgb(16, 40, 32); border-color: rgb(8, 115, 107); }
.friends-toolbar { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 14px 0px; }
.friends-toolbar p { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.friends-toolbar button { flex-shrink: 0; }
.friends-group { margin: 24px 0px; }
.friends-group h4 { display: flex; gap: 10px; align-items: center; }
.friends-group h4 span { font-size: 12px; color: rgb(8, 115, 107); }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0px; border-bottom: 1px solid rgb(212, 227, 221); }
.friend-identity { min-width: 0px; overflow-wrap: anywhere; }
.friend-identity small { display: block; color: rgb(82, 110, 115); margin-top: 5px; }
.friend-actions { display: flex; gap: 6px; flex-shrink: 0; }
.friends-empty { font-size: 14px; }
.mypage-panel[data-panel="friends"] button:disabled { opacity: 0.5; cursor: wait; }
.mypage-panel[data-panel="friends"] :focus-visible { outline: rgb(162, 236, 217) solid 2px; outline-offset: 3px; }
@media (max-width: 480px) {
.friends-form > div { flex-direction: column; }
.friend-row { align-items: flex-start; flex-direction: column; }
.friend-actions { align-self: flex-end; }
}
.friend-presence { font-size: 12px; color: rgb(82, 110, 115); }
.friend-presence.is-online { color: rgb(8, 115, 107); font-weight: 700; }
.social-lobby { text-align: left; margin-top: 28px; padding: 20px; border: 1px solid rgb(189, 219, 213); border-radius: 14px; background: rgb(241, 248, 245); color: rgb(18, 60, 64); }
.social-lobby .friend-row { gap: 12px; }
.social-lobby button { flex-shrink: 0; }
.social-lobby-status, .social-action-status { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.social-invitation-notice { position: fixed; right: 16px; bottom: 16px; z-index: 165; max-width: calc(-32px + 100vw); padding: 12px 16px; border: 1px solid rgb(8, 115, 107); border-radius: 12px; background: rgb(213, 245, 235); color: rgb(18, 60, 64); box-shadow: rgba(9, 38, 43, 0.133) 0px 4px 18px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.social-invitation-notice[hidden] { display: none; }
.social-lobby button:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 480px) {
.social-lobby { padding: 14px; }
.social-lobby .friend-row > button { align-self: flex-end; }
}
.mypage:not([hidden]) ~ .social-invitation-notice { display: none; }
.game-lounge { padding: 0px max(24px, -600px + 50vw); min-height: 100svh; overflow: hidden; }
.game-lounge .title-top { padding: 18px 0px; gap: 18px; max-width: none; width: 100%; letter-spacing: 0px; min-height: 76px; }
.game-lounge .title-top > span:first-child { font: 700 20px / 1.4 "Noto Sans JP", "Noto Sans JP", sans-serif; max-width: none; }
.game-lounge .title-account-actions { gap: 8px; flex-wrap: wrap; }
.game-lounge .title-ranking-btn { min-height: 44px; font-size: 12px; padding: 9px 14px; backdrop-filter: none; }
.game-lounge .title-content { display: grid; grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr); gap: 48px; align-items: start; max-width: none; padding: 34px 0px 28px; flex: 1 1 0%; }
.game-lounge .title-copy { padding: 18px 0px 0px; }
.game-lounge .title-kicker { font: 700 12px / 1.7 "Noto Sans JP", sans-serif; margin: 0px; }
.game-lounge .title-copy h1 { font: 700 clamp(60px, 6.9vw, 94px) / 1.12 "Noto Sans JP", "Noto Sans JP", sans-serif; white-space: nowrap; margin: 10px 0px 0px; }
.game-lounge .welcome-user { color: rgb(82, 108, 96); font-family: inherit; font-size: 12px; margin-top: 10px; }
.game-lounge .welcome-user b { color: rgb(41, 75, 70); }
.game-lounge .title-support { padding: 0px; margin: 0px; min-width: 0px; }
.home-section-label { margin: 0px 0px 16px; }
.game-lounge .shift-setup { margin: 0px 0px 14px; overflow: hidden; }
.game-lounge .shift-setup > summary { padding: 12px 14px; min-height: 62px; gap: 10px; }
.game-lounge .shift-setup > summary b { font-size: 12px; }
.game-lounge .shift-setup > summary::after { font-size: 21px; }
.game-lounge #setupSummary { font-size: 12px; }
.game-lounge .shift-setup-content { padding: 0px 14px 16px; }
.game-lounge .title-actions { margin: 0px; gap: 12px; display: grid; }
.game-lounge #startGame { position: relative; display: block; width: 100%; padding: 13px 20px; text-align: center; margin: 0px; transition: transform 0.15s, box-shadow 0.15s; }
.game-lounge #startGame small { font: 700 10px / 1.5 "Noto Sans JP", sans-serif; margin: 0px 0px 2px; display: block; }
.game-lounge #startGame b { position: absolute; right: 20px; top: 24px; font-size: 26px; }
.game-lounge .how-btn { min-height: 38px; background: none; border: 0px; border-radius: 8px; box-shadow: none; font-size: 12px; padding: 6px; margin-top: 4px; line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; }
.home-modes { display: grid; grid-template-columns: 1fr 1fr; min-width: 0px; }
.game-lounge .home-modes > section { margin: 0px; min-width: 0px; display: flex; flex-direction: column; }
.game-lounge .home-modes h2 { line-height: 1.6; margin: 0px; }
.game-lounge .home-modes p { line-height: 1.85; font-weight: 400; margin: 4px 0px 8px; }
.game-lounge .daily-challenge p:last-child { display: none; }
.game-lounge .home-modes .study-kicker, .game-lounge .home-modes .battle-kicker { display: none; }
.game-lounge .home-modes button { min-height: 44px; line-height: 1.7; padding: 10px; margin: 0px; width: 100%; }
.game-lounge .home-modes .daily-challenge button { margin-top: auto; }
.game-lounge .home-modes .study-actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.game-lounge .home-modes #studyStart:disabled { background: none; border: 0px; box-shadow: none; min-height: 0px; padding: 0px; font-size: 11px; font-weight: 400; }
.game-lounge .home-modes .battle-launch { grid-column: 1 / -1; display: grid; align-items: center; }
.game-lounge .home-modes .battle-launch p { margin: 3px 0px 0px; }
.game-lounge .home-modes #openBattleButton { padding: 12px 14px; font-size: 13px; }
.game-lounge #openBattleButton span { margin-right: 0px; margin-left: 12px; float: none; }
.home-record { padding-top: 12px; }
.game-lounge .title-metrics { display: flex; justify-content: space-between; gap: 12px; padding: 0px; margin: 0px; border: 0px; }
.game-lounge .title-metric { margin: 0px; padding: 0px; border: 0px; min-width: 0px; }
.game-lounge .title-metric span { font-family: inherit; letter-spacing: 0px; }
.game-lounge .title-metric b { font: 700 20px / 1.6 "Noto Sans JP", sans-serif; margin: 2px 0px 0px; }
.game-lounge .last-result { font: 400 11px / 1.8 "Noto Sans JP", sans-serif; color: rgb(87, 112, 93); margin: 10px 0px 0px; gap: 5px 12px; }
.game-lounge .last-result b { color: rgb(73, 101, 80); font-weight: 500; }
.home-resources { margin-top: 20px; }
.game-lounge .title-search-intro { position: static; font: 400 12px / 1.9 "Noto Sans JP", sans-serif; letter-spacing: 0px; margin: 0px 0px 12px; }
.game-lounge .title-search-intro a { font-size: 12px; text-underline-offset: 3px; }
.game-lounge .official-pdf-library { padding: 8px 14px; margin: 0px; box-shadow: none; }
.game-lounge .official-pdf-library summary { font-size: 12px; min-height: 40px; font-weight: 600; }
.game-lounge .official-pdf-library summary span { font-size: 11px; }
.game-lounge .official-pdf-library p, .game-lounge .official-pdf-year h3 { font-size: 12px; }
.game-lounge .title-footer { padding: 18px 0px; font-size: 10px; font-family: inherit; letter-spacing: 0px; }

.game-lounge .question-source legend, .game-lounge .setup-label { font-size: 13px; }
.game-lounge .question-source-options small, .game-lounge #questionSourceNotice, .game-lounge .year-publication-note { font-size: 12px; }
.game-lounge .category-picker select { border: 1px solid rgb(159, 185, 160); min-height: 44px; }
.game-lounge .mode-card { border: 1px solid rgb(157, 182, 159); min-height: 94px; }
.game-lounge :focus-visible { outline: rgb(148, 112, 18) solid 3px; outline-offset: 4px; }
.brand-mark { box-shadow: none; }
.question-panel .choice-index { border: 1px solid rgb(187, 203, 179); }
.question-panel .choice.correct { border-color: rgb(73, 134, 106); background: rgb(232, 244, 223); }
.question-panel .choice.wrong { border-color: rgb(180, 105, 112); background: rgb(255, 239, 240); }
.action-row { background: rgb(246, 248, 239); }
.result-summary div { background: rgb(242, 244, 230); }
.result-actions .secondary-btn { border: 1px solid rgb(170, 192, 168); background: rgb(232, 238, 224); color: rgb(56, 91, 66); }
.auth-grid { display: none; }
.auth-card { position: relative; max-width: 460px; padding: 28px; }
.auth-card .auth-brand { color: var(--game-ink); font-size: 30px; }
.auth-card .auth-brand span { color: var(--game-ink); }
.auth-card h1 { margin-top: 24px; color: var(--game-ink); }
.auth-card input { border: 1px solid rgb(157, 182, 158); }
.auth-submit { font-weight: 700; }
.legal-note { font-size: 11px; }
@media (hover: hover) {

}
@media (max-width: 1000px) and (min-width: 761px) {
.game-lounge .title-content { gap: 24px; grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 1.2fr); }
.game-lounge .title-copy h1 { font-size: 60px; }
.home-console { padding: 18px; }
.game-lounge .home-modes .battle-launch { grid-template-columns: 1fr; }
.game-lounge .home-modes #openBattleButton { width: 100%; }
}
@media (max-width: 760px) {
.game-lounge { padding: 0 max(16px,env(safe-area-inset-left)); }
.game-lounge .title-top { min-height: 66px; padding: 12px 0px; gap: 8px; flex-wrap: wrap; }
.game-lounge .title-top > span:first-child { max-width: none; letter-spacing: 0px; }
.game-lounge .title-top .title-account-actions { gap: 6px; flex-wrap: wrap; margin-left: auto; }
.game-lounge .title-account-actions .title-ranking-btn { font-size: 11px; padding: 8px; min-height: 40px; border-radius: 8px; box-shadow: 0 2px var(--game-ink); }
.game-lounge .title-content { display: flex; flex-direction: column; padding: 20px 0px 24px; }
.game-lounge .title-copy { width: 100%; display: flex; flex-direction: column; }
.game-lounge .title-kicker { white-space: nowrap; }
.game-lounge .title-copy h1 { margin: 6px 0px 0px; letter-spacing: -0.06em; }
.game-lounge .welcome-user { font-size: 10px; margin: 6px 0px 0px; line-height: 1.7; }
.game-lounge .title-support { width: 100%; margin: 14px 0px 0px; display: block; }
.game-lounge #startGame { padding: 12px 16px; }
.game-lounge #startGame b { font-size: 22px; right: 18px; top: 26px; }
.game-lounge .shift-setup > summary { padding: 10px 12px; min-height: 59px; }
.game-lounge #setupSummary { font-size: 11px; }
.game-lounge .how-btn { font-size: 11px; }
.home-modes { margin-top: 10px; }
.game-lounge .home-modes > section { gap: 3px; }
.game-lounge .home-modes p { line-height: 1.85; }
.game-lounge .home-modes button { padding: 10px 7px; min-height: 44px; }
.game-lounge .home-modes #openBattleButton { min-height: 46px; }
.home-record { margin-top: 16px; padding-top: 12px; }
.game-lounge .title-metrics { gap: 8px; }
.game-lounge .title-metric span { font-size: 10px; }
.game-lounge .last-result { font-size: 10px; }
.home-resources { margin-top: 20px; }
.game-lounge .title-search-intro { font-size: 11px; }
.game-lounge .title-footer { font-size: 10px; }
.game-lounge .question-source-options b { font-size: 12px; }
.game-lounge .mode-card { padding: 10px 6px; }
.app-shell { border-radius: 0px; box-shadow: none; }
.auth-card { padding: 26px 22px; }
.auth-card h1 { font-size: 20px; }
.auth-gate { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.game-lounge *, .game-lounge ::before, .game-lounge ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important; }
}
:root { --game-ink: #b9d5cf; --game-cream: #102326; --game-yellow: #a3d1c6; --game-teal: #79b8ab; --game-line: #345355; }
html, body { background: rgb(7, 19, 22); }
.game-lounge { color: rgb(217, 231, 226); }
.game-lounge .title-top { border-bottom: 1px solid rgb(48, 76, 80); color: rgb(184, 205, 200); }
.game-lounge .title-top > span:first-child { color: rgb(184, 205, 200); font-size: 16px; letter-spacing: 0.12em; font-weight: 700; }
.game-lounge .title-ranking-btn { border: 1px solid rgb(70, 97, 102); color: rgb(189, 209, 204); border-radius: 4px; box-shadow: none; font-weight: 500; }
.game-lounge .title-copy { text-align: left; }
.game-lounge .title-kicker { font-size: 11px; letter-spacing: 0.12em; }
.game-lounge .title-copy h1 { text-shadow: none; letter-spacing: -0.04em; font-weight: 700; }
.game-lounge .welcome-user, .game-lounge .welcome-user b { font-weight: 400; }
.home-console { border: 1px solid rgb(61, 92, 96); border-radius: 6px; padding: 24px; }
.home-section-label { font-size: 13px; letter-spacing: 0.08em; color: rgb(182, 205, 197); font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid rgb(48, 77, 80); }
.game-lounge .shift-setup { background: rgb(10, 29, 33); border: 1px solid rgb(54, 87, 90); border-radius: 4px; }
.game-lounge .shift-setup > summary b { color: rgb(183, 203, 197); font-weight: 500; }
.game-lounge .shift-setup > summary::after { color: rgb(131, 185, 173); font-weight: 400; }
.game-lounge #setupSummary { color: rgb(128, 158, 149); }
.game-lounge .shift-setup-content { border-color: rgb(54, 87, 90); }
.game-lounge #startGame { color: rgb(12, 44, 43); border: 1px solid rgb(163, 209, 198); border-radius: 4px; box-shadow: none; font-size: 23px; font-weight: 700; min-height: 78px; letter-spacing: 0.03em; }
.game-lounge #startGame small { font-weight: 500; font-size: 10px; letter-spacing: 0.18em; }
.game-lounge #startGame:active { transform: translateY(1px); box-shadow: none; }
.game-lounge #startGame b { font-weight: 400; }
.game-lounge .how-btn { color: rgb(141, 169, 159); font-weight: 400; text-decoration-color: rgb(66, 104, 90); }
.home-modes { gap: 0px; border-top: 1px solid rgb(53, 83, 87); margin-top: 18px; }
.game-lounge .home-modes > section { border: 0px; border-radius: 0px; box-shadow: none; background: none; padding: 18px 12px 16px 0px; gap: 4px; }
.game-lounge .home-modes > .study-home { padding-left: 18px; border-left: 1px solid rgb(53, 83, 87); }
.game-lounge .home-modes h2 { font-size: 16px; letter-spacing: 0.015em; color: rgb(198, 217, 209); font-weight: 600; }
.game-lounge .home-modes p { color: rgb(143, 169, 159); font-size: 12px; }
.game-lounge .home-modes button { border: 1px solid rgb(76, 110, 105); border-radius: 4px; box-shadow: none; color: rgb(178, 214, 200); font-size: 12px; font-weight: 500; }
.game-lounge .home-modes #studyStart:disabled { color: rgb(135, 165, 153); }
.game-lounge .home-modes #studyStart:not(:disabled) { color: rgb(196, 223, 210); }
.game-lounge .home-modes .battle-launch { background: none; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(53, 83, 87) currentcolor currentcolor; border-image: none; border-radius: 0px; padding: 18px 0px 0px; box-shadow: none; grid-template-columns: minmax(0px, 1fr) auto; gap: 16px; }
.game-lounge .home-modes .battle-launch h2 { color: rgb(201, 220, 210); font-size: 16px; }
.game-lounge .home-modes .battle-launch p { color: rgb(143, 169, 159); font-size: 12px; }
.game-lounge .home-modes #openBattleButton { color: rgb(187, 217, 203); border: 1px solid rgb(85, 121, 111); border-radius: 4px; box-shadow: none; min-width: 126px; }
.home-record { border-top: 1px solid rgb(53, 83, 87); margin-top: 22px; }
.game-lounge .title-metric span { color: rgb(129, 157, 145); font-size: 10px; }
.game-lounge .title-metric b { color: rgb(186, 213, 199); font-size: 20px; font-weight: 500; }
.game-lounge .last-result, .game-lounge .last-result b { color: rgb(131, 158, 146); font-weight: 400; }
.game-lounge .title-search-intro { color: rgb(111, 145, 134); text-align: left; }
.game-lounge .title-search-intro a { color: rgb(145, 180, 166); }
.game-lounge .official-pdf-library { border: 1px solid rgb(48, 78, 78); border-radius: 4px; background: none; }
.game-lounge .official-pdf-library summary { color: rgb(156, 185, 170); }
.game-lounge .official-pdf-library summary span { color: rgb(120, 153, 140); }
.game-lounge .official-pdf-library p, .game-lounge .official-pdf-year h3 { color: rgb(155, 182, 166); }
.game-lounge .official-pdf-year a { background: rgb(25, 54, 49); color: rgb(177, 211, 191); border-color: rgb(65, 102, 90); }
.game-lounge .title-footer { border-color: rgb(47, 77, 73); color: rgb(111, 147, 133); }
.game-lounge .question-source legend, .game-lounge .setup-label { color: rgb(170, 198, 185); }
.game-lounge .question-source-options label { background: rgb(16, 42, 40); border-color: rgb(61, 98, 84); }
.game-lounge .question-source-options label:has(input:checked) { background: rgb(37, 72, 62); border-color: rgb(127, 168, 144); }
.game-lounge .question-source-options b { color: rgb(194, 218, 201); }
.game-lounge .question-source-options small, .game-lounge #questionSourceNotice, .game-lounge .year-publication-note { color: rgb(147, 174, 154); }
.game-lounge .category-picker { color: rgb(164, 192, 173); }
.game-lounge .category-picker select { background: rgb(14, 40, 36); color: rgb(193, 216, 198); border-color: rgb(66, 103, 88); border-radius: 4px; }
.game-lounge .mode-card { background: rgb(18, 47, 41); color: rgb(189, 215, 196); border-color: rgb(70, 109, 88); border-radius: 4px; box-shadow: none; }
.game-lounge .mode-card.active { background: rgb(49, 85, 68); border: 1px solid rgb(147, 181, 154); box-shadow: rgb(155, 188, 154) 0px 2px inset; }
.game-lounge .mode-card small, .game-lounge .mode-card em, .game-lounge .mode-card.active small { color: rgb(148, 181, 155); }
.game-lounge input { accent-color: rgb(149, 189, 163); }
.game-lounge :focus-visible { outline-color: rgb(180, 219, 197); }
.app-shell { border: 1px solid rgb(52, 86, 90); box-shadow: none; }
.topbar { background: rgb(11, 33, 39); }
.brand-mark { background: rgb(37, 74, 78); color: rgb(194, 219, 209); border-radius: 4px; }
.question-panel .choice { border: 1px solid rgb(174, 191, 183); border-radius: 6px; box-shadow: none; background: rgb(251, 252, 248); }
.question-panel .choice-index { border-radius: 4px; background: rgb(237, 242, 235); color: rgb(54, 89, 74); }
.question-panel .choice.selected { background: rgb(228, 241, 231); border-color: rgb(68, 136, 107); box-shadow: rgb(68, 136, 107) 3px 0px inset; }
.question-panel .choice.selected .choice-index { background: rgb(33, 93, 75); color: rgb(255, 255, 255); border-color: rgb(33, 93, 75); }
.action-row .primary-btn, .result-actions .primary-btn { background: rgb(23, 62, 66); color: rgb(233, 244, 233); border: 1px solid rgb(23, 62, 66); box-shadow: none; border-radius: 5px; font-weight: 600; }
.action-row .primary-btn:disabled { background: rgb(217, 227, 220); color: rgb(101, 120, 110); border-color: rgb(188, 205, 192); box-shadow: none; }
.action-row .primary-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.result-card { border: 1px solid rgb(117, 149, 144); background: rgb(246, 248, 243); box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px; }
.result-summary div { border-radius: 6px; }
.result-actions .secondary-btn { box-shadow: none; border-radius: 5px; }
.auth-gate { background: radial-gradient(at right top, rgb(29, 62, 66), transparent 65%), rgb(8, 25, 29); color: rgb(214, 230, 219); }
.auth-card { border: 1px solid rgb(69, 102, 106); color: rgb(214, 230, 219); box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 50px; }
.auth-card .auth-brand, .auth-card .auth-brand span, .auth-card h1 { color: rgb(199, 221, 210); }
.auth-lead, .auth-card label, .auth-note, .auth-switch { color: rgb(155, 185, 171); }
.auth-card input { background: rgb(10, 33, 38); color: rgb(208, 227, 213); border-color: rgb(66, 103, 93); }
.auth-submit { background: rgb(153, 200, 183); color: rgb(16, 46, 41); border: 1px solid rgb(153, 200, 183); box-shadow: none; border-radius: 4px; }
.auth-switch button { color: rgb(173, 212, 188); }
.pin-wrap button { background: rgb(25, 59, 53); color: rgb(190, 220, 202); border-color: rgb(70, 110, 90); }
.auth-note { border-color: rgb(53, 91, 73); }
.auth-card h1 { padding-right: 0px; }
.auth-card :focus-visible { outline-color: rgb(173, 212, 188); }
.auth-message { color: rgb(255, 171, 182); }
.legal-note { color: rgb(131, 166, 151); }
@media (hover: hover) {
.game-lounge .title-ranking-btn:hover { transform: none; }
.game-lounge #startGame:hover { transform: none; }
.game-lounge .home-modes button:not(:disabled):hover { filter: none; transform: none; }
}
@media (max-width: 760px) {
.game-lounge .title-top .title-ranking-btn { box-shadow: none; border-radius: 4px; }
.game-lounge .title-top > span:first-child { font-size: 14px; }
.game-lounge .title-copy { padding-right: 124px; }
.game-lounge .title-copy h1 { font-weight: 700; }
.home-console { padding: 16px; border-radius: 5px; box-shadow: none; }
.home-section-label { font-size: 12px; margin-bottom: 12px; padding-bottom: 12px; }
.game-lounge #startGame { min-height: 72px; font-size: 21px; border-radius: 4px; }
.home-modes { gap: 0px; }
.game-lounge .home-modes > section { padding: 15px 10px 15px 0px; }
.game-lounge .home-modes > .study-home { padding-left: 12px; }
.game-lounge .home-modes h2 { font-size: 14px; }
.game-lounge .home-modes p { font-size: 11px; }
.game-lounge .home-modes button { font-size: 11px; }
.game-lounge .home-modes .battle-launch { grid-template-columns: 1fr; gap: 10px; padding: 16px 0px 0px; }
.game-lounge .home-modes .battle-launch h2 { font-size: 15px; }
.game-lounge .home-modes .battle-launch p { font-size: 11px; }
.game-lounge .home-modes #openBattleButton { font-size: 13px; }
.game-lounge .title-metric b { font-size: 18px; }
.app-shell { border: 0px; }
.auth-card { border-radius: 6px; }
}
.game-lounge, .game-lounge button, .game-lounge select, .auth-card, .auth-card button { font-family: "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; }
.game-lounge { isolation: isolate; position: relative; background: rgb(4, 18, 30) !important; }
.dive-scene { position: absolute; inset: 0px; overflow: hidden; pointer-events: none; z-index: 0; background: radial-gradient(at 24% -15%, rgb(61, 131, 148) 0px, transparent 43%), radial-gradient(at 30% 45%, rgb(18, 67, 84) 0px, transparent 53%), linear-gradient(165deg, rgb(16, 43, 59), rgb(4, 18, 30) 70%); }
.dive-scene::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(1, 12, 22, 0.667), transparent 17%, transparent 42%, rgba(2, 14, 25, 0.467) 70%), radial-gradient(at 25% 70%, transparent 8%, rgba(2, 11, 23, 0.267) 75%); z-index: 4; }
.dive-scene::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(0deg, rgb(4, 18, 30), transparent 28%); z-index: 5; }
.dive-rays { position: absolute; left: -15%; top: -30%; width: 95%; height: 150%; background: conic-gradient(from 166deg at 45% 0%, transparent 0deg, rgba(134, 214, 220, 0.063) 5deg, transparent 10deg, rgba(169, 231, 226, 0.09) 15deg, transparent 20deg, rgba(101, 197, 216, 0.07) 26deg, transparent 33deg); transform-origin: 45% 0px; animation: 22s ease-in-out 0s infinite alternate none running dive-rays; }
.dive-current { position: absolute; left: -8%; top: -800px; width: 66%; height: 2400px; background: repeating-radial-gradient(at 52% 50%, transparent 0px, transparent 128px, rgba(131, 189, 205, 0.047) 130px, rgba(131, 189, 205, 0.047) 132px, transparent 136px, transparent 246px); transform: rotate(-12deg); animation: 32s linear 0s infinite normal none running dive-current; opacity: 0.8; }
.dive-current-near { left: -25%; width: 100%; opacity: 0.34; animation-duration: 19s; background: repeating-linear-gradient(172deg, transparent 0px, transparent 320px, rgba(140, 219, 223, 0.14) 322px, transparent 324px, transparent 640px); mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 47%, rgb(0, 0, 0)); }
.dive-depth { position: absolute; left: 9%; top: -600px; width: 1px; height: 2400px; background: repeating-linear-gradient(transparent 0px, transparent 98px, rgba(145, 205, 209, 0.224) 99px, rgba(145, 205, 209, 0.224) 100px); animation: 25s linear 0s infinite normal none running dive-current; }
.dive-depth::after { content: ""; position: absolute; inset: 0px; width: 20px; background: repeating-linear-gradient(transparent 0px, transparent 198px, rgba(145, 205, 209, 0.224) 199px, rgba(145, 205, 209, 0.224) 200px); }
.game-lounge .title-copy { padding-right: 0px; position: relative; text-shadow: rgb(0, 19, 28) 0px 2px 18px; }
.game-lounge .title-copy h1 { font-size: clamp(60px, 6.9vw, 94px); color: rgb(229, 241, 239); }
.game-lounge .title-copy h1 span { color: rgb(174, 216, 215); }
.game-lounge .title-kicker { color: rgb(168, 204, 207); }
.game-lounge .welcome-user, .game-lounge .welcome-user b { color: rgb(168, 198, 199); }
.home-console { background: rgba(11, 32, 40, 0.93); border-color: rgba(84, 120, 129, 0.5); box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 70px; }
.home-resources { background: rgba(7, 26, 35, 0.74); padding: 14px; border-radius: 4px; }
@keyframes dive-current { 
  100% { translate: 0px -640px; }
}
@keyframes dive-rays { 
  100% { transform: rotate(7deg); opacity: 0.6; }
}
@media (max-width: 760px) {
.game-lounge .title-copy { padding: 6px 0px 0px; text-align: left; }
.game-lounge .title-copy h1 { font-size: clamp(46px, 13vw, 76px); }
.game-lounge .title-kicker { font-size: 10px; letter-spacing: 0.1em; }
.dive-current { width: 135%; left: -25%; }
.dive-current-near { width: 180%; left: -40%; }
.dive-rays { width: 180%; left: -35%; }
.home-resources { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.dive-scene * { animation: auto ease 0s 1 normal none running none !important; }
}
@media (max-width: 760px) {
.game-lounge .title-copy { justify-content: flex-start; }
}
.dive-cg { position: absolute; left: 3%; top: 260px; width: 46%; height: 490px; z-index: 3; pointer-events: none; }
.dive-cg canvas { display: block; width: 100%; height: 100%; }
@media (min-width: 761px) and (max-width: 1000px) {
.dive-cg { left: 0px; width: 44%; top: 230px; height: 420px; }
}
@media (max-width: 760px) {
.dive-cg { left: 0px; top: 190px; width: 100%; height: 270px; }
}
.game-lounge #startGame { background: rgba(163, 209, 198, 0.8); }
.game-lounge .title-ranking-btn { background: rgba(13, 34, 38, 0.7); }
.game-lounge .home-modes button { background: rgba(25, 54, 53, 0.7); }
.game-lounge .home-modes #studyStart:not(:disabled) { background: rgba(37, 73, 65, 0.75); }
.game-lounge .home-modes #openBattleButton { background: rgba(37, 71, 68, 0.7); }
@media (hover: hover) {
.game-lounge #startGame:hover { background: rgba(184, 222, 209, 0.9); }
.game-lounge .title-ranking-btn:hover { background: rgba(23, 59, 61, 0.85); }
.game-lounge .home-modes button:not(:disabled):hover { background: rgba(43, 81, 70, 0.85); }
}
.game-lounge .title-copy { min-height: 0px; }
@media (max-width: 760px) {
.game-lounge .title-copy { min-height: 0px; padding-bottom: 0px; }
.game-lounge .title-content { gap: 20px; }
}
.game-lounge .title-copy { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.game-lounge .dive-cg { position: relative; inset: auto; width: 100%; height: 360px; flex-shrink: 0; order: 10; margin-top: 12px; overflow: hidden; z-index: 0; pointer-events: none; }
@media (max-width: 760px) {
  .game-lounge .dive-cg { height: 220px; margin-top: 8px; }
}
.game-lounge .home-console { background: rgba(11, 32, 40, 0.6); }
:root { --nd-bg: #061620; --nd-panel: #102630; --nd-line: #3c5c65; --nd-text: #dce9e7; --nd-muted: #a4bdbe; --nd-accent: #a3d1c6; }
body { background: var(--nd-bg); }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel, #battleScreen, .auth-card, .app-shell) { font-family: "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) :focus-visible { outline: 3px solid var(--nd-accent); outline-offset: 3px; }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) { --ink: var(--nd-text); --muted: var(--nd-muted); --line: var(--nd-line); --teal: var(--nd-accent); color: var(--nd-text); color-scheme: dark; }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) :is(input, select, textarea) { background: rgb(8, 28, 37); color: var(--nd-text); border: 1px solid var(--nd-line); border-radius: 4px; accent-color: var(--nd-accent); }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) :is(input, textarea)::placeholder { color: rgb(142, 171, 173); }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) button { border-radius: 4px; box-shadow: none; font-family: inherit; min-height: 44px; }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) .primary-btn { background: rgba(163, 209, 198, 0.88); color: rgb(16, 44, 48); border: 1px solid var(--nd-accent); }
:is(.mypage, .study-dialog, .result-card, .report-card, .how-panel) .secondary-btn { background: rgba(34, 67, 66, 0.7); color: rgb(208, 229, 223); border: 1px solid rgb(82, 121, 115); }
.mypage { background: rgba(3, 17, 26, 0.81); backdrop-filter: blur(6px); }
.mypage .mypage-shell { background: radial-gradient(ellipse at 0 0,#183b47,transparent 70%),var(--nd-bg); border: 1px solid var(--nd-line); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.333) 0px 24px 80px; color: var(--nd-text); }
.mypage .mypage-side { background: rgba(9, 30, 40, 0.85); border-right: 1px solid var(--nd-line); }
.mypage .mypage-main { background: transparent; }
.mypage .mypage-home { background: transparent; border: 0px; padding: 0px; color: rgb(220, 233, 231); font: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.mypage .mypage-home:hover { color: rgb(163, 209, 198); }
.mypage .mypage-avatar { background: rgb(35, 77, 84); color: rgb(218, 238, 231); border: 1px solid rgb(86, 126, 129); }
.mypage :is(.mypage-identity small, .mypage-kicker, .history-toolbar span, .history-entry small, .history-entry time, .ranking-rule, .ranking-row small, .ranking-personal > small) { color: var(--nd-muted); }
.mypage .mypage-nav button { color: var(--nd-muted); font-size: 13px; font-weight: 500; }
.mypage .mypage-nav button.active { background: rgba(163, 209, 198, 0.1); color: rgb(228, 241, 237); border-color: var(--nd-accent); }
.mypage :is(.mypage-close, .mypage-logout) { color: var(--nd-muted); }
.mypage :is(.profile-metric, .history-entry, .ranking-row, .ranking-loading, .ranking-notice, .ranking-personal, .friends-own, .admin-answer, .admin-question, .admin-users) { background: rgba(17, 43, 53, 0.7); border-color: var(--nd-line); border-radius: 4px; color: var(--nd-text); box-shadow: none; }
.mypage :is(.profile-metric b, .ranking-rank, .ranking-row .challenge-score b, .ranking-personal > strong, .friends-own strong, .friends-group h4 span, .friend-presence.is-online) { color: rgb(180, 218, 207); }
.mypage .profile-metric span { color: var(--nd-muted); font-size: 10px; }
.mypage .category-score div { background: rgb(32, 60, 70); }
.mypage .category-score i { background: rgb(138, 189, 180); }
.mypage .ranking-row.is-me { background: rgb(28, 59, 64); border-color: rgb(126, 174, 166); box-shadow: rgb(163, 209, 198) 3px 0px inset; }
.mypage :is(.ranking-tabs, .admin-tabs) button { background: rgb(17, 43, 53); color: var(--nd-muted); border-color: var(--nd-line); font-size: 12px; }
.mypage :is(.ranking-tabs, .admin-tabs) button.active { background: rgba(163, 209, 198, 0.8); color: rgb(14, 41, 43); border-color: rgb(163, 209, 198); }
.mypage :is(.friends-intro, .friends-empty, .friend-identity small, .friend-presence, .history-empty) { color: var(--nd-muted); }
.mypage .friend-row { border-color: var(--nd-line); }
.mypage :is(.friends-form button, .friends-toolbar button, .friend-actions button) { background: rgba(37, 71, 68, 0.7); color: rgb(204, 229, 220); border-color: rgb(82, 121, 115); }
.mypage .danger-zone { background: rgb(48, 37, 45); border-color: rgb(131, 87, 96); border-radius: 4px; }
.mypage .danger-zone p { color: rgb(214, 187, 194); }
.mypage .danger-zone h4 { color: rgb(255, 193, 199); }
.mypage .danger-zone button { background: rgb(67, 42, 51); color: rgb(255, 193, 199); border-color: rgb(166, 107, 120); }
.mypage .history-entry > i { background: rgb(72, 44, 53); color: rgb(255, 192, 197); }
.mypage .history-entry.ok > i { background: rgb(37, 68, 62); color: rgb(189, 230, 214); }
.study-dialog { background: rgb(12, 33, 43); border-color: var(--nd-line); border-radius: 6px; color: var(--nd-text); }
.study-dialog > header, .study-dialog .study-jump { background: rgb(12, 33, 43); border-color: var(--nd-line); }
.study-dialog :is(h2, h3, .study-map-row b, .study-saved-row p) { color: var(--nd-text); }
.study-dialog :is(.study-kicker, small, section > p) { color: var(--nd-muted); }
.study-dialog :is(button, #studyClose, .study-jump button, .study-map-row button) { background: rgba(37, 71, 68, 0.7); border: 1px solid rgb(82, 121, 115); color: rgb(204, 229, 220); border-radius: 4px; }
.study-dialog :is(.study-map-row, .study-saved-row) { background: rgba(17, 45, 55, 0.7); border-color: var(--nd-line); border-radius: 4px; }
.study-dialog .study-saved-row blockquote { background: rgb(26, 55, 64); border-color: rgb(136, 184, 174); color: rgb(201, 220, 218); border-radius: 3px; }
.study-dialog #studySavedSection { border-color: var(--nd-line); }
#battleScreen { --match-bg: #061620; --match-surface: #102630; --match-line: #3c5c65; --match-text: #dce9e7; --match-muted: #a4bdbe; --match-accent: #a3d1c6; background: radial-gradient(ellipse at 20% 0,#1b414f,transparent 65%),var(--nd-bg); }
#battleScreen :is(.battle-card, .battle-rules, .battle-lobby, .battle-scoreboard article, .battle-history > details, .battle-question-card, .battle-review, .battle-countdown) { border-radius: 6px; box-shadow: none; }
#battleScreen :is(.battle-card, .battle-rules, .battle-scoreboard article, .battle-countdown) { background: rgba(16, 38, 48, 0.81); border-color: var(--nd-line); }
#battleScreen :is(.battle-primary, .battle-quiet, .battle-choice) { border-radius: 4px; }
#battleScreen .battle-primary { background: rgba(163, 209, 198, 0.85); color: rgb(16, 44, 48); }
#battleScreen .battle-quiet { background: rgba(27, 56, 63, 0.7); border-color: rgb(77, 112, 118); }
#battleScreen .social-lobby { background: rgba(16, 38, 48, 0.81); border-color: var(--nd-line); color: var(--nd-text); border-radius: 6px; }
#battleScreen .social-lobby :is(.friend-presence, .friend-identity small) { color: var(--nd-muted); }
.app-shell { background: rgb(11, 33, 43); border-color: var(--nd-line); }
.app-shell .topbar { background: rgba(10, 32, 42, 0.85); border-color: var(--nd-line); }
.app-shell :is(.status-strip, .side-panel, .self-panel) { background: rgb(16, 38, 48); color: var(--nd-text); border-color: var(--nd-line); }
.app-shell :is(.side-panel, .status-strip, .self-panel) :is(.eyebrow, small, dt, .condition-line > span) { color: var(--nd-muted); }
.app-shell :is(.condition-line strong, .vitals strong, .case-number strong, .case-meta dd, .self-heading h2) { color: rgb(220, 233, 231); }
.app-shell .streak-card { background: rgb(25, 53, 62); border-color: var(--nd-line); color: rgb(199, 223, 216); }
.app-shell .side-panel .text-btn { color: rgb(185, 214, 205); }
.app-shell .question-panel { background: rgb(243, 246, 243); border-radius: 4px; }
.app-shell :is(.primary-btn, .secondary-btn, .choice, .study-question button, .study-question textarea) { border-radius: 4px; box-shadow: none; }
.app-shell .action-row .primary-btn:not(:disabled) { background: rgb(35, 71, 68); color: rgb(228, 241, 236); border-color: rgb(85, 121, 111); }
.app-shell .action-row .secondary-btn { background: rgb(225, 236, 231); color: rgb(33, 72, 66); border-color: rgb(137, 170, 160); }
:is(.result-modal, .report-modal) { background: rgba(3, 17, 26, 0.81); backdrop-filter: blur(6px); }
.result-card, .report-card, .game-lounge .how-panel { background: radial-gradient(at 0px 0px, rgb(27, 59, 70), transparent 75%), rgb(11, 32, 42); color: var(--nd-text); border: 1px solid var(--nd-line); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.333) 0px 24px 80px; }
:is(.result-card, .report-card, .how-panel) :is(h2, h3, strong) { color: var(--nd-text); }
:is(.result-card, .report-card, .how-panel) :is(.eyebrow, .report-question, .report-note, .usage-notice p, .usage-notice li) { color: var(--nd-muted); }
.result-card :is(.result-stats, .result-summary > div) { background: rgb(21, 49, 58); border-color: var(--nd-line); color: var(--nd-muted); border-radius: 4px; }
.result-card :is(.result-stats b, .result-summary b) { color: rgb(201, 227, 215); }
.result-card #resultMessage { color: rgb(184, 206, 204); }
.report-card :is(.report-close, .report-status) { color: rgb(189, 219, 210); }
.game-lounge .how-panel :is(p, li, li span) { color: rgb(185, 206, 206); }
.game-lounge .how-panel :is(.usage-notice, li) { background: transparent; border-color: var(--nd-line); }
.game-lounge .how-panel a { color: rgb(184, 224, 214); }
.auth-card { background: rgba(16, 38, 48, 0.91); border-color: var(--nd-line); border-radius: 6px; }
.auth-card input, .auth-card button { border-radius: 4px; }
@media (max-width: 700px) {
.mypage .mypage-shell { border: 0px; border-radius: 0px; }
.mypage .mypage-side { border-right: 0px; border-bottom: 1px solid var(--nd-line); }
.mypage .mypage-home { font-size: 18px; }
.mypage .mypage-nav button { font-size: 12px; }
}
@media (hover: hover) {
.mypage .mypage-nav button:hover { background: rgba(163, 209, 198, 0.08); color: rgb(228, 241, 237); }
.study-dialog button:hover { background: rgb(49, 86, 79); }
}
.mypage .history-empty { background: rgba(17, 43, 53, 0.7); border: 1px solid var(--nd-line); border-radius: 4px; color: var(--nd-muted); }
.mypage .mypage-close { background: rgb(27, 56, 63); border: 1px solid rgb(77, 112, 118); color: rgb(220, 233, 231); }
.study-dialog > p, .study-dialog section > p { color: var(--nd-muted); }
.how-panel { background: radial-gradient(at 0px 0px, rgb(27, 59, 70), transparent 75%), rgb(11, 32, 42); color: var(--nd-text); border: 1px solid var(--nd-line); border-radius: 6px; }
.how-panel :is(p, li, li span) { color: rgb(185, 206, 206); }
.how-panel :is(.usage-notice, li) { background: transparent; border-color: var(--nd-line); }
.how-panel a { color: rgb(184, 224, 214); }
.how-panel #howClose { background: rgb(27, 56, 63); color: rgb(220, 233, 231); border: 1px solid rgb(77, 112, 118); }

/* Calm Japanese text and compact display lettering. */
:root{--font-ui:'Noto Sans JP','Yu Gothic UI',Meiryo,sans-serif;--font-display:'Barlow Condensed','Noto Sans JP',sans-serif}
body,button,input,select,textarea{font-family:var(--font-ui)}
.game-lounge .title-copy h1{font-family:var(--font-display);font-weight:600;letter-spacing:.045em;line-height:1.05}
.game-lounge .title-top>span:first-child,.mypage .mypage-home,.brand strong,.auth-card .auth-brand{font-family:var(--font-display);font-weight:600;letter-spacing:.09em}
.game-lounge .title-metric b,.mypage .profile-metric b,.case-number strong,.vitals strong,.level-orb,.battle-code,#battleScreen .battle-scoreboard strong,.result-summary b{font-family:var(--font-display);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.015em}
.game-lounge #startGame small,.mypage-kicker,.eyebrow,#battleScreen .battle-kicker,.study-dialog .study-kicker{font-family:var(--font-display);font-weight:500;letter-spacing:.16em}
/* NURDIVE command screen: clear action hierarchy, tactile controls, compact menus. */
:root{--font-ui:'Noto Sans JP','Yu Gothic UI',Meiryo,sans-serif;--font-display:'Barlow Condensed','Noto Sans JP',sans-serif;--nd-accent:#9fcfc8;--nd-line:#35515f;--nd-muted:#aec1c7}
.game-lounge.command-home{padding:0 max(24px,calc((100vw - 1160px)/2));background:#071722!important;color:#e5eef0;min-height:100svh}
.command-home .title-top{min-height:76px;padding:14px 0;border-bottom:1px solid #47677766;align-items:center;gap:12px}
.command-home .title-top>span:first-child{font-size:24px;font-family:var(--font-display);font-weight:600;color:#e4edef;letter-spacing:.09em}
.command-home .title-account-actions{display:flex;gap:8px;flex-wrap:nowrap}
.command-home .title-ranking-btn{margin:0;min-height:42px;padding:9px 16px;border:1px solid #44616e;border-radius:7px;background:#18303bcc;box-shadow:0 2px 0 #041019;color:#d9e7e9;font-size:12px;font-weight:500;letter-spacing:0}
.command-home .title-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(390px,480px);align-items:start;gap:64px;padding:36px 0 28px;width:100%;max-width:none}
.command-home .title-copy{display:flex;position:relative;min-width:0;min-height:570px;padding:8px 0 0;align-items:flex-start;text-align:left}
.command-home .title-kicker{font-family:var(--font-ui);font-size:11px;font-weight:500;color:#a9c4ce;letter-spacing:.12em;white-space:normal;margin:0}
.command-home .title-copy h1{font-family:var(--font-display);font-size:clamp(62px,7vw,100px);font-weight:600;letter-spacing:.055em;line-height:1.05;margin:12px 0 0;color:#f0f3ed;max-width:100%;text-shadow:0 4px 32px #04141c}
.command-home .title-copy h1 span{color:#f0f3ed}
.command-home .welcome-user{position:relative;z-index:1;font-family:var(--font-ui);font-size:12px;color:#a9c4ce;margin:14px 0 0}
.command-home .welcome-user b{color:#e2eded;font-weight:500}
.command-home .dive-cg{position:absolute;inset:140px -30px auto;width:calc(100% + 60px);height:350px;margin:0;z-index:0;overflow:visible;pointer-events:none;opacity:1}
.command-home .home-record{position:absolute;bottom:0;left:0;right:0;z-index:1;border:1px solid #49667255;border-radius:8px;padding:14px 18px;margin:0;background:#0b202bbb;backdrop-filter:blur(8px)}
.command-home .title-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0}
.command-home .title-metric span{font-size:10px;letter-spacing:0;color:#a9bfc5}
.command-home .title-metric b{font-family:var(--font-ui);font-weight:600;font-size:23px;line-height:1.5;color:#e6f0ec;font-variant-numeric:tabular-nums}
.command-home .last-result{margin:8px 0 0;padding-top:8px;border-top:1px solid #49667244;font-size:10px;color:#9eb5bd;gap:10px}
.command-home .last-result b{color:#b5c9cd;font-size:10px}
.command-home .title-support{width:100%;min-width:0;padding:0;margin:0}
.command-home .home-console{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.command-home .home-launch{padding:22px;background:linear-gradient(140deg,#1d3442ed,#102530ed);border:1px solid #526c78;border-radius:11px;box-shadow:0 7px 24px #0002,inset 0 1px #ffffff0d;position:relative}
.command-home .home-section-label{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-ui);font-size:20px;font-weight:700;letter-spacing:.01em;color:#edf3f2;margin:0 0 18px;padding:0;border:0}
.command-home .home-section-label>span{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:#8ba4af;font-weight:500}
.command-home #shiftSetup{background:#081c27b3;border:1px solid #3a5665;border-radius:6px;margin:0 0 16px;overflow:hidden}
.command-home #shiftSetup>summary{padding:12px 14px;min-height:62px;gap:8px}
.command-home #shiftSetup>summary b{font-family:var(--font-ui);font-size:11px;font-weight:500;color:#9bb4c0}
.command-home #setupSummary{font-size:13px;line-height:1.8;color:#e0e9ec}
.command-home #shiftSetup>summary:after{color:#c5d9de;font-size:22px}
.command-home .title-actions{display:flex;flex-direction:column;gap:12px;margin:0}
.command-home #startGame{min-height:66px;padding:16px 42px 16px 18px;font-family:var(--font-ui);font-size:21px;font-weight:700;letter-spacing:.04em;color:#232d33;background:linear-gradient(#eedba9,#d7bc7e);border:1px solid #f5e3b5;border-bottom-color:#b69a62;border-radius:7px;box-shadow:0 4px 0 #86704d,0 8px 18px #0003,inset 0 1px #fff7;transition:background .15s,transform .15s,box-shadow .15s;text-shadow:none}
.command-home #startGame small{display:none}
.command-home #startGame b{top:20px;right:22px;font-size:22px;line-height:1;font-weight:500}
.command-home #startGame:active{transform:translateY(3px);box-shadow:0 1px 0 #86704d}
.command-home .how-btn{align-self:center;min-height:32px;padding:3px 12px;margin:2px 0 0;color:#aebfc7;font-family:var(--font-ui);font-size:11px;border:0;background:none;box-shadow:none;text-decoration:none;line-height:1.7}
.command-home .home-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;border:0}
.command-home .home-modes>section{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px;border:1px solid #3c5967;border-radius:9px;background:#112b38e6;box-shadow:0 3px 0 #04121b;min-width:0;margin:0}
.command-home .home-modes h2{font-family:var(--font-ui);font-size:16px;font-weight:700;line-height:1.5;color:#e1edf0;margin:0 0 6px;padding-right:28px}
.command-home .home-modes p{font-family:var(--font-ui);font-size:11px;color:#a6bdc7;line-height:1.8;margin:0 0 13px}
.command-home .menu-symbol{position:absolute;right:14px;top:16px;width:24px;height:24px;display:grid;place-items:center;color:#8dafc0;pointer-events:none}
.command-home .menu-symbol svg{width:24px;height:24px}
.command-home .home-modes button{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.01em;min-height:42px;border:1px solid #587584;border-bottom-color:#33515f;border-radius:6px;background:linear-gradient(#2a4655,#213c4b);color:#e6eff1;box-shadow:0 2px 0 #051722;padding:10px 12px;line-height:1.6;margin-top:auto;transition:background .15s,transform .15s}
.command-home .home-modes .battle-launch{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px 18px 18px 58px;border-color:#4c7581;background:linear-gradient(110deg,#183a48e6,#102a37ed);box-shadow:0 3px 0 #04121b}
.command-home .battle-launch .menu-symbol{left:18px;right:auto;top:calc(50% - 12px);color:#9dcccf}
.command-home .home-modes .battle-launch h2{font-size:17px;margin:0 0 4px;padding:0;color:#e0eef0}
.command-home .home-modes .battle-launch p{font-size:11px;margin:0;color:#b2c7cf}
.command-home .home-modes #openBattleButton{width:auto;min-width:100px;margin:0;padding:12px 14px;font-size:13px;color:#dcf1ed;background:linear-gradient(#35636b,#294c59);border-color:#638b94;box-shadow:0 2px 0 #102b36}
.command-home #openBattleButton span{margin-left:8px}
.command-home .home-modes .study-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.command-home .home-modes #studyStart:disabled{display:none}
.command-home .home-modes #studyStart:not(:disabled){background:#a0cfc6;color:#163439;border-color:#c0e6d9;box-shadow:0 2px 0 #466b63}
.command-home .home-resources{display:flex;flex-direction:column-reverse;gap:10px;margin:16px 0 0;padding:0;border:0;background:none}
.command-home .official-pdf-library{border:1px solid #3c596766;background:#091e2866;border-radius:6px;padding:4px 12px;margin:0}
.command-home .official-pdf-library summary{font-size:11px;color:#adc4cd;min-height:36px}
.command-home .title-search-intro{font-family:var(--font-ui);font-size:10px;line-height:1.7;margin:0;text-align:center}
.command-home .title-search-intro a{font-size:10px;color:#8eacb8}
.command-home .title-footer{padding:14px 0;border-top:1px solid #39596766;color:#8da8b5;font-size:10px;line-height:1.8;letter-spacing:0}
.command-home :focus-visible{outline:3px solid #f2d49c;outline-offset:4px}
.command-home .dive-scene{background:radial-gradient(ellipse at 20% 12%,#1d465c 0,transparent 55%),linear-gradient(150deg,#0a2534,#071722 70%)}
/* Shared controls: the same shape and typography carry into play and account screens. */
:is(.mypage,.study-dialog,.auth-card,.result-card,.report-card,.how-panel,#battleScreen,.app-shell) button{font-family:var(--font-ui);border-radius:7px}
:is(.mypage,.study-dialog,.auth-card,.result-card,.report-card,.how-panel) .primary-btn,#battleScreen .battle-primary,.app-shell .action-row .primary-btn:not(:disabled){background:linear-gradient(#c1ded4,#9fc7bd);color:#15313a;border:1px solid #cde9df;border-bottom-color:#7baca1;box-shadow:0 3px 0 #476f68;font-weight:700}
:is(.mypage,.study-dialog,.auth-card,.result-card,.report-card,.how-panel) .secondary-btn,#battleScreen .battle-quiet{background:#233e4c;color:#d9e7ed;border:1px solid #557181;box-shadow:0 2px 0 #0a1c27}
#battleScreen .battle-primary:disabled{box-shadow:none;opacity:.5}
.app-shell .question-panel .choice,#battleScreen .battle-choice{border-radius:7px;box-shadow:0 2px 0 #cad7d1}
.app-shell .question-panel .choice.selected,#battleScreen .battle-choice.is-selected{box-shadow:inset 3px 0 #37826b,0 2px 0 #cad7d1}
:is(.mypage,.study-dialog,.result-card,.report-card,.how-panel) :is(h2,h3){font-family:var(--font-ui);font-weight:700;letter-spacing:.01em}
.mypage .profile-metric b,.game-lounge .title-metric b,.result-summary b,#battleScreen .battle-scoreboard strong{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
@media(hover:hover){
 .command-home #startGame:hover{background:linear-gradient(#f6e6bc,#e4cc97);transform:translateY(-1px);box-shadow:0 5px 0 #86704d,0 8px 18px #0003}
 .command-home .title-ranking-btn:hover,.command-home .home-modes button:not(:disabled):hover{background:#345666;color:#f4f8f7}
 .command-home .how-btn:hover{color:#eef4ef;text-decoration:underline}
}
@media(max-width:1000px) and (min-width:761px){
 .game-lounge.command-home{padding:0 24px}.command-home .title-content{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px}.command-home .title-copy h1{font-size:clamp(44px,7.5vw,72px)}.command-home .home-launch{padding:18px}.command-home .home-modes .battle-launch{padding-left:18px;grid-template-columns:1fr auto}.command-home .battle-launch .menu-symbol{display:none}.command-home .home-modes .battle-launch h2{font-size:15px}.command-home .title-metric b{font-size:19px}
}
@media(max-width:760px){
 .game-lounge.command-home{padding:0 16px}.command-home .title-top{min-height:62px;padding:10px 0}.command-home .title-top>span:first-child{font-size:21px}.command-home .title-ranking-btn{padding:8px 12px;font-size:11px;min-height:40px;width:auto}
 .command-home .title-content{display:flex;flex-direction:column;gap:18px;padding:18px 0 20px}.command-home .title-copy{min-height:158px;padding:0;display:flex;flex-direction:column;position:relative}.command-home .title-kicker{font-size:9px;letter-spacing:.08em}.command-home .title-copy h1{font-size:42px;margin:6px 0 0;letter-spacing:.06em;line-height:1}.command-home .welcome-user{font-size:10px;margin:8px 0 0}.command-home .home-record{padding:10px 12px;bottom:0;border-radius:7px;background:#0b202b9c;left:0;right:0}.command-home .title-metrics{gap:8px}.command-home .title-metric span{font-size:9px}.command-home .title-metric b{font-size:18px;line-height:1.35}.command-home .last-result{display:none}
 .command-home .dive-cg{position:absolute;top:-20px;left:30%;width:70%;height:140px;opacity:.9;margin:0;z-index:0}.command-home .title-kicker,.command-home .title-copy h1,.command-home .welcome-user{position:relative;z-index:1}
 .command-home .home-launch{padding:16px;border-radius:9px}.command-home .home-section-label{font-size:17px;margin-bottom:12px}.command-home #shiftSetup{margin-bottom:12px}.command-home #shiftSetup>summary{min-height:54px;padding:8px 12px}.command-home #setupSummary{font-size:12px}.command-home #startGame{min-height:58px;font-size:19px;padding:14px 38px 14px 16px}.command-home #startGame b{top:18px;right:18px;font-size:20px}.command-home .title-actions{gap:8px}.command-home .how-btn{min-height:28px;font-size:10px;padding:0 12px}
 .command-home .home-modes{gap:10px;margin-top:12px}.command-home .home-modes>section{padding:13px}.command-home .home-modes h2{font-size:14px;padding-right:22px;margin-bottom:5px}.command-home .home-modes p{font-size:10px;line-height:1.7;margin-bottom:10px}.command-home .menu-symbol{right:12px;top:13px;width:20px;height:20px}.command-home .menu-symbol svg{width:20px;height:20px}.command-home .home-modes button{font-size:11px;min-height:40px;padding:9px 10px}
 .command-home .home-modes .battle-launch{padding:14px 12px 14px 46px;grid-template-columns:minmax(0,1fr) auto;gap:8px}.command-home .battle-launch .menu-symbol{left:14px;top:calc(50% - 10px)}.command-home .home-modes .battle-launch h2{font-size:15px}.command-home .home-modes .battle-launch p{font-size:10px;line-height:1.65}.command-home .home-modes #openBattleButton{min-width:82px;font-size:12px;padding:10px}.command-home .home-resources{margin-top:12px}.command-home .official-pdf-library summary span{font-size:10px}.command-home .title-footer{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.command-home button{transition:none!important}}
/* Keep the multiplayer destination visually separate without losing button consistency. */
.command-home .home-modes .battle-launch{border:1px solid #4c7581;border-radius:9px}
.command-home .home-modes p{font-size:12px}.command-home .home-modes .battle-launch p{font-size:12px}
.command-home #guestRegisterButton{margin-top:10px;font-size:11px}
@media(max-width:760px){.command-home .title-copy:has(#guestRegisterButton){min-height:206px}.command-home #guestRegisterButton{margin-top:8px;min-height:34px;padding:6px 10px;font-size:10px}.command-home .home-modes p,.command-home .home-modes .battle-launch p{font-size:11px}}
/* Touch targets and secondary copy remain readable on smaller screens. */
.command-home .title-ranking-btn,.command-home .how-btn,.command-home .home-modes button,.command-home #guestRegisterButton,.command-home .official-pdf-library summary{min-height:44px}
.command-home .title-search-intro a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:#afc5ce}
@media(max-width:760px){
 .command-home .title-copy:has(#guestRegisterButton){min-height:230px}
 .command-home .title-kicker,.command-home .title-metric span,.command-home .title-footer{font-size:11px}
 .command-home .welcome-user,.command-home .title-ranking-btn,.command-home .how-btn,.command-home .home-modes button,.command-home .home-modes p,.command-home .home-modes .battle-launch p,.command-home .official-pdf-library summary span{font-size:12px}
 .command-home #guestRegisterButton{min-height:44px;padding:8px 10px;font-size:12px}
 .command-home .how-btn,.command-home .home-modes button,.command-home .title-ranking-btn{min-height:44px}
}

/* Battle question pool preference */
.battle-options{margin-bottom:20px}.battle-options label{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px}.battle-options input[type=checkbox]{appearance:auto;flex:0 0 auto;width:22px;height:22px;min-height:0;margin:0;padding:0;accent-color:#116a55}.battle-options p{font-size:13px;line-height:1.7}


/* Compact solo preference for case-based questions */
.command-home .case-question-setting{display:flex;align-items:center;gap:9px;min-height:44px;margin:8px 0 0;padding:5px 10px;border:1px solid #426758;border-radius:4px;background:rgba(14,40,36,.88);color:#c1d8c6;font-size:12px;line-height:1.45;cursor:pointer}
.command-home .case-question-setting input[type=checkbox]{appearance:auto;flex:0 0 auto;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:#9fbea0;cursor:pointer}
.command-home .case-question-setting span{flex:1;min-width:0}
.command-home .case-question-setting small{flex:0 0 auto;color:#94b59b;font-size:10px;white-space:nowrap}
.command-home .case-question-setting input:focus-visible{outline:2px solid #b6e1c5;outline-offset:3px}

/* Device-local study checkpoint. */
.solo-resume{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;margin-bottom:20px;border:1px solid #6caaa3;border-radius:8px;background:#15373b;color:#e2f1ed}.solo-resume[hidden],.solo-save-notice[hidden]{display:none}.solo-resume p{margin:6px 0}.solo-resume small{color:#bdd9d4}.solo-resume button{flex-shrink:0}.solo-save-notice{color:#a33c2d;background:#fff0db;padding:12px}@media(max-width:480px){.solo-resume{align-items:stretch;flex-direction:column}}

/* Direct access to saved study material. */
.study-saved-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}.study-saved-filters button{border:1px solid #6eaaa3;background:transparent;color:inherit;min-height:44px}.study-saved-filters button[aria-pressed="true"]{background:#b8e1d8;color:#123630;border-color:#b8e1d8}.study-home [data-study-open]{min-height:44px;text-align:left}.study-home [data-study-count]{font-weight:800}

/* Keep expanded study shortcuts balanced with the smaller daily menu. */
.command-home .home-modes .daily-challenge{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding-right:16px}
.command-home .daily-challenge .menu-symbol{display:none}
.command-home .home-modes .daily-challenge h2{padding:0}
.command-home .home-modes .daily-challenge p{margin:0}
.command-home .home-modes .daily-challenge button{margin:0;min-width:100px}
.command-home .home-modes .study-home{grid-column:1/-1}
.command-home .home-modes .study-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.command-home .study-actions #studyOpen,.command-home .study-actions #studyStart{grid-column:1/-1}
.command-home .home-modes .study-actions button{margin:0;text-align:center;overflow-wrap:anywhere}
.command-home .case-question-setting{margin:0 0 14px;border-radius:6px;border-color:#3a5665;background:#0b2430;color:#c9dade}
.command-home .case-question-setting small{color:#a6bdc7}
.command-home .solo-resume{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px;margin:0 0 20px;background:#122e39;border-color:#496b78;border-radius:7px}
.command-home .solo-resume p{margin:4px 0;font-size:12px;line-height:1.6}
.command-home .solo-resume small{font-size:11px;color:#aec5ce}
.command-home .solo-resume button{min-height:44px;padding:10px 12px;border:1px solid #698b96;border-radius:6px;background:#294b59;color:#e5f1f0;font-size:12px;box-shadow:0 2px 0 #071c26}
@media(max-width:480px){.command-home .solo-resume{grid-template-columns:1fr}.command-home .solo-resume button{width:100%}.command-home .home-modes .daily-challenge button{min-width:90px}.command-home .case-question-setting small{display:none}}

/* Lobby typography: short mode names, quieter supporting copy. */
.command-home .home-section-label,.command-home .home-modes h2{font-size:17px;font-weight:700;letter-spacing:0;line-height:1.5}
.command-home .home-modes p{font-size:13px;font-weight:400;line-height:1.6;color:#b0c4cc}
.command-home .home-modes button{font-size:13px;font-weight:500;letter-spacing:0}
.command-home .home-launch{padding:20px;border-color:#46616e;box-shadow:0 4px 14px #0002}
.command-home .home-section-label{margin-bottom:14px}
.command-home #startGame{font-size:20px;letter-spacing:0;min-height:58px}
.command-home .title-actions{gap:4px}
.command-home .how-btn{font-size:12px;margin:0}
.command-home .home-modes>section{box-shadow:0 2px 0 #04121b;border-color:#365361}
.command-home .home-modes .study-home{background:#0e2530cc}
.command-home .home-modes .study-actions #studyOpen{background:transparent;box-shadow:none;border-color:#365361;color:#bad0d7}
.command-home .home-modes [data-study-count]{display:inline-block;min-width:1.3em;font-variant-numeric:tabular-nums;color:#e9f2f3}
.command-home .solo-resume{padding:12px;margin-bottom:16px}
.command-home .solo-resume b{font-size:14px;font-weight:600}
.command-home .solo-resume small{font-size:11px}
.mypage .mypage-kicker,.study-dialog .study-kicker,.how-panel>.eyebrow{display:none}
.mypage .profile-metric span{font-size:12px;letter-spacing:0}
.mypage .profile-metric b{font-size:30px;font-weight:600;line-height:1.4}
.mypage :is(h3,h4),.study-dialog :is(h2,h3){letter-spacing:0}
.study-dialog>p,.study-dialog section>p{font-size:13px;line-height:1.8}
@media(max-width:760px){
 .command-home .home-launch{padding:16px}
 .command-home .home-section-label,.command-home .home-modes h2,.command-home .home-modes .battle-launch h2{font-size:16px}
 .command-home .home-modes .battle-launch p{font-size:12px}
 .command-home .home-modes .study-home{padding:14px}
 .command-home .title-content{gap:16px}
 .command-home .solo-resume{grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .command-home .solo-resume button{width:auto;min-width:96px}
}