/* Hungry Wars clans v6 — rebuilt cleanly from the approved golden mockup. */
.mode-paper:has(.hwc-root){
  width:min(1220px,94vw)!important;
  height:min(760px,92vh)!important;
  padding:12px!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
#modePanelBody:has(.hwc-root){height:100%;min-height:0;overflow:hidden!important}

.hwc-root{
  --brown:#71370f;
  --brown2:#8e511d;
  --line:#d88919;
  --line2:#a95d0c;
  --gold:#ffa118;
  --cream:#fff7dc;
  --paper:#fff0bd;
  width:100%;height:100%;min-height:0;
  display:flex;flex-direction:column;
  overflow:hidden;
  color:var(--brown);
  font-family:inherit;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.42) 0 3px,transparent 4px) 0 0/170px 170px,
    linear-gradient(180deg,#fff6d8 0%,#ffe39a 100%);
  border-radius:20px;
  box-sizing:border-box;
}
.hwc-root *{box-sizing:border-box}
.hwc-root button,.hwc-root input,.hwc-root select{font:inherit}
.hwc-root button{cursor:pointer}

/* HEADER */
.hwc-titlebar,.hwc-clan-header{
  flex:0 0 104px;
  min-height:104px;
  margin:0 0 12px;
  padding:12px 70px 12px 16px;
  display:flex;align-items:center;gap:18px;
  position:relative;
  border:3px solid var(--line);
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 0,rgba(255,255,255,.8),transparent 28%),
    linear-gradient(180deg,#fff9e8 0%,#ffe8a4 58%,#f4cc61 100%);
  box-shadow:inset 0 0 0 4px rgba(255,253,238,.78),0 6px 0 #9e5810,0 13px 20px rgba(91,51,7,.12);
}
.hwc-titlebar::after,.hwc-clan-header::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-9px;
  border-bottom:3px dotted rgba(181,104,17,.55);pointer-events:none
}
.hwc-title-crest,.hwc-clan-crest{
  width:76px;height:76px;flex:0 0 76px;
  display:grid;place-items:center;
  border-radius:21px;
  color:#fff;font-size:42px;font-weight:1000;
  background:linear-gradient(180deg,#ffc83c,#ee8a0d);
  border:4px solid #fff0ad;
  box-shadow:inset 0 0 0 3px #9b5510,0 5px 0 #773d08,0 8px 14px rgba(101,53,5,.18);
  text-shadow:0 2px 0 rgba(126,65,5,.38)
}
.hwc-title-copy{min-width:0}
.hwc-titlebar h2,.hwc-clan-header h2{margin:0;color:#5f2f0e;font-size:31px;line-height:1;font-weight:1000;text-shadow:0 2px #fff3c3}
.hwc-titlebar p,.hwc-clan-header p{margin:7px 0 0;color:#8b5722;font-size:13px;font-weight:850}
.hwc-title-icons{margin-left:auto;display:flex;gap:10px;align-items:flex-start}
.hwc-title-icons span{
  width:62px;display:grid;justify-items:center;gap:4px;color:#774314
}
.hwc-title-icons b{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:3px solid #b56f17;background:linear-gradient(#fff5c6,#efbe4f);
  box-shadow:inset 0 0 0 2px #fff9df,0 3px 0 #965409;font-size:21px
}
.hwc-title-icons small{font-size:9px;font-weight:1000}

/* TWO COLUMNS */
.hwc-no-clan-grid{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.67fr) minmax(360px,.98fr);
  gap:14px;
}
.hwc-paper{
  min-height:0;
  position:relative;
  border:3px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg,#fff8e1 0%,#ffe9aa 100%);
  box-shadow:inset 0 0 0 4px rgba(255,252,235,.82),0 6px 0 #9c570d,0 12px 18px rgba(94,50,6,.09);
  overflow:hidden
}
.hwc-left-paper{display:flex;flex-direction:column}
.hwc-ranking{display:flex;flex-direction:column;padding:12px}

/* TABS */
.hwc-tabs{flex:0 0 58px;display:flex;gap:8px;padding:9px 9px 5px}
.hwc-tabs button{
  flex:1;height:48px;border-radius:17px;border:3px solid #b97618;
  color:#84521e;background:linear-gradient(#f7e3b8,#eec567);
  font-weight:1000;font-size:15px;letter-spacing:.01em;
  box-shadow:inset 0 0 0 3px rgba(255,251,232,.72),0 4px 0 #956014;
  transition:.12s transform,.12s filter
}
.hwc-tabs button:hover{filter:brightness(1.04);transform:translateY(-1px)}
.hwc-tabs button.active{
  position:relative;color:#fffdf2;border-color:#9e4f08;
  background:linear-gradient(#ffb42b 0%,#ff8f10 50%,#d76108 100%);
  box-shadow:inset 0 0 0 3px rgba(255,232,160,.48),0 5px 0 #7d3705,0 10px 13px rgba(116,54,5,.16);
  text-shadow:0 2px 0 rgba(113,45,0,.35)
}
.hwc-tabs button.active::after{
  content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);
  width:20px;height:12px;background:linear-gradient(#dc6c0c,#8a3c05);clip-path:polygon(0 0,100% 0,50% 100%)
}
.hwc-tabs button span{margin-right:6px}

/* CREATE SCREEN */
.hwc-create{
  flex:1;min-height:0;
  padding:10px 12px 12px;
  display:grid;
  grid-template-rows:132px minmax(205px,1fr) 130px 66px;
  gap:10px;
  overflow:auto;
  scrollbar-width:thin;scrollbar-color:#bd7920 transparent
}
.hwc-create::-webkit-scrollbar{width:7px}.hwc-create::-webkit-scrollbar-thumb{background:#c48326;border-radius:999px}

.hwc-create-showcase{
  min-height:132px;padding:10px 16px;
  display:flex;align-items:center;gap:18px;
  border:3px solid #cb7912;border-radius:22px;
  background:
    radial-gradient(circle at 92% 20%,rgba(255,255,255,.7) 0 5px,transparent 6px),
    linear-gradient(180deg,#ffe9a8 0%,#f7c65c 58%,#efa439 100%);
  box-shadow:inset 0 0 0 3px rgba(255,248,211,.78),0 5px 0 #99500a
}
.hwc-preview-badge{
  width:118px;height:118px;flex:0 0 118px;position:relative;display:grid;place-items:center;
  border-radius:28% 28% 38% 38%;
  background:linear-gradient(180deg,#ffd244,#e68418);
  box-shadow:inset 0 0 0 4px #fff2b2,0 0 0 4px #b96b16,0 5px 0 #823d08,0 10px 18px rgba(95,43,3,.2)
}
.hwc-preview-badge::before{
  content:"";position:absolute;inset:8px;border-radius:24% 24% 32% 32%;
  background:linear-gradient(180deg,#7739a8 0%,var(--cc,#e8562a) 100%);
  border:3px solid rgba(255,224,104,.95);box-shadow:inset 0 0 0 3px rgba(255,255,255,.12)
}
.hwc-preview-badge::after{content:"★";position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:36px;height:28px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(#ffcf45,#e85e18);color:#fff;border:2px solid #fff1a9;box-shadow:0 2px 0 #92420a;font-size:15px}
.hwc-preview-core{position:relative;z-index:2;width:68px;height:68px;display:grid;place-items:center}
.hwc-preview-core .hwc-emblem-svg{width:64px;height:64px}
.hwc-create-copy{min-width:0;flex:1}
.hwc-create-kicker{display:inline-flex;padding:4px 10px;border-radius:999px;border:1px solid #d99827;background:#fff5ce;color:#a95d12;font-size:9px;font-weight:1000;letter-spacing:.05em}
.hwc-create-copy h3{margin:7px 0 4px;color:#71370f;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hwc-create-copy p{margin:0 0 10px;color:#a1662a;font-size:13px;font-weight:800;font-style:italic}
.hwc-create-badges{display:flex;gap:8px;flex-wrap:wrap}
.hwc-create-badges span{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:0 11px;border-radius:999px;border:1px solid #d4a64f;background:linear-gradient(#fff9e5,#f7e2af);color:#74451a;font-size:11px;font-weight:900}

.hwc-pickers-row{min-height:0;display:grid;grid-template-columns:1.33fr 1fr;gap:10px}
.hwc-picker-card,.hwc-settings-card{
  min-height:0;padding:10px;border:2px solid #d7952c;border-radius:16px;
  background:linear-gradient(180deg,#fffaf0,#fff0bd);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)
}
.hwc-picker-card h4,.hwc-settings-card h4{margin:0 0 7px;color:#864918;font-size:12px;font-weight:1000}
.hwc-emblems{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.hwc-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.hwc-emblems button,.hwc-frames button{
  position:relative;padding:0;border:0;background:transparent;border-radius:12px;overflow:visible;
  transition:.12s transform,.12s filter
}
.hwc-emblems button{height:78px}.hwc-frames button{height:78px}
.hwc-emblems button:hover,.hwc-frames button:hover{transform:translateY(-2px);filter:brightness(1.04)}
.hwc-emblems img,.hwc-frames img{width:100%;height:100%;object-fit:fill;display:block;border-radius:11px}
.hwc-emblems button.active,.hwc-frames button.active{outline:3px solid #58b52a;outline-offset:-2px;box-shadow:0 0 0 2px #fff,0 4px 0 #3b891d;border-radius:12px}
.hwc-emblems button.active::after,.hwc-frames button.active::after{
  content:"✓";position:absolute;z-index:4;right:-5px;top:-7px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(#72d73b,#3cae22);color:#fff;border:2px solid #fff9d8;box-shadow:0 2px 0 #2d7a18;font-size:13px;font-weight:1000
}

.hwc-settings-card{display:grid;grid-template-rows:auto 48px 1fr;gap:5px}
.hwc-settings-grid{display:grid;grid-template-columns:1.15fr .62fr 1.2fr;gap:9px}
.hwc-settings-grid label{display:grid;grid-template-rows:auto 1fr;gap:3px;color:#8a541f;font-size:8px;font-weight:1000}
.hwc-settings-grid input{height:36px;padding:0 10px;border:2px solid #d68d20;border-radius:9px;background:#fffdf7;color:#6e3915;font-size:11px;outline:none;box-shadow:inset 0 2px 4px rgba(94,49,6,.06)}
.hwc-settings-grid input:focus{border-color:#f29316;box-shadow:0 0 0 3px rgba(239,151,28,.18)}
.hwc-color-line{display:flex;align-items:center;gap:12px;min-width:0}
.hwc-color-line>b{flex:0 0 auto;color:#85501c;font-size:9px}
.hwc-color-palette{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:nowrap}
.hwc-color-chip,.hwc-color-native{position:relative;width:31px;height:31px;flex:0 0 31px;padding:0;border:2px solid #d38a1b;background:var(--chip,#fff);border-radius:7px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.52),0 2px 0 #aa6410}
.hwc-color-chip.active{outline:3px solid #56ad2c;outline-offset:1px}
.hwc-color-chip.active::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:1000;text-shadow:0 1px 2px #5a350c}
.hwc-color-native{appearance:none;padding:0;overflow:hidden;background:linear-gradient(90deg,#ee7f17 0 40%,#fff 40% 60%,#ee7f17 60%)}
.hwc-color-native::-webkit-color-swatch-wrapper{padding:0}.hwc-color-native::-webkit-color-swatch{border:0}

.hwc-create-submit{
  align-self:center;justify-self:center;width:min(500px,76%);height:60px!important;margin:0!important;padding:0 24px!important;
  display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px!important;border:3px solid #a85509!important;
  background:linear-gradient(#ffc12e 0%,#ff9916 48%,#e87109 100%)!important;color:#fff!important;font-size:20px!important;font-weight:1000!important;
  box-shadow:inset 0 0 0 3px rgba(255,239,165,.52),0 5px 0 #813803,0 11px 17px rgba(100,45,3,.18)!important;text-shadow:0 2px 0 rgba(116,50,0,.36)
}
.hwc-create-submit span{font-size:24px}.hwc-create-submit small{font-size:10px;opacity:.88;margin-left:6px}
.hwc-create-submit:hover{filter:brightness(1.04);transform:translateY(-1px)}

/* FIND TAB */
.hwc-find-intro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.hwc-find-intro .hwc-big-crest{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffd94d,#ed9315);border:5px solid #fff1b3;box-shadow:0 0 0 3px #a65e11,0 5px 0 #814106}
.hwc-find-intro .hwc-emblem-svg{width:66px;height:66px}
.hwc-find-intro h3{margin:18px 0 5px;font-size:24px}.hwc-find-intro p{max-width:440px;color:#8d5a2c;font-weight:750}

/* RANKING */
.hwc-search{display:flex;gap:8px;flex:0 0 46px}
.hwc-search input{flex:1;height:44px;padding:0 12px;border:2px solid #cf7d16;border-radius:12px;background:#fffdf8;outline:none;color:#693715;box-shadow:inset 0 2px 4px rgba(104,54,7,.06)}
.hwc-search button{width:50px;height:44px;border-radius:12px;border:2px solid #a95e0d;background:linear-gradient(#fff0a7,#e7a229);box-shadow:inset 0 2px rgba(255,248,204,.8),0 3px 0 #844306;font-size:20px}
.hwc-ranking-title{flex:0 0 46px;margin:5px 0 0;display:grid;place-items:center;text-align:center;color:#824615;font-size:14px;border-bottom:1px solid rgba(204,139,38,.42)}
.hwc-ranks{flex:1;min-height:0;overflow:auto;padding:8px 3px;scrollbar-width:thin;scrollbar-color:#bd7b22 transparent}
.hwc-empty-clans{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#8b5725}
.hwc-empty-clans img{width:205px;height:auto;display:block;filter:drop-shadow(0 7px 3px rgba(135,76,12,.14))}
.hwc-empty-clans h4{margin:12px 0 6px;font-size:20px;color:#7b4316}
.hwc-empty-clans p{margin:0;font-size:13px;line-height:1.45;font-weight:750;color:#9b672e}
.hwc-empty-clans>span{margin-top:12px;color:#d69a2a;font-weight:1000}
.hwc-rank-row{display:grid;grid-template-columns:28px 42px minmax(0,1fr) 86px 36px;gap:7px;align-items:center;margin-bottom:7px;padding:8px;border-radius:13px;border:1px solid #ddb04b;background:linear-gradient(#fff8dd,#ffe6a4)}
.hwc-mini-crest{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#ffd447,#e58c16);border:3px solid #fff0af;box-shadow:0 0 0 2px #a05b11}.hwc-mini-crest .hwc-emblem-svg{width:25px;height:25px}
.hwc-rank-name{min-width:0}.hwc-rank-name strong,.hwc-rank-name span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hwc-rank-name strong{font-size:11px}.hwc-rank-name span{font-size:8px;color:#916438}.hwc-rank-score{text-align:right;font-size:9px}.hwc-rank-score b{display:block;font-size:12px}.hwc-join{width:30px;height:30px;border:0;border-radius:9px;background:linear-gradient(#8ee05f,#4bb934);color:#fff;font-size:18px;font-weight:1000;box-shadow:0 2px #337c28}.hwc-you{font-size:8px;font-weight:1000;color:#8b4d14}

/* EXISTING CLAN — keep functional and in the same palette. */
.hwc-clan-heading{flex:1;min-width:0}.hwc-clan-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hwc-clan-meta{display:flex;gap:7px;margin-top:8px}.hwc-clan-meta span{padding:4px 8px;border-radius:999px;background:#fff4c6;border:1px solid #d6a046;font-size:9px;font-weight:900}.hwc-clan-league{width:145px;min-height:64px;display:grid;place-items:center;align-content:center;text-align:center;border-radius:14px;border:2px solid #b67720;background:linear-gradient(#f8e6bd,#d8bc83);box-shadow:0 3px #98600f}.hwc-clan-league.open{background:linear-gradient(#dff7aa,#94d25a);color:#3b621d}.hwc-clan-league b{font-size:11px}.hwc-clan-league small{font-size:8px;font-weight:900}
.hwc-created-grid{flex:1;min-height:0;display:grid;grid-template-columns:1.05fr 1fr .85fr;gap:10px}.hwc-roster,.hwc-center{display:flex;flex-direction:column;min-height:0}.hwc-tabs.compact{flex:0 0 48px;padding:5px}.hwc-tabs.compact button{height:38px;font-size:12px}.hwc-roster-sub{padding:6px 8px;background:#f5d982;border-bottom:1px solid #d69a33;display:flex;justify-content:space-between;font-size:9px}.hwc-members{flex:1;overflow:auto;padding:6px}.hwc-member{display:grid;grid-template-columns:42px minmax(0,1fr) 60px auto;gap:6px;align-items:center;padding:6px;margin-bottom:5px;border-radius:10px;border:1px solid #a7c995;background:linear-gradient(#e8f7d5,#cfe6b0)}.hwc-member img,.hwc-request img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff}.hwc-member-main{min-width:0}.hwc-member-main b,.hwc-member-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hwc-member-main b{font-size:10px}.hwc-member-main span{font-size:8px;color:#7d6043}.hwc-member-stats{text-align:right;font-size:8px}.hwc-member-actions button,.hwc-request button{width:24px;height:24px;border:0;border-radius:7px;background:#eda11c;color:#fff}.hwc-member-actions .bad,.hwc-request .bad{background:#d84c31}.hwc-request{display:grid;grid-template-columns:40px 1fr 26px 26px;gap:5px;align-items:center;padding:6px;border-bottom:1px solid #e4c77e}.hwc-request small{display:block;font-size:8px}.hwc-center{overflow:hidden}.hwc-battle-lock,.hwc-battle-ready,.hwc-info{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.hwc-battle-scene{width:100%;height:160px;border-radius:14px;background:linear-gradient(#d9efff 0 55%,#8bcf6c 56% 75%,#e8bd61 76%);border:2px solid #d59b35;position:relative}.hwc-scene-team{position:absolute;top:34px;width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:var(--cc,#e8562a);border:6px solid #fff0b0}.hwc-scene-team.left{left:35px}.hwc-scene-team.right{right:35px;background:#b89972}.hwc-scene-team .hwc-emblem-svg{width:48px;height:48px}.hwc-scene-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:#2ba8ef;color:#fff;border:5px solid #fff;font-weight:1000}.hwc-progress{width:90%;height:26px;border-radius:999px;background:#7b5434;position:relative;overflow:hidden}.hwc-progress i{position:absolute;inset:2px auto 2px 2px;background:linear-gradient(#8de764,#4cb53a);border-radius:999px}.hwc-progress b{position:relative;line-height:26px;color:#fff}.hwc-vs{display:grid;grid-template-columns:1fr 45px 1fr;align-items:center;width:100%}.hwc-vs>div{display:grid;place-items:center}.hwc-big-team{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--cc,#e8562a);border:5px solid #fff0af}.hwc-big-team .hwc-emblem-svg{width:48px;height:48px}.hwc-info{align-items:stretch;justify-content:flex-start;text-align:left}.hwc-info h3{text-align:center}.hwc-info-hero{display:flex;gap:10px;align-items:center;padding:8px;border-radius:10px;background:#ffe6a0;border:1px solid #d49b35}.hwc-info-seal{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--cc,#e8562a);border:4px solid #fff0af}.hwc-info-seal .hwc-emblem-svg{width:32px;height:32px}.hwc-info dl{display:grid;grid-template-columns:86px 1fr;border:1px solid #dfb969;margin:8px 0}.hwc-info dt,.hwc-info dd{padding:6px;margin:0;border-bottom:1px solid #ead096;font-size:9px}.hwc-info dt{background:#f4daa0;font-weight:900}.hwc-info dd{background:#fff4ce}.hwc-info input,.hwc-info select{height:34px;border:1px solid #cb8b28;border-radius:8px;padding:0 8px;background:#fff}.hwc-info label{display:grid;gap:3px;margin:5px 0;font-size:9px}.hwc-form-row{display:grid;grid-template-columns:90px 1fr 1fr;gap:6px}.hwc-gold,.hwc-blue{border:0;border-radius:10px;padding:10px 18px;color:#fff;font-weight:1000}.hwc-gold{background:linear-gradient(#ffc23a,#e9820a);box-shadow:0 3px #9a5007}.hwc-blue{background:linear-gradient(#65d3ff,#188fd9);box-shadow:0 3px #0d659f}.hwc-leave{border:0;background:transparent;color:#b74b32;text-decoration:underline;font-weight:900;margin-top:8px}.hwc-empty-list.tall{display:grid;place-items:center;min-height:230px;color:#9d7047;font-weight:900}.hwc-loading{flex:1;display:grid;place-items:center;align-content:center;gap:8px}.hwc-loading span{font-size:64px}.hwc-loading b{font-size:18px}.hwc-loading small{color:#946b44}
.hwc-framed{position:relative;display:grid;place-items:center}.hwc-framed>i{display:grid;place-items:center;width:100%;height:100%;font-style:normal}.hwc-emblem-svg{width:100%;height:100%;display:block;overflow:visible}

@media(max-width:1080px){
  .mode-paper:has(.hwc-root){width:96vw!important;height:94vh!important}
  .hwc-no-clan-grid{grid-template-columns:1.55fr 1fr}
  .hwc-create{grid-template-rows:122px minmax(190px,1fr) 128px 62px}
  .hwc-emblems button,.hwc-frames button{height:70px}
}
@media(max-width:850px){
  .hwc-root{overflow:auto}.hwc-no-clan-grid,.hwc-created-grid{display:flex;flex-direction:column;overflow:visible}.hwc-title-icons{display:none}.hwc-pickers-row{grid-template-columns:1fr}.hwc-create{display:flex;flex-direction:column}.hwc-settings-grid{grid-template-columns:1fr}.hwc-color-palette{flex-wrap:wrap}.hwc-emblems{grid-template-columns:repeat(4,1fr)}.hwc-frames{grid-template-columns:repeat(4,1fr)}.hwc-ranking{min-height:420px}
}

/* === v6.1 hotfix: fit better + honey background everywhere === */
.mode-paper:has(.hwc-root){
  width:min(1240px,95vw)!important;
  height:min(730px,91vh)!important;
}
.hwc-root{
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.22) 0 4px,transparent 5px) 0 0/160px 160px,
    linear-gradient(135deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.07) 75%,transparent 75%,transparent) 0 0/22px 22px,
    linear-gradient(180deg,#f5e5b1 0%,#f1d388 100%);
}
.hwc-left-paper,
.hwc-ranking,
.hwc-picker-card,
.hwc-settings-card{
  background:
    linear-gradient(135deg,rgba(255,255,255,.10) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.06) 75%,transparent 75%,transparent) 0 0/20px 20px,
    linear-gradient(180deg,#f6e8ba 0%,#efd38d 100%);
}
.hwc-titlebar,.hwc-clan-header{
  flex:0 0 96px;min-height:96px;
  margin-bottom:10px;
  padding:10px 64px 10px 14px;
}
.hwc-titlebar h2,.hwc-clan-header h2{font-size:28px}
.hwc-titlebar p,.hwc-clan-header p{font-size:12px}
.hwc-title-crest,.hwc-clan-crest{width:68px;height:68px;flex-basis:68px;font-size:36px}
.hwc-title-icons span{width:56px}.hwc-title-icons b{width:40px;height:40px;font-size:18px}
.hwc-no-clan-grid{grid-template-columns:minmax(0,1.6fr) minmax(345px,.92fr);gap:12px}
.hwc-left-paper,.hwc-ranking{padding:8px;border-radius:22px}
.hwc-tabs{flex:0 0 56px;padding:5px;gap:7px}
.hwc-tabs button{height:42px;font-size:15px;border-radius:15px}
.hwc-tabs button.active::after{bottom:-10px;width:18px;height:10px}
.hwc-create{
  padding:8px 10px 10px;
  grid-template-rows:114px minmax(172px,1fr) 112px 56px;
  gap:8px;
}
.hwc-create-showcase{min-height:114px;padding:8px 12px;gap:12px;border-radius:20px}
.hwc-preview-badge{width:96px;height:96px;flex-basis:96px}
.hwc-preview-badge::after{top:-10px;width:32px;height:24px;font-size:13px}
.hwc-preview-badge::before{inset:7px}
.hwc-preview-core{width:56px;height:56px}.hwc-preview-core .hwc-emblem-svg{width:52px;height:52px}
.hwc-create-copy h3{font-size:17px;margin:5px 0 3px}
.hwc-create-copy p{font-size:12px;margin:0 0 8px}
.hwc-create-kicker{font-size:8px;padding:3px 8px}
.hwc-create-badges{gap:6px}.hwc-create-badges span{min-height:24px;padding:0 9px;font-size:10px}
.hwc-pickers-row{grid-template-columns:1.08fr .92fr;gap:8px}
.hwc-picker-card,.hwc-settings-card{padding:8px;border-radius:14px}
.hwc-picker-card h4,.hwc-settings-card h4{font-size:11px;margin-bottom:6px}
.hwc-emblems{grid-template-columns:repeat(5,1fr);gap:5px}
.hwc-frames{grid-template-columns:repeat(4,1fr);gap:5px}
.hwc-emblems button,.hwc-frames button{height:72px}
.hwc-settings-card{grid-template-rows:auto 42px 1fr;gap:4px}
.hwc-settings-grid{grid-template-columns:1.1fr .55fr 1.15fr;gap:7px}
.hwc-settings-grid label{font-size:7px}
.hwc-settings-grid input{height:32px;font-size:10px;padding:0 8px}
.hwc-color-line{gap:8px}
.hwc-color-line>b{font-size:8px}
.hwc-color-palette{gap:5px}
.hwc-color-chip,.hwc-color-native{width:28px;height:28px;flex-basis:28px;border-radius:7px}
.hwc-create-submit{width:min(430px,72%);height:52px!important;font-size:17px!important}
.hwc-create-submit span{font-size:20px}.hwc-create-submit small{font-size:9px}
.hwc-search{flex:0 0 42px}.hwc-search input{height:40px}.hwc-search button{width:46px;height:40px}
.hwc-ranking-title{flex:0 0 40px;font-size:13px;margin-top:3px}
.hwc-ranks{padding:6px 2px;background:transparent}
.hwc-empty-clans img{width:190px}
.hwc-empty-clans h4{font-size:18px;margin-top:10px}
.hwc-empty-clans p{font-size:12px}
.hwc-rank-row{padding:7px;gap:6px}

@media(max-width:1080px){
  .mode-paper:has(.hwc-root){height:min(710px,92vh)!important}
  .hwc-no-clan-grid{grid-template-columns:minmax(0,1.45fr) minmax(320px,.9fr)}
  .hwc-emblems button,.hwc-frames button{height:66px}
  .hwc-create{grid-template-rows:106px minmax(160px,1fr) 106px 52px}
  .hwc-preview-badge{width:88px;height:88px;flex-basis:88px}
}

/* === v6.2: crisp vector emblems + REAL functional clan frames === */
.hwc-create{
  grid-template-rows:104px minmax(198px,1fr) 104px 52px;
}
.hwc-pickers-row{grid-template-columns:1.06fr .94fr;min-height:198px}
.hwc-picker-card{overflow:auto;scrollbar-width:thin;scrollbar-color:#c7892e transparent}
.hwc-emblems{grid-template-columns:repeat(6,1fr);gap:5px}
.hwc-frames{grid-template-columns:repeat(4,1fr);gap:5px}
.hwc-emblems button,.hwc-frames button{
  height:62px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:3px 2px;
  overflow:visible;
  border:1px solid #dfa444;
  background:linear-gradient(180deg,#fff9df,#f5dfaa);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 2px 0 #bd7a1c;
}
.hwc-emblems button small,.hwc-frames button small{
  display:block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:7px;
  line-height:1;
  color:#80501f;
  font-weight:900;
}
.hwc-emblem-option{width:38px;height:38px;display:grid;place-items:center}
.hwc-emblem-option .hwc-emblem-svg{width:36px;height:36px;display:block}
.hwc-empty-clans img{display:none!important}
.hwc-empty-mascot-svg{width:190px;height:190px;display:block;filter:drop-shadow(0 7px 3px rgba(135,76,12,.14))}

/* One renderer is used everywhere: preview, frame picker, ranking and existing clan. */
.hwc-framed{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  overflow:visible!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.hwc-framed>i{
  position:relative;
  z-index:3;
  width:68%;
  height:68%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,.28),transparent 32%),
    linear-gradient(180deg,rgba(124,62,173,.74),var(--cc,#e8562a));
  border:2px solid rgba(255,236,157,.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);
}
.hwc-framed>i .hwc-emblem-svg{width:72%;height:72%;display:block}
.hwc-framed::before,.hwc-framed::after{pointer-events:none;position:absolute;content:"";z-index:1}

.hwc-preview-badge{
  width:96px!important;height:96px!important;flex:0 0 96px!important;
  border-radius:0!important;background:none!important;box-shadow:none!important;
}
.hwc-preview-badge::before,.hwc-preview-badge::after{inset:auto}
.hwc-frame-thumb{width:48px;height:48px;flex:0 0 48px}
.hwc-frame-thumb>i{width:62%;height:62%}
.hwc-frame-thumb>i .hwc-emblem-svg{width:72%;height:72%}
.hwc-clan-crest.hwc-framed,.hwc-mini-crest.hwc-framed,.hwc-info-seal.hwc-framed,.hwc-big-team.hwc-framed{background:none!important}

/* CLASSIC */
.frame-classic::before{
  inset:4%;
  border-radius:50%;
  background:linear-gradient(145deg,#fff0a6 0%,#f6c247 40%,#b86a13 100%);
  box-shadow:0 0 0 2px #8a4a10,0 3px 5px rgba(93,49,5,.22);
}
.frame-classic::after{
  inset:11%;
  border-radius:50%;
  border:2px solid rgba(255,248,209,.9);
  z-index:2;
}

/* ROYAL */
.frame-royal::before{
  inset:2%;
  border-radius:26% 26% 36% 36%;
  background:linear-gradient(145deg,#ffe36e 0 18%,#b547ae 20% 34%,#f9d75c 36% 52%,#8b328c 54% 70%,#d38c18 72%);
  box-shadow:0 0 0 2px #7a3e10,0 3px 6px rgba(92,44,8,.25);
}
.frame-royal::after{
  content:"♛";
  z-index:4;
  top:-10%;left:50%;transform:translateX(-50%);
  width:30%;height:24%;display:grid;place-items:center;
  color:#ffe370;font-size:.28em;line-height:1;text-shadow:0 1px #8b4a10;
}

/* INFERNO */
.frame-inferno::before{
  inset:0;
  clip-path:polygon(50% 0,59% 12%,71% 4%,76% 18%,91% 14%,87% 31%,100% 38%,88% 50%,100% 63%,85% 69%,91% 86%,74% 82%,68% 98%,55% 87%,45% 100%,34% 86%,18% 91%,20% 73%,3% 67%,15% 52%,0 40%,17% 34%,12% 17%,29% 20%,35% 4%,45% 14%);
  background:linear-gradient(180deg,#ffdd58 0%,#ff8b18 45%,#d6450b 100%);
  filter:drop-shadow(0 2px 1px #8e3c0a);
}
.frame-inferno::after{
  inset:10%;border-radius:50%;border:2px solid rgba(255,241,177,.9);z-index:2;
}

/* FROST */
.frame-frost::before{
  inset:0;
  clip-path:polygon(50% 0,59% 13%,72% 3%,77% 19%,94% 13%,88% 31%,100% 42%,87% 51%,99% 65%,81% 69%,84% 88%,65% 82%,50% 100%,37% 83%,18% 89%,21% 70%,2% 65%,15% 51%,0 41%,14% 31%,8% 13%,25% 19%,29% 3%,42% 13%);
  background:linear-gradient(180deg,#dffaff,#70d8ff 42%,#2f8fd1 100%);
  filter:drop-shadow(0 2px 1px #27618e);
}
.frame-frost::after{inset:10%;border-radius:50%;border:2px solid #eaffff;z-index:2}

/* FOREST */
.frame-forest::before{
  inset:3%;border-radius:42% 58% 46% 54%;
  background:linear-gradient(135deg,#d3e963 0%,#69a92f 42%,#3f7426 100%);
  box-shadow:0 0 0 2px #4d6f22,0 3px 5px rgba(55,80,25,.2);
}
.frame-forest::after{
  content:"❧";z-index:4;right:-2%;top:-6%;color:#d8ee79;font-size:.34em;text-shadow:0 1px #456820;transform:rotate(24deg);
}

/* SHADOW */
.frame-shadow::before{
  inset:2%;
  clip-path:polygon(50% 0,78% 10%,96% 34%,90% 66%,69% 92%,36% 97%,8% 75%,1% 43%,16% 15%);
  background:linear-gradient(145deg,#c29be1,#6b477f 45%,#2f223d 100%);
  filter:drop-shadow(0 2px 1px #24172d);
}
.frame-shadow::after{inset:10%;border-radius:50%;border:2px solid #e4c6f5;z-index:2}

/* CRYSTAL */
.frame-crystal::before{
  inset:0;
  clip-path:polygon(50% 0,88% 16%,100% 50%,84% 88%,50% 100%,14% 86%,0 50%,17% 14%);
  background:linear-gradient(135deg,#e9ffff 0%,#9ddcff 28%,#a47cff 58%,#63d7e2 100%);
  filter:drop-shadow(0 2px 1px #397f99);
}
.frame-crystal::after{inset:10%;clip-path:polygon(50% 0,88% 16%,100% 50%,84% 88%,50% 100%,14% 86%,0 50%,17% 14%);border:2px solid rgba(255,255,255,.92);z-index:2}

/* SUNBURST */
.frame-sunburst::before{
  inset:-1%;
  clip-path:polygon(50% 0,58% 13%,71% 3%,76% 17%,91% 12%,87% 29%,100% 38%,88% 50%,100% 62%,86% 70%,92% 86%,75% 82%,69% 98%,56% 87%,50% 100%,43% 87%,30% 98%,25% 82%,8% 86%,14% 70%,0 62%,12% 50%,0 38%,13% 29%,9% 12%,24% 17%,29% 3%,42% 13%);
  background:linear-gradient(180deg,#fff084 0%,#ffc62f 46%,#e98b14 100%);
  filter:drop-shadow(0 2px 1px #9a5b12);
}
.frame-sunburst::after{inset:11%;border-radius:50%;border:2px solid #fff3ac;z-index:2}

/* TRIANGLE */
.frame-triangle::before{
  left:2%;right:2%;top:0;bottom:1%;
  clip-path:polygon(50% 0,97% 91%,3% 91%);
  background:linear-gradient(180deg,#f5d95f 0%,#7bb13b 55%,#3f7727 100%);
  filter:drop-shadow(0 2px 1px #5d6c22);
}
.frame-triangle::after{
  left:15%;right:15%;top:15%;bottom:14%;
  clip-path:polygon(50% 0,96% 91%,4% 91%);
  background:#fff1b1;z-index:2;
}
.frame-triangle>i{z-index:3;width:54%;height:54%;margin-top:10%}

/* DIAMOND */
.frame-diamond::before{
  inset:8%;transform:rotate(45deg);border-radius:9%;
  background:linear-gradient(135deg,#eefcff,#57c8f3 35%,#2588d6 70%,#d9f8ff 100%);
  box-shadow:0 0 0 2px #286b9e,0 2px 4px rgba(39,93,132,.25);
}
.frame-diamond::after{inset:18%;transform:rotate(45deg);border:2px solid rgba(255,255,255,.9);z-index:2}

/* HEX */
.frame-hex::before{
  inset:2%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:linear-gradient(180deg,#fff1a7 0%,#f3b52c 52%,#b8650d 100%);
  filter:drop-shadow(0 2px 1px #7d4208);
}
.frame-hex::after{inset:11%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#fff2b9;z-index:2}

/* SPIKE */
.frame-spike::before{
  inset:0;
  clip-path:polygon(50% 0,59% 12%,75% 4%,79% 20%,96% 18%,88% 36%,100% 50%,88% 64%,96% 82%,79% 80%,75% 96%,59% 88%,50% 100%,41% 88%,25% 96%,21% 80%,4% 82%,12% 64%,0 50%,12% 36%,4% 18%,21% 20%,25% 4%,41% 12%);
  background:linear-gradient(145deg,#d5a7c8 0%,#514052 45%,#211b22 100%);
  filter:drop-shadow(0 2px 1px #20191f);
}
.frame-spike::after{inset:12%;border-radius:50%;border:2px solid #ead0df;z-index:2}

/* Active selection remains visible, but does not replace the real frame. */
.hwc-emblems button.active,.hwc-frames button.active{
  outline:2px solid #55b52d;outline-offset:-1px;
  box-shadow:0 0 0 2px #fff,0 3px 0 #3d8a24;
}
.hwc-emblems button.active::after,.hwc-frames button.active::after{
  right:-4px;top:-6px;width:21px;height:21px;font-size:11px;
}

@media(max-width:1080px){
  .hwc-create{grid-template-rows:98px minmax(188px,1fr) 100px 50px}
  .hwc-emblems button,.hwc-frames button{height:59px}
  .hwc-frame-thumb{width:44px;height:44px}
  .hwc-emblem-option{width:34px;height:34px}.hwc-emblem-option .hwc-emblem-svg{width:32px;height:32px}
}

/* === v6.3: premium art frames + smile shield return === */
.hwc-empty-clans img.hwc-empty-mascot-png{
  display:block!important;
  width:220px;
  max-width:72%;
  height:auto;
  filter:drop-shadow(0 8px 8px rgba(154,96,23,.18));
}
.hwc-empty-mascot-svg{display:none!important}

/* stop old geometric pseudo-frames, use premium frame art instead */
.hwc-framed::before,.hwc-framed::after,
.hwc-frame-thumb::before,.hwc-frame-thumb::after{content:none!important;display:none!important}

.hwc-framed{
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
  isolation:isolate;
}
.hwc-framed > i,
.hwc-framed .hwc-crest-core,
.hwc-framed .hwc-crest-core > i{display:grid;place-items:center}
.hwc-framed .hwc-crest-core{
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb,var(--cc) 72%, #ffffff 28%) 0%, var(--cc) 62%, color-mix(in srgb,var(--cc) 70%, #6d2f16 30%) 100%);
  box-shadow:inset 0 0 0 3px rgba(255,242,196,.72), inset 0 -8px 12px rgba(109,47,22,.14);
  z-index:1;
}
.hwc-framed .hwc-crest-core > i{width:100%;height:100%}
.hwc-framed .hwc-crest-core .hwc-emblem-svg{width:66%;height:66%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.hwc-frame-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
  filter:drop-shadow(0 4px 3px rgba(117,65,14,.18));
}

/* shape variations for core */
.hwc-framed.shape-triangle .hwc-crest-core{clip-path:polygon(50% 3%, 95% 86%, 5% 86%); inset:13%;}
.hwc-framed.shape-triangle .hwc-crest-core > i{margin-top:8%}
.hwc-framed.shape-diamond .hwc-crest-core{clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); inset:17%;}
.hwc-framed.shape-hex .hwc-crest-core{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); inset:14%;}

/* thumbs */
.hwc-emblem-option{
  width:44px;height:44px;display:grid;place-items:center;
}
.hwc-emblem-art{width:42px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 2px 2px rgba(129,70,17,.12))}
.hwc-frame-thumb-fancy{
  position:relative;
  width:50px;height:50px;display:grid;place-items:center;flex:0 0 50px;
}
.hwc-frame-thumb-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}
.hwc-frame-thumb-core{
  position:absolute;inset:19%;display:grid;place-items:center;z-index:1;border-radius:50%;
  background:linear-gradient(180deg, color-mix(in srgb,var(--cc) 75%, #ffffff 25%) 0%, var(--cc) 64%, color-mix(in srgb,var(--cc) 75%, #6d2f16 25%) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,244,205,.72);
}
.hwc-frame-thumb-core .hwc-emblem-svg{width:66%;height:66%}
.hwc-frames button .hwc-frame-thumb-fancy{margin-bottom:2px}
.hwc-emblems button,.hwc-frames button{
  background:linear-gradient(180deg,#fff9e6 0%,#f3dc9b 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65),0 3px 0 #c2801e;
}
.hwc-emblems button:hover,.hwc-frames button:hover{filter:brightness(1.03);transform:translateY(-1px)}
.hwc-emblems button small,.hwc-frames button small{font-size:9px;color:#8d581f;font-weight:900}
.hwc-emblems button.active,.hwc-frames button.active{
  outline:3px solid #58b52a;
  outline-offset:-2px;
  box-shadow:0 0 0 2px #fff, 0 4px 0 #3b891d, inset 0 0 0 2px rgba(255,255,255,.7);
}

/* bigger, richer hero crest */
.hwc-preview-badge{filter:drop-shadow(0 6px 6px rgba(120,65,14,.18))}
.hwc-preview-badge .hwc-crest-core .hwc-emblem-svg{width:60%;height:60%}
.hwc-mini-crest .hwc-crest-core .hwc-emblem-svg,
.hwc-clan-crest .hwc-crest-core .hwc-emblem-svg{width:60%;height:60%}

/* ranking empty panel image spacing */
.hwc-empty-clans{gap:10px}
.hwc-empty-clans h4{margin-top:4px}

@media (max-width:1080px){
  .hwc-empty-clans img.hwc-empty-mascot-png{width:190px}
  .hwc-emblem-option{width:38px;height:38px}
  .hwc-emblem-art{width:36px;height:36px}
  .hwc-frame-thumb-fancy{width:44px;height:44px;flex-basis:44px}
}


/* === v6.3.1 hotfix: transparent centered frames === */
.hwc-frame-art{inset:-3%;width:106%;height:106%;object-position:center center}
.hwc-frame-thumb-art{inset:-4%;width:108%;height:108%;object-position:center center}
.hwc-framed .hwc-crest-core{inset:20%}
.hwc-framed.shape-triangle .hwc-crest-core{inset:16%}
.hwc-framed.shape-diamond .hwc-crest-core{inset:19%}
.hwc-framed.shape-hex .hwc-crest-core{inset:16%}
.hwc-preview-badge .hwc-crest-core{inset:19%}
.hwc-preview-badge.shape-triangle .hwc-crest-core{inset:15%}
.hwc-preview-badge.shape-diamond .hwc-crest-core{inset:18%}
.hwc-preview-badge.shape-hex .hwc-crest-core{inset:15%}


/* === v6.3.2 CSS-only frames, centered, no PNG overlays === */
.hwc-emblem-option .hwc-emblem-svg{width:34px;height:34px;display:block;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.hwc-frame-thumb{width:50px;height:50px;flex:0 0 50px}
.hwc-frame-thumb .hwc-crest-core{inset:20%}
.hwc-frame-thumb .hwc-crest-core .hwc-emblem-svg{width:58%;height:58%}
.hwc-preview-badge.hwc-framed,.hwc-clan-crest.hwc-framed,.hwc-mini-crest.hwc-framed,.hwc-info-seal.hwc-framed,.hwc-big-team.hwc-framed,.hwc-frame-thumb.hwc-framed{background:none!important}
.hwc-frame-art,.hwc-frame-thumb-art{display:none!important}
.hwc-framed{overflow:visible}
.hwc-framed::before,.hwc-framed::after{content:"";position:absolute;pointer-events:none}
.hwc-preview-badge{width:98px!important;height:98px!important;flex:0 0 98px!important}
.hwc-preview-badge .hwc-crest-core{inset:20%}
.hwc-preview-badge.frame-triangle .hwc-crest-core{inset:16%}
.hwc-preview-badge.frame-diamond .hwc-crest-core{inset:19%}
.hwc-preview-badge.frame-hex .hwc-crest-core{inset:16%}
.hwc-clan-crest{width:92px;height:92px;flex:0 0 92px}
.hwc-mini-crest{width:50px;height:50px;flex:0 0 50px}
.hwc-info-seal{width:68px;height:68px;flex:0 0 68px}
.hwc-big-team{width:100px;height:100px;display:grid;place-items:center}
.hwc-big-team .hwc-crest-core{inset:19%}
.hwc-framed.frame-classic::before{inset:4%;border-radius:50%;background:linear-gradient(145deg,#fff0a6 0%,#f6c247 40%,#b86a13 100%);box-shadow:0 0 0 2px #8a4a10,0 3px 5px rgba(93,49,5,.22)}
.hwc-framed.frame-classic::after{inset:12%;border-radius:50%;border:2px solid rgba(255,248,209,.92);z-index:2}
.hwc-framed.frame-royal::before{inset:5%;border-radius:26% 26% 36% 36%;background:linear-gradient(145deg,#ffe36e 0 18%,#b547ae 20% 34%,#f9d75c 36% 52%,#8b328c 54% 70%,#d38c18 72%);box-shadow:0 0 0 2px #7a3e10,0 3px 6px rgba(92,44,8,.25)}
.hwc-framed.frame-royal::after{content:"♛";z-index:4;top:-10%;left:50%;transform:translateX(-50%);width:30%;height:24%;display:grid;place-items:center;color:#ffe370;font-size:.9rem;line-height:1;text-shadow:0 1px #8b4a10}
.hwc-framed.frame-inferno::before{inset:2%;clip-path:polygon(50% 0,59% 12%,71% 4%,76% 18%,91% 14%,87% 31%,100% 38%,88% 50%,100% 63%,85% 69%,91% 86%,74% 82%,68% 98%,55% 87%,45% 100%,34% 86%,18% 91%,20% 73%,3% 67%,15% 52%,0 40%,17% 34%,12% 17%,29% 20%,35% 4%,45% 14%);background:linear-gradient(180deg,#ffdd58 0%,#ff8b18 45%,#d6450b 100%);filter:drop-shadow(0 2px 1px #8e3c0a)}
.hwc-framed.frame-inferno::after{inset:13%;border-radius:50%;border:2px solid rgba(255,241,177,.9);z-index:2}
.hwc-framed.frame-frost::before{inset:2%;clip-path:polygon(50% 0,59% 13%,72% 3%,77% 19%,94% 13%,88% 31%,100% 42%,87% 51%,99% 65%,81% 69%,84% 88%,65% 82%,50% 100%,37% 83%,18% 89%,21% 70%,2% 65%,15% 51%,0 41%,14% 31%,8% 13%,25% 19%,29% 3%,42% 13%);background:linear-gradient(180deg,#dffaff,#70d8ff 42%,#2f8fd1 100%);filter:drop-shadow(0 2px 1px #27618e)}
.hwc-framed.frame-frost::after{inset:13%;border-radius:50%;border:2px solid #eaffff;z-index:2}
.hwc-framed.frame-forest::before{inset:5%;border-radius:42% 58% 46% 54%;background:linear-gradient(135deg,#d3e963 0%,#69a92f 42%,#3f7426 100%);box-shadow:0 0 0 2px #4d6f22,0 3px 5px rgba(55,80,25,.2)}
.hwc-framed.frame-forest::after{content:"❧";z-index:4;right:-2%;top:-6%;color:#d8ee79;font-size:1rem;text-shadow:0 1px #456820;transform:rotate(24deg)}
.hwc-framed.frame-shadow::before{inset:5%;clip-path:polygon(50% 0,78% 10%,96% 34%,90% 66%,69% 92%,36% 97%,8% 75%,1% 43%,16% 15%);background:linear-gradient(145deg,#c29be1,#6b477f 45%,#2f223d 100%);filter:drop-shadow(0 2px 1px #24172d)}
.hwc-framed.frame-shadow::after{inset:13%;border-radius:50%;border:2px solid #e4c6f5;z-index:2}
.hwc-framed.frame-crystal::before{inset:3%;clip-path:polygon(50% 0,88% 16%,100% 50%,84% 88%,50% 100%,14% 86%,0 50%,17% 14%);background:linear-gradient(135deg,#e9ffff 0%,#9ddcff 28%,#a47cff 58%,#63d7e2 100%);filter:drop-shadow(0 2px 1px #397f99)}
.hwc-framed.frame-crystal::after{inset:13%;clip-path:polygon(50% 0,88% 16%,100% 50%,84% 88%,50% 100%,14% 86%,0 50%,17% 14%);border:2px solid rgba(255,255,255,.92);z-index:2}
.hwc-framed.frame-sunburst::before{inset:1%;clip-path:polygon(50% 0,58% 13%,71% 3%,76% 17%,91% 12%,87% 29%,100% 38%,88% 50%,100% 62%,86% 70%,92% 86%,75% 82%,69% 98%,56% 87%,50% 100%,43% 87%,30% 98%,25% 82%,8% 86%,14% 70%,0 62%,12% 50%,0 38%,13% 29%,9% 12%,24% 17%,29% 3%,42% 13%);background:linear-gradient(180deg,#fff084 0%,#ffc62f 46%,#e98b14 100%);filter:drop-shadow(0 2px 1px #9a5b12)}
.hwc-framed.frame-sunburst::after{inset:13%;border-radius:50%;border:2px solid #fff3ac;z-index:2}
.hwc-framed.frame-triangle::before{left:3%;right:3%;top:2%;bottom:2%;clip-path:polygon(50% 0,97% 91%,3% 91%);background:linear-gradient(180deg,#f5d95f 0%,#7bb13b 55%,#3f7727 100%);filter:drop-shadow(0 2px 1px #5d6c22)}
.hwc-framed.frame-triangle::after{left:16%;right:16%;top:17%;bottom:16%;clip-path:polygon(50% 0,96% 91%,4% 91%);background:#fff1b1;z-index:2}
.hwc-framed.frame-triangle .hwc-crest-core{clip-path:polygon(50% 3%,95% 86%,5% 86%);inset:17%}
.hwc-framed.frame-triangle .hwc-crest-core > i{margin-top:8%}
.hwc-framed.frame-diamond::before{inset:10%;transform:rotate(45deg);border-radius:10%;background:linear-gradient(135deg,#eefcff,#57c8f3 35%,#2588d6 70%,#d9f8ff 100%);box-shadow:0 0 0 2px #286b9e,0 2px 4px rgba(39,93,132,.25)}
.hwc-framed.frame-diamond::after{inset:20%;transform:rotate(45deg);border:2px solid rgba(255,255,255,.9);z-index:2}
.hwc-framed.frame-diamond .hwc-crest-core{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);inset:21%}
.hwc-framed.frame-hex::before{inset:4%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(180deg,#fff1a7 0%,#f3b52c 52%,#b8650d 100%);filter:drop-shadow(0 2px 1px #7d4208)}
.hwc-framed.frame-hex::after{inset:14%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#fff2b9;z-index:2}
.hwc-framed.frame-hex .hwc-crest-core{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);inset:17%}
.hwc-framed.frame-spike::before{inset:2%;clip-path:polygon(50% 0,59% 12%,75% 4%,79% 20%,96% 18%,88% 36%,100% 50%,88% 64%,96% 82%,79% 80%,75% 96%,59% 88%,50% 100%,41% 88%,25% 96%,21% 80%,4% 82%,12% 64%,0 50%,12% 36%,4% 18%,21% 20%,25% 4%,41% 12%);background:linear-gradient(145deg,#d5a7c8 0%,#514052 45%,#211b22 100%);filter:drop-shadow(0 2px 1px #20191f)}
.hwc-framed.frame-spike::after{inset:14%;border-radius:50%;border:2px solid #ead0df;z-index:2}
@media (max-width:1080px){.hwc-frame-thumb{width:44px;height:44px;flex-basis:44px}.hwc-emblem-option .hwc-emblem-svg{width:30px;height:30px}}


/* === v6.3.3 stronger emblems and hand-made frames === */
.hwc-emblems button,.hwc-frames button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:108px}
.hwc-emblems button small,.hwc-frames button small{font-size:10px;line-height:1.05;min-height:20px;color:#8a5519;font-weight:800}
.hwc-emblem-option{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(180deg,#fff6d8,#f5d483);box-shadow:inset 0 0 0 2px #fff5cf,0 1px 0 #f0b95b,0 2px 5px rgba(149,97,20,.18)}
.hwc-symbol-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden;border:2px solid #c57b1f;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 3px rgba(130,79,12,.18)}
.hwc-symbol-badge::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 45%)}
.hwc-symbol-badge .hwc-emblem-svg{width:30px;height:30px;position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}
.hwc-emblems button.active .hwc-emblem-option,.hwc-emblems button:hover .hwc-emblem-option{transform:translateY(-1px);box-shadow:0 0 0 2px #59ba31,inset 0 0 0 2px #fff8dc,0 4px 10px rgba(84,146,38,.22)}
.hwc-emblems button[data-clan-emblem="sun"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff6a3,#f7b81e 58%,#d77214 100%)}
.hwc-emblems button[data-clan-emblem="crown"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff6bc,#efcc53 55%,#c78418 100%)}
.hwc-emblems button[data-clan-emblem="swords"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff8de,#e7d1aa 55%,#b17e40 100%)}
.hwc-emblems button[data-clan-emblem="diamond"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#ebfcff,#7fd3ff 50%,#367fd6 100%)}
.hwc-emblems button[data-clan-emblem="fire"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff2a5,#ff9f2d 52%,#db4a15 100%)}
.hwc-emblems button[data-clan-emblem="moon"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff7d1,#f2cd7a 52%,#ca8a18 100%)}
.hwc-emblems button[data-clan-emblem="skull"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fdf8ee,#e0cda9 55%,#aa7d43 100%)}
.hwc-emblems button[data-clan-emblem="leaf"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#ebffc9,#8dd753 55%,#488d27 100%)}
.hwc-emblems button[data-clan-emblem="bolt"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff8b8,#ffd94f 55%,#ef9a0f 100%)}
.hwc-emblems button[data-clan-emblem="eye"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#f3fdff,#7fcef7 55%,#2b7ed2 100%)}
.hwc-emblems button[data-clan-emblem="star"] .hwc-symbol-badge{background:radial-gradient(circle at 35% 30%,#fff8b8,#ffc54f 55%,#ef7c1f 100%)}

.hwc-frame-thumb{width:60px;height:60px;display:grid;place-items:center;position:relative;margin-top:2px}
.hwc-frame-thumb .hwc-crest-core{display:none!important}
.hwc-frame-demo::before,.hwc-frame-demo::after{content:"";position:absolute;pointer-events:none}
.hwc-frame-hole{position:absolute;z-index:2;background:rgba(255,251,235,.96);box-shadow:inset 0 0 0 1px rgba(255,219,136,.95), inset 0 2px 4px rgba(255,211,98,.25)}
.hwc-frame-spark{position:absolute;z-index:3;font-size:15px;color:#f59e1a;text-shadow:0 1px 0 #fff6bf,0 1px 3px rgba(172,100,10,.22)}
.hwc-frames button.active .hwc-frame-thumb,.hwc-frames button:hover .hwc-frame-thumb{transform:translateY(-1px);filter:drop-shadow(0 4px 6px rgba(108,66,12,.2))}
.hwc-frames button.active{box-shadow:0 0 0 2px #59ba31 inset,0 0 0 1px #ffffff}
.hwc-frames button[data-clan-frame="classic"] .hwc-frame-hole{inset:20%;border-radius:50%}
.hwc-frames button[data-clan-frame="royal"] .hwc-frame-hole{inset:24% 22% 20%;border-radius:28% 28% 38% 38%}
.hwc-frames button[data-clan-frame="inferno"] .hwc-frame-hole{inset:24%;border-radius:50%}
.hwc-frames button[data-clan-frame="frost"] .hwc-frame-hole{inset:24%;border-radius:50%}
.hwc-frames button[data-clan-frame="forest"] .hwc-frame-hole{inset:23%;border-radius:42% 58% 46% 54%}
.hwc-frames button[data-clan-frame="shadow"] .hwc-frame-hole{inset:23%;clip-path:polygon(50% 2%,78% 11%,96% 35%,90% 66%,68% 91%,36% 96%,8% 75%,2% 43%,15% 14%)}
.hwc-frames button[data-clan-frame="crystal"] .hwc-frame-hole{inset:24%;clip-path:polygon(50% 2%,88% 18%,98% 50%,84% 87%,50% 98%,15% 85%,2% 50%,18% 16%)}
.hwc-frames button[data-clan-frame="sunburst"] .hwc-frame-hole{inset:24%;border-radius:50%}
.hwc-frames button[data-clan-frame="triangle"] .hwc-frame-hole{left:27%;right:27%;top:28%;bottom:21%;clip-path:polygon(50% 2%,95% 92%,5% 92%)}
.hwc-frames button[data-clan-frame="diamond"] .hwc-frame-hole{inset:28%;transform:rotate(45deg);border-radius:6px}
.hwc-frames button[data-clan-frame="hex"] .hwc-frame-hole{inset:24%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hwc-frames button[data-clan-frame="spike"] .hwc-frame-hole{inset:24%;border-radius:50%}
.hwc-frames button .hwc-frame-thumb.frame-classic::before{inset:8%;border-radius:50%;background:linear-gradient(145deg,#fff1aa,#f8c848 42%,#b86b13 100%);box-shadow:0 0 0 2px #8a4a10}
.hwc-frames button .hwc-frame-thumb.frame-royal::before{inset:8%;border-radius:26% 26% 36% 36%;background:linear-gradient(145deg,#ffe36e 0 18%,#b547ae 20% 34%,#f9d75c 36% 52%,#8b328c 54% 70%,#d38c18 72%);box-shadow:0 0 0 2px #7a3e10}
.hwc-frames button .hwc-frame-thumb.frame-royal::after{content:"♛";top:1px;left:50%;transform:translateX(-50%);font-size:14px;color:#ffe370;text-shadow:0 1px #8b4a10}
.hwc-frames button .hwc-frame-thumb.frame-inferno::before{inset:4%;clip-path:polygon(50% 0,59% 12%,71% 4%,76% 18%,91% 14%,87% 31%,100% 38%,88% 50%,100% 63%,85% 69%,91% 86%,74% 82%,68% 98%,55% 87%,45% 100%,34% 86%,18% 91%,20% 73%,3% 67%,15% 52%,0 40%,17% 34%,12% 17%,29% 20%,35% 4%,45% 14%);background:linear-gradient(180deg,#ffdd58 0%,#ff8b18 45%,#d6450b 100%)}
.hwc-frames button .hwc-frame-thumb.frame-frost::before{inset:4%;clip-path:polygon(50% 0,59% 13%,72% 3%,77% 19%,94% 13%,88% 31%,100% 42%,87% 51%,99% 65%,81% 69%,84% 88%,65% 82%,50% 100%,37% 83%,18% 89%,21% 70%,2% 65%,15% 51%,0 41%,14% 31%,8% 13%,25% 19%,29% 3%,42% 13%);background:linear-gradient(180deg,#dffaff,#70d8ff 42%,#2f8fd1 100%)}
.hwc-frames button .hwc-frame-thumb.frame-forest::before{inset:8%;border-radius:42% 58% 46% 54%;background:linear-gradient(135deg,#d3e963 0%,#69a92f 42%,#3f7426 100%);box-shadow:0 0 0 2px #4d6f22}
.hwc-frames button .hwc-frame-thumb.frame-forest::after{content:"❧";right:4px;top:0;font-size:14px;color:#d8ee79;text-shadow:0 1px #456820;transform:rotate(24deg)}
.hwc-frames button .hwc-frame-thumb.frame-shadow::before{inset:7%;clip-path:polygon(50% 0,78% 10%,96% 34%,90% 66%,69% 92%,36% 97%,8% 75%,1% 43%,16% 15%);background:linear-gradient(145deg,#c29be1,#6b477f 45%,#2f223d 100%)}
.hwc-frames button .hwc-frame-thumb.frame-crystal::before{inset:6%;clip-path:polygon(50% 0,88% 16%,100% 50%,84% 88%,50% 100%,14% 86%,0 50%,17% 14%);background:linear-gradient(135deg,#e9ffff 0%,#9ddcff 28%,#a47cff 58%,#63d7e2 100%)}
.hwc-frames button .hwc-frame-thumb.frame-sunburst::before{inset:4%;clip-path:polygon(50% 0,58% 13%,71% 3%,76% 17%,91% 12%,87% 29%,100% 38%,88% 50%,100% 62%,86% 70%,92% 86%,75% 82%,69% 98%,56% 87%,50% 100%,43% 87%,30% 98%,25% 82%,8% 86%,14% 70%,0 62%,12% 50%,0 38%,13% 29%,9% 12%,24% 17%,29% 3%,42% 13%);background:linear-gradient(180deg,#fff084 0%,#ffc62f 46%,#e98b14 100%)}
.hwc-frames button .hwc-frame-thumb.frame-triangle::before{left:6%;right:6%;top:4%;bottom:4%;clip-path:polygon(50% 0,97% 91%,3% 91%);background:linear-gradient(180deg,#f5d95f 0%,#7bb13b 55%,#3f7727 100%)}
.hwc-frames button .hwc-frame-thumb.frame-diamond::before{inset:12%;transform:rotate(45deg);border-radius:10%;background:linear-gradient(135deg,#eefcff,#57c8f3 35%,#2588d6 70%,#d9f8ff 100%);box-shadow:0 0 0 2px #286b9e}
.hwc-frames button .hwc-frame-thumb.frame-hex::before{inset:8%;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(180deg,#fff1a7 0%,#f3b52c 52%,#b8650d 100%)}
.hwc-frames button .hwc-frame-thumb.frame-spike::before{inset:4%;clip-path:polygon(50% 0,59% 12%,75% 4%,79% 20%,96% 18%,88% 36%,100% 50%,88% 64%,96% 82%,79% 80%,75% 96%,59% 88%,50% 100%,41% 88%,25% 96%,21% 80%,4% 82%,12% 64%,0 50%,12% 36%,4% 18%,21% 20%,25% 4%,41% 12%);background:linear-gradient(145deg,#d5a7c8 0%,#514052 45%,#211b22 100%)}
.hwc-clan-crest .hwc-crest-core,.hwc-preview-badge .hwc-crest-core,.hwc-mini-crest .hwc-crest-core{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -8px 14px rgba(0,0,0,.1)}
.hwc-clan-crest .hwc-crest-core .hwc-emblem-svg,.hwc-preview-badge .hwc-crest-core .hwc-emblem-svg{width:62%;height:62%}


/* === v6.3.5 premium SVG frames + polished emblems === */
.hwc-emblems button,.hwc-frames button{
  min-height:92px;
  justify-content:flex-start;
  gap:5px;
  padding-top:8px;
}
.hwc-emblems button small,.hwc-frames button small{
  font-size:9px;
  line-height:1.1;
  color:#8c5920;
}
.hwc-emblem-option{
  width:56px!important;
  height:56px!important;
  display:grid;
  place-items:center;
  background:none!important;
  box-shadow:none!important;
}
.hwc-symbol-medal{
  position:relative;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(180deg,#fff8e6 0%,#ffe49d 56%,#f2bd53 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.82),inset 0 -6px 10px rgba(123,73,15,.12),0 3px 8px rgba(121,74,17,.16);
}
.hwc-symbol-medal::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:13px;
  border:1px solid rgba(183,111,18,.24);
}
.hwc-symbol-medal .hwc-emblem-svg{
  width:74%!important;
  height:74%!important;
  display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
.hwc-emblems button.active .hwc-symbol-medal,
.hwc-emblems button:hover .hwc-symbol-medal{
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 0 0 2px #57b62f,inset 0 0 0 2px rgba(255,255,255,.84),0 6px 14px rgba(87,182,47,.15);
}

.hwc-frame-badge,
.hwc-frame-thumb{
  position:relative;
  display:grid;
  place-items:center;
  overflow:visible;
  isolation:isolate;
  background:none!important;
  border:none!important;
  box-shadow:none!important;
}
.hwc-frame-badge .hwc-frame-art,
.hwc-frame-thumb .hwc-frame-art{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  filter:drop-shadow(0 4px 8px rgba(108,66,12,.18));
}
.hwc-frame-badge .hwc-frame-art svg,
.hwc-frame-thumb .hwc-frame-art svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.hwc-preview-badge,
.hwc-clan-crest,
.hwc-mini-crest,
.hwc-info-seal,
.hwc-big-team{background:none!important;border:none!important;box-shadow:none!important}
.hwc-crest-core,
.hwc-frame-core{
  position:absolute;
  z-index:2;
  inset:24%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 29%),
    var(--cc,#e8562a);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.32), inset 0 -10px 16px rgba(0,0,0,.14);
}
.hwc-frame-core{inset:29%}
.hwc-crest-core.shape-shield,
.hwc-frame-core.shape-shield{clip-path:polygon(50% 4%, 82% 18%, 82% 52%, 73% 76%, 50% 95%, 27% 76%, 18% 52%, 18% 18%);border-radius:0}
.hwc-crest-core.shape-triangle,
.hwc-frame-core.shape-triangle{clip-path:polygon(50% 4%,95% 88%,5% 88%);border-radius:0;inset:28% 28% 23%}
.hwc-crest-core.shape-diamond,
.hwc-frame-core.shape-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0;inset:29%}
.hwc-crest-core.shape-hex,
.hwc-frame-core.shape-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border-radius:0;inset:27%}
.hwc-crest-core.shape-octagon,
.hwc-frame-core.shape-octagon{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);border-radius:0;inset:26%}
.hwc-crest-core > i{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-style:normal;
}
.hwc-crest-core > i .hwc-emblem-svg{
  width:76%!important;
  height:76%!important;
  display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
}
.hwc-frame-core-glyph{
  color:#fff2c2;
  font-size:16px;
  font-weight:900;
  text-shadow:0 1px 2px rgba(108,56,5,.38);
}
.hwc-frames button.active .hwc-frame-thumb,
.hwc-frames button:hover .hwc-frame-thumb{
  transform:translateY(-1px) scale(1.02);
  filter:drop-shadow(0 6px 12px rgba(108,66,12,.18));
}
.hwc-frames button.active,
.hwc-emblems button.active{
  box-shadow:0 0 0 2px #57b62f inset,0 0 0 1px #ffffff;
}
.hwc-preview-badge .hwc-crest-core{inset:25%}
.hwc-clan-crest .hwc-crest-core,
.hwc-big-team .hwc-crest-core{inset:25%}
.hwc-mini-crest .hwc-crest-core,
.hwc-info-seal .hwc-crest-core{inset:24%}
.hwc-frame-thumb .hwc-frame-core.shape-shield{inset:31% 31% 26%}
.hwc-frame-thumb .hwc-frame-core.shape-triangle{inset:34% 34% 28%}
.hwc-frame-thumb .hwc-frame-core.shape-diamond{inset:34%}
.hwc-frame-thumb .hwc-frame-core.shape-hex{inset:31%}
.hwc-frame-thumb .hwc-frame-core.shape-octagon{inset:30%}
@media (max-width:1080px){
  .hwc-emblems button,.hwc-frames button{min-height:84px}
  .hwc-emblem-option{width:50px!important;height:50px!important}
  .hwc-symbol-medal{width:47px;height:47px}
}

/* === v6.3.6 modern frames + symbols refresh === */
.hwc-emblems button,
.hwc-frames button{
  position:relative;
  min-height:92px;
  padding:7px 5px 9px;
  border-radius:18px;
  border:1px solid #e2a54d;
  background:linear-gradient(180deg,#fffdf8 0%,#f9e8bf 60%,#f3d18b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 3px 0 #c07a20,0 10px 18px rgba(168,103,26,.12);
}
.hwc-emblems button::before,
.hwc-frames button::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.72);
  pointer-events:none;
}
.hwc-emblems button:hover,
.hwc-frames button:hover{transform:translateY(-2px);filter:brightness(1.02)}
.hwc-emblems button small,
.hwc-frames button small{
  font-size:10px;
  line-height:1.1;
  color:#85531b;
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.hwc-emblem-option{width:58px!important;height:58px!important}
.hwc-symbol-medal{
  position:relative;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg,#fff9ef 0%,#ffe7aa 48%,#f0be57 100%);
  border:1px solid rgba(162,94,12,.26);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.78),inset 0 -8px 12px rgba(129,73,18,.14),0 8px 14px rgba(131,77,20,.14);
}
.hwc-symbol-medal::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.42);
}
.hwc-symbol-medal .hwc-emblem-svg{width:76%!important;height:76%!important;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.hwc-emblems button.emblem-sun .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff9d7 0%,#ffd56b 55%,#f49c16 100%)}
.hwc-emblems button.emblem-crown .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff2cb 0%,#ffd260 48%,#c18e12 100%)}
.hwc-emblems button.emblem-swords .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#edf9ff 0%,#b7dcf8 48%,#5ea1d8 100%)}
.hwc-emblems button.emblem-diamond .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#f6ffff 0%,#c8efff 46%,#7cc9ff 100%)}
.hwc-emblems button.emblem-fire .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff1c9 0%,#ffbf57 46%,#ff6c27 100%)}
.hwc-emblems button.emblem-moon .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff8e0 0%,#f3e39a 48%,#d8b85d 100%)}
.hwc-emblems button.emblem-skull .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff9ed 0%,#e4d5bb 50%,#cbb28a 100%)}
.hwc-emblems button.emblem-leaf .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#f7ffe7 0%,#a8e27a 48%,#5ea333 100%)}
.hwc-emblems button.emblem-bolt .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff8dc 0%,#ffe271 50%,#efb119 100%)}
.hwc-emblems button.emblem-eye .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#f4fcff 0%,#c5eaff 46%,#70b8ff 100%)}
.hwc-emblems button.emblem-star .hwc-symbol-medal{background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 28%),linear-gradient(180deg,#fff9dd 0%,#ffd978 48%,#ffb743 100%)}
.hwc-emblems button.active .hwc-symbol-medal,
.hwc-emblems button:hover .hwc-symbol-medal{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 0 2px #58b52a,inset 0 0 0 2px rgba(255,255,255,.82),0 10px 18px rgba(88,181,42,.18);
}
.hwc-frame-thumb{width:60px;height:60px;flex:0 0 60px}
.hwc-frame-badge .hwc-frame-art,
.hwc-frame-thumb .hwc-frame-art{filter:drop-shadow(0 6px 12px rgba(122,72,14,.18))}
.hwc-crest-core,
.hwc-frame-core{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 33%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.18)),
    var(--cc,#e8562a);
  border:2px solid rgba(255,243,205,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 -10px 18px rgba(0,0,0,.16),0 3px 6px rgba(87,47,8,.14);
}
.hwc-crest-core > i,
.hwc-frame-core > i{width:100%;height:100%;display:grid;place-items:center;font-style:normal}
.hwc-frame-core > i .hwc-emblem-svg,
.hwc-crest-core > i .hwc-emblem-svg{width:72%!important;height:72%!important}
.hwc-frame-core{inset:30%}
.hwc-frame-thumb .hwc-frame-core.shape-shield{inset:31% 31% 25%}
.hwc-frame-thumb .hwc-frame-core.shape-triangle{inset:35% 34% 28%}
.hwc-frame-thumb .hwc-frame-core.shape-diamond{inset:35%}
.hwc-frame-thumb .hwc-frame-core.shape-hex{inset:31%}
.hwc-frame-thumb .hwc-frame-core.shape-octagon{inset:31%}
.hwc-preview-badge{width:104px!important;height:104px!important;flex-basis:104px!important}
.hwc-preview-badge .hwc-crest-core{inset:26%}
.hwc-clan-crest .hwc-crest-core,
.hwc-big-team .hwc-crest-core{inset:26%}
.hwc-frames button.active .hwc-frame-thumb,
.hwc-frames button:hover .hwc-frame-thumb{transform:translateY(-2px) scale(1.035)}
.hwc-frames button.active,
.hwc-emblems button.active{
  box-shadow:0 0 0 2px #59b52e inset,0 0 0 2px rgba(255,255,255,.92),0 12px 22px rgba(89,181,46,.14);
}
@media (max-width:1080px){
  .hwc-emblems button,.hwc-frames button{min-height:86px}
  .hwc-emblem-option{width:52px!important;height:52px!important}
  .hwc-symbol-medal{width:50px;height:50px}
  .hwc-frame-thumb{width:54px;height:54px;flex-basis:54px}
}

/* =====================================================
   v7 — reference-like clan creator (screenshot 2 target)
   Crisp symbols + true hollow SVG frames
   ===================================================== */
.mode-paper:has(.hwc-root){
  width:min(1320px,95vw)!important;
  height:min(770px,92vh)!important;
}
.hwc-root{
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.23) 0 3px,transparent 4px) 0 0/150px 150px,
    linear-gradient(135deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.05) 75%,transparent 75%) 0 0/18px 18px,
    linear-gradient(180deg,#f6e6b2 0%,#efd083 100%);
}
.hwc-titlebar{
  min-height:100px;
  margin-bottom:10px;
  padding:12px 74px 12px 16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 0,rgba(255,255,255,.45),transparent 35%),
    linear-gradient(180deg,#fff9e8 0%,#ffe7a0 58%,#f4c75a 100%);
  border:3px solid #c77b16;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.6),0 6px 0 #9f570d,0 12px 22px rgba(110,62,10,.16);
}
.hwc-title-crest{width:72px;height:72px;flex:0 0 72px;border-radius:22px;font-size:36px}
.hwc-titlebar h2{font-size:34px;letter-spacing:.02em}
.hwc-titlebar p{font-size:13px}
.hwc-title-icons span{width:58px;height:58px}
.hwc-no-clan-grid{grid-template-columns:minmax(0,1.55fr) minmax(390px,1fr);gap:12px}
.hwc-left-paper,.hwc-ranking{
  background:
    linear-gradient(135deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.04) 75%,transparent 75%) 0 0/18px 18px,
    linear-gradient(180deg,#f9ebbe 0%,#f0d389 100%);
  border:3px solid #c98321;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.54),0 5px 0 #9b5912;
}
.hwc-tabs{height:58px;padding:5px 6px 10px}
.hwc-tabs button{height:46px;border-radius:16px;font-size:16px}
.hwc-tabs button.active{background:linear-gradient(180deg,#ffb22d 0%,#ff8615 56%,#da5b08 100%)}
.hwc-create{grid-template-rows:128px minmax(224px,1fr) 116px 60px;gap:9px;padding:8px 10px 10px}
.hwc-create-showcase{
  min-height:128px;
  padding:10px 16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 76% 22%,rgba(255,255,255,.28) 0 5px,transparent 6px),
    linear-gradient(180deg,#ffe393 0%,#f7bd4c 100%);
  border:3px solid #c87d16;
  box-shadow:inset 0 0 0 3px rgba(255,250,222,.62),0 5px 0 #95520d;
}
.hwc-preview-badge{width:118px!important;height:118px!important;flex:0 0 118px!important}
.hwc-create-copy h3{font-size:20px;margin:5px 0 4px}
.hwc-create-copy p{font-size:14px}
.hwc-create-kicker{font-size:9px}
.hwc-create-badges span{font-size:11px;min-height:28px;padding:0 11px}
.hwc-pickers-row{grid-template-columns:1.04fr .96fr;gap:8px;min-height:224px}
.hwc-picker-card,.hwc-settings-card{
  background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,244,210,.5));
  border:2px solid #d3942e;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.48);
}
.hwc-picker-card{padding:8px 9px 9px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c8872c transparent}
.hwc-picker-card h4,.hwc-settings-card h4{font-size:12px;margin:0 0 7px;color:#8a4f16}

/* SYMBOLS — like screenshot 2: clean icon on cream tile, no candy square */
.hwc-emblems{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.hwc-emblems button{
  min-height:91px!important;
  height:91px!important;
  padding:7px 3px 5px!important;
  border-radius:14px!important;
  border:2px solid #dfa03c!important;
  background:linear-gradient(180deg,#fffaf0 0%,#f9e7b6 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 3px 0 #c37b19!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:3px!important;
}
.hwc-emblems button::before{content:none!important}
.hwc-emblem-option{width:54px!important;height:54px!important;display:grid!important;place-items:center!important;background:none!important;box-shadow:none!important}
.hwc-symbol-art{width:50px;height:50px;display:grid;place-items:center;filter:drop-shadow(0 3px 3px rgba(122,71,12,.12));transition:.16s ease}
.hwc-symbol-art .hwc-emblem-svg{width:46px!important;height:46px!important;display:block!important;overflow:visible!important}
.hwc-emblems button small{font-size:10.5px!important;color:#774719!important;font-weight:900!important;line-height:1!important}
.hwc-emblems button:hover .hwc-symbol-art{transform:translateY(-2px) scale(1.05)}
.hwc-emblems button.active{
  outline:3px solid #54b82e!important;
  outline-offset:-2px!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.76),0 3px 0 #3e8e20,0 8px 18px rgba(80,175,43,.14)!important;
}
.hwc-emblems button.active .hwc-symbol-art{transform:scale(1.05)}

/* FRAMES — true hollow vector frames, no emblem/colored blob inside picker */
.hwc-frames{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hwc-frames button{
  min-height:91px!important;
  height:91px!important;
  padding:5px 3px 5px!important;
  border-radius:14px!important;
  border:2px solid #dfa03c!important;
  background:linear-gradient(180deg,#fffaf0 0%,#f9e7b6 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 3px 0 #c37b19!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
}
.hwc-frames button::before{content:none!important}
.hwc-frame-thumb{width:62px!important;height:62px!important;flex:0 0 62px!important;position:relative!important;display:grid!important;place-items:center!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.hwc-frame-thumb .hwc-frame-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;z-index:1!important;filter:drop-shadow(0 4px 4px rgba(102,58,11,.16))!important}
.hwc-frame-thumb .hwc-frame-art svg{width:100%!important;height:100%!important;display:block!important;overflow:visible!important}
.hwc-frame-thumb .hwc-frame-core,.hwc-frame-thumb .hwc-frame-spark,.hwc-frame-thumb .hwc-crest-core{display:none!important}
.hwc-frames button small{font-size:9px!important;color:#774719!important;font-weight:900!important;line-height:1!important}
.hwc-frames button:hover .hwc-frame-thumb{transform:translateY(-2px) scale(1.06)!important}
.hwc-frames button.active{
  outline:3px solid #54b82e!important;
  outline-offset:-2px!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.76),0 3px 0 #3e8e20,0 8px 18px rgba(80,175,43,.14)!important;
}

/* BIG CREST: colored center behind the selected hollow frame */
.hwc-frame-badge{position:relative!important;display:grid!important;place-items:center!important;overflow:visible!important;isolation:isolate!important;background:none!important;border:0!important;box-shadow:none!important}
.hwc-frame-badge .hwc-crest-core{
  position:absolute!important;
  z-index:1!important;
  inset:24%!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 31%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.14)),var(--cc,#e8562a)!important;
  border:2px solid rgba(255,242,197,.95)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -10px 18px rgba(0,0,0,.15)!important;
}
.hwc-frame-badge .hwc-crest-core.shape-shield{clip-path:polygon(50% 3%,82% 17%,82% 53%,73% 77%,50% 96%,27% 77%,18% 53%,18% 17%);border-radius:0}
.hwc-frame-badge .hwc-crest-core.shape-triangle{clip-path:polygon(50% 3%,95% 89%,5% 89%);border-radius:0;inset:27% 27% 21%!important}
.hwc-frame-badge .hwc-crest-core.shape-diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0;inset:27%!important}
.hwc-frame-badge .hwc-crest-core.shape-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);border-radius:0;inset:25%!important}
.hwc-frame-badge .hwc-crest-core.shape-octagon{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);border-radius:0;inset:25%!important}
.hwc-frame-badge .hwc-crest-core>i{width:100%;height:100%;display:grid;place-items:center;font-style:normal}
.hwc-frame-badge .hwc-crest-core>i .hwc-emblem-svg{width:72%!important;height:72%!important}
.hwc-frame-badge .hwc-frame-art{position:absolute!important;inset:0!important;z-index:2!important;width:100%!important;height:100%!important;filter:drop-shadow(0 6px 6px rgba(104,58,9,.22))!important}
.hwc-frame-badge .hwc-frame-art svg{width:100%!important;height:100%!important;display:block!important;overflow:visible!important}

/* SETTINGS: closer to screenshot 2 */
.hwc-settings-card{padding:9px 10px;grid-template-rows:auto 42px 1fr;gap:5px}
.hwc-settings-grid{grid-template-columns:1.05fr .45fr 1fr;gap:8px}
.hwc-settings-grid label{font-size:8px!important}
.hwc-settings-grid input{height:34px!important;font-size:11px!important;border-radius:9px!important}
.hwc-color-line{align-items:center;gap:10px}
.hwc-color-line>b{font-size:9px!important}
.hwc-color-palette{gap:7px;align-items:center}
.hwc-color-chip,.hwc-color-native{
  width:34px!important;height:38px!important;flex:0 0 34px!important;
  border-radius:0!important;
  clip-path:polygon(50% 0,92% 18%,86% 72%,50% 100%,14% 72%,8% 18%)!important;
  border:0!important;
  box-shadow:none!important;
  outline:2px solid rgba(142,82,12,.28);
  outline-offset:1px;
}
.hwc-color-chip.active{filter:drop-shadow(0 0 2px #48a623) drop-shadow(0 3px 1px #6d4511);outline:3px solid #49a62b!important}
.hwc-create-submit{height:58px!important;width:min(470px,76%)!important;font-size:20px!important;border-radius:24px!important}

.hwc-ranking{padding:9px}
.hwc-search input{height:44px!important;font-size:13px!important}
.hwc-search button{height:44px!important;width:50px!important}
.hwc-ranking-title{font-size:15px!important;padding:11px 0!important}
.hwc-empty-clans img.hwc-empty-mascot-png{width:220px!important;max-width:75%!important}
.hwc-empty-clans h4{font-size:20px!important}
.hwc-empty-clans p{font-size:13px!important;line-height:1.45!important}

@media(max-width:1120px){
  .mode-paper:has(.hwc-root){width:min(1240px,96vw)!important;height:min(740px,93vh)!important}
  .hwc-create{grid-template-rows:116px minmax(205px,1fr) 108px 56px}
  .hwc-preview-badge{width:106px!important;height:106px!important;flex-basis:106px!important}
  .hwc-emblems button,.hwc-frames button{height:84px!important;min-height:84px!important}
  .hwc-symbol-art{width:44px;height:44px}.hwc-symbol-art .hwc-emblem-svg{width:41px!important;height:41px!important}
  .hwc-frame-thumb{width:56px!important;height:56px!important;flex-basis:56px!important}
}

/* === v8 baked image assets: render all symbols/frames/colors as ready PNGs === */
.hwc-baked-crest,
.hwc-emblem-image,
.hwc-frame-image{display:grid!important;place-items:center!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.hwc-baked-crest img,
.hwc-emblem-image img,
.hwc-frame-image img,
.hwc-color-chip img{display:block;width:100%;height:100%;object-fit:contain}
.hwc-preview-badge,
.hwc-clan-crest,
.hwc-mini-crest,
.hwc-info-seal{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
.hwc-preview-badge::before,
.hwc-preview-badge::after,
.hwc-clan-crest::before,
.hwc-clan-crest::after,
.hwc-mini-crest::before,
.hwc-mini-crest::after,
.hwc-info-seal::before,
.hwc-info-seal::after{content:none!important;display:none!important}
.hwc-preview-badge img{filter:drop-shadow(0 8px 10px rgba(120,66,12,.18))}
.hwc-clan-crest img,.hwc-info-seal img{filter:drop-shadow(0 8px 10px rgba(120,66,12,.16))}
.hwc-mini-crest img{filter:drop-shadow(0 4px 6px rgba(120,66,12,.16))}
.hwc-emblems button .hwc-emblem-option,
.hwc-frames button .hwc-frame-thumb{width:100%!important;height:100%!important}
.hwc-emblems button{padding:5px 4px 8px!important}
.hwc-frames button{padding:5px 4px 8px!important}
.hwc-emblems button.active .hwc-emblem-image,
.hwc-emblems button:hover .hwc-emblem-image,
.hwc-frames button.active .hwc-frame-image,
.hwc-frames button:hover .hwc-frame-image{transform:translateY(-2px) scale(1.03)!important;filter:drop-shadow(0 5px 8px rgba(96,61,13,.22))}
.hwc-color-palette{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hwc-color-chip{width:34px!important;height:34px!important;flex:0 0 34px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.hwc-color-chip.active{outline:none!important;transform:translateY(-2px)!important;filter:drop-shadow(0 0 2px #48a623) drop-shadow(0 3px 1px rgba(109,69,17,.65))!important}
.hwc-color-chip.active::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:16px;color:#fff;font-weight:900;text-shadow:0 1px 2px #5c3910}
.hwc-color-native{display:none!important}
.hwc-clan-crest{width:106px!important;height:106px!important;flex:0 0 106px!important}
.hwc-info-seal{width:118px!important;height:118px!important;flex:0 0 118px!important}
.hwc-mini-crest{width:54px!important;height:54px!important;flex:0 0 54px!important}
@media (max-width:1080px){
  .hwc-preview-badge{width:110px!important;height:110px!important;flex-basis:110px!important}
  .hwc-clan-crest{width:94px!important;height:92px!important;flex-basis:92px!important}
  .hwc-info-seal{width:104px!important;height:104px!important;flex-basis:104px!important}
  .hwc-mini-crest{width:48px!important;height:48px!important;flex-basis:48px!important}
  .hwc-color-chip{width:32px!important;height:32px!important;flex-basis:32px!important}
}


/* === v9 GENERATED 3D ASSETS: final override === */
.hwc-frames button{height:104px!important;min-height:104px!important;padding:4px 4px 18px!important;overflow:visible!important;background:linear-gradient(180deg,#fffaf0,#f4db9e)!important;border:1px solid #d79a38!important;border-radius:13px!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 3px 0 #b86e16!important}
.hwc-frames button .hwc-frame-thumb{position:relative!important;width:80px!important;height:80px!important;display:grid!important;place-items:center!important;margin:0 auto!important;overflow:visible!important;background:none!important;border:0!important;box-shadow:none!important}
.hwc-frames button .hwc-frame-thumb img{width:80px!important;height:80px!important;object-fit:contain!important;border-radius:0!important;filter:drop-shadow(0 5px 6px rgba(92,49,5,.22))!important}
.hwc-frames button small{position:absolute!important;left:2px!important;right:2px!important;bottom:4px!important;font-size:9px!important;line-height:1!important;color:#744414!important;font-weight:900!important;text-align:center!important}
.hwc-frames button.active{outline:3px solid #58b52a!important;outline-offset:-2px!important;box-shadow:0 0 0 2px #fff,0 4px 0 #3b891d!important}
.hwc-frames button.active .hwc-frame-thumb img{transform:scale(1.05)!important;filter:drop-shadow(0 0 5px rgba(88,181,42,.35)) drop-shadow(0 6px 7px rgba(92,49,5,.25))!important}
.hwc-emblems button{height:96px!important;min-height:96px!important;padding:4px 4px 18px!important;background:linear-gradient(180deg,#fffaf0,#f4db9e)!important;border:1px solid #d79a38!important;border-radius:13px!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 3px 0 #b86e16!important}
.hwc-emblems button .hwc-emblem-option{width:70px!important;height:70px!important;margin:0 auto!important;background:none!important;box-shadow:none!important}
.hwc-emblems button .hwc-emblem-option img{width:70px!important;height:70px!important;object-fit:contain!important;border-radius:0!important;filter:drop-shadow(0 4px 5px rgba(92,49,5,.18))!important}
.hwc-emblems button small{position:absolute!important;left:2px!important;right:2px!important;bottom:4px!important;font-size:9px!important;color:#744414!important;font-weight:900!important;text-align:center!important}
.hwc-emblems button.active{outline:3px solid #58b52a!important;outline-offset:-2px!important;box-shadow:0 0 0 2px #fff,0 4px 0 #3b891d!important}
.hwc-preview-badge img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 10px 12px rgba(91,49,5,.28))!important}
.hwc-clan-crest img,.hwc-info-seal img,.hwc-mini-crest img{width:100%!important;height:100%!important;object-fit:contain!important}
@media(max-width:1080px){.hwc-frames button{height:92px!important;min-height:92px!important}.hwc-frames button .hwc-frame-thumb,.hwc-frames button .hwc-frame-thumb img{width:68px!important;height:68px!important}.hwc-emblems button{height:86px!important;min-height:86px!important}.hwc-emblems button .hwc-emblem-option,.hwc-emblems button .hwc-emblem-option img{width:62px!important;height:62px!important}}


/* === v12 fixes: tighter scaling, better empty-state mascot, and cleaner pickers === */
.hwc-create{
  padding:8px 10px 10px!important;
  grid-template-rows:118px minmax(178px,1fr) 112px 58px!important;
  gap:8px!important;
}
.hwc-create-showcase{
  min-height:118px!important;
  padding:8px 14px!important;
  gap:14px!important;
}
.hwc-preview-badge{width:104px!important;height:104px!important;flex:0 0 104px!important}
.hwc-preview-core{width:58px!important;height:58px!important}
.hwc-preview-core .hwc-baked-crest img{max-width:100%!important;max-height:100%!important}
.hwc-create-copy h3{font-size:18px!important;margin:6px 0 4px!important}
.hwc-create-copy p{font-size:12px!important;margin:0 0 8px!important}
.hwc-create-badges{gap:6px!important}
.hwc-create-badges span{min-height:26px!important;padding:0 10px!important;font-size:10px!important}
.hwc-pickers-row{gap:8px!important}
.hwc-picker-card,.hwc-settings-card{padding:8px!important}
.hwc-picker-card h4,.hwc-settings-card h4{font-size:11px!important;margin-bottom:6px!important}
.hwc-emblems,.hwc-frames{gap:5px!important}
.hwc-emblems button,.hwc-frames button{height:72px!important}
.hwc-emblems button small,.hwc-frames button small{left:3px!important;right:3px!important;bottom:3px!important;font-size:8px!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hwc-settings-card{grid-template-rows:auto 44px 1fr!important;gap:4px!important}
.hwc-settings-grid{grid-template-columns:1.1fr .58fr 1.14fr!important;gap:8px!important}
.hwc-settings-grid input{height:34px!important;font-size:10px!important}
.hwc-color-line{gap:10px!important;align-items:flex-start!important}
.hwc-color-line>b{padding-top:8px!important}
.hwc-color-palette{gap:6px!important;flex-wrap:wrap!important}
.hwc-color-chip,.hwc-color-native{width:28px!important;height:28px!important;flex:0 0 28px!important}
.hwc-create-submit{width:min(470px,74%)!important;height:54px!important;font-size:18px!important}
.hwc-create-submit span{font-size:22px!important}
.hwc-create-submit small{font-size:9px!important}
.hwc-empty-clans{gap:8px!important;padding:10px 8px!important}
.hwc-empty-clans img.hwc-empty-mascot-png{width:200px!important;max-width:78%!important;height:auto!important;border-radius:18px!important}
.hwc-empty-clans h4{font-size:18px!important;margin:4px 0 5px!important}
.hwc-empty-clans p{font-size:12px!important;line-height:1.4!important;max-width:280px!important}
.hwc-search{flex:0 0 42px!important}
.hwc-search input{height:40px!important}
.hwc-search button{width:44px!important;height:40px!important}
.hwc-ranking-title{flex:0 0 40px!important;margin-top:3px!important}
@media (max-width: 1400px){
  .hwc-no-clan-grid{grid-template-columns:1.54fr .96fr!important;gap:10px!important}
  .hwc-create{grid-template-rows:112px minmax(168px,1fr) 106px 56px!important}
  .hwc-preview-badge{width:96px!important;height:96px!important;flex-basis:96px!important}
  .hwc-emblems button,.hwc-frames button{height:68px!important}
  .hwc-settings-grid input{height:32px!important}
}


/* === v13 HONEY SATURATION ONLY ===
   No layout/logic/asset changes. This final layer only shifts the clan window
   from pale yellow to the richer honey/amber palette of the approved reference. */
.mode-paper:has(.hwc-root){
  background:linear-gradient(180deg,#f6bc3c 0%,#dfa01e 100%)!important;
  border-color:#a95b08!important;
  box-shadow:inset 0 0 0 3px #ffe98e,0 12px 34px rgba(91,48,5,.34)!important;
}
.hwc-root{
  --brown:#67320b!important;
  --brown2:#814817!important;
  --line:#d9820f!important;
  --line2:#a95105!important;
  --gold:#ff9b09!important;
  --cream:#fff0b1!important;
  --paper:#ffd66a!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.34) 0 3px,transparent 4px) 0 0/170px 170px,
    linear-gradient(180deg,#ffdb6d 0%,#f3b433 52%,#e99a17 100%)!important;
  color:#6c360e!important;
}
.hwc-titlebar,.hwc-clan-header{
  border-color:#d67a0c!important;
  background:
    radial-gradient(circle at 14% 0,rgba(255,255,255,.72),transparent 31%),
    linear-gradient(180deg,#ffe58c 0%,#ffcf54 52%,#efaa20 100%)!important;
  box-shadow:inset 0 0 0 4px rgba(255,244,185,.76),0 6px 0 #925009,0 13px 20px rgba(91,51,7,.18)!important;
}
.hwc-titlebar h2,.hwc-clan-header h2{color:#542706!important;text-shadow:0 2px #ffe8a2!important}
.hwc-titlebar p,.hwc-clan-header p{color:#7c4215!important}
.hwc-paper{
  border-color:#d88211!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10) 0 16%,transparent 16% 34%,rgba(255,255,255,.07) 34% 52%,transparent 52% 70%,rgba(255,255,255,.06) 70% 88%,transparent 88%) 0 0/90px 90px,
    linear-gradient(180deg,#ffdc79 0%,#f7c34f 56%,#edaa29 100%)!important;
  box-shadow:inset 0 0 0 4px rgba(255,242,177,.68),0 6px 0 #965109,0 12px 18px rgba(94,50,6,.13)!important;
}
.hwc-tabs button{
  border-color:#c97812!important;
  color:#7b4315!important;
  background:linear-gradient(180deg,#ffe7a2 0%,#f5c95f 100%)!important;
  box-shadow:inset 0 0 0 3px rgba(255,244,194,.68),0 4px 0 #8f570e!important;
}
.hwc-tabs button.active{
  color:#fffdf2!important;
  border-color:#934402!important;
  background:linear-gradient(180deg,#ffb51f 0%,#ff8710 52%,#d85d04 100%)!important;
  box-shadow:inset 0 0 0 3px rgba(255,224,126,.48),0 5px 0 #703004,0 10px 13px rgba(116,54,5,.22)!important;
}
.hwc-create-showcase{
  border-color:#c96f08!important;
  background:
    radial-gradient(circle at 92% 20%,rgba(255,255,255,.62) 0 5px,transparent 6px),
    linear-gradient(180deg,#ffd96c 0%,#f8b532 56%,#ee8f16 100%)!important;
  box-shadow:inset 0 0 0 3px rgba(255,234,151,.72),0 5px 0 #8d4507!important;
}
.hwc-picker-card,.hwc-settings-card{
  border-color:#d27e13!important;
  background:linear-gradient(180deg,#ffe698 0%,#f8c64f 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,241,179,.64)!important;
}
.hwc-emblems button,.hwc-frames button{
  background:linear-gradient(180deg,#ffe9ad 0%,#f5c55d 100%)!important;
  border-color:#ce801c!important;
  box-shadow:inset 0 0 0 2px rgba(255,244,194,.58),0 3px 0 #9f590d!important;
}
.hwc-settings-grid input,.hwc-search input{
  background:#fff4cf!important;
  border-color:#cd760d!important;
  color:#63320b!important;
}
.hwc-search button{
  border-color:#a55308!important;
  background:linear-gradient(180deg,#ffe274 0%,#ee9d16 100%)!important;
  box-shadow:inset 0 2px rgba(255,239,169,.78),0 3px 0 #793906!important;
}
.hwc-ranking-title{color:#74370c!important;border-bottom-color:rgba(174,93,11,.44)!important}
.hwc-empty-clans h4{color:#6d3109!important}
.hwc-empty-clans p{color:#8d501b!important}
.hwc-create-badges span,.hwc-clan-meta span{
  background:linear-gradient(180deg,#fff2bd,#f3c65c)!important;
  border-color:#ca8a25!important;
  color:#69370f!important;
}
.hwc-create-submit,.hwc-gold{
  background:linear-gradient(180deg,#ffc129 0%,#ff930f 50%,#df6705 100%)!important;
  border-color:#9b4304!important;
  box-shadow:inset 0 0 0 3px rgba(255,225,124,.50),0 5px 0 #713004,0 11px 17px rgba(100,45,3,.22)!important;
}
/* Gentle global saturation boost, matching the reference without changing geometry. */
.hwc-root{filter:saturate(1.13) contrast(1.015)!important}


/* === v16 COLOR PALETTE FIX ===
   Keep the existing honey UI and clan assets intact.
   Fix selected-color vertical offset and make the shield swatches richer. */
.hwc-color-line{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:38px!important;
  overflow:visible!important;
}
.hwc-color-line>b{
  padding:0!important;
  margin:0!important;
  flex:0 0 auto!important;
  align-self:center!important;
  line-height:32px!important;
}
.hwc-color-palette{
  flex:1 1 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:7px!important;
  min-width:0!important;
  min-height:36px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
.hwc-color-chip{
  position:relative!important;
  width:31px!important;
  height:31px!important;
  flex:0 0 31px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  vertical-align:middle!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.hwc-color-chip img{
  width:31px!important;
  height:31px!important;
  display:block!important;
  object-fit:contain!important;
  transform:none!important;
  transform-origin:50% 50%!important;
  filter:saturate(1.72) contrast(1.13) brightness(1.035) drop-shadow(0 2px 1px rgba(101,53,5,.32))!important;
  transition:filter .12s ease,transform .12s ease!important;
}
.hwc-color-chip:hover img{
  transform:scale(1.06)!important;
  filter:saturate(1.82) contrast(1.15) brightness(1.045) drop-shadow(0 3px 2px rgba(101,53,5,.38))!important;
}
.hwc-color-chip.active{
  transform:none!important;
  filter:none!important;
  outline:0!important;
  box-shadow:none!important;
}
.hwc-color-chip.active img{
  transform:none!important;
  filter:saturate(1.86) contrast(1.17) brightness(1.04) drop-shadow(0 0 2px rgba(71,174,40,.72)) drop-shadow(0 3px 2px rgba(101,53,5,.38))!important;
}
.hwc-color-chip.active::after{
  content:"✓"!important;
  position:absolute!important;
  z-index:5!important;
  right:-3px!important;
  top:-4px!important;
  left:auto!important;
  bottom:auto!important;
  width:16px!important;
  height:16px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:linear-gradient(180deg,#7be04a 0%,#43b827 100%)!important;
  border:2px solid #fff4bd!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:0 1px 1px rgba(50,95,18,.65)!important;
  box-shadow:0 2px 0 #2b7d18,0 3px 5px rgba(75,43,7,.22)!important;
  pointer-events:none!important;
}
@media(max-width:850px){
  .hwc-color-palette{flex-wrap:wrap!important;row-gap:5px!important}
}


/* === v20 LIVE 3D CRESTS: big icon + rich colored background + all distinct frames === */
.hwc-live-crest{
  position:relative!important;
  display:inline-block!important;
  aspect-ratio:1/1!important;
  overflow:visible!important;
  isolation:isolate!important;
  background:transparent!important;
}
.hwc-live-fill,.hwc-live-symbol,.hwc-live-frame{
  position:absolute!important;
  pointer-events:none!important;
  user-select:none!important;
}
.hwc-live-fill{
  z-index:1!important;
  inset:0!important;
  background:
    radial-gradient(circle at 34% 25%,rgba(255,255,255,.52) 0 7%,rgba(255,255,255,.18) 15%,transparent 31%),
    radial-gradient(circle at 50% 43%,color-mix(in srgb,var(--hwc-color) 68%,white) 0%,var(--hwc-color) 52%,color-mix(in srgb,var(--hwc-color) 68%,#261203) 100%)!important;
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:contain!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-position:center!important;
  mask-size:contain!important;
  mask-repeat:no-repeat!important;
  filter:saturate(1.28) contrast(1.08)!important;
}
.hwc-live-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 85%,rgba(0,0,0,.20),transparent 56%);
}
.hwc-live-symbol{
  z-index:2!important;
  width:58%!important;
  height:58%!important;
  left:21%!important;
  top:21%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 4px rgba(62,28,0,.42)) drop-shadow(0 0 4px rgba(255,213,83,.16))!important;
  transform:translateZ(0)!important;
}
.hwc-live-frame{
  z-index:3!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 5px 5px rgba(79,39,1,.30))!important;
}
/* larger symbol on broad round frames */
.hwc-live-crest-inferno .hwc-live-symbol,
.hwc-live-crest-forest .hwc-live-symbol,
.hwc-live-crest-royal .hwc-live-symbol,
.hwc-live-crest-sunburst .hwc-live-symbol,
.hwc-live-crest-spike .hwc-live-symbol{width:61%!important;height:61%!important;left:19.5%!important;top:19.5%!important}
.hwc-live-crest-triangle .hwc-live-symbol{width:48%!important;height:48%!important;left:26%!important;top:28%!important}
.hwc-live-crest-diamond .hwc-live-symbol{width:52%!important;height:52%!important;left:24%!important;top:24%!important}

/* Frame picker now shows the FINISHED crest, not an empty ring */
.hwc-frames button .hwc-frame-live-choice{
  width:82px!important;
  height:82px!important;
  margin:0 auto!important;
  display:block!important;
}
.hwc-frames button .hwc-frame-live-choice img{border-radius:0!important}
.hwc-frames button.active .hwc-frame-live-choice{transform:scale(1.05)!important}

/* Symbol picker: large premium 3D symbols, without the old tiny icon disk */
.hwc-emblems button .hwc-emblem-live-choice{
  width:68px!important;
  height:68px!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
  background:radial-gradient(circle at 38% 28%,#fffdf4 0,#fff3ca 54%,#edc76d 100%)!important;
  border:2px solid rgba(216,142,35,.72)!important;
  border-radius:18px!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.72),0 3px 6px rgba(110,58,5,.18)!important;
}
.hwc-emblems button .hwc-choice-symbol{
  width:56px!important;
  height:56px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 3px 3px rgba(93,47,0,.28))!important;
}
.hwc-emblems button.active .hwc-emblem-live-choice{
  box-shadow:inset 0 0 0 2px #fff,0 0 0 3px #51b92b,0 4px 7px rgba(83,54,0,.22)!important;
}

/* Existing crest sizes remain controlled by their parent classes */
.hwc-preview-badge.hwc-live-crest,.hwc-clan-crest.hwc-live-crest,.hwc-info-seal.hwc-live-crest,.hwc-mini-crest.hwc-live-crest{flex:none!important}


/* === v22 HARD FIX: transparent 3D symbols only; no nested/old tile artwork === */
.hwc-emblems button .hwc-emblem-live-choice{
  position:relative!important;
  width:64px!important;
  height:64px!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border-radius:16px!important;
  background:radial-gradient(circle at 35% 27%,#fffdf4 0%,#fff0bd 58%,#eab850 100%)!important;
  border:2px solid #db9427!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.78),0 3px 5px rgba(100,48,0,.18)!important;
}
.hwc-emblems button .hwc-emblem-live-choice .hwc-choice-symbol,
.hwc-emblems button .hwc-choice-symbol{
  display:block!important;
  position:static!important;
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 3px rgba(91,43,0,.26))!important;
}
.hwc-emblems button .hwc-emblem-option .hwc-emblem-option{display:contents!important}
.hwc-emblems button.active .hwc-emblem-live-choice{
  outline:0!important;
  box-shadow:inset 0 0 0 2px #fff,0 0 0 3px #54ba2c,0 4px 6px rgba(70,60,0,.24)!important;
}
/* live crest layers: keep symbol large and centered, and never let a tile/card image leak into the crest */
.hwc-live-symbol{
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hwc-frame-live-choice .hwc-live-symbol{filter:drop-shadow(0 2px 2px rgba(65,28,0,.35))!important}


/* === v23: real inner-hole masks + symbol clipping + per-symbol fit === */
.hwc-live-fill{
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-mode:alpha!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-mode:alpha!important;
  mask-position:center!important;
  mask-size:100% 100%!important;
  mask-repeat:no-repeat!important;
}
.hwc-live-symbol-layer{
  position:absolute!important;
  z-index:2!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-mode:alpha!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-mode:alpha!important;
  mask-position:center!important;
  mask-size:100% 100%!important;
  mask-repeat:no-repeat!important;
}
.hwc-live-symbol-layer .hwc-live-symbol{
  position:absolute!important;
  display:block!important;
  z-index:1!important;
  width:54%!important;
  height:54%!important;
  left:23%!important;
  top:23%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 3px 3px rgba(64,28,0,.34)) drop-shadow(0 0 3px rgba(255,214,90,.15))!important;
}
/* wide/tall emblems need their own optical sizes */
.hwc-live-symbol-eye .hwc-live-symbol{width:44%!important;height:44%!important;left:28%!important;top:28%!important}
.hwc-live-symbol-swords .hwc-live-symbol{width:49%!important;height:49%!important;left:25.5%!important;top:25.5%!important}
.hwc-live-symbol-crown .hwc-live-symbol{width:50%!important;height:50%!important;left:25%!important;top:25%!important}
.hwc-live-symbol-shield .hwc-live-symbol{width:48%!important;height:48%!important;left:26%!important;top:26%!important}
.hwc-live-symbol-moon .hwc-live-symbol{width:50%!important;height:50%!important;left:25%!important;top:25%!important}
.hwc-live-symbol-bolt .hwc-live-symbol{width:48%!important;height:48%!important;left:26%!important;top:26%!important}
.hwc-live-symbol-star .hwc-live-symbol{width:49%!important;height:49%!important;left:25.5%!important;top:25.5%!important}
.hwc-live-symbol-diamond .hwc-live-symbol{width:50%!important;height:50%!important;left:25%!important;top:25%!important}
.hwc-live-symbol-skull .hwc-live-symbol{width:50%!important;height:50%!important;left:25%!important;top:25%!important}
.hwc-live-symbol-leaf .hwc-live-symbol{width:51%!important;height:51%!important;left:24.5%!important;top:24.5%!important}
.hwc-live-symbol-fire .hwc-live-symbol{width:52%!important;height:52%!important;left:24%!important;top:24%!important}
.hwc-live-symbol-sun .hwc-live-symbol{width:52%!important;height:52%!important;left:24%!important;top:24%!important}
/* old direct-image frame overrides must not distort the wrapped symbol */
.hwc-live-crest-inferno>.hwc-live-symbol,
.hwc-live-crest-forest>.hwc-live-symbol,
.hwc-live-crest-royal>.hwc-live-symbol,
.hwc-live-crest-sunburst>.hwc-live-symbol,
.hwc-live-crest-spike>.hwc-live-symbol,
.hwc-live-crest-triangle>.hwc-live-symbol,
.hwc-live-crest-diamond>.hwc-live-symbol{display:none!important}


/* === v24: fix narrow triangle fit + centered right-frame previews + stable right column === */
.hwc-no-clan-grid{
  grid-template-columns:minmax(0,1.56fr) minmax(360px,.94fr)!important;
  align-items:stretch!important;
}
.hwc-left-paper,.hwc-ranking,.hwc-create,.hwc-search-section,.hwc-ranks,.hwc-pickers-row,.hwc-picker-card{min-width:0!important}
.hwc-ranking,.hwc-left-paper{overflow:hidden!important}
.hwc-pickers-row{align-items:stretch!important}
.hwc-frames,.hwc-emblems{align-content:start!important}

/* Narrow inner hole: shrink symbols for the triangle frame so they never hit the frame */
.hwc-live-crest-triangle .hwc-live-symbol-layer .hwc-live-symbol{width:39%!important;height:39%!important;left:30.5%!important;top:29.5%!important}
.hwc-live-crest-triangle .hwc-live-symbol-eye .hwc-live-symbol{width:32%!important;height:32%!important;left:34%!important;top:31.5%!important}
.hwc-live-crest-triangle .hwc-live-symbol-skull .hwc-live-symbol,
.hwc-live-crest-triangle .hwc-live-symbol-crown .hwc-live-symbol,
.hwc-live-crest-triangle .hwc-live-symbol-swords .hwc-live-symbol,
.hwc-live-crest-triangle .hwc-live-symbol-shield .hwc-live-symbol{width:35%!important;height:35%!important;left:32.5%!important;top:30.5%!important}

/* The right-side frame picker was visually shifted. For picker thumbnails, use a centered preview core. */
.hwc-frame-live-choice .hwc-live-fill{
  inset:15%!important;
  border-radius:50%!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.hwc-frame-live-choice .hwc-live-symbol-layer{
  inset:15%!important;
  border-radius:50%!important;
  overflow:hidden!important;
  -webkit-mask:none!important;
  mask:none!important;
}
.hwc-frame-live-choice .hwc-live-symbol-layer .hwc-live-symbol{
  width:58%!important;
  height:58%!important;
  left:21%!important;
  top:21%!important;
}
/* Slightly different centers for non-round thumbnail previews */
.hwc-frame-live-choice.hwc-live-crest-triangle .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-triangle .hwc-live-symbol-layer{
  inset:13% 18% 22% 18%!important;
  border-radius:0!important;
  clip-path:polygon(50% 3%, 94% 82%, 6% 82%)!important;
}
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-symbol-layer{clip-path:polygon(50% 4%, 96% 50%, 50% 96%, 4% 50%)!important}
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-symbol-layer{clip-path:polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%)!important}

/* Make labels and thumbnails sit evenly in the right picker */
.hwc-frames button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important}
.hwc-frames button small{display:block!important;min-height:22px!important;line-height:1.08!important;text-align:center!important}


/* === v25: center only the three problematic frame previews (crystal, diamond, hex). Shadow stays untouched. === */
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-symbol-layer{
  inset:29.3% 22.9% 19.3% 22.3%!important;
  border-radius:50%!important;
  clip-path:none!important;
}
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-symbol-layer .hwc-live-symbol{
  width:56%!important;height:56%!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
}

.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-symbol-layer{
  inset:30.3% 21.9% 21.3% 21.5%!important;
  border-radius:0!important;
  clip-path:polygon(50% 4%, 96% 50%, 50% 96%, 4% 50%)!important;
}
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-symbol-layer .hwc-live-symbol{
  width:53%!important;height:53%!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
}

.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-symbol-layer{
  inset:20.3% 23.8% 21.5% 20.3%!important;
  border-radius:0!important;
  clip-path:polygon(25% 6%, 75% 6%, 96% 50%, 75% 94%, 25% 94%, 4% 50%)!important;
}
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-symbol-layer .hwc-live-symbol{
  width:54%!important;height:54%!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
}


/* === v26: precise optical centers for Triangle / Crystal / Diamond / Hex.
   Shadow is intentionally NOT touched. === */

/* Use the whole crest canvas for these symbol layers; position the icon by the
   actual optical center of each inner opening instead of centering inside a
   cropped inset box. The frame mask still clips the symbol. */
.hwc-live-crest-triangle .hwc-live-symbol-layer,
.hwc-live-crest-crystal .hwc-live-symbol-layer,
.hwc-live-crest-diamond .hwc-live-symbol-layer,
.hwc-live-crest-hex .hwc-live-symbol-layer{
  inset:0!important;
  border-radius:0!important;
  clip-path:none!important;
  overflow:hidden!important;
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-mode:alpha!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-mode:alpha!important;
  mask-position:center!important;
  mask-size:100% 100%!important;
  mask-repeat:no-repeat!important;
}

/* Triangle: the useful inner opening is visibly above the geometric center. */
.hwc-live-crest-triangle .hwc-live-symbol-layer .hwc-live-symbol{
  width:31%!important;height:31%!important;
  left:49.5%!important;top:42.5%!important;
  transform:translate(-50%,-50%)!important;
}

/* Crystal: move the emblem upward from the old low position. */
.hwc-live-crest-crystal .hwc-live-symbol-layer .hwc-live-symbol{
  width:42%!important;height:42%!important;
  left:50%!important;top:50.5%!important;
  transform:translate(-50%,-50%)!important;
}

/* Diamond / Rhombus: exact center of the diamond opening. */
.hwc-live-crest-diamond .hwc-live-symbol-layer .hwc-live-symbol{
  width:40%!important;height:40%!important;
  left:50%!important;top:50%!important;
  transform:translate(-50%,-50%)!important;
}

/* Hex: its artwork is slightly left-heavy, so shift icon a touch right/up. */
.hwc-live-crest-hex .hwc-live-symbol-layer .hwc-live-symbol{
  width:43%!important;height:43%!important;
  left:50.5%!important;top:49.5%!important;
  transform:translate(-50%,-50%)!important;
}

/* The picker previously had special inset rules that compounded the offset.
   Neutralize them for these four frames only. */
.hwc-frame-live-choice.hwc-live-crest-triangle .hwc-live-symbol-layer,
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-symbol-layer,
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-symbol-layer,
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-symbol-layer{
  inset:0!important;
  border-radius:0!important;
  clip-path:none!important;
}

/* Also keep their coloured centers aligned with their actual frame opening. */
.hwc-frame-live-choice.hwc-live-crest-triangle .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-fill{
  inset:0!important;
  border-radius:0!important;
  clip-path:none!important;
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-mode:alpha!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-mode:alpha!important;
  mask-position:center!important;
  mask-size:100% 100%!important;
  mask-repeat:no-repeat!important;
}


/* === v27: fix the 4 still-crooked frames (forest, crystal, diamond, hex).
   Use full-canvas masked placement and per-frame optical centers.
   Shadow remains untouched. === */

/* Forest also needs whole-canvas masked placement like the other non-round openings. */
.hwc-live-crest-forest .hwc-live-symbol-layer,
.hwc-live-crest-crystal .hwc-live-symbol-layer,
.hwc-live-crest-diamond .hwc-live-symbol-layer,
.hwc-live-crest-hex .hwc-live-symbol-layer{
  inset:0!important;
  border-radius:0!important;
  clip-path:none!important;
  overflow:hidden!important;
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-mode:alpha!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-mode:alpha!important;
  mask-position:center!important;
  mask-size:100% 100%!important;
  mask-repeat:no-repeat!important;
}

/* Optical centers derived from the real inner opening of each frame. */
.hwc-live-crest-forest .hwc-live-symbol-layer .hwc-live-symbol{
  width:41%!important;height:41%!important;
  left:49.8%!important;top:47.7%!important;
  transform:translate(-50%,-50%)!important;
}
.hwc-live-crest-crystal .hwc-live-symbol-layer .hwc-live-symbol{
  width:42%!important;height:42%!important;
  left:49.6%!important;top:54.9%!important;
  transform:translate(-50%,-50%)!important;
}
.hwc-live-crest-diamond .hwc-live-symbol-layer .hwc-live-symbol{
  width:39%!important;height:39%!important;
  left:49.7%!important;top:54.4%!important;
  transform:translate(-50%,-50%)!important;
}
.hwc-live-crest-hex .hwc-live-symbol-layer .hwc-live-symbol{
  width:42%!important;height:42%!important;
  left:48.1%!important;top:49.3%!important;
  transform:translate(-50%,-50%)!important;
}

/* Apply the same exact frame-opening alignment in the frame picker thumbnails. */
.hwc-frame-live-choice.hwc-live-crest-forest .hwc-live-symbol-layer,
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-symbol-layer,
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-symbol-layer,
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-symbol-layer{
  inset:0!important;
  border-radius:0!important;
  clip-path:none!important;
}

.hwc-frame-live-choice.hwc-live-crest-forest .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-crystal .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-diamond .hwc-live-fill,
.hwc-frame-live-choice.hwc-live-crest-hex .hwc-live-fill{
  inset:0!important;
  border-radius:0!important;
  clip-path:none!important;
  -webkit-mask-image:var(--hwc-mask)!important;
  -webkit-mask-mode:alpha!important;
  -webkit-mask-position:center!important;
  -webkit-mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-image:var(--hwc-mask)!important;
  mask-mode:alpha!important;
  mask-position:center!important;
  mask-size:100% 100%!important;
  mask-repeat:no-repeat!important;
}


/* === v28: fix symbol picker tiles — keep every symbol centered and inside the medal === */
.hwc-emblems button{
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
}
.hwc-emblems button .hwc-emblem-live-choice,
.hwc-emblems button .hwc-emblem-option{
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border-radius:14px!important;
}
.hwc-emblems button .hwc-choice-symbol,
.hwc-emblems button .hwc-emblem-live-choice .hwc-choice-symbol{
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  max-height:44px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}
/* optical fit for individual symbols */
.hwc-emblems button.emblem-sun .hwc-choice-symbol{width:42px!important;height:42px!important}
.hwc-emblems button.emblem-crown .hwc-choice-symbol{width:41px!important;height:41px!important}
.hwc-emblems button.emblem-swords .hwc-choice-symbol{width:42px!important;height:42px!important}
.hwc-emblems button.emblem-diamond .hwc-choice-symbol{width:40px!important;height:40px!important}
.hwc-emblems button.emblem-fire .hwc-choice-symbol{width:40px!important;height:40px!important}
.hwc-emblems button.emblem-moon .hwc-choice-symbol{width:41px!important;height:41px!important}
.hwc-emblems button.emblem-skull .hwc-choice-symbol{width:40px!important;height:40px!important}
.hwc-emblems button.emblem-leaf .hwc-choice-symbol{width:40px!important;height:40px!important}
.hwc-emblems button.emblem-bolt .hwc-choice-symbol{width:41px!important;height:41px!important}
.hwc-emblems button.emblem-eye .hwc-choice-symbol{width:39px!important;height:39px!important}
.hwc-emblems button.emblem-shield .hwc-choice-symbol{width:39px!important;height:39px!important}
.hwc-emblems button.emblem-star .hwc-choice-symbol{width:41px!important;height:41px!important}
.hwc-emblems button small{
  display:block!important;
  width:100%!important;
  min-height:18px!important;
  line-height:1.05!important;
  text-align:center!important;
}


/* === v29: symbols sit directly on the honey tile; remove pale inner cards === */
.hwc-emblems button .hwc-emblem-live-choice,
.hwc-emblems button .hwc-emblem-option{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  margin:0 auto!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
}
.hwc-emblems button .hwc-emblem-live-choice::before,
.hwc-emblems button .hwc-emblem-live-choice::after,
.hwc-emblems button .hwc-emblem-option::before,
.hwc-emblems button .hwc-emblem-option::after{
  content:none!important;
  display:none!important;
}
.hwc-emblems button .hwc-choice-symbol,
.hwc-emblems button .hwc-emblem-live-choice .hwc-choice-symbol{
  position:static!important;
  width:50px!important;
  height:50px!important;
  max-width:50px!important;
  max-height:50px!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:none!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 2px rgba(105,55,4,.28))!important;
}
/* The honey button itself becomes the only background behind the symbol. */
.hwc-emblems button{
  background:linear-gradient(180deg,#ffe59a 0%,#ffd16b 55%,#f3b741 100%)!important;
  border:1px solid #d88a20!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 3px 0 #b96a12,0 5px 8px rgba(124,70,10,.13)!important;
}
.hwc-emblems button::before{
  border-color:rgba(255,243,190,.64)!important;
}
.hwc-emblems button.active{
  outline:3px solid #55b82c!important;
  outline-offset:-2px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 2px #fff7ca,0 3px 0 #3f8d20,0 5px 8px rgba(64,94,20,.18)!important;
}
.hwc-emblems button.active .hwc-emblem-live-choice{
  box-shadow:none!important;
}


/* === v30: exact symbol centering + shorter honey tiles === */
.hwc-emblems{
  align-items:start!important;
}
.hwc-emblems button{
  height:80px!important;
  min-height:80px!important;
  padding:4px 3px 3px!important;
  gap:1px!important;
  display:grid!important;
  grid-template-rows:54px 16px!important;
  align-items:center!important;
  justify-items:center!important;
  overflow:visible!important;
  border-radius:13px!important;
}
.hwc-emblems button::before{
  inset:3px!important;
  border-radius:10px!important;
}
.hwc-emblems button .hwc-emblem-live-choice,
.hwc-emblems button .hwc-emblem-option{
  position:relative!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.hwc-emblems button .hwc-choice-symbol,
.hwc-emblems button .hwc-emblem-live-choice .hwc-choice-symbol{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:46px!important;
  height:46px!important;
  max-width:46px!important;
  max-height:46px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:translate(-50%,-50%)!important;
  transform-origin:center!important;
}

/* Optical centering of the actual artwork inside each PNG canvas. */
.hwc-emblems button.emblem-sun .hwc-choice-symbol{width:44px!important;height:44px!important;transform:translate(calc(-50% - .5px),-50%)!important}
.hwc-emblems button.emblem-crown .hwc-choice-symbol{width:43px!important;height:43px!important;transform:translate(calc(-50% + .5px),calc(-50% + 1px))!important}
.hwc-emblems button.emblem-swords .hwc-choice-symbol{width:44px!important;height:44px!important;transform:translate(calc(-50% - 1px),calc(-50% + 1px))!important}
.hwc-emblems button.emblem-diamond .hwc-choice-symbol{width:42px!important;height:42px!important;transform:translate(calc(-50% + .5px),calc(-50% - .5px))!important}
.hwc-emblems button.emblem-fire .hwc-choice-symbol{width:42px!important;height:42px!important;transform:translate(calc(-50% - 1px),-50%)!important}
.hwc-emblems button.emblem-moon .hwc-choice-symbol{width:43px!important;height:43px!important;transform:translate(calc(-50% + .5px),-50%)!important}
.hwc-emblems button.emblem-skull .hwc-choice-symbol{width:42px!important;height:42px!important;transform:translate(-50%,calc(-50% - .5px))!important}
.hwc-emblems button.emblem-leaf .hwc-choice-symbol{width:42px!important;height:42px!important;transform:translate(calc(-50% + .5px),-50%)!important}
.hwc-emblems button.emblem-bolt .hwc-choice-symbol{width:43px!important;height:43px!important;transform:translate(calc(-50% + .5px),-50%)!important}
.hwc-emblems button.emblem-eye .hwc-choice-symbol{width:41px!important;height:41px!important;transform:translate(calc(-50% + .5px),calc(-50% - .5px))!important}
.hwc-emblems button.emblem-shield .hwc-choice-symbol{width:41px!important;height:41px!important;transform:translate(-50%,-50%)!important}
.hwc-emblems button.emblem-star .hwc-choice-symbol{width:43px!important;height:43px!important;transform:translate(-50%,-50%)!important}

.hwc-emblems button small{
  align-self:center!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  height:16px!important;
  line-height:16px!important;
  font-size:9px!important;
  text-align:center!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}

/* === v33 BITMAP PANELS ===
   Use the already generated reference artwork directly for the top title panel
   and bottom create panel. Middle clan UI stays functional and unchanged. */
.mode-paper:has(.hwc-root){
  padding:10px!important;
}
.hwc-root{
  filter:saturate(1.10) contrast(1.015)!important;
}

/* TOP: the exact generated honey/gold panel is the visible header. */
.hwc-titlebar{
  flex:0 0 132px!important;
  min-height:132px!important;
  height:132px!important;
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  border-radius:18px!important;
  background:#efa20f url('/assets/clans-v9-3d/ui/clans-header-reference.jpg?v=33001') center center/100% 100% no-repeat!important;
  box-shadow:0 7px 0 #9d5308,0 12px 18px rgba(89,42,3,.19)!important;
  overflow:hidden!important;
}
.hwc-titlebar::after{display:none!important}
.hwc-titlebar>.hwc-title-crest,
.hwc-titlebar>.hwc-title-copy,
.hwc-titlebar>.hwc-title-icons{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
/* The generated image already contains the red close button. Keep the real
   button invisible but clickable exactly over it. */
.mode-paper:has(.hwc-root)>.mode-panel-close{
  opacity:0!important;
  z-index:100!important;
  width:74px!important;
  height:74px!important;
  right:8px!important;
  top:7px!important;
  cursor:pointer!important;
}

/* Keep the full create screen visible despite the taller bitmap header/footer. */
.hwc-create{
  grid-template-rows:116px minmax(190px,1fr) 108px 96px!important;
  gap:6px!important;
  padding:7px 9px 8px!important;
}
.hwc-create-showcase{min-height:116px!important;padding-top:7px!important;padding-bottom:7px!important}
.hwc-preview-badge{width:104px!important;height:104px!important;flex-basis:104px!important}
.hwc-settings-card{padding:7px 9px!important;grid-template-rows:auto 40px 1fr!important}
.hwc-settings-grid input{height:32px!important}

/* BOTTOM: direct bitmap artwork with laurels and large shield button. */
.hwc-create-image-footer{
  position:relative!important;
  width:calc(100% + 8px)!important;
  height:96px!important;
  margin:0 -4px -2px!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  background:#e9970c url('/assets/clans-v9-3d/ui/clans-create-footer-reference.jpg?v=33001') center center/100% 100% no-repeat!important;
  border-radius:13px!important;
  overflow:hidden!important;
  filter:drop-shadow(0 5px 3px rgba(105,50,1,.20))!important;
}
/* The text/button is already drawn into the bitmap. Real button remains as
   transparent hit area, preserving all game logic. */
.hwc-create-image-footer .hwc-create-submit{
  position:absolute!important;
  left:19%!important;
  right:19%!important;
  top:17%!important;
  bottom:15%!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  cursor:pointer!important;
}
.hwc-create-image-footer .hwc-create-submit:hover{opacity:.01!important}

@media(max-width:1120px){
  .hwc-titlebar{flex-basis:118px!important;min-height:118px!important;height:118px!important}
  .hwc-create{grid-template-rows:108px minmax(178px,1fr) 102px 86px!important}
  .hwc-create-image-footer{height:86px!important}
  .mode-paper:has(.hwc-root)>.mode-panel-close{width:64px!important;height:64px!important}
}


/* === v34 FINAL COMPACT BITMAP LAYOUT ===
   Uses the already-generated final reference artwork as real UI images.
   Goal: compact header + fully visible bottom CTA, no cut-off. */
.mode-paper:has(.hwc-root){
  padding:8px!important;
}

/* Compact top bitmap from the approved final mockup. */
.hwc-titlebar{
  flex:0 0 100px!important;
  min-height:100px!important;
  height:100px!important;
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  border-radius:16px!important;
  background:#efa20f url('/assets/clans-v9-3d/ui/clans-header-compact.png?v=85001') center center/100% 100% no-repeat!important;
  box-shadow:0 5px 0 #975008,0 9px 15px rgba(89,42,3,.16)!important;
  overflow:hidden!important;
  filter:none!important;
}
.hwc-titlebar::after{display:none!important}
.hwc-titlebar>.hwc-title-crest,
.hwc-titlebar>.hwc-title-copy,
.hwc-titlebar>.hwc-title-icons{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
/* Invisible real close button aligned over the bitmap close button. */
.mode-paper:has(.hwc-root)>.mode-panel-close{
  opacity:0!important;
  z-index:100!important;
  width:52px!important;
  height:52px!important;
  right:7px!important;
  top:5px!important;
  cursor:pointer!important;
}

/* Make the actual create area fit completely inside the modal. */
.hwc-no-clan-grid{min-height:0!important}
.hwc-left-paper{min-height:0!important;overflow:hidden!important}
.hwc-tabs{flex:0 0 54px!important;height:54px!important;padding:5px 7px 7px!important}
.hwc-tabs button{height:43px!important}
.hwc-create{
  min-height:0!important;
  height:100%!important;
  padding:6px 8px 7px!important;
  display:grid!important;
  grid-template-rows:100px minmax(158px,1fr) 96px 82px!important;
  gap:6px!important;
  overflow:hidden!important;
}
.hwc-create-showcase{
  min-height:100px!important;
  padding:6px 12px!important;
  gap:11px!important;
}
.hwc-preview-badge{width:88px!important;height:88px!important;flex-basis:88px!important}
.hwc-create-copy h3{font-size:17px!important;margin:4px 0 2px!important}
.hwc-create-copy p{font-size:11px!important;margin:0 0 5px!important}
.hwc-create-badges span{min-height:23px!important;padding:0 8px!important;font-size:9px!important}
.hwc-pickers-row{min-height:0!important;gap:7px!important}
.hwc-picker-card{min-height:0!important;padding:6px!important}
.hwc-settings-card{
  min-height:96px!important;
  height:96px!important;
  padding:5px 8px!important;
  grid-template-rows:auto 36px 1fr!important;
  gap:2px!important;
}
.hwc-settings-card h4{margin-bottom:2px!important}
.hwc-settings-grid input{height:29px!important}
.hwc-color-line{min-height:27px!important;align-items:center!important}
.hwc-color-line>b{padding-top:0!important}
.hwc-color-chip,.hwc-color-native{width:25px!important;height:25px!important;flex-basis:25px!important}

/* Complete bottom artwork from the final reference. */
.hwc-create-image-footer{
  position:relative!important;
  width:100%!important;
  height:82px!important;
  min-height:82px!important;
  margin:0!important;
  align-self:end!important;
  justify-self:stretch!important;
  background:#e99b10 url('/assets/clans-v9-3d/ui/clans-footer-complete.png?v=34001') center center/100% 100% no-repeat!important;
  border-radius:11px!important;
  overflow:hidden!important;
  filter:drop-shadow(0 4px 3px rgba(105,50,1,.18))!important;
}
/* Preserve the real create action as a transparent hit target over the bitmap CTA. */
.hwc-create-image-footer .hwc-create-submit{
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  top:20%!important;
  bottom:12%!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  cursor:pointer!important;
}
.hwc-create-image-footer .hwc-create-submit:hover{opacity:.01!important}

/* Keep it fitted on slightly smaller screens as well. */
@media(max-width:1120px){
  .hwc-titlebar{flex-basis:90px!important;min-height:90px!important;height:90px!important}
  .mode-paper:has(.hwc-root)>.mode-panel-close{width:47px!important;height:47px!important}
  .hwc-tabs{flex-basis:50px!important;height:50px!important}
  .hwc-tabs button{height:40px!important}
  .hwc-create{grid-template-rows:94px minmax(146px,1fr) 90px 74px!important;gap:5px!important}
  .hwc-create-showcase{min-height:94px!important}
  .hwc-preview-badge{width:82px!important;height:82px!important;flex-basis:82px!important}
  .hwc-settings-card{height:90px!important;min-height:90px!important}
  .hwc-create-image-footer{height:74px!important;min-height:74px!important}
}


/* === v50 FRAME PICKER CENTER ONLY ===
   Fixes a conflict inside the old clans.css:
   frame cards can be 68-72px high while .hwc-frame-live-choice was forced to 82px
   and aligned to flex-start. Keep scrolling untouched; only center/fit the frame tiles. */
.hwc-frames button{
  display:grid!important;
  grid-template-rows:58px 14px!important;
  align-items:center!important;
  justify-items:center!important;
  align-content:center!important;
  justify-content:center!important;
  height:78px!important;
  min-height:78px!important;
  padding:2px 3px!important;
  overflow:visible!important;
}

.hwc-frames button .hwc-frame-live-choice{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  margin:0!important;
  align-self:center!important;
  justify-self:center!important;
  transform-origin:50% 50%!important;
}

.hwc-frames button.active .hwc-frame-live-choice{
  transform:scale(1.04)!important;
  transform-origin:50% 50%!important;
}

.hwc-frames button small{
  position:static!important;
  display:block!important;
  width:100%!important;
  height:14px!important;
  min-height:14px!important;
  margin:0!important;
  padding:0!important;
  line-height:14px!important;
  text-align:center!important;
  align-self:center!important;
  justify-self:center!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Do not change the scrolling container. */
.hwc-frames{
  align-content:start!important;
}

/* === v51: uniform visual scale-down only ===
   Shrinks the entire clan UI without changing its internal layout or scroll logic. */
#modePanelBody:has(.hwc-root){
  position:relative!important;
  overflow:visible!important;
}
.hwc-root{
  transform:scale(.94)!important;
  transform-origin:center center!important;
}
/* The real close hit-area is outside .hwc-root, so move it to the scaled visual X. */
.mode-paper:has(.hwc-root)>.mode-panel-close{
  right:40px!important;
  top:22px!important;
}

/* === v53: keep v51 scale, fix ONLY frame-picker inner crest centering ===
   The old frame masks are optically offset inside picker thumbnails.  In the
   picker only, use a centered inner fill/symbol box; the real selected crest,
   preview, frames, scrolling and v51 scale stay unchanged. */
.hwc-frames button .hwc-frame-live-choice{
  position:relative!important;
  display:block!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  margin:0 auto!important;
  overflow:visible!important;
}

.hwc-frames button .hwc-frame-live-choice > .hwc-live-fill{
  position:absolute!important;
  inset:17%!important;
  width:auto!important;
  height:auto!important;
  left:17%!important;
  right:17%!important;
  top:17%!important;
  bottom:17%!important;
  border-radius:50%!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  transform:none!important;
}

.hwc-frames button .hwc-frame-live-choice > .hwc-live-symbol-layer{
  position:absolute!important;
  inset:17%!important;
  width:auto!important;
  height:auto!important;
  left:17%!important;
  right:17%!important;
  top:17%!important;
  bottom:17%!important;
  border-radius:50%!important;
  clip-path:none!important;
  -webkit-mask:none!important;
  mask:none!important;
  overflow:hidden!important;
  transform:none!important;
}

.hwc-frames button .hwc-frame-live-choice > .hwc-live-symbol-layer > .hwc-live-symbol{
  position:absolute!important;
  width:62%!important;
  height:62%!important;
  max-width:none!important;
  max-height:none!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:translate(-50%,-50%)!important;
}

/* Keep non-round picker interiors centered, but matching the frame geometry. */
.hwc-frames button .hwc-frame-live-choice.hwc-live-crest-triangle > .hwc-live-fill,
.hwc-frames button .hwc-frame-live-choice.hwc-live-crest-triangle > .hwc-live-symbol-layer{
  inset:16% 20% 22% 20%!important;
  border-radius:0!important;
  clip-path:polygon(50% 3%,96% 92%,4% 92%)!important;
}
.hwc-frames button .hwc-frame-live-choice.hwc-live-crest-diamond > .hwc-live-fill,
.hwc-frames button .hwc-frame-live-choice.hwc-live-crest-diamond > .hwc-live-symbol-layer{
  inset:18%!important;
  border-radius:0!important;
  clip-path:polygon(50% 2%,98% 50%,50% 98%,2% 50%)!important;
}
.hwc-frames button .hwc-frame-live-choice.hwc-live-crest-hex > .hwc-live-fill,
.hwc-frames button .hwc-frame-live-choice.hwc-live-crest-hex > .hwc-live-symbol-layer{
  inset:17%!important;
  border-radius:0!important;
  clip-path:polygon(25% 4%,75% 4%,98% 50%,75% 96%,25% 96%,2% 50%)!important;
}

/* Frame artwork itself is always exactly centered over that inner box. */
.hwc-frames button .hwc-frame-live-choice > .hwc-live-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
}

/* === v54: empty-clan mascot only — transparent + optically centered === */
.hwc-empty-clans{
  align-items:center!important;
  text-align:center!important;
}
.hwc-empty-clans img.hwc-empty-mascot-png{
  content:url('/assets/clans-v9-3d/empty-mascot-v12-card.png?v=55001')!important;
  display:block!important;
  width:190px!important;
  height:164px!important;
  max-width:70%!important;
  margin:0 auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 7px 4px rgba(135,76,12,.16))!important;
  transform:none!important;
}

/* === v57 PREMIUM COLOR SHIELDS ONLY ===
   Larger, ornate color selectors. No frame/symbol/layout logic is changed. */
.hwc-color-line{
  min-height:46px!important;
  gap:9px!important;
  overflow:visible!important;
}
.hwc-color-line>b{
  line-height:40px!important;
}
.hwc-color-palette{
  min-height:44px!important;
  gap:5px!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
}
.hwc-color-chip{
  width:40px!important;
  height:40px!important;
  flex:0 0 40px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
}
.hwc-color-chip img{
  width:40px!important;
  height:40px!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:drop-shadow(0 3px 2px rgba(91,45,3,.30))!important;
  transition:transform .13s ease,filter .13s ease!important;
}
.hwc-color-chip:hover img{
  transform:translateY(-2px) scale(1.07)!important;
  filter:brightness(1.055) saturate(1.08) drop-shadow(0 5px 3px rgba(91,45,3,.34))!important;
}
.hwc-color-chip.active img{
  transform:translateY(-1px) scale(1.04)!important;
  filter:brightness(1.04) saturate(1.08) drop-shadow(0 0 4px rgba(80,196,37,.65)) drop-shadow(0 4px 2px rgba(91,45,3,.34))!important;
}
.hwc-color-chip.active::after{
  right:-1px!important;
  top:-3px!important;
  width:17px!important;
  height:17px!important;
  font-size:11px!important;
  border-width:2px!important;
}
@media(max-width:1120px){
  .hwc-color-line{min-height:42px!important}
  .hwc-color-palette{min-height:40px!important;gap:4px!important}
  .hwc-color-chip,.hwc-color-chip img{width:36px!important;height:36px!important}
  .hwc-color-chip{flex-basis:36px!important}
}

/* === v58: premium locked-league center panel ===
   Only the middle BATTLE pane inside an existing clan is restyled. */
.hwc-center .hwc-battle-lock-v58{
  position:relative!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:9px!important;
  padding:12px 14px 14px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% -15%,rgba(255,255,255,.62),transparent 34%),
    linear-gradient(180deg,#fff2bf 0%,#ffd978 43%,#f5ba3d 100%)!important;
}
.hwc-center .hwc-battle-lock-v58::before,
.hwc-center .hwc-battle-lock-v58::after{
  content:""!important;
  position:absolute!important;
  width:90px!important;
  height:90px!important;
  border:2px solid rgba(255,255,255,.28)!important;
  transform:rotate(45deg)!important;
  pointer-events:none!important;
}
.hwc-center .hwc-battle-lock-v58::before{left:-62px!important;top:38%!important}
.hwc-center .hwc-battle-lock-v58::after{right:-62px!important;bottom:8%!important}

.hwc-lock-ribbon{
  width:min(330px,94%)!important;
  min-height:42px!important;
  display:grid!important;
  grid-template-columns:28px 1fr!important;
  grid-template-rows:20px 13px!important;
  align-items:center!important;
  padding:4px 14px 4px 10px!important;
  border:2px solid #a9600c!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#ffbd31 0%,#f49310 54%,#d96b07 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,239,163,.7),0 4px 0 #874007,0 7px 10px rgba(102,52,6,.18)!important;
  color:#fff8e3!important;
  text-shadow:0 2px 0 rgba(111,48,0,.35)!important;
  z-index:2!important;
}
.hwc-lock-ribbon>span{
  grid-row:1/3!important;
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#fff0a6!important;
  color:#8c4b0b!important;
  box-shadow:inset 0 0 0 2px #c87813!important;
  font-size:14px!important;
  text-shadow:none!important;
}
.hwc-lock-ribbon>b{font-size:13px!important;letter-spacing:.04em!important;line-height:20px!important}
.hwc-lock-ribbon>small{font-size:8px!important;font-weight:1000!important;letter-spacing:.08em!important;opacity:.88!important}

.hwc-battle-scene-v58{
  width:min(350px,96%)!important;
  height:172px!important;
  flex:0 0 172px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr)!important;
  align-items:center!important;
  gap:5px!important;
  padding:13px 14px!important;
  border:2px solid #c77a15!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 36%,rgba(255,255,255,.9) 0 3px,transparent 4px),
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.45) 0 2px,transparent 3px),
    radial-gradient(circle at 83% 18%,rgba(255,255,255,.45) 0 2px,transparent 3px),
    linear-gradient(145deg,#fff6d0 0%,#ffe5a1 48%,#f4c75d 100%)!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.52),0 4px 0 #9d570d,0 8px 14px rgba(91,49,6,.13)!important;
  overflow:hidden!important;
  position:relative!important;
  z-index:2!important;
}
.hwc-battle-scene-v58::before{
  content:""!important;
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  bottom:17px!important;
  height:18px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(140,79,8,.18),transparent 70%)!important;
  pointer-events:none!important;
}
.hwc-scene-side{
  min-width:0!important;
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:2px!important;
  position:relative!important;
  z-index:2!important;
}
.hwc-scene-side>b{
  margin-top:2px!important;
  color:#74370d!important;
  font-size:11px!important;
  line-height:1.1!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.hwc-scene-side>small{
  max-width:120px!important;
  color:#a5682a!important;
  font-size:7.5px!important;
  line-height:1.15!important;
  font-weight:800!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.hwc-scene-crest{
  width:100px!important;
  height:100px!important;
  display:block!important;
  position:relative!important;
  flex:0 0 100px!important;
  filter:drop-shadow(0 7px 5px rgba(102,53,5,.24))!important;
}
.hwc-scene-crest>.hwc-live-fill,
.hwc-scene-crest>.hwc-live-symbol-layer,
.hwc-scene-crest>.hwc-live-frame{pointer-events:none!important}

.hwc-rival-crest{
  width:94px!important;
  height:94px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:26px 26px 34px 34px!important;
  border:4px solid #f9db83!important;
  background:linear-gradient(155deg,#805228 0%,#5f391f 55%,#3f2417 100%)!important;
  box-shadow:inset 0 0 0 3px #bb7b28,0 5px 0 #7c430d,0 8px 12px rgba(81,42,3,.22)!important;
  position:relative!important;
}
.hwc-rival-crest::before{
  content:""!important;
  position:absolute!important;
  inset:9px!important;
  border-radius:19px 19px 27px 27px!important;
  border:2px dashed rgba(255,232,168,.42)!important;
}
.hwc-rival-crest>b{
  color:#ffe9a5!important;
  font-size:33px!important;
  line-height:1!important;
  text-shadow:0 3px 0 rgba(51,22,0,.38)!important;
}

.hwc-scene-vs-v58{
  position:static!important;
  transform:none!important;
  width:64px!important;
  height:64px!important;
  border-radius:50%!important;
  display:grid!important;
  grid-template-rows:17px 27px!important;
  place-content:center!important;
  background:linear-gradient(180deg,#4cc9ff 0%,#1298e1 60%,#0877c2 100%)!important;
  color:#fff!important;
  border:4px solid #fff8d7!important;
  box-shadow:0 0 0 2px #c17b1e,0 5px 0 #7d4b12,0 8px 12px rgba(77,42,5,.18)!important;
  z-index:3!important;
  text-shadow:0 2px 0 rgba(0,84,145,.45)!important;
}
.hwc-scene-vs-v58>small{font-size:7px!important;font-weight:1000!important;letter-spacing:.08em!important;opacity:.92!important}
.hwc-scene-vs-v58>b{font-size:19px!important;line-height:27px!important}

.hwc-battle-copy{
  width:min(350px,96%)!important;
  padding:0 8px!important;
  z-index:2!important;
}
.hwc-battle-copy h3{
  margin:1px 0 5px!important;
  color:#71370d!important;
  font-size:17px!important;
  line-height:1.1!important;
  text-shadow:0 1px #fff0b7!important;
}
.hwc-battle-copy p{
  margin:0!important;
  color:#89511f!important;
  font-size:10px!important;
  line-height:1.35!important;
  font-weight:750!important;
}
.hwc-battle-copy p b{color:#603009!important}

.hwc-member-gate{
  width:min(330px,90%)!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  color:#75400f!important;
  font-size:9px!important;
  font-weight:1000!important;
  z-index:2!important;
}
.hwc-member-gate>b{
  display:inline-flex!important;
  min-width:50px!important;
  height:22px!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#fff0b5!important;
  border:1px solid #c9811c!important;
  box-shadow:inset 0 1px rgba(255,255,255,.7)!important;
  color:#713a0d!important;
}
.hwc-battle-lock-v58 .hwc-progress{
  width:min(330px,90%)!important;
  height:22px!important;
  flex:0 0 22px!important;
  border:2px solid #96520f!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#77421b,#5d3216)!important;
  box-shadow:inset 0 2px 4px rgba(40,17,0,.25),0 2px 0 rgba(255,244,190,.6)!important;
  overflow:hidden!important;
  z-index:2!important;
}
.hwc-battle-lock-v58 .hwc-progress i{
  top:2px!important;
  bottom:2px!important;
  left:2px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#9df06c 0%,#54c73e 55%,#33a928 100%)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.55),0 0 7px rgba(81,190,48,.35)!important;
}
.hwc-battle-lock-v58 .hwc-progress b{
  line-height:18px!important;
  font-size:10px!important;
  letter-spacing:.02em!important;
  text-shadow:0 1px 1px rgba(0,0,0,.35)!important;
}
.hwc-progress-hint{
  margin-top:-3px!important;
  color:#8d581f!important;
  font-size:8px!important;
  font-weight:800!important;
  z-index:2!important;
}
.hwc-progress-hint b{color:#6c330b!important}

@media(max-width:1120px){
  .hwc-center .hwc-battle-lock-v58{padding:9px 10px 10px!important;gap:7px!important}
  .hwc-lock-ribbon{min-height:38px!important}
  .hwc-battle-scene-v58{height:152px!important;flex-basis:152px!important;padding:9px 10px!important;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)!important}
  .hwc-scene-crest{width:86px!important;height:86px!important;flex-basis:86px!important}
  .hwc-rival-crest{width:82px!important;height:82px!important}
  .hwc-scene-vs-v58{width:54px!important;height:54px!important;grid-template-rows:14px 23px!important}
  .hwc-scene-vs-v58>b{font-size:17px!important;line-height:23px!important}
  .hwc-battle-copy h3{font-size:15px!important}
  .hwc-battle-copy p{font-size:9px!important}
}

/* === v58.1 hotfix: right ranking row readability inside existing clan === */
.hwc-created-grid .hwc-ranking .hwc-ranks{
  padding:10px 5px!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-row{
  grid-template-columns:30px 50px minmax(0,1fr) 54px 38px!important;
  gap:8px!important;
  align-items:center!important;
  padding:10px 10px 10px 6px!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-num{
  font-size:14px!important;
  line-height:1!important;
  justify-self:center!important;
}
.hwc-created-grid .hwc-ranking .hwc-mini-crest{
  width:44px!important;
  height:44px!important;
  justify-self:start!important;
  margin-left:-2px!important;
}
.hwc-created-grid .hwc-ranking .hwc-mini-crest .hwc-emblem-svg{
  width:29px!important;
  height:29px!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-name{
  min-width:0!important;
  padding-left:2px!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-name strong{
  display:block!important;
  font-size:14px!important;
  line-height:1.05!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-name strong small{
  font-size:11px!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-name span{
  margin-top:2px!important;
  font-size:10px!important;
  line-height:1.15!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-score{
  text-align:right!important;
  font-size:10px!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-score b{
  font-size:15px!important;
  line-height:1!important;
}
.hwc-created-grid .hwc-ranking .hwc-rank-score small{
  display:block!important;
  font-size:10px!important;
  line-height:1.1!important;
}
.hwc-created-grid .hwc-ranking .hwc-you{
  justify-self:end!important;
  white-space:nowrap!important;
  font-size:10px!important;
}

/* === v60: warmer league VS badge + clearer clan INFO panel === */
.hwc-center .hwc-scene-vs-v58{
  background:linear-gradient(180deg,#ffd86b 0%,#f2a61d 56%,#da7b08 100%)!important;
  color:#fff7dd!important;
  border:4px solid #fff2bf!important;
  box-shadow:0 0 0 2px #a85b10,0 5px 0 #7b3e0a,0 8px 12px rgba(77,42,5,.18)!important;
  text-shadow:0 2px 0 rgba(116,58,6,.38)!important;
}
.hwc-center .hwc-scene-vs-v58>small{color:#fff3c2!important}
.hwc-center .hwc-scene-vs-v58>b{color:#ffffff!important}

.hwc-info-v60{
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:14px!important;
  text-align:left!important;
  background:linear-gradient(180deg,rgba(255,247,209,.75) 0%,rgba(255,226,150,.45) 100%)!important;
}
.hwc-info-v60 h3{
  margin:2px 0 4px!important;
  text-align:center!important;
  color:#7a420f!important;
  font-size:17px!important;
  line-height:1.1!important;
}
.hwc-info-hero-v60{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:12px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#fff0ba 0%,#ffe091 100%)!important;
  border:2px solid #d49b35!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45)!important;
}
.hwc-info-headings{min-width:0!important;display:flex!important;flex-direction:column!important;gap:5px!important}
.hwc-info-headings b{
  font-size:16px!important;
  line-height:1.08!important;
  color:#6f3609!important;
}
.hwc-info-motto{
  font-size:11px!important;
  line-height:1.25!important;
  color:#8c5720!important;
  font-weight:800!important;
}
.hwc-info-hero-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
.hwc-info-hero-pills small{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:#fff4d2!important;
  border:1px solid #d8a34a!important;
  color:#825019!important;
  font-size:10px!important;
  font-weight:900!important;
}
.hwc-info-v60 .hwc-info-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.hwc-info-v60 .hwc-info-card{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  min-height:68px!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  border:1px solid #d7a24a!important;
  background:linear-gradient(180deg,#fff6da 0%,#ffefc1 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;
}
.hwc-info-v60 .hwc-info-card small{
  font-size:10px!important;
  line-height:1!important;
  color:#a06623!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
}
.hwc-info-v60 .hwc-info-card b{
  font-size:14px!important;
  line-height:1.2!important;
  color:#67320b!important;
}
.hwc-info-v60 .hwc-info-card-wide{grid-column:1/-1!important}
.hwc-info-v60 .hwc-info-editor{
  margin-top:2px!important;
  padding:12px!important;
  border-radius:16px!important;
  border:2px solid #d49b35!important;
  background:linear-gradient(180deg,#fff1c3 0%,#ffe29f 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.42)!important;
}
.hwc-info-v60 .hwc-info-editor h4{
  margin:0 0 8px!important;
  text-align:center!important;
  color:#7a420f!important;
  font-size:13px!important;
  letter-spacing:.04em!important;
}
.hwc-info-v60 label{
  display:grid!important;
  gap:4px!important;
  margin:6px 0!important;
  color:#9b6524!important;
  font-size:10px!important;
  font-weight:900!important;
}
.hwc-info-v60 input,
.hwc-info-v60 select{
  height:38px!important;
  border:1px solid #cb8b28!important;
  border-radius:10px!important;
  padding:0 10px!important;
  background:#fffbf0!important;
  color:#68330d!important;
  font-size:12px!important;
}
.hwc-info-v60 input[type="color"]{
  width:100%!important;
  min-width:74px!important;
  padding:4px!important;
  overflow:hidden!important;
}
.hwc-info-v60 .hwc-form-row-v60{
  grid-template-columns:92px 1fr 1fr!important;
  gap:8px!important;
  align-items:end!important;
}
.hwc-info-v60 .hwc-info-note{
  padding:10px 12px!important;
  border-radius:12px!important;
  background:#fff3cf!important;
  border:1px solid #dfb25f!important;
  color:#8a5820!important;
  text-align:center!important;
  font-size:11px!important;
  font-weight:800!important;
}
.hwc-info-v60 .hwc-gold{
  width:100%!important;
  margin-top:6px!important;
  font-size:13px!important;
}
.hwc-info-v60 .hwc-leave{
  margin-top:2px!important;
  text-align:center!important;
  font-size:12px!important;
}
@media(max-width:1120px){
  .hwc-info-v60{padding:10px!important;gap:8px!important}
  .hwc-info-v60 h3{font-size:15px!important}
  .hwc-info-hero-v60{padding:10px!important;gap:10px!important}
  .hwc-info-headings b{font-size:14px!important}
  .hwc-info-motto{font-size:10px!important}
  .hwc-info-v60 .hwc-info-stats{gap:6px!important}
  .hwc-info-v60 .hwc-info-card{min-height:60px!important;padding:8px 9px!important}
  .hwc-info-v60 .hwc-info-card b{font-size:12px!important}
  .hwc-info-v60 .hwc-form-row-v60{grid-template-columns:86px 1fr 1fr!important;gap:6px!important}
}

/* === v61: league-open screen uses the real clan crest instead of the old tiny SVG === */
.hwc-battle-ready-v61{
  flex:1!important;
  min-height:0!important;
  overflow:auto!important;
  padding:12px 14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.58),transparent 35%),
    linear-gradient(180deg,#fff1bb 0%,#ffd46b 48%,#f4b337 100%)!important;
}
.hwc-ready-ribbon{
  width:min(340px,96%)!important;
  min-height:44px!important;
  display:grid!important;
  grid-template-columns:34px 1fr!important;
  grid-template-rows:22px 14px!important;
  align-items:center!important;
  padding:4px 14px 4px 8px!important;
  border:2px solid #a65b0d!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#ffc945 0%,#f49b14 56%,#dd7007 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,243,176,.62),0 4px 0 #874009,0 7px 12px rgba(102,52,6,.16)!important;
  color:#fff8e6!important;
  text-shadow:0 2px 0 rgba(104,46,0,.32)!important;
}
.hwc-ready-ribbon.registered{background:linear-gradient(180deg,#9ad85b 0%,#60b837 58%,#3c9223 100%)!important;border-color:#3f7f20!important;box-shadow:inset 0 0 0 2px rgba(237,255,202,.6),0 4px 0 #2d6819,0 7px 12px rgba(49,90,20,.16)!important}
.hwc-ready-ribbon>span{
  grid-row:1/3!important;
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#fff0ad!important;
  color:#8c4c0c!important;
  box-shadow:inset 0 0 0 2px rgba(175,99,11,.55)!important;
  text-shadow:none!important;
  font-size:15px!important;
}
.hwc-ready-ribbon>b{font-size:12px!important;line-height:22px!important;letter-spacing:.035em!important}
.hwc-ready-ribbon>small{font-size:7px!important;line-height:14px!important;font-weight:1000!important;letter-spacing:.075em!important}
.hwc-ready-arena{
  width:min(350px,96%)!important;
  height:178px!important;
  flex:0 0 178px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)!important;
  gap:6px!important;
  align-items:center!important;
  padding:12px 12px!important;
  border:2px solid #c47a15!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.46) 0 2px,transparent 3px),
    radial-gradient(circle at 80% 18%,rgba(255,255,255,.46) 0 2px,transparent 3px),
    linear-gradient(145deg,#fff7d4 0%,#ffe49d 52%,#f2c258 100%)!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),0 4px 0 #98520c,0 8px 13px rgba(91,49,6,.12)!important;
}
.hwc-ready-side{
  min-width:0!important;
  display:grid!important;
  justify-items:center!important;
  align-content:center!important;
  gap:3px!important;
}
.hwc-ready-side>b{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#71360c!important;
  font-size:11px!important;
  line-height:1.1!important;
}
.hwc-ready-side>small{
  max-width:125px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#9a6329!important;
  font-size:7.5px!important;
  line-height:1.15!important;
  font-weight:800!important;
}
.hwc-league-ready-crest{
  width:102px!important;
  height:102px!important;
  display:block!important;
  position:relative!important;
  filter:drop-shadow(0 7px 5px rgba(98,50,5,.23))!important;
}
.hwc-league-rival-crest{
  width:96px!important;
  height:96px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:27px 27px 34px 34px!important;
  border:4px solid #f4d581!important;
  background:linear-gradient(155deg,#83542b 0%,#624021 58%,#442817 100%)!important;
  box-shadow:inset 0 0 0 3px #b87a2b,0 5px 0 #78400c,0 8px 12px rgba(82,42,4,.2)!important;
  position:relative!important;
}
.hwc-league-rival-crest::before{
  content:""!important;
  position:absolute!important;
  inset:9px!important;
  border-radius:18px 18px 25px 25px!important;
  border:2px dashed rgba(255,235,175,.43)!important;
}
.hwc-league-rival-crest>b{color:#ffeaaa!important;font-size:33px!important;line-height:1!important;text-shadow:0 3px 0 rgba(45,19,0,.36)!important;z-index:1!important}
.hwc-league-rival-crest.waiting>b{font-size:27px!important}
.hwc-ready-vs{
  width:60px!important;
  height:60px!important;
  border-radius:50%!important;
  display:grid!important;
  grid-template-rows:16px 26px!important;
  place-content:center!important;
  background:linear-gradient(180deg,#ffd86b 0%,#f2a61d 56%,#da7b08 100%)!important;
  color:#fff!important;
  border:4px solid #fff3c1!important;
  box-shadow:0 0 0 2px #a85b10,0 5px 0 #7b3e0a,0 8px 12px rgba(77,42,5,.18)!important;
  text-shadow:0 2px 0 rgba(116,58,6,.38)!important;
}
.hwc-ready-vs>small{font-size:7px!important;font-weight:1000!important;letter-spacing:.08em!important}
.hwc-ready-vs>b{font-size:19px!important;line-height:26px!important}
.hwc-ready-copy{width:min(350px,96%)!important;padding:0 8px!important}
.hwc-ready-copy h3{margin:1px 0 5px!important;color:#71370d!important;font-size:17px!important;line-height:1.1!important;text-shadow:0 1px #fff0b7!important}
.hwc-ready-copy p{margin:0!important;color:#89511f!important;font-size:10px!important;line-height:1.35!important;font-weight:750!important}
.hwc-register-league{
  min-width:220px!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:12px!important;
  border:2px solid #a65b0d!important;
  background:linear-gradient(180deg,#ffc943 0%,#f49a13 55%,#dc7008 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,241,169,.56),0 4px 0 #7f3b07!important;
  color:#fff!important;
  font-size:12px!important;
  text-shadow:0 2px 0 rgba(110,46,0,.32)!important;
}
.hwc-register-league:hover{transform:translateY(-2px)!important;filter:brightness(1.04)!important}
.hwc-ready-hint{color:#8c5720!important;font-size:9px!important;font-weight:800!important}
@media(max-width:1120px){
  .hwc-battle-ready-v61{padding:9px 10px 12px!important;gap:8px!important}
  .hwc-ready-arena{height:158px!important;flex-basis:158px!important;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)!important}
  .hwc-league-ready-crest{width:88px!important;height:88px!important}
  .hwc-league-rival-crest{width:84px!important;height:84px!important}
  .hwc-ready-vs{width:54px!important;height:54px!important}
  .hwc-ready-copy h3{font-size:15px!important}
  .hwc-ready-copy p{font-size:9px!important}
}

/* ===== v65 image trophy league rail ===== */
.hwc-clan-header{
  align-items:center!important;
  gap:14px!important;
  padding-top:14px!important;
  padding-bottom:16px!important;
  min-height:116px!important;
  flex:0 0 116px!important;
  padding-right:16px!important;
}
.hwc-clan-heading{min-width:0!important;flex:1 1 auto!important;padding-top:2px!important}
.hwc-clan-topright{
  width:356px!important;
  min-width:356px!important;
  height:92px!important;
  flex:0 0 356px!important;
  align-self:center!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  padding-top:0!important;
}
.hwc-league-rail{
  width:100%!important;
  min-height:92px!important;
  padding:7px 12px 9px!important;
  position:relative!important;
  top:-22px!important;
  border:2px solid #bc7416!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.18),transparent 34%),
    linear-gradient(180deg,#f5cf6b 0%,#efbf47 55%,#e7b33b 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(255,235,180,.45),0 4px 0 #975407!important;
  overflow:hidden!important;
}
.hwc-league-rail.registered,
.hwc-league-rail.open{
  background:
    radial-gradient(circle at 50% -10%,rgba(255,255,255,.22),transparent 34%),
    linear-gradient(180deg,#f7d678 0%,#f1c451 55%,#eab43d 100%)!important;
  border-color:#b66c10!important;
}
.hwc-league-rail.closed{filter:saturate(.92)!important}
.hwc-league-rail-head{
  min-height:18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  margin-bottom:5px!important;
  white-space:nowrap!important;
}
.hwc-league-rail-head>b{
  color:#6d350b!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.14em!important;
}
.hwc-league-rail-head>small{
  display:none!important;
  color:#8b520e!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
  padding:5px 8px 4px!important;
  border-radius:999px!important;
  border:1px solid rgba(170,106,16,.35)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,245,211,.95))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
  max-width:185px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hwc-league-rail.registered .hwc-league-rail-head>small{
  display:none!important;
  color:#6d4a10!important;
  background:linear-gradient(180deg,#eff9d7,#d8ef9d)!important;
  border-color:rgba(96,147,25,.32)!important;
}
.hwc-league-rail-steps{
  min-height:58px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:2px!important;
  position:relative!important;
}
.hwc-league-rail-steps::before{
  content:''!important;
  position:absolute!important;
  left:54px!important;
  right:54px!important;
  top:24px!important;
  height:3px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#daaa43 0%,#eac35f 50%,#daaa43 100%)!important;
  box-shadow:0 1px 0 rgba(255,248,196,.98),inset 0 1px 1px rgba(100,48,5,.14)!important;
}
.hwc-road-stage{
  flex:1 1 0!important;
  min-width:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  position:relative!important;
}
.hwc-road-arrow{
  position:absolute!important;
  right:-1px!important;
  top:11px!important;
  z-index:3!important;
  color:#b67a10!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
}
.hwc-road-step{
  width:92px!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:2px!important;
  position:relative!important;
  text-align:center!important;
  z-index:2!important;
  transition:transform .18s ease,filter .18s ease,opacity .18s ease!important;
}
.hwc-road-cup-wrap{
  width:48px!important;
  height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
}
.hwc-road-cup-wrap::before{
  content:''!important;
  position:absolute!important;
  inset:4px!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.72),rgba(255,222,150,.55) 55%,rgba(232,162,48,.1) 72%,transparent 73%)!important;
  opacity:.85!important;
}
.hwc-road-cup-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  position:relative!important;
  z-index:1!important;
  filter:drop-shadow(0 3px 3px rgba(107,58,8,.22))!important;
}
.hwc-road-step>b{
  margin:0!important;
  padding:0!important;
  color:#7c4308!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.05em!important;
  white-space:nowrap!important;
}
.hwc-road-step>small{
  display:none!important;
  margin:0!important;
  padding:0!important;
  color:#9b6322!important;
  font-size:6.2px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}
.hwc-road-step.current{
  transform:translateY(-2px) scale(1.03)!important;
  padding:3px 4px 4px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,252,236,.8),rgba(255,231,154,.42))!important;
  border:1px solid rgba(193,120,17,.42)!important;
  box-shadow:0 3px 7px rgba(134,75,12,.12), inset 0 1px 0 rgba(255,255,255,.76)!important;
}
.hwc-road-step.current .hwc-road-cup-wrap::before{
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.96),rgba(255,236,170,.84) 52%,rgba(255,193,43,.42) 72%,transparent 74%)!important;
  opacity:1!important;
}
.hwc-road-step.current .hwc-road-cup-image{
  transform:scale(1.06)!important;
  filter:drop-shadow(0 0 7px rgba(255,210,78,.82)) drop-shadow(0 3px 3px rgba(107,58,8,.22))!important;
}
.hwc-road-step.reached .hwc-road-cup-image{opacity:.96!important;filter:drop-shadow(0 2px 2px rgba(107,58,8,.16))!important}
.hwc-road-step.reached>b{color:#85501b!important}
.hwc-road-step.next .hwc-road-cup-wrap::before{opacity:.74!important}
.hwc-road-step.locked{opacity:.42!important;filter:saturate(.4)!important}
.hwc-road-step.locked .hwc-road-cup-wrap::before{opacity:.5!important}
.hwc-road-step.locked>b,.hwc-road-step.locked>small{color:#9a835f!important}
.hwc-road-step.current>b{
  color:#8d4205!important;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,239,190,.92))!important;
  border:1px solid rgba(206,143,36,.42)!important;
  border-radius:999px!important;
  padding:2px 9px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.hwc-road-step.current>small{color:#a85c00!important}

@media(max-width:1220px){
  .hwc-clan-topright{width:320px!important;min-width:320px!important;flex-basis:320px!important;height:94px!important}
  .hwc-league-rail{min-height:96px!important;padding:7px 10px 9px!important}
  .hwc-league-rail-head>small{
  display:none!important;max-width:162px!important}
  .hwc-road-step{width:86px!important}
  .hwc-road-cup-wrap{width:44px!important;height:44px!important}
  .hwc-road-step>b{font-size:9.2px!important}
}



/* v70 header fit override */
.hwc-clan-crest{width:96px!important;height:96px!important;flex:0 0 96px!important}


/* v71 clan management + online join */
.hwc-roster-sub{font-size:10px!important;text-transform:none!important}
.hwc-members{padding:8px!important}
.hwc-member{position:relative!important;grid-template-columns:42px minmax(0,1fr) 112px 62px!important;gap:8px!important;padding:8px!important;margin-bottom:7px!important;border-radius:12px!important;background:linear-gradient(#eef8df,#dbeec4)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important}
.hwc-member.online{border-color:#83b861!important}
.hwc-member-main b{font-size:12px!important;line-height:1.1!important}
.hwc-member-main b small{font-size:10px!important}
.hwc-member-topline{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}
.hwc-member-topline b{flex:1 1 auto!important;min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hwc-member-presence{font-size:9px!important;color:#6c6248!important;display:flex!important;align-items:center!important;gap:5px!important}
.hwc-member-presence i{width:8px!important;height:8px!important;border-radius:50%!important;display:inline-block!important;background:#a0907d!important;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset!important}
.hwc-member-presence i.on{background:#4ac550!important}
.hwc-role-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:3px 7px!important;border-radius:999px!important;font-size:8px!important;font-style:normal!important;font-weight:1000!important;letter-spacing:.06em!important;text-transform:uppercase!important;white-space:nowrap!important;border:1px solid rgba(0,0,0,.08)!important}
.hwc-role-badge.leader{background:linear-gradient(#ffd664,#f2a31d)!important;color:#7c3d00!important}
.hwc-role-badge.moderator{background:linear-gradient(#7ad5ff,#2aa6e9)!important;color:#0d5580!important}
.hwc-role-badge.member{background:linear-gradient(#fff1c6,#ecd78d)!important;color:#7a6030!important}
.hwc-member-stats{display:grid!important;grid-template-columns:1fr!important;gap:4px!important;text-align:right!important;align-self:stretch!important}
.hwc-member-stats span{display:grid!important;gap:1px!important;padding:3px 6px!important;border-radius:9px!important;background:rgba(255,255,255,.44)!important;border:1px solid rgba(201,157,60,.32)!important}
.hwc-member-stats i{font-style:normal!important;font-size:7px!important;line-height:1!important;font-weight:1000!important;color:#9d7a43!important;letter-spacing:.08em!important}
.hwc-member-stats b{font-size:14px!important;line-height:1!important;color:#7d4208!important}
.hwc-member-tools{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important}
.hwc-online-join,.hwc-menu-toggle{width:28px!important;height:28px!important;border:0!important;border-radius:9px!important;color:#fff!important;font-weight:1000!important;box-shadow:0 2px 0 rgba(0,0,0,.16)!important}
.hwc-online-join{background:linear-gradient(#58c4ff,#0f83d7)!important}
.hwc-menu-toggle{background:linear-gradient(#ffd15f,#e89513)!important}
.hwc-member-menu{position:absolute!important;right:8px!important;top:42px!important;z-index:8!important;min-width:154px!important;display:grid!important;gap:5px!important;padding:7px!important;border-radius:12px!important;background:linear-gradient(#fff6db,#f3d68f)!important;border:1px solid #d29a2b!important;box-shadow:0 8px 18px rgba(87,55,11,.2)!important}
.hwc-member-menu button{height:28px!important;border:0!important;border-radius:8px!important;padding:0 10px!important;font-size:10px!important;font-weight:1000!important;color:#7d4208!important;background:linear-gradient(#fff7e3,#f0cd7b)!important;text-align:left!important}
.hwc-member-menu button.bad{color:#fff!important;background:linear-gradient(#ef7862,#cc462d)!important}
.hwc-request{grid-template-columns:40px 1fr 28px 28px!important;padding:7px 6px!important}
.hwc-request b{font-size:11px!important}
.hwc-request small{font-size:9px!important}
@media(max-width:1220px){
  .hwc-member{grid-template-columns:40px minmax(0,1fr) 98px 58px!important}
  .hwc-member-stats b{font-size:12px!important}
}

/* ===== v73 bigger visible clan stats + icon stats in roster ===== */
.hwc-clan-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin-top:10px!important;
}
.hwc-clan-meta .hwc-clan-stat{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:6px 12px!important;
  min-height:32px!important;
  border-radius:999px!important;
  border:1px solid #cf972d!important;
  background:linear-gradient(180deg,#fff6d8 0%,#f6d47d 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 0 rgba(155,96,11,.16)!important;
}
.hwc-stat-icon{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  font-style:normal!important;
  font-size:12px!important;
  line-height:1!important;
  background:radial-gradient(circle at 30% 28%,#fffdf3 0%,#ffe9a7 45%,#f0bf51 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(117,67,9,.18)!important;
}
.hwc-clan-meta .hwc-clan-stat.members .hwc-stat-icon{
  background:radial-gradient(circle at 30% 28%,#fffef8 0%,#ffe7ae 42%,#efba41 100%)!important;
}
.hwc-clan-meta .hwc-clan-stat.rating .hwc-stat-icon{
  background:radial-gradient(circle at 30% 28%,#fffefb 0%,#ffe5a0 40%,#e9b53f 100%)!important;
}
.hwc-clan-meta .hwc-clan-stat.kills .hwc-stat-icon{
  background:radial-gradient(circle at 30% 28%,#fffef8 0%,#ffdcb6 40%,#ec9b45 100%)!important;
}
.hwc-clan-meta .hwc-clan-stat b{
  font-size:14px!important;
  line-height:1!important;
  font-weight:1000!important;
  color:#7c4208!important;
  letter-spacing:.01em!important;
}

.hwc-member{
  grid-template-columns:42px minmax(0,1fr) 136px 62px!important;
}
.hwc-member-stats{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  text-align:right!important;
  align-self:center!important;
}
.hwc-member-stats .hwc-member-stat{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  padding:5px 8px!important;
  min-height:30px!important;
  border-radius:10px!important;
  border:1px solid rgba(201,157,60,.34)!important;
  background:linear-gradient(180deg,rgba(255,250,235,.92),rgba(255,238,195,.68))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.hwc-member-stats .hwc-member-stat .hwc-stat-icon{
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
  font-size:11px!important;
}
.hwc-member-stats .hwc-member-stat.rating .hwc-stat-icon{
  background:radial-gradient(circle at 30% 28%,#fffefb 0%,#ffe3a0 40%,#e6b03b 100%)!important;
}
.hwc-member-stats .hwc-member-stat.kills .hwc-stat-icon{
  background:radial-gradient(circle at 30% 28%,#fffef8 0%,#ffd6ad 40%,#e89b47 100%)!important;
}
.hwc-member-stats .hwc-member-stat b{
  font-size:15px!important;
  line-height:1!important;
  color:#7d4208!important;
  font-weight:1000!important;
}

@media(max-width:1180px){
  .hwc-clan-meta{gap:8px!important}
  .hwc-clan-meta .hwc-clan-stat{padding:5px 10px!important;min-height:30px!important}
  .hwc-clan-meta .hwc-clan-stat b{font-size:13px!important}
  .hwc-member{grid-template-columns:40px minmax(0,1fr) 122px 58px!important}
  .hwc-member-stats .hwc-member-stat{padding:4px 7px!important}
  .hwc-member-stats .hwc-member-stat b{font-size:13px!important}
}

/* ===== v74 member stats inline like reference ===== */
.hwc-member{
  grid-template-columns:42px minmax(0,1fr) 92px 62px!important;
  gap:8px!important;
}
.hwc-member-stats{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  text-align:right!important;
  align-self:center!important;
}
.hwc-member-stats .hwc-member-stat{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  padding:0!important;
  min-height:auto!important;
  border:none!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hwc-member-stats .hwc-member-stat .hwc-stat-icon{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
  font-size:11px!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.hwc-member-stats .hwc-member-stat b{
  font-size:14px!important;
  line-height:1!important;
  font-weight:1000!important;
  color:#c77d11!important;
}
.hwc-member-stats .hwc-member-stat.rating b{
  color:#d98711!important;
}
.hwc-member-stats .hwc-member-stat.kills b{
  color:#bf6f12!important;
}

@media(max-width:1180px){
  .hwc-member{grid-template-columns:40px minmax(0,1fr) 84px 58px!important}
  .hwc-member-stats{gap:8px!important}
  .hwc-member-stats .hwc-member-stat b{font-size:13px!important}
}

/* ===== v75 modern blue stat icons, no icon backgrounds ===== */
.hwc-stat-icon-art{
  display:block!important;
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 1px 1px rgba(70,45,10,.18))!important;
}
.hwc-member-stats .hwc-member-stat{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.hwc-member-stats .hwc-member-stat .hwc-stat-icon-art{
  width:19px!important;
  height:19px!important;
  flex-basis:19px!important;
}
.hwc-member-stats .hwc-member-stat.rating b,
.hwc-member-stats .hwc-member-stat.kills b{
  color:#7d4208!important;
}
.hwc-clan-meta .hwc-clan-stat .hwc-stat-icon-art{
  width:24px!important;
  height:24px!important;
  flex-basis:24px!important;
}

/* ===== v77 visible clan close button ===== */
.mode-paper:has(.hwc-root) > .mode-panel-close{
  opacity:1!important;
  visibility:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:44px!important;
  height:44px!important;
  right:40px!important;
  top:22px!important;
  padding:0!important;
  border:2px solid #a92b0b!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.55) 0 7%,transparent 8%),
    linear-gradient(180deg,#ff5a32 0%,#f12e18 52%,#c8140a 100%)!important;
  color:transparent!important;
  font-size:0!important;
  line-height:1!important;
  box-shadow:
    inset 0 0 0 2px rgba(255,180,95,.65),
    inset 0 2px 3px rgba(255,255,255,.28),
    0 4px 0 #8c2608,
    0 6px 10px rgba(92,39,3,.28)!important;
  cursor:pointer!important;
  z-index:1000!important;
  transform:none!important;
  transition:transform .12s ease,filter .12s ease!important;
}
.mode-paper:has(.hwc-root) > .mode-panel-close::before{
  content:'×'!important;
  display:block!important;
  color:#fff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:34px!important;
  font-weight:900!important;
  line-height:36px!important;
  text-align:center!important;
  text-shadow:0 2px 0 #a51d0b!important;
  transform:translateY(-1px)!important;
}
.mode-paper:has(.hwc-root) > .mode-panel-close:hover{
  transform:translateY(-2px) scale(1.04)!important;
  filter:brightness(1.08)!important;
}
.mode-paper:has(.hwc-root) > .mode-panel-close:active{
  transform:translateY(2px) scale(.98)!important;
  box-shadow:inset 0 0 0 2px rgba(255,180,95,.65),inset 0 2px 4px rgba(110,20,0,.25),0 2px 0 #8c2608!important;
}

@media(max-width:1120px){
  .mode-paper:has(.hwc-root) > .mode-panel-close{
    width:40px!important;
    height:40px!important;
    right:34px!important;
    top:20px!important;
  }
  .mode-paper:has(.hwc-root) > .mode-panel-close::before{
    font-size:31px!important;
    line-height:32px!important;
  }
}

/* === v76 public clan profiles + roster viewer === */
.hwc-rank-row[data-clan-open]{
  grid-template-columns:28px 50px minmax(0,1fr) 92px 30px!important;
  cursor:pointer!important;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important;
}
.hwc-rank-row[data-clan-open]:hover{transform:translateY(-1px)!important;filter:brightness(1.025)!important;box-shadow:0 5px 10px rgba(111,62,8,.13)!important}
.hwc-rank-row[data-clan-open]:focus-visible{outline:3px solid #6f32c8!important;outline-offset:2px!important}
.hwc-open-arrow{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;border-radius:10px!important;background:linear-gradient(180deg,#8f46df,#6125b7)!important;color:#fff!important;font:1000 24px/1 Arial!important;box-shadow:0 3px 0 #4c168f!important}
.hwc-rank-row.mine .hwc-open-arrow{display:none!important}
.hwc-rank-row .hwc-you{justify-self:end!important}

.hwc-public-clan{display:flex!important;flex-direction:column!important;height:100%!important;min-height:0!important;gap:8px!important}
.hwc-public-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:44px!important;padding:4px 8px!important}
.hwc-public-topbar button{height:38px!important;padding:0 18px!important;border:2px solid #c77b13!important;border-radius:14px!important;background:linear-gradient(180deg,#fff4bd,#efb736)!important;color:#6e3d0d!important;font:1000 12px/1 Trebuchet MS,Arial!important;box-shadow:0 4px 0 #9c5608!important;cursor:pointer!important}
.hwc-public-topbar button:hover{transform:translateY(-1px)!important;filter:brightness(1.04)!important}
.hwc-public-topbar span{color:#9b5c18!important;font:1000 11px/1 Trebuchet MS,Arial!important;letter-spacing:.08em!important}
.hwc-public-clan .hwc-clan-header{margin:0 5px!important}
.hwc-public-tabs{display:flex!important;justify-content:center!important;gap:10px!important;margin:1px 0 2px!important}
.hwc-public-tabs button{min-width:170px!important;height:40px!important;padding:0 16px!important;border:2px solid #c9861f!important;border-radius:14px!important;background:linear-gradient(180deg,#fff8df,#efc66f)!important;color:#774613!important;font:1000 12px/1 Trebuchet MS,Arial!important;box-shadow:0 4px 0 rgba(151,83,9,.28)!important;cursor:pointer!important}
.hwc-public-tabs button.active{background:linear-gradient(180deg,#8e45df,#6423bc)!important;border-color:#6a24b4!important;color:#fff!important;box-shadow:0 4px 0 #461487!important}
.hwc-public-tabs button i{display:inline-grid!important;place-items:center!important;min-width:20px!important;height:20px!important;margin-left:6px!important;border-radius:999px!important;background:rgba(255,255,255,.25)!important;font-style:normal!important;font-size:10px!important}
.hwc-public-layout{display:grid!important;grid-template-columns:minmax(0,1.7fr) minmax(270px,.7fr)!important;gap:10px!important;flex:1!important;min-height:0!important;padding:0 5px 7px!important}
.hwc-public-main,.hwc-public-side{min-height:0!important;overflow:hidden!important}
.hwc-public-main{display:flex!important;flex-direction:column!important;padding:12px!important}
.hwc-public-side{display:flex!important;flex-direction:column!important;padding:12px!important;background:linear-gradient(180deg,#fff7d8,#f3c858)!important}
.hwc-public-section-title{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:10px!important;padding:2px 3px 10px!important;border-bottom:1px solid rgba(173,102,15,.28)!important}
.hwc-public-section-title small{display:block!important;color:#b47422!important;font-size:9px!important;font-weight:1000!important;letter-spacing:.12em!important}
.hwc-public-section-title h3{margin:3px 0 0!important;color:#6a390c!important;font-size:21px!important;line-height:1!important}
.hwc-public-section-title>span{display:inline-flex!important;align-items:center!important;height:28px!important;padding:0 11px!important;border-radius:999px!important;background:#fff8dd!important;border:1px solid #d5a141!important;color:#8a571f!important;font-size:10px!important;font-weight:1000!important}
.hwc-public-members{display:grid!important;gap:7px!important;margin-top:9px!important;overflow:auto!important;padding-right:4px!important;align-content:start!important}
.hwc-public-member{display:grid!important;grid-template-columns:28px 48px minmax(0,1fr) 160px!important;align-items:center!important;gap:9px!important;min-height:59px!important;padding:6px 10px!important;border:1px solid #dfa146!important;border-radius:15px!important;background:linear-gradient(180deg,#fffdf3,#f7dfae)!important;box-shadow:0 2px 0 rgba(154,87,12,.16)!important}
.hwc-public-member.online{border-color:#8fbe43!important;background:linear-gradient(180deg,#fbfff1,#eaf6c7)!important}
.hwc-public-member-rank{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;border-radius:9px!important;background:linear-gradient(180deg,#8c45dc,#6024b4)!important;color:#fff!important;font-size:11px!important;font-weight:1000!important}
.hwc-public-member>img{width:46px!important;height:46px!important;border-radius:50%!important;object-fit:cover!important;border:3px solid #e6aa31!important;background:#57377a!important;box-shadow:0 2px 4px rgba(76,37,4,.15)!important}
.hwc-public-member-copy{min-width:0!important}
.hwc-public-member-copy>b{display:block!important;color:#66370d!important;font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.hwc-public-member-copy>b small{font-size:9px!important;color:#a66e27!important}
.hwc-public-member-copy>span{display:flex!important;align-items:center!important;gap:6px!important;margin-top:4px!important;color:#8a5a22!important;font-size:9px!important;font-weight:800!important}
.hwc-public-member-copy>span>i{width:7px!important;height:7px!important;border-radius:50%!important;background:#aaa!important}
.hwc-public-member-copy>span>i.on{background:#49c53c!important;box-shadow:0 0 5px rgba(63,190,54,.45)!important}
.hwc-public-member-stats{display:flex!important;justify-content:flex-end!important;gap:9px!important}
.hwc-public-member-stats>span{display:inline-flex!important;align-items:center!important;gap:4px!important;min-width:68px!important;justify-content:flex-end!important;color:#73410f!important;font-size:10px!important}
.hwc-public-member-stats img{width:22px!important;height:22px!important;object-fit:contain!important}
.hwc-public-member-stats b{font-size:11px!important}
.hwc-public-empty{padding:30px!important;text-align:center!important;color:#916128!important;font-weight:900!important}
.hwc-public-crest-wrap{text-align:center!important;padding:7px 8px 12px!important;border-bottom:1px solid rgba(154,87,12,.27)!important}
.hwc-public-crest{display:inline-block!important;width:116px!important;height:116px!important;margin:0 auto 3px!important;filter:drop-shadow(0 7px 8px rgba(93,47,4,.20))!important}
.hwc-public-crest-wrap h3{margin:1px 0 0!important;color:#6d3c0d!important;font-size:20px!important}
.hwc-public-crest-wrap>b{display:block!important;margin-top:2px!important;color:#7b4815!important;font-size:17px!important}
.hwc-public-crest-wrap p{margin:6px auto 0!important;max-width:280px!important;color:#946020!important;font-size:11px!important;line-height:1.35!important}
.hwc-public-action{margin-top:11px!important;padding:12px!important;border:2px solid #d29a36!important;border-radius:17px!important;background:linear-gradient(180deg,#fff7d9,#edc66f)!important;color:#71410f!important}
.hwc-public-action>b,.hwc-public-action>div>b{display:block!important;font-size:13px!important;font-weight:1000!important}
.hwc-public-action>span,.hwc-public-action>div>span{display:block!important;margin-top:4px!important;color:#8d5b22!important;font-size:10px!important;line-height:1.35!important;font-weight:800!important}
.hwc-public-action.join{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;background:linear-gradient(180deg,#f5ffe5,#dcefa9)!important;border-color:#7fba40!important}
.hwc-public-action.join button{height:43px!important;padding:0 16px!important;border:2px solid #4d9a24!important;border-radius:14px!important;background:linear-gradient(180deg,#70db3b,#3eae1d)!important;color:#fff!important;font-size:11px!important;font-weight:1000!important;box-shadow:0 4px 0 #277f16!important;cursor:pointer!important;white-space:nowrap!important}
.hwc-public-action.blocked{background:linear-gradient(180deg,#fff4e6,#f2d3b0)!important;border-color:#d99b5b!important}
.hwc-public-action.pending{background:linear-gradient(180deg,#f2eaff,#d9c0f2)!important;border-color:#9558cc!important}
.hwc-public-action.mine{background:linear-gradient(180deg,#efffe6,#cdeba9)!important;border-color:#62a933!important}
.hwc-public-hint{margin-top:auto!important;padding:10px 5px 2px!important;color:#956526!important;font-size:9px!important;line-height:1.35!important;text-align:center!important}
.hwc-public-info-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:12px!important}
.hwc-public-info-grid>div{min-height:80px!important;padding:12px!important;border:1px solid #dca047!important;border-radius:16px!important;background:linear-gradient(180deg,#fffdf5,#f5dfb1)!important;box-shadow:0 2px 0 rgba(153,85,11,.14)!important}
.hwc-public-info-grid>div.wide{grid-column:1/-1!important}
.hwc-public-info-grid small{display:block!important;color:#a66e26!important;font-size:9px!important;font-weight:1000!important;letter-spacing:.08em!important}
.hwc-public-info-grid b{display:block!important;margin-top:8px!important;color:#6c3c0e!important;font-size:16px!important;line-height:1.25!important}

@media(max-width:1080px){
  .hwc-public-layout{grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr)!important}
  .hwc-public-member{grid-template-columns:26px 42px minmax(0,1fr) 125px!important}
  .hwc-public-member>img{width:40px!important;height:40px!important}
  .hwc-public-member-stats>span{min-width:54px!important}
  .hwc-public-crest{width:94px!important;height:94px!important}
}


/* === v72: player profiles from clan roster === */
.hwc-player-profile-hit{font:inherit!important;color:inherit!important}
.hwc-player-profile-avatar{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:50%!important;display:grid!important;place-items:center!important;cursor:pointer!important}
.hwc-player-profile-avatar>img{margin:0!important;transition:transform .14s ease,filter .14s ease!important}
.hwc-player-profile-avatar:hover>img{transform:translateY(-1px) scale(1.04)!important;filter:brightness(1.06)!important}
.hwc-member-main.hwc-player-profile-hit,.hwc-public-member-copy.hwc-player-profile-hit{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;text-align:left!important;cursor:pointer!important;min-width:0!important}
.hwc-member-main.hwc-player-profile-hit:hover b,.hwc-public-member-copy.hwc-player-profile-hit:hover b{color:#9b4f0e!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.hwc-public-member .hwc-player-profile-avatar{width:42px!important;height:42px!important}
.hwc-public-member .hwc-player-profile-avatar>img{width:42px!important;height:42px!important;object-fit:cover!important;border-radius:50%!important}
.hwc-member .hwc-player-profile-avatar{width:42px!important;height:42px!important}
.hwc-member .hwc-player-profile-avatar>img{width:38px!important;height:38px!important;object-fit:cover!important;border-radius:50%!important}