/* SNAKE EVOLUTION // ULTIMATE UI PASS */
:root {
  --ui-bg: #060b08;
  --ui-panel: #0b140e;
  --ui-panel-hi: #102016;
  --ui-line: #2a4631;
  --ui-green: #b8ff83;
  --ui-green-soft: #7da886;
  --ui-text: #ecf7ed;
  --ui-muted: #819985;
}
body.rework-v2 .boot-card { backdrop-filter: blur(14px); }
body.rework-v2 .boot-topline { border-color: #2a4430 !important; }
body.rework-v2 .boot-hero { border-radius: 10px; }
body.rework-v2 .boot-actions #bootStart { position: relative; overflow: hidden; }
body.rework-v2 .boot-actions #bootStart::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(215,255,199,.13) 48%, transparent 76%);
  transform: translateX(-120%); transition: transform .55s ease;
}
body.rework-v2 .boot-actions #bootStart:hover::after { transform: translateX(120%); }

#bootOptionsPanel {
  border: 1px solid #314e37 !important;
  border-radius: 12px !important;
  padding: clamp(14px, 2vw, 22px) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(137,255,111,.07), transparent 32%),
    linear-gradient(145deg, #0b140e, #060b08 70%) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.32), inset 0 0 36px rgba(0,0,0,.18);
}
#bootOptionsPanel .boot-panel-heading {
  align-items: center !important;
  padding-bottom: 16px !important;
  border-color: #2b4331 !important;
}
#bootOptionsPanel .boot-panel-heading > div { gap: 8px; }
#bootOptionsPanel .boot-panel-heading b { font-size: 12px !important; letter-spacing: 1.6px; }
#bootOptionsPanel .boot-panel-heading small { font-size: 8px !important; line-height: 1.8; }
#bootOptionsPanel .boot-panel-heading > strong {
  padding: 7px 9px; border: 1px solid #3c6042; border-radius: 5px;
  background: #0b1c10; font-size: 8px !important; letter-spacing: 1px;
}
#bootOptionsPanel .options-grid {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start; gap: 12px !important; margin-top: 14px;
}
#bootOptionsPanel .option-group {
  min-width: 0; overflow: hidden; padding: 8px 12px 10px;
  border: 1px solid #253d2b; border-radius: 8px;
  background: linear-gradient(160deg, rgba(13,25,16,.94), rgba(6,12,8,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}
#bootOptionsPanel .option-group-title {
  margin: 0; padding: 8px 0 12px; border-bottom: 1px solid #263e2c;
  color: #a8d7ae; font: 700 8px/1.4 system-ui, sans-serif; letter-spacing: 1.2px;
}
#bootOptionsPanel .option-row {
  display: flex !important; justify-content: space-between; align-items: center;
  gap: 10px; min-height: 68px !important; margin: 0 !important; padding: 10px 0 !important;
  border-bottom: 1px solid rgba(66,95,70,.36);
}
#bootOptionsPanel .option-row:last-child { border-bottom: 0; }
#bootOptionsPanel .option-row > div:first-child { min-width: 0; gap: 6px; }
#bootOptionsPanel .option-row > div:first-child b {
  color: #e8f6e9 !important; font: 700 8px/1.4 system-ui, sans-serif !important;
  letter-spacing: .8px; overflow-wrap: anywhere;
}
#bootOptionsPanel .option-row > div:first-child small {
  color: #829a86 !important; font: 500 7px/1.7 system-ui, sans-serif !important;
}
#bootOptionsPanel .option-toggle {
  flex: 0 0 auto; min-width: 58px; min-height: 30px; padding: 7px 10px;
  border: 1px solid #314c36; border-radius: 6px; background: #0b140e;
  color: #819985; font: 700 8px/1 system-ui, sans-serif; letter-spacing: 1px;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
