/* 2006 website shell, rebuilt with HTML controls and original exported artwork. */
body.retro2006 {
  background: #c4c5e7;
  padding: 36px 16px 22px;
  border-top: 4px solid #65759b;
  color: #403b72;
}
.retro2006 .retroSite {
  width: min(100%, 750px);
  overflow: hidden;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: #6866c6;
  box-shadow: 0 6px 30px #625bb278;
}
.retro2006 .homeHeader {
  display: flex;
  min-height: 160px;
  padding: 17px 24px 18px 42px;
  gap: 28px;
  border: 0;
  background: #97da28 url("/assets/2006/header-gradient.svg") center / 100% 100% no-repeat;
  box-shadow: none;
}
.retro2006 .brand {
  position: relative;
  margin-right: auto;
  padding: 14px 20px;
}
.retro2006 #headerAvatar {
  position: absolute;
  width: 110px;
  height: 120px;
  left: 85px;
  top: 9px;
  pointer-events: none;
}
.retro2006 .welcomeIllustration { position: relative; }
.retro2006 #headerAvatar.gardenAvatar {
  left: 10%;
  top: auto;
  bottom: 14%;
  width: 23%;
  height: auto;
  aspect-ratio: 11 / 12;
}
.retro2006 .originalLogo {
  width: 94px;
  height: 96px;
  object-fit: contain;
}
.headerLoginForm {
  width: 365px;
  max-width: 100%;
  margin: 0;
  padding: 7px 20px 5px;
  border-top: 3px solid #77c52c;
  border-left: 3px solid #77c52c;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(#85c84555, #a2e85b00);
  align-self: stretch;
}
.headerLoginFields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}
.headerLoginFields label {
  display: block;
  color: white;
  font:
    bold 18px Arial,
    sans-serif;
}
.headerLoginFields input {
  display: block;
  width: 100%;
  height: 25px;
  margin-top: 2px;
  border: 2px inset #d8ded5;
  border-radius: 0;
  padding: 2px 5px;
  background: #fff;
  color: #403b72;
  -webkit-text-fill-color: #403b72;
  caret-color: #403b72;
  color-scheme: light;
  font:
    14px Tahoma,
    sans-serif;
}
.headerLoginFields input:is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: #403b72;
  caret-color: #403b72;
  box-shadow: inset 0 0 0 1000px #fff;
}
.headerLoginFields input::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: #514180;
}
.headerLoginActions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-top: 10px;
}
.headerLoginActions > button {
  width: 123px;
  padding: 7px 12px;
  color: #fff;
  border: 3px solid #d3f5b5;
  border-radius: 15px;
  background: #76bf26;
  font:
    bold 18px Arial,
    sans-serif;
}
.rememberName {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  white-space: nowrap;
  color: #273c12;
}
.rememberName input {
  margin: 0;
  accent-color: #76bf26;
}
#headerLoginStatus {
  margin: 4px 0 0;
  min-height: 14px;
  font-size: 11px;
  color: #4a214d;
}
#headerLoginStatus.error {
  color: #7f1749;
}
.memberHeader {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: right;
  color: #51417e;
}
.memberHeader h1 {
  margin: 0 0 3px;
  font-size: clamp(20px, 3vw, 28px);
  font-style: italic;
  text-shadow: 1px 2px #fff;
}
.memberHeader p {
  margin: 0;
  font-size: 12px;
  font-style: italic;
}
.retro2006 .communityMain {
  padding: 35px 16px 36px;
}
.retro2006 .communityEyebrow {
  margin: 0 6px 7px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 4px;
}
.communityModule {
  margin-bottom: 12px;
}
.retro2006 .communityDeck {
  position: relative;
  display: grid;
  grid-template-columns: 90px 68px 145px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  height: 117px;
  min-height: 0;
  padding: 15px 10px 9px 0;
  border: 0;
  border-radius: 0;
  background: url("/assets/2006/community-panel-flex.svg") center / 100% 100% no-repeat;
  color: #fff;
  box-shadow: none;
}
.communityHouses {
  position: relative;
  height: 70px;
  overflow: visible;
  margin-top: -15px;
}
.communityHouses img {
  position: absolute;
  width: 190px;
  max-width: none;
  left: -20px;
  top: -15px;
}
.retro2006 .onlineTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 0 0;
  border: 0;
  text-align: center;
}
.retro2006 .onlineTile span {
  margin: 0;
  font-size: 9px;
  font-weight: normal;
}
.retro2006 .onlineTile img {
  width: 40px;
  height: 40px;
  margin: 0;
  object-fit: contain;
}
.retro2006 .onlineTile strong {
  font-size: 13px;
  font-weight: normal;
  text-shadow: none;
}
.retro2006 .popularTile {
  border: 0;
  padding: 3px 10px 0 12px;
}
.retro2006 .popularTile h2,
.retro2006 .xivTile h2 {
  font-size: 9px;
  font-weight: normal;
  margin: 0 0 4px;
}
.retro2006 .popularList {
  display: grid;
  gap: 1px;
}
.retro2006 .popularList a {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  padding: 1px 0;
  font-size: 10px;
  text-decoration: none;
}
.retro2006 .popularList a:hover {
  text-decoration: underline;
}
.retro2006 .popularList span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.retro2006 .popularList small {
  flex-shrink: 0;
  font-size: 8px;
}
.retro2006 .xivTile {
  border: 0;
  padding: 30px 8px 0 10px;
}
.retro2006 .xivTile p {
  margin: 8px 0 0;
  font-size: 10px;
  line-height: 1.4;
}
.communityWelcome {
  position: absolute;
  left: 43%;
  right: 8px;
  top: 3px;
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
}
.communityMore {
  border: 3px solid #73428f;
  border-radius: 8px;
  padding: 1px 10px;
  background: #b9a6d0;
  color: white;
  font:
    bold 16px Arial,
    sans-serif;
  line-height: 20px;
}
#communityMore {
  position: absolute;
  right: 12px;
  bottom: 10px;
}
.memberDirectory {
  margin-top: -7px;
  padding: 12px 13px 10px;
  border: 5px solid #5954a1;
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: #979bd7;
}
.memberDirectory .launchMain {
  padding: 14px 0;
  gap: 16px;
  grid-template-columns: 0.9fr 1.1fr;
}
.memberDirectory .retroWindow {
  border-color: #d9d1f0;
  box-shadow: none;
}
.memberDirectory .launchList {
  height: 260px;
}
.memberDirectory .windowTitle {
  background: linear-gradient(#ddd7f1, #b6a3d9);
  color: #4d3e76;
}
.memberDirectory .panelHint {
  color: #55487d;
}
.memberDirectory .launchStatus {
  margin: 0;
  color: #49416f;
}
.retro2006 .welcomeWindow {
  position: relative;
  border: 5px solid #5954a1;
  border-radius: 15px;
  background: #b9bbe4;
  box-shadow: none;
}
.retro2006 .welcomeBody {
  padding: 20px 22px;
  background: none;
  gap: 22px;
  align-items: start;
}
.retro2006 .welcomeBody h2 {
  margin-bottom: 14px;
  color: white;
  font:
    bold 28px Arial,
    sans-serif;
}
.retro2006 .welcomeBody p {
  font-size: 12px;
  line-height: 1.8;
  color: #403c69;
}
.retro2006 .welcomeIllustration {
  min-height: 245px;
}
.introActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 0 16px 14px;
}
.joinNow {
  order: 2;
  border: 3px solid #fff;
  border-radius: 12px;
  padding: 5px 10px;
  background: #d0e94d;
  color: #1d172b;
  font:
    bold 18px Arial,
    sans-serif;
  box-shadow: 0 0 0 1px #a0ac81;
  text-shadow: 1px 1px white;
}
.retro2006 footer {
  padding: 13px 20px;
  background: #605cb1;
  color: #edeafa;
  font-size: 10px;
}
.retro2006 #communityStatus:empty {
  margin: 0;
}
.retro2006 .authPanel {
  z-index: 30;
}
@media (max-width: 650px) {
  body.retro2006 {
    padding: 16px 8px;
  }
  .retro2006 .homeHeader {
    padding: 18px 15px;
    gap: 10px;
    min-height: 152px;
  }
  .retro2006 .brand {
    padding: 5px;
  }
  .headerLoginForm {
    width: 320px;
    padding: 7px 10px;
  }
  .headerLoginFields {
    gap: 10px;
  }
  .headerLoginFields label {
    font-size: 15px;
  }
  .headerLoginActions {
    gap: 5px;
  }
  .headerLoginActions > button {
    width: 100px;
    font-size: 16px;
  }
  .rememberName {
    font-size: 10px;
  }
  .retro2006 .communityMain {
    padding: 22px 10px;
  }
  .retro2006 .communityDeck {
    grid-template-columns: 53px 56px minmax(100px, 1fr) minmax(100px, 1fr);
    background: linear-gradient(#7a79cf, #9b9edb);
    border: 4px solid #5954a1;
    border-radius: 16px;
    height: 150px;
    padding: 35px 6px 7px 0;
  }
  .communityWelcome {
    left: 65px;
    top: 7px;
    right: 8px;
    font-size: 10px;
  }
  .communityHouses {
    margin-top: -3px;
  }
  .communityHouses img {
    width: 170px;
    left: -26px;
    top: -10px;
  }
  .retro2006 .popularTile {
    padding: 3px 5px;
  }
  .retro2006 .xivTile {
    padding: 3px 5px;
    grid-column: auto;
    border: 0;
  }
  #communityMore {
    bottom: 6px;
    right: 8px;
  }
  .communityMore {
    font-size: 13px;
  }
  .memberDirectory .launchMain {
    grid-template-columns: 1fr;
  }
  .memberDirectory .roomsWindow {
    grid-row: 1;
  }
  .retro2006 .welcomeBody {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .retro2006 .welcomeIllustration {
    min-height: 220px;
  }
  .memberHeader {
    gap: 10px;
  }
  .memberHeader h1 {
    font-size: 20px;
  }
  .introActions {
    flex-wrap: wrap;
  }
}
@media (max-width: 400px) {
  .retro2006 .homeHeader {
    flex-wrap: wrap;
    justify-content: center;
  }
  .retro2006 .brand {
    margin: 0;
  }
  .headerLoginForm {
    width: 100%;
  }
  .retro2006 .communityDeck {
    grid-template-columns: 0 52px minmax(100px, 1fr) minmax(90px, 1fr);
  }
  .communityHouses {
    display: none;
  }
  .communityWelcome {
    left: 10px;
  }
}

/* Content-sized summary cards keep text inside the original curved frame. */
.retro2006 .onlineTile,
.retro2006 .popularTile,
.retro2006 .xivTile {
  min-width: 0;
  border-radius: 12px;
  background: #6866c6;
  box-sizing: border-box;
}
.retro2006 .onlineTile {
  height: 83px;
  margin-right: 5px;
  padding-top: 4px;
}
.retro2006 .onlineTile span {
  font-size: 10px;
}
.retro2006 .popularTile {
  height: 83px;
  margin-right: 7px;
  padding: 5px 8px;
}
.retro2006 .popularTile h2,
.retro2006 .xivTile h2 {
  font-size: 10px;
  line-height: 13px;
}
.retro2006 .popularList {
  gap: 0;
}
.retro2006 .popularList a {
  padding: 0;
  line-height: 13px;
  min-height: 14px;
  font-size: 11px;
}
.retro2006 .popularList small {
  font-size: 9px;
  white-space: nowrap;
}
.retro2006 .xivTile {
  height: 57px;
  margin: 27px 0 0 14px;
  padding: 5px 9px;
}
.retro2006 .xivTile p {
  margin-top: 6px;
  font-size: 11px;
  line-height: 14px;
  overflow-wrap: anywhere;
}
.retro2006 .authContent h2 {
  max-width: calc(100% - 55px);
}
.retro2006.memberHome .welcomeWindow {
  display: none;
}
@media (max-width: 650px) {
  .retro2006 .communityDeck {
    grid-template-columns: 70px 58px minmax(0, 1fr) minmax(0, 1fr);
  }
  .communityHouses {
    height: 60px;
    margin-top: -8px;
    overflow: visible;
  }
  .communityHouses img {
    width: 145px;
    left: -16px;
    top: -9px;
  }
  .communityWelcome {
    left: 10px;
    right: 10px;
    white-space: normal;
    line-height: 1.2;
  }
  .retro2006 .popularTile {
    padding: 5px;
    margin-right: 4px;
  }
  .retro2006 .xivTile {
    height: 83px;
    margin: 0;
    padding: 5px;
  }
  .retro2006 .popularList a {
    font-size: 10px;
  }
}
@media (max-width: 400px) {
  .retro2006 .communityDeck {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr);
  }
  .communityHouses {
    display: none;
  }
}



