@import url('./title-fonts.css');

:root{--read-title-type:'Cinzel','THE READ Title TC',serif}
/* Clear matching gold ink. Existing windows provide their own frame. */
.metal-title.read-title{font-family:var(--read-title-type);font-weight:600;color:#ead6ad;text-shadow:none;line-height:1.25}
.read-title::before{content:none}
.read-title .face{display:inline;color:transparent;background:linear-gradient(180deg,#fff4d9 0%,#ead2a2 45%,#c1a068 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;text-shadow:none;animation:none}
.read-title .ember{color:transparent;background:linear-gradient(180deg,#ffb6a0,#c1503a 55%,#86271d);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0}
.read-title.read-title--plain{font-size:38px;line-height:1.3;letter-spacing:.1em;white-space:normal;overflow-wrap:break-word;text-wrap:balance;max-width:100%;margin:6px 0 0}
.m-head .read-title--plain::after{content:'';display:block;width:360px;max-width:100%;height:14px;margin:12px auto 0;background:var(--divider) center / 100% 100% no-repeat}
.read-title.read-title--plaque{container-type:inline-size;display:block;width:min(var(--read-title-width,560px),100%);max-width:100%;margin:0 auto;font-size:var(--read-title-size,44px);letter-spacing:.12em;text-align:center;white-space:normal;overflow-wrap:anywhere}
.read-title.read-title--plaque::after{content:none}
/* Nine slices retain the crest/corners; extra lines grow the leather writing area. */
.read-title-panel{display:grid;place-items:center;min-height:35.0969cqw;border-style:solid;border-color:transparent;border-width:9.1252cqw 12cqw 7.0194cqw;border-image:url('../assets/ui/title-plaque-a.webp') 26% 12% 20% 12% fill / 1 stretch;padding:max(8px,var(--ui-gap,6px)) 0;box-sizing:border-box;background:#100e0b;background-clip:padding-box}
.read-title-panel>.face{display:block;max-width:100%;transform:translateY(-1px);line-height:1.25;min-width:0}
.m-head{gap:max(12px,var(--ui-gap,6px));}
.m-head .eyebrow{max-width:100%;overflow-wrap:anywhere;line-height:1.5}
.modal>.m-head{padding-top:22px;padding-bottom:0;margin-bottom:max(14px,var(--ui-gap,6px))}
.read-title--name{overflow-wrap:anywhere;max-width:100%;white-space:normal}
.read-title--rank{white-space:normal;overflow-wrap:anywhere}
.file-head>div{min-width:0}
.cloud-panel [data-part]{gap:max(12px,var(--ui-gap,6px))}
.cloud-panel h2.read-title--plain{font-size:38px;line-height:1.3;margin:0}
.create-panel>h2.read-title.read-title--plain{font-size:42px;letter-spacing:.06em}
.queue-box>h2.read-title--plain,.rival-box>h2.read-title--plain{font-size:48px}
.intro-native .intro-box>h2.read-title{--read-title-width:440px;--read-title-size:34px;font-family:'Cinzel','THE READ Title TC',serif;font-size:var(--read-title-size);margin:0 auto}
.intro-native .intro-box{gap:16px}
html[lang='en'] .read-title--plain,html[lang='en'] .read-title--plaque{letter-spacing:.05em}
body.portrait.phone .cloud-panel h2.read-title--plain{font-size:52px;line-height:1.3}
body.portrait.phone .create-panel>h2.read-title--plain{font-size:52px}
body.portrait.phone .intro-native .intro-box>h2.read-title{--read-title-width:440px;--read-title-size:34px}
@media(max-width:700px){.intro-native .intro-box>h2.read-title{--read-title-width:100%;--read-title-size:30px}.intro-native .intro-box{gap:12px}}

/* Legacy metallic ink remains available for original title previews. */
.metal-title:not(.read-title){position:relative;isolation:isolate;font-family:var(--caps);font-weight:700;color:#d9ccb3;text-shadow:none}
.metal-title:not(.read-title)::before{content:attr(data-text);position:absolute;inset:0;z-index:-1;pointer-events:none;color:#0a0705;-webkit-text-stroke:.055em #0a0705;text-shadow:0 .035em 0 #0a0705,0 .15em .26em #000d}
.metal-title:not(.read-title) .face{display:inline-block;color:transparent;text-shadow:none;-webkit-text-stroke:.009em #fff3d855;background:linear-gradient(100deg,transparent 42%,#fff8e6 50%,transparent 58%) 160% 0 / 250% 100% no-repeat,url('../assets/ui/tex-metal.webp') center / 190px,linear-gradient(180deg,#fbf7ee 0%,#ddd2bd 22%,#a89b83 40%,#554c3f 51%,#7d715d 60%,#cdbf9f 82%,#f6ecd4 100%);background-blend-mode:overlay,soft-light,normal;-webkit-background-clip:text;background-clip:text;animation:metal-sheen 6s .2s ease-in-out infinite}
.metal-title:not(.read-title) .ember{color:transparent;-webkit-text-stroke:.009em #ffc0a855;background:url('../assets/ui/tex-metal.webp') center / 190px,linear-gradient(180deg,#ff8f78 0%,#d0342a 30%,#7a0e0a 52%,#9d1d16 66%,#e85a45 100%);background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text}
@keyframes metal-sheen{0%{background-position:160% 0,center,0 0}30%,100%{background-position:-60% 0,center,0 0}}
/* Lobby uses the same narrow engraved metal wordmark family as THE READ. */
.lobby-center h1.archive-wordmark{width:620px;max-width:100%;margin:0;font-size:0;line-height:0;letter-spacing:normal;text-shadow:none}
.archive-wordmark img{display:block;width:100%;height:auto;object-fit:contain}
body.portrait .lobby-center h1.archive-wordmark{width:100%}

/* All lobby copy shares the approved settings typeface, including inherited
   text and legacy --caps/--serif labels. Only size and spacing set hierarchy. */
#lobby{--caps:var(--read-title-type);--serif:var(--read-title-type);--tc:var(--read-title-type);font-family:var(--read-title-type);font-weight:600}
#lobby :is(button,.find-card>div:not(.find-ace)>b,.season-card b,.season-card strong,.today h3,.feed-item b,.life-plan b,.lobby-me b,.lobby-me span,.me-bank b){font-weight:600}
#lobby :is(.find-card>div:not(.find-ace)>b,.season-card b,.today h3){letter-spacing:.1em}