@import "https://fonts.googleapis.com/css2?family=Tac+One&family=Tilt+Warp&display=swap";:root{--ink:#0c0302;--paper:#fffdf4;--line:#d8d0b5;--primary:#ead255;--tile:#c69656;--success:#09fe51;--error:#fc035d;--ui:"Tilt Warp",system-ui,sans-serif;--display:"Tac One",var(--ui);--shadow-sm:3px 3px 0 var(--ink);--shadow-md:6px 6px 0 var(--ink)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:var(--ui);color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased}button,input{font:inherit;color:inherit;border-radius:0}button{cursor:pointer}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--primary);outline-offset:4px}.primary,.secondary,.entry-panel button,.room-code button,.lobby-actions button{border:3px solid var(--ink);background:var(--ink);height:56px;color:var(--paper);box-shadow:none;padding:0 24px}.primary{background:var(--primary);color:var(--ink);box-shadow:var(--shadow-md)}.secondary{background:var(--paper);color:var(--ink)}.entry{background:var(--primary);justify-content:space-between;align-items:center;gap:72px;height:100%;padding:64px;display:flex}.brand{flex:0 0 680px;height:520px;position:relative;top:40px;left:-28px}.wordmark{font:184px/200px var(--display);color:var(--tile);letter-spacing:0;position:absolute;top:0;left:0}.wordmark:after{content:"BANANZA";color:var(--ink);z-index:-1;position:absolute;top:6px;left:6px}.brand-tiles{align-items:flex-start;gap:10px;display:flex;position:absolute;top:290px;left:0}.brand-tiles i{border:4px solid var(--ink);background:var(--tile);width:94px;height:94px;box-shadow:var(--shadow-md);font:70px/74px var(--ui);place-items:center;font-style:normal;display:grid}.brand-tiles i:nth-child(2),.brand-tiles i:nth-child(5){background:var(--paper);transform:translateY(44px)rotate(1deg)}.brand-tiles i:nth-child(3){background:var(--ink);color:var(--primary);transform:translateY(-8px)}.brand-tiles i:nth-child(4){background:var(--primary);transform:translateY(42px)rotate(1deg)}.brand-tiles i:first-child{transform:translateY(8px)rotate(-2deg)}.brand-tiles i:nth-child(6){transform:translateY(-2px)rotate(2deg)}.entry-panel{border:4px solid var(--ink);background:var(--paper);width:520px;box-shadow:12px 12px 0 var(--ink);flex-direction:column;flex:none;gap:32px;padding:40px;display:flex;position:relative;top:28px}.entry-panel form{flex-direction:column;gap:18px;display:flex}.entry-panel h1{margin:0;font-size:32px;font-weight:400;line-height:38px}.entry-panel label{flex-direction:column;flex:1;gap:6px;font-size:16px;line-height:22px;display:flex}.entry-panel input{border:3px solid var(--ink);background:#fff;width:100%;height:54px;padding:0 14px;font-size:18px}.entry-panel [name=code]{letter-spacing:.08em;text-transform:uppercase}.entry-panel hr{background:var(--ink);border:0;width:100%;height:4px;margin:0}.field-row{gap:12px;display:flex}.form-error{border:3px solid var(--error);color:var(--error);margin:0;padding:10px}.connecting{background:var(--paper);place-content:center;justify-items:center;gap:18px;height:100%;display:grid}.spinner{border:4px solid var(--line);border-top-color:var(--ink);width:42px;height:42px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.lobby{background:var(--paper);height:100%;display:flex}.room-code{background:var(--primary);border-right:4px solid var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:28px;width:58%;display:flex}.room-code h1{margin:0;font-size:30px}.code-tiles{gap:14px;display:flex}.code-tiles span{border:4px solid var(--ink);background:var(--tile);width:112px;height:112px;box-shadow:8px 8px 0 var(--ink);place-items:center;font-size:78px;display:grid}.room-code button{background:var(--paper);height:52px;color:var(--ink);box-shadow:5px 5px 0 var(--ink)}.roster{flex-direction:column;flex:1;gap:12px;padding:72px 48px;display:flex}.roster header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.roster h2{margin:0;font-size:36px;font-weight:400}.roster-player{border-bottom:2px solid var(--line);align-items:center;gap:16px;height:70px;padding:0 14px;display:flex}.roster-player strong{flex:1;font-weight:400}.roster-player button{background:0 0;border:0}.avatar{border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow-sm);color:var(--ink);flex:none;place-items:center;display:grid}.avatar.tile{background:var(--tile)}.avatar.yellow{background:var(--primary)}.lobby .avatar{width:48px;height:48px;font-size:27px}.lobby-actions{flex-direction:column;gap:18px;margin-top:auto;display:flex}.game-shell{background:var(--paper);flex-direction:column;height:100%;display:flex}.player-rail{z-index:30;flex:none;justify-content:center;align-items:flex-start;height:88px;padding-top:18px;display:flex;position:relative}.player-rail-list{gap:22px;display:flex}.rail-player{flex-direction:column;align-items:center;gap:5px;width:74px;font-size:13px;line-height:16px;display:flex;position:relative}.rail-player .avatar{width:42px;height:42px;font-size:23px}.rail-player small{color:var(--error);font-size:10px;position:absolute;top:64px}.rail-player.exception{opacity:.62}.settings-button{border:3px solid var(--ink);background:var(--paper);width:46px;height:46px;box-shadow:4px 4px 0 var(--ink);place-items:center;display:grid;position:absolute;top:18px;left:20px}.settings-button svg{fill:none;width:24px;height:24px;stroke:var(--ink);stroke-width:2.2px}.bag-count{font-size:18px;line-height:24px;position:absolute;top:24px;right:28px}.settings-menu{border:3px solid var(--ink);background:var(--paper);width:180px;box-shadow:var(--shadow-md);padding:10px;position:absolute;top:76px;left:20px}.settings-menu button{background:var(--error);color:#fff;border:0;width:100%;height:42px}.board-viewport{background:var(--paper);touch-action:none;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.board-world{transform-origin:0 0;width:0;height:0;position:absolute;top:50%;left:50%}.letter-tile{border:3px solid var(--ink);background:var(--tile);width:58px;height:58px;box-shadow:var(--shadow-sm);font:40px/44px var(--ui);-webkit-user-select:none;user-select:none;touch-action:none;place-items:center;padding:0;display:grid}.board-tile{position:absolute;top:-29px;left:-29px}.letter-tile:hover{background:var(--primary)}.letter-tile.selected{outline:4px solid var(--primary);outline-offset:3px;z-index:4}.letter-tile:focus-visible{outline:4px solid var(--ink);outline-offset:4px}.tile-rack{border-top:4px solid var(--ink);background:var(--paper);flex-wrap:wrap;flex:none;place-content:center;align-items:center;gap:8px;height:128px;padding:9px max(96px,50vw - 380px);display:flex;overflow:hidden}.rack-tile{border-width:3px;width:50px;height:50px;font-size:32px;line-height:36px}.dump-target{color:#666;opacity:.44;text-align:center;background:0 0;border:3px dashed #888;place-items:center;width:92px;height:92px;padding:12px;font:11px/14px system-ui,sans-serif;transition:width .15s,height .15s,opacity .15s,background .15s;display:grid;position:absolute;bottom:24px;right:24px}.dump-active{display:none}.drag-active .dump-target{opacity:.8}.dump-target.targeted{border-style:solid;border-color:var(--ink);color:#fff;opacity:1;width:112px;height:112px;box-shadow:var(--shadow-md);background:#fc035dd1}.dump-target.targeted .dump-idle{display:none}.dump-target.targeted .dump-active{display:block}.marquee{z-index:80;border:2px solid var(--ink);pointer-events:none;background:#ead2552e;display:none;position:fixed}.marquee:after{content:"";background:var(--ink);width:7px;height:7px;position:absolute;bottom:-4px;right:-4px}.drag-ghost{z-index:1000;pointer-events:none;will-change:transform;display:flex;position:fixed}.drag-ghost .letter-tile{flex:none}.event-layer{z-index:500;pointer-events:none;justify-content:center;display:flex;position:fixed;top:12px;left:0;right:0}.event-toast{border:3px solid var(--ink);background:var(--paper);min-height:50px;box-shadow:5px 5px 0 var(--ink);align-items:center;gap:12px;padding:0 18px;animation:.28s ease-out both toast-in;display:flex}.event-toast .avatar{width:36px;height:36px}.event-toast.error{border-color:var(--error);color:var(--error)}.event-origin .avatar,.winner-origin .avatar{box-shadow:0 0 0 7px #09fe5142,var(--shadow-sm);animation:.55s ease-out origin-flash}.flight-tile{z-index:800;pointer-events:none;width:38px;height:38px;font-size:22px;line-height:28px;position:fixed}.complete .board-viewport,.complete .tile-rack{filter:grayscale();opacity:.38;pointer-events:none}.round-result{z-index:400;border:3px solid var(--ink);width:460px;min-height:280px;box-shadow:10px 10px 0 var(--ink);background:#fffffff0;flex-direction:column;justify-content:center;align-items:center;gap:24px;padding:38px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.result-avatar{width:58px;height:58px;box-shadow:0 0 0 7px #09fe513d,4px 4px 0 var(--ink);font-size:32px}.round-result h1{font:48px/52px var(--ui);letter-spacing:-.02em;margin:0}.round-result button{width:100%}@keyframes toast-in{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}@keyframes origin-flash{50%{transform:scale(1.15)}}@media (width<=700px){.entry{flex-direction:column;justify-content:center;gap:14px;padding:20px 20px 24px}.brand{flex:none;width:350px;height:190px;top:0;left:0}.wordmark{font-size:92px;line-height:100px;top:0;left:18px}.wordmark:after{top:4px;left:4px}.brand-tiles{gap:6px;top:118px;left:19px}.brand-tiles i{width:46px;height:46px;box-shadow:4px 4px 0 var(--ink);border-width:3px;font-size:36px;line-height:40px}.brand-tiles i:nth-child(n){transform:none}.entry-panel{width:350px;box-shadow:8px 8px 0 var(--ink);border-width:3px;gap:22px;padding:20px 23px;top:0}.entry-panel form{gap:12px}.entry-panel h1{font-size:25px;line-height:30px}.entry-panel label{font-size:14px;line-height:18px}.entry-panel input{border-width:2px;height:44px;font-size:16px}.entry-panel button{border-width:3px;height:46px}.field-row{flex-direction:column;gap:10px}.entry-panel hr{height:3px}.lobby{flex-direction:column}.room-code{border-right:0;border-bottom:3px solid var(--ink);flex:none;gap:20px;width:100%;height:278px}.room-code h1{font-size:25px}.code-tiles{gap:8px}.code-tiles span{width:54px;height:54px;box-shadow:4px 4px 0 var(--ink);border-width:3px;font-size:38px}.room-code button{height:44px}.roster{gap:4px;padding:22px 20px}.roster h2{font-size:30px}.roster-player{height:52px;padding:0 6px}.lobby .avatar{width:40px;height:40px;font-size:22px}.lobby-actions{gap:14px}.lobby-actions button{height:48px}.player-rail{height:72px;padding-top:8px}.player-rail-list{gap:7px}.rail-player{gap:3px;width:46px;font-size:9px;line-height:11px}.rail-player .avatar{border-width:2px;width:32px;height:32px;font-size:17px}.settings-button{width:38px;height:38px;box-shadow:3px 3px 0 var(--ink);border-width:2px;top:8px;left:14px}.settings-button svg{width:20px;height:20px}.bag-count{font-size:11px;line-height:14px;top:12px;right:14px}.settings-menu{top:54px;left:14px}.letter-tile{border-width:3px;width:42px;height:42px;font-size:24px;line-height:30px}.board-tile{top:-21px;left:-21px}.tile-rack{border-top-width:3px;gap:7px 5px;height:170px;padding:18px 48px}.rack-tile{border-width:2px;width:37px;height:37px;font-size:21px;line-height:21px}.dump-target{border-width:2px;width:76px;height:76px;bottom:12px;right:12px}.dump-target.targeted{width:92px;height:92px}.event-layer{top:max(8px,env(safe-area-inset-top))}.event-toast{max-width:calc(100vw - 28px);font-size:14px}.round-result{width:auto;min-height:270px;box-shadow:8px 8px 0 var(--ink);padding:30px 24px;top:40%;left:30px;right:30px;transform:translateY(-50%)}.result-avatar{width:52px;height:52px}.round-result h1{font-size:40px;line-height:44px}.complete .tile-rack{height:142px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.wordmark{text-shadow:6px 6px 0 var(--ink)}.wordmark:after{display:none}.roster{background:var(--tile)}.roster-player{border-bottom-color:var(--ink)}@media (hover:none){.dump-target{opacity:0}.drag-active .dump-target{opacity:.8}.drag-active .dump-target.targeted{opacity:1}}.entry{align-items:flex-start;padding-top:max(64px,50vh - 288px);padding-bottom:max(64px,50vh - 288px)}.brand,.entry-panel{top:0}.brand-description{width:560px;font:20px/28px var(--ui);color:var(--ink);margin:0;position:absolute;top:210px;left:4px}.brand-tiles{top:326px}.entry-panel input{color:#625e54;background:#e5e2d8;transition:background-color .16s,color .16s}.entry-panel input::placeholder{color:#918b7b;opacity:1}.entry-panel input:focus{color:var(--ink);background:#fff}.entry-panel input::selection{background:var(--ink);color:var(--paper)}.entry-panel button:disabled{cursor:not-allowed;color:#77736a;box-shadow:none;background:#c9c6bc;border-color:#8e8a80}.brand-tiles i{animation:2.8s ease-in-out infinite brand-tile-drift}@keyframes brand-tile-drift{0%,to{translate:0}50%{translate:0 -9px}}@media (width<=700px){.entry{align-items:center;padding:18px 20px 22px}.brand{height:202px}.brand-description{width:310px;font-size:13px;line-height:17px;top:98px;left:20px}.brand-tiles{top:142px}.entry-panel{gap:18px;padding-block:18px}.entry-panel form{gap:10px}}@media (prefers-reduced-motion:reduce){.brand-tiles i{animation:none}}.entry-panel input{border-color:#8e8a80;outline:none}.entry-panel input:focus,.entry-panel input:focus-visible{border-color:var(--ink);outline:none}.entry-panel button,.entry-panel button:disabled{border:0}.entry-panel .form-error{border-color:var(--error);background:var(--error);color:#fff;transform-origin:50% 0;animation:.42s cubic-bezier(.2,.85,.25,1) both form-error-in}@keyframes form-error-in{0%{opacity:0;transform:translateY(-10px)scaleY(.88)}55%{opacity:1;transform:translateY(2px)scaleY(1.02)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.entry-panel .form-error{animation:none}}::view-transition-old(root){mix-blend-mode:normal;animation-duration:.56s;animation-timing-function:cubic-bezier(.65,0,.2,1);animation-fill-mode:both}::view-transition-new(root){mix-blend-mode:normal;animation-duration:.56s;animation-timing-function:cubic-bezier(.65,0,.2,1);animation-fill-mode:both}::view-transition-old(root){animation-name:screen-roll-out}::view-transition-new(root){animation-name:screen-roll-in}@keyframes screen-roll-out{to{transform:translate(-100vw)}}@keyframes screen-roll-in{0%{transform:translate(100vw)}}.transition-outgoing{z-index:9999;pointer-events:none;inset:0;overflow:hidden;width:100vw!important;height:100vh!important;position:fixed!important}@media (prefers-reduced-motion:reduce){::view-transition-old(root){animation:none}::view-transition-new(root){animation:none}}.connecting{background:var(--primary)}.connecting .spinner{border-color:#fff;border-top-color:var(--ink)}.connecting-status{opacity:0;visibility:hidden;justify-items:center;gap:18px;transition:opacity .18s;display:grid}.connecting-status.visible{opacity:1;visibility:visible}.connecting-status p{margin:0}@media (prefers-reduced-motion:reduce){.connecting-status{transition:none}}html,body{background:var(--primary);min-height:100%;overflow:hidden auto}#app{height:auto;min-height:100%;overflow:visible}.entry{height:auto;min-height:100dvh}.connecting,.lobby,.game-shell{height:100dvh;overflow:hidden}@media (width>=701px){.room-code{border-right:0}.roster{background:0 0;position:relative}.roster:before,.roster:after{content:"";pointer-events:none;position:fixed;top:-160px;bottom:-160px}.roster:before{z-index:0;background:var(--tile);left:58%;right:0}.roster:after{z-index:2;background:var(--ink);width:4px;left:calc(58% - 4px)}.roster>*{z-index:1;position:relative}}.room-code [data-copy]{transition:transform 90ms,box-shadow 90ms}.room-code [data-copy]:active{box-shadow:1px 1px 0 var(--ink);transform:translate(4px,4px)}.room-code [data-copy].copy-success{animation:1.8s ease-in-out both copy-success-flash}.room-code [data-copy].copy-error{animation:1.8s ease-in-out both copy-error-flash}@keyframes copy-success-flash{0%,to{background:var(--paper);color:var(--ink)}18%,78%{background:var(--success);color:var(--ink)}}@keyframes copy-error-flash{0%,to{background:var(--paper);color:var(--ink)}18%,78%{background:var(--error);color:#fff}}@media (prefers-reduced-motion:reduce){.room-code [data-copy].copy-success{background:var(--success);color:var(--ink);animation:none}.room-code [data-copy].copy-error{background:var(--error);color:#fff;animation:none}}.lobby-you{opacity:.68;font-size:.76em;font-weight:400}.player-rail{background:0 0}.board-viewport.pan-ready{cursor:grab}.board-viewport.is-panning{cursor:grabbing}.board-viewport.is-panning *{cursor:grabbing!important}.letter-tile.selected{background:var(--primary);outline:none}.drag-ghost{z-index:40;display:block}.drag-ghost .letter-tile{position:absolute}.board-viewport,html,body{overscroll-behavior:none}.tile-rack{touch-action:none}.dump-target,.dump-target *{-webkit-user-select:none;user-select:none}.rack-insertion{pointer-events:none;flex:none;width:50px;height:50px}.is-drag-source{opacity:0;pointer-events:none}.game-shell.drag-active .letter-tile:not(.selected):hover{background:var(--tile)}.drag-ghost .letter-tile,.game-shell.drag-active .drag-ghost .letter-tile:hover{background:var(--primary)}@media (width<=700px){.rack-insertion{width:37px;height:37px}}.dump-target{grid-template:1fr/1fr;transition:width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1),opacity .22s,background-color .22s,border-color .22s,color .22s,box-shadow .22s}.dump-target .dump-idle,.dump-target .dump-active{grid-area:1/1;transition:opacity .18s;display:block}.dump-target .dump-idle{opacity:1}.dump-target .dump-active{opacity:0}.dump-target.targeted .dump-idle{opacity:0;display:block}.dump-target.targeted .dump-active{opacity:1;display:block}.incoming-rack-tile{visibility:hidden}.dump-flight-tile{opacity:1;border-width:3px;width:50px;height:50px;font-size:32px;line-height:36px}@media (width<=700px){.dump-flight-tile{border-width:2px;width:37px;height:37px;font-size:21px;line-height:21px}}.game-shell{position:relative}.player-rail{z-index:50;pointer-events:none;background:0 0;height:88px;position:absolute;inset:0 0 auto}.player-rail>*{pointer-events:auto}.tile-rack{z-index:30;position:relative}.dump-target{z-index:15}@media (width<=700px){.player-rail{height:72px}}.board-viewport:focus,.board-viewport:focus-visible{outline:none}.connecting-status .primary{min-width:190px}.settings-button svg{width:26px;height:26px;overflow:visible}.settings-button .settings-cog{fill:none;stroke:var(--ink);stroke-width:2.2px;stroke-linecap:square;stroke-linejoin:miter}.tile-rack{height:auto;min-height:128px;overflow:visible}@media (width<=700px){.tile-rack{height:auto;min-height:170px}.complete .tile-rack{height:auto;min-height:142px}}