:root{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;background:#f7f4e8;color:#193b40;--lime:#d6f477;--ink:#193b40}*{box-sizing:border-box}body{margin:0}header,footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:auto;padding:25px 6vw;max-width:1280px}header{border-bottom:1px solid #193b401a}header>span,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800}.brand{font-size:20px;text-decoration:none;color:var(--ink)}.brand strong{background:var(--lime);padding:3px 6px;border-radius:6px}main{max-width:1120px;min-height:72vh;margin:auto;padding:45px 30px 70px}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}.hero img{width:100%;max-width:390px;transform:rotate(-5deg);filter:drop-shadow(0 20px 20px #193b4026)}h1{font-size:clamp(42px,7vw,86px);line-height:.97;letter-spacing:-3px;margin:23px 0 28px;font-weight:900}p{font:16px/1.7 system-ui;max-width:510px;color:#52716c}.eyebrow{color:#477a5a}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:15px 23px;border:0;border-radius:15px;text-decoration:none;color:var(--ink);font:800 15px system-ui;cursor:pointer}.primary{background:var(--lime);box-shadow:0 4px 0 #9ab94a}.light{background:#e2e9d9}.text{display:inline-block;background:none;border:0;color:#52716c;font:700 13px system-ui;padding:18px 0;cursor:pointer}a{color:#366d55}button:disabled{opacity:.45;cursor:default}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #e8a95f;outline-offset:4px}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid #193b401a;margin-top:65px;padding-top:30px}.how p{font-size:13px}.card{background:#fffdf5;border:1px solid #193b401a;border-radius:24px;padding:25px;max-width:480px;display:grid;gap:18px;box-shadow:0 15px 45px #193b4008}.card label{display:grid;gap:9px;font:700 13px system-ui}input{font:16px system-ui;min-height:47px;max-width:100%;border:1px solid #193b4038;border-radius:10px;background:white;padding:11px;color:#193b40}.card .check{display:flex;align-items:center;gap:10px}.check input{width:20px;min-height:20px;accent-color:#688b3b}.card>small{font:11px/1.5 system-ui;color:#71877c}.roster{display:grid;gap:10px;max-width:480px;margin:20px 0}.person{border-radius:14px;padding:15px 18px;background:#e2e9d9;display:flex;justify-content:space-between;gap:15px;font:700 14px system-ui}.person.ready{background:#d6efaa}.person span{font-size:12px;color:#52716c}.directory{display:grid;gap:14px;max-width:600px}.directory a{padding:20px;background:#e2e9d9;border-radius:14px;text-decoration:none;display:flex;justify-content:space-between}#error{background:#ffe1cc;border:1px solid #d89568;padding:15px 20px;border-radius:13px;color:#7c4427}footer{font:12px system-ui;border-top:1px solid #193b401a;color:#52716c}#back{display:inline-block;margin-bottom:15px;font:700 13px system-ui}[hidden]{display:none!important}@media(max-width:650px){main{padding:30px 22px 50px}.hero{grid-template-columns:1fr}.hero img{max-width:210px;grid-row:1;margin:0 auto}.hero h1{margin-top:15px}.how{grid-template-columns:1fr;gap:10px;margin-top:35px}.card{padding:20px}.actions{flex-direction:column}header,footer{padding:20px 22px;flex-wrap:wrap}header>span{font-size:9px}h1{letter-spacing:-2px}}@media(prefers-reduced-motion:no-preference){.button{transition:transform .15s}.button:hover{transform:translateY(-2px)}}

header nav{display:flex;gap:18px;align-items:center;font:700 13px system-ui}header nav a{text-decoration:none;min-height:40px;display:flex;align-items:center}

@media (min-width:650px) and (max-height:550px){
 header{padding:9px 22px;gap:12px}header .brand{font-size:17px}header nav{gap:15px}header nav a{min-height:34px}
 main{padding:12px 22px 24px}#back{margin-bottom:9px}h1{font-size:38px;letter-spacing:-1.5px;margin:10px 0 14px}
 #room{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);column-gap:22px;row-gap:6px;align-items:start}
 #room>.eyebrow{grid-column:1;grid-row:1}#room>h1{grid-column:1;grid-row:2;margin:2px 0 4px;font-size:34px;overflow-wrap:anywhere}
 #room-detail{grid-column:1;grid-row:3;margin:0;font-size:13px;line-height:1.4}
 #room-roster{grid-column:1;grid-row:4;margin:3px 0 0;gap:6px}.person{padding:10px 12px;font-size:12px}
 #join-form,#room-controls{grid-column:2;grid-row:1 / span 5;max-width:none;width:100%;padding:12px;gap:8px}
 #room-controls{grid-template-columns:repeat(2,minmax(0,1fr))}#room-controls>*{grid-column:1 / -1}
 #room-controls .button,#join-form .button{min-height:44px;padding:10px 14px}
 #room-controls .check{min-height:40px;cursor:pointer}
 #room-note{font-size:12px;line-height:1.4;margin:2px 0}
 #room-controls #leave,#room-controls #close{grid-column:auto;min-height:40px;padding:8px 0}
 #join-form label{gap:5px}#join-form input{min-height:42px;padding:8px}
}

.play-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 10px}.play-option{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:26px;border:1px solid #193b401a;border-radius:24px;background:#fffdf5;text-align:left;text-decoration:none;color:var(--ink);font:inherit;cursor:pointer}.play-option:first-child{background:var(--lime)}.play-option strong{font:800 21px system-ui}.play-option span{font:14px/1.65 system-ui;color:#45635c}.play-help{font-size:13px;max-width:750px}@media(max-width:750px){.play-options{grid-template-columns:1fr;gap:12px}.play-option{padding:22px;gap:8px}}
/* Harbor menus share the in-game cream, deep teal and canvas palette. */
:root{background:#f4f0e2;color:#244e49;--ink:#244e49;--lime:#efbd7c}body{background:radial-gradient(ellipse at 85% 0,#e1e9d7 0,transparent 50%),#f4f0e2;min-height:100vh}
header{max-width:1120px;padding:18px 30px;min-height:86px;border-bottom:1px solid #d6daca}.brand{display:flex;align-items:center}.brand img{width:148px;height:54px;object-fit:contain}header nav a{color:#4a6b5b;font-size:12px}header nav a:hover{text-decoration:underline}
main{max-width:1000px;padding:38px 30px 55px;min-height:calc(100vh - 160px)}h1{font-size:clamp(35px,5vw,54px);line-height:1.07;letter-spacing:-1.8px;margin:12px 0 15px;color:#244e49}h1:focus{outline:none}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#7a8d67}p{font:14px/1.7 system-ui;color:#6a7c68}.button{border-radius:12px;font-size:13px;min-height:48px;gap:22px}.primary{background:#2b5d50;color:#fff4d9;box-shadow:none;border:1px solid #2b5d50}.primary:hover{background:#204c40}.light{background:transparent;border:1px solid #cbd5bd;color:#3f6554}.text{color:#5a7b61;font-size:12px}.card{padding:26px;border-radius:22px;background:#fffbef;border-color:#d5ddc6;box-shadow:0 16px 45px #244e4906;max-width:520px}.card label{font-size:12px;color:#4d6d58}input{border-radius:11px;background:#fffdf6;border-color:#c9d2b8;min-height:48px;color:#244e49}.card label small{font-weight:400;color:#889078}.card>small{font-size:11px;color:#839075}.check input{accent-color:#35684e}.card .check{line-height:1.5}.button[aria-busy=true]{opacity:.65;cursor:progress}.button[aria-busy=true]:after{content:'';width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:harbor-spin .6s linear infinite}@keyframes harbor-spin{to{transform:rotate(360deg)}}
.play-heading{position:relative;margin-bottom:26px}.play-heading h1{font-size:clamp(42px,5vw,62px);letter-spacing:-2px}.play-heading p{margin:0;color:#71816c}
.play-options{grid-template-columns:1fr 1fr;gap:20px;margin:0}
.play-card{display:flex;flex-direction:column;padding:26px;border:1px solid #d2d9be;background:#fffaf0;border-radius:24px;box-shadow:0 10px 30px #244e4904}
.practice-card{background:#e8edd4;border-color:#c7d4ad}.play-card-heading{display:flex;align-items:center;gap:15px}.play-symbol{display:grid;place-items:center;width:50px;height:50px;border-radius:17px;background:#d4dfb8;color:#42614b;font:850 27px system-ui}.friends-card .play-symbol{background:#f3d5ac;color:#76573a;font-size:18px}.play-card h2{font:850 23px/1.2 ui-rounded,"Trebuchet MS",system-ui;letter-spacing:-.5px;margin:0 0 5px}.play-card-heading>div>span{font:11px system-ui;color:#79866c}.play-card p{font-size:13px;line-height:1.65;max-width:350px;margin:20px 0 26px}.play-card>.button,.play-buttons{margin-top:auto}.play-card>.button{justify-content:space-between}.play-buttons{display:grid;grid-template-columns:1.1fr 1fr;gap:10px}.play-buttons .primary{background:#efbd7c;border-color:#e1ad69;color:#365448}.play-buttons .primary:hover{background:#f7cf99}.play-buttons .button{padding:12px 10px;font-size:11px;gap:7px}
.match-link{display:flex;align-items:center;gap:15px;text-decoration:none;color:#335d4b;background:#eae6d6;border:1px solid #dadbc7;border-radius:17px;padding:15px 19px;margin:18px 0 12px}.match-link>span:first-child{font:34px/1 system-ui;color:#7a8b6e}.match-link>span:nth-child(2){flex:1}.match-link strong{display:block;font:800 13px/1.4 system-ui}.match-link small{display:block;font:11px/1.5 system-ui;color:#7d8973}.match-link>span:last-child{font-size:21px}
.site-help,.form-extra{border-top:1px solid #d5dbc6}.site-help summary,.form-extra summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;cursor:pointer;font:750 12px/1.4 system-ui;color:#507257;list-style:none}.site-help summary::-webkit-details-marker,.form-extra summary::-webkit-details-marker{display:none}.site-help summary:after,.form-extra summary:after{content:'＋';color:#819172;font-size:18px}.site-help[open] summary:after,.form-extra[open] summary:after{content:'−'}.site-help p{font-size:12px;max-width:none;margin:0 0 15px}.help-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.help-columns b{display:block;color:#416449;margin-bottom:5px}.form-extra[open]{display:grid;gap:15px}.form-extra[open] summary{margin-bottom:-8px}.form-extra .check{padding-bottom:5px}.play-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;font:11px/1.5 system-ui;color:#89917a;margin-top:17px}.play-caption a{color:#5e7c5d;text-decoration:none}.play-caption a:hover{text-decoration:underline}.roster{max-width:520px}.person{background:#e6ead6;color:#355946;border:1px solid #d6ddc4}.person.ready{background:#deebbe;border-color:#bfce9d}.directory{margin-top:24px}.directory a{background:#e6ead6;color:#42624b;border:1px solid #d1d9bd}.directory a:hover{background:#e0e8ca}.directory:empty{display:none}#back{color:#668165;text-decoration:none;margin-bottom:22px;font-size:12px}footer{max-width:1120px;padding:20px 30px;font-size:10px;border-color:#d6daca;color:#89917c}
@media(max-width:750px){header{padding:15px 22px}.brand img{width:120px;height:43px}header nav{gap:15px}header nav a{font-size:11px}main{padding:28px 22px 40px}.play-options{grid-template-columns:1fr;gap:14px}.play-card{padding:22px}.play-card h2{font-size:21px}.play-card p{margin:15px 0 20px;max-width:none}.play-card>.button{min-height:50px}.play-buttons .button{font-size:12px;min-height:50px}.play-heading{margin-bottom:22px}.play-caption{flex-wrap:wrap;gap:10px}.help-columns{grid-template-columns:1fr;gap:5px}.card{padding:22px}footer{padding:20px 22px}.match-link{margin-top:15px}.play-heading p br{display:none}}
@media(min-width:651px) and (max-height:550px){header{padding:9px 22px;min-height:58px}.brand img{height:36px}main{padding:18px 22px 30px}.play-heading h1{font-size:38px}.play-heading{margin-bottom:18px}.play-heading p{font-size:12px}.play-card{padding:18px}.play-card h2{font-size:20px}.play-card p{margin:13px 0 18px;font-size:12px}.play-symbol{width:40px;height:40px}.match-link{padding:10px 15px}.card{padding:18px}}
@media(prefers-reduced-motion:reduce){.button[aria-busy=true]:after{animation:none}}
html{scroll-padding-top:96px}header{position:sticky;top:0;z-index:5;background:#f4f0e2eb;backdrop-filter:blur(12px)}header nav a[aria-current=page]{color:#244e49;text-decoration:underline;text-underline-offset:6px}
@media(max-width:750px){header{min-height:68px;padding:10px 22px}.brand img{height:42px;width:112px}main{padding-top:22px}.play-heading h1{font-size:38px;margin:10px 0 12px}.play-heading p{font-size:12px;line-height:1.6}.play-heading{margin-bottom:20px}.play-options{grid-template-columns:1fr 1fr;gap:12px}.play-card{min-width:0;padding:17px 14px;border-radius:21px}.play-card-heading{display:block}.play-symbol{display:none}.play-card h2{font-size:18px}.play-card-heading>div>span{font-size:10px}.play-card p{font-size:11px;line-height:1.55;margin:16px 0 20px}.play-buttons{grid-template-columns:1fr;gap:8px}.play-buttons .button,.play-card>.button{font-size:11px;padding:10px 9px;min-height:48px;gap:8px}.play-card>.button{justify-content:center}.match-link{padding:12px 14px;margin:14px 0 8px}.play-caption{font-size:10px}.site-help summary{min-height:44px}}
@media(max-width:350px){.play-options{grid-template-columns:1fr}.play-card-heading{display:flex}.play-card p{margin:12px 0 16px}.play-buttons{grid-template-columns:1fr 1fr}.play-card>.button{justify-content:space-between}}

/* Approved 3D logo; keep the full mascot and two-line title visible. */
header .brand img{width:156px;height:82px;object-fit:contain}
@media(max-width:600px){header .brand img{width:118px;height:68px}}

.site-brand{font:800 20px/1.2 system-ui;letter-spacing:-.6px;white-space:nowrap}.game-crumb{display:inline-block;margin-block:0 16px;font-weight:700}.share-grid{display:grid;grid-template-columns:minmax(160px,240px) minmax(0,1fr);gap:24px;align-items:center}.share-grid canvas{width:100%;height:auto;display:block;max-width:280px;background:white;border-radius:4px}.share-grid input{min-width:0;width:100%;direction:ltr;text-align:left}.share-actions{display:flex;flex-wrap:wrap;gap:12px;margin-block:16px}.share-actions button{min-height:48px}.invitation-block{min-width:0}.invitation-block h2,#launch-options h2{font-size:21px}.invitation-block small{display:block;overflow-wrap:anywhere}#launch-options{padding-block:16px;border-top:1px solid #365b4e30}#scan-video{display:block;width:100%;max-height:50vh;object-fit:contain;background:#17383e;border-radius:12px}[hidden]{display:none!important}@media(max-width:650px){.share-grid{grid-template-columns:1fr;gap:16px}.share-grid canvas{width:min(100%,240px);justify-self:center}.share-actions>*{flex:1 1 180px}.site-brand{font-size:18px}}