/* Shared moonlit popup language across the game and hero archive. */
body:has(#modal.open) #overlay{
  background:linear-gradient(180deg,#04121ba8,#061823ba),url('./team-night-gate.webp') center 43%/cover;
  backdrop-filter:blur(4px);
}
#modal.modal{
  isolation:isolate;width:min(760px,calc(100vw - 30px));min-height:410px;
  max-height:calc(100dvh - 30px);padding:66px clamp(25px,5vw,78px) 44px;
  overflow:auto;text-align:center;color:#f6e8c7;
  border:1px solid #c7a76e;border-radius:10px;
  background:linear-gradient(180deg,#081b2ce9 0%,#0b2130ef 56%,#071722f8 100%),url('./scene-benming.webp') center/cover;
  box-shadow:0 0 0 5px #071724d9,0 0 0 7px #b9975a99,0 28px 100px #000c,inset 0 0 0 7px #102535,inset 0 0 0 8px #b3945d67;
}
#modal.modal::before{
  content:"";position:absolute;inset:17px;z-index:-1;pointer-events:none;
  border:1px solid #c9aa7270;border-radius:4px;
  background:radial-gradient(circle at 50% 82%,#d9c58548,transparent 6%,transparent 34%),radial-gradient(ellipse at 50% 105%,#3c80905c,transparent 49%);
}
#modal.modal::after{
  content:"◇ ────── 玄 天 ────── ◇";display:block;margin:30px auto 0;
  color:#c8a66b;font:12px/1.5 Georgia,serif;letter-spacing:.22em;opacity:.85;
}
#modal.modal:has(.companion-quote){width:min(1010px,calc(100vw - 30px));min-height:min(630px,calc(100dvh - 30px));}
#modal.modal>.eyebrow{
  display:table;margin:0 auto 22px;padding:6px 26px;border:1px solid #c3a36a9c;
  color:#e5c98d;background:linear-gradient(135deg,#1a3543,#0b2233 60%,#183442);
  box-shadow:0 0 0 4px #081b2b,inset 0 0 0 1px #dec38b57;
  font:700 14px/1.5 var(--display,"KaiTi",serif);letter-spacing:.21em;
}
#modal.modal h2{
  margin:0 auto 20px;color:#f3d899;font:700 clamp(31px,4vw,52px)/1.3 var(--display,"KaiTi",serif);
  text-shadow:0 3px 16px #000,0 0 20px #daa65a43;letter-spacing:.1em;
}
#modal.modal h2::after{
  content:"";display:block;width:min(370px,75%);height:1px;margin:22px auto 0;
  background:linear-gradient(90deg,transparent,#e9c785,transparent);box-shadow:0 0 9px #e9c785;
}
#modal.modal #modalText{margin:0 auto;color:#e7dac0;font-size:17px;line-height:1.9;max-width:790px;}
#modal.modal #modalText .meeting-title{
  display:table;margin:4px auto 28px;padding:6px 25px;border:1px solid #6e9b9b9c;
  color:#9edbd5;background:#12313cb3;font:700 clamp(16px,2vw,22px)/1.5 var(--display,"KaiTi",serif);letter-spacing:.1em;
}
#modal.modal #modalText .companion-quote{
  margin:24px auto 34px;max-width:800px;color:#fff1d2;
  font:700 clamp(25px,3vw,36px)/1.7 var(--display,"KaiTi",serif);
  text-shadow:0 4px 12px #030e18,0 0 18px #e8c07f2c;
}
#modal.modal #modalText p:not(.companion-quote){margin:0;color:#e1d2b5;font-size:16px;line-height:1.8;}
#modal.modal .modal-actions{
  justify-content:center;align-items:stretch;gap:clamp(12px,2vw,30px);
  width:min(800px,100%);margin:43px auto 0;
}
#modal.modal .modal-actions button:not([hidden]){flex:1 1 0;min-height:62px;margin:0!important;padding:13px 20px;border-radius:6px;font:700 clamp(16px,2vw,21px)/1.45 var(--display,"KaiTi",serif);letter-spacing:.03em;}
#modal.modal #companionConfirm{
  color:#302313;border:1px solid #f6d893;
  background:linear-gradient(155deg,#fff1bb,#ddb675 55%,#af7f3d);
  box-shadow:0 0 22px #e9ba6a48,inset 0 0 0 3px #ac783563,inset 0 1px #fff6d9;
}
#modal.modal #companionLater{
  color:#e9dbc0;border:1px solid #b79e70;
  background:linear-gradient(150deg,#254551,#102a39 70%,#0a1c2a);
  box-shadow:inset 0 0 0 3px #091b29,inset 0 0 0 4px #b798665c;
}
#modal.modal .modal-actions button:hover{filter:brightness(1.12);transform:translateY(-2px)}
#modal.modal .modal-dismiss{
  position:absolute;top:24px;right:25px;display:grid;place-items:center;
  width:42px;height:42px;border:1px solid #c5a66e9c;border-radius:50%;
  background:#0b2432e8;color:#efd6a3;box-shadow:0 0 0 3px #081824;
  cursor:pointer;transition:background .2s,transform .2s;
}
#modal.modal .modal-dismiss:hover{background:#284954;transform:rotate(90deg)}
#modal.modal .modal-dismiss:focus-visible{outline:2px solid #ffe1a1;outline-offset:4px}
#modal.modal,.player-dialog,#detailDialog,#faceDialog,
#detailDialog .detail-copy{scrollbar-width:thin;scrollbar-color:#a98c5e #0b2030}
#modal.modal::-webkit-scrollbar,.player-dialog::-webkit-scrollbar,
#detailDialog::-webkit-scrollbar,#faceDialog::-webkit-scrollbar,
#detailDialog .detail-copy::-webkit-scrollbar{width:7px}
#modal.modal::-webkit-scrollbar-track,.player-dialog::-webkit-scrollbar-track,
#detailDialog::-webkit-scrollbar-track,#faceDialog::-webkit-scrollbar-track,
#detailDialog .detail-copy::-webkit-scrollbar-track{background:#0b2030}
#modal.modal::-webkit-scrollbar-thumb,.player-dialog::-webkit-scrollbar-thumb,
#detailDialog::-webkit-scrollbar-thumb,#faceDialog::-webkit-scrollbar-thumb,
#detailDialog .detail-copy::-webkit-scrollbar-thumb{background:#a98c5e;border-radius:8px}

