/* Scoped to the optional guide so the game remains playable behind it. */
#rules-modal.learn-dialog { width:min(590px,calc(100% - 24px)); max-width:590px; max-height:calc(100dvh - 24px); padding:23px 27px 17px; overflow:auto; border:1px solid #708c7566; border-radius:16px; background:#102a30; color:#efe9d7; box-shadow:0 25px 100px #010c13a6; }
#rules-modal.learn-dialog::backdrop { background:#020e14b5; backdrop-filter:blur(7px); }
.learn-dialog button { font-family:var(--sans,system-ui,sans-serif); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.learn-dialog button:focus-visible,.learn-dialog summary:focus-visible { outline:3px solid #dbc17d; outline-offset:3px; }
.learn-top { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#a9c9b5; font:700 10px var(--sans,system-ui,sans-serif); letter-spacing:1.7px; }
.learn-top .learn-close { display:grid; place-items:center; width:40px; height:40px; border:1px solid #91b09b30; border-radius:50%; color:#d7e4d0; background:#1a3840; font-size:14px; }
.learn-topics { display:flex; gap:4px; padding:12px 0 16px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#52756b transparent; }
.learn-topics button { flex:1 0 auto; min-height:33px; padding:7px 8px; border:1px solid transparent; border-radius:5px; background:transparent; color:#a2b9ad; font-size:10px; }
.learn-topics button:hover { background:#24433f; }
.learn-topics button.is-current { background:#d0dbc1; color:#163a34; border-color:#e0e8d3; font-weight:700; }
.learn-stage { min-height:393px; }
.learn-illustration { position:relative; display:flex; align-items:center; justify-content:center; gap:25px; height:198px; border:1px solid #81917b26; border-radius:11px; background:radial-gradient(ellipse at 50% 78%,#2a504545,transparent 72%),#0b2027; overflow:hidden; margin-bottom:23px; }
.learn-illustration:after { content:''; position:absolute; bottom:12px; left:12%; right:12%; height:34px; border:1px solid #b3a36d24; border-radius:50%; pointer-events:none; }
.learn-glyph { width:52px; height:52px; display:block; color:#d6ba78; }
.learn-card-back { display:grid; place-items:center; flex:none; width:76px; height:108px; border:2px solid #b4a168; border-radius:7px; color:#d3b879; background:repeating-linear-gradient(135deg,#234a45 0 1px,#1a3939 1px 8px); box-shadow:inset 0 0 0 5px #183435,inset 0 0 0 6px #829673,0 10px 20px #0003; }
.learn-card-back>span { font-size:38px; }
.learn-tilt-left { transform:rotate(-11deg); }
.learn-tilt-right { transform:rotate(11deg); }
.learn-secret { gap:9px; padding-top:20px; }
.learn-secret .learn-card-back { width:78px; height:106px; }
.learn-goal-crown { position:absolute; top:8px; left:calc(50% - 22px); }
.learn-goal-crown .learn-glyph { width:44px; height:44px; }
.learn-art-caption { position:absolute; bottom:12px; left:10px; right:10px; text-align:center; color:#b3c8b7; font-size:10px; z-index:1; }
.learn-secret .learn-art-caption { bottom:10px; }
.learn-role-card { display:block; position:relative; flex:none; width:83px; height:119px; border:1px solid #ae9c6f; border-radius:7px; overflow:hidden; box-shadow:0 8px 20px #0004; background:#172d30; }
.learn-role-card img { width:100%; height:100%; object-fit:cover; object-position:50% 15%; }
.learn-role-card>span { position:absolute; bottom:0; left:0; right:0; padding:15px 3px 7px; background:linear-gradient(transparent,#091a21ed 35%); color:#f5e5bd; text-align:center; font:15px Georgia,serif; }
.learn-versus { display:flex; flex-direction:column; align-items:center; gap:6px; color:#d9c48d; }
.learn-versus b { font-size:10px; font-weight:500; }
.learn-defense .learn-glyph { color:#a4d8bc; }
.learn-defense b { color:#aacdb6; max-width:70px; text-align:center; line-height:1.4; }
.learn-coins { display:flex; justify-content:center; gap:0; }
.learn-coins .learn-glyph { width:43px; height:43px; }
.learn-earn { gap:0; }
.learn-earn>div { width:48%; text-align:center; }
.learn-earn>div+div { border-left:1px solid #869f862e; }
.learn-earn b { display:block; font:24px Georgia,serif; margin:12px 0 7px; color:#ecdfba; }
.learn-earn div>span:last-child { display:block; color:#b0c1ae; font-size:10px; }
.learn-action-arrow { color:#b9c29b; font-size:31px; }
.learn-action-arrow .learn-glyph { width:37px; height:37px; }
.learn-amount { display:block; text-align:center; margin-top:10px; color:#e0c383; font:20px Georgia,serif; }
.learn-mini-hand { display:flex; gap:0; }
.learn-mini-hand .learn-card-back { width:49px; height:72px; }
.learn-mini-hand .learn-card-back+span { margin-left:-15px; }
.learn-mini-hand .learn-card-back>span { font-size:27px; }
.learn-price { color:#ddc78d; font:72px Georgia,serif; line-height:.8; text-align:center; }
.learn-price>span { display:block; font:10px var(--sans,system-ui,sans-serif); margin-top:12px; text-transform:uppercase; letter-spacing:1px; }
.learn-guess { position:absolute; right:calc(50% - 108px); top:54px; color:#d9ccab; }
.learn-guess .learn-glyph { width:47px; height:47px; color:#ddc992; background:#163538db; border-radius:50%; }
.learn-guess b { display:block; font-size:10px; font-weight:500; margin-top:10px; }
.learn-eyebrow { display:block; color:#c5af7d; font-size:9px; letter-spacing:1.7px; font-weight:700; }
#rules-modal.learn-dialog h2 { margin:10px 0 11px; color:#f1ead7; font:400 34px/1.1 Georgia,serif; letter-spacing:-.7px; }
#rules-modal.learn-dialog .learn-body { color:#c1d0bf; font-size:14px; line-height:1.6; margin:0 0 17px; max-width:440px; }
#rules-modal.learn-dialog .learn-tip { margin:0; padding:12px 14px; border:1px solid #acc19733; border-radius:6px; color:#d0dfc5; background:#203f3b; font-size:12px; line-height:1.5; }
.learn-outcomes { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.learn-outcomes>div { padding:12px; border:1px solid #acc19733; border-radius:6px; background:#203f3b; }
.learn-outcomes>div+div { background:#403630; border-color:#d6ab7633; }
.learn-outcomes strong { display:block; color:#dddbad; font-size:11px; margin-bottom:6px; }
.learn-outcomes span { display:block; color:#c4cebb; font-size:11px; line-height:1.5; }
.learn-detail { margin-top:12px; color:#a0bca9; }
.learn-detail summary { width:max-content; max-width:100%; padding:6px 0; font-size:10px; cursor:pointer; }
#rules-modal.learn-dialog .learn-detail p { color:#b4c9b6; font-size:12px; line-height:1.65; margin:6px 0 2px; padding:9px 12px; border-left:2px solid #829c79; }
.learn-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:20px; margin-top:16px; border-top:1px solid #a7b68d24; }
.learn-controls button { min-height:43px; padding:10px 18px; border:1px solid #80967b55; border-radius:6px; background:#1e3d3e; color:#d1dfc5; font-size:12px; }
.learn-controls button:disabled { cursor:default; opacity:.3; }
.learn-controls .learn-next { background:#c7d9b6; color:#1c3d32; border-color:#dbe4c3; min-width:110px; font-weight:650; }
.learn-controls .learn-next:hover { background:#e0e8ca; }
.learn-counter { color:#98b09a; font-size:10px; letter-spacing:2px; }
#rules-modal.learn-dialog .learn-exit-note { font-size:10px; text-align:center; color:#96ae9c; margin:16px 0 0; }
.learn-exit-note button { border:0; background:none; color:#c4d5b9; font-size:10px; padding:4px 3px; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:600px){
 #rules-modal.learn-dialog { padding:16px 18px 13px; border-radius:12px; }
 .learn-top { font-size:9px; }
 .learn-top .learn-close { width:35px; height:35px; }
 .learn-topics { gap:2px; padding:7px 0 13px; }
 .learn-topics button { min-height:31px; padding:6px 5px; font-size:9px; }
 .learn-stage { min-height:366px; }
 .learn-illustration { height:168px; margin-bottom:18px; gap:19px; }
 .learn-role-card { width:74px; height:109px; }
 .learn-earn { gap:0; }
 .learn-earn b { font-size:22px; }
 .learn-coins .learn-glyph { width:37px; height:37px; }
 .learn-amount { font-size:17px; }
 .learn-versus b { font-size:9px; }
 .learn-art-caption { font-size:8px; }
 .learn-secret { padding-top:15px; gap:6px; }
 .learn-secret .learn-card-back { width:64px; height:89px; }
 .learn-goal-crown { top:4px; left:calc(50% - 19px); }
 .learn-goal-crown .learn-glyph { width:38px; height:38px; }
 .learn-guess { top:40px; right:calc(50% - 100px); }
 #rules-modal.learn-dialog h2 { font-size:29px; margin:9px 0 10px; }
 #rules-modal.learn-dialog .learn-body { font-size:13px; margin-bottom:14px; }
 #rules-modal.learn-dialog .learn-tip { font-size:11px; padding:11px 12px; }
 .learn-controls { margin-top:12px; padding-top:15px; }
 .learn-controls button { min-height:44px; padding:10px 13px; }
 #rules-modal.learn-dialog .learn-exit-note { margin-top:11px; }
}
@media(max-height:690px){
 .learn-stage { min-height:0; }
 .learn-illustration { height:142px; margin-bottom:14px; }
 .learn-role-card { width:63px; height:92px; }
 .learn-card-back { width:62px; height:89px; }
 .learn-secret .learn-card-back { width:54px; height:77px; }
 .learn-illustration .learn-art-caption { bottom:5px; }
 .learn-goal-crown .learn-glyph { width:31px; height:31px; }
 .learn-goal-crown { left:calc(50% - 15px); }
 .learn-guess { top:31px; right:calc(50% - 91px); }
}
@media(prefers-reduced-motion:reduce){.learn-dialog * { scroll-behavior:auto; }}