/* master.css */

/* Fonts */
@font-face {
    font-family: 'BlambotPro';
    src: url('../assets/BlambotPro.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CavemanRegular';
    src: url('../assets/CavemanRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Theme */
:root{
    --ug-red:#BF2A06;
    --ug-green:#97BA61;
    --ug-green-dark:#677A4A;
    --ug-blue:#2B6F8F;
    --ug-yellow:#F5C958;
    --ug-brown:#8F6032;
    --ug-cream:#EDDEB9;
    --ug-black:#000000;
    --ug-white:#FFFFFF;
}

/* Base layout */
body{
    font-family:'BlambotPro',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:#EEDDB9;
    color:#111827;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;

    /* Prevent content hiding behind tab bar */
    padding-bottom:80px;
}

.page{
    width:100%;
    max-width:768px;
    padding-bottom:100px;
}

.layout{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:stretch;
}

/* Logos / headings */
.__logo,
.__logo2{
    display:flex;
    justify-content:center;
}
.__logo{ margin-top:35px; }
.__logo2{ margin-top:10px; }

.__logo > img,
.__logo2 > img{
    height:80px;
    width:auto;
}

h1{
    margin-top:0;
    font-size:2.2rem;
    color:var(--ug-black);
    text-align:center;
    margin:16px 0;
    font-family:'CavemanRegular';
    font-weight:400;
    text-transform:uppercase;
}

/* Cards */
.card{
    background:#f3f3f3;
    border-radius:12px;
    padding:0 12px 12px;
    border:2px solid var(--ug-black);
    box-shadow:0 8px 18px rgba(0,0,0,0.2);
    margin-bottom:20px;
}
#p1-block{ margin-bottom:0px; }

.player-header{
    margin:0 -12px 8px;
    padding:8px 12px;
    font-size:1.0rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-weight:700;
    background:var(--ug-blue);
    color:var(--ug-white);
    border-radius:10px 10px 0 0;
}

/* Text helpers */
.page-desc{
    font-size:0.72rem;
    line-height:1.35;
    text-align:center;
    margin:10px 10px 0 10px;
    color:#111827;
}
.guide-text{
    font-size:0.7rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
}
.muted{ opacity:0.85; font-size:0.75rem; }
.tiny-center{ text-align:center; }
.yt-link{ text-align:center; font-size:0.8rem; margin-top:10px; }

/* Tables + inputs */
table{
    width:100%;
    border-collapse:collapse;
    font-size:0.8rem;
}
th,td{
    padding:3px 3px;
    text-align:left;
    white-space:nowrap;
}
th{
    font-weight:600;
    color:#4b5563;
    border-bottom:1px solid #d1d5db;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.05em;
}
tbody tr:nth-child(even){ background:#f3f4f6; }
tbody tr:nth-child(odd){ background:#ffffff; }

select,input[type="checkbox"]{ font-size:0.8rem; }
select{
    background:#ffffff;
    color:#111827;
    border-radius:6px;
    border:1px solid #9ca3af;
    padding:2px 4px;
}
.level-select{ min-width:70px; }

.field{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:180px;
}
.field > span{
    font-size:0.7rem;
    font-weight:700;
}
.field input,.field select{
    padding:6px;
    border:1px solid #9ca3af;
    border-radius:6px;
    font-family:inherit;
    font-size:0.85rem;
    background:#fff;
    color:#111827;
    margin-bottom: 0.8rem;
}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:none;
    padding:5px 12px;
    font-size:0.78rem;
    cursor:pointer;
    background:var(--ug-blue);
    color:var(--ug-white);
    margin-top:8px;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ filter:brightness(0.9); }
.btn:disabled{
    opacity:0.5;
    cursor:not-allowed;
    filter:none;
}
.btn.secondary{ background:#9ca3af; }

.btn-delete{
    background:transparent;
    border:none;
    color:#9ca3af;
    cursor:pointer;
    font-size:0.9rem;
    padding:0 2px;
}
.btn-delete:hover{ color:var(--ug-red); }

/* Tooltip */
.hint{
    position:relative;
    cursor:pointer;
    user-select:none;
}
.hint::after{
    content:attr(data-hint);
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:130%;
    background:var(--ug-black);
    color:var(--ug-white);
    padding:4px 6px;
    border-radius:6px;
    font-size:0.6rem;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.15s ease;
    z-index:10;
}
.hint.show::after{ opacity:1; }

/* Toast */
.toast{
    display:none;
    text-align:center;
    font-size:0.7rem;
    margin-top:8px;
    color:#111827;
    font-weight:700;
}

/* Store badges */
.store-badges{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:20px 0 4px;
}
.store-badges .badge img{
    height:44px;
    width:auto;
    display:block;
}

/* Generic modal (shared) */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:none; /* JS toggles to flex */
    align-items:center;
    justify-content:center;
    padding:16px;
    z-index:9999;
}
.modal-card{
    width:min(520px,100%);
    background:#fff;
    border-radius:14px;
    border:1px solid rgba(0,0,0,0.2);
    padding:12px;
    max-height:85vh;
    overflow:auto;
}

/* Bottom tab bar (shared) */
.tabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    display:flex;
    gap:8px;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:rgba(238,221,185,0.98);
    border-top:1px solid rgba(0,0,0,0.15);
    z-index:9999;
}

.tabbar a{
    flex:1;
    text-align:center;
    padding:10px 8px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
    font-size:0.85rem;
    border:1px solid rgba(0,0,0,0.15);
    background:#fff;
    color:#111;
}
.tabbar a.active{
    background:#111;
    color:#fff;
    border-color:#111;
}

.tabbar .nav-btn{
    flex:0 0 48px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.15);
    background:#fff;
    font-weight:900;
    font-size:1.1rem;
    color:#111;
}

/* Settings bottom sheet (shared) */
.settings-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:flex-end;
    justify-content:center;
    background:rgba(0,0,0,0.35);
    z-index:10050;
}
.settings-sheet{
    width:min(520px,100%);
    background:#fff;
    border-radius:16px 16px 0 0;
    padding:16px;
    box-shadow:0 -10px 30px rgba(0,0,0,0.25);
}
.settings-item{
    width:100%;
    display:block;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,0.15);
    background:#fff;
    font-weight:700;
    text-align:left;
    margin:10px 0 0;
}

/* Common responsive tweaks */
@media (max-width:600px){
    .btn{ font-size:0.7rem; margin-top:0px; }
    .card{ padding:0 12px 12px; }
    .player-header{ border-radius:10px 10px 0 0; }
    h1 {font-size:1.6rem;}
    .__logo > img,
        height:60px;
        width:auto;
}

.subscribe-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin: 10px 12px 14px;
    padding: 12px 14px;

    background: #fff7ed;              /* warm subtle highlight */
    border: 1px solid #fed7aa;
    border-radius: 14px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.subscribe-text {
    font-size: 0.65rem;
    line-height: 1.25;
    color: #444;
}

.subscribe-text .brand {
    color: #c2410c;                   /* YouTube-ish warm red */
    font-weight: 700;
}

.subscribe-btn {
    border: none;
    border-radius: 999px;

    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 700;

    background: #ef4444;
    color: white;

    cursor: pointer;
}

.subscribe-btn:active {
    transform: scale(0.97);
}

/* Hide on iOS/Android (Capacitor) */
.is-capacitor .web-only {
    display: none !important;
}

/* Increase top margin inside iOS / Android app */
.is-capacitor .__logo {
    margin-top: 50px; /* adjust as needed */
}