@font-face{font-family:PalaceInscription;src:url('/assets/palace-inscription.ttf') format('truetype');font-display:swap;font-weight:700}
:root{--inscription:PalaceInscription,Georgia,serif}
.topbar{background:linear-gradient(#160f0ac7,transparent)}
.topbar .account-pill,.topbar .top-button:not(.square){font-family:var(--inscription);font-size:15px;letter-spacing:1px;font-weight:700;text-transform:uppercase;color:#f4dfb0;border-color:#bb98615c;background:linear-gradient(140deg,#322319b3,#17130fbd);box-shadow:0 3px 12px #0003,inset 0 1px 0 #f6d89916}
.topbar .account-pill{border-color:#d9bc84;outline-color:#291e13b3;min-width:210px;box-shadow:0 0 0 5px #a7864330,inset 0 0 0 3px #241a15}
.topbar .account-pill:hover,.topbar .top-button:hover{border-color:#f7d69a;background:linear-gradient(135deg,#513a23cc,#241a15dd)}
.topbar .top-button.square{color:#e5cc9b;border-color:#b3966352;background:#20171099;border-radius:13px}
.topbar .top-button.support{background:linear-gradient(#f3dc9c,#c99a4b);color:#462b13;border-color:#f9e4b5;box-shadow:0 3px 0 #664626,inset 0 1px 0 #fff2ce}
.topbar .top-button.support:hover{background:linear-gradient(#ffe8b3,#ddb469)}
.topbar .news-icon{color:#dbb878}.topbar #news-dot{background:#df885a;box-shadow:0 0 0 3px #2c2015}.topbar .crown{color:#ebc677}.topbar .online-dot{background:#b9ca8b;border-radius:50%;box-shadow:0 0 12px #cfdf9c30}
.sheet{background:#120c08bb;backdrop-filter:blur(10px)}
.sheet-card{position:relative;display:grid;grid-template-columns:185px minmax(0,1fr);gap:0 30px;width:min(970px,100%);padding:34px 39px 38px;border-radius:12px;border:1px solid #c7a56b;color:#4a321f;background:radial-gradient(ellipse at 25% 0,#fff0cb9c,transparent 65%),linear-gradient(125deg,#e9d6ae,#d4b985);box-shadow:0 35px 120px #0009,inset 0 0 0 5px #8a632e,inset 0 0 0 7px #eace9a,inset 0 0 0 9px #9a773b70}
.sheet-card:before,.sheet-card:after{content:'✦';position:absolute;top:12px;color:#99713b;font-size:19px;line-height:1;pointer-events:none}.sheet-card:before{left:14px}.sheet-card:after{right:14px}
.sheet-heading{grid-column:1/-1;padding-bottom:24px;border-bottom:1px solid #8e663b55;margin-bottom:26px;position:relative}
.sheet-heading:after{content:'◆';position:absolute;bottom:-8px;left:50%;font-size:10px;color:#977043;background:#e6cea1;padding:0 11px;line-height:15px}
.sheet-heading h2{font:700 31px/1.4 var(--inscription);letter-spacing:1.4px;color:#55361d;text-shadow:0 1px 0 #fff0c9}
.sheet-heading .top-button{font:700 12px/1.4 var(--inscription);letter-spacing:.7px;min-height:40px;padding:10px 16px;color:#624324;background:#fff1ce55;border:1px solid #9170478c;border-radius:999px;box-shadow:inset 0 1px 0 #fff5de60}
.sheet-heading .top-button:hover{background:#fff0c5aa;border-color:#69421b;transform:translateY(-2px)}
.sheet-heading .top-button span{font-size:18px;margin-left:5px}
.sheet-tabs{flex-direction:column;align-self:start;gap:9px;border-right:1px solid #8e663b40;padding-right:20px;margin:0;min-height:275px}
.sheet-tabs button{position:relative;text-align:left;font:700 13px/1.6 var(--inscription);letter-spacing:.3px;border:1px solid transparent;border-radius:999px;background:transparent;color:#725436;padding:13px 15px;transition:background .25s,color .25s,transform .25s,border-color .25s}
.sheet-tabs button:hover{background:#f9e7be8c;border-color:#a8865380;transform:translateX(3px)}
.sheet-tabs button.active{background:linear-gradient(120deg,#74512d,#57391f);border-color:#89602c;color:#ffedbe;box-shadow:0 3px 8px #63482520,inset 0 1px 0 #ffe2a333}
.sheet-body{border:none;padding:0;min-height:275px;color:#573b25;font-size:14px}
.sheet-tabs:empty+.sheet-body{grid-column:1/-1}
.sheet-body h3{font:700 18px/1.7 var(--inscription);color:#604022;letter-spacing:.4px;margin:0 0 19px}
.sheet-body p{color:#765a3d;font-size:13px}.sheet-body .about-line{color:#826546}
.setting-row{padding:20px 0;border-color:#99764738}
.setting-row strong{color:#533821;font-weight:600;font-size:14px}
.setting-row small{color:#8a6a48;font-size:11px;margin-top:4px}
.setting-row input[type=checkbox]{background:#b29b75;border:1px solid #8b6c42;box-shadow:inset 0 2px 4px #4b331c22}
.setting-row input[type=checkbox]:before{background:#f8e9c8;box-shadow:0 1px 3px #4b331c44}
.setting-row input[type=checkbox]:checked{background:#806038;border-color:#70512a}
.setting-row input[type=checkbox]:checked:before{background:#ffe5a7}
.setting-row input[type=range]{accent-color:#846032}
.sheet-body input[type=text],.sheet-body select{border-color:#a08259a6;background:#faedce80;color:#553a22;border-radius:8px;box-shadow:inset 0 1px 3px #7051250a}
.sheet-body .primary{font:700 12px/1.7 var(--inscription);letter-spacing:1px;background:linear-gradient(#98733f,#77532b);border-color:#9f7946;color:#ffefc7;box-shadow:inset 0 1px 0 #e9c89060}
.sheet-body .primary:hover{background:linear-gradient(#ab874f,#886032)}
.sheet-body .notice{background:#fff2d250;border-color:#a27b4755;color:#785637;border-radius:8px}
.sheet-body a{color:#734823;text-decoration-color:#a67f50}
.control-table td{border-color:#97724333;color:#745338}.control-table td:first-child{color:#795328;font-weight:600}
.news-entry{border-color:#9a754737}.news-entry time{color:#987345}.news-entry h3{margin-top:8px}
.sheet button:focus-visible,.sheet input:focus-visible,.sheet select:focus-visible{outline:2px solid #825323;outline-offset:4px}
.sheet-body label.account-edit{color:#795a38}
@media(max-width:1000px){.topbar .account-pill,.topbar .top-button:not(.square){font-size:13px;letter-spacing:.7px}.topbar .account-pill{min-width:185px}.sheet-card{grid-template-columns:160px minmax(0,1fr);gap:0 24px;padding:30px}.sheet-tabs{padding-right:16px}.sheet-tabs button{font-size:12px}}
@media(max-width:750px){.topbar .account-pill,.topbar .top-button:not(.square){font-size:12px;letter-spacing:.5px}.topbar .account-pill{min-width:163px}.playing .topbar .account-pill{min-width:142px;font-size:11px}.sheet-card{display:block;padding:26px 23px;max-height:90svh;border-radius:10px}.sheet-heading{padding-bottom:18px;margin-bottom:22px}.sheet-heading h2{font-size:25px;letter-spacing:1px}.sheet-heading .top-button{font-size:11px;padding:9px 12px}.sheet-tabs{flex-direction:row;flex-wrap:wrap;min-height:0;gap:7px;border-right:0;border-bottom:1px solid #8e663b40;padding:0 0 18px;margin-bottom:21px}.sheet-tabs button{font-size:11px;letter-spacing:0;padding:9px 13px}.sheet-body{min-height:180px}.sheet-body h3{font-size:17px}.setting-row{gap:15px}.setting-row input[type=range]{width:95px}.setting-row small{max-width:215px}.sheet-body select{max-width:140px;padding:10px;font-size:12px}.sheet-body p{font-size:12px}.setting-row strong{font-size:13px}}
@media(max-width:380px){.topbar #news-button{font-size:0}.topbar .account-pill{min-width:150px}}
@media(prefers-reduced-motion:reduce){.sheet-tabs button,.sheet-heading .top-button{transition:none}.sheet-tabs button:hover,.sheet-heading .top-button:hover{transform:none}}

/* Two red brush strokes draw a cross over Competitive on hover. */
#competitive-button { position: relative; }
.competitive-paint { position:absolute; inset:0; pointer-events:none; z-index:3; display:grid; place-items:center; border-radius:inherit; overflow:hidden; }
.competitive-paint > span { position:absolute; width:94%; padding:6px 12px; box-sizing:border-box; background:linear-gradient(90deg,transparent 0%,#a30f20 5%,#dc2637 18%,#b60d25 80%,transparent 100%); color:#fff6e9; font-family:var(--pixel); font-size:clamp(10px,1.05vw,15px); line-height:1.5; text-align:center; text-transform:uppercase; text-shadow:1px 2px #670512; letter-spacing:.04em; opacity:0; clip-path:polygon(0 15%,8% 5%,17% 11%,31% 0,47% 7%,65% 0,81% 10%,100% 0,98% 80%,87% 95%,70% 87%,54% 100%,34% 91%,13% 100%,2% 85%); transform:rotate(-9deg); }
.competitive-paint > span + span { transform:rotate(9deg); }
#competitive-button:is(:hover,:focus-visible) .competitive-paint { background:#120b1470; transition:background .2s; }
#competitive-button:is(:hover,:focus-visible) .competitive-paint > span { animation:competitive-brush .32s ease-out both; }
#competitive-button:is(:hover,:focus-visible) .competitive-paint > span + span { animation-delay:.18s; }
@keyframes competitive-brush { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { #competitive-button:is(:hover,:focus-visible) .competitive-paint > span { animation:none; opacity:1; } }
.competitive-paint > span:first-child { margin-top:-28px; }
.competitive-paint > span + span { margin-top:28px; }
/* Hover paint flows beyond the card without desaturating its red strokes. */
#competitive-button { overflow:visible; transition:background .5s ease,border-color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.2,.8,.2,1); }
#competitive-button .competitive-paint { overflow:visible; background:transparent; }
#competitive-button .competitive-paint > span { width:112%; animation:none; opacity:0; --paint-angle:-9deg; transform:rotate(var(--paint-angle)) translateX(-16px) scaleX(.88); clip-path:polygon(0 15%,8% 5%,17% 11%,31% 0,47% 7%,65% 0,81% 10%,100% 0,98% 80%,87% 95%,70% 87%,54% 100%,34% 91%,13% 100%,2% 85%); transition:opacity .3s ease,transform .65s cubic-bezier(.16,1,.3,1); }
#competitive-button .competitive-paint > span + span { --paint-angle:9deg; transform:rotate(var(--paint-angle)) translateX(16px) scaleX(.88); transition-delay:.08s; }
#competitive-button:is(:hover,:focus-visible) { z-index:5; background:linear-gradient(120deg,#50515b,#292b33)!important; border-color:#a8a9b1!important; box-shadow:inset 0 0 0 2px #ffffff16,0 8px 20px #0005!important; }
#competitive-button:is(:hover,:focus-visible)::before { opacity:0; }
#competitive-button:is(:hover,:focus-visible) > :not(.competitive-paint) { color:#b9b9c1; transition:color .4s; }
#competitive-button:is(:hover,:focus-visible) .competitive-paint { background:transparent; }
#competitive-button:is(:hover,:focus-visible) .competitive-paint > span { animation:none; opacity:1; transform:rotate(var(--paint-angle)) translateX(0) scaleX(1); }
@media(prefers-reduced-motion:reduce) { #competitive-button,#competitive-button .competitive-paint > span { transition:none; } }
#competitive-button[aria-disabled=true]{cursor:default;pointer-events:auto;}
#competitive-button .competitive-presence{display:none!important;}
