.profile-page { padding: 80px 100px 24px; }
.profile-card { width:784px; min-height:455px; max-height:640px; padding:68px 36px 20px; border-radius:28px; }
.profile-menu[hidden], .profile-meta[hidden], .profile-details[hidden], .profile-avatar-image[hidden], .profile-avatar-fallback[hidden] { display:none; }
.profile-menu-card[aria-disabled="true"] { opacity:.55; cursor:default; transform:none; }
.profile-meta strong { white-space:normal; overflow-wrap:anywhere; }
.profile-meta div { max-width:240px; }
.profile-details { max-height: 320px; overflow-y:auto; padding:6px 12px; }
.profile-details h2 { margin:12px; color:#075d9d; }
.profile-value-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:9px 0; }
.profile-value-grid article { padding:9px; border:1px solid #afd8e5; border-radius:9px; background:#e9f4f9; color:#366d8d; font-size:10px; }
.profile-value-grid p { margin:10px 0; }
.profile-value-grid .is-earned { border-color:#29bd6f; background:#e4ffed; }
.profile-editor label { display:block; margin:12px 0; font-size:22px; color:#075d9d; }
.profile-editor input { font-size:22px; padding:10px; border:2px solid #8acada; border-radius:12px; margin-inline-start:12px; max-width:70%; }
.avatar-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; max-height:260px; overflow:auto; padding:5px; margin:18px 0; }
.avatar-grid button { min-height:110px; border:3px solid #a3d6e7; border-radius:16px; background:#ecfaff; cursor:pointer; font-size:44px; }
.avatar-grid button[aria-pressed="true"] { border-color:#1acb6d; box-shadow:0 0 7px #2af787; }
.avatar-grid img { width:90px; height:90px; object-fit:contain; }
.profile-editor [role="status"] { min-height:28px; margin-top:12px; font-size:20px; }
.profile-card :focus-visible { outline:3px solid #079652; outline-offset:3px; }

.profile-account-link { display:inline-block; color:#0874ad; margin-top:6px; font-size:18px; }
.profile-details>p { margin:16px 0; color:#075d9d; font-size:22px; }

.profile-achievement-image { display:block; width:56px; height:84px; border-radius:12px; object-fit:contain; margin:0 auto 6px; }
.profile-value-grid article:not(.is-earned) .profile-achievement-image { filter:grayscale(1); opacity:.6; }

.profile-menu { gap:11px; }
.profile-menu-card { min-height:108px; padding:11px 8px; gap:5px; border-width:2px; border-radius:18px; }
.profile-menu-card strong { font-size:14px; }
.profile-menu-card small { font-size:10px; }
.profile-menu-icon { display:block; width:56px; height:56px; flex:none; }
.profile-menu-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.profile-heading { margin-bottom:14px; }
.profile-meta { gap:7px; margin-top:12px; }
.profile-meta div { min-width:105px; padding:5px 10px; }
.profile-meta span { font-size:9px; }
.profile-meta strong { font-size:10px; }
.profile-detail-back { position:absolute; top:14px; right:14px; min-width:36px; width:36px; min-height:32px; padding:0; border-radius:10px; font-size:26px; z-index:2; }
.profile-theme .shell-back { scale:.6; transform-origin:top right; }
.profile-image-slot { display:block; width:56px; height:56px; margin:0 auto 6px; }
.profile-placeholder { opacity:.55; }
.profile-local-notice { max-width:620px; margin:8px auto; font-size:16px; color:#075d9d; }
.avatar-grid { grid-template-columns:repeat(8,1fr); max-height:180px; gap:5px; }
.avatar-grid button { min-height:55px; border-width:2px; border-radius:8px; }
.avatar-grid img { width:45px; height:45px; }
.profile-details .profile-editor label, .profile-details>p { font-size:16px; }
.profile-details .profile-editor input { font-size:16px; padding:6px; }
.profile-details .profile-action:not(.profile-detail-back) { min-width:108px; min-height:36px; padding:0 12px; font-size:14px; }

/* Identical compact slots for earned, locked and future achievements. */
.profile-achievement-grid { grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:150px; gap:6px; }
.profile-achievement-grid article { min-width:0; padding:6px; display:flex; flex-direction:column; align-items:center; gap:4px; overflow-wrap:anywhere; }
.profile-achievement-grid .profile-achievement-image,
.profile-achievement-grid .profile-image-slot { width:48px; height:72px; flex:0 0 72px; margin:0; border-radius:9px; object-fit:contain; }
.profile-achievement-grid strong { font-size:9px; line-height:1.2; }
.profile-achievement-grid p { margin:auto 0 0; }
.profile-achievement-grid small { font-size:9px; line-height:1.2; }
.profile-achievement-grid .profile-placeholder small { margin:auto 0 0; }

.profile-stars-grid { grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; max-width:480px; margin:9px auto; gap:8px; }
.profile-stars-grid article { min-width:0; min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; }

.profile-stars-grid .profile-stars-easy { background:#d9f1ff; border-color:#39a8e8; color:#075585; }
.profile-stars-grid .profile-stars-medium { background:#dff7e8; border-color:#39b875; color:#16633b; }
.profile-stars-grid .profile-stars-hard { background:#ffe3e3; border-color:#e96565; color:#912b2b; }

.profile-details .profile-future-note { font-size:16px; }
.profile-details .profile-action.danger { margin:12px; }
.profile-detail-back { min-width:52px; width:52px; min-height:48px; }
.profile-delete-dialog { position:fixed; inset:0; margin:auto; width:min(680px,92vw); max-height:90dvh; overflow:auto; box-sizing:border-box; padding:24px; border:3px solid #65c6ec; border-radius:24px; background:#effaff; color:#075585; font:18px/1.5 Arial,sans-serif; }
.profile-delete-dialog::backdrop { background:#052238b8; }
.profile-delete-dialog h2 { margin:0 0 12px; }
.profile-delete-dialog label { display:block; margin:12px 0; }
.profile-delete-dialog input[type=password] { display:block; width:100%; box-sizing:border-box; padding:12px; font:inherit; border:2px solid #8abed1; border-radius:10px; }
.profile-delete-dialog .delete-check { display:flex; align-items:center; gap:10px; }
.profile-delete-dialog input[type=checkbox] { width:24px; height:24px; flex-shrink:0; }
.profile-delete-dialog .profile-action { min-width:120px; min-height:48px; margin:5px; }
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
  .profile-page { padding:66px 60px 20px; }
  .profile-card { width:1360px; min-height:680px; max-height:800px; padding:68px 36px 20px; }
  .profile-menu-card { min-height:154px; }
  .profile-menu-icon { width:84px; height:84px; }
  .profile-menu-card strong { font-size:28px; }
  .profile-menu-card small { font-size:24px; }
  .profile-heading p, .profile-account-link { font-size:28px; }
  .profile-meta span, .profile-meta strong { font-size:22px; }
  .profile-meta div { max-width:580px; }
  .profile-details { max-height:420px; }
  .profile-value-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-value-grid article, .profile-achievement-grid strong, .profile-achievement-grid small { font-size:26px; }
  .profile-achievement-grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:270px; }
  .profile-achievement-grid .profile-achievement-image, .profile-achievement-grid .profile-image-slot { width:72px; height:108px; flex-basis:108px; }
  .profile-stars-grid { max-width:1000px; }
  .profile-stars-grid article { min-height:108px; }
  .profile-detail-back { min-width:96px; width:96px; min-height:96px; font-size:44px; }
  .profile-theme .shell-back { scale:1; }
  .profile-details .profile-editor label, .profile-details>p, .profile-details .profile-future-note { font-size:28px; }
  .profile-details .profile-editor input { font-size:28px; }
  .profile-details .profile-action:not(.profile-detail-back) { min-height:96px; font-size:28px; }
  .avatar-grid { grid-template-columns:repeat(8,1fr); max-height:240px; }
  .avatar-grid button { min-height:100px; }
  .avatar-grid img { width:80px; height:80px; }
}

.profile-overlay { position:absolute; inset:0; z-index:5000; background:#06263d99; }
.profile-overlay[hidden] { display:none; }
.profile-overlay .profile-page { background:none; }
.profile-overlay .profile-page::before { display:none; }
.profile-modal-close { position:absolute; top:14px; right:14px; min-width:52px; width:52px; min-height:48px; padding:0; font-size:28px; z-index:3; }
.profile-overlay .profile-detail-back { right:14px; }
.profile-theme .shell-back { background:linear-gradient(135deg,#eef8fc,#d7edf6); color:#39738f; border:2px solid #d9eff7; border-radius:12px; text-decoration:none; font:36px Arial; display:grid; place-items:center; }
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
.profile-modal-close { width:96px; min-width:96px; min-height:96px; font-size:44px; }
.profile-overlay .profile-detail-back { right:14px; }
}

.profile-modal-close[hidden], .profile-theme .shell-back[hidden] { display:none; }
.profile-modal-close { border-radius:10px; }

.profile-menu-card small { display:none; }

.profile-heading [hidden] { display:none !important; }

.profile-player-number { width:fit-content; padding:3px 8px; border:1px solid #87bfd1; border-radius:7px; background:#effaff; }
.profile-player-number[hidden] { display:none; }
.profile-account-info,.profile-management { width:min(100%,540px); margin:0 auto; text-align:start; }
.profile-account-info { display:grid; gap:9px; }
.profile-account-info div { padding:7px 12px; background:#ffffff80; border:1px solid #b8dce8; border-radius:10px; }
.profile-account-info dt { font-size:13px; color:#43728c; }
.profile-account-info dd { margin:3px 0 0; font:600 16px/1.4 Arial,sans-serif; overflow-wrap:anywhere; }
.profile-management .profile-change-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; margin:0 0 12px; padding:10px; border:1px solid #b8dce8; border-radius:12px; background:#ffffff80; }
.profile-change-row label { display:block; font-size:15px; }
.profile-change-row small { display:block; overflow-wrap:anywhere; margin:4px 0; }
.profile-change-row input { width:100%; min-width:0; box-sizing:border-box; padding:8px; font:16px Arial,sans-serif; border:1px solid #85c8db; border-radius:8px; }
.profile-change-row p { grid-column:1/-1; margin:0; font-size:14px; }
.profile-change-row .profile-action { margin:0; }
.profile-id-change {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:12px;margin-bottom:14px;border:1px solid #b8dce8;border-radius:12px;background:#ffffff80;}
.profile-id-change input[type="checkbox"] {width:18px;height:18px;padding:0;vertical-align:middle;margin-inline-end:7px;accent-color:#088bbf;}
.profile-id-change label:has(input[type="checkbox"]) {margin-top:10px;line-height:1.6;}
.profile-id-change p {line-height:1.5;}
.social-invite {position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:50;}
.profile-account-info + .profile-action { margin-top:12px; }
.profile-details.is-account-management { max-height:410px; } .profile-change-row p:empty { display:none; }

.profile-task-list { display:flex; flex-direction:column; gap:6px; width:100%; text-align:start; }
.profile-task-row { display:flex; align-items:center; gap:10px; min-height:34px; padding:5px 10px; box-sizing:border-box; border:1px solid #b9dfed; border-radius:8px; background:#f5fcff; color:#235d7b; font:15px/1.4 Arial,sans-serif; }
.profile-task-title { flex:1; }
.profile-task-progress { font-size:12px; color:#477a91; white-space:nowrap; }
.profile-task-check { flex:none; width:22px; text-align:center; font-size:20px; color:#789cad; }
.profile-task-row.is-complete { background:#ebfbf1; border-color:#93d7b0; }
.profile-task-row.is-complete .profile-task-check { color:#148649; font-weight:bold; }
.profile-task-row.is-coming { color:#6d8998; background:#edf5f8; }
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
  .profile-task-row { min-height:52px; font-size:25px; padding:7px 14px; }
  .profile-task-progress { font-size:20px; }.profile-task-check { font-size:30px; width:34px; }
}

/* Account controls have their own sizing, independent of the large profile menu. */
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
  .profile-management, .profile-account-info { width:min(100%,980px); }
  .profile-management .profile-change-row { grid-template-columns:minmax(0,1fr) 132px; gap:12px; padding:12px; }
  .profile-management .profile-change-row label { font-size:22px; }
  .profile-management .profile-change-row small { font-size:20px; }
  .profile-management .profile-change-row input { height:48px; padding:6px 10px; font-size:22px; }
  .profile-details .profile-management .profile-action { width:132px; min-width:0; min-height:46px; height:46px; padding:0 10px; font-size:22px; }
  .profile-management .profile-change-row p { font-size:20px; }
  .profile-card .profile-detail-back, .profile-card .profile-modal-close { width:60px; min-width:60px; min-height:48px; height:48px; font-size:32px; }
}

.profile-card.is-feature-preview {height:640px;display:flex;flex-direction:column;}
.is-feature-preview .profile-details {flex:1;min-height:0;max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:0;}
.profile-preview-notice {flex:none;margin:0 0 7px !important;font:12px/1.4 Arial,sans-serif !important;color:#557b90;}
.profile-feature-frame {display:block;flex:1;min-height:0;width:100%;border:0;background:transparent;border-radius:12px;}
.profile-card.is-preview-challenge {width:1480px;height:800px;max-height:800px;padding:54px 12px 12px;}
.is-preview-challenge .profile-heading,.is-preview-challenge .profile-avatar-link {display:none;}
@media (pointer:coarse) and (orientation:landscape), (max-height:540px) and (orientation:landscape) {
 .profile-card.is-feature-preview {height:800px;}
 .profile-preview-notice {font-size:18px !important;}
}

.social-notifications{position:fixed;bottom:14px;right:14px;z-index:70;border:2px solid #fff;border-radius:14px;padding:8px 14px;background:#fff4c4;color:#c3273b;font:bold 16px Tahoma;box-shadow:0 3px 12px #174d7460;cursor:pointer}.social-notifications[hidden]{display:none}

/* Shared identity and clearer star statistics across profile screens. */
.profile-player-number{margin:5px auto 0;font-weight:700;white-space:nowrap;direction:ltr;unicode-bidi:isolate;}
.profile-id-change.profile-guest-actions{display:flex;justify-content:center;width:fit-content;margin:8px auto;padding:0;border:0;background:none;box-shadow:none;}
.profile-stars-grid{max-width:680px;gap:14px;margin:16px auto;}
.profile-stars-grid article{min-height:132px;padding:14px 10px;border-radius:18px;gap:6px;box-shadow:0 5px 14px #18679816;}
.profile-stars-grid .profile-stat-star{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 3px #aa7a2740);}
.profile-stars-grid article strong{font-size:17px;}.profile-stars-grid article p{font-size:26px;font-weight:800;margin:0;}
.profile-stars-total{font-size:21px;font-weight:700;color:#096997;text-align:center;margin:16px auto;}
@media(max-width:600px){.profile-stars-grid{gap:8px}.profile-stars-grid article{padding:10px 5px;min-height:112px}.profile-stars-grid .profile-stat-star{width:44px;height:44px}.profile-stars-grid article strong{font-size:14px;}}

.profile-random-challenge{grid-column:1/-1;justify-self:center;min-width:250px;min-height:48px;margin:12px auto 2px;padding:9px 24px;border:3px solid white;border-radius:18px;background:linear-gradient(#54dfff,#117bcc);box-shadow:0 0 0 2px #65d9f5,0 5px 12px #0867ab35;color:white;font:bold 20px Tahoma;cursor:pointer;}
.profile-random-challenge:focus-visible{outline:3px solid #ffc933;outline-offset:3px;}

.profile-random-challenge:disabled{opacity:.45;cursor:default;box-shadow:none;}