@font-face{font-family:CrankDisplay;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/crank/crank-display.woff2) format("woff2")}#crank-ux{--ink:#e5ddd0;--sub:#a4a6a4;--dim:#717978;--gold:#b6a078;--edge:#353b3b;--red:#973d3b;--bg:#101517;--pane:#171c1e;--green:#a4b995;color:var(--ink);background:var(--bg);font:14px/1.5 Arial,sans-serif;isolation:isolate;position:relative;overflow:hidden;text-align:left;color-scheme:dark}#crank-ux *{box-sizing:border-box}#crank-ux button,#crank-ux input,#crank-ux select{font:inherit}#crank-ux button{color:inherit}#crank-ux button:disabled{cursor:not-allowed;opacity:.4}#crank-ux button{cursor:pointer}#crank-ux [hidden]{display:none!important}#crank-ux h1,#crank-ux h2,#crank-ux h3,#crank-ux p{margin:0}#crank-ux button:focus-visible,#crank-ux input:focus-visible,#crank-ux select:focus-visible{outline:2px solid #dbc99f;outline-offset:3px}#crank-ux .cf-serif{font-family:'CrankDisplay',Georgia,'Times New Roman',serif}#crank-ux .cf-kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}#crank-ux .cf-muted{color:var(--sub)}#crank-ux .cf-gold{color:#d2b67a}#crank-ux .cf-green{color:var(--green)}#crank-ux .cf-line{height:1px;background:linear-gradient(90deg,transparent,#514c40,transparent)}#crank-ux .cf-top{min-height:72px;display:flex;align-items:center;gap:28px;padding:0 28px;background:linear-gradient(#1c2224,#14191b);border-bottom:1px solid #47483f;box-shadow:0 3px 16px #0005;position:relative;z-index:5}#crank-ux .cf-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}#crank-ux .cf-sigil{width:29px;height:36px;border:1px solid #9a8967;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);font:20px 'CrankDisplay',Georgia;color:#dac38f;background:linear-gradient(140deg,#545344,#191f21 65%)}#crank-ux .cf-logo{font:24px 'CrankDisplay',Georgia;letter-spacing:5px;color:#e3d6b9}#crank-ux .cf-nav{display:flex;align-self:stretch;gap:4px;margin-left:auto}#crank-ux .cf-nav button{border:0;border-bottom:2px solid transparent;background:transparent;padding:0 14px;font-size:12px;color:#a7aeae;position:relative;transition:color .18s,background .18s,border-color .18s}#crank-ux .cf-nav button:hover{color:#e3d7bc;background:#e5d3a80a}#crank-ux .cf-nav button[aria-current=page]{color:#dfccb0;border-bottom-color:#c6a376;background:linear-gradient(0deg,#b2946021,transparent)}#crank-ux .cf-wallet{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid #3a4141;white-space:nowrap;font-variant-numeric:tabular-nums}#crank-ux .cf-coin{border:1px solid #baa16c;border-radius:50%;width:15px;height:15px;box-shadow:inset 0 0 0 2px #292824;display:inline-block;background:#817149}#crank-ux .cf-wallet small{font-size:10px;color:#939b98}#crank-ux .cf-main{max-width:1440px;margin:auto;padding:24px 28px 20px;background:radial-gradient(ellipse at 24% 8%,#34414030,transparent 65%)}#crank-ux .cf-pagehead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:15px}#crank-ux .cf-pagehead h1{font:30px 'CrankDisplay',Georgia;letter-spacing:.5px;line-height:1.2;margin-top:6px}#crank-ux .cf-pagehead .cf-place{text-align:right;font-size:12px;color:#adb4af}#crank-ux .cf-live{display:inline-block;width:5px;height:5px;background:#a2b395;box-shadow:0 0 7px #a2b366;margin-right:7px;border-radius:50%}#crank-ux .cf-layout{display:grid;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);gap:18px;align-items:start}#crank-ux .cf-panel{border:1px solid var(--edge);background:linear-gradient(150deg,#202729,#171c1e 42%,#14191b);position:relative;box-shadow:0 5px 20px #0002,inset 0 1px #ffffff03}#crank-ux .cf-panel:before,#crank-ux .cf-panel:after{content:'';pointer-events:none;position:absolute;width:10px;height:10px;border-color:#948363;border-style:solid;z-index:2}#crank-ux .cf-panel:before{top:-1px;left:-1px;border-width:1px 0 0 1px}#crank-ux .cf-panel:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}#crank-ux .cf-panelhead{padding:18px 20px 13px;border-bottom:1px solid #353c3b;display:flex;justify-content:space-between;align-items:center;gap:12px}#crank-ux .cf-panelhead h2{font:25px 'CrankDisplay',Georgia;margin-bottom:3px}#crank-ux .cf-level{height:39px;width:39px;display:grid;place-items:center;border:1px solid #756b55;transform:rotate(45deg);background:linear-gradient(130deg,#464639,#1c2223);flex-shrink:0}#crank-ux .cf-level span{transform:rotate(-45deg);font:21px 'CrankDisplay',Georgia;color:#dfcfa7}#crank-ux .cf-bars{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:13px 20px 0}#crank-ux .cf-barlabel{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.6px;color:#b8bcb8;margin-bottom:5px}#crank-ux .cf-barlabel b{color:#e1dbcc;font-weight:400;font-variant-numeric:tabular-nums}#crank-ux .cf-bar{height:5px;background:#080d0f;position:relative}#crank-ux .cf-bar i{display:block;height:100%;background:linear-gradient(90deg,#5a2024,#aa4f4a);box-shadow:0 0 8px #bd544124;transition:width .45s}#crank-ux .cf-bar.mana i{background:linear-gradient(90deg,#253f56,#5c87a5)}#crank-ux .cf-stage{height:440px;position:relative;display:grid;grid-template-columns:65px minmax(0,1fr) 65px;gap:8px;padding:16px 16px 0;overflow:hidden;background:radial-gradient(ellipse at 50% 66%,#59626426,transparent 65%)}#crank-ux .cf-arch{position:absolute;width:63%;height:89%;border:1px solid #4c544434;top:16px;left:18.5%;border-radius:48% 48% 0 0;box-shadow:0 0 0 7px #070d0f30,0 0 0 8px #6865551c,inset 0 0 40px #0006;background:linear-gradient(90deg,#080e1150,transparent 45%,#080e1140)}#crank-ux .cf-arch:before{content:'';position:absolute;left:50%;top:15%;height:65%;border-left:1px solid #99978117}#crank-ux .cf-arch:after{content:'III';position:absolute;top:3%;left:0;right:0;text-align:center;font:28px 'CrankDisplay',Georgia;letter-spacing:9px;color:#7e7b5733}#crank-ux .cf-hero{position:relative;margin:0;align-self:end;height:413px;display:flex;align-items:flex-end;justify-content:center;min-width:0}#crank-ux .cf-hero:after{content:'';position:absolute;bottom:5px;width:100%;height:20px;border-radius:50%;background:#0006;filter:blur(10px);z-index:-1}#crank-ux .cf-hero img{height:100%;width:160%;max-width:none;object-fit:contain;filter:drop-shadow(4px 4px 10px #0009);position:relative;pointer-events:none}#crank-ux .cf-equips{display:grid;grid-template-rows:repeat(6,1fr);gap:5px;position:relative;z-index:2;padding-bottom:10px}#crank-ux .cf-equipped{display:flex;flex-direction:column;align-items:center;gap:3px}#crank-ux .cf-equipped>span{font-size:8px;letter-spacing:.7px;text-transform:uppercase;color:#9fa39a;white-space:nowrap}#crank-ux .cf-tile{--rarity:#727d7a;position:relative;width:100%;aspect-ratio:1;border:1px solid #444c48;background:radial-gradient(ellipse at 50% 75%,#766c3c19,transparent 80%),#101619;display:block;padding:5px;transition:border-color .18s,box-shadow .18s,transform .18s;min-width:0;overflow:hidden}#crank-ux .cf-tile:after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:1px;background:var(--rarity);opacity:.75;transition:left .18s,right .18s}#crank-ux .cf-tile:hover{border-color:#bca878;box-shadow:inset 0 0 18px #b6a26b16,0 0 10px #a8997822;z-index:3}#crank-ux .cf-tile:hover .cf-itemart{transform:scale(1.075);filter:brightness(1.2)}#crank-ux .cf-tile:hover:after{left:0;right:0}#crank-ux .cf-tile:active{transform:scale(.96)}#crank-ux .cf-tile[aria-pressed=true]{border-color:#d3b783;box-shadow:inset 0 0 0 2px #141a1c,inset 0 0 0 3px #8c7656}#crank-ux .cf-tile[aria-pressed=true]:before{content:'';position:absolute;right:4px;top:4px;width:4px;height:4px;background:#d4b378;transform:rotate(45deg);z-index:2}#crank-ux .cf-tile.empty{border-color:#2b3538;background:radial-gradient(ellipse,#1a2428,#121a1d)}#crank-ux .cf-tile.empty:after{display:none}#crank-ux .cf-tile.empty:before{content:'·';position:absolute;inset:0;display:grid;place-items:center;color:#546062;font:20px 'CrankDisplay',Georgia}#crank-ux .cf-itemart{display:block;width:100%;height:100%;background-image:var(--equipment);background-size:400% 400%;background-position:var(--x) var(--y);transition:transform .2s,filter .2s;mix-blend-mode:lighten}#crank-ux .cf-tile .cf-count{position:absolute;bottom:3px;right:5px;font-size:10px;text-shadow:0 1px 4px #000;color:#dcc38d}#crank-ux .cf-equips .cf-tile{height:50px;width:54px;padding:3px}#crank-ux .cf-herofoot{padding:10px 20px 15px;border-top:1px solid #343d3c;display:flex;gap:15px;align-items:center}#crank-ux .cf-quick{display:flex;gap:5px}#crank-ux .cf-quick .cf-tile{width:41px;height:41px}#crank-ux .cf-xp{flex:1}#crank-ux .cf-xp .cf-bar{height:3px}#crank-ux .cf-xp .cf-bar i{background:linear-gradient(90deg,#77633e,#b69b60)}#crank-ux .cf-right{display:grid;gap:14px}#crank-ux .cf-tabs{display:flex;border-bottom:1px solid #3d4541;padding:0 15px;gap:17px}#crank-ux .cf-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:16px 4px 13px;color:#99a3a4;font:12px 'CrankDisplay',Georgia;letter-spacing:1px}#crank-ux .cf-tabs button[aria-pressed=true]{color:#decdb0;border-bottom-color:#b69965}#crank-ux .cf-tabs button:hover{color:#e4d8c2}#crank-ux .cf-bagbody{padding:16px 18px 14px}#crank-ux .cf-sectionline{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}#crank-ux .cf-sectionline h3{font:16px 'CrankDisplay',Georgia}#crank-ux .cf-sectionline span{font-size:11px;color:#9aa5a4}#crank-ux .cf-filterrow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}#crank-ux .cf-chip{background:#151d20;border:1px solid #374144;padding:5px 10px;font-size:10px;letter-spacing:.4px;color:#9ca6a6;transition:.18s}#crank-ux .cf-chip:hover{border-color:#a9946d;color:#dacaaf}#crank-ux .cf-chip[aria-pressed=true]{color:#e1d0b1;background:#383b32;border-color:#827254}#crank-ux .cf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}#crank-ux .cf-bagfoot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:10px;color:#8e9c9a;gap:8px}#crank-ux .cf-textbutton{border:0;background:none;color:#bfa776;padding:4px;font-size:11px;transition:color .15s}#crank-ux .cf-textbutton:hover{color:#f2d7a1}#crank-ux .cf-detail{padding:18px 20px;background:linear-gradient(140deg,#2e3028,#1d2222 45%,#181f21);min-height:254px}#crank-ux .cf-detailtop{display:flex;gap:14px;align-items:center;padding-bottom:14px;border-bottom:1px solid #4b4b3b}#crank-ux .cf-detailicon{width:62px;height:62px;flex-shrink:0;background:#101619;border:1px solid #786749;padding:5px}#crank-ux .cf-detail h3{font:21px/1.2 'CrankDisplay',Georgia;color:#d7bd82;margin-top:5px}#crank-ux .cf-detail .cf-type{font-size:11px;color:#a9afa7;margin-top:4px}#crank-ux .cf-detailstats{display:flex;gap:22px;align-items:center;margin:13px 0}#crank-ux .cf-itempower{font:28px 'CrankDisplay',Georgia;white-space:nowrap;color:#e5dfd2}#crank-ux .cf-itempower small{font:10px Arial;color:#a3ada5;display:block;margin-top:3px}#crank-ux .cf-bonuses{font-size:11px;line-height:1.8;color:#c6cabc;border-left:1px solid #41493f;padding-left:18px}#crank-ux .cf-compare{font-size:11px;color:#a8b799;margin:7px 0 12px}#crank-ux .cf-actionrow{display:flex;align-items:center;justify-content:space-between;gap:10px}#crank-ux .cf-action{border:1px solid #967151;background:linear-gradient(#594330,#34291f);color:#ead9b8;padding:10px 18px;font:12px 'CrankDisplay',Georgia;letter-spacing:1px;box-shadow:inset 0 1px #ceb47c2b;transition:background .15s,box-shadow .15s,transform .15s;min-height:39px}#crank-ux .cf-action:hover:not(:disabled){background:linear-gradient(#71553c,#493725);box-shadow:inset 0 1px #e7cda847,0 0 14px #b88b4e1f}#crank-ux .cf-action:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px #0008}#crank-ux .cf-action.crimson{border-color:#8a4f46;background:linear-gradient(#773b35,#472624)}#crank-ux .cf-action.crimson:hover:not(:disabled){background:linear-gradient(#984a41,#66302d)}#crank-ux .cf-detailprice{font-size:12px;color:#d4bf88}#crank-ux .cf-note{font-size:10px;color:#8f9c99}#crank-ux .cf-smallstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:13px 0;border-top:1px solid #353f3e;background:#141c1f}#crank-ux .cf-smallstats>div{text-align:center;border-right:1px solid #343e3d}#crank-ux .cf-smallstats>div:last-child{border:0}#crank-ux .cf-smallstats b{font:20px 'CrankDisplay',Georgia;display:block;color:#d6d1be}#crank-ux .cf-smallstats span{font-size:9px;letter-spacing:1px;color:#939e9b;text-transform:uppercase}#crank-ux .cf-stats{padding:20px}#crank-ux .cf-statrow{display:flex;justify-content:space-between;border-bottom:1px solid #303b3c;padding:9px 0;font-size:12px;color:#aeb7b3}#crank-ux .cf-statrow b{font-weight:400;color:#e0d7c1}#crank-ux .cf-stats h3{font:17px 'CrankDisplay',Georgia;color:#c4b287;margin-bottom:6px}#crank-ux .cf-statgroup+.cf-statgroup{margin-top:18px}#crank-ux .cf-ability{display:flex;gap:15px;padding:17px 0;border-bottom:1px solid #344043;align-items:center}#crank-ux .cf-ability .cf-rune{width:48px;height:48px;border:1px solid #806751;display:grid;place-items:center;background:radial-gradient(#70523c,#292728);font:24px 'CrankDisplay',Georgia;color:#d9b57c;flex-shrink:0}#crank-ux .cf-ability h3{margin:0 0 5px;font:16px 'CrankDisplay',Georgia}#crank-ux .cf-ability p{font-size:11px;color:#a4b1b1}#crank-ux .cf-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #353d3d;padding:11px 28px;background:#131a1c;color:#899694;font-size:10px}#crank-ux .cf-bottom button{font-size:10px}#crank-ux .cf-toast{min-height:18px;color:#c6c9b9}#crank-ux .cf-toast.flash{animation:cf-feedback .4s ease-out}#crank-ux .cf-hoverinfo{position:absolute;z-index:20;pointer-events:none;background:#1a2021;border:1px solid #9e865d;box-shadow:0 8px 25px #000a;padding:12px 15px;width:225px;max-width:calc(100% - 20px);font-size:11px;color:#aab5ad}#crank-ux .cf-hoverinfo strong{display:block;font:16px 'CrankDisplay',Georgia;color:#dfc797;margin-bottom:5px}#crank-ux .cf-hoverinfo span{display:block;margin-top:4px}#crank-ux .cf-hoverinfo em{color:#a5bc97;font-style:normal}#crank-ux .cf-shoplayout{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:18px}#crank-ux .cf-merchant{min-height:535px;overflow:hidden;display:flex;flex-direction:column}#crank-ux .cf-merchant-art{position:relative;height:337px;overflow:hidden;background:radial-gradient(ellipse at 50% 65%,#4b3b304d,transparent 70%)}#crank-ux .cf-guardian{background-image:var(--people);background-size:225.1% auto;background-position:97.8% 35%;background-repeat:no-repeat;position:absolute;inset:0 5%;filter:drop-shadow(0 5px 8px #0007)}#crank-ux .cf-merchant-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#171c1e,transparent 35%)}#crank-ux .cf-merchanttext{padding:0 24px 22px;position:relative;margin-top:-25px;z-index:1}#crank-ux .cf-merchanttext h2{font:27px 'CrankDisplay',Georgia;margin:5px 0 12px;color:#d8c6a7}#crank-ux .cf-merchanttext blockquote{font:italic 15px/1.7 'CrankDisplay',Georgia;color:#b0b2a7;margin:0 0 18px}#crank-ux .cf-merchanttext .cf-statrow{font-size:11px}#crank-ux .cf-shopright{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.8fr);gap:14px;align-items:start}#crank-ux .cf-shopright>.cf-panel:first-child{grid-column:1/-1}#crank-ux .cf-shopright>.cf-detail{grid-column:1/-1}#crank-ux .cf-shopgrid{grid-template-columns:repeat(6,minmax(0,1fr))}#crank-ux .cf-price{position:absolute;bottom:4px;left:5px;color:#d6bc7c;font-size:10px;background:#101619b0;padding:0 3px}#crank-ux .cf-stockart{padding-bottom:18px}#crank-ux .cf-battlearena{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);align-items:stretch;min-height:425px;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,#3d453f3d,transparent 60%),#151c1f}#crank-ux .cf-fighter{position:relative;text-align:center;overflow:hidden;min-width:0}#crank-ux .cf-fighter h2{font:23px 'CrankDisplay',Georgia;margin:20px 0 5px}#crank-ux .cf-fighter>.cf-bar{width:74%;margin:10px auto 0}#crank-ux .cf-fighter img{width:100%;height:322px;object-fit:contain}#crank-ux .cf-enemy-art{height:322px;position:relative;width:100%}#crank-ux .cf-enemy-art .cf-guardian{background-size:225.1% auto;background-position:97.8% 5%;inset:0 17%}#crank-ux .cf-versus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;z-index:2}#crank-ux .cf-versus b{font:38px 'CrankDisplay',Georgia;color:#bca878;line-height:1.1}#crank-ux .cf-versus .cf-kicker{font-size:9px}#crank-ux .cf-versus p{color:#9aa7a3;font-size:11px;line-height:1.7}#crank-ux .cf-battlecontrols{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;padding:19px 22px;border-top:1px solid #394441}#crank-ux .cf-zonegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:8px}#crank-ux .cf-zonegrid button{border:1px solid #3c4847;background:#182225;padding:9px 6px;font-size:11px;color:#9daaa6}#crank-ux .cf-zonegrid button:hover{border-color:#ab9572;color:#e3d6bd}#crank-ux .cf-zonegrid button[aria-pressed=true]{background:#44342d;border-color:#a68460;color:#e3cfab}#crank-ux .cf-zonesblock button[aria-pressed=true]{background:#283f47;border-color:#769297;color:#d0e0df}#crank-ux .cf-turnactions{align-self:end;display:grid;gap:7px;min-width:142px}#crank-ux .cf-battlelog{padding:19px 22px;margin-top:15px}#crank-ux .cf-logrows{display:grid;gap:7px;margin-top:11px;font-size:12px;color:#b6bfba}#crank-ux .cf-logrow{display:flex;gap:13px}#crank-ux .cf-logrow time{color:#788e8c;font-size:10px;min-width:28px;padding-top:2px}#crank-ux .cf-damage{position:absolute;top:50%;left:45%;font:34px 'CrankDisplay',Georgia;color:#dda99a;text-shadow:0 2px 5px #000;animation:cf-damage .7s forwards;z-index:5}#crank-ux .cf-hit img{animation:cf-hit .35s}#crank-ux .cf-eventlist{padding:15px 22px}#crank-ux .cf-eventrow{padding:20px 0;display:flex;gap:18px;align-items:center;border-bottom:1px solid #344144}#crank-ux .cf-eventrow:last-child{border:0}#crank-ux .cf-eventrow time{color:#a5ac9a;font:19px 'CrankDisplay',Georgia}#crank-ux .cf-eventrow h3{font:19px 'CrankDisplay',Georgia;margin-bottom:6px}#crank-ux .cf-eventrow p{font-size:12px;color:#a7b3b1}#crank-ux .cf-world{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}#crank-ux .cf-location{padding:25px;min-height:240px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 0%,#737a4933,transparent 80%),#1a2426}#crank-ux .cf-location h2{font:23px 'CrankDisplay',Georgia;margin:15px 0 10px}#crank-ux .cf-location p{font-size:12px;color:#a6b2ae;margin-bottom:25px}#crank-ux .cf-location .cf-action{margin-top:auto}#crank-ux .cf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes cf-feedback{from{color:#fff0cf}to{color:#c6c9b9}}@keyframes cf-damage{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-40px)}}@keyframes cf-hit{35%{transform:translateX(-5px);filter:brightness(1.5)}70%{transform:translateX(3px)}}@media(min-width:1250px){#crank-ux .cf-main{padding-top:30px}#crank-ux .cf-layout{grid-template-columns:1fr 1.1fr}#crank-ux .cf-stage{height:500px;grid-template-columns:78px minmax(0,1fr) 78px;padding-left:25px;padding-right:25px}#crank-ux .cf-hero{height:478px}#crank-ux .cf-equips .cf-tile{width:65px;height:61px}#crank-ux .cf-equipped>span{font-size:9px}#crank-ux .cf-bagbody{padding:20px 22px}#crank-ux .cf-detail{padding:21px 24px}#crank-ux .cf-detailstats{margin:17px 0}#crank-ux .cf-detail h3{font-size:24px}#crank-ux .cf-shopright .cf-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:850px){#crank-ux .cf-top{padding:0 18px;gap:13px}#crank-ux .cf-nav button{padding:0 9px;font-size:11px}#crank-ux .cf-logo{font-size:21px;letter-spacing:3px}#crank-ux .cf-wallet{padding-left:12px}#crank-ux .cf-wallet small{display:none}#crank-ux .cf-main{padding:20px 16px}#crank-ux .cf-layout{gap:12px;grid-template-columns:1fr 1fr}#crank-ux .cf-stage{grid-template-columns:52px minmax(0,1fr) 52px;padding-left:8px;padding-right:8px;gap:0}#crank-ux .cf-equips .cf-tile{width:48px;height:48px}#crank-ux .cf-grid{gap:4px;grid-template-columns:repeat(5,minmax(0,1fr))}#crank-ux .cf-bagbody{padding:14px}#crank-ux .cf-detail{padding:16px}#crank-ux .cf-detail h3{font-size:19px}#crank-ux .cf-shoplayout{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}#crank-ux .cf-shopgrid{grid-template-columns:repeat(5,minmax(0,1fr))}#crank-ux .cf-bottom{padding:11px 16px}#crank-ux .cf-bottom>span:last-child{display:none}}@media(max-width:650px){#crank-ux .cf-top{flex-wrap:wrap;padding:14px 16px 0;gap:8px;min-height:0}#crank-ux .cf-brand{margin-right:auto}#crank-ux .cf-nav{width:100%;order:3;margin:3px 0 0;justify-content:space-between}#crank-ux .cf-nav button{min-height:44px;padding:8px 3px;font-size:11px}#crank-ux .cf-wallet{border:0}#crank-ux .cf-main{padding:19px 12px 15px}#crank-ux .cf-pagehead{margin-bottom:15px}#crank-ux .cf-pagehead h1{font-size:26px}#crank-ux .cf-place{display:none}#crank-ux .cf-layout,#crank-ux .cf-shoplayout{grid-template-columns:1fr}#crank-ux .cf-stage{height:424px;grid-template-columns:67px minmax(0,1fr) 67px;padding:10px 12px 0}#crank-ux .cf-hero{height:408px}#crank-ux .cf-equips .cf-tile{width:54px;height:49px}#crank-ux .cf-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}#crank-ux .cf-tabs{justify-content:space-between}#crank-ux .cf-tabs button{min-height:44px}#crank-ux .cf-chip{min-height:36px;padding:6px 11px}#crank-ux .cf-action{min-height:44px}#crank-ux .cf-bagfoot .cf-textbutton{min-height:36px}#crank-ux .cf-detail{min-height:0;padding:19px}#crank-ux .cf-detail h3{font-size:21px}#crank-ux .cf-detailtop{gap:13px}#crank-ux .cf-detailstats{gap:20px}#crank-ux .cf-merchant{min-height:0;display:grid;grid-template-columns:105px minmax(0,1fr)}#crank-ux .cf-merchant-art{height:205px}#crank-ux .cf-guardian{inset:0 -10%;background-position:97.8% 0}#crank-ux .cf-merchanttext{padding:19px 15px;margin:0}#crank-ux .cf-merchanttext h2{font-size:22px;margin-bottom:8px}#crank-ux .cf-merchanttext blockquote{font-size:13px;margin-bottom:0}#crank-ux .cf-merchanttext .cf-statrow{display:none}#crank-ux .cf-battlearena{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);min-height:280px}#crank-ux .cf-fighter h2{font-size:18px}#crank-ux .cf-fighter .cf-kicker{font-size:8px;letter-spacing:1px}#crank-ux .cf-fighter img,#crank-ux .cf-enemy-art{height:225px}#crank-ux .cf-enemy-art .cf-guardian{inset:0 -3%}#crank-ux .cf-versus{gap:7px}#crank-ux .cf-versus b{font-size:30px}#crank-ux .cf-versus p{font-size:9px}#crank-ux .cf-versus .cf-kicker{font-size:8px;letter-spacing:1px}#crank-ux .cf-battlecontrols{grid-template-columns:1fr 1fr;gap:12px;padding:16px 13px}#crank-ux .cf-turnactions{grid-column:1/-1;display:flex;align-items:center}#crank-ux .cf-turnactions>.cf-action{flex:1}#crank-ux .cf-zonegrid button{min-height:44px}#crank-ux .cf-battlelog{padding:17px 15px}#crank-ux .cf-bottom{align-items:flex-start;padding:12px;min-height:47px}#crank-ux .cf-bottom .cf-textbutton{display:none}#crank-ux .cf-world{grid-template-columns:1fr}#crank-ux .cf-location{min-height:180px}#crank-ux .cf-hoverinfo{display:none!important}}@media(prefers-reduced-motion:reduce){#crank-ux *,#crank-ux *:before,#crank-ux *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}#crank-ux .cf-stage{padding-bottom:8px}#crank-ux .cf-equips{padding-bottom:0}#crank-ux .cf-equipped>span{line-height:1.1;font-size:9px;letter-spacing:.2px}#crank-ux .cf-hero{height:400px}#crank-ux .cf-bagbody .cf-grid{grid-template-columns:repeat(6,minmax(0,1fr))}#crank-ux .cf-enemy-art .cf-guardian{width:160px;height:322px;left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);background-size:auto 338px;background-position:right top}#crank-ux .cf-kicker{font-size:11px;letter-spacing:1.5px}#crank-ux .cf-detail .cf-kicker{font-size:10px}#crank-ux .cf-tabs button{letter-spacing:0;font-size:13px}#crank-ux .cf-action{letter-spacing:.2px}#crank-ux .cf-panelhead{background:linear-gradient(100deg,#462b2940,transparent 70%)}#crank-ux .cf-arch{background:repeating-linear-gradient(90deg,transparent 0 49px,#c2c5ac04 50px,#020a0d20 52px,transparent 54px),linear-gradient(90deg,#080e1150,transparent 45%,#080e1140)}#crank-ux .cf-panel{background-image:repeating-linear-gradient(0deg,transparent 0 3px,#88969502 4px),linear-gradient(150deg,#202729,#171c1e 42%,#14191b)}#crank-ux .cf-merchant-art .cf-guardian{background-position:97.8% 0}@media(min-width:1250px){#crank-ux .cf-battlearena{padding:0 10%}#crank-ux .cf-shopgrid .empty{display:none}}@media(min-width:1250px){#crank-ux .cf-bagbody .cf-grid{grid-template-columns:repeat(8,minmax(0,1fr))}#crank-ux .cf-equips .cf-tile{height:56px;width:62px}#crank-ux .cf-hero{height:470px}#crank-ux .cf-detail{min-height:278px}#crank-ux .cf-stage{height:495px}}@media(max-width:850px) and (min-width:651px){#crank-ux .cf-tabs{gap:4px;padding:0 9px}#crank-ux .cf-tabs button{font-size:11px}#crank-ux .cf-bagbody .cf-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(max-width:650px){#crank-ux .cf-hero{height:394px}#crank-ux .cf-stage{padding-bottom:9px}#crank-ux .cf-enemy-art .cf-guardian{width:113px;height:225px;background-size:auto 238px}#crank-ux .cf-eventrow{flex-wrap:wrap}#crank-ux .cf-eventrow>div{flex:1;min-width:180px}#crank-ux .cf-eventrow>.cf-action{margin-left:37px}#crank-ux .cf-bagbody .cf-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}#crank-ux .cf-atlas-layout{display:grid;grid-template-columns:minmax(0,1fr) 274px;gap:18px;align-items:start;max-width:1180px;margin:auto}#crank-ux .cf-atlas-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;gap:12px;border-bottom:1px solid #505245;background:#1b2223}#crank-ux .cf-atlas-bar h2{font:15px 'CrankDisplay',Georgia;color:#d3c5a5}#crank-ux .cf-atlas-bar span{font-size:10px;color:#a1aaa3}#crank-ux .cf-atlas{position:relative;aspect-ratio:1;isolation:isolate;overflow:hidden;background:#9a8662}#crank-ux .cf-atlas-image{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;pointer-events:none}#crank-ux .cf-atlas:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 48px #181d1780,inset 0 0 0 5px #27291b44;z-index:2}#crank-ux .cf-atlas-routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}#crank-ux .cf-road-shadow{fill:none;stroke:#202622;stroke-width:5;opacity:.7}#crank-ux .cf-road{fill:none;stroke:#e4d2aa;stroke-width:1.7;stroke-dasharray:5 5;opacity:.95}#crank-ux .cf-road-progress{fill:none;stroke:#a0382e;stroke-width:3;stroke-linecap:round}#crank-ux .cf-traveller{fill:#fae7ba;stroke:#702923;stroke-width:3;filter:drop-shadow(0 0 4px #f7c678)}#crank-ux .cf-map-pin{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);width:44px;height:44px;padding:0;background:none;border:0;z-index:3;display:grid;place-items:center;overflow:visible}#crank-ux .cf-pin-core{height:23px;width:23px;border:1px solid #bfac78;background:linear-gradient(130deg,#53513b,#192122 65%);transform:rotate(45deg);box-shadow:0 2px 5px #000a,inset 0 0 0 3px #1d2524;transition:transform .2s,box-shadow .2s,background .2s}#crank-ux .cf-pin-core b{transform:rotate(-45deg);display:grid;place-items:center;height:100%;font:10px 'CrankDisplay',Georgia;color:#ebd3a1}#crank-ux .cf-map-pin.is-current .cf-pin-core{background:linear-gradient(130deg,#bc7253,#773731);border-color:#ffe1b1;box-shadow:0 0 0 4px #522b2680,0 0 15px #9d321b77}#crank-ux .cf-map-pin.is-current:before{content:'';position:absolute;left:20px;top:-11px;height:14px;border-left:1px solid #f4d7a0}#crank-ux .cf-map-pin.is-current:after{content:'';position:absolute;top:-11px;left:21px;width:12px;height:8px;background:#8b2927;clip-path:polygon(0 0,100% 0,73% 50%,100% 100%,0 100%)}#crank-ux .cf-pin-label{position:absolute;top:39px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#1a2426e8;padding:4px 8px;border:1px solid #7c7755;box-shadow:0 2px 5px #1118;font:11px 'CrankDisplay',Georgia;color:#dfd3b6;transition:background .18s,border-color .18s}#crank-ux .cf-map-pin[aria-pressed=true]{z-index:5}#crank-ux .cf-map-pin[aria-pressed=true] .cf-pin-core{box-shadow:0 0 0 5px #eadbad30,0 0 0 6px #f4de9c99,0 0 18px #ffe2a564}#crank-ux .cf-map-pin[aria-pressed=true] .cf-pin-label{background:#413b2b;border-color:#debd7f;color:#f4e3ba}#crank-ux .cf-map-pin:hover .cf-pin-core{transform:rotate(45deg) scale(1.16);box-shadow:0 0 0 5px #eee1bd3b,0 0 18px #f9d59582}#crank-ux .cf-map-pin:hover .cf-pin-label{border-color:#f0d49a;background:#293433}#crank-ux .cf-map-pin.danger .cf-pin-label{border-color:#954b3c}#crank-ux .cf-atlas-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:12px 16px;background:#171f21;font-size:10px;color:#a5afaa}#crank-ux .cf-legend-dot{display:inline-block;width:7px;height:7px;transform:rotate(45deg);background:#ba9959;margin-right:7px}#crank-ux .cf-legend-dot.red{background:#ab5143}#crank-ux .cf-map-aside{display:grid;gap:14px}#crank-ux .cf-wayfarer{padding:16px;display:flex;gap:13px;align-items:center}#crank-ux .cf-wayfarer-portrait{width:43px;height:52px;flex-shrink:0;border:1px solid #867652;background:#101619;overflow:hidden}#crank-ux .cf-wayfarer-portrait img{width:125px;max-width:none;transform:translate(-40px,-3px)}#crank-ux .cf-wayfarer strong{font:16px 'CrankDisplay',Georgia}#crank-ux .cf-wayfarer p{font-size:11px;color:#9eaaa5;margin-top:5px}#crank-ux .cf-destination-art{height:120px;overflow:hidden;position:relative;background:#272d2b}#crank-ux .cf-destination-art img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}#crank-ux .cf-destination-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#1b2223)}#crank-ux .cf-destination-body{padding:19px}#crank-ux .cf-destination-body h2{font:24px/1.25 'CrankDisplay',Georgia;margin:7px 0 13px;color:#dbc7a1}#crank-ux .cf-destination-body p{font-size:12px;line-height:1.85;color:#adb7af}#crank-ux .cf-destination-body .cf-action{width:100%;margin-top:18px;font-size:12px}#crank-ux .cf-features{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}#crank-ux .cf-features span{padding:4px 7px;font-size:10px;color:#bdc1ab;border:1px solid #465048;background:#252c27}#crank-ux .cf-journey{padding:16px;border-top:1px solid #41463b;background:#1e2625}#crank-ux .cf-journey h3{font:13px 'CrankDisplay',Georgia;margin:8px 0;color:#d8c59f}#crank-ux .cf-journey small{font-size:11px;color:#b6c3b6}#crank-ux .cf-journey-meter{height:3px;background:#101819;margin-top:12px}#crank-ux .cf-journey-meter i{display:block;width:0;height:100%;background:#bf9e64;transition:width .15s linear}#crank-ux .cf-location-list{padding:15px 16px}#crank-ux .cf-location-list h3{font:14px 'CrankDisplay',Georgia;color:#c8b78d;margin-bottom:8px}#crank-ux .cf-location-list button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 0;border:0;border-bottom:1px solid #35403c;background:none;font-size:11px;color:#9fada6;text-align:left;gap:8px;transition:color .18s}#crank-ux .cf-location-list button:last-child{border:0}#crank-ux .cf-location-list button:hover,#crank-ux .cf-location-list button[aria-pressed=true]{color:#dfc894}#crank-ux .cf-location-list button span{font-size:9px;color:#8f9b87;white-space:nowrap}#crank-ux .cf-town-return{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}#crank-ux .cf-town-return button{border:0;background:none;padding:5px 0;color:#c4b48f;font-size:12px}#crank-ux .cf-town-return button:hover{color:#f0d9a6}#crank-ux .cf-town-return span{font-size:11px;color:#9bac9e}#crank-ux .cf-townscene{position:relative;aspect-ratio:2.205;background:#27343b;overflow:hidden;isolation:isolate}#crank-ux .cf-townscene>img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}#crank-ux .cf-townscene:after{position:absolute;content:'';inset:0;pointer-events:none;box-shadow:inset 0 0 40px #04101655}#crank-ux .cf-town-regions{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#crank-ux .cf-building-hit{position:absolute;z-index:2;border:0;background:transparent;padding:0}#crank-ux .cf-building-hit:focus-visible{outline:1px solid #efd4a3;outline-offset:-3px;background:#dfb06117}#crank-ux .cf-town-regions polygon{fill:#ffc87800;stroke:#f5cb8c00;stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .23s,stroke .23s}#crank-ux .cf-town-regions polygon.is-highlight{fill:#edb4661a;stroke:#e2c38d88;filter:drop-shadow(0 0 7px #d9873580)}#crank-ux .cf-town-pin{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);width:44px;height:44px;background:none;border:0;padding:0;z-index:3;display:grid;place-items:center;overflow:visible}#crank-ux .cf-town-pin .cf-pin-core{width:27px;height:27px;background:linear-gradient(140deg,#6e6045,#232b29);box-shadow:0 0 0 3px #101a1d7a,0 3px 13px #0009}#crank-ux .cf-town-pin .cf-pin-label{top:41px;font-size:12px;background:#182327ed}#crank-ux .cf-town-pin[aria-pressed=true] .cf-pin-core,#crank-ux .cf-town-pin:hover .cf-pin-core{border-color:#efcc88;background:linear-gradient(140deg,#ac8650,#494632);box-shadow:0 0 0 5px #c7945224,0 0 22px #c98b4480;transform:rotate(45deg) scale(1.12)}#crank-ux .cf-town-pin[aria-pressed=true] .cf-pin-label{color:#f0d8aa;border-color:#c4a274}#crank-ux .cf-town-places{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#171e20;border-top:1px solid #4e5043}#crank-ux .cf-town-place{border:0;border-right:1px solid #3a423b;background:none;padding:17px 14px;text-align:left;display:flex;gap:12px;align-items:center;transition:background .18s;min-width:0}#crank-ux .cf-town-place:last-child{border-right:0}#crank-ux .cf-town-place>b{font:18px 'CrankDisplay',Georgia;color:#877e62}#crank-ux .cf-town-place strong{font:12px 'CrankDisplay',Georgia;color:#c0bdab;display:block}#crank-ux .cf-town-place small{font-size:10px;color:#929f99;display:block;margin-top:5px}#crank-ux .cf-town-place[aria-pressed=true]{background:linear-gradient(#5046324d,#2b322b);box-shadow:inset 0 -2px #c3a064}#crank-ux .cf-town-place[aria-pressed=true] strong,#crank-ux .cf-town-place[aria-pressed=true]>b{color:#e2c596}#crank-ux .cf-town-place:hover{background:#364137}#crank-ux .cf-town-detail{padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}#crank-ux .cf-town-detail h2{font:23px 'CrankDisplay',Georgia;color:#dbc7a1;margin:6px 0 10px}#crank-ux .cf-town-detail p{font-size:12px;line-height:1.9;color:#abb7af;max-width:670px}#crank-ux .cf-town-actions{display:flex;flex-direction:column;gap:9px;min-width:210px;align-items:stretch}#crank-ux .cf-town-actions .cf-textbutton{padding:9px;font-size:11px}#crank-ux .cf-town-detail .cf-note{margin-top:9px}#crank-ux .cf-town-endline{display:flex;align-items:center;justify-content:space-between;padding:14px 1px;font-size:10px;color:#83958f;gap:10px}#crank-ux .cf-city-link{border:1px solid #796d50;background:#292e25;padding:7px 12px;color:#c6b287;font-size:11px}@media(min-width:1250px){#crank-ux .cf-atlas-layout{grid-template-columns:minmax(0,1fr) 300px}#crank-ux .cf-destination-art{height:140px}#crank-ux .cf-destination-body{padding:21px}#crank-ux .cf-pin-label{font-size:12px}}@media(max-width:850px){#crank-ux .cf-atlas-layout{grid-template-columns:minmax(0,1fr) 240px;gap:12px}#crank-ux .cf-pin-label{font-size:10px;padding:3px 5px}#crank-ux .cf-destination-body{padding:16px}#crank-ux .cf-destination-body h2{font-size:21px}#crank-ux .cf-town-place{gap:6px;padding:13px 9px}#crank-ux .cf-town-place strong{font-size:11px}#crank-ux .cf-town-place small{font-size:9px}#crank-ux .cf-town-detail{gap:15px;padding:19px}}@media(max-width:650px){#crank-ux .cf-atlas-layout{grid-template-columns:1fr}#crank-ux .cf-atlas-bar{padding:12px}#crank-ux .cf-atlas-bar h2{font-size:13px}#crank-ux .cf-atlas-bar span{font-size:9px}#crank-ux .cf-map-pin .cf-pin-label{display:none}#crank-ux .cf-map-pin[aria-pressed=true] .cf-pin-label{display:block;font-size:11px;top:37px}#crank-ux .cf-pin-core{width:19px;height:19px}#crank-ux .cf-atlas-legend{font-size:10px;padding:12px}#crank-ux .cf-map-aside{grid-template-columns:1fr;gap:12px}#crank-ux .cf-map-aside>.cf-wayfarer{display:none}#crank-ux .cf-destination-art{height:108px}#crank-ux .cf-destination-body h2{font-size:23px}#crank-ux .cf-location-list button{min-height:44px}#crank-ux .cf-location-list{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}#crank-ux .cf-location-list h3{grid-column:1/-1}#crank-ux .cf-location-list button{font-size:11px}#crank-ux .cf-location-list button span{display:none}#crank-ux .cf-town-return span{display:none}#crank-ux .cf-town-return button{min-height:38px}#crank-ux .cf-town-pin .cf-pin-label{display:none}#crank-ux .cf-town-pin .cf-pin-core{width:22px;height:22px}#crank-ux .cf-town-places{grid-template-columns:repeat(2,minmax(0,1fr))}#crank-ux .cf-town-place{min-height:62px;padding:12px;border-bottom:1px solid #38413b;gap:12px}#crank-ux .cf-town-place strong{font-size:12px}#crank-ux .cf-town-place small{font-size:10px}#crank-ux .cf-town-place:last-child{grid-column:1/-1}#crank-ux .cf-town-detail{grid-template-columns:1fr;padding:19px;gap:18px}#crank-ux .cf-town-detail h2{font-size:23px}#crank-ux .cf-town-actions{min-width:0}#crank-ux .cf-town-endline>span:last-child{display:none}#crank-ux .cf-atlas .cf-map-pin:focus-visible{outline-offset:0}}@media(min-width:651px) and (max-width:900px){#crank-ux .cf-atlas-layout{grid-template-columns:1fr}#crank-ux .cf-map-aside{grid-template-columns:1fr 1fr;align-items:start}#crank-ux .cf-map-aside>.cf-wayfarer{display:none}#crank-ux .cf-destination-art{height:130px}}#crank-ux{--aged-iron:url('/images/ui/aged-iron.webp');--equipment:url('/images/ui/equipment-sheet.webp');--people:url('/images/ui/people-sheet.webp');--hero-art:url('/images/ui/hero.webp');--world-art:url('/images/ui/world-map.webp');--city-priyut-art:url('/images/ui/city-priyut.webp')}#crank-ux{--ink:#e4d9c7;--sub:#aaa49a;--dim:#77746c;--gold:#ae9265;--edge:#38332b;--bg:#0d0e0f;--pane:#141414;background:#0d0e0f}#crank-ux .cf-main{background:radial-gradient(ellipse at 20% 30%,#42332220,transparent 60%)}#crank-ux .cf-layout>*,#crank-ux .cf-right{min-width:0}#crank-ux .cf-top{background:linear-gradient(180deg,#19191a,#111112);border-bottom:1px solid #42382a;box-shadow:0 4px 20px #0005}#crank-ux .cf-top:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#a48b5433 4%,transparent 17%,#a48b5422 43%,transparent 55%,#a48b5433 90%,transparent)}#crank-ux .cf-nav button[aria-current=page]{border-bottom-color:#ad8753;background:linear-gradient(0deg,#9b704c12,transparent 80%)}#crank-ux .cf-wallet{border-color:#37302a}#crank-ux .cf-panel{isolation:isolate;border:1px solid #39352e;background:#141414;box-shadow:0 10px 26px #0004}#crank-ux .cf-panel:before,#crank-ux .cf-panel:after{content:'';position:absolute;pointer-events:none;width:22px;height:22px;border:0;background:var(--aged-iron) 100% 0 / 200% 200% no-repeat;mix-blend-mode:screen;opacity:.36;z-index:3;filter:sepia(.4);mask-image:linear-gradient(135deg,#000,transparent 80%)}#crank-ux .cf-panel:before{left:-1px;top:-1px}#crank-ux .cf-panel:after{right:-1px;bottom:-1px;transform:rotate(180deg)}#crank-ux .cf-worn-rim{position:absolute;inset:0;pointer-events:none;z-index:3;background:var(--aged-iron) 0 0 / 640px 640px;opacity:.18;filter:sepia(.4);mask-image:linear-gradient(0deg,#000,transparent 7px,transparent calc(100% - 7px),#000),linear-gradient(90deg,#000,transparent 5px,transparent calc(100% - 5px),#000)}#crank-ux .cf-worn-rim:before,#crank-ux .cf-worn-rim:after{content:'';position:absolute;left:5px;right:5px;height:1px;background:linear-gradient(90deg,transparent,#d6c29b 4%,transparent 5%,transparent 8%,#beaf8b 9%,transparent 14%,transparent 47%,#c8b998 52%,transparent 53%,transparent 83%,#bbae95 90%,transparent)}#crank-ux .cf-worn-rim:before{top:0}#crank-ux .cf-worn-rim:after{bottom:0;transform:scaleX(-1)}#crank-ux .cf-panelhead{position:relative;min-height:108px;padding:19px 110px 29px;background:radial-gradient(ellipse at 50% 0,#39302650,transparent 75%),#101011;border-bottom:1px solid #544534;box-shadow:0 2px 4px #0009}#crank-ux .cf-panelhead>div:first-child{position:relative;width:100%;min-width:0;z-index:2;text-align:center}#crank-ux .cf-panelhead h2{font-size:29px;color:#e4d6bf;text-shadow:0 2px 3px #000;letter-spacing:1px}#crank-ux .cf-panelhead .cf-kicker{font-size:10px;letter-spacing:1.2px;color:#b3a38b;margin-bottom:5px}#crank-ux .cf-panelhead:before,#crank-ux .cf-panelhead:after{position:absolute;content:'';pointer-events:none;width:115px;height:99px;top:0;background:var(--aged-iron) 100% 0 / 200% 200% no-repeat;mix-blend-mode:screen;opacity:.84;filter:sepia(.55) saturate(.65);mask-image:linear-gradient(135deg,#000 12%,#000d 34%,transparent 81%)}#crank-ux .cf-panelhead:before{left:0}#crank-ux .cf-panelhead:after{right:0;transform:scaleX(-1)}#crank-ux .cf-panelhead .cf-level{position:absolute;width:34px;height:34px;left:50%;bottom:-17px;transform:translateX(-50%);border-radius:50%;z-index:4;border:1px solid #7c6341;background:#171411;box-shadow:0 0 0 3px #0d0e0f,inset 0 0 0 3px #28221a,0 3px 7px #000a}#crank-ux .cf-panelhead .cf-level:before{content:'';position:absolute;inset:2px;border:1px dashed #967d4e66;border-radius:50%;pointer-events:none}#crank-ux .cf-panelhead .cf-level span{font-size:17px;transform:none;color:#d5bb8e}#crank-ux .cf-bars{padding-top:26px;background:#101011}#crank-ux .cf-stage{background:radial-gradient(ellipse at 38% 65%,#69523922,transparent 62%),linear-gradient(90deg,#101011,#141414 46%,#0e0f10);box-shadow:inset 0 -25px 25px #090a0b66}#crank-ux .cf-arch{border:0;border-radius:0;box-shadow:none;background:none}#crank-ux .cf-arch:before{content:'';position:absolute;left:-5%;top:7%;width:110%;height:auto;aspect-ratio:1;border:0;background:var(--aged-iron) 0 100% / 200% 200% no-repeat;opacity:.17;mix-blend-mode:screen;filter:sepia(.4);mask-image:radial-gradient(circle,#000 51%,transparent 70%)}#crank-ux .cf-arch:after{content:'';position:absolute;left:0;right:0;top:auto;bottom:8px;height:26px;background:var(--aged-iron) 100% 77% / 200% 600% no-repeat;opacity:.17;mix-blend-mode:screen;mask-image:radial-gradient(ellipse,#000 20%,transparent 73%)}#crank-ux .cf-equipped>span{color:#a49b8d}#crank-ux .cf-tile{background:radial-gradient(ellipse at 50% 80%,#61432b15,transparent 85%),#111111;border:1px solid #393329;box-shadow:inset 0 3px 10px #0007;transition:border-color .2s,box-shadow .2s,transform .2s}#crank-ux .cf-tile:after{opacity:.45;left:30%;right:30%}#crank-ux .cf-equips .cf-tile{border-color:#5e4d35;background:linear-gradient(145deg,#211d1755,transparent 60%),#101011;box-shadow:inset 0 2px 7px #0009}#crank-ux .cf-equips .cf-tile:before{position:absolute;content:'';inset:0;pointer-events:none;background:linear-gradient(120deg,#c2a37455,transparent 14%) top left / 25px 1px no-repeat,linear-gradient(0deg,#bbaa7844,transparent) bottom right / 1px 14px no-repeat;z-index:2}#crank-ux .cf-tile.empty{background:#101010;border-color:#25231f;box-shadow:inset 0 2px 6px #0003}#crank-ux .cf-tile.empty:before{display:none}#crank-ux .cf-tile[aria-pressed=true]{border-color:#9e7d48;box-shadow:inset 0 0 18px #9b6b241b,0 0 0 1px #0b0b0b}#crank-ux .cf-tile:hover{border-color:#ba9660;box-shadow:inset 0 0 18px #8e62212b,0 0 10px #a57d2f1a}#crank-ux .cf-tile:hover .cf-itemart{filter:brightness(1.13);transform:scale(1.04)}#crank-ux .cf-bagbody .cf-grid{gap:4px;padding:5px;background:#0b0c0c;border:1px solid #302a22;box-shadow:inset 0 2px 7px #0009}#crank-ux .cf-right>.cf-panel:first-child,#crank-ux .cf-shopright>.cf-panel:first-child{background:#151414;border-color:#332e28}#crank-ux .cf-tabs,#crank-ux .cf-atlas-bar{position:relative;background:linear-gradient(#1c1916,#141313);border-bottom:1px solid #483a2b;box-shadow:none}#crank-ux .cf-tabs:after,#crank-ux .cf-atlas-bar:after{content:none}#crank-ux .cf-tabs button{color:#a9a093;text-shadow:0 1px #000}#crank-ux .cf-tabs button[aria-pressed=true]{color:#e0c7a1;border-color:#ac8450}#crank-ux .cf-chip{border-color:#393027;background:#171513;color:#a89e90}#crank-ux .cf-chip[aria-pressed=true]{border-color:#816442;background:#342a1f;color:#e1cda8}#crank-ux .cf-detail{background:radial-gradient(ellipse at 0 0,#6743211f,transparent 70%),#141312;border-color:#51402c;box-shadow:0 8px 22px #0005}#crank-ux .cf-detailtop{border-bottom:1px solid #4b3b28;box-shadow:none;padding-bottom:16px}#crank-ux .cf-detailicon{border:0;background:radial-gradient(ellipse,#7851242b,transparent 73%);box-shadow:none;padding:0}#crank-ux .cf-detail h3{color:#d4b17a}#crank-ux .cf-detail .cf-type{color:#aaa194}#crank-ux .cf-bonuses{border-left-color:#3c3328;color:#c1b6a7}#crank-ux .cf-action{background:linear-gradient(155deg,#463323,#2d231a);border:1px solid #84633d;box-shadow:inset 0 1px #d6b0761f,0 3px 8px #0006;color:#e1c9a1;text-shadow:0 1px 2px #000}#crank-ux .cf-action:hover:not(:disabled){background:linear-gradient(155deg,#5d422b,#39291b);border-color:#ba925e;box-shadow:inset 0 1px #d6b07626,0 0 16px #86522526}#crank-ux .cf-action.crimson{background:linear-gradient(155deg,#582b25,#311b18);border-color:#75463b}#crank-ux .cf-action.crimson:hover:not(:disabled){background:linear-gradient(155deg,#71372d,#44221c);border-color:#a66a4e}#crank-ux .cf-herofoot,#crank-ux .cf-smallstats,#crank-ux .cf-town-places,#crank-ux .cf-atlas-legend,#crank-ux .cf-bottom{background:#111112;border-top:1px solid #383029;box-shadow:none}#crank-ux .cf-herofoot{border-top-color:#27231e}#crank-ux .cf-smallstats{background:linear-gradient(#181613,#111111)}#crank-ux .cf-smallstats>div{border-color:#342c23}#crank-ux .cf-smallstats b{color:#d6c6ac}#crank-ux .cf-smallstats span,#crank-ux .cf-barlabel{color:#b1a89b}#crank-ux .cf-bagfoot,#crank-ux .cf-sectionline span{color:#a69d90}#crank-ux .cf-hoverinfo{background:#171411;border:1px solid #806039;box-shadow:0 10px 25px #000c;padding:16px 18px;color:#b9ab98}#crank-ux .cf-hoverinfo strong{color:#e0bc85}#crank-ux .cf-battlecontrols,#crank-ux .cf-battlearena{background-color:#141415}#crank-ux .cf-merchant-art:after{background:linear-gradient(0deg,#141414,transparent 35%)}#crank-ux .cf-statrow,#crank-ux .cf-ability,#crank-ux .cf-eventrow{border-color:#322c25}#crank-ux .cf-town-place{border-color:#332e29}#crank-ux .cf-town-place[aria-pressed=true]{background:linear-gradient(#3e302655,#282018);box-shadow:inset 0 -2px #9e7648}#crank-ux .cf-town-place:hover{background:#28231d}#crank-ux .cf-town-detail{background:#151413}#crank-ux .cf-atlas,#crank-ux .cf-townscene{box-shadow:none}#crank-ux .cf-journey{background:#1b1814;border-color:#3b3125}@media(min-width:1250px){#crank-ux .cf-panelhead{padding-left:132px;padding-right:132px}#crank-ux .cf-panelhead:before,#crank-ux .cf-panelhead:after{width:132px;height:103px}}@media(max-width:850px){#crank-ux .cf-panelhead{padding-left:65px;padding-right:65px}#crank-ux .cf-panelhead:before,#crank-ux .cf-panelhead:after{width:89px;height:100px}#crank-ux .cf-panelhead .cf-kicker{font-size:9px;letter-spacing:.5px}}@media(max-width:650px){#crank-ux .cf-panelhead{min-height:103px;padding:18px 65px 27px}#crank-ux .cf-panelhead h2{font-size:27px}#crank-ux .cf-panelhead:before,#crank-ux .cf-panelhead:after{width:85px;height:97px;opacity:.7}#crank-ux .cf-bagbody .cf-grid{gap:3px;padding:4px}#crank-ux .cf-tabs{padding:0 12px;gap:8px}#crank-ux .cf-tabs button{font-size:12px;padding-left:0;padding-right:0}}#crank-ux .cf-combat-shell{max-width:1180px;margin:auto;overflow:hidden}#crank-ux .cf-duel-caption{display:flex;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid #352c23;color:#ae9671;font-size:10px;letter-spacing:1px;background:#131211}#crank-ux .cf-battlearena{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);min-height:0;padding:0 7%;background:radial-gradient(ellipse at 50% 100%,#68543b22,transparent 62%),#0e0f10}#crank-ux .cf-battlearena:before{position:absolute;content:'';pointer-events:none;z-index:-1;width:340px;height:340px;top:40px;left:50%;transform:translateX(-50%);background:var(--aged-iron) 0 100% / 200% 200%;opacity:.1;mix-blend-mode:screen;mask-image:radial-gradient(circle,#000 54%,transparent 71%)}#crank-ux .cf-fighter{--dir:1;overflow:visible;isolation:isolate}#crank-ux #cf-enemy-fighter{--dir:-1}#crank-ux .cf-fighter-hud{position:relative;z-index:3;max-width:260px;margin:auto;padding:16px 10px 0;height:132px}#crank-ux .cf-fighter h2{margin:0 0 4px;font-size:24px;color:#e3d1b1}#crank-ux .cf-fighter .cf-kicker{font-size:10px;letter-spacing:1px;color:#b29a77;margin-bottom:12px}#crank-ux .cf-combat-meter{margin:8px 0;text-align:left}#crank-ux .cf-vital-label{display:flex;justify-content:space-between;gap:6px;font-size:11px;line-height:1.4;color:#c6b6a2;margin-bottom:4px}#crank-ux .cf-vital-label b{font-weight:400;font-variant-numeric:tabular-nums;color:#e0d5c7}#crank-ux .mana .cf-vital-label,#crank-ux .mana .cf-vital-label b{color:#8cbeda}#crank-ux .cf-vital-track{position:relative;height:6px;background:#25201d;overflow:hidden}#crank-ux .cf-vital-track i{position:absolute;left:0;top:0;height:100%;display:block}#crank-ux .cf-vital-fill{background:linear-gradient(90deg,#722b29,#b55245);transition:width .4s cubic-bezier(.2,.7,.2,1)}#crank-ux .cf-vital-echo{background:#c7ac7c99;transition:width .65s .3s ease}#crank-ux .mana .cf-vital-fill{background:linear-gradient(90deg,#25496b,#63a6c6)}#crank-ux .mana .cf-vital-echo{background:#c1dfea88}#crank-ux .is-low .cf-vital-label{color:#eb977e}#crank-ux .cf-enemy-intent{margin-top:11px;font-size:11px;color:#a48e77;line-height:1.3}#crank-ux .cf-avatar{position:relative;height:258px;transform-origin:50% 85%;will-change:transform;z-index:1}#crank-ux .cf-avatar>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px #000a)}#crank-ux .cf-avatar:before{position:absolute;content:'';bottom:0;left:12%;right:12%;height:18px;background:#0009;border-radius:50%;filter:blur(8px);z-index:-1}#crank-ux .cf-avatar .cf-enemy-art{height:258px;position:relative}#crank-ux .cf-avatar .cf-guardian{width:133px;height:258px;left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);background-size:auto 271px;background-position:right top}#crank-ux .cf-versus{gap:10px;padding:10px 0 0;pointer-events:none}#crank-ux .cf-versus b{font-size:30px;color:#b6a07b;overflow-wrap:anywhere}#crank-ux .cf-versus p{font-size:12px;min-height:36px;color:#d1b996;max-width:148px}#crank-ux .cf-versus .cf-kicker{font-size:10px}#crank-ux .cf-combat-belt{position:relative;border-top:1px solid #443526;background:linear-gradient(#191612,#111111);padding:15px 24px 10px}#crank-ux .cf-belt-head{max-width:820px;margin:0 auto 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}#crank-ux .cf-belt-head h3{font:16px 'CrankDisplay',Georgia;color:#d9c4a3}#crank-ux .cf-belt-head>span{font-size:11px;color:#a69a87}#crank-ux .cf-hotbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:820px;margin:auto}#crank-ux .cf-hotkey{position:relative;background:linear-gradient(150deg,#241e17,#121211 70%);border:1px solid #51402b;min-height:116px;min-width:0;padding:7px 4px 8px;display:flex;align-items:center;flex-direction:column;color:#c7b393;transition:background .16s,border-color .16s,box-shadow .16s}#crank-ux .cf-hotkey kbd{position:absolute;top:5px;left:7px;font:11px Arial;color:#c8bda9;z-index:2}#crank-ux .cf-hot-art{display:block;width:54px;height:54px;margin-bottom:5px;flex-shrink:0}#crank-ux .cf-hotkey strong{font-size:12px;font-weight:400;line-height:1.3;color:#e1ceaf}#crank-ux .cf-hotkey small{font-size:10px;line-height:1.25;min-height:13px;margin-top:4px;color:#9bb5bd}#crank-ux .cf-hot-count{position:absolute;top:43px;right:9px;font:12px Arial;color:#e5c695;text-shadow:0 1px 4px #000}#crank-ux .cf-hotkey.health{border-color:#624036}#crank-ux .cf-hotkey.mana{border-color:#39505d}#crank-ux .cf-hotkey.health small{color:#baae8e}#crank-ux .cf-hotkey:hover:not(:disabled){background:linear-gradient(150deg,#35281c,#171410);border-color:#b48a50;box-shadow:0 0 14px #79512325}#crank-ux .cf-hotkey[aria-pressed=true]{border-color:#c29b5e;box-shadow:inset 0 0 18px #b4833a1c,0 0 0 1px #0008}#crank-ux .cf-hotkey[aria-pressed=true]:after{position:absolute;content:'';bottom:-4px;left:calc(50% - 3px);width:6px;height:6px;background:#c29b5e;transform:rotate(45deg)}#crank-ux .cf-hotkey:disabled{opacity:1;background:#141313;border-color:#39312a}#crank-ux .cf-hotkey:disabled .cf-hot-art{filter:brightness(.43) saturate(.5)}#crank-ux .cf-hotkey:disabled strong,#crank-ux .cf-hotkey:disabled small{color:#948a7b}#crank-ux .cf-cooldown{position:absolute;left:0;right:0;top:18px;text-align:center;font:26px 'CrankDisplay',Georgia;color:#dbcebb;text-shadow:0 2px 5px #000}#crank-ux .cf-seal-art{display:block;width:100%;height:100%;background:var(--aged-iron) 0 100% / 200% 200%;filter:sepia(1) saturate(2) brightness(1.8);mask-image:radial-gradient(circle,#000 56%,transparent 71%)}#crank-ux .cf-skill-readout{max-width:820px;display:flex;gap:10px;flex-wrap:wrap;margin:12px auto 0;font-size:11px;line-height:1.5;color:#b2a38f;min-height:34px}#crank-ux .cf-skill-readout strong{font-weight:400;color:#dcc199}#crank-ux .cf-battlecontrols{grid-template-columns:1fr 1fr minmax(200px,.9fr);gap:24px;padding:16px 24px 20px;background:#141312;border-top:1px solid #342b21}#crank-ux .cf-battlecontrols .cf-kicker{font-size:10px;color:#b7a184}#crank-ux .cf-zonegrid{gap:5px}#crank-ux .cf-zonegrid button{border-color:#3b3227;background:#191713;color:#b9aa95;min-height:35px}#crank-ux .cf-zonegrid button[aria-pressed=true]{border-color:#a17b4a;background:#3d2b21;color:#e2c49b}#crank-ux .cf-zonesblock button[aria-pressed=true]{border-color:#688b9a;background:#1d2b2e;color:#b8d2df}#crank-ux .cf-turnactions{align-self:center;min-width:0}#crank-ux .cf-turnactions .cf-action{width:100%;padding:12px;min-height:48px}#crank-ux .cf-turnactions kbd{font:10px Arial;opacity:.65;margin-left:5px}#crank-ux .cf-turn-hint{text-align:center;font-size:11px;color:#aa9982;line-height:1.4}#crank-ux .cf-battlelog{max-width:1180px;margin:14px auto 0}#crank-ux .cf-heal-text{color:#b5cfa3}#crank-ux .cf-mana-text{color:#93c8df}#crank-ux .cf-hurt-text{color:#d9907e}#crank-ux .cf-fx-plane{position:absolute;inset:132px -10px 0;pointer-events:none;z-index:4;overflow:visible}#crank-ux .cf-impact{position:absolute;left:50%;top:40%;width:85px;height:85px;transform:translate(-50%,-50%);animation:cf-impact .65s ease-out both}#crank-ux .cf-impact.slash:before,#crank-ux .cf-impact.critical:before{content:'';position:absolute;inset:-15px 12px;border-top:3px solid #eac793;border-radius:50%;transform:rotate(-45deg);box-shadow:0 -3px 9px #c77e4555}#crank-ux .cf-impact.fire{border-radius:50%;background:radial-gradient(circle,#f5d894cc,#d4692488 22%,#8b361033 52%,transparent 69%);box-shadow:0 0 55px #d2662433;animation:cf-fireburst .8s ease-out both}#crank-ux .cf-impact.block{border:2px solid #bdd0c1;border-radius:50%;box-shadow:0 0 16px #8ba8bd77,inset 0 0 20px #809eac55}#crank-ux .cf-impact.heal,#crank-ux .cf-impact.restore{width:90px;height:150px;border-radius:50%;background:radial-gradient(ellipse,#a0c58755,transparent 65%);animation:cf-restoring .8s both}#crank-ux .cf-impact.restore{background:radial-gradient(ellipse,#76c9ee66,transparent 65%)}#crank-ux .cf-spark{position:absolute;left:50%;top:50%;width:3px;height:3px;background:#e5b37b;box-shadow:0 0 5px #d37533;animation:cf-sparks .6s ease-out both}#crank-ux .cf-spark.block{background:#b9d5e2;box-shadow:0 0 5px #8fbcda}#crank-ux .cf-floating{position:absolute;left:0;right:0;top:23%;text-align:center;font:27px 'CrankDisplay',Georgia;color:#e2ad8d;text-shadow:0 2px 5px #000,1px 0 #000;animation:cf-float 1.1s ease-out both;z-index:5;white-space:nowrap}#crank-ux .cf-floating.critical{font-size:31px;color:#f0c885}#crank-ux .cf-floating.block,#crank-ux .cf-floating.evade{font-size:19px;color:#bed7df}#crank-ux .cf-floating.heal{color:#b5d598}#crank-ux .cf-floating.restore{color:#9dd6ef}#crank-ux .cf-lunge{animation:cf-lunge .5s ease-out}#crank-ux .cf-cast{animation:cf-cast .5s ease-out}#crank-ux .cf-recoil{animation:cf-recoil .4s ease-out}#crank-ux .cf-dodge{animation:cf-dodge .5s ease-in-out}#crank-ux .cf-shudder{animation:cf-shudder .23s linear}#crank-ux .is-fallen .cf-avatar{opacity:.3;filter:grayscale(.8);transform:translateY(12px) rotate(5deg);transition:opacity .7s,transform .7s}@keyframes cf-lunge{0%,100%{transform:translateX(0)}38%{transform:translateX(calc(var(--dir)*26px)) rotate(calc(var(--dir)*3deg)) scale(1.03)}}@keyframes cf-cast{40%{transform:translateY(-5px);filter:drop-shadow(0 0 12px #bc662d55)}}@keyframes cf-recoil{25%{transform:translateX(calc(var(--dir)*-9px)) rotate(calc(var(--dir)*-2deg));filter:brightness(1.28)}100%{transform:translateX(0)}}@keyframes cf-dodge{40%{transform:translateX(-22px) skewX(-4deg);opacity:.4}100%{transform:translateX(0);opacity:1}}@keyframes cf-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}@keyframes cf-fireburst{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}@keyframes cf-restoring{0%{opacity:0;transform:translate(-50%,-20%)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%)}}@keyframes cf-sparks{0%{transform:translate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}@keyframes cf-float{0%{opacity:0;transform:translateY(8px) scale(.8)}15%{opacity:1;transform:translateY(-2px) scale(1.05)}75%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}@keyframes cf-shudder{25%{transform:translateX(2px)}75%{transform:translateX(-2px)}}@media(max-width:850px){#crank-ux .cf-battlearena{padding:0 3%;grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr)}#crank-ux .cf-battlecontrols{gap:12px;grid-template-columns:1fr 1fr minmax(165px,.9fr);padding-left:18px;padding-right:18px}#crank-ux .cf-combat-belt{padding:15px 18px 8px}#crank-ux .cf-hotbar{gap:6px}#crank-ux .cf-hotkey strong{font-size:11px}}@media(max-width:650px){#crank-ux .cf-duel-caption{padding:10px 13px;font-size:9px}#crank-ux .cf-battlearena{padding:0;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}#crank-ux .cf-fighter-hud{height:137px;padding:15px 9px 0}#crank-ux .cf-fighter h2{font-size:18px}#crank-ux .cf-fighter .cf-kicker{font-size:9px;letter-spacing:0;line-height:1.5;margin-bottom:12px}#crank-ux .cf-vital-label{font-size:10px;gap:2px}#crank-ux .cf-enemy-intent{font-size:10px}#crank-ux .cf-avatar,#crank-ux .cf-avatar .cf-enemy-art{height:206px}#crank-ux .cf-avatar>img{width:150%;max-width:none;margin-left:-25%;height:206px}#crank-ux .cf-avatar .cf-guardian{width:107px;height:206px;background-size:auto 217px}#crank-ux .cf-versus{gap:8px}#crank-ux .cf-versus .cf-kicker{display:none}#crank-ux .cf-versus b{font-size:19px;line-height:1.3}#crank-ux .cf-versus p{font-size:10px;line-height:1.5}#crank-ux .cf-battlearena:before{width:240px;height:240px;top:100px}#crank-ux .cf-combat-belt{padding:12px 13px 8px}#crank-ux .cf-belt-head{align-items:start}#crank-ux .cf-belt-head h3{font-size:14px}#crank-ux .cf-belt-head>span{font-size:10px;max-width:145px;text-align:right}#crank-ux .cf-hotbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}#crank-ux .cf-hot-potion{grid-column:span 2;min-height:66px;padding:9px 5px 7px 57px;align-items:start;justify-content:center}#crank-ux .cf-hot-potion .cf-hot-art{position:absolute;left:8px;top:9px;width:43px;height:43px;margin:0}#crank-ux .cf-hot-potion kbd{top:4px;left:5px}#crank-ux .cf-hot-potion .cf-hot-count{right:8px;top:8px;font-size:11px}#crank-ux .cf-hotkey small{font-size:9px}#crank-ux .cf-hot-skill{min-height:104px;padding-top:12px}#crank-ux .cf-hot-skill .cf-hot-art{width:46px;height:46px}#crank-ux .cf-hot-skill strong{font-size:10px;letter-spacing:-.2px}#crank-ux .cf-skill-readout{gap:3px;display:block;min-height:48px;margin-top:10px}#crank-ux .cf-skill-readout strong{display:block;margin-bottom:2px}#crank-ux .cf-battlecontrols{grid-template-columns:1fr 1fr;padding:15px 13px;gap:13px}#crank-ux .cf-zonegrid button{min-height:40px;padding:8px 5px}#crank-ux .cf-turnactions{grid-column:1/-1;display:grid;gap:7px}#crank-ux .cf-turn-hint{min-height:15px}#crank-ux .cf-fx-plane{inset:137px -6px 0}#crank-ux .cf-floating{font-size:23px}#crank-ux .cf-floating.critical{font-size:21px}#crank-ux .cf-floating.block,#crank-ux .cf-floating.evade{font-size:14px}}@media(max-width:650px){#crank-ux .cf-hot-potion .cf-hot-count{left:37px;right:auto;top:43px;font-size:10px;background:#111a}#crank-ux .cf-battlecontrols .cf-kicker{min-height:30px}}@media(prefers-reduced-motion:reduce){#crank-ux .cf-impact,#crank-ux .cf-spark{display:none}#crank-ux .cf-floating{animation:none;opacity:1;transform:none}#crank-ux .cf-vital-fill,#crank-ux .cf-vital-echo,#crank-ux .is-fallen .cf-avatar{transition:none}}#crank-ux .cf-main{max-width:1600px}#crank-ux .cf-workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}#crank-ux #cf-screen{min-width:0;container-type:inline-size}#crank-ux .cf-community-toggle{display:none;border:1px solid var(--edge);background:#151514;padding:8px 12px;color:var(--gold)}#crank-ux .cf-community-panel{overflow:hidden}#crank-ux .cf-social-heading{padding:20px 17px;border-bottom:1px solid #403a31;background:radial-gradient(ellipse at top,#75614a1d,transparent 80%)}#crank-ux .cf-social-heading h2{font:19px CrankDisplay,Georgia;margin:8px 0 10px;line-height:1.5}#crank-ux .cf-demo-label{font-size:11px;color:#aba394;border:1px solid #514a3c;padding:3px 6px}#crank-ux .cf-roster-heading{padding:14px 16px 8px;display:flex;justify-content:space-between;align-items:center;color:var(--sub)}#crank-ux .cf-roster-heading h3{font:15px CrankDisplay,Georgia;color:#d1c2a9}#crank-ux .cf-roster-heading>span{font-size:11px}#crank-ux .cf-roster{padding:0 9px 13px;border-bottom:1px solid #363127;height:290px;overflow-y:scroll;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#947b4f #0b0d0d}#crank-ux .cf-person{width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;text-align:left;background:transparent;padding:11px 7px;transition:background .18s,border-color .18s}#crank-ux .cf-person:hover{background:#baa67b0c;border-color:#776545}#crank-ux .cf-person.self{background:#c0a67707}#crank-ux .cf-person>span:nth-child(2),#crank-ux .cf-person>div{flex:1;min-width:0}#crank-ux .cf-person strong{font-weight:400;color:#e3d1af;font-size:13px}#crank-ux .cf-person strong small{color:#a3947c}#crank-ux .cf-person>span>span,#crank-ux .cf-person>div>span{display:block;font-size:11px;color:#a29b8e;margin-top:3px}#crank-ux .cf-person-mark{width:30px;height:36px;flex-shrink:0;border:1px solid #61563f;background:linear-gradient(135deg,#37342b,#121311);display:grid;place-items:center;font:17px CrankDisplay,Georgia;color:#bfa67b;clip-path:polygon(0 0,100% 0,100% 85%,50% 100%,0 85%)}#crank-ux .cf-person-arrow{color:#ac9367;font-size:22px}#crank-ux .cf-person.self>small{color:#8f9e89;font-size:11px}#crank-ux .cf-chatlog{height:260px;overflow-y:scroll;overscroll-behavior:contain;scrollbar-gutter:stable;padding:7px 16px;scrollbar-width:auto;scrollbar-color:#947b4f #0b0d0d}#crank-ux .cf-roster::-webkit-scrollbar,#crank-ux .cf-chatlog::-webkit-scrollbar{width:10px}#crank-ux .cf-roster::-webkit-scrollbar-track,#crank-ux .cf-chatlog::-webkit-scrollbar-track{background:#0b0d0d;border-left:1px solid #2e2a22}#crank-ux .cf-roster::-webkit-scrollbar-thumb,#crank-ux .cf-chatlog::-webkit-scrollbar-thumb{background:linear-gradient(#a38b5d,#695738);border:2px solid #0b0d0d;min-height:34px}#crank-ux .cf-chat-message{padding:10px 0;border-bottom:1px solid #b0a0800a}#crank-ux .cf-chat-message>div{display:flex;gap:8px;align-items:center;justify-content:space-between}#crank-ux .cf-chat-message b{font-weight:400;font-size:12px;color:#c4ae80}#crank-ux .cf-chat-message.is-own b{color:#9cb7c9}#crank-ux .cf-chat-message time{font-size:10px;color:#928878}#crank-ux .cf-chat-message p{font-size:12px;color:#c1b9aa;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap;margin-top:5px}#crank-ux .cf-chat-form{padding:12px 14px 16px;border-top:1px solid #3c362b}#crank-ux .cf-chat-form label{display:block;font-size:11px;color:#b3a68d;margin-bottom:7px}#crank-ux .cf-chat-form>div{display:flex;gap:6px}#crank-ux .cf-chat-form input{width:100%;min-width:0;background:#0b0d0d;border:1px solid #5c5039;padding:9px;color:#e0d7c6;font-size:14px}#crank-ux .cf-chat-form button{background:linear-gradient(#343126,#201e18);border:1px solid #716244;color:#d3bb89;min-width:38px}#crank-ux .cf-chat-form button:hover{border-color:#b59b68;background:#3c3427}#crank-ux .cf-chat-form small{display:block;font-size:11px;color:#979184;line-height:1.6;margin-top:9px}#crank-ux .cf-social-note{font-size:12px;color:#a79e8b;padding:10px 0;line-height:1.7}#crank-ux .cf-avatar{animation:none!important;transform:none!important;transition:opacity .4s,filter .4s!important}#crank-ux .is-fallen .cf-avatar{transform:none!important}#crank-ux [data-combat-arena]{animation:none!important;transform:none!important}#crank-ux .cf-battlearena{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);padding:20px 25px 8px;gap:14px}#crank-ux .cf-fighter-body{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;align-items:center;min-height:312px;position:relative}#crank-ux .cf-pve #cf-enemy-fighter .cf-fighter-body{display:block}#crank-ux .cf-avatar{width:100%;height:302px}#crank-ux .cf-avatar img{max-width:100%;width:100%;height:100%;object-fit:contain;margin:0 auto}#crank-ux .cf-gear-column{display:grid;gap:7px;position:relative;z-index:3}#crank-ux .cf-battle-gear{width:44px;height:44px;position:relative;border:1px solid color-mix(in srgb,var(--gear-color) 50%,#292a28);background:radial-gradient(ellipse at bottom,#9e7f4525,#101312 85%);padding:3px;transition:border-color .18s,background .18s,box-shadow .18s}#crank-ux .cf-battle-gear .cf-itemart{position:absolute;inset:2px;width:auto;height:auto}#crank-ux .cf-battle-gear>span:last-child:not(.cf-itemart){display:none}#crank-ux .cf-battle-gear:hover,#crank-ux .cf-battle-gear:focus-visible{border-color:var(--gear-color);box-shadow:inset 0 0 15px #d8b77322;background-color:#3d3323}#crank-ux .cf-fighter-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;font-size:11px;color:#b3a388;padding-top:8px}#crank-ux .cf-fighter-hud{height:132px}#crank-ux .cf-fighter-hud .cf-kicker{font-size:10px;letter-spacing:1px;height:32px;min-height:32px;line-height:1.5}#crank-ux .cf-opponent-note{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 25px;color:#b1a38a;font-size:11px;border-bottom:1px solid #393327}#crank-ux .cf-opponent-note button{font-size:11px}#crank-ux .cf-combat-inspection{border-bottom:1px solid #393327;padding:0 25px}#crank-ux .cf-combat-inspection summary{padding:11px 0;color:#c8b38e;font-size:12px;cursor:pointer}#crank-ux .cf-gear-help{font-size:12px;color:#9e978a;padding-bottom:13px}#crank-ux .cf-inspected-item{display:flex;gap:18px;padding:12px 0 20px;align-items:flex-start}#crank-ux .cf-inspected-art{width:75px;height:90px;flex-shrink:0;position:relative;background:radial-gradient(#7d684527,transparent 75%)}#crank-ux .cf-inspected-art .cf-itemart{position:absolute;inset:0;width:100%;height:100%}#crank-ux .cf-inspected-item h3{font:18px/1.5 CrankDisplay,Georgia;margin:4px 0 7px}#crank-ux .cf-inspected-item p{font-size:12px;color:#b4ad9e;line-height:1.7}#crank-ux .cf-inspected-item strong{display:block;font-size:19px;color:#e0c99b;margin:10px 0}#crank-ux .cf-inspected-item .cf-kicker{letter-spacing:1px;line-height:1.6}#crank-ux .cf-item-compare{margin-top:14px!important;border-top:1px solid #3e382d;padding-top:10px}#crank-ux .cf-inspect-layout{display:grid;grid-template-columns:minmax(270px,1fr) minmax(260px,1fr);padding:25px;gap:25px}#crank-ux .cf-inspect-body{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:12px;align-items:center}#crank-ux .cf-inspect-body .cf-battle-gear{width:52px;height:52px}#crank-ux .cf-inspect-avatar{height:370px;background:radial-gradient(ellipse at 50% 80%,#9b7b3920,transparent 65%)}#crank-ux .cf-inspect-avatar img{width:100%;height:100%;object-fit:contain}#crank-ux .cf-inspection-info{display:flex;flex-direction:column;justify-content:space-between}#crank-ux .cf-inspection-info .cf-inspected-item{display:block}#crank-ux .cf-inspection-info .cf-inspected-art{display:block;margin:0 auto 15px;width:110px;height:130px}#crank-ux .cf-challenge-box{border-top:1px solid #443c2f;padding-top:18px}#crank-ux .cf-challenge-box p{font-size:12px;color:#aba290;margin-top:10px;line-height:1.7}#crank-ux .cf-inspection .cf-panelhead{padding-left:24px;padding-right:24px;gap:16px;justify-content:space-between;text-align:left}#crank-ux .cf-inspection .cf-panelhead>div{flex:1}#crank-ux .cf-inspection .cf-panelhead>button{flex-shrink:0;white-space:nowrap}#crank-ux .cf-map-pin[data-place="greed"] .cf-pin-label{left:auto;right:0;transform:none}@container(max-width:760px){#crank-ux .cf-battlearena{padding:16px 15px 8px;gap:10px;grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr)}#crank-ux .cf-versus b{font-size:25px;overflow-wrap:anywhere}#crank-ux .cf-versus .cf-kicker{font-size:8px;letter-spacing:1px}#crank-ux .cf-fighter-hud h2{font-size:22px}#crank-ux .cf-battlecontrols{grid-template-columns:1fr 1fr}#crank-ux .cf-turnactions{grid-column:1/-1}#crank-ux .cf-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:1150px){#crank-ux .cf-workspace{grid-template-columns:minmax(0,1fr) 228px;gap:14px}#crank-ux .cf-main{padding:20px 18px}}@media(max-width:900px){#crank-ux .cf-workspace{display:flex;flex-direction:column}#crank-ux #cf-screen,#crank-ux #cf-community{width:100%}#crank-ux #cf-community{display:none;order:-1}#crank-ux.cf-community-open #cf-community{display:block}#crank-ux .cf-community-toggle{display:block}#crank-ux .cf-place{display:none}#crank-ux .cf-roster{height:280px}#crank-ux .cf-chatlog{height:260px}}@media(max-width:650px){#crank-ux .cf-main{padding:15px 10px}#crank-ux .cf-battlearena{padding:15px 10px 8px;gap:7px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}#crank-ux .cf-versus{padding-top:185px}#crank-ux .cf-versus b{font-size:17px}#crank-ux .cf-versus .cf-kicker{display:none}#crank-ux .cf-versus p{font-size:9px;max-width:45px;overflow-wrap:anywhere}#crank-ux .cf-fighter-hud{height:140px}#crank-ux .cf-fighter-hud h2{font-size:18px}#crank-ux .cf-fighter-hud .cf-kicker{font-size:9px;letter-spacing:.4px;height:42px;min-height:42px;margin-bottom:8px}#crank-ux .cf-fighter-body{grid-template-columns:1fr;min-height:0}#crank-ux .cf-fighter-body .cf-avatar{grid-row:1;height:205px}#crank-ux .cf-fighter-body .cf-gear-column{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}#crank-ux .cf-fighter-body .cf-battle-gear{width:100%;height:auto;aspect-ratio:1}#crank-ux .cf-fighter-stats{display:block;font-size:10px;min-height:40px}#crank-ux .cf-fighter-stats span{display:block}#crank-ux .cf-pve #cf-enemy-fighter .cf-fighter-body{min-height:calc(205px + (100vw - 91px) / 6 * 4 + 14px)}#crank-ux .cf-opponent-note,#crank-ux .cf-combat-inspection{padding-left:12px;padding-right:12px}#crank-ux .cf-inspect-layout{grid-template-columns:1fr;padding:16px;gap:18px}#crank-ux .cf-inspection .cf-panelhead{gap:12px;flex-wrap:wrap}#crank-ux .cf-inspection-info .cf-inspected-item{display:flex}#crank-ux .cf-inspection-info .cf-inspected-art{width:70px;height:100px;margin:0}#crank-ux .cf-chat-form input{font-size:16px}}#crank-ux .cf-town-regions polygon{fill:#d79a3d00;stroke:#f3d59a00;stroke-width:.45;vector-effect:non-scaling-stroke;transition:fill .2s,stroke .2s,filter .2s}#crank-ux .cf-town-regions polygon[data-part="0"].is-highlight{fill:#d99a3d26;stroke:#f0c982d9;filter:drop-shadow(0 0 5px #e19a396e)}#crank-ux .cf-town-regions polygon[data-part="1"].is-highlight{fill:#b96d282b;stroke:#e6bd7ab8;filter:drop-shadow(0 0 7px #de7b2e75)}#crank-ux .cf-building-hit:hover+ .cf-town-pin .cf-pin-core,#crank-ux .cf-building-hit:focus-visible+ .cf-town-pin .cf-pin-core{border-color:#f2d49a;background:linear-gradient(140deg,#ac8650,#494632);box-shadow:0 0 0 5px #c7945224,0 0 22px #c98b4480;transform:rotate(45deg) scale(1.12)}#crank-ux .cf-town-board{background:#111110;border-top:1px solid #4b4031;border-bottom:1px solid #352f27;padding:17px 23px}#crank-ux .cf-town-board>header{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:13px}#crank-ux .cf-town-board h2{font:18px CrankDisplay,Georgia;color:#d8c4a1;margin-top:4px}#crank-ux .cf-town-board>header>span{font-size:10px;color:#8f9189}#crank-ux .cf-town-briefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #332e27}#crank-ux .cf-town-briefs article{display:flex;gap:12px;align-items:center;min-width:0;padding:13px 15px;border-right:1px solid #332e27;background:linear-gradient(135deg,#1b1a17,#121311)}#crank-ux .cf-town-briefs article:last-child{border:0}#crank-ux .cf-town-briefs i{font:18px CrankDisplay,Georgia;color:#9a8158;font-style:normal}#crank-ux .cf-town-briefs div{min-width:0}#crank-ux .cf-town-briefs small,#crank-ux .cf-town-briefs span{display:block;font-size:10px;color:#8f9892;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#crank-ux .cf-town-briefs strong{display:block;font:13px CrankDisplay,Georgia;color:#d2c1a2;margin:4px 0}#crank-ux .cf-town-detail{border-top:0}@container(max-width:760px){#crank-ux .cf-town-briefs{grid-template-columns:1fr}#crank-ux .cf-town-briefs article{border-right:0;border-bottom:1px solid #332e27}#crank-ux .cf-town-briefs article:last-child{border-bottom:0}}@media(max-width:650px){#crank-ux .cf-town-board{padding:15px 13px}#crank-ux .cf-town-board>header{align-items:start}#crank-ux .cf-town-board>header>span{display:none}#crank-ux .cf-town-briefs small,#crank-ux .cf-town-briefs span{white-space:normal}#crank-ux .cf-town-pin .cf-pin-label{display:none;font-size:9px;padding:2px 4px;top:34px}#crank-ux .cf-town-pin[aria-pressed="true"] .cf-pin-label,#crank-ux .cf-town-pin:focus-visible .cf-pin-label{display:block}}#crank-ux .cf-tile{transition:border-color .16s,box-shadow .16s,transform .12s;background-image:radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--rarity) 12%,transparent),transparent 75%)}#crank-ux .cf-ux-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fff0 35%,#e6d4ad32 49%,#fff0 62%,transparent 75%);transform:translateX(-140%);z-index:2}#crank-ux .cf-tile:focus-visible,#crank-ux .cf-tile:hover{border-color:var(--rarity);box-shadow:inset 0 0 18px color-mix(in srgb,var(--rarity) 13%,transparent),0 0 12px #ad8d481c}#crank-ux .cf-tile:hover .cf-ux-sheen,#crank-ux .cf-tile:focus-visible .cf-ux-sheen{animation:cf-ux-sheen .52s ease-out forwards}#crank-ux .cf-tile:hover .cf-itemart,#crank-ux .cf-tile:focus-visible .cf-itemart{transform:scale(1.09);filter:brightness(1.17) drop-shadow(0 3px 4px #000b)}#crank-ux .cf-tile:active{transform:scale(.94)}#crank-ux .cf-tile.cf-ux-matches{border-color:#ac9870;box-shadow:inset 0 0 17px #bea05c23}#crank-ux .cf-tile.cf-ux-matches:after{left:0;right:0;background:#dcc18d;height:2px}#crank-ux .cf-ux-received:before{content:'НОВОЕ'!important;position:absolute!important;top:3px!important;left:3px!important;right:auto!important;width:auto!important;height:auto!important;padding:1px 3px;background:#c6ad75!important;color:#161711;transform:none!important;font:9px Arial;letter-spacing:.5px;z-index:4}#crank-ux .cf-nav button.cf-ux-has-item:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#dac187;right:7px;top:21px;box-shadow:0 0 8px #cda65480}#crank-ux .cf-detail{border-top-color:#796545}#crank-ux .cf-detailtop>div:last-child{min-width:0}#crank-ux .cf-detail h3{overflow-wrap:anywhere}#crank-ux .cf-ux-compare{border-top:1px solid #49402f;margin:14px 0 18px;padding-top:12px}#crank-ux .cf-ux-compare header{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#aa9a7f;font-size:11px}#crank-ux .cf-ux-compare header strong{display:block;color:#d5c7af;font-size:12px;font-weight:400;margin-top:2px}#crank-ux .cf-ux-compare-art{position:relative;flex-shrink:0;width:38px;height:42px;padding:2px;background:#0e1010;border:1px solid #544936}#crank-ux .cf-ux-compare table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}#crank-ux .cf-ux-compare th{text-align:right;color:#a89e8b;font-weight:400;padding:0 0 7px;font-size:10px}#crank-ux .cf-ux-compare th:first-child{text-align:left}#crank-ux .cf-ux-compare td{padding:6px 0;border-top:1px solid #bdaa7c0c;color:#c9c1b3}#crank-ux .cf-ux-compare td:first-child{width:47%}#crank-ux .cf-ux-compare td:nth-child(2){text-align:right;color:#9d968a;padding-right:15px}#crank-ux .cf-ux-compare td:last-child{text-align:right;white-space:nowrap}#crank-ux .cf-ux-compare td b{font-weight:400;color:#e3d7bc}#crank-ux .cf-ux-delta{display:inline-block;min-width:37px;text-align:right;margin-left:8px;font-size:11px;color:#bdb3a0}#crank-ux .cf-ux-delta.up{color:#abc49a}#crank-ux .cf-ux-delta.down{color:#df9c8a}#crank-ux .cf-ux-same{font-size:11px;color:#a69c89;margin:8px 0 16px}#crank-ux .cf-hoverinfo{width:270px;border-color:#817050;border-top:2px solid var(--ux-rarity,#ac9066);background:linear-gradient(140deg,#29271f,#121616 60%);padding:15px;box-shadow:0 14px 30px #000c,inset 0 1px #eed9a31a}#crank-ux .cf-hoverinfo strong{color:var(--ux-rarity,#d8c495);line-height:1.45;margin-bottom:6px}#crank-ux .cf-hoverinfo .cf-ux-tip-power{font:22px CrankDisplay,Georgia;color:#e6d9c1;margin:10px 0 8px}#crank-ux .cf-hoverinfo .cf-ux-tip-power small{font:11px Arial;color:#b6ad9d}#crank-ux .cf-hoverinfo .cf-ux-tip-diffs{border-top:1px solid #4e4432;padding-top:6px;display:flex;flex-wrap:wrap;gap:2px 13px}#crank-ux .cf-hoverinfo .cf-ux-delta{text-align:left;margin:0;min-width:0}#crank-ux .cf-hoverinfo .cf-ux-tip-foot{color:#918a7c;font-size:10px;padding-top:8px}#crank-ux .cf-ux-feedback{position:absolute;z-index:30;width:350px;max-width:calc(100% - 20px);background:linear-gradient(120deg,#302c21,#171a17 65%);border:1px solid #9f895b;box-shadow:0 12px 40px #000b,inset 0 1px #ddbd6f30;padding:14px 34px 14px 14px;display:flex;align-items:center;gap:12px}#crank-ux .cf-ux-feedback-art{width:48px;height:54px;flex-shrink:0;position:relative;padding:3px;border:1px solid #73623f;background:#101313}#crank-ux .cf-ux-feedback h3{font:16px CrankDisplay,Georgia;color:#e1ca98}#crank-ux .cf-ux-feedback p{font-size:12px;color:#d0c7b5;line-height:1.55;margin-top:4px;overflow-wrap:anywhere}#crank-ux .cf-ux-feedback small{color:#b6aa8f;font-size:11px}#crank-ux .cf-ux-feedback [data-ux-dismiss]{position:absolute;top:3px;right:3px;border:0;background:transparent;color:#bead8c;width:30px;height:30px;font-size:18px}#crank-ux .cf-ux-feedback [data-ux-bag]{padding:4px 0;margin-top:5px;display:block;font-size:12px;color:#e8cf92;border:0;border-bottom:1px solid #85703f;background:none}#crank-ux .cf-ux-flight{position:absolute;z-index:28;pointer-events:none;width:58px;height:64px;background:#171a15dd;border:1px solid #c1a268;padding:5px;box-shadow:0 0 20px #bfa05e35;will-change:transform,opacity}#crank-ux .cf-ux-wallet-delta{position:absolute;left:0;top:100%;color:#e4c488;font-size:12px;text-shadow:0 2px 5px #000;pointer-events:none}#crank-ux .cf-wallet{position:relative}#crank-ux .cf-bottom{flex-wrap:wrap}#crank-ux [data-ux-sound]{white-space:nowrap;color:#b4a88e}#crank-ux [data-ux-sound][aria-pressed=true]{color:#ddc491}@keyframes cf-ux-sheen{to{transform:translateX(140%)}}@media(max-width:650px){#crank-ux .cf-ux-compare header strong{font-size:11px}#crank-ux .cf-detail{padding:16px 13px}#crank-ux .cf-ux-compare td:first-child{width:45%}#crank-ux .cf-ux-compare td:nth-child(2){padding-right:9px}#crank-ux .cf-ux-delta{margin-left:5px;min-width:30px}#crank-ux .cf-ux-feedback [data-ux-dismiss]{min-width:36px;min-height:36px}#crank-ux .cf-ux-feedback [data-ux-bag]{min-height:38px}}@media(prefers-reduced-motion:reduce){#crank-ux .cf-ux-sheen{display:none}#crank-ux .cf-tile,#crank-ux .cf-itemart{transition:none}#crank-ux .cf-tile:hover .cf-itemart,#crank-ux .cf-tile:focus-visible .cf-itemart,#crank-ux .cf-tile:active{transform:none}}
#crank-ux{--surface:#161715;--deep:#0d1010;--danger:#d39382;--positive:#abc49a;--line:#443d31;--warm:#e2c38d;min-height:100vh}
#crank-ux .cf-nav button{white-space:nowrap}
#crank-ux .pd-top-actions{display:flex;gap:7px}
#crank-ux .pd-icon-button{background:var(--deep);border:1px solid var(--edge);color:var(--gold);min-width:32px;min-height:32px;padding:4px 7px;line-height:1.2}
#crank-ux button:not(:disabled):hover{border-color:var(--gold)}
#crank-ux .pd-top-actions [data-unread]{font-size:11px;color:var(--warm)}
#crank-ux .cf-main{max-width:1680px}
#crank-ux .pd-section{padding:25px}
#crank-ux .pd-section>h2{font-size:26px;margin:0 0 18px}
#crank-ux .pd-section p{color:var(--sub);line-height:1.7}
#crank-ux .pd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
#crank-ux .pd-full{width:100%;margin-top:18px}
#crank-ux .pd-empty{text-align:center;padding:36px 20px;color:var(--sub)}
#crank-ux .pd-empty h3{font-size:21px;color:var(--ink);margin-bottom:10px}
#crank-ux .pd-empty .cf-action{margin-top:16px}
#crank-ux .pd-callout{padding:15px 18px;border-left:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 7%,var(--deep));margin:16px 0;color:var(--ink);font-size:12px}
#crank-ux .pd-callout p{margin-top:7px}
#crank-ux .pd-refusal{color:var(--danger);font-size:12px;line-height:1.6;margin:12px 0}
#crank-ux .pd-refusal:empty{display:none}
#crank-ux .pd-name.peaceful{color:#b3c5d4}
#crank-ux .pd-name.gray{color:#b0ada6}
#crank-ux .pd-name.red{color:#df9487}
#crank-ux .pd-clock{font-variant-numeric:tabular-nums;color:var(--warm);white-space:nowrap}
#crank-ux .pd-form{display:grid;gap:17px;margin-top:20px}
#crank-ux .pd-form label{display:grid;gap:7px;font-size:12px;color:var(--gold);min-width:0}
#crank-ux .pd-form input:not([type=checkbox]):not([type=radio]),#crank-ux .pd-form select,#crank-ux .pd-form textarea{width:100%;min-width:0;border:1px solid var(--edge);background:var(--deep);color:var(--ink);padding:11px;font:14px/1.5 Arial,sans-serif;border-radius:0}
#crank-ux .pd-form textarea{resize:vertical}
#crank-ux .pd-form small{color:var(--sub);font-size:11px}
#crank-ux .pd-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#crank-ux .pd-form .pd-check{display:flex;gap:10px;align-items:center;color:var(--ink)}
#crank-ux input[type=radio],#crank-ux input[type=checkbox]{accent-color:var(--gold)}
#crank-ux .pd-dialog{color:var(--ink);background:var(--surface);border:1px solid var(--gold);width:560px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:0;box-shadow:0 20px 90px #000d;font:14px/1.6 Arial,sans-serif;margin:auto;overflow:auto}
#crank-ux .pd-dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
#crank-ux .pd-dialog>header{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px}
#crank-ux .pd-dialog h2{font:23px/1.3 CrankDisplay,Georgia;margin-top:5px}
#crank-ux .pd-dialog h3{font:20px/1.4 CrankDisplay,Georgia}
#crank-ux .pd-dialog-body{padding:24px}
#crank-ux .pd-dialog-body>p{color:var(--sub);margin-bottom:16px}
#crank-ux .pd-dialog .pd-context-actions,#crank-ux .pd-account-menu{display:grid;gap:10px}
#crank-ux .pd-account-menu button{text-align:left;padding:14px;border-bottom:1px solid var(--line)}
#crank-ux .pd-notifications{display:grid;gap:10px;max-height:420px;overflow:auto}
#crank-ux .pd-notifications article{padding:14px;border:1px solid var(--line)}
#crank-ux .pd-notifications article.unread{border-left:3px solid var(--gold);background:color-mix(in srgb,var(--gold) 5%,transparent)}
#crank-ux .pd-notifications h3{font-size:18px;margin:5px 0}
#crank-ux .pd-notifications p{font-size:12px;color:var(--sub)}
#crank-ux .pd-large-item{height:140px;width:140px;margin:0 auto 20px;background:radial-gradient(ellipse,var(--line),transparent 70%)}
#crank-ux .pd-level-seal{width:110px;height:110px;margin:10px auto 24px;border:2px double var(--gold);border-radius:50%;display:grid;place-items:center;font:46px CrankDisplay,Georgia;color:var(--warm);box-shadow:0 0 0 6px var(--deep),0 0 0 7px var(--line)}
#crank-ux .pd-perk-chest{display:block;width:160px;height:110px;margin:24px auto;border:3px double var(--gold);background:linear-gradient(var(--line) 0 43%,var(--gold) 44% 47%,var(--deep) 48%);box-shadow:inset 0 0 30px #0009;font:42px CrankDisplay,Georgia;color:var(--warm)}
#crank-ux .pd-perk-chest:hover{box-shadow:inset 0 0 25px var(--line),0 0 30px color-mix(in srgb,var(--gold) 20%,transparent)}
#crank-ux .pd-auth .cf-workspace{display:block}
#crank-ux.pd-auth .cf-workspace{display:block}
#crank-ux.pd-auth #cf-community{display:none}
#crank-ux .pd-login{display:grid;grid-template-columns:1fr 1fr;max-width:1050px;margin:auto;min-height:590px}
#crank-ux .pd-login-art{position:relative;overflow:hidden;min-height:500px;background:radial-gradient(ellipse at 50% 40%,#53493655,transparent 70%)}
#crank-ux .pd-login-art img{height:95%;max-width:100%;position:absolute;bottom:0;left:50%;transform:translateX(-50%);object-fit:contain;mask-image:linear-gradient(#000 65%,transparent)}
#crank-ux .pd-login-art>div{position:absolute;left:35px;bottom:32px;z-index:1}
#crank-ux .pd-login-art h2{font:31px/1.4 CrankDisplay,Georgia;margin-top:12px}
#crank-ux .pd-login-form{padding:50px 40px;align-self:center}
#crank-ux .pd-login-form h2{font-size:29px;margin:10px 0 25px}
#crank-ux .pd-login-form>.cf-note{margin-top:22px;line-height:1.7;font-size:11px}
#crank-ux .pd-character-select{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
#crank-ux .pd-character-choice{border:1px solid var(--line);padding:20px;background:radial-gradient(ellipse at top,#71624218,transparent);display:flex;gap:12px;align-items:center;min-width:0}
#crank-ux .pd-character-choice img{width:100px;height:170px;object-fit:contain}
#crank-ux .pd-character-choice h3{font:22px CrankDisplay,Georgia;overflow-wrap:anywhere}
#crank-ux .pd-character-choice p{font-size:12px;margin:7px 0}
#crank-ux .pd-empty-choice{min-height:170px;display:flex;flex-direction:column;justify-content:center;border-style:dashed;color:var(--sub)}
#crank-ux .pd-class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:25px}
#crank-ux .pd-class{border:1px solid var(--line);background:linear-gradient(140deg,var(--surface),var(--deep));padding:24px;text-align:left;min-width:0;color:var(--ink)}
#crank-ux .pd-class.is-selected{border-color:var(--gold);box-shadow:inset 0 0 35px color-mix(in srgb,var(--gold) 9%,transparent)}
#crank-ux .pd-class-mark{font:35px CrankDisplay,Georgia;color:var(--gold)}
#crank-ux .pd-class h3{font:24px CrankDisplay,Georgia;margin:12px 0}
#crank-ux .pd-class p{font-size:12px;min-height:70px}
#crank-ux .pd-class>div{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
#crank-ux .pd-class small,#crank-ux .pd-class strong{display:block;font-size:11px;font-weight:400}
#crank-ux .pd-class small{color:var(--sub);margin-bottom:6px}
#crank-ux .pd-hero .cf-stage{height:550px;padding-top:14px}
#crank-ux .pd-hero .cf-equips{grid-template-rows:repeat(7,1fr)}
#crank-ux .pd-hero .cf-hero{height:500px}
#crank-ux .pd-hero-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:22px 20px 5px}
#crank-ux .pd-hero-bars>.pd-meter:first-child{grid-column:1/-1}
#crank-ux .pd-meter{min-width:0}
#crank-ux .pd-meter .cf-barlabel{gap:8px;line-height:1.5;font-size:10px;letter-spacing:0}
#crank-ux .pd-meter .cf-barlabel b{white-space:nowrap}
#crank-ux .pd-meter-track{display:block;height:7px;background:var(--deep);position:relative;overflow:hidden}
#crank-ux .pd-meter-track i{display:block;position:absolute;inset:0 auto 0 0;height:100%}
#crank-ux .pd-meter-fill{transition:width .4s ease-out}
#crank-ux .pd-meter-echo{background:var(--warm);opacity:.45;transition:width .65s .3s}
#crank-ux .pd-mirror .cf-itemart{transform:scaleX(-1)}
#crank-ux .pd-provisions{padding:15px 20px;border-top:1px solid var(--line)}
#crank-ux .pd-provisions>div{display:flex;gap:9px;margin:10px 0}
#crank-ux .pd-provisions .cf-tile{width:48px;height:48px}
#crank-ux .pd-provisions small{display:block;text-align:center;font-size:10px;margin-top:5px;color:var(--sub)}
#crank-ux .pd-xp{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 20px 16px;font-size:10px;color:var(--sub)}
#crank-ux .pd-xp>div{width:100%;height:3px;background:var(--deep);margin-top:7px}
#crank-ux .pd-xp i{display:block;height:100%;background:var(--gold)}
#crank-ux .pd-inventory{max-height:400px;overflow:auto;scrollbar-color:var(--gold) var(--deep);scrollbar-width:thin;padding-right:5px;overscroll-behavior:contain}
#crank-ux .pd-inventory .cf-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
#crank-ux .pd-character-tabs{gap:10px;padding:0 12px;flex-wrap:wrap}
#crank-ux .pd-character-tabs button{font-size:11px;padding:14px 3px}
#crank-ux .pd-item-locked .cf-itemart{opacity:.42;filter:saturate(.5)}
#crank-ux .pd-item-locked:after{background:var(--danger)}
#crank-ux .cf-bonuses{overflow-wrap:anywhere}
#crank-ux .pd-stat-controls{display:flex;align-items:center;gap:12px}
#crank-ux .pd-stat-controls b{min-width:30px;text-align:center}
#crank-ux .pd-mastery-item{display:flex;gap:15px;padding:20px 0;border-bottom:1px solid var(--line);font-size:12px}
#crank-ux .pd-mastery-item p,#crank-ux .pd-mastery-item strong,#crank-ux .pd-mastery-item small{display:block;margin-top:7px}
#crank-ux .pd-mastery-item small{color:var(--sub)}
#crank-ux .pd-receipt{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--gold) 8%,var(--deep));border:1px solid var(--gold);margin-top:18px;padding:12px;font-size:12px}
#crank-ux .pd-receipt>span{width:48px;height:48px;flex-shrink:0}
#crank-ux .pd-receipt small{display:block;margin-top:4px;color:var(--sub)}
#crank-ux .pd-merchant{padding-bottom:20px}
#crank-ux .pd-merchant .cf-merchant-art{height:200px}
#crank-ux .pd-merchant .cf-merchanttext{padding:0 20px 15px}
#crank-ux .pd-merchant .cf-merchanttext h2{font-size:23px}
#crank-ux .pd-category-tree{padding:0 20px}
#crank-ux .pd-category-tree details{padding:9px 0;border-top:1px solid var(--line)}
#crank-ux .pd-category-tree summary{color:var(--gold);font-size:12px;cursor:pointer;padding:5px 0}
#crank-ux .pd-category-tree button{display:block;padding:6px 10px;text-align:left;width:100%}
#crank-ux .pd-category-tree button[aria-pressed=true]{color:var(--warm);background:color-mix(in srgb,var(--gold) 9%,transparent)}
#crank-ux .pd-merchant>.pd-actions,#crank-ux .pd-merchant>.cf-action{margin:15px 20px}
#crank-ux .pd-shop-grid{margin-top:15px;grid-template-columns:repeat(6,minmax(0,1fr))}
#crank-ux .pd-lobby-hero{padding:18px 24px;display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:20px;margin-bottom:18px}
#crank-ux .pd-lobby-hero img{width:90px;height:115px;object-fit:contain}
#crank-ux .pd-lobby-hero h2{font-size:24px;margin:5px 0 10px}
#crank-ux .pd-lobby-hero .cf-note{margin-top:8px}
#crank-ux .pd-lobby-hero>div:last-child{display:grid;gap:9px}
#crank-ux .pd-request-list{padding:10px 22px}
#crank-ux .pd-request{padding:20px 0;border-bottom:1px solid var(--line)}
#crank-ux .pd-request:last-child{border:0}
#crank-ux .pd-request header{display:flex;gap:15px;justify-content:space-between;align-items:start}
#crank-ux .pd-request h3{font:17px/1.5 CrankDisplay,Georgia;margin-top:7px;overflow-wrap:anywhere}
#crank-ux .pd-request-teams{display:grid;grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);gap:12px;margin:18px 0}
#crank-ux .pd-request-teams label{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:7px}
#crank-ux .pd-versus-word{align-self:center;text-align:center;color:var(--dim);font:11px CrankDisplay,Georgia}
#crank-ux .pd-participant-slots{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
#crank-ux .pd-participant-slots span{font-size:11px;padding:6px 9px;border:1px solid var(--line);background:var(--deep);color:var(--ink)}
#crank-ux .pd-participant-slots .pd-vacancy{border-style:dashed;color:var(--dim)}
#crank-ux .pd-request footer{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--sub);font-size:11px}
#crank-ux .pd-battle-status{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 24px;border-bottom:1px solid var(--line);font-size:12px;flex-wrap:wrap}
#crank-ux .pd-battle-status strong{font:18px CrankDisplay,Georgia;color:var(--warm)}
#crank-ux .pd-arena{display:grid;grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);gap:15px;padding:0 24px 20px;background:radial-gradient(ellipse at center,#74623b12,transparent 70%)}
#crank-ux .pd-vs{align-self:center;text-align:center;font:23px CrankDisplay,Georgia;color:var(--gold)}
#crank-ux .pd-fighter-hud{min-height:164px;padding:6px 4px 0}
#crank-ux .pd-fighter-hud h2{overflow-wrap:anywhere;font-size:24px}
#crank-ux .pd-fighter-hud .cf-kicker{font-size:10px;letter-spacing:1px;margin-bottom:10px}
#crank-ux .pd-fighter-hud .pd-meter{margin-top:8px}
#crank-ux .pd-fighter-body{height:285px;position:relative}
#crank-ux .pd-fighter-body .cf-avatar,#crank-ux .pd-fighter-body .cf-enemy-art{height:100%}
#crank-ux .pd-fighter-body .cf-avatar img{height:100%;width:100%;object-fit:contain;animation:none!important;transform:none!important}
#crank-ux .pd-fighter-body .cf-guardian{background-size:auto 108%;background-position:97% 50%;inset:0}
#crank-ux .pd-fighter-equipment{border-top:1px solid var(--line);margin-top:12px;text-align:left}
#crank-ux .pd-fighter-equipment summary{font-size:11px;padding:10px 0;color:var(--gold);cursor:pointer}
#crank-ux .pd-gear-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#crank-ux .pd-gear-grid .cf-battle-gear{width:100%;height:auto;aspect-ratio:1}
#crank-ux .pd-effect-list{display:flex;gap:5px;flex-wrap:wrap;padding:8px 15px;min-height:35px}
#crank-ux .pd-effect{display:flex;gap:7px;align-items:center;border:1px solid var(--line);background:var(--deep);padding:5px 7px;font-size:10px;color:var(--sub)}
#crank-ux .pd-effect b{font-size:17px;color:var(--gold)}
#crank-ux .pd-effect small{display:block;color:var(--ink);font-size:10px}
#crank-ux .pd-teams{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding:18px 24px;background:var(--deep)}
#crank-ux .pd-teams section{min-width:0}
#crank-ux .pd-teams header{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap}
#crank-ux .pd-teams h3{font:16px CrankDisplay,Georgia}
#crank-ux .pd-teams header>span{font-size:10px;color:var(--sub)}
#crank-ux .pd-team-fighters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#crank-ux .pd-team-fighter{background:var(--surface);border:1px solid var(--line);padding:10px;text-align:left;min-width:0;color:var(--ink)}
#crank-ux .pd-team-fighter:disabled{opacity:1;cursor:default}
#crank-ux .pd-team-fighter>span{display:block;font-size:11px;overflow-wrap:anywhere;margin-bottom:7px}
#crank-ux .pd-team-fighter[aria-pressed=true]{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,var(--surface))}
#crank-ux .pd-team-fighter>small{display:block;margin-top:5px;font-size:10px;color:var(--sub)}
#crank-ux .pd-team-fighter.pd-dead{opacity:.4;filter:grayscale(1)}
#crank-ux .pd-team-fighter.pd-dead>span{text-decoration:line-through}
#crank-ux .pd-battle-belt{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
#crank-ux .pd-battle-belt .cf-hotkey{min-width:0;position:relative;padding:8px 5px}
#crank-ux .pd-battle-belt .cf-hotkey strong{font-size:11px}
#crank-ux .pd-battle-belt .cf-hotkey small{font-size:10px;line-height:1.35;white-space:normal}
#crank-ux .pd-cooldown{position:absolute;inset:4px;display:grid;place-items:center;pointer-events:none;background:conic-gradient(#080909c9 var(--progress),transparent 0);border-radius:50%;z-index:3}
#crank-ux .pd-cooldown b{color:var(--warm);font:19px CrankDisplay,Georgia;text-shadow:0 2px 4px #000}
#crank-ux .pd-combat-log{max-height:250px;overflow:auto;display:grid;gap:9px;color:var(--sub);font-size:12px;margin-top:15px}
#crank-ux .pd-damage{position:absolute;left:43%;top:50%;font:30px CrankDisplay,Georgia;color:var(--danger);text-shadow:0 2px 5px #000;pointer-events:none;z-index:5}
#crank-ux .pd-totals{text-align:center;padding:30px;border-top:1px solid var(--line);background:radial-gradient(ellipse at top,#bd9a4510,transparent)}
#crank-ux .pd-totals h2{font-size:31px;margin:12px 0 20px}
#crank-ux .pd-totals>.pd-actions{justify-content:center}
#crank-ux .pd-metrics{display:flex;justify-content:center;gap:35px;margin:20px 0}
#crank-ux .pd-metrics strong,#crank-ux .pd-metrics span{display:block}
#crank-ux .pd-metrics strong{font:25px CrankDisplay,Georgia;color:var(--warm)}
#crank-ux .pd-metrics span{font-size:11px;color:var(--sub)}
#crank-ux .pd-reward-item{display:flex;justify-content:center;align-items:center;gap:15px;font-size:12px}
#crank-ux .pd-reward-item .cf-itemart{width:65px;height:65px}
#crank-ux .pd-map-viewport{position:relative;width:100%;aspect-ratio:1;overflow:hidden;touch-action:none;background:var(--deep)}
#crank-ux .pd-map-content{position:absolute;inset:0;transform-origin:0 0}
#crank-ux .pd-map-image{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
#crank-ux .pd-roads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#crank-ux .pd-roads path{fill:none;stroke:#ae967257;stroke-width:.28;stroke-dasharray:.8 .45}
#crank-ux .pd-roads path.pd-neighbor-road{stroke:#ddc897bf;stroke-width:.35}
#crank-ux .pd-roads circle{fill:#f3ddaa;filter:drop-shadow(0 0 2px #fff8)}
#crank-ux .pd-neighbor .cf-pin-core{border-color:var(--warm);box-shadow:0 0 14px #d7bd7155}
#crank-ux .pd-map-tools{position:absolute;right:12px;bottom:12px;display:flex;gap:5px;background:var(--deep);padding:4px}
#crank-ux .pd-map-detail{padding:25px;min-width:0}
#crank-ux .pd-map-detail h2{font-size:26px;margin:12px 0 18px}
#crank-ux .pd-map-detail p{font-size:12px;line-height:1.8;color:var(--sub)}
#crank-ux .pd-map-detail p.pd-refusal{color:var(--danger)}
#crank-ux .pd-map-facts{display:grid;gap:9px;font-size:12px;margin:20px 0;color:var(--gold)}
#crank-ux .pd-location-list{display:grid;margin-top:22px;border-top:1px solid var(--line);padding-top:12px}
#crank-ux .pd-location-list button{text-align:left;padding:8px}
#crank-ux .pd-location-list button[aria-pressed=true]{background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--warm)}
#crank-ux .pd-travel-track{height:3px;background:var(--deep);margin-top:12px}
#crank-ux .pd-travel-track i{display:block;height:100%;background:var(--gold)}
#crank-ux .pd-placeholder-city{height:420px;background:linear-gradient(#1119,#080b0ae8),var(--city-backdrop);background-position:var(--city-x) var(--city-y);background-size:auto,220%;isolation:isolate}
#crank-ux .pd-city-title{position:absolute;inset:60px 30px auto;text-align:center;color:var(--ink)}
#crank-ux .pd-city-title h2{font:38px CrankDisplay,Georgia;margin-top:16px}
#crank-ux .pd-city-title p{font-size:11px;color:var(--sub);margin-top:12px}
#crank-ux .pd-building-detail{padding:24px;border-top:1px solid var(--line)}
#crank-ux .pd-building-detail h2{font-size:25px;margin:10px 0}
#crank-ux .pd-building-detail p{color:var(--sub);font-size:12px;line-height:1.7}
#crank-ux .pd-arrival{height:220px;background-size:cover;background-position:center;animation:pd-arrive 2.5s ease-out}
#crank-ux .pd-arrival-map{background-size:120%;filter:sepia(.25)}
#crank-ux .pd-guard{max-width:800px;margin:auto;padding:50px 40px;text-align:center}
#crank-ux .pd-guard h2{font-size:35px;color:var(--danger);margin:15px 0}
#crank-ux .pd-guard p{color:var(--sub);margin:20px 0}
#crank-ux .pd-guard .pd-meter{max-width:430px;margin:30px auto}
#crank-ux .pd-guard-seal{font-size:70px;color:var(--gold);margin-top:20px}
#crank-ux .pd-event-hero{min-height:340px;overflow:hidden;margin-bottom:18px}
#crank-ux .pd-event-image{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;mask-image:linear-gradient(90deg,transparent,#000)}
#crank-ux .pd-event-content{position:relative;padding:36px;max-width:680px}
#crank-ux .pd-event-content h2{font-size:38px;margin:15px 0}
#crank-ux .pd-event-content>p{font-size:14px;line-height:1.8;color:var(--sub);margin-bottom:25px}
#crank-ux .pd-event-participants{display:flex;gap:7px;flex-wrap:wrap;font-size:11px;margin-top:22px}
#crank-ux .pd-event-participants span{padding:5px 9px;background:var(--deep);border:1px solid var(--line)}
#crank-ux .pd-future-events{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#crank-ux .pd-future-events article{border:1px solid var(--line);background:var(--deep);min-width:0}
#crank-ux .pd-future-events article>div:last-child{padding:20px}
#crank-ux .pd-future-events h3{font:21px CrankDisplay,Georgia;margin:10px 0}
#crank-ux .pd-schedule-art{height:120px;background-size:190%;filter:sepia(.2) brightness(.7)}
#crank-ux .pd-social-title{display:flex;justify-content:space-between;align-items:center;gap:5px}
#crank-ux .pd-roster-label{font:12px CrankDisplay,Georgia;letter-spacing:1px;color:var(--gold);padding:14px 8px 6px}
#crank-ux .pd-person{display:flex;gap:6px;align-items:center;padding:10px 4px;border-bottom:1px solid color-mix(in srgb,var(--edge) 50%,transparent)}
#crank-ux .pd-person>.cf-person-mark{width:26px;height:32px;font-size:14px}
#crank-ux .pd-person>div:nth-child(2){flex:1;min-width:0}
#crank-ux .pd-person .cf-textbutton{padding:2px 0;font-size:12px;text-align:left;white-space:normal;overflow-wrap:anywhere}
#crank-ux .pd-person small{display:block;font-size:9px;color:var(--sub);margin-top:3px}
#crank-ux .pd-online{width:5px;height:5px;display:inline-block;background:var(--dim);border-radius:50%;margin-right:4px}
#crank-ux .pd-online.on{background:var(--positive)}
#crank-ux .pd-person-actions{display:flex;gap:3px}
#crank-ux .pd-person-actions .pd-icon-button{min-width:25px;width:25px;padding:2px;min-height:30px;font-size:11px}
#crank-ux .cf-roster{height:330px}
#crank-ux .cf-chatlog{height:260px}
#crank-ux .cf-roster-heading>div>span{display:block;font-size:10px;color:var(--sub);margin-top:6px}
#crank-ux .pd-profile-item{display:flex;align-items:start;gap:14px;margin-bottom:20px}
#crank-ux .pd-profile-item>div:last-child{min-width:0;flex:1}
#crank-ux .pd-profile-item h3{font:20px/1.5 CrankDisplay,Georgia}
#crank-ux .pd-avatar-settings{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#crank-ux .pd-avatar-settings img{width:70px;height:70px;object-fit:cover}
#crank-ux .pd-demo-tools{border-top:1px solid var(--line);margin-top:25px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px}
#crank-ux .pd-demo-tools h3{width:100%;font:18px CrankDisplay,Georgia}
#crank-ux .pd-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:25px}
#crank-ux .pd-help-grid details{border-bottom:1px solid var(--line);padding:15px 0;font-size:12px}
#crank-ux .pd-help-grid summary{color:var(--gold);font-size:14px;cursor:pointer}
#crank-ux .pd-help-grid details p{margin-top:13px}
#crank-ux .pd-ticket-list article{padding:15px 0;border-bottom:1px solid var(--line);font-size:12px;overflow-wrap:anywhere}
#crank-ux .pd-ticket-list small{color:var(--sub);font-size:11px}
#crank-ux .pd-guild-seal{width:65px;height:80px;font-size:35px;margin-bottom:20px}
#crank-ux .pd-guild-members{margin-top:25px}
#crank-ux .pd-guild-members article{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:13px 0;font-size:12px}
#crank-ux .pd-tour-anchor{box-shadow:0 0 0 3px var(--gold)!important}
#crank-ux .pd-archive{max-height:450px;overflow:auto;font-size:12px}
#crank-ux .pd-archive h3{margin:15px 0 10px}
@keyframes pd-arrive{from{filter:brightness(.25);background-position:52% 50%}to{filter:brightness(1);background-position:50% 50%}}
@container(max-width:850px){#crank-ux .pd-battle-belt{grid-template-columns:repeat(4,minmax(0,1fr))}#crank-ux .pd-team-fighters{grid-template-columns:1fr}#crank-ux .cf-atlas-layout{grid-template-columns:1fr}#crank-ux .pd-location-list{grid-template-columns:1fr 1fr}#crank-ux .pd-class-grid{grid-template-columns:1fr 1fr}}
@media(max-width:1100px){#crank-ux .cf-top{gap:15px;padding:0 18px}#crank-ux .cf-nav button{padding-left:9px;padding-right:9px}#crank-ux .cf-wallet{padding-left:12px}#crank-ux .pd-character-select{grid-template-columns:1fr 1fr}}
@media(max-width:900px){#crank-ux .pd-top-actions{margin-left:0}#crank-ux .pd-login-art{min-height:450px}#crank-ux .pd-login-form{padding:30px 25px}#crank-ux .pd-future-events{grid-template-columns:1fr 1fr}#crank-ux .pd-person-actions .pd-icon-button{min-width:38px;min-height:38px}#crank-ux .cf-roster-heading{gap:10px}#crank-ux .pd-person{padding:10px 7px}}
@media(max-width:650px){#crank-ux .cf-top{padding:10px 12px 0;gap:8px;flex-wrap:wrap}#crank-ux .cf-brand{margin-right:auto}#crank-ux .cf-logo{font-size:22px}#crank-ux .cf-wallet{margin:0;border:0;padding:0}#crank-ux .cf-wallet small{display:none}#crank-ux .cf-nav{order:4;width:100%;justify-content:space-between;gap:0;min-height:44px}#crank-ux .cf-nav button{font-size:11px;padding:10px 5px}#crank-ux .pd-top-actions{gap:4px}#crank-ux .pd-top-actions .pd-icon-button{min-width:29px;padding:4px}#crank-ux .pd-section{padding:18px 14px}#crank-ux .pd-form-grid{grid-template-columns:1fr}#crank-ux .pd-form input:not([type=checkbox]):not([type=radio]),#crank-ux .pd-form select,#crank-ux .pd-form textarea{font-size:16px}#crank-ux .pd-login{grid-template-columns:1fr}#crank-ux .pd-login-art{min-height:230px;height:230px}#crank-ux .pd-login-art img{left:78%;height:110%;opacity:.65}#crank-ux .pd-login-art>div{left:22px;bottom:25px}#crank-ux .pd-login-art h2{font-size:26px}#crank-ux .pd-login-form{padding:24px 20px}#crank-ux .pd-character-select,#crank-ux .pd-class-grid{grid-template-columns:1fr}#crank-ux .pd-character-choice img{height:140px}#crank-ux .pd-empty-choice{min-height:100px}#crank-ux .pd-class{padding:20px}#crank-ux .pd-class p{min-height:0}#crank-ux .pd-dialog>header{padding:17px}#crank-ux .pd-dialog-body{padding:18px}#crank-ux .pd-dialog h2{font-size:21px}#crank-ux .pd-hero .cf-stage{height:490px;grid-template-columns:54px minmax(0,1fr) 54px}#crank-ux .pd-hero .cf-hero{height:420px}#crank-ux .pd-hero .cf-equips .cf-tile{width:47px;height:47px}#crank-ux .pd-hero .cf-equipped>span{font-size:8px;letter-spacing:0}#crank-ux .pd-hero-bars{padding:20px 16px 5px}#crank-ux .pd-inventory{max-height:315px}#crank-ux .pd-inventory .cf-grid{gap:4px}#crank-ux .pd-character-tabs{gap:3px;justify-content:space-between;padding:0 7px}#crank-ux .pd-character-tabs button{font-size:10px;padding:13px 2px;letter-spacing:0}#crank-ux .pd-mastery-item{flex-direction:column}#crank-ux .pd-merchant .cf-merchant-art{height:135px}#crank-ux .pd-category-tree{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}#crank-ux .pd-category-tree>button{grid-column:1/-1}#crank-ux .pd-merchant .cf-merchanttext{margin-top:0}#crank-ux .pd-shop-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}#crank-ux .pd-lobby-hero{grid-template-columns:65px 1fr;padding:16px;gap:12px}#crank-ux .pd-lobby-hero img{width:65px;height:105px}#crank-ux .pd-lobby-hero>div:last-child{grid-column:1/-1;display:flex;flex-wrap:wrap}#crank-ux .pd-request-list{padding:4px 14px}#crank-ux .pd-request-teams{grid-template-columns:1fr;gap:10px}#crank-ux .pd-versus-word{font-size:11px;text-align:left}#crank-ux .pd-request footer{flex-wrap:wrap}#crank-ux .pd-request h3{font-size:16px}#crank-ux .cf-tabs button{letter-spacing:0}#crank-ux .pd-battle-status{padding:15px 12px;gap:9px}#crank-ux .pd-battle-status strong{font-size:16px;width:100%}#crank-ux .pd-arena{padding:0 10px 12px;gap:6px;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr)}#crank-ux .pd-vs{font-size:15px}#crank-ux .pd-fighter-hud{min-height:178px;padding:5px 0 0}#crank-ux .pd-fighter-hud h2{font-size:19px;margin:15px 0 5px}#crank-ux .pd-fighter-hud .cf-kicker{font-size:9px;letter-spacing:0;min-height:27px}#crank-ux .pd-fighter-body{height:195px}#crank-ux .pd-fighter-equipment summary{font-size:10px;line-height:1.6}#crank-ux .pd-gear-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#crank-ux .pd-effect-list{padding:6px 0;gap:3px}#crank-ux .pd-hero>.pd-effect-list{padding:6px 16px}#crank-ux .pd-effect{font-size:9px;padding:3px}#crank-ux .pd-teams{padding:13px 10px;gap:9px}#crank-ux .pd-teams h3{font-size:13px}#crank-ux .pd-team-fighter{padding:8px 6px}#crank-ux .pd-team-fighter .cf-barlabel{font-size:9px;gap:3px}#crank-ux .pd-battle-belt{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr))}#crank-ux .pd-battle-belt .cf-hotkey{padding:6px 3px}#crank-ux .pd-battle-belt .cf-hot-art{width:38px;height:42px}#crank-ux .pd-battle-belt .cf-hotkey strong{font-size:10px}#crank-ux .pd-battle-belt .cf-hotkey small{font-size:9px}#crank-ux .pd-totals{padding:23px 14px}#crank-ux .pd-metrics{gap:24px}#crank-ux .pd-map-detail{padding:20px}#crank-ux .pd-location-list{grid-template-columns:1fr}#crank-ux .pd-placeholder-city{height:330px}#crank-ux .pd-city-title{inset:40px 15px auto}#crank-ux .pd-city-title h2{font-size:28px}#crank-ux .pd-placeholder-city .cf-town-pin .cf-pin-label{display:block!important;white-space:normal;width:75px;line-height:1.4;font-size:9px;top:35px}#crank-ux .pd-building-detail{padding:20px 14px}#crank-ux .pd-event-content{padding:25px 18px}#crank-ux .pd-event-content h2{font-size:30px}#crank-ux .pd-future-events,#crank-ux .pd-help-grid{grid-template-columns:1fr}#crank-ux .pd-guard{padding:35px 20px}#crank-ux .pd-guard h2{font-size:27px}#crank-ux .pd-profile-item{display:block}#crank-ux .pd-profile-item .cf-detailicon{margin-bottom:12px}#crank-ux .pd-guild-members article{flex-wrap:wrap}#crank-ux .pd-guild-members article>span:nth-child(2){font-size:11px}#crank-ux .pd-arrival{height:150px}}
@media(prefers-reduced-motion:reduce){#crank-ux .pd-meter-fill,#crank-ux .pd-meter-echo{transition:none}#crank-ux .pd-arrival{animation:none}}

#crank-ux .pd-roster-avatar{width:30px;height:35px;flex:0 0 30px;object-fit:cover;object-position:50% 15%;border:1px solid var(--line)}
#crank-ux .pd-self-row{display:flex;align-items:center;gap:10px;padding:12px 7px;border-bottom:1px solid var(--line);font-size:12px}
#crank-ux .pd-bell{filter:grayscale(1);font-size:16px}

#crank-ux .pd-placeholder-city{width:100%;aspect-ratio:auto}
#crank-ux .pd-bell{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;vertical-align:middle}
#crank-ux .pd-roads path{stroke:#584933b0;stroke-width:.35}
#crank-ux .pd-roads path.pd-neighbor-road{stroke:#f2dda9;stroke-width:.5;filter:drop-shadow(0px .12px .2px #211d18)}
#crank-ux .pd-pin-count{position:absolute;bottom:-8px;right:-12px;min-width:21px;padding:2px 4px;background:#201d16;color:#dfc799;border:1px solid #9c8554;font:9px/1.1 system-ui;pointer-events:none}

#crank-ux .pd-team-container .pd-teams{max-height:380px;overflow-y:auto;scrollbar-color:var(--gold) var(--deep);scrollbar-width:thin;overscroll-behavior:contain}
#crank-ux .pd-team-container .pd-teams section>header{position:sticky;top:-13px;z-index:1;background:var(--surface);padding:8px 0}
@media(max-width:650px){#crank-ux .pd-team-container .pd-teams{max-height:320px}}

/* Duel: portraits flank the command panel; equipment stays with its owner. */
#crank-ux.pd-duel-view .cf-main{max-width:1920px;padding-top:18px}
#crank-ux.pd-duel-view .cf-pagehead{margin-bottom:18px}
#crank-ux.pd-duel-view #cf-title{font-size:30px}
#crank-ux.pd-duel-view .pd-battle-status{padding:12px 18px;gap:12px}
#crank-ux.pd-duel-view .pd-battle-status strong{font-size:16px}
#crank-ux.pd-duel-view .pd-personal-score{font-size:11px;color:var(--sub)}
#crank-ux.pd-duel-view .pd-arena{grid-template-columns:minmax(0,1fr) minmax(250px,.86fr) minmax(0,1fr);gap:18px;padding:16px 18px 10px;align-items:start;background:radial-gradient(ellipse at 50% 55%,#79614016,transparent 70%)}
#crank-ux.pd-duel-view .cf-fighter{min-width:0;position:relative}
#crank-ux.pd-duel-view .pd-fighter-hud{min-height:112px;padding:0 3px 10px;text-align:left}
#crank-ux.pd-duel-view .pd-fighter-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
#crank-ux.pd-duel-view .pd-fighter-title h2{font:25px/1.15 CrankDisplay,Georgia;margin:0}
#crank-ux.pd-duel-view .pd-fighter-level{height:26px;min-width:26px;display:grid;place-items:center;border:1px solid var(--line);color:var(--gold);font:13px CrankDisplay,Georgia;transform:rotate(0deg)}
#crank-ux.pd-duel-view .pd-fighter-hud .cf-kicker{font-size:9px;margin:6px 0 0;line-height:1.4;letter-spacing:.6px}
#crank-ux.pd-duel-view .pd-fighter-resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#crank-ux.pd-duel-view .pd-fighter-resources>.pd-meter:only-child{grid-column:1/-1}
#crank-ux.pd-duel-view .pd-fighter-hud .pd-meter{margin-top:7px}
#crank-ux.pd-duel-view .pd-meter-track{height:6px}
#crank-ux.pd-duel-view .pd-fighter-body{height:280px;position:relative;background:radial-gradient(ellipse at 50% 75%,#4d43352b,transparent 70%)}
#crank-ux.pd-duel-view .pd-fighter-body .cf-avatar{height:280px;width:100%;position:relative;inset:auto;display:block;overflow:hidden;transform:none!important;animation:none!important}
#crank-ux.pd-duel-view .pd-fighter-body .cf-avatar img{display:block;height:100%;width:100%;object-fit:contain;transform:none!important;animation:none!important}
#crank-ux.pd-duel-view .pd-fighter-equipment{position:absolute;inset:0;margin:0;border:0;pointer-events:none}
#crank-ux.pd-duel-view .pd-fighter-equipment summary{display:none}
#crank-ux.pd-duel-view .pd-gear-grid{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;grid-template-rows:repeat(7,34px);gap:5px 0;pointer-events:none}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear{grid-column:1;width:34px;height:34px;aspect-ratio:1;pointer-events:auto;background-color:#0b0d0ddb;box-shadow:inset 0 1px 7px #0009}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(n+8){grid-column:3}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(1),#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(8){grid-row:1}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(2),#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(9){grid-row:2}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(3),#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(10){grid-row:3}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(4),#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(11){grid-row:4}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(5),#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(12){grid-row:5}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(6),#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(13){grid-row:6}
#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(7){grid-row:7}
#crank-ux.pd-duel-view .pd-effect-list{padding:6px 3px;min-height:28px;font-size:10px}
#crank-ux.pd-duel-view .pd-command{align-self:center;min-width:0;padding:20px 15px 12px;border:1px solid #5c4b3280;background:linear-gradient(130deg,#29201633,transparent 40%),#101110;box-shadow:inset 0 0 0 4px #0c0d0d80,inset 0 0 45px #0009;position:relative}
#crank-ux.pd-duel-view .pd-command:before,#crank-ux.pd-duel-view .pd-command:after{content:'◆';position:absolute;left:50%;transform:translateX(-50%);font-size:10px;color:var(--gold);background:#101110;padding:0 9px}
#crank-ux.pd-duel-view .pd-command:before{top:-8px}
#crank-ux.pd-duel-view .pd-command:after{bottom:-7px}
#crank-ux.pd-duel-view .cf-battlecontrols{display:block;padding:0;border:0;background:none}
#crank-ux.pd-duel-view .pd-command-heading{text-align:center;margin-bottom:18px}
#crank-ux.pd-duel-view .pd-command-heading h3{font:21px/1.3 CrankDisplay,Georgia;color:var(--ink);margin:8px 0}
#crank-ux.pd-duel-view .pd-command-target{font-size:10px;color:var(--sub)}
#crank-ux.pd-duel-view .pd-zone-pickers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#crank-ux.pd-duel-view .pd-zone-pickers .cf-kicker{font-size:10px;letter-spacing:1px;margin-bottom:10px;text-align:center}
#crank-ux.pd-duel-view .cf-zonegrid{display:grid;grid-template-columns:1fr;gap:5px}
#crank-ux.pd-duel-view .cf-zonegrid button{height:34px;min-height:34px;font-size:11px;padding:5px;border:1px solid #423b30;background:linear-gradient(135deg,#25221c88,#141512);color:var(--sub);position:relative}
#crank-ux.pd-duel-view .cf-zonegrid button[aria-pressed=true]{border-color:#a4654e;color:#f3d4b9;background:linear-gradient(90deg,#693226,#241b16);box-shadow:inset 2px 0 #bd7654}
#crank-ux.pd-duel-view .cf-zonesblock button[aria-pressed=true]{border-color:#728891;color:#d2e3e9;background:linear-gradient(90deg,#354950,#161f21);box-shadow:inset 2px 0 #9eb8bc}
#crank-ux.pd-duel-view .cf-zonegrid button:disabled{opacity:.5}
#crank-ux.pd-duel-view .cf-turnactions{margin:14px 0 0;display:grid;gap:8px;text-align:center}
#crank-ux.pd-duel-view .cf-turnactions .cf-action{height:47px;min-height:47px;width:100%;font-size:16px;padding:10px 7px;display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(#792f23,#491d18);border-color:#a46746;box-shadow:inset 0 1px #c88c6850,0 3px 12px #0008}
#crank-ux.pd-duel-view .cf-turnactions .cf-action:disabled{opacity:.45}
#crank-ux.pd-duel-view .cf-turnactions kbd{font:11px Arial;color:var(--gold);border:1px solid #b7956940;padding:2px 4px}
#crank-ux.pd-duel-view .cf-turn-hint{font-size:10px;line-height:1.5;min-height:15px}
#crank-ux.pd-duel-view .pd-command-timer{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--sub);padding-top:11px;margin-top:11px;border-top:1px solid var(--line)}
#crank-ux.pd-duel-view .pd-command-timer b{font:18px CrankDisplay,Georgia;color:var(--warm);font-variant-numeric:tabular-nums}
#crank-ux.pd-duel-view .pd-command-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--dim);font-size:9px;margin-top:12px}
#crank-ux.pd-duel-view .pd-command-foot button{font-size:10px;padding:3px}
#crank-ux.pd-duel-view .pd-command .pd-totals{padding:10px 0;border:0;background:none}
#crank-ux.pd-duel-view .pd-command .pd-metrics{gap:20px}
#crank-ux.pd-duel-view .pd-command .pd-metrics strong{font-size:22px}
#crank-ux.pd-duel-view .pd-command .pd-reward-item{display:none}
#crank-ux.pd-duel-view .cf-combat-belt{padding:12px 18px 10px;border-top:1px solid var(--line);background:linear-gradient(#201c1545,#101211)}
#crank-ux.pd-duel-view .cf-belt-head{margin:0 0 9px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#crank-ux.pd-duel-view .cf-belt-head h3{font-size:16px}
#crank-ux.pd-duel-view .cf-belt-head>span{font-size:10px}
#crank-ux.pd-duel-view .pd-battle-belt{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
#crank-ux.pd-duel-view .pd-battle-belt .cf-hotkey{padding:6px 4px;min-height:90px}
#crank-ux.pd-duel-view .pd-battle-belt .cf-hot-art{height:36px;width:36px;margin:auto}
#crank-ux.pd-duel-view .pd-battle-belt .cf-hotkey strong{font-size:10px;margin-top:4px}
#crank-ux.pd-duel-view .pd-battle-belt .cf-hotkey small{font-size:9px}
#crank-ux.pd-duel-view .cf-skill-readout{font-size:10px;margin:8px 0 0;min-height:0;text-align:center}
#crank-ux.pd-duel-view .pd-team-container .pd-teams{padding:10px 18px;max-height:240px;gap:16px}
#crank-ux.pd-duel-view .pd-team-container .pd-teams section>header{top:-10px;padding:5px 0;margin-bottom:5px}
#crank-ux.pd-duel-view .pd-teams h3{font-size:14px}
#crank-ux.pd-duel-view .pd-team-fighters{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:5px}
#crank-ux.pd-duel-view .pd-team-fighter{padding:7px}
#crank-ux.pd-duel-view .pd-team-fighter>span{margin-bottom:4px;font-size:10px}
#crank-ux.pd-duel-view .pd-team-fighter>small{font-size:9px;margin-top:4px}
#crank-ux.pd-duel-view .pd-team-fighter .cf-barlabel{font-size:9px}
#crank-ux.pd-duel-view .pd-chronicle{margin-top:12px;padding:12px 18px}
#crank-ux.pd-duel-view .pd-chronicle>summary{display:flex;justify-content:space-between;gap:10px;color:var(--gold);cursor:pointer;font:16px CrankDisplay,Georgia;list-style:none}
#crank-ux.pd-duel-view .pd-chronicle>summary:before{content:'▸';margin-right:3px}
#crank-ux.pd-duel-view .pd-chronicle[open]>summary:before{content:'▾'}
#crank-ux.pd-duel-view .pd-chronicle>summary span{flex:1}
#crank-ux.pd-duel-view .pd-chronicle>summary small{font:10px Arial;color:var(--sub)}
#crank-ux.pd-duel-view .pd-combat-log{max-height:120px;margin-top:12px;gap:5px;font-size:11px}
@media(min-width:1100px){#crank-ux.pd-duel-view .cf-workspace{grid-template-columns:minmax(0,1fr) 230px;gap:16px}}
@media(max-width:1099px){#crank-ux.pd-duel-view .cf-workspace{display:block}#crank-ux.pd-duel-view #cf-community{display:none}#crank-ux.pd-duel-view .cf-community-toggle{display:inline-flex}#crank-ux.pd-duel-view.cf-community-open #cf-community{display:block;margin-top:16px}#crank-ux.pd-duel-view .pd-fighter-body{height:auto}#crank-ux.pd-duel-view .pd-fighter-body .cf-avatar{height:240px}#crank-ux.pd-duel-view .pd-fighter-equipment{position:static;pointer-events:auto;border-top:1px solid var(--line);margin-top:8px}#crank-ux.pd-duel-view .pd-fighter-equipment summary{display:list-item;padding:8px 0;font-size:10px}#crank-ux.pd-duel-view .pd-gear-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:none;gap:4px;padding-bottom:8px}#crank-ux.pd-duel-view .pd-gear-grid .cf-battle-gear:nth-child(n){grid-column:auto;grid-row:auto;width:100%;height:auto;aspect-ratio:1}}
@media(max-width:700px){#crank-ux.pd-duel-view .pd-arena{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:13px 10px}#crank-ux.pd-duel-view #cf-player-fighter{grid-column:1;grid-row:1}#crank-ux.pd-duel-view #cf-enemy-fighter{grid-column:2;grid-row:1}#crank-ux.pd-duel-view .pd-command{grid-column:1/-1;grid-row:2;padding:16px 13px 10px}#crank-ux.pd-duel-view .pd-fighter-hud{min-height:143px;padding:0 0 8px}#crank-ux.pd-duel-view .pd-fighter-title h2{font-size:20px}#crank-ux.pd-duel-view .pd-fighter-level{height:22px;min-width:22px;font-size:11px}#crank-ux.pd-duel-view .pd-fighter-hud .cf-kicker{font-size:8px;min-height:23px;letter-spacing:.1px}#crank-ux.pd-duel-view .pd-fighter-resources{grid-template-columns:1fr;gap:0}#crank-ux.pd-duel-view .pd-fighter-body .cf-avatar{height:180px}#crank-ux.pd-duel-view .pd-fighter-hud .cf-barlabel{font-size:9px}#crank-ux.pd-duel-view .pd-fighter-equipment summary{font-size:10px}#crank-ux.pd-duel-view .pd-gear-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#crank-ux.pd-duel-view .pd-battle-status{padding:11px 10px;gap:7px}#crank-ux.pd-duel-view .pd-battle-status strong{font-size:15px;width:100%}#crank-ux.pd-duel-view .pd-battle-status [data-phase]{font-size:10px}#crank-ux.pd-duel-view .pd-personal-score{margin-left:auto;font-size:9px}#crank-ux.pd-duel-view .pd-command-heading{margin-bottom:12px}#crank-ux.pd-duel-view .pd-command-heading h3{font-size:21px;margin:5px 0}#crank-ux.pd-duel-view .cf-zonegrid{grid-template-columns:1fr 1fr}#crank-ux.pd-duel-view .cf-zonegrid button{height:37px;font-size:11px}#crank-ux.pd-duel-view .cf-turnactions{margin-top:12px}#crank-ux.pd-duel-view .cf-combat-belt{padding:12px 10px}#crank-ux.pd-duel-view .pd-battle-belt{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#crank-ux.pd-duel-view .pd-battle-belt .cf-hotkey{min-height:92px}#crank-ux.pd-duel-view .cf-belt-head>span{max-width:55%;text-align:right;font-size:9px}#crank-ux.pd-duel-view .pd-team-container .pd-teams{padding:10px;gap:10px;max-height:250px}#crank-ux.pd-duel-view .pd-team-fighters{grid-template-columns:1fr}#crank-ux.pd-duel-view .pd-teams header>span{font-size:9px}#crank-ux.pd-duel-view .pd-chronicle{padding:12px 10px}}
/* Kill announcements sit above the arena without intercepting input. */
#crank-ux .pd-kill-splash{position:fixed;inset:0;z-index:900;pointer-events:none;display:grid;place-items:center;isolation:isolate}
#crank-ux .pd-kill-splash[hidden]{display:none}
#crank-ux .pd-kill-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,#10070724 0,#0b05055e 65%,#08030482);opacity:0}
#crank-ux .pd-kill-banner{position:relative;width:min(850px,98vw);min-height:360px;display:grid;place-items:center;opacity:0;filter:drop-shadow(0 15px 25px #000c)}
#crank-ux .pd-blood-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.95}
#crank-ux .pd-kill-tablet{position:relative;width:78%;min-height:200px;padding:24px 12px 20px;text-align:center;background:linear-gradient(90deg,#0d0b0bdd,#1a1212 24%,#1b1513 75%,#0d0b0bdd);border-top:1px solid #9b765a;border-bottom:1px solid #714b38;box-shadow:inset 0 3px 0 #0009,inset 0 -3px 0 #0009,0 0 35px #000b}
#crank-ux .pd-kill-tablet:before,#crank-ux .pd-kill-tablet:after{content:'';position:absolute;inset:8px;pointer-events:none;border:1px solid #80634449;clip-path:polygon(0 0,25% 0,25% 5%,1% 5%,1% 30%,0 30%,0 0,100% 0,100% 30%,99% 30%,99% 5%,75% 5%,75% 0,100% 0,100% 100%,75% 100%,75% 95%,99% 95%,99% 70%,100% 70%,100% 100%,0 100%,0 70%,1% 70%,1% 95%,25% 95%,25% 100%,0 100%)}
#crank-ux .pd-kill-tablet:after{inset:4px;border-color:#d1a57835}
#crank-ux .pd-kill-emblem{position:absolute;left:50%;top:-36px;transform:translateX(-50%);width:61px;height:61px;border:1px solid #8c7052;background:radial-gradient(#382622,#100d0c);clip-path:polygon(50% 0,95% 20%,95% 73%,50% 100%,5% 73%,5% 20%);display:grid;place-items:center}
#crank-ux .pd-kill-emblem svg{width:46px;height:46px;fill:#151110;stroke:#c3a786;stroke-width:1.8;stroke-linejoin:round}
#crank-ux .pd-kill-kicker{display:block;color:#ab8c72;font:10px/1.4 Arial;letter-spacing:3.5px;text-transform:uppercase;margin:7px 0 12px}
#crank-ux .pd-kill-title{display:block;color:#eed7b8;font:clamp(30px,5.5vw,64px)/1.05 CrankDisplay,Georgia,serif;text-transform:uppercase;letter-spacing:2px;text-shadow:0 2px #3c1f14,0 4px 15px #000,0 0 24px #bb453b40}
#crank-ux .pd-kill-divider{display:flex;justify-content:center;align-items:center;gap:12px;color:#96664a;margin:14px auto 9px;font-size:9px}
#crank-ux .pd-kill-divider i{height:1px;width:80px;background:linear-gradient(90deg,transparent,#956b49)}
#crank-ux .pd-kill-divider i:last-child{transform:rotate(180deg)}
#crank-ux .pd-kill-subtitle{display:block;color:#cbb29c;font:11px/1.5 Arial;letter-spacing:2px;text-transform:uppercase}
#crank-ux .pd-kill-spree{display:block;color:#b56b53;font:11px/1.5 CrankDisplay,Georgia;letter-spacing:2px;text-transform:uppercase;margin-top:6px}
#crank-ux .pd-kill-tally{display:flex;justify-content:center;gap:7px;margin-top:14px}
#crank-ux .pd-kill-tally i{width:3px;height:14px;background:linear-gradient(#cc7050,#7c251c);transform:rotate(17deg);box-shadow:1px 0 #d2a07c40}
#crank-ux .pd-kill-splash[data-tier="5"] .pd-kill-title{color:#f2c5a5;text-shadow:0 2px #7c1d15,0 0 30px #cf311b70}
#crank-ux .pd-kill-splash.is-playing .pd-kill-banner{animation:pd-kill-impact 3.2s cubic-bezier(.15,.7,.2,1) both}
#crank-ux .pd-kill-splash.is-playing .pd-kill-veil{animation:pd-kill-shade 3.2s ease both}
#crank-ux .pd-kill-splash.is-playing .pd-blood-art{animation:pd-blood-spread .42s cubic-bezier(.15,.7,.2,1) both}
@keyframes pd-kill-impact{0%{opacity:0;transform:scale(1.13)}8%{opacity:1;transform:scale(.985)}15%,79%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-12px) scale(.985)}}
@keyframes pd-kill-shade{0%,100%{opacity:0}10%,76%{opacity:1}}
@keyframes pd-blood-spread{from{transform:scale(.75);opacity:.4}to{transform:scale(1);opacity:1}}
@media(max-width:650px){#crank-ux .pd-kill-banner{min-height:280px}#crank-ux .pd-kill-tablet{width:88%;padding:24px 8px 17px;min-height:174px}#crank-ux .pd-kill-title{font-size:clamp(26px,8.2vw,44px);letter-spacing:.6px}#crank-ux .pd-kill-kicker{font-size:8px;letter-spacing:1.5px}#crank-ux .pd-kill-subtitle{font-size:9px;letter-spacing:1px}#crank-ux .pd-kill-spree{font-size:9px;letter-spacing:1px}#crank-ux .pd-blood-art{width:135%;left:-17.5%}}
@media(prefers-reduced-motion:reduce){#crank-ux .pd-kill-splash.is-playing .pd-kill-banner{animation:none;opacity:1;transform:none}#crank-ux .pd-kill-splash.is-playing .pd-kill-veil{animation:none;opacity:.7}#crank-ux .pd-kill-splash.is-playing .pd-blood-art{animation:none}}

#crank-ux.pd-duel-view .cf-combat-shell,#crank-ux.pd-duel-view .cf-battlelog{max-width:none;width:100%;margin-left:0;margin-right:0}
#crank-ux .pd-kill-splash[data-tier="5"] .pd-blood-art{filter:drop-shadow(0 0 7px #7d140f66)}
#crank-ux.pd-duel-view .pd-fighter-body .cf-avatar,#crank-ux.pd-duel-view .pd-fighter-body .cf-avatar img{pointer-events:none;z-index:0}
#crank-ux.pd-duel-view .pd-fighter-equipment{z-index:2}

/*
 * Слой поверх дизайн-системы из прототипа (crank-ui.css).
 *
 * Прототип — одностраничное приложение: вся навигация там кнопками, а
 * экраны перерисовываются в JS. В настоящей игре переходы между разделами —
 * обычные ссылки на отдельные страницы, поэтому здесь ссылкам раздаются те
 * же роли, что в прототипе были у кнопок. Правила прототипа не трогаем:
 * этот файл идёт после него и только дополняет.
 */

/*
 * Сама страница. В прототипе это было отдельным стилем в <head>, рядом с
 * подключением дизайн-системы, — у него единственная задача убрать поля
 * body по умолчанию (иначе вокруг интерфейса остаётся светлая рамка в
 * восемь пикселей) и залить фон до краёв окна.
 */
html,
body {
    margin: 0;
    background: #0d0e0f;
}

body {
    min-width: 320px;
}

#crank-ux .cf-top {
    min-height: 50px;
}

/* Навигация ссылками вместо кнопок. */
#crank-ux .cf-nav a {
    display: flex;
    align-items: center;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 0 14px;
    font-size: 12px;
    color: #a7aeae;
    text-decoration: none;
    transition: color .18s, background .18s, border-color .18s;
}

#crank-ux .cf-nav a:hover,
#crank-ux .cf-nav a:focus {
    color: #e3d7bc;
    background: #e5d3a80a;
    text-decoration: none;
}

#crank-ux .cf-nav a[aria-current="page"] {
    color: #dfccb0;
    border-bottom-color: #c6a376;
    background: linear-gradient(0deg, #b2946021, transparent);
}

#crank-ux .cf-brand,
#crank-ux .cf-brand:hover,
#crank-ux .cf-brand:focus {
    text-decoration: none;
    color: inherit;
}

/*
 * Вкладки ссылками. В прототипе вкладки переключают экран на месте, а в
 * игре «Товары хранителя» и «Продать своё» — разные страницы.
 */
#crank-ux .cf-tabs a {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 16px 4px 13px;
    color: #99a3a4;
    font: 12px 'CrankDisplay', Georgia;
    letter-spacing: 1px;
    text-decoration: none;
}

#crank-ux .cf-tabs a[aria-current="page"] {
    color: #decdb0;
    border-bottom-color: #b69965;
}

#crank-ux .cf-tabs a:hover {
    color: #e4d8c2;
    text-decoration: none;
}

/* Категории лавки — те же чипсы, только ссылками. */
#crank-ux a.cf-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

#crank-ux a.cf-chip:hover {
    text-decoration: none;
}

/* Текстовая кнопка-ссылка: тот же вид, что у .cf-textbutton. */
#crank-ux a.cf-textbutton,
#crank-ux a.cf-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#crank-ux a.cf-textbutton:hover,
#crank-ux a.cf-action:hover {
    text-decoration: none;
}

