/* player-profile.css - the fantasy landscape is the PAGE background (pushed below the
   120px wood header, like the spellbook); profile content floats on top. ONE background,
   no nested framed panel. Card-duel data only. ASCII only. */

/* strip the layout's parchment content frame ONLY on the profile page */
body:has(.pp-frame) main.content.framed{
  background:none!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;padding:0!important;max-width:none!important;margin:0!important;
}
/* landscape as the single page background, starting 120px down so the header never clips it */
/* high-specificity kill of the base body background.png (it tied on specificity before) */
html body.page-plain:has(.pp-frame){background:#10202e!important}
/* the ONE background: the framed panel, below the 120px header, filling the area */
body:has(.pp-frame)::after{
  content:"";position:fixed;left:0;right:0;top:120px;bottom:0;z-index:-1;pointer-events:none;
  background:#10202e url('/static/img/ui_pieces/player_profile_panel.png') center/100% 100% no-repeat;
}

/* content wrapper - transparent, NO background of its own */
.pp-frame{position:relative;max-width:1040px;margin:30px auto 52px;padding:6px 14px 30px;
  color:#23324a;font-family:'Crimson Text',Georgia,serif}

/* title banner */
.pp-banner{display:flex;justify-content:center;margin:0 0 22px}
.pp-banner h1{margin:0;font-family:'Cinzel',Georgia,serif;font-size:1.5rem;letter-spacing:.07em;
  color:#ffe9a8;text-shadow:0 2px 4px #000;text-transform:uppercase;
  background:linear-gradient(180deg,#2f5fa6,#1c3d77);border:2px solid #d9b463;border-radius:10px;
  padding:8px 42px;box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* head: portrait | identity | rank emblem */
.pp-head{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;margin-bottom:22px}
.pp-portrait-col{display:flex;flex-direction:column;align-items:center;gap:9px}
.pp-portrait{width:150px;height:150px;border-radius:50%;overflow:hidden;background:#1a2740;
  border:5px solid #d9b463;box-shadow:0 0 0 3px #8a6a23,0 10px 26px rgba(0,0,0,.5)}
.pp-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.pp-portrait-initial{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-family:'Cinzel',Georgia,serif;font-size:4rem;font-weight:700;color:#e9d9a8;background:#23365c}
.pp-rank-tab{font:700 .78rem/1 'Cinzel',Georgia,serif;letter-spacing:.06em;text-transform:uppercase;
  color:#2a1c08;background:linear-gradient(180deg,#f4d27a,#caa23a);border:1px solid #8a6a23;border-radius:8px;
  padding:6px 16px;box-shadow:0 3px 8px rgba(0,0,0,.4)}

.pp-id{min-width:0}
.pp-name{margin:0;font-family:'Cinzel',Georgia,serif;font-size:2.3rem;line-height:1.1;color:#10233f;
  text-shadow:0 1px 0 rgba(255,255,255,.7),0 2px 10px rgba(255,255,255,.55)}
.pp-edit{font-size:1rem;color:#10233f;text-decoration:none;margin-left:8px;vertical-align:middle;opacity:.7}
.pp-handle{margin:.12em 0;color:#3a3320;font-weight:600;text-shadow:0 1px 4px rgba(255,255,255,.7)}
.pp-tier{margin:.1em 0 .5em;color:#1c3d77;font-style:italic;font-size:1.05rem;text-shadow:0 1px 4px rgba(255,255,255,.7)}
.pp-elo-bar{position:relative;height:24px;max-width:420px;background:rgba(20,18,10,.32);
  border:1px solid #b89030;border-radius:999px;overflow:hidden;margin:.5em 0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.pp-elo-fill{height:100%;background:linear-gradient(180deg,#7b54c8,#4e2ea0)}
.pp-elo-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 .8rem/1 Georgia,serif;color:#fff;text-shadow:0 1px 3px #000}
.pp-unranked{margin:.3em 0 0;color:#3a3320;font-weight:600;font-size:.9rem;text-shadow:0 1px 4px rgba(255,255,255,.7)}

.pp-emblem{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:124px}
.pp-emblem-badge{width:112px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.pp-emblem-rank{font:800 .8rem/1 'Cinzel',Georgia,serif;letter-spacing:.05em;color:#fff;
  background:linear-gradient(180deg,#9a6fd0,#6a3fa0);border:1px solid #4a2a7a;border-radius:8px;
  padding:6px 14px;box-shadow:0 3px 8px rgba(0,0,0,.4);text-transform:uppercase}

/* stat cards - solid cream so numbers read over the landscape */
.pp-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:4px 0 18px}
.pp-stat{background:rgba(255,251,242,.92);border:1px solid #caa64f;border-radius:12px;padding:14px 8px;
  text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.pp-stat-num{display:block;font:800 1.55rem/1 'Cinzel',Georgia,serif;color:#2a2418}
.pp-stat-lbl{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#7a5f33}

.pp-bio{background:rgba(255,251,242,.92);border:1px solid #caa64f;border-radius:12px;padding:11px 15px;margin:0 0 16px;color:#3a2c17}

/* panels */
.pp-panel{background:rgba(255,251,242,.93);border:1px solid #caa64f;border-radius:14px;padding:15px 18px;
  box-shadow:0 5px 16px rgba(0,0,0,.28)}
.pp-panel-h{margin:0 0 9px;font-family:'Cinzel',Georgia,serif;font-size:1.12rem;color:#5a3e16;
  border-bottom:1px solid #caa64f;padding-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.pp-empty{color:#7a5f33;margin:7px 0}.pp-empty a{color:#1c3d77;font-weight:700}
.pp-matches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pp-match{display:flex;align-items:center;gap:12px;padding:7px 4px;border-bottom:1px solid rgba(140,110,50,.22)}
.pp-result{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:800;color:#fff}
.pp-result.win{background:#2e8b4f}.pp-result.loss{background:#b3402e}.pp-result.draw{background:#7a6a3a}
.pp-vs{flex:1;min-width:0;color:#3a2c17}.pp-vs a{color:#1c3d77;font-weight:700;text-decoration:none}
.pp-delta{font-weight:800;font-family:ui-monospace,Consolas,monospace}
.pp-delta.up{color:#2e8b4f}.pp-delta.down{color:#b3402e}.pp-delta.flat{color:#7a6a3a}
.pp-when{color:#8a7448;font-size:.8rem;flex:none}

@media(max-width:760px){
  .pp-head{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pp-stats{grid-template-columns:repeat(2,1fr)}
  .pp-elo-bar{margin-left:auto;margin-right:auto}
}