
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Trebuchet MS",Arial,sans-serif}
body{
 background:#0b0703 url(../images/back2.jpg) center top/cover fixed no-repeat;
 color:#f7e8b5; min-height:100vh; padding-top:10px;
}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(5,3,1,.40),rgba(5,3,1,.15) 48%,rgba(5,3,1,.30));z-index:-1}
#header{display:block;width:500px;height:200px;object-fit:contain;margin:5px auto 5px;filter:drop-shadow(0 4px 7px #000)}
#container{
 width:640px;margin:15px auto 35px;padding:12px;
 background:linear-gradient(180deg,rgba(24,18,8,.91),rgba(9,7,4,.94));
 border:2px solid #d39a17;border-radius:14px;
 box-shadow:0 0 0 3px rgba(20,11,2,.9),0 0 0 4px rgba(255,210,75,.32),0 18px 45px #000;
}
.box{background:rgba(18,13,6,.72);border:1px solid #80560b;padding:12px;box-shadow:inset 0 0 25px rgba(0,0,0,.6)}
.rounded{border-radius:10px}
#container h2{color:#ffe7a0;text-shadow:0 2px 3px #000;font-size:22px;line-height:1.25}
#container hr{height:1px;border:0;background:linear-gradient(90deg,transparent,#c9911b,transparent);margin:8px 0}
.menuItem{
 position:relative;margin:10px 0;padding:10px 18px!important;border-radius:9px!important;
 background:linear-gradient(180deg,#ffe66e 0%,#ffc928 44%,#e5a20a 100%)!important;
 border:2px solid #3a2300!important;color:#211400!important;font-size:27px!important;font-weight:900!important;
 text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.7);
 box-shadow:inset 0 0 0 1px #fff2a0,inset 0 -7px 14px rgba(145,83,0,.18),0 4px 10px #000!important;
 transition:.15s ease;
}
.menuItem:after{content:"›";position:absolute;right:18px;top:3px;font-size:42px;line-height:1;color:#3b2504}
.menuItem:hover{background:linear-gradient(#fff08b,#ffd33e,#f2b30f)!important;transform:translateY(-1px);filter:brightness(1.05)}
.menuItemFooter{
 margin:4px!important;padding:7px 8px!important;border-radius:8px!important;
 background:linear-gradient(#f5c942,#bd7b06)!important;border:1px solid #f7d766!important;
 color:#261700!important;font-weight:800!important;box-shadow:0 3px 8px #000!important;
}
.menuItemFooter:hover{background:linear-gradient(#ffe67a,#d99408)!important}
a{text-decoration:none;color:#e7b936}
.textbox,input[type=text],input[type=password],input[type=email],select,textarea{
 background:rgba(10,8,4,.90)!important;color:#ffe8a5!important;border:1px solid #b57a0d!important;
 box-shadow:inset 0 0 8px #000!important;padding:7px;border-radius:5px
}
.button,input[type=submit],input[type=button],button{
 background:linear-gradient(#ffe56d,#e5a10a)!important;color:#241600!important;border:1px solid #ffd95a!important;
 font-weight:900!important;border-radius:6px!important;box-shadow:0 3px 8px #000!important;padding:7px 14px!important
}
table{color:#f5e4b4}
.important{color:#ffd34b}
@media(max-width:720px){#container{width:92%}#header{width:min(82vw,500px);height:auto}.menuItem{font-size:21px!important}}

/* FIX: only one language selector */
#flags, .flags, #language, .language-selector, .language_switcher {display:none!important;}
#eph-language-switcher{display:block!important;position:fixed!important;left:18px!important;top:32px!important;z-index:99999!important;}
/* clean original fantasy background, no baked-in logo/UI */
body{background-position:center top!important;background-size:cover!important;background-attachment:fixed!important;}





/* Ephorion2 mobile background v2 — full back2.jpg visible, no cropping/stretching */
@media screen and (max-width: 768px){
 html,body{
   width:100%!important;
   min-height:100%!important;
   background:#090603!important;
 }
 body{
   position:relative!important;
   background-image:none!important;
   background-color:#090603!important;
   overflow-x:hidden!important;
 }
 body:before{
   content:""!important;
   display:block!important;
   position:fixed!important;
   z-index:-2!important;
   left:0!important;
   top:0!important;
   width:100vw!important;
   height:100vh!important;
   background-color:#090603!important;
   background-image:url('../images/back2.jpg')!important;
   background-repeat:no-repeat!important;
   background-position:center center!important;
   background-size:contain!important;
   opacity:1!important;
 }
 body:after{
   content:""!important;
   position:fixed!important;
   z-index:-1!important;
   inset:0!important;
   pointer-events:none!important;
   background:rgba(5,3,1,.08)!important;
 }
 #header{
   max-width:72vw!important;
   height:auto!important;
   margin-top:5px!important;
 }
 #container{
   width:92%!important;
   max-width:640px!important;
   margin:10px auto 24px!important;
 }
}


/* Ephorion2 mobile background v3 */
@media only screen and (max-width:768px){
 html{
   min-height:100%!important;
   background:#0b0703!important;
 }
 body{
   min-height:100vh!important;
   margin:0!important;
   background:#0b0703!important;
   background-image:none!important;
   overflow-x:hidden!important;
 }
 body::before{
   content:""!important;
   position:absolute!important;
   top:0!important;
   left:0!important;
   width:100%!important;
   height:100vh!important;
   min-height:100vh!important;
   z-index:-2!important;
   background-image:url('../images/back2.jpg')!important;
   background-repeat:no-repeat!important;
   background-size:cover!important;
   /* Bias right so the female character remains visible on portrait screens */
   background-position:68% top!important;
   background-attachment:scroll!important;
   opacity:1!important;
 }
 body::after{
   content:""!important;
   position:absolute!important;
   top:0!important;
   left:0!important;
   width:100%!important;
   height:100vh!important;
   z-index:-1!important;
   background:rgba(5,3,1,.10)!important;
   pointer-events:none!important;
 }
 #header{
   width:56vw!important;
   max-width:230px!important;
   height:auto!important;
   margin:8px auto 4px!important;
 }
 #container{
   width:90%!important;
   max-width:520px!important;
   margin:8px auto 18px!important;
 }
}
