/* eARASHIKAN login UI v2.1 */
:root{
  color-scheme:dark;
  --bg:#08090c;
  --text:#f5efe5;
  --muted:#b9b1a5;
  --red:#db1628;
  --red-deep:#8f0f19;
  --gold:#d7a34a;
  --gold-soft:#f0c36a;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}

body{
  min-height:100vh;
  min-height:100svh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.login-shell{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,42px);
  overflow:hidden;
}

.login-bg{
  position:fixed;
  inset:-1.5%;
  z-index:-3;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.18)),
    url('../images/login/login-bg.webp') center center/cover no-repeat;
  filter:saturate(1.02) contrast(1.03) brightness(.86);
  transform:scale(1.01);
}

.login-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 47%,rgba(0,0,0,.05) 0 23%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.42) 100%),
    linear-gradient(90deg,rgba(0,0,0,.20),transparent 25%,transparent 75%,rgba(0,0,0,.20));
}

.login-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,5,7,.08),transparent 50%,rgba(2,3,5,.30));
}

.login-card{
  position:relative;
  width:min(540px,92vw,67svh);
  aspect-ratio:561/701;
  display:grid;
  place-items:center;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  filter:
    drop-shadow(0 34px 70px rgba(0,0,0,.50))
    drop-shadow(0 0 22px rgba(157,18,28,.10));
}

.login-card__art{
  position:absolute;
  inset:0;
  z-index:2;
  background:url('../images/login/login-card.webp') center/100% 100% no-repeat;
  opacity:.92;
  filter:saturate(.96) brightness(1.03);
  pointer-events:none;
  user-select:none;
}

.login-card::before{
  content:"";
  position:absolute;
  inset:5.8% 6.2%;
  z-index:0;
  border-radius:19px;
  background:
    linear-gradient(140deg,rgba(255,255,255,.070),rgba(255,255,255,.018) 31%,rgba(111,17,24,.045) 72%,rgba(4,5,8,.16)),
    rgba(8,9,12,.42);
  border:1px solid rgba(244,210,147,.050);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(215,163,74,.030),
    inset 0 0 42px rgba(0,0,0,.16);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  pointer-events:none;
}

.login-card::after{
  content:"";
  position:absolute;
  inset:6.1% 6.5%;
  z-index:1;
  border-radius:18px;
  background:
    linear-gradient(122deg,rgba(255,255,255,.040),transparent 29%),
    radial-gradient(circle at 50% 16%,rgba(161,26,34,.045),transparent 38%);
  pointer-events:none;
}

.login-card__content{
  position:relative;
  z-index:3;
  width:75%;
  margin-top:-2.2%;
  transform:translateY(-1.3%);
  padding:0 0 8.8%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.brand-badge{
  width:clamp(82px,7.3vw,108px);
  height:clamp(82px,7.3vw,108px);
  object-fit:contain;
  margin-bottom:4px;
  border-radius:50%;
  background:transparent;
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.46))
    drop-shadow(0 0 12px rgba(190,27,38,.20));
}

.brand-kanji{
  margin-top:1px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;
  font-size:clamp(19px,1.75vw,27px);
  line-height:1;
  font-weight:700;
  letter-spacing:.18em;
  color:#ede5d8;
  text-shadow:0 2px 12px rgba(0,0,0,.72);
}

.brand-name{
  margin-top:6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(26px,2.35vw,36px);
  line-height:1;
  letter-spacing:.025em;
  color:#f6f1e9;
  text-shadow:0 3px 18px rgba(0,0,0,.65);
}

.brand-name span{
  color:#e21c2d;
  font-style:italic;
}

.brand-divider{
  width:48%;
  height:1px;
  margin:12px auto 13px;
  background:linear-gradient(90deg,transparent,rgba(208,30,40,.78),rgba(213,163,74,.88),transparent);
  box-shadow:0 0 10px rgba(194,21,31,.20);
}

h1{
  margin:0;
  color:#f4eee5;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,2.45vw,39px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.025em;
  text-shadow:0 3px 18px rgba(0,0,0,.64);
}

h1 span{color:var(--gold-soft)}

.subtitle{
  margin:8px 0 20px;
  color:#bdb6ad;
  font-size:clamp(12px,1.05vw,15px);
  line-height:1.5;
  text-shadow:0 2px 9px rgba(0,0,0,.65);
}

