/* =========================================================
   Shared gothic styling for PUZZLE VAULT pages
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&family=Cinzel:wght@500;700&family=Cormorant+Garamond&display=swap");

*{ box-sizing:border-box; }

body{
    margin:0;
    min-height:100vh;
    font-family:"Cormorant Garamond",serif;
    color:#ddd;
    background:
        radial-gradient(circle at top,#2a0000,#050505 60%),
        linear-gradient(#0a0a0a,#000);
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:radial-gradient(circle,rgba(0,0,0,0) 40%,rgba(0,0,0,0.85) 100%);
    pointer-events:none;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    background:url("https://www.transparenttextures.com/patterns/dark-mosaic.png");
    opacity:.08;
    pointer-events:none;
}

header{
    text-align:center;
    padding:24px 16px 8px;
    position:relative;
    z-index:1;
}

h1{
    font-family:"UnifrakturCook",cursive;
    font-size:54px;
    margin:0;
    color:#c40000;
    text-shadow:0 0 20px red,0 0 50px darkred;
}

.tagline{
    font-size:11px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#aaa;
    margin-top:6px;
}

.backlink{
    display:inline-block;
    margin:6px auto 0;
    font-family:"Cinzel",serif;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#ff6666;
    text-decoration:none;
    border:1px solid #660000;
    padding:6px 14px;
}
.backlink:hover{ background:#220000; box-shadow:0 0 10px crimson; }

.panel{
    position:relative;
    z-index:1;
    width:680px;
    max-width:94%;
    margin:18px auto 40px;
    padding:22px;
    border:3px ridge #555;
    background:linear-gradient(#141414,#0a0a0a);
    text-align:center;
}

.status{
    font-family:"Cinzel",serif;
    letter-spacing:3px;
    color:#ff4d4d;
    font-size:14px;
    margin:6px 0 14px;
    min-height:18px;
}

.gbtn{
    font-family:"Cinzel",serif;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:12px;
    color:#ffb3b3;
    background:linear-gradient(#2a0000,#0d0000);
    border:1px solid #660000;
    padding:10px 18px;
    margin:4px;
    cursor:pointer;
    transition:.2s ease;
}
.gbtn:hover{
    border-color:#ff4d4d;
    box-shadow:0 0 10px crimson;
    color:#fff;
}

.controls{ margin-top:16px; }

input[type="text"]{
    font-family:"Cormorant Garamond",serif;
    font-size:18px;
    color:#ffdddd;
    background:#100000;
    border:1px solid #660000;
    padding:8px 12px;
    outline:none;
}
input[type="text"]:focus{ border-color:#ff4d4d; box-shadow:0 0 8px crimson; }

.win{
    font-family:"UnifrakturCook",cursive;
    font-size:34px;
    color:#c40000;
    text-shadow:0 0 16px darkred;
}

@media(max-width:520px){
    h1{ font-size:38px; }
}