/* В дереве разделов лавки прототип раскладывал кнопки в столбик — ссылкам
   нужны те же правила, они там вместо кнопок. */
#crank-ux .pd-category-tree a.cf-textbutton {
    display: block;
    padding: 6px 10px;
    text-align: left;
    width: 100%;
}

/* Вложенная ветка (раздел → группа → категория) отступает от родителя,
   иначе три уровня читаются как один список. */
#crank-ux .pd-category-tree details details {
    padding-left: 10px;
    border-top: 0;
}

/* Открытая категория подсвечена так же, как выбранная точка на карте. */
#crank-ux .pd-category-tree a.cf-textbutton[aria-current="page"] {
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    color: var(--warm);
}

@media (max-width: 900px) {
    #crank-ux .cf-nav a {
        min-height: 44px;
        padding: 8px 3px;
        font-size: 11px;
        justify-content: center;
    }
}

/*
 * Иконки вещей. В прототипе .cf-itemart — <span> с фоном из спрайт-листа,
 * и ячейка листа заполняет плитку целиком; в игре у каждой вещи своя
 * картинка, поэтому внутри плитки живёт <img>. Режим наложения из прототипа
 * здесь не нужен: он осветлял тёмный фон ячейки, а у наших PNG фон
 * прозрачный, и от lighten они только выцветают.
 *
 * Размер. У картинок вещей прозрачные поля срезаны ещё при импорте (см.
 * App\Equipment\ItemArt), поэтому рисунок честно вписывается в плитку без
 * подобранных на глаз scale(). Отступ — те же поля, что у рисунков в
 * ячейках листа: эталон — зелье, нарезанное из того же листа (ячейка 14),
 * у него бутыль занимает 177 из 192 пикселей по высоте, то есть 92.2%
 * ячейки, по 3.9% на сторону. Процент в padding берётся от ширины плитки,
 * так что поля одинаковы при любом её размере.
 *
 * transform в покое не задаём: увеличение при наведении (scale(1.09) в
 * дизайн-системе) должно приближать вещь, а transform не складывается —
 * любой масштаб здесь оно бы просто заменило.
 */
