/* Shared finish for the existing panels; phone-first readable actions. */
:root{--hub-ink:#2d5148;--hub-green:#2d7159;--hub-muted:#536659}
button:focus-visible,[role=button]:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #286954;outline-offset:3px}
#game-hub-dock{position:fixed;right:14px;top:var(--world-guide-bottom,100px);display:flex;flex-direction:column;gap:10px;pointer-events:auto}
.hub-dock-button{width:70px;min-height:67px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid #c5c5a8;border-radius:18px;background:#fff9e9;color:#3b5a4c;font:800 11px var(--font-main);box-shadow:0 4px 10px #3e492121;cursor:pointer}
.hub-dock-button:hover{background:#e6efd4}
.hub-panel{max-width:520px!important;color:var(--hub-ink);background:#fffaf0!important}
.hub-panel .shop-title{font-size:24px}.hub-panel .shop-header{gap:12px;background:#e4ecd6;border-bottom:1px solid #cdd5bd}
.hub-body{overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 32px;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0}
.hub-body h3{font:800 24px/1.15 var(--font-title);letter-spacing:-.02em}.hub-body h4{font:800 18px/1.25 var(--font-title)}
.hub-body p{font-size:14px;line-height:1.55;color:var(--hub-muted)}
.hub-career-hero{background:#e3ecd3;border-radius:22px;padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.hub-career-hero h3{font-size:30px}.hub-career-hero .hub-progress{width:100%;margin-top:10px}
.hub-summary{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:800}
.hub-select-label{font-size:12px;font-weight:800;display:flex;flex-direction:column;gap:7px;margin-top:6px}
.hub-select{width:100%;min-height:46px;padding:9px 12px;border:1px solid #bdc8b2;border-radius:12px;background:white;color:#355247;font:800 14px var(--font-main)}
.hub-chapter{display:flex;flex-direction:column;gap:12px;padding-bottom:12px;border-bottom:1px solid #dedfcf}
.hub-progress{display:flex;flex-direction:column;gap:6px}.hub-progress-label{font-size:12px;font-weight:800;color:#4b6150}
.hub-progress progress{appearance:none;height:9px;border:0;border-radius:8px;overflow:hidden;width:100%;background:#dadfcb}.hub-progress progress::-webkit-progress-bar{background:#dadfcb}.hub-progress progress::-webkit-progress-value{background:#709570;border-radius:8px}.hub-progress progress::-moz-progress-bar{background:#709570;border-radius:8px}
.hub-reward{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;font-weight:800;color:#655b3b}.hub-reward>span{display:flex;align-items:center;gap:4px}
.hub-button{min-height:44px;padding:10px 14px;border-radius:13px;border:1px solid #bbc8b0;background:#edf0df;color:#365c4c;font:800 13px/1.3 var(--font-main);cursor:pointer;transition:background .15s ease}
.hub-button:hover{background:#dde8ca}.hub-primary{background:#2d7159;color:#fff9e8;border-color:#245c49}.hub-primary:hover{background:#245f4b}
.hub-button:disabled{background:#eeeade;color:#716c5c;border-color:#ddd7c9;cursor:default;box-shadow:none}
.hub-section-title{margin-top:12px}.hub-roadmap{list-style:none;display:flex;flex-direction:column;gap:0}
.hub-road-step{display:flex;gap:14px;min-height:70px;position:relative;padding:12px 0;border-bottom:1px solid #e8e4d5}
.hub-road-number{width:39px;height:39px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;background:#e9e6d9;color:#7b7869;font:800 18px var(--font-title)}
.hub-road-step strong{display:block;font-size:13px;line-height:1.5;margin-bottom:5px}.hub-road-current .hub-road-number{background:#2d7159;color:#fff}.hub-road-reached:not(.hub-road-current) .hub-road-number{background:#cddaaf;color:#3f6747}
.hub-event-hero{background:#efe7cc;padding:22px;border-radius:22px;display:flex;flex-direction:column;gap:10px}.hub-event-hero h3{font-size:28px}
.hub-note{font-size:12px!important;line-height:1.55!important}.hub-collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hub-collection{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px;border-radius:16px;background:#f2eedf}.hub-collection strong{font-size:13px;text-align:center}.hub-collection .hub-button{width:100%;font-size:12px;padding:8px}.hub-item-preview{width:100%;height:110px;object-fit:contain}
.hub-calendar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #e1e1d1}.hub-calendar-row strong{display:block;font-size:15px}.hub-calendar-row div span{display:block;font-size:12px;color:#666b53;margin-top:4px}.hub-calendar-status{font-size:11px;font-weight:800;color:#537447;white-space:nowrap}
.hub-ad-row{display:flex;flex-direction:column;gap:12px;padding:18px 0;border-bottom:1px solid #d9ddcc}.hub-ad-row>div:first-child{display:flex;align-items:center;gap:12px}
.hub-guide-row{display:grid;grid-template-columns:34px 1fr auto;gap:8px 12px;border-bottom:1px solid #e0dfcf;padding:12px 0 18px}.hub-guide-row p{grid-column:2/4}.hub-guide-row .hub-button{grid-column:3;grid-row:1;min-height:36px;padding:7px 12px}
.friend-tools{display:flex;flex-direction:column;gap:9px;padding:16px 20px;background:#e7eedc}.friend-tools label{font-size:13px;font-weight:800;color:#3c5b49}.friend-search{display:flex;gap:8px}.friend-search input{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid #b6c5aa;border-radius:12px;font:14px var(--font-main);color:#345747;background:#fffdf5}.friend-code{font-size:12px;overflow-wrap:anywhere;user-select:text;color:#48634f}.friend-result{font-size:13px;line-height:1.4;color:#44563d}.street-example-label{font-size:11px;font-weight:800;color:#746143}.street-card .hub-button{width:100%}
#street-panel{max-height:min(650px,calc(100dvh - 110px));overflow:hidden}
#street-panel>.shop-header,.hub-panel>.shop-header,.hub-panel>.shop-tabs{flex-shrink:0}
.street-body{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
#street-panel .street-strip{overflow-y:hidden;align-items:stretch;flex-shrink:0;padding-block:12px 18px}
#street-panel .street-card{height:auto;min-height:256px;flex-shrink:0}
#street-panel .street-card>*{flex-shrink:0}
#street-panel .street-card .recipe-action{min-height:44px;width:100%;margin-top:auto;white-space:normal}
@media(max-width:700px){
 #game-hub-dock{top:var(--world-guide-bottom,calc(env(safe-area-inset-top) + 120px));right:9px;gap:8px}.hub-dock-button{width:58px;min-height:58px;border-radius:16px;font-size:10px}
 .hub-panel{width:100%!important;max-width:none!important;max-height:calc(100dvh - 110px)!important;left:0!important;right:0!important;transform:translateY(16px);border-radius:24px 24px 0 0!important}
 .hub-panel.sheet-panel-visible{transform:translateY(0)}
 .hub-body{padding:16px 18px max(25px,env(safe-area-inset-bottom));gap:14px}.hub-panel .shop-title{font-size:22px}
 .hub-career-hero{padding:18px}.hub-event-hero{padding:18px}.hub-body h3{font-size:22px}
 #action-bar{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:5px;padding-inline:10px}#action-bar::-webkit-scrollbar{display:none}.action-button{flex-shrink:0;min-width:62px}.action-label{font-size:11px}
 .shop-close,.icon-button{min-width:44px;min-height:44px}
}
@media(max-height:550px){#game-hub-dock{top:var(--world-guide-bottom,75px);flex-direction:row}.hub-dock-button{min-height:48px;width:58px}.hub-panel{max-height:calc(100dvh - 110px)!important}}
@media(prefers-reduced-motion:reduce){.hub-button{transition:none}}

/* Dark ink keeps gold-selected journal tabs legible across the full gradient. */
.hub-panel .shop-tab-active{color:#30271b;text-shadow:none}
.hub-panel .shop-tab{min-width:44px;min-height:44px}
.hub-panel [role="tab"]:focus-visible{outline:3px solid #254c48;outline-offset:-3px}
.hub-panel .hub-chapter:focus-visible{outline:3px solid #254c48;outline-offset:-3px}
.hub-panel .hub-ad-row:focus-visible{outline:3px solid #254c48;outline-offset:-3px}
.hub-panel,.social-panel,#main-menu{touch-action:pan-x pan-y pinch-zoom}

/* Journal copy can be long or right-to-left; retain its existing bounded sheet. */
#game-hub-dock .hub-dock-button{width:auto;min-width:70px;max-width:112px;padding:8px;font-size:12px;line-height:1.25}
#game-hub-dock .hub-dock-label{max-width:100%;overflow-wrap:anywhere}
.hub-panel .shop-title{min-width:0;overflow-wrap:anywhere}
.hub-panel .shop-close{flex:0 0 44px}
.hub-panel .shop-tabs{overflow-x:auto;justify-content:flex-start}
.hub-panel .shop-tab{flex:0 0 auto;white-space:nowrap}
.hub-panel .hub-body h3,.hub-panel .hub-body h4,.hub-panel .hub-body p{overflow-wrap:anywhere;min-width:0}
.hub-summary{flex-wrap:wrap}
.hub-guide-row{grid-template-columns:34px minmax(0,1fr) auto}
.hub-guide-row .hub-button{min-height:44px;min-width:44px}
.hub-calendar-row>div{min-width:0}
.hub-calendar-status{white-space:normal;text-align:end;max-width:100px}
@media(max-width:700px){#game-hub-dock .hub-dock-button{min-width:58px;max-width:100px}}

/* An earned reward keeps its save action visible on short landscape screens. */
@media(max-height:550px) and (min-width:561px){
 .hub-panel[data-reward-recovery="true"] .hub-ad-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.7fr);gap:8px 14px;padding:6px 0 12px}
 .hub-panel[data-reward-recovery="true"] .hub-ad-row>div:first-child{grid-column:1;grid-row:1;min-width:0}
 .hub-panel[data-reward-recovery="true"] .hub-ad-row>.hub-reward{grid-column:1;grid-row:2}
 .hub-panel[data-reward-recovery="true"] .hub-ad-row>[role="status"]{grid-column:1/-1;grid-row:3}
 .hub-panel[data-reward-recovery="true"] .hub-ad-row>.hub-button{grid-column:2;grid-row:1/3;align-self:center;width:100%;min-height:44px}
}