:root{--coco-bg:#100c08;--coco-panel:#1d160f;--coco-panel2:#2a1d12;--coco-gold:#d6a84b;--coco-gold2:#f2ce78;--coco-text:#f6ead1;--coco-muted:#c6b698;--coco-red:#b74e35;--coco-line:rgba(214,168,75,.35)}
*{box-sizing:border-box}html{background:var(--coco-bg);color:var(--coco-text);font-family:Georgia,'Times New Roman',serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#302114 0,#171008 38%,#090705 100%)}
.coco-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:26px 0 48px}.coco-header{text-align:center;margin-bottom:18px}.coco-eyebrow{color:var(--coco-gold);letter-spacing:.22em;text-transform:uppercase;font-size:.75rem;font-weight:700}.coco-header h1{margin:.25rem 0;font-size:clamp(2rem,5vw,4rem);color:var(--coco-gold2);text-shadow:0 2px 18px #000}.coco-header p{margin:.25rem auto 0;max-width:720px;color:var(--coco-muted);font-size:1.05rem}
.coco-panel{border:1px solid var(--coco-line);border-radius:18px;background:linear-gradient(180deg,rgba(46,32,20,.96),rgba(25,18,12,.96));box-shadow:0 18px 40px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04)}
.coco-controls{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;padding:16px;margin-bottom:16px}.field label{display:block;color:var(--coco-gold2);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 6px}.field select{width:100%;background:#120d09;color:var(--coco-text);border:1px solid var(--coco-line);border-radius:10px;padding:11px 12px;font:inherit}.field select:disabled{opacity:.45}
.coco-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:16px;align-items:start}.oracle-column{display:grid;gap:16px}.match-card{padding:16px 18px}.teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}.team{display:flex;align-items:center;gap:12px;min-width:0}.team.away{justify-content:flex-end;text-align:right}.team img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:50%;padding:5px;flex:0 0 auto}.team strong{font-size:clamp(1rem,2.2vw,1.3rem);overflow-wrap:anywhere}.versus{color:var(--coco-gold);font-weight:700;font-size:1.05rem}.match-meta{text-align:center;color:var(--coco-muted);font-size:.82rem;margin-top:10px}
.oracle-card{overflow:hidden}.coco-stage{position:relative;background:#090604;display:flex;align-items:center;justify-content:center;overflow:hidden}.coco-stage{aspect-ratio:3/2}.coco-stage .coco-state{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transition:opacity .32s ease,filter .32s ease;grid-area:1/1}.coco-stage{display:grid}.coco-stage .coco-thinking{position:absolute;inset:0;opacity:0}.coco-stage.thinking .coco-base{opacity:0}.coco-stage.thinking .coco-thinking{opacity:1;filter:saturate(.98) brightness(.98)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.oracle-actions{padding:14px 16px 16px;text-align:center}.coco-button{border:1px solid #e1bb67;background:linear-gradient(#d7a84d,#9b6425);color:#170d05;border-radius:10px;padding:12px 24px;font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:0 5px 0 #553313,0 10px 20px #0007}.coco-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 3px 0 #553313}.coco-button:disabled{opacity:.45;cursor:not-allowed}.status{margin:12px 0 0;color:var(--coco-muted);min-height:1.3em;font-size:.9rem}.status.error{color:#ff9d87}
.side{display:grid;gap:16px;align-content:start}.tip-panel{padding:22px;text-align:center;position:relative;overflow:hidden}.tip-panel[hidden]{display:none}.tip-panel.reveal{animation:reveal .75s cubic-bezier(.17,.8,.25,1)}@keyframes reveal{0%{transform:scale(.82);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}.tip-title{color:var(--coco-gold);letter-spacing:.16em;text-transform:uppercase;font-size:.82rem}.tip-score{font-size:clamp(4rem,11vw,7rem);line-height:1;color:var(--coco-gold2);text-shadow:0 4px 24px #000;margin:10px 0}.tip-label{font-size:1.1rem;color:var(--coco-text)}.result-state{margin-top:12px;color:var(--coco-muted);font-size:.9rem}.result-state[data-state=exact]{color:#ffe48a}.result-state[data-state=tendency]{color:#b8e3b5}.result-state[data-state=miss]{color:#e7a697}
.stats-panel{padding:18px}.stats-panel h2,.rules h2{margin:0 0 12px;color:var(--coco-gold2);font-size:1.2rem}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stats div{border:1px solid var(--coco-line);border-radius:10px;padding:11px;background:#120d09}.stats strong{display:block;font-size:1.45rem;color:var(--coco-gold2)}.stats span{display:block;color:var(--coco-muted);font-size:.78rem;margin-top:3px}.rules{padding:18px;color:var(--coco-muted);font-size:.9rem;line-height:1.5}.rules p{margin:.45rem 0}.rules b{color:var(--coco-text)}.test-mark{margin-top:16px;text-align:center;color:#8e7d64;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:820px){.coco-shell{width:min(100% - 18px,680px);padding-top:14px}.coco-controls{grid-template-columns:1fr}.coco-main{grid-template-columns:1fr}.side{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.match-card{padding:14px}.teams{gap:8px}.team{flex-direction:column;text-align:center;gap:6px}.team.away{flex-direction:column-reverse;justify-content:center;text-align:center}.team img{width:48px;height:48px}}
@media(max-width:430px){.coco-header h1{font-size:2.35rem}.match-card{padding:12px 10px}.teams{gap:5px}.team strong{font-size:.82rem}.team img{width:42px;height:42px}.versus{font-size:.9rem}.tip-panel{padding:18px 12px}.stats{grid-template-columns:1fr 1fr}.coco-button{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.coco-stage.thinking img{filter:brightness(.92)}}


.coco-header{position:relative}
.coco-header-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.coco-header-action{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 15px;border:1px solid var(--coco-line);border-radius:10px;background:linear-gradient(180deg,rgba(46,32,20,.96),rgba(24,17,11,.96));color:var(--coco-gold2);font-weight:700;text-decoration:none;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.coco-header-action:hover,.coco-header-action:focus-visible{border-color:#d7a84d;background:linear-gradient(180deg,rgba(61,42,24,.98),rgba(29,20,12,.98));outline:none}
@media(max-width:430px){.coco-header-actions{flex-direction:column;margin-bottom:8px}.coco-header-action{width:100%;min-height:42px}}

/* COCO-PHASE5-TEST1 – Warum, Coco? innerhalb der bestehenden Tipp-Kachel */
.coco-why-btn{
  margin-top:12px;
  min-height:36px;
  padding:8px 12px;
  border:1px solid rgba(201,149,58,.58);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(63,39,18,.96),rgba(31,18,9,.96));
  color:#efd18f;
  font-weight:800;
  cursor:pointer;
}
.coco-why-btn:hover,.coco-why-btn:focus-visible{
  border-color:#d7a84d;
  filter:brightness(1.08);
  outline:none;
}
.coco-why{
  margin-top:10px;
  padding:10px 12px;
  border-left:3px solid rgba(201,149,58,.62);
  background:rgba(15,8,4,.42);
  color:#cfbd9b;
  line-height:1.5;
  font-size:.88rem;
}


/* HF9: zentrale Schmugglersiegel-Darstellung aus HF7 wiederhergestellt */
.coco-team-badge{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 48px}
.coco-team-badge svg{display:block;width:100%;height:100%}


/* TEST37 – Coco: rein visuelle Premium-Politur, keine Funktionsänderung */
.coco-header h1{
  letter-spacing:.015em;
  text-shadow:0 2px 14px rgba(0,0,0,.92),0 0 28px rgba(214,168,75,.10);
}
.coco-header p{
  color:#d4c3a2;
}
.coco-panel{
  border-color:rgba(214,168,75,.42);
  box-shadow:0 20px 42px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.055),inset 0 0 34px rgba(214,168,75,.018);
}
.coco-controls{
  background:linear-gradient(180deg,rgba(51,35,21,.97),rgba(27,19,12,.97));
}
.field select{
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.field select:not(:disabled):hover{
  border-color:rgba(214,168,75,.62);
}
.field select:not(:disabled):focus-visible{
  border-color:#d6a84b;
  box-shadow:0 0 0 3px rgba(214,168,75,.14);
  outline:none;
}
.match-card{
  background:linear-gradient(180deg,rgba(54,37,22,.97),rgba(29,20,13,.97));
}
.match-card .team strong{
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.match-card .versus{
  color:var(--coco-gold2);
  text-shadow:0 1px 10px rgba(214,168,75,.18);
}
.oracle-card{
  box-shadow:0 24px 54px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.055);
}
.coco-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 50px rgba(0,0,0,.22);
}
.oracle-actions{
  background:linear-gradient(180deg,rgba(37,25,15,.96),rgba(25,17,11,.98));
  border-top:1px solid rgba(214,168,75,.16);
  padding:17px 16px 18px;
}
.coco-button{
  min-width:230px;
  padding:14px 30px;
  border-color:#edca79;
  background:linear-gradient(180deg,#e0b65f 0%,#c58e3a 48%,#9a6123 100%);
  box-shadow:0 5px 0 #553313,0 12px 24px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.22);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.coco-button:not(:disabled):hover,.coco-button:not(:disabled):focus-visible{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 6px 0 #553313,0 15px 28px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.28);
  outline:none;
}
.coco-button:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:0 3px 0 #553313,0 8px 18px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.16);
}
.stats-panel,.rules{
  background:linear-gradient(180deg,rgba(51,35,21,.97),rgba(29,20,13,.97));
}
.stats-panel h2,.rules h2{
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.stats div{
  border-color:rgba(214,168,75,.42);
  background:linear-gradient(180deg,rgba(20,14,9,.98),rgba(15,10,7,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 7px 16px rgba(0,0,0,.16);
}
.stats strong{
  text-shadow:0 1px 10px rgba(214,168,75,.12);
}
@media(max-width:430px){
  .coco-button{min-width:0}
}

/* TEST40 – harmonisierte Coco-Proportionen auf Basis des Nutzerfeedbacks.
   Sichtbare, aber kontrollierte Layout-Politur. Keine Funktions-, Daten- oder Logikänderung. */
@media (min-width:821px){
  /* Rückkehr zu einer ausgewogenen Grundproportion statt bildlastiger TEST38/39-Aufteilung. */
  .coco-main{
    grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);
    gap:18px;
    align-items:start;
  }
  .oracle-column{gap:16px}
  .match-card{padding:16px 18px}
  .coco-stage{aspect-ratio:3/2}

  /* Hauptaktion präsent, aber der Aktionsbereich bleibt kompakt. */
  .oracle-actions{padding:15px 18px 17px}
  .coco-button{
    width:min(100%,300px);
    min-width:230px;
    font-size:1.03rem;
    padding:13px 28px;
  }
  .status{margin-top:10px}

  /* Rechte Informationszone: beide Außenkacheln im gleichen Maßstab. */
  .side{gap:16px}
  .stats-panel,.rules{
    min-height:286px;
    padding:20px;
    border-color:rgba(214,168,75,.42);
    background:linear-gradient(180deg,rgba(51,35,21,.97),rgba(29,20,13,.97));
    box-shadow:0 18px 38px rgba(0,0,0,.40),inset 0 1px rgba(255,255,255,.05);
  }
  .stats-panel h2,.rules h2{
    margin:0 0 14px;
    font-size:1.22rem;
    line-height:1.15;
    color:var(--coco-gold2);
  }

  /* Bilanz: sechs gleichmäßige, etwas großzügigere Felder. */
  .stats{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .stats div{
    min-height:66px;
    padding:11px 13px;
    border-radius:11px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .stats strong{font-size:1.48rem;line-height:1.05}
  .stats span{font-size:.82rem;line-height:1.25;margin-top:4px}

  /* Kodex bleibt gleichwertige Kachel; Text bekommt Luft statt zusammengepresst zu wirken. */
  .rules{
    font-size:.93rem;
    line-height:1.55;
  }
  .rules p{margin:.58rem 0;color:var(--coco-muted)}
}