#crank-ux img.cf-itemart,
#crank-ux .cf-detailicon img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 3.9%;
    object-fit: contain;
    object-position: center;
    background: none;
    mix-blend-mode: normal;
}

/*
 * Отражение двуручного оружия (.pd-mirror) развёрнуто через scaleX(-1), и
 * правило наведения из дизайн-системы, заменив transform, развернуло бы
 * клинок обратно. Держим отражение и при наведении.
 */
#crank-ux .pd-mirror .cf-tile:hover .cf-itemart,
#crank-ux .pd-mirror .cf-tile:focus-visible .cf-itemart {
    transform: scale(-1.09, 1.09);
}

@media (prefers-reduced-motion: reduce) {
    #crank-ux .pd-mirror .cf-tile:hover .cf-itemart,
    #crank-ux .pd-mirror .cf-tile:focus-visible .cf-itemart {
        transform: scaleX(-1);
    }
}

/*
 * Фиксированную сетку из шести рядов заменяем на ряды по содержимому —
 * дизайн-система рассчитывала шесть строк на квадратные плитки, а плиток
 * то тринадцать на две колонки, то, после переноса колец и амулета на
 * фигуру, пять на колонку своего вытянутого размера.
 *
 * align-content: start, не space-between. У .cf-hero своя фиксированная
 * высота (дизайн-система, по брейкпоинтам), у колонки — высота по пяти
 * вытянутым плиткам; чем шире экран, тем чаще колонка длиннее фигуры.
 * space-between в этом случае раздвигал слоты на всю лишнюю высоту сцены,
 * заметными пустыми разрывами между ними. start держит слоты вместе, а
 * лишняя высота (если она есть) остаётся под ними, а не между ними.
 */
