@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@700;800&display=swap');



:root {

    --hurmos-green: #2ecc71;

    --hurmos-red: #e74c3c;

    --bg-main: rgba(10, 10, 10, 0.88);

    --panel-bg: rgba(20, 20, 20, 0.6);

    --border-dim: rgba(255, 255, 255, 0.06);

    --text-dim: #777777;

    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    --font-mono: 'JetBrains Mono', monospace;

}



body { 

    background: transparent; 

    margin: 0; 

    padding: 0; 

    font-family: var(--font-sans); 

    color: #ffffff; 

    -webkit-font-smoothing: antialiased;

    letter-spacing: -0.01em;

    overflow: hidden;

}



.hurmos-container { 

    width: 320px; 

    background: var(--bg-main); 

    border: 1px solid var(--border-dim); 

    border-radius: 8px; 

    padding: 10px; 

    box-sizing: border-box; 

    backdrop-filter: blur(8px);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

}



#display-title { 

    color: var(--hurmos-green); 

    font-weight: 900; 

    font-size: 0.95rem; 

    text-align: center; 

    text-transform: uppercase; 

    letter-spacing: 0.08em;

    margin-bottom: 8px; 

}



.hunt-meta { 

    display: flex; 

    justify-content: space-between; 

    border-bottom: 1px solid var(--border-dim); 

    padding-bottom: 6px; 

    margin-bottom: 8px; 

    text-align: center; 

}

.meta-item { 

    font-size: 0.65rem; 

    color: var(--text-dim); 

    font-weight: 700; 

    letter-spacing: 0.05em;

    text-transform: uppercase;

}

.meta-item b { 

    font-size: 1.05rem; 

    color: #ffffff; 

    display: block; 

    font-family: var(--font-mono);

    font-weight: 800;

    margin-top: 1px;

}



.tracker-layout-wrapper { 

    display: flex; 

    flex-direction: column; 

    gap: 6px; 

}



#ov-list { 

    height: 180px; 

    background: rgba(0, 0, 0, 0.4); 

    border-radius: 4px; 

    overflow: hidden; 

    position: relative; 

    border: 1px solid var(--border-dim); 

}



@keyframes continuousScroll { 

    0% { transform: translateY(0); } 

    100% { transform: translateY(-50%); } 

}

.scrolling-active #bonus-list { 

    animation: continuousScroll 14s linear infinite; 

}



#bonus-list {

    margin: 0;

    padding: 0;

    list-style: none;

}

.bonus-item { 

    display: grid; 

    grid-template-columns: 24px 1fr 55px 75px; 

    gap: 4px; 

    padding: 6px 6px; 

    border-bottom: 1px solid rgba(255, 255, 255, 0.02); 

    font-size: 0.85rem; 

    align-items: center; 

    height: 28px;

    box-sizing: border-box;

}

.item-index { 

    color: var(--text-dim); 

    font-size: 0.7rem; 

    font-family: var(--font-mono);

}

.game-name { 

    white-space: nowrap; 

    overflow: hidden; 

    text-overflow: ellipsis; 

    font-weight: 600; 

    color: #eeeeee;

}

.game-bet { 

    color: #aaaaaa; 

    text-align: right; 

    font-family: var(--font-mono);

    font-size: 0.8rem;

}

.game-res { 

    font-weight: 700; 

    text-align: right; 

    font-family: var(--font-mono);

    font-size: 0.8rem;

}



.current-highlight { 

    background: rgba(46, 204, 113, 0.08); 

    border-left: 2px solid var(--hurmos-green); 

    padding-left: 4px;

}



.stats-grid { 

    display: grid; 

    grid-template-columns: 1fr 1fr; 

    gap: 4px; 

}

.stat-box { 

    background: var(--panel-bg); 

    padding: 8px 4px; 

    border-radius: 4px; 

    text-align: center; 

    border: 1px solid var(--border-dim); 

}

.stat-label { 

    font-size: 0.6rem; 

    color: var(--text-dim); 

    text-transform: uppercase; 

    display: block; 

    font-weight: 700;

    letter-spacing: 0.02em;

}

.stat-value { 

    font-size: 1.15rem; 

    font-weight: 800; 

    color: var(--hurmos-green); 

    font-family: var(--font-mono);

    margin-top: 2px;

}



#stage-summary {

    display: block;

}



.summary-card { 

    text-align: center; 

    padding: 8px; 

    background: rgba(255, 255, 255, 0.02); 

    border-radius: 6px; 

    border: 1px solid var(--border-dim); 

    margin-bottom: 4px; 

}

.summary-badge { 

    font-size: 0.65rem; 

    font-weight: 900; 

    color: var(--text-dim); 

    text-transform: uppercase; 

    letter-spacing: 0.05em; 

}

.summary-big-val { 

    font-size: 1.4rem; 

    font-weight: 900; 

    display: block; 

    font-family: var(--font-mono);

    margin: 2px 0 6px 0; 

}

.summary-stats-list { 

    display: flex; 

    flex-direction: column; 

    gap: 4px; 

    border-top: 1px solid var(--border-dim); 

    padding-top: 6px; 

    text-align: left; 

}

.summary-row { 

    display: flex; 

    justify-content: space-between; 

    font-size: 0.8rem; 

    color: #999999; 

}

.summary-row strong { 

    color: #ffffff; 

    font-family: var(--font-mono);

    font-weight: 700; 

}



.btn-primary { 

    background: var(--hurmos-green); 

    color: #000000; 

    border: none; 

    padding: 10px; 

    font-weight: 900; 

    width: 100%; 

    cursor: pointer; 

    border-radius: 4px; 

    text-transform: uppercase; 

    margin-top: 6px; 

    font-size: 0.75rem;

    letter-spacing: 0.02em;

}

