body.page-profile{margin:0;padding:0 0 128px;background:#dff1ff;color:#091954;font-family:"Noto Sans Thai",sans-serif}
.page-profile>.site-header,.page-profile>.site-footer{display:none}.page-profile .skip-link:not(:focus){transform:translateY(-200%)}.page-profile a{text-decoration:none}.page-profile :is(a,button):focus-visible{outline:3px solid #edaa0c;outline-offset:3px}.profile-page{max-width:941px;margin:auto;min-height:100dvh;background:linear-gradient(#a7e4ff,#e4f4ff 45%,#dff1ff)}
.profile-top{position:relative;padding-bottom:4px;background:radial-gradient(ellipse at 90% 60%,#dcf2a2aa,transparent 35%),radial-gradient(ellipse at 5% 65%,#edffe3,transparent 34%),linear-gradient(#66caff,#c7edff)}
.profile-header{display:flex;align-items:center;gap:22px;padding:10px 28px;color:white;background:linear-gradient(110deg,#087de5,#004bb9 55%,#0877da);border-radius:0 0 36px 36px;box-shadow:0 6px 15px #1479bb25}
.ph-brand{font:italic 700 50px/1 Georgia,serif;text-shadow:0 3px 2px #063761}.ph-brand span{display:block;margin-top:5px;font:700 12px/1 sans-serif;letter-spacing:4px}.profile-header h1{flex:1;margin:0;text-align:center;font-size:58px;font-weight:800;color:#ffe566;text-shadow:0 3px 0 #845100,0 5px 3px #002b60}.ph-btn{width:76px;height:68px;flex-shrink:0;display:grid;place-items:center;border:2px solid #40d8ff;border-radius:25px;background:linear-gradient(#0483dc,#003778);color:white;cursor:pointer;box-shadow:inset 0 1px 10px #53caff55}.ph-btn svg{width:40px;height:40px}.ph-bell{position:relative}.ph-bell i{position:absolute;right:0;top:-5px;width:18px;height:18px;border-radius:50%;background:linear-gradient(#ff9894,#ff3434)}.ph-avatar{display:block;width:72px;height:72px;flex-shrink:0;overflow:hidden;border:3px solid white;border-radius:50%;background:#78d8ff}.ph-avatar :is(img,svg){width:100%;height:100%;object-fit:cover}
.profile-hero{position:relative;display:flex;align-items:center;min-height:242px;margin:30px 20px 4px;padding:12px 14px;border:3px solid white;border-radius:34px;background:linear-gradient(110deg,#ffffffab,#fffffff0 55%,#e7f8ff88);box-shadow:0 4px 9px #4398c22a}.profile-hero__main{display:flex;align-items:center;gap:26px;width:70%;z-index:1}.profile-avatar{position:relative;flex:0 0 232px;aspect-ratio:1;border:7px solid #ffd231;border-radius:50%;background:#b6edff;box-shadow:0 0 0 3px #fff,0 0 0 6px #ffcf22,0 4px 16px #ebae46;margin:-17px 0 0 6px}.profile-avatar>:is(img,svg){display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}.profile-avatar>a{position:absolute;right:-7px;bottom:0;width:57px;height:57px;display:grid;place-items:center;border:3px solid white;border-radius:50%;background:linear-gradient(#5eeaff,#0080ff);color:white;box-shadow:0 2px 5px #165dab66}.profile-avatar>a svg{width:32px;height:32px}.profile-intro{flex:1;min-width:0}.profile-name-row{display:flex;align-items:center;gap:12px}.profile-name-row h2{flex:1;min-width:0;margin:0;color:#06135b;font-size:42px;line-height:1.35;font-weight:800;overflow-wrap:anywhere}.profile-name-row a{display:grid;place-items:center;flex:0 0 44px;height:44px;border:2px solid white;border-radius:13px;background:#eef8ff;color:#1262c1;box-shadow:0 2px 3px #618fb066}.profile-name-row a svg{width:30px;height:30px}.profile-member-label{font-size:19px;margin:3px 0 14px;line-height:1.5}.profile-level{position:relative;padding:5px 15px 8px 57px;border:2px solid white;border-radius:35px;background:linear-gradient(100deg,#fff2b3,#fff8dc);box-shadow:0 1px 4px #af9d2f22}.profile-level__head{display:flex;align-items:center;gap:5px}.level-star{position:absolute;left:-9px;top:0;width:68px;height:68px;display:grid;place-items:center;color:#ffd528;background:linear-gradient(#ffe37c,#ffa600);border:4px solid #fff1a0;border-radius:24px;box-shadow:0 0 0 2px #ef9900,0 3px 5px #b8802266}.level-star svg{width:49px;height:49px;filter:drop-shadow(0 2px 1px #ca7400)}.profile-level__head strong{padding:1px 16px;border-radius:20px;color:white;background:linear-gradient(#d87900,#934000);font-size:23px;white-space:nowrap}.profile-level__pts{position:absolute;right:18px;top:41px;z-index:1;font-size:13px;color:#061d64;font-weight:700}.level-bar{height:23px;margin-top:3px;border-radius:20px;background:#cce4fb;box-shadow:inset 0 1px 4px #6284ac}.level-bar i{display:block;height:100%;border-radius:20px;background:linear-gradient(#5ff5ff,#00a3ff 55%,#0672ed);box-shadow:inset 0 1px 2px white}.level-hint{margin:7px 0 0;font-size:14px;color:#264786;white-space:nowrap}.profile-hero__foot{position:absolute;right:0;bottom:0;width:30%;overflow:hidden;border-radius:0 31px 31px 0}.profile-mascot{display:block;width:100%;height:auto}
.profile-body{padding:0 22px 22px}.profile-notice{font-size:14px;margin:10px 4px;color:#34517f}.profile-notice a{color:#0064c6;text-decoration:underline}.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 14px}.profile-stats article{display:flex;align-items:center;gap:10px;padding:12px 10px;min-width:0;border:2px solid white;border-radius:24px;background:linear-gradient(130deg,#fff,#f1f8ff);box-shadow:0 4px 4px #5ba6da30}.stat-art{width:36%;height:auto;flex-shrink:0;border-radius:17px}.profile-stats p{margin:0;min-width:0;font-size:16px;font-weight:700;line-height:1.4}.profile-stats strong{display:block;font-size:36px;line-height:1.3;color:#500c0b;overflow-wrap:anywhere}.stat-crown strong{color:#0d227a}.profile-stats span{display:block;font-size:14px;font-weight:500;color:#284791}
.profile-section{overflow:hidden;margin:10px 0;border:2px solid white;border-radius:24px;background:#f7fbff;box-shadow:0 4px 5px #69afe037}.profile-section-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 14px;background:linear-gradient(105deg,#0085f6 10%,#109cff 34%,#d1edff 74%,#f5fbff)}.profile-section-heading h2{display:flex;align-items:center;gap:10px;margin:0;color:white;font-size:29px;font-weight:800;text-shadow:0 2px 2px #0060c3;line-height:1.6}.section-art,.profile-section-heading h2 svg{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px #0753b2)}.profile-section-heading>a,.profile-section-heading>button{background:none;border:0;color:#143d9d;font:inherit;font-size:18px;white-space:nowrap;min-height:44px;cursor:pointer}
.profile-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:10px 12px}.profile-badges article{overflow:hidden;border-radius:22px;text-align:center;background:linear-gradient(#e4f4ff,#eff9f4);padding:0 7px 12px}.profile-badges article:nth-child(2){background:#e2f2ff}.profile-badges article:nth-child(3){background:#f1e3ff}.profile-badges article:nth-child(4){background:#fff2c8}.badge-art{display:block;width:calc(100% + 14px);max-width:none;height:auto;margin:0 -7px}.profile-badges h3{position:relative;margin:-2px 0 0;padding:12px 4px 3px;background:#fbfdff;border-radius:23px 23px 0 0;color:#101633;font-size:19px;font-weight:800;line-height:1.4}.profile-badges p{margin:0;padding:2px 9px 12px;min-height:66px;background:#fbfdff;border-radius:0 0 23px 23px;color:#34549b;font-size:16px;line-height:1.45;box-shadow:0 4px 4px #376f9918}.profile-badges .is-earned h3:before{content:'✓ ';color:#09854a}
.profile-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:10px 14px}.profile-games article{overflow:hidden;border:2px solid #fff;border-radius:22px;background:#fffaf0;box-shadow:0 3px 4px #39688e44}.favorite-art{display:block;width:100%;height:auto}.profile-games article>div{position:relative;margin:-3px 8px 0;padding:7px 8px 10px;border-radius:25px;background:linear-gradient(#fff,#f5faff);text-align:center}.profile-games h3{margin:0;font-size:21px;line-height:1.4;font-weight:800}.profile-games p{margin:3px 8px 8px;min-height:48px;color:#34549b;font-size:16px;line-height:1.45}.profile-games a{display:block;padding:4px;border:1px solid #0076d8;border-radius:24px;background:linear-gradient(#24d1ff,#008aff 50%,#0067ff);color:white;font-size:24px;font-weight:800;box-shadow:inset 0 2px 2px #adf3ff,0 2px 3px #23509a44}
.profile-settings{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}.profile-settings>a,.profile-settings>button{display:flex;align-items:center;gap:15px;min-width:0;padding:10px 12px;border:1px solid #e1edfa;border-radius:22px;background:linear-gradient(120deg,#fff,#f8fcff);color:#0b1447;font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 4px #6495bd18}.setting-icon{flex:0 0 68px;height:62px;display:grid;place-items:center;border:2px solid #ffffff66;border-radius:18px;color:white;background:linear-gradient(#68d9ff,#008cff);box-shadow:inset 0 2px 4px #ffffff70,0 2px 3px #4082c044}.setting-icon svg{width:43px;height:43px;filter:drop-shadow(0 2px 2px #104693)}.profile-settings>:nth-child(2) .setting-icon,.profile-settings>:nth-child(5) .setting-icon{background:linear-gradient(#ff989b,#ff3858)}.profile-settings>:nth-child(3) .setting-icon{background:linear-gradient(#8bf176,#08c13e)}.profile-settings>:nth-child(4) .setting-icon{background:linear-gradient(#bc83ff,#7040f8)}.profile-settings>*>span:not(.setting-icon){flex:1;min-width:0}.profile-settings strong{display:block;font-size:21px;font-weight:800;line-height:1.35}.profile-settings small{display:block;font-size:15px;color:#395799;margin-top:3px;line-height:1.5}.profile-settings>*>svg{width:26px;height:26px;flex-shrink:0;color:#001058}.page-profile .missions-bottom{max-width:941px;padding:5px 14px max(9px,env(safe-area-inset-bottom));border-radius:34px 34px 0 0;background:linear-gradient(110deg,#053774,#001d47 50%,#05315b)}.page-profile .missions-bottom img{width:70px;height:70px}.page-profile .missions-bottom span{font-size:20px}.page-profile .missions-bottom [aria-current]{border:1px solid #cba43e;box-shadow:inset 0 0 20px #ffe26333,0 2px 8px #ffd94f33;color:#ffe86b}
@media(max-width:759px){body.page-profile{padding-bottom:98px}.profile-header{padding:10px 14px;gap:12px;border-radius:0 0 24px 24px}.ph-brand{font-size:31px}.ph-brand span{font-size:7px;letter-spacing:2px}.profile-header h1{font-size:36px}.ph-btn{width:46px;height:46px;border-radius:16px}.ph-btn svg{width:27px;height:27px}.ph-avatar{width:46px;height:46px}.profile-hero{margin:20px 14px 4px;padding:12px;min-height:200px}.profile-hero__main{gap:16px;width:76%}.profile-avatar{flex-basis:145px;border-width:5px;margin-left:0}.profile-avatar>a{width:44px;height:44px}.profile-avatar>a svg{width:25px;height:25px}.profile-name-row h2{font-size:29px}.profile-name-row a{flex-basis:34px;height:34px}.profile-name-row a svg{width:23px;height:23px}.profile-member-label{font-size:13px}.profile-level{padding-left:38px;padding-right:8px}.level-star{width:48px;height:48px;border-radius:18px}.level-star svg{width:33px;height:33px}.profile-level__head strong{font-size:17px;padding:1px 12px}.profile-level__pts{top:33px;right:13px;font-size:11px}.level-bar{height:18px}.level-hint{font-size:11px;white-space:normal}.profile-hero__foot{width:24%}.profile-body{padding:0 14px 15px}.profile-stats{gap:7px}.profile-stats article{gap:5px;padding:8px 6px;border-radius:18px}.profile-stats p{font-size:12px}.profile-stats strong{font-size:25px}.profile-stats span{font-size:11px}.profile-section-heading h2{font-size:23px}.profile-section-heading>a,.profile-section-heading>button{font-size:14px}.section-art,.profile-section-heading h2 svg{width:30px;height:30px}.profile-badges{gap:7px;padding:8px}.profile-badges h3{font-size:15px}.profile-badges p{font-size:12px;padding:2px 5px 10px;min-height:63px}.profile-games{gap:9px;padding:9px}.profile-games h3{font-size:16px}.profile-games p{font-size:12px;min-height:52px;margin:3px 0 8px}.profile-games article>div{margin:-3px 3px 0;padding:7px 5px}.profile-games a{font-size:19px;min-height:42px;display:grid;place-items:center}.profile-settings>a,.profile-settings>button{gap:9px;padding:9px}.setting-icon{flex-basis:44px;height:46px;border-radius:12px}.setting-icon svg{width:29px;height:29px}.profile-settings strong{font-size:16px}.profile-settings small{font-size:12px}.profile-settings>*>svg{width:17px;height:17px}.page-profile .missions-bottom img{width:53px;height:53px}.page-profile .missions-bottom span{font-size:14px}}
@media(max-width:540px){.profile-header{gap:9px;padding:9px 12px}.ph-brand{font-size:25px}.ph-brand span{font-size:6px;letter-spacing:1.4px}.profile-header h1{font-size:29px}.ph-btn,.ph-avatar{width:40px;height:40px}.ph-btn{border-radius:13px}.ph-btn svg{width:24px;height:24px}.profile-hero{margin:18px 12px 5px;padding:14px 12px;min-height:195px;border-radius:25px}.profile-hero__main{width:100%;gap:15px}.profile-avatar{flex-basis:112px}.profile-name-row{gap:7px}.profile-name-row h2{font-size:25px}.profile-member-label{font-size:12px;margin:4px 0 10px}.profile-hero__foot{display:none}.profile-body{padding:0 12px 14px}.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.profile-stats article{padding:9px 12px;gap:12px}.stat-art{width:44px;height:64px}.profile-stats p{font-size:14px}.profile-stats strong{font-size:29px}.profile-stats span{font-size:12px}.profile-section-heading{padding:5px 10px}.profile-section-heading h2{font-size:21px;gap:6px}.profile-badges{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px}.profile-badges article{padding:0 4px 8px;border-radius:16px}.badge-art{width:calc(100% + 8px);margin:0 -4px}.profile-badges h3{font-size:13px;padding:8px 2px 2px;border-radius:14px 14px 0 0;line-height:1.3}.profile-badges p{font-size:11px;line-height:1.35;min-height:44px;padding:2px 3px 8px;border-radius:0 0 14px 14px}.profile-games{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px;scroll-padding:12px}.profile-games article{scroll-snap-align:start}.profile-games h3{font-size:20px}.profile-games p{font-size:15px;min-height:44px}.profile-games a{font-size:22px;min-height:44px}.profile-settings{grid-template-columns:1fr}.profile-settings>a,.profile-settings>button{padding:10px 12px;gap:14px}.profile-settings strong{font-size:18px}.profile-settings small{font-size:13px}.setting-icon{flex-basis:51px;height:51px}.page-profile .missions-bottom{padding-left:6px;padding-right:6px}.page-profile .missions-bottom span{font-size:12px}.page-profile .missions-bottom img{width:49px;height:49px}}
@media(max-width:370px){.ph-brand{font-size:21px}.profile-header{gap:6px}.profile-header h1{font-size:25px}.ph-btn,.ph-avatar{width:35px;height:35px}.profile-avatar{flex-basis:88px}.profile-hero__main{gap:12px}.profile-name-row h2{font-size:22px}.profile-member-label{font-size:11px}.profile-level__head strong{font-size:15px}.profile-section-heading h2{font-size:19px}.profile-stats article{padding:8px;gap:8px}}

#profile-dialog {
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow: auto;
  border: 2px solid #fff;
  padding: 30px;
  border-radius: 26px;
  background: #f7fcff;
  color: #142956;
  box-shadow: 0 12px 65px #082d5666;
}
#profile-dialog::backdrop { background: #062448aa; }
#profile-dialog h2 { font-size: 25px; font-weight: 800; margin: 0 35px 20px 0; }
#profile-dialog p { margin: 12px 0; line-height: 1.8; }
#profile-dialog h3 { font-weight: 700; }
#profile-dialog a { color: #0573d5; }
.profile-close {
  position: absolute;
  right: 15px;
  top: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  font-size: 28px;
  background: #e2effd;
  color: #164a89;
}
.profile-history { list-style: none; padding: 0; }
.profile-history li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #d6e5f4;
}
.profile-history small { grid-column: 1 / -1; color: #66758f; }
.profile-font-options { display: flex; gap: 10px; }
.profile-font-options button {
  padding: 12px;
  border: 1px solid #83bce9;
  border-radius: 14px;
  background: #fff;
  color: #07589e;
}
.profile-large .profile-body p,
.profile-large .profile-settings small { font-size: 15px; }
.profile-large .profile-settings strong { font-size: 16px; }

.page-profile .profile-nav-art{display:block;width:64px;height:68px;margin:5px auto}.page-profile .missions-bottom a{overflow:hidden}.page-profile main.profile-page{padding-top:0}.page-profile .profile-level__pts{background:#daeafb99;border-radius:20px;padding:0 4px}
@media(max-width:759px){.page-profile .profile-nav-art{width:47px;height:49px;margin:3px auto}}