#crank-ux .pd-hero .cf-equips {
    grid-template-rows: none;
    grid-auto-rows: min-content;
    align-content: start;
    /* У дизайн-системы зазор между слотами на части брейкпоинтов заметно
       больше (там он считался на шесть-семь квадратных плиток) — на пяти
       вытянутых это разгоняло колонку намного выше самой фигуры. */
    gap: 6px;
}

/*
 * Вытянутые слоты — по образцу референса заказчика (Diablo IV): плитка
 * там заметно выше, чем шире, а не квадратная. Соотношение 3:4 снято со
 * скриншота на глаз.
 *
 * Дизайн-система по-разному задаёт размер плитки в разных местах:
 *   - у кукол (.cf-equips .cf-tile) явный width+height в пикселях на
 *     каждой брейкпоинте — переопределяем высоту через height:auto и
 *     aspect-ratio, ширину не трогаем, чтобы её собственная адаптивность
 *     под узкие экраны осталась как была;
 *   - в сетках (.cf-grid .cf-tile — рюкзак и прилавок) высоты нет вовсе,
 *     она и так считается по aspect-ratio:1 из базового .cf-tile — здесь
 *     просто меняем это отношение.
 */
#crank-ux .cf-equips .cf-tile {
    height: auto;
    aspect-ratio: 3 / 4;
}

