@@ Line 167: / Line 167: @@
 .ooo-infobox-tabwrap .tabber__header {
-   border-bottom: 0 !important;
+   border-bottom:0 !important;
-   box-shadow: none !important;
+   box-shadow:none !important;
+  margin-bottom:10px;
 }
-.ooo-infobox-tabwrap .tabber__tabs::after {
+.ooo-infobox-tabwrap .tabber__tabs {
-   content: none !important;
+   margin-bottom: 12px !important;
 }
 .ooo-infobox-tabwrap .tabber__tab--active {
-   box-shadow: none !important;
+   box-shadow:none !important;
-   margin-bottom: 0 !important;
+   margin-bottom:0 !important;
+  border-color:rgba(245,196,0,0.8);
+  background:rgba(245,196,0,0.10);
 }
 .ooo-infobox-tabwrap .tabber__tabs {
-   margin-bottom: 0px !important;
+  display:flex;
+  gap:8px;
+   margin-bottom:14px !important;
 }
@@ Line 419: / Line 424: @@
      rgba(255,196,0,0.3)
    );
+}
+/* =========================================================
+   OOO CARD MOBILE TEXT
+   ========================================================= */
+@media (max-width: 700px) {
+  .ooo-card {
+    padding: 16px;
+  }
+  .ooo-card h2 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+  }
+  .ooo-card h3 {
+    font-size: 1.15rem;
+    line-height: 1.25;
+  }
+  .ooo-card p,
+  .ooo-card li {
+    font-size: 0.95rem;
+    line-height: 1.45;
+  }
+  /* prevent text overflow */
+  .ooo-card {
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
 }
@@ Line 438: / Line 477: @@
    /* Brand color, but theme-safe */
    color: var(--ooo-accent);
+  clear: both;
 }
@@ Line 972: / Line 1,013: @@
 /* Remove extra tab borders */
-.ooo-buildbox .tabber__header {
+.tabber__header {
-   border-bottom: 1px solid var(--ooo-border);
+   border-bottom:1px solid var(--ooo-border);
+  margin-bottom:10px;
 }
 /* =========================================================
@@ Line 1,018: / Line 1,060: @@
 .ooo-browser {
    display: flex;
-   gap: 34px;
+   gap: 16px; /* smaller spacing between list and panel */
    align-items: flex-start;
    margin-top: 14px;
+  flex-wrap: wrap; /* allows responsive stacking */
 }
@@ Line 1,047: / Line 1,090: @@
    transition: 0.15s ease;
+  position: relative;
 }
@@ Line 1,057: / Line 1,102: @@
    border-color: rgba(245,196,0,0.80);
    background: rgba(245,196,0,0.10);
+}
+/* Arrow indicator for active item */
+.ooo-browser__item.is-active::after {
+  content: "▶";
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 14px;
+  color: var(--ooo-accent);
 }
@@ Line 1,070: / Line 1,128: @@
 .ooo-browser__panel {
    flex: 1;
-  max-width: 520px;
    border-left: 1px solid var(--ooo-border);
    padding-left: 24px;
+  margin-left: 24px;
+  box-sizing: border-box;
+}
+.ooo-browser__panel .ooo-extra,
+.ooo-browser__panel .ooo-extra2 {
+  max-width: 420px;
 }
 .ooo-browser__panel .ooo-infobox {
+  flex-shrink: 0;
+  width: 300px;
    margin: 0;
    float: none;
-  width: 100%;
 }
@@ Line 1,107: / Line 1,172: @@
 /* =========================================================
-    OOO BUILDING TABS (Same as item buttons)
+    OOO BUILDING TABS
     ========================================================= */
