/* =================================================================
   FIGHTERS PALACE — UNIFIED STYLESHEET  (v3 · mobile-cohesive)
   -----------------------------------------------------------------
   Cascade context (READ THIS before editing):

     <head>
       <link rel="stylesheet" href="style.css">      ← this file
       <style> ... inline rules from UIRenderer ... </style>
     </head>

   UIRenderer emits its inline <style> block AFTER this file loads.
   That means any single-class rule in this file (e.g. `.status-bar`)
   gets silently overridden by UIRenderer's inline block of the same
   name. The inline block defines:
       body, .status-bar, .bar_td, .bar_div,
       .player-stats-container, .buff-dropdown, .buff-section,
       .buff-heading, .buff-active, .notification-indicator,
       .notification-list, .notification-item,
       .notification-count, .territory-count,
       .menuOut, .menuOver, .submenu, .submenu td, .submenu td b,
       #dhtmltooltip, #menutooltip,
       @keyframes fadeIn, pulse, flash

   To override any of those we MUST use a selector with strictly
   higher specificity. The tricks used below:

     table.status-bar        (0,1,1) beats inline .status-bar   (0,1,0)
     body table.status-bar   (0,1,2) beats most things
     .status-bar td.bar_td   (0,2,1) beats inline .bar_td

   Do NOT change these to single-class selectors — the cascade will
   silently eat your fix and you'll wonder why.
   -----------------------------------------------------------------
   Page coverage:
     • header.php / UIRenderer / MenuRenderer  (chrome)
     • compliance_ui.php                       (mobile hamburger)
     • OldWorld.php                            (world map + mobs)
     • mob1.php / matt2.php                    (quest NPC + fight)
     • quest_log.php                           (quest list table)
     • casino pages, point store, etc.
   -----------------------------------------------------------------
   Known bugs being fixed:

   [BUG 1] Stat bar overlap with notification badge & world map.
           UIRenderer's .status-bar rule has no position / z-index.
           Fix: table.status-bar gets position:sticky + z-index:500.

   [BUG 2] Mob1.php & quest_log.php styles in unreachable <style>.
           Their <style> blocks sit AFTER `exit;` / `require footer`
           and never reach the browser. All .quest-* / .ql-* rules
           are now defined here so they load from <head>.

   [BUG 3] Buff-dropdown clipped / hidden behind world map.
           Its parent <td> creates a stacking context via `overflow`.
           Fix: force overflow:visible on .status-bar ancestors.

   [BUG 4] Sidebar #masterdiv (200px) overflows 15% sidebar column.
           Fix: constrain #masterdiv width to 100% of its container.

   [BUG 5] OldWorld.php rooms rendered via <table border=2> with
           hardcoded width=250 / width=350 — collapses the layout
           on mobile. Fix: .world-layout wraps and stacks on narrow.
   ================================================================= */
/* =================================================================
   0. BASE (safe to override; UIRenderer redefines `body` in inline)
   ================================================================= */
