@import "https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@600;700;800&family=Teko:wght@600;700&display=swap";
:root{--jp-red:#d12b2b;--jp-gold:#f1c232;--jp-black:#1a1a1a;--jp-green:#4caf50;--jp-cream:#fffef5;--row-gray:#f5f3eb;--cell-border:#e0d9c8;--correct-bg:#d4edda;--incorrect-bg:#f8d7da}*{box-sizing:border-box}html,body{background:linear-gradient(180deg,var(--jp-cream)0%,#fff8e8 100%);color:var(--jp-black);background-attachment:fixed;min-height:100vh;margin:0;font-family:Nunito,system-ui,-apple-system,sans-serif}body:before{content:"";pointer-events:none;z-index:-1;background-image:radial-gradient(circle at 20% 30%,#f1c2320d 0%,#0000 50%),radial-gradient(circle at 80% 70%,#d12b2b08 0%,#0000 50%);position:fixed;inset:0}.container{max-width:720px;margin:0 auto;padding:20px 16px 40px}.container.hasBlurbOverlay{padding-bottom:120px}.title{text-align:center;text-transform:uppercase;color:var(--jp-red);background:linear-gradient(180deg,#f44 0%,var(--jp-red)40%,#a01f1f 100%);-webkit-text-fill-color:transparent;letter-spacing:.12em;filter:drop-shadow(2px 2px 0 var(--jp-gold))drop-shadow(3px 3px 0 var(--jp-black));-webkit-background-clip:text;background-clip:text;margin:0 0 20px;font-family:Teko,sans-serif;font-size:52px;font-weight:700;position:relative}.emblemWrapper{justify-content:center;margin-bottom:20px;display:flex}.emblemOuter{background:linear-gradient(145deg,#f7d04a 0%,var(--jp-gold)50%,#d9a820 100%);border-radius:50%;justify-content:center;align-items:center;width:280px;height:280px;display:flex;position:relative;overflow:visible;box-shadow:0 6px #c49a1f,0 8px 20px #00000026}.emblemInner{background:linear-gradient(145deg,#e83535 0%,var(--jp-red)50%,#b82424 100%);border:6px solid var(--jp-black);border-radius:50%;justify-content:center;align-items:center;width:256px;height:256px;display:flex;position:relative;overflow:visible;box-shadow:inset 0 4px 12px #0003}.svgWrap{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;inset:0;overflow:visible}.svgWrap svg{transform:translate(-50%,-50%)scale(var(--zoom,1));transform-origin:50%;filter:brightness(0);pointer-events:none;width:127%;max-width:none;height:auto;display:block;position:absolute;top:50%;left:50%}.zoomSliderWrap{pointer-events:auto;width:60%;position:absolute;left:50%;transform:translate(-50%)}.zoomSliderWrap.belowOuter{bottom:-18px}.zoomSlider{appearance:none;background:0 0;width:100%;height:28px}.zoomSlider:focus{outline:none}.zoomSlider::-webkit-slider-runnable-track{background:var(--jp-cream);border:2px solid var(--jp-black);border-radius:999px;height:8px}.zoomSlider::-webkit-slider-thumb{appearance:none;background:linear-gradient(145deg,#f7d04a 0%,var(--jp-gold)100%);border:2px solid var(--jp-black);cursor:grab;border-radius:50%;width:20px;height:20px;margin-top:-8px;box-shadow:0 2px #0003}.zoomSlider::-moz-range-track{background:var(--jp-cream);border:2px solid var(--jp-black);border-radius:999px;height:8px}.zoomSlider::-moz-range-thumb{background:linear-gradient(145deg,#f7d04a 0%,var(--jp-gold)100%);border:2px solid var(--jp-black);cursor:grab;border-radius:50%;width:20px;height:20px}.correctWord{text-align:center;margin:12px 0 16px}.correctWord .answer{background:linear-gradient(145deg,#2a2a2a 0%,var(--jp-black)100%);color:var(--jp-gold);border:3px solid var(--jp-gold);letter-spacing:.04em;border-radius:14px;padding:12px 20px;font-family:Lilita One,cursive;font-size:22px;display:inline-block;box-shadow:0 4px #8a7019,0 6px 16px #0003}.guessGrid{border:3px solid var(--jp-black);background:#fff;border-radius:16px;max-width:600px;margin:0 auto 20px;overflow:hidden;box-shadow:0 4px #00000026,0 8px 24px #00000014}.gridHeader{background:linear-gradient(180deg,var(--jp-gold)0%,#e8b82a 100%);border-bottom:3px solid var(--jp-black);grid-template-columns:repeat(5,1fr);display:grid}.gridHeaderCell{border-right:2px solid #00000026;justify-content:center;align-items:center;padding:12px 4px;display:flex}.gridHeaderCell:last-child{border-right:none}.categoryIcon{width:28px;height:28px;color:var(--jp-black);filter:drop-shadow(1px 1px #ffffff4d)}.gridRow{border-bottom:2px solid var(--cell-border);grid-template-columns:repeat(5,1fr);display:grid}.gridRow:last-child{border-bottom:none}.gridRow.empty .gridCell{background:var(--row-gray)}.gridCell{border-right:1px solid var(--cell-border);justify-content:center;align-items:center;min-height:58px;padding:8px 4px;transition:background .2s;display:flex;position:relative;overflow:hidden}.gridCell:last-child{border-right:none}.gridCell.blank{background:var(--row-gray)}.gridCell.correct{background:linear-gradient(145deg,#c8f0d0 0%,var(--correct-bg)100%);color:#1a6b2d}.gridCell.incorrect{background:linear-gradient(145deg,#fce0e3 0%,var(--incorrect-bg)100%);color:#8b2131}@keyframes cellFlip{0%{background:var(--row-gray);transform:rotateX(0)}45%{background:var(--row-gray);transform:rotateX(90deg)}55%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.gridCell.flipping{transform-style:preserve-3d;background:var(--row-gray)!important}.gridCell.flipping:after{content:"";opacity:0;pointer-events:none;position:absolute;inset:0}.gridCell.flipping .cellText{opacity:0;z-index:1;position:relative}.gridCell.flipping.correct{animation:1s ease-in-out forwards cellFlip;animation-delay:var(--flip-delay,0s)}.gridCell.flipping.correct:after{background:linear-gradient(145deg,#c8f0d0 0%,var(--correct-bg)100%);animation:1s ease-in-out forwards colorReveal;animation-delay:var(--flip-delay,0s)}.gridCell.flipping.correct .cellText{animation:1s ease-in-out forwards textRevealCorrect;animation-delay:var(--flip-delay,0s)}.gridCell.flipping.incorrect{animation:1s ease-in-out forwards cellFlip;animation-delay:var(--flip-delay,0s)}.gridCell.flipping.incorrect:after{background:linear-gradient(145deg,#fce0e3 0%,var(--incorrect-bg)100%);animation:1s ease-in-out forwards colorReveal;animation-delay:var(--flip-delay,0s)}.gridCell.flipping.incorrect .cellText{animation:1s ease-in-out forwards textRevealIncorrect;animation-delay:var(--flip-delay,0s)}@keyframes colorReveal{0%,50%{opacity:0}to{opacity:1}}@keyframes textRevealCorrect{0%,75%{opacity:0;color:#1a6b2d}to{opacity:1;color:#1a6b2d}}@keyframes textRevealIncorrect{0%,75%{opacity:0;color:#8b2131}to{opacity:1;color:#8b2131}}.cellText{text-align:center;word-break:break-word;opacity:1;padding:2px;font-size:11px;font-weight:700;line-height:1.25}.nameCell{text-transform:uppercase}.inputSection{max-width:600px;margin:0 auto}.inputGrid{border:3px solid var(--jp-black);background:linear-gradient(180deg,#fff 0%,var(--row-gray)100%);border-radius:16px;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px;padding:14px;display:grid;box-shadow:0 4px #0000001a,inset 0 2px 4px #fffc}.inputGroup{flex-direction:column;align-items:center;gap:8px;display:flex}.inputIcon{justify-content:center;align-items:center;display:flex}.inputIcon .categoryIcon{width:24px;height:24px;color:var(--jp-black)}.combo{flex-direction:column;width:100%;display:flex;position:relative}.combo.isDisabled{opacity:.6}.combo.isLocked .input,.combo.isCorrect .input{background:linear-gradient(145deg,#c8f0d0 0%,var(--correct-bg)100%);border-color:var(--jp-green);color:#1a6b2d}.input{border:2px solid var(--jp-black);appearance:none;background:#fff;border-radius:10px;outline:none;width:100%;height:42px;margin:0;padding:0 10px;font-family:Nunito,system-ui,sans-serif;font-size:12px;font-weight:700;transition:all .15s;box-shadow:0 2px #0000001a}.input:focus{border-color:var(--jp-gold);box-shadow:0 2px #0000001a,0 0 0 3px #f1c2324d}.input:disabled{cursor:not-allowed}.comboMenu{border:2px solid var(--jp-black);z-index:100;background:#fff;border-radius:12px;max-height:200px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:auto;box-shadow:0 8px 24px #00000026}.comboOption{cursor:pointer;padding:10px 12px;font-size:13px;font-weight:600;transition:background .1s}.comboOption:hover{background:var(--row-gray)}.comboOption.highlight{background:#f1c23233}.comboOption.selected{color:var(--jp-red);font-weight:800}.comboOption.empty{cursor:default;color:#888}.selectInput{border:2px solid var(--jp-black);cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 8L2 4h8z'/%3E%3C/svg%3E") right 8px center no-repeat;border-radius:10px;outline:none;width:100%;height:42px;padding:0 24px 0 8px;font-family:Nunito,system-ui,sans-serif;font-size:11px;font-weight:700;transition:all .15s;box-shadow:0 2px #0000001a}.selectInput:focus{border-color:var(--jp-gold);box-shadow:0 2px #0000001a,0 0 0 3px #f1c2324d}.selectInput:disabled{cursor:not-allowed;opacity:.7}.selectInput.isLocked,.selectInput.isCorrect{background-color:var(--correct-bg);border-color:var(--jp-green);color:#1a6b2d}.button{border:3px solid var(--jp-black);background:linear-gradient(180deg,#e83535 0%,var(--jp-red)50%,#b82424 100%);color:#fff;letter-spacing:.06em;cursor:pointer;text-shadow:0 2px #0003;border-radius:14px;width:100%;height:56px;font-family:Lilita One,cursive;font-size:24px;font-weight:400;transition:all .1s;box-shadow:0 4px #8b1f1f,0 6px 12px #00000026}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #8b1f1f,0 10px 20px #0003}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #8b1f1f,0 4px 8px #00000026}.button.share{background:linear-gradient(180deg,#f7d04a 0%,var(--jp-gold)50%,#d9a820 100%);color:var(--jp-black);max-width:600px;text-shadow:none;margin:0 auto;display:block;box-shadow:0 4px #a68518,0 6px 12px #00000026}.button.share:hover:not(:disabled){box-shadow:0 6px #a68518,0 10px 20px #0003}.button.share:active:not(:disabled){box-shadow:0 2px #a68518,0 4px 8px #00000026}.guessButton{margin-top:6px}.result{text-align:center;margin-top:14px;font-size:16px;font-weight:700}.result.victory{letter-spacing:.06em;color:#fff;text-shadow:0 2px 4px #0000004d;background:linear-gradient(135deg,#4caf50 0%,#2e7d32 50%,#1b5e20 100%);border:4px solid #1b5e20;border-radius:16px;margin:20px auto;padding:16px 32px;font-family:Lilita One,cursive;font-size:32px;font-weight:400;animation:.6s ease-out victoryPulse,.5s ease-out victoryBounce;display:inline-block;position:relative;overflow:hidden;box-shadow:0 4px #0d3d12,0 6px 20px #2e7d3266,inset 0 2px #fff3}.result.victory:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;animation:1.5s ease-in-out .5s infinite victoryShine;position:absolute;top:0;left:-100%}@keyframes victoryPulse{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes victoryBounce{0%,to{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}@keyframes victoryShine{0%{left:-100%}50%,to{left:100%}}.result.gameOver{letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 4px #0006;background:linear-gradient(#4a4a4a 0%,#2d2d2d 50%,#1a1a1a 100%);border:4px solid #1a1a1a;border-radius:14px;margin:20px auto;padding:16px 32px;font-family:Teko,sans-serif;font-size:28px;font-weight:700;animation:.5s ease-out gameOverDrop;display:inline-block;position:relative;box-shadow:0 4px #0a0a0a,0 6px 16px #0000004d,inset 0 2px #ffffff1a}@keyframes gameOverDrop{0%{opacity:0;transform:translateY(-30px)scale(1.1)}60%{transform:translateY(4px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.countdownContainer{text-align:center;border:3px solid var(--jp-gold);background:linear-gradient(145deg,#fffef5 0%,#fff8e1 100%);border-radius:20px;max-width:360px;margin:24px auto 8px;padding:20px 24px;box-shadow:0 4px 16px #f1c23240}.countdownLabel{color:#7a6520;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;font-size:13px;font-weight:800}.countdownTimer{justify-content:center;align-items:center;gap:6px;display:flex}.countdownUnit{flex-direction:column;align-items:center;gap:6px;display:flex}.countdownDigits{color:var(--jp-black);background:linear-gradient(180deg,var(--jp-gold)0%,#e8b82a 100%);border:2px solid #c9a227;border-radius:14px;min-width:76px;padding:8px 14px;font-family:Lilita One,cursive;font-size:44px;font-weight:400;box-shadow:0 3px #b8922a,0 6px 12px #0000001a}.countdownUnitLabel{color:#9a8340;letter-spacing:.08em;font-size:11px;font-weight:800}.countdownSeparator{color:#c9a227;padding-bottom:28px;font-family:Lilita One,cursive;font-size:36px;font-weight:400}@media (max-width:480px){.countdownContainer{margin:20px auto 8px;padding:16px}.countdownDigits{border-radius:12px;min-width:54px;padding:8px 10px;font-size:28px}.countdownSeparator{padding-bottom:24px;font-size:24px}.countdownLabel{font-size:11px}.countdownTimer{gap:4px}}.confettiOverlay{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}@keyframes confettiFall{0%{opacity:0;transform:translateY(-120%)translate(0)rotate(0)}to{transform:translateY(150vh)translateX(var(--dx2,0px))rotate(720deg);opacity:.9}}.confettiPiece{width:var(--w,10px);height:var(--h,16px);will-change:transform;top:-10vh;left:var(--x,50%);background:var(--c,#f1c232);animation-name:confettiFall;animation-timing-function:linear;animation-iteration-count:1;animation-duration:var(--d,2.2s);animation-delay:var(--delay,0s);transform:translateY(-120%)rotate(var(--r,0deg));border-radius:3px;position:absolute}@media (max-width:640px){.title{letter-spacing:.08em;font-size:42px}.result.victory{padding:12px 24px;font-size:24px}.result.gameOver{padding:14px 28px;font-size:22px}.emblemOuter{width:220px;height:220px}.emblemInner{border-width:5px;width:200px;height:200px}.inputGrid{grid-template-columns:repeat(5,1fr);gap:6px;padding:10px}.input{border-radius:8px;height:38px;padding:0 6px;font-size:10px}.selectInput{background-position:right 6px center;border-radius:8px;height:38px;padding:0 20px 0 6px;font-size:9px}.categoryIcon{width:24px;height:24px}.inputIcon .categoryIcon{width:20px;height:20px}.gridCell{min-height:50px}.cellText{font-size:9px}.button{border-radius:12px;height:50px;font-size:20px}}@media (max-width:480px){.title{letter-spacing:.06em;font-size:32px}.result.victory{border-radius:12px;padding:10px 20px;font-size:20px}.result.gameOver{border-radius:10px;padding:12px 20px;font-size:18px}.inputGrid{grid-template-columns:repeat(2,1fr);gap:8px}.inputGroup:first-child{grid-column:span 2}.inputGroup:nth-child(2),.inputGroup:nth-child(3),.inputGroup:nth-child(4),.inputGroup:nth-child(5){grid-column:span 1}.input{border-radius:10px;height:42px;font-size:12px}.selectInput{border-radius:10px;height:42px;font-size:11px}.correctWord .answer{padding:10px 16px;font-size:18px}}.blurbOverlay{z-index:100;cursor:pointer;-webkit-user-select:none;user-select:none;background:linear-gradient(#2a2419 0%,#1a1610 100%);border-top-left-radius:24px;border-top-right-radius:24px;transition:height .4s cubic-bezier(.16,1,.3,1);position:fixed;bottom:0;left:0;right:0;overflow:hidden;box-shadow:0 -4px 24px #0006,0 -1px #f1c2324d}.blurbOverlay:active{cursor:grabbing}.blurbHandle{cursor:grab}.blurbOverlay.minimized{height:90px}.blurbOverlay.expanded{height:65vh;max-height:600px}.blurbHandle{justify-content:center;padding:12px 0 8px;display:flex}.blurbHandleBar{background:linear-gradient(90deg,#c9a227 0%,var(--jp-gold)50%,#c9a227 100%);opacity:.8;border-radius:999px;width:48px;height:5px}.blurbHeader{border-bottom:1px solid #f1c23226;flex-direction:column;align-items:center;padding:0 20px 12px;display:flex}.blurbTitle{color:var(--jp-gold);text-transform:uppercase;letter-spacing:.04em;text-shadow:0 2px 4px #0000004d;font-family:Lilita One,cursive;font-size:18px}.blurbHint{color:#f1c23280;letter-spacing:.02em;margin-top:4px;font-size:11px;font-weight:600}.blurbOverlay.minimized .blurbHint:after{content:" ↑"}.blurbOverlay.expanded .blurbHint:after{content:" ↓"}.blurbContent{max-height:calc(65vh - 100px);color:var(--jp-cream);scrollbar-width:thin;scrollbar-color:var(--jp-gold)transparent;padding:16px 24px 40px;font-size:14px;line-height:1.7;overflow-y:auto}.blurbOverlay.minimized .blurbContent{display:none}.blurbContent::-webkit-scrollbar{width:6px}.blurbContent::-webkit-scrollbar-track{background:0 0}.blurbContent::-webkit-scrollbar-thumb{background:#f1c2324d;border-radius:3px}.blurbContent::-webkit-scrollbar-thumb:hover{background:#f1c23280}.blurbContent p{margin:0 0 14px}.blurbContent p:last-child{margin-bottom:0}.blurbContent strong{color:var(--jp-gold);font-weight:700}@keyframes blurbSlideIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.blurbOverlay{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .3s forwards blurbSlideIn}@media (max-width:640px){.blurbOverlay.minimized{height:80px}.blurbOverlay.expanded{height:70vh;max-height:none}.blurbTitle{font-size:16px}.blurbContent{max-height:calc(70vh - 90px);padding:14px 20px 32px;font-size:13px}}@media (max-width:480px){.blurbOverlay.minimized{height:72px}.blurbHeader{padding:0 16px 10px}.blurbTitle{font-size:14px}.blurbHint{font-size:10px}.blurbContent{padding:12px 16px 28px;font-size:12px;line-height:1.6}}
