.room-bg { background-image: url('../assets/My Collection/my_room_background_1.webp'); }
.card-shell.full-card .card-art { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.card-shell.full-card .card-border { display: none; }
.card-shell.full-card .card-title-overlay { display: flex; }
.card-shell.full-card .card-front { background: transparent; }
.record-tab[hidden] { display: none; }
.side-menu .fgo-button#toggle-background { background: linear-gradient(140deg,#6b65d8,#37358e); }
.side-menu .arcade-button{
  display:grid;
  place-items:center;
  align-content:center;
  text-decoration:none;
  background:linear-gradient(140deg,#53226f,#132d65 58%,#0a6f8c);
  border-color:#f2d983;
}
.side-menu .arcade-button .menu-icon{line-height:36px;color:#e7bbff;text-shadow:0 0 10px #c357ff}
.side-menu .summon-button{
  display:grid;place-items:center;align-content:center;text-decoration:none;
  background:linear-gradient(140deg,#197d8d,#153c77 55%,#5c2c82);
  border-color:#f2d983;
}
.side-menu .summon-button .menu-icon{line-height:36px;color:#fff3ad;text-shadow:0 0 10px #8ff3ff}

/* Saint Graph sits beneath the spirit-origin selector as one wide plate. */
.saint-graph-button{
  position:absolute;z-index:9;right:80px;top:530px;width:300px;height:60px;padding:0 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:2px solid #e6c876;outline:0;
  background:linear-gradient(135deg,#0d3b5c,#1a5f8a 50%,#0d3b5c);
  box-shadow:0 3px 10px #001b2d,inset 0 0 0 1px rgba(255,255,255,.08);
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  color:#fff;text-shadow:0 2px 3px #001b2d;cursor:pointer;
}
.saint-graph-button[hidden]{display:none}
.saint-graph-button .menu-icon{font-size:22px;line-height:1}
.saint-graph-button b{font-size:17px}

/* CSS-only servant record panels: quiet charcoal surfaces with FGO-style cut corners. */
.record-panel > .fgo-panel,
.record-panel > .collection-grid,
.record-panel > .voice-record,
.record-panel > .battle-viewer {
  background-image: none !important;
  background-color: rgba(22, 31, 35, .96);
  border: 1px solid rgba(211, 179, 91, .48);
  outline: 1px solid rgba(0, 0, 0, .46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 5px 14px rgba(0, 0, 0, .24);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}

.record-panel > .fgo-panel > h3,
.record-panel > .profile-panel > h3,
.record-panel > .battle-viewer > h3 {
  border-bottom: 1px solid rgba(211, 179, 91, .32);
  background: linear-gradient(90deg, rgba(231, 238, 240, .96), rgba(190, 207, 211, .78));
}

.record-panel > .status-box,
.record-panel > .concept-box,
.record-panel > .skill-panel,
.record-panel > .passive-panel,
.record-panel > .noble-panel,
.record-panel > .traits-panel,
.record-panel > .profile-panel {
  background-image: none !important;
}

.record-title > div:first-child {
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-width: 0;
  white-space: nowrap;
}

.record-title h1,
.record-title span {
  white-space: nowrap;
}

.record-title h1 {
  font-size: 38px;
  flex: 0 1 auto;
}

.record-title span {
  flex: 0 0 auto;
}

.parameter-panel h3 { margin-bottom: 0; }
.parameter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 18px 20px 20px;
}

.parameter-grid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  border-bottom: 1px solid rgba(211, 179, 91, .18);
  padding-bottom: 6px;
}

.parameter-grid span {
  color: #b9d0d8;
  font-family: Arial, sans-serif;
  font-size: 15px;
}

.parameter-grid b {
  color: #f7d75a;
  font-size: 22px;
  margin-left: 8px;
}

.parameter-apex {
  padding: 25px 20px 28px;
  color: #f7d75a;
  font-family: Matisse, serif;
  font-size: 25px;
  letter-spacing: .05em;
  text-align: center;
}

.dialogue-box {
  bottom: 0;
  height: 230px;
  z-index: 12;
}

#dialogue-text {
  max-height: 120px;
  overflow: visible;
}

/* Every Lily expression uses one fixed overlay box; no face-specific drift. */
.lily-expression {
  left: 26.5597% !important;
  top: 0 !important;
  width: 45.6328% !important;
  height: 77.8115% !important;
  transform: none !important;
}

.music-control{position:absolute;top:13px;right:18px;z-index:2}
.music-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  border: 2px solid #d7edf3;
  color: #123b58;
  background: linear-gradient(#fbffff, #c8dce3);
  box-shadow: 0 2px 7px #001b2d, inset 0 0 0 2px #edf7fa;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  cursor: pointer;
  font-size: 28px;
}
.hud { padding-right: 90px; }
.music-button.playing { color: #b42362; box-shadow: 0 0 16px #ff8fc4, inset 0 0 0 2px #fff2f8; }
.volume-toggle{position:absolute;top:43px;right:-4px;width:27px;height:27px;border:1px solid #d7edf3;border-radius:50%;background:#123b58;color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transform:scale(.7);transition:opacity .18s,transform .18s}
.music-control:hover .volume-toggle,.music-control:focus-within .volume-toggle,.volume-toggle[aria-expanded="true"]{opacity:1;transform:scale(1)}
.volume-popover{position:absolute;top:76px;right:-22px;width:116px;padding:10px 9px 8px;display:grid;gap:5px;background:#edf7f8;border:2px solid #d7edf3;box-shadow:0 4px 12px #001b2d;color:#123b58;opacity:0;pointer-events:none;transform:translateY(-5px);transition:opacity .18s,transform .18s;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.music-control:hover .volume-popover,.music-control:focus-within .volume-popover,.volume-toggle[aria-expanded="true"] + .volume-popover{opacity:1;pointer-events:auto;transform:translateY(0)}
.volume-popover span{font-size:9px;letter-spacing:.15em;text-align:center}.volume-popover input{width:98px;accent-color:#b42362}

.about-screen { display: grid; place-items: center; background: #041c2ac7; backdrop-filter: blur(5px); }
.about-page {
  position: relative;
  width: 1320px;
  height: 900px;
  overflow: auto;
  padding: 36px 54px 54px;
  color: #e8f6f8;
  background: linear-gradient(135deg, rgba(35, 54, 61, .94), rgba(10, 24, 30, .97)), url('../assets/My Collection/servant_Info_background.webp') center/cover;
  border: 1px solid rgba(222, 190, 103, .72);
  box-shadow: 0 18px 70px #00111e, inset 0 0 0 1px rgba(255,255,255,.05);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
.about-close { position: absolute; left: 24px; top: 22px; z-index: 2; }
.about-heading { padding: 8px 0 24px 150px; border-bottom: 1px solid rgba(222,190,103,.42); }
.about-heading small, .about-promo small, .friend-code small { color: #72e2f5; letter-spacing: .2em; }
.about-heading h1 { margin: 5px 0; color: #fff; font-family: Matisse, serif; font-size: 48px; }
.about-heading span { color: #d8b968; font-size: 14px; letter-spacing: .1em; }
.about-content { display: grid; grid-template-columns: 46% 1fr; gap: 34px; padding: 30px 0; }
.about-portrait { width: 100%; max-height: 500px; object-fit: cover; border: 1px solid rgba(222,190,103,.56); box-shadow: 0 8px 24px #0008; }
.about-copy { font-family: Arial, sans-serif; font-size: 19px; line-height: 1.55; }
.about-copy p { margin: 0 0 20px; }
.about-copy a { color: #86e8ff; }
.friend-code { margin-top: 28px; padding: 16px 20px; border: 1px solid rgba(222,190,103,.48); background: #101e24aa; }
.friend-code strong { display: block; margin-top: 6px; color: #ffe27a; font: 28px Matisse, serif; letter-spacing: .12em; }
.about-promo { display: grid; grid-template-columns: 420px 1fr; gap: 30px; align-items: center; padding-top: 28px; border-top: 1px solid rgba(222,190,103,.42); }
.about-promo img { width: 420px; height: 630px; object-fit: contain; object-position: center; border: 1px solid rgba(222,190,103,.56); box-shadow: 0 8px 24px #0008; }
.about-promo h2 { margin: 8px 0; color: #fff; font: 32px Matisse, serif; }
.about-promo p { margin: 0; font: 18px Arial, sans-serif; color: #c6d9de; }
.site-credits{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:28px;padding-top:18px;border-top:1px solid rgba(222,190,103,.42)}
.credits-label{color:#72e2f5;letter-spacing:.2em;font-size:12px}
.official-credits{flex:1 1 100%;margin:0;color:#c6d9de;font:14px/1.45 Arial,sans-serif}
.credits-popup{display:flex;align-items:center;gap:18px}
.credits-popup a{display:block;padding:5px 8px;border:1px solid rgba(222,190,103,.42);background:#101e24aa;transition:filter .2s,transform .2s}
.credits-popup a:hover{filter:brightness(1.25);transform:translateY(-2px)}
.credits-logo{display:block;width:150px;height:48px;object-fit:contain}
.text-enter{animation:dialogueTextIn .24s ease both}
@keyframes dialogueTextIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* My Room buttons use the user's recolorable beveled plate. */
#toggle-background,#open-about{
  background-color:#0786b7;
  background-image:url('../assets/My Collection/button_my_room.webp');
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  background-blend-mode:multiply;
}
#open-about{background-color:#7a2d91}

.status-portrait{position:relative;width:230px;height:230px;flex:0 0 230px;display:grid;place-items:center}
.skill-lore{display:block;margin-top:10px;color:#e7c978;font-style:italic;line-height:1.35}
.np-invocation{color:#f1d891!important;font-style:italic}
.status-portrait .profile-portrait-art{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;-webkit-mask-image:url('../assets/My Collection/profile_border_mask.webp');mask-image:url('../assets/My Collection/profile_border_mask.webp');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.status-portrait .profile-border{position:absolute;z-index:2;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}

.question-launcher{position:absolute;z-index:13;left:165px;bottom:239px;width:128px;height:96px;display:flex;align-items:center;justify-content:center;gap:4px;padding:4px;border:0;background:transparent;color:#e8f7ff;cursor:pointer;filter:drop-shadow(0 3px 4px #001521);transition:filter .2s,opacity .2s,transform .2s}
.question-launcher img{width:108px;height:81px;object-fit:contain}
.question-launcher span{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.12em;text-shadow:0 2px 3px #001521;white-space:nowrap}
.question-launcher:hover{filter:drop-shadow(0 0 8px #8feaff) brightness(1.2);transform:translateY(-2px)}
.question-launcher.is-playing,.question-launcher:disabled{opacity:.32;filter:brightness(.32) grayscale(1);cursor:default;pointer-events:none;transform:none}

/* Voice volume lives beside the music control and starts at 65%. */
.voice-volume-toggle{position:absolute;top:43px;right:30px;width:27px;height:27px;border:1px solid #d7edf3;border-radius:50%;background:#123b58;color:#fff;font-size:13px;line-height:1;cursor:pointer;opacity:0;transform:scale(.7);transition:opacity .18s,transform .18s}
.music-control:hover .voice-volume-toggle,.music-control:focus-within .voice-volume-toggle,.voice-volume-toggle[aria-expanded="true"]{opacity:1;transform:scale(1)}
.voice-volume-popover{position:absolute;top:76px;right:108px;width:116px;padding:10px 9px 8px;display:grid;gap:5px;background:#edf7f8;border:2px solid #d7edf3;box-shadow:0 4px 12px #001b2d;color:#123b58;opacity:0;pointer-events:none;transform:translateY(-5px);transition:opacity .18s,transform .18s;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.music-control:hover .voice-volume-popover,.music-control:focus-within .voice-volume-popover,.voice-volume-toggle[aria-expanded="true"] + .voice-volume-popover{opacity:1;pointer-events:auto;transform:translateY(0)}
.voice-volume-popover span{font-size:9px;letter-spacing:.15em;text-align:center}.voice-volume-popover input{width:98px;accent-color:#b42362}
.dialogue-box{cursor:pointer}

.valentine-stage{width:min(1500px,calc(100% - 160px));height:min(900px,calc(100% - 120px));padding:38px 40px;background:linear-gradient(135deg,#4a123cdd,#160c27e8);border:3px solid #e3bd74;box-shadow:0 16px 55px #0b0618cc;position:relative;overflow:hidden}
.valentine-stage>.back-button{position:absolute;left:40px;top:38px;z-index:8}
.valentine-heading{position:absolute;z-index:2;left:330px;right:350px;top:42px;text-align:center}
.valentine-heading small{display:block;color:#e7cbd9;letter-spacing:.28em;font-size:12px}
.valentine-heading h1{margin:20px 0 0;font-family:Matisse,Georgia,serif;font-size:48px;line-height:1.08;color:#fff;white-space:normal}
.valentine-stage>#valentine-ce{position:absolute;z-index:1;left:95px;top:125px;width:525px;height:660px;object-fit:contain;border:3px solid #e8c673;box-shadow:0 0 25px #efb9e466;background:#160d25}
.valentine-dialogue{left:650px;right:345px;top:190px;bottom:82px;min-height:0;padding:34px 34px 78px;background:linear-gradient(145deg,#fffdfd,#f3e6ec);border:3px solid #c98da4;box-shadow:0 8px 22px #12051caa;color:#3a1634;z-index:4;overflow:auto}
.valentine-dialogue strong{display:block;font-size:22px;margin-bottom:17px}
.valentine-dialogue p{font-size:23px;line-height:1.55;margin:0;max-height:none;overflow:visible}
.valentine-dialogue button{position:absolute;right:30px;bottom:22px}
.valentine-choices{z-index:6;top:128px;right:24px;width:276px;display:grid;gap:12px}
.valentine-choices button{min-height:126px;padding:8px;display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;text-align:left;background:#24152dcc;border:2px solid #c88aa9;color:#fff;cursor:pointer}
.valentine-choices button.selected,.valentine-choices button:hover{border-color:#ffe18b;box-shadow:0 0 14px #f8c9e277}
.valentine-choices img{width:88px;height:108px;object-fit:contain;background:#160d25}
.valentine-choices span{font-size:15px;line-height:1.2}

@media (max-width:1100px){.valentine-heading{left:250px;right:280px}.valentine-heading h1{font-size:38px}.valentine-stage>#valentine-ce{left:55px;width:430px;height:590px}.valentine-dialogue{left:520px;right:280px}}

/* Grand Ruler Kasumi */
.origin-tabs .kasumi-tab{
  grid-column:auto;
  background:linear-gradient(135deg,#163a69,#317bb4 48%,#8ccfe5);
  border-color:#d8f5ff;
}
.origin-tabs .kasumi-tab.locked{
  filter:grayscale(.85) saturate(.35);
  opacity:.5;
  background:linear-gradient(135deg,#37434f,#52616d);
  border-color:#81919b;
}
.origin-tabs .kasumi-tab.locked::before{content:"◇ ";color:#c5d2d8}
.origin-tabs .kasumi-tab.active{
  background:linear-gradient(135deg,#f7d670,#72c9e5 48%,#254f91);
  box-shadow:0 0 18px #8ee8ff;
}
.card-shell.kasumi-frame .card-back img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.np-banner strong{display:inline-block;margin-left:16px;}
.room-bg{transition:opacity .3s ease,filter .6s ease;}
.room-bg.is-changing{opacity:.18;}
@keyframes saintPanRight{from{transform:translateX(72px);opacity:.15}to{transform:translateX(0);opacity:1}}
@keyframes saintPanLeft{from{transform:translateX(-72px);opacity:.15}to{transform:translateX(0);opacity:1}}
#info-screen.saint-pan-right .card-shell{animation:saintPanRight .42s cubic-bezier(.2,.7,.2,1) both}
#info-screen.saint-pan-left .card-shell{animation:saintPanLeft .42s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:1100px){
  .game{width:100vw;height:100dvh;transform:translate(-50%,-50%) scale(var(--game-scale,1));}
  .card-column{min-width:0;overflow:hidden;padding-left:4px;padding-right:4px;}
  .card-shell{width:min(510px,100%);height:auto;aspect-ratio:2/3;}
  .card-back img{width:100%;height:100%;object-fit:contain;}
  .card-inner{-webkit-transform-style:preserve-3d;}
  .card-face{-webkit-backface-visibility:hidden;}
  .record-title{padding-inline:10px;}
  .record-title h1{font-size:clamp(25px,5vw,42px);}
  .record-title span{font-size:clamp(12px,2.5vw,18px);}
}
@media (max-width:700px){
  .hud{padding-left:8px;padding-right:8px;height:62px;}
  .master-block strong{font-size:15px;}.master-block span{font-size:8px;}
  .hud-resources{gap:4px;}.hud-resources>div{min-width:0;height:38px;padding:4px 7px;}.hud-resources img{width:22px;height:22px;}.hud-resources b{font-size:12px;}
  .side-menu{left:5px;top:74px;width:70px;gap:6px;}.fgo-button,.info-side-button{height:62px;}.fgo-button b{font-size:9px;}.menu-icon{font-size:23px;line-height:26px;}
  .room-stage{left:78px;right:6px;top:62px;bottom:120px;}
  .spirit-panel{left:78px;right:6px;top:72px;width:auto;padding:7px;max-height:54vh;overflow:auto;}
  .spirit-title strong{font-size:18px;}.origin-tab{padding:8px 5px;font-size:10px;}.talk-button{padding:7px 8px;}
  .dialogue-box{left:78px;right:6px;height:150px;}.dialogue-box p{left:28px;right:22px;top:55px;font-size:16px;}.speaker-name{left:18px;top:28px;font-size:16px;}
  .record-panel{height:calc(100dvh - 190px);}.record-tabs{gap:5px;}.record-tab{font-size:11px;padding:10px 4px;}.status-main{grid-template-columns:110px 1fr;padding-inline:8px;}.status-portrait{width:100px;height:100px;flex-basis:100px;}.status-main p{font-size:13px;word-spacing:2px;}.level-row strong{font-size:40px;}.level-row{height:65px;padding-inline:10px;}.skill-panel article{grid-template-columns:70px 70px 1fr;gap:8px;padding:10px;}.skill-panel article>img{width:60px;height:60px;}.skill-panel h4{font-size:16px;}.skill-panel p,.profile-panel p{font-size:14px;}.np-record{grid-template-columns:1fr!important;}.noble-panel article{margin:8px;}.command-cards{gap:5px;padding:8px;}.command-card{width:19%!important;}
}
.card-shell.kasumi-frame .card-title-overlay strong{
  color:#e9f9ff;
  text-shadow:-2px -2px 0 #08224a,2px -2px 0 #08224a,-2px 2px 0 #08224a,2px 2px 0 #08224a,0 0 9px #54c9f1;
}
.card-shell.kasumi-frame .card-title-overlay span{color:#fff7d0}
.kasumi-support>img{
  width:170px;
  height:170px;
  object-fit:contain;
  filter:drop-shadow(0 0 11px #75ddf5);
}
.kasumi-support b{color:#8be8ff}
.kasumi-battle-stage{
  position:relative;
  height:650px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    linear-gradient(#061b2b28,#07131dcc),
    radial-gradient(circle at 50% 72%,#8ceaff42,transparent 40%),
    url('../assets/My Collection/my_room_background_0.webp') center/cover;
}
.kasumi-battle-stage::after{
  content:"";
  position:absolute;
  left:15%;
  right:15%;
  bottom:45px;
  height:35px;
  border-radius:50%;
  background:#02090ec9;
  filter:blur(12px);
}
.kasumi-battle-stage img{
  position:relative;
  z-index:2;
  width:610px;
  height:610px;
  object-fit:contain;
  animation:kasumiBattleIdle 3.2s ease-in-out infinite;
  filter:drop-shadow(10px 16px 13px #0009);
}
.kasumi-battle-sigil{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:14px;
  width:620px;
  height:190px;
  transform:translateX(-50%);
  border:3px solid #8be8ff;
  border-radius:50%;
  box-shadow:0 0 28px #64d9f2,inset 0 0 24px #64d9f266;
  opacity:.52;
}
.kasumi-battle-caption{
  display:flex;
  align-items:center;
  gap:24px;
  padding:18px 26px;
  border:1px solid #6f9dab;
  background:#132a35d9;
  color:#cfe6eb;
  font-family:Arial,sans-serif;
  font-size:18px;
  line-height:1.5;
}
.kasumi-battle-caption b{
  display:block;
  flex:0 0 auto;
  color:#88e2f2;
  font-family:Corpid,Arial,sans-serif;
  letter-spacing:.12em;
}
@keyframes kasumiBattleIdle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* Rebuilt voice archive */
.topic-modal{width:min(1180px,calc(100vw - 42px));max-height:min(900px,calc(100vh - 42px));overflow:hidden;background:linear-gradient(145deg,#f7fcfd 0%,#c9dce2 52%,#8faeba 100%);border-color:#f5d991}
.topic-modal header{height:auto;min-height:116px;padding:18px 24px;align-items:flex-start}
.topic-modal header>div{min-width:0}
.topic-modal header h2{margin:4px 0 2px;font-family:Matisse,serif;font-size:32px}
.topic-modal header p{margin:4px 0 0;color:#476879;font:15px Arial,sans-serif}
.topic-filter{display:flex;flex-wrap:wrap;gap:9px;padding:14px 20px;background:#173d52}
.topic-filter button{min-width:145px;padding:11px 15px;font-size:14px}
.topic-list{height:clamp(360px,calc(100vh - 245px),690px);padding:18px 20px 26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:11px 14px;background:linear-gradient(180deg,#dceaf0cc,#b9d0d9aa)}
.topic-choice{min-height:100px;margin:0;grid-template-columns:48px 1fr 25px;border:1px solid #7a9eae;border-radius:3px;clip-path:none;background:linear-gradient(145deg,#ffffff,#e3eef1);box-shadow:0 2px 5px #17465b44;transition:transform .16s,border-color .16s,box-shadow .16s}
.topic-choice:hover{transform:translateY(-2px);border-color:#00a8df;box-shadow:0 5px 13px #17465b55}
.topic-choice>span{font-size:19px;font-weight:bold;color:#168bb5}
.topic-choice strong{font-size:16px;line-height:1.25;color:#183f55}
.topic-choice small{font:12px/1.35 Arial,sans-serif;color:#587584}
.topic-choice>b{font-size:25px;color:#159dc9}
.topic-choice-battle,.topic-choice-noble,.topic-choice-growth{background:linear-gradient(145deg,#f7fbfc,#c9dce4)}
.voice-archive-group{margin-bottom:18px}
.voice-archive-group h3{margin:0;padding:10px 14px;background:#173d52;color:#e8f8fc;font-size:15px;letter-spacing:.12em}
.voice-archive-group .voice-record{padding:10px}
.voice-record{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.voice-record button{min-height:74px;border-radius:3px}
@media(max-width:760px){.topic-list{grid-template-columns:1fr}.topic-filter button{flex:1 1 44%}.topic-choice{min-height:86px}.topic-modal header h2{font-size:24px}}

/* Tablet/mobile pass: use the viewport directly instead of scaling it twice. */
.servant-stack{
  transform:translateX(-50%) translateY(var(--room-sprite-y,0px)) scale(var(--room-sprite-scale,1));
  transform-origin:50% var(--room-sprite-origin-y,100%);
}
@keyframes swipeRight{
  from{transform:translateX(calc(-50% + 150px)) translateY(var(--room-sprite-y,0px)) scale(var(--room-sprite-scale,1));opacity:0}
  to{transform:translateX(-50%) translateY(var(--room-sprite-y,0px)) scale(var(--room-sprite-scale,1));opacity:1}
}
@keyframes swipeLeft{
  from{transform:translateX(calc(-50% - 150px)) translateY(var(--room-sprite-y,0px)) scale(var(--room-sprite-scale,1));opacity:0}
  to{transform:translateX(-50%) translateY(var(--room-sprite-y,0px)) scale(var(--room-sprite-scale,1));opacity:1}
}

@media (max-width:1366px){
  html,body{
    width:100%;
    height:100%;
    height:100dvh;
    overscroll-behavior:none;
    touch-action:manipulation;
  }
  button,a{-webkit-tap-highlight-color:transparent}
  .game{
    width:100vw;
    height:100dvh;
    max-width:none;
    transform:translate(-50%,-50%);
  }
  .hud{
    height:68px;
    padding:6px 74px 6px 90px;
  }
  .master-block{gap:8px}
  .master-level{padding:8px 10px}
  .master-block strong{font-size:18px}
  .master-block span{font-size:9px}
  .hud-resources{gap:5px}
  .hud-resources>div{min-width:108px;height:44px;padding:5px 9px;gap:5px}
  .hud-resources img{width:26px;height:26px}
  .hud-resources b{font-size:13px}
  .ap-meter{width:42px}
  .music-control{top:8px;right:9px}
  .music-button{width:48px;height:48px}
  .side-menu{
    left:7px;
    top:76px;
    width:74px;
    gap:7px;
  }
  .fgo-button,.info-side-button{min-height:52px;height:64px}
  .menu-icon{font-size:25px;line-height:28px}
  .fgo-button b{font-size:10px}
  .room-stage{
    left:86px;
    right:316px;
    top:68px;
    bottom:0;
    overflow:hidden;
  }
  .servant-stack[data-form-group="alter"]{--room-sprite-y:-150px}
  .servant-aura{
    width:min(650px,90vw);
    height:min(650px,90vw);
  }
  .swipe-arrow{width:62px;height:88px}
  .swipe-arrow.left{left:3px}
  .swipe-arrow.right{right:3px}
  .swipe-hint,.bond-badge{display:none}
  .spirit-panel{
    right:8px;
    top:76px;
    width:300px;
    max-height:calc(100dvh - 270px);
    padding:8px;
    overflow:auto;
    scrollbar-width:thin;
  }
  .spirit-title{padding:8px 10px}
  .spirit-title span{font-size:9px}
  .spirit-title strong{font-size:20px}
  .spirit-title small{font-size:9px}
  .origin-tabs{gap:5px;margin-top:6px}
  .origin-tab{
    min-height:42px;
    padding:6px 4px;
    font-size:10px;
  }
  .saint-graph-button{
    right:14px;
    top:clamp(365px,52vh,500px);
    width:280px;
    height:52px;
  }
  .dialogue-box{
    left:88px;
    right:8px;
    bottom:0;
    height:180px;
  }
  .speaker-name{left:22px;top:37px;font-size:18px}
  .dialogue-box p{
    left:45px;
    right:34px;
    top:66px;
    max-height:76px;
    font-size:19px;
  }
  .dialogue-controls{left:39px;right:26px;bottom:11px}
  .question-launcher{
    left:88px;
    bottom:174px;
    width:96px;
    height:76px;
  }
  .question-launcher img{width:82px;height:64px}

  /* Safari on iPad can discard the rear face of a preserve-3d card.
     Cross-fade the two real faces instead, retaining the flip control. */
  .card-inner,
  .card-shell.flipped .card-inner{
    transform:none;
    -webkit-transform:none;
    transform-style:flat;
    -webkit-transform-style:flat;
  }
  .card-face{
    visibility:visible;
    opacity:0;
    transform:none;
    -webkit-transform:none;
    backface-visibility:visible;
    -webkit-backface-visibility:visible;
    transition:opacity .28s ease,transform .28s ease;
  }
  .card-front{
    z-index:2;
    opacity:1;
    transform:scale(1);
    -webkit-transform:scale(1);
  }
  .card-back{
    z-index:1;
    opacity:0;
    transform:scale(.96);
    -webkit-transform:scale(.96);
    pointer-events:none;
    background:radial-gradient(circle at 50% 45%,#305b6d,#071a27 72%);
  }
  .card-shell.flipped .card-front{
    z-index:1;
    opacity:0;
    transform:scale(.96);
    -webkit-transform:scale(.96);
    pointer-events:none;
  }
  .card-shell.flipped .card-back{
    z-index:2;
    opacity:1;
    transform:scale(1);
    -webkit-transform:scale(1);
    pointer-events:auto;
  }
  .card-back img,
  .card-shell.kasumi-frame .card-back img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }

  .info-screen{
    grid-template-columns:72px minmax(270px,34vw) minmax(0,1fr);
    gap:8px;
    padding:10px 10px 12px 6px;
    overflow:hidden;
  }
  .info-close{left:7px;top:8px;width:66px;padding:11px 5px}
  .info-side{padding-top:64px;gap:8px}
  .info-side-button{width:64px;height:62px;min-height:62px}
  .card-column{
    min-width:0;
    padding:58px 4px 8px;
    align-content:start;
    overflow:visible;
  }
  .card-shell,
  .card-shell.grand-frame,
  .card-shell.beast-frame{
    width:min(410px,100%);
    height:auto;
    aspect-ratio:2/3;
  }
  .flip-label{
    width:58px;
    height:50px;
    margin-top:6px;
    padding:6px 10px;
  }
  .flip-label img{width:100%;height:100%;object-fit:contain}
  .card-pips{gap:6px;margin-top:6px}
  .card-pips button{width:28px;min-width:28px;height:14px}
  .record{padding:0;overflow:hidden}
  .record-title{height:70px;padding:0 8px}
  .record-title h1{font-size:clamp(24px,3.1vw,38px)}
  .record-title span{font-size:clamp(11px,1.5vw,17px)}
  .record-stars{font-size:22px}
  .record-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:7px}
  .record-tab{min-height:42px;padding:7px 3px;font-size:10px}
  .record-panel{
    height:calc(100dvh - 172px);
    padding:0 4px 22px;
    -webkit-overflow-scrolling:touch;
  }
  .record-swipe{width:50px;height:76px}
  .record-swipe.left{left:68px}
  .record-swipe.right{right:2px}
  .level-row{height:70px;padding:8px 14px}
  .level-row strong{font-size:45px}
  .status-main{grid-template-columns:150px minmax(0,1fr);padding:0 12px 14px}
  .status-portrait{width:140px;height:140px;flex-basis:140px}
  .status-main p{font-size:15px;word-spacing:2px}
  .bond-row{padding:14px;gap:14px}
  .bond-row img{width:min(220px,42%)}
  .parameter-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:14px}
  .skill-panel article{grid-template-columns:84px 76px minmax(0,1fr);gap:9px;padding:11px}
  .skill-panel article>img,.skill-icon-wrap img{max-width:70px;max-height:70px}
  .skill-label{font-size:15px}
  .skill-panel h4{font-size:18px}
  .skill-panel p,.profile-panel p{font-size:14px}
  .profile-panel p b{width:110px;font-size:18px}
  .collection-grid{grid-template-columns:1fr}
  .voice-record{grid-template-columns:1fr}
  .topic-modal{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
  }
  .topic-modal header{min-height:94px;padding:12px}
  .topic-modal header h2{font-size:24px}
  .topic-filter{padding:9px;gap:6px}
  .topic-filter button{min-width:120px;min-height:44px;padding:8px}
  .topic-list{height:calc(100dvh - 205px);padding:10px;gap:8px}
  .topic-choice{min-height:88px}
}

/* Portrait tablets use a shallow control strip and leave the character stage open. */
@media (max-width:900px), (orientation:portrait) and (max-width:1100px){
  .hud{height:62px;padding:5px 62px 5px 76px}
  .master-block strong{font-size:15px}
  .master-block span{font-size:8px}
  .hud-resources>div:nth-child(-n+2){display:none}
  .hud-resources>div{min-width:82px;height:40px;padding:4px 7px}
  .music-control{top:6px;right:6px}
  .music-button{width:45px;height:45px;font-size:23px}
  .side-menu{left:4px;top:69px;width:66px;gap:6px}
  .fgo-button{height:62px;min-height:62px}
  .room-stage{left:72px;right:0;top:62px;bottom:0}
  .servant-stack[data-form-group="apex"]{left:51%}
  .spirit-panel{
    left:76px;
    right:6px;
    top:69px;
    width:auto;
    max-height:138px;
    padding:6px;
    display:grid;
    grid-template-columns:minmax(155px,.8fr) minmax(0,2fr);
    gap:6px;
    overflow:hidden;
  }
  .spirit-title{padding:6px 8px}
  .spirit-title strong{font-size:18px}
  .origin-tabs{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    margin:0;
  }
  .origin-tab{min-height:40px;padding:4px 2px;font-size:8px}
  .saint-graph-button{
    top:213px;
    right:8px;
    width:220px;
    height:48px;
  }
  .dialogue-box{left:74px;right:4px;height:180px}
  .question-launcher{left:74px;bottom:174px}
  .swipe-arrow{top:50%;width:56px;height:82px}

  .info-screen{
    display:block;
    padding:8px 10px 26px;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .info-close{
    position:sticky;
    display:block;
    left:auto;
    top:7px;
    width:92px;
    margin:0 0 5px;
    z-index:12;
  }
  .info-side{display:none}
  .card-column{
    padding:0 0 18px;
    min-height:0;
    overflow:visible;
  }
  .card-shell,
  .card-shell.grand-frame,
  .card-shell.beast-frame{
    width:min(420px,84vw);
  }
  .record{overflow:visible}
  .record-title{
    min-height:72px;
    height:auto;
    padding:8px 4px;
    gap:8px;
  }
  .record-title>div:first-child{flex-wrap:wrap;white-space:normal;gap:4px 12px}
  .record-title h1,.record-title span{white-space:normal}
  .record-tabs{
    position:sticky;
    top:0;
    z-index:8;
    padding:5px 0;
    background:#c7d9dfeb;
    backdrop-filter:blur(8px);
  }
  .record-panel{height:auto;min-height:55vh;overflow:visible;padding-bottom:36px}
  .record-swipe{display:none}
  .status-main{grid-template-columns:130px minmax(0,1fr)}
  .status-portrait{width:120px;height:120px;flex-basis:120px}
  .status-main>img{width:120px;height:145px}
  .command-cards{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .command{flex:0 0 120px}
  .about-screen{
    display:block;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:#10242d;
  }
  .about-page{
    width:100%;
    height:auto;
    min-height:100%;
    overflow:visible;
    padding:70px 20px 34px;
    border:0;
    clip-path:none;
  }
  .about-close{position:absolute;left:12px;top:12px}
  .about-heading{padding:0 0 18px}
  .about-heading h1{font-size:38px}
  .about-content{grid-template-columns:1fr;gap:20px;padding:22px 0}
  .about-portrait{max-height:380px;object-position:center 24%}
  .about-copy p{margin-bottom:15px}
  .about-promo{grid-template-columns:1fr;gap:18px}
  .about-promo img{width:min(320px,100%);height:auto;max-height:480px;justify-self:center}
  .credits-popup{flex-wrap:wrap}
  .valentine-screen{
    display:block;
    overflow:auto;
    padding:8px;
    -webkit-overflow-scrolling:touch;
  }
  .valentine-stage{
    width:100%;
    height:auto;
    min-height:100%;
    padding:66px 14px 24px;
    overflow:visible;
  }
  .valentine-stage>.back-button{left:12px;top:12px}
  .valentine-heading{position:static}
  .valentine-heading h1{margin:10px 0 18px;font-size:34px}
  .valentine-stage>#valentine-ce{
    position:relative;
    left:auto;
    top:auto;
    display:block;
    width:min(340px,82vw);
    height:auto;
    aspect-ratio:4/5;
    margin:0 auto 18px;
  }
  .valentine-dialogue{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    min-height:240px;
    padding:24px 22px 72px;
  }
  .valentine-dialogue p{font-size:19px}
  .valentine-choices{
    position:static;
    width:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:16px;
  }
  .valentine-choices button{min-height:112px}
  .topic-list{grid-template-columns:1fr}
  .voice-record{grid-template-columns:1fr}
}

@media (max-width:600px){
  .hud{padding-left:70px;padding-right:54px}
  .master-level{display:none}
  .master-block strong{font-size:13px}
  .hud-resources>div:nth-child(4){display:none}
  .hud-resources>div{min-width:68px}
  .side-menu{width:62px}
  .room-stage{left:66px}
  .spirit-panel{
    left:69px;
    display:block;
    max-height:228px;
    overflow:auto;
  }
  .origin-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:5px}
  .origin-tab{font-size:9px}
  .saint-graph-button{left:69px;right:6px;top:303px;width:auto}
  .dialogue-box{left:67px;right:2px;height:176px}
  .speaker-name{left:16px;top:35px;font-size:15px}
  .dialogue-box p{left:23px;right:17px;top:61px;font-size:15px;line-height:1.32}
  .dialogue-controls{left:20px;right:15px}
  .question-launcher{left:64px;bottom:170px;width:84px}
  .swipe-arrow{width:44px}
  .card-shell,
  .card-shell.grand-frame,
  .card-shell.beast-frame{width:min(340px,92vw)}
  .record-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-main{grid-template-columns:1fr;text-align:center}
  .status-portrait{justify-self:center}
  .bond-row{display:block;text-align:center}
  .bond-row img{width:min(240px,90%);margin-bottom:10px}
  .skill-panel article{grid-template-columns:68px minmax(0,1fr)}
  .skill-panel article>div:last-child{grid-column:1/-1}
  .parameter-grid{grid-template-columns:1fr}
  .collection-grid img{width:120px;height:120px}
  .valentine-choices{grid-template-columns:1fr}
  .topic-modal header p{display:none}
  .topic-filter button{flex:1 1 42%;min-width:0}
}