@font-face{font-family:Swiss911;src:url('/sinvozstudios.com/fonts/swiss911.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:Korinna;src:url('/sinvozstudios.com/fonts/korinna.otf') format('opentype');font-weight:normal;font-style:normal;font-display:swap}
:root{--blue:#0d147d;--gap:clamp(4px,1vw,12px)}
body{margin:0;background:#000;color:#fff;font-family:Arial,sans-serif}
main{max-width:1600px;margin:auto;padding:var(--gap)}
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.cell{background:var(--blue);border:0;border-radius:0;min-width:0;min-height:clamp(90px,14vw,150px);display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(4px,1vw,14px);overflow-wrap:anywhere;white-space:pre-wrap}
.category{color:#fff;font-weight:800;font-size:clamp(10px,2.4vw,32px);line-height:1.1;text-transform:none;margin-bottom:clamp(6px,1vw,12px)}
.value{color:#d9a441;font-family:Swiss911,Arial,sans-serif;font-weight:normal;font-size:clamp(15px,4.8vw,64px);line-height:1.1;cursor:pointer;--depth:clamp(.45px,.1vw,1.3px);text-shadow:calc(var(--depth)*1) calc(var(--depth)*1) 0 #000,calc(var(--depth)*2) calc(var(--depth)*2) 0 #000,calc(var(--depth)*3) calc(var(--depth)*3) 0 #000,calc(var(--depth)*4) calc(var(--depth)*4) 0 #000,calc(var(--depth)*5) calc(var(--depth)*5) 0 #000,calc(var(--depth)*6) calc(var(--depth)*6) 0 #000,calc(var(--depth)*7) calc(var(--depth)*7) 0 #000,calc(var(--depth)*8) calc(var(--depth)*8) 0 #000}
.value:hover:not(:disabled){box-shadow:inset 0 0 0 3px #ffffff80}
.value:focus-visible{outline:3px solid white;outline-offset:-4px}
.value:disabled{opacity:1;cursor:default}
.instructions{color:#bbb;font-size:.85rem}
.modal-content{background:var(--blue);color:white;border:0;border-radius:0}
.modal-header{border:0;flex-shrink:0}
.modal-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,4vw,60px);gap:24px}
.clue{font-family:Korinna,Georgia,'Times New Roman',serif;font-size:clamp(24px,4.6vw,62px);font-weight:normal;line-height:1.15;text-align:center;text-transform:uppercase;text-shadow:3px 3px 2px #000;white-space:pre-wrap;overflow-wrap:anywhere;min-height:140px;max-width:1100px;width:100%;margin:auto;padding:12px}
.answer-form{width:100%;max-width:720px;margin:0 auto}
#answer,#answer:focus{background-color:var(--blue);color:#fff;border:1px solid rgba(255,255,255,.24);box-shadow:none}
#answer::placeholder{color:rgba(255,255,255,.55)}
#answer:focus{border-color:rgba(255,255,255,.65)}
#answerForm button[type="submit"]{background-color:var(--blue);color:#fff;border:1px solid rgba(255,255,255,.4);box-shadow:none}
#answerForm button[type="submit"]:hover{background-color:var(--blue);border-color:rgba(255,255,255,.8)}
#answerForm button[type="submit"]:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px}
@media(max-width:575px){.category{font-size:clamp(9px,2.5vw,14px)}.modal-body{padding:16px}.clue{font-size:clamp(24px,6vw,36px)}}
@media(min-width:992px){html,body{width:100%;height:100%;margin:0;overflow:hidden}main{width:100%;max-width:none;height:100vh;height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}.board{flex:1 1 0;min-height:0;min-width:0;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}.cell{min-height:0;min-width:0;overflow:hidden;padding:clamp(4px,1vh,12px)}.category{font-size:clamp(12px,min(2.4vw,3.5vh),32px)}.value{font-size:clamp(20px,min(4.8vw,8vh),64px)}.instructions{flex:0 0 auto;margin-top:8px!important;font-size:12px}}