.google-btn{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:26px 1fr 28px;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid rgba(235,181,86,.72);
  border-radius:16px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 34%,rgba(116,20,27,.075)),
    rgba(13,14,18,.46);
  color:#f8f5ef;
  text-decoration:none;
  font-size:clamp(14px,1.25vw,17px);
  font-weight:720;
  box-shadow:
    0 0 0 1px rgba(203,25,38,.42),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -12px 30px rgba(89,8,14,.10),
    0 0 22px rgba(183,21,31,.16),
    0 10px 28px rgba(0,0,0,.30);
  backdrop-filter:blur(14px) saturate(138%);
  -webkit-backdrop-filter:blur(14px) saturate(138%);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

.google-btn:hover{
  transform:translateY(-1px);
  border-color:#f0c46b;
  background:
    linear-gradient(110deg,rgba(255,255,255,.12),rgba(255,255,255,.045) 34%,rgba(137,23,31,.10)),
    rgba(15,15,19,.54);
  box-shadow:
    0 0 0 1px rgba(232,25,40,.62),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -12px 30px rgba(89,8,14,.12),
    0 0 28px rgba(217,27,38,.24),
    0 13px 32px rgba(0,0,0,.38);
}

.google-btn:active{transform:translateY(0)}

.google-btn:focus-visible{
  outline:3px solid rgba(240,195,104,.62);
  outline-offset:4px;
}

.google-btn img{
  width:24px;
  height:24px;
  justify-self:start;
}

.google-btn__arrow{
  justify-self:end;
  color:#e5b459;
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  font-weight:400;
}

.gate-separator{
  width:75%;
  margin:16px auto 10px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  color:#de1f2f;
}

.gate-separator span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(213,163,74,.52));
}

.gate-separator span:last-child{
  transform:scaleX(-1);
}

.gate-separator b{
  font-size:18px;
  line-height:1;
  font-weight:400;
  filter:grayscale(1) sepia(1) saturate(8) hue-rotate(320deg);
}

.access-note{
  margin:2px 0 0;
  color:#b3aba1;
  font-size:clamp(10px,.86vw,12.5px);
  line-height:1.72;
  text-shadow:0 2px 8px rgba(0,0,0,.75);
}

.dev-badge{
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  left:50%;
  z-index:30;
  transform:translateX(-50%);
  padding:6px 11px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(126,13,24,.92);
  color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.38);
  font-size:10px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

@media (max-width:680px){
  .login-shell{
    padding:18px 10px;
    align-items:center;
  }

  .login-bg{
    inset:-3%;
    background:
      linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.27)),
      url('../images/login/login-bg.webp') center center/cover no-repeat;
    filter:saturate(.98) contrast(1.03) brightness(.74);
  }

  .login-card{
    width:min(96vw,430px,67svh);
  }

  .login-card__art{opacity:.92}
  .login-card::before{
    inset:5.8% 6.2%;
    backdrop-filter:blur(15px) saturate(116%);
    -webkit-backdrop-filter:blur(15px) saturate(116%);
  }
  .login-card__content{width:76%;margin-top:-1.8%;transform:translateY(-1.1%);padding-bottom:9.4%}
  .brand-badge{width:82px;height:82px}
  .brand-kanji{font-size:18px;letter-spacing:.14em}
  .brand-name{font-size:28px}
  .brand-divider{margin:9px auto 10px}
  h1{font-size:27px}
  .subtitle{margin:6px 0 14px;font-size:12px}
  .google-btn{min-height:52px;border-radius:14px;padding:10px 13px}
  .google-btn img{width:21px;height:21px}
  .google-btn__arrow{font-size:22px}
  .gate-separator{margin:10px auto 6px}
  .access-note{font-size:10px;line-height:1.5}
}

@media (max-width:380px){
  .login-card__content{width:77%}
  .brand-badge{width:66px;height:66px}
  .brand-kanji{font-size:16px}
  .brand-name{font-size:24px}
  h1{font-size:23px}
  .google-btn{
    grid-template-columns:22px 1fr 20px;
    gap:7px;
    font-size:12.5px;
  }
  .access-note{font-size:9px}
}

@media (max-height:620px) and (min-width:681px){
  .login-card{width:min(430px,65svh)}
  .brand-badge{width:66px;height:66px}
  .brand-kanji{font-size:17px}
  .brand-name{font-size:27px}
  h1{font-size:25px}
  .subtitle{margin:5px 0 11px}
  .google-btn{min-height:48px}
  .gate-separator{margin:8px auto 5px}
  .access-note{font-size:9.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}