:root{--color-bg:#f5f0e8;--color-grid-border:#1a1a1a;--color-cell-bg:#fff;--color-black-cell:#1a1a1a;--color-key-accent:#b8860b;--color-key-flash:gold;--color-key-focus:#fff8e6;--color-cell-focus:#f0f4ff;--color-correct:#1a6b1a;--color-number:#888;--color-text:#1a1a1a;--color-text-muted:#555;--color-clue-hover:#0000000a;--color-clue-active-bg:#fdf6e3;--color-clue-active-text:#1a1a1a;--color-banner-bg:#fdf9f3;--font-grid:"Courier New", Courier, monospace;--font-display:Georgia, "Times New Roman", serif;--cell-size:clamp(32px, 7vw, 46px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-display);-webkit-font-smoothing:antialiased}.app{flex-direction:column;align-items:center;gap:1.5rem;min-height:100vh;padding:1.5rem 1rem 3rem;display:flex}.app-header{text-align:center}.app-title{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text);font-size:clamp(1rem,3.5vw,1.35rem);font-weight:700}.app-subtitle{font-family:var(--font-display);color:var(--color-text-muted);margin-top:.2rem;font-size:1rem;font-style:italic}.puzzle-area{justify-content:center;align-items:flex-start;gap:2.5rem;width:100%;max-width:900px;display:flex}.banner-wrapper{justify-content:center;width:100%;max-width:900px;display:flex}.key-hint{color:var(--color-text-muted);text-align:center;max-width:400px;font-size:1rem;font-style:italic}.key-hint strong{color:var(--color-key-accent);font-style:normal}@media (width<=600px){.puzzle-area{flex-direction:column;align-items:center;gap:1.5rem}}.grid{border:2px solid var(--color-grid-border);background:var(--color-grid-border);flex-direction:column;gap:2px;width:fit-content;padding:2px;display:flex}.grid-row{gap:2px;display:flex}.cell{width:var(--cell-size);height:var(--cell-size);font-family:var(--font-grid);font-size:calc(var(--cell-size) * .5);text-transform:uppercase;box-sizing:border-box;background:var(--color-cell-bg);border:1px solid var(--color-grid-border);justify-content:center;align-items:center;font-weight:700;display:flex;position:relative}.cell--black{background:var(--color-black-cell);border-color:var(--color-black-cell);cursor:default}.cell--key{border:2.5px solid var(--color-key-accent)}.cell--correct{color:var(--color-correct)}.cell--active-key{animation:.5s ease-in-out keyFlash}.cell--animated{color:var(--color-key-accent);font-weight:900}.cell input{text-align:center;width:100%;height:100%;font-family:var(--font-grid);font-size:calc(var(--cell-size) * .5);text-transform:uppercase;color:inherit;cursor:pointer;caret-color:#0000;background:0 0;border:none;outline:none;padding:0;font-weight:700}.cell input:focus{background:var(--color-cell-focus)}.cell--key input:focus{background:var(--color-key-focus)}.cell--numbered:before{content:attr(data-number);color:var(--color-number);font-size:8px;font-weight:400;font-family:var(--font-grid);z-index:2;pointer-events:none;line-height:1;position:absolute;top:1px;left:2px}.cell input:focus,.cell input:focus-visible{outline:none}@keyframes keyFlash{0%{background:var(--color-cell-bg);transform:scale(1)}30%{background:var(--color-key-flash);transform:scale(1.18)}60%{background:var(--color-key-flash);transform:scale(1.12)}to{background:var(--color-cell-bg);transform:scale(1)}}.clue-list{min-width:200px;max-width:320px}.clue-list h2{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text);border-bottom:1px solid var(--color-grid-border);margin:0 0 .75rem;padding-bottom:.4rem;font-size:1rem;font-weight:700}.clue-list ol{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.clue-item{cursor:pointer;border-radius:2px;align-items:baseline;gap:.5rem;padding:4px 6px;transition:background .15s;display:flex}.clue-item:hover{background:var(--color-clue-hover)}.clue-item--active{background:var(--color-clue-active-bg);color:var(--color-clue-active-text)}.clue-number{font-family:var(--font-grid);color:var(--color-number);text-align:right;flex-shrink:0;min-width:1.4em;font-size:1rem;font-weight:700}.clue-item--active .clue-number{color:var(--color-key-accent)}.clue-text{font-family:var(--font-display);color:var(--color-text-muted);font-size:1rem;line-height:1.35}.clue-item--active .clue-text{color:var(--color-text);font-weight:600}.banner{background:var(--color-banner-bg);border:1px solid var(--color-grid-border);border-radius:2px;flex-direction:column;align-items:center;gap:.5rem;width:fit-content;margin:0 auto;padding:.75rem 1rem;display:flex}.banner-label{font-family:var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);font-size:1rem}.banner-names{align-items:center;gap:1.5rem;display:flex}.banner-name{align-items:center;gap:3px;display:flex}.banner-letter{width:calc(var(--cell-size) * .9);height:calc(var(--cell-size) * .9);font-family:var(--font-grid);font-size:calc(var(--cell-size) * .45);border:1.5px solid var(--color-grid-border);background:var(--color-cell-bg);color:var(--color-text);opacity:0;justify-content:center;align-items:center;font-weight:700;display:flex}.banner-letter--revealed{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards letterAppear}.banner-separator{font-family:var(--font-display);color:var(--color-text-muted);font-size:1.2rem;line-height:1}@keyframes letterAppear{0%{opacity:0;background:var(--color-key-flash);transform:translateY(-6px)scale(.5)}to{opacity:1;background:var(--color-cell-bg);transform:translateY(0)scale(1)}}.reveal-screen{background:var(--color-bg);z-index:200;flex-direction:column;justify-content:center;align-items:center;animation:.8s ease-out forwards fadeIn;display:flex;position:fixed;inset:0;overflow:hidden}.reveal-content{z-index:1;flex-direction:column;align-items:center;gap:1.5rem;animation:.9s cubic-bezier(.34,1.56,.64,1) .3s both scaleIn;display:flex;position:relative}.reveal-divider{background:var(--color-key-accent);opacity:.6;width:60px;height:1px}.reveal-names{font-family:var(--font-display);color:var(--color-text);letter-spacing:.02em;text-align:center;font-size:clamp(2.5rem,10vw,5rem);font-weight:700;line-height:1.1}.reveal-names span{color:var(--color-key-accent)}.reveal-subtitle{font-family:var(--font-display);color:var(--color-text-muted);text-align:center;font-size:clamp(1rem,3vw,1.4rem);font-style:italic}.reveal-tagline{font-family:var(--font-grid);letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted);opacity:.6;font-size:1rem}.confetti-piece{width:8px;height:8px;animation:confettiFall var(--fall-duration,3s) ease-in var(--fall-delay,0s) both;pointer-events:none;border-radius:1px;position:fixed;top:-10px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes confettiFall{0%{opacity:1;transform:translateY(-10px)rotate(0)}80%{opacity:1}to{transform:translateY(110vh) rotate(var(--fall-rotate,720deg));opacity:0}}