:root {
  --bg: #121521;
  --surface: #222635;
  --panel: #292f3e;
  --edge: #4d5363;
  --ink: #f2ecdd;
  --muted: #c3c2bd;
  --gold: #f9c76a;
  --gold-dark: #9c6829;
  --mint: #9fe5bc;
  --red: #ffadb0;
  --paper: #f3efe4;
  --paper-text: #262a30;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 50% -18%,#3d3642 0,transparent 58%),linear-gradient(135deg,#171a27 0%,#121521 68%);color:var(--ink);font:17px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #fff4b6;outline-offset:3px}
button:disabled{cursor:default;opacity:.45}
[hidden]{display:none!important}
.app-shell{max-width:1100px;min-height:100vh;margin:0 auto;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:18px 26px;border-bottom:1px solid #4f4650;background:#161824db}
.brand{color:var(--ink);background:none;border:0;padding:0;display:flex;gap:9px;align-items:center;font-size:1.12rem;letter-spacing:.045em;white-space:nowrap}
.brand strong{color:var(--gold);font-weight:900}
.brand-mark{width:35px;height:35px;border:2px solid var(--gold-dark);border-radius:9px;display:grid;place-items:center;color:var(--gold);font-size:1.5rem}
.global-progress{min-width:170px;max-width:320px;flex:1;font-size:.76rem;color:var(--muted)}
.progress-track{height:8px;margin-top:6px;background:#10131c;border:1px solid #62543e;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#ae762e,#ffda7d);border-radius:99px;transition:width .35s}
.nav-btn,.text-btn{color:var(--gold);background:transparent;border:1px solid #77603d;border-radius:9px;padding:8px 12px}
.text-btn{border:0;text-decoration:underline;font-size:.83rem}
.nav-btn:hover,.text-btn:hover{color:white;border-color:#e5bd76}
main{flex:1}
.footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #403e46;padding:9px 26px 14px;color:#a5a5aa;font-size:.75rem}

/* Map */
.map-heading{text-align:center;padding:47px 20px 24px}
.kicker{font-size:.77rem;color:var(--gold);text-transform:uppercase;font-weight:800;letter-spacing:.18em}
h1,h2,h3,p{margin-top:0}
h1{font-family:Georgia,serif;font-size:clamp(2.2rem,6vw,4rem);line-height:1.07;letter-spacing:-.025em;margin:12px 0}
.map-heading p{color:var(--muted);margin:8px auto 0;max-width:560px}
.map-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:22px 25px 50px}
.chamber{position:relative;border:1px solid #77705d;border-radius:14px;background:linear-gradient(150deg,#343747,#202531);color:var(--ink);padding:19px 14px 17px;text-align:center;min-height:255px;display:flex;align-items:center;flex-direction:column;transition:transform .16s,border-color .16s,background .16s}
.chamber:not(:disabled):hover{transform:translateY(-3px);border-color:var(--gold);background:linear-gradient(150deg,#414353,#222b39)}
.chamber:disabled{filter:saturate(.45);opacity:.67}
.chamber-number{font-size:.77rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.chamber-door{display:grid;place-items:center;height:100px;width:83px;margin:13px auto 10px;border-radius:49px 49px 7px 7px;border:8px solid #716653;background:repeating-linear-gradient(90deg,#333039 0,#333039 20px,#47404b 21px,#47404b 24px);box-shadow:inset 0 8px 18px #0e1016,0 4px 0 #161722}
.chamber-door span{font-family:Georgia,serif;color:var(--gold);font-size:2rem;text-shadow:0 2px 8px #0d0f16}
.chamber.current .chamber-door{border-color:#a78551;box-shadow:inset 0 8px 20px #211c27,0 0 24px #e2a74938}
.chamber.complete .chamber-door{border-color:#67957a;background:linear-gradient(135deg,#2b5441,#122520)}
.chamber-title{font-family:Georgia,serif;font-size:1.08rem;font-weight:bold;line-height:1.2;margin:0 0 7px}
.chamber-state{font-size:.76rem;color:var(--muted)}
.chamber.current .chamber-state{color:var(--gold)}
.chamber.complete .chamber-state{color:var(--mint)}

/* Room */
.room-shell{max-width:940px;margin:auto;padding:24px 20px 62px}
.room-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px}
.room-label{color:var(--gold);font-size:.8rem;letter-spacing:.11em;font-weight:800;text-transform:uppercase;margin-bottom:5px}
.room-name{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.5rem);margin:0}
.room-count{white-space:nowrap;color:var(--muted);font-size:.9rem}
.room-progress{height:8px;border:1px solid #6a5644;background:#0d1019;border-radius:99px;overflow:hidden;margin-bottom:18px}
.room-progress-inner{height:100%;background:linear-gradient(90deg,#a46e30,var(--gold));transition:width .2s}
.dungeon-scene{height:127px;display:flex;align-items:flex-end;justify-content:center;gap:45px;overflow:hidden;position:relative;background:linear-gradient(#1d202c55,#22212a 95%),repeating-linear-gradient(0deg,transparent 0,transparent 32px,#554d4a66 33px,#554d4a66 35px),repeating-linear-gradient(90deg,#44404c 0,#44404c 79px,#605862 80px,#605862 82px);border:1px solid #6b6056;border-bottom:7px solid #5b4a3e;border-radius:12px 12px 0 0}
.scene-arch{height:120px;width:162px;border:12px solid #6a615d;border-bottom:0;border-radius:100px 100px 0 0;background:radial-gradient(ellipse at 50% 60%,#63452c66 0,transparent 70%),#0d0e17;box-shadow:inset 0 0 24px #06080a,0 0 14px #0008;display:flex;justify-content:center;align-items:center}
.scene-symbol{color:var(--gold);font:3.9rem Georgia,serif;text-shadow:0 0 18px #f3af5f}
.torch{width:12px;height:45px;background:linear-gradient(90deg,#6d5142,#9d8061,#473126);border:2px solid #241c21;position:relative;bottom:30px;border-radius:3px}
.torch:before{content:"";position:absolute;width:22px;height:31px;left:-7px;bottom:37px;background:radial-gradient(ellipse at 50% 65%,#fff2ae 0 13%,#ffca4d 31%,#f97829 60%,transparent 75%);border-radius:70% 20% 65% 25%;transform:rotate(-9deg);filter:drop-shadow(0 0 11px #f90);animation:flicker 1s alternate infinite}
@keyframes flicker{to{transform:rotate(7deg) scale(.88,1.16)}}
.challenge-card{background:linear-gradient(145deg,#2d3040,#242a37);border:1px solid #77705f;border-top:0;border-radius:0 0 14px 14px;padding:26px 35px 29px;box-shadow:0 15px 35px #0005}
.challenge-type{color:var(--gold);font-size:.76rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin:0 0 11px}
.challenge-question{font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.35;margin:0 0 14px;font-weight:740}
.challenge-description{color:#d5d6d5;font-size:.92rem;max-width:680px;margin:0 0 20px}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:18px 0 23px}
.choice-option{border:2px solid #666779;border-radius:11px;padding:17px 14px;min-height:70px;background:#1b202b;color:var(--ink);font-weight:650;text-align:center;overflow-wrap:anywhere}
.choice-option:hover{border-color:var(--gold)}
.choice-option.selected{border-color:var(--gold);background:#4a3c2e;box-shadow:inset 0 0 0 1px var(--gold)}
.choice-option.letter{font-family:Georgia,serif;font-size:2.4rem}
.answer-label{display:block;font-size:.86rem;color:var(--muted);margin:0 0 8px}
.answer-input{width:100%;max-width:620px;padding:12px 15px;border:2px solid #7f8290;border-radius:9px;background:#f9f5ed;color:#1a2330;font-size:1.06rem}
.answer-edit{min-height:105px;resize:vertical}
.reorder-grid{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 16px}
.order-slot{min-height:66px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:2px dashed #88775f;border-radius:10px;padding:9px 12px;background:#1b202a;margin:12px 0 10px}
.slot-placeholder{font-size:.9rem;color:var(--muted);font-style:italic}
.order-tile{border:1px solid #ad9d81;color:var(--ink);background:#414253;border-radius:7px;padding:10px 14px;min-height:45px;font-size:.93rem}
.order-tile:hover{background:#59586a}
.order-tile.in-slot{background:#77592e;border-color:#dfbb79}
.inline-note{color:var(--muted);font-size:.83rem;margin:4px 0 15px}

/* Mock word processor */
.editor-layout{display:grid;grid-template-columns:minmax(205px,1fr) minmax(230px,1.35fr);gap:20px;align-items:start;margin:17px 0 21px}
.editor-controls{display:grid;gap:12px}
.control-group{margin:0;border:1px solid #777487;border-radius:9px;padding:10px}
.control-group legend{padding:0 5px;font-size:.81rem;font-weight:700;color:#ddd0b1}
.segmented{display:flex;gap:6px;flex-wrap:wrap}
.segmented button{padding:9px 10px;border-radius:7px;border:1px solid #777787;background:#212532;color:var(--ink);font-size:.85rem;flex:1;min-width:72px;min-height:42px}
.segmented button.active{border-color:var(--gold);background:#5f452a;color:#fff2d7;box-shadow:inset 0 0 0 1px #d2a14e}
.paper-wrap{background:#121621;border-radius:11px;padding:12px;border:1px solid #5d5a56}
.paper-label{color:#bbb9b7;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.paper{background:var(--paper);color:var(--paper-text);min-height:270px;border:1px solid #d9d5cb;box-shadow:0 3px 11px #0008;position:relative;padding:38px 34px 20px;overflow:hidden;line-height:1.3;font-family:"Times New Roman",serif;font-size:12px}
.paper-page-number{text-align:right;position:absolute;top:12px;right:19px;font-family:Arial,sans-serif;font-size:11px}
.paper-content{white-space:pre-wrap;overflow-wrap:anywhere}
.paper-content p{margin:0 0 14px}
.paper.center .paper-content{text-align:center}
.paper.right .paper-content{text-align:right}
.paper.double .paper-content{line-height:2}
.paper.bold .paper-content{font-weight:700}
.paper.first .paper-content{text-indent:1.6em}
.paper.hanging .paper-content{padding-left:1.6em;text-indent:-1.6em}
.paper.margin-half{padding-left:12px;padding-right:12px}
.paper.margin-large{padding-left:57px;padding-right:57px}
.paper.font-arial .paper-content{font-family:Arial,sans-serif;font-size:11px}
.paper.font-calibri .paper-content{font-family:Calibri,Arial,sans-serif;font-size:11px}
.paper.font-comic .paper-content{font-family:'Comic Sans MS',cursive;font-size:14px}

.feedback{display:flex;align-items:start;gap:10px;padding:12px 14px;border-radius:9px;margin:15px 0 5px;background:#3b292e;color:#ffe1d7;border:1px solid #a65e60}
.feedback.success{background:#183e32;color:#ccffe1;border-color:#56a47c}
.feedback-icon{font-weight:900;font-size:1.13rem}
.feedback strong{display:block}
.feedback p{font-size:.9rem;margin:3px 0 0}
.actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:21px}
.primary-btn{background:#f4bf64;color:#252016;border:2px solid #f6d596;padding:12px 22px;border-radius:9px;font-weight:850;min-height:48px}
.primary-btn:hover{background:#ffe2a1}
.secondary-btn{background:transparent;color:var(--ink);padding:12px 13px;border:1px solid #8b8490;border-radius:9px;min-height:46px}
.secondary-btn:hover{border-color:var(--gold)}
.hint{margin-top:13px;color:#fce2b1;border-left:3px solid var(--gold);padding-left:12px;font-size:.93rem}

/* Results */
.win-screen{max-width:680px;margin:55px auto;text-align:center;padding:25px}
.win-medallion{font:6rem Georgia,serif;color:var(--gold);text-shadow:0 0 40px #bc873f}
.win-screen h1{margin:5px 0 15px}
.win-screen p{color:var(--muted)}
.win-actions{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.small{font-size:.83rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:800px){.map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-layout{grid-template-columns:1fr}.topbar{gap:10px}.global-progress{max-width:180px}}
@media(max-width:520px){body{font-size:16px}.topbar{padding:13px 15px;flex-wrap:wrap}.brand{font-size:.97rem}.brand-mark{width:30px;height:30px}.global-progress{order:3;max-width:none;min-width:0;flex-basis:100%}.footer{padding:9px 14px}.map-heading{padding-top:35px}.map-grid{gap:9px;padding:14px 11px 32px}.chamber{min-height:215px;padding:14px 7px}.chamber-door{height:75px;width:64px;margin:9px auto}.chamber-title{font-size:1rem}.room-shell{padding:16px 10px 40px}.room-header{align-items:start}.room-count{font-size:.75rem}.challenge-card{padding:22px 17px}.dungeon-scene{height:95px}.scene-arch{height:95px;width:130px}.scene-symbol{font-size:2.8rem}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.choice-option{padding:12px 8px}.primary-btn{flex:1}.paper{min-height:230px}.win-screen{margin-top:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Walkable dungeon hallway */
.corridor-heading{padding:35px 18px 23px}
.corridor-heading h1{font-size:clamp(2.2rem,5vw,3.5rem)}
.corridor-heading p{max-width:670px}
.corridor-heading strong{color:var(--gold);font-size:1.15em}
.hallway-shell{margin:0 20px 38px;border:2px solid #645945;border-radius:16px;background:#191b27;box-shadow:0 22px 52px #0008;overflow:hidden}
.hallway-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 18px;background:#242635;border-bottom:1px solid #625747;color:#eac891;letter-spacing:.08em;font-size:.74rem;font-weight:800}
.hallway-topline span:last-child{color:#c5bdad;letter-spacing:0;font-weight:500}
.hallway-viewport{height:380px;width:100%;overflow:hidden;position:relative;background:#22232e;outline-offset:-5px;user-select:none}
.hallway-world{height:100%;position:relative;transform:translate3d(0,0,0);will-change:transform;background:linear-gradient(180deg,#161925dd 0%,transparent 34%,#22202b 84%),repeating-linear-gradient(0deg,transparent 0 39px,#6f666154 40px 42px,transparent 43px 82px),repeating-linear-gradient(90deg,#383440 0 91px,#4b444c 92px 95px,#302f3b 96px 184px);box-shadow:inset 0 28px 35px #090b1499}
.wall-masonry{position:absolute;inset:0 0 83px;pointer-events:none;opacity:.8;background:repeating-linear-gradient(90deg,transparent 0 45px,#1d1b2666 46px 49px,transparent 50px 92px),repeating-linear-gradient(0deg,transparent 0 67px,#16182488 69px 72px,transparent 73px 138px)}
.hallway-world:before{content:"";position:absolute;top:0;left:0;right:0;height:24px;background:repeating-linear-gradient(90deg,#514957 0 46px,#726271 47px 52px,#423b45 53px 102px);border-bottom:9px solid #211d29;box-shadow:0 8px 13px #1115;z-index:2}
.hallway-floor{position:absolute;left:0;right:0;bottom:0;height:83px;border-top:10px solid #8a786b;background:repeating-linear-gradient(90deg,#443c46 0 99px,#5a4b53 100px 104px,#403942 105px 204px),repeating-linear-gradient(0deg,#292631,#453c48);box-shadow:inset 0 8px 12px #13132088}
.hallway-floor:after{content:"";position:absolute;left:0;right:0;top:33px;border-top:3px solid #211f29;box-shadow:0 5px 1px #756c68}
.hall-door{position:absolute;bottom:73px;transform:translateX(-50%);width:204px;height:265px;text-align:center;z-index:3;pointer-events:none}
.door-number{display:block;height:26px;font-size:.72rem;color:#e6bd7d;letter-spacing:.13em;font-weight:800;text-shadow:0 2px 3px #050607}
.door-frame{width:151px;height:176px;margin:0 auto;border:13px solid #786c64;border-bottom:0;border-radius:80px 80px 3px 3px;background:#18151d;box-shadow:inset 0 5px 23px #05050aaa,0 0 0 4px #262630,0 11px 13px #08080caa;overflow:hidden;position:relative}
.door-interior{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#332c33 0 27px,#4b3b3b 29px 32px),linear-gradient(#2b2431,#0c101c);border:3px solid #211c26;display:grid;place-items:center;box-shadow:inset 0 0 22px #100e19}
.door-interior:before{content:"";position:absolute;left:0;right:0;top:55%;height:5px;background:#211b24;box-shadow:0 -36px 0 #201b2488,0 42px 0 #201b2488}
.door-glyph{position:relative;z-index:1;color:#d8be87;text-shadow:0 2px 9px #110d08;font:3.2rem Georgia,serif}
.hall-door.unlocked .door-frame{border-color:#b38b5c;box-shadow:inset 0 5px 23px #05050aaa,0 0 0 4px #413629,0 0 28px #f4b35d77}
.hall-door.unlocked .door-interior{background:radial-gradient(ellipse at 50% 66%,#80674c 0%,#2f3339 55%,#141720 100%)}
.hall-door.cleared .door-frame{border-color:#658677}
.hall-door.cleared .door-interior{background:radial-gradient(ellipse at 50% 70%,#315548,#10261f 68%,#0c1717)}
.hall-door.cleared .door-glyph{color:#b7e9b6}
.hall-door.locked{filter:grayscale(.7);opacity:.72}
.door-name{font-family:Georgia,serif;font-size:1rem;font-weight:bold;margin:9px auto 0;line-height:1.15;color:#f5e6cd;text-shadow:0 2px 4px #07080d}
.door-status{font-size:.72rem;color:#c1c2c5;margin-top:2px}
.hall-door.unlocked .door-status{color:#f5ca83}
.hall-door.cleared .door-status{color:#a8d7b0}
.hall-door:before,.hall-door:after{content:"";position:absolute;top:95px;width:17px;height:31px;background:radial-gradient(ellipse at 50% 60%,#ffe29e 0 14%,#ffc353 29%,#eb6d1a 55%,transparent 73%);filter:drop-shadow(0 0 14px #ff9a21);animation:flicker 1.1s alternate infinite}
.hall-door:before{left:4px}.hall-door:after{right:4px;animation-delay:.5s}
.dungeon-avatar{position:absolute;z-index:6;width:76px;height:138px;bottom:49px;transform:translateX(-50%);filter:drop-shadow(0 4px 4px #020406aa);transition:none;pointer-events:none}
.adventurer{display:block;width:100%;height:100%;overflow:visible}
.dungeon-avatar.facing-left .adventurer{transform:scaleX(-1)}
.step-leg,.swing-arm{transform-box:fill-box;transform-origin:center 12%}
.dungeon-avatar.walking .front-leg{animation:legStep .29s ease-in-out infinite alternate}
.dungeon-avatar.walking .rear-leg{animation:legStep .29s ease-in-out infinite alternate-reverse}
.dungeon-avatar.walking .front-arm{animation:legStep .33s ease-in-out infinite alternate-reverse}
.dungeon-avatar.walking .rear-arm{animation:legStep .33s ease-in-out infinite alternate}
.dungeon-avatar.walking .adventurer{animation:walkBounce .23s ease-in-out infinite alternate}
@keyframes legStep{from{transform:rotate(-16deg)}to{transform:rotate(15deg)}}
@keyframes walkBounce{to{transform:translateY(-3px)}}
.dungeon-avatar.facing-left.walking .adventurer{animation:none}
.hallway-controls{display:flex;align-items:center;gap:23px;background:#242635;border-top:1px solid #665847;padding:16px 20px}
.walk-buttons{display:flex;gap:9px}
.walk-button{min-width:65px;min-height:53px;border:2px solid #947850;background:linear-gradient(#544534,#332e31);border-radius:11px;color:#f9dfab;font-size:1.35rem;font-weight:850;touch-action:none;user-select:none}
.walk-button:active{background:#826238;transform:translateY(1px)}
.hallway-instructions{display:flex;flex-direction:column;gap:3px}
.hallway-instructions strong{font-size:1rem;color:#f2e4cb}
.hallway-instructions span{font-size:.8rem;color:#c3bdaf}
.room-avatar{left:calc(50% + 148px);bottom:-5px;transform:translateX(-50%) scale(.86);z-index:5}
@media (max-width:640px){.hallway-shell{margin:0 8px 20px}.hallway-viewport{height:342px}.hallway-controls{padding:12px;gap:12px}.walk-button{min-width:55px}.hallway-topline{font-size:.67rem;padding:11px}.hallway-topline span:last-child{display:none}.hallway-instructions strong{font-size:.86rem}.room-avatar{left:calc(50% + 100px)}}

/* Minimal navigation and a side-on entrance to each chamber. */
.corridor-heading{padding-top:28px}
.corridor-heading p{margin:9px auto 0}
.back-corridor{margin-left:12px}
.room-avatar.side-adventurer{left:30%;bottom:-7px;transform:translateX(-50%) scale(.78)}
.room-avatar.room-entering{animation:enterSideRoom .95s ease-out both}
@keyframes enterSideRoom{from{left:-10%;}to{left:30%;}}
/* Chamber 1: stone bridge and crocodiles */
.croc-room{max-width:1020px}
.croc-instruction{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:15px 0 12px}
.croc-objective{font-size:clamp(1.15rem,3vw,1.52rem);font-weight:600;color:#f1e2be}
.croc-objective strong{color:#ffd078;text-shadow:0 0 9px #cd862d55}
.croc-counter{color:#cbd8d5;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.94rem}
.letter-wall{border:9px ridge #756551;border-radius:13px 13px 6px 6px;background:radial-gradient(ellipse at 30% 5%,#6e6154,#443f3f 48%,#38353c);box-shadow:inset 0 9px 20px #19192499,0 12px 22px #0006;padding:13px 22px 18px}
.wall-engraving{text-align:center;font-family:Georgia,serif;color:#eac590;font-weight:bold;letter-spacing:.19em;font-size:.76rem;margin-bottom:9px}
.wall-passage{margin:0;color:#f8efdf;font:clamp(1.11rem,2.7vw,1.45rem)/2.02 Georgia,'Times New Roman',serif;overflow-wrap:anywhere;text-align:left}
.wall-letter{border:0;background:none;color:#fff2db;font:inherit;padding:0 1px;line-height:1;cursor:pointer;border-radius:3px;vertical-align:baseline;min-width:11px;display:inline-block;touch-action:manipulation}
.wall-letter:hover:not(:disabled),.wall-letter:focus-visible{background:#d4af67;color:#221f25;outline:2px solid #fce5ac;outline-offset:1px}
.wall-letter.collected{background:#557867;color:#fff8d9;text-decoration:underline;text-decoration-color:#f6d180;text-underline-offset:6px;cursor:default}
.wall-letter.wrong{animation:letterWrong .4s ease-in-out}
@keyframes letterWrong{0%,100%{background:transparent}40%{background:#b8584f}}
.wall-punctuation,.wall-space{white-space:pre-wrap}
.wall-break{display:block;height:0}
.crossing{position:relative;height:295px;overflow:hidden;border:2px solid #64665b;border-top:0;border-radius:0 0 15px 15px;background:linear-gradient(180deg,#252e35 0%,#203d48 32%,#205064 65%,#102e45 100%);isolation:isolate}
.crossing:before{content:'';position:absolute;inset:28% 0 0;opacity:.33;background:repeating-radial-gradient(ellipse at 20% 95%,transparent 0 21px,#86bdad77 22px 25px,transparent 27px 43px);animation:waterWave 13s linear infinite;z-index:-1}
@keyframes waterWave{to{background-position:160px 25px}}
.water-shimmer{position:absolute;inset:0;background:repeating-linear-gradient(172deg,transparent 0 31px,#94c3c31b 33px 36px,transparent 38px 60px);pointer-events:none}
.crossing-ledge{position:absolute;z-index:4;bottom:40px;height:85px;width:8%;background:repeating-linear-gradient(10deg,#63574d,#50493f 17px,#867061 18px,#65574f 29px);border-top:12px solid #a69178;box-shadow:0 4px 8px #05152699}
.left-ledge{left:0;border-radius:0 10px 0 0}.right-ledge{right:0;border-radius:10px 0 0 0}
.crocodile{position:absolute;width:clamp(185px,32%,290px);height:auto;z-index:1;filter:drop-shadow(0 9px 6px #0c1a2488);opacity:.96}
.croc-one{left:13%;bottom:5px;animation:crocFloat 3.1s ease-in-out infinite alternate}
.croc-two{right:10%;bottom:8px;transform:scaleX(-1);animation:crocFloatFlip 2.6s ease-in-out infinite alternate}
@keyframes crocFloat{to{translate:9px -8px}}@keyframes crocFloatFlip{to{translate:-9px -7px}}
.bridge-slots{position:absolute;z-index:3;top:110px;left:9%;right:9%;height:77px;display:flex;align-items:center;justify-content:space-between;gap:3px}
.bridge-slot{flex:1;min-width:0;max-width:72px;height:53px;position:relative;display:grid;place-items:center}
.stone-face{display:block;width:94%;height:36px;opacity:.18;border:2px dashed #c3dfd8;border-radius:50% 46% 46% 42%;background:transparent;transform:rotate(-8deg)}
.bridge-slot.solid .stone-face{opacity:1;border:2px solid #b5a99d;background:linear-gradient(158deg,#bebca7,#818c83 51%,#596b65 85%);box-shadow:0 7px 0 #3b544f,0 9px 6px #0717248a;animation:stonePop .22s ease-out}
.bridge-slot.gap .stone-face{opacity:1;border:3px dashed #ffb18c;background:#202e3daa;box-shadow:0 0 0 5px #ec816c26;animation:gapSink .45s ease}
@keyframes stonePop{from{transform:translateY(-22px) scale(.5)}to{transform:translateY(0) rotate(-8deg) scale(1)}}
@keyframes gapSink{0%{transform:scale(1.3);background:#a47c6b}100%{transform:scale(.9);background:#202e3daa}}
.crossing-avatar{position:absolute;z-index:5;bottom:123px;left:6%;width:68px;height:128px;transform:translateX(-50%);transition:left .35s cubic-bezier(.24,.7,.22,1);pointer-events:none}
.crossing-avatar .side-adventurer{left:50%;bottom:0;transform:translateX(-50%) scale(.72);transform-origin:bottom center}
.crossing-avatar.celebrating .side-adventurer{animation:heroCelebrate .6s ease-in-out 2}
@keyframes heroCelebrate{50%{translate:0 -15px}}
.croc-feedback{min-height:58px;padding:15px 4px;color:#c7e8d9;font-size:.92rem}
.croc-feedback.warning{color:#ffbe9c}
.croc-actions{display:flex;justify-content:flex-end}
@media(max-width:620px){.letter-wall{padding:11px 13px 15px}.wall-passage{font-size:1.03rem;line-height:1.95}.wall-letter{min-width:10px}.crossing{height:265px}.bridge-slots{top:103px;left:9%;right:9%;gap:1px}.bridge-slot{height:45px}.stone-face{height:25px}.crossing-avatar{bottom:107px}.crocodile{width:43%}}
@media(prefers-reduced-motion:reduce){.crossing-avatar{transition:none}}


/* Bridge puzzle: uppercase letters and lowercase-starting words, simultaneously. */
.bridge-puzzles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px;margin:16px 0 10px}
.bridge-puzzle{min-height:288px;padding:18px 20px 15px;display:flex;flex-direction:column;gap:14px}
.bridge-puzzle h2{font-family:system-ui,sans-serif;font-size:clamp(.96rem,1.7vw,1.16rem);font-weight:600;line-height:1.45;color:#f9e7c8;margin:0}
.bridge-puzzle h2 strong{color:#ffdc91}
.bridge-puzzle .wall-passage{font-size:clamp(1.04rem,1.8vw,1.25rem);line-height:1.8;flex:1}
.wall-word{color:#fff2db;background:transparent;font:inherit;display:inline;padding:1px 2px;border:0;border-radius:4px;cursor:pointer;overflow-wrap:normal;white-space:nowrap;touch-action:manipulation}
.wall-word:hover:not(:disabled),.wall-word:focus-visible{background:#d4af67;color:#221f25;outline:2px solid #fce5ac;outline-offset:1px}
.wall-word.collected{background:#557867;color:#fff8d9;text-decoration:underline;text-decoration-color:#f6d180;text-underline-offset:6px;cursor:default}
.wall-word.wrong{animation:letterWrong .4s ease-in-out}
.column-progress{margin:auto 0 0;text-align:right;color:#d5dbd0;font-weight:650;font-size:.87rem}
.croc-room .croc-instruction{margin:13px 2px 8px}
.croc-room .crossing-avatar{left:6%;bottom:123px}
.croc-room .crossing-avatar.crossing-now{left:94%;transition:left 3.1s linear}
.croc-room .crossing-avatar.crossing-now .adventurer{animation:walkBounce .23s ease-in-out infinite alternate}
.croc-room .bridge-slots{top:100px;left:8%;right:8%;gap:1px}
.croc-room .bridge-slot{max-width:none}
.croc-room .bridge-slot .stone-face{width:100%;max-width:49px;height:34px}
.croc-room .crossing.croc-free{background:linear-gradient(#314552,#275a6c 58%,#173d50)}
.battle-instructions{display:flex;gap:6px;flex-direction:column;margin:14px 0 20px;color:#f7e2b4}
.battle-instructions strong{font-size:clamp(1.1rem,2.5vw,1.43rem)}
.battle-instructions span{font-size:.98rem;color:#d7ddd8}
.battle-arena{position:relative;isolation:isolate;height:365px;border:3px solid #655e51;border-radius:15px;overflow:hidden;background:linear-gradient(#2b2d37 0 33%,#33464b 34% 52%,#234c5b 53%,#133749 100%)}
.battle-bank{position:absolute;left:0;top:0;bottom:0;width:13%;background:repeating-linear-gradient(12deg,#564a43,#554b43 19px,#776656 20px,#5a5049 36px);border-right:8px solid #99816a;z-index:3}
.battle-water{position:absolute;inset:42% 0 0;background:repeating-linear-gradient(165deg,transparent 0 37px,#a7cfcb21 39px 45px,transparent 47px 72px);pointer-events:none}
.parent-croc{position:absolute;z-index:2;width:26%;height:130px;transition:left .48s ease,bottom .48s ease,opacity .8s ease;pointer-events:none}
.parent-croc .crocodile{position:relative;left:0;bottom:0;width:100%;max-width:none;height:130px;animation:none}
.baby-croc{position:absolute;z-index:5;width:94px;height:58px;transform:translateX(-50%);filter:drop-shadow(0 4px 3px #071d20a9);pointer-events:none}
.baby-croc svg{width:100%;height:100%;overflow:visible}
.battle-hero{position:absolute;left:6.5%;bottom:55px;z-index:7;width:76px;height:138px;pointer-events:none}
.battle-hero .side-adventurer{left:50%;bottom:0;transform:translateX(-50%) scale(.9)}
#battle-flash{position:absolute;left:13%;top:46%;z-index:6;width:24%;height:7px;transform:rotate(-1deg);transform-origin:left;background:transparent;pointer-events:none}
#battle-flash.firing{animation:boltFlash .24s ease-out both}
@keyframes boltFlash{0%{background:#ffe9a0;box-shadow:0 0 16px #edb457;width:30%}100%{background:transparent;box-shadow:none;width:0}}
.battle-bar{display:flex;gap:16px;align-items:center;justify-content:flex-start;padding:17px 5px}
.battle-bar #battle-message{font-size:.95rem;color:#f3dca8;flex:1}
.shoot-shortcut{font-size:.75em;opacity:.8}
@media(max-width:720px){.bridge-puzzles{grid-template-columns:1fr}.bridge-puzzle{min-height:0}.bridge-puzzle .wall-passage{font-size:1.12rem}.battle-arena{height:305px}.baby-croc{width:73px}.battle-bar{align-items:flex-start;flex-direction:column}.battle-hero{left:5%;bottom:38px}.croc-room .bridge-slot .stone-face{height:24px}}
@media(prefers-reduced-motion:reduce){.croc-room .crossing-avatar.crossing-now{transition:left 0s}}

/* Keep each word intact, but leave every individual uppercase candidate clickable. */
.bridge-puzzle .wall-token{display:inline-block;white-space:nowrap}
.bridge-puzzle .wall-letter{min-width:0;padding:0;letter-spacing:normal}

/* Explicit Done controls: no counts reveal how many answers are left. */
.bridge-done{align-self:flex-end;margin-top:auto;min-width:116px;font-weight:750;background:#372f2a;border-color:#c6a773;color:#ffe5af}
.bridge-done:not(:disabled):hover{background:#66503a}
.bridge-puzzle.submitted{border-color:#587d69}
.bridge-puzzle.submitted .bridge-done{background:#344f41;color:#d3f0d8;border-color:#58846d;opacity:1}
.bridge-puzzle.submitted .wall-letter,.bridge-puzzle.submitted .wall-word{cursor:default}
.croc-room .crossing-avatar.crossing-now{left:var(--crossing-target,94%);transition:left 3.1s linear}
.croc-room .crossing-avatar.crossing-retreat{left:6%;transition:left .75s ease-out}
@media(prefers-reduced-motion:reduce){.croc-room .crossing-avatar.crossing-now,.croc-room .crossing-avatar.crossing-retreat{transition:none}}
/* Do not show how many stones are still needed before the student submits. */
.croc-room .bridge-slot:not(.solid):not(.gap) .stone-face{opacity:0;border-color:transparent}