/* Native dialogs share the same navy and gold frame; their working content remains readable. */
.player-dialog,.realm-dialog,.growth-dialog,.journey-dialog,.battle-result-dialog{
  color:#f0e2c4;border:1px solid #c0a069;border-radius:10px;
  background:linear-gradient(180deg,#0b2030f7,#0b1e2cfb),url('./scene-benming.webp') center/cover;
  box-shadow:0 0 0 5px #071725,0 0 0 7px #b398618c,0 28px 100px #000d,inset 0 0 0 7px #102839,inset 0 0 0 8px #b3986159;
}
.player-dialog::backdrop,.realm-dialog::backdrop,.growth-dialog::backdrop,.journey-dialog::backdrop,.battle-result-dialog::backdrop,
#detailDialog::backdrop,#faceDialog::backdrop{
  background:linear-gradient(#04131c9e,#061722c9),url('./team-night-gate.webp') center/cover;
  backdrop-filter:blur(5px);
}
.player-dialog .player-dialog-header{
  position:relative;min-height:110px;padding:25px clamp(24px,4vw,50px);
  color:#f3ddaa;border-bottom:1px solid #c1a26e9e;
  background:linear-gradient(90deg,#102938ed,#162f3dad,#102938ed);
  box-shadow:inset 0 -4px #0a1b29,inset 0 -5px #c9aa7163;
}
.player-dialog .player-dialog-header::after{
  content:"◆";position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  color:#e3c381;background:#0b2030;padding:0 12px;font-size:15px;
}
.player-dialog .player-dialog-header .eyebrow{color:#9fd0c9;letter-spacing:.17em;font-size:12px}
.player-dialog .player-dialog-header h2{color:#f4d895;font:700 clamp(27px,3vw,38px)/1.35 var(--display,"KaiTi",serif);text-shadow:0 3px 13px #020c14}
.player-dialog .player-dialog-close{
  flex:none;width:42px;height:42px;border:1px solid #c5a66e9c;border-radius:50%;
  background:#0b2432;color:#efd6a3;box-shadow:0 0 0 3px #071925;line-height:1;
}
.player-dialog .player-dialog-close:hover{background:#284954;color:#fff4d7}
.player-dialog .player-dialog-body{padding:clamp(22px,3vw,38px);color:#eadfc9;background:radial-gradient(ellipse at 50% 105%,#2f68733b,transparent 56%)}
.player-dialog .player-dialog-body>p{color:#e1d2b7;line-height:1.8}
.player-dialog .player-submit{border-color:#d6b67b;color:#f7e4bd;background:linear-gradient(135deg,#214657,#0c2635);box-shadow:inset 0 0 0 2px #081c28}
.player-dialog .player-submit.gold{color:#362713;background:linear-gradient(120deg,#fff0b8,#d5ac68);box-shadow:0 0 17px #e8bf7145}
.player-dialog .birth-form label,.player-dialog .account-form label{color:#e5d4b2}
.player-dialog .birth-form input,.player-dialog .birth-form select,.player-dialog .account-form input{background:#f6f0e3;color:#302b23;border-color:#bc9d66}
.player-dialog .birth-result:not(.is-noble),.player-dialog .account-summary{color:#3b3224;background:linear-gradient(145deg,#f9f2e3,#e6dbc4);border-color:#c5a875}
.player-dialog .birth-rule-note,.player-dialog .birth-confirm-note,.player-dialog .character-profile-note{color:#ceb992}
.player-dialog .account-tabs button{background:#1b3743;color:#e7d5b4;border-color:#bc9d66}
.player-dialog .account-tabs button[aria-pressed=true]{background:#d5b472;color:#302516}
.player-dialog .battle-result-rewards span{color:#e9d6b2;background:#2943538f;border-color:#bf9d6b}
.player-dialog .battle-result-rewards b{color:#f0d188}
.player-dialog .player-error{color:#ffa897}
.player-dialog a{color:#e8c982}
.journey-dialog .journey-daily{color:#3b3224}
.journey-dialog .journey-daily h3{color:#493826}
.journey-dialog .journey-reward-note,.journey-dialog .journey-record-note,
.journey-dialog .journey-task-list header>span{color:#d9c6a2}
.journey-dialog .journey-task-list h3{color:#f1d99f}
.journey-dialog .journey-task-list h4{color:#f2dfba}
.journey-dialog .journey-task-list p{color:#d2c1a2}
.journey-dialog .journey-task-list .is-complete h4{color:#a7d1ad}
.growth-dialog .growth-wallet{color:#4a3927;background:#e8ddc7}
.growth-dialog .growth-tabs{background:#eee5d5}
.growth-dialog .growth-tabs button{color:#715d42}
.growth-dialog .growth-tabs button[aria-selected=true]{color:#315d50}
.growth-dialog .player-dialog-body{
  margin:13px 18px 18px;border:1px solid #c4a676;border-radius:5px;
  color:#3a2d1f;background:linear-gradient(145deg,#faf5e8,#e8ddca);
  box-shadow:inset 0 0 0 4px #fff8e9;
}
.growth-dialog .player-dialog-body>p{color:#756147}
.growth-dialog .growth-pending{color:#765c2f}
.realm-dialog .realm-travel-summary,.realm-dialog .realm-travel-summary b{color:#e4d1ab}
.realm-dialog .realm-section-title{color:#f0d693;border-color:#b89b5e77}
.realm-dialog .realm-section-title small,.realm-dialog .realm-footer-note{color:#cfba93}
.realm-dialog .realm-expedition-settings{color:#e9d9bb;background:#1b3541}
.realm-dialog .realm-expedition-settings>label{color:#e7c987}

/* The archive's detail and portrait dialogs use the same presentation frame. */
#detailDialog,#faceDialog{
  border:1px solid #c2a36c;border-radius:10px;
  background:linear-gradient(180deg,#0b2030,#0b1b2a);color:#f0dfbc;
  box-shadow:0 0 0 5px #071725,0 0 0 7px #b398618c,0 28px 100px #000d,inset 0 0 0 6px #102839;
}
#detailDialog .detail-header,#faceDialog .detail-header{
  background:linear-gradient(90deg,#122c39,#1b3845,#122c39);color:#f4dfaf;
  border-color:#b99a65;padding:20px 28px;
}
#detailDialog .detail-header small,#faceDialog .detail-header small{color:#a7d3ce}
#detailDialog .detail-header h2,#faceDialog .detail-header h2{color:#f4d895;font-family:"STKaiti","KaiTi",serif;font-size:clamp(25px,3vw,36px)}
#detailDialog .close,#faceDialog .close{border-color:#c1a36e;color:#f1d6a2;background:#17313e}
#detailDialog .detail-copy h3{color:#e7c989;font-size:16px}
#detailDialog .detail-copy p{color:#e3d6bf;font-size:14px}
#detailDialog .fact{background:#17303d;border-color:#a88960}
#detailDialog .fact span{color:#b9aa8d}#detailDialog .fact strong{color:#f5e2b9}
#detailDialog .source-note{color:#bcae91;border-color:#a8896055}
#detailDialog .source-art figcaption,#faceDialog .face-foot{color:#d0be9e}
#detailDialog .source-art a,#faceDialog .face-foot a{color:#efd28c}

@media(max-width:700px){
  #modal.modal{min-height:0;padding:55px 25px 31px}
  #modal.modal:has(.companion-quote){min-height:min(570px,calc(100dvh - 28px))}
  #modal.modal .modal-actions{flex-direction:column;margin-top:25px}
  #modal.modal .modal-actions button:not([hidden]){min-height:54px}
  #modal.modal #modalText .companion-quote{font-size:25px;margin:20px auto}
  .player-dialog .player-dialog-header{min-height:90px;padding:18px 22px}
  .player-dialog .player-dialog-body{padding:20px}
}
@media(prefers-reduced-motion:reduce){#modal.modal .modal-actions button,#modal.modal .modal-dismiss{transition:none}}