:root{--bg-page: #15243a;--bg-section: #162039;--bg-panel-dark: #151e2c;--bg-skeleton: #1d3150;--text: #b7cedd;--text-muted: #9eb2c0;--gold: #d29f32;--gold-light: #edb548;--border-gold-brown: #473e26;--hairline: #36455c;--tile-correct: #538d4e;--tile-correct-border: #6aaa64;--tile-present: #b59f3b;--tile-present-border: #c9b458;--tile-absent: #4b4f52;--tile-absent-border: #6b7074;--tile-empty-border: #36455c;--key-bg: #273349;--key-border: #47516b;--key-hover-bg: #18283c;--button-blue-border: #598ac3;--button-blue-a: #465da9;--button-blue-b: #4578aa;--font-display: "Lexend Variable", sans-serif;--font-body: "Nunito Sans Variable", sans-serif}*{box-sizing:border-box}:root{--activity-safe-top: var(--discord-safe-area-inset-top, env(safe-area-inset-top, 0px));--activity-safe-right: var(--discord-safe-area-inset-right, env(safe-area-inset-right, 0px));--activity-safe-bottom: var(--discord-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--activity-safe-left: var(--discord-safe-area-inset-left, env(safe-area-inset-left, 0px))}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);color:var(--text);background:linear-gradient(#0b122099,#0b1220d9),url(/hytale/artwork-blurry.webp) center / cover no-repeat fixed,var(--bg-page);color-scheme:dark}h1,h2,h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;margin:0}.wordmark{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:linear-gradient(180deg,#ffe98d,#e19f27);-webkit-background-clip:text;background-clip:text;color:transparent}.panel-frame{background:linear-gradient(#1a2d4a,#0f1c30);border:14px solid transparent;border-image:url(/hytale/header-border.webp) 28 / 14px / 1px;border-radius:.375rem;box-shadow:0 4px 30px #000c,inset 0 0 0 2px #4e5765}.button-primary{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:#fff;border:2px solid var(--button-blue-border);border-radius:4px;padding:8px 16px;cursor:pointer;background-image:url(/hytale/runes.webp),linear-gradient(90deg,var(--button-blue-a),var(--button-blue-b));transition:transform .1s ease,box-shadow .16s ease}.button-primary:hover{background-color:#20578e;box-shadow:inset 0 0 0 2px var(--button-blue-border)}.button-primary:focus-visible{outline:2px solid #7ba9d9;outline-offset:2px}.button-primary:active{transform:translateY(1px) scale(.98)}@media(max-width:480px){.panel-frame{border-width:10px;border-image-width:10px}}.layout{min-height:100dvh;display:flex;flex-direction:column;align-items:center;gap:10px;padding:max(8px,var(--activity-safe-top)) max(8px,var(--activity-safe-right)) max(8px,var(--activity-safe-bottom)) max(8px,var(--activity-safe-left))}.header{display:flex;align-items:baseline;gap:16px}.header .wordmark{font-size:clamp(1.1rem,4vw,1.6rem)}.header-user{color:var(--text-muted);font-size:.85rem}.game{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,16px);padding:clamp(8px,2vw,16px);position:relative;width:100%;max-width:560px}.board{display:flex;flex-direction:column;gap:5px;width:100%;max-width:22rem}.board-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:5px;width:min(100%,calc(var(--cols) * 3.4rem));margin-inline:auto}.board-row-shake{animation:row-shake .42s ease-in-out}.board-row-win{animation:row-celebrate .56s ease-out var(--row-reveal-time) both}.tile{aspect-ratio:1;min-width:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:clamp(.9rem,4.5vw,1.4rem);text-transform:uppercase;color:var(--text);background:var(--bg-panel-dark);border:2px solid var(--tile-empty-border);border-radius:4px;backface-visibility:hidden;transform-style:preserve-3d}.tile-typed{border-color:var(--key-border);color:#fff;animation:tile-pop .12s ease-out}.tile-revealed{animation:tile-flip .5s ease-in both;animation-delay:calc(var(--tile-index) * .25s);will-change:transform}.tile-correct{--feedback-bg: var(--tile-correct);--feedback-border: var(--tile-correct-border);background:var(--tile-correct);border-color:var(--tile-correct-border);color:#fff}.tile-present{--feedback-bg: var(--tile-present);--feedback-border: var(--tile-present-border);background:var(--tile-present);border-color:var(--tile-present-border);color:#fff}.tile-absent{--feedback-bg: var(--tile-absent);--feedback-border: var(--tile-absent-border);background:var(--tile-absent);border-color:var(--tile-absent-border);color:#fff}.keyboard{display:flex;flex-direction:column;gap:5px;width:100%;max-width:30rem}.kb-row{display:flex;gap:4px;justify-content:center}.key{flex:1 1 0;min-width:0;max-width:2.8rem;font-family:var(--font-body);font-weight:700;font-size:clamp(.7rem,2.6vw,.9rem);text-transform:uppercase;color:var(--text);background:var(--key-bg);border:1px solid var(--key-border);border-radius:4px;padding:clamp(8px,1.6vh,13px) 0;cursor:pointer;transition:transform 80ms ease,background-color .18s ease,border-color .18s ease,color .18s ease}.key:hover:not(:disabled){background:var(--key-hover-bg)}.key:active:not(:disabled){transform:translateY(1px) scale(.94)}.key:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}.key:disabled{cursor:default}.key-wide{flex:1.6 1 0;max-width:4.2rem}.key-correct{background:var(--tile-correct);color:#fff;border-color:var(--tile-correct-border)}.key-present{background:var(--tile-present);color:#fff;border-color:var(--tile-present-border)}.key-absent{background:var(--tile-absent);color:#fff;border-color:var(--tile-absent-border)}.toast{position:absolute;top:8px;left:50%;transform:translate(-50%);background:var(--bg-panel-dark);border:1px solid var(--hairline);border-radius:4px;padding:6px 12px;z-index:2;box-shadow:0 8px 24px #0009;animation:toast-in .18s ease-out both}.boot-message{text-align:center;margin-top:40vh}.discord-only{width:min(30rem,calc(100% - 32px));margin:28vh auto 0;padding:32px;text-align:center}.discord-only h1{color:var(--gold);font-size:clamp(1.6rem,8vw,2.4rem);margin-bottom:12px;text-transform:uppercase}.discord-only p{color:var(--text-muted);line-height:1.5}.pip-screen{display:grid;width:100%;height:100dvh;place-items:center;background:linear-gradient(#081221f5,#0d1d32fa),var(--bg-page)}.pip-lockup{display:flex;width:min(54vmin,12rem);flex-direction:column;align-items:center;gap:clamp(5px,3.2vh,13px)}.pip-title{display:flex;align-items:baseline;justify-content:center;gap:.45em;white-space:nowrap}.pip-wordmark{font-family:var(--font-display);font-size:clamp(.44rem,3.5vw,.82rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(180deg,#ffe98d,#e19f27);-webkit-background-clip:text;background-clip:text;color:transparent}.pip-puzzle-number{color:var(--text-muted);font-size:clamp(.32rem,2.2vw,.55rem);font-weight:700}.pip-grid{display:flex;width:100%;flex-direction:column;gap:clamp(2px,1.15vw,5px)}.pip-grid-row{display:grid;grid-template-columns:repeat(var(--pip-columns),minmax(0,1fr));gap:clamp(2px,1.15vw,5px)}.pip-grid-tile{aspect-ratio:1;border:clamp(1px,.65vw,2px) solid var(--tile-empty-border);border-radius:1px;background:var(--bg-panel-dark)}.pip-grid-row-active .pip-grid-tile{border-color:var(--key-border)}.pip-grid-tile-correct{border-color:var(--tile-correct-border);background:var(--tile-correct)}.pip-grid-tile-present{border-color:var(--tile-present-border);background:var(--tile-present)}.pip-grid-tile-absent{border-color:var(--tile-absent-border);background:var(--tile-absent)}.game-row{display:flex;gap:16px;align-items:flex-start;justify-content:center;width:100%;min-width:0}.opponents{background:var(--bg-panel-dark);border:1px solid var(--border-gold-brown);border-radius:6px;padding:12px;width:180px;flex:none;display:flex;flex-direction:column;gap:10px;max-height:calc(100dvh - 72px);overflow-y:auto}.opponents h3{color:var(--gold);font-size:.8rem}.opponent{display:flex;gap:8px;align-items:flex-start}.opponent-avatar{width:28px;height:28px;border-radius:50%}.opponent-name{font-size:.8rem}.opponent-result{color:var(--gold-light)}.opponent-rows{display:flex;flex-direction:column;gap:2px;margin-top:4px}.opponent-row{display:flex;gap:2px;animation:opponent-row-in .3s ease-out both;animation-delay:calc(var(--opponent-row-index) * 40ms)}.mini-tile{width:10px;height:10px;border-radius:1px;background:var(--bg-panel-dark);border:1px solid var(--tile-empty-border);display:inline-block;backface-visibility:hidden;transform-style:preserve-3d}.mini-tile-filled{animation:tile-flip .5s ease-in both;animation-delay:calc(var(--opponent-row-index) * 40ms + var(--mini-tile-index) * .25s);will-change:transform}.mini-tile.tile-correct{background:var(--tile-correct);border-color:var(--tile-correct-border)}.mini-tile.tile-present{background:var(--tile-present);border-color:var(--tile-present-border)}.mini-tile.tile-absent{background:var(--tile-absent);border-color:var(--tile-absent-border)}@media(max-width:700px){.header{display:none}.layout{gap:6px}.game-row{flex-direction:column;align-items:center}.opponents{flex-direction:row;flex-wrap:wrap;width:100%;max-height:20dvh;overflow-y:auto}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#050910b3;display:grid;place-items:center;z-index:10;animation:backdrop-in .18s ease-out both}.modal{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 28px;max-width:380px;width:calc(100% - 32px);text-align:center;animation:modal-in .28s cubic-bezier(.2,.85,.3,1.15) both}.reveal{margin:0}.reveal-word{color:var(--gold-light);letter-spacing:.06em}.stats-row{display:flex;gap:18px}.stat{display:flex;flex-direction:column;font-size:.7rem;color:var(--text-muted);text-transform:uppercase}.stat-num{font-size:1.4rem;color:var(--text);font-family:var(--font-display)}.dist{display:flex;flex-direction:column;gap:3px;width:100%}.dist-row{display:flex;gap:6px;align-items:center}.dist-label{width:12px;color:var(--text-muted);font-size:.75rem}.dist-bar{background:var(--tile-correct);color:#1b1608;font-size:.75rem;font-weight:700;min-width:14px;padding:1px 6px;border-radius:2px;text-align:right;transform-origin:left;animation:dist-grow .42s ease-out both}.share-fallback{width:100%;min-height:5.5rem;background:var(--bg-panel-dark);color:var(--text);border:1px solid var(--hairline);border-radius:4px;font-family:var(--font-body);padding:8px}@keyframes tile-pop{0%{transform:scale(.82)}70%{transform:scale(1.07)}to{transform:scale(1)}}@keyframes tile-flip{0%{transform:rotateX(0);color:var(--text);background:var(--bg-panel-dark);border-color:var(--tile-empty-border)}49%{transform:rotateX(-90deg);color:var(--text);background:var(--bg-panel-dark);border-color:var(--tile-empty-border)}50%{transform:rotateX(90deg);color:#fff;background:var(--feedback-bg);border-color:var(--feedback-border)}to{transform:rotateX(0);color:#fff;background:var(--feedback-bg);border-color:var(--feedback-border)}}@keyframes row-shake{0%,to{transform:translate(0)}15%{transform:translate(-7px)}30%{transform:translate(6px)}45%{transform:translate(-5px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}}@keyframes row-celebrate{0%,to{transform:translateY(0)}35%{transform:translateY(-7px)}65%{transform:translateY(2px)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes opponent-row-in{0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dist-grow{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}@font-face{font-family:Lexend Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lexend-vietnamese-wght-normal-RvljkFvg.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Lexend Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lexend-latin-ext-wght-normal-B6JQhE1e.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Lexend Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lexend-latin-wght-normal-ci0D1wrL.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Nunito Sans Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/nunito-sans-cyrillic-ext-wght-normal-7w74d1lj.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Nunito Sans Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/nunito-sans-cyrillic-wght-normal-B9hoeQUC.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Nunito Sans Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/nunito-sans-vietnamese-wght-normal-BhFYcaJr.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Nunito Sans Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/nunito-sans-latin-ext-wght-normal-DMEAsnHD.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Nunito Sans Variable;font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/nunito-sans-latin-wght-normal-BWQ3gi2K.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