.btn-secondary { 

    background: transparent; 

    color: #ffffff; 

    border: 1px solid #333333; 

    padding: 8px; 

    width: 100%; 

    border-radius: 4px; 

    cursor: pointer; 

    margin-top: 12px; 

    font-weight: 700; 

    text-transform: uppercase; 

    font-size: 0.7rem;

}

input { 

    background: rgba(0, 0, 0, 0.5); 

    border: 1px solid #222222; 

    color: #ffffff; 

    padding: 8px; 

    width: 100%; 

    margin-bottom: 4px; 

    box-sizing: border-box; 

    border-radius: 4px; 

    font-size: 0.75rem;

}

input:focus {

    border-color: var(--hurmos-green);

    outline: none;

}



.nav-bar { display: flex; gap: 4px; margin-top: 10px; }

.tab-btn { 

    flex: 1; 

    padding: 6px; 

    background: rgba(0, 0, 0, 0.3); 

    border: 1px solid #222222; 

    color: var(--text-dim); 

    cursor: pointer; 

    border-radius: 4px; 

    font-weight: 700; 

    font-size: 0.65rem;

    letter-spacing: 0.03em;

}

.tab-btn.active { 

    border-color: var(--hurmos-green); 

    color: var(--hurmos-green); 

    background: rgba(46, 204, 113, 0.05);

}

.btn-reset { 

    color: var(--hurmos-red); 

    background: rgba(231, 76, 60, 0.05); 

    border: 1px solid rgba(231, 76, 60, 0.2); 

    padding: 8px; 

    width: 100%; 

    margin-top: 15px; 

    cursor: pointer; 

    border-radius: 4px; 

    font-weight: 700; 

    font-size: 0.7rem;

    text-transform: uppercase;

}



/* ==========================================================================

   HORIZONTAL LAYOUT SUB-SYSTEM

   ========================================================================== */

.layout-horizontal { 

    width: 600px !important; 

}

.layout-horizontal .tracker-layout-wrapper { 

    display: grid; 

    grid-template-columns: 1.35fr 1fr; 

    gap: 12px; 

    align-items: stretch; 

}

.layout-horizontal #ov-list { 

    height: 226px !important; 

    min-height: 226px !important;

    margin-bottom: 0 !important; 

}

.layout-horizontal .stat-box { padding: 10px 4px; }

.layout-horizontal .stat-value { font-size: 1.2rem; }

.layout-horizontal .stat-label { font-size: 0.65rem; }



.layout-horizontal #stage-summary .summary-card {

    padding: 10px 8px;

    margin-bottom: 0;

    height: 100%;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.layout-horizontal #stage-summary .summary-big-val { font-size: 1.5rem; margin: 4px 0 10px 0; }

.layout-horizontal #stage-summary .summary-stats-list { gap: 6px; padding-top: 10px; }

.layout-horizontal #stage-summary .summary-row { font-size: 0.85rem; }



/* ==========================================================================

   OBS STREAM OVERLAY MANAGEMENT MATRIX

   ========================================================================== */

.hurmos-overlay-active {

    padding: 0;

}

.hurmos-overlay-active .nav-bar, 

.hurmos-overlay-active .btn-reset, 

.hurmos-overlay-active #stage-setup, 

.hurmos-overlay-active #opening-input-wrap, 

.hurmos-overlay-active #tab-settings { 

    display: none !important; 

}



/* --- VERTICAL OVERLAY HANDLING (No layout parameter layout-horizontal) --- */

.hurmos-overlay-active:not(.layout-horizontal) #ov-list {

    height: 275px !important; /* Default large box to see all collected rows cleanly */

}

/* When hunt finishes in vertical layout, shrink the game list to give summary card visibility room */

.hurmos-overlay-active:not(.layout-horizontal)[data-stage="summary"] #ov-list {

    height: 105px !important;

}

/* If not finished, hide the empty or old result container completely */

.hurmos-overlay-active:not(.layout-horizontal):not([data-stage="summary"]) #stage-summary {

    display: none !important;

}

.hurmos-overlay-active:not(.layout-horizontal)[data-stage="summary"] .stats-grid {

    display: none !important;

}



/* --- HORIZONTAL OVERLAY HANDLING --- */

/* During Collecting or Opening phases, make the list fully wide to fill the canvas space */

.hurmos-overlay-active.layout-horizontal:not([data-stage="summary"]) .tracker-layout-wrapper {

    grid-template-columns: 1fr !important;

}

.hurmos-overlay-active.layout-horizontal:not([data-stage="summary"]) #ov-list {

    height: 310px !important;

}

/* Hide the right-hand panel column entirely until final summary state is active */

.hurmos-overlay-active.layout-horizontal:not([data-stage="summary"]) #stage-summary {

    display: none !important;

}

/* Restore original split design rules when final metrics hit */

.hurmos-overlay-active.layout-horizontal[data-stage="summary"] .tracker-layout-wrapper {

    grid-template-columns: 1.35fr 1fr !important;

}

.hurmos-overlay-active.layout-horizontal[data-stage="summary"] #ov-list {

    height: 226px !important;

}

.hurmos-overlay-active.layout-horizontal[data-stage="summary"] .stats-grid {

    display: none !important;

}



.hurmos-overlay-active .hurmos-container { 

    background: rgba(10, 10, 10, 0.85); 

    border: 1px solid rgba(255, 255, 255, 0.04); 

}