@import url('/game-modules/tile-garden/concept.css');
@font-face{font-family:Friend Sans;src:url('/site/platform-assets/body.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:Friend Sans;src:url('/site/platform-assets/body-bold.woff2') format('woff2');font-display:swap;font-weight:700}
:root{color-scheme:light;--fm-paper:#f3f7f5;--fm-card:#fffefa;--fm-ink:#223b34;--fm-muted:#50675f;--fm-line:#758a81;--fm-soft:#dce9e1;--fm-accent:#245944;--fm-on-accent:#fff;--fm-focus:#1566ad;--fm-radius:1.25rem;--fm-small:.8125rem;--fm-body:1rem;--fm-title:clamp(2.5rem,6vw,5rem);--fm-gap:1rem;--fm-space:.5rem;--fm-target:2.75rem;--fm-shadow:0 .5rem 2rem #223b3410}
body[data-friend-game=puck-duel]{--fm-paper:#eff5fa;--fm-ink:#22364d;--fm-muted:#516880;--fm-line:#788ea4;--fm-soft:#dce9f5;--fm-accent:#17578d}
*{box-sizing:border-box}body{margin:0;background:var(--fm-paper);color:var(--fm-ink);font:var(--fm-body)/1.6 Friend Sans,system-ui,sans-serif}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a,select{touch-action:manipulation}button,select,input{min-height:var(--fm-target);border:1px solid var(--fm-line);border-radius:var(--fm-space);padding:var(--fm-space) var(--fm-gap);background:var(--fm-card)}button{cursor:pointer;font-weight:700}button:disabled{cursor:default;opacity:.62}a{color:inherit;text-underline-offset:.2em}button:hover:enabled{background:var(--fm-soft)}:focus-visible{outline:3px solid var(--fm-focus);outline-offset:3px}p,h1,h2{margin:0}h1{font:700 var(--fm-title)/1.06 Friend Sans,system-ui;letter-spacing:-.045em}h2{font-size:1.65rem;line-height:1.2;letter-spacing:-.025em}[hidden]{display:none!important}.friend-shell{min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(var(--fm-gap),env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--fm-gap),env(safe-area-inset-left))}.friend-header{display:flex;align-items:center;justify-content:space-between;gap:var(--fm-gap);min-height:4.5rem;width:100%;max-width:90rem;margin-inline:auto;border-bottom:1px solid var(--fm-line)}.friend-header>a{display:inline-flex;align-items:center;min-height:var(--fm-target);font-weight:700;text-decoration:none}.friend-tag,.friend-eyebrow{font-size:var(--fm-small);font-weight:700;letter-spacing:.09em;text-transform:uppercase}.friend-tag{color:var(--fm-muted)}.friend-tools{display:flex;gap:var(--fm-space)}.friend-tools button{background:transparent}.friend-lobby{width:min(100%,70rem);margin:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,5rem);padding:3rem 0}.friend-lobby-copy{display:flex;flex-direction:column;gap:1.5rem;justify-content:center}.friend-lobby-copy>p{max-width:53ch}.friend-lead{font-size:1.25rem}.friend-fine{font-size:var(--fm-small);color:var(--fm-muted)}.friend-lobby-panel{align-self:center;padding:clamp(1.25rem,3vw,2.5rem);border:1px solid var(--fm-line);border-radius:var(--fm-radius);background:var(--fm-card);box-shadow:var(--fm-shadow)}.friend-lobby-panel>div{display:flex;flex-direction:column;gap:var(--fm-gap)}.friend-lobby-panel label{font-size:var(--fm-small);font-weight:700}.friend-primary{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;background:var(--fm-accent);color:var(--fm-on-accent);border:1px solid var(--fm-accent);border-radius:var(--fm-space);padding:var(--fm-space) var(--fm-gap);text-decoration:none;font-weight:700}.friend-primary:hover:enabled{background:var(--fm-ink)}.friend-invite-row{display:flex;gap:var(--fm-space)}.friend-invite-row input{width:100%;min-width:0;font-size:var(--fm-small)}.friend-seats{margin:0;padding:0;list-style:none;display:grid;gap:var(--fm-space)}.friend-seats li{padding:var(--fm-space) 0;border-bottom:1px solid var(--fm-line)}.friend-notice{display:flex;align-items:center;justify-content:center;gap:var(--fm-gap);font-size:var(--fm-small);color:var(--fm-muted);padding:var(--fm-gap) 0;min-height:3.5rem;text-align:center}.friend-dialog{width:min(30rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:2rem;background:var(--fm-card);color:var(--fm-ink);border:1px solid var(--fm-line);border-radius:var(--fm-radius)}.friend-dialog[open]{display:flex;flex-direction:column;gap:1.25rem}.friend-dialog::backdrop{background:#172e3b80}.friend-dialog>a:last-child{display:flex;justify-content:center;align-items:center;min-height:var(--fm-target)}.friend-result-scores{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:700}.is-playing{overflow:hidden}.is-playing .friend-shell{height:100dvh;min-height:0}.friend-match{flex:1;min-height:0;display:flex;flex-direction:column}.friend-scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--fm-gap);align-items:center;width:min(100%,56rem);align-self:center;padding:var(--fm-gap) 0}.friend-scoreboard>div{display:flex;align-items:center;gap:var(--fm-gap)}.friend-scoreboard>div:last-child{flex-direction:row-reverse}.friend-scoreboard span,.friend-scoreboard p{font-size:var(--fm-small);color:var(--fm-muted)}.friend-scoreboard strong{font-size:1.5rem;font-variant-numeric:tabular-nums}.friend-play-area{display:flex;flex:1;flex-direction:column;min-height:0;position:relative}.friend-garden-space{flex:1;min-height:0;display:grid;place-items:center;container-type:size}.friend-garden-board{width:min(92cqw,92cqh,34rem);height:min(92cqw,92cqh,34rem);position:relative;isolation:isolate}.friend-tile{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);min-height:0;border-radius:14%;display:grid;place-items:center;padding:0;opacity:1!important;background:var(--fm-card);box-shadow:0 3px 0 var(--fm-line)}.friend-tile.is-covered{background:var(--fm-soft);filter:brightness(.82);border-style:dashed}.friend-tile:focus-visible{z-index:10!important}.friend-tray-wrap{width:min(100%,30rem);margin:var(--fm-space) auto 0}.friend-tray-wrap>p{display:flex;justify-content:space-between;font-size:var(--fm-small);margin-bottom:var(--fm-space)}.friend-tray{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--fm-space)}.friend-tray-slot{aspect-ratio:1;border:1px solid var(--fm-line);border-radius:var(--fm-space);display:grid;place-items:center;background:var(--fm-card)}.friend-rink{display:block;flex:1;min-height:0;width:100%;touch-action:none}.friend-controls{font-size:var(--fm-small);color:var(--fm-muted);text-align:center;padding:var(--fm-space)}
@media(max-width:47.99rem){.friend-lobby{grid-template-columns:1fr;gap:2rem;padding:2rem 0}.friend-header{gap:var(--fm-space);min-height:4rem}.friend-tag{display:none}.friend-tools button{padding-inline:var(--fm-space);font-size:var(--fm-small)}.friend-scoreboard{gap:var(--fm-space);padding:var(--fm-space) 0}.friend-scoreboard>div{display:grid;gap:0}.friend-scoreboard>div:last-child{text-align:right}.friend-scoreboard strong{font-size:1.25rem}.friend-notice{padding:var(--fm-space) 0;min-height:2.5rem}.friend-controls{font-size:.75rem;padding:0}.friend-dialog{padding:1.5rem}}
@media(max-height:32rem) and (min-width:48rem){.friend-header{min-height:3rem}.friend-scoreboard{padding:0}.friend-notice{padding:0;min-height:2rem}.friend-tray-wrap{width:18rem}.friend-tray-wrap>p{display:none}}
@media(forced-colors:active){button,.friend-tile,.friend-tray-slot{border:2px solid ButtonText}.friend-tile.is-covered{opacity:.5!important}.friend-primary{border:2px solid LinkText}.friend-dialog::backdrop{background:Canvas}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}