/*
 * ROM-Database – statisches Utility-CSS (Ersatz fuer das langsame Tailwind Play-CDN).
 * Automatisch generiert/gepflegt fuer die tatsaechlich verwendeten Klassen.
 * KEIN Node/Build noetig – wird vom Layout automatisch geladen, wenn vorhanden.
 */
:root{
  --bg-primary:#0f1117;--bg-secondary:#1a1d27;--bg-tertiary:#242836;--bg-elevated:#2d3244;
  --text-primary:#e8eaed;--text-secondary:#9aa0b0;--text-muted:#5f6577;
  --accent:#6366f1;--accent-hover:#818cf8;--accent-active:#4f46e5;
  --rarity-common:#9aa0b0;--rarity-uncommon:#22c55e;--rarity-rare:#3b82f6;--rarity-epic:#a855f7;--rarity-legendary:#f59e0b;
  --border:#2d3244;--border-hover:#3d4456;--success:#22c55e;--danger:#ef4444;--warning:#f59e0b;
}
/* ---- Preflight (minimal) ---- */
*,*::before,*::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--border);}
html{-webkit-text-size-adjust:100%;line-height:1.5;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
body{margin:0;line-height:inherit;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;}
p,figure{margin:0;}
a{color:inherit;text-decoration:inherit;}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;margin:0;}
button{background:none;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
table{border-collapse:collapse;}
[hidden]{display:none;}
[x-cloak]{display:none !important;}

/* ---- Layout / Display ---- */
.container{width:100%;}
.block{display:block;}.inline-block{display:inline-block;}.inline{display:inline;}
.flex{display:flex;}.inline-flex{display:inline-flex;}.grid{display:grid;}.hidden{display:none;}
.relative{position:relative;}.absolute{position:absolute;}.sticky{position:sticky;}.fixed{position:fixed;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.top-0{top:0;}.left-0{left:0;}.right-0{right:0;}.top-full{top:100%;}
.left-2\.5{left:.625rem;}.left-3{left:.75rem;}.left-4{left:1rem;}
.top-1\/2{top:50%;}
.z-50{z-index:50;}
.overflow-hidden{overflow:hidden;}.overflow-x-auto{overflow-x:auto;}.overflow-y-auto{overflow-y:auto;}

/* ---- Flex / Grid ---- */
.flex-1{flex:1 1 0%;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}
.flex-shrink-0,.shrink-0{flex-shrink:0;}
.items-center{align-items:center;}.items-start{align-items:flex-start;}.items-end{align-items:flex-end;}
.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}
.justify-end{justify-content:flex-end;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.gap-1{gap:.25rem;}.gap-2{gap:.5rem;}.gap-3{gap:.75rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}
.space-y-1>*+*{margin-top:.25rem;}.space-y-3>*+*{margin-top:.75rem;}.space-y-4>*+*{margin-top:1rem;}
.space-y-5>*+*{margin-top:1.25rem;}.space-y-6>*+*{margin-top:1.5rem;}.space-y-8>*+*{margin-top:2rem;}

/* ---- Sizing ---- */
.w-2{width:.5rem;}.w-3{width:.75rem;}.w-4{width:1rem;}.w-5{width:1.25rem;}.w-6{width:1.5rem;}
.w-8{width:2rem;}.w-10{width:2.5rem;}.w-16{width:4rem;}.w-48{width:12rem;}.w-64{width:16rem;}.w-80{width:20rem;}
.w-full{width:100%;}.w-auto{width:auto;}.w-1\/3{width:33.333333%;}
.h-2{height:.5rem;}.h-3{height:.75rem;}.h-4{height:1rem;}.h-5{height:1.25rem;}.h-6{height:1.5rem;}
.h-8{height:2rem;}.h-10{height:2.5rem;}.h-14{height:3.5rem;}.h-16{height:4rem;}
.h-\[50px\]{height:50px;}.h-full{height:100%;}
.min-w-0{min-width:0;}.min-w-\[200px\]{min-width:200px;}.min-w-\[44px\]{min-width:44px;}
.min-h-screen{min-height:100vh;}.min-h-0{min-height:0;}.min-h-\[44px\]{min-height:44px;}
.max-w-sm{max-width:24rem;}.max-w-md{max-width:28rem;}.max-w-xl{max-width:36rem;}
.max-w-2xl{max-width:42rem;}.max-w-3xl{max-width:48rem;}.max-w-4xl{max-width:56rem;}
.max-w-5xl{max-width:64rem;}.max-w-6xl{max-width:72rem;}.max-w-7xl{max-width:80rem;}
.max-w-\[1280px\]{max-width:1280px;}.max-w-full{max-width:100%;}.mx-auto{margin-left:auto;margin-right:auto;}
.max-h-40{max-height:10rem;}.max-h-48{max-height:12rem;}.max-h-96{max-height:24rem;}
.max-h-full{max-height:100%;}.max-h-\[70vh\]{max-height:70vh;}
.aspect-square{aspect-ratio:1/1;}.object-contain{object-fit:contain;}
.resize-y{resize:vertical;}

/* ---- Spacing ---- */
.p-1\.5{padding:.375rem;}.p-2{padding:.5rem;}.p-3{padding:.75rem;}.p-4{padding:1rem;}
.p-5{padding:1.25rem;}.p-6{padding:1.5rem;}.p-8{padding:2rem;}
.px-1{padding-left:.25rem;padding-right:.25rem;}.px-1\.5{padding-left:.375rem;padding-right:.375rem;}
.px-2{padding-left:.5rem;padding-right:.5rem;}.px-3{padding-left:.75rem;padding-right:.75rem;}
.px-4{padding-left:1rem;padding-right:1rem;}.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem;}.py-1{padding-top:.25rem;padding-bottom:.25rem;}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem;}.py-2{padding-top:.5rem;padding-bottom:.5rem;}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem;}.py-3{padding-top:.75rem;padding-bottom:.75rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}.py-20{padding-top:5rem;padding-bottom:5rem;}
.pt-4{padding-top:1rem;}.pb-px{padding-bottom:1px;}.pl-9{padding-left:2.25rem;}.pl-12{padding-left:3rem;}
.mt-0\.5{margin-top:.125rem;}.mt-1{margin-top:.25rem;}.mt-2{margin-top:.5rem;}.mt-3{margin-top:.75rem;}
.mt-4{margin-top:1rem;}.mt-6{margin-top:1.5rem;}.mt-auto{margin-top:auto;}
.mb-1{margin-bottom:.25rem;}.mb-2{margin-bottom:.5rem;}.mb-3{margin-bottom:.75rem;}.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}.mb-8{margin-bottom:2rem;}.mb-12{margin-bottom:3rem;}.-mb-px{margin-bottom:-1px;}
.ml-1{margin-left:.25rem;}.ml-2{margin-left:.5rem;}.ml-auto{margin-left:auto;}.mr-1{margin-right:.25rem;}

