/* recalloop-stats のログイン画面。site.css と同じ配色・同じフォントを使う。
   文言を変えたら build_assets.py を再実行（和文は使用文字だけに絞ってある） */
@font-face{font-family:"RLSilk";src:url(/assets/fonts/silkscreen.woff2) format("woff2");font-display:swap}
@font-face{font-family:"RLDot";src:url(/assets/fonts/dotgothic16.woff2) format("woff2");font-display:swap}

:root{
  --bg:#131215; --panel:#1c1b21; --line:#2c2a33; --line2:#3a3843;
  --cream:#ebe8dd; --sub:#aeabb8; --gray:#817f8b; --orange:#e19e37; --orange-d:#784818;
  --r1:#ff0050; --r2:#ffa000; --r3:#ffe628; --r4:#00dc46; --r5:#28aaff; --r6:#aa64ff;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse at 50% 38%,#1d1a26 0,var(--bg) 62%);color:var(--cream);
  font:16px/1.9 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  -webkit-text-size-adjust:100%;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
.px{image-rendering:pixelated;image-rendering:crisp-edges}
.en{font-family:"RLSilk",monospace;letter-spacing:.06em}
.jp{font-family:"RLDot",sans-serif}
:focus-visible{outline:2px dashed var(--orange);outline-offset:4px}

/* 箱（site.css のパネルと同じドットの角） */
.card{width:100%;max-width:420px;background:var(--panel);padding:44px 40px 36px;margin:4px;
  box-shadow:0 -4px 0 var(--panel),0 4px 0 var(--panel),-4px 0 0 var(--panel),4px 0 0 var(--panel)}

/* 見出しはブラウン管ふうに */
.screen{position:relative;text-align:center;padding:8px 0 18px}
.screen::after{content:"";position:absolute;inset:-8px -8px 8px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 3px,transparent 3px 6px)}
.mark{width:100px;height:100px;margin:0 auto 18px}
.title{font-size:22px;line-height:1.35;margin:0}
.title span{display:block;color:var(--orange)}
.sub{font-size:13px;line-height:1;color:var(--gray);margin:14px 0 0}

.rainbow{display:flex;height:8px;margin:0 0 30px}
.rainbow i{flex:1}
.rainbow i:nth-child(1){background:var(--r1)}
.rainbow i:nth-child(2){background:var(--r2)}
.rainbow i:nth-child(3){background:var(--r3)}
.rainbow i:nth-child(4){background:var(--r4)}
.rainbow i:nth-child(5){background:var(--r5)}
.rainbow i:nth-child(6){background:var(--r6)}

/* 入力欄。枠は影で描いてドットの角にする */
/* ラベルは和文が主、英語は小さく添えるだけ */
.lbl{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.lbl .jp{font-size:15px;line-height:1.4;color:var(--cream)}
.lbl .en{font-size:11px;color:var(--gray)}
.field{margin:0 4px 22px}
.field input{width:100%;background:#131215;color:var(--cream);border:0;padding:14px 16px;
  font:16px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.24em;
  box-shadow:0 -4px 0 #131215,0 4px 0 #131215,-4px 0 0 #131215,4px 0 0 #131215,
             inset 0 0 0 2px var(--line2)}
.field input:focus{outline:0;box-shadow:0 -4px 0 #131215,0 4px 0 #131215,-4px 0 0 #131215,4px 0 0 #131215,
             inset 0 0 0 2px var(--orange)}
/* ブラウザの自動入力。放っておくと地が白くなるので内側の影で塗り潰す
   （枠の影より後ろに置かないと枠が消える） */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover{-webkit-text-fill-color:var(--cream);caret-color:var(--cream);
  -webkit-box-shadow:0 -4px 0 #131215,0 4px 0 #131215,-4px 0 0 #131215,4px 0 0 #131215,
             inset 0 0 0 2px var(--line2),inset 0 0 0 1000px #131215}
.field input:-webkit-autofill:focus{-webkit-box-shadow:0 -4px 0 #131215,0 4px 0 #131215,-4px 0 0 #131215,4px 0 0 #131215,
             inset 0 0 0 2px var(--orange),inset 0 0 0 1000px #131215}

/* 6桁のコード。桁が数えられるように広く空ける */
.field input.code{text-align:center;font-size:24px;letter-spacing:.5em;text-indent:.5em;padding:16px 12px}

/* ボタン（site.css の .btn と同じ） */
.btn{display:block;width:calc(100% - 8px);margin:0 4px;cursor:pointer;border:0;text-align:center;
  font-size:16px;letter-spacing:.08em;color:#1a1208;background:var(--orange);padding:14px 22px;
  box-shadow:0 -4px 0 var(--orange),0 4px 0 var(--orange-d),-4px 0 0 var(--orange),4px 0 0 var(--orange),inset 0 -4px 0 #b87a22}
.btn:hover{background:#eeb04a;box-shadow:0 -4px 0 #eeb04a,0 4px 0 var(--orange-d),-4px 0 0 #eeb04a,4px 0 0 #eeb04a,inset 0 -4px 0 #c4852a}
.btn:active{transform:translateY(2px)}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* しくじったとき */
.err{margin:0 4px 20px;padding:12px 14px;background:#24151c;box-shadow:inset 0 0 0 2px #4a1a2c}
.err .jp{display:block;font-size:14px;line-height:1.7;color:#ff6b93}
.shake{animation:shake .3s steps(3) 1}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.back{text-align:center;margin:20px 0 0}
.back a{font-size:13px;color:var(--gray);text-decoration:none;border-bottom:2px solid var(--line2)}
.back a:hover{color:var(--cream);border-bottom-color:var(--orange)}

.foot{font-size:11px;color:#878591;text-align:center;margin:28px 0 0}

@media (prefers-reduced-motion:reduce){
  .blink,.shake{animation:none}
}
@media (max-width:420px){
  body{padding:16px}
  .card{padding:32px 22px 28px}
  .title{font-size:18px}
  .mark{width:72px;height:72px}
}