:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;color:#123b2b;background:#f0f7f2;font-size:16px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 90% 0%,#d5eedc 0,transparent 30rem),#f0f7f2}button,a{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}a{color:inherit}.shell{max-width:1180px;margin:auto;padding:0 24px}.top{height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c8dccd}.brand{text-decoration:none;font-size:1.06rem;font-weight:950;letter-spacing:.12em}.brand span{color:#229461;margin-left:.55em;font-size:.8rem}.top-note{font-size:.78rem;letter-spacing:.16em;font-weight:750;color:#64816d}main{min-height:calc(100vh - 158px)}footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #c8dccd;padding:25px 0 35px;color:#587260;font-size:.78rem;line-height:1.6}.loading{padding:80px 0}.hero{padding:64px 0 42px;display:grid;grid-template-columns:1.5fr .7fr;gap:35px;align-items:end}.eyebrow{color:#229461;font-size:.82rem;letter-spacing:.19em;font-weight:900}.hero h1{font-size:clamp(2.5rem,6.5vw,5.4rem);line-height:1.16;letter-spacing:-.065em;margin:14px 0 22px;font-weight:950}.hero h1 em{font-style:normal;color:#229461}.hero p{font-size:1.04rem;line-height:1.85;max-width:720px;color:#4e6a5a;margin:0}.hero-side{border-left:3px solid #229461;padding:8px 0 8px 23px;color:#597261;line-height:1.8}.hero-side strong{display:block;color:#123b2b;font-size:3.9rem;line-height:1;font-family:Georgia,serif;font-weight:500}.hero-side small{font-size:.84rem}.start-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 52px}.btn{border:0;border-radius:14px;padding:16px 25px;background:#176347;color:white;font-weight:850;min-height:52px;box-shadow:0 8px 20px #17634726}.btn:hover:not(:disabled){background:#21815b}.btn.secondary{background:white;color:#176347;border:1px solid #bed9c6;box-shadow:none}.btn.accent{background:#229461}.btn.accent:hover{background:#187c4d}.textbtn{border:0;background:none;color:#55745d;text-decoration:underline;padding:10px;font-size:.85rem}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 55px}.how div{background:white;border:1px solid #d3e5d8;border-radius:18px;padding:24px;line-height:1.65}.how b{display:block;font-size:1.08rem;margin-bottom:7px}.how span{font-size:.9rem;color:#5e7563}.how small{display:block;color:#229461;font-weight:900;letter-spacing:.12em;margin-bottom:5px}.stage-head{padding:37px 0 20px;display:flex;justify-content:space-between;align-items:end;gap:20px}.stage-head h1{margin:7px 0 8px;font-size:clamp(1.9rem,4.5vw,3.3rem);line-height:1.2;letter-spacing:-.05em}.stage-head p{margin:0;color:#5e7563;line-height:1.6}.counter{font-family:Georgia,serif;font-size:2rem;white-space:nowrap;color:#176347}.counter small{font-family:inherit;font-size:.9rem;color:#77937e}.progress{height:7px;background:#d3e5d8;border-radius:10px;overflow:hidden;margin:9px 0 27px}.progress i{height:100%;display:block;background:#229461;border-radius:10px;transition:width .3s}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.card{position:relative;min-height:173px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;background:white;border:2px solid #d3e5d8;border-radius:19px;padding:19px;color:#164a34;transition:transform .15s,border-color .15s,box-shadow .15s}.card:hover{transform:translateY(-2px);border-color:#8fc5a0}.card.selected{border-color:#229461;background:#f3fff6;box-shadow:0 5px 20px #2294611b}.card .mark{font-size:.75rem;font-weight:800;letter-spacing:.1em;color:#708f76}.card .check{position:absolute;right:16px;top:16px;width:25px;height:25px;border:2px solid #c8dccd;border-radius:50%;display:grid;place-items:center;color:white;font-size:.8rem}.card.selected .check{background:#229461;border-color:#229461}.card .name{font-size:1.35rem;font-weight:900;letter-spacing:-.045em;line-height:1.3}.card .meta{font-size:.8rem;color:#647e6c}.actions{position:sticky;bottom:0;margin:30px -24px 0;padding:17px 24px;background:#f0f7f2f2;backdrop-filter:blur(12px);border-top:1px solid #c8dccd;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2}.actions p{margin:0;color:#516e5b;font-size:.9rem}.actions .right{display:flex;gap:9px;align-items:center}.actions .btn{padding:13px 19px;min-height:48px}.shortlist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 20px}.rank-item{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #d3e5d8;border-radius:16px;padding:13px 15px;min-height:83px}.rank-num{font-family:Georgia,serif;font-size:1.6rem;color:#229461;width:32px}.rank-name{font-weight:900;font-size:1.08rem;flex:1}.rank-meta{display:block;font-weight:400;color:#708f76;font-size:.75rem;margin-top:3px}.move{display:flex;flex-direction:column;gap:3px}.move button{border:1px solid #d3e5d8;border-radius:6px;background:#f7fcf8;width:30px;height:27px;color:#176347}.result-head{text-align:center;padding:48px 0 22px}.result-head h1{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.06em;margin:10px 0}.result-head p{color:#587260}.result-board{background:#11412e;padding:27px;border-radius:24px;color:white;margin:12px 0 28px;box-shadow:0 22px 50px #11412e2b}.board-top{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid #ffffff44;padding-bottom:18px;margin-bottom:18px}.board-top strong{font-size:1.25rem;letter-spacing:.08em}.board-top span{font-size:.76rem;letter-spacing:.14em;color:#bbdec6}.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.board-card{min-height:110px;padding:16px 17px;background:#ffffff13;border:1px solid #ffffff35;border-radius:13px;display:flex;flex-direction:column;justify-content:space-between}.board-card b{font:italic 1.4rem Georgia,serif;color:#69d399}.board-card strong{font-size:1.17rem}.board-card small{color:#bbdec6}.empty{padding:36px;text-align:center;color:#587260;border:1px dashed #b7d7c0;border-radius:18px;background:#fff}.notice{font-size:.83rem;color:#5f7765;line-height:1.6;margin:25px 0 45px}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}@media(max-width:760px){.shell{padding:0 16px}.top{height:66px}.top-note{display:none}.hero{padding-top:42px;display:block}.hero-side{margin-top:28px}.how{grid-template-columns:1fr}.how div{padding:17px}.grid{grid-template-columns:repeat(2,1fr);gap:9px}.card{min-height:147px;padding:14px}.card .name{font-size:1.12rem}.stage-head{padding-top:28px}.counter{font-size:1.35rem}.shortlist{grid-template-columns:1fr}.actions{margin-left:-16px;margin-right:-16px;padding:11px 16px;align-items:stretch}.actions p{font-size:.76rem;align-self:center}.actions .btn{font-size:.86rem;padding:10px 13px}.board-grid{gap:6px}.result-board{padding:15px}.board-card{padding:11px;min-height:95px}.board-card strong{font-size:.93rem}.board-card b{font-size:1.1rem}.board-card small{font-size:.65rem}footer{display:block}footer span{display:block;margin-bottom:6px}}@media(max-width:380px){.actions p{max-width:80px}.card .name{font-size:1rem}.board-card strong{font-size:.84rem}}
/* Portrait cards */
.card-wrap{min-width:0;display:flex;flex-direction:column;gap:5px}
.card-wrap .card{width:100%;padding:0;min-height:0;display:block;overflow:hidden;border-color:#c8dccd;background:#fff;box-shadow:0 5px 18px #11412e0d}
.card-wrap .card.selected{border-color:#229461;background:#f3fff6;box-shadow:0 7px 24px #22946125}
.photo-area{display:block;width:100%;aspect-ratio:1/1.06;background:linear-gradient(135deg,#d7eede,#a8d7b8);overflow:hidden}
.portrait{width:100%;height:100%;display:block;object-fit:cover;object-position:center 28%}
.photo-empty{height:100%;display:grid;place-items:center;text-align:center;color:#4b8762;font:bold .78rem/1.7 Georgia,serif;letter-spacing:.17em}
.card-body{display:block;padding:16px 16px 18px;position:relative;text-align:left;min-height:103px}
.card-body .mark{display:block;margin-bottom:8px;color:#4b8762}
.card-body .check{top:12px;right:12px}
.card-body .name{display:block;color:#123b2b}
.card-body .meta{display:block;margin-top:5px;color:#55735e}
.photo-link{align-self:flex-end;font-size:.76rem;color:#446d51;text-decoration:none;padding:6px 8px}
.photo-link:hover{text-decoration:underline}
.board-photo{width:100%;height:120px;object-fit:cover;object-position:center 28%;border-radius:8px;margin-bottom:12px}
.card{color:#123b2b}
.result-head p,.notice{color:#587260}
@media(max-width:760px){.card-body{padding:11px;min-height:94px}.photo-link{font-size:.7rem}.board-photo{height:77px}}

/* Result portraits and sharing */
.board-card{min-width:0;padding:14px;gap:6px;justify-content:flex-start}
.board-photo{display:block;width:100%;height:240px;object-fit:contain;object-position:center;background:#e7f3e9;border-radius:9px;margin:0 0 9px}
.board-card b{margin-top:auto}
.result-actions{align-items:center}
.btn.share-primary{background:#101f18;color:#fff;font-size:1.08rem;padding:18px 30px;min-height:60px;box-shadow:0 10px 25px #102b1c40}
.btn.share-primary:hover{background:#284536}
@media(max-width:760px){.board-card{padding:7px}.board-photo{height:160px;margin-bottom:5px}.btn.share-primary{width:100%;font-size:1.04rem}.result-actions .btn.secondary{flex:1}}
/* Favorite nine board */
.result-head{padding:70px 0 30px}
.result-head .eyebrow{color:#a8875f;letter-spacing:.26em}
.result-head h1{color:#153e2d;margin:25px 0 17px}
.result-head p{font-size:1.02rem;color:#7d8580}
.result-board{max-width:980px;margin:22px auto 48px;background:#f6f3ec;color:#153e2d;padding:26px;box-shadow:none;border-radius:0}
.board-grid{gap:14px}
.board-card{position:relative;display:block;background:white;border:1px solid #dedbd2;border-radius:0;box-shadow:0 10px 22px #253f2910;padding:10px;min-height:0}
.board-photo{width:100%;height:auto;aspect-ratio:141/214;object-fit:contain;object-position:center;background:#e4e9e2;border-radius:0;margin:0}
.board-card b{position:absolute;top:14px;left:14px;display:grid;place-items:center;width:43px;height:43px;background:#23503a;color:#fff;font:normal 1.5rem Georgia,serif;margin:0}
.board-card strong{display:block;color:#182e23;font-size:1.08rem;padding:10px 2px 0;line-height:1.35}
.board-card small{display:block;color:#738074;font-size:.73rem;padding:3px 2px 2px}
.result-actions{max-width:980px;margin:0 auto 38px;justify-content:center}
.result-actions .share-primary{width:min(100%,400px);order:-1}
@media(max-width:760px){.result-head{padding:55px 0 20px}.result-board{padding:4px 0 16px;background:transparent}.board-grid{gap:6px}.board-card{padding:5px}.board-photo{height:auto}.board-card b{top:8px;left:8px;width:27px;height:27px;font-size:1rem}.board-card strong{font-size:.77rem;padding:7px 0 0}.board-card small{font-size:.61rem;padding:2px 0 0}.result-actions .share-primary{width:100%}}
/* Rotating home portrait */
.hero-showcase{min-width:0;display:flex;flex-direction:column;gap:16px}
.hero-photo-frame{position:relative;width:100%;height:318px;overflow:hidden;background:#dceee1;border:1px solid #bfd9c6;border-radius:20px;box-shadow:0 18px 38px #1b523423}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity 1.2s ease}
.hero-photo.is-visible{opacity:1}
.hero-photo-caption{position:absolute;bottom:0;left:0;right:0;padding:27px 16px 12px;color:white;background:linear-gradient(transparent,#123b2bdc);font-size:.86rem;font-weight:800;text-align:right;pointer-events:none}
.hero-showcase .hero-side{margin:0}
@media(max-width:760px){.hero-showcase{margin-top:25px;flex-direction:row;align-items:end}.hero-photo-frame{height:214px;flex:1}.hero-showcase .hero-side{flex:0 0 105px;padding-left:12px}.hero-side strong{font-size:2.8rem}.hero-side small{font-size:.68rem}}
/* Full image preview: long press on mobile or use the download link */
.save-hint{text-align:center;color:#55735e;font-size:.88rem;margin:-20px 0 32px}
.image-preview{border:0;padding:0;background:transparent;max-width:min(92vw,720px);max-height:94vh;overflow:visible}
.image-preview::backdrop{background:#0a1e16d9}
.preview-panel{position:relative;background:#f6f3ec;border-radius:15px;padding:16px;text-align:center;max-height:94vh;overflow:auto}
.preview-panel p{color:#153e2d;font-weight:800;margin:10px 45px 16px}
.preview-panel img{display:block;width:100%;height:auto;-webkit-touch-callout:default;user-select:auto}
.preview-panel a{display:inline-block;margin:15px 0 4px;color:#176347;font-weight:800}
.preview-close{position:absolute;right:13px;top:9px;border:0;background:#e4e9e2;color:#153e2d;border-radius:50%;width:37px;height:37px;font-size:1.4rem}
@media(max-width:760px){.image-preview{max-width:96vw}.preview-panel{padding:9px}.preview-panel p{font-size:.85rem;margin:8px 38px 12px}}