/*
 * Высота сцены остаётся фиксированной, как в дизайн-системе: пять
 * содержательных рядов помещаются в неё без обрезания, а удалённые
 * пустые ряды больше не раздувают сцену и не прижимают героя к низу.
 * overflow:hidden сохраняет крупный портрет внутри рамки.
 */
#crank-ux .pd-hero .cf-stage {
    height: 550px;
    /* Сохраняем утверждённые боковые поля вокруг центрированных слотов. */
    grid-template-columns: 92px minmax(0, 1fr) 92px;
}

/* Все рамки в колонках имеют одинаковые ширину и высоту. */
#crank-ux .cf-equips .cf-tile {
    width: 68px;
}

/*
 * Кольца и амулет — плавающие слоты прямо на фигуре героя, а не в общей
 * колонке: амулет у горла, кольца на уровне рук. .cf-hero становится
 * позиционирующим родителем для них.
 *
 * pointer-events:none на обёртке и none же на пустых полях вокруг плитки
 * (сама плитка — button/div заданного размера) нужны, чтобы прозрачный
 * зазор между тремя плавающими слотами не перекрывал клики по остальной
 * фигуре и по .cf-arch (декоративная арка) под ней.
 */
#crank-ux .cf-hero {
    position: relative;
}

#crank-ux .pd-hero-slots {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

