/* Pirate Legends – Webseite */
:root{--gold:#ffcf3f;--gold2:#ff9a1f;--wood:#3b2414;--wood2:#22140b;--ink:#0d1520;--panel:rgba(12,18,28,.86);--line:rgba(232,194,122,.55);--txt:#f4ead2;--blue:#4fc3ff}
*{box-sizing:border-box}
html{background:#0b2a4a;overflow-x:hidden}
html,body.pl{margin:0;min-height:100%;color:var(--txt);font-family:Nunito,Arial,sans-serif}
body.pl{background:transparent!important}
body.pl{overflow-x:hidden}
.pl-bg{position:fixed;inset:0;z-index:-1;background:url(/WebRes/pl/bg.png) center/cover no-repeat,#0b2a4a}
.pl-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,10,20,.35) 0,rgba(5,10,20,0) 25%,rgba(5,10,20,.15) 60%,rgba(5,10,20,.7) 100%)}
a{color:var(--gold)}
/* Navigation */
.pl-nav{position:sticky;top:0;z-index:50;padding:10px 16px 0}
.pl-nav-inner{max-width:1240px;margin:0 auto;height:74px;display:flex;align-items:center;gap:12px;padding:0 18px;border-radius:14px;background:linear-gradient(180deg,#2a1a0f,#140b05);border:3px solid #6b4423;box-shadow:0 6px 24px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.4)}
.pl-emblem{width:54px;height:54px;flex:0 0 54px;filter:drop-shadow(0 2px 3px #000)}
.pl-links{display:flex;gap:2px;flex:1;min-width:0}
.pl-links-left{justify-content:flex-end}.pl-links-right{justify-content:flex-start}
.pl-links a{white-space:nowrap;font-family:Bangers,Impact,sans-serif;font-size:22px;letter-spacing:1px;color:#f6e7c1;text-decoration:none;padding:6px 9px;border-radius:8px;text-shadow:0 2px 0 #000;transition:.15s}
.pl-links a:hover,.pl-links a.on{color:var(--gold);transform:translateY(-1px)}
.pl-links a.on{box-shadow:inset 0 -3px 0 var(--gold)}
.pl-logo{flex:0 0 auto;margin:0 10px;margin-bottom:-38px;display:flex;flex-direction:column;align-items:center;text-decoration:none;line-height:.85;padding:10px 22px 14px;border-radius:50% 50% 40% 40%/30% 30% 45% 45%;background:radial-gradient(circle at 50% 35%,#24384f,#0b1522 70%);border:3px solid #8a5a2b;box-shadow:0 8px 20px rgba(0,0,0,.6)}
.pl-logo .l1,.pl-logo .l2{font-family:Bangers,Impact,sans-serif;letter-spacing:2px;-webkit-text-stroke:2px #1a0d04;paint-order:stroke fill}
.pl-logo .l1{font-size:46px;background:linear-gradient(180deg,#fff6b0,#ffcf3f 45%,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #3a1c00)}
.pl-logo .l2{font-size:40px;background:linear-gradient(180deg,#d6f6ff,#4fc3ff 50%,#1677d6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #06213f);transform:rotate(-3deg)}
.pl-burger{display:none;margin-left:auto;background:none;border:0;color:var(--gold);font-size:30px;cursor:pointer}
/* Layout */
.pl-main{max-width:1240px;margin:0 auto;padding:40px 16px 30px}
.pl-hero{min-height:200px;display:flex;flex-direction:column;justify-content:center}
.pl-slogan{margin:0;font-family:Bangers,Impact,sans-serif;font-weight:400;font-size:clamp(40px,6vw,72px);line-height:.95;letter-spacing:2px;color:#fff;transform:rotate(-6deg);transform-origin:left;text-shadow:0 4px 0 #0a2a55,0 0 18px rgba(0,0,0,.6);-webkit-text-stroke:2px #0a2a55;paint-order:stroke fill}
.pl-sub{margin:18px 0 0 6px;font-family:Bangers,Impact,sans-serif;font-size:26px;letter-spacing:1px;color:#fff;transform:rotate(-6deg);transform-origin:left;text-shadow:0 2px 0 #000}
.pl-sub:after{content:"";display:block;width:220px;height:5px;margin-top:6px;background:linear-gradient(90deg,var(--gold),transparent)}
.pl-grid{display:grid;grid-template-columns:200px 1fr 300px;gap:22px;align-items:end;margin-top:20px}
/* Download */
.pl-download{align-self:end;display:flex;align-items:center;gap:10px;padding:14px 16px;text-decoration:none;color:#f6e7c1;font-family:Bangers,Impact,sans-serif;font-size:26px;line-height:1;text-shadow:0 2px 0 #000;background:linear-gradient(180deg,#5a371c,#2c180b);border:3px solid #8a5a2b;border-radius:10px 40px 40px 10px;box-shadow:0 6px 18px rgba(0,0,0,.55);transition:.15s}
.pl-download:hover{transform:translateY(-2px);color:var(--gold)}
.pl-wheel-sm{width:52px;height:52px;flex:0 0 52px}
/* Board */
.pl-board{background:var(--panel);border:3px solid #6b4423;border-radius:14px;padding:14px 16px 16px;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px var(--line);backdrop-filter:blur(3px);min-height:300px}
.pl-tabs{display:flex;gap:8px;margin-bottom:10px}
.pl-tabs button{font-family:Bangers,Impact,sans-serif;font-size:22px;letter-spacing:1px;padding:6px 22px;border-radius:9px;border:2px solid #6b4423;background:#1b1209;color:#f6e7c1;cursor:pointer}
.pl-tabs button.on{background:linear-gradient(180deg,#ffd75a,#e09a16);color:#2b1503;border-color:#ffd75a}
.pl-tab{display:none}.pl-tab.on{display:block}
.pl-list{list-style:none;margin:0;padding:0}
.pl-list li{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid rgba(232,194,122,.2)}
.pl-list li:last-child{border-bottom:0}
.pl-list i{font-style:normal;width:30px;text-align:center;font-size:20px}
.pl-list b{flex:1;font-weight:700}
.pl-list time{color:#d9c79e;font-size:14px;white-space:nowrap}
.pl-guide{line-height:1.55}.pl-guide ol{margin:6px 0 0 18px;padding:0}
/* Account */
.pl-side{display:flex;flex-direction:column;gap:14px}
.pl-play{font-family:Bangers,Impact,sans-serif;font-size:48px;letter-spacing:2px;line-height:1;padding:18px 10px;cursor:pointer;color:#ffd75a;background:linear-gradient(180deg,#5a371c,#2c180b);border:3px solid #8a5a2b;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.6);text-shadow:0 3px 0 #3a1c00,0 0 12px rgba(255,170,0,.6);transform:rotate(-2deg);transition:.15s}
.pl-play:hover{transform:rotate(-2deg) scale(1.03);color:#fff1a6}
.pl-acc{background:var(--panel);border:3px solid #6b4423;border-radius:14px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.6),inset 0 0 0 1px var(--line)}
.pl-acc h3{margin:0 0 12px;text-align:center;font-family:Bangers,Impact,sans-serif;font-weight:400;font-size:30px;letter-spacing:1px;color:#ffd75a}
.pl-field{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 10px;height:44px;background:#0a0f17;border:1px solid #3a2a1a;border-radius:8px}
.pl-field span{opacity:.8}.pl-field em{font-style:normal;cursor:pointer;opacity:.6}
.pl-field input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:0;color:#fff;font:600 15px Nunito,Arial,sans-serif}
.pl-field:focus-within{border-color:var(--gold)}
.pl-btn{width:100%;margin-top:4px;padding:10px;cursor:pointer;font-family:Bangers,Impact,sans-serif;font-size:30px;letter-spacing:2px;color:#241000;background:linear-gradient(180deg,#ffe066,#f2a40f);border:0;border-radius:6px 22px 6px 22px;box-shadow:0 4px 0 #8a4b00,0 6px 14px rgba(0,0,0,.5);transition:.1s}
.pl-btn:hover{filter:brightness(1.08)}.pl-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8a4b00}
.pl-btn2{flex:1;padding:8px 4px;cursor:pointer;font:800 14px Nunito,Arial,sans-serif;color:#f6e7c1;background:#1b1209;border:2px solid #6b4423;border-radius:8px}
.pl-btn2:hover{border-color:var(--gold);color:var(--gold)}
.pl-row{display:flex;gap:8px;margin-top:12px}
.pl-small{margin:12px 0 0;text-align:center;font-size:14px;color:#d9c79e;line-height:1.7}
.pl-small a{color:var(--blue);font-weight:700;text-decoration:none}
.pl-stats{display:flex;gap:10px;margin-bottom:12px}
.pl-stats div{flex:1;text-align:center;padding:8px;background:#0a0f17;border:1px solid #3a2a1a;border-radius:8px}
.pl-stats small{display:block;color:#d9c79e}.pl-stats b{font-size:20px;color:var(--gold)}
/* Kacheln */
.pl-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.pl-tiles a{position:relative;height:96px;display:flex;align-items:flex-end;justify-content:flex-end;padding:10px 14px;border-radius:10px;border:3px solid #6b4423;text-decoration:none;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.55);transition:.15s}
.pl-tiles a:hover{transform:translateY(-3px);border-color:var(--gold)}
.pl-tiles a span{font-family:Bangers,Impact,sans-serif;font-size:28px;letter-spacing:1px;color:#fff;text-shadow:0 3px 0 #000;transform:rotate(-4deg)}
.pl-tiles .t1{background:linear-gradient(135deg,#ff9a3c,#c0281a)}
.pl-tiles .t2{background:linear-gradient(135deg,#3fd17a,#0f6b3a)}
.pl-tiles .t3{background:linear-gradient(135deg,#c56cff,#4a1a8c)}
.pl-tiles .t4{background:linear-gradient(135deg,#4f8dff,#141b5c)}
.pl-tiles a:before{content:"";position:absolute;left:-20px;top:-20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12)}
.pl-foot{text-align:center;padding:18px 16px 26px;color:#d9c79e;font-size:13px;text-shadow:0 1px 0 #000}
/* Layer-Popups passend einfaerben */
.layui-layer-title,.xubox_title{background:#2a1a0f!important;color:#ffd75a!important;border-bottom:2px solid #6b4423!important}
/* Mobil */
@media (max-width:980px){
 .pl-play{transform:none;font-size:40px}.pl-play:hover{transform:scale(1.02)}
 .pl-grid,.pl-tiles,.pl-main{max-width:100%}
 .pl-grid{grid-template-columns:minmax(0,1fr)}.pl-grid>*{min-width:0}.pl-tabs button{padding:6px 14px}.pl-download{order:3}.pl-side{order:1}.pl-board{order:2}
 .pl-tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
 .pl-nav-inner{height:64px}
 .pl-links{display:none;position:absolute;left:16px;right:16px;top:78px;flex-direction:column;background:#140b05;border:3px solid #6b4423;border-radius:12px;padding:8px}
 body.menu-open .pl-links{display:flex}.pl-links-right{top:250px}
 .pl-burger{display:block}.pl-logo{margin:0 auto -30px}.pl-logo .l1{font-size:34px}.pl-logo .l2{font-size:30px}
 .pl-emblem{width:42px;height:42px;flex-basis:42px}.pl-wheel{display:none}
}
/* Shop */
a.pl-btn2,a.pl-play{text-align:center;text-decoration:none;display:block}
.pl-grid-shop{grid-template-columns:1fr 300px;align-items:start;margin-top:70px}
.pl-shop{min-height:420px}
.pl-formrow{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:12px;margin:10px 0}
.pl-formrow label{color:#d9c79e;font-weight:800}
.pl-select,.pl-out{height:42px;padding:0 12px;background:#0a0f17;border:1px solid #3a2a1a;border-radius:8px;color:#fff;font:600 15px Nunito,Arial,sans-serif;display:flex;align-items:center}
.pl-select:focus{outline:0;border-color:var(--gold)}
.pl-select option{background:#0a0f17}
.pl-good{color:#6fe39a}
.pl-hint{color:#d9c79e;font-size:14px;margin:12px 0}
.pl-packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:14px}
.pl-pack{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 0;background:linear-gradient(180deg,#24180e,#120b05);border:2px solid #6b4423;border-radius:12px;color:#f4ead2;font-family:Nunito,Arial,sans-serif;transition:.15s}
.pl-pack:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.pl-coin{font-size:30px;line-height:1}
.pl-pack b{font-size:16px}.pl-bonus{color:#6fe39a;min-height:18px;font-weight:700}
.pl-price{align-self:stretch;margin-top:8px;padding:8px;background:linear-gradient(180deg,#ffe066,#f2a40f);color:#241000;font:400 22px Bangers,Impact,sans-serif;letter-spacing:1px}
.pl-ribbon{position:absolute;top:10px;right:-28px;width:100px;transform:rotate(45deg);background:#d8261c;color:#fff;font-weight:800;font-size:12px;text-align:center;padding:2px 0}
.pl-ribbon:empty{display:none}
.pl-result{margin-top:16px;padding:14px;border:2px dashed var(--gold);border-radius:10px;background:rgba(255,207,63,.08);line-height:1.6}
.pl-btn-inline{max-width:320px;margin:14px 0 0 152px}
.pl-h4{margin:14px 0 8px;font:400 24px Bangers,Impact,sans-serif;letter-spacing:1px;color:#ffd75a}
.pl-table{width:100%;border-collapse:collapse;font-size:14px}
.pl-table th,.pl-table td{padding:8px;border-bottom:1px solid rgba(232,194,122,.2);text-align:left}
.pl-table th{color:#d9c79e}
.st-pending{color:#ffcf3f}.st-paid,.st-done{color:#6fe39a}.st-rejected,.st-failed{color:#ff7a6b}
.layui-layer-dialog .layui-layer-content,.xubox_msg{color:#222}
@media (max-width:980px){.pl-grid-shop{grid-template-columns:minmax(0,1fr);margin-top:40px}.pl-formrow{grid-template-columns:1fr;gap:4px}.pl-btn-inline{margin-left:0;max-width:none}}
/* Sign Up */
.pl-panel-title{margin:0 0 10px;padding-bottom:10px;text-align:center;font:400 34px Bangers,Impact,sans-serif;letter-spacing:1px;color:#ffd75a;border-bottom:2px solid rgba(232,194,122,.35)}
input.pl-select{width:100%;outline:0}input.pl-select:focus{border-color:var(--gold)}
input.pl-select::placeholder{color:#8f8066}
.pl-signup{max-width:620px;margin:0 auto}
.pl-red{color:#ff5a4a}
.pl-ribbon{background:#b5763a}.pl-ribbon.hot{background:#d8261c}