:root{--bodyInactive: #6e6e6e;--body: #1976d2;--text: white;--headerHeight: 100px;--gapX: 10px;--gapY: 10px;--gapDoubleX: calc(2 * var(--gapX));--gapDoubleY: calc(2 * var(--gapY));--fontFamily: "Quicksand", quicksand-fallback, serif}@font-face{font-family:quicksand-fallback;src:local("Arial");size-adjust:104%;ascent-override:98%}.content{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html,body{height:100%}*{box-sizing:border-box}body{font-family:var(--fontFamily);margin:0;padding:0;display:flex;flex-direction:column;background-color:var(--bodyInactive);transition:background-color .5}body.state-started{background-color:var(--body)}img{width:100%;height:100%;object-fit:cover;backface-visibility:hidden}header{height:var(--headerHeight);width:100%;display:flex;align-items:center;justify-content:space-between}main{flex:1;flex-basis:100%;display:grid;overflow-x:auto;grid-template-rows:100%;grid-auto-columns:100%;grid-auto-flow:column;scroll-snap-type:x mandatory;width:100%}.header-item{flex:1}.wrapper{padding:var(--gapY) var(--gapX);max-width:1440px;margin:0 auto}main>.wrapper{scroll-snap-align:center;width:100%}h1{color:var(--text);font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:2px;margin:16px 0 0;line-height:1.2}.logo{width:30%}#characterSelected{margin-top:16px;border-color:#ffeb3b;cursor:default;height:76px;width:76px;overflow:visible}#characterSelected:not(.state-filled):after{content:"?";font-size:48px;color:var(--text);backface-visibility:unset;transform:none;background-color:transparent;font-weight:400}#characterSelected.state-filled:before{content:"✕";position:absolute;top:-8px;right:-8px;background-color:#d32f2f;color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid white;z-index:10;box-shadow:0 2px 4px #0000004d;opacity:1;transition:opacity .3s;line-height:12px}body.state-started #characterSelected.state-filled:before{opacity:0;pointer-events:none}#characterSelected.state-filled{cursor:pointer}body.state-started #characterSelected.state-filled{cursor:default}#characterSelected.card>p{padding:1px 0;font-size:12px}#controls{margin:20px 0;width:30%;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:10px}#btnAction{font-size:16px;background-color:var(--text);font-family:var(--fontFamily);font-weight:500;color:#333;border:2px solid #333;border-radius:8px;cursor:pointer;transition:all .5s;max-width:100%;min-width:80px;height:38px;padding:0;display:none;align-items:center;justify-content:center}.state-started #btnAction:focus:hover{background-color:var(--text);color:#333}.state-started #btnAction:not(:focus):hover{background-color:#d32f2f;color:var(--text)}.character-grid .card:active,#btnAction:active{position:relative;top:1px}#btnAction:hover{background-color:#ffeb3b}#instructions{font-size:17px;line-height:1.1;color:var(--text);padding:0 6px;height:38px;display:flex;align-items:center;text-align:right}.character-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;justify-content:center;height:calc(100dvh - var(--headerHeight) - var(--gapDoubleY));max-height:100%;perspective:1000px}.character-grid .card{filter:grayscale(.5);box-shadow:0 4px 8px #0000001a}.state-started .character-grid .card,.character-grid .card:not(.down):focus,.character-grid .card:not(.down):hover{border-color:#333;filter:grayscale(0);box-shadow:0 4px 8px #0003}.character-grid .card:not(.down):hover{transform:translateY(-5px);box-shadow:0 10px 8px #00000040}.card{border:2px solid #555;background-color:#555;border-radius:8px;box-shadow:0 4px 8px #0003;cursor:pointer;position:relative;overflow:hidden;transition:all .8s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d;text-align:center}.card p{margin:0;padding:2px 0;font-size:clamp(12px,1.6vw,14px);font-weight:600;color:#333;background-color:#ffeb3b;position:absolute;bottom:0;width:100%;backface-visibility:hidden}.card .front{backface-visibility:hidden;display:flex;flex-direction:column;height:100%;width:100%;align-items:center;justify-content:center;position:relative;overflow:hidden}.card .front:before{content:"";position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.3) 25%,rgba(200,230,255,.6) 45%,rgba(255,255,255,.8) 50%,rgba(255,200,230,.6) 55%,rgba(255,255,255,.3) 75%,transparent 80%);transform:skew(-20deg);transition:all .6s ease-out;pointer-events:none;z-index:2;mix-blend-mode:color-dodge;opacity:0}.character-grid .card:not(.down):hover .front:before{left:150%;opacity:.8;transition:left .7s ease-in-out,opacity .3s}.card:after{content:"FACE THE GUESS";position:absolute;inset:0;color:var(--text);background-color:#c62828;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0px,rgba(0,0,0,.05) 2px,transparent 2px,transparent 8px);font-size:clamp(18px,2.5vw,48px);padding:0 16px;color:#6400004d;text-align:left;font-weight:600;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transform:rotateX(180deg);box-shadow:inset 0 0 20px #0000001a}.card.down{transform:rotateX(180deg)}.card.down:after{backface-visibility:visible}@media(min-height:720px)and (min-width:953px){:root{--gapX: 20px;--gapY: 20px}.character-grid{gap:15px}#btnAction,.character-grid .card{border-width:3px}.character-grid .card p{padding:5px 0}}@media(min-aspect-ratio:2.1)or ((min-aspect-ratio:1.15)and (max-height:720px)){body{flex-direction:row}header{width:var(--headerHeight);height:100%;flex-direction:column;align-items:flex-start}h1,#controls{margin:0}.wrapper{max-width:100%}.character-grid{flex:1;width:100%;max-width:100%;justify-content:center;height:calc(100vh - var(--gapDoubleY))}#characterSelected{margin-top:0}.logo,#controls{height:30%;width:100%}#controls{justify-content:flex-end;align-items:flex-end}#btnInstructions{order:2}#instructions{width:100%;padding:6px;font-size:13px;text-align:left}}@media(min-aspect-ratio:.75){.character-grid{grid-template-columns:repeat(6,1fr)}}@media(min-aspect-ratio:2.1){.character-grid{grid-template-columns:repeat(8,1fr)}}@media(min-aspect-ratio:3.33){.character-grid{grid-template-columns:repeat(12,1fr)}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:1;transition:opacity .3s ease}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal-content{background-color:#fff;padding:30px;border-radius:12px;max-width:500px;width:90%;position:relative;box-shadow:0 10px 25px #00000080;transform:scale(1);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.modal-content h2{margin-top:0;color:#333}.modal-content p,.modal-content ol{color:#555;line-height:1.6}.modal-content ol{padding-left:20px}.modal-overlay.hidden .modal-content{transform:scale(.8)}.modal-close{position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;color:#aaa;background:none;border:none;cursor:pointer;padding:0;line-height:1}.modal-close:hover{color:#333}#btnInstructions{font-size:12px;background-color:transparent;font-family:var(--fontFamily);font-weight:500;color:#ffeb3b;border:none;border-radius:8px;cursor:pointer;padding:2px 6px;margin-right:0;transition:all .3s}#btnInstructions:hover{background-color:#fff3}.btn-primary{font-size:16px;background-color:#c62828;color:#fff;border:2px solid #333;border-radius:8px;padding:10px 24px;cursor:pointer;font-weight:500;font-family:var(--fontFamily);margin-top:20px;transition:all .3s}.btn-primary:hover{scale:1.05;translate:0 -4px;box-shadow:0 2px 5px #0003}.winner-card{text-align:center}.winner-card-container{display:flex;justify-content:center;align-items:center;margin:20px auto;width:150px;height:150px;border-radius:8px;overflow:hidden;box-shadow:0 4px 10px #0003;background-color:#ffeb3b;position:relative;flex-direction:column}.winner-card-container img{width:100%;height:100%;object-fit:cover}.winner-card-container p{position:absolute;bottom:0;width:100%;text-align:center;background-color:#ffeb3b;margin:0;padding:4px 0;font-weight:700;font-size:14px}