#crank-ux .pd-hero-slots .cf-equipped {
    position: absolute;
    width: 15%;
    pointer-events: auto;
}

#crank-ux .pd-hero-slots .cf-tile {
    height: auto;
    aspect-ratio: 3 / 4;
}

/* Аксессуары обрамляют фигуру, не перекрывая лицо и корпус. */
#crank-ux .pd-slot-amulet {
    top: -5%;
    right: 1%;
}

#crank-ux .pd-slot-ring-left {
    top: calc(62% - 30px);
    left: 2%;
}

#crank-ux .pd-slot-ring-right {
    top: calc(62% - 30px);
    right: 1%;
}

/* Мобильные копии аксессуаров на широких экранах не участвуют в раскладке. */
#crank-ux .pd-mobile-accessory {
    display: none;
}

/*
 * На телефоне десктопные размеры не масштабируются пропорционально:
 * колонки сужаются, но слоты сохраняют удобную для нажатия ширину, а
 * аксессуары получают собственный ограниченный размер вместо 15% от
 * узкой центральной колонки.
 */
@media (max-width: 650px) {
    #crank-ux .pd-hero .cf-stage {
        height: 500px;
        grid-template-columns: 54px minmax(0, 1fr) 54px;
    }

    #crank-ux .pd-hero .cf-hero {
        height: 420px;
    }

    #crank-ux .pd-hero .cf-equips .cf-tile {
        width: 47px;
        height: auto;
        aspect-ratio: 3 / 4;
    }

    #crank-ux .pd-hero .cf-equips {
        gap: 4px;
    }

    /* Справа на один аксессуар меньше: сдвиг выравнивает кольца и оружие
       в двух колонках, оставляя амулет отдельным рядом под шлемом. */
    #crank-ux .pd-hero .cf-stage > .cf-equips:last-child {
        padding-top: 67px;
    }

    #crank-ux .pd-hero-slots {
        display: none;
    }

    #crank-ux .pd-hero .pd-mobile-accessory {
        display: flex;
    }
}

