/* AVAR-DÉS 2.0 — Direction artistique « artefact de collection ».
   Original, themeable UI. Aesthetic proposals, not canon assets. */
:root {
  --bg:#080e11; --panel:#101a1d; --panel-deep:#0c1316;
  --ink:#f3e8cf; --muted:#afada2; --line:#d4bd8a22;
  --serif: Georgia,'Palatino Linotype','Book Antiqua',serif;
  --sans:'Aptos','Segoe UI',ui-sans-serif,system-ui,sans-serif;
}
html { scroll-padding-top:30px; }
body {
  background:
    radial-gradient(ellipse at 52% -10%, color-mix(in srgb,var(--secondary) 13%,transparent),transparent 45%),
    radial-gradient(ellipse at 95% 72%, #96703c12,transparent 36%),
    radial-gradient(ellipse at 0% 85%, #30616f12,transparent 42%),
    #080e11;
  min-height:100vh;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
body::before {content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.4;
  background-image:linear-gradient(#dac59208 1px,transparent 1px),linear-gradient(90deg,#dac59206 1px,transparent 1px);
  background-size:96px 96px;mask-image:linear-gradient(to bottom,transparent,#000 65%,transparent);
}
.app-shell { position:relative;z-index:1;max-width:1570px;padding:0 52px; }
.masthead { min-height:86px;border-bottom:1px solid #ccab6c25;position:relative; }
.masthead::after {content:"";display:block;position:absolute;bottom:-1px;left:0;width:118px;height:1px;background:var(--accent);box-shadow:0 0 18px var(--accent); }
.brand-sigil{width:44px;height:44px;border-color:color-mix(in srgb,var(--accent),transparent 50%);border-radius:13px;transform:rotate(45deg);background:#c6aa7610;box-shadow:0 0 24px #b89d5e1c,inset 0 0 16px #dcbf7d0a;}
.brand-sigil::after{inset:6px;border-radius:9px;border-color:#d2ba8766;}
.brand-sigil{font-size:0}
.brand-sigil::before{content:"✦";font-size:29px;color:var(--accent);transform:rotate(-45deg);}
.wordmark {font-size:20px;letter-spacing:2.8px;gap:16px;font-weight:400;text-shadow:0 2px 12px #0009;}
.wordmark small {color:#beaa81;font-size:9px;letter-spacing:2.2px;margin-top:8px;}
.top-nav{gap:27px;font-size:12px;letter-spacing:.3px}
.top-nav button,.top-nav a{color:#c9c5b8}.top-nav .active{color:var(--accent)}
.top-nav button:hover,.top-nav a:hover{color:var(--ink)}
.local-status{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:#b9c9ba}
.local-status i{width:7px;height:7px;box-shadow:0 0 0 3px #85bba31b,0 0 11px #85bba380}
.page-heading{position:relative;padding:34px 0 27px;align-items:end}
.page-heading:before {content:'✧';color:var(--accent);position:absolute;left:290px;top:30px;font:15px var(--serif);opacity:.6}
.page-heading .eyebrow{color:#bca878;font-size:10px;letter-spacing:3.7px;margin-bottom:9px}
h1{font-size:clamp(38px,4.2vw,62px);letter-spacing:-1.6px;line-height:1.07;margin-bottom:10px;text-wrap:balance}
h1 em{font-style:italic;color:#d9bd82;text-shadow:0 2px 22px #ad885b24}
.intro{font-size:12px;letter-spacing:.25px;color:#bfb9ac;line-height:1.7}
.era-stamp{border-left:1px solid #d6b87f36;padding-left:23px;padding-bottom:7px}
.era-stamp>span{font-size:51px;color:#e3c58d;text-shadow:0 0 25px #daba7031}
.era-stamp small{color:#bead8b;letter-spacing:2.3px}
.era-stamp strong{font-size:20px;letter-spacing:.5px}
.era-heading{display:flex;align-items:center;justify-content:space-between;color:#c0ae8c;gap:12px;margin:5px 0 10px;font-size:10px;letter-spacing:2.1px;}
.era-heading small{color:#8f9892;font-size:10px;letter-spacing:.25px;text-transform:none}
.era-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;border:none;border-radius:0;background:transparent;padding:0;margin-bottom:30px;overflow:visible}
.era-button {min-width:0;min-height:87px;flex-direction:column;gap:0;padding:0;align-items:stretch;position:relative;isolation:isolate;border:1px solid #d9b87d27;border-radius:7px;background:#101a1c;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.era-button .era-visual{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.68;transition:opacity .25s,transform .4s;filter:saturate(.95)}
.era-button:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#071011ed 0%,#08101374 70%,#0003 100%);}
.era-button .era-numeral{font:normal 30px var(--serif);color:#eee7d7;text-shadow:0 2px 13px #000;line-height:1.1;margin-top:15px}
.era-button .era-word{text-transform:uppercase;font-size:9px;letter-spacing:1.7px;color:#d7c8a8;margin-top:5px}
.era-button[aria-pressed=true]{border-color:var(--accent);background:#1e2e30;transform:translateY(-2px);box-shadow:0 7px 22px #0008,0 0 0 1px var(--accent) inset}
.era-button[aria-pressed=true] .era-numeral{color:#fff3cc;font-size:33px}
.era-button[aria-pressed=true] .era-visual,.era-button:hover .era-visual{opacity:.98;transform:scale(1.07)}
.era-button[aria-pressed=true]:after{content:"";height:2px;position:absolute;bottom:0;left:18%;right:18%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.era-button:hover{background:#202b2e;border-color:#c3aa777a}
.era-button[data-era="1"] .era-visual{background-image:url('assets/era-thumb-01.webp')}
.era-button[data-era="2"] .era-visual{background-image:url('assets/era-thumb-02.webp')}
.era-button[data-era="3"] .era-visual{background-image:url('assets/era-thumb-03.webp')}
.era-button[data-era="4"] .era-visual{background-image:url('assets/era-thumb-04.webp')}
.era-button[data-era="5"] .era-visual{background-image:url('assets/era-thumb-05.webp')}
.era-button[data-era="6"] .era-visual{background-image:url('assets/era-thumb-06.webp')}
.era-button[data-era="7"] .era-visual{background-image:url('assets/era-thumb-07.webp')}
.era-button[data-era="8"] .era-visual{background-image:url('assets/era-thumb-08.webp')}
.workbench{grid-template-columns:minmax(0,1fr) 345px;gap:32px}
.tray-heading{height:37px;margin-top:-6px;color:#abb2ab;font-size:11px;letter-spacing:.4px}
.tray-heading #era-title{color:#e2d4b9;font:italic 15px var(--serif)}
.tray-heading #material-name{color:#baa279;font-size:11px}
.tiny-dot{width:6px;height:6px;flex-basis:6px;box-shadow:0 0 0 3px #d6b77f19,0 0 12px var(--accent)}
.tray{height:474px;position:relative;background-color:var(--surface);background-size:cover;background-position:center;isolation:isolate;border-radius:12px;border:1px solid #bb9c675e;
 box-shadow:0 0 0 3px #0a0f11,0 0 0 4px #cca86f28,0 22px 74px #0009,0 3px 32px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 0 95px #0006;
 transition:background .42s ease,box-shadow .4s ease;
}
.tray[data-era="1"]{background-image:linear-gradient(180deg,#0002,#04100938 70%,#0008),url('assets/table-era-01.webp')}
.tray[data-era="2"]{background-image:linear-gradient(180deg,#0002,#14090039 70%,#0008),url('assets/table-era-02.webp')}
.tray[data-era="3"]{background-image:linear-gradient(180deg,#0002,#0b081739 70%,#0008),url('assets/table-era-03.webp')}
.tray[data-era="4"]{background-image:linear-gradient(180deg,#0002,#00151931 70%,#000a),url('assets/table-era-04.webp')}
.tray[data-era="5"]{background-image:linear-gradient(180deg,#0002,#060c2439 70%,#0008),url('assets/table-era-05.webp')}
.tray[data-era="6"]{background-image:linear-gradient(180deg,#0002,#091b2839 70%,#0008),url('assets/table-era-06.webp')}
.tray[data-era="7"]{background-image:linear-gradient(180deg,#0002,#14201339 70%,#0008),url('assets/table-era-07.webp')}
.tray[data-era="8"]{background-image:linear-gradient(180deg,#0002,#0b091739 70%,#0008),url('assets/table-era-08.webp')}
.tray:before {z-index:4;inset:13px;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:6px;box-shadow:0 0 14px #0004,inset 0 0 14px #0005;opacity:.49}
.tray:after {z-index:4;inset:22px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:1px;opacity:.40}
.tray-grain{z-index:0;background:radial-gradient(ellipse at 51% 43%,transparent 17%,#0002 65%,#0009 99%),repeating-linear-gradient(25deg,transparent 0 11px,#fff1 12px,transparent 13px);opacity:.46}
.tray[data-motif=racines] .tray-grain,.tray[data-motif=fragments] .tray-grain{background:radial-gradient(ellipse,transparent,#0006)}
.table-engraving{z-index:1;opacity:.25!important;transform:scale(1,.90)!important;mix-blend-mode:screen;}
.tray[data-era="4"] .table-engraving{opacity:.09!important}
.tray[data-era="5"] .table-engraving,.tray[data-era="6"] .table-engraving{opacity:.36!important}
.tray-halo{position:absolute;inset:8%;z-index:1;pointer-events:none;border-radius:50%;opacity:.75;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 47%,color-mix(in srgb,var(--secondary) 8%,transparent),transparent 42%),radial-gradient(ellipse at 50% 90%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 60%)}
.tray.is-rolling .tray-halo{animation:table-pulse 1.7s ease-out both}
@keyframes table-pulse{0%{opacity:.15;transform:scale(.65)}38%{opacity:1;transform:scale(1.06)}100%{opacity:.65;transform:scale(1)}}
.corner{border-color:#ead09a;opacity:.73;width:23px;height:23px;z-index:5}
.corner:before{content:"";width:3px;height:3px;background:var(--accent);position:absolute;box-shadow:0 0 9px var(--accent)}
.top-left:before{top:-2px;left:-2px}.top-right:before{top:-2px;right:-2px}.bottom-left:before{bottom:-2px;left:-2px}.bottom-right:before{bottom:-2px;right:-2px}
.tray-top{top:37px;left:40px;right:40px;color:#e9d4a9;opacity:.94;font-size:9px;letter-spacing:2.2px;text-shadow:0 2px 15px #000}
.tray-top>span:nth-child(2){font-size:11px;letter-spacing:3.8px;text-shadow:0 2px 14px #000}
#dice-canvas{z-index:3;filter:drop-shadow(0 8px 18px #0005)}
.empty-hint{bottom:79px;color:#efe1c0;opacity:.73;font-size:8px;letter-spacing:2.2px;text-shadow:0 2px 10px #000b}
.tray-bottom{bottom:31px;left:40px;right:40px}
.tray-bottom>span{color:#d8d3c5;font-size:10px;text-shadow:0 2px 9px #000b}
.small-toggle{border:1px solid #c3b18b48;border-radius:20px;padding:5px 10px;background:#091517ac;color:#f0e0c6;font-size:10px;box-shadow:0 0 10px #0003}
.small-toggle b{color:#ddd1b7}
#gesture-line {height:3px;box-shadow:0 0 10px var(--accent)}
.result-strip{min-height:117px;margin-top:15px;padding:17px 20px;border:1px solid #ddbd872d;border-radius:10px;gap:17px;background:linear-gradient(110deg,#cfb37c0d,#101c20e8 44%,#121a1c);position:relative;overflow:hidden;box-shadow:inset 0 1px #fff1,0 7px 25px #0004}
.result-strip:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.7}
.result-strip.is-finished{border-color:color-mix(in srgb,var(--accent),transparent 42%)}
.result-strip.is-finished .result-total{animation:result-appear .46s ease-out both}
@keyframes result-appear{from{transform:scale(.72);filter:brightness(2)}to{transform:scale(1);filter:brightness(1)}}
.result-seal{border:1px solid #dfc1836e;width:51px;height:51px;flex-basis:51px;border-radius:12px;background:linear-gradient(135deg,#dbc18a1d,#061516);font-size:29px;transform:rotate(45deg)}
.result-seal span{transform:rotate(-45deg)}
.result-copy .eyebrow{color:#c5ad80;font-size:9px;letter-spacing:2px}
.result-copy p{font:italic 24px var(--serif);color:#f7e9cf;line-height:1.12}
.result-copy>span:last-child{font-size:10px;line-height:1.5;color:#b4b9b0}
.result-total{font-size:60px;color:#f7d693;line-height:1;font-variant-numeric:lining-nums tabular-nums;text-shadow:0 0 26px #e5bd6c27,0 2px 12px #000a}
.visual-note{font-size:11px;line-height:1.5;margin:10px 6px;color:#bcb29f}
.console{position:relative;min-height:595px;background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 50%),linear-gradient(155deg,#142126,#101a1e 75%);border:1px solid #d5b67b3e;border-radius:12px;padding:26px;box-shadow:inset 0 1px #eed1a914,0 17px 42px #0006;}
.console:after{content:"";position:absolute;inset:7px;border:1px solid #c9aa7222;border-radius:8px;pointer-events:none}
.console-heading{position:relative;z-index:1;margin-bottom:18px}
.console-heading .eyebrow{color:var(--accent);font-size:10px;letter-spacing:2.2px;margin-bottom:6px}
.console h2{font-size:25px;margin-bottom:5px;line-height:1.1;color:#f2e5cc}
.console-heading p{font-size:11px;color:#b0b5af;margin:0}
.dice-picker{position:relative;z-index:1;gap:8px;margin-bottom:16px}
.die-button {height:70px;border-radius:7px;border:1px solid #d0ad6e2e;background:linear-gradient(154deg,#17282c,#0d161a);color:#d3c8ae;box-shadow:inset 0 1px #fff1,0 2px 9px #0003;transition:transform .15s,border-color .2s,background .2s}
.die-button svg{width:32px;height:32px;color:#e0bf82;filter:drop-shadow(0 0 5px #dcb9781b)}
.die-button:hover{transform:translateY(-2px);border-color:#dcc184a3;background:#26383a}
.die-button.selected{border-color:var(--accent);background:linear-gradient(150deg,#2a3e3b,#17272a)}
.die-button .selection-count{background:var(--accent);color:#16211c;font-weight:800}
.finish-choices {margin:0 0 22px;border:0;padding:0;position:relative;z-index:1}
.finish-choices legend{font-size:9px;letter-spacing:1.9px;color:#c1b18c;margin-bottom:8px}
.finish-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.finish-option{min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #d1b88731;background:#0812169c;padding:8px 2px;border-radius:5px;font-size:11px;color:#c2c7c0;transition:background .16s,border-color .16s}
.finish-option[aria-pressed=true]{border-color:var(--accent);color:#f0e4ca;background:#c6a87016;box-shadow:inset 0 0 0 1px #e7d4a810}
.finish-swatch {display:block;width:13px;height:13px;flex:0 0 13px;transform:rotate(45deg);border:1px solid #ffffff55;border-radius:2px;box-shadow:0 0 0 2px #0004}
.finish-swatch.gem{background:linear-gradient(135deg,#8bd9c4,#245d6b 38%,#142b38 40%,#a5e6d8)}
.finish-swatch.metal{background:linear-gradient(135deg,#f2e9c1,#ac8b59 44%,#423827 55%,#d7aa5e)}
.finish-swatch.stone{background:linear-gradient(135deg,#b4b2a4,#6a6f74 40%,#313b41 60%,#969b8f)}
.formula-row {font-size:11px;color:#ddcfb4}
.formula-input-wrap{border-color:#d2b78656;background:linear-gradient(130deg,#071013,#0d171a)}
.formula-input-wrap input{color:#f9e8ce;font:27px var(--serif);font-variant-numeric:lining-nums;padding-left:15px}
.formula-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #e0bd7b1d}
.field-hint{color:#aaaba0}
.mode-buttons button.selected{background:#cdb07723;border-color:#cdb07766;color:#edd3a0}
.subtle-input{background:#091316;border-color:#d6b8893b}
.roll-button{min-height:61px;background:linear-gradient(115deg,#ead5a0,#caa568 48%,#e8cc8f);color:#132125;font-weight:750;letter-spacing:.8px;border-radius:7px;box-shadow:0 7px 22px #c49a573b,inset 0 1px #fff8;transition:transform .16s,box-shadow .2s,filter .2s}
.roll-button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 12px 30px #c49a5757}
.roll-button:active:not(:disabled){transform:translateY(0)}
.roll-button .roll-icon{font-size:25px;color:#194248}
.roll-button .key-hint{color:#1e3131;border-color:#17302b42}
.console-rule{margin-top:21px}
.presets-heading .eyebrow{color:#d5bb83}
.preset-chip{border-color:#d5b88950}
.advanced summary{color:#c4b592}
.recent-section{margin-top:42px;padding-top:30px;border-top-color:#d5ba872c}
.section-heading h2{font:normal 30px var(--serif);color:#f2dfbc}
.section-heading .eyebrow{font-size:10px;color:#bfa779}
.history-card{border:1px solid #d5b78a35;border-radius:9px;background:linear-gradient(145deg,#1b292b,#10181c 75%);box-shadow:inset 0 1px #ffffff0b}
.history-card .history-formula{color:var(--accent);font-size:22px}
.history-card .history-total{color:#f0dfbb;font-size:35px}
footer{border-color:#d5ba872c;color:#9ba9a2;font-size:10px}
footer b{font-size:9px;border-color:var(--accent);color:var(--accent)}
.modal{background:linear-gradient(165deg,#172428,#0d171a);border-color:#c5a77266;box-shadow:0 25px 90px #000b}
.modal::backdrop{background:#030b0eab}
.modal h2{color:#f0ddba}
.icon-button{color:#d2c6ac}
.icon-button:hover{color:#f2d398}
@media(min-width:1450px){.workbench{grid-template-columns:minmax(0,1fr) 367px}.console{padding:29px}.tray{height:530px}.die-button{height:73px}}
@media(max-width:1150px){.app-shell{padding:0 30px}.workbench{grid-template-columns:minmax(0,1fr) 325px;gap:20px}.console{padding:20px}.tray{height:445px}.era-button{min-height:77px}.era-button .era-numeral{margin-top:10px}}
@media(max-width:900px){.app-shell{padding:0 22px}.workbench{grid-template-columns:minmax(0,1fr) 290px;gap:16px}.console{padding:17px}.console h2{font-size:22px}.console-heading p{display:none}.die-button{height:60px}.finish-option{gap:4px;font-size:10px}.finish-swatch{width:10px;height:10px;flex-basis:10px}.tray{height:405px}.result-seal{display:none}.era-button{min-height:70px}.era-button .era-numeral{font-size:27px}.page-heading{padding-top:28px}}
@media(max-width:700px){
 .app-shell,body.is-embedded .app-shell{padding:0 16px}
 .masthead{min-height:75px}.wordmark{font-size:17px;letter-spacing:1.6px}.wordmark small{font-size:7px;letter-spacing:1.2px}.brand-sigil{width:33px;height:33px;border-radius:8px}.brand-sigil:before{font-size:22px}.brand-sigil:after{inset:4px;border-radius:6px}
 .top-nav{gap:14px}.top-nav button{font-size:11px}
 .page-heading{padding:32px 0 25px}.page-heading:before{display:none}h1,.page-heading h1{font-size:clamp(35px,8vw,48px);letter-spacing:-1.2px;max-width:100%;line-height:1.06}.intro{font-size:11px;max-width:350px}
 .era-heading{margin:1px 0 10px}.era-heading small{display:none}.era-picker{display:flex;overflow-x:auto;gap:7px;padding:3px 3px 9px;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c3a77375 #081115;margin-bottom:22px}
 .era-button{flex:0 0 74px;height:67px;min-height:67px;scroll-snap-align:center;}.era-button .era-numeral{font-size:26px;margin-top:10px}.era-button[aria-pressed=true] .era-numeral{font-size:28px}.era-button .era-word{display:block!important;font-size:8px;letter-spacing:1px;margin-top:1px}
 .workbench{display:flex;flex-direction:column;gap:19px}.table-column{width:100%}.tray{height:365px}.tray-top{left:26px;right:26px;top:33px;font-size:8px}.tray-top>span:nth-child(2){font-size:9px;letter-spacing:2px}.tray-bottom{left:26px;right:26px;bottom:23px}.tray-bottom>span{font-size:9px}.small-toggle{font-size:9px;padding:4px 7px}.small-toggle b{font-size:7px}
 .result-strip{margin-top:12px;min-height:100px;padding:14px 15px;gap:7px}.result-copy p{font-size:21px}.result-total{font-size:50px}.result-seal{display:none}
 .console{padding:24px;width:100%;min-height:0}.console-heading{display:block;margin-bottom:19px}.console-heading .eyebrow{display:block;margin-bottom:8px}.console-heading p{display:block;margin-top:7px}.console h2{font-size:27px}.dice-picker{grid-template-columns:repeat(8,1fr);gap:5px}.die-button{height:63px;gap:2px;font-size:10px}.die-button svg{width:27px;height:27px}.finish-options{grid-template-columns:repeat(3,1fr)}.finish-option{font-size:11px;padding:10px 3px}.finish-swatch{width:12px;height:12px;flex-basis:12px}
 .recent-section{margin-top:30px}.section-heading h2{font-size:26px}.history-card{padding:14px 16px}
 body.is-embedded .page-heading h1{font-size:37px}
}
@media(max-width:410px){
 .app-shell,body.is-embedded .app-shell{padding:0 11px}
 .wordmark{font-size:15px}.wordmark small{font-size:6px}.brand-sigil{width:30px;height:30px}
 .page-heading h1{font-size:36px}
 .tray{height:342px}.tray-top{left:22px;right:22px}.tray-top>span:nth-child(2){display:none}.tray-top>span:last-child{display:inline}.tray-bottom{left:22px;right:22px;gap:3px}.tray-bottom>span{max-width:108px;font-size:8px}.tray-toggles{gap:4px}.small-toggle{padding:5px 5px;font-size:8px}.empty-hint{letter-spacing:1px;font-size:7px}
 .console{padding:16px}.dice-picker{gap:4px}.die-button{height:57px}.die-button svg{width:22px;height:22px}.finish-option{font-size:10px}
 .result-copy p{font-size:19px}.result-total{font-size:41px}
}
@media(prefers-reduced-motion:reduce){.tray-halo,.result-strip .result-total{animation:none!important}}
/* Compact phone: a 4×2 dice palette prevents viewport overflow below 360px. */
@media(max-width:360px){
  .dice-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .die-button{min-width:0;min-height:53px;height:53px}
  .finish-options{gap:5px}
}