/* First entry uses the accepted art and native tutorial. No delayed controls. */
#tutintro{padding:26px clamp(24px,4vw,76px);text-align:left;overflow-y:auto;background:#0c1727 url('shell-city.webp') center/cover no-repeat;outline:none}
#tutintro::before{position:fixed;background:linear-gradient(90deg,#091522f5 0%,#101e30ef 35%,#10203899 72%,#0b1725b8),linear-gradient(0deg,#08131fee,transparent 65%)}
#tutintro.open{display:flex;align-items:stretch;justify-content:flex-start;gap:24px}
#tutintro .welcome-topline,#tutintro .welcome-main,#tutintro .welcome-footer{width:100%;max-width:1320px;margin:0 auto;flex-shrink:0}
#tutintro .welcome-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:36px}
#tutintro .welcome-edition{color:#c3b38f;font-size:15px;letter-spacing:.1em;text-transform:uppercase}
#tutintro .welcome-languages{display:flex;gap:4px;padding:3px;border:1px solid #8296ac44;border-radius:5px;background:#0d1a2b94}
#tutintro .welcome-languages button{border:0;border-radius:3px;background:none;font:500 15px var(--font-ui);color:#b4c4d6;padding:7px 12px;cursor:pointer}
#tutintro .welcome-languages button[aria-pressed="true"]{color:#f5e4c3;background:#334454}
#tutintro .welcome-main{flex:1;display:grid;grid-template-columns:minmax(360px,.88fr) minmax(420px,1.12fr);align-items:center;gap:clamp(32px,5vw,80px)}
#tutintro .tutintro-panel{width:100%;max-width:520px;box-sizing:border-box;padding:12px 0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
#tutintro .welcome-eyebrow{margin:0 0 12px;font-size:15px;color:#d6b87d;letter-spacing:.14em;text-transform:uppercase}
#tutintro h1{max-width:520px;margin:0;font:500 clamp(48px,5.15vw,76px)/1.06 var(--font-display);letter-spacing:-.045em;color:#f8e9cc;text-wrap:balance;text-shadow:0 3px 18px #050b16a8}
#tutintro .welcome-lead{max-width:430px;margin:22px 0 26px;font-size:16px;line-height:1.65;color:#c5d1df}
#tutintro .welcome-gift{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid #bfa57055;border-radius:5px;background:linear-gradient(115deg,#6d60432b,#23324769);box-shadow:inset 0 1px #efdec00a}
#tutintro .welcome-gift img{flex:none;width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 3px 4px #0006)}
#tutintro .welcome-gift strong{font-size:15px;font-weight:500;color:#f1dfb7;line-height:1.35}
#tutintro .welcome-gift p{font-size:15px;line-height:1.5;color:#b8c7d7;margin:5px 0 0}
#tutintro .tn-block{max-width:none;margin:26px 0 0;align-items:stretch;gap:9px;opacity:1;transition:none}
#tutintro .welcome-name-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
#tutintro .welcome-name-row label{font-size:15px;font-weight:500;color:#dae4ed}
#tutintro #welcome-name-count{font-size:15px;color:#8fa5ba;font-variant-numeric:tabular-nums}
#tutintro .nickin{box-sizing:border-box;min-height:48px;padding:12px 14px;border:1px solid #7f96b47a;border-radius:4px;background:#0b1726c9;color:#f3f0e9;font:500 16px var(--font-ui);text-align:left;box-shadow:inset 0 2px 5px #030c1733}
#tutintro .nickin::placeholder{color:#8296ad;font-weight:400}
#tutintro .tn-sub{margin:0;text-align:left;font-size:15px;line-height:1.45;color:#9db0c4}
#tutintro .tstart{display:block;width:100%;min-height:48px;margin:22px 0 0;padding:12px 20px;border:1px solid #d7ba84;border-radius:4px;background:linear-gradient(115deg,#efd6a6,#c09a5f);color:#251e14;font:600 15px/1.3 var(--font-ui);letter-spacing:0;opacity:1;box-shadow:inset 0 1px #fff0cb,0 4px 14px #050d1755;transition:filter .15s}
#tutintro.open .tstart{animation:none;transition-delay:0}
#tutintro .tstart:hover{filter:brightness(1.08)}
#tutintro .tutskip{display:block;position:static;margin:12px auto 0;padding:8px 12px;color:#afbed0;font:400 15px var(--font-ui);text-underline-offset:3px}
#tutintro :is(button,input):focus-visible{outline:2px solid #f1d399;outline-offset:4px}
#tutintro .welcome-gallery{position:relative;min-width:0;height:540px;isolation:isolate}
#tutintro .welcome-gallery::before{content:'';position:absolute;inset:10% 0 0;background:radial-gradient(ellipse,#b4a77d23,transparent 66%);z-index:-1}
#tutintro .welcome-portrait{position:absolute;box-sizing:border-box;padding:7px;background:linear-gradient(125deg,#d0bd8a,#5c6470 48%,#ae9564);border:1px solid #d4c18d9c;box-shadow:0 18px 38px #030a17b0,inset 0 0 0 2px #101c2d}
#tutintro .welcome-portrait .artclip{position:absolute;inset:7px;overflow:hidden;display:block;border:1px solid #0a101c}
#tutintro .welcome-portrait::after{content:'';position:absolute;inset:8px;background:linear-gradient(0deg,#0a1524db,transparent 33%);pointer-events:none}
#tutintro .welcome-front{width:51%;height:83%;left:24.5%;top:10%;z-index:2}
#tutintro .welcome-left,#tutintro .welcome-right{width:35%;height:67%;top:19%;filter:brightness(.85)}
#tutintro .welcome-left{left:0;transform:rotate(-7deg)}
#tutintro .welcome-right{right:0;transform:rotate(7deg)}
#tutintro .welcome-gallery-caption{position:absolute;bottom:-18px;left:0;right:0;margin:0;text-align:center;font:500 15px var(--font-display);letter-spacing:.02em;color:#dcc79f}
#tutintro .welcome-footer{display:flex;justify-content:space-between;gap:24px;padding-top:16px;border-top:1px solid #8b9baa30;color:#8d9fb2;font-size:15px;line-height:1.5}
#tutintro .welcome-footer-brand{font-size:15px;letter-spacing:.15em;color:#b3a88e}
/* Keep the engine's measured 360px guide width and its target positioning. */
#guideov .guide-card{padding:18px;border-radius:5px;border-color:#bca16b99;background:linear-gradient(135deg,#26364bef,#101c2afc);box-shadow:0 8px 32px #030c17b3,inset 0 1px #e1e6ea14;max-height:calc(100dvh - 24px);overflow-y:auto}
#guideov .guide-kicker{font:500 15px var(--font-ui);letter-spacing:.09em;color:#d8bd84;margin:0 28px 9px 0}
#guideov .guide-title{font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.3;margin-right:16px;color:#f1e6d2}
#guideov .guide-text{font:400 15px/1.6 var(--font-ui);color:#c6d3e1}
#guideov .guide-actions{gap:10px;margin-top:16px;justify-content:flex-end}
#guideov .guide-btn{font:500 15px var(--font-ui);min-height:38px;padding:8px 14px;border-radius:4px;background:#122335;border-color:#7189a373;color:#d5e1ed}
#guideov .guide-btn.primary{background:linear-gradient(115deg,#e5c68f,#bb965c);border-color:#d2b37c;color:#241d12}
#guideov .guide-close{font-size:0;background:url('illustrated/close.webp') center/22px no-repeat;width:30px;height:30px;top:9px;right:9px}
#guideov .guide-skip{font:400 15px var(--font-ui);background:#0e1b2ceF;border:1px solid #8598b24d;border-radius:4px;color:#c1cddd;text-underline-offset:3px}
#guideov .guide-spot{border-radius:5px;border-color:#e4c48c;box-shadow:0 0 0 4000px #040d19bf,0 0 20px -8px #f2c77c80}
#guideov button:focus-visible{outline:2px solid #f1d399;outline-offset:3px}
@media(min-width:1000px) and (max-height:800px){
 #tutintro{padding-top:18px;padding-bottom:18px}
 #tutintro.open{gap:12px}
 #tutintro h1{font-size:56px}
 #tutintro .welcome-gallery{height:450px}
 #tutintro .welcome-lead{margin:16px 0 18px;font-size:15px}
 #tutintro .welcome-gift{padding:8px 12px}
 #tutintro .welcome-gift img{width:48px;height:48px}
 #tutintro .tn-block{margin-top:18px}
 #tutintro .tstart{margin-top:16px}
}
@media(max-width:1099px){
 #tutintro .welcome-main{gap:28px;grid-template-columns:minmax(330px,1fr) minmax(340px,1fr)}
 #tutintro h1{font-size:54px}
 #tutintro .welcome-gallery{height:460px}
}
@media(max-width:799px){
 #tutintro{padding:18px 22px 20px}
 #tutintro.open{gap:20px}
 #tutintro .welcome-edition{font-size:15px;letter-spacing:.06em;max-width:140px}
 #tutintro .welcome-languages button{padding:7px 9px;font-size:15px}
 #tutintro .welcome-main{display:flex;flex-direction:column;gap:0;justify-content:center}
 #tutintro .tutintro-panel{max-width:460px;padding:8px 0 0}
 #tutintro h1{font-size:clamp(43px,9vw,60px);max-width:400px}
 #tutintro .welcome-eyebrow{font-size:15px;margin-bottom:9px}
 #tutintro .welcome-lead{font-size:15px;line-height:1.55;margin:16px 0 20px}
 #tutintro .welcome-gallery{display:none}
 #tutintro .welcome-gift{padding:8px 12px;gap:10px}
 #tutintro .welcome-gift img{width:48px;height:48px}
 #tutintro .welcome-gift strong{font-size:15px}
 #tutintro .tn-block{margin-top:22px}
 #tutintro .welcome-footer{font-size:15px}
 #tutintro .welcome-footer-brand{display:none}
}
@media(prefers-reduced-motion:reduce){
 #tutintro *,#guideov *{animation:none!important;transition:none!important}
}