/* OCTOMON V3 — REUSABLE ILLUSTRATED ASSETS, NOT SCREENSHOT BACKGROUNDS.
   Keeps DOM/content/catalogue logic unchanged. The images are isolated decorative components. */
:root{--detail-metal:url('../img/archives/detail/metal-grave.webp');--detail-paper:url('../img/archives/detail/papier-ancien.webp');--detail-wine:url('../img/archives/detail/bordeaux-patine.webp');--detail-frame:url('../img/archives/detail/chassis-maquette.webp');--detail-dossier:url('../img/archives/detail/dossier-parchemin.webp');--detail-plaque:url('../img/archives/detail/plaque-bordeaux.webp');--detail-ribbon:url('../img/archives/detail/ruban-bordeaux.webp');--detail-red-button:url('../img/archives/detail/bouton-rouge.webp');--detail-cream-button:url('../img/archives/detail/bouton-creme.webp')}
body.octomon-archive{background-image:radial-gradient(ellipse at 50% 0,#742c2359,transparent 50%),var(--detail-metal),linear-gradient(#231210,#140b0a);background-size:auto,580px,auto}
body.octomon-archive .site-header{background-image:url('../img/archives/detail/bandeau-navigation.webp')!important;background-position:center;background-size:100% 100%;background-repeat:no-repeat;border:0!important;box-shadow:0 5px 0 #130908,0 13px 22px #0009;min-height:74px}
body.octomon-archive .site-header::after{display:none}
body.octomon-archive .header-inner{min-height:74px;padding:7px 23px}
body.octomon-archive .main-nav a:hover,body.octomon-archive .main-nav a.active{background-image:var(--detail-red-button);background-size:100% 100%;background-repeat:no-repeat;border-color:transparent;box-shadow:none;clip-path:none}
body.octomon-archive .funding-soon{background-image:var(--detail-metal);background-size:220px;box-shadow:inset 0 0 0 2px #594d43}
/* Hero: paper and enamel are physically textured, the official logo stays a separate original asset. */
.octo-landing{border:8px solid #6b3729;outline:2px solid #d9a469;outline-offset:-14px;box-shadow:0 4px 0 #39170f,0 8px 0 #b7834d,0 17px 35px #000b}
.octo-landing-brand{background-image:radial-gradient(circle at 60% 35%,#a534306a,transparent 55%),var(--detail-wine);background-size:auto,540px;box-shadow:8px 0 0 #5d2a20,13px 0 0 #e8b36d}
.octo-landing-copy{background-image:linear-gradient(90deg,#f6dfbbf0,#f6dfbbd5),var(--detail-paper);background-size:auto,590px}
.octo-landing-copy::after{content:"";position:absolute;z-index:-1;inset:18px;pointer-events:none;outline:2px solid #b9683d4d;outline-offset:0}
.octo-landing-cta a.btn-primary,body.octomon-archive .btn-primary{background-image:var(--detail-red-button);background-position:center;background-repeat:no-repeat;background-size:100% 100%;border:0;color:#fff1da;box-shadow:0 3px 0 #3a1310;clip-path:none;padding:12px 20px}
.octo-landing-cta a.btn-secondary,body.octomon-archive .btn-secondary{background-image:var(--detail-cream-button);background-position:center;background-repeat:no-repeat;background-size:100% 100%;border:0;color:#81271f;box-shadow:0 3px 0 #5e311f;clip-path:none;padding:12px 19px}
.octo-action-rail{position:relative;padding:16px 15px;background:var(--detail-metal) center/530px repeat;border:8px ridge #995f36;outline:1px solid #e0aa68;outline-offset:-14px;gap:9px;box-shadow:0 6px 0 #210d0a,0 16px 28px #0008}
.octo-action-rail a{position:relative;background:var(--detail-red-button) center/100% 100% no-repeat;border:0;clip-path:none;padding:13px 16px;box-shadow:0 3px 0 #170908;min-height:91px}
.octo-action-rail a:hover{background:var(--detail-red-button) center/100% 100% no-repeat;filter:brightness(1.14)}
.octo-action-rail::after{content:"";position:absolute;bottom:-6px;left:calc(50% - 46px);width:92px;height:9px;border-radius:6px;background:#ffb045;box-shadow:0 0 16px #f96e23,0 0 5px #f8dd84;pointer-events:none}
.octo-document{background:var(--detail-dossier) center/100% 100% no-repeat!important;border:0!important;outline:0!important;box-shadow:4px 6px 0 #2d120d,0 16px 25px #0008;clip-path:none;padding:33px 32px 37px;min-height:380px}
.octo-document::before{display:none}
.octo-document h2,body.octomon-archive .section-head{background:var(--detail-ribbon) center/100% 100% no-repeat!important;border:none!important;outline:none!important;clip-path:none;box-shadow:0 4px 0 #58231b;padding:13px 20px}
.octo-document h2{margin:0 0 18px!important;color:#ffe5bb!important}
.octo-document h2 span{color:#ffc67b}
body.octomon-archive .hero-panel.archive-page-hero{background:linear-gradient(90deg,#f9e6c9d8,#f2d2a4c9),var(--detail-paper);background-size:auto,650px;border:9px ridge #a87549;box-shadow:0 5px 0 #38170f,0 18px 32px #000a;clip-path:none}
body.octomon-archive .data-card,body.octomon-archive .rule-card,body.octomon-archive .step-card,body.octomon-archive .credits-panel,body.octomon-archive .resource-card,body.octomon-archive .category-block,body.octomon-archive .guide-card,body.octomon-archive .side-card,body.octomon-archive .guide-section{background:var(--detail-dossier) center/100% 100% no-repeat!important;border:0!important;outline:none!important;padding:24px 30px;clip-path:none;box-shadow:3px 5px 0 #371812,0 14px 26px #0005}
body.octomon-archive .data-card::before,body.octomon-archive .rule-card::before,body.octomon-archive .step-card::before,body.octomon-archive .credits-panel::before,body.octomon-archive .resource-card::before,body.octomon-archive .category-block::before,body.octomon-archive .guide-card::before,body.octomon-archive .side-card::before,body.octomon-archive .guide-section::before{display:none}
body.octomon-archive .site-footer{border:7px ridge #ab7446;background:linear-gradient(#151212bd,#1c1511ef),var(--detail-metal);background-size:auto,520px;outline:1px solid #e6b078;outline-offset:-12px}
/* True application interiors; decorative plates never replace real sprite / item artwork. */
.octo-terminal-banner{background-image:linear-gradient(90deg,#761d18 0 22%,#f4d9b9ec 22.2% 74%,#e6a97c 100%),var(--detail-paper);background-size:auto,600px;border:8px ridge #ac7348;outline:1px solid #eab777;outline-offset:-13px;clip-path:none}
.octo-terminal-brand{background-image:linear-gradient(#9229255c,#42161277),var(--detail-wine);background-size:auto,550px}
.octo-terminal-intro{background-image:linear-gradient(90deg,#f7e0bcef,#f5d9b6d8),var(--detail-paper);background-size:auto,570px}
body.archive-dex .app-shell,body.archive-loot .app-shell{background-image:var(--detail-frame),var(--detail-metal)!important;background-position:center,center;background-size:100% 100%,550px;background-repeat:no-repeat,repeat;border:0!important;outline:none!important;clip-path:none;box-shadow:0 12px 0 #180a09,0 21px 40px #000b!important;padding:41px 39px 30px}
body.archive-dex .app-shell::before,body.archive-loot .app-shell::before,body.archive-dex .app-shell::after,body.archive-loot .app-shell::after{content:"";position:absolute;z-index:1;top:80px;width:26px;height:171px;border:0;border-radius:0;background:url('../img/archives/detail/balise-ambre.webp') center/100% 100% no-repeat;box-shadow:none;pointer-events:none}
body.archive-dex .app-shell::before,body.archive-loot .app-shell::before{left:3px}
body.archive-dex .app-shell::after,body.archive-loot .app-shell::after{right:3px}
body.archive-dex .topbar,body.archive-loot .topbar{background-image:linear-gradient(#6a241b45,#39171381),var(--detail-plaque)!important;background-size:auto,100% 100%;border:0!important;padding:16px 26px!important;clip-path:none;box-shadow:0 4px 0 #2b0f0c!important}
body.archive-dex .layout,body.archive-loot .layout{background-image:var(--detail-wine)!important;background-size:580px;border:6px ridge #9b623d;outline:1px solid #cf9557;outline-offset:-10px;padding:15px}
body.archive-dex .filters,body.archive-loot .filters,body.archive-dex .rightbar .widget,.octo-lookup-panel{background:var(--detail-dossier) center/100% 100% no-repeat!important;border:0!important;outline:none!important;box-shadow:3px 5px 0 #3b170f!important;clip-path:none!important;padding:28px 24px!important}
body.archive-dex .content,body.archive-loot .content{background-image:linear-gradient(#fbe4c5ce,#e8c69bc6),var(--detail-paper);background-size:auto,570px;border:7px ridge #9e6845;box-shadow:inset 0 0 0 1px #edb982}
body.archive-dex .panel-title,body.archive-dex .filter-section summary,body.archive-dex .filter-section h3,body.archive-dex .rightbar .widget-head,.octo-lookup-head{background:var(--detail-ribbon) center/100% 100% no-repeat!important;border:none!important;clip-path:none!important;color:#fff0d6!important;box-shadow:0 3px 0 #55241b;padding:12px 15px!important}
body.archive-dex .cards .card,body.archive-loot .grid .card{background:var(--detail-dossier) center/100% 100% no-repeat!important;border:0!important;outline:none!important;clip-path:none;box-shadow:3px 4px 0 #593021,0 8px 14px #30130c33!important;padding:22px 22px 18px}
body.archive-dex .cards .card::before,body.archive-loot .grid .card::before{display:none}
body.archive-dex .cards .card:hover,body.archive-loot .grid .card:hover{box-shadow:4px 6px 0 #92362a,0 12px 19px #0005!important;filter:brightness(1.025)}
body.archive-dex .card-num{color:#76251d;margin-top:3px}
body.archive-dex .cards .card h2,body.archive-loot .card h3{color:#86251d}
body.archive-dex .modal-overlay .modal,body.archive-loot .modal-card{background-image:var(--detail-dossier)!important;background-position:center;background-size:100% 100%;border:0!important;outline:none;padding:36px}
body.archive-loot .modal-card{padding:36px!important}
body.archive-loot .card-top .icon,.octo-preview-image{background:linear-gradient(#fff5dbb5,#ebcfacc9),var(--detail-paper);background-size:auto,450px;border:2px solid #bc8552}
@media(max-width:1100px){body.octomon-archive .header-inner{padding:6px 12px}.octo-document{padding:29px 28px 32px}body.archive-dex .app-shell,body.archive-loot .app-shell{padding:29px 26px 23px}body.archive-dex .filters,body.archive-loot .filters,body.archive-dex .rightbar .widget,.octo-lookup-panel{padding:24px 20px!important}}
@media(max-width:810px){body.archive-dex .app-shell,body.archive-loot .app-shell{padding:22px 19px 19px}body.archive-dex .app-shell::before,body.archive-loot .app-shell::before,body.archive-dex .app-shell::after,body.archive-loot .app-shell::after{display:none}.octo-action-rail a{padding:12px}}
@media(max-width:570px){body.octomon-archive .site-header{background-size:cover}.octo-landing-brand{background-size:auto,430px}.octo-landing-copy{background-size:auto,430px}.octo-document{padding:28px 23px 33px}.octo-document h2{padding:13px 18px}.octo-action-rail{padding:10px 8px}.octo-action-rail a{padding:9px 10px;min-height:73px}body.archive-dex .app-shell,body.archive-loot .app-shell{padding:17px 12px 15px!important}body.archive-dex .topbar,body.archive-loot .topbar{padding:13px 17px!important}body.archive-dex .layout,body.archive-loot .layout{padding:7px;border-width:4px}body.archive-dex .filters,body.archive-loot .filters,body.archive-dex .rightbar .widget,.octo-lookup-panel{padding:21px 17px!important}body.archive-dex .cards .card,body.archive-loot .grid .card{padding:17px 11px 13px}body.archive-dex .content,body.archive-loot .content{border-width:4px}body.archive-dex .modal-overlay .modal,body.archive-loot .modal-card{padding:20px!important}}
/* Nine-slice from the APPROVED Octodex reference: no stretching of individual bolts or lamps. */
body.archive-dex .app-shell,body.archive-loot .app-shell{border:28px solid transparent!important;border-image-source:var(--detail-frame);border-image-slice:48;border-image-width:28px;border-image-outset:0;border-image-repeat:stretch;background-image:var(--detail-metal)!important;background-size:560px!important;background-repeat:repeat!important;padding:11px 8px 16px!important}
@media(max-width:810px){body.archive-dex .app-shell,body.archive-loot .app-shell{border-width:19px!important;border-image-width:19px;padding:6px 4px 9px!important}}
@media(max-width:570px){body.archive-dex .app-shell,body.archive-loot .app-shell{border-width:12px!important;border-image-width:12px;padding:4px 2px 7px!important}}
/* Mobile categories remain all accessible and legible: no clipped horizontal rail. */
@media(max-width:570px){
  body.archive-dex .topbar .quick-filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:100%;overflow:visible!important}
  body.archive-dex .topbar .quick-filter{min-width:0!important;white-space:normal;padding:8px 6px}
  body.archive-dex .topbar .quick-filter:last-child:nth-child(odd){grid-column:1/-1}
}