/* Long names scroll within their column; counts and icons stay still. */
.retro2006 .roomName { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.retro2006 .roomName > span { display: inline-block; overflow: visible; white-space: nowrap; text-overflow: clip; }
.retro2006 .launchRoom > img, .retro2006 .launchRoom > small { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .retro2006 .roomNameOverflow { text-overflow: ellipsis; } }

/* Logged-in summary and directory share one uninterrupted outer frame. */
.retro2006.memberHome .communityDeck {
  clip-path: inset(0 0 16px 0);
}
.retro2006.memberHome .memberDirectory {
  position: relative;
  margin-top: -16px;
  border-color: #5252a3;
  background: #939adb;
}

.retro2006 .logoutOrb {
  background: transparent url("/assets/logout-power.svg") center / 46px 46px no-repeat;
  cursor: pointer;
}
.retro2006 .logoutOrb:hover { filter: brightness(0.82); }
.retro2006 .logoutOrb:focus-visible { outline: 2px solid #51417e; outline-offset: 3px; }

#homeAdminTools{padding:8px 12px;border:1px solid #eee6ff;border-radius:8px;background:linear-gradient(#f7f2ff,#b8a8d8);color:#403b72;font:12px Tahoma,sans-serif;white-space:nowrap;cursor:pointer}

.talkPageLink{position:absolute;right:1%;top:0;width:52%;height:30px;display:grid;place-items:center;color:white;font-size:12px;font-weight:bold;letter-spacing:3px;text-decoration:none;}
.talkPageLink:hover{text-decoration:underline;}

/* Keep the emblems in place and give the greeting the centre of the header. */
.retro2006 .homeHeader{position:relative;}
.retro2006.memberHome .memberHeader{position:absolute;inset:0;display:block;pointer-events:none;}
.retro2006.memberHome .memberHeader>div{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 330px);text-align:center;pointer-events:auto;}
.retro2006.memberHome .memberHeader h1{font-size:clamp(28px,4vw,38px);line-height:1.12;margin:0 0 6px;text-align:center;overflow-wrap:anywhere;}
.retro2006.memberHome .memberHeader p{font-size:14px;text-align:center;}
.retro2006.memberHome #launchLogout{position:absolute;right:24px;top:50%;transform:translateY(-50%);margin:0;pointer-events:auto;}
.retro2006.memberHome footer{align-items:center;gap:10px;padding-block:8px;}
.retro2006.memberHome footer>span{flex:1;text-align:center;}
.retro2006 footer #homeAdminTools{padding:4px 10px;flex-shrink:0;}
@media(max-width:650px){
 .retro2006.memberHome .memberHeader>div{width:calc(100% - 220px);}
 .retro2006.memberHome .memberHeader h1{font-size:clamp(22px,5vw,30px);}
 .retro2006.memberHome .memberHeader p{font-size:12px;}
 .retro2006.memberHome #launchLogout{right:15px;}
}
@media(max-width:400px){
 .retro2006.memberHome .homeHeader{justify-content:flex-start;flex-wrap:nowrap;}
 .retro2006.memberHome .memberHeader>div{left:56%;width:calc(100% - 170px);}
 .retro2006.memberHome .memberHeader h1{font-size:20px;}
 .retro2006.memberHome .memberHeader p{font-size:10px;}
}

/* Signed-in account summary; the guest summary keeps its original contents. */
.retro2006.memberHome .memberRecentTile h2{margin:0 0 6px;}
.retro2006.memberHome .memberRecentTile #recentlyActiveXivs{margin:0;font-size:11px;line-height:15px;}
#recentlyActiveXivs{display:block;width:100%;min-width:0;height:15px!important;margin-bottom:0;overflow:hidden;white-space:nowrap;line-height:15px;}
#recentlyActiveXivs .recentNamesTicker{display:inline-block;width:max-content;padding-left:100%;animation:recentNamesScroll 18s linear infinite;}
#recentlyActiveXivs:hover .recentNamesTicker{animation-play-state:paused;}
@keyframes recentNamesScroll{from{transform:translateX(0);}to{transform:translateX(-100%);}}
.memberQuickActions{display:flex;align-items:center;justify-content:space-around;gap:12px;width:100%;height:100%;}
.memberQuickActions a,.memberQuickActions button{display:inline-block;margin:0;padding:4px 0;border:0;border-radius:0;background:none;box-shadow:none;color:#fff;text-shadow:none;font-size:15px;font-weight:normal;text-decoration:none;white-space:nowrap;}
.memberQuickActions a:hover,.memberQuickActions button:hover{text-decoration:underline;}
@media(max-width:520px){.memberQuickActions{gap:5px;flex-wrap:wrap;}.memberQuickActions a,.memberQuickActions button{font-size:12px;}}

.homePopup{box-sizing:border-box;width:min(520px,calc(100vw - 30px));max-height:85vh;overflow:auto;padding:22px;border:2px solid #f3f0e2;border-radius:14px;background:#d2bcea;color:#403b72;}
.homePopup[hidden]{display:none!important;}.homePopup::backdrop{background:#25204466;}
.homePopup h2{padding-right:42px;margin-top:0;}.homePopup .homePopupClose{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;padding:0;background:transparent url('/assets/2006/lists/close.png') center/40px 40px no-repeat;box-shadow:none;}
.homePopup label{display:block;margin:9px 0 5px;}.homePopup input:not([type=checkbox]),.homePopup textarea{box-sizing:border-box;max-width:100%;width:100%;}.homePopup input[type=range]{width:100%;}.homePopup fieldset{margin:14px 0;min-width:0;}.homePopup button{margin:6px 4px 6px 0;}.homePopup .mailHeadingIcon{width:26px;vertical-align:middle;}.homePopup .mailRow{display:block;width:100%;text-align:left;padding:9px;}.homePopup .mailRow.unread{font-weight:bold;}.homePopup #mailText{white-space:pre-wrap;overflow-wrap:anywhere;}.homePopup .mailSurface{min-height:150px;}.homePopup #mailComposer label{display:block;}.homeEmailSettings{border-bottom:1px solid #bca0d6;padding-bottom:12px;}
#mailButton.hasUnreadMail::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#dc2525;margin-left:4px;vertical-align:top;}

.memberQuickActions>#homeVioBalance{display:inline-block;padding:4px 0;margin:0;color:#fff;font-size:15px;font-weight:normal;white-space:nowrap;cursor:default;}
@media(max-width:520px){.memberQuickActions>#homeVioBalance{font-size:12px;}}