:root{--correct-color:#47d747;--present-color:#f7f749;--absent-color:#888;--invalid-color:#ff3f3f}html,body{height:100%}body{color:#fff;background-color:#0e1626;place-items:center;margin:0;font-family:Poppins,sans-serif;display:grid}main{width:min(440px,100vw - 2rem)}h1{text-align:center;margin-top:0;margin-bottom:1.5rem}#game{color:#fff;background-image:linear-gradient(153deg,#1c2b45 13%,#0c1321 85%),linear-gradient(149deg,#fec63b 3%,#fec63b00 80%);border-radius:20px;width:min(400px,100%);margin:auto;position:relative}#game:before{content:"";z-index:-1;background-image:linear-gradient(138deg,#6ba0e2 -20%,#131e32 105%);border-radius:25px;display:block;position:absolute;inset:-7px}.row{justify-content:center;display:flex}.row.current .tile:empty:first-of-type{animation:2s infinite both fade}@keyframes fade{50%{background:#ffffff0d}}.tile{text-transform:uppercase;color:#496e9e;outline:1px solid #496e9e1a;justify-content:center;align-items:center;width:100%;height:100px;font-size:50px;font-weight:600;display:flex}#keyboard{margin:4rem 0}.key{background:#c5c5c5;border:0;border-radius:4px;width:min(40px,10% - 4px);height:50px;margin:2px;padding:0}.key[data-key=Enter],.key[data-key=Backspace]{width:min(60px,15% - 4px)}.row.invalid .tile,.tile.invalid{color:var(--invalid-color);text-shadow:0 0 12px #f626266b}.tile.correct{color:var(--correct-color);text-shadow:0 0 12px #26f66e6b}.key.correct{background:var(--correct-color)}.tile.present{color:var(--present-color);text-shadow:0 0 12px #f6ab266b}.key.present{background:var(--present-color)}.key.absent{background:var(--absent-color)}output{--bubble-fill:#1a2942;--bubble-edge:#6ba0e2;z-index:1;pointer-events:none;background:var(--bubble-fill);width:max-content;max-width:220px;box-shadow:0 0 0 2px var(--bubble-edge), 0 0 18px #6ba0e259;color:var(--present-color);text-shadow:0 0 12px #f6ab266b;border-radius:16px;padding:10px 15px;font-size:16px;font-weight:600;line-height:1.35;position:absolute;top:20px;left:calc(100% + 28px)}output:after{content:"";border:8px solid #0000;border-left:0;border-right:14px solid var(--bubble-fill);filter:drop-shadow(-2px 0 0 var(--bubble-edge));position:absolute;top:12px;left:-14px}output.invalid{color:#ff5c5c;text-shadow:0 0 12px #f626266b}output.correct{color:var(--correct-color);text-shadow:0 0 12px #26f66e6b}output:empty{opacity:0}@media (prefers-reduced-motion:no-preference){output:not(:empty){animation:.15s ease-out pop}}@keyframes pop{0%{opacity:0;scale:.85}}@media (width<=960px){output{text-align:center;max-width:100%;top:calc(100% + 22px);left:50%;translate:-50%}output:after{border:8px solid #0000;border-top:0;border-bottom:14px solid var(--bubble-fill);filter:drop-shadow(0 -2px 0 var(--bubble-edge));top:-14px;left:50%;translate:-50%}#keyboard{margin-top:4.75rem}}#wordis-logo{width:min(320px,80vw);height:auto}