.bottom-nav{position:fixed;bottom:0;left:50vw;transform:translateX(-50%);width:min(100vw,640px);display:flex;padding:10px 24px calc(10px + env(safe-area-inset-bottom));background:#ede5f7;border-top:1px solid transparent;z-index:40;box-sizing:border-box}.bottom-nav button{flex:1;border:0;border-radius:14px;background:transparent;color:#7954a3;font:inherit;font-size:14px;font-weight:800;padding:13px 0}.bottom-nav button[aria-current=page]{background:transparent;color:var(--lime,#d5f66a)}.bottom-nav button[aria-current=page] svg{stroke-width:2.8;filter:drop-shadow(0 1px 2px #7954a399) drop-shadow(0 0 4px #7954a380)}.camera-open .bottom-nav,.pk-active .bottom-nav{display:none}#home{padding-bottom:100px}#friends-page,#ranking-page,#me-page{min-height:65vh}#friend-add{display:flex;gap:8px}#friend-add input{min-width:0;flex:1;border:1px solid #7954a3;border-radius:12px;padding:12px;background:#fff8}#friend-add button,.pk-dialog button{border:1px solid #7954a3;border-radius:12px;padding:12px;color:#684891;background:#d5f66a;font:inherit}.pk-dialog{width:min(88vw,420px);box-sizing:border-box;border:2px solid #7954a3;border-radius:24px;padding:24px;background:#ede5f7;color:#33233d}.pk-dialog::backdrop{background:#22152d99}.pk-dialog button{display:block;width:100%;margin-top:12px}.pk-dialog p{line-height:1.6}#pk-hud{position:fixed;right:8px;top:8px;width:32vw;max-width:220px;z-index:55;border:2px solid #7954a3;border-radius:14px;background:#ede5f7;padding:6px;color:#49335d;font-size:12px}#pk-hud[hidden]{display:none}#pk-remote{display:block;width:100%;aspect-ratio:9/16;object-fit:contain;background:#302739;border-radius:9px}#pk-peer-status{margin:6px 0}.pk-controls{display:flex;flex-wrap:wrap;gap:4px}.pk-controls button{flex:1;font:inherit;padding:7px 3px;border:1px solid #7954a3;border-radius:8px;background:#e2d5f1;color:#49335d}#friend-list .board-row{grid-template-columns:1fr 1fr auto}#friend-list button{padding:8px;border-radius:10px;background:#d5f66a;border:1px solid #7954a3;color:#684891}
/* Four primary destinations share the existing brand colours and safe area. */
.bottom-nav{box-shadow:0 -5px 22px #7954a310;gap:4px;padding-top:2px;padding-bottom:calc(2px + env(safe-area-inset-bottom))}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:44px;padding:0 2px;position:relative;isolation:isolate;line-height:1.2;cursor:pointer}
.bottom-nav svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom-nav button:focus-visible{outline:2px solid #7954a3;outline-offset:1px}
#home{padding-bottom:calc(69px + env(safe-area-inset-bottom))}
#friends-page,#ranking-page,#me-page{padding-top:12px}
#me-page>h2{color:#7954a3}#me-page #account-status{position:static;display:block;margin:16px 0}#my-friend-code{overflow-wrap:anywhere}
#home>[hidden]{display:none!important}
/* PK keeps the ordinary game viewport. The peer sits in a lower-left call tile. */
body.pk-active #play{width:100%;height:100dvh;inset:0;padding:0}
body.pk-active #arena{max-height:none}
body.pk-active #try-stage{display:none!important}
body.pk-active #pk-hud{position:fixed;left:8px;right:auto;top:auto;bottom:calc(86px + env(safe-area-inset-bottom));width:clamp(96px,26vw,140px);max-width:140px;padding:0;border:2px solid #b79bce;border-radius:16px;background:#201a2c;color:#fff;overflow:visible;z-index:55;box-shadow:0 4px 16px #0005}
#pk-remote{position:relative!important;inset:auto!important;transform:none!important;display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:14px;opacity:1;background:#201a2c}
#pk-peer-label{position:absolute;left:5px;top:5px;background:#201a2caa;border-radius:5px;padding:3px;font-size:10px;pointer-events:none}
#pk-status{position:absolute;left:0;bottom:calc(100% + 7px);width:max-content;max-width:calc(100vw - 24px);border-radius:9px;background:#302739dd;padding:5px 8px;color:#fff;font-size:11px}
#pk-peer-status{position:absolute;bottom:3px;left:3px;right:3px;margin:0;padding:3px;background:#201a2cbb;border-radius:5px;font-size:9px;text-align:center}
#pk-connection{position:absolute;top:calc(100% + 3px);left:0;width:160px;font-size:10px;text-shadow:0 1px 3px #000;background:#201a2cbb;border-radius:4px;padding:2px}
.pk-controls{position:absolute;left:0;top:calc(100% + 25px);display:flex;gap:4px;width:280px;max-width:calc(100vw - 20px)}
.pk-controls button{flex:1;padding:7px 2px;min-height:32px;font-size:10px;line-height:1.2;border:1px solid #b79bce;border-radius:8px;color:#fff;background:#49335de8}
.pk-dialog{max-height:90dvh;overflow:auto}.pk-dialog h2{font-size:23px}
#pk-round-result{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#38254fee;color:#fff;pointer-events:auto;text-align:center;overflow:hidden;animation:pk-result-in .45s cubic-bezier(.2,1.6,.4,1)}
#pk-round-result strong{font-size:clamp(42px,12vw,90px);color:#d5f66a;text-shadow:0 5px 0 #7954a3;animation:pk-result-pop .8s cubic-bezier(.15,1.6,.4,1)}
#pk-round-result[data-outcome=lose] strong{color:#ffc6ae}#pk-round-result[data-outcome=tie] strong{color:#a5e3f3}
#pk-round-result small{font-size:18px}#pk-round-result p{font-size:24px;font-weight:800}
#pk-round-result::before{content:'';position:absolute;width:70vmin;height:70vmin;border:12px solid #d5f66a55;border-radius:50%;animation:pk-result-ring 1.4s ease-out infinite;pointer-events:none}
@keyframes pk-result-in{from{opacity:0}to{opacity:1}}@keyframes pk-result-pop{from{transform:scale(.3) rotate(-8deg)}to{transform:scale(1) rotate(0)}}@keyframes pk-result-ring{from{transform:scale(.6);opacity:.8}to{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){#pk-round-result,#pk-round-result strong,#pk-round-result::before{animation:none}}
#pk-peer-label,#pk-peer-status,#pk-status,#pk-connection,.pk-controls{z-index:2}

body.pk-active #pk-hud.pk-preparing{bottom:calc(154px + env(safe-area-inset-bottom))}

/* Rounded sliding call switches, with a full 44px touch target. */
.pk-controls{width:320px}
.pk-controls .pk-toggle,.pk-dialog .pk-toggle{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:44px;padding:6px 8px;cursor:pointer;touch-action:manipulation}
.pk-controls .pk-toggle{flex:0 0 auto;background:#49335de8;font-size:11px}
.pk-toggle-track{display:block;position:relative;flex:0 0 38px;width:38px;height:22px;border-radius:99px;background:#a59eae;box-shadow:inset 0 0 0 1px #0000000a;transition:background .18s ease}
.pk-toggle-track::after{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px #0003;transition:transform .18s ease}
.pk-toggle[aria-checked=true] .pk-toggle-track{background:#1677ff}
.pk-toggle[aria-checked=true] .pk-toggle-track::after{transform:translateX(16px)}
.pk-toggle:focus-visible{outline:3px solid #d5f66a;outline-offset:2px}
.pk-dialog .pk-toggle{background:#e2d5f1;font-size:16px;padding:10px 14px}
@media(prefers-reduced-motion:reduce){.pk-toggle-track,.pk-toggle-track::after{transition:none}}

/* Compact auxiliary entry beside the help icon. */
#pk-settings{position:fixed;left:auto;right:62px;top:calc(16px + env(safe-area-inset-top));bottom:auto;width:36px;color:#30263f;z-index:3}
#pk-settings summary{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:36px;height:36px;padding:0;border:1px solid #e4ff9c;border-radius:50%;background:#d5f66a;box-shadow:0 2px 6px #201a2c26;cursor:pointer;list-style:none}
#pk-settings summary::-webkit-details-marker{display:none}
#pk-settings summary svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pk-settings summary:focus-visible{outline:3px solid #d5f66a;outline-offset:3px}
#pk-settings .pk-controls{position:absolute;left:auto;right:-44px;top:calc(100% + 10px);bottom:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;width:220px;max-width:calc(100vw - 32px);padding:10px;background:#ede5f7;border:1.5px solid #7954a3;border-radius:20px;box-shadow:3px 4px 0 #7954a3,0 8px 24px #201a2c26}
#pk-settings:not([open]) .pk-controls{display:none}
#pk-settings[open] .pk-controls{animation:pk-settings-in .16s ease-out}
#pk-settings .pk-controls button{width:100%;box-sizing:border-box;min-height:44px;border:0;background:transparent;color:#49335d;border-radius:12px;font-size:15px;padding:9px 12px}
#pk-settings #pk-leave{border-top:1px solid #7954a333;border-radius:0;margin-top:3px;color:#7954a3;font-weight:700}
#pk-reconnect{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);border:1px solid #d5f66a;border-radius:20px;padding:10px 14px;background:#49335de8;color:white;z-index:3;cursor:pointer}
#pk-reconnect[hidden]{display:none}

@keyframes pk-settings-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#pk-settings[open] .pk-controls{animation:none}}

@media(max-width:380px){.bottom-nav{padding-left:17px;padding-right:17px}}