/* Scoped to the personal center and its single homepage entry. */
/* Reserve 24px for the illustrated entry. Compared with the initial layout,
   tighten its upper gap by 8px and lower gap by 4px; keep the tree and growth
   card at their existing screen positions by reducing bottom offsets equally. */
.farm-game-home .farm-stage { height:630px; }
.farm-game-home .farm-tree-wrap { bottom:258px; }
.farm-game-home .farm-growth-card { bottom:166px; }
.farm-game-home .farm-side-actions { bottom:294px; }
.farm-game-home .farm-utility-actions { right:5px; bottom:82px; left:5px; justify-content:center; }
.farm-game-home .home-personal-entry { position:relative; display:block; width:100%; max-width:340px; min-height:44px; aspect-ratio:1000 / 233; border-radius:20px; color:#fff3cf; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.home-personal-art { display:block; width:100%; height:auto; pointer-events:none; user-select:none; }
.home-personal-copy { position:absolute; top:19%; bottom:3%; left:33%; right:14%; display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; text-align:center; pointer-events:none; }
.home-personal-copy strong { display:block; max-width:100%; font-size:clamp(16px,5.2vw,20px); font-weight:900; line-height:1.12; overflow-wrap:anywhere; text-shadow:0 2px 1px #713915,0 0 3px #713915; }
.farm-game-home .home-personal-copy small { display:block; max-width:100%; margin-top:3px; font-size:clamp(10px,3.3vw,12px); font-weight:700; line-height:1.15; overflow-wrap:anywhere; color:#fff0c8; text-shadow:0 1px 2px #673416; }
.farm-game-home .home-personal-entry:active { transform:translateY(2px); }
@media(max-width:390px) {
    .farm-game-home .farm-stage { height:570px; }
    .farm-game-home .farm-growth-card { bottom:148px; }
    .farm-game-home .farm-side-actions { bottom:274px; }
    .farm-game-home .farm-utility-actions { bottom:66px; }
}
@media(max-width:350px) {
    .farm-game-home .farm-stage { height:566px; }
    .farm-game-home .farm-side-actions { bottom:286px; }
    /* Keep a little more clearance for the primary buttons on narrow phones. */
    .farm-game-home .farm-utility-actions { bottom:68px; }
}
body.personal-center-page { background:#f7f2df; color:#65452b; min-height:100dvh; }
/* Outrank ui-v3:not(.dark). Safari's chrome must see cream, not its generic canvas. */
body.ui-v3.personal-center-page,body.ui-v3.personal-center-page.dark { background:#fffdf3; }
.personal-center { box-sizing:border-box; max-width:440px; margin:0 auto; padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); background:linear-gradient(#fffdf3,#f7f2df); min-height:100dvh; }
.personal-center * { box-sizing:border-box; }
.personal-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; min-height:48px; }
.personal-header a { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; color:#21894d; border-radius:12px; }
.personal-header svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.personal-header h1 { margin:0; font-size:23px; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.personal-card { background:#fffdf6; border:1px solid #e6d4b3; border-radius:18px; box-shadow:0 3px 9px #8156240a; margin-bottom:16px; }
.personal-identity { display:flex; align-items:center; gap:16px; padding:20px 16px; }
.personal-avatar { width:88px; height:88px; object-fit:contain; flex-shrink:0; border:2px solid #e7c278; border-radius:50%; background:linear-gradient(#cdeeff,#edf7cb); padding:6px; }
.personal-details { min-width:0; }
.personal-avatar-trigger { flex:none; width:88px; border:0; padding:0; background:none; color:#795530; font:inherit; cursor:pointer; touch-action:manipulation; }
.personal-avatar-trigger .personal-avatar { display:block; padding:0; object-fit:cover; }
.personal-avatar-trigger > span { display:block; margin-top:5px; font-size:11px; line-height:1.3; }
.avatar-dialog { box-sizing:border-box; width:calc(100% - 40px); max-width:360px; max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; margin:auto; padding:18px; border:1px solid #e6d4b3; border-radius:22px; background:#fffdf3; color:#65452b; }
.avatar-dialog::backdrop { background:#163b2c99; }
.avatar-dialog header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.avatar-dialog h2 { flex:1; margin:0; font-size:20px; overflow-wrap:anywhere; }
.avatar-dialog button { touch-action:manipulation; cursor:pointer; }
#avatar-close { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:#f6ebd5; color:#795530; font-size:26px; }
.avatar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.avatar-option { position:relative; min-width:0; min-height:44px; padding:3px; border:2px solid transparent; border-radius:14px; background:#eee7d6; }
.avatar-option img { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:9px; }
.avatar-option span { display:none; position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%; background:#549f36; color:#fff; font-weight:800; line-height:20px; }
.avatar-option[aria-pressed="true"] { border-color:#549f36; background:#e0f1d6; }
.avatar-option[aria-pressed="true"] span { display:block; }
#avatar-feedback { min-height:18px; margin:12px 0; font-size:13px; overflow-wrap:anywhere; }
.avatar-dialog #avatar-save { color:white; border-color:#549f36; background:linear-gradient(#82c751,#4b9e2b); font-weight:700; }
.avatar-dialog button:disabled { opacity:.55; cursor:default; }
body.is-pointer-input .avatar-dialog button:focus,body.is-pointer-input .personal-avatar-trigger:focus { outline:none; }
@media(max-width:350px) { .personal-avatar-trigger { width:72px; } .avatar-dialog { padding:14px; } .avatar-grid { gap:8px; } }
.personal-details h2 { margin:0 0 7px; font-size:23px; line-height:1.3; overflow-wrap:anywhere; }
.personal-details p { margin:0 0 10px; font-size:13px; overflow-wrap:anywhere; }
.personal-details p span { color:#8a7359; }
.personal-vip { display:inline-block; max-width:100%; padding:4px 12px; border:1px solid #e9c377; border-radius:20px; background:#fff0be; color:#84541d; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.personal-group { padding:14px; }
.personal-group h2 { margin:0 0 8px; font-size:17px; font-weight:800; }
#personal-center .personal-row { display:flex; align-items:center; width:100%; min-height:54px; gap:12px; padding:12px 3px; border:0; border-top:1px solid #eee3cf; border-radius:0; background:transparent; color:#65452b; text-decoration:none; font:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; }
#personal-center .personal-row[hidden] { display:none; }
.personal-row svg { width:23px; height:23px; flex-shrink:0; fill:none; stroke:#956020; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.personal-row span { flex:1; min-width:0; overflow-wrap:anywhere; }
.personal-row i { flex-shrink:0; font-style:normal; font-size:25px; line-height:1; color:#ad875b; }
.personal-center .personal-logout { width:100%; min-height:48px; padding:10px 16px; border:1px solid #37a55b; border-radius:13px; color:#fff; background:linear-gradient(180deg,#45bd69,#21894d); box-shadow:0 5px 12px #187d4526,inset 0 1px #ffffff47; font-size:16px; font-weight:700; cursor:pointer; overflow-wrap:anywhere; }
.personal-center .personal-logout:disabled { opacity:.6; cursor:wait; }
.personal-status { margin:12px 0 0; color:#8e3f28; font-size:14px; overflow-wrap:anywhere; }
.personal-status:empty { display:none; }
.personal-logout-dialog { max-width:calc(100vw - 32px); width:340px; margin:auto; padding:22px; border:1px solid #d4b581; border-radius:18px; background:#fffdf3; color:#65452b; }
.personal-logout-dialog::backdrop { background:#163b2c99; }
.personal-logout-dialog h2 { font-size:19px; line-height:1.4; margin:0 0 20px; overflow-wrap:anywhere; }
.personal-confirm-actions { display:flex; gap:10px; }
.personal-confirm-actions button { flex:1; min-width:0; min-height:44px; border:1px solid #d4b581; border-radius:12px; background:#f4eddb; color:#65452b; font-size:14px; cursor:pointer; overflow-wrap:anywhere; }
.personal-center :focus-visible,.home-personal-entry:focus-visible { outline:3px solid #245eaa; outline-offset:3px; }
@media(max-width:350px) { .personal-center { padding-right:12px; padding-left:12px; } .personal-avatar { width:72px; height:72px; } .personal-identity { padding:16px 12px; gap:12px; } .personal-details h2 { font-size:20px; } }