/* Scene-first coastal game HUD proof. Presentation only: existing controls and ground plane. */
:root{--stage-ink:#13343b;--stage-enamel:#173c43;--stage-enamel-edge:#08252d;--stage-linen:#eee5ca;--stage-paper:#f8f0d9;--stage-brass:#c4aa6a;--stage-soft:#c5d4c8}
header{background:linear-gradient(#082630b8,transparent);height:112px}
main>.profile-top{top:20px;width:250px}
.identity-button{background:linear-gradient(145deg,#23484d,#12343c);border:1px solid #b7c4ab80;border-radius:14px;box-shadow:inset 0 1px #f0f1d926,0 3px 0 #08252da8;min-height:58px}
.profile-pic{border-color:#ddc88e;background:#efe5c8;color:#20424a;box-shadow:inset 0 1px 3px #203e4433}
.identity-button b{font-size:15px;letter-spacing:.1px;color:#fff6df}.identity-button small{font-size:9px;letter-spacing:.8px;color:#c7d3c3}.identity-button .edit-icon{color:#e1d4ab}
.balances{gap:8px}.balances #money,.balances #level,.balances .quests-button,.balances .icon{min-height:44px;border:1px solid #a7b9a77a;background:linear-gradient(150deg,#24484c,#14343c);border-radius:10px;box-shadow:inset 0 1px #ffffff15,0 3px 0 #08232b99;backdrop-filter:none;color:#f1ead4;font-weight:700}
.balances #money{color:#f4df9d;font-size:13px;padding:9px 13px}.balances .quests-button{font-size:11px}.balances .icon{font-size:17px}
.intro{top:124px}.intro .eyebrow{color:#fff6df;font-size:11px;letter-spacing:.6px;line-height:1.5;border-left-color:#e6cd8c;text-shadow:0 2px 5px #0b263d}
.intro .eyebrow:before{background:#e8dfc5;color:#173b43;border:1px solid #fff1c973;border-radius:4px;box-shadow:0 2px 0 #0a293d40}
.goal{top:178px;width:290px;max-width:290px;padding:17px;background:linear-gradient(145deg,var(--stage-paper),var(--stage-linen));border:1px solid #fff3cc;border-left:4px solid #baa066;border-radius:12px;box-shadow:inset 0 -1px #887f5944,0 4px 0 #6b735f9c,0 10px 24px #06243135}
.goal .eyebrow{color:#657163;font-size:9px;letter-spacing:1.2px}.goal h3{font-size:21px;color:#173b40;line-height:1.25;margin:8px 0}.goal p{font-size:12px;line-height:1.5;color:#4d625c}.goal .progress{height:4px;background:#c4c9ac;margin:12px 0;border-radius:3px}.goal .progress span{background:#4d7768}
.goal .primary{background:linear-gradient(#315c5b,#204746);border:1px solid #668277;border-bottom-color:#153e3e;color:#fff4d7;font-size:12px;border-radius:8px;box-shadow:inset 0 1px #f4f4d52b,0 3px 0 #102e33;min-height:46px;letter-spacing:.15px}
.city-scene-action{background:linear-gradient(140deg,#f4ebd2,#e5d8b7);color:#21454a;border:1px solid #fff3d0;border-left:4px solid #ae985f;border-radius:6px 12px 12px 6px;box-shadow:inset 0 1px #fff8df,0 3px 0 #707a6299;padding:12px 16px;min-height:48px;font-size:12px}
.pin{background:linear-gradient(145deg,#f5edd6,#e7dcbc);border:1px solid #fff1c9;box-shadow:inset 0 1px #fff8e3,0 3px 0 #6d806ac2,0 8px 14px #0c29352b;border-radius:12px}.pin>i{background:#284d4820;border:1px solid #526f5a38;color:#2e5753}.pin small{color:#596c5c}.pin:hover{background:#fff3d4;transform:translateY(-1px)}
.daily-btn{background:linear-gradient(#28474a,#193a40);color:#ede9cf;border:1px solid #9fae8c88;box-shadow:inset 0 1px #ffffff12,0 3px 0 #092831;border-radius:9px}.daily-btn>span{color:#e8cf8e}.daily-btn small{color:#bfceb8}
.game-modes{background:linear-gradient(#25464b,#103039);border:1px solid #a9ba9e;box-shadow:inset 0 1px #f4ebc832,0 4px 0 #092630,0 10px 25px #09212d66;border-radius:17px;padding:7px;gap:4px}
.game-modes button{background:linear-gradient(#34565a55,#0b2c351a)!important;border:1px solid #b7c6a821;border-radius:10px;color:#d9e3d0;box-shadow:inset 0 1px #e9e9cb0c;min-height:58px;font-size:11px!important;gap:6px}
.game-modes #locations{background:linear-gradient(#f2e9c9,#d4c595)!important;color:#204349;border-color:#fff3c4;box-shadow:inset 0 1px #fff8df,0 2px 0 #817850}.game-modes #locations:before{background:#21494c}.game-modes button:hover{background:#46665e77!important;color:#fff3ce}.game-modes #locations:hover{background:#f5e9bf!important;color:#173d43}
.game-modes button:active,.goal .primary:active,.pin:active,.daily-btn:active,.identity-button:active,.balances button:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #08283135,0 1px 0 #092b31}
.game-modes button:focus-visible,.goal .primary:focus-visible,.pin:focus-visible,.daily-btn:focus-visible,.identity-button:focus-visible,.balances button:focus-visible{outline:3px solid #f6d98d;outline-offset:3px}
.world-rotation canvas:focus-visible,.world-character-button:focus-visible{outline:2px dashed #f0d6a0;outline-offset:-12px;background:transparent}
@media(min-width:721px){.city-scene-action{top:178px!important}.journal{font-size:10px;color:#eef0da}.stats b{font-size:16px}.stats small{font-size:10px}.profile-name{top:84px;left:82px}}
@media(max-width:720px){
 /* One compact two-row instrument panel, rather than separate identity/brand/status islands. */
 header{height:116px;background:none}main:before{content:'';position:absolute;left:12px;right:12px;top:8px;height:104px;border:1px solid #aebfa579;border-radius:15px;background:linear-gradient(135deg,#24484de8,#12333de8);box-shadow:inset 0 1px #e9eed520,0 4px 0 #09263177;pointer-events:none;z-index:2}
 .brand{display:none}main>.profile-top{left:19px;top:13px;width:calc(100% - 151px)}.identity-button{padding:2px 0;gap:9px;border:0;border-radius:0;min-height:44px;background:none;box-shadow:none}.profile-pic{width:36px;height:36px;font-size:21px;border-width:1px;flex-shrink:0}.identity-button small{display:none}.identity-button b{font-size:13px;line-height:1.2;margin-bottom:11px;max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.edit-icon{display:none}main>.profile-name{left:64px;top:41px;max-width:calc(100% - 200px)}.profile-name>span{font-size:9px;letter-spacing:.5px;color:#cad6c1;text-shadow:none;white-space:nowrap}
 .balances{display:contents}.balances #level{display:none}.balances #money{position:absolute;right:19px;top:13px;min-width:106px;max-width:116px;min-height:44px;height:44px;padding:7px 9px;font-size:12px;border-radius:9px;background:#0e30398c;box-shadow:inset 0 1px 3px #072a3866;border-color:#9fae8a45}.balances .quests-button{position:absolute;left:169px;right:70px;top:61px;min-height:44px;height:44px;padding:6px;font-size:10px;border-radius:8px;background:#34534f;box-shadow:inset 0 1px #eef1d416,0 2px 0 #0b3036}.balances .icon{position:absolute;right:19px;top:61px;width:44px;height:44px;min-height:44px;border-radius:8px;background:#29484d;box-shadow:inset 0 1px #eef1d416,0 2px 0 #0b3036}
 .daily-btn{position:absolute;left:19px;right:auto;top:61px;bottom:auto;min-width:140px;width:140px;max-width:140px;min-height:44px;height:44px;padding:6px 9px;background:#34534f;border:1px solid #a7b9a76b;border-radius:8px;box-shadow:inset 0 1px #eef1d416,0 2px 0 #0b3036;gap:7px;font-size:10px}.daily-btn>span{font-size:20px}.daily-btn div{font-size:9px;letter-spacing:.3px}.daily-btn small{display:none}
 .intro{top:124px;left:17px;max-width:calc(100% - 34px)}.intro .eyebrow{font-size:10px;letter-spacing:.45px;line-height:1.5;padding-left:8px;border-width:2px;max-width:100%}
 .goal{left:16px;right:16px;top:159px;width:auto;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:12px;padding:12px 13px;border-radius:11px;border-left-width:4px}.goal .eyebrow{display:block;font-size:8px;line-height:1.2;letter-spacing:.9px;color:#667363}.goal h3{font-size:15px;margin:5px 0 0;line-height:1.25;color:#193d42}.goal p,.goal .progress{display:none}.goal .primary{min-height:46px;padding:8px 9px;font-size:11px;line-height:1.3;align-self:center}.goal-copy{align-self:center}
 .city-scene-action{top:247px!important;left:17px!important;right:auto!important;max-width:210px;width:210px;min-height:44px;font-size:11px;padding:9px 12px;line-height:1.4;background:#eee2c2;border-radius:7px 12px 12px 7px}
 .pin{width:58px;min-height:58px;padding:6px 3px;gap:3px;right:15px!important;border-radius:13px}.pin>i{width:27px;height:27px;border-radius:8px;background:none;border:0}.pin>i svg{width:22px;height:22px}.pin span{font-size:9px;line-height:1.15;color:#25484a;letter-spacing:.4px}.p-work{top:324px!important}.p-style{top:393px!important}.p-home{top:462px!important}.p-pier{top:531px!important}
 .game-modes{bottom:17px;left:12px;right:12px;padding:6px 4px;gap:3px;border-radius:15px}.game-modes button{min-height:56px;padding:6px 1px;gap:6px;font-size:9px!important;border-radius:9px}.game-modes button:before{width:22px;height:22px;flex-basis:22px}
 .world-rotation>button{background:#e5d8b4;color:#24464a;border-color:#fff1c9;border-radius:9px;font-size:11px;box-shadow:0 2px 0 #6c7b64;min-width:84px}.world-rotation-status{background:#173c43e8;color:#f3e5ba;border:1px solid #c2c89c59;border-radius:7px}
 footer{border-top-color:#bcc8aa2b;color:#b4c6b8}
}
@media(max-width:360px){main>.profile-top{width:calc(100% - 142px)}.balances #money{min-width:98px;right:17px}.daily-btn{left:17px;width:126px;min-width:126px}.balances .quests-button{left:152px;right:66px}.balances .icon{right:17px}.goal{grid-template-columns:minmax(0,1fr) 98px;gap:9px}.goal h3{font-size:14px}.intro .eyebrow{font-size:9px}.game-modes{gap:1px}.city-scene-action{width:192px;max-width:192px}}
@media(prefers-reduced-motion:reduce){.game-modes button,.goal .primary,.pin,.daily-btn,.identity-button,.balances button{transition:none!important;animation:none!important}.game-modes button:active,.goal .primary:active,.pin:active,.daily-btn:active,.identity-button:active,.balances button:active{transform:none}}
@media(max-width:720px){.identity-button>span:not(.edit-icon){min-width:0;flex:1}.identity-button b{max-width:100%}}
/* A translated hidden toast can still peek over the dock on short screens. */
#toast{opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s ease,opacity .2s ease,visibility 0s linear .25s}
#toast.show{opacity:1;visibility:visible;transition-delay:0s}
@media(prefers-reduced-motion:reduce){#toast{transition:none!important}}

/* Seven destinations remain touch-sized; narrow phones can pan the dock. */
.game-modes:has(#chat){grid-template-columns:repeat(7,minmax(0,1fr));width:min(700px,calc(100% - 48px))}.game-modes #chat{--dock-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v12H9l-5 4V4Z M8 8h8 M8 12h5'/%3E%3C/svg%3E")}
@media(max-width:720px){.game-modes:has(#chat){display:flex;width:auto;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}.game-modes:has(#chat) button{flex:1 0 44px;min-width:44px}.game-modes:has(#chat){scroll-padding:5px}}