#onboarding[hidden]{display:none}
#onboarding{position:fixed;inset:0;z-index:1000;overflow:auto;background:#111019;color:#f7f0df;overscroll-behavior:contain}
.comic-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 30px;gap:20px;cursor:pointer;outline:none;background:radial-gradient(ellipse at center,#33253f,#111019 75%)}
.comic-meta,.comic-footer{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1020px;gap:20px;font-size:12px;color:#c8b9cb;letter-spacing:1px}
.comic-meta{margin-bottom:1px}
.comic-frame{position:relative;width:min(100%,calc((100dvh - 220px) * var(--panel-ratio)));aspect-ratio:var(--panel-ratio);overflow:hidden;background:#17121c;border:3px solid #ddd0ba;box-shadow:0 16px 80px #0009,0 0 50px #9950c91c;animation:comic-quake 3.8s ease-in-out infinite;flex-shrink:0}
.comic-motion{position:absolute;inset:0;overflow:hidden;animation:comic-zoom var(--scene-time) linear forwards;transform-origin:center}
.comic-sheet{position:absolute;max-width:none;object-fit:fill;user-select:none;pointer-events:none}
.comic-caption{max-width:1000px;text-align:center;animation:caption-in .7s ease both}
.comic-caption>p{margin:0 0 7px;color:#ceabdf;font-size:12px;letter-spacing:3px}
.comic-caption h1{font-size:20px;line-height:1.7;font-weight:500;margin:0;text-wrap:balance;color:#f7f0df}
.comic-footer{justify-content:center;font-size:11px;letter-spacing:0;flex-wrap:wrap}
.comic-progress{display:flex;gap:8px}
.comic-progress i{height:3px;width:35px;background:#57445d;border-radius:3px}
.comic-progress i.seen{background:#d9b2ec}
.comic-finale .comic-frame{animation:finale-impact .9s ease-out both,comic-quake 3.8s .9s ease-in-out infinite}
.summon-burst{position:absolute;inset:-15%;border-radius:50%;pointer-events:none;background:conic-gradient(from 10deg,transparent 0deg 12deg,#efe1ffb0 14deg 17deg,transparent 20deg 48deg,#c198ff90 51deg 55deg,transparent 59deg 95deg,#fff9 99deg 102deg,transparent 106deg 145deg,#e5ceff90 150deg 155deg,transparent 160deg 202deg,#fff9 204deg 209deg,transparent 213deg 262deg,#b48fff90 265deg 269deg,transparent 273deg 314deg,#fff9 320deg 324deg,transparent 329deg);animation:summon-burst .9s ease-out both;mix-blend-mode:screen}
.summon-flash{position:absolute;inset:0;pointer-events:none;background:#fff2e8;animation:summon-flash .55s ease-out both}
@keyframes comic-zoom{from{transform:scale(1)}to{transform:scale(1.055)}}
@keyframes comic-quake{0%,12%,30%,100%{transform:translate(0,0) rotate(0)}15%{transform:translate(-2px,1px) rotate(-.15deg)}18%{transform:translate(2px,-1px) rotate(.15deg)}21%{transform:translate(-1px,1px)}24%{transform:translate(1px,-1px)}}
@keyframes caption-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes finale-impact{0%{transform:scale(.91);filter:brightness(1.35)}25%{transform:scale(1.04) translate(4px,-3px)}40%{transform:scale(.99) translate(-5px,3px)}60%{transform:scale(1.01) translate(3px,-2px)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes summon-burst{0%{opacity:.85;transform:scale(.25) rotate(-15deg)}65%{opacity:.5}100%{opacity:0;transform:scale(1.4) rotate(10deg)}}
@keyframes summon-flash{0%{opacity:.8}100%{opacity:0}}
.identity-screen,.tutorial-screen{min-height:100%;padding:38px 28px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#46533b,#26362e 80%);background-image:linear-gradient(#263a32cc,#20332ef2),url('/assets/painted/wood-texture.webp');background-size:auto,cover}
.king-create-form{width:100%;max-width:510px;border-radius:26px;background:#faf6e8;color:#454b38;border:1px solid #d3c6a6;padding:33px 38px;box-shadow:0 20px 60px #0004;text-align:center}
.intro-eyebrow{font-size:11px;letter-spacing:2px;color:#7f805c;font-weight:700;margin:0 0 17px;display:block}
.king-create-form h1{font-size:24px;line-height:1.5;margin:15px 0 11px}
.intro-description{font-size:12px;color:#8d8974;line-height:1.8;margin:0 0 22px}
.anonymous-king{position:relative;width:82px;height:105px;margin:0 auto;border-bottom:2px solid #c6b5df;border-radius:45%;background:radial-gradient(ellipse at bottom,#d1bbe966,transparent 60%)}
.anonymous-king i{position:absolute;left:21px;top:5px;width:42px;height:43px;border-radius:50%;background:#302c3e;z-index:1}
.anonymous-king i:after{content:'';position:absolute;left:12px;top:18px;width:5px;height:9px;background:#f6f0ec;border-radius:50%;box-shadow:14px 0 #f6f0ec}
.anonymous-king span{position:absolute;left:27px;top:40px;width:31px;height:58px;background:#302c3e;border-radius:15px 15px 7px 7px;box-shadow:-17px -3px 0 -10px #302c3e,17px -3px 0 -10px #302c3e}
.gender-options{border:0;padding:0;margin:24px 0;display:flex;gap:10px;text-align:left;min-width:0}
.gender-options legend{width:100%;font-size:13px;font-weight:700;padding:0 0 11px}
.gender-options label{flex:1;cursor:pointer;min-width:0}
.gender-options input{position:absolute;opacity:0;width:1px;height:1px}
.gender-options span{display:block;text-align:center;padding:11px 6px;border:1px solid #d1cfb8;background:#f2efe0;border-radius:11px;font-size:13px}
.gender-options input:checked+span{border-color:#70845b;background:#e3ead5;color:#4c6540;box-shadow:inset 0 0 0 1px #70845b}
.gender-options input:focus-visible+span{outline:3px solid #a5b686;outline-offset:3px}
.king-name-label{text-align:left;display:block;font-size:13px;font-weight:700}
.king-name-label input{display:block;margin-top:11px;width:100%;height:47px;background:#fffdf7;color:#484a3e;border:1px solid #c9c6ae;border-radius:11px;font-size:15px;padding:11px 14px}
.nickname-rules{font-size:11px;text-align:left;color:#898774;line-height:1.8;margin:10px 0 23px}
.onboarding-error{color:#a44b48;background:#f5e2d8;border:1px solid #deb9a4;padding:10px 13px;border-radius:9px;font-size:12px;line-height:1.7;max-width:650px}
.comic-screen .onboarding-error{color:#fff1da;background:#6a3a49;border-color:#a77081}
.onboarding-error[hidden]{display:none}
.seal-contract{width:100%;min-height:47px;border-radius:11px}
.identity-note{font-size:10px;line-height:1.8;color:#96917d;margin:14px 0 0}
.tutorial-screen{flex-direction:column;gap:32px}
.tutorial-top{width:100%;max-width:1120px;display:flex;justify-content:space-between;gap:20px;color:#d2d8bc;font-size:12px;letter-spacing:1px}
.cat-lesson{display:grid;grid-template-columns:320px minmax(0,650px);gap:40px;align-items:center;max-width:1120px;width:100%}
.tutorial-cat{text-align:center;position:relative}
.tutorial-cat img{width:100%;max-width:300px;height:340px;object-fit:contain;filter:drop-shadow(0 20px 16px #0003)}
.tutorial-cat>span{display:table;margin:0 auto;padding:8px 23px;background:#ebe2c8;border:1px solid #ab9769;border-radius:11px;color:#675639;font-weight:700;font-size:14px;box-shadow:0 4px 0 #132a1f30}
.tutorial-cat p{font-size:11px;color:#c8d0b4;margin:12px 0 0}
.tutorial-dialogue{background:#fcf8e9;color:#494f3c;padding:36px 38px;border-radius:24px;border:1px solid #d4c8ab;box-shadow:0 20px 60px #0003;position:relative}
.tutorial-dialogue:before{content:'';position:absolute;left:-16px;top:90px;width:32px;height:32px;background:#fcf8e9;transform:rotate(45deg)}
.tutorial-dialogue h1{font-size:26px;line-height:1.5;margin:10px 0 22px;position:relative}
.lesson-copy{font-size:15px;line-height:2;color:#696b55;margin:0 0 23px}
.lesson-tip{display:flex;align-items:center;gap:15px;background:#edf0de;border:1px solid #d8dfc1;border-radius:13px;padding:15px;margin-bottom:25px}
.lesson-tip .painted-icon{width:42px;height:42px}
.lesson-tip p{font-size:12px;line-height:1.8;color:#61704f;margin:0}
.tutorial-controls{display:flex;align-items:center;justify-content:space-between;gap:20px}
.tutorial-controls button{min-height:45px;border-radius:10px}
.tutorial-dots{display:flex;gap:7px}
.tutorial-dots i{width:7px;height:7px;border-radius:50%;background:#d0d5ba}
.tutorial-dots i.active{width:19px;border-radius:5px;background:#82945e}
.home-profile-actions{margin-top:20px}
.home-profile-actions button{font-size:11px}
@media(max-width:800px){.cat-lesson{grid-template-columns:210px minmax(0,1fr);gap:25px}.tutorial-cat img{height:240px}.tutorial-dialogue{padding:26px}.tutorial-dialogue h1{font-size:22px}.lesson-copy{font-size:13px}}
@media(max-width:600px){
 .comic-screen{padding:22px 15px;gap:20px;justify-content:center}
 .comic-frame{width:100%;border-width:2px}
 .comic-caption h1{font-size:17px}
 .comic-caption>p{font-size:10px}
 .comic-meta{font-size:10px;letter-spacing:0}
 .comic-footer{font-size:10px;line-height:1.8;gap:12px}
 .identity-screen{padding:24px 15px}
 .king-create-form{padding:29px 23px;border-radius:20px}
 .king-create-form h1{font-size:21px}
 .tutorial-screen{padding:23px 16px;gap:22px;justify-content:flex-start}
 .tutorial-top{font-size:10px;letter-spacing:0}
 .cat-lesson{grid-template-columns:1fr;gap:20px}
 .tutorial-cat img{width:150px;height:150px}
 .tutorial-cat>span{padding:6px 16px;font-size:12px}
 .tutorial-cat p{display:none}
 .tutorial-dialogue{padding:26px 23px;border-radius:20px}
 .tutorial-dialogue:before{left:calc(50% - 10px);top:-10px;width:20px;height:20px}
 .tutorial-dialogue h1{font-size:21px;margin-bottom:17px}
 .lesson-copy{font-size:13px;line-height:1.95;margin-bottom:18px}
 .lesson-tip{padding:12px;gap:10px;margin-bottom:22px}
 .lesson-tip p{font-size:11px}
 .lesson-tip .painted-icon{width:30px;height:30px}
 .tutorial-controls{gap:12px}
 .tutorial-controls button{font-size:12px;padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){.comic-frame,.comic-motion,.comic-caption,.comic-finale .comic-frame{animation:none}.summon-burst,.summon-flash{display:none}}

/* The tutorial sits over the live game; only comic/profile setup is full-screen. */
#onboarding.onboarding--guided{position:static;overflow:visible;background:transparent;pointer-events:none}
.onboarding-coach-layer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#394335;overflow:visible;pointer-events:none;z-index:1100}
.onboarding-coach-layer::backdrop{background:transparent;pointer-events:none}
.onboarding-spotlight{position:fixed;border:2px solid #ffd67a;border-radius:13px;box-shadow:0 0 0 9999px #101c2b99,0 0 0 5px #ffda7b38;pointer-events:none;transition:top .18s,left .18s,width .18s,height .18s}
.onboarding-shade{position:fixed;inset:0;background:#101c2b99;pointer-events:none}
.onboarding-coach{position:fixed;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;pointer-events:auto;border:1px solid #d7c8a7;border-radius:19px;background:#fffaf0;box-shadow:0 12px 44px #0b182b55;padding:15px 17px;color:#394335;font-size:13px;line-height:1.6;animation:caption-in .2s ease both}
.coach-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:#86816b;letter-spacing:.5px}
.coach-heading b{margin-left:7px;font-weight:500;font-variant-numeric:tabular-nums}
.coach-heading button{border:0;background:none;color:#736e60;padding:4px 6px;cursor:pointer;font-size:11px}
.coach-dialogue{display:flex;align-items:center;gap:12px;margin:6px 0 9px;min-height:114px}
.coach-cat{width:91px;height:111px;object-fit:contain;flex:none;filter:drop-shadow(0 5px 4px #59683a18)}
.coach-dialogue h2{font-size:17px;line-height:1.5;margin:0 0 6px;color:#354b3a}
.coach-dialogue p{font-size:12px;line-height:1.8;margin:0;color:#686b58;text-wrap:pretty}
.coach-controls{display:flex;align-items:center;justify-content:space-between;gap:10px}
.coach-controls button{min-height:36px;padding:8px 15px;border-radius:10px;font-size:12px;cursor:pointer}
.coach-controls button:disabled,.coach-heading button:disabled{opacity:.6;cursor:wait}
.coach-dots{display:flex;gap:5px}
.coach-dots i{width:5px;height:5px;border-radius:50%;background:#d7d8c8}
.coach-dots i.active{width:16px;border-radius:4px;background:#879e68}
.onboarding-coach button:focus-visible{outline:3px solid #c9a255;outline-offset:3px}
.onboarding-coach-layer .onboarding-coach{margin:0;box-sizing:border-box}
.onboarding-coach{animation:none;visibility:hidden;opacity:0;pointer-events:none}
.onboarding-coach.is-visible{visibility:visible;pointer-events:auto;animation:coach-pop .24s cubic-bezier(.2,.8,.3,1.2) both}
.coach-action-hint{font-size:10px;color:#8b876f}
@keyframes coach-pop{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.comic-screen{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.comic-hold-progress{width:100px;height:4px;border-radius:4px;background:#796283;overflow:hidden}
.comic-hold-progress i{display:block;height:100%;background:#f4d9ff;transform-origin:left;animation:comic-hold .8s linear both}
@keyframes comic-hold{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.local-reset-tools{position:fixed;inset:auto 14px 14px auto;margin:0;width:146px;padding:10px;border:1px solid #a6ad8a;border-radius:12px;background:#253d32;color:#f5f1dd;box-shadow:0 5px 22px #10251c55;z-index:1300;font-size:10px;line-height:1.5}
.local-reset-tools div{display:flex;justify-content:space-between;gap:5px;opacity:.85}
.local-reset-tools button{display:block;width:100%;min-height:32px;margin-top:6px;border:1px solid #c0aa77;border-radius:7px;background:#ece1c0;color:#58472d;font-size:11px;cursor:pointer}
.local-reset-tools button:disabled{opacity:.6;cursor:wait}
.local-reset-tools p{margin:6px 0 0;font-size:10px;color:#ffe1b4}
@media(max-width:600px){.local-reset-tools{inset:105px 10px auto auto;width:132px;padding:8px}}
.onboarding-coach .onboarding-error{margin:8px 0;font-size:11px;padding:7px 9px}
@media(max-width:600px){.onboarding-coach{padding:12px 14px;border-radius:16px}.coach-dialogue{gap:10px;min-height:104px}.coach-cat{width:76px;height:100px}.coach-dialogue h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.onboarding-spotlight{transition:none}.onboarding-coach.is-visible{animation:none;opacity:1}}

.pet-picker-row{display:flex;align-items:center;gap:7px;min-width:0}.pet-picker-row .pet-catalog-card{flex:1;min-width:0}.pet-picker-assign{flex:none;width:94px;min-height:42px;padding:8px 5px;font-size:12px;border:1px solid #a2ac78;border-radius:9px;background:#e5eccd;color:#3d5739}.pet-picker-assign:disabled{opacity:.65}.arena-empty-slot{min-height:100px;width:100%;justify-content:center;gap:12px}
@media(max-width:760px){.guide-life-overview .mobile-life-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.guide-life-overview .mobile-life-skill{min-width:0}.pet-picker-row{gap:4px}.pet-picker-assign{width:83px;font-size:11px}}
.arena-team-choice .arena-team-roster>small{grid-column:1/-1;flex:1;text-align:center;line-height:1.7}
@media(max-width:760px){body:has(.onboarding-coach) .local-reset-tools{inset:8px 10px auto auto}}

/* Guided controls never respond to hover or focus outside the current action. */
body[data-onboarding-mode] :where(.game-shell,#task-dialog) *{pointer-events:none!important;cursor:default!important}
body[data-onboarding-mode="action"] [data-guide-target],body[data-onboarding-mode="action"] [data-guide-target] *{pointer-events:auto!important;cursor:pointer!important}
body[data-onboarding-mode] .onboarding-coach,body[data-onboarding-mode] .onboarding-coach *,body[data-onboarding-mode] [data-local-gm],body[data-onboarding-mode] [data-local-gm] *{pointer-events:auto!important}
body[data-onboarding-mode] .onboarding-coach [data-guide-skip],body[data-onboarding-mode] [data-local-gm] button{cursor:pointer!important}
body[data-onboarding-mode] .item-tooltip{display:none!important}
@media(max-width:760px){
 body[data-onboarding-mode] .responsive-game-shell>.game-columns{padding-bottom:var(--guide-card-space,200px);box-sizing:border-box}
 body[data-onboarding-step="0"] .responsive-game-shell>.game-columns{padding-bottom:0}
 body[data-onboarding-mode] .onboarding-coach{max-height:calc(100dvh - 200px);padding:11px 13px}
 body[data-onboarding-mode] .coach-dialogue{min-height:88px;margin:5px 0 8px;gap:9px}
 body[data-onboarding-mode] .coach-cat{width:62px;height:80px}
 body[data-onboarding-mode] .coach-dialogue h2{font-size:15px;line-height:1.45}
 body[data-onboarding-mode] .coach-dialogue p{line-height:1.65}
 body[data-onboarding-step="5"] #task-dialog{position:fixed;inset:100px 10px auto;margin:0 auto;width:calc(100% - 20px);max-width:none;max-height:calc(100dvh - var(--guide-card-space,200px) - var(--guide-dock-space,58px) - 112px);box-sizing:border-box;overflow:hidden}
}