/* Paper-like options blend with the calm navy, sage, and gold story design. */
.choices>.choice{display:flex;width:100%;height:auto;min-height:76px;min-width:0;align-items:flex-start;white-space:normal;overflow:visible;text-align:left;color:#263f49;background:#e9efea;border:1px solid #c7d1c8;border-radius:13px;padding:16px 17px;line-height:1.75;opacity:1;filter:none;box-shadow:0 2px 8px #243c3c0a}
.choices>.choice>span{min-width:0;overflow-wrap:anywhere;color:#263f49;font-size:16px}
.choices>.choice>b{flex:0 0 30px;color:#77613c;font-size:16px}
.choices>.choice small,.choices>.choice em{display:block;color:#53675d;opacity:1;font-size:13px;line-height:1.65;white-space:normal}
.choices>.choice .condition{font-size:13px;color:#765f48}
.choices>.choice .condition.ready{color:#38654f}
.choices>.choice:disabled{opacity:1;color:#263f49}
.choices>.choice:hover:not(:disabled){background:#e2eae3;border-color:#8fa497}
.choices>.choice.selected{background:#dbe5dc;border:2px solid #718d7d;box-shadow:inset 4px 0 #b9965f,0 3px 10px #243c3c0d;color:#263f49}
.choices>.choice.selected>span,.choices>.choice.selected>b,.choices>.choice.selected small,.choices>.choice.selected em,.choices>.choice.selected .condition{color:#263f49}
.choices>.choice:focus-visible{outline:3px solid #9b7b4c;outline-offset:3px}
@media(max-width:600px){.choices{gap:10px}.choices>.choice{padding:15px 12px;gap:11px}.choices>.choice>span{font-size:16px}.choices>.choice small,.choices>.choice em,.choices>.choice .condition{font-size:13px}}

/* First screen after "最初の一歩を、選ぶ": readable role cards on the navy stage. */
html[data-view="intro"] .rpg-roles{position:relative;z-index:2;isolation:isolate;clear:both;max-width:720px;margin:32px 0 26px;padding:20px;background:#1b3a4c;color:#f3eee1;border:1px solid #597180;border-radius:14px;box-shadow:0 12px 28px #071e2c33}
html[data-view="intro"] .rpg-roles legend{padding:4px 10px;color:#f3eee1;background:#1b3a4c;border-radius:6px;font-size:16px;font-weight:700;line-height:1.6}
html[data-view="intro"] .rpg-roles>div{gap:11px}
html[data-view="intro"] .rpg-roles label{min-width:0}
html[data-view="intro"] .rpg-roles label span{min-height:100%;padding:14px 13px;background:#dce5df;color:#19394a;border:1px solid #9eafa9;border-radius:9px;line-height:1.65;overflow-wrap:anywhere}
html[data-view="intro"] .rpg-roles b{color:#19394a;font-size:15px;line-height:1.65}
html[data-view="intro"] .rpg-roles small{display:block;color:#435e66;font-size:13px;line-height:1.6}
html[data-view="intro"] .rpg-roles input:checked+span{background:#e5c68f;color:#183849;border:2px solid #d4ad68;outline:0;box-shadow:inset 0 0 0 2px #fff4d9}
html[data-view="intro"] .rpg-roles input:checked+span::after{content:'選択中';align-self:flex-start;margin-top:8px;padding:2px 8px;border-radius:20px;background:#183849;color:#fff5df;font-size:11px;font-weight:700;line-height:1.5}
html[data-view="intro"] .rpg-roles input:checked+span b,html[data-view="intro"] .rpg-roles input:checked+span small{color:#183849}
html[data-view="intro"] .rpg-roles input:focus-visible+span{outline:3px solid #e8c78e;outline-offset:3px}
html[data-view="intro"] .rpg-roles>p{margin:12px 2px 0;color:#e5e7dd;font-size:14px;line-height:1.8}
@media(max-width:700px){html[data-view="intro"] .rpg-roles{padding:17px 14px;margin:28px 0 24px}html[data-view="intro"] .rpg-roles>div{grid-template-columns:1fr;gap:9px}html[data-view="intro"] .rpg-roles label span{min-height:70px;padding:12px 14px}}