body,html{margin:0;padding:0}body{background-color:#000;font-size:12px;font-family:Helvetica,Arial,Tahoma,Verdana,sans-serif;color:#fff;min-height:100vh;-webkit-text-size-adjust:100%;text-size-adjust:100%}img{border:0;max-width:100%;height:auto}table{font-size:12px;border-collapse:collapse}input[type=email]:not(.quest-container input),input[type=number]:not(.quest-container input),input[type=password]:not(.quest-container input),input[type=submit]:not(.quest-button):not(.farm-button):not(.ql-btn):not(.world-btn),input[type=text]:not(.quest-container input):not(.ql-btn):not(.mm-link):not(.world-input),textarea:not(.quest-container textarea){background-color:#e6e6e6;color:#000;border:1px solid #000;font-size:12px;font-family:Helvetica,Arial,Tahoma,Verdana,sans-serif;padding:4px 6px;box-sizing:border-box}@media (max-width:768px){input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{font-size:16px!important}}
/* =================================================================
   1. STATUS BAR — HIGH-SPECIFICITY OVERRIDE OF UIRenderer INLINE CSS
   ================================================================= */
table.status-bar{position:sticky;top:0;z-index:500;display:table;width:100%;max-width:1050px;margin:0 auto 10px auto;background:linear-gradient(to right,#6a0000,#8a0000);color:#fff;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.55);box-sizing:border-box;overflow:visible;isolation:isolate}table.status-bar,table.status-bar td,table.status-bar tr{overflow:visible}.status-bar td.bar_td{padding:4px 12px;border-right:1px solid rgba(255,255,255,.2);transition:background-color .25s ease;vertical-align:middle;white-space:nowrap}.status-bar td.bar_td:last-child{border-right:none}.status-bar td.bar_td:hover{background-color:rgba(255,255,255,.08)}.status-bar .player-stats-container{position:relative;z-index:501;overflow:visible}.status-bar .player-stats-container .buff-dropdown{z-index:9999;overflow:visible;pointer-events:auto}
/* =================================================================
   1b. BANNER — MATCH STAT BAR WIDTH
   ================================================================= */
center:has(> table > tbody > tr > td > table > tbody > tr > td > center > a > img[alt=MainHeader])>table,center:has(> table table img[alt=MainHeader])>table{width:100%!important;max-width:1050px!important;margin:0 auto 8px auto;height:auto!important}img[alt=MainHeader]{display:block;width:100%;max-width:1050px;height:auto;margin:0 auto}table:has(> tbody > tr > td > table > tbody > tr > td > center > a > img[alt=MainHeader]){width:100%!important;max-width:1050px!important}table[width="525"]{width:100%!important;max-width:1050px!important;height:auto!important}
/* =================================================================
   1c. ADS — MAKE SURE THEY RENDER (and hide banner ad by request)
   ================================================================= */
.adbytes-display-ad{display:block;width:100%;min-height:90px;margin:6px auto;clear:both;overflow:visible;text-align:center}center a+br+.adbytes-display-ad,img[alt=MainHeader]~.adbytes-display-ad{max-width:970px;min-height:90px}#masterdiv+br+.adbytes-display-ad,#masterdiv~.adbytes-display-ad{max-width:100%;min-height:250px;margin-top:12px}div[data-adspace-id]{display:block!important;visibility:visible!important}div[data-adspace-id="1CF87E8015"]{display:none!important;visibility:hidden!important;width:0!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
/* =================================================================
   2. MAIN LAYOUT — SIDEBAR + CONTENT
   ================================================================= */
table.status-bar+table,table[width="1050"]:not(.status-bar){position:relative;z-index:1;margin:0 auto;max-width:1050px;width:100%}#masterdiv{width:100%;max-width:200px;box-sizing:border-box;position:relative;z-index:2}.notification-indicator{position:relative;z-index:2}.notification-list{position:relative;z-index:3}
/* =================================================================
   3. LINKS
   ================================================================= */
a,a:link,a:visited{color:#fff;text-decoration:none;font-size:12px}a:hover{color:#fc0;text-decoration:none}a.list-crewmemb:hover,a.list-crewmemb:link,a.list-crewmemb:visited{color:#00f900}a.list-crewenemy:hover,a.list-crewenemy:link,a.list-crewenemy:visited{color:#c66060}a.list-crewally:link,a.list-crewally:visited{color:#fff}
/* =================================================================
   4. LEGACY CONTENT PANELS
   ================================================================= */
.content{background-color:#222;color:#fff;border:1px solid #000;font-size:12px}.menu_bar{background-image:url(images/bar.jpg)}.main{background-color:#666;border:1px solid #000;color:#fff;font-size:12px}.shout{background-color:#333;border:1px solid #000;color:#fff;padding:5px;font-size:12px}.stattable{background-color:#666;border-bottom:1px solid #fff;font-size:12px}.stattabletitle{background-color:#333;border:1px solid #333;text-align:center;font-size:16px;font-weight:700;padding:4px}.crewtabletitle{background-color:#333;border:1px solid #333;text-align:center;font-size:14px;font-weight:700;padding:4px}.menu{background-color:#000}.mail{background-color:#666;color:#fff;text-align:center;border:1px solid #000}.mail-title{background-color:#333;color:#fff;font-weight:700;text-align:center;border:1px solid #000}.forums{background-color:#7a7a7a;color:#fff;border:1px solid #000;padding-left:2px}.replies{background-color:#666;color:#fff;border-top:1px solid #000}.atklist{background-color:#e6e6e6;color:#000;border:1px solid #000;font-size:12px}.page{background-color:#222;color:#fff;text-align:center;border:1px double #000}.batitle{color:#fff;font-weight:700;font-size:24px;text-shadow:0 1px 2px rgba(0,0,0,.8)}.small{font-size:10px}.pointhead{color:orange;font-weight:700;text-align:center;font-size:20px}
/* =================================================================
   5. PP / PREFERRED PLAYER BADGE
   ================================================================= */
.pp-member-badge{background:linear-gradient(to right,#fc0,#f90);color:#000;padding:5px 10px;border-radius:5px;font-weight:700;display:inline-block;box-shadow:0 0 10px rgba(255,204,0,.7);margin:10px 0;animation:pp-glow 1.5s infinite alternate}@keyframes pp-glow{from{box-shadow:0 0 5px rgba(255,204,0,.7)}to{box-shadow:0 0 15px rgba(255,204,0,.9),0 0 20px rgba(255,153,0,.8)}}.status-bar .pp-buff-heading{color:#fc0!important;font-size:1.1em;text-shadow:0 0 5px #f90}
/* =================================================================
   6. ALERT FLASHERS
   ================================================================= */
.flashing-text,.flashing-text2,.flashing-text3{font-size:1.5em;font-weight:700}.territory-raid-alert{font-size:1.7em;font-weight:700;letter-spacing:1px}
/* =================================================================
   7. QUEST / MOB1 SYSTEM
   -----------------------------------------------------------------
   mob1.php DOES define a <style> block — but it sits AFTER `exit;`
   and `require_once 'footer.php'`, so it never loads. All .quest-*
   classes are defined here.
   ================================================================= */
.quest-container{max-width:800px;margin:20px auto;background-color:rgba(0,0,0,.7);border:2px solid #444;border-radius:10px;padding:20px;box-shadow:0 0 20px rgba(0,0,0,.6);color:#f5f5f5;font-family:'Segoe UI',Arial,sans-serif;position:relative;z-index:1;box-sizing:border-box}.quest-header{border-bottom:2px solid #666;margin-bottom:15px;padding-bottom:10px;text-align:center}.quest-header h2{color:#f1c40f;text-shadow:0 0 10px rgba(241,196,15,.6);font-size:26px;margin:0;letter-spacing:1px}.user-resources{background-color:rgba(0,0,0,.35);padding:10px 16px;border-radius:6px;margin-bottom:16px;text-align:center;border:1px solid #444;font-size:15px}.user-resources strong{color:#f1c40f}.quest-content{display:flex;flex-wrap:wrap;margin-bottom:20px;gap:20px;align-items:flex-start}.quest-image{flex:0 0 auto;text-align:center}.quest-image img{max-width:200px;max-height:200px;border:2px solid #666;border-radius:8px;box-shadow:0 0 14px rgba(0,0,0,.6);display:block}.quest-description{flex:1 1 auto;min-width:240px;padding:12px 16px;background-color:rgba(0,0,0,.3);border-radius:6px;border-left:4px solid #f1c40f;line-height:1.6;font-size:15px;color:#f5f5f5}.quest-description .level-warning{color:#e74c3c;font-weight:700;text-shadow:0 0 3px rgba(231,76,60,.5)}.quest-description .level-requirement-text{color:#f39c12;font-style:italic}.quest-actions{text-align:center}.quest-actions h3{color:#3498db;text-shadow:0 0 4px rgba(52,152,219,.5);margin-bottom:16px;font-size:18px}.quest-current-task{margin:15px auto;padding:16px;background-color:rgba(0,0,0,.3);border-radius:8px;max-width:92%;border:1px solid rgba(255,255,255,.08);text-align:left}.quest-current-task h3{color:#e74c3c;margin-top:0;text-align:center;font-size:18px;text-shadow:0 0 4px rgba(231,76,60,.4)}.quest-current-task p{margin-bottom:14px;line-height:1.5;font-size:14px}.quest-requirements{margin:14px 0;padding:12px 16px;border-radius:6px}.quest-requirements h4{margin-top:0;margin-bottom:10px;color:#f39c12;font-size:15px}.quest-requirements ul{list-style-type:none;padding-left:4px;margin:0}.quest-requirements li{margin-bottom:10px;padding:6px 8px;border-radius:4px;font-size:14px;line-height:1.5}.kill-requirements{background-color:rgba(231,76,60,.15);border-left:4px solid #e74c3c}.kill-requirements li{color:#ecf0f1}.item-requirements{background-color:rgba(46,204,113,.15);border-left:4px solid #2ecc71}.item-requirements li.complete{color:#2ecc71}.item-requirements li.incomplete{color:#ecf0f1}.item-name-label{font-weight:700}.item-count-label{color:#f1c40f;font-weight:700;margin-left:4px}.item-progress-bar{height:5px;background:rgba(255,255,255,.12);border-radius:3px;margin-top:5px;overflow:hidden}.item-progress-fill{height:100%;background:linear-gradient(90deg,#e74c3c,#c0392b);border-radius:3px;transition:width .4s ease}.item-source-hint{font-size:12px;color:#f1c40f;margin:8px 0 4px 2px}.mob-kill-buttons{margin:6px 0 4px 0;padding:10px 12px;background-color:rgba(0,0,0,.3);border-radius:6px;border-left:3px solid #9b59b6;display:flex;flex-wrap:wrap;gap:6px}.mob-farm-form{display:inline-block}.farm-button{padding:7px 14px;border-radius:5px;cursor:pointer;font-weight:700;font-size:12px;border:none;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:all .2s ease;white-space:nowrap;font-family:'Segoe UI',Arial,sans-serif;color:#fff;min-height:36px}.farm-button.btn-primary{background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff}.farm-button.btn-primary:hover{background:linear-gradient(135deg,#8e44ad,#7d3c98);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.4)}.farm-button.btn-disabled{background:linear-gradient(135deg,#636e72,#555);color:#aaa;cursor:not-allowed;opacity:.65}.quest-buttons{margin-top:20px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}.quest-button{display:inline-block;padding:11px 24px;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;text-decoration:none;border-radius:6px;font-weight:700;font-size:14px;transition:all .25s ease;box-shadow:0 3px 6px rgba(0,0,0,.35);cursor:pointer;border:none;font-family:'Segoe UI',Arial,sans-serif;min-height:44px;box-sizing:border-box;text-align:center}.quest-button:hover{background:linear-gradient(135deg,#2980b9,#1a6fa8);transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.45);color:#fff}.accept-button{background:linear-gradient(135deg,#2ecc71,#27ae60)}.accept-button:hover{background:linear-gradient(135deg,#27ae60,#1e8449)}.complete-button{background:linear-gradient(135deg,#f1c40f,#e67e22);color:#1a1a2e}.complete-button:hover{background:linear-gradient(135deg,#e67e22,#d35400);color:#fff}.disabled-button{background:linear-gradient(135deg,#636e72,#555);color:#aaa;cursor:not-allowed;opacity:.7}.disabled-button:hover{transform:none}.quest-notice{max-width:800px;margin:16px auto;padding:14px 18px;border-radius:6px;border-left:5px solid #3498db;background-color:#2c3e50;color:#ecf0f1;font-size:14px;text-align:center;line-height:1.5;box-sizing:border-box}.quest-notice.error{background:rgba(231,76,60,.25);border-color:#e74c3c}.quest-notice.warning{background:rgba(241,196,15,.2);border-color:#f1c40f}.quest-notice.success{background:rgba(46,204,113,.25);border-color:#2ecc71}.quest-notice.info{background:rgba(52,152,219,.2);border-color:#3498db}.quest-notice.level-requirement{background:rgba(155,89,182,.25);border-color:#9b59b6}.quest-task-details{margin-top:18px;background-color:rgba(0,0,0,.2);padding:16px;border-radius:6px;border:1px solid rgba(255,255,255,.07)}.quest-task-details h3{color:#2ecc71;margin-top:0;font-size:16px}.fight-result-multi{background-color:#1a1a2e;color:#fff;border:3px solid #f1c40f;padding:26px;margin:28px auto;border-radius:12px;max-width:86%;box-shadow:0 8px 20px rgba(0,0,0,.4);font-family:'Segoe UI',Arial,sans-serif;animation:mob1-glow 1.6s ease-in-out infinite alternate;box-sizing:border-box}.item-farm{border-color:#9b59b6;animation:mob1-glow-purple 1.6s ease-in-out infinite alternate}@keyframes mob1-glow{from{box-shadow:0 0 10px rgba(241,196,15,.45)}to{box-shadow:0 0 22px rgba(241,196,15,.85)}}@keyframes mob1-glow-purple{from{box-shadow:0 0 10px rgba(155,89,182,.45)}to{box-shadow:0 0 22px rgba(155,89,182,.85)}}.result-title{text-align:center;font-size:26px;margin-bottom:22px;color:#f1c40f;text-shadow:2px 2px 4px rgba(0,0,0,.5);border-bottom:2px solid #f1c40f;padding-bottom:10px;letter-spacing:2px}.item-farm .result-title{color:#9b59b6;border-bottom-color:#9b59b6}.farming-info{background:rgba(155,89,182,.18);padding:14px;border-radius:8px;margin-bottom:18px;border-left:4px solid #9b59b6}.farming-info p{margin:5px 0;font-size:15px}.battle-outcome{text-align:center;padding:16px;margin:18px 0;border-radius:8px;font-size:28px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.victory-bg{background:linear-gradient(135deg,#27ae60,#2ecc71)}.defeat-bg{background:linear-gradient(135deg,#c0392b,#e74c3c)}.outcome-text{letter-spacing:4px;text-transform:uppercase;animation:mob1-pulse 2s infinite;display:inline-block}@keyframes mob1-pulse{0%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}100%{opacity:.85;transform:scale(1)}}.result-stats{background:rgba(255,255,255,.08);border-radius:8px;padding:14px 18px;margin:18px 0}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px;flex-wrap:wrap;gap:8px}.stat-row:last-child{border-bottom:none}.stat-label{font-weight:700;color:#3498db}.exp-gained,.money-gained{color:#f1c40f;font-weight:700;font-size:21px}.section-title{font-size:18px;margin:14px 0 10px;color:#3498db;letter-spacing:1px}.items-section,.no-item-section{background:rgba(255,255,255,.05);border-radius:8px;padding:14px;margin-bottom:14px}.target-item-found{background:rgba(46,204,113,.28);border:2px solid #2ecc71;padding:18px;margin:10px 0;font-size:19px;text-align:center;font-weight:700;border-radius:10px;animation:mob1-glow-green 1.6s infinite alternate}@keyframes mob1-glow-green{from{box-shadow:0 0 10px rgba(46,204,113,.45)}to{box-shadow:0 0 24px rgba(46,204,113,.9)}}.target-item-not-found{background:rgba(231,76,60,.25);border-left:4px solid #e74c3c;padding:10px 14px;margin:10px 0;font-size:13px;color:#ecf0f1;border-radius:5px}.item-highlight{background:rgba(52,152,219,.25);border-left:4px solid #3498db;padding:12px 16px;margin:10px 0;font-size:17px;text-align:center;font-weight:700;color:#3498db;border-radius:6px}.defeat-message{background:rgba(231,76,60,.2);border-radius:8px;padding:14px;text-align:center;border-left:4px solid #e74c3c}.fight-result-multi .error,.quest-container .error{color:#fff;background:rgba(231,76,60,.75);padding:16px;border-radius:8px;margin:20px auto;max-width:80%;border-left:5px solid #c0392b;box-shadow:0 4px 8px rgba(0,0,0,.25);text-align:center}.battle-log-details summary:hover{color:#f1c40f}.battle-log-scroll{max-height:200px;overflow-y:auto;margin-top:8px;background:rgba(0,0,0,.3);border-radius:6px;padding:10px;scrollbar-width:thin}.log-entry{font-size:13px;margin:3px 0;padding:2px 0;border-bottom:1px solid rgba(255,255,255,.05);line-height:1.5;color:#ecf0f1}.elem-Fire{color:#e74c3c;font-weight:600}.elem-Wind{color:#2ecc71;font-weight:600}.elem-Water{color:#3498db;font-weight:600}.elem-Rock{color:#d4a017;font-weight:600}.elem-Spirit{color:#9b59b6;font-weight:600}.crit{color:#f39c12;font-weight:700}
/* =================================================================
   7b. QUEST LOG  (quest_log.php — moved from inline <style>)
   -----------------------------------------------------------------
   quest_log.php ships its own <style> block AFTER <?php require_once
   'footer.php'; ?> — meaning on most error paths it never reaches
   the browser. Pulling the rules here guarantees they always load.
   ================================================================= */
:root{--ql-bg:#1a1a2e;--ql-sur:#16213e;--ql-bdr:#0f3460;--ql-gold:#f1c40f;--ql-green:#2ecc71;--ql-red:#e74c3c;--ql-blue:#3498db;--ql-pur:#9b59b6;--ql-txt:#ecf0f1;--ql-mut:#95a5a6}.ql-wrap{max-width:98%;margin:0 auto;padding:14px;color:var(--ql-txt);font-family:'Segoe UI',Arial,sans-serif;box-sizing:border-box}.ql-topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:6px;border-bottom:2px solid var(--ql-bdr);padding-bottom:10px}.ql-topbar h2{color:var(--ql-gold);margin:0;font-size:1.5rem}.ql-res{display:flex;flex-wrap:wrap;gap:10px}.ql-badge{background:rgba(255,255,255,.07);border:1px solid var(--ql-bdr);padding:4px 12px;border-radius:20px;font-size:.88rem;white-space:nowrap}.ql-warn{color:var(--ql-gold);font-size:.82rem;font-style:italic;margin:0 0 12px}.ql-notice{padding:10px 14px;border-radius:6px;margin:10px 0;border-left:4px solid transparent}.ql-notice.error{background:rgba(231,76,60,.15);border-color:var(--ql-red)}.ql-result{background:var(--ql-sur);border:2px solid var(--ql-gold);border-radius:10px;padding:16px 20px;margin-bottom:16px;animation:qlGlow 2s ease-in-out infinite alternate}.ql-result.defeat{border-color:var(--ql-red);animation:none}.ql-result.multi{border-color:var(--ql-blue)}.ql-result.task-done{border-color:var(--ql-pur)}@keyframes qlGlow{from{box-shadow:0 0 6px rgba(241,196,15,.3)}to{box-shadow:0 0 18px rgba(241,196,15,.7)}}.ql-result h3{margin:0 0 12px;color:var(--ql-gold);font-size:1.1rem}.ql-rrow{display:flex;flex-wrap:wrap;gap:20px;font-size:.95rem}.gold{color:var(--ql-gold)}.green{color:var(--ql-green)}.red{color:var(--ql-red)}.ql-sgrid{display:flex;flex-wrap:wrap;gap:10px}.ql-sgrid>div{background:rgba(255,255,255,.05);border-radius:6px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;min-width:70px;flex:1 1 auto}.sl{font-size:.78rem;color:var(--ql-mut)}.sv{font-size:1.1rem;font-weight:700}.ql-items{margin-top:8px;font-size:.88rem;color:var(--ql-blue)}.ql-item-tag{background:rgba(52,152,219,.15);border:1px solid var(--ql-blue);border-radius:10px;padding:2px 8px;margin:2px;display:inline-block}.ql-pbar-wrap{position:relative;height:20px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;margin-bottom:10px}.ql-pbar{height:100%;background:linear-gradient(90deg,var(--ql-green),#27ae60);border-radius:10px;transition:width .5s}.ql-plabel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.78rem;font-weight:700;color:#fff;white-space:nowrap;pointer-events:none}.ql-log summary{cursor:pointer;color:var(--ql-mut);font-size:.82rem;user-select:none;margin-top:8px}.ql-logbody{max-height:180px;overflow-y:auto;font-size:.8rem;line-height:1.6;background:rgba(0,0,0,.25);border-radius:4px;padding:8px;margin-top:6px}.ql-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;border:1px solid var(--ql-bdr)}.ql-table{width:100%;border-collapse:collapse;background:var(--ql-sur);font-size:.88rem;min-width:640px}.ql-table th{background:#0f3460;color:var(--ql-gold);padding:10px 12px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:1}.ql-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}.ql-table tr:hover td{background:rgba(255,255,255,.03)}.q-link{color:var(--ql-gold);text-decoration:none;font-weight:700}.q-link:hover{text-decoration:underline}.ql-inc{background:rgba(241,196,15,.12);color:var(--ql-gold);padding:2px 8px;border-radius:10px;font-size:.78rem;white-space:nowrap}.ql-done{background:rgba(46,204,113,.12);color:var(--ql-green);padding:2px 8px;border-radius:10px;font-size:.78rem;white-space:nowrap}.td-task{max-width:220px}.td-kills{min-width:120px}.td-act{min-width:200px}.kill-tag{display:inline-block;background:rgba(231,76,60,.12);border:1px solid var(--ql-red);color:var(--ql-txt);padding:2px 8px;border-radius:10px;font-size:.8rem;margin:2px 0}.ql-done-txt{color:var(--ql-green);font-size:.85rem}.na{color:var(--ql-mut);font-size:.82rem}.ql-form{margin:3px 0}.ql-btn{width:100%;padding:8px 10px;border:none;border-radius:5px;cursor:pointer;font-size:.8rem;font-weight:600;color:#fff;text-align:left;transition:filter .15s;white-space:normal;overflow-wrap:anywhere;min-height:36px;box-sizing:border-box;font-family:inherit}.ql-btn:hover:not(.off){filter:brightness(1.18)}.ql-btn.one{background:var(--ql-blue);margin-bottom:2px}.ql-btn.all{background:var(--ql-green);color:#111;margin-bottom:4px}.ql-btn.task{background:var(--ql-red);margin-top:6px}.ql-btn.off{background:#333!important;color:#555!important;cursor:not-allowed;pointer-events:none}.ql-empty{text-align:center;color:var(--ql-mut);font-style:italic;padding:28px 0!important}
/* =================================================================
   7c. OLDWORLD.PHP  —  WORLD MAP + ROOM + MOB LIST
   -----------------------------------------------------------------
   OldWorld.php renders via a legacy <table border=2> with hardcoded
   width=250 / width=350 tds. On mobile that forces ~600px of rigid
   horizontal content which breaks the layout.

   We:
     - Wrap the legacy table in a responsive container via the
       content td (styled via descendant selector)
     - Stack the two columns vertically <= 768px
     - Turn direction links into a D-pad grid on mobile
     - Keep the minimap centered and scale with viewport
   ================================================================= */
#masterdiv-mobile~* [style*="width:450px"],.content [style*="width:450px;"][style*="height:450px;"]{max-width:100%!important;margin:0 auto!important}.content table[border="2"]{width:100%;max-width:720px;margin:12px auto;background:#1a1a1a;border:2px solid #444;border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.5);box-sizing:border-box}.content table[border="2"] td[width="500"]{background:linear-gradient(to right,#4a0000,#6a0000)!important;padding:10px;font-size:18px;letter-spacing:1px;text-align:center;border-bottom:2px solid maroon}.content table[border="2"] td[width="500"] b{color:gold;text-shadow:0 0 6px rgba(255,215,0,.35)}.content table[border="2"] td[width="250"]{background:#222!important;padding:12px 10px;vertical-align:top;box-sizing:border-box}.content table[border="2"]>tbody>tr:not(:first-child)>td:not([width="250"]){background:#222!important;padding:12px 10px;vertical-align:top;box-sizing:border-box}#east-link-text,#north-link-text,#south-link-text,#west-link-text{display:inline-block;min-width:68px;min-height:44px;padding:10px 18px;margin:4px 6px;background:linear-gradient(135deg,#2c3e50,#34495e);color:gold!important;border:1px solid #555;border-radius:6px;font-weight:700;font-size:14px;letter-spacing:1px;text-decoration:none;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.4);transition:all .15s ease;box-sizing:border-box;line-height:24px}#east-link-text:hover,#north-link-text:hover,#south-link-text:hover,#west-link-text:hover{background:linear-gradient(135deg,#34495e,#4a6278);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.5);color:#fff!important}#east-link-text:active,#north-link-text:active,#south-link-text:active,#west-link-text:active{transform:translateY(1px);background:linear-gradient(135deg,#1a2530,#2c3e50)}.content form input[name=search_mob]{background:#2a2a2a!important;color:#f5f5f5!important;border:1px solid #555!important;border-radius:5px;padding:8px 10px!important;width:100%!important;max-width:220px;box-sizing:border-box;font-family:inherit}.content form input[name=search_mob]:focus{border-color:gold!important;outline:2px solid rgba(255,215,0,.3);outline-offset:1px}.content form button[type=submit]{min-height:36px;padding:7px 14px!important;border-radius:5px!important;cursor:pointer;font-weight:700;font-family:inherit;transition:filter .15s ease}.content form button[type=submit]:hover{filter:brightness(1.2)}.content form select[name=selected_mob_room]{background:#2a2a2a!important;color:#f5f5f5!important;border:1px solid #555!important;padding:6px!important;border-radius:5px;width:100%!important;max-width:220px;box-sizing:border-box}.content div[style*="height:60px"][style*="overflow-y:auto"]{width:100%!important;max-width:350px;background:rgba(0,0,0,.35)!important;border-radius:6px!important;border-color:#444!important;line-height:1.5;box-sizing:border-box}.content div[style*="height:250px"][style*="overflow-y:auto"]{width:100%!important;max-width:350px;background:#111!important;border-radius:6px!important;border-color:#444!important;box-sizing:border-box}.content div[style*="border:1px solid #444"][style*="padding:10px"]{background:rgba(0,0,0,.3);border-radius:6px!important;text-align:center}.content div[style*="color:#0f0"][style*="border:2px solid #0f0"]{border-radius:8px!important;padding:12px 16px!important;box-shadow:0 0 18px rgba(0,255,0,.35);animation:worldFind 1.8s ease-in-out infinite alternate}@keyframes worldFind{from{box-shadow:0 0 10px rgba(0,255,0,.3)}to{box-shadow:0 0 24px rgba(0,255,0,.7)}}
/* =================================================================
   7d. PROFILE & TRUSTEE PAGES
   -----------------------------------------------------------------
   Covers three related pages that share similar markup idioms:

     • profile.php — uses semantic component classes from
       /components/profile/*.php renderers. The rules that paint
       those classes live in components/profile/profile_styles.php,
       which is `require_once`'d at the BOTTOM of profile.php —
       AFTER footer.php. On early-error paths (user not found,
       session lost, etc.) that include never runs and the page
       appears unstyled. We mirror the ENTIRE profile_styles.php
       contract here so those classes always render correctly
       from <head>, regardless of execution path.

       Source of truth for this section remains profile_styles.php.
       If you add a class there, mirror it here too — otherwise
       error-path renders will lack it.

     • myprofile.php — uses 100% inline styles + a trailing <style>
       block. The trailing block redefines `h3` GLOBALLY (without
       scope) — we counter-scope key h3s so they don't inherit it.
       Structure: outer #333 card → flex 70/25 (spells + actions) →
       player-info table → mastery → supplies grid.

     • trustee.php — uses 100% inline styles. The core layout is a
       CSS grid `1fr 1fr 1fr` that must stack on narrow viewports.
       We can't edit the PHP, so every rule targets via inline-
       attribute signature (`[style*="..."]`).

   Shared idiom across all three:
     - Dark `#333` cards
     - Orange (`#ff6600`) and gold (`#ffcc00` / `#ffd700`) accents
     - Dangerous actions (attack, remove trustee, switch account)
   ================================================================= */
.error-message,.success-message{text-align:center;font-size:1.1em;margin:20px auto;padding:15px;border-radius:8px;max-width:600px;box-sizing:border-box;line-height:1.5}.error-message{color:#f33;background-color:rgba(255,0,0,.1);border:2px solid #f33}.success-message{color:#3c3;background-color:rgba(0,255,0,.1);border:2px solid #3c3}.performance-info{text-align:center;color:#666;font-size:.85em;margin-top:20px}
/* ===============================================================
   PROFILE.PHP  —  Component classes
   ---------------------------------------------------------------
   Mirrors components/profile/profile_styles.php so profile pages
   always paint from <head>, not only after footer.php runs.
   --------------------------------------------------------------- */

/* ---------- Container ---------- */
.profile-container {
    margin: 20px auto;
    padding: 20px;
    width: 95%;
    max-width: 1400px;
    background-color: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    color: #f5f5f5;
    box-sizing: border-box;
}

/* ---------- Header ---------- */
.profile-header {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
.profile-header h1 {
    margin: 0 0 10px 0;
    font-size: 2em;
}
.profile-name {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.profile-ban {
    color: #ff3333;
    font-size: 0.8em;
}
.active-spells {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.spell-icon {
    display: inline-block;
    transition: all 0.3s;
    cursor: pointer;
}
.spell-icon img {
    border-radius: 50%;
    border: 2px solid #444;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.spell-icon:hover img {
    transform: scale(1.15);
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}
.profile-suspended {
    color: #ff3333;
    font-size: 1.1em;
    margin-top: 12px;
    font-weight: bold;
    padding: 8px;
    background-color: rgba(255, 0, 0, 0.15);
    border-radius: 6px;
    border: 1px solid #ff3333;
}
.profile-vip, .profile-buyer {
    margin-top: 8px;
    font-weight: 600;
}
.profile-vip   { color: #33cc33; }
.profile-buyer { color: #9966ff; }

/* ---------- Action buttons ---------- */
.profile-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
    align-items: center;
    padding: 15px;
    background-color: #222;
    border-radius: 8px;
    box-sizing: border-box;
}
.action-form { margin: 0; }

/* .action-button — shared class between myprofile.php (inline
   <style>) and profile_styles.php. We provide the profile_styles
   version here; myprofile's trailing inline <style> will override
   on that page via source order. Either rendering is consistent. */
.action-button {
    padding: 12px 24px;
    background: linear-gradient(to bottom, #444, #333);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.95em;
    transition: all 0.3s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    min-width: 140px;
    min-height: 44px;              /* WCAG 2.5.5 tap target         */
    font-family: inherit;
    box-sizing: border-box;
}
.action-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

.attack-btn:hover {
    background: linear-gradient(to bottom, #cc0000, #990000);
}
.message-btn:hover {
    background: linear-gradient(to bottom, #0088cc, #006699);
}
.ally-btn {
    background: linear-gradient(to bottom, #00cc00, #009900);
}
.ally-btn:hover {
    background: linear-gradient(to bottom, #00ff00, #00cc00);
}
.enemy-btn {
    background: linear-gradient(to bottom, #ff8800, #cc6600);
}
.enemy-btn:hover {
    background: linear-gradient(to bottom, #ffaa00, #ff8800);
}
.remove-ally-btn,
.remove-enemy-btn {
    background: linear-gradient(to bottom, #ff8888, #cc6666);
}
.remove-ally-btn:hover,
.remove-enemy-btn:hover {
    background: linear-gradient(to bottom, #ffaaaa, #ff8888);
}

/* Relation status chips (displayed when you already have relation) */
.relation-status {
    padding: 10px 18px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
}
.ally-status {
    background-color: rgba(0, 255, 0, 0.2);
    color: #00ff00;
    border: 2px solid #00cc00;
}
.enemy-status {
    background-color: rgba(255, 165, 0, 0.2);
    color: #ffaa00;
    border: 2px solid #ff8800;
}

/* ---------- Info + image grid ---------- */
.profile-info-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}
.profile-info {
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
.profile-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.profile-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #333;
}
.profile-table tr:last-child td {
    border-bottom: none;
}
.profile-table tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.02);
}
.status-online  { color: #33cc33; font-weight: bold; }
.status-offline { color: #ff3333; }

.profile-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
.profile-pic {
    max-width: 100%;
    max-height: 450px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    border: 3px solid #333;
}

/* ---------- Equipment section ---------- */
.profile-equipment {
    width: 100%;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.profile-equipment h2 {
    color: #ffd700;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #444;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.tradeblock-link {
    color: #66ccff;
    text-decoration: none;
    font-size: 0.8em;
    margin-left: 15px;
    transition: all 0.3s;
}
.tradeblock-link:hover {
    color: #99ddff;
    text-shadow: 0 0 10px rgba(102, 204, 255, 0.5);
}
.equipment-display {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    box-sizing: border-box;
}
.equipment-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
}
.equipment-row:last-child { margin-bottom: 0; }

.equipment-slot {
    width: 120px;
    height: 120px;
    position: relative;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 3px solid #444;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    box-sizing: border-box;
}
.equipment-slot:hover {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), inset 0 2px 5px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}
.item-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.equipment-img {
    max-width: 110px;
    max-height: 110px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    transition: all 0.3s;
}
.equipment-slot:hover .equipment-img {
    transform: scale(1.05);
    filter: drop-shadow(0 3px 8px rgba(255, 215, 0, 0.4));
}
.empty-slot-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 10px,
        rgba(0, 0, 0, 0.03) 10px,
        rgba(0, 0, 0, 0.03) 20px
    );
}
.slot-label {
    color: #555;
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase;
}
.damage-indicator {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.equipment-spacer {
    width: 120px;
    height: 120px;
}

/* ---------- Orb slots ---------- */
.row-orbs { margin-top: 10px; }
.orbs-container {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.orb-slot {
    width: 80px;
    height: 80px;
    position: relative;
    background: radial-gradient(circle, #1a1a1a 0%, #0d0d0d 100%);
    border: 2px solid #444;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.orb-slot:hover {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}
.orb-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.orb-img {
    max-width: 70px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
    transition: all 0.3s;
}
.orb-slot:hover .orb-img {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 8px rgba(255, 215, 0, 0.4));
}
.empty-orb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.03) 100%);
    border-radius: 50%;
}
.orb-label {
    color: #555;
    font-weight: bold;
    font-size: 1em;
}
.orb-damage {
    font-size: 0.7em;
    padding: 2px 5px;
}

/* ---------- Shared section cards (mastery/supplies/trophy/desc) ---------- */
.profile-mastery,
.profile-supplies,
.profile-trophy,
.profile-description {
    width: 100%;
    margin-bottom: 25px;
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
.profile-mastery h2,
.profile-supplies h2,
.profile-trophy h2,
.profile-description h2 {
    color: #ffd700;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #444;
    font-size: 1.3em;
}

.supplies-grid,
.trophy-grid,
.medal-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}
.supply-item,
.trophy-item,
.medal-item {
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a1a1a;
    border-radius: 6px;
    border: 2px solid #444;
    transition: all 0.3s;
    cursor: pointer;
    box-sizing: border-box;
}
.supply-item:hover,
.trophy-item:hover,
.medal-item:hover {
    transform: scale(1.1);
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* .item-pic is used by both profile_styles.php AND myprofile.php.
   myprofile.php emits it at 50x50 via its own rule; profile_styles
   wants 60x60. We pick profile_styles' value because myprofile's
   trailing <style> will override for its page anyway. */
.item-pic {
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
}

/* ---------- Relations grid ---------- */
.profile-relations-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}
.profile-allies,
.profile-enemies {
    background-color: #222;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
}
.relation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
.relation-item {
    text-align: center;
    width: 90px;
}
.relation-pic {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    border: 2px solid #444;
    transition: all 0.3s;
}
.relation-pic:hover {
    transform: scale(1.1);
    border-color: #ffd700;
}

/* ---------- profile_styles.php's own responsive breakpoints ----------
   These mirror the author's intent (1200/900/600 breakpoints). We
   keep them here so the @media rules always load, even on error
   paths where profile_styles.php never includes. */
@media (max-width: 1200px) {
    .equipment-slot,
    .equipment-spacer {
        width: 100px;
        height: 100px;
    }
    .equipment-img {
        max-width: 90px;
        max-height: 90px;
    }
}

@media (max-width: 900px) {
    .profile-info-container,
    .profile-relations-container {
        grid-template-columns: 1fr;
    }
    .equipment-slot,
    .equipment-spacer {
        width: 85px;
        height: 85px;
    }
    .equipment-img {
        max-width: 75px;
        max-height: 75px;
    }
    .orb-slot {
        width: 65px;
        height: 65px;
    }
    .orb-img {
        max-width: 55px;
        max-height: 55px;
    }
}

@media (max-width: 600px) {
    .profile-container {
        padding: 15px;
    }
    .profile-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .action-button {
        width: 100%;
    }
    .equipment-row {
        gap: 8px;
    }
    .equipment-slot,
    .equipment-spacer {
        width: 70px;
        height: 70px;
    }
    .equipment-img {
        max-width: 60px;
        max-height: 60px;
    }
}

/* ---------- A11y / motion top-ups on the profile_styles contract ---------- */
/* profile_styles.php doesn't define focus-visible rings. Add them
   so keyboard users can actually navigate the page. */
.action-button:focus-visible,
.spell-icon:focus-visible,
.equipment-slot:focus-visible,
.orb-slot:focus-visible,
.supply-item:focus-visible,
.trophy-item:focus-visible,
.medal-item:focus-visible,
.relation-pic:focus-visible,
.tradeblock-link:focus-visible {
    outline: 3px solid #ffd700 !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.25);
}

/* The equipment slot / spell icon / supply item hover transforms
   can feel jarring under prefers-reduced-motion. Neutralise. */
@media (prefers-reduced-motion: reduce) {
    .spell-icon:hover img,
    .equipment-slot:hover,
    .equipment-slot:hover .equipment-img,
    .orb-slot:hover,
    .orb-slot:hover .orb-img,
    .supply-item:hover,
    .trophy-item:hover,
    .medal-item:hover,
    .relation-pic:hover,
    .action-button:hover {
        transform: none !important;
    }
}

/* Forced-colors: mark slot boundaries so they remain visible
   in Windows high-contrast mode. */
@media (forced-colors: active) {
    .profile-container,
    .profile-header,
    .profile-info,
    .profile-image,
    .profile-equipment,
    .profile-mastery,
    .profile-supplies,
    .profile-trophy,
    .profile-description,
    .profile-allies,
    .profile-enemies,
    .equipment-slot,
    .orb-slot {
        border: 1px solid CanvasText;
    }
    .action-button,
    .attack-btn, .message-btn, .ally-btn, .enemy-btn,
    .remove-ally-btn, .remove-enemy-btn {
        border: 1px solid ButtonText;
    }
}


/* ===============================================================
   MYPROFILE.PHP  —  "My Profile" (legacy inline-style page)
   ---------------------------------------------------------------
   myprofile.php is a separate page from profile.php. It wraps
   everything in:
     <div style='background-color: #333; color: white;
                 padding: 20px; border-radius: 10px;'>
   and uses a 70/25 flex split for spells vs action buttons, plus
   a trailing <style> block that globally redefines `h3`. We target
   by the inline attribute signature of that outer wrapper so we
   don't accidentally restyle profile.php's .profile-container.
   --------------------------------------------------------------- */

/* 70% spells + 25% actions flex row */
.content div[style*="background-color: #333"][style*="border-radius: 10px"] > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 14px;
}
.content div[style*="background-color: #333"][style*="border-radius: 10px"] > div[style*="display: flex"][style*="justify-content: space-between"] > div[style*="width: 70%"],
.content div[style*="background-color: #333"][style*="border-radius: 10px"] > div[style*="display: flex"][style*="justify-content: space-between"] > div[style*="width: 25%"] {
    box-sizing: border-box;
}

/* Player info / mastery tables (the #444 rounded rectangles).
   Inside myprofile.php these are <table> with inline
   style="background-color: #444; border-radius: 10px". */
.content table[style*="background-color: #444"][style*="border-radius: 10px"] {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid #555;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    color: #f5f5f5;
}
.content table[style*="background-color: #444"][style*="border-radius: 10px"] tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}
.content table[style*="background-color: #444"][style*="border-radius: 10px"] td {
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.content table[style*="background-color: #444"][style*="border-radius: 10px"] td b {
    color: #ffcc00;
}
.content table[style*="background-color: #444"][style*="border-radius: 10px"] tr:last-child td {
    border-bottom: none;
}

/* .drop-button from myprofile's trailing <style> */
.drop-button {
    background: linear-gradient(135deg, #d9534f, #b73c38) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    cursor: pointer;
    width: 100%;
    min-height: 44px;
    margin: 6px 0 !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    font-family: inherit;
}
.drop-button:hover {
    background: linear-gradient(135deg, #c9302c, #a02521) !important;
    transform: translateY(-1px);
}

/* Stones / mastery tiny images (myprofile.php inline sizes them) */
.stone-img   { width: 30px; height: 30px; }
.mastery-img { width: 20px; height: 20px; }

/* myprofile.php's trailing <style> defines:
     h3 { border-bottom: 2px solid #555; padding-bottom: 5px; }
   That rule is UNSCOPED — it leaks to every h3 on the site. We
   counter-style the h3s that belong to OTHER systems so they
   don't inherit that border. (profile.php's h3s already come
   from profile_styles.php with their own border-bottom, which
   WINS over myprofile's #555 because profile_styles loads last
   on profile.php pages.) */
.content .quest-header h3,
.content .ql-topbar h3,
.content .quest-actions h3,
.content .quest-current-task h3,
.content .ql-result h3,
.content .profile-mastery h3,
.content .profile-supplies h3,
.content .profile-trophy h3,
.content .profile-description h3,
.content .profile-allies h3,
.content .profile-enemies h3 {
    border-bottom: none;
    padding-bottom: 0;
}


/* ===============================================================
   TRUSTEE.PHP  —  Trustee Management
   ---------------------------------------------------------------
   100% inline styles. The core layout is a 3-column CSS grid:
     <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; ...">
   Each column is a #333 card with inner #444 sub-panels.
   We target by inline-style signature because we can't edit PHP.
   --------------------------------------------------------------- */

/* Outer wrapper — #222 panel */
.content > div[style*="background: #222"][style*="min-height: 600px"] {
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    box-sizing: border-box;
    overflow: hidden;
}

/* Page title — "🛡️ Trustee Management" */
.content > div[style*="background: #222"] > h1[style*="color: #ff6600"] {
    font-size: 28px;
    letter-spacing: 1px;
    padding: 10px;
    text-shadow: 0 0 8px rgba(255, 102, 0, 0.4);
}

/* Success/error notices */
.content div[style*="background: #004400"][style*="border: 2px solid #00aa00"] {
    animation: trusteeGlow 1.8s ease-in-out infinite alternate;
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.25);
}
.content div[style*="background: #440000"][style*="border: 2px solid #aa0000"] {
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.25);
}
@keyframes trusteeGlow {
    from { box-shadow: 0 0 8px rgba(0, 255, 0, 0.2); }
    to   { box-shadow: 0 0 16px rgba(0, 255, 0, 0.45); }
}

/* The 3-column grid container — enforce grid display even if
   inline style is stripped by CSP. */
.content div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    display: grid !important;
    gap: 20px;
}

/* #333 cards */
.content div[style*="background: #333"][style*="border: 2px solid #666"][style*="border-radius: 10px"] {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transition: border-color 0.25s ease;
    box-sizing: border-box;
}
.content div[style*="background: #333"][style*="border: 2px solid #666"][style*="border-radius: 10px"]:hover {
    border-color: #ff6600 !important;
}

/* Inner #444 sub-panels */
.content div[style*="background: #444"][style*="border-radius: 8px"] {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

/* List rows (#555 cards inside scrollable lists) */
.content div[style*="background: #555"][style*="border-radius: 6px"] {
    transition: background-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
}
.content div[style*="background: #555"][style*="border-radius: 6px"]:hover {
    background: #666 !important;
    transform: translateX(2px);
}

/* Trustee page form inputs */
.content form input[name="trustee_name"] {
    min-height: 40px;
    padding: 10px 12px !important;
    font-family: inherit;
    background: #2a2a2a !important;
    color: #f5f5f5 !important;
    border: 1px solid #666 !important;
    border-radius: 5px !important;
}
.content form input[name="trustee_name"]:focus {
    outline: 2px solid #ff6600 !important;
    outline-offset: 1px;
    border-color: #ff6600 !important;
    box-shadow: 0 0 6px rgba(255, 102, 0, 0.35);
}

/* Trustee buttons with inline colors — normalise padding & tap target.
   We can't change the inline bg colors, but we can give them
   consistent min-height and font weight. */
.content form button[type="submit"][style*="background: #006600"],
.content form button[type="submit"][style*="background: #aa0000"],
.content form button[type="submit"][style*="background: #0066aa"] {
    min-height: 40px !important;
    padding: 8px 16px !important;
    border-radius: 5px !important;
    cursor: pointer;
    font-weight: bold !important;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.content form button[type="submit"][style*="background: #006600"]:hover,
.content form button[type="submit"][style*="background: #aa0000"]:hover,
.content form button[type="submit"][style*="background: #0066aa"]:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}
.content form button[type="submit"][style*="background: #aa0000"]:hover {
    /* Destructive action — red ring on hover */
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}

/* Scrollable lists */
.content div[style*="max-height: 200px"][style*="overflow-y: auto"],
.content div[style*="max-height: 300px"][style*="overflow-y: auto"],
.content div[style*="max-height: 150px"][style*="overflow-y: auto"] {
    scrollbar-width: thin;
    scrollbar-color: #666 #2a2a2a;
    border-radius: 6px;
    padding-right: 4px;
}

/* Security notice (orange-bordered warning block) */
.content div[style*="background: #442200"][style*="border: 2px solid #ff6600"] {
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(255, 102, 0, 0.2);
}
.content div[style*="background: #442200"] ul li {
    margin-bottom: 6px;
}

/* Quick-stats grid (3 columns) */
.content div[style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 16px;
}

/* Global button:hover rule from trustee.php's trailing <style>:
      button:hover { opacity: 0.8; transform: translateY(-1px); }
   This leaks to every button on the site. We restore opacity on
   buttons that already have their own hover effect. */
.quest-button:hover,
.farm-button:hover,
.action-button:hover,
.drop-button:hover,
.ql-btn:hover,
.nav-toggle-btn:hover,
.profile-actions button:hover,
.profile-actions input[type="submit"]:hover,
.attack-btn:hover,
.message-btn:hover,
.ally-btn:hover,
.enemy-btn:hover,
.remove-ally-btn:hover,
.remove-enemy-btn:hover {
    opacity: 1 !important;
}



/* =================================================================
   7e. HOME / SHOP / RECRUIT / PP PAYOUT PAGES
   -----------------------------------------------------------------
   Four more pages whose <style> blocks are emitted AFTER
   footer.php. On early-error paths the styles never reach the
   browser. We mirror them here so the pages paint from <head>.

     • index.php                   — Home feed (announcements,
                                     shoutbox, battlestones, rankings)
     • shop.php                    — Attack/Defense/Trophy shop table
     • page.php                    — Recruitment landing page (used
                                     when visitors arrive via a
                                     referral link)
     • preferred_player_payout.php — VIP monthly payout request form

   Shared concerns:
     - .error-message / .success-message — each of these three
       pages (index implicit, page.php, pp_payout) defines them
       DIFFERENTLY. We keep the §7d profile_styles.php version as
       the BARE definition, and scope page.php's fancy gradient
       variant to `.error-container .error-message` (which only
       page.php emits). pp_payout's simpler variant piggybacks on
       the §7d bare definition — close enough visually.
     - Each page's own `<style>` block still loads last on
       successful renders, so my definitions are the fallback only.
   ================================================================= */
/* ===============================================================
   INDEX.PHP  —  Home / Landing
   --------------------------------------------------------------- */
.home-container {
    margin: 20px auto;
    padding: 20px;
    width: 90%;
    max-width: 1200px;
    background-color: #333;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: #ccc;
    box-sizing: border-box;
}

.attention-box {
    background-color: #500;
    border: 2px solid #f00;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-sizing: border-box;
}
.attention-box h4 {
    color: #f00;
    margin-top: 0;
}

/* Highlight helpers — colour swatches used in announcements */
.highlight        { color: yellow;  font-weight: bold; }
.highlight-red    { color: red;     font-weight: bold; }
.highlight-green  { color: #00ff00; font-weight: bold; }
.highlight-yellow { color: #ffff00; font-weight: bold; }
.highlight-black  {
    color: #ffffff;
    background-color: #000;
    padding: 2px 5px;
    font-weight: bold;
}

.game-info {
    margin-bottom: 20px;
    line-height: 1.7;
}

.content-section {
    margin-bottom: 30px;
}
.section-title {
    background-color: #444;
    color: #ccc;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 1.3em;
}
.section-content {
    background-color: #222;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}

.news-frame {
    width: 100%;
    height: 400px;
    border: 1px solid #555;
    border-radius: 5px;
    background: #222;       /* show panel colour before iframe loads */
    box-sizing: border-box;
}

.battlestone-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: #222;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    /* Native scrollbar restyle — lighter than custom JS scrollers */
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}

.shoutbox-container {
    max-height: 300px;
    overflow-y: auto;
    background-color: #222;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #555 #222;
}
.shout-message {
    margin-bottom: 10px;
    padding: 8px;
    background-color: #333;
    border-radius: 3px;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.shout-message a {
    color: #7fc4ff;
    font-weight: bold;
}
.shout-message a:hover {
    color: #ffcc00;
}

.shout-post-link {
    text-align: center;
    margin-top: 10px;
}

/* Server stats / online counter (emitted by battlestones-chart.php) */
.server-stats {
    margin-top: 15px;
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
    text-align: center;
    font-size: 1.2em;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2);
    border: 1px solid #444;
}
.players-online {
    text-align: center;
    font-size: 1.2em;
    background-color: #222;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #444;
    box-shadow: 0 0 5px rgba(255, 255, 0, 0.2);
}

/* Rankings — three side-by-side columns per class */
.rankings-section {
    margin-top: 30px;
}
.rankings-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;            /* allow wrap BEFORE mobile kicks in */
    gap: 15px;
    margin-bottom: 20px;
}
.ranking-column {
    flex: 1 1 220px;            /* was `width: 30%` — fluid minimum */
    min-width: 0;
    background-color: #222;
    padding: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}
.ranking-column h3,
.ranking-column h4 {
    color: #ffcc00;
    margin-top: 0;
    margin-bottom: 10px;
}

.ranking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ranking-table tr:nth-child(even) {
    background-color: #333;
}
.ranking-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #444;
    vertical-align: top;
}
.ranking-table td:last-child {
    text-align: right;
    white-space: nowrap;
    color: #ffcc00;
    font-weight: bold;
}
.ranking-table a {
    color: #4af;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.ranking-table a:hover {
    text-decoration: underline;
    color: #ffcc00;
}

.class-title {
    background-color: #2a2a2a;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
    border-left: 4px solid #ffcc00;
}


/* ===============================================================
   SHOP.PHP  —  Attack / Defense / Trophy purchases
   --------------------------------------------------------------- */
.shop-container {
    margin: 20px auto;
    width: 90%;
    max-width: 1100px;
    background-color: #2c2c2c;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}
.shop-title {
    text-align: center;
    color: #f5f5f5;
    margin-bottom: 20px;
    font-size: 2em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.shop-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 4px;
}
.shop-tab {
    padding: 10px 20px;
    margin: 0 5px;
    background: linear-gradient(to bottom, #444, #333);
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px 5px 0 0;
    transition: all 0.3s;
    font-weight: bold;
    min-height: 40px;
    line-height: 20px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(255, 204, 0, 0.35);
}
.shop-tab:hover {
    background: linear-gradient(to bottom, #555, #444);
    transform: translateY(-2px);
    color: #ffffff;
}
.shop-tab.active {
    background: linear-gradient(to bottom, #990000, #cc0000);
    font-weight: bold;
    color: #ffffff;
}

.user-money {
    text-align: right;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #ffcc00;
    font-weight: bold;
}

.shop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
    margin-bottom: 20px;
}
.shop-header {
    background: linear-gradient(to bottom, #444, #333);
    color: #f5f5f5;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    border: 1px solid #555;
    font-size: 12px;
}
.shop-row {
    transition: background-color 0.3s;
}
.shop-row:hover {
    background-color: #383838;
}
.shop-row:nth-child(even) {
    background-color: #333;
}
.shop-cell {
    padding: 8px;
    text-align: center;
    border: 1px solid #555;
    vertical-align: middle;
}

.sell-price {
    color: #ffaa00;
    font-weight: bold;
}

/* .item-image (shop thumbnails). Distinct from profile .item-pic */
.item-image {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}
.item-image:hover {
    transform: scale(1.1);
}
.item-name {
    font-weight: bold;
    color: #f5f5f5;
    font-size: 11px;
}

.shop-input {
    width: 50px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #666;
    text-align: center;
    background-color: #444;
    color: #f5f5f5;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
}
.shop-input:focus {
    outline: 2px solid #ffcc00;
    outline-offset: 1px;
    border-color: #ffcc00;
}

.shop-button {
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 11px;
    min-height: 34px;
    font-family: inherit;
    box-sizing: border-box;
}
.buy-button {
    background: linear-gradient(to bottom, #990000, #cc0000);
}
.buy-button:hover {
    background: linear-gradient(to bottom, #cc0000, #ff0000);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}
.sell-button {
    background: linear-gradient(to bottom, #cc6600, #ff8800);
}
.sell-button:hover {
    background: linear-gradient(to bottom, #ff8800, #ffaa00);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    color: #ffffff;
}
.shop-button:disabled {
    background: linear-gradient(to bottom, #777, #555);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
}

/* .shop-error / .shop-success — distinct from the generic
   .error-message / .success-message in §7d (shop uses coloured
   tint; generic uses solid border). Both coexist fine. */
.shop-error {
    background-color: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff0000;
    color: #ff6666;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: center;
}
.shop-success {
    background-color: rgba(0, 255, 0, 0.1);
    border: 1px solid #00cc00;
    color: #66ff66;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    text-align: center;
}

.purchase-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.shop-guide {
    background-color: #333;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    color: #ccc;
    border-left: 4px solid #990000;
    box-sizing: border-box;
    line-height: 1.6;
}
.shop-guide h3 {
    color: #ffcc00;
    margin-top: 0;
    border-bottom: none !important;      /* defend against myprofile's h3 leak */
    padding-bottom: 0 !important;
}
.shop-guide ul {
    margin: 10px 0;
    padding-left: 20px;
}
.shop-guide li {
    margin-bottom: 6px;
}

/* shop.php ships its own 768px mobile block. We mirror it in §8
   for error-path protection. */


/* ===============================================================
   PAGE.PHP  —  Recruitment Landing Page
   ---------------------------------------------------------------
   Note: page.php has a LIGHT theme (white/grey feature cards on
   dark navy hero). That's intentional — it's designed for
   prospective players who may not be logged in. We preserve the
   original treatment exactly. Most rules mirrored verbatim.
   --------------------------------------------------------------- */
.recruitment-container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

.hero-section {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 15px;
    margin-bottom: 30px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="swords" patternUnits="userSpaceOnUse" width="20" height="20"><path d="M10 2L18 10L10 18L2 10Z" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23swords)"/></svg>') repeat;
    opacity: 0.1;
    pointer-events: none;
}

.main-headline {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #ffd700;                    /* fallback for no bg-clip support */
    position: relative;
    z-index: 1;
}
.game-description {
    font-size: 1.3em;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* Mentor profile block */
.mentor-section {
    background: linear-gradient(135deg, #2d2d44 0%, #3e3e5c 100%);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}
.mentor-profile {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 25px;
}
.mentor-avatar {
    width: 120px;
    height: 120px;
    border-radius: 15px;
    border: 4px solid #ffd700;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
    transition: transform 0.3s ease;
    object-fit: cover;
}
.mentor-avatar:hover {
    transform: scale(1.05);
}
.mentor-info { flex: 1; min-width: 0; }
.mentor-welcome {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: #ffffff;
    line-height: 1.3;
}
.mentor-name {
    color: #ffd700;
    font-weight: bold;
}
.mentor-stats {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}
.stat-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 8px;
    border-left: 4px solid #ffd700;
    flex: 0 1 auto;
}
.stat-label {
    display: block;
    font-size: 0.9em;
    opacity: 0.8;
}
.stat-value {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffd700;
}

.recruitment-benefits h3 {
    font-size: 1.5em;
    color: #ffd700;
    margin-bottom: 15px;
    border-bottom: none !important;       /* defend vs myprofile h3 leak */
    padding-bottom: 0 !important;
}
.benefit-intro {
    font-size: 1.1em;
    margin-bottom: 20px;
    line-height: 1.6;
}
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.benefits-list li {
    padding: 12px 0;
    font-size: 1.1em;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}
.benefit-icon {
    font-size: 1.3em;
    min-width: 30px;
    flex-shrink: 0;
}

/* Game features (LIGHT panels on page.php — intentional) */
.game-features {
    margin-bottom: 40px;
}
.game-features h3 {
    text-align: center;
    font-size: 2.2em;
    color: #1a1a2e;
    margin-bottom: 30px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}
.feature-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.feature-card:hover {
    transform: translateY(-5px);
    border-color: #ffd700;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.feature-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
}
.feature-card h4 {
    font-size: 1.3em;
    color: #1a1a2e;
    margin-bottom: 10px;
}
.feature-card p {
    color: #555;
    line-height: 1.6;
}

/* Reward notices (green gradient) */
.reward-notice,
.mentor-reward-notice {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #ffffff;
    padding: 15px 20px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
    line-height: 1.5;
}

/* Signup CTA section (dark navy) */
.signup-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    margin-top: 30px;
    box-sizing: border-box;
}
.signup-section h3 {
    font-size: 2.2em;
    color: #ffd700;
    margin-bottom: 15px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.signup-description {
    font-size: 1.2em;
    margin-bottom: 30px;
    line-height: 1.6;
    opacity: 0.95;
}
.recruitment-form {
    margin-bottom: 30px;
}

.cta-button {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #1a1a2e;
    border: none;
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    min-width: 300px;
    min-height: 44px;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.6);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}
.cta-button:active {
    transform: translateY(-1px);
}
.button-text {
    display: block;
    font-size: 1.2em;
}
.button-subtext {
    display: block;
    font-size: 0.9em;
    opacity: 0.8;
    margin-top: 2px;
}

.next-steps {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
}
.next-steps h4 {
    color: #ffd700;
    font-size: 1.3em;
    margin-bottom: 15px;
}
.steps-list {
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
    padding-left: 20px;
}
.steps-list li {
    padding: 8px 0;
    font-size: 1.1em;
    line-height: 1.5;
}

/* page.php's error treatment is DIFFERENT from §7d .error-message.
   Scope via .error-container so only page.php's fancy variant
   activates here, leaving the bare .error-message alone on other
   pages. */
.error-container {
    max-width: 600px;
    margin: 50px auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0 15px;
}
.error-container .error-message {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(220, 53, 69, 0.3);
    border: none;                         /* override §7d bare border */
    font-size: 1em;
    max-width: none;
    margin: 0;
}
.error-container .error-message h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    color: #ffffff;
}
.error-container .error-message p {
    margin: 10px 0;
    line-height: 1.6;
}
.error-cta {
    display: inline-block;
    background: #ffffff;
    color: #dc3545;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: all 0.3s ease;
    min-height: 44px;
    line-height: 20px;
    box-sizing: border-box;
}
.error-cta:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    color: #dc3545;
}

/* Page-load animation (disabled under reduced-motion; see below) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.recruitment-container > * {
    animation: fadeInUp 0.6s ease-out forwards;
}
.recruitment-container > *:nth-child(2) { animation-delay: 0.1s; }
.recruitment-container > *:nth-child(3) { animation-delay: 0.2s; }
.recruitment-container > *:nth-child(4) { animation-delay: 0.3s; }


/* ===============================================================
   PREFERRED_PLAYER_PAYOUT.PHP
   ---------------------------------------------------------------
   Most of this page reuses CLASSES from UIRenderer's inline block
   (.content, .stattabletitle, .buff-section, .buff-heading,
   .buff-active) plus our own .pp-member-badge, .pp-buff-heading.
   The only truly unique thing is the payout-calculation table,
   which uses inline styles for its cells. We target those via
   inline-attribute selectors.

   pp_payout's own trailing <style> defines .error-message and
   .success-message with its own colours. Those load last on
   successful renders and override our §7d versions — which is
   fine, they're visually similar enough. For error-path
   rendering, §7d's bare versions are the fallback.
   --------------------------------------------------------------- */

/* Payout-calculation table (header + data rows) — inline styles
   set backgrounds and borders. Target inline-style footprint.
   Inside the .buff-section wrapper they can't hit anything else. */
.buff-section table[style*="border-collapse: collapse"] {
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    width: 100%;
}
.buff-section table[style*="border-collapse: collapse"] tr[style*="background-color: #333333"] {
    background-color: #3a3a3a !important;
}
.buff-section table[style*="border-collapse: collapse"] tr[style*="background-color: #222222"] {
    background-color: #262626 !important;
}
.buff-section table[style*="border-collapse: collapse"] tr[style*="background-color: #222222"]:hover {
    background-color: #2e2e2e !important;
}
.buff-section table[style*="border-collapse: collapse"] td[style*="padding: 5px"] {
    padding: 8px 10px !important;
    vertical-align: middle;
    border-color: #555 !important;
}
.buff-section table[style*="border-collapse: collapse"] a {
    color: #7fc4ff;
}
.buff-section table[style*="border-collapse: collapse"] a:hover {
    color: #ffcc00;
}

/* "Request Monthly Payout" inline-styled submit button.
   We can't change the inline colour but can add tap-target height
   and consistent interaction polish. */
input[type="submit"][value="Request Monthly Payout"][style*="background-color: #990000"] {
    min-height: 44px !important;
    border-radius: 6px !important;
    border: none !important;
    font-family: inherit;
    transition: filter 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
}
input[type="submit"][value="Request Monthly Payout"][style*="background-color: #990000"]:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(153, 0, 0, 0.5);
}
input[type="button"][value="Request Monthly Payout"][disabled] {
    min-height: 44px;
    border-radius: 6px;
    border: none;
    font-family: inherit;
    opacity: 0.7;
}


/* ===============================================================
   §7e  —  A11y / motion top-ups across these four pages
   --------------------------------------------------------------- */
/* Focus rings for interactive elements lacking them */
.shop-tab:focus-visible,
.shop-button:focus-visible,
.cta-button:focus-visible,
.error-cta:focus-visible,
.ranking-table a:focus-visible,
.shout-message a:focus-visible {
    outline: 3px solid #ffd700;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.25);
}

/* Honour prefers-reduced-motion. Strip page.php's fadeInUp load
   animation (§7d already handles it globally but we specifically
   neutralise the per-child animation-delay chain). */
@media (prefers-reduced-motion: reduce) {
    .recruitment-container > *,
    .recruitment-container > *:nth-child(2),
    .recruitment-container > *:nth-child(3),
    .recruitment-container > *:nth-child(4) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mentor-avatar:hover,
    .feature-card:hover,
    .cta-button:hover,
    .shop-tab:hover,
    .shop-button:hover,
    .item-image:hover {
        transform: none !important;
    }
}

/* Forced-colors fallbacks */
@media (forced-colors: active) {
    .home-container,
    .attention-box,
    .section-content,
    .ranking-column,
    .shop-container,
    .shop-guide,
    .recruitment-container,
    .hero-section,
    .mentor-section,
    .signup-section,
    .feature-card,
    .error-container .error-message {
        border: 1px solid CanvasText;
    }
    .shop-tab,
    .shop-button,
    .cta-button,
    .error-cta {
        border: 1px solid ButtonText;
    }
}



/* =================================================================
   8. RESPONSIVE DESIGN  —  AUTO-DETECT PC vs MOBILE
   ================================================================= */
@media (max-width:1050px){table.status-bar,table.status-bar+table,table[width="1050"]:not(.status-bar){width:100%!important;max-width:100%!important}.status-bar td.bar_td{padding:3px 6px;font-size:11px}table[width="525"]{max-width:100%!important}}@media (min-width:769px) and (max-width:900px){.content div[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important}.content div[style*="grid-template-columns: 1fr 1fr 1fr"]>div:last-child{grid-column:1/-1}}@media (max-width:768px){table.status-bar+table,table.status-bar+table>tbody,table.status-bar+table>tbody>tr,table[width="1050"]:not(.status-bar),table[width="1050"]:not(.status-bar)>tbody,table[width="1050"]:not(.status-bar)>tbody>tr{display:block!important;width:100%!important;max-width:100%!important}table.status-bar+table>tbody>tr>td,table.status-bar+table>tbody>tr>td[width="15%"],table.status-bar+table>tbody>tr>td[width="85%"],table[width="1050"]:not(.status-bar)>tbody>tr>td,table[width="1050"]:not(.status-bar)>tbody>tr>td[width="15%"],table[width="1050"]:not(.status-bar)>tbody>tr>td[width="85%"]{display:block!important;width:100%!important;max-width:100%!important;min-height:auto!important;height:auto!important;box-sizing:border-box}table[width="1050"]:not(.status-bar) td{width:100%!important;max-width:100vw;box-sizing:border-box}table.status-bar{position:relative;display:block}table.status-bar>tbody,table.status-bar>tbody>tr,table.status-bar>tbody>tr>td{display:block;width:100%}table.status-bar td>table,table.status-bar td>table>tbody,table.status-bar td>table>tbody>tr{display:flex!important;flex-wrap:wrap!important;width:100%!important;justify-content:center;gap:4px}.status-bar td.bar_td{display:inline-flex!important;align-items:center;border-right:none;border-bottom:1px solid rgba(255,255,255,.15);padding:6px 10px;flex:0 1 auto;min-height:32px}.status-bar .bar_name{flex:1 1 100%!important;text-align:center;border-bottom:2px solid rgba(255,255,255,.25);margin-bottom:4px}.status-bar .player-stats-container .buff-dropdown{position:fixed!important;top:auto!important;bottom:10px!important;left:5%!important;right:5%!important;transform:none!important;width:auto!important;max-width:90vw!important;max-height:60vh;overflow-y:auto}#masterdiv{display:none!important}#masterdiv-mobile{display:none;position:fixed;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:85vw!important;max-width:320px!important;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;z-index:15000!important;overflow-y:auto!important;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;background-color:#1a1a1a;box-shadow:4px 0 20px rgba(0,0,0,.7);padding:56px 0 24px 0;box-sizing:border-box;isolation:isolate}body.nav-open #masterdiv-mobile{display:block!important}#masterdiv-mobile[hidden]{display:none}body.nav-open #masterdiv-mobile[hidden]{display:block!important}#masterdiv-mobile .mm-section{margin:0 8px 12px 8px;border-radius:6px;overflow:hidden}#masterdiv-mobile .mm-section.mm-extra{margin-top:18px;border-top:1px solid #333;padding-top:12px}#masterdiv-mobile .mm-title{margin:0;padding:12px 14px;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(to right,#6a0000,#8a0000);letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 2px 4px rgba(0,0,0,.4);border-bottom:2px solid #900}#masterdiv-mobile .mm-link{display:block;padding:14px 18px;color:gold;background-color:#222;font-size:15px;font-weight:700;text-decoration:none;border-bottom:1px solid #2c2c2c;min-height:48px;line-height:20px;box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,215,0,0.35);transition:background-color .15s ease}#masterdiv-mobile .mm-link:last-child{border-bottom:none}#masterdiv-mobile .mm-link:active{background-color:#3a3a3a;color:#fff}#masterdiv-mobile .mm-link b{color:inherit;font-weight:inherit}#masterdiv-mobile .mm-link .notification-count,#masterdiv-mobile .mm-link .territory-count{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-left:6px;background:#f30;color:#fff}#masterdiv-mobile .mm-external{color:#fff;text-align:center;background:#111;border:1px solid #444;border-radius:6px;margin:6px 8px;padding:14px}@media (hover:hover){#masterdiv-mobile .mm-link:hover{background-color:#333;color:#fff}}body.nav-open{position:fixed!important;left:0;right:0;width:100%;overflow:hidden!important}body.nav-open .buff-dropdown{display:none!important}body.nav-open table.status-bar{position:static!important;z-index:auto!important}table[width="525"]{height:auto!important}table.status-bar+table td[width="15%"],table.status-bar+table td[width="85%"],table[width="1050"]:not(.status-bar) td[width="15%"],table[width="1050"]:not(.status-bar) td[width="85%"]{padding:8px!important}table.status-bar+table>tbody>tr>td[width="15%"]>center>form,table[width="1050"]:not(.status-bar)>tbody>tr>td[width="15%"]>center>form{display:block;max-width:320px;margin:12px auto;padding:16px;background:rgba(0,0,0,.3);border-radius:8px;border:1px solid #444;box-sizing:border-box}table.status-bar+table>tbody>tr>td[width="15%"]>center>form input[type=email],table.status-bar+table>tbody>tr>td[width="15%"]>center>form input[type=password],table[width="1050"]:not(.status-bar)>tbody>tr>td[width="15%"]>center>form input[type=email],table[width="1050"]:not(.status-bar)>tbody>tr>td[width="15%"]>center>form input[type=password]{width:100%;padding:10px 12px;margin:4px 0 8px 0;box-sizing:border-box;background:#2a2a2a!important;color:#f5f5f5!important;border:1px solid #555!important;border-radius:5px}table.status-bar+table>tbody>tr>td[width="15%"]>center>form input[type=submit],table[width="1050"]:not(.status-bar)>tbody>tr>td[width="15%"]>center>form input[type=submit]{width:100%;padding:12px 16px;min-height:44px;background:linear-gradient(135deg,#6a0000,#8a0000);color:#fff!important;border:none!important;border-radius:6px;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4)}.content table[border="2"],.content table[border="2"]>tbody,.content table[border="2"]>tbody>tr,.content table[border="2"]>tbody>tr>td{display:block!important;width:100%!important;max-width:100%!important;box-sizing:border-box}.content table[border="2"] td[width="500"]{text-align:center;padding:10px}.content table[border="2"] td[width="250"]{border-bottom:1px solid #444;padding:12px 8px!important}.content div[style*="height:250px"][style*="overflow-y:auto"],.content div[style*="height:60px"][style*="overflow-y:auto"]{max-width:100%!important;width:100%!important}#east-link-text,#north-link-text,#south-link-text,#west-link-text{min-width:72px;min-height:48px;font-size:15px;margin:6px 4px}.ql-table td,.ql-table th{padding:8px}.td-task{max-width:130px}.ql-topbar{flex-direction:column;align-items:flex-start}.ql-wrap{padding:10px 6px}.content table[border="2"] img{max-height:200px;width:auto;margin:0 auto;display:block}.stat-row{flex-direction:column;align-items:flex-start;gap:2px}.content div[style*="background-color: #333"][style*="border-radius: 10px"]>div[style*="display: flex"][style*="justify-content: space-between"]>div[style*="width: 25%"],.content div[style*="background-color: #333"][style*="border-radius: 10px"]>div[style*="display: flex"][style*="justify-content: space-between"]>div[style*="width: 70%"]{width:100%!important}.content table[style*="background-color: #444"][style*="border-radius: 10px"]{font-size:13px}.content table[style*="background-color: #444"][style*="border-radius: 10px"] td{padding:10px 8px!important}.profile-supplies table td,.profile-supplies table tr td[width="25%"]{display:inline-block;width:47%!important;box-sizing:border-box}.content div[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:1fr!important;gap:14px!important}.content>div[style*="background: #222"][style*="min-height: 600px"]{min-height:0!important;padding:12px!important}.content>div[style*="background: #222"]>h1{font-size:22px!important;margin-bottom:16px!important}.content div[style*="background: #333"][style*="border: 2px solid #666"][style*="border-radius: 10px"]{padding:14px!important}.content form[style*="display: flex"][style*="gap: 10px"]{flex-direction:column!important;align-items:stretch!important}.content form[style*="display: flex"][style*="gap: 10px"] input[type=text]{width:100%!important;flex:none!important}.content form[style*="display: flex"][style*="gap: 10px"] button{width:100%!important}.content div[style*="background: #555"][style*="display: flex"][style*="justify-content: space-between"]{flex-direction:column!important;align-items:stretch!important;gap:10px!important}.content div[style*="background: #555"][style*="display: flex"][style*="justify-content: space-between"] form{width:100%}.content div[style*="background: #555"][style*="display: flex"][style*="justify-content: space-between"] button{width:100%!important}.content div[style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important;gap:10px!important}.home-container{width:96%!important;max-width:96vw;padding:12px!important}.rankings-container{display:flex!important;flex-direction:column!important;gap:12px!important}.ranking-column{flex:1 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:12px!important;box-sizing:border-box}.news-frame{height:300px!important}.section-title{font-size:1.1em;padding:8px 10px!important}.shoutbox-container{max-height:240px!important}.battlestone-container{max-height:240px!important}.shop-container{width:96%;padding:10px}.shop-table{font-size:12px}.shop-cell,.shop-header{padding:6px 3px}.item-image{width:35px;height:35px}.shop-input{width:45px;padding:4px}.shop-button{padding:6px 10px;font-size:11px;min-height:34px}.shop-tabs{gap:2px}.shop-tab{padding:8px 12px;margin:0 2px;font-size:13px}.user-money{text-align:center;font-size:1em}.main-headline{font-size:2.5em}.mentor-profile{flex-direction:column;text-align:center}.mentor-stats{justify-content:center}.features-grid{grid-template-columns:1fr}.cta-button{min-width:auto;width:100%;padding:18px 24px}.mentor-section,.signup-section{padding:20px}.hero-section{padding:30px 15px}.game-description{font-size:1.1em}.game-features h3,.signup-section h3{font-size:1.6em}.recruitment-container{padding:12px}.buff-section table[style*="border-collapse: collapse"]{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:12px}.buff-section table[style*="border-collapse: collapse"] td{padding:6px 8px!important}input[type=button][value="Request Monthly Payout"],input[type=submit][value="Request Monthly Payout"]{width:100%!important;max-width:320px}}@media (max-width:480px){.status-bar td.bar_td{font-size:10px;padding:5px 7px}.quest-container{padding:12px;margin:10px 6px}.quest-header h2{font-size:20px}.quest-description{font-size:13px;padding:10px}.fight-result-multi{max-width:98%;padding:14px;margin:12px 4px}.battle-outcome{font-size:20px}.result-title{font-size:18px}.exp-gained,.money-gained{font-size:16px}.menuOut,.menuOver{font-size:13px!important;padding:10px!important}.submenu td{padding:12px 8px!important;font-size:13px}.content table[border="2"] td[width="500"]{font-size:15px;padding:8px}.content div[style*="width:450px"][style*="height:450px"]{max-width:100vw!important;overflow:auto;-webkit-overflow-scrolling:touch}.ql-sgrid>div{min-width:60px;padding:6px 10px}.sv{font-size:.95rem}.sl{font-size:.72rem}.ql-result{padding:12px}.ql-topbar h2{font-size:1.2rem}.profile-header h1{font-size:1.4em}.profile-table td{padding:6px 10px;font-size:12px}.profile-table td:first-child{width:45%}.profile-description h2,.profile-equipment h2,.profile-mastery h2,.profile-supplies h2,.profile-trophy h2{font-size:1.1em}.medal-grid,.supplies-grid,.trophy-grid{gap:8px;justify-content:center}.medal-item,.supply-item,.trophy-item{width:56px;height:56px}.relation-item{width:70px}.relation-pic{width:56px;height:56px}.content div[style*="background-color: #333"][style*="border-radius: 10px"] .profile-supplies table td{width:100%!important;display:block}.content>div[style*="background: #222"]>h1 img{display:none}.content>div[style*="background: #222"]>h1{font-size:19px!important}.drop-button{padding:12px 16px!important;font-size:13px!important}.main-headline{font-size:2em}.game-description{font-size:1em}.game-features h3,.signup-section h3{font-size:1.3em}.signup-section{padding:20px 14px}.hero-section{padding:24px 12px;border-radius:10px}.mentor-section{padding:16px;border-radius:10px}.mentor-avatar{width:90px;height:90px}.mentor-welcome{font-size:1.3em}.feature-card{padding:18px}.cta-button{padding:14px 18px;font-size:1em}.button-text{font-size:1.05em}.shop-title{font-size:1.5em}.shop-table{font-size:11px}.shop-cell,.shop-header{padding:5px 2px}.shop-input{width:40px}.shop-button{font-size:10px;padding:5px 8px}.ranking-column{padding:10px}.ranking-table{font-size:12px}.ranking-table td{padding:4px 6px}.news-frame{height:240px}}@media (max-width:600px){.quest-content{flex-direction:column}.quest-image img{max-width:100%;max-height:180px;width:100%;object-fit:cover}.quest-buttons{flex-direction:column;gap:10px}.quest-button{width:100%;text-align:center}.mob-kill-buttons{flex-direction:column}.mob-farm-form{display:block}.farm-button{width:100%;min-height:44px}}
/* =================================================================
   8b. HAMBURGER MENU TOGGLE
   ================================================================= */
.nav-toggle-btn,.nav-toggle-label{display:none;position:fixed;top:8px;left:8px;z-index:20000;width:44px;height:44px;padding:0;background:#470400;color:#fff;border:2px solid maroon;border-radius:6px;font-size:22px;line-height:40px;text-align:center;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.5);-webkit-tap-highlight-color:rgba(255,215,0,0.35)}.nav-toggle-btn:focus-visible,.nav-toggle-btn:hover,.nav-toggle-label:focus-visible,.nav-toggle-label:hover{background:#6a0000;outline:3px solid #ffd700;outline-offset:2px}@media (max-width:768px){.nav-toggle-btn,.nav-toggle-label{display:block}body.nav-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:14000;pointer-events:auto}}
/* =================================================================
   9. ACCESSIBILITY  —  WCAG 2.2 AA
   ================================================================= */
#east-link-text:focus-visible,#north-link-text:focus-visible,#south-link-text:focus-visible,#west-link-text:focus-visible,.bar_div:focus-visible,.farm-button:focus-visible,.menuOut:focus-visible,.notification-indicator:focus-visible,.ql-btn:focus-visible,.quest-button:focus-visible,.submenu td:focus-visible,[tabindex]:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffd700!important;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,215,0,.25)}dd,dt,li,p{line-height:1.5}::selection{background:gold;color:#000}.bar_div,.submenu td,a,button,input[type=submit]{min-height:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;scroll-behavior:auto!important}.fight-result-multi,.flashing-text,.flashing-text2,.flashing-text3,.item-farm,.notification-count,.notification-indicator,.outcome-text,.pp-member-badge,.ql-result,.target-item-found,.territory-count,.territory-raid-alert{animation:none!important}}@media (prefers-contrast:more){.bar_div,.menuOut,.submenu td,a,button{outline:1px solid currentColor}table.status-bar{border:2px solid #fff}.buff-dropdown,.notification-list,.ql-result,.quest-container{border-width:3px!important}}@media (forced-colors:active){.buff-dropdown,.fight-result-multi,.notification-list,.ql-result,.ql-table,.quest-container,table.status-bar{border:1px solid CanvasText}#east-link-text,#north-link-text,#south-link-text,#west-link-text,.farm-button,.menuOut,.menuOver,.ql-btn,.quest-button{border:1px solid ButtonText}}
/* =================================================================
  10. RESPONSIBLE GAMING NOTICE  (Casino pages)
   ================================================================= */
.responsible-gaming-notice{background:rgba(241,196,15,.12);border:1px solid #f1c40f;border-left:4px solid #f1c40f;padding:12px 16px;margin:16px auto;max-width:800px;border-radius:6px;color:#f1c40f;font-size:13px;text-align:center;line-height:1.5;box-sizing:border-box}.responsible-gaming-notice a{color:#fff!important;text-decoration:underline;font-size:inherit}.responsible-gaming-notice a:hover{color:gold!important}
/* =================================================================
  11. PRINT STYLES
  ================================================================= */
@media print{#east-link-text,#masterdiv,#masterdiv-mobile,#north-link-text,#south-link-text,#west-link-text,.adbytes-display-ad,.farm-button,.menu_bar,.nav-toggle-btn,.nav-toggle-label,.notification-indicator,.notification-list,.ql-btn,.quest-button,.responsible-gaming-notice,table.status-bar{display:none!important}body{background:#fff!important;color:#000!important}a{color:#000!important;text-decoration:underline}.fight-result-multi,.ql-result,.ql-table,.quest-container{background:#fff!important;color:#000!important;border:1px solid #000!important;break-inside:avoid}}
/* =================================================================
  12. SAMSUNG INTERNET & OLDER WEBKIT HARDENING
   -----------------------------------------------------------------
   Last-resort fixes that keep rare legacy mobile browsers honest.
   None of these should affect modern Chrome/Firefox/Safari.
   ================================================================= */
@supports (-webkit-touch-callout:none){#masterdiv-mobile{-webkit-transform:translateZ(0)}}@media (min-width:481px) and (max-width:900px){.status-bar td.bar_td{font-size:11px;padding:4px 8px}}@supports (padding:max(0px)){body.nav-open #masterdiv-mobile{padding-top:max(56px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}.nav-toggle-btn{top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left))}}
/* =================================================================
  13. IN-GAME PAGES — CONSOLIDATED STYLES
   -----------------------------------------------------------------
   Each of the following pages used to carry its own inline <style>
   block emitted AFTER header.php loads. That worked but created
   four problems:

     1. Duplicated class names with conflicting values
        (.error-message is rgba(255,0,0,0.2) in gym.php but
         #f44336 solid in message.php — same name, two looks).
     2. Mobile coverage varied: battle.php has a narrow mobile
        block, message.php & gods2.php have none, gym.php only
        handles the card grid (not the modal overlay).
     3. Inline styles in PHP are invisible to caching layers,
        meaning every page request re-downloads them.
     4. If the PHP page errors out before the <style> block is
        emitted (mob1.php bug), the page loads unstyled.

   Solution: every `.battle-*`, `.gym-*`, `.training-*`, `.modal`,
   `.raid-*`, `.message-*`, and `.challenge-*` class is defined
   here, in section 13, so all styling is authoritative from a
   single cached file. The inline <style> blocks in those PHP
   files are now redundant; they can either stay (harmless) or
   be stripped in a follow-up cleanup pass.

   Pages covered:
     • battle.php      (Arena/teams/live battle/replay)
     • gym.php         (Training cards + modal challenges)
     • message.php     (Inbox + compose form)
     • gods2.php       (Raid boss status grid)

   Shared building blocks defined here:
     • .page-container    generic dark card (used by all pages)
     • .page-header       title + subtitle block
     • .page-grid-*       responsive grid helpers
     • .page-btn          primary action button (unifies
                          .compose-button, .challenge-button,
                          .form-button, .train-btn)
     • .page-alert-*      unified success/error/info messages

   All @media (max-width: 768px) rules for these pages live in
   one consolidated block at the bottom of this section, so when
   a future page needs the same treatment you only touch one
   place — instead of scattering mobile fixes across 1000-line
   PHP files.
   ================================================================= */
.arena-log-container,.battle-arena-container,.battle-replay-container,.gym-container,.live-battle-container,.message-container,.page-container{margin:20px auto;padding:20px;width:95%;max-width:1000px;background-color:#333;color:#ccc;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.5);font-family:Helvetica,Arial,Tahoma,Verdana,sans-serif;box-sizing:border-box}.gym-header,.message-header,.page-header{text-align:center;margin-bottom:25px;padding:16px 18px;background:linear-gradient(135deg,#444,#555);border:1px solid #666;border-radius:8px;box-sizing:border-box}.gym-header h1{color:#fc0;font-size:2em;margin:8px 0;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.message-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:linear-gradient(135deg,#444,#555)}.message-title{color:#fc0;font-size:22px;margin:0;text-shadow:0 1px 2px rgba(0,0,0,.5)}.section-title{color:#fc0;margin:0 0 18px 0;border-bottom:2px solid #555;padding-bottom:10px;font-size:1.5em;text-shadow:0 1px 2px rgba(0,0,0,.5)}.challenge-button,.compose-button,.delete-button,.form-button,.log-button,.log-link,.page-btn,.return-link,.train-btn,.view-replay-btn{display:inline-block;padding:10px 18px;min-height:40px;background:linear-gradient(to bottom,#444,#333);color:#fff;border:1px solid #555;border-radius:5px;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:background-color .25s ease,transform .2s ease,box-shadow .25s ease;text-align:center;line-height:1.3;font-family:inherit;box-sizing:border-box;vertical-align:middle}.challenge-button:hover,.compose-button:hover,.delete-button:hover,.form-button:hover,.log-button:hover,.log-link:hover,.page-btn:hover,.return-link:hover,.train-btn:hover,.view-replay-btn:hover{background:linear-gradient(to bottom,#555,#444);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.45);color:#fff}.challenge-button:active,.compose-button:active,.delete-button:active,.form-button:active,.log-button:active,.log-link:active,.page-btn:active,.return-link:active,.train-btn:active,.view-replay-btn:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.3)}.accept-btn,.money-btn,.page-btn-success{background:linear-gradient(to bottom,#4caf50,#388e3c)!important;border-color:#2e7d32}.accept-btn:hover,.money-btn:hover,.page-btn-success:hover{background:linear-gradient(to bottom,#66bb6a,#43a047)!important}.page-btn-info,.points-btn{background:linear-gradient(to bottom,#2196f3,#1976d2)!important;border-color:#1565c0}.page-btn-info:hover,.points-btn:hover{background:linear-gradient(to bottom,#42a5f5,#1e88e5)!important}.delete-button{background:linear-gradient(to bottom,#a33,#822)!important;border-color:#661717}.delete-button:hover{background:linear-gradient(to bottom,#c33,#a22)!important}.challenge-button:disabled,.disabled-btn,.page-btn:disabled,.train-btn:disabled{background:linear-gradient(to bottom,#666,#555)!important;color:#999!important;cursor:not-allowed!important;transform:none!important;box-shadow:0 1px 2px rgba(0,0,0,.2)!important;opacity:.7}.challenge-button:disabled:hover,.disabled-btn:hover,.page-btn:disabled:hover,.train-btn:disabled:hover{background:linear-gradient(to bottom,#666,#555)!important;transform:none!important}.error-message,.info-message,.page-alert,.success-message,.warning-message{padding:14px 16px!important;margin:0 0 18px 0!important;border-radius:6px!important;text-align:center!important;font-weight:700!important;line-height:1.45!important;box-sizing:border-box;border-left:4px solid transparent;font-size:14px}.error-message a,.info-message a,.page-alert a,.success-message a,.warning-message a{color:#fff;text-decoration:underline}.error-message a:hover,.info-message a:hover,.page-alert a:hover,.success-message a:hover,.warning-message a:hover{color:gold}.error-message{background-color:rgba(231,76,60,.2)!important;color:#ff7070!important;border:1px solid #e74c3c!important;border-left:4px solid #e74c3c!important}.success-message{background-color:rgba(46,204,113,.18)!important;color:#5eff7a!important;border:1px solid #2ecc71!important;border-left:4px solid #2ecc71!important}.info-message{background-color:rgba(52,152,219,.18);color:#7ec6f2;border:1px solid #3498db;border-left:4px solid #3498db}.warning-message{background-color:rgba(241,196,15,.18);color:#f5d254;border:1px solid #f1c40f;border-left:4px solid #f1c40f}.back-link{color:#4caf50;text-decoration:none;display:inline-block;margin-bottom:15px;padding:6px 0;font-size:14px}.back-link::before{content:"← ";font-weight:700}.back-link:hover{text-decoration:underline;color:#66bb6a}.message-form,.team-form{background-color:#2a2a2a;padding:18px;border-radius:8px;margin-top:18px;box-shadow:inset 0 0 10px rgba(0,0,0,.3);box-sizing:border-box}.message-form h3,.team-form h3{color:#fc0;margin:0 0 14px 0;font-size:1.15em}.form-group{margin-bottom:14px}.form-group label,.team-form label{display:block;margin-bottom:6px;font-weight:700;color:#ccc;font-size:13px}.form-group input,.form-group textarea,.team-form input[type=text]{width:100%;padding:10px 12px;background-color:#333;border:1px solid #555;border-radius:4px;color:#fff;font-family:inherit;font-size:14px;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus,.team-form input[type=text]:focus{border-color:#fc0;outline:0;box-shadow:0 0 0 3px rgba(255,204,0,.25)}.form-group textarea{min-height:140px;resize:vertical}.message-table{width:100%;border-collapse:collapse;margin-top:18px;background-color:#2a2a2a;border-radius:6px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.35)}.message-table td,.message-table th{padding:10px 12px;text-align:left;border-bottom:1px solid #444;vertical-align:top}.message-table th{background-color:#222;color:#fc0;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.message-table tr:last-child td{border-bottom:none}.message-table tr:hover{background-color:#3a3a3a}.message-table input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#ffcc00}.message-options{white-space:nowrap}.message-options a{margin-right:10px;color:#4caf50;text-decoration:none;font-size:13px;padding:3px 0}.message-options a:hover{color:#66bb6a;text-decoration:underline}.message-options a:last-child{color:#e57373;margin-right:0}.message-options a:last-child:hover{color:#ff8a80}.gym-info{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:24px}.info-card{flex:1 1 240px;background-color:#444;padding:14px 16px;border:1px solid #555;border-radius:8px;min-width:0;box-sizing:border-box}.info-card h3{color:#fc0;margin:0 0 8px 0;font-size:1.05em}.info-card p{margin:4px 0;line-height:1.5}.training-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:10px}.training-card{background-color:#444;border:1px solid #555;border-radius:10px;padding:20px;text-align:center;transition:transform .3s ease,box-shadow .3s ease;box-sizing:border-box}.training-card:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(255,204,0,.25)}.training-icon{font-size:2.75em;margin-bottom:12px;line-height:1}.training-card h3{color:#fc0;margin:0 0 10px 0;font-size:1.2em}.gains{color:#4caf50;font-weight:700;margin:10px 0;font-size:.95em}.training-buttons,.training-options{display:flex;flex-direction:column;gap:8px;margin-top:12px}.daily-limit-message{text-align:center;background-color:#444;padding:26px 18px;border-radius:10px;border:1px solid #555;margin:20px 0}.daily-limit-message h2{color:#fc0;margin-bottom:12px}.history-table{width:100%;border-collapse:collapse;background-color:#444;border-radius:8px;overflow:hidden;margin-top:10px}.history-table td,.history-table th{padding:10px 12px;text-align:left;border-bottom:1px solid #555}.history-table th{background-color:#555;color:#fc0;font-weight:700;font-size:13px}.history-table tr:hover{background-color:#555}.no-history{text-align:center;padding:18px;color:#888;font-style:italic}.training-history{margin-top:28px}.modal{display:none;position:fixed;inset:0;z-index:16000;background-color:rgba(0,0,0,.82);align-items:center;justify-content:center;padding:20px;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.modal[style*="display: block"],.modal[style*="display:block"]{display:flex!important}.modal-content{background-color:#333;border:1px solid #555;border-radius:10px;width:100%;max-width:600px;color:#ccc;margin:0;box-shadow:0 10px 30px rgba(0,0,0,.6);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow:hidden}.modal-header{background-color:#444;padding:16px 20px;border-bottom:1px solid #555;border-radius:10px 10px 0 0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.modal-header h2{color:#fc0;margin:0;font-size:1.25em}.modal .close{color:#aaa;font-size:28px;font-weight:700;cursor:pointer;transition:color .2s;line-height:1;padding:4px 8px;border-radius:4px;background:0 0;border:none;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}.modal .close:hover{color:#fff;background-color:rgba(255,255,255,.08)}.challenge-area{padding:24px 20px;min-height:260px;text-align:center;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}.challenge-area h3{color:#fc0;margin-top:0}.challenge-footer{background-color:#444;padding:14px 20px;border-top:1px solid #555;border-radius:0 0 10px 10px;text-align:center;flex-shrink:0}.score-display{font-size:1.15em;font-weight:700;color:#fc0}.challenge-progress{background-color:#555;border-radius:10px;padding:2px;margin:18px 0;width:100%;height:24px;box-sizing:border-box;overflow:hidden}.progress-bar{background-color:#4caf50;height:20px;border-radius:8px;width:0%;transition:none}.challenge-timer{font-size:1.3em;color:#fc0;margin:18px 0;font-weight:700}.green-zone{position:relative;height:24px;border-radius:10px;margin:10px 0;background:linear-gradient(to right,#666 40%,#4caf50 45%,#4caf50 55%,#666 60%)}.sequence-display{font-size:1.2em;margin:18px 0;min-height:80px;display:flex;align-items:center;justify-content:center}.sequence-number{font-size:3em;color:#fc0;text-shadow:0 0 12px rgba(255,204,0,.5);animation:pulse .5s}.input-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:300px;margin:18px auto}.input-buttons button{padding:14px 6px;font-size:1.2em;font-weight:700;background:linear-gradient(to bottom,#444,#333);color:#fc0;border:1px solid #555;border-radius:6px;cursor:pointer;min-height:48px;transition:all .2s ease}.input-buttons button:hover{background:linear-gradient(to bottom,#555,#444);transform:scale(1.05)}.input-buttons button:active{transform:scale(.95)}.math-problem{font-size:1.5em;margin:16px 0;min-height:60px}.math-input{font-size:1.3em!important;padding:10px 14px!important;width:180px;text-align:center;background-color:#fff!important;color:#000!important;border-radius:6px!important;border:2px solid #555!important;margin:10px auto;display:block}.math-input:focus{border-color:#fc0!important;outline:0}.debug-info{margin-top:18px;padding:10px;background:rgba(0,0,0,.4);border-radius:4px;font-size:11px;color:#888;text-align:left;font-family:monospace}.arena-image{display:block;margin:0 auto 20px;max-width:100%;height:auto;border-radius:6px;box-shadow:0 5px 15px rgba(0,0,0,.4)}.how-to-play-section{margin:18px 0;background-color:#2a2a2a;border-radius:8px;overflow:hidden;box-shadow:0 3px 6px rgba(0,0,0,.3)}.how-to-play-toggle{width:100%;background:linear-gradient(to right,#444,#333);color:#fc0;border:none;padding:14px 18px;font-size:1.05em;font-weight:700;cursor:pointer;transition:background .25s ease,color .25s ease;text-align:left;border-bottom:1px solid #555;font-family:inherit;min-height:44px}.how-to-play-toggle:hover{background:linear-gradient(to right,#555,#444);color:#fff}.how-to-play-content{background-color:#222;padding:0;max-height:0;overflow:hidden;transition:max-height .45s ease,padding .25s ease}.how-to-play-content.show{max-height:2000px;padding:18px}.guide-section{margin-bottom:18px;padding:14px 16px;background-color:#333;border-radius:6px;border-left:4px solid #fc0}.guide-section:last-child{margin-bottom:0}.guide-section h3{color:#fc0;margin:0 0 8px 0;font-size:1.1em}.guide-section p,.guide-section ul{margin:8px 0;line-height:1.5;color:#ccc}.guide-section ul{padding-left:22px}.guide-section li{margin-bottom:6px}.guide-section strong{color:#fff}.teams-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px 0;gap:20px}.team-column{flex:1 1 300px;background-color:#222;border-radius:8px;padding:15px;box-shadow:0 3px 6px rgba(0,0,0,.3);transition:transform .25s ease;box-sizing:border-box;min-width:0}.team-column:hover{transform:translateY(-3px)}.team-column h2{text-align:center;color:#fc0;margin:0 0 12px 0;border-bottom:2px solid #444;padding-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,.5);font-size:1.3em}.team-name{text-align:center;color:#f90;margin:12px 0;font-size:1.2em;text-shadow:0 1px 3px rgba(0,0,0,.7);font-weight:700}.team-members{list-style:none;padding:0;margin:12px 0;background-color:#2a2a2a;border-radius:5px;overflow:hidden}.team-members li{margin:0;border-bottom:1px solid #333;padding:9px 14px;transition:background-color .2s ease}.team-members li:last-child{border-bottom:none}.team-members li:hover{background-color:#333}.team-members a{color:#ccc;text-decoration:none;display:block}.team-members a:hover{color:#fff}.team-members .team-member{padding:9px 14px;border-bottom:1px solid #333;color:#ccc}.team-members .team-member:last-child{border-bottom:none}.battle-countdown{text-align:center;font-size:1.15em;color:#fc0;background-color:rgba(255,204,0,.1);border:1px solid rgba(255,204,0,.35);border-radius:6px;padding:12px;margin:15px 0;font-weight:700;animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,204,0,.4)}70%{box-shadow:0 0 0 10px rgba(255,204,0,0)}100%{box-shadow:0 0 0 0 rgba(255,204,0,0)}}.battle-info{margin:18px 0;text-align:center;padding:14px;background-color:#2a2a2a;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.3)}.battle-info p{margin:8px 0;line-height:1.5}.battle-launch{text-align:center;margin:24px 0}.battle-launch-button{display:inline-block;background:linear-gradient(to bottom,#f33,#c00)!important;color:#fff!important;padding:14px 28px!important;font-size:1.25em!important;font-weight:700;text-transform:uppercase;text-decoration:none;border:none;border-radius:5px;box-shadow:0 5px 15px rgba(255,0,0,.3);transition:all .3s ease;text-shadow:0 1px 3px rgba(0,0,0,.5);min-height:48px;box-sizing:border-box;letter-spacing:1px}.battle-launch-button:hover{background:linear-gradient(to bottom,#f66,red)!important;transform:translateY(-3px) scale(1.03);box-shadow:0 8px 20px rgba(255,0,0,.5)}.battle-launch-button:active{transform:translateY(0) scale(1)}.arena-log-button,.back-button{text-align:center;margin:18px 0}.arena-log-title,.replay-title{color:#fc0;text-align:center;margin:0 0 18px 0;font-size:1.6em;text-shadow:0 2px 4px rgba(0,0,0,.6)}.arena-battles-table{width:100%;border-collapse:collapse;margin:18px 0;box-shadow:0 3px 6px rgba(0,0,0,.35);border-radius:6px;overflow:hidden}.arena-battles-table td,.arena-battles-table th{padding:10px 12px;text-align:left}.arena-battles-table th{background:linear-gradient(to bottom,#333,#222);color:#fc0;text-shadow:0 1px 2px rgba(0,0,0,.5);border-bottom:2px solid #444;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.arena-battles-table tr{background-color:#2a2a2a;border-bottom:1px solid #333;transition:background-color .2s ease}.arena-battles-table tr:nth-child(2n){background-color:#252525}.arena-battles-table tr:hover{background-color:#333}.arena-battles-table tr:last-child{border-bottom:none}.team1-win{color:#f66;font-weight:700}.team2-win{color:#6cf;font-weight:700}.no-battles{text-align:center;margin:30px 0;color:#888;font-style:italic;padding:20px}.battle-title{text-align:center;color:#fc0;font-size:1.4em;margin:0 0 18px 0;text-shadow:0 2px 4px rgba(0,0,0,.6)}.battle-teams,.team-stats-container{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:18px;gap:18px}.battle-teams>.team,.team-stats{flex:1 1 280px;background-color:#2a2a2a;border-radius:8px;padding:14px;box-shadow:0 3px 8px rgba(0,0,0,.4);box-sizing:border-box;min-width:0}.team h3{text-align:center;margin:0 0 12px 0;padding-bottom:8px;border-bottom:1px solid #444;font-size:1.15em}.team1 h3,.team1-stats h3{color:#f66;text-shadow:0 0 8px rgba(255,102,102,.3)}.team2 h3,.team2-stats h3{color:#6cf;text-shadow:0 0 8px rgba(102,204,255,.3)}.versus,.vs{display:flex;align-items:center;justify-content:center;color:#fc0;font-size:1.6em;font-weight:700;text-shadow:0 2px 5px rgba(0,0,0,.7);flex:0 0 auto;padding:8px}.hp-bar-container{height:20px;background-color:#444;border-radius:10px;margin:10px 0;overflow:hidden;box-shadow:inset 0 0 5px rgba(0,0,0,.5);position:relative}.hp-bar{height:100%;border-radius:10px;transition:width .5s ease-out,background-color .5s ease}.team1-hp-bar{background:linear-gradient(to right,#f33,#f66);box-shadow:0 0 8px rgba(255,102,102,.5)}.team2-hp-bar{background:linear-gradient(to right,#39f,#6cf);box-shadow:0 0 8px rgba(102,204,255,.5)}.hp-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9);pointer-events:none}.battle-log,.team-actions{max-height:280px;overflow-y:auto;background-color:#1a1a1a;border-radius:6px;padding:12px;margin-top:14px;box-shadow:inset 0 0 10px rgba(0,0,0,.5);-webkit-overflow-scrolling:touch;scrollbar-width:thin}.team-actions{max-height:200px}.battle-log-entries{display:flex;flex-direction:column;gap:10px}.battle-turn{padding:10px 12px;background-color:#262626;border-radius:6px;border-bottom:1px dashed #444}.battle-turn:last-child{border-bottom:none}.turn-header{font-weight:700;color:#fc0;margin-bottom:8px;font-size:.95em;text-shadow:0 1px 2px rgba(0,0,0,.6)}.attack-action,.attack-entry{padding:8px 12px;margin:6px 0;border-radius:5px;box-shadow:0 2px 4px rgba(0,0,0,.25);font-size:13px;line-height:1.4}.team1-attack{background:linear-gradient(to right,rgba(255,102,102,.2),rgba(255,102,102,.08));border-left:3px solid #f66}.team2-attack{background:linear-gradient(to right,rgba(102,204,255,.2),rgba(102,204,255,.08));border-left:3px solid #6cf}.attack-message{line-height:1.45}.attacker{font-weight:700;margin-right:4px}.damage{color:#f66;font-weight:700;text-shadow:0 0 5px rgba(255,102,102,.4)}.critical{color:#fc0;font-weight:700;text-shadow:0 0 6px rgba(255,204,0,.6);animation:criticalPulse .5s ease}@keyframes criticalPulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}.missed{color:#999;font-weight:700;font-style:italic}.blocked{color:#aaa;font-weight:700;font-style:italic}.hp-status{margin-top:5px;padding-top:5px;border-top:1px dotted #444;font-size:.85em;color:#999}.team1-color,.team1-hp{color:#f66}.team2-color,.team2-hp{color:#6cf}.battle-outcome{background:linear-gradient(to bottom,#333,#222);border-radius:8px;padding:20px;margin-top:20px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.4)}.winner,.winner-announcement{font-size:1.6em;margin-bottom:14px;color:#fc0;font-weight:700;text-shadow:0 2px 5px rgba(0,0,0,.7);animation:winnerAppear .7s ease}.team1-win.winner,.team1-win.winner-announcement{color:#f66;text-shadow:0 0 12px rgba(255,102,102,.5)}.team2-win.winner,.team2-win.winner-announcement{color:#6cf;text-shadow:0 0 12px rgba(102,204,255,.5)}@keyframes winnerAppear{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.battle-result{margin-top:18px;padding:16px;background-color:#2a2a2a;border-radius:8px;font-weight:700;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.35);font-size:1.2em;animation:resultAppear .8s ease}@keyframes resultAppear{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.rewards{margin-top:14px}.rewards h4,.rewards-header{color:#fc0;margin:12px 0 8px 0;text-align:center;font-size:1.1em}.rewards ul{list-style:none;padding:0;margin:0}.reward-item,.rewards li{text-align:center;padding:8px 10px;background-color:#2a2a2a;border-radius:5px;margin-bottom:6px;box-shadow:0 2px 4px rgba(0,0,0,.3);color:#ccc}.reward-item:hover{background-color:#333}.money-reward{color:#6f6;font-weight:700;text-shadow:0 0 5px rgba(102,255,102,.4)}.exp-reward{color:#f9c;font-weight:700;text-shadow:0 0 5px rgba(255,153,204,.4)}.battle-navigation{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}.battle-navigation .log-link,.battle-navigation .return-link{flex:1 1 160px;text-align:center}.battle-full-log{background-color:#2a2a2a;border-radius:8px;padding:14px;margin-top:18px}.battle-full-log h3{color:#fc0;text-align:center;margin:0 0 12px 0;padding-bottom:8px;border-bottom:1px solid #555}.log-entry{padding:10px 12px;margin-bottom:6px;border-radius:5px;background-color:#262626;line-height:1.45;font-size:13px;transition:background-color .2s ease}.log-entry:hover{background-color:#333}.team1-action{border-left:4px solid #f66}.team2-action{border-left:4px solid #6cf}.teams-display{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:18px;background-color:#333;padding:14px;border-radius:8px;gap:12px}.raids-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:16px;max-width:1200px;margin:0 auto;box-sizing:border-box}.raid-card{background:#2a2a2a;border:2px solid #444;border-radius:8px;padding:14px;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .2s ease,border-color .2s ease,box-shadow .25s ease;box-sizing:border-box;color:#fff}.raid-card:hover{transform:translateY(-2px);border-color:#666;box-shadow:0 5px 14px rgba(0,0,0,.5)}.raid-card.dead{opacity:.6;background:#1a1a1a;border-color:#333}.raid-image{margin-bottom:10px;display:flex;align-items:center;justify-content:center}.raid-image img{width:80px;height:80px;border-radius:4px;object-fit:cover}.raid-image.dead img{opacity:.3;filter:grayscale(80%)}.placeholder-image{width:80px;height:80px;background:#555;display:flex;align-items:center;justify-content:center;font-size:10px;color:#aaa;border-radius:4px;margin:0 auto 10px;text-align:center;line-height:1.2;padding:4px;box-sizing:border-box}.raid-name{font-size:1em;font-weight:700;color:#fff;margin-bottom:6px;line-height:1.3;word-wrap:break-word}.raid-level{font-size:13px;color:#ccc;margin-bottom:8px}.raid-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px;font-size:12px}.stat-item{background:#333;padding:5px 6px;border-radius:4px;color:#fff;font-weight:600}.raid-rewards{font-size:11.5px;color:#ccc;margin-bottom:8px;min-height:32px;line-height:1.4}.raid-status{font-size:13px;font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.status-alive{color:#4caf50;text-shadow:0 0 6px rgba(76,175,80,.4)}.status-dead{color:#f44336;text-shadow:0 0 6px rgba(244,67,54,.4)}.raid-timer{font-size:12px;color:#ffa726;min-height:18px;font-weight:600;font-variant-numeric:tabular-nums}@media (max-width:768px){.arena-log-container,.battle-arena-container,.battle-replay-container,.gym-container,.live-battle-container,.message-container,.page-container{margin:12px auto;padding:14px;width:calc(100% - 16px);border-radius:8px}.message-header{flex-direction:column;align-items:stretch;text-align:center}.message-header .compose-button,.message-header .page-btn{width:100%}.message-title{font-size:1.3em}.gym-header h1{font-size:1.5em}.section-title{font-size:1.2em}.delete-button,.form-group input[type=submit],.training-buttons .challenge-button,.training-buttons .train-btn{width:100%}.message-table{display:block;background-color:transparent;box-shadow:none}.message-table thead{display:none}.message-table tbody,.message-table tr{display:block}.message-table tbody tr{background-color:#2a2a2a;margin-bottom:12px;border-radius:8px;padding:10px 12px;border:1px solid #3a3a3a;box-shadow:0 2px 5px rgba(0,0,0,.3)}.message-table tbody tr:hover{background-color:#303030}.message-table tbody td{display:block;padding:6px 0;border:none;border-bottom:1px solid #3a3a3a;font-size:13px;word-wrap:break-word}.message-table tbody td:last-child{border-bottom:none}.message-table tbody td:first-child{display:block;padding:0 0 6px 0}.message-table tbody td:first-child input[type=checkbox]{width:22px;height:22px}.message-options{padding-top:10px!important;display:flex;gap:12px;white-space:normal}.message-options a{margin-right:0;padding:8px 12px;background-color:#333;border-radius:4px;flex:1;text-align:center;min-height:40px;display:inline-flex;align-items:center;justify-content:center}.gym-info{flex-direction:column;gap:12px}.info-card{flex:1 1 auto;width:100%}.training-grid{grid-template-columns:1fr}.training-card{padding:18px}.training-history{overflow-x:auto;-webkit-overflow-scrolling:touch}.history-table{min-width:480px}.modal{padding:0;align-items:stretch;justify-content:stretch}.modal-content{max-width:100vw;max-height:100vh;max-height:100dvh;width:100%;height:100%;border-radius:0;margin:0}.modal-header{border-radius:0;padding:14px 16px;padding-left:64px}.modal-header h2{font-size:1.1em}.challenge-footer{border-radius:0}.challenge-area{padding:18px 14px}.input-buttons{max-width:100%}.math-input{font-size:16px!important;width:60%;max-width:220px}.battle-teams,.team-stats-container,.teams-container{flex-direction:column;gap:14px}.battle-teams>.team,.team-column,.team-stats{flex:1 1 auto;width:100%;min-width:0}.versus,.vs{padding:4px;font-size:1.3em}.battle-navigation{flex-direction:column;gap:10px}.battle-navigation .log-link,.battle-navigation .return-link{flex:1 1 auto;width:100%}.battle-launch-button{padding:12px 20px!important;font-size:1.1em!important;width:100%;max-width:360px}.battle-title{font-size:1.15em}.teams-display{flex-direction:column;text-align:center}.battle-log{max-height:220px}.team-actions{max-height:160px}.arena-battles-table{display:block}.arena-battles-table thead{display:none}.arena-battles-table tbody,.arena-battles-table tr{display:block}.arena-battles-table tbody tr{background-color:#2a2a2a!important;margin-bottom:12px;border-radius:8px;padding:10px 12px;border:1px solid #3a3a3a}.arena-battles-table tbody td{display:block;padding:5px 0;border:none;font-size:13px}.arena-battles-table tbody td .view-replay-btn{display:inline-block;margin-top:8px}.raids-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:12px}.raid-card{padding:10px}.placeholder-image,.raid-image img{width:64px;height:64px}.raid-name{font-size:13px}.raid-level,.raid-rewards{font-size:11px}.guide-section{padding:12px}.guide-section h3{font-size:1em}}@media (max-width:480px){.raids-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.placeholder-image,.raid-image img{width:56px;height:56px}.raid-stats{grid-template-columns:1fr}.battle-title{font-size:1em}.winner,.winner-announcement{font-size:1.25em}.gym-header h1,.message-title{font-size:1.2em}.training-icon{font-size:2.25em}.math-problem{font-size:1.2em}.sequence-number{font-size:2.4em}}.battle-launch-button:focus-visible,.challenge-button:focus-visible,.compose-button:focus-visible,.delete-button:focus-visible,.form-button:focus-visible,.how-to-play-toggle:focus-visible,.input-buttons button:focus-visible,.log-button:focus-visible,.log-link:focus-visible,.modal .close:focus-visible,.page-btn:focus-visible,.return-link:focus-visible,.train-btn:focus-visible,.view-replay-btn:focus-visible{outline:3px solid #ffd700!important;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,215,0,.25)}@media (prefers-reduced-motion:reduce){.attack-entry,.battle-launch-button,.compose-button,.history-table tr,.log-entry,.message-table tr,.page-btn,.raid-card,.team-column,.train-btn,.training-card{transition:none!important}.battle-launch-button:hover,.page-btn:hover,.raid-card:hover,.team-column:hover,.training-card:hover{transform:none!important}.battle-countdown,.battle-result,.sequence-number,.winner-announcement{animation:none!important}}@media (prefers-contrast:more){.arena-battles-table tbody tr,.info-card,.message-table tbody tr,.modal-content,.raid-card,.team-column,.training-card{border-width:2px!important;border-color:#fff!important}.error-message,.info-message,.success-message,.warning-message{border-left-width:6px!important}}@media (forced-colors:active){.battle-arena-container,.gym-container,.info-card,.live-battle-container,.message-container,.message-form,.modal-content,.page-container,.raid-card,.team-column,.team-form,.training-card{border:1px solid CanvasText}.battle-launch-button,.challenge-button,.compose-button,.form-button,.page-btn,.train-btn{border:1px solid ButtonText;forced-color-adjust:none}}@media print{.back-button,.back-link,.battle-launch-button,.battle-navigation,.challenge-button,.compose-button,.delete-button,.form-button,.how-to-play-toggle,.message-options,.modal,.page-btn,.train-btn{display:none!important}.battle-arena-container,.gym-container,.live-battle-container,.message-container,.page-container,.raid-card,.team-column,.training-card{background:#fff!important;color:#000!important;border:1px solid #000!important;box-shadow:none!important;break-inside:avoid}}
/* =================================================================
  14. STORES / CASINO / CREW PAGES — CONSOLIDATED STYLES
   -----------------------------------------------------------------
   Like section 13, this consolidates styling for another batch of
   pages whose original inline <style> blocks each invented their
   own primitives. Pages covered here:

     • points.php         (Premium point store — table-based)
     • freepointstore.php (Free point store — table-based)
     • crew_shop.php      (Crew supply shop — tabbed table)
     • cast.php           (Spell room — inline-styled, no classes)
     • blackjack.php      (Card game — flex layout)
     • pp_stripe.php      (Stripe checkout panels)
     • hitlist.php        (Crew hitlist — form + table)

   The challenge here is variety. Three pages use `.points-table`
   under different names (.crew-shop-table, .hitlist-table table)
   with column counts ranging from 3 to 8. Two pages have flex
   game-areas. cast.php has NO classes — every style is inline,
   which means we can only attack it with attribute selectors and
   broad container targeting from the layout structure.

   Strategy:
     1. Define a `.shop-table` primitive that absorbs all three
        store tables. Use attribute selectors to alias the existing
        class names (.points-table, .crew-shop-table, .hitlist-table
        table) so the legacy markup keeps working unchanged.
     2. Mobile transformation: collapse multi-column shop tables
        into stacked card rows (same pattern as section 13's
        message table).
     3. cast.php gets a wrapper-level mobile fix: the inline
        `width: 90%` table is targeted via a style-attribute
        selector to force horizontal scroll instead of overflow.

   All four pages use `.message`, `.error-message`, or similar
   alert classes — those are already unified by section 13.0,
   nothing to redo here.
   ================================================================= */
.crew-shop-table,.hitlist-table table,.points-table,.shop-table{width:100%;border-collapse:collapse;background-color:#333;color:#e0e0e0;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.4);box-sizing:border-box}.shop-table td,.shop-table th{padding:12px;border-bottom:1px solid #444;text-align:left;vertical-align:middle}.shop-table th{background-color:#222;color:#fc0;font-size:13px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;border-bottom:2px solid #444}.shop-table tr:last-child td{border-bottom:none}.shop-table tr:hover{background-color:#3a3a3a}.shop-table tr:nth-child(2n){background-color:#2e2e2e}.cost-badge{background:linear-gradient(135deg,#555,#333);color:#fc0;padding:6px 12px;border-radius:20px;font-weight:700;display:inline-block;font-size:13px;box-shadow:0 2px 4px rgba(0,0,0,.3);white-space:nowrap}.buy-button,.points-table .btn,.points-table input[type=submit]{padding:9px 18px;background:linear-gradient(to bottom,#4a4a4a,#333);color:#fff;border:1px solid #555;border-radius:5px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.35);transition:all .25s ease;min-height:36px;box-sizing:border-box;font-family:inherit}.buy-button:hover,.points-table .btn:hover,.points-table input[type=submit]:hover{background:linear-gradient(to bottom,#fc0,#fa0);color:#1a1a1a;transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.5)}.buy-button:active,.points-table .btn:active,.points-table input[type=submit]:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.3)}.buy-button.disabled,.buy-button:disabled{background:linear-gradient(to bottom,#555,#444)!important;color:#999!important;cursor:not-allowed!important;transform:none!important;opacity:.7}.buy-button.disabled:hover,.buy-button:disabled:hover{background:linear-gradient(to bottom,#555,#444)!important;color:#999!important;transform:none!important}.ready{color:#4caf50;font-weight:700;text-shadow:0 0 6px rgba(76,175,80,.4)}.cooldown{color:#ff7070;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 0 6px rgba(255,102,102,.4)}.points-table input[type=number],.points-table input[type=text],.points-table select{background-color:#444;border:1px solid #555;color:#fff;padding:8px 12px;border-radius:5px;margin-right:8px;width:150px;max-width:100%;font-family:inherit;font-size:14px;box-sizing:border-box}.points-table input[type=number]:focus,.points-table input[type=text]:focus,.points-table select:focus{outline:0;border-color:#fc0;box-shadow:0 0 0 3px rgba(255,204,0,.25)}.message{padding:14px 16px;margin:18px 0;border-radius:6px;font-weight:700;text-align:center;background-color:rgba(52,152,219,.18);color:#cce6f5;border:1px solid #3498db;border-left:4px solid #3498db;line-height:1.45;box-sizing:border-box;animation:fadeInMessage .3s ease-in-out}.message a{color:#fff;text-decoration:underline}.message a:hover{color:gold}.message-error{background-color:rgba(220,53,69,.78)!important;color:#fff!important;border:1px solid #b30000!important;border-left:5px solid #b30000!important}.message-success{background-color:rgba(40,167,69,.78)!important;color:#fff!important;border:1px solid #006400!important;border-left:5px solid #006400!important}@keyframes fadeInMessage{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.point-store-container{max-width:1000px;margin:30px auto;padding:25px;background-color:#2a2a2a;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.7);color:#e0e0e0;box-sizing:border-box;width:95%}.point-store-container h2{text-align:center;color:#fc0;font-size:1.9em;margin:0 0 22px 0;text-shadow:0 2px 5px rgba(0,0,0,.5);letter-spacing:1px;border-bottom:2px solid #444;padding-bottom:14px}.user-details{display:flex;flex-wrap:wrap;justify-content:space-between;background-color:#3a3a3a;padding:16px 18px;border-radius:10px;margin-bottom:24px;box-shadow:inset 0 0 10px rgba(0,0,0,.3);gap:8px;box-sizing:border-box}.user-details p{flex:1 1 200px;margin:6px 0;font-size:1.05em;line-height:1.4;min-width:0}.user-details strong{color:#fc0;margin-right:5px}.points-display{font-size:1.2em;background:linear-gradient(135deg,#3a3a3a,#444);display:inline-block;padding:4px 14px;border-radius:20px;margin-right:8px;box-shadow:0 2px 4px rgba(0,0,0,.3);font-weight:700;color:#fc0}.premium-feature{position:relative}.premium-feature::after{content:"Premium";position:absolute;top:-10px;right:10px;background:linear-gradient(to right,#fc0,#f90);color:#1a1a1a;padding:3px 9px;border-radius:10px;font-size:.7em;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.4);letter-spacing:.5px;text-transform:uppercase}.points-container{margin:22px auto;padding:22px;width:95%;max-width:1100px;background-color:#333;border-radius:10px;box-shadow:0 0 14px rgba(0,0,0,.5);color:#ccc;box-sizing:border-box}.points-container .section-title{text-align:center;color:#fc0;font-size:1.5em;margin-bottom:22px;border-bottom:none;padding-bottom:0}.crew-shop-container{margin:20px auto;width:95%;max-width:1200px;background-color:#2c2c2c;padding:20px;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.5);color:#e0e0e0;box-sizing:border-box}.crew-shop-title{text-align:center;color:#f5f5f5;margin:0 0 8px 0;font-size:1.9em;text-shadow:0 2px 5px rgba(0,0,0,.7)}.crew-name{text-align:center;color:#fc0;margin-bottom:22px;font-size:1.15em}.crew-shop-tabs{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:22px;gap:6px}.crew-shop-tab{padding:11px 22px;background:linear-gradient(to bottom,#444,#333);color:#fff;text-decoration:none;border-radius:6px 6px 0 0;transition:all .25s ease;font-weight:700;min-height:40px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #555;border-bottom:none}.crew-shop-tab:hover{background:linear-gradient(to bottom,#555,#444);transform:translateY(-2px);color:gold}.crew-shop-tab.active{background:linear-gradient(to bottom,#060,#040);color:#0f0;text-shadow:0 0 6px rgba(0,255,0,.5);border-color:#080}.crew-money{text-align:right;margin-bottom:14px;font-size:1.2em;color:#fc0;font-weight:700}.crew-shop-warning{background-color:rgba(255,165,0,.18);border:1px solid #fa0;border-left:4px solid #fa0;color:#fa0;padding:14px 16px;margin-bottom:22px;border-radius:6px;text-align:center;font-weight:700;line-height:1.45}.crew-bonuses{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:22px;gap:18px}.bonus-display{background:linear-gradient(to bottom,#030,#010);padding:10px 18px;border-radius:8px;border:2px solid #060;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}.bonus-label{color:#ccc;font-weight:700;margin-right:6px}.bonus-value{color:#0f0;font-weight:700;font-size:1.15em;text-shadow:0 0 6px rgba(0,255,0,.5)}.crew-shop-row{transition:background-color .25s ease}.crew-shop-row:hover{background-color:#383838}.crew-shop-row:nth-child(2n){background-color:#333}.crew-shop-cell{padding:10px;text-align:center;border:1px solid #555;vertical-align:middle;box-sizing:border-box}.crew-shop-header{background:linear-gradient(to bottom,#444,#333);color:#f5f5f5;font-weight:700;padding:12px;text-align:center;border:1px solid #555;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.equipment-image{width:50px;height:50px;display:block;margin:0 auto 8px;border-radius:8px;box-shadow:0 0 8px rgba(0,0,0,.5);transition:transform .25s ease;object-fit:contain}.equipment-image:hover{transform:scale(1.15)}.equipment-name{font-weight:700;color:#f5f5f5;font-size:12px;margin-bottom:4px;line-height:1.3}.equipment-description{font-size:10.5px;color:#ccc;font-style:italic;line-height:1.3}.crew-shop-input{width:60px;padding:6px;border-radius:5px;border:1px solid #666;text-align:center;background-color:#444;color:#f5f5f5;font-size:12px;box-sizing:border-box;font-family:inherit}.crew-shop-input:focus{outline:0;border-color:#fc0;box-shadow:0 0 0 2px rgba(255,204,0,.3)}.crew-shop-button{color:#fff;padding:8px 14px;border:none;border-radius:5px;cursor:pointer;font-weight:700;transition:all .25s ease;font-size:11px;min-height:32px;box-sizing:border-box;font-family:inherit}.purchase-button{background:linear-gradient(to bottom,#060,#040)}.purchase-button:hover{background:linear-gradient(to bottom,#080,#060);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.4)}.crew-shop-button.disabled,.crew-shop-button:disabled{background:linear-gradient(to bottom,#777,#555);cursor:not-allowed;transform:none;box-shadow:none;opacity:.7}.purchase-form{display:flex;flex-direction:column;align-items:center;gap:6px}.crew-shop-error{background-color:rgba(255,0,0,.18);border:1px solid red;border-left:4px solid red;color:#f77;padding:12px;margin-bottom:14px;border-radius:6px;text-align:center;font-weight:700}.crew-shop-success{background-color:rgba(0,255,0,.1);border:1px solid #0c0;border-left:4px solid #0c0;color:#6f6;padding:12px;margin-bottom:14px;border-radius:6px;text-align:center;font-weight:700}.crew-shop-guide{background-color:#333;padding:18px;border-radius:8px;margin-top:22px;color:#ccc;border-left:4px solid #060;line-height:1.5}.crew-shop-guide h3{color:#0f0;margin:0 0 10px 0;text-shadow:0 0 5px rgba(0,255,0,.3)}.crew-shop-guide ul{margin:10px 0;padding-left:22px}.crew-shop-guide li{margin-bottom:8px;line-height:1.45}.hitlist-container{max-width:1200px;margin:22px auto;padding:22px;background-color:#333;border-radius:10px;box-shadow:0 0 14px rgba(0,0,0,.5);color:#ccc;width:95%;box-sizing:border-box}.hitlist-header{text-align:center;margin-bottom:22px}.hitlist-header h1{color:#fc0;font-size:1.9em;margin:0;text-shadow:0 2px 5px rgba(0,0,0,.5)}.hitlist-content{background-color:#444;padding:20px;border-radius:10px;box-sizing:border-box}.hitlist-form{margin-bottom:22px}.hitlist-form form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.hitlist-form input[type=text]{padding:10px 14px;border:1px solid #555;border-radius:5px;background-color:#555;color:#fff;font-family:inherit;font-size:14px;flex:1 1 220px;min-width:0;box-sizing:border-box}.hitlist-form input[type=text]:focus{outline:0;border-color:#fc0;box-shadow:0 0 0 3px rgba(255,204,0,.25);background-color:#5a5a5a}.hitlist-form input[type=text]::placeholder{color:#aaa}.btn-submit{padding:10px 22px;background:linear-gradient(to bottom,#007bff,#0056b3);color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:700;font-size:14px;min-height:40px;transition:all .25s ease;box-shadow:0 2px 5px rgba(0,0,0,.3);font-family:inherit;box-sizing:border-box}.btn-submit:hover{background:linear-gradient(to bottom,#1a8cff,#06c);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.45)}.hitlist-table{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.35)}.hitlist-table table{width:100%;border-collapse:collapse;background-color:#3a3a3a}.hitlist-table td,.hitlist-table th{padding:10px 12px;text-align:center;border:1px solid #555}.hitlist-table th{background-color:#555;color:#fff;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}.hitlist-table tr:nth-child(2n){background-color:#333}.hitlist-table tr:hover{background-color:#404040}.hitlist-table a{color:#66b3ff;text-decoration:none}.hitlist-table a:hover{text-decoration:underline;color:#9cf}.btn-remove{color:#ff7070!important;text-decoration:none;font-weight:700;padding:4px 8px;border-radius:4px;transition:background-color .2s ease;display:inline-block}.btn-remove:hover{background-color:rgba(255,102,102,.15);text-decoration:none}.blackjack-container{margin:22px auto;padding:22px;width:95%;max-width:1000px;background-color:#333;border-radius:10px;box-shadow:0 0 14px rgba(0,0,0,.5);color:#ccc;box-sizing:border-box}.blackjack-title{text-align:center;color:#fc0;font-size:1.9em;margin:0 0 16px 0;text-shadow:0 2px 5px rgba(0,0,0,.5)}.user-money{text-align:center;font-size:1.15em;margin-bottom:22px;color:#6f6;font-weight:700;text-shadow:0 0 6px rgba(102,255,102,.3)}.blackjack-form{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:22px;gap:12px}.blackjack-form .form-group{margin:0;display:flex;align-items:center;gap:8px}.blackjack-form label{color:#fc0;font-weight:700;margin-bottom:0}.bet-input{padding:10px 14px;border-radius:5px;border:1px solid #555;background-color:#444;color:#fff;font-size:15px;width:140px;text-align:center;box-sizing:border-box;font-family:inherit}.bet-input:focus{outline:0;border-color:#fc0;box-shadow:0 0 0 3px rgba(255,204,0,.25)}.action-button{padding:11px 22px;background:linear-gradient(to bottom,#555,#444);color:#fff;border:1px solid #666;border-radius:5px;cursor:pointer;font-weight:700;font-size:14px;min-height:42px;transition:all .25s ease;box-shadow:0 2px 5px rgba(0,0,0,.3);font-family:inherit;box-sizing:border-box}.action-button:hover{background:linear-gradient(to bottom,#fc0,#fa0);color:#1a1a1a;transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.45);border-color:#fa0}.action-button:active{transform:translateY(0);box-shadow:0 1px 3px rgba(0,0,0,.3)}.game-area{display:flex;flex-wrap:wrap;justify-content:space-around;margin-bottom:22px;gap:22px}.hand{text-align:center;flex:1 1 380px;min-width:0;background-color:#2a2a2a;border-radius:10px;padding:18px 14px;box-shadow:0 3px 8px rgba(0,0,0,.4);box-sizing:border-box}.player-hand{border-top:4px solid #6f6}.dealer-hand{border-top:4px solid #f66}.hand-title{color:#fc0;font-size:1.25em;margin:0 0 14px 0;text-shadow:0 1px 3px rgba(0,0,0,.5)}.cards{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;min-height:140px;align-items:center}.card{width:90px;height:130px;background-color:#1a1a1a;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.5);border:1px solid #555;box-sizing:border-box;flex-shrink:0}.hand-value{margin-top:14px;font-size:1.15em;color:#fff;font-weight:700}.hand-value::before{content:""}.blackjack-container .message{text-align:center;font-size:1.4em;margin:22px 0;color:#fc0;background-color:rgba(255,204,0,.1);border:1px solid #fc0;border-left:5px solid #fc0;padding:16px;text-shadow:0 2px 5px rgba(0,0,0,.5);font-weight:700;border-radius:8px}.vip-container{max-width:800px;margin:24px auto;padding:20px;width:95%;box-sizing:border-box}.vip-table{width:100%;margin-bottom:18px;background:linear-gradient(135deg,#3a3a3a,#2c2c2c);padding:22px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.5);color:#f0f0f0;border:1px solid #444;transition:transform .25s ease,box-shadow .25s ease;box-sizing:border-box}.vip-table:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.6),0 0 12px rgba(99,91,255,.25);border-color:#635bff}.vip-table h3{color:#fff;margin:0 0 12px 0;font-size:1.6em}.vip-table h3 font{color:#fc0!important}.vip-table b{color:#ccc;font-size:1.05em}.vip-btn{background-color:#635bff;border:none;color:#fff;padding:12px 28px;text-decoration:none;display:inline-block;font-size:16px;margin:14px 0 4px 0;cursor:pointer;border-radius:8px;font-weight:700;min-height:44px;box-shadow:0 3px 8px rgba(99,91,255,.4);transition:all .25s ease;font-family:inherit;letter-spacing:.3px;box-sizing:border-box}.vip-btn:hover{background-color:#4f46e5;transform:translateY(-2px);box-shadow:0 5px 14px rgba(99,91,255,.6)}.vip-btn:active{transform:translateY(0);box-shadow:0 2px 5px rgba(99,91,255,.4)}.benefits-list{background:linear-gradient(135deg,#444,#383838);padding:18px 22px;border-radius:10px;margin-top:22px;border:1px solid #555;box-shadow:0 3px 8px rgba(0,0,0,.4);text-align:left}.benefits-list b{color:#fc0;font-size:1.1em;display:block;margin-bottom:10px}.benefits-list ul{margin:0;padding-left:22px;color:#e0e0e0}.benefits-list li{margin:8px 0;line-height:1.5}table[style*="background-color: #444"][style*="border-collapse: collapse"]{box-sizing:border-box}h1[style*="color: #1E90FF"]{text-shadow:0 2px 6px rgba(30,144,255,.35)}div[style*="text-align: center"][style*="margin-top: 10px"][style*="animation: fadeIn"]{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
/* ================================================================
   14.8  MOBILE RESPONSIVE for section 14
   ================================================================ */
@media (max-width:768px){.blackjack-container,.crew-shop-container,.hitlist-container,.point-store-container,.points-container,.vip-container{margin:12px auto;padding:14px;width:calc(100% - 16px);border-radius:8px}.blackjack-title,.crew-shop-title,.hitlist-header h1,.point-store-container h2{font-size:1.4em}.user-details{flex-direction:column;padding:14px;gap:4px}.user-details p{flex:1 1 auto;margin:4px 0;text-align:center}.points-container .points-table,.points-table{display:block;background:0 0;box-shadow:none}.points-table thead{display:none}.points-table tbody,.points-table tr{display:block}.points-table tbody tr,.points-table>tr{background-color:#2e2e2e!important;margin-bottom:12px;border-radius:8px;padding:12px 14px;border:1px solid #3a3a3a;box-shadow:0 2px 5px rgba(0,0,0,.35)}.points-table tbody tr:hover,.points-table>tr:hover{background-color:#353535!important}.points-table tbody tr:nth-child(2n),.points-table>tr:nth-child(2n){background-color:#2e2e2e!important}.points-table td{display:block;padding:6px 0;border:none;border-bottom:1px solid #3a3a3a;text-align:left!important;font-size:14px;word-wrap:break-word}.points-table td:last-child{border-bottom:none;padding-top:10px}.points-table form{flex-wrap:wrap;gap:8px;justify-content:stretch}.points-table input[type=number],.points-table input[type=text],.points-table select{width:100%;margin-right:0}.buy-button,.points-table .btn,.points-table input[type=submit]{width:100%;min-height:44px}.premium-feature::after{top:-8px;right:8px}.crew-shop-tabs{flex-direction:column;gap:4px}.crew-shop-tab{border-radius:6px;width:100%}.crew-shop-table{font-size:12px;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}.crew-shop-cell,.crew-shop-header{padding:8px 6px}.equipment-image{width:40px;height:40px}.crew-shop-input{width:50px;padding:4px}.crew-shop-button{padding:7px 10px;font-size:11px}.crew-bonuses{flex-direction:column;gap:8px}.crew-money{text-align:center}.hitlist-form input[type=text]{flex:1 1 100%}.btn-submit{width:100%;flex:1 1 100%}.hitlist-table{overflow-x:auto}.hitlist-table table{min-width:600px}.hitlist-content{padding:14px}.game-area{flex-direction:column;gap:14px}.hand{flex:1 1 auto;width:100%;padding:14px 10px}.card{width:70px;height:100px}.cards{min-height:110px;gap:4px}.blackjack-form{flex-direction:column;align-items:stretch}.blackjack-form .form-group{flex-direction:column;align-items:stretch;width:100%}.bet-input{font-size:16px;width:100%}.action-button{width:100%}.blackjack-container .message{font-size:1.15em;padding:12px}.vip-table{padding:18px 16px}.vip-table h3{font-size:1.35em}.vip-btn{width:100%;max-width:100%}.benefits-list{padding:16px}table[style*="background-color: #444"][style*="border-collapse: collapse"]{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;white-space:nowrap}table[style*="background-color: #444"][style*="border-collapse: collapse"]>tbody{display:table;width:100%;min-width:720px}table[style*="background-color: #444"][style*="border-collapse: collapse"]>tbody>tr,table[style*="background-color: #444"][style*="border-collapse: collapse"]>tr{display:table-row}table[style*="background-color: #444"][style*="border-collapse: collapse"] td,table[style*="background-color: #444"][style*="border-collapse: collapse"] th{padding:10px 8px!important}h1[style*="color: #1E90FF"]{font-size:1.8em!important}}@media (max-width:480px){.blackjack-title,.crew-shop-title,.hitlist-header h1,.point-store-container h2{font-size:1.2em}.points-display{font-size:1.05em;padding:3px 10px}.card{width:56px;height:80px}.cards{min-height:90px}.hand-title{font-size:1.1em}.vip-table{padding:14px 12px}.vip-table h3{font-size:1.2em}.crew-shop-guide,.crew-shop-warning{padding:12px;font-size:13px}.bonus-display{padding:8px 14px;font-size:13px}.equipment-image{width:36px;height:36px}.equipment-name{font-size:11px}.equipment-description{font-size:9.5px}}.action-button:focus-visible,.bet-input:focus-visible,.btn-remove:focus-visible,.btn-submit:focus-visible,.buy-button:focus-visible,.crew-shop-button:focus-visible,.crew-shop-input:focus-visible,.crew-shop-tab:focus-visible,.hitlist-form input:focus-visible,.points-table .btn:focus-visible,.points-table input[type=submit]:focus-visible,.vip-btn:focus-visible{outline:3px solid #ffd700!important;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,215,0,.25)}@media (prefers-reduced-motion:reduce){.action-button,.btn-submit,.buy-button,.crew-shop-button,.crew-shop-tab,.equipment-image,.points-table .btn,.premium-feature::after,.vip-table{transition:none!important}.action-button:hover,.btn-submit:hover,.buy-button:hover,.crew-shop-tab:hover,.equipment-image:hover,.points-table .btn:hover,.purchase-button:hover,.vip-table:hover{transform:none!important}.crew-shop-error,.crew-shop-success,.message{animation:none!important}}@media (prefers-contrast:more){.blackjack-container,.bonus-display,.crew-shop-container,.hand,.hitlist-container,.point-store-container,.points-container,.vip-table{border-width:2px!important;border-color:#fff!important}.crew-shop-error,.crew-shop-success,.crew-shop-warning,.message,.message-error,.message-success{border-left-width:6px!important}.premium-feature::after{border:1px solid CanvasText}}@media (forced-colors:active){.benefits-list,.blackjack-container,.bonus-display,.crew-shop-container,.crew-shop-guide,.hand,.hitlist-container,.hitlist-content,.point-store-container,.points-container,.vip-container,.vip-table{border:1px solid CanvasText}.action-button,.btn-submit,.buy-button,.crew-shop-button,.crew-shop-tab,.points-table .btn,.vip-btn{border:1px solid ButtonText;forced-color-adjust:none}.bonus-display,.cost-badge,.premium-feature::after{forced-color-adjust:none}}@media print{.action-button,.blackjack-form,.btn-remove,.btn-submit,.buy-button,.crew-shop-button,.crew-shop-tabs,.hitlist-form,.points-table .btn,.vip-btn{display:none!important}.blackjack-container,.crew-shop-container,.hand,.hitlist-container,.point-store-container,.points-container,.vip-container,.vip-table{background:#fff!important;color:#000!important;border:1px solid #000!important;box-shadow:none!important;break-inside:avoid}.card{background-color:#fff!important;border:1px solid #000!important}}
/* =================================================================
   END OF STYLESHEET
   ================================================================= */
