/* The title screen, save slots, the opening storybook and Sir Bacon's first morning (castle-title.js, castle-intro.js, castle-opening.js). */
.cw-game.is-title .cw-topbar,.cw-game.is-title .cw-bottom-bar{display:none!important}
.cw-start{position:absolute;inset:0;z-index:8;display:flex;align-items:stretch;background:linear-gradient(90deg,#0f2b38cc 0,#0f2b3866 46%,#0f2b3800 72%)}.cw-start::before{content:'';position:absolute;inset:0;z-index:-1;background:#1d4a5c url(/assets/scenes/kingdom.webp) 58% 45%/cover;transition:opacity .9s ease}.cw-start.is-live::before{opacity:0}
.cw-viewport:has(.cw-fallback) .cw-start{display:none}
.cw-start-panel{position:relative;margin:26px 0 26px 34px;width:420px;max-width:calc(100% - 28px);overflow:auto;overscroll-behavior:contain;background:#fffbedf2;border:3px solid #244d5e;border-radius:24px;box-shadow:6px 7px 0 #0b1f2a55;padding:26px 26px 20px;display:flex;flex-direction:column;gap:14px;color:#173c50}
.cw-start-brand h2{font:400 3rem/1 var(--display);margin:10px 0 2px}.cw-start-brand h2:focus{outline:none}
.cw-start-menu{display:grid;gap:10px}
.cw-start-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:9px 16px 9px 10px;border:2px solid #173c50;border-radius:16px;background:#fffaf0;color:#173c50;box-shadow:0 4px 0 #173c5044;text-align:left;text-decoration:none;cursor:pointer;font:inherit}.cw-start-btn:hover{background:#e4f5fb}.cw-start-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #173c5044}
.cw-start-icon{display:grid;place-items:center;flex-shrink:0;width:46px;height:46px;border-radius:50%;background:#20566a;color:#ffdf79;font-size:22px;line-height:1}
.cw-start-btn strong{display:block;font:400 21px/1.15 var(--display)}.cw-start-btn small{display:block;font:700 12.5px/1.35 var(--sans);color:#4c6670;margin-top:3px}
.cw-start-btn.is-big{min-height:80px;background:#ffdb6a;border-width:3px}.cw-start-btn.is-big:hover{background:#ffe797}.cw-start-btn.is-big .cw-start-icon{width:56px;height:56px;font-size:26px;background:#173c50}.cw-start-btn.is-big strong{font-size:27px}.cw-start-btn.is-big small{color:#5a4a1f}
.cw-start-btn.is-small{min-height:48px;padding:6px 12px 6px 6px;box-shadow:0 3px 0 #173c5033}.cw-start-btn.is-small .cw-start-icon{width:34px;height:34px;font-size:16px}.cw-start-btn.is-small strong{font-size:17px}
.cw-start-foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;margin-top:auto}
.cw-start-link,.cw-start-back{min-height:44px;padding:0;border:0;background:none;color:#173c50;font:800 14px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.cw-start-back{align-self:flex-start;text-decoration:none}
.cw-start-voice{min-height:44px;padding:6px 14px;border:2px solid #345a6a;border-radius:999px;background:#e8f2ef;color:#173c50;font:800 13px var(--sans);cursor:pointer}.cw-start-voice[aria-pressed=true]{background:#ffdb6a;border-color:#a3772f}
.cw-start-note{margin:0;font:700 12.5px/1.5 var(--sans);color:#5d6a64}
.cw-start-h{font:400 2.2rem/1.1 var(--display);margin:0}.cw-start-h:focus{outline:none}.cw-start-lead{margin:0;font-size:15px;line-height:1.55}
.cw-slot-list{display:grid;gap:10px}
.cw-slot{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:start;padding:12px;border:2px solid #b9c5a5;border-radius:16px;background:#f5f3df}.cw-slot.is-active{border:3px solid #c9952f;background:#fff3cc}.cw-slot.is-empty{background:#eef2ea;border-style:dashed}
.cw-slot-shield{display:grid;place-items:center;width:42px;height:48px;border-radius:12px 12px 50% 50%;background:#20566a;color:#ffdf79;font:400 22px var(--display);border:2px solid #173c50}.cw-slot.is-empty .cw-slot-shield{background:#cfd9cf;color:#5c6f63;border-color:#9fb1a3}
.cw-slot-body strong{display:block;font:400 21px/1.2 var(--display)}.cw-slot-body small{display:block;font:700 12px/1.4 var(--sans);color:#5b6b63}.cw-slot-stats{margin:6px 0 0;font:800 12px/1.5 var(--sans);color:#3a5a55}
.cw-slot-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.cw-slot-actions .cw-button{min-height:44px;padding:8px 14px;font-size:14px}.cw-slot-actions .cw-primary{flex:1}.cw-slot-delete{min-width:48px}.cw-slot-actions .cw-start-btn{flex:1}
.cw-name-form{display:grid;gap:12px}.cw-name-form label{font:900 14px var(--sans)}.cw-name-form label small{font-weight:700;color:#5b6b63}
.cw-name-form input{width:100%;min-height:54px;padding:10px 14px;border:2px solid #173c50;border-radius:12px;background:#fff;color:#173c50;font:700 20px var(--sans)}.cw-name-form input:focus-visible{outline:3px solid #075d7a;outline-offset:2px}
.cw-name-chips{display:flex;flex-wrap:wrap;gap:8px}.cw-name-chips button{min-height:44px;padding:6px 14px;border:2px solid #345a6a;border-radius:999px;background:#e6f2f3;color:#173c50;font:800 14px var(--sans);cursor:pointer}.cw-name-chips button:hover{background:#ffe797}
.cw-name-go{min-height:56px;font-size:17px}
.cw-start-confirm{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin:auto 0}.cw-start-confirm .cw-start-icon{width:60px;height:60px;font-size:28px}.cw-start-confirm-actions{display:flex;flex-wrap:wrap;gap:10px;width:100%}.cw-start-confirm-actions .cw-button{flex:1;min-height:52px}
.cw-start-danger{background:#fbe1dc;border-color:#9b3b2e;color:#7a2a20}.cw-start-danger:hover{background:#f7cdc4}
.cw-saved{position:absolute;right:18px;top:62px;z-index:9;display:flex;align-items:center;gap:6px;padding:7px 13px;background:#173f50e6;color:#fff5dc;border:1px solid #ecc975;border-radius:999px;font:800 13px var(--sans);pointer-events:none;opacity:0}.cw-saved span{color:#ffdb69;font-size:16px}.cw-saved.is-showing{animation:cw-saved 1.9s ease both}
@keyframes cw-saved{0%{opacity:0;transform:translateY(-6px)}12%,75%{opacity:1;transform:none}100%{opacity:0}}
.cw-menu-slot{display:inline-block;font-weight:900;color:#173c50;background:#ffefc0;border:1px solid #d4a043;border-radius:999px;padding:1px 10px;margin-right:4px}
/* The opening storybook. */
.cw-intro{position:absolute;inset:0;z-index:40;background:#0d1d26;color:#173c50;overflow:hidden;cursor:pointer;outline:none;transition:opacity .35s ease}.cw-intro.is-leaving{opacity:0}
.cw-intro-art{position:absolute;inset:0;overflow:hidden}.cw-intro-art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.86);transform:scale(1.05)}.cw-intro-art.is-moving img{animation:cw-burns 12s ease-out both}.cw-intro-art::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,#08141cf0 0,#08141c99 30%,#08141c00 62%)}
@keyframes cw-burns{from{transform:scale(1.04) translate(0,0);opacity:.2}8%{opacity:1}to{transform:scale(1.16) translate(-1.5%,-1%)}}
.cw-intro-cast{position:absolute;right:5%;bottom:118px;height:min(66%,430px);max-width:40%;object-fit:contain;filter:drop-shadow(0 8px 18px #0008);animation:cw-cast .7s ease-out both}
@keyframes cw-cast{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.cw-intro-card{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(780px,calc(100% - 32px));padding:16px 22px 12px;background:#fffbedf5;border:3px solid #244d5e;border-radius:20px;box-shadow:0 6px 0 #0b1f2a66}
.cw-intro-text{margin:6px 0 8px;font:400 23px/1.45 var(--display);min-height:2.9em}.cw-intro-ghost{visibility:hidden}
.cw-intro-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}.cw-intro-dots{display:flex;gap:6px}.cw-intro-dots i{width:9px;height:9px;border-radius:50%;background:#c8d3cf}.cw-intro-dots i.is-done{background:#7fa0a3}.cw-intro-dots i.is-current{background:#d39a2c;transform:scale(1.25)}.cw-intro-hint{font:800 12px var(--sans);color:#5d6a64}
.cw-intro-tools{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:2}
.cw-intro-tool{position:relative;overflow:hidden;min-height:44px;padding:8px 16px;border:2px solid #ffffffb3;border-radius:999px;background:#122028b3;color:#fff;font:800 14px var(--sans);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}.cw-intro-tool[aria-pressed=true]{background:#2c6a5fcc}.cw-intro-tool>span:last-child{position:relative}
.cw-intro-fill{position:absolute;inset:0;background:#ffd56b;opacity:.55;transform:scaleX(0);transform-origin:left}
.cw-intro.is-still .cw-intro-art img,.cw-intro.is-still .cw-intro-cast{animation:none}
/* Sir Bacon's first morning: the checklist, hints that fade in, the chest label, and waking up. */
.cw-morning-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.cw-morning ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}.cw-morning li{display:flex;gap:8px;align-items:baseline;font:700 12.5px/1.35 var(--sans);color:#6a7771}.cw-morning li b{width:14px;flex-shrink:0;text-align:center}.cw-morning li.is-current{color:#173d50}.cw-morning li.is-current b{color:#c48a25}.cw-morning li.is-done{color:#3f7a4f}
.cw-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);max-width:calc(100% - 150px);width:max-content;padding:10px 18px;background:#173f50eb;color:#fff5dc;border:1px solid #ecc975;border-radius:999px;font:800 14px/1.35 var(--sans);text-align:center;pointer-events:none;opacity:0}.cw-hint.is-showing{animation:cw-hint .5s ease-out .2s both}
@keyframes cw-hint{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.cw-chest-label{z-index:2}.cw-chest-label.is-aimed{background:#ffdb6a;border-color:#8a6a2a}
.cw-wake{position:absolute;inset:0;background:#0b141a;z-index:9;pointer-events:none}.cw-wake.is-fading{animation:cw-wake 2.4s ease-in both}
@keyframes cw-wake{0%,25%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.cw-start::before,.cw-intro{transition:none}.cw-intro-art.is-moving img,.cw-intro-cast,.cw-hint.is-showing,.cw-saved.is-showing{animation:none;opacity:1}.cw-wake.is-fading{animation:none;opacity:0}}
@media(max-width:650px){
 .cw-start{background:#0f2b3840}.cw-start-panel{margin:12px;width:auto;max-width:none;flex:1;padding:18px 16px 14px;gap:11px;border-radius:18px}
 .cw-start-brand h2{font-size:2.35rem}.cw-start-btn{min-height:56px}.cw-start-btn strong{font-size:19px}.cw-start-btn.is-big{min-height:68px}.cw-start-btn.is-big strong{font-size:23px}.cw-start-btn.is-big .cw-start-icon{width:48px;height:48px}
 .cw-start-h{font-size:1.8rem}.cw-start-lead{font-size:14px}.cw-slot{padding:10px}.cw-slot-body strong{font-size:19px}
 .cw-intro-card{bottom:12px;padding:12px 14px 10px;border-radius:16px}.cw-intro-text{font-size:18px}.cw-intro-cast{right:2%;bottom:200px;height:38%;max-width:46%}.cw-intro-hint{font-size:11px}
 .cw-hint{max-width:calc(100% - 24px);font-size:12px;padding:8px 13px;border-radius:14px}
 .cw-saved{top:auto;bottom:12px;right:12px}
}
@media(max-height:560px) and (min-width:651px){.cw-start-panel{margin:12px 0 12px 16px;padding:14px 16px;gap:8px}.cw-start-brand h2{font-size:2rem}.cw-start-btn{min-height:48px}.cw-start-btn.is-big{min-height:58px}.cw-start-menu{grid-template-columns:1fr 1fr}.cw-start-menu .is-big{grid-column:1/-1}}
/* Step hints sit along the bottom, clear of the speech bubble; on touch screens they stay between the move pad and
   the big buttons, or above them on a phone held upright. */
@media(pointer:coarse){.cw-hint{bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100% - 440px)}}
@media(pointer:coarse) and (max-width:650px){.cw-hint{bottom:calc(232px + env(safe-area-inset-bottom));max-width:calc(100% - 24px)}}
/* The King's Scroll (knight-rank.js): the knight's rank and today's three steps, from King Dunno. */
.cw-rank-line{margin:6px 0 10px;padding:8px 12px;background:#e8f6e3;border:2px solid #9fc79a;border-radius:12px;font-size:15px}
.cw-scroll-steps{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
.cw-scroll-steps li{display:flex;align-items:center;gap:10px;padding:9px 11px;background:#fffdf5;border:2px solid #e4c983;border-radius:12px}
.cw-scroll-steps li>b{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#ffd65a;border:2px solid #173d50;font-size:15px}
.cw-scroll-steps li>div{display:grid;gap:2px;flex:1;min-width:0}.cw-scroll-steps li span{font-size:13.5px;opacity:.85}
.cw-scroll-steps li.is-done{opacity:.72}.cw-scroll-steps li.is-done>b{background:#9fd49a}
.cw-scroll-steps .cw-button{flex-shrink:0}
@media(max-width:520px){.cw-scroll-steps li{flex-wrap:wrap}.cw-scroll-steps .cw-button{width:100%}}
/* When a page is fully shown, "Tap to continue" says so clearly: the storybook waits for the child (2026-10-10). */
.cw-intro.is-ready .cw-intro-hint{color:#173c50;font-weight:900;animation:cw-intro-ready 1.2s ease-in-out 3}
@keyframes cw-intro-ready{50%{transform:translateY(-3px)}}
@media(max-height:560px){.cw-intro-hint{font-size:14px}}
@media(prefers-reduced-motion:reduce){.cw-intro.is-ready .cw-intro-hint{animation:none}}