:root{font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;color:#173049;background:#f0f4f8;font-size:16px;line-height:1.7}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #1680be;outline-offset:4px}header{background:#132e49;color:white;display:flex;align-items:center;justify-content:space-between;padding:22px max(24px,calc((100vw - 1100px)/2));gap:18px}.brand{font-size:26px;font-weight:900;color:white;text-decoration:none;letter-spacing:.08em}.brand span{display:block;font-size:13px;letter-spacing:.04em;font-weight:500}.pill{border:1px solid #62768b;border-radius:30px;padding:7px 16px;font-size:14px;white-space:nowrap}main{max-width:1100px;margin:40px auto;padding:0 24px;min-height:65vh}h1{font-size:clamp(27px,4vw,40px);letter-spacing:.02em;line-height:1.5;margin:8px 0 12px}h2{font-size:23px;line-height:1.7;margin:12px 0}p{margin:10px 0}.eyebrow{font-weight:800;color:#426079;font-size:14px;letter-spacing:.1em}.intro{margin-bottom:30px}.intro p{color:#51677d}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}.panel{background:white;border:1px solid #dce4ec;border-radius:20px;padding:28px;box-shadow:0 6px 22px #17304906}.primary-panel{border-top:6px solid #f4c448}.label{display:block;font-weight:700;margin:20px 0 8px}select{width:100%;padding:13px;background:white;border:1px solid #bccbd7;border-radius:10px;color:#173049}.btn{border:1px solid #bdcbd8;background:white;border-radius:10px;padding:12px 20px;font-weight:700;color:#173049;min-height:49px}.btn.primary{background:#173c5e;color:white;border-color:#173c5e}.btn.gold{background:#f4c448;border-color:#f4c448;color:#1e3345}.btn:hover:not(:disabled){filter:brightness(.95)}.wide{width:100%;margin-top:20px}.small{font-size:14px;color:#526a7f}.stats{display:flex;gap:25px;margin:22px 0}.stats strong{display:block;font-size:34px;line-height:1.3}.stats span{font-size:14px;color:#526a7f}.review-btn{display:block;width:100%;text-align:left;margin-top:12px}.review-btn span{float:right}.btn:disabled{opacity:.48}.divider{height:1px;background:#e2e8ef;margin:24px 0}.topline{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}progress{width:100%;height:9px;display:block;accent-color:#2b7284;margin:10px 0 24px}progress::-webkit-progress-bar{background:#dce5ee;border-radius:20px}progress::-webkit-progress-value{background:#2b7284;border-radius:20px}.quiz{max-width:850px;margin:0 auto}.question{font-size:clamp(22px,3vw,28px);margin:20px 0 30px;line-height:1.8}.choices{display:grid;gap:12px}.choice{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:2px solid #dbe4eb;border-radius:13px;background:white;padding:17px 20px;color:#173049;font-size:20px;font-weight:600}.choice b{background:#edf2f6;display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:8px;font-size:16px}.choice:hover:not(:disabled){border-color:#426c89;background:#f4f8fb}.choice.correct{border-color:#23826f;background:#eff9f5}.choice.wrong{border-color:#c17336;background:#fff5eb}.choice:disabled{color:#526478}.choice.correct:disabled,.choice.wrong:disabled{color:#173049}.feedback{margin-top:26px;padding:24px;border-radius:14px;background:#eff7f6;border-left:5px solid #23826f}.feedback.miss{background:#fff7eb;border-left-color:#d28b36}.feedback h2{margin:0;font-size:22px}.feedback .answer{font-weight:800;font-size:21px}.feedback p{line-height:1.95}.links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;margin-top:16px}a{color:#225f8a}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.score{font-size:64px;font-weight:900;line-height:1.3}.score small{font-size:22px}.result{text-align:center;padding:35px}.result-list{text-align:left}.result-row{border-top:1px solid #dce4ec;padding:15px 0}.result-row summary{cursor:pointer}.notice{padding:12px 16px;background:#fff5d7;border-radius:8px;font-size:14px;margin-top:16px}.hidden{display:none}footer{text-align:center;color:#5a6d7e;font-size:13px;padding:25px 24px 32px}details{margin-top:18px}summary{cursor:pointer;font-size:14px}dialog{border:0;border-radius:18px;padding:28px;max-width:min(90vw,460px);color:#173049}dialog::backdrop{background:#132e4977}@media(max-width:700px){header{padding:18px 20px}.brand{font-size:23px}.pill{display:none}main{margin:26px auto;padding:0 16px}.layout{grid-template-columns:1fr}.panel{padding:22px}.choice{padding:15px;font-size:18px}.question{font-size:22px}.stats{justify-content:space-around}.topline .btn{padding:8px 12px}.feedback{padding:18px}.intro{margin-bottom:22px}}@media(prefers-reduced-motion:no-preference){.panel{animation:appear .2s ease-out}@keyframes appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}
/* Bright, tactile controls and a focused five-second play surface. */
:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;background:#e7f7ff;color:#20395c;font-size:18px}body{background:radial-gradient(circle at 10% 22%,#fff8cf 0,transparent 36%),#e7f7ff}header{background:#126aaf;border-bottom:7px solid #ffcb34;padding-top:18px;padding-bottom:18px}.brand{font-size:29px}.brand span{font-size:14px}main{max-width:1080px}.intro{text-align:center;margin-bottom:30px}.intro h1{color:#155c9a;font-weight:900;font-size:clamp(30px,5vw,46px)}.intro p{color:#334b6b;font-weight:700}.eyebrow{font-size:16px;color:#315d81;letter-spacing:.02em}.panel{border:3px solid #b9dbef;border-radius:28px;box-shadow:0 7px 0 #b9dbef66;padding:28px}.primary-panel{border-top:9px solid #ffcb34}h2{font-size:25px}.btn{border-radius:16px;border:2px solid #accbe0;box-shadow:0 4px 0 #accbe0;min-height:58px;font-size:18px}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:none}.btn.gold{background:#ffcf36;border-color:#e8ac08;box-shadow:0 5px 0 #d79a03;color:#3e3609;font-size:23px}.btn.primary{background:#1673b8;border-color:#12629c;box-shadow:0 4px 0 #0b4f82}.music-button{background:#fff;color:#145d94;border-color:#d2e8f5;white-space:nowrap;box-shadow:none}.label{color:#254f77}select{border:2px solid #bfd9e9;border-radius:14px;min-height:56px;font-weight:700}.small{font-size:16px}.quiz{max-width:850px}.quiz>.topline{margin-bottom:10px}.quiz>progress{margin-bottom:16px}.quiz .panel{padding:24px 30px}.question{font-size:clamp(24px,3vw,30px);margin:18px 0 22px;line-height:1.7}.choices{gap:15px}.choice{border-radius:18px;border-width:3px;border-color:#aacde9;background:#f1f9ff;box-shadow:0 4px 0 #aacde9;min-height:72px;font-size:23px;padding:15px 20px}.choice:nth-child(2){background:#fff8df;border-color:#ead082;box-shadow:0 4px 0 #ead082}.choice:nth-child(3){background:#f2efff;border-color:#bdb0e4;box-shadow:0 4px 0 #bdb0e4}.choice b{height:40px;width:40px;background:#176fac;color:white;font-size:22px;border-radius:50%}.choice:nth-child(2) b{background:#926811}.choice:nth-child(3) b{background:#7751ad}.choice.correct{border-color:#2c946d;background:#e7f9ec;box-shadow:0 4px 0 #2c946d}.choice.wrong{border-color:#cf8032;background:#fff0dc;box-shadow:0 4px 0 #cf8032}.clock{display:flex;gap:20px;align-items:center;background:#eef5fc;border-radius:16px;padding:10px 18px;color:#21486e;font-weight:800}.clock>span{white-space:nowrap}.clock strong{font-size:35px;color:#166fab;font-variant-numeric:tabular-nums}.clock-track{height:17px;background:#cfdeea;flex:1;border-radius:20px;overflow:hidden}#time-fill{height:100%;width:100%;background:#197eb9;border-radius:20px}#time-fill.urgent{background:#d06e12}.feedback{border-radius:20px}.feedback h2{font-size:25px}.feedback .answer{font-size:24px}.stats strong{color:#146eac}.stats span{font-size:15px}.result{border-top:9px solid #ffcb34}.score{color:#146eac}footer{font-size:14px}@media(max-width:700px){:root{font-size:16px}header{padding:14px 16px;gap:8px}.brand{font-size:22px}.brand span{font-size:12px}.music-button{padding:8px 10px;font-size:14px;min-height:42px}main{margin:22px auto}.intro h1{font-size:30px}.panel{padding:22px}.quiz .panel{padding:16px}.quiz .topline{gap:8px;font-size:14px}.quiz .topline .btn{font-size:15px;min-height:44px}.question{font-size:22px;line-height:1.65;margin:15px 0}.choice{font-size:20px;min-height:64px;padding:12px;gap:12px}.choice b{width:34px;height:34px;font-size:19px}.clock{padding:7px 13px;gap:12px}.clock strong{font-size:30px}.quiz>.topline strong{font-size:14px}}
 .explanation-screen{text-align:center;border-top:9px solid #2c946d;max-width:820px;margin:24px auto;padding:36px 38px}.explanation-screen.is-wrong{border-top-color:#cf8032}.result-mark{font-size:74px;font-weight:900;color:#2c946d;line-height:1}.is-wrong .result-mark{color:#cf8032}.explanation-screen h1{color:#166fae;font-size:clamp(30px,5vw,48px);margin:10px 0}.is-wrong h1{color:#b56623}.explanation-screen .answer{font-size:25px;font-weight:900;margin:12px 0 28px}.explanation-text{text-align:left;background:#f4f9fd;border-radius:18px;padding:22px 26px;font-size:20px;line-height:2;margin:14px 0}.is-wrong .explanation-text{background:#fff7eb}.explanation-screen .eyebrow{display:block}
 .study-image{margin:18px auto 26px;max-width:600px}.study-image img{display:block;width:100%;max-height:290px;object-fit:cover;border-radius:18px;border:3px solid #d6e8f2}.study-image figcaption{font-size:13px;color:#526a7f;margin-top:7px;line-height:1.5}.study-image a{color:#1a6594}
.study-image img{object-fit:contain!important;height:auto;background:#f3f7fa}

.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.filter-grid .label{margin-top:12px}.tag{display:inline-block;background:#e9f5ff;color:#235b85;padding:3px 11px;border-radius:30px;font-size:14px;font-weight:800}.quiz .topline .eyebrow{max-width:72%}@media(max-width:650px){.filter-grid{grid-template-columns:1fr}}

/* Keep the title on one line; allow the BGM button to move below it on narrow screens. */
header{flex-wrap:wrap}.brand{display:inline-block;white-space:nowrap;line-height:1.25}@media(max-width:700px){.brand{font-size:clamp(16px,4.4vw,22px);letter-spacing:0}header{column-gap:8px}}

/* TOP: illustrated, responsive layout. Scoped to avoid changing quiz screens. */
.site-header{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));background:#e1f6ff;border-bottom:3px solid #9cdded;color:#174e78}
.site-header .brand{font-size:clamp(17px,2.3vw,29px);color:#145d92;text-decoration:none;font-weight:900;letter-spacing:-.04em;white-space:nowrap;flex-shrink:1;min-width:0}
.header-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.header-actions .btn{min-height:44px;padding:7px 11px;font-size:clamp(12px,1.15vw,15px);border-radius:12px;background:white;color:#175c8c;border-color:#afd9ee;box-shadow:0 2px 0 #afd9ee}
.header-actions .btn[aria-pressed="false"]{background:#ecf2f6;color:#557084}
.header-actions .btn:active{transform:translateY(2px);box-shadow:none}
#app:has(.top-page){max-width:none;margin:0;padding:0}
.top-page{max-width:1440px;margin:auto;overflow:hidden;padding:0 max(18px,env(safe-area-inset-right)) 44px max(18px,env(safe-area-inset-left))}
.top-page *, .top-page *::before,.top-page *::after{box-sizing:border-box}
.hero{position:relative;min-height:475px;border-radius:0 0 34px 34px;overflow:hidden;background:#9fe5f3;isolation:isolate;box-shadow:0 9px 0 #8dcadb66}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-inner{position:relative;z-index:1;max-width:780px;margin:auto;text-align:center;padding:48px 18px 38px;text-shadow:0 2px 0 #ffffffc9}
.hero-kicker{display:inline-block;padding:7px 17px;background:#ffffffeb;border-radius:30px;color:#1474a5;font-weight:900;font-size:17px}
.hero h1{font-size:clamp(30px,4.4vw,56px);line-height:1.2;letter-spacing:-.06em;white-space:nowrap;color:#1169a7;text-shadow:2px 3px #fff,0 5px 10px #22688e50;margin:21px 0 6px}
.hero p{font-size:clamp(18px,2.25vw,26px);font-weight:900;color:#214c73;margin:10px 0 25px}
.hero button,.genre-card{cursor:pointer;font-family:inherit}
.hero-start{display:block;width:min(96%,450px);margin:0 auto;border:3px solid #d58c04;border-radius:22px;background:#ffd334;color:#634016;font-size:clamp(21px,2.5vw,29px);font-weight:900;min-height:76px;box-shadow:0 7px 0 #bd850e,0 10px 20px #20566f55;transition:transform .18s,box-shadow .18s}
.hero-secondary{display:flex;justify-content:center;gap:15px;margin:21px auto 0}
.hero-secondary button{border:2px solid #fff;border-radius:15px;background:#37a875;color:white;font-weight:900;font-size:17px;min-height:54px;padding:8px 21px;box-shadow:0 4px 0 #1b7954}
.hero-secondary button+button{background:#288bc9;box-shadow:0 4px 0 #126096}
.hero-secondary button:disabled{opacity:.6;cursor:not-allowed}
.hero button:not(:disabled):active,.genre-card:active{transform:translateY(4px);box-shadow:0 1px 0 #567}
.hero-motif{position:absolute;z-index:0;font-size:55px;filter:drop-shadow(0 3px 2px #0b4c7655);pointer-events:none}.motif-crane{left:5%;bottom:48px}.motif-potato{right:4%;bottom:34px}
.top-record{background:#cbf0fa;padding:22px 30px 28px;border-radius:0 0 28px 28px}
.top-page h2{margin:0 0 14px;color:#185f91;font-size:clamp(22px,2.5vw,30px)}
.record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.record-card{background:white;border:2px solid #b2dfeb;border-radius:20px;min-height:117px;padding:14px 20px;box-shadow:0 4px 0 #9dcdda;display:flex;flex-direction:column;justify-content:center}
.record-card span{font-size:16px;color:#496b80;font-weight:800}.record-card strong{font-size:clamp(26px,3vw,37px);color:#106da9;line-height:1.35}.record-card small{font-size:16px}.record-card progress{height:10px;width:100%;margin:2px 0 0}
.top-section{margin:28px 0 0;background:#fff;border:2px solid #c8e8ef;border-radius:25px;padding:25px 28px;box-shadow:0 5px 0 #c2e3ed80}
.top-section>p{margin:0 0 18px;color:#486781;font-weight:700}
.genre-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.genre-card{display:flex;align-items:center;gap:10px;text-align:left;min-height:102px;border:2px solid #bddeeb;border-radius:20px;padding:13px 14px;background:#eaf8ff;color:#245176;box-shadow:0 4px 0 #aed6e4;transition:transform .18s,box-shadow .18s;font-size:clamp(15px,1.35vw,18px)}
.genre-card strong{flex:1;line-height:1.45}.genre-icon{font-size:36px;line-height:1}.genre-arrow{font-size:20px}.genre-1{background:#edfae9}.genre-2{background:#fff1de}.genre-3{background:#f6eefd}.genre-4{background:#fff0e5}.genre-5{background:#eaf7fa}.genre-6{background:#fff7d8}
.map-section{background:#e9f8ee;display:grid;grid-template-columns:minmax(210px,1fr) minmax(0,1.5fr);gap:25px;align-items:center}
.map-copy p{font-weight:700;color:#436884}.map-art{border:3px solid white;border-radius:22px;overflow:hidden;background:#b8ecf8;min-width:0}.map-art svg{display:block;width:100%;height:auto}
.settings-panel{background:#f8fbff}.settings-panel .filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.settings-panel select{width:100%}.settings-actions{display:flex;gap:12px;flex-wrap:wrap;margin:19px 0}.settings-panel .btn{min-height:54px}.settings-panel details{border-top:1px solid #c8dde9;padding-top:8px}
@media(max-width:1023px){.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{min-height:440px}.hero-inner{padding-top:44px}}
@media(max-width:767px){.site-header{flex-wrap:wrap;padding:8px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left));gap:5px}.site-header .brand{font-size:clamp(15px,5vw,25px);width:100%;text-align:center}.header-actions{width:100%;justify-content:center;gap:7px}.header-actions .btn{flex:1;max-width:155px;padding:4px 6px;font-size:13px}.top-page{padding:0 max(12px,env(safe-area-inset-right)) 30px max(12px,env(safe-area-inset-left))}.hero{min-height:420px;border-radius:0 0 22px 22px}.hero-scene{object-position:42% center}.hero-inner{padding:39px 8px 25px}.hero-kicker{font-size:13px}.hero h1{font-size:clamp(17px,5.4vw,35px);letter-spacing:-.075em;margin-top:18px}.hero p{font-size:clamp(15px,4vw,20px)}.hero-start{width:min(100%,420px);min-height:66px}.hero-secondary{gap:8px}.hero-secondary button{flex:1;max-width:205px;padding:8px 5px;font-size:clamp(13px,3.6vw,17px)}.hero-motif{font-size:38px}.motif-crane{bottom:20px}.motif-potato{bottom:13px}.top-record{padding:18px 14px 22px}.record-grid{grid-template-columns:1fr 1fr;gap:10px}.record-card{min-height:92px;padding:11px}.record-card:last-child{grid-column:1/-1}.record-card span{font-size:13px}.record-card strong{font-size:26px}.top-section{padding:19px 14px;margin-top:18px}.genre-grid{gap:10px}.genre-card{min-height:112px;flex-wrap:wrap;padding:10px;font-size:14px}.genre-icon{font-size:29px}.genre-arrow{margin-left:auto}.map-section{grid-template-columns:1fr;gap:6px}.settings-panel .filter-grid{grid-template-columns:1fr}.settings-actions .btn{width:100%}}
@media(max-width:360px){.hero h1{font-size:16px}.hero-secondary button{font-size:12px}.genre-card strong{font-size:13px}.site-header .brand{font-size:16px}}
@media(prefers-reduced-motion:no-preference){.hero-start{animation:hero-breathe 4s ease-in-out infinite}.hero-ferry{animation:ferry-drift 12s ease-in-out infinite}.hero-scene path:nth-of-type(1){animation:cloud-drift 24s ease-in-out infinite}@keyframes hero-breathe{50%{transform:scale(1.025)}}@keyframes ferry-drift{50%{transform:translateX(14px)}}@keyframes cloud-drift{50%{opacity:.92}}}
@media(prefers-reduced-motion:reduce){.hero button,.genre-card{transition:none;animation:none}}
/* Playful, readable settings block directly beneath the hero. */
.top-page .settings-panel{margin:19px 0 22px;background:linear-gradient(135deg,#fff9df,#fff 45%,#eaf8ff);border:3px solid #ffc84f;border-radius:27px;box-shadow:0 6px 0 #edbc4a70;padding:26px 28px}
.top-page .settings-panel h2{color:#946016;display:inline-block;background:#fff;border:2px solid #f7ce6c;border-radius:16px;padding:7px 17px;margin-bottom:19px}
.top-page .settings-panel .filter-grid>div{background:#fff;border:2px solid #b9deea;border-radius:18px;padding:10px 13px 15px;box-shadow:0 3px 0 #b9deea80;min-width:0}
.top-page .settings-panel .label{font-size:17px;font-weight:900;color:#246189;margin:1px 0 6px}
.top-page .settings-panel select{background:#f5fbff;border:2px solid #9dcee7;font-size:16px;min-width:0}
.top-page .settings-actions .btn.gold{font-size:20px}
.top-page .settings-actions .btn:not(.gold){background:#e6f5ff;color:#195b86}
@media(max-width:767px){.top-page .settings-panel{margin:14px 0 16px;padding:18px 14px}.top-page .settings-panel h2{font-size:21px}.top-page .settings-panel .filter-grid>div{padding:7px 10px 12px}}
/* Generated Kagoshima artwork complements real HTML title and controls. */
.site-header .brand{display:inline-flex;align-items:center;gap:8px;letter-spacing:-.065em}
.brand-logo{width:clamp(36px,4vw,54px);height:clamp(36px,4vw,54px);object-fit:contain;flex:none}
.brand-wordmark{white-space:nowrap;font-size:inherit!important;color:#195c9b}
.brand-wordmark span{font-size:inherit!important}.brand-wordmark span:nth-child(2),.hero h1 span:nth-child(2){color:#f05b32}.brand-wordmark span:nth-child(3),.hero h1 span:nth-child(3){color:#168454}.brand-wordmark span:nth-child(4),.hero h1 span:nth-child(4){color:#126dc0}
.hero{background:#75cbee url('assets/kagoshima-hero.webp') center center/cover no-repeat;min-height:445px}
.hero-inner{padding-top:39px}
.hero h1{color:#165a9b;text-shadow:-3px -3px #fff,3px -3px #fff,-3px 3px #fff,3px 3px #fff,0 6px 9px #26527399;letter-spacing:-.055em}
.hero-kicker{background:#fffbefee;color:#18548a;border:2px solid white}
.hero p{color:#164c80;text-shadow:-2px -2px white,2px 2px white,0 4px 8px #fff}
@media(max-width:767px){.site-header .brand{justify-content:center;gap:4px}.brand-logo{width:30px;height:30px}.site-header .brand-wordmark{font-size:clamp(14px,4.5vw,23px)!important}.hero{background-position:47% center;min-height:410px}.hero-inner{padding-top:38px}.hero h1{font-size:clamp(17px,5.3vw,35px)}}
@media(max-width:360px){.site-header .brand-wordmark{font-size:14px!important}.hero h1{font-size:16px}}
/* Raster wordmark remains legible through proportional scaling. */
.site-header .brand-title-logo{display:block;width:clamp(225px,33vw,475px);max-width:100%;height:auto;object-fit:contain}
.hero h1{margin:15px auto 5px;width:min(94%,960px);line-height:1}
.hero-title-logo{display:block;width:100%;height:auto;max-height:166px;object-fit:contain;filter:drop-shadow(0 3px 6px #144e7940)}
@media(max-width:767px){.site-header .brand-title-logo{width:min(83vw,400px)}.hero h1{width:100%;margin:24px auto 12px}.hero-title-logo{max-height:88px}}
@media(max-width:360px){.site-header .brand-title-logo{width:78vw}}
/* Large illustrated exploration map; no invented progress markers. */
.map-section{grid-template-columns:minmax(220px,.7fr) minmax(0,2fr);background:#e5f7fc}
.map-art{border:3px solid #fff;border-radius:20px;box-shadow:0 4px 12px #287aa92b}
.map-art img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
@media(max-width:767px){.map-section{grid-template-columns:1fr}.map-art img{aspect-ratio:2/1}}
/* Phase 1 exploration map. Progress is calculated from existing quiz records. */
.map-preview,.explore-map{position:relative;overflow:hidden;aspect-ratio:1672/941}
.map-preview img,.explore-map-bg{width:100%;height:100%;display:block;object-fit:cover}
.map-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.map-copy p{margin:0}.map-copy .map-count{font-size:clamp(20px,2vw,27px);color:#176d9e;background:white;border-radius:13px;padding:8px 13px}.map-copy .btn{margin-top:7px}
.map-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;min-width:48px;min-height:48px;border:3px solid white;border-radius:20px;background:#ffdf62;color:#284168;font-size:22px;font-weight:900;line-height:1.1;box-shadow:0 3px 8px #1c49668c;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;padding:4px 8px}
.map-pin.unknown{border-radius:50%;background:#fff8e7;color:#175f8d}.map-pin.found{background:#fff9d4}.map-pin small{font-size:11px;white-space:nowrap;max-width:125px;overflow:hidden;text-overflow:ellipsis}.map-pin:active,.badge-card:active{transform:translate(-50%,-45%)}.badge-card:active{transform:translateY(3px)}.map-pin:focus-visible,.badge-card:focus-visible{outline:4px solid #e76716;outline-offset:3px}
.map-pin.compact{min-width:30px;min-height:30px;font-size:16px;padding:0;border-width:2px}.map-preview .map-pin.compact{transform:translate(-50%,-50%)}
.map-screen{max-width:1300px;margin:20px auto;padding:0 18px 40px}.map-topline{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.map-topline h1{margin:0;font-size:clamp(22px,3vw,32px);color:#175c8d}.map-topline strong{color:#106d9b;font-size:20px}.map-screen>p{font-weight:700}.map-scroll{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;border:3px solid #fff;border-radius:22px;background:#d4f1f8;box-shadow:0 5px 14px #19587d44}.explore-map{min-width:850px;width:100%;background:#92d5f1}.badge-section{background:#fff;border-radius:22px;padding:20px;margin-top:20px}.badge-section h2{color:#175c8d}.badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.badge-card{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:95px;padding:10px;border:2px solid #c5dce8;border-radius:16px;background:#fff9e5;color:#244e68;cursor:pointer;font:inherit}.badge-card.unknown{background:#eef3f6}.badge-card>span{font-size:27px}.badge-card small{font-size:13px}.spot-dialog{width:min(92vw,460px);text-align:center}.spot-dialog .map-stars{font-size:28px;color:#d88a07;font-weight:900}.spot-dialog .btn{margin-top:14px}.discovery-card{background:#fff6d6;border:3px solid #f6cb57;border-radius:18px;padding:14px;margin:20px auto;max-width:500px}.discovery-card strong{color:#ad5b13}.discovery-card p{font-size:19px;font-weight:900;margin:8px}
@media(max-width:767px){.map-section{grid-template-columns:1fr}.map-preview .map-pin.compact{min-width:27px;min-height:27px;font-size:13px}.map-scroll .explore-map{width:850px}.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.map-topline{gap:7px}.map-screen{padding:0 10px 30px}.map-pin small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.map-pin,.badge-card{transition:none}}

.map-scope{max-width:36em;line-height:1.5}.settings-actions{display:flex;flex-wrap:wrap;gap:12px}.settings-actions>.btn{flex:1 1 220px}

/* 鹿児島カード Phase 1 */
.card-teaser{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(120deg,#e2f8fb,#fff5d4);border:3px solid #f4c65a;border-radius:26px;padding:24px}
.card-teaser h2{margin:0;color:#215584}.card-teaser .card-count{display:block;font-size:clamp(20px,2.4vw,27px);margin:8px 0 16px;color:#945015}.card-teaser-art{font-size:clamp(30px,5vw,64px);white-space:nowrap}
.cards-page{max-width:1100px;margin:auto}.cards-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.cards-head h1{margin:4px auto 4px 0;font-size:clamp(22px,3vw,34px)}.cards-head strong{background:#fff4c8;padding:8px 14px;border-radius:18px;white-space:nowrap}.card-hakase{font-size:23px;font-weight:900;color:#86551a;background:#fff3c4;border-radius:16px;padding:10px 18px}
.card-group{margin:30px 0}.card-group h2{color:#175b86;margin:0 0 14px}.card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card-tile{min-width:0;aspect-ratio:2/3;min-height:155px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:6px;text-align:center;border:3px solid #56a7c6;border-radius:18px;background:linear-gradient(150deg,#fff,#e1f5fa);color:#214462;padding:12px 7px;box-shadow:0 5px 0 #b4d9df;overflow-wrap:anywhere;cursor:pointer}.card-tile:active{transform:translateY(3px);box-shadow:0 2px 0 #b4d9df}.card-tile:focus-visible{outline:3px solid #1b5a9f;outline-offset:3px}.card-tile.unknown{background:#eef2f5;border-color:#bdcbd3;color:#4b626c}.card-tile.complete{border-color:#d1a22f;background:linear-gradient(140deg,#fff,#fff0b8 70%,#fff9e2);box-shadow:0 5px 0 #d6b666}.card-tile.card-master{border-color:#816eb4;background:linear-gradient(145deg,#f4eaff,#fff8ea)}.card-tile.card-master.complete{border-color:#d19f24;background:#fff1bc}.card-kind{font-size:11px;font-weight:900;letter-spacing:.04em}.card-icon{font-size:clamp(30px,4vw,53px);line-height:1.1}.card-tile strong{font-size:clamp(13px,1.5vw,18px);line-height:1.35}.card-stars{font-size:clamp(11px,1.3vw,17px);font-weight:900;white-space:nowrap}.card-complete{font-size:11px;font-weight:900;letter-spacing:.06em;background:#9c6722;color:#fff;border-radius:8px;padding:2px 8px}.card-new{padding:10px 14px;margin:12px 0;border:2px solid #e5c368;border-radius:14px;background:#fff9e6}.card-new p{margin:2px 0}.card-dialog{width:min(92vw,520px);max-height:min(85dvh,750px);overflow-y:auto;box-sizing:border-box}.card-dialog-body{text-align:center}.card-dialog h2{font-size:clamp(20px,5vw,28px);overflow-wrap:anywhere}.card-detail-icon{font-size:50px}.card-detail-stars{font-size:24px;color:#9c6815;font-weight:900}.card-dialog h3{text-align:left}.card-topic-list{padding-left:1.5em;text-align:left;max-height:32vh;overflow-y:auto}.card-topic-list li{margin-bottom:8px;overflow-wrap:anywhere}.card-dialog .btn{width:100%;margin-top:10px}
@media(max-width:1023px){.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:820px){.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:767px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-teaser{padding:18px}.card-teaser-art{font-size:34px}.cards-head{align-items:flex-start}.cards-head h1{width:100%;order:2}.cards-head strong{order:1;margin-left:auto}.card-tile{padding:9px 4px}.card-tile strong{font-size:clamp(13px,3.8vw,17px)}.card-stars{font-size:clamp(11px,3.2vw,16px)}}@media(max-width:359px){.card-teaser-art{display:none}.card-kind{font-size:10px}}
@media(prefers-reduced-motion:reduce){.card-tile{animation:none;transition:none}}

.card-icon img{display:block;max-width:100%;max-height:80px;object-fit:contain}.card-detail-icon img{max-width:150px;max-height:150px;object-fit:contain}

/* Phase 2A: five illustration previews. Ownership and stars remain DOM text. */
.card-tile.image-card{position:relative;isolation:isolate;display:block;padding:0;background:#fff8e8;overflow:hidden}
.card-tile.image-card .card-icon{position:absolute;inset:0;display:block;font-size:0;z-index:-1}
.card-tile.image-card .card-icon img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.card-tile.image-card .fallback-icon{display:none}
.card-tile.image-card .card-kind{position:absolute;top:1%;height:8%;left:9%;width:82%;display:grid;place-items:center;box-sizing:border-box;font-size:clamp(7px,1vw,13px);letter-spacing:.07em;color:#765021;line-height:1.1}
.card-tile.image-card .card-area{position:absolute;bottom:25%;left:9%;width:82%;font-size:clamp(9px,1.1vw,13px);color:#71512e;font-weight:800}
.card-tile.image-card strong{position:absolute;top:86.5%;height:6%;left:3%;width:94%;display:grid;place-items:center;box-sizing:border-box;min-height:0;color:#302b2d;font-size:clamp(9px,1vw,13px);line-height:1;white-space:nowrap}
.card-tile.image-card .card-stars{position:absolute;top:92.5%;height:5%;left:5%;width:90%;display:grid;place-items:center;color:#a4680e;font-size:clamp(9px,.9vw,13px);line-height:1}
.card-tile.image-card .card-complete{position:absolute;top:13%;right:0;border-radius:7px 0 0 7px;z-index:1}
.card-detail-icon img{display:block;width:min(100%,240px);height:auto;max-width:240px;max-height:360px;aspect-ratio:2/3;object-fit:contain;margin:auto}
@media(max-width:767px){.card-tile.image-card .card-kind{font-size:clamp(7px,2.2vw,10px)}.card-tile.image-card .card-area{font-size:clamp(9px,2.7vw,12px)}.card-tile.image-card strong{font-size:clamp(9px,2.7vw,12px)}.card-tile.image-card .card-stars{font-size:clamp(9px,2.7vw,12px)}}
.card-tile.image-card .card-icon{z-index:0}.card-tile.image-card .card-kind,.card-tile.image-card .card-area,.card-tile.image-card strong,.card-tile.image-card .card-stars{z-index:1}
.card-preview-dialog{width:min(94vw,920px);max-height:88dvh;overflow:auto;box-sizing:border-box}.card-preview-dialog h2{margin-top:0}.card-preview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}.card-preview-item{min-width:0;text-align:center}.card-preview-item small{font-size:12px}.card-preview-art{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:12px;border:2px solid #d2a64b;background:#fff9e8;color:#322b29}.card-preview-art img{display:block;width:100%;height:100%;object-fit:cover}.card-preview-art .preview-fallback{position:absolute;inset:20%;font-size:24px}.card-preview-art .preview-top,.card-preview-art .preview-area,.card-preview-art strong,.card-preview-art .preview-stars{position:absolute;left:5%;width:90%;text-align:center;line-height:1.15}.card-preview-art .preview-top{top:1%;height:8%;display:grid;place-items:center;box-sizing:border-box;font-size:clamp(7px,.9vw,11px);letter-spacing:.04em}.card-preview-art .preview-area{bottom:25%;font-size:clamp(9px,1vw,12px)}.card-preview-art strong{top:86.5%;height:6%;display:grid;place-items:center;box-sizing:border-box;font-size:clamp(9px,.9vw,12px);line-height:1;white-space:nowrap}.card-preview-art .preview-stars{top:92.5%;height:5%;display:grid;place-items:center;font-size:clamp(9px,.9vw,12px);line-height:1;color:#945c1c}.card-preview-dialog>.btn{min-width:120px}
@media(max-width:820px){.card-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card-preview-art .preview-top{font-size:10px}.card-preview-art .preview-area{font-size:11px}.card-preview-art strong{font-size:11px}.card-preview-art .preview-stars{font-size:11px}}
@media(max-width:540px){.card-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-preview-art .preview-top{font-size:clamp(8px,2.3vw,11px)}.card-preview-art strong{font-size:clamp(9px,2.5vw,11px)}.card-preview-art .preview-stars{font-size:clamp(8px,2.3vw,10px)}}
.card-preview-art img[hidden],.card-preview-art .preview-fallback[hidden],.card-detail-icon .fallback-icon[hidden]{display:none!important}
/* Master card names use the larger cream nameplate, even in two columns. */
.card-tile.card-master.image-card strong{top:79%;height:12%;left:4%;width:92%;min-height:0;font-size:clamp(9px,1vw,12px);line-height:1.05;white-space:normal;overflow-wrap:anywhere;padding:0 2%;border-radius:7px;background:#fffaf0db}
.card-tile.card-master.image-card .card-stars{top:91%;height:8%;font-size:clamp(8px,.85vw,11px);white-space:normal;line-height:1}
.card-preview-art:has(+small) .preview-top{font-weight:900}
@media(max-width:767px){.card-tile.card-master.image-card strong{font-size:clamp(9px,2.6vw,11px)}.card-tile.card-master.image-card .card-stars{font-size:clamp(8px,2.2vw,10px)}}

.card-preview-item:nth-child(n+29) .card-preview-art strong{top:79%;height:12%;white-space:normal;overflow-wrap:anywhere;font-size:clamp(9px,.9vw,11px);line-height:1.05}
.card-preview-item:nth-child(n+29) .preview-stars{top:91%;height:8%;white-space:normal}
@media(max-width:540px){.card-preview-item:nth-child(n+29) .card-preview-art strong{font-size:clamp(9px,2.5vw,11px)}}

/* Phase 3A card encyclopedia. The collection art and progress styles stay intact. */
.card-dialog.card-encyclopedia{width:min(94vw,820px);max-width:min(94vw,820px);max-height:90dvh;padding:clamp(16px,2.5vw,28px);overflow:auto}
.card-encyclopedia-layout{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(16px,3vw,28px);text-align:left}
.card-encyclopedia-art h2{margin:0 0 12px;font-size:clamp(20px,2.5vw,26px);line-height:1.3}
.card-encyclopedia-art .card-detail-icon{font-size:55px;text-align:center}
.card-encyclopedia-art .card-detail-icon img{display:block;width:100%;max-width:210px;max-height:none;aspect-ratio:2/3;object-fit:contain;margin:auto}
.card-encyclopedia-learning{min-width:0}.card-encyclopedia-learning h3{margin:16px 0 8px;color:#175b86;font-size:18px}
.card-encyclopedia-learning .card-detail-stars{margin:0;font-size:clamp(22px,3vw,27px)}
.card-detail-progress{font-weight:800}.card-detail-remaining{color:#365978}
.card-encyclopedia-learning .card-topic-list{margin:0;max-height:180px;overflow-y:auto;line-height:1.5}
.card-trivia{background:#eef8f5;border-left:4px solid #45a492;border-radius:8px;padding:10px 14px}
.card-trivia h3{margin:0 0 5px}.card-trivia p{margin:0;line-height:1.65;overflow-wrap:anywhere}
.card-encyclopedia-actions{display:grid;gap:10px;margin-top:18px}.card-encyclopedia-actions .btn{width:100%;min-height:44px;margin:0}
.card-encyclopedia .btn:focus-visible{outline:3px solid #1b5a9f;outline-offset:3px}
@media(max-width:650px){.card-dialog.card-encyclopedia{max-height:90dvh;padding:16px}.card-encyclopedia-layout{grid-template-columns:1fr;gap:10px}.card-encyclopedia-art h2{text-align:center}.card-encyclopedia-art .card-detail-icon img{width:min(44vw,150px);max-width:none}.card-encyclopedia-learning .card-topic-list{max-height:160px}}

/* Phase 3B: derived achievement views. */
.title-panel{background:linear-gradient(125deg,#fff9e9,#e8f8f6);border:2px solid #e6ca72;border-radius:20px;padding:clamp(16px,3vw,26px);margin:24px 0;box-shadow:0 5px 16px #4c6c7920}
.title-panel h2{margin:0 0 8px}.title-current{display:block;color:#194968;font-size:clamp(20px,3vw,28px)}.title-panel p{margin:7px 0 15px}
.achievement-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.achievement-stats span{background:#fff;border:1px solid #e6dfc8;border-radius:10px;padding:10px;font-size:clamp(12px,1.4vw,15px);overflow-wrap:anywhere}.achievement-stats strong{display:block;font-size:clamp(14px,2vw,21px);white-space:nowrap}
.title-actions,.card-collection-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.title-actions .btn,.card-collection-actions .btn{min-height:44px}
.title-unlock{margin:16px 0;padding:14px 18px;border:2px solid #dbac42;border-radius:15px;background:#fff8dd;text-align:center}.title-unlock strong{color:#87521f}.title-unlock p{font-size:21px;font-weight:900;line-height:1.4}
.title-dialog,.completion-dialog{box-sizing:border-box;width:min(92vw,750px);max-width:min(92vw,750px);max-height:90dvh;overflow:auto}.title-dialog h2{text-align:center}.title-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.title-list li{padding:12px;border:1px solid #d9e4dc;background:#f8fbf7;border-radius:10px}.title-list strong,.title-list small{display:block}.title-list small{margin-top:4px;color:#495e6d}.title-dialog>.btn{width:100%;min-height:44px;margin-top:16px}
.completion-dialog{text-align:center;background:linear-gradient(155deg,#fff8dc,#eaf9fa);border:3px solid #d7af44}.completion-crown{font-size:62px;line-height:1;animation:crown-appear .6s ease-out}.completion-inner h2{font-size:clamp(26px,5vw,42px);line-height:1.3;color:#294d72}.completion-inner h2 span{color:#ad7224}.completion-inner>p{line-height:1.6}.completion-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.completion-actions .btn{min-height:44px}.completion-actions [data-dest=close]{grid-column:1/-1}
.title-dialog .btn:focus-visible,.completion-dialog .btn:focus-visible,.title-actions .btn:focus-visible,.card-collection-actions .btn:focus-visible{outline:3px solid #1b5a9f;outline-offset:3px}
@keyframes crown-appear{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@media(max-width:767px){.achievement-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.title-list{grid-template-columns:1fr}}
@media(max-width:390px){.completion-actions{grid-template-columns:1fr}.completion-actions [data-dest=close]{grid-column:auto}.achievement-stats span{padding:8px}}
@media(prefers-reduced-motion:reduce){.completion-crown{animation:none}}

/* Progress image preview: export layout is drawn to an independent canvas. */
.progress-image-dialog{box-sizing:border-box;width:min(92vw,630px);max-width:min(92vw,630px);max-height:92dvh;overflow:auto;padding:clamp(16px,3vw,28px)}
.progress-image-dialog h2{margin:0 0 8px;font-size:clamp(20px,4vw,27px)}
.progress-image-dialog label{display:block;margin:14px 0 6px;font-weight:800}
.progress-image-dialog input{box-sizing:border-box;width:100%;min-height:44px;border:1px solid #9bb8c6;border-radius:9px;padding:10px;font-size:16px}
.progress-image-dialog #progress-refresh{margin-top:10px}
.progress-image-dialog #progress-image-preview{display:block;width:min(100%,405px);height:auto;aspect-ratio:4/5;object-fit:contain;margin:8px auto;border:1px solid #cadbe2;background:#f4fbfd}
.progress-image-dialog #progress-image-preview[hidden]{display:none}
.progress-image-status{min-height:1.5em;color:#315b71;font-weight:700}
.progress-image-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.progress-image-actions .btn{flex:1 1 150px;min-height:44px}
.progress-image-dialog .btn:focus-visible,.progress-image-dialog input:focus-visible,#save-progress-image:focus-visible{outline:3px solid #1b5a9f;outline-offset:3px}

/* Briefly identify the card a completed card challenge came from. */
.card-tile.card-return-highlight{position:relative;scroll-margin-block:90px;outline:4px solid #f0af27;outline-offset:3px;animation:card-return-glow 1.5s ease-out}
.card-return-label{position:absolute;top:25%;left:6%;width:88%;z-index:5;box-sizing:border-box;padding:6px 3px;border-radius:9px;background:#fff9df;color:#68440b;border:2px solid #d9a32b;font-size:clamp(12px,1.6vw,16px);font-weight:900;line-height:1.2;text-align:center;pointer-events:none;white-space:normal}
@keyframes card-return-glow{0%,65%{box-shadow:0 0 0 7px #f9d96d88}100%{box-shadow:0 0 0 0 #f9d96d00}}
@media(prefers-reduced-motion:reduce){.card-tile.card-return-highlight{animation:none}}

/* Three top routes: genre and cards stay side by side on narrow screens. */
.hero-secondary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,780px)}
.hero-secondary button{min-width:0;width:100%;white-space:nowrap}
.hero-secondary #choose-card{background:#785cb1;box-shadow:0 4px 0 #554086}
.hero-secondary button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:700px){.hero-secondary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hero-secondary #continue{grid-column:1/-1;max-width:none}.hero-secondary #choose-genre,.hero-secondary #choose-card{max-width:none;font-size:clamp(12px,3.3vw,16px);padding:8px 4px}}

/* My questions are a separate notebook; the main progress UI is unchanged. */
.my-top-entry{background:linear-gradient(135deg,#fff9df,#e8f7ee)}.my-top-entry .btn{min-height:48px}
.my-page{max-width:850px;margin:auto;padding:0 0 24px;min-width:0}.my-page-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}.my-page-head h1{font-size:clamp(23px,4vw,34px);overflow-wrap:anywhere;margin:0}
.my-panel{min-width:0;margin:16px 0;padding:clamp(16px,3vw,26px);border:2px solid #d9e9d9;border-radius:18px;background:#fffef7;box-shadow:0 3px 12px #32583b10;overflow-wrap:anywhere}.my-panel h2{font-size:clamp(19px,3vw,25px);margin:4px 0 12px}.my-panel>strong{font-size:22px;color:#275b66}
.my-panel form label:not(.my-answer label){display:block;font-weight:800;margin:19px 0 7px}.my-panel input:not([type=radio]),.my-panel textarea{box-sizing:border-box;display:block;width:100%;min-height:48px;border:1px solid #a9bcb0;border-radius:9px;padding:10px 12px;font:inherit;font-size:17px;background:white;color:#173049}.my-panel textarea{min-height:92px;resize:vertical;line-height:1.5}
.my-answer{border:1px solid #b5d6c1;border-radius:12px;padding:10px 14px;margin:20px 0}.my-answer legend{font-weight:800}.my-answer label{display:inline-flex;align-items:center;gap:7px;min-height:46px;margin-right:18px;font-size:17px;cursor:pointer}.my-answer input{width:21px;height:21px;accent-color:#27825f}
.my-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}.my-actions .btn{min-height:48px;flex:1 1 160px;padding:9px 12px;font-size:16px}.my-list{padding-left:1.5em}.my-list li::marker{font-weight:900}.my-list .my-panel{padding:18px}.my-list strong{font-size:18px}
.my-preview-choices{padding-left:2em;line-height:1.8}.my-preview-choices li{padding:3px 4px}.my-error{color:#a02721;font-weight:800;min-height:1.5em}.my-success{color:#1c7955;font-weight:900}.my-confirm{box-sizing:border-box;width:min(92vw,460px)}
.my-page button:focus-visible,.my-page input:focus-visible,.my-page textarea:focus-visible,.my-confirm button:focus-visible{outline:3px solid #175b86;outline-offset:3px}
@media(max-width:540px){.my-page-head{display:block}.my-page-head .btn{margin-bottom:12px}.my-actions{display:grid;grid-template-columns:1fr}.my-answer label{display:flex;margin-right:0}.my-list{padding-left:1.2em}}

/* The question editor has its own header; keep its labels horizontal on narrow screens. */
.my-page-head{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;gap:8px;width:100%;max-width:100%;padding:0;margin-bottom:18px;background:transparent;color:inherit}
.my-page-head .btn{flex:none;max-width:100%;white-space:nowrap;margin:0}
.my-page-head h1{display:block;width:100%;min-width:0;max-width:100%;margin:0;white-space:normal;word-break:keep-all;overflow-wrap:break-word;writing-mode:horizontal-tb;line-height:1.35}
@media(max-width:540px){.my-page-head{display:flex}.my-page-head .btn{margin:0}}

.my-unlock-remaining{font-weight:900;color:#315273;margin:8px 0 14px}.my-top-entry .btn:disabled{opacity:.72;cursor:default}.my-unlock-notice{border:2px solid #e9bd4d;border-radius:14px;background:#fff8dc;padding:14px 18px;margin:18px 0}.my-unlock-notice strong{color:#794309;font-size:1.1em}.my-tips ol{padding-left:1.6em;line-height:2.1;font-size:clamp(16px,2.4vw,19px)}.my-tips .btn{min-height:48px;white-space:normal}

/* Temporary workshop access is shown only after the hidden key sequence. */
.quiz-debug-indicator{display:inline-block;margin:0 0 8px;padding:3px 9px;border-radius:999px;background:#e9f1ee;color:#2d514b;font-size:12px;font-weight:800;letter-spacing:.05em}.quiz-debug-toast{position:fixed;z-index:10000;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:12px;background:#173049;color:#fff;box-shadow:0 8px 30px #0005;text-align:center;font-weight:800;pointer-events:none}@media(max-width:480px){.quiz-debug-toast{width:calc(100vw - 32px)}}