-.ooo-card .tabber__tabs {
+.tabber__tabs{
+  display:flex;
+  gap:8px;
+  margin-bottom:14px;
+}
+/* base tab */
+.tabber__tab{
+  border:1px solid var(--ooo-border);
+  background:rgba(245,196,0,0.04);
+  transition:all .15s ease;
+}
+/* clickable element */
+.tabber__tab a{
+  display:block;
+  padding:8px 14px;
+  font-weight:700;
+  color:var(--color-base) !important;
+  text-decoration:none !important;
+  border-bottom:none !important;
+}
+/* remove wiki link colors */
+.tabber__tab a:link,
+.tabber__tab a:visited,
+.tabber__tab a:hover,
+.tabber__tab a:active{
+  color:var(--color-base) !important;
+  text-decoration:none !important;
+}
+/* hover */
+.tabber__tab:hover{
+  border:2px solid rgba(245,196,0,0.75);
+  background:rgba(245,196,0,0.12);
+}
+.tabber__tab:hover a{
+  padding:7px 13px;
+}
+/* active tab */
+.tabber__tab[aria-selected="true"]{
+  border:2px solid rgba(245,196,0,0.95);
+  background:rgba(245,196,0,0.18);
+}
+.tabber__tab[aria-selected="true"] a{
+  padding:7px 13px;
+}
+/* remove tabber blue indicator line */
+.tabber__tab:after,
+.tabber__tab::after{
+  display:none !important;
+}
+/* =========================================================
+   FORCE STYLE TABBER TABS (override TabberNeue)
+   ========================================================= */
+.tabber__header a,
+.tabber__header a:link,
+.tabber__header a:visited,
+.tabber__header a:hover,
+.tabber__header a:active{
+  color: var(--color-base) !important;
+  text-decoration: none !important;
+}
+/* remove default active underline */
+.tabber__header .tabber__tab::after{
+  display:none !important;
+}
+/* remove bottom highlight */
+.tabber__header .tabber__tab{
+  border-bottom:none !important;
+}
+/* active tab */
+.tabber__header .tabber__tab[aria-selected="true"]{
+  border:2px solid rgba(245,196,0,0.95) !important;
+  background:rgba(245,196,0,0.18) !important;
+}
+/* hover */
+.tabber__header .tabber__tab:hover{
+  border:2px solid rgba(245,196,0,0.75) !important;
+  background:rgba(245,196,0,0.12) !important;
+}
+/* =========================================================
+   OOO INFOBOX VARIANT TABS (square style)
+   ========================================================= */
+.ooo-infobox-tabwrap .tabber__tab{
+  border-radius:0 !important;
+}
+.ooo-infobox-tabwrap .tabber__tab > a{
+  border-radius:0 !important;
+}
+/* remove rounded active outline */
+.ooo-infobox-tabwrap .tabber__tab[aria-selected="true"]{
+  border-radius:0 !important;
+}
+/* =========================================================
+   OOO ITEM PANEL LAYOUT (Reusable)
+   ========================================================= */
+/* top row: infobox + description */
+.ooo-item-top{
+  display:flex;
+  gap:20px;  /* gap between item list and infobox */
+  align-items:flex-start;
+}
+/* description beside infobox */
+.ooo-item-description{
+  flex:1;
+  max-width:460px;
+  line-height:1.6;
+}
+/* bottom content area */
+.ooo-item-body{
+  margin-top:20px;
+  padding-top:18px;
+  border-top:1px solid var(--ooo-border);
+  max-width:540px;
+  line-height:1.65;
+}
+/* prevent infobox shrinking */
+.ooo-item-top .ooo-infobox{
+  flex-shrink:0;
+}
+/* notes block (optional) */
+.ooo-item-notes{
+  margin-bottom:16px;
+  padding:10px 14px;
+  border-left:4px solid var(--ooo-accent);
+  background:rgba(245,196,0,0.08);
+  border-radius:4px;
+  font-size:0.95rem;
+}
+/* =========================================================
+   OOO BROWSER STICKY ITEM LIST
+   ========================================================= */
+.ooo-browser__list{
+  position: sticky;
+  top: 80px;
+  align-self: flex-start;
+}
+/* =========================================================
+   OOO EXTRA CONTENT
+   ========================================================= */
+.ooo-extra {
+  margin-top: 18px;
+  font-size: 0.92rem;
+  line-height: 1.55;
+  max-width: 720px;
+}
+/* title */
+.ooo-extra__title {
+  margin-bottom: 6px;
+  font-size: 0.85rem;
+  font-weight: 800;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  color: var(--ooo-accent);
+}
+/* text */
+.ooo-extra p {
+  margin: 0 0 0.6em 0;
+}
+.ooo-extra ul {
+  margin: 0.3em 0 0.6em 1.2em;
+}
+/* =========================================================
+   OOO EXTRA BLOCK (Secondary Info Panel)
+   ========================================================= */
+.ooo-extra2 {
+  margin-top: 18px;
+  padding: 12px 16px;
+  border-left: 4px solid var(--ooo-accent);
+  border-radius: 6px;
+  /* base + gradient like other OOO blocks */
+  background:
+    linear-gradient(
+      to right,
+      rgba(245,196,0,0.08),
+      rgba(245,196,0,0.02)
+    );
+  border: 1px solid rgba(245,196,0,0.18);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  max-width: 540px;
+}
+/* title */
+.ooo-extra2__title {
+  font-weight: 800;
+  font-size: 0.9rem;
+  margin-bottom: 6px;
+  color: var(--ooo-accent);
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+}
+/* spacing */
+.ooo-extra2 p {
+  margin: 0 0 0.6em 0;
+}
+.ooo-extra2 ul {
+  margin: 0.3em 0 0.4em 1.2em;
+}
+/* dark theme tuning */
+.skin-theme-clientpref-night .ooo-extra2 {
+  background:
+    linear-gradient(
+      to right,
+      rgba(245,196,0,0.18),
+      rgba(245,196,0,0.06)
+    );
+  border-color: rgba(245,196,0,0.35);
+}
+.ooo-browser__info.is-active{
+  display:grid;
+  grid-template-columns:300px 1fr;
+  gap:24px;
+  align-items:start;
+}
+.ooo-browser__info .ooo-infobox{
+  grid-column:1;
+  float:none;
+  margin:0;
+}
+.ooo-browser__info .ooo-extra,
+.ooo-browser__info .ooo-extra2{
+  grid-column:2;
+}
+/* =========================================================
+   OOO External Link
+   ========================================================= */
+.ooo-extlink a,
+.ooo-extlink a.external,
+.ooo-extlink a.extiw {
    display: flex;
-   gap: 8px;
+   align-items: center;
-   margin-bottom: 14px;
+  justify-content: center;
+  gap: 6px;
+  text-align: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--ooo-border);
+  background: rgba(245,196,0,0.05);
+  color: var(--ooo-accent) !important;
+  text-decoration: none !important;
+  font-weight: 600;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  background-image: none !important;
+}
+/* hover */
+.ooo-extlink a:hover,
+.ooo-extlink a.external:hover,
+.ooo-extlink a.extiw:hover {
+  background: rgba(245,196,0,0.15);
+  border-color: rgba(245,196,0,0.6);
+}
+/* custom icon */
+.ooo-extlink a::after,
+.ooo-extlink a.external::after,
+.ooo-extlink a.extiw::after {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  opacity: 0.8;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain;
+          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain;
+  transition: transform 0.15s ease;
+}
+.ooo-extlink a:hover::after,
+.ooo-extlink a.external:hover::after,
+.ooo-extlink a.extiw:hover::after {
+  transform: translate(1px,-1px);
+}
+/* =========================================================
+   OOO External Link Grid
+items per column
+   ========================================================= */
+.ooo-extlinks-grid {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(4, auto);
+  justify-content: start;
+  align-content: start;
+  column-gap: 10px;
+  row-gap: 6px;
+  margin: 8px 0;
+}
+/* remove MediaWiki paragraph wrappers */
+.ooo-extlinks-grid p {
+  display: contents;
+   margin: 0 !important;
+  padding: 0 !important;
+}
+/* remove random line breaks */
+.ooo-extlinks-grid br {
+  display: none;
+}
+/* normalize grid items */
+.ooo-extlinks-grid .ooo-extlink {
+  display: block;
+  margin: 0;
+  align-self: start;
+}
+/* tablet */
+@media (max-width: 900px) {
+  .ooo-extlinks-grid {
+    grid-template-rows: repeat(3, auto);
+  }
+}
+/* mobile */
+@media (max-width: 600px) {
+  .ooo-extlinks-grid {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr;
+    grid-template-rows: none;
+  }
+}
+.skin-theme-clientpref-day .ooo-extlink a,
+.skin-theme-clientpref-day .ooo-extlink a.external,
+.skin-theme-clientpref-day .ooo-extlink a.extiw {
+  background: rgba(245,196,0,0.12);
+  border-color: rgba(245,196,0,0.55);
+  color: #9a7a00 !important;
+}
+.skin-theme-clientpref-day .ooo-extlink a:hover {
+  background: rgba(245,196,0,0.22);
+}
+/* =========================================================
+   OOO MENU LINK – navigation style
+   ========================================================= */
+.mw-parser-output .ooo-menulink a {
+  display: block;
+  position: relative;
+  padding: 4px 8px 4px 14px;
+  text-decoration: none !important;
+  color: inherit;
+  transition: background 0.18s ease, color 0.18s ease;
+}
+/* left accent bar (always visible) */
+.mw-parser-output .ooo-menulink a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 2px;
+  bottom: 2px;
+  width: 3px;
+  background: var(--ooo-accent);
+  opacity: 0.6;
+}
+/* arrow */
+.mw-parser-output .ooo-menulink a::after {
+  content: "➜";
+  position: absolute;
+  right: 6px;
+  opacity: 0;
+  transform: translateX(-4px);
+  color: var(--ooo-accent);
+  font-weight: 700;
+  transition: 0.18s ease;
+}
+/* hover */
+.mw-parser-output .ooo-menulink a:hover {
+  font-weight: 700;
+  color: var(--ooo-accent) !important;
+  background: linear-gradient(
+    to right,
+    rgba(245,196,0,0.10),
+    rgba(245,196,0,0.02)
+  );
+}
+/* show arrow */
+.mw-parser-output .ooo-menulink a:hover::after {
+  opacity: 1;
+  transform: translateX(0);
+}
+/* =========================================================
+   OOO MENU LINK – COMING SOON
+   ========================================================= */
+.mw-parser-output .ooo-menulink-soon a {
+  display: block;
+  position: relative;
+  padding: 4px 8px 4px 14px;
+  opacity: 0.55;
+  text-decoration: none !important;
+  color: inherit;
+  cursor: default;
+}
+/* dashed left indicator */
+.mw-parser-output .ooo-menulink-soon a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 2px;
+  bottom: 2px;
+  width: 3px;
+  background: repeating-linear-gradient(
+    to bottom,
+    rgba(245,196,0,0.5),
+    rgba(245,196,0,0.5) 2px,
+    transparent 2px,
+    transparent 4px
+  );
+}
+/* auto label */
+.mw-parser-output .ooo-menulink-soon a::after {
+  content: " (coming soon)";
+  font-size: 0.85em;
+  font-style: italic;
+  opacity: 0.7;
+}
+/* disable hover effects */
+.mw-parser-output .ooo-menulink-soon a:hover {
+  background: none;
+  color: inherit !important;
+  font-weight: normal;
 }