#bootOptionsPanel .option-toggle.is-on,
#bootOptionsPanel .option-toggle[aria-pressed="true"] {
  border-color: #56814f; background: linear-gradient(180deg, #1c3820, #0e2113);
  color: var(--ui-green); box-shadow: inset 0 0 12px rgba(184,255,131,.05);
}
#bootOptionsPanel .option-toggle:focus-visible,
#bootOptionsPanel button:focus-visible,
#bootOptionsPanel input:focus-visible {
  outline: 2px solid #ffe36b; outline-offset: 3px;
}
#bootOptionsPanel .range-control { min-width: 112px; gap: 8px; }
#bootOptionsPanel .range-control input { width: min(100%, 125px); }
#bootOptionsPanel .range-control output {
  min-width: 38px; color: var(--ui-green); font: 700 8px/1 system-ui, sans-serif;
}
#bootOptionsPanel .option-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 14px;
}
#bootOptionsPanel .option-actions .boot-action {
  min-height: 42px; margin: 0 !important; border-radius: 6px;
  font-size: 8px !important; letter-spacing: .6px;
}
#bootOptionsPanel #bootResetRank { border-color: #744536 !important; }
#bootOptionsPanel #bootOptionsBack {
  width: 100%; min-height: 44px; margin-top: 10px;
  border-radius: 6px; font-size: 8px !important;
}
#bootOptionsPanel #bootCardDeck,
#bootOptionsPanel #bootBadgeArchive,
#bootOptionsPanel #bootAutoAchievements { border-color: #38583f !important; }
#bootOptionsPanel .control-deck-profile-row { flex-wrap: wrap; }
#bootOptionsPanel .rank-profile-readout { max-width: 100%; min-width: 0; font-size: 7px !important; }

#message.message {
  z-index: 20;
  padding: clamp(12px, 3vw, 30px) !important;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255,164,74,.13), transparent 38%),
    linear-gradient(180deg, rgba(2,5,3,.90), rgba(2,5,3,.98)) !important;
  backdrop-filter: blur(8px) saturate(.8);
}
#message .message-card.ultimate-result-card {
  width: min(700px, 96%);
  max-height: min(88dvh, 780px);
  overflow: auto;
  padding: clamp(18px, 3vw, 30px) !important;
  border: 1px solid #694a32 !important;
  border-top: 3px solid #ffc17d !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(255,166,91,.13), transparent 28%),
    linear-gradient(145deg, #17110c, #080b08 72%) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.64), 0 0 65px rgba(255,164,74,.08);
}
#message .message-card.ultimate-result-card h2 {
  font-size: clamp(22px, 4vw, 34px) !important;
  letter-spacing: clamp(1px, .3vw, 3px) !important;
}
#message .message-card.ultimate-result-card .result-copy {
  width: 100%; box-sizing: border-box; text-align: center;
  border-radius: 6px; line-height: 1.8 !important;
}
#message .message-card.ultimate-result-card .gameover-summary {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px;
}
#message .message-card.ultimate-result-card .gameover-summary span {
  border-radius: 7px; background: linear-gradient(145deg, #171d16, #0b100c);
}
#message .message-card.ultimate-result-card .gameover-summary span:first-child {
  border-color: #63824e !important; border-left-color: #b8ff83 !important;
}
#message .message-card.ultimate-result-card .gameover-summary span:first-child strong {
  color: var(--ui-green) !important; font-size: clamp(18px, 3vw, 28px) !important;
}
#message .message-card.ultimate-result-card .gameover-details {
  margin-top: 12px; border: 1px solid #3e4130; border-radius: 7px; overflow: hidden;
}
#message .message-card.ultimate-result-card .gameover-details summary {
  padding: 12px 14px; background: #0b130d; color: #bdd3bd; cursor: pointer;
}
#message .message-card.ultimate-result-card .gameover-details[open] summary {
  border-bottom: 1px solid #303c2d;
}
#message .message-card.ultimate-result-card .gameover-detail-body { padding: 10px; }
#message .message-card.ultimate-result-card #start,
#message .message-card.ultimate-result-card .result-menu {
  min-height: 48px !important; border-radius: 7px !important; font-size: 9px !important;
}
#message .message-card.ultimate-result-card .result-menu {
  width: 100%; margin-top: 8px; border: 1px solid #3e5d43;
  background: linear-gradient(180deg, #15271a, #0a150e); color: #c7e4cb;
  box-shadow: 0 4px 0 #1d3924; cursor: pointer;
}
#message .message-card.ultimate-result-card .result-menu:hover { filter: brightness(1.12); transform: translateY(-1px); }
#message .message-card.ultimate-result-card .record {
  display: block; border: 1px solid #665b28; border-radius: 5px;
  padding: 10px; background: #181708; text-align: center;
}
.ui-score-pulse { animation: uiScorePulse .34s ease-out; }
.ui-combo-pulse { animation: uiComboPulse .34s ease-out; }
.ui-damage-pulse { animation: uiDamagePulse .34s ease-out; }
@keyframes uiScorePulse { 0% { filter: brightness(1); } 45% { filter: brightness(1.9) drop-shadow(0 0 8px rgba(184,255,131,.45)); } 100% { filter: brightness(1); } }
@keyframes uiComboPulse { 0% { transform: scale(1); } 45% { transform: scale(1.035); filter: brightness(1.6); } 100% { transform: scale(1); filter: none; } }
@keyframes uiDamagePulse { 0%,100% { filter: none; } 40% { filter: brightness(1.6) drop-shadow(0 0 7px rgba(255,74,88,.6)); } }
@media (max-width: 980px) {
  #bootOptionsPanel .options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #bootOptionsPanel .option-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #bootOptionsPanel { padding: 12px !important; }
  #bootOptionsPanel .boot-panel-heading b { font-size: 10px !important; }
  #bootOptionsPanel .boot-panel-heading small { font-size: 7px !important; }
  #bootOptionsPanel .options-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  #bootOptionsPanel .option-group { padding: 6px 10px 8px; }
  #bootOptionsPanel .option-row { min-height: 58px !important; gap: 8px; }
  #bootOptionsPanel .option-row > div:first-child b { font-size: 8px !important; }
  #bootOptionsPanel .option-row > div:first-child small { font-size: 7px !important; }
  #bootOptionsPanel .option-toggle { min-width: 54px; }
  #bootOptionsPanel .option-actions { grid-template-columns: 1fr 1fr; }
  #bootOptionsPanel .option-actions .boot-action { min-height: 42px; }
  #message .message-card.ultimate-result-card { width: 100%; padding: 16px 12px !important; }
  #message .message-card.ultimate-result-card .gameover-summary { grid-template-columns: 1fr 1fr; }
  #message .message-card.ultimate-result-card .gameover-summary span:first-child { grid-column: 1 / -1; }
  #message .message-card.ultimate-result-card #start,
  #message .message-card.ultimate-result-card .result-menu { min-height: 46px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-score-pulse, .ui-combo-pulse, .ui-damage-pulse { animation: none !important; }
  body.rework-v2 .boot-actions #bootStart::after { display: none; }
}

