html,body{min-height:100%;margin:0}*,*:before,*:after{box-sizing:border-box}body{display:flex;flex-direction:column;align-items:center;min-height:100dvh;box-sizing:border-box;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));background:#fff;color:#0f172a;font-family:system-ui,sans-serif;overflow-x:hidden}a{color:#1d4ed8;text-shadow:none}.app-icon{width:1em;height:1em;vertical-align:middle;margin-right:.15em}body.dark .app-icon{filter:invert(1) brightness(1.08) drop-shadow(0 0 2px rgba(255,255,255,.45))}.app-title{margin:0;font-size:clamp(28px,5.2vmin,56px);font-weight:800;line-height:1;letter-spacing:.02em;position:relative;z-index:2}.app-title a{text-decoration:none}.room-header{margin:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;position:relative;z-index:2;text-align:center}.room-header a{font-size:clamp(12px,1.8vmin,16px);font-weight:600;text-decoration:underline;text-underline-offset:.15em}.room-current{margin:0;font-size:clamp(12px,1.8vmin,16px);font-weight:600;color:#334155;text-shadow:none;position:relative;z-index:2;text-align:center}.room-links{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:clamp(13px,2vmin,18px);font-weight:600;position:relative;z-index:2;text-align:center}.room-qr-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.room-links>a{text-decoration:underline;text-underline-offset:.15em}.room-qr-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:1px solid #cbd5e1;border-radius:12px;background:#fffffff5;box-shadow:0 8px 24px #0f172a14;cursor:pointer;user-select:none}.room-qr-card.is-collapsed{padding:12px 8px}.room-qr-title{margin:0;font-size:.72em;font-weight:700;color:#334155}.room-qr{width:200px;height:200px;display:block;background:#fff;border-radius:0;image-rendering:pixelated}.room-qr-collapsed-label{display:none;align-items:center;justify-content:center;width:200px;height:56px;margin:0;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:#0f172a;font-size:.86em;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.room-qr-card.is-collapsed .room-qr,.room-qr-card.is-collapsed .room-qr-title,.room-qr-card.is-collapsed .room-link-status{display:none}.room-qr-card.is-collapsed .room-qr-collapsed-label{display:flex}.room-links span{color:#334155cc}.room-link-status{min-width:58px;color:#166534;font-size:.78em;text-shadow:none;margin:0}.room-link-status.error{color:#b91c1c}.name-form{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:10px;margin-top:4px;width:min(100%,520px);box-sizing:border-box;border-radius:12px;background:#fffffff0;border:1px solid #cbd5e1;box-shadow:0 8px 24px #0f172a14;backdrop-filter:blur(6px);position:relative;z-index:2}.controls-row{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.controls-row-main{flex-wrap:nowrap}.controls-row-secondary{justify-content:center}.name-form label{font-size:14px;font-weight:600;color:#334155}.name-form input{width:auto;min-width:0;max-width:220px;flex:1 1 220px;padding:10px 12px;border:1px solid #64748b;border-radius:10px;background:#f8fafcf5;color:#0f172a;font-size:16px}.name-form input[type=color]{width:44px;flex:0 0 auto;min-width:44px;height:44px;padding:2px;border-radius:10px;border:1px solid #64748b;background:#f8fafcf5}.name-form button{padding:10px 12px;border:0;border-radius:10px;background:#0ea5e9;color:#f8fafc;font-weight:700;font-size:14px}.name-form button:active{transform:translateY(1px)}.dark-mode-toggle,.wake-lock-toggle{width:44px;flex:0 0 auto;min-width:44px;height:44px;padding:2px;border:1px solid #64748b;border-radius:10px;background:#f8fafcf5;font-size:22px;line-height:1;cursor:pointer}.wake-lock-toggle.is-on{box-shadow:0 0 0 2px #0ea5e94d}.clean-mode-toggle{flex:0 0 auto;min-width:72px;height:44px;padding:0 10px;border:1px solid #64748b;border-radius:10px;background:#f8fafcf5;color:#0f172a;font-size:13px;font-weight:800;cursor:pointer}body.dark .dark-mode-toggle,body.dark .wake-lock-toggle{background:#0f172a;border-color:#475569}body.dark .wake-lock-toggle.is-on{box-shadow:0 0 0 2px #38bdf866}body.dark .clean-mode-toggle{background:#0f172a;border-color:#475569;color:#f1f5f9}body.clean-mode{gap:0;padding:0}body.clean-mode .app-title,body.clean-mode .room-header,body.clean-mode #room-links,body.clean-mode #debug-info,body.clean-mode #friends-panel,body.clean-mode #lobby-buttons{display:none!important}body.clean-mode #name-form{position:fixed;top:max(8px,env(safe-area-inset-top));right:8px;margin:0;padding:0;width:auto;border:0;background:transparent;box-shadow:none;backdrop-filter:none;z-index:10}body.clean-mode .controls-row-main{gap:0}body.clean-mode .controls-row-main>:not(.clean-mode-toggle),body.clean-mode .controls-row-secondary{display:none!important}body.clean-mode #content{width:100vw;min-height:100dvh}body.clean-mode .arrow{width:min(98cqw,98cqh)}#content{position:relative;width:100%;flex:1 1 auto;min-height:220px;display:block;overflow:hidden;pointer-events:auto;z-index:1;container-type:size}.is-hidden{display:none!important}.wake-lock-toast{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%,18px);z-index:40;max-width:min(92vw,420px);padding:10px 14px;border:1px solid #cbd5e1;border-radius:12px;background:#fffffff5;color:#0f172a;font-size:13px;font-weight:700;text-align:center;box-shadow:0 12px 28px #0f172a38;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.wake-lock-toast.is-visible{opacity:1;transform:translate(-50%)}#lobby-buttons{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:2}.start-room-button{min-width:220px;padding:18px 36px;border:0;border-radius:16px;background:linear-gradient(180deg,#22c55e,#16a34a);color:#f8fafc;font-size:clamp(22px,4.2vmin,36px);font-weight:800;letter-spacing:.02em;box-shadow:0 16px 32px #16a34a59;cursor:pointer}.start-room-button:active{transform:translateY(2px)}.resume-room-button{min-width:220px;padding:18px 36px;border:0;border-radius:16px;background:linear-gradient(180deg,#3b82f6,#2563eb);color:#f8fafc;font-size:clamp(22px,4.2vmin,36px);font-weight:800;letter-spacing:.02em;box-shadow:0 16px 32px #2563eb59;cursor:pointer}.resume-room-button:active{transform:translateY(2px)}.friends-toggle{padding:6px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fffffff0;color:#0f172a;font-size:12px;font-weight:700;cursor:pointer}.name-form .friends-toggle{color:#0f172a}.controls-row-secondary .friends-toggle{min-width:130px}.friends-toggle:disabled{cursor:not-allowed;opacity:.75}.friends-toggle.compass-required{border:2px solid #ef4444;box-shadow:0 0 0 1px #ef444459}.friends-toggle.compass-error{border:2px solid #f97316;background:#ffedd5f5;color:#7c2d12}.friends-panel{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:min(44vw,280px);max-height:calc(100% - 12px);overflow:auto;padding:8px;border-radius:10px;background:#fffffff0;border:1px solid #cbd5e1;box-shadow:0 10px 28px #0f172a1a;backdrop-filter:blur(6px);z-index:3}.friends-panel.is-hidden{display:none}.friends-panel h3{margin:0 0 6px;font-size:14px;font-weight:700}.friend-row{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;margin-bottom:6px;font-size:13px}.friend-name-badge{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;padding:5px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.35);font-weight:700;text-shadow:none}.friend-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friend-presence-status{flex:0 0 auto;font-size:13px;line-height:1}.friend-drag-handle{width:24px;height:24px;border:1px solid #cbd5e1;border-radius:6px;background:#fffffff5;color:#334155;font-size:14px;font-weight:700;line-height:1;cursor:grab;touch-action:none}.friend-drag-handle:active{cursor:grabbing}.friend-row.drag-over-before{box-shadow:inset 0 2px #3b82f6e6}.friend-row.drag-over-after{box-shadow:inset 0 -2px #3b82f6e6}.friend-row.is-dragging{opacity:.55}.arrow{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(80cqw,84cqh);aspect-ratio:1;transform:rotate(0);user-select:none;pointer-events:none;z-index:1;color:#fff;opacity:1;transition:opacity .2s ease-out,filter .22s ease-out}.arrow-img{width:100%;height:100%;background-color:currentColor;background-image:none;-webkit-mask-image:url(/north-star/image.png);mask-image:url(/north-star/image.png);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;filter:drop-shadow(0 0 8px rgba(0,0,0,.35));transition:opacity .22s ease-out,filter .26s ease-out,background-image .26s ease-out}.arrow-label-anchor{position:absolute;top:4%;left:50%;translate:-50% -50%;width:0;height:0}.arrow.is-online,.arrow.is-online .arrow-img{opacity:1}.arrow.is-recent-offline{opacity:.58}.arrow.is-recent-offline .arrow-img{opacity:.75;filter:drop-shadow(0 0 4px rgba(0,0,0,.22))}.arrow.is-recent-offline .arrow-label{opacity:.84}.arrow.is-stale-offline{opacity:.42}.arrow.is-stale-offline .arrow-img{opacity:.55;background-color:transparent;background-image:linear-gradient(to top,transparent 0%,transparent 28%,currentColor 68%,currentColor 100%);filter:drop-shadow(0 0 2px rgba(0,0,0,.12))}.arrow.is-stale-offline .arrow-label{opacity:.6}.arrow-label{position:absolute;top:0;left:0;translate:-50% -50%;font-family:system-ui,sans-serif;font-size:clamp(18px,3vmin,34px);font-weight:600;line-height:1;white-space:nowrap;color:#fff;-webkit-text-stroke:.25px rgba(0,0,0,.9);text-shadow:0 1px 3px rgba(0,0,0,.85)}#debug-info{position:relative;margin:0;width:min(100%,720px);padding:6px 10px;border-radius:10px;background:#f8fafcf5;color:#334155;border:1px solid #cbd5e1;text-shadow:none;z-index:2;text-align:center;font-size:clamp(12px,1.8vmin,14px)}#debug{margin:0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:inherit;font-weight:400;line-height:1.35}#attributions{margin:4px 0 0;font-size:inherit;font-weight:400;line-height:1.35}#debug a,#attributions a{text-decoration:underline;text-underline-offset:.15em}.hint{position:fixed;bottom:16px;left:50%;transform:translate(-50%);font-size:14px;color:#94a3b8}body.dark{background:#0f172a;color:#f1f5f9}body.dark a{color:#60a5fa}body.dark .room-current{color:#94a3b8}body.dark .wake-lock-toast{background:#1e293bf7;border-color:#475569;color:#f1f5f9}body.dark .room-qr-card{background:#1e293b;border-color:#334155}body.dark .room-qr-title{color:#94a3b8}body.dark .room-qr{background:#1e293b;filter:invert(1)}body.dark .name-form{background:#1e293bf5;border-color:#334155}body.dark .name-form label{color:#94a3b8}body.dark .name-form input{background:#0f172a;border-color:#475569;color:#f1f5f9}body.dark .name-form input[type=color]{background:#0f172a;border-color:#475569}body.dark .friends-toggle{background:#1e293bf5;border-color:#94a3b8;color:#f1f5f9;box-shadow:inset 0 0 0 1px #94a3b84d}body.dark #friends-toggle{background:linear-gradient(180deg,#1d4ed8,#1e3a8a);border:2px solid #93c5fd;color:#eff6ff;box-shadow:0 0 0 1px #93c5fd59,0 8px 18px #1e3a8a73}body.dark #friends-toggle:active{transform:translateY(1px)}body.dark.clean-mode .clean-mode-toggle{background:#f8fafc;border:2px solid #38bdf8;color:#0f172a;box-shadow:0 6px 18px #0f172a73}body.dark .friends-toggle.compass-error{background:#7c2d12d9}body.dark .friends-panel{background:#1e293bf5;border-color:#334155}body.dark .start-room-button{background:linear-gradient(180deg,#16a34a,#15803d);box-shadow:0 14px 28px #16a34a4d}body.dark .resume-room-button{background:linear-gradient(180deg,#2563eb,#1d4ed8);box-shadow:0 14px 28px #2563eb4d}body.dark .friend-drag-handle{background:#0f172a;border-color:#475569;color:#94a3b8}body.dark #debug{background:transparent;color:#94a3b8;border:0;box-shadow:none}body.dark #debug a{color:#60a5fa;outline:none;box-shadow:none}body.dark #debug a:focus-visible{outline:2px solid #38bdf8;outline-offset:2px;border-radius:4px}body.dark .arrow-img{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.5))}body.dark .arrow.is-recent-offline .arrow-img{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,255,255,.35))}body.dark .arrow.is-stale-offline .arrow-img{filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}body.dark .arrow-label{-webkit-text-stroke:.25px rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.95)}@media (max-width: 720px){.controls-row-main{flex-wrap:wrap}.controls-row-main #self-name-input{flex-basis:100%;max-width:100%}.friends-panel{width:min(88vw,320px);right:6px;top:6px;transform:none;max-height:calc(100% - 12px);padding:6px}.friend-row{grid-template-columns:auto auto minmax(0,1fr);gap:6px}.friend-drag-handle{width:22px;height:22px;font-size:12px}}