/* Riftfall Arena / 双月のアルケイア — V55.5 cinematic UI (additive, no gameplay changes)
   Modern contrast, frosted surfaces, authentic model portraits and CGI artwork.
   Loaded AFTER the legacy style sheets. No emoji icon fonts. */
:root {
  --rf555-bg:#080d19;
  --rf555-panel:#101a2cf0;
  --rf555-panel-hi:#15233ae9;
  --rf555-edge:#9ab3d53e;
  --rf555-edge-strong:#a7d9ff8c;
  --rf555-text:#f2f6ff;
  --rf555-muted:#bac8df;
  --rf555-cyan:#8bdcff;
  --rf555-blue:#4b8dff;
  --rf555-purple:#9f8bff;
  --rf555-gold:#edc78a;
  --rf555-radius:16px;
  --rf555-radius-sm:11px;
  --rf555-shadow:0 20px 55px #020817a8;
  --rf555-font:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
}
html {color-scheme:dark;background:var(--rf555-bg);-webkit-text-size-adjust:100%;}
body,button,input,textarea,select {font-family:var(--rf555-font)!important;}
body {color:var(--rf555-text);}
#ui .screen {color:var(--rf555-text);}
#ui :is(button,input,select,textarea) {letter-spacing:normal;}
#ui button {transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
#ui button:focus-visible,#rf45-layout-editor button:focus-visible {outline:2px solid var(--rf555-cyan);outline-offset:3px;}
/* Splash — real HTML title and controls above a CGI background, never a flattened image UI. */
#scr-press {background:#050e1d!important;}
#scr-press .portal-intro {
  background:linear-gradient(90deg,#0811227a,#07112268 42%,#0711227d),
             linear-gradient(0deg,#030810ed 0%,transparent 34%),
             url('./rf555/hero-cg.webp') center/cover no-repeat!important;
  border:0!important;
  min-height:100dvh;
}
#scr-press .portal-intro::before {background:radial-gradient(ellipse at 49% 46%,#0b24488c,transparent 68%)!important;}
#scr-press :is(.intro-portrait,.intro-moon,.intro-banner,.portal-intro .hero-figure) {display:none!important;}
#scr-press :is(.intro-content,.press-content) {position:relative;z-index:2;max-width:min(650px,90vw);margin-inline:auto;padding:clamp(18px,3vw,45px);border:1px solid #b6d5f535;border-radius:22px;background:linear-gradient(145deg,#071327b5,#090e19ab);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 16px 76px #020817b8;}
#scr-press h1,#scr-press .intro-title {font-family:var(--rf555-font)!important;font-size:clamp(31px,5vw,63px);font-weight:830;letter-spacing:.045em;text-shadow:0 6px 25px #000d;}
#scr-press :is(.intro-overline,.intro-kicker,.intro-subtitle,.press-hint) {font-family:var(--rf555-font)!important;letter-spacing:.1em;color:#dbeaff;}
#scr-press button {border-radius:13px!important;min-height:52px;}
/* Homepage — modern translucent interface and brand hierarchy. */
#scr-title {background:#080e19!important;}
#scr-title .portal-wrap {width:min(1560px,100%);color:var(--rf555-text);}
#scr-title .portal-header {
  position:sticky;top:0;z-index:10;min-height:64px;
  background:#071326e8!important;backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);
  border-bottom:1px solid #9ab3d542!important;padding:8px clamp(12px,2.5vw,38px);
  box-shadow:0 7px 25px #020913a3;gap:clamp(8px,1.8vw,20px);
}
#scr-title .brand-button{border:none!important;background:transparent!important;align-items:center;gap:10px;padding:5px!important;color:#f4f7ff!important;}
#scr-title .brand-seal{font-size:0!important;display:grid;place-items:center;border-radius:50%;height:34px;width:34px;border:1px solid #a3d9ff99;background:radial-gradient(circle at 32% 32%,#5cbafd88,transparent 55%),#102748;box-shadow:0 0 20px #3ab9f333;}
#scr-title .brand-seal::after{content:"";width:15px;height:15px;border:2px solid #cceeff;border-left-color:transparent;border-radius:50%;transform:rotate(-30deg);}
#scr-title .brand-type{font-weight:850!important;letter-spacing:.08em!important;line-height:1.25;white-space:nowrap;}
#scr-title .brand-type small{letter-spacing:.15em!important;font-size:9px;color:#94b9d8;}
#scr-title .portal-topnav {gap:4px;}
#scr-title .portal-topnav button{border-radius:9px;padding:9px 11px!important;color:#d3e0f4!important;font-size:clamp(11px,1vw,14px);font-weight:650;letter-spacing:.02em!important;white-space:nowrap;}
#scr-title .portal-topnav button:hover,#scr-title .portal-topnav button:focus-visible{background:#20466a9c!important;border-color:transparent!important;color:#fff!important;}
#scr-title .portal-account .shards{border:1px solid #4c9ece66!important;background:#10263cb8!important;color:#d9ebff!important;border-radius:99px;padding:7px 14px;font-size:12px;}
#scr-title .portal-hero{
  isolation:isolate;position:relative;min-height:clamp(410px,58vw,670px);
  background:linear-gradient(90deg,#050f1e24,#0614248f 39%,#08142298 66%,#05101e33),
             linear-gradient(0deg,#061122ef,transparent 35%),url('./rf555/hero-cg.webp') center 43%/cover no-repeat!important;
  overflow:hidden!important;border:0!important;
}
#scr-title .portal-hero::after{background:linear-gradient(180deg,transparent 67%,#07111fe0)!important;}
#scr-title :is(.portal-hero-moon,.hero-figure){display:none!important;}
#scr-title .hero-center{
  width:min(740px,79%);max-width:79%;padding:clamp(26px,5vw,48px) clamp(18px,3vw,40px)!important;
  border-radius:24px;background:linear-gradient(140deg,#08192dc1,#0b1727b1)!important;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1px solid #d0e8ff31;box-shadow:0 32px 78px #01071291;
}
#scr-title .hero-center h1{font-family:var(--rf555-font)!important;color:#fff!important;font-size:clamp(28px,5vw,64px)!important;letter-spacing:.06em!important;line-height:1.14;font-weight:860;text-shadow:0 5px 35px #000b;}
#scr-title .hero-center h1 span{display:block;margin-top:14px;font:600 clamp(9px,1.2vw,13px)/1.5 var(--rf555-font)!important;color:#b6d7ef!important;letter-spacing:.14em!important;}
#scr-title .hero-kicker{font:650 12px/1.4 var(--rf555-font)!important;color:#8ad9ff!important;letter-spacing:.16em!important;}
#scr-title .hero-center p{font:500 clamp(13px,1.35vw,17px)/1.85 var(--rf555-font)!important;color:#e7f1ff!important;letter-spacing:.05em!important;}
#scr-title .action-primary,.rf555-primary {
  background:linear-gradient(120deg,#53b6ef,#4388e8)!important;
  border:1px solid #9eeaffaa!important;color:#fff!important;border-radius:11px!important;
  box-shadow:0 11px 35px #2d87ed45,inset 0 1px #ffffff54!important;
  font-weight:750!important;font-family:var(--rf555-font)!important;min-height:48px;
}
#scr-title .action-primary:hover{background:linear-gradient(115deg,#65cdfa,#509bf1)!important;transform:translateY(-2px);}
#scr-title .hero-quick{border-radius:10px!important;border:1px solid #a0c2e65b!important;background:#10233bbd!important;color:#e5f1ff!important;font-size:13px!important;}
#scr-title .portal-hero-bottom{font:700 11px var(--rf555-font)!important;letter-spacing:.2em!important;color:#cceaff!important;}
#scr-title :is(.portal-overview,.portal-section){background:linear-gradient(170deg,#0b1525,#0b1220)!important;}
#scr-title .portal-overview{gap:14px;padding:clamp(16px,3vw,34px);}
#scr-title :is(.overview-panel,.portal-controls){background:linear-gradient(150deg,#16263bcf,#0d1a2cd6)!important;border:1px solid var(--rf555-edge)!important;border-radius:var(--rf555-radius)!important;box-shadow:var(--rf555-shadow);padding:clamp(15px,2vw,23px);}
#scr-title .overview-panel::before{display:none!important;}
#scr-title :is(.section-heading,.section-cap) span{font-family:var(--rf555-font)!important;color:#8fcff4!important;font-weight:750;letter-spacing:.13em!important;}
#scr-title :is(.section-heading,.section-cap) h2 {font-family:var(--rf555-font)!important;color:#f4f8ff!important;font-weight:830;letter-spacing:.025em!important;}
#scr-title .overview-panel :is(p,.overview-meta){color:#bac9dc!important;font-size:clamp(12px,1.3vw,14px);}
#scr-title :is(.overview-link,.event-cta){background:#14263b!important;border:1px solid #739fc360!important;border-radius:10px!important;color:#e9f4ff!important;padding:12px 14px;}
#scr-title .overview-link strong{color:#eaf9ff!important;}
#scr-title .portal-section{padding:clamp(18px,3vw,40px);}
#scr-title .portal-section .section-heading p{color:#afc5da!important;}
/* A photographic CGI panel per mode, all labels remain real clickable HTML. */
#scr-title .portal-modes{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.5vw,17px);}
#scr-title .mode-tile{position:relative;isolation:isolate;min-height:clamp(142px,13vw,194px);display:flex;align-items:flex-end;overflow:hidden;
  color:#fff!important;border:1px solid #8eaccb69!important;border-radius:var(--rf555-radius)!important;
  background:#101d31!important;box-shadow:0 12px 30px #0006!important;
  padding:17px 15px!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
#scr-title .mode-tile::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--rf555-mode-art,linear-gradient(#17314f,#0c1930)) center/cover no-repeat;transition:transform .3s ease,filter .25s;}
#scr-title .mode-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#02071333,#070c1a30 30%,#04101ceb 100%);pointer-events:none;}
#scr-title .mode-tile:hover,#scr-title .mode-tile:focus-visible{border-color:#8ce7ffb9!important;box-shadow:0 15px 36px #0c84ee33,0 2px 15px #000a!important;transform:translateY(-3px);}
#scr-title .mode-tile:hover::before{transform:scale(1.04);}
#scr-title .mode-icon{position:absolute;top:12px;left:13px;height:30px;min-width:32px;width:auto;padding:0 7px;border:1px solid #a8d1ed62!important;background:#08162ca8!important;border-radius:7px;color:#dcefff!important;font:700 12px var(--rf555-font)!important;}
#scr-title .mode-main{position:relative;z-index:1;flex:1;}
#scr-title .mode-main b{font:780 clamp(14px,1.45vw,20px)/1.3 var(--rf555-font)!important;text-shadow:0 3px 15px #010712;}
#scr-title .mode-main small{font:550 11px/1.45 var(--rf555-font)!important;color:#d1dff1!important;letter-spacing:.015em!important;}
#scr-title .tile-arrow{font:24px var(--rf555-font)!important;color:#b4e9ff!important;}
#scr-title .portal-world {background:#0c1729!important;}
#scr-title .world-gallery{gap:14px;}
#scr-title .world-gallery button{border-radius:var(--rf555-radius)!important;overflow:hidden!important;background:#132137!important;border:1px solid #7393b44d!important;box-shadow:0 12px 24px #0005;}
#scr-title .world-gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover!important;filter:saturate(1.12) contrast(1.05);}
#scr-title .world-gallery span{color:#eaf4ff!important;font-family:var(--rf555-font)!important;font-weight:760;}
#scr-title .world-gallery small{color:#9fbcd8!important;font-family:var(--rf555-font)!important;}
#scr-title .portal-services{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
#scr-title .portal-services button{border:1px solid #8daac855!important;background:linear-gradient(150deg,#16273bcf,#0d182bd8)!important;color:#e7f2ff!important;
 border-radius:var(--rf555-radius)!important;box-shadow:0 9px 23px #01071380;padding:15px 16px!important;min-height:84px;}
#scr-title .portal-services button:hover{border-color:#92d2f2c2!important;transform:translateY(-2px);background:linear-gradient(155deg,#1b3555,#0c1e35)!important;}
#scr-title .portal-services button b{font:760 clamp(13px,1.35vw,17px)/1.3 var(--rf555-font)!important;}
#scr-title .portal-services button small{font:500 11px/1.4 var(--rf555-font)!important;color:#a9c4dc!important;}
#scr-title .service-icon{width:39px;min-width:39px;height:39px;display:grid;place-items:center;font-size:0!important;
 border:1px solid #82d1fe55;background:#142d4eb8;border-radius:12px;color:#9de4ff!important;}
#scr-title .service-icon svg{width:22px;height:22px;display:block;stroke:#b4e3ff;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#scr-title .portal-footer {border-color:#6184aa4e!important;color:#91a9c5!important;}
/* Shared menu / overlay redesign, keyboard and screen readers stay native. */
#ui :is(#scr-select,#scr-options,#scr-forge,#scr-shop,#scr-lobby,#scr-result,#scr-castle){
 background:linear-gradient(#061120c9,#07101ee3),url('./rf555/world-sky.webp') center/cover no-repeat!important;
}
#ui :is(#scr-select,#scr-options,#scr-forge,#scr-shop,#scr-lobby,#scr-result,#scr-castle) > .inner {
  background:linear-gradient(150deg,#0b172be8,#101f35e6)!important;border:1px solid #9bbbe055!important;
  border-radius:19px!important;box-shadow:0 20px 70px #000b!important;padding:clamp(15px,2.5vw,28px)!important;
}
#ui :is(.btn,.back,.chip,.ghost,.cr-button){font-family:var(--rf555-font)!important;border-radius:10px!important;}
#ui .btn{border:1px solid #7ca3c770!important;background:linear-gradient(145deg,#19314d,#10243e)!important;color:#f1f7ff!important;min-height:41px;}
#ui .btn:hover{background:linear-gradient(145deg,#224467,#132a45)!important;}
#ui .back{border:1px solid #83abcb60!important;color:#f1f6ff!important;background:#152941d6!important;}
#ui :is(.label,.crumb){color:#e9f4ff!important;letter-spacing:.025em!important;font-family:var(--rf555-font)!important;}
#ui input:not([type=range]):not([type=checkbox]),#ui textarea,#ui select{
  font-family:var(--rf555-font)!important;font-size:max(16px,1em)!important;background:#101f34!important;
  color:#edf8ff!important;border:1px solid #83a6c068!important;border-radius:9px!important;padding:10px 12px;
}
#ui input:focus,#ui textarea:focus,#ui select:focus{outline:2px solid #81d5fe96!important;outline-offset:1px;}
#scr-select #select-grid{gap:clamp(9px,1.2vw,16px);}
#scr-select #select-grid .card{
  min-width:0;position:relative;overflow:hidden;border:1px solid #89afd064!important;border-radius:13px!important;
  background:linear-gradient(160deg,#1a2a43f2,#0b1729f3)!important;color:#e8f4ff!important;
  padding:10px!important;gap:7px;box-shadow:0 7px 18px #0005;
}
#scr-select #select-grid .card:hover,#scr-select #select-grid .card:focus-visible{border-color:#8fe0ffb9!important;background:linear-gradient(155deg,#21385a,#10233e)!important;transform:translateY(-2px);}
#scr-select .card img.face{width:100%!important;height:auto!important;max-height:clamp(148px,21vw,254px);aspect-ratio:3/4!important;object-fit:contain!important;object-position:center!important;
 border-radius:9px;background:radial-gradient(ellipse at 50% 42%,#365e8b73,#091626c9 66%);padding:4px;}
#scr-select .card[data-rf555-portrait='loading'] img.face{filter:saturate(.65);opacity:.6;}
#scr-select .card[data-rf555-portrait='done'] img.face{opacity:1!important;filter:none!important;}
#scr-select .card b{color:#f4f9ff!important;font:750 clamp(14px,1.55vw,18px) var(--rf555-font)!important;letter-spacing:.02em!important;}
#scr-select .card em{color:#a9cdea!important;font:600 12px var(--rf555-font)!important;}
#scr-select .card small{color:#a9bed6!important;line-height:1.48;font-size:11px!important;}
#scr-select :is(.select-tools,#party-quick-picker,#party-slots){border-color:#7b9cbb66!important;}
#scr-select #select-grid .card.locked img.face{filter:grayscale(.5) brightness(.55);}
/* Battle HUD — small glass plates, readable bars, no retro borders. */
#hud .hud-side{padding:4px!important;gap:5px;}
#hud .plate{border:1px solid #809ec15c!important;border-radius:9px!important;
  background:#07182bce!important;backdrop-filter:blur(7px);box-shadow:0 4px 17px #0007;padding:5px 7px!important;}
#hud .plate b{font:700 clamp(10px,1.5vmin,13px)/1.35 var(--rf555-font)!important;color:#e5f4ff!important;text-shadow:none!important;}
#hud .plate i{height:6px!important;background:#07111f!important;border:0!important;transform:none!important;border-radius:999px!important;overflow:hidden;}
#hud .plate u{border-radius:999px!important;background:linear-gradient(90deg,#49baff,#77d2ef)!important;transition:width .16s linear!important;}
#hud-right .plate u{background:linear-gradient(90deg,#c65ba9,#e9718b)!important;}
#hud #gauges{color:#e7f2ff!important;}
#hud :is(#flux,#over,#awk){border-radius:7px!important;}
#hud #btn-pause{background:#12243edb!important;color:#f0f7ff!important;border:1px solid #a0bcd66b!important;border-radius:8px!important;}
#skillname{border-radius:12px!important;background:#071a31ba!important;backdrop-filter:blur(8px);}
#touch #joy {background:#0c1f3978!important;border:2px solid #98d7ff91!important;box-shadow:0 0 25px #40aaf329,inset 0 0 20px #58b9eb22;}
#touch #knob{background:linear-gradient(135deg,#cdeaffab,#65bdeb94)!important;box-shadow:0 0 20px #79cdfc66;}
#touch #tbtns button{border:1.5px solid #b5d8ff99!important;color:#f0f8ff!important;
  background:linear-gradient(145deg,#193552ec,#091932e3)!important;
  box-shadow:0 5px 20px #0009,inset 0 1px 9px #60abf029;
  font-family:var(--rf555-font)!important;font-weight:760!important;}
#touch #tbtns button[data-act="over"]{border-color:#ffd28c!important;background:linear-gradient(145deg,#6f442cea,#2d1b29df)!important;}
#touch #tbtns button:active{box-shadow:0 0 20px #80deff99!important;transform:scale(.95);}
#world-panel,#chat-panel,.ui-dialog,#mailbox-dialog,
#rf552-event-coop,.rf552-choice-panel,.rf552-board{
 background:linear-gradient(145deg,#0c1d33f2,#121f36f4)!important;
 border:1px solid #86aecc78!important;border-radius:16px!important;color:#eff7ff!important;
 box-shadow:0 18px 66px #000d!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
#chat-panel :is(button,input,textarea),#world-panel :is(button,input){font-family:var(--rf555-font)!important;}
#chat-panel [class*="tab"],#world-panel [class*="tab"]{border-radius:8px;}
#scr-castle .cr-button{background:linear-gradient(120deg,#193852,#1d4670)!important;color:#f4fbff!important;border:1px solid #8cbcdf7b!important;}
#scr-castle .cr-heading,#scr-castle .cr-title{font-family:var(--rf555-font)!important;letter-spacing:.035em;}
#scr-castle :is(.cr-target,.cr-note,.cr-castle-scene){border-radius:12px!important;}
#rf552-endless-hud{background:#0a1b30e8!important;border:1px solid #92ccff8e!important;border-radius:10px!important;font-family:var(--rf555-font)!important;}
/* Never force single font size smaller than Safari's auto-zoom threshold when typing. */
@media (pointer:coarse){#ui :is(input:not([type=range]),textarea,select){font-size:16px!important;}}
/* Reduced motion and smaller screens. */
@media(max-width:1100px){
 #scr-title .portal-modes{grid-template-columns:repeat(3,minmax(0,1fr));}
 #scr-title .portal-services{grid-template-columns:repeat(2,minmax(0,1fr));}
 #scr-title .portal-header{flex-wrap:wrap;gap:7px;}
 #scr-title .portal-topnav{order:3;flex:1 0 100%;justify-content:center;overflow-x:auto;}
}
@media(max-width:670px){
 #scr-title .portal-wrap{width:100%;}
 #scr-title .portal-header{padding:8px max(9px,env(safe-area-inset-left))!important;}
 #scr-title .brand-type{font-size:13px;}
 #scr-title .brand-type small{font-size:8px;}
 #scr-title .portal-topnav{justify-content:flex-start;overscroll-behavior-x:contain;scrollbar-width:none;}
 #scr-title .portal-topnav button{min-width:max-content;padding:7px 9px!important;}
 #scr-title .portal-hero{min-height:clamp(470px,100svh,650px);background-position:37% 50%!important;}
 #scr-title .hero-center{width:calc(100% - 22px)!important;max-width:calc(100% - 22px)!important;padding:19px 16px!important;background:#061225d6!important;}
 #scr-title .hero-center h1{font-size:clamp(27px,7.3vw,39px)!important;}
 #scr-title .portal-hero-bottom{gap:13px;font-size:9px!important;}
 #scr-title .portal-overview{grid-template-columns:1fr!important;padding:12px;}
 #scr-title .portal-modes{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px;}
 #scr-title .mode-tile{min-height:154px;padding:13px 10px!important;}
 #scr-title .mode-icon{top:8px;left:8px;}
 #scr-title .mode-main b{font-size:14px!important;}
 #scr-title .mode-main small{font-size:10px!important;}
 #scr-title .portal-services{grid-template-columns:1fr!important;}
 #scr-title .portal-services button{min-height:70px;}
 #scr-title .portal-section{padding:14px 12px!important;}
 #scr-select #select-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 #scr-select .card img.face{max-height:186px;}
 #world-panel,#chat-panel {width:calc(100vw - 14px)!important;max-width:calc(100vw - 14px)!important;}
}
@media(max-width:360px){
 #scr-title .mode-tile{min-height:142px;}
 #scr-title .mode-main b{font-size:13px!important;}
 #scr-title .portal-hero-bottom{display:none!important;}
 #scr-title .portal-services button{padding:12px!important;}
}
@media(max-height:520px) and (orientation:landscape){
 #scr-title .portal-hero{min-height:310px;}
 #scr-title .hero-center{padding:12px 18px!important;}
 #scr-title .hero-center p{margin-bottom:8px;}
 #scr-title .portal-hero-bottom{display:none;}
}
@media(prefers-reduced-motion:reduce){#ui button,#scr-title .mode-tile,#scr-title .mode-tile::before{transition:none!important;animation:none!important;}}