@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

body{
    font-family:'Crimson Text',Georgia,serif;
    background:#1a1208;
    color:#e8dfc0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
}
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(ellipse at 20% 50%,rgba(60,40,10,.4) 0%,transparent 60%),
        radial-gradient(ellipse at 80% 20%,rgba(40,20,5,.5) 0%,transparent 50%);
    pointer-events:none;
    z-index:0;
}

/* ── Toppmeny ── */
.top-nav{
    position:fixed;top:0;right:0;
    padding:14px 20px;
    display:flex;gap:16px;
    font-size:12px;z-index:10;
}
.top-nav a{color:#4a3a18;text-decoration:none;letter-spacing:.5px;}
.top-nav a:hover{color:#8a6228;}
.top-nav .nav-admin{color:#c8a44a;border:1px solid #4a3a18;padding:3px 10px;border-radius:4px;}
.top-nav .nav-shop{color:#6aaa4a;border:1px solid #3a6a2a;padding:3px 10px;border-radius:4px;}
.top-nav .nav-shop:hover{color:#8aca6a;border-color:#6aaa4a;}

/* ── Header ── */
.site-header{
    width:100%;max-width:1000px;
    padding:56px 20px 16px;
    text-align:center;
    position:relative;z-index:1;
}
.site-title{
    font-family:'Cinzel',serif;
    font-size:52px;font-weight:700;
    color:#c8a44a;letter-spacing:4px;
    text-shadow:0 2px 16px rgba(200,164,74,.2);
    margin-bottom:8px;
}
.site-sub{font-size:14px;color:#7a6238;letter-spacing:2px;font-style:italic;}
.divider{
    width:320px;height:1px;
    background:linear-gradient(to right,transparent,#4a3a18,#8a6228,#4a3a18,transparent);
    margin:24px auto;
    position:relative;z-index:1;
}

/* ── Huvud ── */
.main{
    width:100%;max-width:960px;
    padding:0 20px 60px;
    position:relative;z-index:1;
}

/* ── Formulärkort ── */
.form-card{
    background:#1e180f;
    border:1px solid #4a3a18;
    border-radius:10px;
    padding:32px;
    max-width:420px;
    margin:0 auto;
}
.form-card h2{font-family:'Cinzel',serif;font-size:18px;color:#c8a44a;margin-bottom:6px;letter-spacing:1px;}
.form-card p{font-size:13px;color:#7a6238;margin-bottom:20px;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12px;color:#8a6228;letter-spacing:.5px;margin-bottom:5px;text-transform:uppercase;}
.form-group input{
    width:100%;padding:10px 12px;
    background:#12100a;border:1px solid #4a3a18;
    border-radius:5px;color:#c8a44a;
    font-family:'Crimson Text',Georgia,serif;font-size:14px;outline:none;
}
.form-group input:focus{border-color:#8a6228;}
.form-group input.pin-style{letter-spacing:6px;font-size:20px;text-align:center;}
.field-hint{font-size:11px;color:#6a4a18;margin-top:3px;}
.btn-submit{
    width:100%;padding:11px;margin-top:6px;
    background:#3d2e12;border:1px solid #8a6228;
    border-radius:6px;color:#c8a44a;
    font-family:'Crimson Text',Georgia,serif;font-size:15px;
    letter-spacing:1px;cursor:pointer;transition:all .15s;
}
.btn-submit:hover{background:#4a3818;border-color:#c8a44a;}
.errors{
    background:#2a1010;border:1px solid #5a2020;
    border-radius:5px;padding:10px 14px;margin-bottom:16px;
}
.errors p{font-size:12px;color:#e08080;margin-bottom:3px;}
.errors p:last-child{margin-bottom:0;}
.form-switch{text-align:center;margin-top:16px;font-size:12px;color:#6a5228;}
.form-switch button{
    background:none;border:none;color:#8a6228;cursor:pointer;
    font-family:'Crimson Text',Georgia,serif;font-size:12px;text-decoration:underline;
}
.form-switch button:hover{color:#c8a44a;}

/* ── Info-grid (startsidan) ── */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;}
.info-card{
    background:#1a1208;border:1px solid #3a2a0e;
    border-radius:8px;padding:18px;text-align:center;
}
.info-card .ico{font-size:30px;margin-bottom:8px;}
.info-card h3{font-family:'Cinzel',serif;font-size:13px;color:#8a6228;letter-spacing:1px;margin-bottom:6px;}
.info-card p{font-size:12px;color:#5a4828;line-height:1.7;}

/* ── Spelomgångslista ── */
.games-section h2{font-family:'Cinzel',serif;font-size:20px;color:#c8a44a;letter-spacing:2px;margin-bottom:8px;text-align:center;}
.games-section .greeting{font-size:13px;color:#7a6238;text-align:center;margin-bottom:20px;}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:20px;}
.game-card{
    background:#1e180f;border:1px solid #4a3a18;
    border-radius:8px;padding:18px;
    transition:border-color .15s;
    position:relative;overflow:hidden;
}
.game-card:hover{border-color:#8a6228;}
.game-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(to right,#3d2e12,#8a6228,#3d2e12);
}
.game-card-title{font-family:'Cinzel',serif;font-size:15px;font-weight:700;color:#c8a44a;margin-bottom:8px;letter-spacing:.5px;}
.game-card-meta{font-size:12px;color:#7a6238;margin-bottom:3px;}
.game-card-era{display:inline-block;font-size:11px;color:#8a6228;border:1px solid #4a3a18;border-radius:3px;padding:2px 8px;margin:8px 0 4px;}
.active-badge{font-size:11px;color:#6aaa4a;margin-left:8px;}
.game-card-btn{
    display:block;width:100%;margin-top:10px;padding:8px;
    background:#2a1e0a;border:1px solid #6a4a18;
    border-radius:5px;color:#c8a44a;
    font-family:'Crimson Text',Georgia,serif;font-size:13px;
    letter-spacing:.5px;cursor:pointer;text-align:center;transition:all .15s;
}
.game-card-btn:hover{background:#3d2e12;border-color:#c8a44a;}

/* ── Guldbutiken ── */
.shop-wrap{max-width:960px;margin:0 auto;}

.shop-header{
    display:flex;align-items:center;justify-content:space-between;
    background:#1e180f;border:1px solid #4a3a18;
    border-radius:10px;padding:24px 28px;
    margin-bottom:32px;
}
.shop-title{font-family:'Cinzel',serif;font-size:26px;color:#c8a44a;letter-spacing:2px;}
.shop-balance{text-align:right;}
.balance-label{font-size:11px;color:#7a6238;letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;}
.balance-amount{font-family:'Cinzel',serif;font-size:22px;color:#c8a44a;}
.balance-hint{font-size:11px;color:#5a4828;margin-top:3px;}

.shop-class{margin-bottom:40px;}
.shop-class-header{margin-bottom:16px;}
.shop-class-title{font-family:'Cinzel',serif;font-size:18px;color:#c8a44a;letter-spacing:1px;margin-bottom:4px;}
.shop-class-desc{font-size:13px;color:#7a6238;}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}

.shop-card{
    background:#1e180f;border:1px solid #4a3a18;
    border-radius:10px;padding:20px 16px;
    text-align:center;position:relative;
    transition:border-color .15s, transform .15s;
}
.shop-card:hover{border-color:#8a6228;transform:translateY(-2px);}
.shop-card-featured{
    border-color:#8a6228;
    background:#221a0e;
    box-shadow:0 0 20px rgba(200,164,74,.08);
}

.shop-badge{
    position:absolute;top:-10px;left:50%;transform:translateX(-50%);
    background:#c8a44a;color:#1a1208;
    font-size:9px;font-weight:700;letter-spacing:1px;
    padding:3px 10px;border-radius:10px;
    white-space:nowrap;
}
.shop-card-name{
    font-family:'Cinzel',serif;
    font-size:14px;color:#c8a44a;
    margin-bottom:12px;margin-top:6px;
}
.shop-card-gold{
    font-family:'Cinzel',serif;
    font-size:26px;color:#e8c96a;
    line-height:1;
}
.shop-card-gold-label{font-size:11px;color:#7a6238;margin-bottom:12px;margin-top:2px;}
.shop-card-price{
    font-family:'Cinzel',serif;
    font-size:20px;color:#c8a44a;
    margin-bottom:4px;
}
.shop-card-value{font-size:11px;color:#5a4828;margin-bottom:14px;}

.shop-btn{
    width:100%;padding:9px;
    background:#3d2e12;border:1px solid #8a6228;
    border-radius:5px;color:#c8a44a;
    font-family:'Crimson Text',Georgia,serif;
    font-size:13px;cursor:not-allowed;
    opacity:.6;transition:all .15s;
}
.shop-btn:not(:disabled){cursor:pointer;opacity:1;}
.shop-btn:not(:disabled):hover{background:#4a3818;border-color:#c8a44a;}
.shop-btn-hint{font-size:10px;color:#4a3818;margin-top:5px;}

.shop-history{
    background:#1e180f;border:1px solid #4a3a18;
    border-radius:10px;padding:20px 24px;
    margin-top:32px;
}
.shop-history-title{
    font-family:'Cinzel',serif;font-size:15px;
    color:#c8a44a;margin-bottom:16px;letter-spacing:.5px;
}
.shop-history-empty{font-size:13px;color:#5a4828;font-style:italic;}
.shop-history-table{width:100%;border-collapse:collapse;}
.shop-history-table th{
    font-size:11px;color:#7a6238;
    text-transform:uppercase;letter-spacing:.5px;
    padding:6px 10px;text-align:left;
    border-bottom:1px solid #3a2a0e;
}
.shop-history-table td{
    font-size:13px;color:#a09060;
    padding:8px 10px;
    border-bottom:1px solid #2a1e0a;
}
.shop-history-table tr:last-child td{border-bottom:none;}

.shop-footer-note{
    text-align:center;margin-top:24px;
    font-size:13px;
}
.shop-footer-note a{color:#7a6238;text-decoration:none;}
.shop-footer-note a:hover{color:#c8a44a;}

/* ── Footer ── */
.site-footer{
    padding:20px;font-size:11px;
    color:#3a2a0e;text-align:center;
    letter-spacing:1px;margin-top:auto;
    position:relative;z-index:1;
}
.site-footer a{color:#3a2a0e;text-decoration:none;}
.site-footer a:hover{color:#6a4a18;}

/* ── Responsiv ── */
@media(max-width:640px){
    .site-title{font-size:36px;}
    .info-grid{grid-template-columns:1fr;}
    .games-grid{grid-template-columns:1fr;}
    .shop-header{flex-direction:column;gap:16px;text-align:center;}
    .shop-balance{text-align:center;}
    .shop-grid{grid-template-columns:repeat(2,1fr);}
}


/* ── PayPal-modal ── */
.paypal-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.75);
    z-index:999;align-items:center;justify-content:center;
    padding:20px;
}
.paypal-overlay.open{display:flex;}

.paypal-box{
    background:#1e180f;border:1px solid #8a6228;
    border-radius:12px;width:100%;max-width:460px;
    box-shadow:0 8px 32px rgba(0,0,0,.7);
    overflow:hidden;
}
.paypal-header{
    background:#3d2e12;border-bottom:1px solid #4a3a18;
    padding:16px 20px;display:flex;
    align-items:center;justify-content:space-between;
}
.paypal-title{
    font-family:'Cinzel',serif;font-size:16px;
    color:#c8a44a;letter-spacing:1px;
}
.paypal-close{
    background:none;border:1px solid #4a3a18;
    border-radius:4px;color:#7a6238;
    padding:4px 10px;cursor:pointer;font-size:14px;
    transition:all .15s;
}
.paypal-close:hover{color:#c8a44a;border-color:#8a6228;}

.paypal-body{padding:24px 24px 20px;}

.paypal-pkg-name{
    font-family:'Cinzel',serif;font-size:18px;
    color:#c8a44a;text-align:center;margin-bottom:4px;
}
.paypal-pkg-gold{
    font-family:'Cinzel',serif;font-size:28px;
    color:#e8c96a;text-align:center;margin-bottom:20px;
}

.paypal-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.paypal-step{display:flex;gap:14px;align-items:flex-start;}
.step-num{
    width:28px;height:28px;flex-shrink:0;
    background:#3d2e12;border:1px solid #8a6228;
    border-radius:50%;display:flex;
    align-items:center;justify-content:center;
    font-family:'Cinzel',serif;font-size:13px;color:#c8a44a;
}
.step-text{font-size:13px;color:#a09060;line-height:1.6;padding-top:4px;}

.paypal-btn{
    display:block;width:100%;padding:13px;
    background:#003087;border:none;border-radius:6px;
    color:#fff;font-size:15px;font-weight:bold;
    text-align:center;text-decoration:none;
    letter-spacing:.5px;cursor:pointer;
    transition:background .15s;
}
.paypal-btn:hover{background:#001f5c;}

.paypal-note{
    text-align:center;margin-top:14px;
    font-size:12px;color:#5a4828;
}
.paypal-note a{color:#7a6238;text-decoration:none;}
.paypal-note a:hover{color:#c8a44a;}