*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;background:#111;color:#eee}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#1c1c1c;border-bottom:1px solid rgba(255,255,255,.12)}
.brand{font-weight:800}
.stats{display:flex;gap:16px;opacity:.95}
.main{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;padding:12px}
.panel{background:#181818;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
button{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 12px;cursor:pointer}
button:hover{background:rgba(255,255,255,.18)}
button.danger{border-color:rgba(255,100,100,.5)}
#horses{display:flex;flex-direction:column;gap:8px}
.horseCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px}
.horseTitle{font-weight:700}
.horseMeta{opacity:.9;font-size:12px;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.hint{opacity:.8;font-size:12px;line-height:1.5}
.log{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Noto Sans JP",monospace;font-size:12px;white-space:pre-wrap;line-height:1.45;opacity:.95}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:12px;z-index:50}
.modal.hidden{display:none}
.modalCard{width:min(900px,100%);max-height:90vh;overflow:hidden;background:#141414;border:1px solid rgba(255,255,255,.15);border-radius:14px}
.raceCard{width:min(1200px,100%);height:min(90vh,900px);position:relative}
.modalHeader{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.modalTitle{font-weight:800}
.modalActions{display:flex;gap:8px;align-items:center}
.modalClose{width:40px}
.modalBody{padding:12px;overflow:auto;max-height:calc(90vh - 52px)}
iframe{width:100%;height:calc(100% - 52px);border:0;display:block}

.marketList{display:flex;flex-direction:column;gap:8px}
.marketCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.marketMeta{opacity:.9;font-size:12px;display:flex;gap:10px;flex-wrap:wrap}
.marketLeft{display:flex;flex-direction:column;gap:4px}
.marketRight{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.marketPrice{font-weight:800}

.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:12px;opacity:.95}
.badge.ok{background:rgba(100,255,150,.12)}
.badge.ng{background:rgba(255,150,100,.12)}
.smallbtn{padding:6px 8px;border-radius:10px;font-size:12px}
.horseRow{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.horseActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.raceCardRow{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.raceMeta{opacity:.9;font-size:12px;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.retireChoices{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

select{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:6px 8px}

.betTable{width:100%;border-collapse:collapse;font-size:13px}
.betTable th,.betTable td{padding:6px;border-top:1px solid rgba(255,255,255,.10)}

.excl{font-weight:900;font-size:18px;color:#ffd17a}

.pedTable{width:100%;border-collapse:collapse;font-size:12px}
.pedTable td,.pedTable th{border:1px solid rgba(255,255,255,.12);padding:6px;vertical-align:top}
.pedCell{min-width:160px}
.pedName{font-weight:800}
.pedMeta{opacity:.85;font-size:11px;margin-top:4px}

.pedRepeat{background:rgba(255,215,120,.10)}
.pedRepeat .pedName:after{content:"  ★"; color:#ffd17a; font-weight:900}
.pedLegend{margin-top:10px;font-size:12px;opacity:.9;line-height:1.5}

.pop{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:12px;opacity:.95}

.cerTitle{font-weight:900;font-size:16px;margin-bottom:8px}
.cerItem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;margin-top:8px}
.cerBadge{display:inline-block;padding:2px 10px;border-radius:999px;background:rgba(255,215,120,.12);border:1px solid rgba(255,215,120,.35);font-weight:900}

#confettiCanvas{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2000;
}

#ceremony3dWrap{filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));}

.slotRow{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:8px}

.ending{position:fixed;inset:0;z-index:4000;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;overflow:hidden}
.ending.hidden{display:none}
.endingBg{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%, rgba(40,40,55,.55), rgba(0,0,0,.92))}
.endingCreditsWrap{position:absolute;left:50%;top:10%;transform:translateX(-50%);width:min(720px,calc(100vw - 24px));text-align:center}
.endingTitle{font-weight:1000;font-size:28px;letter-spacing:2px;text-shadow:0 3px 18px rgba(0,0,0,.75);margin-bottom:10px}
.endingCredits{position:relative;margin:0 auto;width:100%;max-height:65vh;overflow:hidden}
.endingSection{font-weight:1000;opacity:.95;margin-top:20px;letter-spacing:2px}
.endingLine{opacity:.88;margin-top:8px}
.endingSpacer{height:24px}
.endingTelop{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);width:min(920px,calc(100vw-24px));background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 14px;font-weight:900;font-size:14px;line-height:1.55;white-space:pre-wrap;opacity:0;transition:opacity .25s ease}
.endingTelop.show{opacity:1}
.endingHint{position:absolute;right:12px;bottom:12px;font-size:12px;opacity:.7}

.yearEndCard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;margin-top:8px;display:flex;justify-content:space-between;gap:10px}
.yearEndActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.legendItem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;margin-top:8px;cursor:pointer}
.legendItem:hover{background:rgba(255,255,255,.10)}
.legendSmall{opacity:.85;font-size:12px;line-height:1.4}