:root{color-scheme:dark;--bg:#101117;--surface:#1c1b24;--ink:#f3ead8;--muted:#b7adb1;--gold:#d5b477;--line:#d5b47738;--accent:#8661a8;--glow:#663f734d;--deep:#241727;--paper:#eee4d1;--serif:'Yu Mincho','Hiragino Mincho ProN','Noto Serif JP',serif;--sans:'Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0,var(--glow),transparent 55%),var(--bg);color:var(--ink);font:15px/1.75 var(--sans)}body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.6' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
[data-theme="魏"]{--accent:#507fa8;--glow:#1a4e744d;--deep:#111e2c}[data-theme="呉"]{--accent:#c75546;--glow:#8f302a4d;--deep:#33171b}[data-theme="蜀"]{--accent:#679b77;--glow:#2c684a4d;--deep:#162c25}[data-theme="群雄"]{--accent:#c0568c;--glow:#8a2f624d;--deep:#2e1424}[data-theme="逸伝"]{--accent:#c69b62;--glow:#8f6a2e4d;--deep:#332415}[data-theme="晋"]{--accent:#bfb3df;--glow:#a28bc84d;--deep:#302b41}
button,input,select{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{color:inherit}h1,h2,h3,.serif{font-family:var(--serif);font-weight:600}h1,h2,h3,p{margin-top:0}h2{font-size:28px;letter-spacing:.09em}h3{font-size:20px}p{line-height:1.9}small{font-size:11px}.skip{position:fixed;top:-80px;background:var(--gold);color:#17131c;padding:12px;z-index:20}.skip:focus{top:10px}
header{height:106px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:25px}.brand{display:flex;align-items:center;gap:13px;font:22px var(--serif);letter-spacing:.14em;white-space:nowrap}.brand small{display:block;font:8px var(--sans);letter-spacing:.21em;margin-top:8px;color:var(--gold)}.seal{writing-mode:vertical-rl;border:3px double #f0b2a8;background:#862f32;color:#fce9d2;padding:5px 1px;font:19px var(--serif);letter-spacing:.1em;transform:rotate(-3deg)}nav{display:flex;align-items:center;gap:30px;font-size:13px}nav a{color:var(--muted);padding:12px 0}nav a.active{color:var(--gold);border-bottom:1px solid var(--gold)}nav span{font:12px Georgia;margin-left:7px;color:var(--gold)}.text-button{border:0;background:none;padding:10px 0;color:var(--muted);font-size:13px}main{max-width:1320px;margin:auto;padding:40px 5% 65px;min-height:80vh}footer{max-width:1440px;margin:auto;padding:28px 5%;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);gap:20px;font-size:11px}footer small{display:block;font:8px var(--sans);letter-spacing:.15em;margin-top:4px}.eyebrow{color:var(--gold);font:10px/1.8 var(--sans);font-weight:600;letter-spacing:.24em;margin:0 0 12px}.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:28px;gap:20px}.page-heading h1{font-size:30px;letter-spacing:.14em;margin:0}.page-heading .sub{font-size:12px;color:var(--muted);margin:0}.ornament{display:flex;align-items:center;gap:15px;color:var(--gold);font-size:12px;letter-spacing:.17em;margin-bottom:25px}.ornament:before,.ornament:after{content:'';height:1px;background:linear-gradient(90deg,transparent,var(--gold));flex:1}.ornament:after{transform:rotate(180deg)}
.result-card{border:1px solid #bc925653;background:linear-gradient(135deg,#fff1d804,transparent),#16151d;box-shadow:0 25px 90px #0005;position:relative;padding:12px}.result-card:before,.result-card:after{content:'◆';position:absolute;color:var(--gold);font-size:11px;left:7px;top:3px;z-index:2}.result-card:after{left:auto;right:7px}.hero{display:grid;grid-template-columns:47% 53%;min-height:550px;position:relative;border:1px solid var(--line);background:radial-gradient(ellipse at 25% 30%,var(--glow),transparent 70%),linear-gradient(125deg,var(--deep),#15141b 80%);overflow:hidden}.hero-copy{position:relative;z-index:1;padding:55px 46px 32px 35px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.hero-copy .eyebrow{font-size:10px}.hero-copy h1{font-size:clamp(60px,7.5vw,96px);line-height:1.3;letter-spacing:.16em;margin:5px 0 14px;text-shadow:0 3px 30px #f5d08f25}.hero-copy .title{font-size:clamp(19px,2vw,24px);font-family:var(--serif);color:var(--gold);letter-spacing:.08em;margin:0 0 20px}.hero-copy .lead{font-size:13px;line-height:2;color:#d2c9c6;max-width:420px;margin-bottom:20px}.hero-copy .badges{display:flex;gap:10px;flex-wrap:wrap}.chip{font-size:11px;border:1px solid var(--line);padding:4px 12px;color:var(--gold);background:#0002}.chip.accent{color:#ead8f2;border-color:var(--accent);background:var(--glow)}.match-row{display:flex;align-items:center;gap:22px;padding:13px 0 0;margin-top:auto;border-top:1px solid var(--line);width:100%}.match-row>span{font-size:11px;letter-spacing:.12em;max-width:75px;color:var(--muted)}.match-value{font:84px/.95 Georgia,serif;letter-spacing:-.04em;color:var(--gold);text-shadow:0 2px 24px #dfac5840}.match-value small{font:28px Georgia;margin-left:5px}.match-row .seal-round{margin-left:auto;display:grid;place-items:center;width:63px;height:63px;flex-shrink:0;border:3px double #b34848;color:#e29b8c;font:16px/1.2 var(--serif);transform:rotate(-9deg);border-radius:3px}.hero .hero-portrait{position:relative;min-height:550px;padding:30px 26px 0}.portrait{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,var(--glow),transparent 68%),linear-gradient(135deg,var(--deep),#11131b);isolation:isolate;border:1px solid var(--line)}.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:2;opacity:0;transition:opacity .4s}.portrait.loaded img{opacity:1}.portrait.loaded .placeholder{visibility:hidden}.portrait.loaded:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#0a0b13b0,transparent 30%);z-index:3;pointer-events:none}.hero-portrait .portrait{height:100%;min-height:520px;border:0;background:transparent}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.portrait-halo{position:absolute;width:86%;aspect-ratio:1;border-radius:50%;border:1px solid #d6ae693d;top:11%;box-shadow:0 0 0 14px #d6ae6904,0 0 0 15px #d6ae6914,inset 0 0 70px #eeb1580d}.portrait-halo:after{content:'';position:absolute;inset:12px;border:1px dashed #d6ae6933;border-radius:50%}.portrait-mark{position:absolute;right:7%;top:10%;font:130px var(--serif);color:var(--accent);opacity:.12;writing-mode:vertical-rl}.silhouette{position:absolute;width:110%;height:90%;bottom:-9%;color:var(--accent);opacity:.38;filter:drop-shadow(0 -7px 20px #05050b)}.portrait-name{font:74px/1.4 var(--serif);letter-spacing:.25em;writing-mode:vertical-rl;color:#eddbb6;z-index:1;text-shadow:0 3px 20px #000;position:absolute;top:21%;left:46%;transform:translateX(-50%)}.portrait-note{position:absolute;bottom:23px;font-size:9px;letter-spacing:.3em;color:var(--gold);z-index:4}.portrait-corner{position:absolute;inset:13px;border:1px solid var(--line);clip-path:polygon(0 0,25% 0,25% 2px,2px 2px,2px 25%,0 25%,0 0,100% 0,100% 25%,calc(100% - 2px) 25%,calc(100% - 2px) 2px,75% 2px,75% 0,100% 0,100% 100%,75% 100%,75% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 75%,100% 75%,100% 100%,0 100%,0 75%,2px 75%,2px calc(100% - 2px),25% calc(100% - 2px),25% 100%,0 100%);z-index:4}.banner{position:absolute;left:23px;top:0;z-index:4;padding:15px 11px 25px;background:linear-gradient(90deg,var(--deep),var(--accent),var(--deep));border:1px solid var(--gold);clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);font:22px var(--serif);color:#fff1d7;writing-mode:vertical-rl;letter-spacing:.2em;box-shadow:0 6px 20px #0007}.rank-seal{position:absolute;bottom:30px;left:30px;z-index:4;color:var(--gold);font:11px/2 var(--sans);letter-spacing:.18em}.rank-seal strong{font:40px Georgia;display:block}.landscape{position:absolute;left:0;bottom:0;width:100%;height:36%;opacity:.19;color:var(--accent);pointer-events:none}.hero .landscape{height:40%;z-index:0}
.card-caption{display:flex;justify-content:space-between;gap:15px;padding:13px 14px 3px;color:var(--muted);font-size:10px;letter-spacing:.08em}.card-caption strong{color:var(--gold);font-weight:400}.result-tools{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:22px 0 46px}.result-tools .tool-group{display:flex;gap:10px;flex-wrap:wrap}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 21px;min-height:46px;border:1px solid var(--gold);background:linear-gradient(115deg,#e7ca8d,#bc9559);color:#211a15;font-size:13px;font-weight:600;transition:filter .2s,transform .2s}.primary:hover{filter:brightness(1.12);transform:translateY(-2px)}.secondary{background:#211f2800;color:var(--ink);border-color:var(--line);font-weight:400}.secondary:hover{border-color:var(--gold);background:#d5b47709}.text-link{font-size:12px;color:var(--gold);text-decoration:underline;text-underline-offset:5px}.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:42px}.panel{padding:28px;border:1px solid var(--line);background:linear-gradient(140deg,#fff9e703,transparent),#17161e}.section-number{font:italic 17px Georgia;color:var(--gold);margin-right:12px}.panel h2{font-size:23px;margin:0 0 18px}.reason-intro{font-size:14px;color:#c9c0bc}.reason-item{display:grid;grid-template-columns:34px 1fr;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.reason-item>span{color:var(--gold);font:18px Georgia}.reason-item h3{font-size:16px;margin:0 0 4px;color:#ead8b6}.reason-item p{font-size:12px;color:var(--muted);margin:0}.axis{margin:12px 0}.axis-label,.axis-ends{display:flex;justify-content:space-between;font-size:12px}.axis-label strong{font-family:Georgia;color:var(--gold);font-weight:400}.bar{height:5px;background:#f6e7ca12;margin:7px 0;position:relative}.bar:after{content:'';position:absolute;left:50%;height:9px;top:-2px;background:#ead6b358;width:1px}.bar>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));position:relative}.bar>div:after{content:'';position:absolute;right:-2px;top:-2px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}.axis-ends{font-size:10px;color:var(--muted)}.notice{font-size:11px;color:var(--muted);line-height:1.9;margin:13px 0 0}.alignment-panel{margin-bottom:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px;background:repeating-linear-gradient(90deg,#c7a87905 0,#c7a87905 27px,#0000000a 28px,#0000000a 30px),#1e1b22;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.alignment-title{font-size:30px;letter-spacing:.16em;color:var(--gold);margin:0 0 7px}.alignment-panel p{font-size:12px;color:var(--muted)}.alignment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;align-self:center}.alignment-cell{text-align:center;border:1px solid var(--line);padding:10px 3px;font-size:11px;color:var(--muted)}.alignment-cell.active{border-color:var(--gold);background:var(--glow);color:#f8e2b7;box-shadow:inset 0 0 20px var(--glow)}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px;gap:15px}.section-heading h2{margin:0}.section-heading p{margin:0}.candidate-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.candidate{min-width:0;border:1px solid var(--line);background:linear-gradient(155deg,var(--deep),#17161e);transition:transform .25s,border-color .25s}.candidate:hover{transform:translateY(-4px);border-color:var(--gold)}.candidate>a{display:block;height:100%}.candidate .portrait{height:190px;border:0;border-bottom:1px solid var(--line)}.candidate .portrait-name{font-size:38px;top:16%}.candidate .portrait-mark{font-size:80px}.candidate .portrait-note{font-size:7px;bottom:10px;letter-spacing:.12em}.candidate .portrait-halo{width:67%;top:8%}.candidate .silhouette{height:110%}.candidate .banner{left:12px;font-size:13px;padding:8px 6px 16px}.candidate-body{padding:18px}.candidate-meta{display:flex;justify-content:space-between;color:var(--gold);font-size:11px;margin:0 0 8px}.candidate h3{font-size:26px;margin:0 0 7px;letter-spacing:.12em}.candidate .catch{font-size:12px;color:#dbc699;min-height:42px;margin:0 0 10px}.candidate .bio{font-size:11px;color:var(--muted);margin:0}.candidate .alignment-tag{display:inline-block;margin-top:12px;font-size:10px;color:var(--gold);border-top:1px solid var(--line);padding-top:10px;width:100%}.navigation{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px}.result-bottom{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:60px}.intro{position:relative;padding:20px 35px 35px 0;border-right:1px solid var(--line)}.intro:after{content:'志';position:absolute;bottom:20px;right:10px;font:230px var(--serif);color:var(--accent);opacity:.05;pointer-events:none}.intro h1{font-size:42px;line-height:1.65;letter-spacing:.1em;margin:10px 0 22px;color:#f1e3c6}.intro p{font-size:13px;color:var(--muted)}.numbers{display:flex;gap:30px;border-top:1px solid var(--line);padding-top:19px;margin:25px 0}.numbers strong{font:37px Georgia;color:var(--gold)}.numbers small{color:var(--muted);margin-left:7px}.chapter-list{list-style:none;padding:0}.chapter-list li{padding:7px 0;font-size:12px;color:var(--muted)}.chapter-list span{font:12px Georgia;margin-right:17px;color:var(--gold)}.chapter-list .active{color:var(--gold)}.quiz{padding:24px 30px 30px;border:1px solid var(--line);background:linear-gradient(145deg,var(--glow),transparent 65%),#181720;align-self:start;box-shadow:0 20px 70px #0003}.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);gap:12px}.progress{height:3px;background:#ffffff16;margin:14px 0 26px}.progress>div{height:100%;background:var(--gold);transition:width .3s}.question-heading{display:flex;align-items:center;gap:20px}.q-number{font:48px Georgia;color:var(--gold)}.question{font-size:25px;line-height:1.8;margin:18px 0 10px;font-weight:500;min-height:132px}.hint{font-size:11px;color:var(--muted);margin-bottom:22px}.options{display:grid;gap:9px}.option{display:flex;align-items:center;gap:18px;padding:15px 17px;background:#13121966;border:1px solid #d5b47730;text-align:left;font-size:13px;transition:.18s;min-height:56px}.option:hover{border-color:var(--gold);background:#d5b4770a}.option.selected{border-color:var(--gold);background:linear-gradient(100deg,#d5b47724,var(--glow));color:#ffe5b6}.key{font:14px Georgia;color:var(--gold)}.circle{width:14px;height:14px;border:1px solid #a79c8b;border-radius:50%;margin-left:auto;flex-shrink:0}.selected .circle{background:var(--gold);box-shadow:inset 0 0 0 3px #34282f;border-color:var(--gold)}.kbd-note{font-size:10px;color:var(--muted);text-align:right;margin-top:18px}.quiz-demo{font-size:11px;color:var(--gold);margin-top:25px;display:block}
.gallery-intro{position:relative;padding:38px;border:1px solid var(--line);background:radial-gradient(ellipse at right,var(--glow),transparent),var(--deep);margin-bottom:28px;overflow:hidden}.gallery-intro h1{font-size:42px;margin:0 0 12px;letter-spacing:.14em}.gallery-intro p{position:relative;z-index:1;font-size:13px;color:#d6c6bd;max-width:590px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.filter{padding:10px 19px;border:1px solid var(--line);background:none;font-size:12px;color:var(--muted)}.filter.active{color:#f5e2bf;background:var(--glow);border-color:var(--gold)}.filter span{margin-left:10px;font:12px Georgia;color:var(--gold)}.search-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0}.search-row input{background:#191820;border:1px solid var(--line);padding:12px 16px;width:300px;max-width:100%;color:var(--ink);border-radius:0;font-size:13px}.search-row p{font-size:11px;color:var(--muted);margin:0}.empty{grid-column:1/-1;padding:65px 30px;text-align:center;border:1px solid var(--line);background:var(--glow)}.profile-heading{display:flex;justify-content:space-between;margin-bottom:25px}.profile-body{margin-top:28px}.profile-body .panel p{font-size:14px;color:var(--muted)}.demo-label{border:1px solid var(--line);background:#d5b4770a;padding:10px 15px;color:var(--gold);font-size:11px;margin-bottom:20px}.reveal{animation:reveal .7s ease-out both}@keyframes reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}dialog{position:fixed;max-width:650px;width:calc(100% - 30px);max-height:88vh;overflow:auto;background:#201d27;color:var(--ink);border:1px solid var(--gold);padding:32px;box-shadow:0 25px 100px #0008}dialog::backdrop{background:#07070dcc;backdrop-filter:blur(6px)}dialog h2{font-size:25px}dialog p{font-size:13px;color:#d1c5c3}.close{float:right;background:none;border:0;font-size:27px;padding:0 0 10px 16px}.close:hover{color:var(--gold)}#export-image{display:block;width:100%;margin:15px 0;border:1px solid var(--line)}#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#e2c58e;color:#211922;padding:10px 22px;box-shadow:0 5px 30px #0005;z-index:20;opacity:0;pointer-events:none;font-size:12px;width:max-content;max-width:90vw;transition:opacity .2s}#toast.show{opacity:1}
@media(min-width:1450px){main{padding-left:35px;padding-right:35px}}@media(max-width:1000px){header{padding:0 4%}main{padding:30px 4% 50px}.hero-copy{padding:40px 26px 30px 20px}.hero,.hero .hero-portrait{min-height:500px}.hero-portrait .portrait{min-height:470px}.hero-copy h1{font-size:74px}.portrait-name{font-size:65px}.layout{grid-template-columns:260px 1fr;gap:30px}.intro h1{font-size:34px}.quiz{padding:24px}.candidate-grid{gap:12px}.candidate-body{padding:14px}.candidate h3{font-size:24px}.candidate .portrait{height:165px}.analysis-grid{gap:18px}.panel{padding:23px}}
@media(max-width:700px){body{font-size:14px}header{height:auto;min-height:100px;padding:18px 5% 10px;gap:15px;flex-wrap:wrap}.brand{font-size:20px}.brand small{font-size:7px}.seal{font-size:17px}nav{width:100%;gap:24px;font-size:12px;justify-content:space-between}nav .text-button{font-size:11px}nav a{padding:5px 0 9px}main{padding:26px 5% 40px}.page-heading{margin-bottom:20px}.page-heading h1{font-size:23px}.page-heading .sub{font-size:9px}.ornament{font-size:10px;margin-bottom:19px;gap:10px}.hero{grid-template-columns:1fr}.result-card{padding:7px}.hero .hero-portrait{min-height:355px;height:355px;padding:17px 22px 0}.hero-portrait .portrait{min-height:338px;height:338px}.portrait-halo{width:70%;top:5%;max-width:300px}.portrait-mark{font-size:105px;right:13%;top:0}.portrait-name{font-size:61px;top:13%;left:49%}.hero-portrait .silhouette{width:90%;height:120%;bottom:-24%}.hero-portrait .portrait-note{bottom:15px}.hero-copy{padding:25px 24px 28px;background:linear-gradient(0deg,#16151c,transparent)}.hero-copy h1{font-size:65px;margin:0 0 10px}.hero-copy .eyebrow{font-size:9px}.hero-copy .title{font-size:20px;margin-bottom:13px}.hero-copy .lead{font-size:12px;margin-bottom:17px}.hero-copy .badges{gap:7px}.chip{font-size:10px}.match-row{margin-top:15px;padding-top:16px}.match-value{font-size:72px}.rank-seal{bottom:16px;left:21px;font-size:9px}.rank-seal strong{font-size:31px}.banner{font-size:18px;left:17px}.card-caption{padding:11px 6px 3px;font-size:8px;letter-spacing:0}.card-caption>span:last-child{max-width:50%;text-align:right}.result-tools{align-items:stretch;flex-direction:column;margin:17px 0 30px}.result-tools .tool-group{display:grid;grid-template-columns:1fr 1fr}.result-tools>.text-link{align-self:flex-end;font-size:11px}.primary,.secondary{font-size:12px;padding:12px 15px;gap:8px}.analysis-grid{grid-template-columns:1fr;gap:18px;margin-bottom:25px}.panel{padding:23px}.panel h2{font-size:22px}.alignment-panel{grid-template-columns:1fr;padding:23px;gap:10px;margin-bottom:30px}.alignment-panel p{margin-bottom:10px}.alignment-title{font-size:28px}.alignment-cell{font-size:11px}.section-heading h2{font-size:23px}.section-heading .text-link{font-size:10px}.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.candidate .portrait{height:168px}.candidate .portrait-name{font-size:38px}.candidate .portrait-note{font-size:6px}.candidate .portrait-halo{width:80%}.candidate-body{padding:14px 12px}.candidate h3{font-size:25px}.candidate .catch{font-size:11px;min-height:42px}.candidate .bio{font-size:10px}.candidate-meta{font-size:10px}.candidate .alignment-tag{font-size:9px}.navigation{gap:10px;align-items:stretch}.navigation .primary,.navigation .secondary{flex:1}.result-bottom{margin-top:28px}.layout{display:block}.intro{border:0;padding:0 0 20px}.intro h1{font-size:29px;line-height:1.5;margin:5px 0 10px}.intro h1 br{display:none}.intro>p:not(.eyebrow),.intro .numbers,.chapter-list{display:none}.intro .quiz-demo{margin-top:13px;font-size:10px}.quiz{padding:22px 18px}.question{font-size:22px;min-height:0;margin-top:18px}.progress-meta{font-size:10px}.q-number{font-size:39px}.option{padding:14px 12px;font-size:12px;gap:12px}.hint{font-size:10px}.kbd-note{display:none}.quiz .navigation{align-items:center}.quiz .primary{flex:0 0 auto}.gallery-intro{padding:25px}.gallery-intro h1{font-size:33px}.gallery-intro p{font-size:12px}.filter{font-size:11px;padding:9px 12px}.filter span{margin-left:6px}.filters{gap:6px}.search-row{gap:12px}.search-row input{width:220px;font-size:12px}.search-row p{white-space:nowrap;font-size:10px}footer{display:block;font-size:10px;padding:25px 5%}footer>span{display:block;margin-bottom:12px}dialog{padding:24px}.profile-heading{font-size:11px}.demo-label{font-size:10px}.hero-copy h1.long-name{font-size:48px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#16151d!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}header,footer,.result-tools,.result-bottom,nav,.skip,.demo-label{display:none!important}main{padding:0;max-width:none}.result-card{break-inside:avoid;box-shadow:none}.hero{grid-template-columns:47% 53%}.hero .hero-portrait{min-height:460px;height:auto}.hero-portrait .portrait{min-height:430px;height:100%}.hero-copy{padding:25px}.hero-copy h1{font-size:65px}.analysis-grid{grid-template-columns:1fr 1fr}.candidate-grid{grid-template-columns:repeat(4,1fr)}.panel,.alignment-panel,.candidate{break-inside:avoid}.reveal{animation:none}}

/* Connect result axes to the questionnaire chapters. */
.axis-label{align-items:flex-start;gap:12px}.axis-label>strong{white-space:nowrap}.axis-heading{min-width:0}.axis-chapter{display:block;font:10px/1.7 var(--sans);color:var(--muted);margin-top:2px;letter-spacing:.03em}

.gallery-sections{display:grid;gap:42px}.gallery-faction{min-width:0}.gallery-faction>.section-heading{padding:16px 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--line)}.gallery-faction h2 small{font:12px var(--sans);color:var(--muted);margin-left:12px}.gallery-faction .eyebrow{margin-bottom:8px}

.wikipedia-link{margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}

.motive-basis{margin-bottom:32px}

[hidden]{display:none!important}.result-return{position:fixed;bottom:18px;right:18px;z-index:30;box-shadow:0 4px 20px #0009;background:#282331}.privacy-panel{padding:20px;border:1px solid var(--line);margin-bottom:24px}.alignment-switch{display:flex;gap:12px;align-items:center;cursor:pointer}.alignment-switch input{width:20px;height:20px;accent-color:var(--gold)}#reroll-demo{margin-bottom:24px}.tool-group{flex-wrap:wrap}#export-dialog{padding:0;max-height:90dvh;max-width:720px;overflow:hidden}#export-dialog[open]{display:flex;flex-direction:column}.dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 20px;background:#201d27;flex-shrink:0}.dialog-toolbar h2{margin:0;font-size:19px}.dialog-toolbar .close{position:static;width:auto;height:auto;padding:10px;font-size:14px;flex-shrink:0}.dialog-scroll{overflow-y:auto;min-height:0;padding:0 20px;overscroll-behavior:contain}.dialog-scroll img{display:block;width:100%;height:auto}.dialog-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:16px 20px;flex-shrink:0;background:#201d27}#alignment-consent{max-width:600px}#alignment-consent .dialog-actions{padding:12px 0 0}@media(max-width:700px){.result-return{bottom:10px;right:10px;font-size:11px}.tool-group #share-x{grid-column:1/-1}.search-row{flex-wrap:wrap}.search-row p{white-space:normal}.dialog-toolbar h2{font-size:15px}.dialog-actions .primary,.dialog-actions .secondary{padding:10px}.privacy-panel{padding:15px}}

.share-details{padding:20px 0}.share-details textarea{display:block;width:100%;box-sizing:border-box;background:#14131b;color:#f3ead8;border:1px solid var(--line);padding:12px;margin-top:8px;font:inherit;resize:vertical}.share-actions{display:flex;flex-wrap:wrap;gap:10px}.share-details .notice{overflow-wrap:anywhere}

/* Title page: supplied Guan Yu artwork with readable ink overlays. */
.landing{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);background:#101916;min-height:780px;box-shadow:0 30px 80px #0005}
.landing-art{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(90deg,rgba(9,16,14,.98) 0%,rgba(9,16,14,.92) 28%,rgba(9,16,14,.42) 62%,rgba(9,16,14,.12)),linear-gradient(0deg,#101916 0%,transparent 45%),url('images/title/guan-yu.jpg');background-size:cover,cover,auto 100%;background-position:center,center,right top;background-repeat:no-repeat}
.landing-copy{padding:64px 6% 34px;max-width:780px;text-shadow:0 2px 20px #0009}.landing-copy>.eyebrow{font-size:16px;letter-spacing:.24em}.landing h1{font-size:clamp(36px,4.3vw,62px);letter-spacing:.13em;margin:0;color:#f5e5bd;line-height:1.4}.landing h1 small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.27em;font-weight:400;margin-top:13px;color:var(--gold)}.landing-rule{display:flex;align-items:center;gap:14px;width:140px;color:var(--gold);margin:26px 0}.landing-rule:after{content:'';height:1px;background:var(--line);flex:1}.landing h2{font-size:clamp(26px,3vw,39px);line-height:1.65;letter-spacing:.1em;margin-bottom:18px}.landing-description{max-width:440px;color:#ded9cc;font-size:14px}.landing-numbers{display:flex;align-items:baseline;gap:10px;font-size:13px;margin:25px 0}.landing-numbers strong{font:32px var(--serif);color:var(--gold)}.landing-numbers>span{color:var(--gold);margin:0 10px}.landing-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-bottom:14px}.landing-start{display:flex;justify-content:space-between;align-items:center;gap:52px;min-width:260px;padding:19px 26px;font-size:17px;letter-spacing:.12em;box-shadow:0 8px 35px #0005}.landing-chapters{margin:10px 6% 38px;padding:24px 0 0;border-top:1px solid var(--line)}.landing-chapters ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:18px 0 0}.landing-chapters li{display:flex;align-items:baseline;gap:12px;font-family:var(--serif);font-size:14px}.landing-chapters li>span{color:var(--gold);font:13px var(--sans)}.landing-chapters small{display:block;color:var(--muted);font-family:var(--sans);margin-top:3px;font-size:11px}
@media(max-width:700px){.landing{min-height:0}.landing-art{background-image:linear-gradient(0deg,#101916 0%,rgba(9,16,14,.97) 35%,rgba(9,16,14,.7) 65%,rgba(9,16,14,.25) 100%),url('images/title/guan-yu.jpg');background-size:cover,100% auto;background-position:center,center top}.landing-copy{padding:240px 7% 24px;max-width:none}.landing h1{font-size:clamp(28px,7.6vw,46px);letter-spacing:.08em;white-space:nowrap}.landing h1 small{font-size:9px;letter-spacing:.17em}.landing-copy>.eyebrow{font-size:12px;letter-spacing:.16em}.landing h2{font-size:26px}.landing-description{font-size:13px}.landing-description br{display:none}.landing-start{width:100%;min-width:0}.landing-actions{gap:8px}.landing-chapters{margin:0 7% 28px}.landing-chapters ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}.landing-chapters li{font-size:12px;gap:8px}.landing-chapters .eyebrow{font-size:10px;letter-spacing:.08em}}

@media(max-width:700px){.landing h2{font-size:22px;letter-spacing:.06em}}

.profile-body .wikipedia-link{margin-top:20px;margin-bottom:0}.profile-body .wikipedia-link a{display:inline-flex;align-items:center;min-height:44px}

/* Decorative seal is excluded from document text and accessible name. */
.brand .seal::before{content:"三國"}

/* 史実の歩み（概略） */
.history-outline{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.history-outline h3{margin-top:0}
.history-years{color:var(--gold);font-size:13px;margin:0 0 10px}
.history-outline ul{margin:0;padding-left:1.2em}
.history-outline li{margin:0 0 8px;line-height:1.9}
.history-engi{margin:14px 0 0;padding:10px 14px;border-left:2px solid var(--gold);background:rgba(213,180,119,.06);line-height:1.9}
.history-engi strong{color:var(--gold);font-weight:600}
.battle-table{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:13px;line-height:1.6}.battle-table th,.battle-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.battle-table th{color:var(--gold);font-weight:600;white-space:nowrap}.battle-table td:first-child{white-space:nowrap;color:var(--muted,#9a93a8)}.battle-win td:nth-child(4){color:#8dffb0}.battle-loss td:nth-child(4){color:#ff7f9a}.battle-draw td:nth-child(4){color:#f2d27a}.battle-summary{margin:8px 0 0}@media(max-width:600px){.battle-table{font-size:12px}.battle-table th:last-child,.battle-table td:last-child{display:none}}

/* タイトル画面の装飾 */
.landing-light{position:absolute;top:0;right:0;height:100%;aspect-ratio:960/1140;z-index:-1;pointer-events:none}
.landing-flame{position:absolute;left:94.7%;top:33.9%;width:38%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,200,120,.30) 0%,rgba(255,165,80,.13) 28%,rgba(255,140,60,.05) 48%,transparent 66%);mix-blend-mode:screen;animation:landFlicker 3.4s ease-in-out infinite}
.landing-light i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffdca0;box-shadow:0 0 6px 1px #ffbe6a88;opacity:0;animation:landMote var(--t) linear var(--d) infinite}
.landing-ornament span{position:absolute;width:58px;height:58px;z-index:1;pointer-events:none}
.landing-ornament span:before,.landing-ornament span:after{content:'';position:absolute;border-color:var(--gold);border-style:solid;border-width:0}
.landing-ornament span:before{inset:0;border-top-width:1px;border-left-width:1px;opacity:.75}
.landing-ornament span:after{left:7px;top:7px;width:26px;height:26px;border-top-width:1px;border-left-width:1px;opacity:.45}
.landing-ornament span:nth-child(1){top:12px;left:12px}
.landing-ornament span:nth-child(2){top:12px;right:12px;transform:scaleX(-1)}
.landing-ornament span:nth-child(3){bottom:12px;left:12px;transform:scaleY(-1)}
.landing-ornament span:nth-child(4){bottom:12px;right:12px;transform:scale(-1)}
.landing-factions{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:-6px 0 28px;font-size:12px;color:#d9d2c3}
.landing-factions li{display:flex;align-items:center;gap:7px}
.landing-factions b{display:grid;place-items:center;width:24px;height:24px;font:600 13px var(--serif);color:#fbf1d8;background:var(--c);border-radius:3px;box-shadow:inset 0 0 0 1px #ffffff38,0 2px 8px #0007;transform:rotate(-5deg)}
.landing-copy>*{animation:landIn .9s cubic-bezier(.2,.7,.2,1) both}
.landing-copy>:nth-child(1){animation-delay:.05s}.landing-copy>:nth-child(2){animation-delay:.18s}.landing-copy>:nth-child(3){animation-delay:.32s}.landing-copy>:nth-child(4){animation-delay:.42s}.landing-copy>:nth-child(n+5){animation-delay:.55s}
.landing-rule:after{transform-origin:left;animation:landRule 1.2s .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes landIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes landRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes landFlicker{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}37%{opacity:.78}55%{opacity:.95;transform:translate(-50%,-50%) scale(1.02)}74%{opacity:.82}}
@keyframes landMote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.7}70%{opacity:.35}100%{opacity:0;transform:translate(var(--dx),-120px)}}
@media(max-width:700px){.landing-light{right:auto;left:0;width:100%;height:auto}.landing-ornament span{width:40px;height:40px}.landing-ornament span:after{width:18px;height:18px;left:5px;top:5px}.landing-ornament span:nth-child(1),.landing-ornament span:nth-child(2){top:8px}.landing-ornament span:nth-child(1),.landing-ornament span:nth-child(3){left:8px}.landing-ornament span:nth-child(2),.landing-ornament span:nth-child(4){right:8px}.landing-ornament span:nth-child(3),.landing-ornament span:nth-child(4){bottom:8px}.landing-factions{gap:8px 12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.landing-light i{display:none}}
.landing-chapters{padding-bottom:22px}
@media(max-width:700px){.landing-chapters{padding-bottom:26px}}

/* 装飾の強化：灯り・香煙・題字の光 */
.landing-light{container-type:inline-size}
.landing-flame{width:46%;background:radial-gradient(circle,rgba(255,214,140,.55) 0%,rgba(255,170,80,.24) 22%,rgba(255,140,60,.08) 45%,transparent 66%)}
.landing-warm{position:absolute;left:78%;top:42%;width:120%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,170,90,.16) 0%,rgba(255,150,70,.06) 40%,transparent 68%);mix-blend-mode:screen;animation:landFlicker 3.4s ease-in-out infinite}
.landing-smoke{position:absolute;left:77.1%;top:64.5%;width:0;height:0}
.landing-smoke s{position:absolute;left:-3cqw;top:-4cqw;width:6cqw;height:8cqw;border-radius:50%;background:radial-gradient(ellipse,rgba(235,228,214,.34) 0%,rgba(235,228,214,.12) 45%,transparent 70%);filter:blur(3px);opacity:0;animation:landSmoke 8s ease-out var(--d) infinite}
@keyframes landSmoke{0%{opacity:0;transform:translate(0,0) scale(.6,.8)}12%{opacity:.9}45%{opacity:.55;transform:translate(var(--sx),-16cqw) scale(1.4,1.8) rotate(8deg)}100%{opacity:0;transform:translate(calc(var(--sx) * -1.5),-34cqw) scale(2.6,3) rotate(-10deg)}}
.landing h1{background:linear-gradient(105deg,#e9cf92 0%,#f7e8c4 38%,#fffaf0 48%,#f7e8c4 58%,#d9b877 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 14px #000b);animation:landIn .9s cubic-bezier(.2,.7,.2,1) .18s both,landShine 7s ease-in-out 1.4s infinite}
.landing h1 small{-webkit-text-fill-color:var(--gold);color:var(--gold)}
@keyframes landShine{0%{background-position:100% 0}35%,100%{background-position:0 0}}

.landing-smoke s{left:-1.6cqw;top:-7cqw;width:3.2cqw;height:9cqw;background:radial-gradient(ellipse at 50% 60%,rgba(242,236,224,.62) 0%,rgba(236,229,214,.26) 40%,transparent 70%);filter:blur(2px);animation:landSmoke 8.4s ease-out var(--d) infinite}
@keyframes landSmoke{0%{opacity:0;transform:translate(0,2cqw) scale(.5,.7)}10%{opacity:1}40%{opacity:.75;transform:translate(var(--sx),-12cqw) scale(1.3,1.6) rotate(10deg)}75%{opacity:.35}100%{opacity:0;transform:translate(calc(var(--sx) * -1.4),-30cqw) scale(3,2.6) rotate(-14deg)}}

/* Full questionnaire review. */
.review-page{max-width:900px;margin:0 auto}.review-page h1{font-size:32px}.review-actions{display:flex;justify-content:flex-end;margin:24px 0}.review-chapter{margin:36px 0}.review-chapter h2{font-size:23px;color:var(--gold);padding-bottom:14px;border-bottom:1px solid var(--line)}.review-item{border:1px solid var(--line);background:var(--glow);margin:12px 0}.review-item h3{margin:0;font:inherit}.review-toggle{position:relative;display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;background:none;border:0;padding:20px 48px 20px 20px;color:var(--ink);font:inherit;line-height:1.7}.review-question{font-weight:600}.review-answer{font-size:13px;color:var(--gold)}.review-indicator{position:absolute;right:18px;top:20px;color:var(--gold)}.review-options{display:flex;flex-direction:column;padding:0 20px 20px;gap:10px}.review-options .option{width:100%;text-align:left;white-space:normal}.review-options .circle{margin-left:auto;flex-shrink:0}.review-item.unanswered{border:2px solid #eead79}.review-item.unanswered .review-answer{color:#ffd0aa;font-weight:700}.review-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.review-result:disabled{opacity:.45;cursor:not-allowed}#review-status{color:var(--gold);line-height:1.8}@media(max-width:700px){.review-page h1{font-size:26px}.review-toggle{padding:16px 40px 16px 14px}.review-options{padding:0 14px 16px}.review-actions .primary{width:100%;justify-content:center}.review-chapter h2{font-size:21px}.review-answer{font-size:12px}}

.opposite-section{margin-top:40px}.opposite-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.7fr);gap:16px;align-items:stretch}.opposite-panel h2{font-size:22px;margin:0 0 4px}
@media(max-width:1000px){.opposite-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ranking-panel{grid-column:1 / -1}}
@media(max-width:700px){.opposite-section{margin-top:30px}.opposite-grid{grid-template-columns:1fr}.opposite-card{max-width:260px;width:100%;margin:0 auto}}
.ranking-panel h2{font-size:22px;margin:0 0 10px}.ranking-list{list-style:none;margin:0;padding:0}.ranking-list li{border-top:1px solid var(--line)}.ranking-list li:first-child{border-top:0}.ranking-list a{display:grid;grid-template-columns:4.2em 1fr auto auto;align-items:center;gap:10px;padding:8px 2px;color:inherit;text-decoration:none}.ranking-list a:hover .rk-name{color:var(--gold)}.rk-no{color:var(--gold);font-size:12px;letter-spacing:.05em;white-space:nowrap}.ranking-list li:first-child .rk-no,.ranking-list li:first-child .rk-name{font-weight:700}.rk-name{font-size:16px;color:#ead8b6}.rk-fac{font-size:10px;padding:2px 6px;border:1px solid var(--accent);color:var(--accent);white-space:nowrap}.rk-match{font:15px Georgia;color:var(--gold);min-width:3em;text-align:right}
@media(max-width:700px){.ranking-panel{grid-column:auto}.ranking-list a{gap:8px}.rk-name{font-size:15px}}
.history-epithet{margin:6px 0 14px;padding:10px 14px;border-left:2px solid var(--gold);background:rgba(201,164,92,.06)}.history-epithet .epithet-label{display:inline-block;font-size:10px;letter-spacing:.2em;color:var(--gold);border:1px solid var(--gold);padding:1px 6px;margin-right:10px;vertical-align:middle}.history-epithet strong{font-size:18px;color:#ead8b6;vertical-align:middle}.history-epithet small{display:block;margin-top:6px;font-size:12px;color:var(--muted);line-height:1.7}
/* おまけ：異名・逸話クイズ */
.bonus-entry{display:flex;flex-direction:column;gap:5px;max-width:390px;margin-top:22px;padding:16px 22px;border:1px solid #c5a36780;background:#12131ac9;color:#ead9b7;text-decoration:none;border-radius:4px}.bonus-entry small{font-size:11px;letter-spacing:.16em}.bonus-entry strong{font-family:var(--serif,serif);font-size:20px}.bonus-entry span{font-size:12px}.bonus-entry:hover{background:#30263a}.bonus-page{max-width:800px;margin:28px auto 70px;padding:32px;box-sizing:border-box}.bonus-intro{text-align:center;padding-top:45px}.bonus-intro h1{font-size:clamp(38px,7vw,66px);line-height:1.45;margin:20px 0}.bonus-seal{display:inline-grid;place-items:center;width:54px;height:54px;border:1px solid #d5b477;color:#d5b477;font-family:serif;font-size:28px;transform:rotate(-7deg)}.bonus-lead{font-size:18px;line-height:1.9}.bonus-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:28px;margin:30px 0;color:#d5b477}.bonus-facts strong{font-size:30px;margin-right:5px}.bonus-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0}.bonus-intro .bonus-actions{justify-content:center}.bonus-top{display:flex;justify-content:space-between;gap:15px;font-size:12px;margin-bottom:35px}.bonus-category{margin-top:36px}.bonus-question{font-size:clamp(24px,4vw,34px);line-height:1.7;min-height:110px}.bonus-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}.bonus-option{display:flex;align-items:center;gap:14px;text-align:left;min-height:86px;padding:18px;background:#1c1b26;border:1px solid #706078;color:#f3ead8;border-radius:4px;cursor:pointer;font:inherit;font-size:22px}.bonus-letter{font-size:13px;color:#d5b477}.bonus-option small{font-size:11px;margin-left:auto}.bonus-option:enabled:hover{background:#30263a;border-color:#d5b477}.bonus-option:focus-visible,.bonus-entry:focus-visible{outline:3px solid #e6c48f;outline-offset:4px}.bonus-option:disabled{cursor:default;opacity:.7}.bonus-option.is-correct{border:2px solid #94c9a4;background:#233b2d;opacity:1}.bonus-option.is-wrong{border:2px solid #e99787;background:#442c2d;opacity:1}.bonus-feedback{border-left:3px solid #d5b477;padding:18px 24px;background:#25222d;margin:24px 0;line-height:1.9}.bonus-feedback h2{font-size:23px;margin:0}.bonus-result{text-align:center;border:1px solid #d5b47765;padding:24px;margin-top:24px;background:radial-gradient(ellipse at top,#47344855,transparent)}.bonus-score{color:#e6c48f;margin:0}.bonus-score strong{font-size:clamp(70px,14vw,112px);font-weight:500}.bonus-score span{font-size:20px;margin-left:10px}.bonus-result h2{font-size:30px;color:#e6c48f}.bonus-share-text{width:100%;box-sizing:border-box;background:#14141e;border:1px solid #706078;color:#eee1ce;padding:14px;resize:vertical;font:inherit;font-size:14px;line-height:1.7}.bonus-review-heading{margin-top:48px}.bonus-review{padding-left:26px}.bonus-review li{padding:22px 8px;border-bottom:1px solid #70607865;line-height:1.8}.bonus-review h3{font-size:18px;margin:10px 0}.bonus-verdict{color:#e6c48f;font-size:13px}.bonus-page [data-bonus-focus]:focus{outline:none}@media(max-width:600px){.bonus-page{padding:16px 4px;margin-top:10px}.bonus-options{grid-template-columns:1fr;gap:10px}.bonus-option{min-height:66px;padding:14px 18px}.bonus-question{min-height:0}.bonus-facts{gap:18px}.bonus-actions>*{text-align:center}.bonus-top{font-size:11px}.bonus-entry{margin-top:18px}header nav{flex-wrap:wrap}.bonus-feedback{padding:16px}.bonus-page .bonus-actions .primary{width:100%;justify-content:center}}
.bonus-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:22px 0 6px;padding-top:14px;border-top:1px solid var(--line)}.bonus-nav .bonus-restart{margin-left:auto}.bonus-nav button:disabled{opacity:.35;cursor:default}
@media(max-width:700px){.bonus-nav{gap:8px 16px}.bonus-nav .bonus-restart{margin-left:0}}
.bonus-option.is-pending{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:rgba(201,164,92,.10)}.bonus-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 4px}.bonus-confirm span{font-size:12px;color:var(--muted)}.bonus-confirm .primary:disabled{opacity:.4;cursor:default}
@media(max-width:700px){.bonus-confirm .primary{width:100%;justify-content:center}}
.bonus-courses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 10px}.bonus-course{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;border:1px solid var(--line);background:linear-gradient(155deg,var(--deep),#17161e);color:inherit;text-align:left;cursor:pointer;transition:border-color .2s,transform .2s}.bonus-course:hover,.bonus-course:focus-visible{border-color:var(--gold);transform:translateY(-2px)}.bonus-course-label{font-size:11px;letter-spacing:.15em;color:var(--gold)}.bonus-course strong{font:34px Georgia;color:#ead8b6}.bonus-course strong small{font-size:14px;margin-left:3px}.bonus-course span:not(.bonus-course-label){font-size:12px;color:#d8c9ab}.bonus-course .bonus-course-time{font-size:11px;color:var(--muted)}.bonus-factions{font-size:12px;color:var(--muted);letter-spacing:.05em}.bonus-feedback .text-link{display:inline-block;margin:0 0 12px}
@media(max-width:700px){.bonus-courses{grid-template-columns:1fr}}
.quiz-restart{display:block;margin:14px 0 0 auto;font-size:12px;color:var(--muted)}.quiz-restart:hover{color:var(--gold)}
.bonus-course-best{font-size:11px;color:var(--gold)!important;margin-top:4px}.bonus-specials{margin:18px 0 6px;text-align:left}.bonus-specials ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bonus-specials li{border:1px dashed var(--line);padding:10px 12px}.bonus-specials li.is-met{border-style:solid;border-color:var(--gold)}.bonus-specials strong{display:block;font-size:16px;color:#ead8b6}.bonus-specials small{font-size:11px;color:var(--muted)}.bonus-best{color:var(--gold);margin:6px 0 0}.bonus-best.is-new{font-weight:700}.bonus-tries{font-size:12px;color:var(--muted);margin:4px 0 0}.bonus-met{margin:14px auto 0;padding:12px 16px;border:1px solid var(--gold);max-width:420px}.bonus-met strong{color:#ead8b6;font-size:18px}
@media(max-width:700px){.bonus-specials ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bonus-course-stats{font-size:11px;color:#bfb3df!important;margin-top:2px;letter-spacing:.02em}
/* 結果ページ：他勢力カードの近い軸・人物のアラインメント */
.candidate .near-axis{margin:-4px 0 10px;font-size:11px;line-height:1.5;color:var(--gold,#c9a45c);letter-spacing:.02em}
.alignment-panel.is-compact{margin-top:2rem}
.result-motive-basis{margin-top:1.25rem}
.alignment-compare{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:.25rem 0 .75rem;font-weight:600}
.alignment-compare span{padding:.2rem .7rem;border:1px solid currentColor;border-radius:999px;font-size:.9rem}
/* 結果ページ：一致度の下に人物ごとのFACTION */
.faction-row{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.faction-row>span:first-child{font-size:11px;letter-spacing:.14em;opacity:.75}
.faction-row .serif{color:var(--gold);font-size:15px}
/* 特別人物（おまけクイズの報酬） */
[data-theme="在野"]{--accent:#6fa6a4;--glow:#2f6e6c4d;--deep:#142726}
[data-theme="倭"]{--accent:#e8262a;--glow:#b3141d4d;--deep:#3a0d10}
.bonus-specials ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.bonus-specials li a{display:block;color:inherit;text-decoration:none}
@media (max-width:640px){.bonus-specials ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.special-card.is-locked .portrait{filter:saturate(.4) brightness(.8)}
.special-locked .portrait-mark{font-size:80px}
.special-page{margin:8px 0 28px}
.special-hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:28px}
.special-hero .portrait.large{height:auto;aspect-ratio:3/4}
.special-copy h1{margin:10px 0 6px;font-size:clamp(40px,7vw,64px);letter-spacing:.08em}
.special-reading{display:block;font-size:14px;letter-spacing:.3em;color:var(--accent);margin-top:4px;font-weight:400}
.special-title{font-size:18px;color:var(--gold)}
.special-meet{margin:18px 0;padding:14px 18px;border-left:2px solid var(--accent);background:rgba(255,255,255,.03);font-size:15px;line-height:1.9}
.special-hint{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:14px 0}
.special-hint span{font-size:11px;letter-spacing:.14em;opacity:.75}
.special-hint strong{color:var(--gold)}
.special-body p{line-height:1.95}
.bonus-met .special-meet{text-align:left}
@media (max-width:720px){.special-hero{grid-template-columns:1fr;gap:18px}.special-hero .portrait.large{max-width:340px;margin:0 auto;width:100%}}

/* Browser-local diagnosis history */
.diagnosis-history{display:grid;gap:20px;margin-top:28px}.history-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.diagnosis-history h2{margin-top:16px}header nav{flex-wrap:wrap}

/* Character archive reading progress */
.reading-progress{border:1px solid var(--line);padding:16px 20px;margin:0 0 16px;background:var(--deep)}
.reading-progress-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.reading-progress-top strong{font-size:18px}.reading-progress p{margin:8px 0 0;color:var(--muted);font-size:13px}.reading-progress #read-storage-notice:empty{display:none}.reading-progress-row{display:flex;align-items:baseline;gap:4px 22px;flex-wrap:wrap}.reading-progress-row+.reading-progress-row{margin-top:10px}.reading-progress-row strong{font-size:18px;min-width:11.5em}.reading-progress-row[hidden]{display:none}.read-factions-text{color:var(--muted);font-size:13px}.read-factions-text .rc{display:inline-block;white-space:nowrap;margin-right:1em}.read-factions-text .rc:last-child{margin-right:0}.reading-progress-row .reading-progress-actions{margin-left:auto}@media(max-width:900px){.reading-progress{display:flex;flex-direction:column}.reading-progress-row:not(#read-itsuden-row){display:contents}.reading-progress-row:not(#read-itsuden-row) strong{order:1}.reading-progress-row:not(#read-itsuden-row) .read-factions-text{order:2;margin-top:4px}#read-itsuden-row{order:3;margin-top:14px}#read-itsuden-row strong{flex-basis:100%}.reading-progress-row .reading-progress-actions{order:4;margin:14px 0 0;align-self:flex-end;justify-content:flex-end;gap:6px 16px}#read-storage-notice{order:5}}
.read-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 15px}.read-filters .filter{padding:9px 13px}.read-control{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 18px}.read-control #read-status{font-weight:700}.read-mark{position:absolute;right:12px;top:12px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:transparent}.read-mark.is-read{color:#18221d;background:#b7dbb9;box-shadow:0 2px 8px #0007;font-weight:800}

/* Reading milestone: quiet, dismissible notice; no animation. */
#reading-unlock-notice{position:fixed;z-index:1200;right:20px;bottom:20px;width:min(420px,calc(100vw - 40px));box-sizing:border-box;padding:20px 24px;background:#18221f;color:#f5ead2;border:1px solid #ac8a51;box-shadow:0 8px 30px #0005;border-radius:8px}
#reading-unlock-notice p{margin:8px 0;line-height:1.7}
#reading-unlock-notice a{color:inherit;text-underline-offset:5px}
#reading-unlock-notice button{display:block;margin-left:auto;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit}
#reading-unlock-notice.is-complete{background:linear-gradient(135deg,#302b20,#192822);border:2px solid #d4b574;box-shadow:0 0 0 4px #d4b57422,0 8px 30px #0005}
#reading-unlock-notice.is-complete a{color:#f7dca0;font-weight:700}

.special-hero{position:relative}.special-hero .special-land{height:46%;opacity:.3;z-index:0}.special-hero>*:not(.special-land){position:relative;z-index:1}

.landscape-img{position:absolute;left:0;bottom:0;width:100%;height:46%;object-fit:cover;object-position:50% 100%;opacity:.8;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(to top,#000 55%,transparent);mask-image:linear-gradient(to top,#000 55%,transparent)}.hero .landscape-img{height:52%}.special-hero .landscape-img.special-land{height:60%;z-index:0}

.special-hero{border:1px solid var(--line);background:radial-gradient(ellipse at 25% 30%,var(--glow),transparent 70%),linear-gradient(125deg,var(--deep),#15141b 80%);overflow:hidden;padding:30px 26px}
.engi-li{list-style:none;margin-left:-20px;padding:10px 14px;border-left:2px solid var(--gold);background:rgba(213,180,119,.06);line-height:1.9}.engi-li strong{color:var(--gold);font-weight:600}
.result-card .special-hero{margin-bottom:0;align-items:stretch}.special-copy{display:flex;flex-direction:column;align-items:flex-start}.special-copy .special-faction{margin-top:auto;width:100%}.special-copy .special-faction .serif{max-width:none;color:var(--gold);font-size:17px}
.special-copy .special-meet{align-self:stretch}
[data-theme="呉"] .landscape-img{opacity:.5}
.portrait[data-theme="逸伝"]:before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;box-sizing:border-box;--fw:56px;border:var(--fw) solid transparent;border-image:url(/images/frame-gold.webp) 92 / var(--fw) stretch}
.candidate .portrait[data-theme="逸伝"]:before{--fw:30px}

/* 隠れた人々: 逸伝と同じ金枠(焼き込み済みの于吉・左慈・洛神は除く) */
.portrait.special-p:not([data-portrait="于吉"]):not([data-portrait="左慈"]):not([data-portrait="洛神"]):before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;box-sizing:border-box;--fw:56px;border:var(--fw) solid transparent;border-image:url(/images/frame-gold.webp) 92 / var(--fw) stretch}
.candidate .portrait.special-p:not([data-portrait="于吉"]):not([data-portrait="左慈"]):not([data-portrait="洛神"]):before{--fw:30px}
.result-card .special-hero .portrait.large{align-self:start;width:100%;min-width:0}
/* 焼き込み枠の于吉・左慈・洛神: カードでは見切れるので重ね枠を付ける(個別ページは焼き込み枠のまま) */
.candidate .portrait.special-p:is([data-portrait="于吉"],[data-portrait="左慈"],[data-portrait="洛神"]):before{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;box-sizing:border-box;--fw:30px;border:var(--fw) solid transparent;border-image:url(/images/frame-gold.webp) 92 / var(--fw) stretch}

.itsuden-bar{max-width:1440px;margin:0 auto;padding:10px 5%;display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;border-bottom:1px solid var(--line);font-size:13px}
.itsuden-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--ink,#eadfca)}
.itsuden-switch input{position:absolute;opacity:0;width:1px;height:1px}
.itsuden-track{position:relative;width:42px;height:22px;border-radius:12px;border:1px solid var(--gold);background:#12131a;flex:none;transition:background .15s}
.itsuden-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.itsuden-switch input:checked+.itsuden-track{background:#5d4a24}
.itsuden-switch input:checked+.itsuden-track::after{transform:translateX(20px);background:var(--gold)}
.itsuden-switch input:focus-visible+.itsuden-track{outline:2px solid var(--gold);outline-offset:3px}
.itsuden-name{font-weight:700;letter-spacing:.1em}.itsuden-state{color:var(--muted);font-size:12px}
.itsuden-bar[data-on="1"] .itsuden-state{color:var(--gold)}
.itsuden-bar .text-button{padding:4px 0;text-decoration:underline;text-underline-offset:3px}
#itsuden-info{max-width:560px;width:calc(100% - 32px)}
.align-filters{align-items:center}.filter-label{font-size:12px;color:var(--muted);margin-right:4px}
@media(max-width:700px){.itsuden-bar{padding:10px 5%}.itsuden-state{font-size:11px}}

.special-late{margin:22px 0;border:1px solid var(--line);background:#12131a99}
.special-late summary{cursor:pointer;padding:12px 16px;color:var(--gold);font-size:13px;letter-spacing:.08em}
.special-late summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.special-late figure{margin:0;padding:0 16px 16px}
.special-late img{display:block;width:100%;max-width:420px;height:auto;margin:0 auto;border:1px solid var(--line)}
.special-late figcaption{margin-top:10px;color:var(--muted);font-size:12px;text-align:center}
/* おまけトップの隠れた人々：コース（20/48/108）を縦の列、上段=80点・下段=満点に並べる。 */
@media (min-width:641px){.bonus-specials ul{grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto)}}

.itsuden-visit{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}.itsuden-visit p{margin:0;flex:1 1 260px}

/* サムネイルの切り取り位置（人物ごと）。額の生え際まで入れる */
.candidate .portrait[data-portrait="曹彰"] img{object-position:50% 3%}
.candidate .portrait[data-portrait="馬援"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="岳飛"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="祖茂"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="皇甫規妻"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="龐淯"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="陸績"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="韋昭"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="闞沢"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="王凌"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="孫翊"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="周処"] img{object-position:50% 16%}
.candidate .portrait[data-portrait="傅肜"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="傅僉"] img{object-position:50% 12%}
.candidate .portrait[data-portrait="張温"] img{object-position:50% 0%}
.candidate .portrait[data-portrait="倉慈"] img{object-position:50% 0%}

.review-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.review-actions .review-restart{white-space:nowrap}.review-gate{border-left:3px solid var(--gold);padding-left:12px}
.bonus-resume{margin:16px 0 0;display:flex;flex-direction:column;gap:10px;align-items:center}.bonus-resume .secondary{width:100%;max-width:420px}
.bonus-time{margin:8px 0 0;font-size:15px}.bonus-time strong{color:#ead8b6;font-size:22px;font-variant-numeric:tabular-nums}.bonus-time em{color:var(--gold);font-style:normal;font-weight:700;font-size:13px}#bonus-timer{font-variant-numeric:tabular-nums;color:var(--gold)}.bonus-timenote{font-size:12px;color:var(--muted)}
.bonus-resume{align-items:stretch;margin-top:6px}.bonus-resume-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bonus-resume-row .secondary{width:100%;max-width:none;display:flex;flex-direction:column;gap:2px;align-items:center;padding:10px 8px}.bonus-resume-row small{font-size:11px;color:var(--gold)}.bonus-resume .notice{text-align:center;margin:8px 0 0}@media(max-width:700px){.bonus-resume-row{grid-template-columns:1fr}.bonus-resume-row span{display:none}}
.bonus-ta{margin:14px auto 4px;padding:12px 16px;border:1px solid var(--line);max-width:460px;text-align:center}.bonus-ta label{cursor:pointer;color:#ead8b6}.bonus-ta input{accent-color:var(--gold);margin-right:6px}.bonus-ta .bonus-timenote{margin:8px 0 0}.bonus-pace{margin:4px 0 8px;color:var(--gold);font-variant-numeric:tabular-nums}.bonus-pace em{font-style:normal;font-weight:700}.bonus-share-opt{margin:8px 0 0;font-size:13px}.bonus-share-opt input{accent-color:var(--gold)}
.bonus-badges{display:flex;gap:6px;margin-top:6px}.bonus-badge{font-size:11px;padding:2px 10px;border:1px dashed var(--line);border-radius:999px;color:var(--muted)!important}.bonus-badge small{font-size:9px;margin-left:3px}.bonus-badge.is-on{border:1px solid var(--gold);background:var(--gold);color:#15131c!important;font-weight:700}.bonus-history{margin:6px 0 0;font-size:12px;color:var(--muted)}.bonus-history ol{margin:6px 0 0;padding-left:20px;text-align:left;display:inline-block}.bonus-card-box{margin:12px 0 0;text-align:center}.bonus-card-img{max-width:100%;height:auto;border:1px solid var(--line);margin-top:10px}

.special-card-fold .bonus-card-box,.bonus-cardview .bonus-card-box{padding:0 16px 16px}.special-late img.bonus-card-img{max-width:100%}.bonus-cardview{text-align:center}.bonus-cardview summary{text-align:left}.bonus-cardview .notice,.bonus-cardview .bonus-actions{padding:0 16px}

.x-flow{margin:16px auto 0;max-width:560px;padding:14px 16px;border:1px solid var(--line);background:#12131a99;text-align:left}.x-flow-title{margin:0 0 8px;color:var(--gold);font-size:13px;letter-spacing:.08em}.x-flow-steps{margin:0;padding-left:1.4em}.x-flow-steps li{margin:0 0 12px}.x-flow-steps small,.x-flow-share small{display:block;margin-top:4px;color:var(--muted);font-size:12px}.x-flow-state{font-size:13px;color:var(--muted)}.x-flow-state.is-ok{color:var(--gold)}.x-flow-share{margin:4px 0 0;padding-top:12px;border-top:1px dashed var(--line);font-size:13px}

.x-fold{border:1px solid var(--line);background:#12131a99;padding:0;margin:16px 0}.x-fold>summary{cursor:pointer;padding:12px 16px;color:var(--gold);font-size:14px;letter-spacing:.08em}.x-fold>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.x-fold .share-body{padding:0 16px 16px}

.result-sharefold{margin:18px 0}.result-sharefold .result-share-body{padding:0 16px 16px;text-align:center}.result-sharefold img.bonus-card-img{max-width:100%;margin:0 auto 14px}.result-share-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 16px}.result-sharefold .x-flow{text-align:left;margin:0 auto 14px;max-width:560px}.result-sharefold label{display:block;text-align:left;margin:10px 0 6px;font-size:13px;color:var(--gold)}.result-sharefold textarea{width:100%;box-sizing:border-box}.result-sharefold .notice{text-align:left}
.result-sharefold img.bonus-card-img{max-width:min(100%,760px)}

.hero-link{display:inline-block;margin:10px 0 0;padding:6px 12px;border:1px solid var(--gold);color:var(--gold);font-size:13px;letter-spacing:.06em;text-decoration:none;background:#0000002e}.hero-link:hover{background:#d5b47722}.result-sharefold #result-share-zoom{display:block;cursor:zoom-in}

.bonus-person-link{margin:12px 0 4px;text-align:center}
.alignment-hidden-note{margin:-6px 0 22px;padding:0 4px;font-size:12px;line-height:1.7}

.bonus-cardrows{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 16px 16px;text-align:left}.bonus-cardbtn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 16px;min-height:0}.bonus-cardbtn strong{font-size:17px}.bonus-cardbtn small{margin:0;font-size:12px;opacity:.85}.bonus-cardbtn.is-on,.bonus-cardbtn[aria-pressed=true]{border-color:#c5a367}@media(max-width:560px){.bonus-cardrows{gap:8px;margin:0 8px 14px}.bonus-cardbtn{padding:10px 10px}.bonus-cardbtn strong{font-size:15px}.bonus-cardbtn small{font-size:11px}}

.hero-copy .lead-site{margin-top:12px}
.analysis-grid.single-panel{grid-template-columns:1fr}.history-summary{margin:0 0 10px;font-weight:600}

.bonus-card-img,.special-late img{cursor:zoom-in}
.special-card-fold img.bonus-card-img,.special-late img.bonus-card-img{max-width:min(100%,760px);display:block;margin:0 auto}
.bonus-ta .bonus-timenote[hidden]{display:none}
/* おまけクイズ入口：書斎の背景絵（4:5の縦長を中央に置き、四方を溶かす） */
body:has(.bonus-intro){overflow-x:clip}
.bonus-intro{position:relative;isolation:isolate}
.bonus-intro::before{content:'';position:absolute;z-index:-1;top:-30px;left:50%;width:min(100vw,980px);aspect-ratio:4/5;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(22,21,29,.6),transparent 62%),url(images/bg/bonus-tall2.webp) center/cover no-repeat;opacity:.78;-webkit-mask-image:linear-gradient(transparent 0,#000 12%,#000 66%,transparent 100%),linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent 0,#000 12%,#000 66%,transparent 100%),linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);mask-composite:intersect}
@media(min-width:641px){.bonus-intro::before{top:-150px}}
@media(max-width:640px){.bonus-intro::before{width:100vw;opacity:.6;top:-20px}}
/* 逸伝ON: タイトルの関羽を、関索と妻四人の集合絵に切り替える（OFFは従来の関羽のまま） */
.landing.itsuden-hero .landing-art{background-image:linear-gradient(90deg,rgba(9,16,14,.97) 0%,rgba(9,16,14,.78) 24%,rgba(9,16,14,.2) 46%,rgba(9,16,14,.02)),linear-gradient(0deg,#101916 0%,transparent 34%),url('images/title/kansaku-group2.webp');background-size:cover,cover,auto 80%;background-position:center,center,right top}
.landing.itsuden-hero .landing-warm,.landing.itsuden-hero .landing-flame,.landing.itsuden-hero .landing-smoke{display:none}
@media(max-width:700px){.landing.itsuden-hero .landing-copy{padding-top:256px}.landing.itsuden-hero .landing-art{background-size:cover,100% auto;background-position:center,center top;background-image:linear-gradient(0deg,#101916 0%,rgba(9,16,14,.96) 32%,rgba(9,16,14,.55) 62%,rgba(9,16,14,.12) 100%),url('images/title/kansaku-group2.webp')}}
/* 逸伝ON: 舞う桃の花びら（絵の上・文字の下） */
.landing-petals{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;container-type:size}
@media(min-width:701px){.landing-petals{left:30%}}
.landing-petals i{position:absolute;left:var(--x);top:0;width:var(--w);height:calc(var(--w)*.62);border-radius:85% 0 85% 0/100% 0 100% 0;background:linear-gradient(135deg,#ffeceb 0%,#ffc2cf 62%,#f6a3b8 100%);box-shadow:0 0 9px rgba(255,205,215,.55);filter:blur(var(--b));opacity:0;will-change:transform,opacity;animation:petalDrift var(--t) linear var(--d) infinite}
@keyframes petalDrift{
 0%{transform:translate3d(0,-8cqh,0) rotate(0deg) rotateX(0deg);opacity:0}
 8%{opacity:.9}
 25%{transform:translate3d(var(--sw),22cqh,0) rotate(calc(var(--r)*.3)) rotateX(55deg)}
 50%{transform:translate3d(calc(var(--sw)*-.7),50cqh,0) rotate(calc(var(--r)*.6)) rotateX(-20deg)}
 75%{transform:translate3d(calc(var(--sw)*.9),78cqh,0) rotate(calc(var(--r)*.85)) rotateX(50deg)}
 92%{opacity:.85}
 100%{transform:translate3d(calc(var(--sw)*-.4),108cqh,0) rotate(var(--r)) rotateX(0deg);opacity:0}}
@media(max-width:700px){.landing-petals i:nth-child(n+16){display:none}}
@media(prefers-reduced-motion:reduce){.landing-petals{display:none}}
@supports not (height:1cqh){.landing-petals{display:none}}
/* 逸伝ON: 『花關索傳』の本を、集合絵の頭上に浮かべる（絵と同じ縦横比の箱の中に％で置く） */
.landing-book{position:absolute;top:0;right:0;height:80%;aspect-ratio:1200/1425;z-index:-1;pointer-events:none}
@media(max-width:700px){.landing-book{right:auto;left:0;width:100%;height:auto}}
.landing-book-item{position:absolute;left:35.5%;top:2%;width:29%;aspect-ratio:600/805;transform-origin:50% 60%;animation:bookIn .95s cubic-bezier(.2,.9,.3,1.25) .45s both,bookFloat 7s ease-in-out 1.5s infinite}
.landing-book-item img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
.landing-book-glow{position:absolute;left:-24%;top:-18%;width:148%;height:136%;border-radius:50%;background:radial-gradient(circle,rgba(255,206,130,.5) 0%,rgba(255,170,90,.18) 38%,transparent 66%);mix-blend-mode:screen;animation:bookGlow 4.6s ease-in-out infinite}
@keyframes bookIn{from{opacity:0;transform:translateY(-7%) scale(.78) rotate(-11deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-4deg)}}
@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2.4%) rotate(-2.2deg)}}
@keyframes bookGlow{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.landing-book-item{animation:none;transform:rotate(-4deg)}.landing-book-glow{animation:none;opacity:.8}}
/* おまけクイズ入口：灯りの揺らぎ（背景絵と同じ箱に重ね、座標は箱の幅 cqw で指定。炎は絵の約 (18cqw, 68cqw)） */
.bonus-lamp{position:absolute;z-index:-1;top:-150px;left:50%;width:min(100vw,980px);aspect-ratio:4/5;transform:translateX(-50%);pointer-events:none;container-type:inline-size}
@media(max-width:640px){.bonus-lamp{width:100vw;top:-20px}}
.bonus-lamp>*{position:absolute;display:block}
.bl-warm{left:17.9cqw;top:68.3cqw;width:64cqw;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,172,84,.22) 0%,rgba(255,146,64,.08) 38%,transparent 68%);mix-blend-mode:screen;animation:landFlicker 3.3s ease-in-out infinite}
.bl-halo{left:17.9cqw;top:67.6cqw;width:19cqw;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,222,150,.5) 0%,rgba(255,176,86,.22) 26%,rgba(255,140,60,.06) 48%,transparent 66%);mix-blend-mode:screen;animation:blFlicker 3.4s ease-in-out infinite}
.bl-flame{left:15cqw;top:65.2cqw;width:4.4cqw;height:6cqw;overflow:visible;filter:drop-shadow(0 0 .5cqw rgba(255,165,70,.5))}
.bl-flame svg{display:block;width:100%;height:100%;overflow:visible}
.bl-flame g{transform-box:fill-box;transform-origin:50% 100%}
.fl-out{animation:flOut 3.8s ease-in-out infinite}
.fl-mid{animation:flMid 2.7s ease-in-out infinite}
.fl-core{animation:flCore 1.9s ease-in-out infinite}
.fl-base{animation:flBase 3.2s ease-in-out infinite}
.bl-smoke{left:18.7cqw;top:64.6cqw;width:0;height:0}
.bl-smoke s{position:absolute;left:-.55cqw;top:-5cqw;width:1.1cqw;height:5.4cqw;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,rgba(240,234,222,.5) 0%,rgba(236,229,214,.18) 45%,transparent 72%);filter:blur(2px);opacity:0;animation:blSmoke 17s linear var(--d) infinite}
.bonus-lamp>i{left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#ffdca0;box-shadow:0 0 6px 1px rgba(255,190,106,.55);opacity:0;animation:blMote var(--t) linear var(--d) infinite}
@keyframes blFlicker{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}27%{opacity:.7;transform:translate(-50%,-50%) scale(.97)}41%{opacity:.95;transform:translate(-50%,-50%) scale(1.03)}58%{opacity:.72}73%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}88%{opacity:.78}}
@keyframes flOut{0%,100%{transform:skewX(-1.2deg) scale(1,1)}20%{transform:skewX(2.4deg) scale(.97,1.04)}45%{transform:skewX(-2.6deg) scale(1.02,.97)}70%{transform:skewX(1.6deg) scale(.985,1.03)}}
@keyframes flMid{0%,100%{transform:skewX(1deg) scale(1,1)}30%{transform:skewX(-2.2deg) scale(1.03,.96)}60%{transform:skewX(2.8deg) scale(.96,1.05)}}
@keyframes flCore{0%,100%{transform:scale(1,1);opacity:.95}35%{transform:scale(.94,1.06);opacity:1}70%{transform:scale(1.04,.95);opacity:.88}}
@keyframes flBase{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes blSmoke{0%{opacity:0;transform:translate(0,0) scale(.6,.5)}10%{opacity:.32}30%{transform:translate(calc(var(--sx)*1),-4cqw) scale(1,.9)}55%{opacity:.22;transform:translate(calc(var(--sx)*-.8),-8.5cqw) scale(1.5,1.2)}80%{opacity:.09;transform:translate(calc(var(--sx)*.9),-13cqw) scale(2.2,1.5)}100%{opacity:0;transform:translate(calc(var(--sx)*-.3),-16.5cqw) scale(2.8,1.7)}}
@keyframes blMote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.75}70%{opacity:.35}100%{opacity:0;transform:translate(var(--dx),-12cqw)}}
@media(prefers-reduced-motion:reduce){.bl-smoke,.bonus-lamp>i{display:none}.bl-warm,.bl-halo,.bl-flame g{animation:none}.bl-warm,.bl-halo{opacity:.85}}
@supports not (width:1cqw){.bonus-lamp{display:none}}
/* 逸伝ON: 背景の光（水玉のぼかし・光の筋・きらめき）を動かす層。集合絵と同じ縦横比の箱に％で置く */
.landing-fx{position:absolute;top:0;right:0;height:80%;aspect-ratio:1200/1425;z-index:-1;pointer-events:none;container-type:inline-size;mix-blend-mode:screen;overflow:hidden}
@media(max-width:700px){.landing-fx{right:auto;left:0;width:100%;height:auto}}
.landing-fx em{position:absolute;left:var(--x);top:-6%;width:var(--w);height:112%;transform-origin:50% 0;transform:rotate(15deg);background:linear-gradient(90deg,rgba(255,228,185,0),rgba(255,228,185,.2) 50%,rgba(255,228,185,0));-webkit-mask-image:linear-gradient(#000,transparent 82%);mask-image:linear-gradient(#000,transparent 82%);opacity:.5;will-change:transform,opacity;animation:fxRay var(--t) ease-in-out var(--d) infinite alternate}
.landing-fx s{position:absolute;left:var(--x);top:var(--y);width:var(--z);aspect-ratio:1;border-radius:50%;background:#fff3d6;box-shadow:0 0 6px 2px rgba(255,214,150,.7);opacity:0;animation:fxTwinkle var(--t) ease-in-out var(--d) infinite}
@keyframes fxRay{0%{transform:rotate(12deg);opacity:.2}100%{transform:rotate(19deg);opacity:1}}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}60%{opacity:.35}}
@media(max-width:700px){.landing-fx s:nth-of-type(n+11){display:none}}
@media(prefers-reduced-motion:reduce){.landing-fx em,.landing-fx u{animation:none}.landing-fx s{display:none}}
@supports not (width:1cqw){.landing-fx{display:none}}


/* v120 水玉を廃止し、光の明滅を強めた */
.landing-fx u{position:absolute;left:12%;top:14%;width:76%;height:52%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,210,150,.34) 0%,rgba(255,180,110,.12) 45%,transparent 70%);opacity:.5;will-change:opacity,transform;animation:fxBreath 7.5s ease-in-out infinite}
@keyframes fxBreath{0%,100%{opacity:.3;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
.landing-book-glow{animation:bookGlow 3.6s ease-in-out infinite}
@keyframes bookGlow{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.landing-book-glow2{position:absolute;left:-8%;top:-6%;width:116%;height:112%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.42) 0%,rgba(255,200,120,.12) 45%,transparent 68%);mix-blend-mode:screen;animation:bookGlow2 2.3s ease-in-out -.7s infinite}
@keyframes bookGlow2{0%,100%{opacity:.15}35%{opacity:.85}55%{opacity:.4}75%{opacity:.95}}
.landing-book-shine{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;background:linear-gradient(105deg,transparent 38%,rgba(255,240,200,.75) 50%,transparent 62%) -120% 0/60% 100% no-repeat;mix-blend-mode:screen;animation:bookShine 6.5s ease-in-out 2s infinite}
@keyframes bookShine{0%{background-position:-120% 0}45%,100%{background-position:220% 0}}
.landing-book-sp{position:absolute;inset:-10%;pointer-events:none}
.landing-book-sp s{position:absolute;left:var(--x);top:var(--y);width:5px;aspect-ratio:1;border-radius:50%;background:#fff3d6;box-shadow:0 0 7px 2px rgba(255,214,150,.8);opacity:0;animation:fxTwinkle 3.4s ease-in-out var(--d) infinite}
@media(prefers-reduced-motion:reduce){.landing-book-glow2,.landing-book-shine,.landing-book-sp{display:none}.landing-book-glow{animation:none;opacity:.8}}

/* v121 水玉：通常は表示。アドレス末尾に ?bokeh=0 を付けると非表示 */
.landing-fx b{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--c),.22) 0%,rgba(var(--c),.5) 58%,rgba(var(--c),0) 70%);opacity:.2;will-change:transform,opacity;animation:fxDrift var(--t) ease-in-out var(--d) infinite alternate,fxPulse calc(var(--t)*.7) ease-in-out var(--d) infinite alternate}
@keyframes fxDrift{0%{transform:translate(-50%,-50%)}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))}}
@keyframes fxPulse{0%{opacity:.1}100%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.landing-fx b{animation:none}}

/* 逸伝篇：検索時の勢力見出し */
.itsuden-camp{margin:30px 0 16px;padding:14px 0;border-top:1px solid var(--gold);border-bottom:1px solid var(--line);font-size:28px;letter-spacing:.09em}
.itsuden-camp small{font:12px var(--sans);color:var(--muted);margin-left:12px}
.itsuden-camp .eyebrow{display:block;margin:0 0 8px;letter-spacing:.2em}
@media(max-width:700px){.itsuden-camp{font-size:23px}}

/* 逸伝篇：人物ページの勢力チップ */
.chip.camp-chip{color:var(--camp);border-color:var(--camp)}

/* お気に入り（♡／♥）：金色の文字だけで、肖像を邪魔しない */
.fav-btn{position:absolute;right:10px;bottom:10px;z-index:3;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#0b0a10a8;border:1px solid #d5b47755;color:var(--gold);font-size:17px;line-height:1;cursor:pointer;user-select:none;transition:background .2s,border-color .2s,color .2s}
.fav-btn:hover,.fav-btn:focus-visible{border-color:var(--gold);background:#0b0a10e0;outline:none}
.fav-btn.is-fav{color:#f3d48c;background:#3b2230d0;border-color:var(--gold)}
.fav-toggle[aria-pressed="true"]{color:#f3d48c;border-color:var(--gold)}

.fav-summary{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin:0 0 14px;color:var(--muted);font-size:14px}.fav-summary>span:first-child{color:var(--gold)}.fav-sorts{display:inline-flex;gap:8px;align-items:center;font-size:13px}.fav-sort{background:none;border:0;padding:4px 2px;color:var(--muted);cursor:pointer;font:inherit}.fav-sort.active{color:var(--gold);text-decoration:underline;text-underline-offset:4px}
.fav-near{margin-top:44px}.fav-near h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:4px 0 8px}
.fav-near .notice{margin:0 0 18px}
.fav-drag-hint{color:var(--muted);font-size:12px;margin-right:10px}.fav-ghost{opacity:.35}.fav-flat .candidate{cursor:grab}
.reading-progress-actions{display:inline-flex;gap:14px;flex-wrap:wrap}#backup-dialog textarea{width:100%;box-sizing:border-box;margin:10px 0;padding:10px;background:#0e0d14;color:inherit;border:1px solid var(--line);font:inherit;font-size:13px}#backup-dialog input[type=file]{display:block;margin:10px 0;max-width:100%}#backup-dialog h3{margin:18px 0 4px;font-family:var(--serif)}
.me-page h1{margin:6px 0 10px}.me-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 8px}.me-pick{min-width:0}.me-label{font-family:var(--serif);color:var(--gold);margin:0 0 10px;font-size:15px}.me-sub{color:var(--muted);font-size:13px;margin:8px 0 0}.me-empty{border:1px dashed var(--line);padding:26px 16px;text-align:center;color:var(--muted);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.me-empty strong{font-family:var(--serif);font-size:26px;color:var(--ink,#f2ead8)}.me-verdict{text-align:center;font-family:var(--serif);margin:18px 0 6px;color:var(--gold)}.me-switch{display:block;margin:10px 0;font-size:13px;color:var(--muted)}.me-switch select{background:#0e0d14;color:inherit;border:1px solid var(--line);padding:6px 8px;font:inherit}.me-block{margin-top:52px}.me-more{margin:18px 0 0}.me-read{display:grid;grid-template-columns:1fr 1fr;gap:20px}.me-read p{margin:0 0 8px}.me-bar{height:8px;background:#ffffff14;border-radius:4px;overflow:hidden}.me-bar span{display:block;height:100%;background:var(--gold)}.me-factions{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--muted);font-size:14px}.me-factions li span:first-child{margin-right:8px;color:var(--gold)}.me-tease{list-style:none;margin:20px 0 0;padding:0;font-size:14px;color:var(--muted)}.me-tease li{padding:8px 0;border-bottom:1px solid #d5b47722}.me-tease em{color:var(--gold);font-style:normal}.me-tease .idx-q{color:var(--gold);font-family:var(--serif)}@media(max-width:560px){.me-read{grid-template-columns:1fr}}
.me-compare{max-width:640px}.me-verdict{text-align:left;max-width:640px}
@media(max-width:700px){header nav{flex-wrap:nowrap;gap:12px}header nav a,header nav .text-button{font-size:12px;line-height:1.4;padding:5px 0 9px;white-space:nowrap}}@media(max-width:400px){header nav a span{display:none}}
@media(max-width:340px){header nav{gap:6px}header nav a,header nav .text-button{font-size:11px}}
.me-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;margin:0 0 6px}.me-toolbar .notice{margin:0}.me-tools{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px}.me-tools .secondary{padding:7px 12px;font-size:13px}.me-page h1{margin:2px 0 6px}.me-compare{max-width:520px;margin:16px 0 6px}.me-verdict{max-width:520px;margin:12px 0 4px}.me-block{margin-top:34px}
.me-compare{max-width:760px;gap:14px;margin:14px 0 4px}.me-label{margin:0 0 6px;font-size:14px}.me-mini{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:#0e0d1488;padding:8px;color:inherit;text-decoration:none}.me-mini:hover{border-color:var(--gold)}.me-mini-img{flex:none;width:72px}.me-mini-img .portrait{width:72px}.me-mini-body{display:flex;flex-direction:column;min-width:0;gap:2px}.me-mini-body strong{font-family:var(--serif);font-size:20px;color:var(--gold)}.me-mini-body span{font-size:12px;color:var(--muted)}.me-mini-body small{font-size:12px;color:var(--muted)}.me-empty{min-height:0;padding:14px;flex-direction:column;gap:6px;align-items:flex-start;text-align:left}.me-empty strong{font-size:20px}.me-verdict{margin:8px 0 2px;max-width:760px}.me-block{margin-top:24px}.me-block .section-heading{margin-bottom:8px}.me-block .section-heading h2{margin:2px 0}@media(max-width:560px){.me-compare{grid-template-columns:1fr}}
.me-mini-img .portrait{height:92px!important;min-height:0!important;width:72px;border:1px solid var(--line)}.me-mini-img .portrait-name,.me-mini-img .portrait-note,.me-mini-img .portrait-mark{display:none}
.me-page{padding-top:0}.me-page>.eyebrow{margin:0}.me-page h1{font-size:clamp(26px,4vw,34px);margin:0 0 4px}.me-verdict{font-size:15px}.me-block .section-heading h2{font-size:24px}

.me-mini{padding:10px;gap:14px}.me-mini-img,.me-mini-img .portrait{width:96px}.me-mini-img .portrait{height:124px!important}.me-mini-body strong{font-size:24px}.me-mini-body span,.me-mini-body small{font-size:13px}.me-compare{max-width:860px}
.me-fav .candidate-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}.me-fav .candidate .portrait{height:112px}.me-fav .candidate-body{padding:8px 10px 10px}.me-fav .candidate-meta,.me-fav .candidate .catch,.me-fav .candidate .alignment-tag,.me-fav .candidate .bio{display:none}.me-fav .candidate h3{font-size:19px;margin:0;letter-spacing:.08em}.me-fav .fav-btn{width:26px;height:26px;right:6px;bottom:6px;font-size:15px}.me-fav .read-mark{width:22px;height:22px;right:6px;top:6px}.me-fav .banner{transform:scale(.85);transform-origin:top left}
@media(max-width:560px){.me-compare{grid-template-columns:1fr 1fr;gap:8px}.me-mini{padding:6px;gap:8px}.me-mini-img,.me-mini-img .portrait{width:56px}.me-mini-img .portrait{height:74px!important}.me-mini-body strong{font-size:18px}.me-mini-body>span{display:none}.me-mini-body small{font-size:11px}.me-label{font-size:13px}.me-verdict{font-size:13px}.me-fav .candidate-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.me-fav .candidate .portrait{height:92px}.me-fav .candidate h3{font-size:16px}.me-fav .banner{transform:scale(.7)}.me-toolbar .notice{font-size:12px}}
.me-mini{padding:12px;gap:18px}.me-mini-img,.me-mini-img .portrait{width:128px}.me-mini-img .portrait{height:170px!important}.me-mini-body{gap:5px}.me-mini-body strong{font-size:30px;letter-spacing:.08em}.me-mini-body span{font-size:14px}.me-mini-body small{font-size:13px}.me-compare{max-width:980px;gap:18px}.me-verdict{font-size:14px;margin:6px 0 0}.me-page .me-block{margin-top:20px}
@media(max-width:560px){.me-mini{padding:6px;gap:8px}.me-mini-img,.me-mini-img .portrait{width:64px}.me-mini-img .portrait{height:86px!important}.me-mini-body strong{font-size:20px}.me-compare{gap:8px}.me-verdict{font-size:13px}}
.me-compare{max-width:540px;gap:14px;margin:12px 0 4px}.me-empty{min-height:120px;padding:16px;align-items:center;text-align:center}.me-label{margin:0 0 6px}.me-sub{margin:6px 0 0;font-size:13px}@media(max-width:560px){.me-compare{grid-template-columns:1fr 1fr;gap:8px}.me-compare .candidate .portrait{height:150px}.me-compare .candidate-body{padding:10px}.me-compare .candidate h3{font-size:20px}.me-compare .candidate .catch{font-size:12px}}
.me-compare{max-width:none;grid-template-columns:repeat(2,minmax(0,276px));gap:16px}@media(max-width:560px){.me-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.me-compare .candidate .portrait{height:168px}.me-compare .candidate-body{padding:14px 12px}.me-compare .candidate h3{font-size:25px}.me-compare .candidate .catch{font-size:inherit}}
.me-page .result-sharefold{margin:14px 0 0;max-width:760px}
.me-share-opt{display:inline-flex;gap:8px;align-items:center;margin:0 0 8px;font-size:14px}
.me-more-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;border:1px dashed var(--gold);background:#0e0d1466;color:var(--gold);text-decoration:none;font:inherit;cursor:pointer;padding:10px;text-align:center}.me-more-tile:hover{background:#1b1826}.me-more-tile strong{font-family:var(--serif);font-size:26px}.me-more-tile span{font-size:13px;color:var(--muted)}.me-fav .candidate-grid>.me-more-tile{min-height:0}
.me-share-opts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 8px}.me-share-opts .me-share-opt{margin:0}

.filter.its-toggle{border-style:dashed;margin-left:6px}.filter.its-toggle.active{border-style:solid}
.filter.its-toggle.is-idle{opacity:.55}
.bgm-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;font:600 11.5px/1 var(--sans,inherit);letter-spacing:.08em;color:#bdb1b9;background:#17151dcc;border:1px solid #bc925655;border-radius:999px;cursor:pointer;box-shadow:0 3px 14px #0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bgm-toggle .bgm-note{font-size:14px;color:#8d8390}
.bgm-toggle:hover,.bgm-toggle:focus-visible{border-color:var(--gold,#c5a367);color:#f1e3c4}
.bgm-toggle[data-state="on"]{color:#f1e3c4;border-color:var(--gold,#c5a367);box-shadow:0 0 0 1px #c5a36733,0 3px 18px #c5a36733}
.bgm-toggle[data-state="on"] .bgm-note{color:var(--gold,#c5a367);animation:bgmpulse 2.4s ease-in-out infinite}
.bgm-toggle[data-state="wait"]{color:#e8d6aa;border-style:dashed;border-color:var(--gold,#c5a367)}
@keyframes bgmpulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.bgm-toggle[data-state="on"] .bgm-note{animation:none}}
@media (max-width:640px){.bgm-toggle{padding:6px 11px}}
.bgm-toggle[data-state="load"]{color:#e8d6aa;border-color:var(--gold,#c5a367)}.bgm-toggle[data-state="load"] .bgm-note{color:var(--gold,#c5a367);animation:bgmpulse .9s ease-in-out infinite}
/* BGM：ボタンと曲の一覧 */
.bgm-dock{position:fixed;left:14px;bottom:14px;z-index:25;display:flex;align-items:center;gap:6px}
.bgm-list-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;font:600 11.5px/1 var(--sans,inherit);letter-spacing:.08em;color:#bdb1b9;background:#17151dcc;border:1px solid #bc925655;border-radius:999px;cursor:pointer;box-shadow:0 3px 14px #0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bgm-list-btn:hover,.bgm-list-btn:focus-visible,.bgm-list-btn[aria-expanded="true"]{border-color:var(--gold,#c5a367);color:#f1e3c4}
.bgm-panel{position:absolute;left:0;bottom:calc(100% + 8px);width:min(310px,calc(100vw - 20px));padding:8px;background:#17151df5;border:1px solid #bc925666;border-radius:14px;box-shadow:0 8px 28px #000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bgm-panel[hidden]{display:none}
.bgm-tracks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bgm-track{display:flex;align-items:baseline;gap:8px;width:100%;padding:9px 10px;font:inherit;font-size:13px;text-align:left;color:#cfc4cb;background:transparent;border:0;border-left:2px solid transparent;border-radius:8px;cursor:pointer}
.bgm-track:hover,.bgm-track:focus-visible{background:#ffffff0f;color:#f1e3c4}
.bgm-track[aria-current="true"]{color:#f1e3c4;background:#c5a36718;border-left-color:var(--gold,#c5a367)}
.bgm-track.is-playing .bgm-tn::before{content:"♪ ";color:var(--gold,#c5a367)}
.bgm-tn{flex:1;min-width:0;letter-spacing:.06em}
.bgm-tk{font-size:10.5px;color:#9d929b;letter-spacing:.04em}
.bgm-td{font-size:11px;color:#8d8390;font-variant-numeric:tabular-nums}
.bgm-mode{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:6px;padding:9px 10px;font:inherit;font-size:12px;text-align:left;color:#b5aab2;background:transparent;border:0;border-top:1px solid #bc925633;border-radius:0 0 8px 8px;cursor:pointer}
.bgm-mode:hover,.bgm-mode:focus-visible{color:#f1e3c4}
@media (max-width:640px){.bgm-dock{left:10px;bottom:10px}.bgm-list-btn{padding:6px 10px}}
.bgm-th{margin-left:7px;font-size:10.5px;color:#c5a367;letter-spacing:.04em;white-space:nowrap}
.bgm-track:not([aria-current="true"]) .bgm-th{opacity:.8}
.bgm-sw{position:relative;flex:none;width:32px;height:18px;border-radius:999px;background:#ffffff1f;border:1px solid #bc925655;transition:background .18s,border-color .18s}
.bgm-sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#9d929b;transition:transform .18s,background .18s}
.bgm-mode[aria-checked="true"]{color:#f1e3c4}
.bgm-mode[aria-checked="true"] .bgm-sw{background:#c5a36733;border-color:var(--gold,#c5a367)}
.bgm-mode[aria-checked="true"] .bgm-sw::after{transform:translateX(14px);background:var(--gold,#c5a367)}
.bgm-rep{font-size:13px;line-height:1;color:var(--gold,#c5a367)}
.bgm-rep[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.bgm-sw,.bgm-sw::after{transition:none}}
.bgm-chip{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;align-items:center;gap:10px;max-width:min(330px,calc(100vw - 20px));padding:8px 8px 8px 13px;font-size:12px;letter-spacing:.04em;color:#f1e3c4;background:#17151df5;border:1px solid var(--gold,#c5a367);border-radius:999px;box-shadow:0 6px 22px #000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:bgmchip .35s ease-out}
.bgm-chip[hidden]{display:none}
.bgm-chip-t{white-space:nowrap}
.bgm-chip-b{flex:none;padding:5px 10px;font:inherit;font-size:11.5px;color:#d8caa2;background:transparent;border:1px solid #bc925666;border-radius:999px;cursor:pointer}
.bgm-chip-b:hover,.bgm-chip-b:focus-visible{color:#fff3d6;border-color:var(--gold,#c5a367)}
@keyframes bgmchip{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.bgm-chip{animation:none}}
@media (max-width:420px){.bgm-chip{font-size:11.5px;gap:8px;padding-left:11px}}
.bgm-toggle[data-state="wait"] .bgm-note{color:var(--gold,#c5a367);animation:bgmpulse 1.6s ease-in-out infinite}
/* BGM：一時停止・ミュート・音量 */
.bgm-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:0;color:#bdb1b9;background:#17151dcc;border:1px solid #bc925655;border-radius:50%;cursor:pointer;box-shadow:0 3px 14px #0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bgm-ic[hidden]{display:none}
.bgm-ic:hover,.bgm-ic:focus-visible{border-color:var(--gold,#c5a367);color:#f1e3c4}
.bgm-ic[aria-pressed="true"]{color:#f1e3c4;border-color:var(--gold,#c5a367);background:#c5a36722}
.bgm-toggle[data-state="paused"]{color:#bdb1b9;border-color:#bc925677}
.bgm-toggle[data-state="paused"] .bgm-note{color:#8d8390;animation:none}
.bgm-dock[data-muted="1"] .bgm-toggle[data-state="on"] .bgm-note{color:#8d8390;animation:none}
.bgm-vol{display:flex;align-items:center;gap:10px;margin-top:6px;padding:9px 10px;font-size:12px;color:#b5aab2;border-top:1px solid #bc925633}
.bgm-vol-l{flex:none}
.bgm-vol input[type=range]{flex:1;min-width:0;height:22px;margin:0;accent-color:var(--gold,#c5a367);cursor:pointer}
.bgm-vol-v{flex:none;width:36px;text-align:right;font-size:11px;color:#9d929b;font-variant-numeric:tabular-nums}
.bgm-vol-n{font-size:11.5px;color:#9d929b}
.bgm-vol+.bgm-mode{margin-top:0}
@media (max-width:640px){.bgm-ic{width:28px;height:28px}}
/* BGM：歌詞と日本語訳 */
.bgm-lyrow{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:6px;padding:10px;font:inherit;font-size:12.5px;text-align:left;color:#d8caa2;background:transparent;border:0;border-top:1px solid #bc925633;cursor:pointer}
.bgm-lyrow:hover,.bgm-lyrow:focus-visible{color:#fff3d6}
.bgm-vol{margin-top:0}
.bgm-ly{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;flex-direction:column;width:min(370px,calc(100vw - 20px));max-height:min(74vh,560px);background:#17151df7;border:1px solid #bc925666;border-radius:14px;box-shadow:0 8px 28px #000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden}
.bgm-ly[hidden]{display:none}
.bgm-ly-hd{display:flex;align-items:center;gap:8px;padding:8px 8px 0 8px}
.bgm-ly-sp{flex:1}
.bgm-ly-back,.bgm-ly-tr,.bgm-ly-x{font:inherit;font-size:12px;color:#b5aab2;background:transparent;border:0;cursor:pointer;padding:6px 8px;border-radius:8px}
.bgm-ly-back:hover,.bgm-ly-back:focus-visible,.bgm-ly-x:hover,.bgm-ly-x:focus-visible{color:#fff3d6;background:#ffffff0f}
.bgm-ly-x{font-size:18px;line-height:1;padding:4px 10px}
.bgm-ly-tr{display:inline-flex;align-items:center;gap:8px}
.bgm-ly-tr[aria-checked="true"]{color:#f1e3c4}
.bgm-ly-tr[aria-checked="true"] .bgm-sw{background:#c5a36733;border-color:var(--gold,#c5a367)}
.bgm-ly-tr[aria-checked="true"] .bgm-sw::after{transform:translateX(14px);background:var(--gold,#c5a367)}
.bgm-ly-name{margin:4px 16px 2px;font-size:16px;font-weight:600;letter-spacing:.08em;color:#f1e3c4}
.bgm-ly-name small{margin-left:9px;font-size:11px;font-weight:400;color:var(--gold,#c5a367);letter-spacing:.04em}
.bgm-ly-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 16px 16px;outline:0}
.bgm-ly-sec+.bgm-ly-sec{margin-top:16px}
.bgm-ly-l{margin:0 0 7px}
.bgm-ly-z{display:block;font-size:15px;line-height:1.7;letter-spacing:.07em;color:#efe3c8;white-space:pre-wrap}
.bgm-ly-j{display:block;font-size:11.5px;line-height:1.6;color:#a89ea6}
.bgm-ly[data-tr="off"] .bgm-ly-j{display:none}
.bgm-ly[data-tr="off"] .bgm-ly-l{margin-bottom:3px}
.bgm-ly-note{margin:14px 0 0;font-size:11px;line-height:1.6;color:#8d8390}
.bgm-ly-inst{margin:18px 0 8px;font-size:13px;line-height:1.8;color:#cfc4cb}

.bgm-mini{display:none;width:32px;height:32px;padding:0;font-size:16px;border-radius:50%;color:#8d8390}
.bgm-dock[data-min="1"] .bgm-toggle,.bgm-dock[data-min="1"] .bgm-list-btn,.bgm-dock[data-min="1"] .bgm-min-btn,.bgm-dock[data-min="1"] .bgm-panel,.bgm-dock[data-min="1"] .bgm-ly,.bgm-dock[data-min="1"] #bgm-pause,.bgm-dock[data-min="1"] #bgm-mute{display:none}
.bgm-dock[data-min="1"] .bgm-mini{display:inline-flex}
.bgm-mini[data-state="on"],.bgm-mini[data-state="load"]{color:var(--gold,#c5a367);border-color:var(--gold,#c5a367);animation:bgmpulse 2.4s ease-in-out infinite}
.bgm-mini[data-state="paused"]{color:#bdb1b9}
.bgm-mini[data-state="wait"]{color:#f1e3c4;border:1px dashed var(--gold,#c5a367);box-shadow:0 0 0 3px #c5a36733,0 3px 18px #c5a36755;animation:bgmpulse 1.4s ease-in-out infinite}
.bgm-dock[data-muted="1"] .bgm-mini[data-state="on"]{color:#8d8390;animation:none}
@media (prefers-reduced-motion:reduce){.bgm-mini{animation:none!important}}
@media (max-width:640px){.bgm-mini{width:30px;height:30px}}
.bgm-chip{width:max-content}

.bgm-seek{display:flex;align-items:center;gap:8px;padding:9px 10px 3px;border-top:1px solid #bc925633;font-size:11px;color:#9d929b;font-variant-numeric:tabular-nums}
.bgm-seek-c,.bgm-seek-t{flex:none;min-width:30px}
.bgm-seek-t{text-align:right}
.bgm-seek input[type=range]{flex:1;min-width:0;height:22px;margin:0;touch-action:none;accent-color:var(--gold,#c5a367);cursor:pointer}
.bgm-seek input[type=range]:disabled{cursor:default;opacity:.45}
.bgm-seek+.bgm-vol{border-top:0}
.bgm-seek-c,.bgm-vol-l{width:34px;min-width:0}
.bgm-seek-t{width:36px;min-width:0}

/* 図鑑：サムネイルの大きさ */
.gal-size{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;color:var(--muted)}
.gal-size-b{min-width:34px;padding:5px 10px;font:inherit;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.gal-size-b:hover,.gal-size-b:focus-visible{color:var(--gold);border-color:var(--gold)}
.gal-size-b.active{color:var(--gold);border-color:var(--gold);background:#c5a36718}
.gallery-compact .candidate-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.gallery-compact .candidate .portrait{height:96px}
.gallery-compact .candidate-body{padding:6px 8px 8px}
.gallery-compact .candidate-meta,.gallery-compact .candidate .catch,.gallery-compact .candidate .alignment-tag,.gallery-compact .candidate .bio{display:none}
.gallery-compact .candidate h3{font-size:16px;margin:0;letter-spacing:.06em}
.gallery-compact .fav-btn{width:24px;height:24px;right:4px;bottom:4px;font-size:14px}
.gallery-compact .read-mark{width:20px;height:20px;right:4px;top:4px}
.gallery-compact .banner{transform:scale(.8);transform-origin:top left}

/* 鑑賞モード */
.viewer{position:fixed;inset:0;z-index:22;background:radial-gradient(ellipse at 50% 40%,#1b1a24,#0a0a0f 75%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 18px 72px;box-sizing:border-box;cursor:default}
.viewer[hidden]{display:none}
.viewer.is-idle{cursor:none}
.viewer-stage{width:min(1180px,100%);max-height:100%;display:flex;align-items:center;justify-content:center}
.viewer-card{width:100%;transition:opacity .26s ease,transform .26s ease;opacity:1;transform:none}
.viewer-card.is-out{opacity:0;transform:translateY(6px)}
.viewer-card .hero{min-height:min(560px,calc(100vh - 150px))}
.viewer-card .hero-portrait{min-height:min(560px,calc(100vh - 150px))}
.viewer-progress{position:fixed;left:0;right:0;top:0;height:3px;background:#ffffff14}
.viewer-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#bc9559,#e7ca8d);transition:width .12s linear}
.viewer-ui{position:fixed;left:0;right:0;bottom:0;padding:12px 18px 14px;background:linear-gradient(to top,#000000d9,#00000000);transition:opacity .35s;color:var(--ink)}
.viewer-ui.is-hidden{opacity:0;pointer-events:none}.result-return{transition:opacity .4s}body.viewer-idle .result-return{opacity:0;pointer-events:none}
.viewer-row{display:flex;align-items:center;justify-content:center;gap:18px 26px;flex-wrap:wrap;max-width:1180px;margin:0 auto}
.viewer-nav{display:flex;align-items:center;gap:8px}
.viewer-btn{border:1px solid var(--line);background:#16151dcc;color:var(--ink);min-width:40px;height:38px;padding:0 12px;font-size:16px;line-height:1;cursor:pointer;transition:border-color .15s,background .15s}
.viewer-btn:hover,.viewer-btn:focus-visible{border-color:var(--gold);background:#2a2433}
.viewer-close{font-size:20px}
.viewer-count{color:var(--muted);font-size:13px;letter-spacing:.08em;margin-left:8px;white-space:nowrap}
.viewer-opts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.viewer-opts label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);letter-spacing:.06em}
.viewer-opts select{background:#16151d;color:var(--ink);border:1px solid var(--line);padding:6px 8px;font:inherit;font-size:13px}
.viewer-card .viewer-special{margin:0}.viewer-card .special-hero{min-height:min(560px,calc(100vh - 150px))}.viewer-card .special-copy .special-hint{margin-top:auto}
.viewer-end{display:flex;align-items:center;gap:12px}
.viewer-end .text-link{font-size:13px}
.viewer-hint{text-align:center;color:#8d826c;font-size:11px;letter-spacing:.08em;margin:10px 0 0}
.viewer-empty{padding:60px 20px;text-align:center;font-size:16px;line-height:2}
.viewer-empty .muted{color:var(--muted);font-size:13px}
body.viewer-open{overflow:hidden}
.viewer-open-btn{white-space:nowrap}
@media(max-width:760px){.viewer{padding:8px 8px 150px;justify-content:flex-start}.viewer-stage{overflow:auto;align-items:flex-start;max-height:calc(100vh - 160px);-webkit-overflow-scrolling:touch}.viewer-opts{gap:6px 10px}.viewer-opts select{padding:5px 4px;font-size:12px}.viewer-opts label{gap:4px;font-size:11px}.viewer-card .hero{min-height:0}.viewer-card .special-hero{min-height:0}.viewer-card .hero-portrait{min-height:min(440px,58vh)}.viewer-ui{padding:8px 10px 70px}.viewer-row{gap:8px 12px}.viewer-hint{display:none}.viewer-count{display:none}.viewer-end{width:100%;justify-content:flex-end}}

/* 隠し人物のページ：人物のページ（.hero）と同じ肖像の幅にそろえる */
.result-card .special-hero{grid-template-columns:minmax(0,44%) minmax(0,1fr)}
.result-card .special-hero .portrait.large{aspect-ratio:auto;height:auto;min-height:520px}
@media (max-width:720px){.result-card .special-hero{grid-template-columns:1fr}.result-card .special-hero .portrait.large{aspect-ratio:3/4;min-height:0}}

.about-staff{display:flex;gap:16px;align-items:flex-start;margin-top:10px}.about-staff-img{flex:none;padding:0;border:0;background:none;cursor:zoom-in;line-height:0}.about-staff img{width:132px;height:auto;border-radius:8px;border:1px solid var(--line);transition:transform .2s}.about-staff-img:hover img,.about-staff-img:focus-visible img{transform:scale(1.03)}.about-staff p{margin:0 0 8px}@media(max-width:520px){.about-staff{flex-direction:column}.about-staff img{width:100%;max-width:260px}.about-staff-img{width:100%}}

dialog.kuro-view{padding:0;border:1px solid var(--line);border-radius:12px;background:#0e0d14;width:fit-content;max-width:92vw;max-height:92vh;overflow:hidden;margin:auto}.kuro-view::backdrop{background:rgba(5,4,10,.82)}dialog.kuro-view img{display:block;width:auto;height:auto;max-width:calc(92vw - 2px);max-height:calc(92vh - 2px);cursor:zoom-out}.kuro-view .close{position:absolute;top:8px;right:8px;z-index:1}
/* 逸伝の勢力バッジ: 金色の地に淡い文字だと読みにくいので、濃い地に明るい文字にする */
[data-theme="逸伝"] .banner{background:linear-gradient(90deg,#1e150b,#4a3520,#1e150b);color:#fff8e6;text-shadow:0 1px 3px #000;border-color:#e8c58a}
/* 特別人物の人物ページ: 金枠より上に札を重ねる */
.special-hero .banner{z-index:6}
/* 特別人物の人物ページ: 札の位置を、逸伝・魏の人物ページ（上に少しはみ出す位置）と同じにする */
.special-hero .portrait .banner{left:-4px;top:-30px}
/* 図鑑サムネの頭が切れる人物は、絵の上端を見せる（人物ページの大きな絵は変えない） */
.portrait:not(.large)[data-portrait="申包胥"] img,.portrait:not(.large)[data-portrait="公孫康"] img{object-position:50% 0%}
/* 特別人物の人物ページ: 札が絵の枠の外にはみ出せるようにする（韓浩の魏の札と同じ位置） */
.special-hero .portrait{overflow:visible}

/* 鍾離牧：サムネで顔が切れないよう上寄せ */
.portrait:not(.large)[data-portrait="鍾離牧"] img{object-position:50% 12%}
/* 吾彦：サムネで顔が切れないよう上寄せ */
.portrait:not(.large)[data-portrait="吾彦"] img{object-position:50% 20%}
/* 吾彦：図鑑のカードではバストアップに（顔を大きく、背後の晋の船は残す）。小さな一覧の枠には効かせない */
.candidate .portrait[data-portrait="吾彦"] img{transform:scale(1.7);transform-origin:36% 24%}
.me-mini-img .portrait[data-portrait="吾彦"] img,.me-fav .candidate .portrait[data-portrait="吾彦"] img{transform:none}