/* Sección dados online · The Joker House. Página nocturna de mesa de juego: oscura a propósito, latón como acento. */
#dado{
  color-scheme:dark;
  --room:oklch(0.15 0.012 50);
  --room-2:oklch(0.19 0.014 50);
  --panel:oklch(0.18 0.014 50 / .93);
  --panel-edge:oklch(0.45 0.03 60 / .45);
  --well:oklch(0.12 0.01 50 / .78);
  --ink:oklch(0.95 0.012 80);
  --ink-2:oklch(0.86 0.018 78);
  --muted:oklch(0.76 0.02 75);
  --brass:oklch(0.8 0.12 80);
  --brass-ink:oklch(0.22 0.04 70);
  --crit:oklch(0.82 0.15 85);
  --fail:oklch(0.7 0.17 28);
  --atk:oklch(0.62 0.19 25);
  --dfn:oklch(0.62 0.13 255);
  --f-num:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-ui:"Figtree",system-ui,-apple-system,sans-serif;
  --gutter:max(16px,env(safe-area-inset-left,0px));
}

/* Barra superior */

/* Herramienta */
.d-hero{position:relative}
.d-stage{position:relative;height:clamp(540px,74vh,780px);overflow:hidden;background:var(--room);border-radius:18px}
.d-blur{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.5)}
.d-bg{position:absolute;max-width:none;user-select:none;pointer-events:none}
.d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.d-canvas.is-holding{cursor:grabbing}
.d-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,oklch(0.07 0.01 50 / .55) 100%)}
.d-nojs{position:absolute;inset:auto 16px 16px;background:var(--panel);padding:12px;border-radius:12px;z-index:5}

.d-top{position:absolute;z-index:4;top:12px;left:var(--gutter);right:var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;pointer-events:none}
.d-h1{margin:0;font-family:var(--f-num);font-weight:800;font-size:clamp(18px,2.2vw,26px);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;text-shadow:0 1px 10px oklch(0.1 0.01 50 / .9);max-width:22ch}
.d-result{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.d-total{font-family:var(--f-num);font-weight:800;font-size:clamp(52px,9vw,90px);line-height:.85;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px oklch(0.1 0.01 50 / .85)}
.d-total.is-wait{color:var(--muted);font-size:clamp(38px,7vw,60px)}
.d-parts{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:min(560px,60vw)}
.d-pt{display:inline-flex;align-items:baseline;gap:5px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:999px;padding:2px 9px 3px;font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.d-pt i{font-style:normal;font-weight:600;font-size:11.5px;color:var(--muted)}
.d-pt i:empty{display:none}
.d-pt.is-crit{border-color:var(--crit);color:var(--crit)}
.d-pt.is-fail{border-color:var(--fail);color:var(--fail)}
.d-pt.is-off{opacity:.45;text-decoration:line-through}
.d-pt.is-a{border-color:var(--atk)}.d-pt.is-d{border-color:var(--dfn)}
.d-tag{font-size:13.5px;font-weight:700;min-height:1.2em;text-shadow:0 1px 8px oklch(0.1 0.01 50 / .9)}
.d-tag.is-crit{color:var(--crit)}.d-tag.is-fail{color:var(--fail)}
.d-prev{font-size:12.5px;color:var(--muted);min-height:1.2em;font-variant-numeric:tabular-nums}
.d-tools{justify-self:end;display:flex;gap:8px;pointer-events:auto}
.d-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--panel);border:1px solid var(--panel-edge);color:var(--ink);cursor:pointer}
.d-icon svg{width:20px;height:20px}
.d-icon[aria-expanded="true"]{border-color:var(--brass);color:var(--brass)}
.d-hint{position:absolute;z-index:4;left:50%;bottom:170px;transform:translateX(-50%);margin:0;font-size:14px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:999px;padding:7px 14px;white-space:nowrap;pointer-events:none;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.d-hint.is-gone{opacity:0}

.d-dock{position:absolute;z-index:4;left:50%;bottom:14px;transform:translateX(-50%);width:max-content;max-width:min(860px,calc(100% - 2 * var(--gutter)));display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:20px;padding:12px;max-height:calc(100% - 150px);overflow:auto}
.d-ctrl:empty{display:none}
.d-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;flex:1 1 380px;min-width:0}
.d-roll{height:52px;padding:0 30px;border:0;border-radius:14px;background:var(--brass);color:var(--brass-ink);font-family:var(--f-num);font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 1px 0 oklch(1 0 0 / .35) inset,0 6px 18px oklch(0.6 0.12 70 / .25)}
.d-roll:active{transform:translateY(1px)}
.d-opts{display:none;flex-wrap:wrap;justify-content:center;gap:8px 14px;width:100%}
.d-hero.show-opts .d-opts{display:flex}
.d-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.d-chips>span{font-size:12.5px;color:var(--muted)}
.d-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 6px;border-radius:999px;border:1px solid var(--panel-edge);background:none;color:var(--ink);font-size:13px;cursor:pointer}
.d-chip i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px oklch(1 0 0 / .2) inset}
.d-chip[aria-checked="true"]{border-color:var(--brass);background:oklch(0.8 0.12 80 / .14)}