#crank-ux .cf-grid .cf-tile {
    aspect-ratio: 3 / 4;
}

/* Рюкзак шире куклы, но это не повод увеличивать сам предмет.
 * Внутренняя рамка повторяет область картинки в слоте 68 x 90.667:
 * вычитаем две границы по 1px и padding по 3px. Процентные поля img
 * теперь считаются от этой рамки, как на кукле, а не от большой ячейки.
 * На узкой ячейке картинка может уменьшиться, но никогда не обрезается. */
#crank-ux .pd-inventory-art {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#crank-ux .pd-inventory .pd-item-equipment:not(.pd-item-jewelry) .pd-inventory-art {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(calc(100% - 10px), 60px);
    height: min(calc(100% - 10px), 82.667px);
}

/* Оружие и предметы левой руки используют те же 1% поля, что в кукле. */
#crank-ux .pd-inventory .pd-item-hand img.cf-itemart {
    padding: 1%;
}

@media (max-width: 650px) {
    #crank-ux .pd-inventory .pd-item-equipment:not(.pd-item-jewelry) .pd-inventory-art {
        width: min(calc(100% - 10px), 39px);
        height: min(calc(100% - 10px), 54.667px);
    }
}

/* Украшения в рюкзаке и лавке сохраняют компактный масштаб слотов куклы,
 * а не растягиваются вместе с более крупной ячейкой. */
#crank-ux .pd-inventory .pd-item-jewelry img.cf-itemart,
#crank-ux .pd-shop-grid .pd-item-jewelry img.cf-itemart {
    position: absolute;
    inset: 0;
    margin: auto;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    max-width: 40px;
    max-height: 40px;
    padding: 0;
}

/* На прилавке под рисунком остаётся место для цены, в том числе на телефоне. */
#crank-ux .pd-shop-grid .pd-item-jewelry img.cf-itemart {
    bottom: 18px;
    height: calc(100% - 34px);
}

/*
 * Оружие в руках — крупнее остальных слотов куклы, тоже по референсу:
 * там оно ещё и физически больше соседних ячеек, но менять размер именно
 * этих двух плиток в общей сетке колонки сложнее, чем кажется (поехала бы
 * вся колонка). Ограничиваемся тем, что просили дословно — «чуть
 * увеличенным»: поля вокруг рисунка у правой/левой руки уже, чем у
 * прочих вещей (3.9% против 1%), поэтому клинок в руке заметно крупнее.
 *
 * Слот получает [data-slot] из slotId компонента Item.vue; отражение
 * двуручного оружия во второй руке слота не меняет (оно тоже slot-id="1"
 * — вещь одна на обе руки), поэтому оно взято отдельно через .pd-mirror.
 */
#crank-ux .cf-equips .cf-tile[data-slot="1"] img.cf-itemart,
#crank-ux .cf-equips .cf-tile[data-slot="12"] img.cf-itemart,
#crank-ux .pd-mirror .cf-tile img.cf-itemart {
    padding: 1%;
}

/*
 * Плитка снаряжения на арене. В прототипе внутри лежал <span> с фоном, и
 * его растягивал inset; у картинки же при width/height:auto побеждает
 * собственный размер файла — поэтому размер задаём явно.
 */
#crank-ux .cf-battle-gear img.cf-itemart {
    position: absolute;
    inset: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

/* То же самое для иконок приёмов в боевом поясе. */
#crank-ux .cf-hot-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
 * Вкладки правой колонки персонажа: «Характеристики», «Умения»,
 * «Мастерство». Ритм задаёт .cf-statgroup из дизайн-системы, здесь —
 * только то, чего в ней нет.
 *
 * Пояснения абзацем (.cf-note) стоят между строками свойств, а у класса
 * нет ни отступов, ни межстрочного интервала — он рассчитан на подпись
 * внутри строки. Отбиваем только абзацы, не трогая `span.cf-note`
 * («вместо 10-12») и `small.cf-note` («— в руке»).
 */
#crank-ux .cf-stats p.cf-note {
    margin-top: 10px;
    line-height: 1.6;
}

/*
 * .pd-refusal рассчитан на отдельный абзац и несёт margin: 12px 0. В
 * строке свойства («Владение — нет») это флекс-элемент, и margin уводил
 * значение вниз, разрывая строку надвое.
 */
#crank-ux .cf-statrow .pd-refusal {
    margin: 0;
}

/*
 * Двойная рамка на чипе участника.
 *
 * Дизайн-система оформляет чипы правилами вида
 * `.pd-event-participants span` и `.pd-participant-slots span` — в
 * прототипе внутри чипа лежал только текст, и вложенных span не было.
 * У нас в чип вложен paperdoll, а внутри него — ещё один span со ссылкой
 * на ник. Он попадает под тот же селектор и получает вторую рамку с
 * собственными полями поверх первой.
 *
 * Снимаем оформление с вложенного span, не трогая сам чип.
 */
#crank-ux .pd-event-participants .paperdoll-anchor > span,
#crank-ux .pd-participant-slots .paperdoll-anchor > span {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
}

/*
 * Конец поединка (battle.html).
 *
 * Крупная надпись в середине арены в конце боя называет исход — «Победа»,
 * «Поражение», «Ничья», — а не безличное «Конец». Цвет задаём селектором
 * той же силы, что и правило дизайн-системы `.cf-versus b`: одиночный
 * класс его не перебивает.
 */
#crank-ux .cf-versus b.pd-result-win { color: var(--green); }
#crank-ux .cf-versus b.pd-result-loose { color: var(--danger); }
#crank-ux .cf-versus b.pd-result-draw { color: var(--sub); }

/*
 * Средняя колонка арены рассчитана на «VS» — 80px на широком экране. Слово
 * исхода туда не влезает, а `overflow-wrap: anywhere` из дизайн-системы
 * рвёт его посреди слога: «Поб / еда». Бой уже кончился, и колонкам бойцов
 * лишние 120px не нужны, поэтому на итоговом экране середину расширяем, а
 * слово оставляем целым.
 *
 * На телефонах статус и исход вынесены на всю ширину под бойцами — см.
 * мобильные правила ниже. На промежуточных ширинах остаётся колонка.
 */
@media (min-width: 900px) {
    #crank-ux .cf-battlearena.pd-arena-over {
        grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
    }

    #crank-ux .cf-versus b[class*="pd-result-"] {
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: normal;
        word-break: keep-all;
        hyphens: none;
    }
}

/*
 * Сетка зон удара и защиты в конце боя исчезает, и на всю ширину остаётся
 * одна кнопка «Новый поединок» — колонок здесь одна, а не три, как во
 * время боя.
 */
#crank-ux .cf-battlecontrols.pd-battle-over {
    grid-template-columns: 1fr;
    justify-items: center;
}

#crank-ux .cf-battlecontrols.pd-battle-over .cf-turnactions {
    text-align: center;
    justify-items: center;
}

/*
 * Значок наложенного эффекта.
 *
 * В дизайн-системе `.cf-fighter img` — это фигура бойца: 100% ширины и
 * 225px высоты. В прототипе внутри карточки картинка и была ровно одна,
 * всё остальное (снаряжение, значки) рисовалось фоном. У нас эффект —
 * обычный <img width="18" height="18">, он попадал под то же правило и
 * раздувался во весь блок, разваливая арену.
 *
 * Размер берём тот же, что в разметке, и запрещаем флексу растягивать
 * значок: .pd-effect — флекс-контейнер.
 */
#crank-ux .pd-effect img {
    width: 18px;
    height: 18px;
    flex: none;
    object-fit: contain;
}

/*
 * Та же болезнь у иконки применённой способности в боевом логе: файлы в
 * public/images/abilities — квадраты от 120 до 512px, а у .log-ability не
 * было ни одного правила размера, так что <img> разворачивалась в свой
 * натуральный размер прямо посреди 12px-строки лога. Иконка инлайновая
 * (соседствует с текстом "применил"), поэтому вместо flex:none — vertical-align.
 */
#crank-ux .log-ability {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    object-fit: contain;
}

/*
 * Баффы/дебафы бойца в составе поединка (.pd-team-fighter): те же иконки
 * эффектов, что и .pd-effect на дуэльной карточке, но по правому краю
 * строки, а не в общем флекс-потоке — своё правило размера по той же
 * причине (файлы public/images/effects/*.gif без CSS расползаются).
 */
#crank-ux .pd-roster-status { display:flex; align-items:center; gap:10px; padding:8px 24px; color:var(--sub); font-size:11px; }
#crank-ux .pd-roster-loading { padding:18px 24px; color:var(--sub); font-size:12px; }
#crank-ux .pd-fighter-name { font-size:12px; font-weight:bold; overflow-wrap:anywhere; margin-bottom:9px; }
#crank-ux .pd-fighter-hp { display:flex; justify-content:space-between; gap:6px; font-size:10px; margin-bottom:4px; color:var(--sub); }
#crank-ux .pd-fighter-hp strong { color:var(--ink); font-weight:normal; font-variant-numeric:tabular-nums; white-space:nowrap; }

/*
 * Полоска здоровья в составе боя — ещё и кнопка куклы (BattleRoster.vue).
 * .paperdoll рассчитан на ник в строке (inline-block), здесь он должен
 * занимать всю ширину карточки. Подсказка, что по полоске можно нажать, —
 * подсветка на наведении и рамка фокуса с клавиатуры.
 */
#crank-ux .paperdoll.pd-fighter-status,
#crank-ux .pd-fighter-status .paperdoll-anchor { display:block; }
#crank-ux .pd-fighter-status .paperdoll-anchor { margin:-4px; padding:4px; }
#crank-ux .pd-fighter-status .paperdoll-anchor:hover .pd-fighter-hp span,
#crank-ux .pd-fighter-status .paperdoll-anchor:focus .pd-fighter-hp span { color:var(--gold); }
#crank-ux .pd-fighter-status .paperdoll-anchor:focus-visible { outline:1px solid var(--gold); outline-offset:0; }
#crank-ux .pd-fighter-status .paperdoll-anchor:hover .pd-fighter-name,
#crank-ux .pd-fighter-status .paperdoll-anchor:focus .pd-fighter-name { color:var(--gold); }

/* Одна «Показать ещё N» под обеими командами в большом бою: продолжает
   блок составов (тот же фон), отделена от него линией. */
#crank-ux .pd-roster-more { display:block; width:100%; margin:0; padding:11px 0 14px; background:var(--deep); border-top:1px solid var(--line); text-align:center; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
#crank-ux .pd-team-fighter .pd-meter-fill { background:#a44843; }
#crank-ux .pd-fighter-effects { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:8px; }
#crank-ux .pd-fighter-effect { display:inline-flex; align-items:center; gap:4px; color:var(--ink); }
#crank-ux .pd-fighter-effect img { display:block; width:20px; height:20px; flex:none; object-fit:contain; }
#crank-ux .pd-fighter-effect small { font-size:10px; font-variant-numeric:tabular-nums; }
#crank-ux .pd-fighter-effect:focus-visible { outline:1px solid var(--gold); outline-offset:3px; }
#crank-ux .pd-team-fighter .pd-fighter-no-effects { margin-top:8px; }
#crank-ux .pd-team-fighter.pd-dead { opacity:.7; }
#crank-ux .pd-dead .pd-fighter-name { text-decoration:line-through; }
@media (max-width:650px) {
    #crank-ux .pd-roster .pd-teams { padding:14px 10px; gap:10px; }
    #crank-ux .pd-roster .pd-team-fighters { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { #crank-ux .pd-roster .pd-meter-fill { transition:none; } }

/*
 * abilities-list вставляет свои кнопки в общий .cf-hotbar (см. Battle.vue
 * и её собственный комментарий) — сам оборачивающий div из грид-раскладки
 * убираем, иначе он занимает одну ячейку сетки целиком, и все приёмы
 * складываются друг на друга в ней вместо того, чтобы встать в общий ряд
 * с зельями.
 */
#crank-ux .cf-hotbar > .pd-belt-abilities {
    display: contents;
}

/* Пустая плитка не должна реагировать на наведение, как занятая. */
#crank-ux .cf-tile.empty:hover {
    border-color: #444c48;
    box-shadow: none;
}

/*
 * Меню действий с вещью. В прототипе оно открывается модальным окном; в
 * игре меню висит у самой плитки — так ближе к тому, как это работало
 * раньше, и не перекрывает рюкзак целиком.
 */
#crank-ux .pd-context-floating {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    min-width: 150px;
    display: grid;
    gap: 2px;
    padding: 6px;
    background: var(--pane);
    border: 1px solid var(--gold);
    box-shadow: 0 12px 30px #000a;
    text-align: left;
}

#crank-ux .pd-context-floating .cf-textbutton {
    display: block;
    width: 100%;
    padding: 7px 9px;
    text-align: left;
    cursor: pointer;
}

/* Вехи уровня на полосе опыта. */
#crank-ux .pd-xp > div {
    position: relative;
}

#crank-ux .pd-xp-milestone {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 7px;
    background: var(--edge);
    text-decoration: none;
}

/*
 * Карточка класса. В прототипе описание было в две строки, у настоящих
 * классов это целая страница лора — в карточке показываем начало, полный
 * текст разворачивается под сеткой для выбранного пути.
 */
#crank-ux .pd-class-portrait {
    display: block;
    width: 100%;
    max-width: 200px; /* портрет в рост 2:3, как скин персонажа */
    height: auto;
    margin: 0 0 16px;
    border: 0;
    border-radius: 0;
}
@media (max-width: 650px) {
    #crank-ux .pd-class-portrait { max-width: 150px; margin-bottom: 12px; }
}
#crank-ux .pd-class p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Широкая рабочая область — для поединка. В прототипе то же самое делает
 * .pd-duel-view, но он заодно перестраивает зоны удара под свою арену, а
 * арену мы берём из battle.html, где они стоят в два столбца.
 */
/*
 * Страницы без панели игроков (выбор персонажа, выбор класса, поединок,
 * подземелье). В прототипе render() просто не рисует правую колонку, и
 * рабочая область занимает всю ширину — здесь то же самое, но решает это
 * секция no_community в шаблоне страницы.
 */
#crank-ux.pd-solo .cf-workspace { display: block; }
#crank-ux.pd-solo #cf-community { display: none; }

#crank-ux.pd-wide .cf-main {
    max-width: 1920px;
    padding-top: 18px;
}

#crank-ux.pd-wide .cf-pagehead {
    margin-bottom: 18px;
}

#crank-ux.pd-wide #cf-title {
    font-size: 30px;
}

/* Внутри поединка сразу показываем арену, без общей шапки страницы. */
body.duel #crank-ux .cf-pagehead { display: none; }

/*
 * Колокольчик уведомлений. В прототипе это иконка со счётчиком, здесь под
 * ней живёт Vue-компонент <activity> со своей панелью, поэтому нужен
 * контейнер с позиционированием.
 */
#crank-ux .pd-notice-host {
    position: relative;
    display: flex;
}

#crank-ux .pd-notice-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--pane);
    border: 1px solid var(--edge);
    box-shadow: 0 18px 40px #000a;
    z-index: 40;
    padding: 6px 0;
}

#crank-ux .pd-notice-panel h3 {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    padding: 10px 14px;
    margin: 0;
}

#crank-ux .pd-notice-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow: auto;
}

#crank-ux .pd-notice-panel li {
    padding: 10px 14px;
    border-top: 1px solid var(--edge);
    font-size: 12px;
    color: var(--ink);
}

#crank-ux .pd-notice-panel .pd-notice-foot {
    border-top: 1px solid var(--edge);
    padding: 9px 14px;
    text-align: center;
}

#crank-ux .pd-notice-empty {
    padding: 14px;
    color: var(--sub);
    font-size: 12px;
}

/*
 * Карта мира. Рамка, подложка, дороги и метки — целиком из прототипа
 * (.pd-map-viewport / .cf-map-pin, они в дизайн-системе). Здесь только то,
 * чего в прототипе не было: подписи морей, курсор идущего игрока и мелкие
 * поправки под настоящую карту, где меток восемь и стоят они плотнее.
 */
#crank-ux .pd-map-viewport { cursor: grab; background: #9a8662; container-type: inline-size; }
#crank-ux .pd-map-viewport.is-grabbing { cursor: grabbing; }
#crank-ux .cf-atlas-layout.pd-city-view { display: block; max-width: none; width: 100%; }
#crank-ux .pd-building-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 20px; padding: 0; border: 0; }
#crank-ux .pd-building-list [aria-pressed="true"] { color: var(--gold); text-decoration: underline; }
#crank-ux .pd-map-viewport.is-grabbing .cf-map-pin { pointer-events: none; }

/* Моря на карте есть, но зайти в них нельзя: это надпись поверх воды,
   а не метка — по ней не кликают и её не выбирают. */
#crank-ux .pd-map-sea {
    position: absolute;
    left: var(--px);
    top: var(--py);
    transform: translate(-50%, -50%);
    font: 2.1cqw 'CrankDisplay', Georgia, serif;
    letter-spacing: .12em;
    color: #3c4a56;
    opacity: .75;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 1px 0 #f0e4c880;
}

/* Дорога, по которой игрок идёт прямо сейчас, и он сам на ней. */
#crank-ux .pd-roads path.pd-route { stroke: #b35e20; stroke-width: .45; stroke-dasharray: none; }
#crank-ux .pd-roads circle.pd-traveller { fill: #f3ddaa; filter: drop-shadow(0 0 2px #fff8); }

/* У кромки карты подпись метки уезжает за границу — прижимаем внутрь.
   Слаги те же, что в таблице locations. */
#crank-ux .cf-map-pin[data-place="hrebet"] .cf-pin-label,
#crank-ux .cf-map-pin[data-place="gavan"] .cf-pin-label { left: auto; right: 0; transform: none; }
#crank-ux .cf-map-pin[data-place="fort-zakata"] .cf-pin-label,
#crank-ux .cf-map-pin[data-place="pik"] .cf-pin-label { left: 0; transform: none; }

/* Вольные земли: та же метка, но тревожной каймой — danger из прототипа. */
#crank-ux .cf-map-pin.danger .cf-pin-core { border-color: #a6564a; }

/*
 * Экран прибытия. Сама сцена — .cf-townscene из прототипа, здания на ней —
 * .cf-town-pin; здесь только то, чего в прототипе не было: видео вместо
 * картинки и кнопка «Пропустить» поверх ролика.
 */
#crank-ux .cf-townscene > video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#crank-ux .world-map__scene-skip {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    padding: 8px 16px;
    background: #000000b0;
    color: var(--ink);
    border: 1px solid var(--edge);
    font-size: 12px;
}

/* Метки зданий — ссылки, а не кнопки: они ведут в лавку, на арену и в
   подземелье обычными переходами. */
#crank-ux a.cf-town-pin { text-decoration: none; }
#crank-ux a.cf-town-pin:hover { text-decoration: none; }

/*
 * Карточка игрока по нику. Раньше её показывал поповер Bootstrap в общем
 * контейнере #paperdoll-popover; теперь панель живёт внутри самого
 * компонента и позиционируется относительно ника.
 */
#crank-ux .paperdoll {
    position: relative;
    display: inline-block;
}

#crank-ux .paperdoll-anchor,
#crank-ux .paperdoll-anchor:hover,
#crank-ux .paperdoll-anchor:focus {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/*
 * Карточка стоит по координатам ника (их считает place() в Paperdoll.vue),
 * а не внутри его контейнера: у списка игроков и у панелей overflow, и
 * absolute-карточку они обрезали. Слой — fixed в корне #crank-ux, выше
 * панелей (z-index до 60), но ниже гибели от стражи и модальных окон.
 */
#crank-ux .pd-profile-pop {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 800px;
    max-width: calc(100vw - 16px);
    overflow-y: auto;
}

#crank-ux .pd-profile-card {
    box-shadow: 0 18px 50px #000b;
}

/*
 * Шапка карточки. В дизайн-системе .cf-panelhead рассчитан на широкую
 * панель персонажа: 110px отступа по бокам под уголки рамки и значок
 * уровня. В компактном окне имени оставалось меньше половины, оно
 * лезло в две строки, а кнопка закрытия вставала вплотную к нему.
 * Здесь поля уже, а кнопка вынесена в угол — заголовок остаётся по
 * центру всей ширины и ни с чем не спорит.
 */
#crank-ux .pd-profile-card > .cf-panelhead {
    min-height: 0;
    padding: 18px 46px 16px;
}

#crank-ux .pd-profile-card > .cf-panelhead h2 {
    font-size: 25px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

#crank-ux .pd-profile-card > .cf-panelhead > .pd-icon-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

#crank-ux .pd-profile-loading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px 0;
}

#crank-ux .pd-profile-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(180px, 1fr);
    /* Колонки разной высоты — прижимаем к верху, иначе полоса здоровья
       и первая строка характеристик расходятся по вертикали. */
    align-items: start;
    gap: 18px;
    padding: 18px 20px 20px;
}

/*
 * Компактная кукла имеет собственную раскладку, независимую от ширины
 * основного экрана. Все 13 слотов — в двух колонках, без крошечных
 * плавающих аксессуаров. Семь рядов по 74.667px + шесть зазоров по 6px.
 */
#crank-ux .pd-profile-body .cf-stage {
    height: 559px;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    gap: 6px;
    padding: 0;
}

#crank-ux .pd-profile-body .cf-equips {
    grid-template-rows: none;
    grid-auto-rows: min-content;
    align-content: start;
    gap: 6px;
    padding: 0;
}
#crank-ux .pd-profile-body .cf-stage > .cf-equips:last-child { padding-top: 80.667px; }
#crank-ux .pd-profile-body .cf-equips .cf-tile { width: 56px; height: 74.667px; }
#crank-ux .pd-profile-body .cf-equipped > span { display: none; }
#crank-ux .pd-profile-body .cf-hero { height: 520px; align-self: center; }
#crank-ux .pd-profile-body .cf-hero > img { width: 150%; height: 100%; object-fit: contain; }
#crank-ux .pd-profile-body .pd-hero-slots { display: none; }
#crank-ux .pd-profile-body .pd-mobile-accessory { display: flex; }
#crank-ux .pd-profile-body > div { min-width: 0; }
#crank-ux .pd-profile-body .cf-statrow { gap: 12px; }
#crank-ux .pd-profile-body .cf-statrow b { text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* Полоса здоровья над куклой — отбиваем, иначе она липнет к сцене. */
#crank-ux .pd-profile-body .pd-meter { margin-bottom: 12px; }

/* Список эффектов идёт последним в колонке характеристик. Отбиваем его
   от таблицы так же, как дизайн-система отбивает группы друг от друга
   (.cf-statgroup + .cf-statgroup — 18px), и не даём прилипнуть к низу. */
#crank-ux .pd-profile-body .pd-effect-list {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

@media (max-width: 760px) {
    /* Положение узкой карточки тоже считает place(): здесь только то,
       что на телефоне кукла и характеристики идут в одну колонку. */
    #crank-ux .pd-profile-body { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
    #crank-ux .pd-profile-card > .cf-panelhead { padding: 14px 44px; }
    #crank-ux .pd-profile-card > .cf-panelhead h2 { font-size: 22px; }
}

@media (max-width: 480px) {
    #crank-ux .pd-profile-body .cf-stage {
        height: 484px;
        grid-template-columns: 50px minmax(0, 1fr) 50px;
        gap: 4px;
    }
    #crank-ux .pd-profile-body .cf-equips .cf-tile { width: 48px; height: 64px; }
    #crank-ux .pd-profile-body .cf-stage > .cf-equips:last-child { padding-top: 70px; }
    #crank-ux .pd-profile-body .cf-hero { height: 460px; }
    #crank-ux .pd-profile-body .cf-hero > img { width: calc(100% + 100px); }
}

/*
 * Боевой пояс: провизия. Плитки предметов тянутся по ширине сетки, а в
 * поясе им положен фиксированный размер — иначе четыре пустые ячейки
 * занимают пол-экрана.
 */
#crank-ux .cf-combat-belt .cf-hotbar .cf-equipped {
    width: 74px;
}

#crank-ux .cf-combat-belt .cf-hotbar .cf-tile {
    width: 74px;
    height: 74px;
}

/* Колонка между бойцами узкая: таймер в ней не должен переноситься. */
#crank-ux .cf-versus .pd-command-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 14px;
    font-size: 11px;
    color: var(--sub);
}

#crank-ux .cf-versus .pd-command-timer b {
    font: 20px 'CrankDisplay', Georgia;
    color: var(--warm);
}

/*
 * Полосы ресурсов на арене. У классов подписи длинные («Дисциплина»,
 * «Ненависть»), и на телефоне, где колонка бойца — половина экрана, они
 * налезали на числа. Подпись ужимается многоточием, число остаётся целым.
 */
#crank-ux .cf-vital-label {
    align-items: baseline;
    min-width: 0;
}

#crank-ux .cf-vital-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#crank-ux .cf-vital-label b {
    flex-shrink: 0;
}

/* Круговой откат повторяет cooldownRing() из new_design/all.html. */
#crank-ux .rechargeable {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

#crank-ux .cdOverlay {
    position: absolute;
    inset: 4px;
    display: grid;
    place-items: center;
    background: conic-gradient(#080909c9 var(--progress, 360deg), transparent 0);
    border-radius: 50%;
    z-index: 3;
}

