.play-page{display:flex;flex-direction:column;min-height:100dvh;background:var(--color-cream);overflow:hidden}@media (max-width:768px){.play-page{overflow:visible;height:auto}}.play-nav{display:flex;gap:1.5rem;padding:calc(.875rem + var(--pwa-safe-top)) 1.5rem .875rem;border-bottom:3px solid var(--color-black);background:var(--color-black);color:var(--color-cream)}.play-nav,.play-nav-logo{align-items:center;flex-shrink:0}.play-nav-logo{display:inline-flex;gap:.45rem;font-size:1.25rem;font-weight:900;letter-spacing:-.03em;color:var(--color-gold);text-decoration:none}.play-nav-logo img{width:32px;height:32px;object-fit:contain}.play-nav-title{display:flex;align-items:baseline;gap:.625rem;font-size:.875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-cream-50);flex:1}.play-nav-subtitle{font-weight:500;font-size:.75rem;color:var(--color-cream-200);letter-spacing:.02em;text-transform:none}.play-nav-stats{display:flex;gap:1.5rem;flex-shrink:0}.play-stat{display:flex;flex-direction:column;align-items:center;gap:0}.play-stat-num{font-size:1.125rem;font-weight:900;color:var(--color-gold);line-height:1}.play-stat-label{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-cream-200)}.play-content{flex:1}.play-city-panel,.play-content{display:flex;overflow:hidden;position:relative}.play-city-panel{left:0;top:0;bottom:auto;z-index:10;width:100%;border:3px solid var(--color-black);box-shadow:5px 5px 0 var(--color-black);background:var(--color-cream);flex-direction:column}.play-city-panel-inner{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.play-right-panel{flex:1;position:relative;overflow:hidden;width:100%;min-height:0}.play-map-wrapper{position:absolute;inset:0;overflow:hidden}.play-nusantara-map{height:100%!important}.play-nusantara-map>div{width:100%!important;height:100%!important}.play-map-loading{height:100%;display:flex;align-items:center;justify-content:center;background:#111122;color:var(--color-gold);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.constellation-container{flex:1;position:relative;overflow:auto;padding:1.5rem}.constellation-nusantara-bg{position:absolute;inset:0;pointer-events:none;opacity:.04}.nusantara-outline{width:100%;height:100%}.nusantara-text{font-size:120px;font-weight:900;font-family:var(--font-sans);fill:var(--color-black);letter-spacing:.2em}.constellation-grid{display:flex;gap:1rem;align-items:flex-start;min-width:max-content;padding-bottom:1rem;position:relative;z-index:1}.constellation-island{display:flex;flex-direction:column;gap:.5rem;min-width:140px}.island-label{font-size:.65rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--color-black-muted);padding:.25rem .5rem;border-bottom:2px solid var(--color-black);margin-bottom:.25rem}.island-cities{gap:.625rem}.city-card,.island-cities{display:flex;flex-direction:column}.city-card{gap:.35rem;padding:.75rem .875rem;background:var(--color-cream-50);border:3px solid var(--color-black);border-radius:2px;box-shadow:4px 4px 0 0 var(--color-black);text-decoration:none;color:var(--color-black);position:relative;cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease;overflow:hidden;width:100%;text-align:left;font-family:inherit}.city-card-selected{background:var(--color-navy);border-color:var(--color-gold);box-shadow:4px 4px 0 0 var(--color-gold)}.city-card-selected,.city-card-selected .city-constraint-count,.city-card-selected .city-featured-constraint,.city-card-selected .city-name,.city-card-selected .city-vehicles{color:var(--color-cream)}.city-card-selected .city-progress-badge{background:var(--color-gold);color:var(--color-black)}.city-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--glow,var(--color-terracotta))}.city-card:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 0 var(--color-black);background:var(--color-cream)}.city-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--color-black)}.city-badge-special{font-size:.625rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;background:var(--color-gold);color:var(--color-black);border:1.5px solid var(--color-black);padding:.1rem .35rem;border-radius:2px;align-self:flex-start;margin-bottom:.125rem}.city-name{font-size:.9rem;font-weight:800;line-height:1.1;color:var(--color-black);padding-left:.25rem}.city-featured-constraint{align-items:center;font-size:.65rem;font-weight:700;color:var(--color-black-soft)}.city-featured-constraint,.city-vehicles{display:flex;gap:.25rem;padding-left:.25rem}.city-vehicles{font-size:.8rem}.city-constraint-count{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-black-muted);padding-left:.25rem}.city-progress-badge{display:inline-flex;align-items:center;gap:.25rem;align-self:flex-start;margin-left:.25rem;margin-top:.1rem;padding:.16rem .42rem;background:var(--color-cream-200);color:var(--color-black);border:2px solid var(--color-black);box-shadow:2px 2px 0 var(--color-black);font-size:.58rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;line-height:1.15}.city-progress-badge.has-progress{background:var(--color-gold)}.city-daily-badge{position:absolute;top:.4rem;right:.4rem;font-size:.6rem;font-weight:900;background:var(--color-terracotta);color:var(--color-cream);border:1.5px solid var(--color-black);padding:.1rem .3rem;border-radius:2px;letter-spacing:.05em;text-transform:uppercase}.city-glow-ring{position:absolute;inset:-3px;border:3px solid var(--glow,var(--color-terracotta));border-radius:2px;opacity:0;pointer-events:none;transition:opacity .15s ease}.city-card:hover .city-glow-ring{opacity:.6}.city-detail-panel{position:absolute;right:1rem;bottom:1rem;width:min(420px,calc(100vw - 2rem));z-index:11;border:3px solid var(--color-black);box-shadow:5px 5px 0 var(--color-black);max-height:calc(100% - 2rem);overflow-y:auto;background:var(--color-cream-50);padding:1.25rem;display:flex;flex-direction:column;gap:1rem;transition:opacity .2s ease}.city-detail-panel:not(.visible){width:min(260px,calc(100vw - 2rem));opacity:.5}.city-detail-panel.visible{opacity:1}.detail-header{display:flex;align-items:flex-start;gap:.75rem}.detail-glow-dot{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--color-black);flex-shrink:0;margin-top:3px;box-shadow:2px 2px 0 0 var(--color-black)}.detail-city-name{font-size:1.25rem;font-weight:900;line-height:1.1;color:var(--color-black);margin:0}.detail-island{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-black-muted);margin-top:.2rem}.detail-desc{font-size:.8rem;font-weight:500;line-height:1.6;color:var(--color-black-soft);margin:0;padding:.75rem;background:var(--color-cream-200);border:2px solid var(--color-black);border-radius:2px}.detail-section{display:flex;flex-direction:column;gap:.5rem}.detail-section-title{font-size:.65rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--color-black-muted);border-bottom:2px solid var(--color-black);padding-bottom:.25rem}.detail-vehicles{display:flex;gap:.375rem;flex-wrap:wrap}.detail-vehicle-chip{display:flex;align-items:center;gap:.25rem;font-size:.72rem;font-weight:700;padding:.25rem .5rem;background:var(--color-navy);color:var(--color-cream);border:2px solid var(--color-black);border-radius:2px;box-shadow:2px 2px 0 0 var(--color-black)}.detail-constraints{display:flex;flex-direction:column;gap:.3rem}.detail-constraint-chip{font-weight:600;color:var(--color-black-soft)}.detail-constraint-chip,.detail-ferry{display:flex;align-items:center;gap:.375rem;font-size:.75rem}.detail-ferry{font-weight:700;padding:.5rem .625rem;background:var(--color-cream-200);border:2px solid var(--color-black);border-radius:2px;flex-wrap:wrap}.detail-ferry-duration{font-weight:500;color:var(--color-black-muted);margin-left:auto}.detail-cta{flex:1;text-align:center;justify-content:center}.detail-cta-row{display:flex;gap:.625rem;margin-top:auto;padding-top:.75rem}.detail-cta-cancel{flex-shrink:0}.detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;flex:1;padding:2rem;text-align:center}.detail-empty-icon{font-size:2.5rem;opacity:.4}.detail-empty-text{font-size:.78rem;font-weight:600;color:var(--color-black-muted);line-height:1.5}.play-hint{display:flex;align-items:center;gap:.75rem;padding:.625rem 1.5rem;border-top:3px solid var(--color-black);background:var(--color-cream-200);font-size:.72rem;font-weight:700;color:var(--color-black-soft);flex-wrap:wrap;flex-shrink:0}@media (min-width:1025px){.play-city-panel{position:absolute;left:1rem;top:1rem;bottom:1rem;width:min(340px,calc(100vw - 2rem))}}@media (max-width:1024px){.play-content{flex-direction:column}.play-city-panel{position:relative;width:100%;max-height:260px;flex-shrink:0;border-bottom:3px solid var(--color-black);overflow:hidden}.play-city-panel-inner{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;gap:.5rem;padding-bottom:.5rem;padding-right:1rem}.play-city-panel-inner::-webkit-scrollbar{height:4px}.play-city-panel-inner::-webkit-scrollbar-thumb{background:rgba(42,63,95,.35);border-radius:4px}.constellation-island{flex-shrink:0;min-width:140px}.play-right-panel{flex:1;min-height:320px;position:relative;overflow:hidden}.play-map-wrapper{position:absolute;inset:0;overflow:hidden}}@media (max-width:640px){.play-hint,.play-nav-stats{display:none}.play-player-card-wrap{padding:.5rem .75rem}}@media (max-width:768px){.play-content{flex-direction:column;overflow-y:auto;overflow-x:hidden}.play-city-panel{max-height:none;overflow:visible;border:none;box-shadow:none}.play-city-panel-inner{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;padding:.75rem;overflow:visible}.constellation-island{display:contents}.island-label{display:none}.island-cities{display:contents}.city-card{padding:.5rem .625rem;gap:.2rem;box-shadow:3px 3px 0 0 var(--color-black)}.city-name{font-size:.78rem}.play-right-panel{display:none}.city-detail-panel{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-height:60vh;border-radius:0;z-index:20;box-shadow:0 -4px 0 var(--color-black)}.city-detail-panel:not(.visible){display:none}}.play-player-card-wrap{padding:.75rem 1.5rem;border-bottom:3px solid var(--color-black);background:var(--color-cream-200);position:sticky;top:0;z-index:9}.play-player-card{max-width:1400px;margin:0 auto}@media (max-width:640px){.play-player-card-wrap{padding:.6rem .75rem}}.play-nav-profile-link{padding:.4rem .85rem;border:2.5px solid var(--color-gold);background:transparent;color:var(--color-gold);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:3px 3px 0 var(--color-gold);flex-shrink:0;transition:transform 80ms}.play-nav-profile-link:hover{transform:translate(-1px,-1px);background:var(--color-gold);color:var(--color-black)}@media (max-width:640px){.play-nav-profile-link{padding:.3rem .55rem;font-size:.65rem}}