*{box-sizing:border-box}body{margin:0;font-family:Courier New,monospace;background-color:#a7c7e7;color:#2e4a5c;padding:20px;height:100vh;background-image:radial-gradient(circle at 25% 25%,#C5D9E8 2px,transparent 2px),radial-gradient(circle at 75% 75%,#C5D9E8 1px,transparent 1px);background-size:4px 4px}main{display:flex;flex-direction:column;align-items:center;background-color:#c5d9e8;border:8px solid #6F9FBF;border-radius:12px;padding:20px;max-width:600px;margin:0 auto;box-shadow:inset -2px -2px #2e4a5c,inset 2px 2px #a7c7e7,4px 4px #2e4a5c;position:relative}main:before{content:"GAME PLAY";position:absolute;top:-6px;left:20px;background-color:#6f9fbf;color:#a7c7e7;padding:2px 8px;font-size:.7rem;font-weight:700;border-radius:4px}header{text-align:center;margin-bottom:15px}header>h1{font-size:1.1rem;font-weight:700;color:#2e4a5c;margin:0 0 8px;text-transform:uppercase;letter-spacing:1px;text-shadow:1px 1px 0px #6F9FBF}header>p{font-weight:700;font-size:.785rem;max-width:350px;color:#2e4a5c;margin:0;line-height:1.3}section.game-status{display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center;color:#2e4a5c;width:100%;max-width:350px;min-height:60px;border:2px solid #2E4A5C;background-color:#a7c7e7;margin-block:20px;position:relative}section.game-status:before{content:"";position:absolute;inset:2px;border:1px solid #6F9FBF;pointer-events:none}section.game-status.won{background-color:#c5d9e8;animation:baby-blue-blink .5s ease-in-out 3}section.game-status.lost{background-color:#3d6f8f;color:#f5f5f5}section.game-status.farewell{background-color:#a7c7e7;border-style:dashed}@keyframes baby-blue-blink{0%,to{opacity:1}50%{opacity:.3}}section.game-status>p{margin:5px}section.game-status>p.farewell-message{font-style:italic;font-weight:600}section.game-status>h2{font-size:1.25rem;margin:5px}.bridge-container{position:relative;width:450px;height:200px;margin:15px auto;background:linear-gradient(to bottom,#c5d9e8,#a7c7e7,#6f9fbf);border:3px solid #2E4A5C;overflow:hidden;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.bridge-deck{position:absolute;top:60px;left:0;width:100%;height:8px;background:#2e4a5c;box-shadow:0 1px #6f9fbf;z-index:10}.bridge-abutment{position:absolute;top:50px;width:35px;height:150px;background:#6f9fbf;border:1px solid #2E4A5C}.left-abutment{left:0;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}.right-abutment{right:0;clip-path:polygon(15% 0,100% 0,100% 100%,0 100%)}.bridge-pillars{position:absolute;top:68px;left:45px;right:45px;display:flex;justify-content:space-between;align-items:flex-start;height:120px;z-index:5}span.chip{width:20px;height:100px;background:#6f9fbf;border:1px solid #2E4A5C;position:relative;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#a7c7e7;text-align:center;line-height:1;transition:all .3s ease;writing-mode:vertical-rl;text-orientation:mixed;padding:2px 1px;image-rendering:pixelated}.water-surface{position:absolute;bottom:0;left:0;right:0;height:40px;background:repeating-linear-gradient(90deg,#a7c7e7 0px 4px,#c5d9e8 4px 8px);animation:baby-blue-water 2s linear infinite}@keyframes baby-blue-water{0%{background-position:0px 0px}to{background-position:8px 0px}}span.chip.destroyed{background:#2e4a5c;color:#6f9fbf;animation:baby-blue-shake .2s ease-in-out 3}span.chip.destroyed:before{content:"X";position:absolute;display:flex;align-items:center;justify-content:center;height:100%;width:100%;font-size:1.2rem;font-weight:700;top:0;left:0;background:#2e4a5c;color:#a7c7e7;z-index:15;animation:baby-blue-blink .3s ease-out}@keyframes baby-blue-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}@keyframes baby-blue-blink{0%,to{opacity:1}50%{opacity:0}}.bridge-container:has(.chip.destroyed:nth-child(7)) .bridge-deck{background:#6f9fbf}.bridge-container:has(.chip.destroyed:nth-child(8)) .bridge-deck{background:#2e4a5c;animation:baby-blue-stress .5s ease-in-out infinite}.bridge-container:has(.chip.destroyed:nth-child(9)) .bridge-deck{background:#2e4a5c;transform:rotate(-8deg) translateY(15px);animation:baby-blue-collapse 1s ease-in}@keyframes baby-blue-stress{0%,to{transform:translateY(0)}50%{transform:translateY(2px)}}@keyframes baby-blue-collapse{0%{transform:rotate(0) translateY(0)}to{transform:rotate(-8deg) translateY(15px)}}section.word{display:flex;justify-content:center;gap:3px;margin-bottom:20px}section.word>span{height:35px;width:35px;background-color:#a7c7e7;border:2px solid #2E4A5C;display:flex;justify-content:center;align-items:center;font-size:1rem;font-weight:700;font-family:Courier New,monospace;color:#2e4a5c}section.word>span.missed-letter{color:#6f9fbf;background-color:#c5d9e8}section.word>span.loading-letter{color:#6f9fbf;background-color:#c5d9e8;animation:pulse 1.5s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.5}to{opacity:1}}section.keyboard{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:400px;margin-bottom:20px}section.keyboard>button{height:40px;width:40px;background-color:#c5d9e8;border:2px solid #2E4A5C;cursor:pointer;font-family:Courier New,monospace;font-weight:700;color:#2e4a5c;font-size:1.2rem}section.keyboard>button:hover{background-color:#a7c7e7}section.keyboard>button.correct{background-color:#6f9fbf;color:#c5d9e8}section.keyboard>button.wrong{background-color:#2e4a5c;color:#a7c7e7}section.keyboard>button:disabled{cursor:not-allowed;opacity:.5}button.new-game{background-color:#6f9fbf;border:2px solid #2E4A5C;color:#c5d9e8;width:200px;height:35px;font-family:Courier New,monospace;font-weight:700;font-size:1rem;text-transform:uppercase;cursor:pointer;margin-top:10px}button.new-game:hover{background-color:#a7c7e7;color:#2e4a5c}@media(max-width:480px){.bridge-container{width:380px;height:220px}.bridge-pillars{left:40px;right:40px}.left-abutment,.right-abutment{width:35px}span.chip{width:20px;height:120px;font-size:.55rem}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}