/* Piezas del panel */
.d-pool{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;width:min(560px,100%)}
.d-die{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.d-die-add{width:100%;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;border:1px solid var(--panel-edge);background:var(--well);color:var(--ink);cursor:pointer;padding:0}
.d-die-add svg{width:22px;height:22px;color:var(--muted)}
.d-die-add b{font-family:var(--f-num);font-weight:800;font-size:16px}
.d-die.has .d-die-add{border-color:var(--brass);background:oklch(0.8 0.12 80 / .12)}
.d-die.has .d-die-add svg{color:var(--brass)}
.d-die-n{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--brass);color:var(--brass-ink);font-family:var(--f-num);font-weight:800;font-size:14px;display:grid;place-items:center;padding:0 5px;pointer-events:none}
.d-die:not(.has) .d-die-n{display:none}
.d-die-rm{height:20px;width:100%;border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer}
.d-die:not(.has) .d-die-rm{visibility:hidden}
.d-step{display:flex;align-items:center;gap:2px;background:var(--well);border:1px solid var(--panel-edge);border-radius:12px;padding-left:10px}
.d-step span{font-size:12.5px;color:var(--muted);margin-right:4px}
.d-step button{width:36px;height:42px;border:0;background:none;color:var(--ink);font-size:20px;cursor:pointer;border-radius:10px}
.d-step button:disabled{opacity:.3;cursor:default}
.d-step b{min-width:34px;text-align:center;font-family:var(--f-num);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.d-btn{height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--panel-edge);background:var(--well);color:var(--ink);cursor:pointer;font-size:14px}
.d-btn[aria-pressed="true"]{border-color:var(--brass);color:var(--brass);background:oklch(0.8 0.12 80 / .12)}
.d-link{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px;padding:4px}
.d-seg{display:flex;border:1px solid var(--panel-edge);border-radius:12px;overflow:hidden}
.d-seg button{height:40px;padding:0 12px;border:0;background:var(--well);color:var(--ink);cursor:pointer;font-size:13.5px}
.d-seg button[aria-checked="true"]{background:oklch(0.8 0.12 80 / .18);color:var(--brass)}
.d-notation{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.d-notation label{font-size:12.5px;color:var(--muted)}
.d-notation input{height:40px;width:170px;border-radius:10px;border:1px solid var(--panel-edge);background:var(--well);color:var(--ink);padding:0 10px;font:600 15px var(--f-ui)}
.d-own input{width:200px}
.d-turn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.d-turn b{font-size:15px}
.d-turn small{color:var(--muted);font-size:12.5px}
.d-turn-dot{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px oklch(1 0 0 / .3)}
.d-check{display:flex;align-items:center;gap:6px;font-size:13.5px}
.d-sel{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.d-sel select{height:40px;border-radius:10px;border:1px solid var(--panel-edge);background:var(--well);color:var(--ink);padding:0 8px;font:600 14px var(--f-ui)}
.d-calc{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.d-calc-h{margin:0;font-size:12.5px;color:var(--muted)}
.d-calc-r{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;justify-content:center}
.d-calc-r b{font-family:var(--f-num);font-weight:800;font-size:30px;color:var(--brass);font-variant-numeric:tabular-nums}
.d-calc-r small{color:var(--muted);font-size:13px}
.d-chart{width:100%;max-width:560px;height:auto}
.d-histo{width:100%;max-width:520px}
.d-histo-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.d-bars{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;height:84px;align-items:end;margin-top:4px}
.d-bar{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.d-bar i{position:absolute;bottom:14px;width:70%;border-radius:3px 3px 0 0}
.d-exp{background:oklch(0.95 0.012 80 / .16)}
.d-real{background:var(--brass);width:46% !important}
.d-bar span{font-size:11px;color:var(--muted);line-height:14px}
.d-histo-n{margin:2px 0 0;font-size:11.5px;color:var(--muted);text-align:center}
.d-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:100%}
.d-cell{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--panel-edge);background:var(--well);color:var(--ink);font-size:13.5px;cursor:pointer;text-align:left}
.d-cell b{font-family:var(--f-num);font-weight:800;font-size:17px;color:var(--brass);font-variant-numeric:tabular-nums}
.d-cell:disabled{cursor:default}
.d-cell.is-done{opacity:.6}.d-cell.is-done b{color:var(--ink)}
.d-cell.is-sum{cursor:default;background:none}
.d-cell.is-total{grid-column:1/-1;border-color:var(--brass)}

/* Panel lateral en pantallas anchas */
@media (min-width:1100px){
  .d-dock.is-side{left:auto;right:var(--gutter);transform:none;top:16px;bottom:16px;width:360px;max-height:none;align-content:flex-start;justify-content:flex-start;flex-direction:column;flex-wrap:nowrap}
  .d-dock.is-side .d-ctrl{flex:0 0 auto;width:100%}
  .d-dock.is-side .d-roll{width:100%;order:-1}
  .d-hero:has(.is-side) .d-top{right:calc(360px + 2 * var(--gutter))}
}
@media (max-width:640px){
  .d-h1{font-size:15px;max-width:12ch}
  .d-top{grid-template-columns:auto 1fr auto}
  .d-chip span{display:none}.d-chip{padding:0 6px}.d-chip i{width:20px;height:20px}
  .d-ctrl{flex-basis:100%}
  .d-roll{flex:1;height:48px}
  .d-die-add{height:46px}
  .d-sheet{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .d-cell{min-height:30px;padding:0 6px;font-size:11.5px}.d-cell b{font-size:15px}
  .d-turn small{display:none}
  .d-dock{padding:10px;gap:8px}
  .d-step button{height:38px}
  .d-hint{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.d-hint{transition:none}}


/* Integración en la tienda */
#dado{font-family:var(--f-ui);color:var(--ink);line-height:1.5}
#dado *{box-sizing:border-box}
#dado button{font:inherit}
#dado :focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#dado h1,#dado p{margin:0}
.jhd-tool{max-width:1440px;margin:0 auto;padding:8px 24px 0}
.jhd .jh-legal-hero__sub{max-width:72ch}
.jh-legal-article > section.jhd-jump-wrap{display:none !important}
.jhd-article .jhd-sec{scroll-margin-top:110px}
.jhd-article .jhd-sec + .jhd-sec{margin-top:8px}
.jhd-cards{list-style:none;margin:0;padding:0;display:grid !important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.jhd-cards li{margin:0 !important;padding:0 !important}
.jhd-cards li::before{display:none !important}
.jhd-cards a{display:flex !important;flex-direction:column;gap:8px;text-decoration:none !important;color:#111 !important;font-weight:600;font-size:14.5px;line-height:1.3}
.jhd-cards img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;display:block;border:1px solid #e5e5e5}
.jhd-cards a:hover span{text-decoration:underline}
.jhd-guide{margin-top:18px}
@media (max-width:900px){
  .jh-legal-article > section.jhd-jump-wrap{display:block !important;margin-bottom:8px}
  .jhd-tool{padding:8px 12px 0}
  .d-stage{height:min(82svh,720px);border-radius:14px}
}

/* El tema pisa los botones: el de lanzar con su estilo propio */
#dado .d-roll{font-family:var(--f-num) !important;font-weight:800 !important;font-size:22px !important;letter-spacing:.06em !important;text-transform:uppercase !important;color:var(--brass-ink) !important;background:var(--brass) !important;border:0 !important;border-radius:14px !important;line-height:1 !important}
#dado .d-dock button{text-transform:none;letter-spacing:normal;box-shadow:none}
#dado .d-roll{box-shadow:0 1px 0 oklch(1 0 0 / .35) inset,0 6px 18px oklch(0.6 0.12 70 / .25) !important}
@media (max-width:640px){
  #dado .d-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  #dado .d-ctrl > .d-pool,#dado .d-ctrl > .d-calc,#dado .d-ctrl > .d-histo,#dado .d-ctrl > .d-sheet,#dado .d-ctrl > .d-turn,#dado .d-ctrl > .d-notation,#dado .d-ctrl > .d-seg,#dado .d-ctrl > .d-check,#dado .d-ctrl > .d-link,#dado .d-ctrl > .d-odds{grid-column:1/-1}
  #dado .d-step{padding-left:8px;justify-content:space-between}
  #dado .d-step span{font-size:11px;margin-right:0;line-height:1.1}
  #dado .d-step button{width:32px;height:36px}
  #dado .d-step b{min-width:26px;font-size:18px}
  #dado .d-btn{height:36px;font-size:12.5px;padding:0 8px}
  #dado .d-calc-r b{font-size:24px}
  #dado .d-roll{height:46px !important}
  .d-stage{height:calc(100svh - 70px);min-height:560px;max-height:none}
}

@media (min-width:1100px){
  #dado .d-dock.is-side .d-opts{display:flex;justify-content:flex-start}
  #dado .d-dock.is-side .d-pool{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  #dado .d-dock.is-side .d-ctrl{justify-content:flex-start}
}