-.ooo-card .tabber__tab {
+/* =========================================================
-  padding: 8px 12px;
+   OOO MENU SUB SECTION
-   border-radius: 10px;
+   ========================================================= */
-   border: 1px solid var(--ooo-border);
-  background: rgba(245,196,0,0.04); /* Same background as item buttons */
+.mw-parser-output .ooo-menusub {
+   margin-top: 14px;
+   margin-bottom: 6px;
    font-weight: 700;
-   cursor: pointer;
+   font-size: 0.95rem;
-  transition: 0.15s ease;
+  color: var(--ooo-accent);
+  border-bottom: 1px solid rgba(245,196,0,0.35);
+  padding-bottom: 3px;
+  letter-spacing: 0.02em;
+}
+/* ============================================================
+   OUT OF ORE WIKI V2 — complete replacement for the V2 section
+   Images are controlled by MediaWiki templates, not CSS URLs.
+   ============================================================ */
+.ooo-v2 {
+  --v2-bg:#151a1e; --v2-panel:#20262b; --v2-line:#343d44;
+  --v2-text:#edf0f1; --v2-muted:#aeb8be; --v2-yellow:#e6b934;
+  color:var(--v2-text); font-family:Barlow,Arial,sans-serif;
+  font-size:16px; background:var(--v2-bg); border:1px solid var(--v2-line);
+  border-radius:8px; overflow:hidden;
+}
+.ooo-v2,.ooo-v2 * {box-sizing:border-box}
+.ooo-v2 a {color:inherit;text-decoration:none}
+.ooo-v2 a:hover {color:var(--v2-yellow);text-decoration:none}
+/* Header */
+.ooo-v2-top {display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px;border-bottom:1px solid var(--v2-line);background:#1b2024}
+.ooo-v2-brand {font-size:21px;font-weight:800;letter-spacing:.07em}
+.ooo-v2-brand span {color:var(--v2-yellow)}
+.ooo-v2-toplinks {display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--v2-muted)}
+/* Main layout */
+.ooo-v2-shell {display:grid;grid-template-columns:245px minmax(0,1fr);min-height:650px}
+.ooo-v2-side {min-width:0;padding:24px 12px;background:#1a2024;border-right:1px solid var(--v2-line)}
+.ooo-v2-side-label {margin:16px 10px 9px;color:var(--v2-yellow);font-size:12px;font-weight:700;letter-spacing:.11em}
+.ooo-v2-nav,.ooo-v2-nav-current {margin:3px 0;padding:11px 12px;border-radius:4px;font-size:15px}
+.ooo-v2-nav:hover {background:#293137}
+.ooo-v2-nav-current {background:#8c7330;color:#fff;font-weight:700}
+.ooo-v2-side-bottom {margin:25px 10px 0;padding-top:16px;border-top:1px solid var(--v2-line);font-size:13px;line-height:1.7;color:var(--v2-muted)}
+.ooo-v2-main {min-width:0;padding:24px;background:var(--v2-bg)}
+/* Hero: image rendered by Template:OOO-Hero */
+.ooo-v2 .ooo-v2-hero {position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:300px;padding:54px 42px;background:#20262b;border:1px solid var(--v2-line);border-radius:6px;overflow:hidden}
+.ooo-v2 .ooo-v2-hero-image {position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
+/* Hero image container */
+.ooo-v2 .ooo-v2-hero-image > a,
+.ooo-v2 .ooo-v2-hero-image > span,
+.ooo-v2 .ooo-v2-hero-image > figure {
+    display:block;
+    width:100%;
+    height:100%;
+    margin:0;
+}
+/* Hero image */
+.ooo-v2 .ooo-v2-hero-image img,
+.ooo-v2 .ooo-v2-hero-image .mw-file-element {
+    display:block;
+    width:100%;
+    height:100%;
+    max-width:none;
+    object-fit:cover;
+    object-position:center;
+    filter:none;
+}
+.ooo-v2 .ooo-v2-hero::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(12,16,20,.95) 0%,rgba(12,16,20,.65) 45%,rgba(12,16,20,.10) 100%)}
+.ooo-v2-eyebrow {font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--v2-yellow)}
+.ooo-v2-hero-title {margin:12px 0;font-size:clamp(32px,4vw,56px);line-height:1.08;font-weight:800}
+.ooo-v2-hero-copy {max-width:580px;color:#c8d0d4;font-size:17px;line-height:1.5}
+.ooo-v2-hero-actions {margin-top:25px;font-size:15px;font-weight:700}
+.ooo-v2-hero-actions a {display:inline-block;padding:11px 15px;margin:0 8px 8px 0;background:#2c353a;border:1px solid #4c565d;border-radius:4px}
+.ooo-v2-hero-actions a:first-child {background:var(--v2-yellow);color:#1b1b1b;border-color:var(--v2-yellow)}
+/* Section headings */
+.ooo-v2-section-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 15px;font-size:19px;font-weight:800;letter-spacing:.035em}
+.ooo-v2-heading-sub {font-size:13px;font-weight:400;color:var(--v2-muted)}
+/* Category grid */
+.ooo-v2 .ooo-v2-tiles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
+.ooo-v2 .ooo-v2-tile {position:relative;min-width:0;min-height:210px;padding:20px;background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:5px;overflow:hidden}
+.ooo-v2 .ooo-v2-tile:hover {border-color:var(--v2-yellow)}
+.ooo-v2 .ooo-v2-imagecard {display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
+.ooo-v2 .ooo-v2-card-image {position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
+.ooo-v2 .ooo-v2-card-image > a,
+.ooo-v2 .ooo-v2-card-image > span,
+.ooo-v2 .ooo-v2-card-image > figure,
+.ooo-v2 .ooo-v2-card-image .mw-file-element,
+.ooo-v2 .ooo-v2-card-image img {display:block;width:100%;height:100%;max-width:none;min-width:0;margin:0;object-fit:cover;object-position:center}
+.ooo-v2 .ooo-v2-imagecard::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(10,14,18,.96) 0%,rgba(10,14,18,.58) 55%,rgba(10,14,18,.12) 100%)}
+.ooo-v2 .ooo-v2-card-content {position:relative;z-index:1;width:100%;min-width:0}
+.ooo-v2 .ooo-v2-tile-icon {font-size:24px;color:var(--v2-yellow);margin-bottom:13px}
+.ooo-v2 .ooo-v2-tile-title {font-size:21px;font-weight:700;line-height:1.2;margin-bottom:8px}
+.ooo-v2 .ooo-v2-tile-desc {font-size:15px;line-height:1.5;color:#d1d8dc}
+/* Guides and updates */
+.ooo-v2-two {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:26px}
+.ooo-v2-panel {min-width:0;padding:22px;background:var(--v2-panel);border:1px solid var(--v2-line);border-radius:5px}
+.ooo-v2-panel-title {font-size:16px;font-weight:800;letter-spacing:.06em;margin-bottom:13px}
+.ooo-v2-guide {padding:11px 0;border-top:1px solid var(--v2-line);font-size:15px}
+.ooo-v2-guide span {float:right;color:var(--v2-yellow)}
+.ooo-v2-update {font-size:15px;line-height:1.6;overflow-wrap:anywhere}
+.ooo-v2-panel-foot {padding-top:12px;font-size:14px;color:var(--v2-yellow)}
+.ooo-v2-bottom {margin-top:24px;padding:17px 5px;border-top:1px solid var(--v2-line);font-size:14px;color:var(--v2-muted);line-height:1.8}
+/* Responsive */
+@media(max-width:1100px) {.ooo-v2 .ooo-v2-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:900px) {.ooo-v2-shell{grid-template-columns:195px minmax(0,1fr)}.ooo-v2-main{padding:16px}.ooo-v2 .ooo-v2-hero{padding:34px 25px}}
+@media(max-width:640px) {.ooo-v2-top{display:block}.ooo-v2-toplinks{margin-top:10px}.ooo-v2-shell{display:block}.ooo-v2-side{border-right:0;border-bottom:1px solid var(--v2-line)}.ooo-v2 .ooo-v2-tiles,.ooo-v2-two{grid-template-columns:1fr}.ooo-v2 .ooo-v2-hero{padding:30px 20px}.ooo-v2-main{padding:12px}}
+/* V2 InfoBox */
+.ooo-v2-infobox {
+    background: #202124;
+    border: 1px solid #414141;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 20px 0;
+    color: #eeeeee;
+}
+.ooo-v2-infobox-header {
+    background: #292929;
+    border-bottom: 2px solid #e5b62e;
+    padding: 14px 18px;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+.ooo-v2-infobox-image {
+    padding: 16px;
+    text-align: center;
+    background: #181818;
+}
+.ooo-v2-infobox-image img {
+    max-width: 100%;
+    height: auto;
+}
+.ooo-v2-infobox-body {
+    padding: 6px 18px;
+}
+.ooo-v2-infobox-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 12px 0;
+    border-bottom: 1px solid #383838;
+}
+.ooo-v2-infobox-row:last-child {
+    border-bottom: none;
+}
+.ooo-v2-infobox-row span {
+    color: #aaaaaa;
+}
+.ooo-v2-infobox-row strong {
+    color: #f0f0f0;
+    text-align: right;
+}
+/* V2 Vehicle Details: Overview and InfoBox */
+.ooo-v2-vehicle-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 310px;
+    gap: 24px;
+    align-items: start;
+    margin: 20px 0 30px;
+}
+.ooo-v2-vehicle-description {
+    min-width: 0;
+    line-height: 1.7;
+}
+.ooo-v2-vehicle-sidebar {
+    min-width: 0;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox {
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+/* Responsive layout */
+@media (max-width: 900px) {
+    .ooo-v2-vehicle-layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+/* ==========================================
+   V2 VEHICLE DETAILS REFINEMENT
+   ========================================== */
+/* Vehicle navigation */
+.ooo-v2-vehicle-nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 8px;
+    margin: 18px 0 28px;
+    background: #242628;
+    border: 1px solid #3c3f42;
+    border-radius: 7px;
+}
+.ooo-v2-vehicle-nav-link a {
+    display: inline-block;
+    padding: 10px 16px;
+    color: #cccccc !important;
+    font-size: 13px;
+    font-weight: 600;
+    text-decoration: none !important;
+    border-radius: 5px;
+}
+.ooo-v2-vehicle-nav-link a:hover,
+.ooo-v2-vehicle-nav-link a:focus {
+    background: #373a3d;
+    color: #e5b62e !important;
+}
+/* Overview and infobox columns */
+.ooo-v2-vehicle-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 340px;
+    gap: 28px;
+    align-items: start;
+    margin: 16px 0 32px;
+}
+.ooo-v2-vehicle-description {
+    min-width: 0;
+    line-height: 1.7;
+}
+.ooo-v2-vehicle-sidebar {
+    min-width: 0;
+}
+/* Compact infobox */
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox {
+    width: 100%;
+    margin: 0;
+    box-sizing: border-box;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-header {
+    padding: 12px 16px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image {
+    padding: 12px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-body {
+    padding: 4px 16px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    min-height: 0;
+    height: auto;
+    padding: 10px 0;
+    margin: 0;
+    line-height: 1.4;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row span {
+    flex: 0 1 auto;
+    color: #aaaaaa;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row strong {
+    flex: 0 1 auto;
+    text-align: right;
+    overflow-wrap: anywhere;
+}
+/* Mobile and narrower screens */
+@media (max-width: 1050px) {
+    .ooo-v2-vehicle-layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .ooo-v2-vehicle-sidebar {
+        max-width: 440px;
+    }
+}
+@media (max-width: 600px) {
+    .ooo-v2-vehicle-nav-link a {
+        padding: 9px 11px;
+        font-size: 12px;
+    }
+}
+/* ==========================================
+   V2 VEHICLE CATEGORY
+   ========================================== */
+.ooo-v2-vehicle-category-intro {
+    margin: 20px 0 28px;
+    line-height: 1.7;
+}
+.ooo-v2-vehicle-list {
+    background: #202124;
+    border: 1px solid #3c3f42;
+    border-radius: 8px;
+    padding: 10px 20px;
+}
+.ooo-v2-vehicle-list ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.ooo-v2-vehicle-list li {
+    margin: 0;
+    padding: 12px 8px;
+    border-bottom: 1px solid #383838;
+}
+.ooo-v2-vehicle-list li:last-child {
+    border-bottom: none;
+}
+.ooo-v2-vehicle-list li a {
+    color: #eeeeee !important;
+    text-decoration: none !important;
+    font-weight: 500;
+}
+.ooo-v2-vehicle-list li a:hover {
+    color: #e5b62e !important;
+}
+/* ==========================================
+   V2 VEHICLE DETAILS - COMPACT LAYOUT
+   ========================================== */
+/* Navigation */
+.ooo-v2-vehicle-nav {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 6px;
+    margin: 14px 0 24px;
+    background: #242628;
+    border: 1px solid #3c3f42;
+    border-radius: 6px;
+}
+.ooo-v2-vehicle-nav-link {
+    display: inline-flex;
+    align-items: center;
+}
+.ooo-v2-vehicle-nav-link a {
+    display: block;
+    padding: 9px 14px;
+    font-size: 13px;
+    line-height: 1.4;
+    font-weight: 600;
+    color: #cccccc !important;
+    text-decoration: none !important;
+    border-radius: 4px;
+}
+.ooo-v2-vehicle-nav-link a:hover {
+    background: #383b3e;
+    color: #e5b62e !important;
+}
+/* Overview and infobox layout */
+.ooo-v2-vehicle-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 390px;
+    gap: 24px;
+    align-items: start;
+    margin: 16px 0 28px;
+}
+.ooo-v2-vehicle-description {
+    min-width: 0;
+    line-height: 1.7;
+}
+.ooo-v2-vehicle-sidebar {
+    min-width: 0;
+}
+/* Infobox */
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    box-sizing: border-box;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-header {
+    padding: 12px 16px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-body {
+    padding: 6px 16px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    column-gap: 16px;
+    height: auto;
+    min-height: 0;
+    margin: 0;
+    padding: 9px 0;
+    line-height: 1.4;
+    border-bottom: 1px solid #383b3e;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row:last-child {
+    border-bottom: none;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row span {
+    display: block;
+    color: #aaaaaa;
+    font-size: 13px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-row strong {
+    display: block;
+    color: #eeeeee;
+    font-size: 13px;
+    font-weight: 600;
+    text-align: right;
+    overflow-wrap: anywhere;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image {
+    padding: 10px;
+}
+.ooo-v2-vehicle-sidebar .ooo-v2-infobox-image img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+/* Responsive */
+@media (max-width: 1050px) {
+    .ooo-v2-vehicle-layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .ooo-v2-vehicle-sidebar {
+        max-width: 480px;
+    }
+}
+@media (max-width: 600px) {
+    .ooo-v2-vehicle-nav-link a {
+        padding: 8px 10px;
+        font-size: 12px;
+    }
+}
+/* V2 VEHICLE CONTROLS */
+.ooo-v2-controls {
+    display: grid;
+    gap: 14px;
+}
+.ooo-v2-controls-intro {
+    line-height: 1.7;
+    color: #c8d0d4;
+}
+.ooo-v2-controls-group {
+    background: #20262b;
+    border: 1px solid #343d44;
+    border-radius: 6px;
+    overflow: hidden;
+}
+.ooo-v2-controls-title {
+    padding: 12px 16px;
+    background: #293137;
+    border-bottom: 1px solid #343d44;
+    color: #e6b934;
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: 0.05em;
+}
+.ooo-v2-controls-body {
+    padding: 14px 18px;
+    line-height: 1.7;
+}
+.ooo-v2-controls-body p:first-child {
+    margin-top: 0;
+}
+.ooo-v2-controls-body p:last-child {
+    margin-bottom: 0;
+}
+/* ========================================
+   V2 VEHICLE ATTACHMENTS
+======================================== */
+.ooo-v2-attachment {
+    display: flex;
+    align-items: stretch;
+    gap: 18px;
+    padding: 14px;
+    margin-bottom: 12px;
+    background: #20262b;
+    border: 1px solid #343d44;
+    border-radius: 6px;
+}
+.ooo-v2-attachment-image {
+    width: 180px;
+    min-width: 180px;
+    min-height: 115px;
+    background: #171c20;
+    border-radius: 4px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.ooo-v2-attachment-image img {
+    display: block;
+    max-width: 100%;
+    max-height: 135px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+}
+.ooo-v2-attachment-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 8px;
+}
+.ooo-v2-attachment-name {
+    font-size: 18px;
+    font-weight: 700;
+}
+.ooo-v2-attachment-name a {
+    color: #e6b934;
+    text-decoration: none;
+}
+.ooo-v2-attachment-name a:hover {
+    text-decoration: underline;
+}
+.ooo-v2-attachment-description {
+    color: #d0d7db;
+    font-size: 14px;
+    line-height: 1.6;
+}
+.ooo-v2-attachment-compatibility {
+    color: #aeb8be;
+    font-size: 13px;
+    line-height: 1.5;
+}
+.ooo-v2-attachment-compatibility span {
+    color: #e6b934;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    margin-right: 8px;
+}
+@media (max-width: 650px) {
+    .ooo-v2-attachment {
+        flex-direction: column;
+    }
+    .ooo-v2-attachment-image {
+        width: 100%;
+        min-width: 0;
+        min-height: 150px;
+    }
+}
+/* ========================================
+   V2 IMAGE GALLERY
+======================================== */
+.ooo-v2-gallery {
+    margin: 18px 0 26px;
+}
+.ooo-v2-gallery-description {
+    color: #aeb8be;
+    font-size: 14px;
+    line-height: 1.7;
+    margin-bottom: 16px;
+}
+.ooo-v2-gallery .gallery {
+    margin: 0;
+    padding: 0;
+}
+.ooo-v2-gallery .gallerybox {
+    margin: 0 8px 12px 0;
+}
+.ooo-v2-gallery .thumb {
+    background: #20262b;
+    border: 1px solid #343d44;
+    border-radius: 6px;
+    overflow: hidden;
+    padding: 5px;
+}
+.ooo-v2-gallery .thumb img {
+    border-radius: 4px;
+}
+.ooo-v2-gallery .gallerytext {
+    color: #aeb8be;
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+    padding-top: 6px;
+}
+/* V2 VEHICLE OVERVIEW REFINEMENTS */
+.ooo-v2-vehicle-layout {
+    align-items: start;
+}
+.ooo-v2-vehicle-description {
+    line-height: 1.7;
+}
+.ooo-v2-vehicle-description p:first-child {
+    margin-top: 0;
+}
+.ooo-v2-vehicle-layout + .ooo-v2-vehicle-sections {
+    margin-top: 28px;
+}
+.ooo-v2-heading-sub {
+    margin-left: 8px;
+}
+/* V2 VEHICLE CATEGORY REFINEMENTS */
+.ooo-v2-vehicle-category-intro {
+    margin: 16px 0 22px;
+    line-height: 1.7;
+}
+.ooo-v2-vehicle-list {
+    margin-top: 14px;
+}
+.ooo-v2-vehicle-list ul {
+    list-style: none;
+    margin: 0;
+    padding: 8px 16px;
+}
+.ooo-v2-vehicle-list li {
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid #343d44;
+}
+.ooo-v2-vehicle-list li:last-child {
+    border-bottom: none;
+}
+.ooo-v2-vehicle-list li a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 13px 6px;
+    text-decoration: none;
+    transition: color 0.15s ease;
+}
+.ooo-v2-vehicle-list li a::after {
+    content: "›";
+    color: #e6b934;
+    font-size: 20px;
+}
+.ooo-v2-vehicle-list li a:hover {
+    color: #e6b934;
+}
+/* V2 VEHICLE LIST ITEMS */
+.ooo-v2-vehicle-list-item {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px;
+    border-bottom: 1px solid #343d44;
+}
+.ooo-v2-vehicle-list-item:last-child {
+    border-bottom: none;
+}
+.ooo-v2-vehicle-list-image {
+    width: 150px;
+    min-width: 150px;
+    height: 85px;
+    background: #171c20;
+    border-radius: 5px;
+    overflow: hidden;
+}
+.ooo-v2-vehicle-list-image a {
+    display: block;
+    height: 100%;
+}
+.ooo-v2-vehicle-list-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.ooo-v2-vehicle-list-details {
+    flex: 1;
+    min-width: 0;
+}
+.ooo-v2-vehicle-list-name a {
+    font-weight: 700;
+    font-size: 16px;
+    color: #edf0f1;
+    text-decoration: none;
+}
+.ooo-v2-vehicle-list-name a:hover {
+    color: #e6b934;
+}
+.ooo-v2-vehicle-list-description {
+    color: #aeb8be;
+    font-size: 13px;
+    margin-top: 5px;
+}
+.ooo-v2-vehicle-list-arrow {
+    color: #e6b934;
+    font-size: 24px;
+    padding: 0 8px;
+}
+@media (max-width: 600px) {
+    .ooo-v2-vehicle-list-image {
+        width: 100px;
+        min-width: 100px;
+        height: 65px;
+    }
+}
+/* V2 COLLAPSIBLE LEVEL CARDS */
+.ooo-v2-level-card {
+    background: #20262b;
+    border: 1px solid #343d44;
+    border-radius: 7px;
+    margin-bottom: 7px;
+    overflow: hidden;
+}
+.ooo-v2-level-card.is-open {
+    border-color: #e6b934;
+}
+.ooo-v2-level-heading {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 12px 16px;
+    cursor: pointer;
+}
+.ooo-v2-level-heading:hover {
+    background: #293137;
+}
+.ooo-v2-level-heading:focus-visible {
+    outline: 2px solid #e6b934;
+    outline-offset: -2px;
+}
+.ooo-v2-level-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    min-width: 44px;
+    height: 44px;
+    background: #343d44;
+    color: #e6b934;
+    border-radius: 5px;
+    font-size: 19px;
+    font-weight: 700;
+}
+.ooo-v2-level-info {
+    flex: 1;
+    min-width: 0;
+}
+.ooo-v2-level-name {
+    color: #edf0f1;
+    font-size: 16px;
+    font-weight: 700;
+}
+.ooo-v2-level-xp {
+    color: #aeb8be;
+    font-size: 13px;
+    margin-top: 3px;
+}
+.ooo-v2-level-arrow {
+    color: #e6b934;
+    font-size: 24px;
+    transition: transform .2s;
+}
+.ooo-v2-level-card.is-open .ooo-v2-level-arrow {
+    transform: rotate(180deg);
+}
+.ooo-v2-level-details {
+    padding: 15px 20px 18px;
+    border-top: 1px solid #343d44;
+}
+.ooo-v2-level-details[hidden] {
+    display: none !important;
+}
+.ooo-v2-level-detail-row {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    color: #aeb8be;
+    font-size: 14px;
+}
+.ooo-v2-level-detail-row strong {
+    color: #edf0f1;
+}
+.ooo-v2-level-unlocks {
+    margin-top: 15px;
+    padding-top: 13px;
+    border-top: 1px solid #343d44;
+}
+.ooo-v2-level-unlocks-title {
+    color: #e6b934;
+    font-size: 12px;
+    font-weight: 700;
+    margin-bottom: 10px;
+}
+.ooo-v2-level-unlocks-content {
+    color: #edf0f1;
+    font-size: 14px;
+}
+.ooo-v2-level-unlocks-content a {
+    color: #e6b934;
+}
+@media (max-width: 600px) {
+    .ooo-v2-level-heading {
+        padding: 10px;
+        gap: 10px;
+    }
+    .ooo-v2-level-name {
+        font-size: 14px;
+    }
+}
+/* =========================================
+   V2 LEVEL PROGRESSION FIXES
+========================================= */
+/* Hide all level details by default */
+.ooo-v2 .ooo-v2-level-details {
+    display: none;
+}
+/* Show details only when expanded */
+.ooo-v2 .ooo-v2-level-card.is-open .ooo-v2-level-details {
+    display: block;
+}
+/* Keep cards compact */
+.ooo-v2 .ooo-v2-level-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+/* Remove unwanted MediaWiki spacing */
+.ooo-v2 .ooo-v2-level-list .ooo-v2-level-card {
+    margin: 0 !important;
+}
+/* Compact row height */
+.ooo-v2 .ooo-v2-level-heading {
+    padding: 9px 14px;
+    min-height: 48px;
+}
+/* Smaller level number */
+.ooo-v2 .ooo-v2-level-number {
+    width: 38px;
+    min-width: 38px;
+    height: 38px;
+    font-size: 17px;
+}
+/* Remove extra paragraph spacing */
+.ooo-v2 .ooo-v2-level-list p {
+    margin: 0 !important;
+}
+/* Expanded details spacing */
+.ooo-v2 .ooo-v2-level-details {
+    padding: 12px 16px;
+}
+/* V2 LEVEL CARDS - REMOVE MEDIAWIKI SPACING */
+.ooo-v2 .ooo-v2-level-list {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 6px !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+.ooo-v2 .ooo-v2-level-list > .ooo-v2-level-card {
+    margin: 0 !important;
+}
+/* Hide empty paragraphs inserted by MediaWiki */
+.ooo-v2 .ooo-v2-level-list > p:empty {
+    display: none !important;
+}
+/* Hide unwanted line breaks between cards */
+.ooo-v2 .ooo-v2-level-list > br {
+    display: none !important;
+}
+/* Prevent extra margins on card wrappers */
+.ooo-v2 .ooo-v2-level-list > p {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+/* Level card Details button */
+.ooo-v2 .ooo-v2-level-arrow {
+    font-size: 13px;
+    font-weight: 700;
+    color: #e6b934;
+    background: #30373c;
+    padding: 7px 14px;
+    border-radius: 5px;
+    transition: background .2s;
+    transform: none !important;
 }
-/* Hover effect matching item button style */
+.ooo-v2 .ooo-v2-level-card.is-open .ooo-v2-level-arrow {
-.ooo-card .tabber__tab:hover {
+    background: #3c3930;
-  border-color: rgba(245,196,0,0.55);
-  background: rgba(245,196,0,0.07); /* Same hover effect as item buttons */
 }
-/* Active tab with stronger highlight */
+.ooo-v2 .ooo-v2-level-card.is-open .ooo-v2-level-arrow::after {
-.ooo-card .tabber__tab--active {
+    content: "";
-  border-color: rgba(245,196,0,0.80);
-  background: rgba(245,196,0,0.10); /* Same active background as item buttons */
 }

MediaWiki:Common.css: Difference between revisions