/* Notification cards follow all.html: date, title, body and an explicit action. */
#crank-ux .pd-notifications { display: grid; gap: 10px; max-height: min(420px, 60vh); overflow: auto; }
#crank-ux .pd-notifications article { padding: 14px; border: 1px solid var(--line); }
#crank-ux .pd-notifications article.unread { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 5%, transparent); }
#crank-ux .pd-notifications h3 { font-size: 18px; margin: 5px 0; }
#crank-ux .pd-notifications p { font-size: 12px; color: var(--sub); line-height: 1.6; margin: 6px 0; }
#crank-ux .pd-notice-item { overflow-wrap: anywhere; }
#crank-ux .pd-notice-item > button { margin-top: 10px; }
#crank-ux .pd-notice-item > small { display: block; margin-top: 8px; }
#crank-ux .pd-notice-product { display: flex; gap: 12px; align-items: center; margin: 10px 0; }
#crank-ux .pd-notice-product img { width: 46px; height: 58px; object-fit: contain; flex-shrink: 0; background: var(--deep); border: 1px solid var(--line); padding: 4px; }
#crank-ux .pd-notice-product strong { color: var(--warm); }
#crank-ux .pd-notifications .cf-textbutton { min-height: 36px; }

/* Search filters the existing shop, without a separate results surface. */
#crank-ux .pd-shop-search { margin: 16px 0; }
#crank-ux .pd-shop-search label { display: block; margin-bottom: 7px; color: #b6aa8f; font-size: 12px; }
#crank-ux .pd-shop-search > div { display: flex; gap: 10px; align-items: center; }
#crank-ux .pd-shop-search input { min-width: 0; width: 100%; min-height: 44px; padding: 10px 12px; background: #111110; border: 1px solid #544936; color: #d8c4a1; font: inherit; }
#crank-ux .pd-shop-search input:focus-visible { outline: 2px solid #ac9066; outline-offset: 2px; }
#crank-ux .pd-shop-search button { min-height: 44px; }
#crank-ux .pd-category-tree [hidden] { display: none !important; }
@media (max-width: 650px) { #crank-ux .pd-shop-search input { font-size: 16px; } }

/* Keep the character compact and give the dungeon the remaining desktop space. */
@media (min-width: 992px) {
    #crank-ux .cf-layout.pd-dungeon-layout {
        grid-template-columns: minmax(0, 1fr) min(40%, 480px);
    }
}

/* Меню вещи рассчитывает позицию от нажатого слота в Item.vue. Fixed
   нужен, чтобы координаты getBoundingClientRect не смешивались с высотой
   куклы и меню не уезжало к нижнему краю панели. */
#crank-ux .pd-context-floating.pd-item-actions {
    position: fixed;
}

#crank-ux .cdOverlay.has-timer b {
    color: var(--warm);
    font: 19px 'CrankDisplay', Georgia;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 2px 4px #000;
}

/* Как в эталоне: заблокированный слот остаётся контрастным, затемняется
   только предмет, поэтому сектор и цифра отката не пропадают вместе с ним. */
#crank-ux .cf-combat-belt .cf-hotbar .cf-tile:disabled {
    opacity: 1;
    background-color: #141313;
    border-color: #39312a;
}

#crank-ux .cf-combat-belt .cf-hotbar .cf-tile:disabled .cf-itemart {
    filter: brightness(.43) saturate(.5);
}

/* У значка эффекта своя рамка: сектор кладём поверх иконки. */
#crank-ux .pd-effect-cooldown {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#crank-ux .pd-effect {
    position: relative;
}

#crank-ux [data-effect-tooltip] { cursor: help; }
#crank-ux [data-effect-tooltip]:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
}

/* Outside the fighter subtree: polling and cooldowns leave the open card intact. */
#crank-ux .pd-effect-tooltip {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    width: max-content;
    max-width: min(260px, calc(100% - 16px));
    padding: 10px 12px;
    border: 1px solid #806039;
    background: #171411;
    color: #e4d9c7;
    box-shadow: 0 8px 20px #0009;
    font: 12px/1.5 Arial, sans-serif;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
#crank-ux .pd-effect-tooltip[hidden] { display: none; }

/* Откат приёма в боевом поясе. */
#crank-ux .cf-hotkey .cf-cooldown-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Меню странника. В прототипе все пункты — кнопки, и дизайн-система даёт им
   вид строки списка (`.pd-account-menu button`: слева, padding 14px,
   разделитель снизу). В игре часть пунктов — ссылки на серверные маршруты,
   а общее правило `a.cf-textbutton` раскладывает их inline-flex по центру и
   с отступом 4px — меню «плывёт». Повторяем ссылкам ровно то, что
   дизайн-система задаёт кнопкам. */
#crank-ux .pd-account-menu a.cf-textbutton {
    display: block;
    text-align: left;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}

/*
 * Ник игрока. В прототипе это nick() — <span class="pd-name КАРМА"> с
 * обычным начертанием; в игре ник приходит из user/nickname.blade.php,
 * где имя завёрнуто в <em>, а класс кармы отдаёт User::getKarmaClassAttribute()
 * («nickname», «nickname grey», «nickname murder»). Ниже — мост между
 * этими двумя именованиями.
 */

/* <em> достался нику от старой вёрстки: в новом оформлении имена набраны
   прямым шрифтом везде — и в списке локации, и на карточке, и на арене.
   Класс .pd-name шаблон ставит сам, чтобы правило доставало до ника и там,
   где обёртки с классом кармы нет (лобби поединков, чужие профили). */
#crank-ux em.pd-name { font-style: normal; }

/* Цвета кармы. Дизайн-система красит .pd-name.peaceful/.gray/.red, а до
   классов игры эти правила не достают — повторяем их один в один. */
#crank-ux .nickname { color: #b3c5d4; }
#crank-ux .nickname.grey { color: #b0ada6; }
#crank-ux .nickname.murder { color: #df9487; }

/* На арене имя бойца в прототипе (battle.html, .cf-fighter-hud h2) идёт
   общим цветом заголовка, без оттенка кармы, — там и без него понятно,
   кто перед тобой. */
#crank-ux .cf-fighter-hud h2 .nickname { color: inherit; }

/* Заголовок с ником в .cf-sectionline (настройки профиля, осмотр игрока).
   Дизайн-система правилом `.cf-sectionline span` набирает подпись справа
   11-м кеглем серым цветом, и это же правило добивает до ника внутри <h2> —
   заголовок схлопывается до подписи. Возвращаем кегль заголовка и цвет
   кармы; специфичности хватает, чтобы перебить правило подписи. */
#crank-ux .cf-sectionline h2 .nickname,
#crank-ux .cf-sectionline h3 .nickname { font-size: inherit; color: #b3c5d4; }
#crank-ux .cf-sectionline .nickname.grey { color: #b0ada6; }
#crank-ux .cf-sectionline .nickname.murder { color: #df9487; }

/*
 * Пустые состояния. В прототипе заголовок пустого блока — <h3 class="cf-serif">
 * (см. empty() в new_design/all.html), а правило `.pd-empty h3` задаёт ему
 * только кегль и цвет. В игре класса на заголовке нет, и «Нет заявок» /
 * «Нет событий» падают на жирный Arial. Дотягиваем шрифт по месту.
 */
#crank-ux .pd-empty h3 {
    font-family: 'CrankDisplay', Georgia, 'Times New Roman', serif;
    font-weight: 400;
}

/* Хроника поединка: длинный бой не растягивает страницу — лог прокручивается внутри панели */
#crank-ux .cf-battlelog .cf-logrows{max-height:min(420px,50vh);overflow-y:auto;overscroll-behavior:contain;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}

/* Критический удар в хронике: «-73 HP» красным */
#crank-ux .cf-logrow .hp.critical{color:#e5594a;font-weight:700}

/* Нанесённый урон — по центру арены, под фазой боя (раньше строка была под чатом) */
#crank-ux .pd-dealt{margin:8px 0 0;font-size:12px;color:var(--sub)}
#crank-ux .pd-dealt strong{color:var(--gold);font-size:14px}

/*
 * На узком экране дизайн-система сжимает среднюю колонку арены до 30px и
 * разрешает её подписям рваться где угодно (.cf-versus p: max-width 45px,
 * overflow-wrap: anywhere). Два наших текста от этого поехали по буквам:
 * «Нанесено урона» в самой колонке и заглушка «Ожидаем ход противника»,
 * которая тоже .cf-versus, но стоит на месте соперника — в широкой колонке.
 * Слова целиком: подпись в колонке чуть заходит в зазор, заглушка берёт
 * всю ширину своего места.
 */
#crank-ux .cf-versus .pd-dealt{overflow-wrap:normal;word-break:keep-all}
#crank-ux .cf-versus.pd-enemy-missing p{max-width:none;overflow-wrap:normal}

/* Три способности класса (правила 2): повтор зон, история обменов,
   цель умения поддержки. */
.pd-repeat-zones { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--muted, #b9ad97); cursor: pointer; }
.pd-repeat-zones input { margin: 0; }
.pd-repeat-note { opacity: .75; }
.pd-exchange-history { margin: 12px 0 0; padding: 10px 12px; border: 1px solid rgba(201, 162, 90, .18); background: rgba(0, 0, 0, .18); }
.pd-exchange-history ol { margin: 6px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.5; }
.pd-exchange-history li span { display: block; }
.pd-exchange-history li + li { margin-top: 6px; }
.pd-ability-target { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.pd-ability-target select { background: #1b1612; color: inherit; border: 1px solid rgba(201, 162, 90, .35); padding: 4px 6px; max-width: 100%; }

/* Компактная карточка персонажа: уровень в шапке, без отдельного свеса
   между именем и ресурсами. Длинный ник может занять вторую строку. */
#crank-ux .pd-hero > .cf-panelhead {
    min-height: 64px;
    padding: 10px 56px;
}
#crank-ux .pd-hero > .cf-panelhead h2 {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: .3px;
    overflow-wrap: anywhere;
}
#crank-ux .pd-hero > .cf-panelhead .cf-kicker {
    margin-bottom: 3px;
    line-height: 1.3;
}
#crank-ux .pd-hero > .cf-panelhead::before,
#crank-ux .pd-hero > .cf-panelhead::after {
    width: 70px;
    height: 64px;
}
#crank-ux .pd-hero > .cf-panelhead .cf-level {
    top: 50%;
    right: 14px;
    bottom: auto;
    left: auto;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
}
#crank-ux .pd-hero-bars {
    padding-top: 12px;
    gap: 8px 12px;
}
/* Две полосы помещаются рядом. У охотника с тремя ресурсами здоровье
   по-прежнему занимает весь ряд, две вторичные полосы — следующий. */
#crank-ux .pd-hero-bars > .pd-meter:first-child:nth-last-child(2) {
    grid-column: auto;
}

/* Здоровье и ресурсы снова у бойцов. Высота растёт по содержимому:
   третья полоса охотника не должна перекрывать фигуру или снаряжение. */
#crank-ux .cf-fighter-hud {
    height: auto;
    min-height: 164px;
    padding-bottom: 12px;
}
#crank-ux .cf-fighter-hud h2 { overflow-wrap: anywhere; }
#crank-ux .cf-battlearena:has(.pd-battle-vitals .mana + .mana) .cf-fighter-hud {
    min-height: 196px;
}
#crank-ux .pd-battle-vitals { min-width: 0; margin-top: 10px; }
#crank-ux .pd-battle-vitals .cf-combat-meter { margin: 0 0 8px; }
#crank-ux .pd-battle-vitals .cf-combat-meter:last-child { margin-bottom: 0; }
/* all.html: fill catches up in .4s, the lighter trail follows after .3s. */
#crank-ux .pd-battle-vitals .cf-vital-fill { transition: width .4s ease-out; }
#crank-ux .pd-battle-vitals .cf-vital-echo { transition: width .65s .3s ease; }
@media (prefers-reduced-motion: reduce) {
    #crank-ux .pd-battle-vitals .cf-vital-fill,
    #crank-ux .pd-battle-vitals .cf-vital-echo { transition: none; }
}

/* Две равные колонки зон. Дополнительные блоки не участвуют в их
   автопотоке: история появляется ниже кнопки, её позиция не меняется. */
@media (min-width: 651px) {
    #crank-ux .cf-battlecontrols:not(.pd-battle-over) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 24px;
    }
    #crank-ux .cf-battlecontrols > .pd-strike-zones { grid-column: 1; grid-row: 1; min-width: 0; }
    #crank-ux .cf-battlecontrols > .pd-guard-zones { grid-column: 2; grid-row: 1; min-width: 0; }
    #crank-ux .cf-battlecontrols > .pd-repeat-zones {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        min-height: 32px;
        margin: 0;
        font-size: 12px;
    }
    #crank-ux .pd-repeat-zones .pd-repeat-note { display: none; }
    #crank-ux .cf-battlecontrols:not(.pd-battle-over) > .cf-turnactions {
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid;
        justify-self: center;
        width: min(100%, 360px);
        margin: 0;
        text-align: center;
    }
    #crank-ux .cf-battlecontrols > .pd-exchange-history {
        grid-column: 1 / -1;
        grid-row: 4;
        min-width: 0;
        margin: 0;
    }
}

@media (max-width: 650px) {
    #crank-ux .cf-top {
        padding: 4px 10px 0;
        row-gap: 0;
    }
    #crank-ux .pd-top-actions .pd-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
    #crank-ux .cf-main,
    #crank-ux.pd-duel-view .cf-main {
        padding: 10px 10px 12px;
    }
    #crank-ux .cf-pagehead,
    #crank-ux.pd-duel-view .cf-pagehead {
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    #crank-ux .cf-pagehead > div:first-child { min-width: 0; }
    #crank-ux .cf-pagehead h1 {
        margin-top: 3px;
        font-size: 23px;
        line-height: 1.15;
    }
    #crank-ux .cf-pagehead .cf-kicker {
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: .3px;
    }
    #crank-ux .cf-community-toggle { min-height: 44px; flex-shrink: 0; }
    #crank-ux .pd-hero > .cf-panelhead {
        min-height: 60px;
        padding: 8px 48px;
    }
    #crank-ux .pd-hero > .cf-panelhead h2 { font-size: 21px; }
    #crank-ux .pd-hero > .cf-panelhead::before,
    #crank-ux .pd-hero > .cf-panelhead::after { height: 60px; width: 62px; }
    #crank-ux .pd-hero > .cf-panelhead .cf-level { right: 10px; }
    #crank-ux .pd-hero-bars { padding: 10px 12px 4px; }
    #crank-ux .pd-hero .cf-stage { height: 480px; }
    #crank-ux .pd-hero > .pd-effect-list { padding: 4px 12px; }
    #crank-ux .pd-provisions { padding: 10px 12px; }
    #crank-ux .pd-provisions > div { margin: 6px 0; }
    #crank-ux .pd-xp { padding: 0 12px 10px; }
    #crank-ux .cf-smallstats { padding: 8px 0; }
    #crank-ux .cf-smallstats b { font-size: 18px; }
    #crank-ux .cf-stats { padding: 14px 12px; }
    #crank-ux .cf-sectionline { margin-bottom: 8px; }

    #crank-ux .pd-lobby-hero {
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 10px 12px;
        gap: 8px 10px;
        margin-bottom: 10px;
    }
    #crank-ux .pd-lobby-hero img { width: 48px; height: 76px; }
    #crank-ux .pd-lobby-hero h2 { font-size: 21px; margin: 3px 0 6px; }
    #crank-ux .pd-lobby-hero .cf-note { margin-top: 4px; line-height: 1.4; }
    #crank-ux .pd-lobby-hero > div:last-child { align-items: center; gap: 8px; }
    #crank-ux .pd-lobby-hero .cf-action,
    #crank-ux .pd-lobby-hero a.cf-textbutton { min-height: 44px; }
    #crank-ux .pd-callout { padding: 10px 12px; margin: 10px 0; }
    #crank-ux .pd-callout p { margin-top: 4px; }
    #crank-ux .pd-request { padding: 12px 0; }
    #crank-ux .pd-request h3 { margin-top: 4px; }
    #crank-ux .pd-request-teams { margin: 10px 0; gap: 8px; }
    #crank-ux .pd-participant-slots { margin-top: 6px; }
    /* Вместимость уже подписана над командой (1 / 20): не рисуем
       девятнадцать одинаковых пустых ячеек на телефоне. */
    #crank-ux .pd-participant-slots .pd-vacancy ~ .pd-vacancy { display: none; }

    #crank-ux .cf-duel-caption { padding: 8px 10px; }
    #crank-ux .cf-battlearena {
        padding-top: 10px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 14px;
    }
    #crank-ux .cf-battlearena > :first-child { grid-column: 1; grid-row: 1; min-width: 0; }
    #crank-ux .cf-battlearena > :last-child { grid-column: 2; grid-row: 1; min-width: 0; }
    /* Боевой статус на всю ширину: фраза сверху, урон и таймер ниже.
       Отдельный класс: pd-battle-status уже занят в дизайн-системе и
       растягивает центральную колонку на десктопе. */
    #crank-ux .cf-battlearena > .pd-arena-status {
        grid-column: 1 / -1;
        grid-row: 2;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        gap: 6px 12px;
        min-width: 0;
        padding: 10px 2px 2px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        font-size: 12px;
        text-align: left;
    }
    #crank-ux .pd-arena-status > .cf-line,
    #crank-ux .cf-battlearena:not(.pd-arena-over) > .pd-arena-status > b { display: none; }
    #crank-ux .pd-arena-status > p {
        min-height: 0;
        max-width: none;
        margin: 0;
        line-height: 1.4;
        overflow-wrap: break-word;
        word-break: normal;
    }
    #crank-ux .pd-arena-status > .pd-battle-phase {
        flex: 1 1 100%;
        min-width: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--warm);
    }
    #crank-ux .pd-arena-status > .pd-dealt { font-size: 12px; color: var(--sub); }
    #crank-ux .pd-arena-status .pd-damage-label-detail { display: none; }
    #crank-ux .pd-arena-status > .pd-dealt strong {
        font: 14px CrankDisplay, Georgia;
        width: 100%;
        white-space: nowrap;
    }
    #crank-ux .pd-arena-status > .pd-command-timer {
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        gap: 4px 7px;
        padding: 0;
        margin: 0;
        border: 0;
        font-size: 12px;
    }
    #crank-ux .pd-arena-status > .pd-command-timer b { font-size: 18px; white-space: nowrap; }
    #crank-ux .pd-arena-status > b { font-size: 24px; line-height: 1.2; overflow-wrap: normal; }
    #crank-ux .cf-battlearena > .pd-enemy-missing { padding: 8px; }
    #crank-ux .cf-battlearena > .pd-enemy-missing p { font-size: 13px; line-height: 1.5; }
    /* Общий блок осмотра раскрывает также вещи у обоих бойцов.
       Закрытый список не занимает место между куклами и боевым поясом. */
    #crank-ux .cf-combat-shell:not(:has(> .cf-combat-inspection[open])) .cf-gear-column {
        display: none;
    }
    #crank-ux .cf-combat-shell:not(:has(> .cf-combat-inspection[open])) .cf-fighter-body {
        gap: 0;
    }
    #crank-ux .cf-combat-shell.cf-pve:not(:has(> .cf-combat-inspection[open])) #cf-enemy-fighter .cf-fighter-body {
        min-height: 205px;
    }
    #crank-ux .cf-combat-inspection > summary { min-height: 44px; }
    #crank-ux .cf-fighter-hud { min-height: 144px; padding: 8px 6px 10px; }
    #crank-ux .cf-fighter-hud h2 { margin-top: 0; line-height: 1.2; }
    #crank-ux .cf-fighter-hud .cf-kicker {
        height: auto;
        min-height: 0;
        margin-bottom: 6px;
        line-height: 1.35;
    }
    #crank-ux .cf-opponent-note { padding-top: 7px; padding-bottom: 7px; }
    #crank-ux .cf-opponent-note:has(> span:only-child:empty) { display: none; }
    #crank-ux .cf-fighter > .pd-effect-list:not(:has(.pd-effect)),
    #crank-ux .pd-hero > .pd-effect-list:not(:has(.pd-effect)) { display: none; }
    #crank-ux.pd-duel-view .cf-combat-belt { padding: 10px; }
    #crank-ux.pd-duel-view .cf-belt-head { margin-bottom: 6px; }
    #crank-ux.pd-duel-view .cf-battlecontrols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px 10px;
        padding: 10px;
    }
    #crank-ux.pd-duel-view .cf-battlecontrols > div > .cf-kicker {
        min-height: 0;
        margin-bottom: 6px;
        line-height: 1.35;
    }
    #crank-ux.pd-duel-view .cf-zonegrid button { height: auto; min-height: 44px; line-height: 1.25; }
    #crank-ux.pd-duel-view .cf-battlecontrols > .pd-repeat-zones,
    #crank-ux.pd-duel-view .cf-battlecontrols > .pd-exchange-history,
    #crank-ux.pd-duel-view .cf-battlecontrols > .cf-turnactions { grid-column: 1 / -1; margin: 0; }
    #crank-ux.pd-duel-view .pd-repeat-zones { min-height: 32px; font-size: 12px; }
    #crank-ux.pd-duel-view .cf-turnactions { gap: 5px; }
}

/* На самых узких телефонах сохраняем одну строку логотипа, кошелька
   и кнопок. Дополнительный герб не должен отправлять меню на третий ряд. */
@media (max-width: 360px) {
    #crank-ux .cf-brand .cf-sigil { display: none; }
    #crank-ux .cf-logo { font-size: 20px; }
}

/* The introductory chronicle is a leaf of a manuscript above the class
   chooser. Its footer stays outside the scrolling text at every screen size. */
#crank-ux .pd-chronicle {
    --chronicle-ink: #30271e;
    --chronicle-rubric: #763c30;
    box-sizing: border-box;
    width: 760px;
    max-width: calc(100vw - 32px);
    height: 800px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #7b6747;
    border-radius: 3px 7px 7px 3px;
    color: var(--chronicle-ink);
    background-color: #cbbd99;
    background-image:
        linear-gradient(90deg, #77613e38, transparent 5%, transparent 96%, #77613e24),
        repeating-linear-gradient(7deg, #45351c03 0, #45351c03 1px, transparent 1px, transparent 4px);
    box-shadow: 0 24px 100px #000c, inset 5px 0 0 #745b3530, inset 8px 0 0 #eee0ba40;
    text-align: left;
    color-scheme: light;
}
#crank-ux .pd-chronicle[open] { display: flex; flex-direction: column; }
#crank-ux .pd-chronicle::backdrop { background: #080909db; backdrop-filter: blur(5px); }
#crank-ux .pd-chronicle-heading {
    flex: none;
    margin: 0 56px;
    padding: 30px 0 22px;
    border-bottom: 3px double #7b674766;
}
#crank-ux .pd-chronicle-heading h2 {
    margin: 0;
    color: #3f3021;
    font: 34px/1.22 'CrankDisplay', Georgia, serif;
    letter-spacing: 0;
    text-wrap: balance;
}
#crank-ux .pd-chronicle-paper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 28px 56px 36px;
    scrollbar-color: #8c7652 transparent;
    scrollbar-width: thin;
    outline-offset: -4px;
}
#crank-ux .pd-chronicle-copy { max-width: 36em; margin: auto; font-size: 19px; }
#crank-ux .pd-chronicle-copy p {
    margin: 0 0 1.05em;
    color: var(--chronicle-ink);
    font: 19px/1.8 Georgia, 'Times New Roman', serif;
    overflow-wrap: break-word;
}
#crank-ux .pd-chronicle-initial::first-letter {
    float: left;
    margin: 7px 9px 0 0;
    padding: 0 1px;
    color: var(--chronicle-rubric);
    font: 60px/.86 'CrankDisplay', Georgia, serif;
}
#crank-ux .pd-chronicle-copy hr {
    width: 72px;
    margin: 32px auto;
    border: 0;
    border-top: 3px double #806b49;
}
#crank-ux .pd-chronicle-end { display: block; text-align: center; color: var(--chronicle-rubric); font-size: 32px; }
#crank-ux .pd-chronicle-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 32px 18px 56px;
    border-top: 1px solid #7b67474d;
    background: #b9a88040;
}
#crank-ux .pd-chronicle-read,
#crank-ux .pd-chronicle-skip {
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    font: 15px/1.35 Georgia, 'Times New Roman', serif;
    cursor: pointer;
}
#crank-ux .pd-chronicle-read {
    padding: 10px 0;
    border: 0;
    color: #493a27;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
}
#crank-ux .pd-chronicle-skip {
    margin-left: auto;
    min-width: 140px;
    padding: 11px 24px;
    border: 1px solid #392b20;
    color: #efdfb9;
    background: #49372a;
    box-shadow: inset 0 0 0 2px #c1a67724;
}
#crank-ux .pd-chronicle-skip:hover { background: #39291f; }
#crank-ux .pd-chronicle-read:hover { color: #763c30; }
#crank-ux .pd-chronicle :focus-visible { outline: 2px solid #763c30; outline-offset: 3px; }
#crank-ux .pd-chronicle-paper:focus-visible { outline-offset: -4px; }
#crank-ux .pd-chronicle-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (max-width: 650px) {
    #crank-ux .pd-chronicle { max-width: calc(100vw - 20px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
    #crank-ux .pd-chronicle-heading { margin: 0 25px; padding: 22px 0 18px; }
    #crank-ux .pd-chronicle-heading h2 { font-size: 27px; }
    #crank-ux .pd-chronicle-paper { padding: 22px 25px 28px; }
    #crank-ux .pd-chronicle-copy p { font-size: 17px; line-height: 1.75; }
    #crank-ux .pd-chronicle-initial::first-letter { font-size: 54px; }
    #crank-ux .pd-chronicle-footer { padding: 12px 18px; }
    #crank-ux .pd-chronicle-skip { min-width: 112px; padding: 11px 16px; }
}
@media (max-height: 500px) {
    #crank-ux .pd-chronicle-heading { padding: 12px 0; }
    #crank-ux .pd-chronicle-heading h2 { font-size: 22px; line-height: 1.1; }
    #crank-ux .pd-chronicle-heading h2 br { display: none; }
    #crank-ux .pd-chronicle-paper { padding-top: 18px; }
    #crank-ux .pd-chronicle-footer { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 360px) {
    #crank-ux .pd-chronicle-heading h2 { font-size: 24px; }
}

/* Подзаголовки групп в частых вопросах (help.blade.php). */
#crank-ux .pd-help-grid .pd-faq-group { display: block; margin: 26px 0 2px; }
#crank-ux .pd-help-grid a { color: var(--gold); text-decoration-color: rgba(174, 146, 101, .45); text-underline-offset: 2px; }
#crank-ux .pd-help-grid a:hover { color: var(--warm); }