:root {
  --deep: #0E1B4D;
  --blue: #1A2E78;
  --yellow: #FFD23F;
  --pink: #FF3D7F;
  --cyan: #3DE0FF;
  --white: #F5F7FF;
  --dim: #A9B4E0;
  --display: "Bungee", Impact, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  /* arcade cabinet scanlines */
  --scan: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 4px);
  /* the three throws, drawn once */
  --rock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M22 58c-6-14 2-30 16-34 8-10 26-10 34 0 14 4 20 20 14 34-4 16-18 24-32 24S26 74 22 58z' fill='%23FFD23F' stroke='%230E1B4D' stroke-width='5'/%3E%3Cpath d='M38 40c6 4 18 4 24 0M34 54c8 5 24 5 32 0' fill='none' stroke='%230E1B4D' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 14h40l14 14v58H24z' fill='%23F5F7FF' stroke='%230E1B4D' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M64 14v14h14' fill='none' stroke='%230E1B4D' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M34 46h32M34 58h32M34 70h20' stroke='%233DE0FF' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M44 56L82 16M56 56L18 16' stroke='%23F5F7FF' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M44 56L82 16M56 56L18 16' stroke='%230E1B4D' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='72' r='13' fill='none' stroke='%23FF3D7F' stroke-width='8'/%3E%3Ccircle cx='68' cy='72' r='13' fill='none' stroke='%23FF3D7F' stroke-width='8'/%3E%3Ccircle cx='50' cy='54' r='4' fill='%230E1B4D'/%3E%3C/svg%3E");
  --fist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='18' y='22' width='64' height='60' rx='22' fill='%231A2E78' stroke='%233DE0FF' stroke-width='5'/%3E%3Ctext x='50' y='66' text-anchor='middle' font-family='Impact,sans-serif' font-size='40' fill='%23FFD23F'%3E%3F%3C/text%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; color: var(--white); font: 17px/1.5 var(--body); background: var(--scan), radial-gradient(ellipse at 50% -10%, #2B48B8 0%, var(--deep) 62%) fixed; background-color: var(--deep); }
a { color: var(--cyan); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 1.02; margin: 0; }
h2 { font-size: 24px; color: var(--yellow); margin-bottom: 14px; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 4vw, 48px); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font: 26px/1 var(--display); }
.connect { background: var(--cyan); color: var(--deep); border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; box-shadow: 0 4px 0 #1B8FA8; }

main { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 40px; }

.arena { text-align: center; padding-top: 10px; }
.kicker { margin: 0 0 8px; color: var(--cyan); font-weight: 700; letter-spacing: 0.02em; }
.arena h1 { font-size: clamp(36px, 6.4vw, 72px); color: var(--white); text-shadow: 4px 4px 0 var(--pink); }
.lead { max-width: 640px; margin: 18px auto 0; color: var(--dim); font-size: 18px; }
.stake { display: inline-block; margin-top: 14px; background: var(--yellow); color: var(--deep); border-radius: 8px; padding: 6px 16px; font-weight: 700; }
.stake b { font: 22px/1 var(--display); }

/* ---------- the ring */
.ring { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 640px; margin: 30px auto 0; padding: 26px 18px; border: 3px solid var(--cyan); border-radius: 22px; background: rgba(14, 27, 77, 0.7); box-shadow: 0 0 0 6px rgba(61, 224, 255, 0.12), 0 0 40px rgba(61, 224, 255, 0.25) inset; }
.fighter p { margin: 10px 0 0; font-weight: 700; color: var(--dim); }
.hand { width: clamp(96px, 20vw, 150px); aspect-ratio: 1; margin: 0 auto; background: var(--fist) center / contain no-repeat; }
.right .hand[data-k] { transform: scaleX(-1); }
.hand[data-k="1"], .ico[data-k="1"] { background-image: var(--rock); }
.hand[data-k="2"], .ico[data-k="2"] { background-image: var(--paper); }
.hand[data-k="3"], .ico[data-k="3"] { background-image: var(--scissors); }
.vs { font: 40px/1 var(--display); color: var(--pink); text-shadow: 3px 3px 0 var(--yellow); }
.fighter.win .hand { filter: drop-shadow(0 0 18px var(--yellow)); }
.fighter.win p { color: var(--yellow); }
.fighter.lose { opacity: 0.45; }

/* the orchestrated moment: rock, paper, scissors... shoot */
.ring.shoot .left .hand { animation: pumpL 0.42s ease-in-out 3; }
.ring.shoot .right .hand { animation: pumpR 0.42s ease-in-out 3; }
.ring.boom .hand { animation: pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes pumpL { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-34px) rotate(-14deg); } }
@keyframes pumpR { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-34px) rotate(14deg); } }
@keyframes pop { 0% { scale: 0.6; } 100% { scale: 1; } }

/* ---------- pick */
.pick { margin-top: 30px; text-align: center; }
.throws { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.throw { display: grid; justify-items: center; gap: 6px; width: 128px; padding: 14px 10px 12px; border-radius: 16px; border: 3px solid var(--blue); background: var(--blue); color: var(--white); font: 15px/1 var(--display); transition: transform 0.15s, border-color 0.15s; }
.throw:hover { transform: translateY(-3px); }
.throw.on { border-color: var(--yellow); background: #24398F; box-shadow: 0 0 22px rgba(255, 210, 63, 0.4); }
.ico { width: 64px; height: 64px; background: center / contain no-repeat; }
.go { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.go label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.go input { width: 120px; }
input { font: inherit; color: var(--deep); background: var(--white); border: 2px solid transparent; border-radius: 8px; padding: 9px 12px; }
input:focus { outline: none; border-color: var(--yellow); }
.hot { background: var(--pink); color: var(--white); border: 0; border-radius: 10px; padding: 12px 24px; font: 18px/1 var(--display); box-shadow: 0 5px 0 #B3164F; margin-top: 4px; }
.hot:active { transform: translateY(3px); box-shadow: 0 2px 0 #B3164F; }
#answerBtn { margin-top: 20px; }
.line { background: transparent; color: var(--white); border: 2px solid rgba(245, 247, 255, 0.45); border-radius: 10px; padding: 10px 18px; font-weight: 700; }
.line.small { padding: 4px 12px; font-size: 14px; }
.buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.msg { min-height: 26px; margin: 14px 0 0; text-align: center; color: var(--yellow); font-weight: 700; }
.msg.bad { color: #FF8FB1; }
.fine { color: var(--dim); font-size: 14px; max-width: 680px; margin: 8px auto 0; text-align: center; }

/* ---------- board */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
.board .fine { text-align: left; margin: 10px 0 0; }
.board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.board li a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(26, 46, 120, 0.85); border-left: 6px solid var(--cyan); color: var(--white); text-decoration: none; }
.board li a:hover { background: #24398F; }
.board li.done a { border-left-color: var(--yellow); }
.board li b { font: 16px/1 var(--display); }
.board li span { color: var(--dim); font-size: 14px; }
.board .empty { color: var(--dim); }

.foot { margin-top: 56px; padding-top: 22px; border-top: 2px solid rgba(61, 224, 255, 0.3); color: var(--dim); font-size: 15px; }
.foot p { margin: 4px 0; }
.foot .built { font: 18px/1.3 var(--display); color: var(--white); }
.addr { overflow-wrap: anywhere; }

@media (max-width: 760px) { .board { grid-template-columns: 1fr; } .throw { width: 100px; } .vs { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }