/*
 * HAMMER2 — Complete Website Theme
 * Replace old GF CSS links with:
 *   <link href="hammer2/hammer2.css" rel="stylesheet" type="text/css" />
 * Keep languagebar.css AFTER this file for flag sprites.
 * Images needed: hammer2/bg.jpg, hammer2/footer_bg.jpg
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Fira+Sans:wght@300;400;500&display=swap');

:root {
  --gold:#d4a853;--gold-light:#f0d48a;--gold-dark:#9a7030;--gold-dim:#644b23;
  --panel-bg:rgba(12,10,8,0.85);--panel-hl:rgba(212,168,83,0.04);
  --dark-bg:#0a0806;--darker:#000;
  --text-warm:#e8c898;--text-body:#c8b898;--text-muted:#8c7a62;
  --border-gold:rgba(212,168,83,0.25);--border-gold-s:rgba(212,168,83,0.45);
  --shadow-deep:0 4px 24px rgba(0,0,0,0.6);--shadow-glow:0 0 20px rgba(212,168,83,0.06);
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
ol,ul{list-style:none}table{border-collapse:collapse}
a{text-decoration:none;transition:color .25s,border-color .25s}img{vertical-align:middle}

html{background:var(--darker);font-family:'Fira Sans',Arial,sans-serif;font-size:14px;color:var(--text-body);-webkit-font-smoothing:antialiased}

body{min-width:960px;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"),
    url('bg.jpg') top center no-repeat;
  background-color:#000;
  background-attachment:scroll,scroll;
  background-size:256px 256px, auto auto;
}

/* Scanlines */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(to bottom,transparent,transparent 3px,rgba(0,0,0,0.015) 3px,rgba(0,0,0,0.015) 6px)}

::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--darker)}
::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gold-dark)}

/* ── LANGUAGE BAR ── */
/* Flag sprites */
.flag{display:inline-block;width:20px;height:14px;border:1px solid rgba(100,75,35,0.3);border-radius:2px;margin-right:8px;background-image:url(flags.png);background-repeat:no-repeat}
.mmo_RO{background-position:left -644px}
.mmo_EN{background-position:left -224px}
.mmo_DE{background-position:left -168px}
.mmo_PL{background-position:left -616px}
.language-dropdown #language-options.show{display:block}
#language-bar{background:rgba(6,5,4,0.95);border-bottom:1px solid rgba(100,75,35,0.12);padding:7px 0;text-align:center;position:relative;z-index:200;height:auto;box-shadow:none;display:flex;justify-content:center;align-items:center}
#language-selector{display:inline-flex;align-items:center;gap:12px}
#language-selector label{font-size:11px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;font-family:'Fira Sans',sans-serif;font-weight:400;position:static;top:auto}
.language-dropdown{position:relative;display:inline-block;cursor:pointer;padding:5px 14px;font-size:12px;color:var(--text-warm);background:rgba(20,16,12,0.8);border:1px solid var(--gold-dim);border-radius:0;width:auto;transition:border-color .2s}
.language-dropdown:hover{border-color:var(--gold-dark)}
.selected-language{display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:0}
.dropdown-arrow{width:auto;height:auto;border:4px solid transparent;border-top:5px solid var(--gold-dim);margin-left:6px;transform:none}
#language-options,.dropdown-hidden{display:none;position:absolute;top:100%;left:-1px;right:-1px;z-index:999;background:rgba(16,14,11,0.98);border:1px solid var(--gold-dim);border-top:none;padding:0;border-radius:0;width:auto}
#language-options.show{display:block}
#language-options li{padding:8px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:12px;transition:all .15s}
#language-options li:hover{background:rgba(100,75,35,0.15);color:var(--text-warm)}


/* ── HEADER ── */
body>header[role="banner"]{position:relative;height:310px;z-index:100;min-width:960px;overflow:hidden}
body>header[role="banner"]::before{display:none}
body>header[role="banner"]::after{display:none}
#slideshow_slides,body>header>.carousel.container,body>header>.carousel{display:none}
body>header>h1.logo{position:relative;z-index:10;height:310px;text-indent:-9999px;margin-bottom:-310px;filter:drop-shadow(0 4px 16px rgba(154,112,48,0.35))}

/* Register button */
body>header>.ui.container{position:relative;z-index:300;width:960px;margin:0 auto;overflow:visible;background:none}
body>header>.ui.container.loggedin{background:none}
body>header>.ui.container>a.playfree{position:absolute;top:245px;left:50%;transform:translateX(-50%);width:auto;height:auto;padding:15px 60px;font-family:'Cinzel',serif;font-size:17px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--dark-bg);text-shadow:none;background:linear-gradient(180deg,var(--gold-light),var(--gold) 40%,var(--gold-dark));border:1px solid var(--gold);line-height:normal;transition:all .3s;box-shadow:0 4px 20px rgba(212,168,83,0.2),inset 0 1px 0 rgba(255,240,200,0.3);animation:ctaPulse 3s ease-in-out infinite}
body>header>.ui.container>a.playfree:hover{background:linear-gradient(180deg,#fae8b0,var(--gold-light) 40%,var(--gold));box-shadow:0 4px 30px rgba(212,168,83,0.35),inset 0 1px 0 rgba(255,240,200,0.4);}
body>header>.ui.container>a.playfree::before,body>header>.ui.container>a.playfree::after{content:'';position:absolute;width:14px;height:14px;border-style:solid;border-color:var(--gold-light);transition:all .3s}
body>header>.ui.container>a.playfree::before{top:-2px;left:-2px;border-width:2px 0 0 2px}
body>header>.ui.container>a.playfree::after{bottom:-2px;right:-2px;border-width:0 2px 2px 0}
body>header>.ui.container>a.playfree:hover::before,body>header>.ui.container>a.playfree:hover::after{width:20px;height:20px}
@keyframes ctaPulse{0%,100%{box-shadow:0 4px 20px rgba(212,168,83,0.2),inset 0 1px 0 rgba(255,240,200,0.3)}50%{box-shadow:0 4px 30px rgba(212,168,83,0.35),inset 0 1px 0 rgba(255,240,200,0.4)}}

/* Logged in */
body>header>.ui.container>.userinfo{color:var(--gold-light);font-family:'Cinzel',serif;font-size:12px;text-shadow:none;position:absolute;top:215px;left:50%;transform:translateX(-50%);width:auto;max-width:560px;background:var(--panel-bg);border:1px solid var(--border-gold);padding:14px 24px;box-shadow:var(--shadow-deep),var(--shadow-glow);text-align:center}
body>header>.ui.container>.userinfo::before{content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px;border-style:solid;border-color:var(--gold-dark);border-width:2px 0 0 2px}
body>header>.ui.container>.userinfo::after{content:'';position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-style:solid;border-color:var(--gold-dark);border-width:0 2px 2px 0}
.welcome-text-left{float:none;display:inline;color:var(--gold-light);padding:0;width:auto}.right{float:none;display:inline;color:var(--gold);margin-left:20px}
.header-box-nav-container{border:0;height:auto;margin:10px 0 0;padding:0;width:auto;overflow:visible;display:flex;justify-content:center;gap:6px}
.header-box-nav-login{display:flex;gap:6px;justify-content:center}
.header-box-nav-login li{list-style:none}li.stepdown{float:none}
.nav-box-btn{display:inline-block;float:none;padding:8px 16px;height:auto;font-family:'Cinzel',serif;font-size:10px;font-weight:600;letter-spacing:1px;color:var(--gold-light);text-shadow:none;text-align:center;text-decoration:none;background:rgba(16,14,11,0.85);border:1px solid var(--gold-dim);margin:0;transition:all .25s;width:auto}
.nav-box-btn:hover{background:rgba(40,30,18,0.9);border-color:var(--gold);color:white}

/* ── CONTAINER ── */
body>.container,body>*>.container{position:relative;width:960px;margin:0 auto;overflow:hidden;z-index:100;padding-bottom:24px}

/* ── SHARED PANEL STYLE ── */
nav,body>.container>div[role="main"],body>.container>.secondary>aside{background:var(--panel-bg);border:1px solid var(--border-gold);position:relative;box-shadow:var(--shadow-deep),var(--shadow-glow);background-image:linear-gradient(180deg,var(--panel-hl) 0%,transparent 60px);animation:panelIn .6s ease-out both}
/* Corner ornaments */
nav::before,body>.container>div[role="main"]::before,body>.container>.secondary>aside::before{content:'';position:absolute;top:-1px;left:-1px;width:18px;height:18px;border-style:solid;border-color:var(--gold-dark);border-width:2px 0 0 2px;z-index:5;pointer-events:none}
nav::after,body>.container>div[role="main"]::after,body>.container>.secondary>aside::after{content:'';position:absolute;bottom:-1px;right:-1px;width:18px;height:18px;border-style:solid;border-color:var(--gold-dark);border-width:0 2px 2px 0;z-index:5;pointer-events:none}
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
body>.container>div[role="main"]{animation-delay:.1s}
body>.container>.secondary>aside:nth-child(1){animation-delay:.15s}
body>.container>.secondary>aside:nth-child(2){animation-delay:.2s}
body>.container>.secondary>aside:nth-child(3){animation-delay:.25s}

/* ── LEFT NAV ── */
div[role="navigation"]{float:left;width:182px;margin:50px 6px}
div[role="navigation"]::after{display:none}
nav{margin-bottom:20px;padding:18px 0}
nav>ul{width:152px;margin:0 auto}
nav>ul>li{border-bottom:1px solid rgba(100,75,35,0.1)}nav>ul>li:last-child{border-bottom:none}
nav>ul>li>a,nav a{display:block;padding:10px 14px;font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--gold-light);letter-spacing:1px;position:relative;transition:all .25s;height:auto;line-height:1.4;text-decoration:none}
nav a:hover,nav a.selected{color:white;background:linear-gradient(90deg,rgba(212,168,83,0.08),transparent)}
nav a:hover::after,nav a.selected::after{content:'';position:absolute;left:0;top:25%;bottom:25%;width:2px;background:var(--gold)}

/* ── MAIN CONTENT ── */
body>.container>div[role="main"]{float:left;width:585px;margin-left:-7px;margin-top:50px;padding:28px 30px 24px;font-size:13px}
div[role="main"] h1,div[role="main"] h2,div[role="main"] h3,div[role="main"] h4,div[role="main"] h5{font-family:'Cinzel',serif;font-weight:600;color:var(--gold)}
div[role="main"] h2{font-size:17px;letter-spacing:1px;border-bottom:1px solid var(--border-gold);padding:0 0 10px;margin:24px 0 16px;position:relative}
div[role="main"] h2::after{content:'';position:absolute;bottom:-1px;left:0;width:80px;height:1px;background:linear-gradient(to right,var(--gold-dark),transparent)}
div[role="main"] strong{color:var(--gold);font-weight:600}
div[role="main"] p,div[role="main"] li{font-size:13px;line-height:1.8;color:var(--text-body)}
div[role="main"] a{color:var(--gold);border-bottom:1px solid transparent}div[role="main"] a:hover{color:var(--gold-light);border-bottom-color:var(--gold-dim)}
article{margin:0 10px 24px}
article.trailer{width:100%;max-width:500px;height:280px;margin:0 auto 28px;border:1px solid var(--border-gold-s);box-shadow:0 6px 30px rgba(0,0,0,0.6),inset 0 0 40px rgba(0,0,0,0.3);background:#030202;position:relative;overflow:hidden}
article.trailer iframe{width:100%;height:100%;position:relative;z-index:2}
article iframe[src*="discord"]{border:1px solid var(--border-gold);box-shadow:var(--shadow-deep)}

/* ── SIDEBAR ── */
body>.container>div.secondary{float:right;width:181px;margin:50px 3px}
body>.container>div.secondary::after{display:none}
body>.container>.secondary>aside{margin-bottom:20px;padding:16px 14px}
.secondary>aside>h2{font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--gold-light);letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--border-gold);padding:0 0 10px;margin-bottom:14px;height:auto;line-height:1.3;position:relative}
.secondary>aside>h2::after{content:'';position:absolute;bottom:-1px;left:0;width:40px;height:1px;background:linear-gradient(to right,var(--gold-dark),transparent)}
.secondary>aside>h2[style*="text-align:center"]{font-size:38px;color:var(--gold-light);border-bottom:none;text-align:center;margin-bottom:6px;padding-bottom:0;letter-spacing:0;text-shadow:0 2px 12px rgba(212,168,83,0.2)}
.secondary>aside>h2[style*="text-align:center"]::after{display:none}
.agbok{color:var(--text-muted);font-size:12px;margin:4px 0;display:block;width:auto;text-align:center}
.agbok a{color:var(--gold-dim);font-size:11px;text-decoration:none;transition:color .2s}.agbok a:hover{color:var(--gold)}

/* ── LOGIN ── */
.form-login{margin:10px 0 0;padding:0;width:153px;overflow:visible}
.form-login label{display:block;font-family:'Cinzel',serif;font-size:10px;font-weight:600;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-top:10px;margin-bottom:4px;line-height:1.2}
.form-login .input{background:var(--darker);border:1px solid var(--gold-dim);padding:0;margin:0 0 2px;width:153px;height:auto;transition:border-color .25s,box-shadow .25s}
.form-login .input:focus-within{border-color:var(--gold-dark);box-shadow:0 0 8px rgba(212,168,83,0.1)}
.form-login .input input{background:transparent;color:var(--text-warm);font-family:'Fira Sans',sans-serif;font-size:12px;padding:7px 8px;width:100%;margin:0;border:none;outline:none}
.g-recaptcha{margin:10px 0;filter:brightness(0.9)}
input.btn-login,input.button.btn-login{display:block;width:153px;height:38px;margin:12px 0 8px;padding:0;font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light);text-shadow:none;background:rgba(28,22,16,1);border:1px solid var(--gold-dark);cursor:pointer;transition:all .3s}
input.btn-login:hover{background:rgba(42,33,22,1);border-color:var(--gold);color:white;box-shadow:0 0 12px rgba(212,168,83,0.15)}
.password,a.password{display:block;font-size:10px;color:var(--gold-dim);text-decoration:none;margin:3px 0;text-align:left;width:auto;transition:color .2s}
a.password:hover{color:var(--gold)}

/* ── RANKINGS ── */
.secondary>aside.highscore{font-weight:normal;font-size:12px}
.secondary>aside.highscore table{width:100%;margin:0}
.secondary>aside.highscore table tr{height:28px;transition:background .15s}
.secondary>aside.highscore table tr:hover{background:rgba(212,168,83,0.06)}
.secondary>aside.highscore table tr.alt{background:rgba(100,75,35,0.06)}
.secondary>aside.highscore td{vertical-align:middle;padding:4px 2px}
.secondary>aside.highscore td.position{color:var(--gold-light);font-family:'Cinzel',serif;font-weight:700;font-size:12px;text-align:right;width:22px}
.secondary>aside.highscore td.name>a{color:var(--text-warm);font-size:12px;padding:0 6px;transition:color .2s;text-decoration:none}
.secondary>aside.highscore td.name>a:hover{color:var(--gold-light)}
.secondary>aside.highscore td.faction{width:32px;text-align:center}
/* Keep class icon images visible - just restyle the border */
.secondary>aside.highscore td.faction>img{border:1px solid var(--gold-dim);border-radius:3px;transition:border-color .2s}
.secondary>aside.highscore td.faction>img:hover{border-color:var(--gold)}
.secondary>aside.highscore>.tab{position:relative}.secondary>aside.highscore div.tab.selected{display:block}
.secondary>aside.highscore>h2[style*="font-size: 14px"],.secondary>aside.highscore h2[style*="font-size: 14px"]{font-size:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-gold);border-bottom:none;text-align:center;letter-spacing:1px}
.secondary>aside.highscore h2[style*="font-size: 14px"]::after{display:none}

/* ── FOOTER ── */
footer[role="contentinfo"]{position:relative;background:url('footer_bg.jpg') top center no-repeat var(--darker);background-size:cover;border-top:1px solid var(--border-gold);padding:40px 0 28px;margin-top:0;height:auto}
footer[role="contentinfo"]>.container{position:relative;width:960px;margin:0 auto;text-align:center;font-size:11px;line-height:1.6;color:var(--text-muted);letter-spacing:.5px;padding:0;height:auto;overflow:visible}
a.sitenotice{color:var(--gold-dim);transition:color .2s}a.sitenotice:hover{color:var(--gold)}

/* ── FORMS ── */
.inner-form-border{border:1px solid var(--gold-dim);margin:15px 0 20px 25px}
.inner-form-box{background:var(--panel-bg);border:1px solid var(--gold-dim);color:var(--text-warm);padding:15px}
.inner-form-box h3{color:var(--gold);font-family:'Cinzel',serif;font-size:18px;height:auto;margin-bottom:12px;background:none}
.inner-form-box label{display:block;color:var(--gold);font-family:'Cinzel',serif;font-size:12px;font-weight:600;margin:0 0 5px}
.inner-form-box a{color:var(--gold)}.inner-form-box a:hover{color:var(--gold-light)}

#registerForm{max-width:300px;margin:0 auto}
#registerForm div{width:100%}
#registerForm label{text-align:left;display:block}
#registerForm input[type="text"],#registerForm input[type="password"]{display:block;width:100%}
#registerForm #submitBtn{display:block;margin:0 auto}
#registerForm .g-recaptcha{display:block}
#pwlostForm input,#lostPasswordCodeForm input,#changepwForm input,#emailChangeForm input,#resendactivForm input,#loginForm input,#registerForm input,#captchaForm input{background:var(--darker);border:1px solid var(--gold-dim);color:var(--text-warm);font-family:'Fira Sans',sans-serif;font-size:14px;font-weight:normal;height:36px;padding:5px 10px;width:265px;transition:border-color .2s}
#pwlostForm input:focus,#registerForm input:focus,#loginForm input:focus{border-color:var(--gold);outline:none}
#login #checkerror input,#register #checkerror input,#register #checktransfer input{width:15px;height:15px;float:left;margin:2px 5px 20px;border:1px solid var(--gold-dim);accent-color:var(--gold)}
#changePw #submitBtn,#emailChange #submitBtn,#resendActiv #submitBtn,#pwLost #submitBtn,#lostPasswordCode #submitBtn,#login #submitBtn,#register #submitBtn,#captcha #submitBtn,a.btn-big,.btn-big{background:rgba(28,22,16,1);border:1px solid var(--gold-dark);color:var(--gold-light);font-family:'Cinzel',serif;font-size:16px;font-weight:600;height:42px;line-height:40px;letter-spacing:2px;text-shadow:none;text-align:center;text-decoration:none;display:block;width:287px;margin:12px auto 20px;cursor:pointer;transition:all .3s}
#changePw #submitBtn:hover,#emailChange #submitBtn:hover,#pwLost #submitBtn:hover,#login #submitBtn:hover,#register #submitBtn:hover,#captcha #submitBtn:hover,a.btn-big:hover{background:rgba(42,33,22,1);border-color:var(--gold);color:white;box-shadow:0 0 16px rgba(212,168,83,0.15)}
.trenner{background:none;border-top:1px solid var(--border-gold);height:1px;margin:12px auto}

