/* Account, store and VIP screens follow the approved purple/gold reference. */
.account-screen,.settings-screen{padding:0 18px 34px;background-color:#eef2ff}
.account-topbar{
  position:sticky;z-index:5;top:0;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:8px;min-height:112px;margin:0 -18px 16px;padding:15px 18px;
  border-radius:0 0 26px 26px;background:linear-gradient(150deg,#b36dff,#751cda);box-shadow:0 8px 0 #4a1da9
}
.account-topbar .round-back{grid-column:1;width:49px;height:49px;border-width:5px;font-size:42px}.account-topbar h1{grid-column:2;margin:0;font-size:22px}
.account-wallet{grid-column:2/4;display:flex;direction:ltr;align-items:center;justify-content:flex-end;gap:6px;color:#fff;font-size:13px}
.mini-coin,.mini-diamond{display:inline-block;flex:none;width:25px;height:25px}
.mini-coin{border:3px solid #ffba0e;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe941,#ff9d0c 68%)}
.mini-diamond{clip-path:polygon(50% 0,100% 38%,76% 100%,22% 100%,0 38%);background:linear-gradient(135deg,#8ef4ff,#23a3fb 55%,#a9f6ff)}
.store-intro{margin:14px 0 18px;padding:20px 16px;border-radius:17px;text-align:center;background:linear-gradient(145deg,#0b3294,#142e87 50%,#49219c);box-shadow:inset 0 1px #ffffff55}
.store-intro h2{margin-bottom:7px;color:#ffd632}.store-intro p{margin:0;color:#eae5ff;line-height:1.6;font-size:13px}
.package-values{display:flex;direction:ltr;justify-content:center;gap:12px;margin:14px 0}.package-values span{display:flex;align-items:center;gap:4px;min-width:100px;padding:4px 10px;border:3px solid #fff;border-radius:99px;background:#092b88;font-weight:900}
.store-buy{width:100%;padding:12px 18px;border:4px solid #133993;border-radius:999px;color:#092d8b;background:linear-gradient(180deg,#ffe54a,#ffab13);box-shadow:inset 0 0 0 2px #fff6,0 5px 0 #553194;font-weight:900;font-size:17px}
.payment-card,.settings-article,.settings-form{padding:18px;border:2px solid #b18afd;border-radius:20px;background:#fff;color:#172a70;box-shadow:0 8px 24px #1c0c5a33}
.payment-brand{display:grid;place-items:center;gap:8px;min-height:95px;margin:-18px -18px 16px;border-radius:18px 18px 0 0;color:#fff;background:#082f91;font-size:26px}.payment-brand span{font-size:15px}.payment-summary{display:flex;justify-content:space-between;padding:12px;border-bottom:1px solid #ddd}.payment-pending{margin:15px 0;padding:13px;border-radius:13px;color:#6c5710;background:#fff2b9}.payment-pending p{margin:5px 0 0;font-size:12px;line-height:1.6}
.vip-confirm .secondary{width:100%;margin-top:14px}
.reference-store-screen{min-height:100%;background:#092b87 url("../assets/domino/home-texture.png?v=20260727b") center/cover}
.reference-store-tabs{display:grid;grid-template-columns:repeat(3,1fr);margin:40px 12px 43px;padding:8px 7px;border-bottom:8px solid #ffb20e;border-radius:15px;background:#fff;box-shadow:0 8px 0 #31127d}
.reference-store-tabs button{min-height:53px;padding:8px 4px;border:0;border-radius:11px 11px 0 0;color:#8f82dc;background:linear-gradient(180deg,#4c35c3,#1b2085);font:900 14px/1.1 inherit}
.reference-store-tabs button[aria-current="page"]{position:relative;z-index:1;min-height:70px;margin-top:-25px;color:#102d88;background:linear-gradient(180deg,#ffe13c,#ff9f12);box-shadow:inset 0 0 0 3px #ffbd13;transform:perspective(100px) rotateX(2deg)}
.reference-package-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 14px;padding:0 3px}
.reference-package-card{position:relative;display:flex;min-height:202px;flex-direction:column;align-items:center;padding:40px 8px 0;border-radius:15px;background:radial-gradient(circle at 50% 57%,#fff28b 0 2%,transparent 35%),linear-gradient(150deg,#ffdf24,#ff9d11);box-shadow:0 9px 0 #7b2bc2}
.reference-package-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-conic-gradient(from 0deg at 50% 60%,#fff3 0 2deg,transparent 2deg 12deg);opacity:.5;pointer-events:none}
.reference-package-name{position:absolute;z-index:2;top:0;right:18px;left:18px;padding:9px 4px;border-radius:0 0 8px 8px;color:#fff;background:linear-gradient(180deg,#174bb1,#062b83);text-align:center;font-weight:900}
.reference-package-card>strong{position:relative;z-index:2;color:#fff;font-size:34px;line-height:1;text-shadow:-2px -2px 0 #ff9910,2px -2px 0 #ff9910,-2px 2px 0 #ff9910,2px 2px 0 #ff9910}
.store-product-art{position:relative;z-index:2;display:block;width:106px;height:60px;margin:8px auto 26px;overflow:hidden}.store-product-art img{position:absolute;top:var(--store-y);left:var(--store-x);width:1856px;height:1374px;max-width:none}
.art-diamond-small{--store-x:-244px;--store-y:-510px}.art-diamond-pile{--store-x:-486px;--store-y:-510px}.art-diamond-chest{--store-x:-244px;--store-y:-760px}.art-diamond-treasure{--store-x:-486px;--store-y:-760px}
.art-coin-small{--store-x:-769px;--store-y:-510px}.art-coin-pile{--store-x:-1011px;--store-y:-510px}.art-coin-chest{--store-x:-769px;--store-y:-760px}.art-coin-bag{--store-x:-1008px;--store-y:-760px}
.reference-store-buy{position:relative;z-index:3;width:128px;margin-bottom:-16px;padding:7px 5px;border:4px solid #ffb918;border-radius:999px;color:#fff;background:linear-gradient(180deg,#174bb1,#082b83);box-shadow:0 3px 0 #8c31c7;font-weight:900}
.reference-membership-status{margin:-18px 3px 25px;padding:10px;border-radius:12px;color:#fff;background:#ffffff24;text-align:center;font-weight:800}
.reference-subscription-list{display:grid;gap:30px;padding:0 3px}
.reference-subscription-card{position:relative;padding:13px 14px 3px;border-radius:13px;color:#222;background:#fff;box-shadow:0 9px 0 #ffae0e}
.reference-subscription-card header{display:flex;justify-content:space-between;align-items:center;padding:17px 12px;border-radius:8px;color:#fff;background:linear-gradient(180deg,#b666f3,#7d1fd8);font-size:15px}
.reference-subscription-card header strong{display:flex;align-items:center;gap:8px;color:#ffe724}.plan-crown{position:relative;display:inline-block;width:24px;height:20px;border-bottom:5px solid #ffb20e;clip-path:polygon(0 16%,24% 52%,40% 0,59% 52%,84% 8%,100% 79%,0 79%);background:linear-gradient(180deg,#fff34b,#ff9d0c)}.reference-subscription-card ul{padding:6px 3px 5px;list-style:none;line-height:1.9;font-size:13px;font-weight:800}.reference-subscription-card li::before{content:"✓";display:inline-grid;width:19px;height:19px;place-items:center;margin-left:7px;border-radius:50%;color:#fff;background:#ffb314}
.reference-popular{position:absolute;z-index:2;top:-14px;right:13px;padding:5px 11px;border:3px solid #ffca2b;border-radius:8px;color:#fff;background:#ff8d11;font-size:11px;font-weight:900}
.reference-subscribe{display:block;min-width:176px;margin:0 0 -18px auto;padding:8px 12px;border:4px solid #ffb918;border-radius:999px;color:#fff;background:linear-gradient(180deg,#174bb1,#082b83);font-weight:900}
.ledger-list{display:grid;gap:10px}.ledger-entry{display:flex;justify-content:space-between;align-items:center;padding:13px;border-radius:14px;color:#172a70;background:#fff;box-shadow:0 5px 16px #1e0b5c22}.ledger-entry div{display:grid;gap:4px}.ledger-entry small{color:#777}.ledger-entry .credit{color:#078252}.ledger-entry .debit{color:#c73454}.empty-state{padding:30px 15px;text-align:center;color:#6c6790;background:#fff;border-radius:17px}

.settings-profile{display:flex;align-items:center;gap:13px;margin:6px 0 17px;padding:14px;border:2px solid #a57bec;border-radius:18px;color:#142b75;background:#fff}.settings-profile>div{min-width:0;flex:1}.settings-profile>div>strong{display:block;font-size:20px}.settings-profile .player-level>span{color:#223477}.settings-profile .player-level>small{color:#6c6590}
.settings-list{display:grid;gap:9px}.setting-row,.settings-link{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:11px 14px;border:1px solid #d9cef7;border-radius:12px;color:#182d75;background:#fff;box-shadow:0 3px 10px #24106118}
.settings-link{text-align:right;font-weight:800}.settings-link i{font-style:normal;font-size:25px;color:#7d25da}.settings-link b{color:#7d25da;font-size:13px}.danger-text{color:#d13355}
.switch{width:52px;height:28px;padding:3px;border:0;border-radius:99px;background:#5f4a99}.switch i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}.switch.on{background:#ffd026}.switch.on i{transform:translateX(-24px);background:#173b8e}
.danger-btn{border-color:#ff7791}
.settings-form{display:grid;gap:13px}.settings-form .field{margin:0}.settings-form input,.settings-form select,.settings-form textarea{color:#172a70;background:#f8f7ff;border-color:#d8cef2}.settings-form textarea{min-height:130px;resize:vertical;padding:12px;border:2px solid #6d57ad;border-radius:12px;font:inherit}
.settings-article{line-height:1.9}.settings-article h2{color:#7a23d7}.settings-article p{white-space:pre-line}.language-choice{display:flex;align-items:center;gap:10px;padding:15px;border:2px solid #e2d8fa;border-radius:14px;font-weight:900}.language-choice small{margin-right:auto;color:#777}.language-choice.selected{border-color:#8a31df;background:#f5edff}.language-choice.disabled{opacity:.55}
.notification-list{display:grid;gap:11px}.notification-list article{padding:15px;border:1px solid #ddd0f8;border-radius:16px;color:#172a70;background:#fff}.notification-list h3{margin-bottom:6px;color:#7824d6}.notification-list p{margin:0 0 7px;line-height:1.6}.notification-list small{color:#777}.confirm-delete{display:flex;gap:8px;align-items:center;margin:18px 0;padding:12px;border-radius:12px;background:#fff0f2}

.profile-reference-screen{min-height:100%;background:#eef2ff}
.reference-profile-form{display:flex;min-height:calc(100vh - 132px);flex-direction:column;align-items:center;padding:25px 16px 30px;border-radius:15px;background:#fff;color:#172a70}
.reference-profile-avatar{position:relative;display:inline-block;margin-top:2px}
.reference-profile-avatar .avatar{width:104px;height:104px;border:5px solid #fff;box-shadow:0 0 0 6px #ffac0b}
.profile-camera-button{position:absolute;right:30px;bottom:-11px;width:45px;height:45px;border:4px solid #ffb50d;border-radius:50%;color:#fff;background:#123d99;box-shadow:0 3px 0 #7c39ca}
.profile-camera-button span{position:absolute;top:13px;left:9px;width:19px;height:14px;border:2px solid #fff;border-radius:3px}.profile-camera-button span::before{content:"";position:absolute;top:-5px;left:5px;width:7px;height:4px;border-radius:2px 2px 0 0;background:#fff}.profile-camera-button span::after{content:"";position:absolute;top:3px;left:6px;width:5px;height:5px;border:2px solid #fff;border-radius:50%}
.reference-profile-form h2{margin:18px 0 10px;color:#102b77;font-size:21px}
.profile-avatar-picker{display:grid;width:100%;grid-template-columns:repeat(4,1fr);gap:8px;margin:7px 0 14px;padding:10px;border:2px solid #d4aa4c;border-radius:15px;background:#f7f7fb}
.profile-avatar-picker[hidden]{display:none}.profile-avatar-picker .avatar-option{margin:auto}.profile-avatar-picker .avatar{width:50px;height:50px}
.reference-profile-level{width:100%;max-width:360px;margin:0 0 16px}
.reference-profile-level .player-level{width:100%;margin:0}.reference-profile-level .player-level>span{color:#1d3479}.reference-profile-level .player-level>small{color:#6e7191}
.reference-profile-field{width:100%;margin:0 0 17px}
.reference-profile-field label{display:block;margin:0 10px 6px;color:#273777;font-size:12px;font-weight:800}
.reference-profile-field input{width:100%;height:59px;padding:0 16px;border:0;border-bottom:4px solid #d4aa4c;border-radius:13px;color:#555;background:#f7f7f7;font:700 16px/1 inherit;outline:none}
.reference-profile-field input:focus{box-shadow:0 0 0 3px #8e39df44}
.reference-profile-field input[readonly]{color:#6c6c74}
.reference-profile-submit{min-width:220px;margin-top:auto;padding:12px 28px;border:4px solid #ffb20d;border-radius:999px;color:#fff;background:linear-gradient(180deg,#174bb0,#092c88);font:900 16px/1.2 inherit;box-shadow:0 3px 0 #7339cb}
.profile-public-screen{padding-bottom:38px;background:#092b87 url("../assets/domino/home-texture.png?v=20260727b") center/cover}
.profile-summary-loading{padding:80px 15px;color:#fff;text-align:center;font-weight:900}
.public-profile-identity{position:relative;display:flex;flex-direction:column;align-items:center;margin:22px 0 14px;padding:26px 16px 18px;border:3px solid #a968f2;border-radius:24px;color:#fff;background:linear-gradient(160deg,#5722a7,#102f8a);box-shadow:0 7px 0 #ffb20d}
.public-profile-identity>.avatar{width:112px;height:112px;border:6px solid #fff;box-shadow:0 0 0 6px #ffb20d}
.public-profile-identity h2{margin:16px 0 4px;color:#fff;font-size:25px}
.profile-edit-shortcut{position:absolute;top:15px;left:15px;display:grid;width:45px;height:45px;place-items:center;border:4px solid #ffbd14;border-radius:50%;color:#fff;background:#0b3694;font-size:24px;font-weight:900}
.public-player-id{direction:ltr;color:#5ce6ff;font-size:16px}.public-player-id b{color:#fff}
.public-profile-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:12px}.public-profile-meta span{padding:5px 9px;border:1px solid #ffffff55;border-radius:99px;background:#ffffff1b;font-size:11px;font-weight:800}
.public-profile-bio{width:100%;margin:14px 0 0;padding:11px;border-radius:12px;background:#150d5d99;text-align:center;line-height:1.6}
.public-profile-level-card{margin:14px 0;padding:16px;border:3px solid #ae68ef;border-radius:18px;color:#172d78;background:#fff;box-shadow:0 6px 0 #ffb10e}.public-profile-level-card .player-level{margin:0}.public-profile-level-card>strong{display:block;margin-top:9px;text-align:center;font-size:12px}
.profile-reference-section{margin:14px 0;padding:17px 13px;border:3px solid #a764eb;border-radius:20px;background:linear-gradient(145deg,#2d197d,#14358e);box-shadow:0 6px 0 #ffb10d}.profile-reference-section>h2{margin:-17px -13px 14px;padding:12px 16px;border-radius:17px 17px 0 0;color:#fff;background:linear-gradient(180deg,#ac5df3,#7121ce);font-size:19px}
.profile-stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.profile-stats-grid article{display:grid;min-height:76px;place-items:center;padding:9px;border:2px solid #ffffff30;border-radius:13px;color:#fff;background:#092e87}.profile-stats-grid strong{color:#ffd32b;font-size:23px}.profile-stats-grid span{font-size:11px;font-weight:800}
.profile-rank-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-rank-summary article{display:grid;gap:7px;padding:13px 8px;border:3px solid #aa61e9;border-radius:15px;color:#fff;background:#0d3b98;text-align:center}.profile-rank-summary span{color:#ffd42e;font-size:11px;font-weight:900}.profile-rank-summary strong{font-size:14px}
.reference-profile-id{display:flex;width:100%;align-items:center;justify-content:space-between;margin:0 0 17px;padding:12px 14px;border:2px solid #d7cdf0;border-radius:13px;color:#243578;background:#f6f3fc}.reference-profile-id b{direction:ltr;color:#7130c8}
.reference-profile-field select,.reference-profile-field textarea{width:100%;padding:12px 16px;border:0;border-bottom:4px solid #d4aa4c;border-radius:13px;color:#555;background:#f7f7f7;font:700 15px/1.4 inherit;outline:none}.reference-profile-field select{height:59px}.reference-profile-field textarea{min-height:105px;resize:vertical}
.profile-privacy-choice{display:flex;width:100%;align-items:center;gap:9px;margin:-8px 0 16px;padding:10px 12px;border:1px solid #ded3f3;border-radius:12px;color:#243578;background:#f8f5ff;font-size:12px;font-weight:800}.profile-privacy-choice input{width:20px;height:20px;accent-color:#7d25da}

/* Domino appearances rebuilt from the approved Figma Skins frame. */
.cosmetics-screen{min-height:100%;padding-bottom:42px;background:#092b87 url("../assets/domino/home-texture.png?v=20260727b") center top/100% auto repeat-y}
.cosmetics-topbar{position:relative;display:grid;min-height:112px;place-items:center;margin:0 -18px 16px;border-radius:0 0 26px 26px;background:linear-gradient(150deg,#b36dff,#751cda);box-shadow:0 8px 0 #4a1da9}
.cosmetics-topbar h1{margin:0;font-size:25px}.cosmetics-topbar .round-back{position:absolute;top:25px;left:18px;width:58px;height:58px}
.cosmetics-loading{padding:90px 10px;color:#fff;text-align:center;font-weight:900}
.cosmetics-game-strip{display:flex;justify-content:center;margin:26px 32px 24px;padding:10px;border-radius:20px;background:linear-gradient(180deg,#3e2d87dd,#26175fdd);box-shadow:inset 0 1px #ffffff55,0 5px 12px #18064e}
.cosmetics-game-strip button{display:flex;align-items:center;gap:9px;padding:8px 25px;border:0;border-top:5px solid #ffbb13;border-radius:12px;color:#ffd228;background:#301673;font-weight:900}
.cosmetics-game-icon{position:relative;width:30px;height:24px;transform:rotate(-26deg)}
.cosmetics-game-icon::before,.cosmetics-game-icon::after{content:"";position:absolute;width:10px;height:22px;border:2px solid #fff;border-radius:3px;background:#f7fbff;box-shadow:0 2px 0 #7a78a2}
.cosmetics-game-icon::before{right:4px}.cosmetics-game-icon::after{left:4px}
.cosmetics-tabs{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(100%,350px);margin:0 auto 24px}
.cosmetics-tabs button{min-height:53px;border:4px solid #8d3ce0;border-radius:18px;color:#fff;background:linear-gradient(180deg,#a44cf1,#6d1bcc);box-shadow:inset 0 0 0 2px #ffffff24,0 4px 0 #321275;font-size:17px;font-weight:900}
.cosmetics-tabs button[aria-selected="true"]{border-color:#ffbd16;background:linear-gradient(180deg,#ffbd23,#ff8f0d);box-shadow:inset 0 0 0 2px #fff5,0 4px 0 #773486}
.cosmetics-ribbon{width:65%;margin:0 auto 22px;padding:12px 18px;clip-path:polygon(7% 0,93% 0,100% 50%,88% 100%,12% 100%,0 50%);color:#fff;background:linear-gradient(180deg,#b159f4,#711bd2);text-align:center;font-size:20px;text-shadow:0 2px #50208b}
.cosmetics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));direction:ltr;gap:15px 11px}
.cosmetic-card{position:relative;display:grid;aspect-ratio:299/317;place-items:center;overflow:hidden;padding:14%;border:3px solid #fff;border-radius:16px;background:linear-gradient(155deg,#be76ff,#7620d3 70%);box-shadow:0 5px 0 #5a268f,0 5px 14px #16064888}
.cosmetic-card::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 58%,rgba(255,255,255,.13) 0 3deg,transparent 3deg 15deg);opacity:.7}
.cosmetic-card::after{content:"";position:absolute;top:0;right:0;width:34%;aspect-ratio:1;clip-path:polygon(0 0,100% 0,100% 100%);background:#fff}
.cosmetic-card:active{transform:translateY(2px)}
.cosmetic-card.selected{border-color:#fff}
.cosmetic-selection{position:absolute;z-index:4;top:0;right:2px;display:grid;width:30%;aspect-ratio:1;place-items:center;color:#43d967;font-size:28px;font-weight:900;line-height:1}
.cosmetic-background-preview{position:relative;z-index:2;display:block;width:100%;aspect-ratio:1;border:4px solid #ffbd11;border-radius:16px;background:var(--skin-image) center/cover;box-shadow:0 3px 0 #6b238b}
.cosmetic-domino-preview{position:relative;z-index:2;display:block;width:46%;aspect-ratio:1/2;border:2px solid #171040;border-radius:5px;background:#fff;box-shadow:0 3px 0 #39105d}
.cosmetic-domino-preview::after{content:"";position:absolute;top:50%;right:0;left:0;border-top:2px solid #171040}
.cosmetic-domino-preview i{position:absolute;inset:0;border-radius:3px;background:inherit}
.cosmetic-domino-preview b{position:absolute;z-index:2;width:15%;aspect-ratio:1;border-radius:50%;background:#16073c}
.cosmetic-domino-preview b:nth-of-type(1){top:13%;left:18%}.cosmetic-domino-preview b:nth-of-type(2){top:13%;right:18%}.cosmetic-domino-preview b:nth-of-type(3){top:38%;left:42%}.cosmetic-domino-preview b:nth-of-type(4){bottom:13%;left:18%}.cosmetic-domino-preview b:nth-of-type(5){right:18%;bottom:13%}.cosmetic-domino-preview b:nth-of-type(6){right:42%;bottom:38%}
.cosmetic-domino-preview.skin-0{background:#d8f4ff url("../assets/domino/skins/domino-0.png?v=20260728-skins3") center/cover;border-color:#b8efff}
.cosmetic-domino-preview.skin-1{background:#e6a94e url("../assets/domino/skins/domino-1.png?v=20260728-skins3") center/cover;border-color:#7b3f16}
.cosmetic-domino-preview.skin-2{background:#9b0054;border-color:#ffafd8}.cosmetic-domino-preview.skin-2 b{background:#fff}.cosmetic-domino-preview.skin-2::after{border-color:#fff}
.cosmetic-domino-preview.skin-3{background:#ff7a1d url("../assets/domino/skins/domino-3.png?v=20260728-skins3") center/cover;border-color:#ffad24}
.cosmetic-domino-preview.skin-4{background:#fff;border-color:#d8d5e9}
@media(max-width:380px){.cosmetics-grid{gap:12px 8px}.cosmetic-card{border-radius:13px}.cosmetic-selection{font-size:23px}}