/* Main menu from The Quackz layered UI kit (docs/main-menu.md).
   .kit-staged: fixed 1600×900 stage scaled with CSS zoom by main-menu.js.
   .kit-flow:   phones / small windows, a scrolling column with the same pieces. */
@font-face{font-family:'Comic Neue';src:url('/assets/fonts/ComicNeue-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('/assets/fonts/ComicNeue-BoldItalic.woff') format('woff');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Lato;src:url('/assets/fonts/Lato-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url('/assets/fonts/Lato-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Lato;src:url('/assets/fonts/Lato-Black.woff') format('woff');font-weight:900;font-display:swap}

:root{--kit-ink:#0b242d;--kit-ink-soft:#13313b;--kit-wood:#8d5a31;--kit-wood-dark:#5e3a1f;--kit-paper:#fff8e7;--kit-paper-edge:#e9cf9c;--kit-title:'Comic Neue','Trebuchet MS',Rubik,sans-serif;--kit-body:Lato,'Segoe UI',Arial,sans-serif}

/* ---- Shell ------------------------------------------------------------------------------ */
.quack-ui #welcome.kit-hub{position:fixed;inset:0;width:auto;max-width:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;gap:0;z-index:3;pointer-events:auto;overflow:hidden;grid-template-columns:none;font-family:var(--kit-body);color:var(--kit-ink)}
.quack-ui #welcome.kit-hub.hidden{display:none}
.kit-hub .kit-sky{position:fixed;inset:0;background:#8fd0ee url('/assets/ui/menu/menu-scenery.webp') center 35%/cover no-repeat;pointer-events:none}
@media (max-width:900px),(max-height:500px){.kit-hub .kit-sky{background-image:url('/assets/ui/menu/menu-scenery-small.webp')}}
.kit-hub .kit-sky::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(20,50,40,.28));pointer-events:none}
.kit-hub img{user-select:none;-webkit-user-drag:none}
.kit-hub .kit-stage{position:relative;flex:none;width:1600px;height:900px;pointer-events:auto}
.kit-hub .kit-stage>*{position:absolute}
body.kit-menu:has(#welcome.kit-hub:not(.hidden)) .topbar{z-index:5}
body.kit-menu:has(#welcome.kit-hub:not(.hidden)) :is(.topbar .brand,#map-edition){visibility:hidden}
body.kit-menu:has(#welcome.kit-hub:not(.hidden)) .vignette{opacity:0}
body.kit-menu:has(#welcome.kit-hub:not(.hidden)) #graphics-open small{display:none}
.kit-hub .account-link[hidden]{display:none!important}
body.kit-menu:has(#welcome.kit-hub:not(.hidden)) .top-actions :is(button,.q-graphics-button){box-shadow:0 3px 0 #b88a52,0 6px 14px rgba(40,25,10,.25);border-color:#c79a5e}

/* ---- Stage pieces (1600×900 coordinates) ------------------------------------------------ */
.kit-staged .kit-board{left:236px;top:212px;width:1010px;height:684px;object-fit:fill;filter:drop-shadow(0 10px 16px rgba(40,25,10,.3))}
.kit-staged .kit-logo{left:26px;top:10px;width:392px;margin:0;animation:kit-bob 6s ease-in-out infinite}
.kit-hub .kit-logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(40,25,10,.25))}
.kit-staged .kit-welcome{left:466px;top:-8px;width:336px;height:246px;margin:0;display:block;transform-origin:50% 0;animation:kit-swing 7s ease-in-out infinite}
.kit-hub .kit-welcome-board{display:block;width:100%;height:100%}
.kit-hub .kit-welcome-text{position:absolute;left:19%;right:8%;top:27%;display:flex;flex-direction:column;align-items:center;transform:rotate(-3deg);text-align:center}
.kit-hub .kit-welcome .eyebrow{font:700 19px/1.1 var(--kit-title);letter-spacing:.02em;color:#452a1d;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.kit-hub .kit-welcome h2{margin:8px 0 0;font:700 40px/1.05 var(--kit-title);color:#092329;-webkit-text-stroke:.6px #092329;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-hub .kit-welcome h2 span{font:inherit}
.kit-hub .kit-rename{position:absolute;right:26px;bottom:34px;width:36px;height:36px;border-radius:50%;border:2px solid #c79a5e;background:#fffdf3;color:#5e3a1f;font:700 18px/1 var(--kit-body);cursor:pointer;box-shadow:0 2px 0 #c79a5e;display:grid;place-items:center;padding:0;transition:transform .15s}
.kit-hub .kit-rename:hover,.kit-hub .kit-rename:focus-visible{transform:scale(1.12) rotate(-8deg)}
.kit-staged .kit-leaf{left:812px;top:44px;width:190px;animation:kit-leaf 5s ease-in-out infinite;transform-origin:10% 60%}
.kit-staged .kit-nav{left:26px;top:246px;width:204px;display:flex;flex-direction:column;gap:8px}
.kit-staged .kit-left-sign{left:36px;top:676px;width:178px}
.kit-staged .kit-compass{left:1318px;top:746px;width:222px}
.kit-staged .kit-foliage-left{left:-6px;bottom:-4px;width:150px;top:auto}
.kit-staged .kit-foliage-right{right:-18px;bottom:-6px;width:150px;top:auto}
.kit-hub .kit-foliage,.kit-hub .kit-compass,.kit-hub .kit-left-sign,.kit-hub .kit-leaf,.kit-hub .kit-board{pointer-events:none}

/* Sidebar buttons: kit art as the button face, live label on top. */
.kit-hub .kit-nav-button{position:relative;display:block;width:100%;aspect-ratio:2.5;border:0;padding:0;background:var(--kit-btn) center/100% 100% no-repeat;cursor:pointer;text-align:left;transition:transform .15s ease,filter .15s ease;filter:drop-shadow(0 3px 4px rgba(40,25,10,.2))}
.kit-hub .kit-nav-button span{position:absolute;left:45%;top:50%;transform:translateY(-54%);font:700 19px/1 var(--kit-body);color:#372921;white-space:nowrap}
.kit-hub .kit-nav-button:hover,.kit-hub .kit-nav-button:focus-visible{transform:translateX(5px) scale(1.03);filter:drop-shadow(0 6px 8px rgba(40,25,10,.3)) brightness(1.04)}
.kit-hub .kit-nav-button:active{transform:translateX(3px) scale(.98)}
.kit-hub .kit-nav-button:focus-visible{outline:3px solid #ffd23f;outline-offset:3px;border-radius:14px}

/* Mode cards. */
.kit-staged .kit-modes{left:0;top:0;width:0;height:0}
.kit-staged .kit-card{position:absolute;height:240px}
.kit-staged .kit-card-classic{left:258px;top:232px;width:305px}
.kit-staged .kit-card-homestead{left:577px;top:232px;width:295px}
.kit-staged .kit-card-build{left:886px;top:232px;width:312px}
.kit-staged .kit-card-friends{left:384px;top:486px;width:346px}
.kit-staged .kit-card-defend{left:744px;top:486px;width:342px}
.kit-hub .kit-card{display:block;padding:0;border:0;background:none;color:var(--kit-ink);text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .18s ease;filter:drop-shadow(0 6px 8px rgba(40,25,10,.28));-webkit-tap-highlight-color:transparent}
.kit-hub .kit-card img{display:block;width:100%;height:100%;object-fit:fill}
.kit-hub .kit-card-text{position:absolute;left:9%;right:19%;top:68.5%;bottom:5.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px}
.kit-hub .kit-card-text strong{font:700 23.5px/1.05 var(--kit-title);color:var(--kit-ink);-webkit-text-stroke:.55px var(--kit-ink);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.kit-hub .kit-card-text small{font:400 15px/1.2 var(--kit-body);color:var(--kit-ink-soft);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.kit-hub .kit-card:hover,.kit-hub .kit-card:focus-visible{transform:translateY(-6px) rotate(-.6deg) scale(1.035);filter:drop-shadow(0 14px 14px rgba(40,25,10,.32)) brightness(1.03);z-index:2}
.kit-hub .kit-card:active{transform:translateY(-1px) scale(.985)}
.kit-hub .kit-card:focus-visible{outline:4px solid #ffd23f;outline-offset:2px;border-radius:26px}
.kit-hub .kit-card-classic::after{content:'RANKED';position:absolute;left:-10px;top:-12px;padding:6px 12px 5px;border-radius:12px;background:#ff7a45;color:#fff;font:700 15px/1 var(--kit-title);letter-spacing:.06em;box-shadow:0 3px 0 #c24e22;transform:rotate(-8deg);animation:kit-pulse 2.4s ease-in-out infinite}

/* Announcement banner (owner editor) sits on the top edge of the board. */
.kit-staged .kit-announcement{left:420px;top:190px;width:640px;margin:0;z-index:2}
.kit-hub .kit-announcement{padding:8px 16px;border-radius:14px;background:#fff3c4;border:2px solid #e2b85c;font:700 16px/1.3 var(--kit-body);color:#5a3a21;text-align:center;box-shadow:0 3px 0 #d6a64a}

/* Player-options bar. */
.kit-staged .kit-player{left:290px;top:752px;width:900px;height:116px;display:block;margin:0;padding:0;border:0;background:none}
.kit-hub .kit-player-button{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;transition:transform .15s ease,filter .15s;filter:drop-shadow(0 4px 6px rgba(40,25,10,.2))}
.kit-hub .kit-player-button img{display:block;width:100%;height:100%;object-fit:fill}
.kit-hub .kit-player-text{position:absolute;left:14.5%;top:22%;display:flex;flex-direction:column;gap:6px}
.kit-hub .kit-player-text strong{font:700 25px/1 var(--kit-title);color:#172b2c;-webkit-text-stroke:.4px #172b2c}
.kit-hub .kit-player-text small{font:400 17px/1 var(--kit-body);color:#41605f}
.kit-hub .kit-player-button:hover,.kit-hub .kit-player-button:focus-visible{transform:translateY(-3px);filter:drop-shadow(0 8px 10px rgba(40,25,10,.28)) brightness(1.03)}
.kit-hub .kit-player-button:focus-visible{outline:4px solid #ffd23f;outline-offset:2px;border-radius:30px}
.kit-hub .kit-player .gift-menu-notice{position:absolute;left:40%;top:-20px;z-index:3;display:flex;align-items:center;gap:8px;max-width:420px;padding:8px 14px;border-radius:999px;background:#ffe681;border:2px solid #c79a2a;color:#4d3413;font:700 14px/1.2 var(--kit-body);text-decoration:none;box-shadow:0 3px 0 #c79a2a;animation:kit-pulse 2.4s ease-in-out infinite}
.kit-hub .kit-player .gift-menu-notice[hidden]{display:none}
.kit-hub .kit-player .gift-menu-notice img{width:22px;height:22px}

/* Leaderboard as a parchment note in a wooden frame. */
.quack-ui #welcome.kit-hub .kit-scores{min-width:0;max-width:none;margin:0;display:flex;flex-direction:column;padding:18px 18px 12px;border:7px solid var(--kit-wood);border-radius:22px;background:linear-gradient(180deg,#fffaf0,#fbefd4);box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 5px 0 var(--kit-wood-dark),0 14px 24px rgba(40,25,10,.3);color:var(--kit-ink);font-family:var(--kit-body);overflow:hidden}
.quack-ui #welcome.kit-hub.kit-staged .kit-scores{left:1262px;top:112px;width:320px;height:598px;max-height:none}
.quack-ui #welcome.kit-hub .kit-scores .board-title h2{font:700 30px/1.05 var(--kit-title);color:var(--kit-ink)}
.quack-ui #welcome.kit-hub .kit-scores .eyebrow{font:700 12px/1.2 var(--kit-body);letter-spacing:.12em;color:#9a6a3c}
.quack-ui #welcome.kit-hub .kit-scores .community-stats{margin:12px 0 10px;gap:8px}
.quack-ui #welcome.kit-hub .kit-scores .community-stats>div{padding:9px 10px;border:2px solid var(--kit-paper-edge);border-radius:12px;background:#fffdf6}
.quack-ui #welcome.kit-hub .kit-scores .community-stats strong{font:900 24px/1.1 var(--kit-body);color:var(--kit-ink)}
.quack-ui #welcome.kit-hub .kit-scores .community-stats span{font:700 11px/1.2 var(--kit-body);color:#7a5a3c;letter-spacing:.06em}
.quack-ui #welcome.kit-hub .kit-scores .board-filter{font:700 14px/1 var(--kit-body);color:#7a5a3c;gap:8px}
.quack-ui #welcome.kit-hub .kit-scores select{font:700 15px/1 var(--kit-body);border:2px solid var(--kit-paper-edge);border-radius:12px;background:#fffdf6;color:var(--kit-ink);min-height:40px}
.quack-ui #welcome.kit-hub .kit-scores .your-rank{margin:10px 0 6px;padding:9px 12px;border-radius:12px;background:#fff1c9;border:2px dashed #e2b85c;font:700 14px/1.3 var(--kit-body);color:#5a3a21}
.quack-ui #welcome.kit-hub .kit-scores .leaderboard-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;padding:0 2px 0 0}
.quack-ui #welcome.kit-hub .kit-scores .leader-row{border-bottom:1.5px dashed #ecd7ad;min-height:48px;padding:8px 6px}
.quack-ui #welcome.kit-hub .kit-scores .leader-name{font:700 16px/1.25 var(--kit-body);color:var(--kit-ink)}
.quack-ui #welcome.kit-hub .kit-scores .leader-score{font:900 16px/1 var(--kit-body);color:var(--kit-ink)}
.quack-ui #welcome.kit-hub .kit-scores .rank-number{background:#ffe07a;border:2px solid #d9a62b;color:#5a3a21;font:900 12px/1 var(--kit-body)}
.quack-ui #welcome.kit-hub .kit-scores .leader-row:nth-child(2) .rank-number{background:#e8eef2;border-color:#a9b6bf}
.quack-ui #welcome.kit-hub .kit-scores .leader-row:nth-child(3) .rank-number{background:#f3c7a0;border-color:#c2804a}
.quack-ui #welcome.kit-hub .kit-scores .leader-row.mine{background:#ffe681;border-radius:10px}
.quack-ui #welcome.kit-hub .kit-scores .tracking-note{margin:8px 0 0;padding-top:8px;border-top:1.5px dashed #ecd7ad;font:400 11.5px/1.35 var(--kit-body);color:#7a6a58}
.quack-ui #welcome.kit-hub .kit-scores .small-button{border:2px solid var(--kit-paper-edge);border-radius:12px;background:#fffdf6;color:#5e3a1f}
.kit-hub .kit-scores.kit-flash{animation:kit-flash 1.2s ease}

/* ---- Flow layout (phones and small windows) ----------------------------------------------- */
.quack-ui #welcome.kit-hub.kit-flow{display:block;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.quack-ui #welcome.kit-hub.kit-flow::after{content:'';position:fixed;left:0;right:0;top:0;height:calc(64px + env(safe-area-inset-top));background:linear-gradient(180deg,rgba(118,196,236,.96) 55%,rgba(118,196,236,0));pointer-events:none;z-index:1}
html[data-ui-theme=night] .quack-ui #welcome.kit-hub.kit-flow::after{background:linear-gradient(180deg,rgba(28,48,74,.95) 55%,rgba(28,48,74,0))}
.kit-flow .kit-stage{width:auto;height:auto;max-width:980px;margin:0 auto;padding:calc(62px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:14px}
.kit-flow .kit-logo{order:1}.kit-flow .kit-welcome{order:2}.kit-flow .kit-announcement{order:3}.kit-flow .kit-modes{order:4}.kit-flow .kit-player{order:5}.kit-flow .kit-nav{order:6}.kit-flow .kit-scores{order:7}
.kit-flow .kit-stage>*{position:relative}
.kit-flow :is(.kit-board,.kit-leaf,.kit-left-sign,.kit-compass,.kit-foliage){display:none}
.kit-flow .kit-logo{width:min(330px,74vw);margin:0}
@media (min-width:640px){.kit-flow .kit-logo{width:min(300px,38vw)}.kit-flow .kit-welcome{width:min(320px,44vw)}}
@media (max-height:520px){.kit-flow .kit-stage{padding-top:calc(54px + env(safe-area-inset-top))}.kit-flow .kit-logo{width:min(230px,34vw)}.kit-flow .kit-welcome{width:min(270px,40vw)}}
.kit-flow .kit-welcome{width:min(330px,88vw);aspect-ratio:342/250;margin:-6px 0 -4px;display:block;flex:none}
.kit-flow .kit-welcome h2{font-size:clamp(28px,9vw,38px)}
.kit-flow .kit-welcome .eyebrow{font-size:clamp(14px,4.4vw,18px)}
.kit-flow .kit-modes{width:100%;flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:18px;border-radius:26px;background:url('/assets/ui/menu/board.webp') center/100% 100% no-repeat;filter:drop-shadow(0 8px 14px rgba(40,25,10,.3))}
.kit-flow .kit-card{position:relative;flex:1 1 260px;max-width:360px;aspect-ratio:390/307;filter:drop-shadow(0 4px 6px rgba(40,25,10,.25))}
.kit-flow .kit-card-text strong{font-size:clamp(19px,5.6vw,24px)}
.kit-flow .kit-card-text small{font-size:clamp(12.5px,3.6vw,15px)}
.kit-flow .kit-card-classic::after{left:4px;top:-8px}
.kit-flow .kit-announcement{width:100%}
.kit-flow .kit-player{width:100%;margin:0;padding:0;border:0;background:none}
.kit-flow .kit-player-button{height:76px;border-radius:22px;background:var(--kit-paper);border:3px solid var(--kit-paper-edge);box-shadow:0 4px 0 #d9b77c;padding:0 18px 0 96px;overflow:hidden}
.kit-flow .kit-player-button img{position:absolute;left:4px;top:50%;width:auto;height:88px;aspect-ratio:1;object-fit:cover;object-position:4% 50%;transform:translateY(-50%);clip-path:circle(33% at 50% 50%)}
.kit-flow .kit-player-text{position:static;height:100%;justify-content:center}
.kit-flow .kit-player-text strong{font-size:22px}
.kit-flow .kit-player-text small{font-size:15px}
.kit-flow .kit-player .gift-menu-notice{position:relative;left:auto;top:auto;margin:0 0 8px;max-width:none}
.kit-flow .kit-nav{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.kit-flow .kit-nav-button{width:calc(50% - 5px);max-width:230px}
.kit-flow .kit-nav-button span{font-size:clamp(15px,4.2vw,19px)}
.quack-ui #welcome.kit-hub.kit-flow .kit-scores{width:100%;height:auto;max-height:none}
.quack-ui #welcome.kit-hub.kit-flow .kit-scores .leaderboard-list{max-height:420px}
@media (min-width:700px){.kit-flow .kit-nav-button{width:calc(20% - 8px);min-width:150px}.kit-flow .kit-nav-button span{font-size:16px}}

/* ---- Kit dialogs (Stats, Player options, What's new) ------------------------------------ */
.quack-ui .kit-dialog{padding:0;border:0;background:none;max-width:min(560px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);overflow:visible;color:var(--kit-ink);font-family:var(--kit-body)}
.quack-ui .kit-dialog::backdrop{background:rgba(20,40,34,.55);backdrop-filter:blur(3px)}
.quack-ui .kit-dialog[open]{animation:kit-pop .22s cubic-bezier(.3,1.5,.5,1)}
.quack-ui .kit-dialog-card{position:relative;margin:0;padding:26px 26px 22px;max-height:calc(100dvh - 24px);overflow:auto;border:8px solid var(--kit-wood);border-radius:26px;background:linear-gradient(180deg,#fffaf0,#fbefd4);box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 6px 0 var(--kit-wood-dark),0 20px 40px rgba(20,15,5,.4)}
.quack-ui .kit-dialog .eyebrow{display:block;font:700 12px/1.2 var(--kit-body);letter-spacing:.14em;color:#9a6a3c}
.quack-ui .kit-dialog h2{margin:4px 0 16px;font:700 34px/1.05 var(--kit-title);color:var(--kit-ink)}
.quack-ui .kit-close{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:2px solid var(--kit-paper-edge);background:#fffdf6;color:#5e3a1f;font:700 24px/1 var(--kit-body);cursor:pointer;display:grid;place-items:center;padding:0}
.quack-ui .kit-close:hover,.quack-ui .kit-close:focus-visible{background:#ffe681}
.quack-ui .kit-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.quack-ui .kit-stat-grid>div{padding:12px 14px;border:2px solid var(--kit-paper-edge);border-radius:14px;background:#fffdf6}
.quack-ui .kit-stat-grid strong{display:block;font:900 26px/1.1 var(--kit-body);color:var(--kit-ink)}
.quack-ui .kit-stat-grid span{display:block;margin-top:3px;font:700 12px/1.2 var(--kit-body);color:#7a5a3c;letter-spacing:.04em;text-transform:uppercase}
.quack-ui .kit-dialog-note{margin:14px 0 0;font:400 15px/1.45 var(--kit-body);color:#5a4a3a}
.quack-ui .kit-dialog-actions{display:flex;justify-content:flex-end;margin-top:16px}
.quack-ui .kit-pill{min-height:46px;padding:0 20px;border-radius:999px;border:0;background:#ffd23f;color:#3b2a10;font:700 17px/1 var(--kit-title);box-shadow:0 4px 0 #c79a2a;cursor:pointer}
.quack-ui .kit-pill:hover,.quack-ui .kit-pill:focus-visible{background:#ffe070}
.quack-ui .kit-option-list{display:grid;gap:10px}
.quack-ui .kit-option{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:62px;padding:12px 16px;border-radius:16px;border:2px solid var(--kit-paper-edge);background:#fffdf6;color:var(--kit-ink);text-align:left;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 #e4c48a;transition:transform .12s}
.quack-ui .kit-option strong{font:700 20px/1.1 var(--kit-title)}
.quack-ui .kit-option span{font:400 14px/1.3 var(--kit-body);color:#6a5a48}
.quack-ui .kit-option:hover,.quack-ui .kit-option:focus-visible{transform:translateX(4px);background:#fff4d2}
.quack-ui .kit-news-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.quack-ui .kit-news-list li{display:grid;grid-template-columns:112px 1fr;gap:14px;align-items:center;padding:10px;border-radius:16px;background:#fffdf6;border:2px solid var(--kit-paper-edge)}
.quack-ui .kit-news-list img{width:112px;height:76px;object-fit:cover;border-radius:12px}
.quack-ui .kit-news-list strong{font:700 19px/1.15 var(--kit-title);color:var(--kit-ink)}
.quack-ui .kit-news-list p{margin:4px 0 0;font:400 14px/1.4 var(--kit-body);color:#5a4a3a}
@media (max-width:480px){.quack-ui .kit-news-list li{grid-template-columns:78px 1fr}.quack-ui .kit-news-list img{width:78px;height:60px}.quack-ui .kit-dialog h2{font-size:28px}.quack-ui .kit-dialog-card{padding:22px 16px 18px}}

/* ---- Mode dialog & name screen pick up the kit look ------------------------------------- */
body.kit-menu .mode-dialog{border:8px solid var(--kit-wood);border-radius:26px;background:linear-gradient(180deg,#fffaf0,#fbefd4);box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 6px 0 var(--kit-wood-dark),0 22px 44px rgba(20,15,5,.45)}
body.kit-menu .mode-dialog::backdrop{background:rgba(20,40,34,.55);backdrop-filter:blur(3px)}
body.kit-menu .mode-dialog h1,body.kit-menu #name-screen h2{font-family:var(--kit-title);font-weight:700}
body.kit-menu .mode-dialog .play-button{font-family:var(--kit-title);font-weight:700}

/* First launch: the name card sits on the same painted lake, in a wooden frame. */
body.kit-menu:has(#name-screen:not(.hidden)):not(.playing) #lobby-background{display:block!important;background:#8fd0ee url('/assets/ui/menu/menu-scenery-small.webp') center 35%/cover no-repeat!important;opacity:1!important}
@media (min-width:901px){body.kit-menu:has(#name-screen:not(.hidden)):not(.playing) #lobby-background{background-image:url('/assets/ui/menu/menu-scenery.webp')!important}}
html[data-ui-theme=night] body.kit-menu:has(#name-screen:not(.hidden)):not(.playing) #lobby-background{filter:brightness(.52) saturate(.85) hue-rotate(12deg)}
html:not([data-ui-theme=night]) body.kit-menu #name-screen .name-card{border:8px solid var(--kit-wood);border-radius:26px;background:linear-gradient(180deg,#fffaf0,#fbefd4);box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 6px 0 var(--kit-wood-dark),0 22px 44px rgba(20,15,5,.45)}
html:not([data-ui-theme=night]) body.kit-menu #name-screen .name-card h2{font:700 36px/1.05 var(--kit-title);color:var(--kit-ink);letter-spacing:0}
html:not([data-ui-theme=night]) body.kit-menu #name-screen .name-card .eyebrow{color:#9a6a3c}

/* ---- Night UI: dusk over the lake ---------------------------------------------------------- */
html[data-ui-theme=night] .kit-hub .kit-sky{filter:brightness(.52) saturate(.85) hue-rotate(12deg)}
html[data-ui-theme=night] .kit-hub .kit-sky::after{background:radial-gradient(ellipse at 70% 10%,rgba(255,230,160,.18),transparent 40%),linear-gradient(180deg,rgba(20,30,70,.35),rgba(10,20,40,.35))}
html[data-ui-theme=night] .kit-hub :is(.kit-board,.kit-logo img,.kit-welcome-board,.kit-leaf,.kit-left-sign,.kit-compass,.kit-foliage){filter:brightness(.82) saturate(.95)}

/* Night UI must not repaint the kit's paper and wood: restore day colours inside the menu. */
html[data-ui-theme=night] .quack-ui :is(#welcome.kit-hub,.kit-dialog){--ui-ink:#123f36;--ink:#123f36;--ui-paper:#fffbea;--ui-soft:#fff4d2;--ui-edge:#e9cf9c;color:var(--kit-ink);color-scheme:light}
html[data-ui-theme=night] .quack-ui :is(#welcome.kit-hub,.kit-dialog) :is(h1,h2,h3,strong){color:var(--kit-ink)}
html[data-ui-theme=night] .quack-ui #welcome.kit-hub .kit-welcome .eyebrow{color:#452a1d}
html[data-ui-theme=night] .quack-ui :is(#welcome.kit-hub .kit-scores,.kit-dialog) .eyebrow{color:#9a6a3c}
html[data-ui-theme=night] .quack-ui #welcome.kit-hub .kit-nav-button{background:var(--kit-btn) center/100% 100% no-repeat;border:0;color:#372921}
html[data-ui-theme=night] .quack-ui #welcome.kit-hub :is(.kit-card,.kit-player-button){background:none;border:0;color:var(--kit-ink)}
html[data-ui-theme=night] .quack-ui #welcome.kit-hub.kit-flow .kit-player-button{background:var(--kit-paper);border:3px solid var(--kit-paper-edge)}
html[data-ui-theme=night] .quack-ui :is(#welcome.kit-hub,.kit-dialog) :is(.kit-rename,.kit-close,.small-button){background:#fffdf3;color:#5e3a1f;border-color:#c79a5e}
html[data-ui-theme=night] .quack-ui .kit-dialog .kit-option{background:#fffdf6;color:var(--kit-ink);border-color:var(--kit-paper-edge)}
html[data-ui-theme=night] .quack-ui .kit-dialog .kit-pill{background:#ffd23f;color:#3b2a10}
html[data-ui-theme=night] .quack-ui #welcome.kit-hub .kit-scores .leader-row{border-color:#ecd7ad}

/* ---- Motion -------------------------------------------------------------------------------- */
@keyframes kit-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-.6deg)}}
@keyframes kit-swing{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
@keyframes kit-leaf{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes kit-pulse{0%,100%{scale:1}50%{scale:1.07}}
@keyframes kit-flash{0%{box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 0 0 0 #ffd23f}35%{box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 0 0 10px #ffd23f}100%{box-shadow:inset 0 0 0 2px var(--kit-paper-edge),0 5px 0 var(--kit-wood-dark),0 14px 24px rgba(40,25,10,.3)}}
@keyframes kit-pop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kit-hub *,.kit-dialog{animation:none!important;transition:none!important}}

/* Keep the pencil comfortable to tap without changing the supplied sign artwork. */
.kit-hub .kit-rename{width:44px;height:44px}

/* Fit the supplied vector logo in the existing desktop masthead. */
.kit-staged .kit-logo{height:220px}
.kit-staged .kit-logo img{height:100%;object-fit:contain}

/* Each supplied card retains its own native proportions, including on phones. */
.kit-card-classic{--card-ratio:1170 / 921}
.kit-card-homestead{--card-ratio:1134 / 924}
.kit-card-build{--card-ratio:1197 / 921}
.kit-card-friends{--card-ratio:1353 / 939}
.kit-card-defend{--card-ratio:1338 / 939}
.kit-flow .kit-card{aspect-ratio:var(--card-ratio);align-self:center}
.kit-hub .kit-card img{object-fit:contain}

/* Compact phone composition: paired masthead, two cards per row, centered finale. */
@media(max-width:700px){
 .kit-flow .kit-stage{gap:12px 8px;padding-top:calc(62px + env(safe-area-inset-top));padding-left:10px;padding-right:10px}
 .kit-flow .kit-logo{width:43%;flex:0 0 43%;margin:0}
 .kit-flow .kit-welcome{width:54%;flex:0 0 54%;margin:0}
 .kit-flow .kit-welcome h2{font-size:clamp(16px,4.6vw,25px);margin-top:5px;-webkit-text-stroke:0}
 .kit-flow .kit-welcome .eyebrow{font-size:clamp(8px,2.15vw,13px);letter-spacing:0}
 .kit-flow .kit-rename{right:12px;bottom:10px;width:32px;height:32px;font-size:14px}
 .kit-flow .kit-rename::after{content:'';position:absolute;inset:-6px}
 .kit-flow .kit-modes{gap:14px 10px;padding:15px 8px 12px;align-items:center}
 .kit-flow .kit-card{flex:0 0 calc(50% - 5px);width:calc(50% - 5px);min-width:0;max-width:none}
 .kit-flow .kit-card-defend{flex-basis:58%;width:58%}
 .kit-flow .kit-card-text{left:7%;right:17%;gap:2px}
 .kit-flow .kit-card-text strong{font-size:clamp(11px,3.05vw,20px);-webkit-text-stroke:0;line-height:1.1}
 .kit-flow .kit-card-text small{font-size:clamp(9px,2.35vw,15px);line-height:1.15}
 .kit-flow .kit-card-classic::after{font-size:11px;padding:4px 8px;left:0;top:-6px}
}
#session-loading{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:18px;background:#242629;color:#f1f2f3;text-align:center;font:700 19px/1.4 var(--kit-body)}
#session-loading[hidden]{display:none}
#session-loading img{width:min(230px,55vw);height:auto}
#session-loading p{margin:0;padding:10px 18px;background:transparent}
.session-spinner{width:42px;height:42px;border:5px solid #fff8e7;border-top-color:#efaa24;border-radius:50%;animation:session-spin .8s linear infinite}
@keyframes session-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.session-spinner{animation:none}}