/* ── CONTENT PAGES ── */
.content{background:var(--panel-bg);width:507px}
.content h2{color:var(--gold);font-family:'Cinzel',serif;font-size:14px;font-weight:600;padding:8px 12px;margin:8px 0;background:none;border-bottom:1px solid var(--border-gold)}
.download-inner-content h2{border-bottom:1px solid rgba(100,75,35,0.3)}
.download-inner-content h2 a{color:var(--gold-light);text-decoration:none;transition:color .2s,text-shadow .2s}
.download-inner-content h2 a::before{content:"\2913\0020";opacity:.5;transition:opacity .2s}
.download-inner-content h2 a:hover{color:#fff;text-shadow:0 0 12px rgba(212,168,83,0.4)}
.download-inner-content h2 a:hover::before{opacity:1}
.content .content-bg,.content .content-bg-bottom{background:none}
.box-foot{background:none;height:1px;border-top:1px solid var(--border-gold);margin-bottom:12px}
.btn,.small-btn,.back-btn{background:rgba(28,22,16,1);border:1px solid var(--gold-dim);color:var(--gold-light);font-family:'Cinzel',serif;font-size:10px;font-weight:600;display:block;height:22px;line-height:20px;text-align:center;transition:all .2s}
.btn:hover,.small-btn:hover{border-color:var(--gold);color:white}
select{background:var(--darker);border:1px solid var(--gold-dim);color:var(--text-warm);font-family:'Fira Sans',sans-serif;font-size:12px;padding:4px 8px}
.fb-like-box{opacity:.85}
center{text-align:center}
a.pegi,a.usk,a.safeplay,a.gameforge4d{display:none}

/* ── ACCOUNT PAGE ── */
.input-data-box h4{color:var(--gold);font-family:'Cinzel',serif;font-size:12px;font-weight:600;letter-spacing:1px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border-gold)}
.input-data-box ul{list-style:none;padding:0;margin:0 0 16px}
.input-data-box ul li{color:var(--text-warm);font-size:12px;padding:5px 0;border-bottom:1px solid rgba(100,75,35,0.15)}
.input-data-box ul li:last-child{border-bottom:none}
.input-data-box .payment.load-link{color:var(--gold-light);text-decoration:none;transition:color .2s}
.input-data-box .payment.load-link:hover{color:#fff}
.administration-box{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid rgba(100,75,35,0.12)}
.administration-box:last-of-type{border-bottom:none}
.administration-box .btn{display:inline-block;width:140px;min-width:140px;height:30px;line-height:28px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border:1px solid var(--gold-dark);background:rgba(28,22,16,1)}
.administration-box .btn:hover{background:rgba(42,33,22,1);border-color:var(--gold);color:#fff;box-shadow:0 0 10px rgba(212,168,83,0.12)}
.administration-box p{margin:0;color:var(--text-muted);font-size:11px}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE
   Add <meta name="viewport" content="width=device-width, initial-scale=1.0">
   to <head> for this to work.
   ═══════════════════════════════════════════════════════════════ */

@media screen and (max-width: 959px) {
  body { min-width: 0; background-size: 256px 256px, 1200px auto; background-position: top left, top center; }
  body>header[role="banner"] { height: auto; overflow: visible; }
  body>header>h1.logo { height: 200px; margin-bottom: 0; }
  body>header[role="banner"] { overflow: visible !important; min-width: 0 !important; }
  body>header>.ui.container, body>.container, body>*>.container { width: 100% !important; max-width: 100% !important; overflow: visible !important; min-width: 0 !important; box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; }
  body>header>.ui.container { text-align: center !important; padding-bottom: 16px !important; position: relative !important; }
  body>header>.ui.container>a.playfree { position: relative !important; top: auto !important; left: auto !important; transform: none !important; display: inline-block !important; padding: 10px 32px !important; font-size: 13px !important; letter-spacing: 2px !important; margin: 0 auto !important; }
  body>header>.ui.container>.userinfo { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }
  .welcome-text-left { display: block !important; float: none !important; width: auto !important; padding: 0 !important; text-align: center !important; }
  .right { display: block !important; float: none !important; margin: 4px 0 !important; text-align: center !important; }
  .header-box-nav-container { width: 100% !important; flex-wrap: wrap !important; }
  .header-box-nav-login { flex-wrap: wrap !important; justify-content: center !important; }
  .nav-box-btn { font-size: 9px !important; padding: 8px 10px !important; }

  /* Forms responsive */
  #register[role="main"], div[role="main"] { width: 100% !important; float: none !important; margin-left: 0 !important; padding: 16px !important; }
  .content, .content-last { width: 100% !important; }
  .content .content-bg, .content .content-bg-bottom { width: 100% !important; padding: 0 !important; }
  .inner-form-border { width: 100% !important; margin: 15px 0 !important; }
  .inner-form-box { width: 100% !important; padding: 12px !important; }
  #registerForm, #pwlostForm, #loginForm, #changepwForm, #captchaForm { width: 100% !important; margin: 10px 0 !important; }
  #registerForm div, #pwlostForm div, #loginForm div, #changepwForm div, #captchaForm div { width: 100% !important; }
  #registerForm input, #pwlostForm input, #loginForm input, #changepwForm input, #captchaForm input,
  #registerForm input[type="text"], #registerForm input[type="password"], #registerForm input[type="email"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  #register #submitBtn, #login #submitBtn, #captcha #submitBtn, #changePw #submitBtn, #pwLost #submitBtn { width: 100% !important; max-width: 100% !important; }
  .g-recaptcha { transform: scale(0.9); transform-origin: 0 0; }
  body>.container, body>*>.container {
    width: 100%;
    max-width: 960px;
    padding: 0 16px 24px;
  }

  /* Stack columns vertically */
  div[role="navigation"],
  body>.container>div[role="main"],
  body>.container>div.secondary {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Nav becomes horizontal bar */
  div[role="navigation"] { margin: 16px 0; width: 100%; }
  nav { padding: 0; }
  nav>ul { width: 100%; display: flex; justify-content: center; gap: 0; }
  nav>ul>li { border-bottom: none; border-right: 1px solid rgba(100,75,35,0.1); }
  nav>ul>li:last-child { border-right: none; }
  nav>ul>li>a, nav a {
    padding: 12px 20px;
    font-size: 13px;
    text-align: center;
  }
  nav a:hover::after, nav a.selected::after {
    left: 25%; right: 25%;
    top: auto; bottom: 0;
    width: auto; height: 2px;
  }

  /* Main content full width */
  body>.container>div[role="main"] {
    width: 100%;
    margin-top: 16px;
    padding: 20px;
  }

  article { margin: 0 0 20px; }

  article.trailer {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  /* Sidebar full width */
  body>.container>div.secondary {
    width: 100%;
    margin: 16px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  body>.container>.secondary>aside {
    margin-bottom: 0;
    padding: 16px;
  }

  /* Login form wider */
  .form-login { width: 100%; }
  .form-login .input { width: 100%; }
  input.btn-login, input.button.btn-login { width: 100%; }

  /* Rankings table wider */
  .secondary>aside.highscore table { width: 100%; }

  /* Discord widget responsive */
  article iframe[src*="discord"] { width: 100%; max-width: 350px; }
}

@media screen and (max-width: 640px) {
  /* Header compact */
  body>header[role="banner"] { height: auto; }
  body>header>h1.logo { height: 160px; background-size: contain; background-position: center; background-repeat: no-repeat; }

  /* Register button */
  body>header>.ui.container>a.playfree {
    padding: 12px 36px;
    font-size: 14px;
    letter-spacing: 2px;
  }

  /* Logged-in info stacks */
  body>header>.ui.container>.userinfo {
    top: 155px; left: 0; width: 100%;
    text-align: center; padding: 0 16px;
  }
  .welcome-text-left { float: none; width: auto; padding: 0; }
  .right { float: none; display: block; }
  .header-box-nav-container { width: 100%; margin: 4px 0 0; }
  .nav-box-btn { float: none; display: inline-block; margin: 3px; height: auto; padding: 8px 12px; }

  /* Sidebar single column on phones */
  body>.container>div.secondary {
    grid-template-columns: 1fr;
  }

  /* Nav wraps */
  nav>ul { flex-wrap: wrap; }
  nav>ul>li { flex: 1 1 auto; min-width: 0; }
  nav>ul>li>a, nav a { padding: 10px 12px; font-size: 12px; }

  /* Main content padding */
  body>.container>div[role="main"] { padding: 16px; }

  /* Headings */
  div[role="main"] h2 { font-size: 15px; }

  /* Footer */
  footer[role="contentinfo"]>.container { padding: 0 16px; width: 100%; }

  /* Language bar */
  #language-bar { padding: 6px 8px; }
  #language-selector { gap: 8px; }
  #language-selector label { font-size: 10px; }
}

@media screen and (max-width: 400px) {
  body>header[role="banner"] { height: auto; }
  body>header>h1.logo { height: 130px; }
  body>header>.ui.container>a.playfree {
    padding: 10px 28px;
    font-size: 12px;
    letter-spacing: 1px;
  }

  nav>ul>li>a, nav a { padding: 8px 8px; font-size: 11px; letter-spacing: 0; }

  div[role="main"] h2 { font-size: 14px; }
  .secondary>aside>h2 { font-size: 11px; letter-spacing: 1px; }
}