/* ---- Typografie ---- */
.text-xs{font-size:.75rem;line-height:1rem;}.text-sm{font-size:.875rem;line-height:1.25rem;}
.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}.text-5xl{font-size:3rem;line-height:1;}
.text-6xl{font-size:3.75rem;line-height:1;}
.font-normal{font-weight:400;}.font-medium{font-weight:500;}.font-semibold{font-weight:600;}.font-bold{font-weight:700;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}
.uppercase{text-transform:uppercase;}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.whitespace-nowrap{white-space:nowrap;}.break-all{word-break:break-all;}
.leading-relaxed{line-height:1.625;}.tracking-wide{letter-spacing:.025em;}.tracking-wider{letter-spacing:.05em;}
.tracking-\[0\.5em\]{letter-spacing:.5em;}.select-all{user-select:all;}

/* ---- Farben: Text ---- */
.text-text-primary{color:var(--text-primary);}.text-text-secondary{color:var(--text-secondary);}
.text-text-muted{color:var(--text-muted);}.text-accent{color:var(--accent);}
.text-border{color:var(--border);}.text-white{color:#fff;}
.text-success{color:var(--success);}.text-danger{color:var(--danger);}.text-warning{color:var(--warning);}
.text-yellow-400{color:#facc15;}
.text-\[\#5f6577\]{color:#5f6577;}.text-\[\#9aa0b0\]{color:#9aa0b0;}.text-\[\#e8eaed\]{color:#e8eaed;}.text-\[\#ef4444\]{color:#ef4444;}
.placeholder-text-muted::placeholder{color:var(--text-muted);}

/* ---- Farben: Hintergrund ---- */
.bg-bg-primary{background-color:var(--bg-primary);}.bg-bg-secondary{background-color:var(--bg-secondary);}
.bg-bg-tertiary{background-color:var(--bg-tertiary);}.bg-bg-elevated{background-color:var(--bg-elevated);}
.bg-accent{background-color:var(--accent);}.bg-danger{background-color:var(--danger);}.bg-white{background-color:#fff;}
.bg-\[\#0f1117\]{background-color:#0f1117;}.bg-\[\#1a1d27\]{background-color:#1a1d27;}
.bg-\[\#242836\]{background-color:#242836;}.bg-\[\#6366f1\]{background-color:#6366f1;}
.bg-accent\/5{background-color:color-mix(in srgb,var(--accent) 5%,transparent);}
.bg-accent\/10{background-color:color-mix(in srgb,var(--accent) 10%,transparent);}
.bg-danger\/5{background-color:color-mix(in srgb,var(--danger) 5%,transparent);}
.bg-danger\/10{background-color:color-mix(in srgb,var(--danger) 10%,transparent);}
.bg-success\/5{background-color:color-mix(in srgb,var(--success) 5%,transparent);}
.bg-success\/10{background-color:color-mix(in srgb,var(--success) 10%,transparent);}
.bg-warning\/5{background-color:color-mix(in srgb,var(--warning) 5%,transparent);}
.bg-bg-tertiary\/50{background-color:color-mix(in srgb,var(--bg-tertiary) 50%,transparent);}
.bg-\[\#ef4444\]\/10{background-color:color-mix(in srgb,#ef4444 10%,transparent);}
.bg-yellow-500\/10{background-color:color-mix(in srgb,#eab308 10%,transparent);}

/* ---- Rarity (dynamisch) ---- */
.bg-rarity-common{background-color:var(--rarity-common);}.text-rarity-common{color:var(--rarity-common);}
.bg-rarity-uncommon{background-color:var(--rarity-uncommon);}.text-rarity-uncommon{color:var(--rarity-uncommon);}
.bg-rarity-rare{background-color:var(--rarity-rare);}.text-rarity-rare{color:var(--rarity-rare);}
.bg-rarity-epic{background-color:var(--rarity-epic);}.text-rarity-epic{color:var(--rarity-epic);}
.bg-rarity-legendary{background-color:var(--rarity-legendary);}.text-rarity-legendary{color:var(--rarity-legendary);}
.bg-rarity-common\/10{background-color:color-mix(in srgb,var(--rarity-common) 10%,transparent);}
.bg-rarity-uncommon\/10{background-color:color-mix(in srgb,var(--rarity-uncommon) 10%,transparent);}
.bg-rarity-rare\/10{background-color:color-mix(in srgb,var(--rarity-rare) 10%,transparent);}
.bg-rarity-epic\/10{background-color:color-mix(in srgb,var(--rarity-epic) 10%,transparent);}
.bg-rarity-legendary\/10{background-color:color-mix(in srgb,var(--rarity-legendary) 10%,transparent);}

/* ---- Borders / Radius ---- */
.border{border-width:1px;}.border-2{border-width:2px;}.border-b{border-bottom-width:1px;}
.border-b-2{border-bottom-width:2px;}.border-t{border-top-width:1px;}.border-t-transparent{border-top-color:transparent;}
.border-border{border-color:var(--border);}.border-accent{border-color:var(--accent);}
.border-transparent{border-color:transparent;}
.border-\[\#2d3244\]{border-color:#2d3244;}
.border-border\/50{border-color:color-mix(in srgb,var(--border) 50%,transparent);}
.border-accent\/20{border-color:color-mix(in srgb,var(--accent) 20%,transparent);}
.border-accent\/30{border-color:color-mix(in srgb,var(--accent) 30%,transparent);}
.border-accent\/40{border-color:color-mix(in srgb,var(--accent) 40%,transparent);}
.border-danger\/20{border-color:color-mix(in srgb,var(--danger) 20%,transparent);}
.border-danger\/30{border-color:color-mix(in srgb,var(--danger) 30%,transparent);}
.border-danger\/40{border-color:color-mix(in srgb,var(--danger) 40%,transparent);}
.border-success\/30{border-color:color-mix(in srgb,var(--success) 30%,transparent);}
.border-warning\/20{border-color:color-mix(in srgb,var(--warning) 20%,transparent);}
.border-\[\#ef4444\]\/30{border-color:color-mix(in srgb,#ef4444 30%,transparent);}
.border-yellow-500\/30{border-color:color-mix(in srgb,#eab308 30%,transparent);}
.rounded{border-radius:.25rem;}.rounded-md{border-radius:.375rem;}.rounded-lg{border-radius:.5rem;}
.rounded-xl{border-radius:.75rem;}.rounded-full{border-radius:9999px;}
.last\:border-0:last-child{border-width:0;}

/* ---- Effekte / Schatten ---- */
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0/.3),0 2px 4px -2px rgb(0 0 0/.3);}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0/.35),0 4px 6px -4px rgb(0 0 0/.35);}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0/.4),0 8px 10px -6px rgb(0 0 0/.4);}
.cursor-pointer{cursor:pointer;}.cursor-not-allowed{cursor:not-allowed;}

/* ---- Transitions / Animation ---- */
.transition-all{transition:all .15s ease;}
.transition-colors{transition:color .15s ease,background-color .15s ease,border-color .15s ease;}
.transition-transform{transition:transform .15s ease;}
.-translate-y-1\/2{transform:translateY(-50%);}
.animate-spin{animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Fokus / Ring ---- */
.focus\:outline-none:focus{outline:none;}
.focus\:border-accent:focus{border-color:var(--accent);}
.focus\:border-danger:focus{border-color:var(--danger);}
.focus\:border-\[\#6366f1\]:focus{border-color:#6366f1;}
.focus\:ring-1:focus{box-shadow:0 0 0 1px var(--accent);}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--accent);}
.focus\:ring-accent:focus{box-shadow:0 0 0 2px var(--accent);}
.focus\:ring-accent\/20:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent);}
.focus\:ring-accent\/50:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent);}

/* ---- Hover ---- */
.hover\:underline:hover{text-decoration:underline;}
.hover\:text-accent:hover{color:var(--accent);}
.hover\:text-accent-hover:hover{color:var(--accent-hover);}
.hover\:text-danger:hover{color:var(--danger);}
.hover\:text-danger\/80:hover{color:color-mix(in srgb,var(--danger) 80%,transparent);}
.hover\:text-text-primary:hover{color:var(--text-primary);}
.hover\:text-text-secondary:hover{color:var(--text-secondary);}
.hover\:bg-accent-hover:hover{background-color:var(--accent-hover);}
.hover\:bg-\[\#818cf8\]:hover{background-color:#818cf8;}
.hover\:bg-accent\/5:hover{background-color:color-mix(in srgb,var(--accent) 5%,transparent);}
.hover\:bg-accent\/20:hover{background-color:color-mix(in srgb,var(--accent) 20%,transparent);}
.hover\:bg-bg-elevated:hover{background-color:var(--bg-elevated);}
.hover\:bg-bg-tertiary:hover{background-color:var(--bg-tertiary);}
.hover\:bg-bg-tertiary\/30:hover{background-color:color-mix(in srgb,var(--bg-tertiary) 30%,transparent);}
.hover\:bg-bg-tertiary\/50:hover{background-color:color-mix(in srgb,var(--bg-tertiary) 50%,transparent);}
.hover\:bg-border:hover{background-color:var(--border);}
.hover\:bg-danger\/20:hover{background-color:color-mix(in srgb,var(--danger) 20%,transparent);}
.hover\:bg-danger\/90:hover{background-color:color-mix(in srgb,var(--danger) 90%,transparent);}
.hover\:border-accent\/50:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);}

/* ---- Group-Hover ---- */
.group:hover .group-hover\:text-accent{color:var(--accent);}
.group:hover .group-hover\:scale-110{transform:scale(1.1);}

/* ---- Disabled ---- */
.disabled\:opacity-40:disabled{opacity:.4;}.disabled\:opacity-50:disabled{opacity:.5;}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}

/* ---- Responsive (sm=640, md=768, lg=1024) ---- */
@media (min-width:640px){
  .sm\:block{display:block;}.sm\:flex{display:flex;}.sm\:inline{display:inline;}.sm\:hidden{display:none;}
  .sm\:flex-row{flex-direction:row;}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
  .sm\:py-16{padding-top:4rem;padding-bottom:4rem;}
  .sm\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
}
@media (min-width:768px){
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (min-width:1024px){
  .lg\:flex{display:flex;}.lg\:hidden{display:none;}
  .lg\:flex-row{flex-direction:row;}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .lg\:min-h-0{min-height:0;}
  .lg\:px-8{padding-left:2rem;padding-right:2rem;}
  .lg\:w-64{width:16rem;}
}
/* Basis flex-row (fuer responsive Umschaltung genutzt) */
.flex-row{flex-direction:row;}