/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg: #0f1117;
  --panel: #171a23;
  --panel-2: #1d212c;
  --line: #272c3a;
  --text: #e7e9ee;
  --muted: #939bb0;
  --accent: #7c9cff;
  --win: #4ec994;
  --lose: #f0736a;
  --draw: #d9b169;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(1100px 600px at 50% -10%, #1b2030 0%, var(--bg) 60%);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100%;
}

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 20px 60px;
}

.wrap.wide { max-width: 940px; }

/* ---------- header ---------- */

.head h1 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -0.4px;
  font-weight: 650;
}

.head .sub { color: var(--accent); font-weight: 400; }

.tagline {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 62ch;
  font-size: 14px;
}

.ai-state {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
}

.ai-state.predicting,
.ai-state.training { color: var(--accent); }

/* ---------- board ---------- */

.board {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-gap: 14px;
  gap: 14px;
  margin: 28px 0 18px;
}

.hand-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 12px 14px;
  text-align: center;
  transition: border-color .2s;
}

.hand-card.played { border-color: #34405e; }

.hand-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.hand-glyph {
  font-size: 52px;
  line-height: 1.15;
  height: 66px;
  color: var(--muted);
}

.hand-card.played .hand-glyph { color: var(--text); }
.hand-card.cpu .hand-glyph { display: inline-block; transform: scaleX(-1); }

.hand-card.played .hand-glyph { animation: pop .18s ease-out; }

@keyframes pop {
  from { transform: translateY(4px) scale(.94); }
  to   { transform: none; }
}

.hand-card.cpu.played .hand-glyph { animation: pop-cpu .18s ease-out; }

@keyframes pop-cpu {
  from { transform: scaleX(-1) translateY(4px) scale(.94); }
  to   { transform: scaleX(-1); }
}

.hand-name { font-size: 13px; color: var(--muted); }

/* ---------- the chant ---------- */

/* both hands pump a fist on the beat, like the real thing */
.hand-card.pumping .hand-glyph {
  color: var(--text);
  animation: pump .4s ease-in-out infinite;
}

.hand-card.cpu.pumping .hand-glyph {
  animation: pump-cpu .4s ease-in-out infinite;
}

@keyframes pump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px) rotate(-8deg); }
}

@keyframes pump-cpu {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-14px) rotate(-8deg); }
}

.verdict-text.chant { color: var(--accent); }

.verdict-text .beat {
  display: inline-block;
  animation: beat-in .4s ease-out;
}

@keyframes beat-in {
  0%  { opacity: 0; transform: scale(.7); }
  40% { opacity: 1; transform: scale(1.12); }
  100%{ opacity: 1; transform: scale(1); }
}

/* ---------- result banner ---------- */

.banner {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 50;
}

.banner span {
  font-size: clamp(58px, 13vw, 148px);
  font-weight: 800;
  letter-spacing: -3px;
  animation: banner-pop 1s ease-out forwards;
}

.banner.win span {
  color: var(--win);
  text-shadow: 0 0 42px rgba(78, 201, 148, .45);
}

.banner.lose span {
  color: var(--lose);
  text-shadow: 0 0 42px rgba(240, 115, 106, .45);
}

.banner.draw span {
  color: var(--draw);
  text-shadow: 0 0 42px rgba(217, 177, 105, .4);
}

@keyframes banner-pop {
  0%   { opacity: 0; transform: scale(.65); }
  14%  { opacity: 1; transform: scale(1.08); }
  28%  { transform: scale(1); }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.1); }
}

.verdict {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.verdict-text {
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.2px;
  min-height: 28px;
}

.verdict-text.win  { color: var(--win); }
.verdict-text.lose { color: var(--lose); }
.verdict-text.draw { color: var(--draw); }

.score { display: flex; gap: 14px; }

.score-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}

.score-cell b { font-size: 19px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.score-cell i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.score-cell.win b  { color: var(--win); }
.score-cell.lose b { color: var(--lose); }
.score-cell.draw b { color: var(--draw); }

/* ---------- picker ---------- */

.picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 14px;
  gap: 14px;
}

.pick {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 18px 10px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: inherit;
  transition: background .15s, border-color .15s, transform .08s;
}

.pick:hover:not(:disabled) { background: #232837; border-color: #3a4256; }
.pick:active:not(:disabled) { transform: translateY(1px); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick:disabled { opacity: .55; cursor: default; }

.pick-glyph { font-size: 34px; line-height: 1; }
.pick-name { font-size: 14px; font-weight: 550; }

.pick kbd {
  position: absolute;
  top: 8px;
  right: 9px;
  font: 11px ui-monospace, Consolas, monospace;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
}

.hint {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
  min-height: 19px;
}

.hint.error { color: var(--lose); }

/* ---------- history strip ---------- */

.history-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  min-height: 30px;
}

.strip-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.strip { display: flex; gap: 6px; flex-wrap: wrap; }
.strip-empty { color: var(--muted); font-size: 13px; }

.pip {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.pip.win  { color: var(--win);  border-color: #2f5c48; }
.pip.lose { color: var(--lose); border-color: #6b3a37; }
.pip.draw { color: var(--draw); border-color: #5e4f30; }

/* ---------- stats page ---------- */

.panel {
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 620; }

.mode-chip {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--accent);
  border: 1px solid #2f3a5c;
  background: #1a2032;
  border-radius: 999px;
  padding: 3px 9px;
  margin-left: 6px;
  vertical-align: 2px;
}

.panel-foot {
  margin: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.panel-foot b { color: var(--text); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.panel-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.panel-head b { color: var(--text); font-weight: 550; }

.summary {
  display: flex;
  gap: 28px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.summary div { display: flex; flex-direction: column; }
.summary b { font-size: 24px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.summary i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.table-scroll { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }

th, td { padding: 8px 10px; text-align: center; white-space: nowrap; }

thead th {
  color: var(--muted);
  font-weight: 550;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.th-state { text-align: left; }
.th-next { color: var(--accent); }
.sub-head th { font-size: 10px; letter-spacing: .06em; }

tbody td { border-bottom: 1px solid #20242f; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }

td.state {
  text-align: left;
  font-family: ui-monospace, Consolas, monospace;
  color: var(--muted);
}

td.zero { color: #4b5164; }

td.bar { position: relative; }
td.bar span { position: relative; z-index: 1; }

td.bar::before {
  content: "";
  position: absolute;
  inset: 4px 6px;
  border-radius: 4px;
  background: var(--accent);
  opacity: calc(var(--p) * 0.32);
}

td.w { color: var(--win); }
td.d { color: var(--draw); }
td.l { color: var(--lose); }

.actions {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s, border-color .15s;
}

.btn:hover { background: #262b3a; border-color: #3a4256; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { background: var(--panel-2); border-color: var(--line); }

.btn.danger:hover:not(:disabled) { border-color: var(--lose); color: var(--lose); }

.btn.danger.armed {
  border-color: var(--lose);
  color: var(--lose);
  background: #2a1d1f;
}

.clear-wrap { display: inline-flex; align-items: center; gap: 10px; }

.clear-note { color: var(--muted); font-size: 12.5px; }
.clear-note.error { color: var(--lose); }

@media (max-width: 620px) {
  .board { grid-template-columns: 1fr; }
  .hand-glyph { font-size: 42px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}