/* Options readability + custom HEX color controls */
#bootOptionsPanel .option-row > div:first-child small{display:none!important}
#bootOptionsPanel .option-group-title{font-size:clamp(11px,1vw,13px)!important;letter-spacing:1.2px!important}
#bootOptionsPanel .option-row > div:first-child b{font-size:clamp(12px,1vw,14px)!important;line-height:1.5!important}
#bootOptionsPanel .option-toggle,#bootOptionsPanel .option-actions .boot-action,#bootOptionsPanel #bootOptionsBack{font-size:clamp(11px,.9vw,13px)!important}
#bootOptionsPanel .snake-color-group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 20px;margin:14px 0 16px;padding:16px;border:1px solid #34553b;border-radius:10px;background:linear-gradient(145deg,#0e1b12,#070d09)}
#bootOptionsPanel .snake-color-copy{display:grid;gap:6px;min-width:0}
#bootOptionsPanel .snake-color-copy b{font:800 15px/1.3 system-ui,sans-serif;color:#e8f6e9;letter-spacing:1px}
#bootOptionsPanel .snake-color-copy span,#bootOptionsPanel #snakeHexHelp{font:500 12px/1.6 system-ui,sans-serif;color:#91a995}
#bootOptionsPanel .snake-color-swatches{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
#bootOptionsPanel .snake-swatch{width:34px;height:34px;border-radius:50%;padding:0;border:2px solid #637768;background:var(--swatch);cursor:pointer;box-shadow:inset 0 0 0 3px #07100a,0 3px 0 #020403;transition:transform .12s ease,border-color .12s ease}
#bootOptionsPanel .snake-swatch:hover{transform:translateY(-2px)}
#bootOptionsPanel .snake-swatch[aria-pressed="true"]{border-color:#f5fff3;outline:2px solid var(--swatch);outline-offset:2px}
#bootOptionsPanel .snake-hex-row{display:flex;align-items:center;gap:8px;grid-column:1/-1}
#bootOptionsPanel .snake-hex-row label{font:800 12px/1 system-ui,sans-serif;color:#cbe0ce}
#bootOptionsPanel #snakeHexInput{width:132px;min-height:42px;box-sizing:border-box;border:1px solid #3d5d45;border-radius:6px;background:#050906;color:#f2fff2;padding:10px;font:700 15px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}
#bootOptionsPanel #snakeColorPicker{width:44px;height:42px;padding:2px;border:1px solid #3d5d45;border-radius:6px;background:#050906;cursor:pointer}
#bootOptionsPanel #snakeColorSave{min-height:42px;min-width:88px;margin:0!important;font:800 12px/1 system-ui,sans-serif!important}
#bootOptionsPanel #snakeHexHelp{grid-column:1/-1;margin-top:-7px}
#bootOptionsPanel #snakeColorStatus{grid-column:1/-1;color:#b8ff83;font:700 11px/1.5 system-ui,sans-serif;letter-spacing:.5px}
@media(max-width:620px){#bootOptionsPanel .snake-color-group{grid-template-columns:1fr;padding:12px;gap:12px}#bootOptionsPanel .snake-color-copy b{font-size:14px}#bootOptionsPanel .snake-color-copy span,#bootOptionsPanel #snakeHexHelp{font-size:11px}#bootOptionsPanel .snake-color-swatches{gap:12px}#bootOptionsPanel .snake-swatch{width:32px;height:32px}#bootOptionsPanel #snakeHexInput{flex:1;min-width:0;width:100%;font-size:14px}#bootOptionsPanel #snakeColorSave{min-width:76px}}


/* GAME OVER REFINEMENT V2 — readable result hierarchy and complete details */
#message .message-card.ultimate-result-card .gameover-summary span{
  min-width:0;
  padding:12px;
  border:1px solid #344b37;
  background:linear-gradient(145deg,#121d14,#080d09);
  color:#a9b9aa;
  font:700 11px/1.45 system-ui,sans-serif;
  letter-spacing:.7px;
  overflow-wrap:anywhere;
}
#message .message-card.ultimate-result-card .gameover-summary span:first-child{
  background:radial-gradient(circle at 100% 0%,rgba(184,255,131,.12),transparent 55%),linear-gradient(145deg,#142719,#0a120c);
}
#message .message-card.ultimate-result-card .gameover-summary strong{
  margin-top:6px;
  color:#edf8ed;
  font:800 clamp(18px,2.3vw,27px)/1.25 system-ui,sans-serif;
  letter-spacing:0;
}
#message .message-card.ultimate-result-card .gameover-summary span:first-child strong{
  color:var(--ui-green);
  font-size:clamp(26px,4vw,40px);
}
#message .message-card.ultimate-result-card .result-copy{
  border-radius:7px;
  padding:11px 14px;
  font:600 12px/1.6 system-ui,sans-serif;
  letter-spacing:.2px;
}
#message .message-card.ultimate-result-card .gameover-detail-body .stats-grid span{
  min-width:0;
  overflow-wrap:anywhere;
}
#message .message-card.ultimate-result-card .gameover-detail-body .stats-grid strong,
#message .message-card.ultimate-result-card .gameover-detail-body .analysis-grid strong{
  overflow-wrap:anywhere;
}
#message .message-card.ultimate-result-card #start,
#message .message-card.ultimate-result-card .result-menu{
  width:100%;
  min-height:50px;
}
@media(max-width:620px){
  #message .message-card.ultimate-result-card .gameover-summary span{font-size:10px}
  #message .message-card.ultimate-result-card .result-copy{font-size:11px}
}