.op-shop-page{display:grid;gap:14px;margin-top:14px} .op-shop-admin-note{display:grid;gap:5px;padding:13px 15px;border-color:rgba(255,202,97,.34);background:linear-gradient(180deg,rgba(92,66,16,.22),rgba(12,20,43,.88))} .op-shop-admin-note strong{font-size:12px;color:#ffe7ae} .op-shop-admin-note span{font-size:10px;line-height:1.45;color:#d9def0} .op-shop-avatar-fallback{ display:flex;align-items:center;justify-content:center; width:100%;height:100%; background: radial-gradient(circle at 30% 25%,rgba(122,161,255,.24),transparent 28%), linear-gradient(180deg,rgba(24,38,77,.98),rgba(8,14,33,.98)); color:#eef4ff; font-size:34px; font-weight:950; letter-spacing:.08em; } .op-shop-preview-btn{ border-style:dashed; font-size:10px; } .op-shop-hero{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px; position:relative; overflow:hidden; } .op-shop-kicker{margin-bottom:6px;color:#f8c869;font-size:10px;font-weight:950;letter-spacing:.15em} .op-shop-hero h2{margin:0 0 8px;font-size:27px;font-weight:950} .op-shop-hero p{max-width:680px;margin:0;color:var(--muted);font-size:12px;line-height:1.55} .op-shop-wallet{flex:0 0 auto;display:grid;justify-items:end;gap:4px;min-width:190px;padding:13px 15px;border:1px solid rgba(245,158,11,.42);border-radius:14px;background:linear-gradient(180deg,rgba(136,84,14,.26),rgba(58,34,8,.24))} .op-shop-wallet-label{color:#d5c18e;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em} .op-shop-wallet strong{color:#ffe19a;font-size:22px;font-weight:950} .op-shop-wallet strong span{color:#ffd36f;text-shadow:0 0 9px rgba(255,211,111,.6)} .op-shop-wallet small{color:#a99d82;font-size:9px} .op-shop-message{padding:11px 14px;font-size:12px;font-weight:800} .op-shop-message-ok{border-color:rgba(73,255,155,.34);background:rgba(18,92,59,.20)} .op-shop-message-error{border-color:rgba(255,92,92,.38);background:rgba(115,28,43,.24)} .op-shop-connect{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-color:rgba(145,71,255,.34)} .op-shop-connect div{display:grid;gap:4px} .op-shop-connect strong{font-size:12px} .op-shop-connect span{color:var(--muted);font-size:10px;line-height:1.4} .op-shop-connect a{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border:1px solid rgba(168,85,247,.48);border-radius:10px;background:rgba(91,33,182,.28);color:#f4eaff;font-size:10px;font-weight:950;text-decoration:none;white-space:nowrap} .op-shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .op-shop-item{ position:relative; display:flex; flex-direction:column; min-width:0; padding:14px; overflow:hidden; isolation:isolate; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease; } .op-shop-item::before, .op-shop-item::after{ content:""; position:absolute; inset:auto; pointer-events:none; z-index:0; } .op-shop-item::before{ inset:0; border-radius:inherit; background: radial-gradient(circle at 18% 18%,rgba(106,148,255,.10),transparent 30%), linear-gradient(180deg,rgba(255,255,255,.02),transparent 35%); opacity:.95; } .op-shop-item::after{display:none} .op-shop-item > *{position:relative;z-index:1} .op-shop-item:hover{transform:translateY(-2px);border-color:rgba(66,92,158,.95);box-shadow:0 10px 24px rgba(0,0,0,.23)} .op-shop-item.is-active{border-color:rgba(245,158,11,.48);box-shadow:0 0 0 1px rgba(245,158,11,.08),0 10px 24px rgba(0,0,0,.20)} .op-shop-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px;margin-bottom:10px} .op-shop-badge,.op-shop-active-badge,.op-shop-owned-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.08em} .op-shop-badge{border:1px solid rgba(125,161,255,.22);background:rgba(75,102,171,.13);color:#aebfe9} .op-shop-active-badge{border:1px solid rgba(245,158,11,.34);background:rgba(120,71,8,.20);color:#ffe09a} .op-shop-owned-badge{border:1px solid rgba(73,255,155,.25);background:rgba(18,92,59,.18);color:#a8ffd0} .op-shop-badge-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .op-shop-flash-badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border:1px solid rgba(255,82,157,.72);border-radius:999px;background:linear-gradient(180deg,rgba(174,24,97,.72),rgba(92,10,61,.78));color:#ffe5f2;font-size:8px;font-weight:950;letter-spacing:.08em;box-shadow:0 0 12px rgba(255,58,147,.22)} .op-shop-flash-timer{ display:inline-flex; align-items:center; justify-content:center; min-height:20px; padding:2px 7px; border:1px solid rgba(255,185,221,.42); border-radius:999px; background:rgba(35,8,34,.64); color:#fff0f8; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; line-height:1; font-weight:950; letter-spacing:.045em; font-variant-numeric:tabular-nums; white-space:nowrap; box-shadow:0 0 10px rgba(255,58,147,.18); } .op-shop-avatar-wrap{width:148px;height:148px;margin:2px auto 14px;overflow:hidden;border:1px solid rgba(84,108,171,.55);border-radius:18px;background:#0b1230;box-shadow:0 10px 26px rgba(0,0,0,.26)} .op-shop-avatar{display:block;width:100%;height:100%;object-fit:cover;object-position:center} .op-shop-item-copy{text-align:center} .op-shop-item-copy h3{margin:0;color:#fff;font-size:20px;font-weight:950;letter-spacing:.04em} .op-shop-role{margin-top:3px;color:#8fa9df;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em} .op-shop-item-copy p{min-height:44px;margin:10px 0 0;color:var(--muted);font-size:10px;line-height:1.45} .op-shop-item-footer{display:grid;gap:10px;margin-top:auto;padding-top:15px} .op-shop-price{display:flex;align-items:center;justify-content:center;gap:6px;color:#ffe09a;font-size:15px;font-weight:950} .op-shop-price span{color:#ffd36f;text-shadow:0 0 8px rgba(255,211,111,.55)} .op-shop-price.is-free{color:#8fffc0} .op-shop-price-original{color:#7886a8;text-decoration:line-through;text-decoration-thickness:2px;text-shadow:none} .op-shop-price-sale{color:#ffb3d8;text-shadow:0 0 9px rgba(255,73,160,.42)} .op-shop-item-footer form{margin:0} .op-shop-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:38px;padding:8px 10px;border:1px solid rgba(88,111,172,.62);border-radius:11px;background:rgba(25,42,84,.74);color:#eaf0ff;font-size:11px;font-weight:950;text-decoration:none;cursor:pointer} .op-shop-btn:hover:not(:disabled){filter:brightness(1.08)} .op-shop-btn.is-buy{border-color:rgba(245,158,11,.48);background:linear-gradient(180deg,rgba(151,91,13,.48),rgba(90,49,5,.48));color:#fff0bd} .op-shop-btn.is-active,.op-shop-btn:disabled{cursor:default;opacity:.68} .op-shop-item[data-assistant="schnurri"], .op-shop-item[data-assistant="locke"]{ border-color:rgba(236,179,61,.74); background: radial-gradient(circle at 85% 16%,rgba(255,223,134,.22),transparent 20%), radial-gradient(circle at 16% 88%,rgba(255,184,61,.20),transparent 28%), linear-gradient(180deg,rgba(132,92,21,.30),rgba(21,31,60,.92) 32%,rgba(9,16,37,.99) 100%); box-shadow: 0 0 0 1px rgba(236,179,61,.10), 0 14px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,240,205,.08); } .op-shop-item[data-assistant="schnurri"]::before, .op-shop-item[data-assistant="locke"]::before{ inset:0; border-radius:inherit; background: radial-gradient(circle at 82% 16%,rgba(255,227,157,.20) 0 4px,transparent 5px), radial-gradient(circle at 88% 20%,rgba(255,227,157,.18) 0 8px,transparent 9px), radial-gradient(circle at 74% 24%,rgba(255,227,157,.16) 0 5px,transparent 6px), radial-gradient(circle at 92% 28%,rgba(255,227,157,.18) 0 13px,transparent 14px), radial-gradient(circle at 78% 34%,rgba(255,227,157,.16) 0 6px,transparent 7px), radial-gradient(circle at 86% 40%,rgba(255,227,157,.18) 0 10px,transparent 11px), radial-gradient(circle at 70% 48%,rgba(255,227,157,.14) 0 8px,transparent 9px), radial-gradient(circle at 90% 54%,rgba(255,227,157,.16) 0 15px,transparent 16px), radial-gradient(circle at 76% 62%,rgba(255,227,157,.14) 0 9px,transparent 10px), radial-gradient(circle at 84% 72%,rgba(255,227,157,.12) 0 6px,transparent 7px), radial-gradient(circle at 24% 18%,rgba(255,194,82,.12),transparent 26%), linear-gradient(180deg,rgba(255,236,184,.08),transparent 34%); } .op-shop-item[data-assistant="schnurri"]::after, .op-shop-item[data-assistant="locke"]::after{ display:block; inset:0; border-radius:inherit; background: /* obere, stark überlappende Schaumkante */ radial-gradient(circle at 1% 1%,rgba(232,221,190,.64) 0 5px,rgba(211,188,135,.22) 6px,transparent 8px), radial-gradient(circle at 5% 3%,rgba(226,214,181,.58) 0 4px,transparent 6px), radial-gradient(circle at 9% 1%,rgba(235,224,194,.62) 0 6px,rgba(210,188,138,.20) 7px,transparent 9px), radial-gradient(circle at 13% 4%,rgba(224,211,176,.56) 0 4px,transparent 6px), radial-gradient(circle at 17% 1%,rgba(235,223,192,.62) 0 5px,transparent 7px), radial-gradient(circle at 21% 3%,rgba(229,217,184,.58) 0 6px,rgba(210,188,138,.18) 7px,transparent 9px), radial-gradient(circle at 25% 1%,rgba(236,225,195,.64) 0 4px,transparent 6px), radial-gradient(circle at 29% 4%,rgba(224,211,176,.54) 0 5px,transparent 7px), radial-gradient(circle at 33% 1%,rgba(235,223,192,.62) 0 6px,transparent 8px), radial-gradient(circle at 37% 3%,rgba(228,216,183,.58) 0 4px,transparent 6px), radial-gradient(circle at 41% 1%,rgba(236,225,195,.64) 0 5px,rgba(210,188,138,.18) 6px,transparent 8px), radial-gradient(circle at 45% 4%,rgba(224,211,176,.55) 0 6px,transparent 8px), radial-gradient(circle at 49% 1%,rgba(235,223,192,.62) 0 4px,transparent 6px), radial-gradient(circle at 53% 3%,rgba(229,217,184,.58) 0 5px,transparent 7px), radial-gradient(circle at 57% 1%,rgba(236,225,195,.63) 0 6px,rgba(210,188,138,.18) 7px,transparent 9px), radial-gradient(circle at 61% 4%,rgba(224,211,176,.54) 0 4px,transparent 6px), radial-gradient(circle at 65% 1%,rgba(235,223,192,.61) 0 5px,transparent 7px), radial-gradient(circle at 69% 3%,rgba(229,217,184,.57) 0 6px,transparent 8px), radial-gradient(circle at 73% 1%,rgba(236,225,195,.63) 0 4px,transparent 6px), radial-gradient(circle at 77% 4%,rgba(224,211,176,.54) 0 5px,transparent 7px), radial-gradient(circle at 81% 1%,rgba(235,223,192,.61) 0 6px,transparent 8px), radial-gradient(circle at 85% 3%,rgba(229,217,184,.57) 0 4px,transparent 6px), radial-gradient(circle at 89% 1%,rgba(236,225,195,.63) 0 5px,rgba(210,188,138,.18) 6px,transparent 8px), radial-gradient(circle at 93% 4%,rgba(224,211,176,.54) 0 6px,transparent 8px), radial-gradient(circle at 97% 1%,rgba(235,223,192,.60) 0 4px,transparent 6px), radial-gradient(circle at 100% 3%,rgba(227,215,182,.56) 0 5px,transparent 7px), /* zweite Reihe: kleine Bläschen, bewusst überlappend */ radial-gradient(circle at 3% 8%,rgba(221,207,171,.44) 0 3px,transparent 4px), radial-gradient(circle at 7% 10%,rgba(230,218,187,.48) 0 4px,transparent 5px), radial-gradient(circle at 11% 8%,rgba(218,204,169,.42) 0 2px,transparent 3px), radial-gradient(circle at 15% 11%,rgba(229,217,184,.46) 0 3px,transparent 4px), radial-gradient(circle at 19% 8%,rgba(221,207,171,.44) 0 4px,transparent 5px), radial-gradient(circle at 23% 11%,rgba(230,218,187,.47) 0 2px,transparent 3px), radial-gradient(circle at 27% 8%,rgba(218,204,169,.42) 0 3px,transparent 4px), radial-gradient(circle at 31% 10%,rgba(229,217,184,.46) 0 4px,transparent 5px), radial-gradient(circle at 35% 8%,rgba(221,207,171,.43) 0 2px,transparent 3px), radial-gradient(circle at 39% 11%,rgba(230,218,187,.47) 0 3px,transparent 4px), radial-gradient(circle at 43% 8%,rgba(218,204,169,.41) 0 4px,transparent 5px), radial-gradient(circle at 47% 10%,rgba(229,217,184,.45) 0 2px,transparent 3px), radial-gradient(circle at 51% 8%,rgba(221,207,171,.43) 0 3px,transparent 4px), radial-gradient(circle at 55% 11%,rgba(230,218,187,.47) 0 4px,transparent 5px), radial-gradient(circle at 59% 8%,rgba(218,204,169,.41) 0 2px,transparent 3px), radial-gradient(circle at 63% 10%,rgba(229,217,184,.45) 0 3px,transparent 4px), radial-gradient(circle at 67% 8%,rgba(221,207,171,.43) 0 4px,transparent 5px), radial-gradient(circle at 71% 11%,rgba(230,218,187,.47) 0 2px,transparent 3px), radial-gradient(circle at 75% 8%,rgba(218,204,169,.41) 0 3px,transparent 4px), radial-gradient(circle at 79% 10%,rgba(229,217,184,.45) 0 4px,transparent 5px), radial-gradient(circle at 83% 8%,rgba(221,207,171,.43) 0 2px,transparent 3px), radial-gradient(circle at 87% 11%,rgba(230,218,187,.47) 0 3px,transparent 4px), radial-gradient(circle at 91% 8%,rgba(218,204,169,.41) 0 4px,transparent 5px), radial-gradient(circle at 95% 10%,rgba(229,217,184,.45) 0 2px,transparent 3px), radial-gradient(circle at 99% 8%,rgba(221,207,171,.43) 0 3px,transparent 4px), /* weicher Schaum-/Bierübergang */ linear-gradient(180deg,rgba(219,198,148,.18) 0%,rgba(197,160,87,.08) 12%,transparent 25%); opacity:.88; } .op-shop-item[data-assistant="schnurri"]:hover, .op-shop-item[data-assistant="locke"]:hover{ border-color:rgba(248,191,65,.92); box-shadow: 0 0 0 1px rgba(248,191,65,.16), 0 16px 32px rgba(0,0,0,.28), 0 0 30px rgba(248,191,65,.12); } .op-shop-item[data-assistant="schnurri"].is-active, .op-shop-item[data-assistant="locke"].is-active{ border-color:rgba(255,205,95,.98); box-shadow: 0 0 0 1px rgba(255,205,95,.22), 0 0 30px rgba(255,205,95,.18), 0 16px 32px rgba(0,0,0,.28); } .op-shop-item[data-assistant="schnurri"] .op-shop-badge, .op-shop-item[data-assistant="locke"] .op-shop-badge, .op-shop-item[data-assistant="schnurri"] .op-shop-active-badge, .op-shop-item[data-assistant="locke"] .op-shop-active-badge, .op-shop-item[data-assistant="schnurri"] .op-shop-owned-badge, .op-shop-item[data-assistant="locke"] .op-shop-owned-badge{ border-color:rgba(255,219,143,.40); background:rgba(136,89,10,.28); color:#ffeab3; } .op-shop-item[data-assistant="schnurri"] .op-shop-avatar-wrap, .op-shop-item[data-assistant="locke"] .op-shop-avatar-wrap{ border-color:rgba(244,188,67,.72); background:linear-gradient(180deg,rgba(40,46,77,.98),rgba(10,15,33,.98)); box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(244,188,67,.08), 0 0 24px rgba(244,188,67,.14); } .op-shop-item[data-assistant="schnurri"] .op-shop-role, .op-shop-item[data-assistant="locke"] .op-shop-role{color:#ffe19a} .op-shop-item[data-assistant="schnurri"] .op-shop-item-copy p, .op-shop-item[data-assistant="locke"] .op-shop-item-copy p{color:#dde1ee} .op-shop-item[data-assistant="schnurri"] .op-shop-price, .op-shop-item[data-assistant="locke"] .op-shop-price{color:#fff0c2} .op-shop-item[data-assistant="schnurri"] .op-shop-price span, .op-shop-item[data-assistant="locke"] .op-shop-price span{color:#ffd56f;text-shadow:0 0 10px rgba(255,213,111,.68)} .op-shop-item[data-assistant="schnurri"] .op-shop-btn, .op-shop-item[data-assistant="locke"] .op-shop-btn{ border-color:rgba(241,184,67,.48); background:rgba(58,41,10,.54); } .op-shop-item[data-assistant="schnurri"] .op-shop-btn.is-buy, .op-shop-item[data-assistant="locke"] .op-shop-btn.is-buy{ border-color:rgba(255,209,113,.78); background:linear-gradient(180deg,rgba(188,124,21,.66),rgba(93,58,7,.62)); color:#fff5d2; } .op-shop-item[data-assistant="schnurri"] .op-shop-preview-btn, .op-shop-item[data-assistant="locke"] .op-shop-preview-btn{ border-color:rgba(255,219,143,.56); background:rgba(74,51,11,.46); color:#ffe9b6; } .op-shop-item[data-assistant="nova84"]{ border-color:rgba(219,107,255,.62); background: radial-gradient(circle at 85% 18%,rgba(111,233,255,.20),transparent 20%), radial-gradient(circle at 18% 84%,rgba(255,84,203,.18),transparent 30%), linear-gradient(180deg,rgba(66,23,107,.30),rgba(16,23,58,.94) 36%,rgba(7,12,29,.98) 100%); box-shadow: 0 0 0 1px rgba(219,107,255,.08), 0 12px 28px rgba(0,0,0,.24), 0 0 24px rgba(111,233,255,.08); } .op-shop-item[data-assistant="nova84"]::before{ inset:0; border-radius:inherit; background: radial-gradient(circle at 18% 18%,rgba(255,111,214,.16),transparent 20%), radial-gradient(circle at 80% 22%,rgba(111,233,255,.18),transparent 24%), linear-gradient(135deg,rgba(255,111,214,.08),transparent 42%), linear-gradient(180deg,rgba(130,66,255,.08),transparent 34%); } .op-shop-item[data-assistant="nova84"] .op-shop-badge, .op-shop-item[data-assistant="nova84"] .op-shop-active-badge, .op-shop-item[data-assistant="nova84"] .op-shop-owned-badge{ border-color:rgba(223,153,255,.34); background:rgba(94,40,143,.26); color:#f1d5ff; } .op-shop-item[data-assistant="nova84"] .op-shop-avatar-wrap{ border-color:rgba(111,233,255,.52); box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 22px rgba(111,233,255,.12); } .op-shop-item[data-assistant="nova84"] .op-shop-avatar-fallback{ background: radial-gradient(circle at 28% 22%,rgba(255,120,214,.26),transparent 20%), linear-gradient(180deg,rgba(68,24,122,.98),rgba(10,16,35,.98)); color:#f7e8ff; } .op-shop-item[data-assistant="nova84"] .op-shop-role{color:#cab8ff} .op-shop-item[data-assistant="nova84"] .op-shop-btn{border-color:rgba(192,122,255,.46);background:rgba(56,29,95,.40)} .op-shop-item[data-assistant="nova84"] .op-shop-btn.is-buy{border-color:rgba(111,233,255,.68);background:linear-gradient(180deg,rgba(104,52,177,.68),rgba(45,21,97,.68));color:#eef8ff} .op-shop-item[data-assistant="nova84"] .op-shop-preview-btn{border-color:rgba(111,233,255,.60);background:rgba(33,47,93,.46);color:#dffbff} .op-shop-info,.op-shop-history{padding:17px} .op-shop-info h3,.op-shop-history h3{margin:0 0 12px;font-size:14px;font-weight:950} .op-shop-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .op-shop-info-grid>div{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:11px;background:rgba(9,18,41,.36)} .op-shop-info-grid strong{color:#f3c96f;font-size:15px} .op-shop-info-grid span{color:#c7d3ef;font-size:10px;line-height:1.35} .op-shop-history-list{display:grid;gap:7px} .op-shop-history-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:rgba(9,18,41,.32)} .op-shop-history-row span{font-size:11px;font-weight:900} .op-shop-history-row strong{color:#ffcc77;font-size:10px} .op-shop-history-row small{color:var(--muted);font-size:9px} @media(max-width:850px){ .op-shop-grid{grid-template-columns:1fr} .op-shop-item{display:grid;grid-template-columns:130px minmax(0,1fr);column-gap:14px} .op-shop-item-top{grid-column:1/-1} .op-shop-avatar-wrap{width:120px;height:120px;margin:0} .op-shop-item-copy{text-align:left} .op-shop-item-copy p{min-height:0} .op-shop-item-footer{grid-column:1/-1} .op-shop-info-grid{grid-template-columns:1fr} } @media(max-width:640px){ .op-shop-hero{align-items:stretch;flex-direction:column} .op-shop-wallet{justify-items:start;min-width:0} .op-shop-connect{align-items:flex-start;flex-direction:column} .op-shop-item{display:flex} .op-shop-avatar-wrap{width:138px;height:138px;margin:2px auto 12px} .op-shop-item-copy{text-align:center} .op-shop-history-row{grid-template-columns:1fr auto} .op-shop-history-row small{grid-column:1/-1} } /* Profilbilder V1 */ .op-shop-section-head{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:15px 17px;scroll-margin-top:14px; } .op-shop-section-head h3{margin:2px 0 4px;font-size:18px;font-weight:950} .op-shop-section-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.45} .op-shop-section-kicker{color:#7dd3fc;font-size:9px;font-weight:950;letter-spacing:.14em} .op-shop-section-head>a{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:8px 11px;border:1px solid rgba(125,211,252,.28);border-radius:10px;background:rgba(30,64,175,.22);color:#e7f4ff;font-size:9px;font-weight:950;text-decoration:none;white-space:nowrap} .op-profile-avatar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .op-profile-avatar-item{display:flex;flex-direction:column;min-width:0;padding:13px;overflow:hidden;background:linear-gradient(180deg,rgba(14,27,66,.96),rgba(7,14,34,.98))} .op-profile-avatar-item.is-active{border-color:rgba(73,255,155,.48);box-shadow:0 0 20px rgba(73,255,155,.06)} .op-profile-avatar-top{display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:23px} .op-profile-rarity{display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border:1px solid rgba(125,161,255,.24);border-radius:999px;background:rgba(75,102,171,.12);color:#b9c7e8;font-size:8px;font-weight:950;letter-spacing:.07em} .op-profile-rarity.rarity-uncommon{border-color:rgba(94,234,212,.38);color:#99f6e4}.op-profile-rarity.rarity-rare{border-color:rgba(96,165,250,.42);color:#bfdbfe}.op-profile-rarity.rarity-epic{border-color:rgba(192,132,252,.46);color:#e9d5ff}.op-profile-rarity.rarity-legendary{border-color:rgba(245,158,11,.48);color:#fde68a}.op-profile-rarity.rarity-mythic{border-color:rgba(255,107,214,.50);color:#ffd0f3;background:rgba(112,24,100,.18)} .op-profile-avatar-portrait{display:flex;align-items:center;justify-content:center;width:116px;height:116px;margin:10px auto;overflow:hidden;border:3px solid rgba(125,161,255,.34);border-radius:50%;background:#071027;color:#edf4ff;font-size:25px;font-weight:950;box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(74,119,255,.10)} .op-profile-avatar-portrait img{display:block;width:100%;height:100%;object-fit:cover} .op-profile-avatar-portrait.rarity-uncommon{border-color:#5eead4}.op-profile-avatar-portrait.rarity-rare{border-color:#60a5fa}.op-profile-avatar-portrait.rarity-epic{border-color:#c084fc}.op-profile-avatar-portrait.rarity-legendary{border-color:#f59e0b;box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(245,158,11,.18)}.op-profile-avatar-portrait.rarity-mythic{border-color:#ff6bd6;box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 22px rgba(255,107,214,.25)} .op-profile-avatar-copy{text-align:center;min-width:0} .op-profile-avatar-copy h4{margin:0;overflow:hidden;color:#fff;font-size:15px;font-weight:950;text-overflow:ellipsis;white-space:nowrap} .op-profile-avatar-copy span{display:block;margin-top:3px;overflow:hidden;color:#93a5d0;font-size:8px;font-weight:850;text-overflow:ellipsis;white-space:nowrap} .op-profile-avatar-footer{display:grid;gap:9px;margin-top:auto;padding-top:12px} .op-profile-avatar-footer form{margin:0} .op-shop-history-type{margin-left:5px;color:#8fa4d4;font-size:8px;font-weight:850} @media(max-width:900px){.op-profile-avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){ .op-shop-section-head{align-items:flex-start;flex-direction:column} .op-shop-section-head>a{width:100%;box-sizing:border-box} .op-profile-avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .op-profile-avatar-item{padding:10px} .op-profile-avatar-portrait{width:86px;height:86px} .op-profile-avatar-copy h4{font-size:12px} .op-profile-avatar-top{align-items:flex-start;flex-direction:column} .op-profile-avatar-footer .op-shop-btn{font-size:9px} } @media(max-width:390px){.op-profile-avatar-grid{grid-template-columns:1fr}.op-profile-avatar-portrait{width:104px;height:104px}.op-profile-avatar-top{align-items:center;flex-direction:row}} /* Katalogdesign V2: ein Schema für Board-KIs und Profilbilder. */ .op-shop-item,.op-profile-avatar-item{position:relative;isolation:isolate} .op-profile-avatar-item::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none} .op-shop-item.rarity-standard,.op-profile-avatar-item.rarity-standard{ border-color:rgba(91,123,207,.48); background:linear-gradient(180deg,rgba(14,27,66,.97),rgba(7,14,34,.99)); } .op-shop-item.rarity-uncommon,.op-profile-avatar-item.rarity-uncommon{ border-color:rgba(72,212,158,.58); background:radial-gradient(circle at 50% 5%,rgba(46,220,158,.20),transparent 34%),linear-gradient(180deg,#0d342f,#071c24 70%); box-shadow:0 0 20px rgba(54,219,159,.08); } .op-shop-item.rarity-rare,.op-profile-avatar-item.rarity-rare{ border-color:rgba(59,165,255,.60); background:radial-gradient(circle at 50% 5%,rgba(54,154,255,.24),transparent 36%),linear-gradient(180deg,#102d5d,#09172f 72%); box-shadow:0 0 21px rgba(54,154,255,.09); } .op-shop-item.rarity-epic,.op-profile-avatar-item.rarity-epic{ border-color:rgba(166,92,255,.62); background:radial-gradient(circle at 50% 5%,rgba(174,77,255,.26),transparent 36%),linear-gradient(180deg,#34205d,#160f38 72%); box-shadow:0 0 22px rgba(169,79,255,.11); } .op-shop-item.rarity-legendary,.op-profile-avatar-item.rarity-legendary{ border-color:rgba(255,173,39,.66); background:radial-gradient(circle at 50% 4%,rgba(255,172,35,.28),transparent 38%),linear-gradient(180deg,#56320d,#271706 74%); box-shadow:0 0 24px rgba(255,163,28,.13); } .op-shop-item.rarity-mythic,.op-profile-avatar-item.rarity-mythic{ border-color:rgba(255,80,111,.70); background:radial-gradient(circle at 50% 5%,rgba(255,45,82,.31),transparent 39%),linear-gradient(180deg,#4b1020,#210811 74%); box-shadow:0 0 26px rgba(255,37,82,.15); } .op-shop-item.rarity-uncommon .op-shop-badge,.op-profile-avatar-item.rarity-uncommon .op-profile-rarity{border-color:rgba(72,212,158,.58);background:rgba(24,121,88,.24);color:#9dffda} .op-shop-item.rarity-rare .op-shop-badge,.op-profile-avatar-item.rarity-rare .op-profile-rarity{border-color:rgba(59,165,255,.62);background:rgba(21,86,158,.27);color:#c9e8ff} .op-shop-item.rarity-epic .op-shop-badge,.op-profile-avatar-item.rarity-epic .op-profile-rarity{border-color:rgba(166,92,255,.62);background:rgba(92,40,157,.29);color:#ead7ff} .op-shop-item.rarity-legendary .op-shop-badge,.op-profile-avatar-item.rarity-legendary .op-profile-rarity{border-color:rgba(255,173,39,.65);background:rgba(126,69,10,.30);color:#ffe7a3} .op-shop-item.rarity-mythic .op-shop-badge,.op-profile-avatar-item.rarity-mythic .op-profile-rarity{border-color:rgba(255,80,111,.66);background:rgba(135,21,48,.31);color:#ffd0d9} .op-shop-item.rarity-uncommon .op-shop-avatar-wrap,.op-profile-avatar-item.rarity-uncommon .op-profile-avatar-portrait{border-color:#48d49e;box-shadow:0 0 20px rgba(72,212,158,.20)} .op-shop-item.rarity-rare .op-shop-avatar-wrap,.op-profile-avatar-item.rarity-rare .op-profile-avatar-portrait{border-color:#3ba5ff;box-shadow:0 0 20px rgba(59,165,255,.22)} .op-shop-item.rarity-epic .op-shop-avatar-wrap,.op-profile-avatar-item.rarity-epic .op-profile-avatar-portrait{border-color:#a65cff;box-shadow:0 0 21px rgba(166,92,255,.24)} .op-shop-item.rarity-legendary .op-shop-avatar-wrap,.op-profile-avatar-item.rarity-legendary .op-profile-avatar-portrait{border-color:#ffad27;box-shadow:0 0 22px rgba(255,173,39,.25)} .op-shop-item.rarity-mythic .op-shop-avatar-wrap,.op-profile-avatar-item.rarity-mythic .op-profile-avatar-portrait{border-color:#ff506f;box-shadow:0 0 24px rgba(255,80,111,.29)} .op-shop-item.rarity-uncommon .op-shop-btn.is-buy,.op-profile-avatar-item.rarity-uncommon .op-shop-btn.is-buy{border-color:rgba(72,212,158,.64);background:linear-gradient(180deg,rgba(27,137,98,.72),rgba(11,73,59,.78));color:#eafff6} .op-shop-item.rarity-rare .op-shop-btn.is-buy,.op-profile-avatar-item.rarity-rare .op-shop-btn.is-buy{border-color:rgba(59,165,255,.66);background:linear-gradient(180deg,rgba(28,101,179,.74),rgba(15,54,113,.80));color:#edf8ff} .op-shop-item.rarity-epic .op-shop-btn.is-buy,.op-profile-avatar-item.rarity-epic .op-shop-btn.is-buy{border-color:rgba(166,92,255,.68);background:linear-gradient(180deg,rgba(102,49,175,.76),rgba(48,21,99,.82));color:#f7eeff} .op-shop-item.rarity-legendary .op-shop-btn.is-buy,.op-profile-avatar-item.rarity-legendary .op-shop-btn.is-buy{border-color:rgba(255,173,39,.70);background:linear-gradient(180deg,rgba(157,90,15,.82),rgba(84,44,5,.86));color:#fff3ca} .op-shop-item.rarity-mythic .op-shop-btn.is-buy,.op-profile-avatar-item.rarity-mythic .op-shop-btn.is-buy{border-color:rgba(255,80,111,.72);background:linear-gradient(180deg,rgba(158,25,58,.82),rgba(79,8,27,.88));color:#fff0f3} /* SCHNURRI und LOCKE: Bier-Spezial bleibt unabhängig von Mythisch erhalten. */ .op-shop-item.design-beer,.op-profile-avatar-item.design-beer{ border-color:#e4b83b; background: radial-gradient(circle at 12% 8%,rgba(255,249,203,.74) 0 5px,transparent 6px), radial-gradient(circle at 78% 13%,rgba(255,239,160,.56) 0 9px,transparent 10px), radial-gradient(circle at 91% 39%,rgba(255,218,105,.32) 0 14px,transparent 15px), radial-gradient(circle at 20% 72%,rgba(213,161,44,.22) 0 10px,transparent 11px), linear-gradient(180deg,#71602f 0 17%,#241b06 55%,#0c0e20 100%); box-shadow:0 0 24px rgba(231,183,48,.19),0 13px 28px rgba(0,0,0,.28); } .op-shop-item.design-beer::before,.op-profile-avatar-item.design-beer::before{ background:radial-gradient(circle at 64% 26%,rgba(255,246,187,.40) 0 5px,transparent 6px),radial-gradient(circle at 33% 43%,rgba(241,205,102,.25) 0 8px,transparent 9px); } .op-shop-item.design-beer .op-shop-badge,.op-profile-avatar-item.design-beer .op-profile-rarity{border-color:rgba(255,219,107,.72);background:rgba(94,67,13,.54);color:#fff0b7} .op-shop-item.design-beer .op-shop-avatar-wrap,.op-profile-avatar-item.design-beer .op-profile-avatar-portrait{border-color:#efbf3d;box-shadow:0 0 24px rgba(239,191,61,.26)} .op-shop-item.design-beer .op-shop-btn.is-buy,.op-profile-avatar-item.design-beer .op-shop-btn.is-buy{border-color:rgba(255,211,91,.78);background:linear-gradient(180deg,rgba(157,106,18,.88),rgba(83,52,4,.90));color:#fff1c2} /* Reservierte Sondereditionen für spätere eigene Motive. */ .op-shop-item.design-crimson,.op-profile-avatar-item.design-crimson{ border-color:#ff496d; background:radial-gradient(circle at 17% 17%,rgba(255,56,92,.46),transparent 21%),radial-gradient(circle at 88% 62%,rgba(177,0,47,.44),transparent 28%),repeating-linear-gradient(118deg,transparent 0 42px,rgba(255,59,91,.075) 43px 44px,transparent 45px 86px),linear-gradient(160deg,#4d071a,#170510 58%,#050816); box-shadow:0 0 27px rgba(255,37,82,.23),0 14px 34px rgba(0,0,0,.38); } .op-shop-item.design-quantum,.op-profile-avatar-item.design-quantum{ border-color:#44e8ff; background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(69,237,255,.055) 20px),repeating-linear-gradient(90deg,transparent 0 19px,rgba(156,86,255,.055) 20px),radial-gradient(circle at 74% 20%,rgba(160,72,255,.36),transparent 27%),linear-gradient(150deg,#072b43,#13103f 62%,#071426); box-shadow:0 0 25px rgba(68,232,255,.18),0 14px 34px rgba(0,0,0,.32); } .op-shop-item.design-crimson .op-shop-btn.is-buy,.op-profile-avatar-item.design-crimson .op-shop-btn.is-buy{border-color:#ff5b7a;background:linear-gradient(180deg,#a51d42,#520818);color:#fff2f5} .op-shop-item.design-quantum .op-shop-btn.is-buy,.op-profile-avatar-item.design-quantum .op-shop-btn.is-buy{border-color:#44e8ff;background:linear-gradient(180deg,rgba(32,133,174,.86),rgba(70,31,136,.86));color:#effeff} /* Rainbow Nova: wiederverwendbares Shop-Preset für JULICORN und spätere Uploads. */ @keyframes op-rainbow-nova-flow{ 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} } .op-shop-item.design-rainbow,.op-profile-avatar-item.design-rainbow{ border-color:rgba(255,255,255,.88); background: linear-gradient(180deg,rgba(7,9,31,.02),rgba(7,9,31,.34) 58%,rgba(7,9,31,.62)), linear-gradient(135deg,#ff174d 0%,#ff7b00 14%,#ffe600 28%,#36ec62 43%,#00d8ff 58%,#3d5cff 72%,#9b37ff 86%,#ff35bd 100%); background-size:100% 100%,300% 300%; animation:op-rainbow-nova-flow 8s ease-in-out infinite; box-shadow: 0 0 0 1px rgba(255,255,255,.20), -7px 0 22px rgba(255,40,94,.26), 0 -7px 22px rgba(255,223,49,.22), 7px 0 22px rgba(38,224,255,.25), 0 7px 22px rgba(167,58,255,.27), 0 16px 34px rgba(0,0,0,.38); } .op-shop-item.design-rainbow::before,.op-profile-avatar-item.design-rainbow::before{ z-index:0; background: radial-gradient(circle at 13% 15%,rgba(255,255,255,.95) 0 2px,transparent 3px), radial-gradient(circle at 81% 12%,rgba(255,255,255,.82) 0 1px,transparent 2px), radial-gradient(circle at 88% 48%,rgba(255,255,255,.84) 0 2px,transparent 3px), radial-gradient(circle at 18% 73%,rgba(255,255,255,.76) 0 1px,transparent 2px), radial-gradient(circle at 68% 86%,rgba(255,255,255,.86) 0 2px,transparent 3px), linear-gradient(160deg,rgba(255,255,255,.12),transparent 34%,rgba(8,8,35,.30)); opacity:1; } .op-profile-avatar-item.design-rainbow>*{position:relative;z-index:1} .op-shop-item.design-rainbow .op-shop-badge,.op-profile-avatar-item.design-rainbow .op-profile-rarity, .op-shop-item.design-rainbow .op-shop-active-badge,.op-shop-item.design-rainbow .op-shop-owned-badge{ border-color:rgba(255,255,255,.82); background:rgba(8,10,38,.72); color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.85); box-shadow:0 0 13px rgba(255,255,255,.20); } .op-shop-item.design-rainbow .op-shop-avatar-wrap,.op-profile-avatar-item.design-rainbow .op-profile-avatar-portrait{ border-color:#fff; box-shadow: 0 0 0 2px rgba(255,52,180,.70), 0 0 0 4px rgba(0,222,255,.55), 0 0 24px rgba(255,255,255,.52), 0 12px 28px rgba(7,8,31,.46); } .op-shop-item.design-rainbow .op-shop-item-copy h3,.op-profile-avatar-item.design-rainbow .op-profile-avatar-copy h4, .op-shop-item.design-rainbow .op-shop-role,.op-profile-avatar-item.design-rainbow .op-profile-avatar-copy span, .op-shop-item.design-rainbow .op-shop-item-copy p,.op-shop-item.design-rainbow .op-shop-price, .op-profile-avatar-item.design-rainbow .op-shop-price{ color:#fff; text-shadow:0 2px 7px rgba(4,5,25,.92); } .op-shop-item.design-rainbow .op-shop-price span,.op-profile-avatar-item.design-rainbow .op-shop-price span{color:#fff7a8;text-shadow:0 0 10px rgba(255,245,116,.9)} .op-shop-item.design-rainbow .op-shop-btn,.op-profile-avatar-item.design-rainbow .op-shop-btn{ border-color:rgba(255,255,255,.86); background:rgba(9,10,40,.68); color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.86); } .op-shop-item.design-rainbow .op-shop-btn.is-buy,.op-profile-avatar-item.design-rainbow .op-shop-btn.is-buy{ border-color:#fff; background:linear-gradient(90deg,#ff2058,#ff8b00,#ffe500,#25da66,#00cfff,#6455ff,#e63dd3); background-size:220% 100%; color:#fff; animation:op-rainbow-nova-flow 6s linear infinite; box-shadow:0 0 18px rgba(255,255,255,.34); } @media(prefers-reduced-motion:reduce){ .op-shop-item.design-rainbow,.op-profile-avatar-item.design-rainbow, .op-shop-item.design-rainbow .op-shop-btn.is-buy,.op-profile-avatar-item.design-rainbow .op-shop-btn.is-buy{animation:none} } /* Kompakter mobiler Katalog: zwei Karten je Zeile ohne lange Leerflächen. */ @media(max-width:640px){ .op-shop-page{ gap:9px; margin-top:9px; } .op-shop-grid, .op-profile-avatar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:8px; } .op-shop-item, .op-profile-avatar-item{ display:flex; min-height:0; padding:8px; transition:none; box-shadow:0 6px 14px rgba(0,0,0,.22)!important; } .op-shop-item:hover{ transform:none; } .op-shop-item-top, .op-profile-avatar-top{ min-height:0; margin-bottom:6px; align-items:flex-start; flex-direction:column; gap:4px; } .op-shop-badge-row{ gap:3px; } .op-shop-badge, .op-shop-active-badge, .op-shop-owned-badge, .op-profile-rarity, .op-shop-flash-badge{ padding:3px 5px; font-size:6.5px; letter-spacing:.045em; } .op-shop-flash-timer{ min-height:17px; padding:2px 5px; font-size:9px; letter-spacing:.02em; } .op-shop-avatar-wrap, .op-profile-avatar-portrait{ width:76px; height:76px; margin:2px auto 8px; } .op-shop-item-copy, .op-profile-avatar-copy{ text-align:center; } .op-shop-item-copy h3, .op-profile-avatar-copy h4{ margin:0; font-size:12px; line-height:1.15; } .op-shop-role{ margin-top:2px; font-size:7px; letter-spacing:.06em; } .op-shop-item-copy p, .op-profile-avatar-copy span{ display:none; } .op-shop-item-footer, .op-profile-avatar-footer{ gap:6px; margin-top:auto; padding-top:8px; } .op-shop-price{ gap:4px; font-size:11px; } .op-shop-btn{ min-height:32px; padding:6px 5px; border-radius:9px; font-size:8px; line-height:1.15; text-align:center; } .op-shop-item.design-rainbow, .op-profile-avatar-item.design-rainbow, .op-shop-item.design-rainbow .op-shop-btn.is-buy, .op-profile-avatar-item.design-rainbow .op-shop-btn.is-buy{ animation:none; } .op-shop-item.design-beer::after{ display:none; } } @media(max-width:390px){ .op-shop-grid, .op-profile-avatar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; } .op-shop-item, .op-profile-avatar-item{ padding:7px; } .op-shop-avatar-wrap, .op-profile-avatar-portrait{ width:68px; height:68px; } .op-profile-avatar-top{ align-items:flex-start; flex-direction:column; } }