:root {
  --bg: #0f1020;
  --card: #1a1c33;
  --line: #2c2f52;
  --text: #eceefe;
  --muted: #9aa0c8;
  --accent: #8b7bff;
  --win: #4ade80;
  --lose: #f87171;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: radial-gradient(circle at 50% -20%, #2a2463, var(--bg) 60%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  min-height: 100vh;
}
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
header { text-align: center; margin-bottom: 20px; }
h1 { margin: 0; font-size: 2.2rem; letter-spacing: .05em; color: var(--accent); }
h1 span { color: var(--text); margin-left: .3em; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }
.sub { margin: 6px 0 0; color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.label { font-size: .75rem; color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; }
.big { font-size: 1.6rem; font-weight: 700; }
.note { color: var(--muted); font-size: .9rem; text-align: center; margin: 12px 0 0; }
.note a { color: var(--accent); }

.note.left { text-align: left; margin: 0 0 12px; }
.error { color: var(--lose); font-size: .9rem; margin: 10px 0 0; }
.name { font-size: 1.2rem; font-weight: 700; }
#nickname-form { display: flex; flex-direction: column; gap: 10px; }
#nickname-input {
  font: inherit; font-size: 1.1rem; padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: #24274a; color: var(--text);
}
#nickname-input:focus { outline: 2px solid var(--accent); border-color: transparent; }
td .sub-addr { display: block; font-size: .7rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-weight: 400; }

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: #2a2350; border: 1px solid #5a4bc4; border-radius: 16px; padding: 16px; margin-bottom: 16px;
}
.notice-icon { font-size: 2rem; line-height: 1; }
.notice strong { display: block; margin-bottom: 4px; }
.notice p { text-align: left; margin: 0 0 8px; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.notice b { color: var(--text); }
.spaced { margin-top: 16px; }

dialog {
  width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px 16px;
}
dialog::backdrop { background: rgba(5, 6, 15, .75); }
dialog h2 { margin-right: 28px; }
dialog ol { padding-left: 1.4em; line-height: 1.9; margin: 8px 0 16px; }
dialog .close {
  position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1.6rem; line-height: 1;
}
dialog a.primary, dialog .secondary {
  display: block; text-align: center; text-decoration: none; padding: 13px; border-radius: 12px; font-weight: 700; margin-top: 10px;
}
dialog a.primary { background: var(--accent); color: #fff; }
.secondary { width: 100%; background: #24274a; color: var(--text); border: 1px solid var(--line); }
.stores { display: flex; gap: 10px; }
.stores .secondary { flex: 1; }
.warn { font-size: .82rem; line-height: 1.6; background: #3a2330; border-radius: 10px; padding: 10px 12px; margin: 16px 0 0; }

@media (max-width: 400px) {
  .hands button { width: 72px; height: 72px; font-size: 2rem; }
  .hand { font-size: 3.2rem; }
  h1 { font-size: 1.8rem; }
}

/* ---- 対戦相手選択 ---- */
.opponents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.opponent {
  position: relative; padding: 0; border: 2px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #111; color: var(--text); aspect-ratio: 3 / 4; transition: transform .12s, border-color .12s;
}
.opponent:hover { transform: translateY(-3px); border-color: var(--accent); }
.opponent img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opponent .op-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 10px; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}
.opponent .op-name b { display: block; font-size: 1.1rem; }
.opponent .op-name small { color: var(--muted); }

/* ---- ステージ ---- */
.stage { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #000; }
.stage img, .stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage video { opacity: 0; transition: opacity .15s; }
.stage video.on { opacity: 1; }
.stage-name {
  position: absolute; left: 12px; top: 10px; font-weight: 700; padding: 4px 10px; border-radius: 99px;
  background: rgba(0, 0, 0, .55); font-size: .9rem;
}
.stage-result {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 8px 18px; border-radius: 16px;
  background: rgba(10, 10, 25, .75); backdrop-filter: blur(4px); animation: pop .3s ease-out;
}
.stage-result > div:not(.vs) { display: flex; flex-direction: column; align-items: center; }
.stage-result .hand { font-size: 2.6rem; }
@keyframes pop { from { transform: translateX(-50%) scale(.6); opacity: 0 } }
.message.big-win { font-size: 1.6rem; animation: pop2 .4s ease-out; }
@keyframes pop2 { from { transform: scale(.5); opacity: 0 } }
.row-btns { display: flex; justify-content: space-between; margin-top: 14px; }

button { font: inherit; cursor: pointer; }
button.primary {
  display: block; width: 100%; padding: 14px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem;
}
button.link { background: none; border: 0; color: var(--muted); text-decoration: underline; padding: 0; }
#login-view p { text-align: center; color: var(--muted); }

.me { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; }
.me .stats { display: flex; gap: 24px; text-align: center; }

.arena { display: flex; align-items: center; justify-content: space-around; }
.side { text-align: center; }
.hand { font-size: 4rem; line-height: 1.2; min-width: 1.4em; }
.hand.shake { animation: shake .4s ease-in-out 2; }
@keyframes shake { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.vs { color: var(--muted); font-weight: 700; }
.message { text-align: center; font-size: 1.3rem; font-weight: 700; margin: 16px 0; min-height: 1.6em; }
.message.win { color: var(--win); }
.message.lose { color: var(--lose); }

.hands { display: flex; gap: 12px; justify-content: center; }
.hands button {
  font-size: 2.4rem; width: 84px; height: 84px; border-radius: 50%;
  background: #24274a; border: 2px solid var(--line); transition: transform .1s, border-color .1s;
}
.hands button:hover:not(:disabled) { transform: scale(1.08); border-color: var(--accent); }
.hands button:disabled { opacity: .35; cursor: default; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: .75rem; color: var(--muted); font-weight: 400; }
td:first-child, th:first-child { width: 3.5em; }
td:last-child, th:last-child { text-align: right; }
tr.mine td { color: var(--accent); font-weight: 700; }

/* ERIA official website theme. All game IDs and behavior retained. */
:root{--bg:#0a0a0b;--card:#151215;--line:#3b2b32;--text:#eee9e8;--muted:#aa9ba2;--accent:#b75d74;--win:#dab38c;--lose:#d58896}
body{background:#0a0a0b;color:var(--text);font-family:Arial,"Noto Sans JP","Yu Gothic",sans-serif}a{color:inherit}main{max-width:680px;padding:45px 24px 60px}main>header{text-align:left;margin-bottom:30px}h1{color:var(--text);font-family:Georgia,"Yu Mincho",serif;font-size:clamp(32px,5vw,50px);font-weight:400;line-height:1.45;letter-spacing:.04em}h1 .event-kicker{display:block;font:400 clamp(13px,2vw,17px) Arial,sans-serif;color:#d5b9c3;margin:0 0 12px;letter-spacing:.12em}h1 .event-dot{color:var(--accent);margin:0}.event-eyebrow{font-size:10px;letter-spacing:.25em;color:#c38b9d;margin:0 0 20px}.sub{font-size:13px;line-height:1.9;margin-top:16px}.card,.notice,dialog{border-radius:0}.card{padding:24px;background:#151215;border-color:#3b2b32;margin-bottom:24px}h2{font-family:Georgia,"Yu Mincho",serif;font-weight:400;letter-spacing:.05em}.notice{background:#20171e;border-color:#66414f}.notice strong{font-size:14px}.notice p{font-size:13px}.secondary,#nickname-input{background:#241b22;border-color:#5d414f;border-radius:0}.hands button{background:#261b24;border-color:#66414f;color:#eee}.primary,button.primary,dialog a.primary,dialog .secondary{border-radius:0}.opponent,.stage,.warn{border-radius:0}.opponent{border-width:1px}.stage-result{background:rgba(20,13,19,.85);border:1px solid #66414f;border-radius:0}.stage-name{border-radius:0}.janken-hero{max-width:1000px;width:70%;margin:35px auto 0}.janken-hero img{display:block;width:100%;height:auto}.janken-footer{max-width:680px;margin:0 auto;padding:30px 24px 50px;border-top:1px solid #3b2b32;color:#aa9ba2;font-size:12px;line-height:2}.janken-footer>a{letter-spacing:.12em;text-decoration:none}.janken-footer p{letter-spacing:.12em}.site-header{display:flex;align-items:center;gap:25px;min-height:90px;padding:0 4.5%;border-bottom:1px solid #342b30}.site-logo{display:block;position:relative;width:150px;height:68px;overflow:hidden;flex-shrink:0;mix-blend-mode:screen}.site-logo img{position:absolute;width:270px;max-width:none;height:auto;left:-60px;top:-198px}.site-official{font-size:9px;letter-spacing:3px;white-space:nowrap;color:#d5c8ce}.site-nav{margin-left:auto;display:flex;gap:25px;align-items:center;font-size:10px;letter-spacing:2px}.site-nav a{text-decoration:none;white-space:nowrap}.site-nav a:hover{color:#d28d91}.site-nav .social-icon{display:inline-flex;width:30px;height:34px;align-items:center;justify-content:center;flex-shrink:0}.site-nav svg{width:19px;height:19px}.game-skip{position:absolute;left:-10000px}.game-skip:focus{left:12px;top:12px;background:#111;padding:12px;z-index:9}:focus-visible{outline:2px solid #d49aae;outline-offset:4px}
@media(max-width:1150px){.site-header{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;gap:4px 18px}.site-nav{width:100%;max-width:100%;min-width:0;margin:0;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:24px;padding:8px 2px 10px;scrollbar-width:thin;scrollbar-color:#795560 transparent}.site-nav>a{flex:0 0 auto}}
@media(max-width:800px){.janken-hero{width:100%;margin-top:0}main{padding:30px 18px 45px}.site-logo{width:110px;height:50px}.site-logo img{width:198px;left:-44px;top:-145px}.card{padding:18px}.notice{padding:14px}.site-nav{font-size:10px;letter-spacing:1px}.hands button{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}