:root{
    --felt-1:#12332c; --felt-2:#0a201b;
    --brass:#c9a24b; --brass-soft:#e2c47f;
    --cream:#f3ecdd; --ink:#0d1512;
    --ab-ink:#17181a; --ab-paper:#f7f4ed; --ab-accent:#f4512c;
    --content-max:560px; --focus-ring:var(--ab-accent);
    --face:#f2ead6; --pip:#2a2320;
    --panel:rgba(6,20,17,.55);
    --panel-hover:rgba(6,20,17,.82);
    --panel-card:rgba(0,0,0,.16);
    --panel-solid:rgba(8,18,15,.96);
    --line-soft:rgba(243,236,221,.2);
    --muted:rgba(243,236,221,.72);
  }
  body.light{
    --cream:#2c2620; --ink:#f8f3e8;
    --panel:rgba(255,255,255,.6);
    --panel-hover:rgba(255,255,255,.85);
    --panel-card:rgba(60,45,30,.06);
    --panel-solid:rgba(250,247,240,.98);
    --line-soft:rgba(50,38,25,.18);
    --muted:rgba(50,38,25,.72);
  }
  body.light h1 em{color:#b3812a}
  body.light .hist-filter{color-scheme:light}
  *{box-sizing:border-box;margin:0;padding:0}
  html{color-scheme:dark;scroll-behavior:smooth}
  body{
    min-height:100vh;position:relative;font-family:"Georgia","Times New Roman",serif;color:var(--cream);
    background:
      radial-gradient(120% 90% at 50% 8%, rgba(255,245,210,.16), rgba(255,245,210,0) 55%),
      radial-gradient(140% 120% at 50% 40%, var(--felt-1), var(--felt-2) 78%);
    display:flex;flex-direction:column;align-items:center;
    padding:clamp(20px,4vw,44px) 18px 48px;gap:18px;overflow-x:hidden;
  }
  body.light{color-scheme:light}
  body.drawer-open{overflow:hidden}
  button,input,select,summary,a{font:inherit}
  button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{
    outline:3px solid var(--focus-ring);outline-offset:3px
  }
  .skip-link{position:fixed;top:10px;left:50%;z-index:120;transform:translate(-50%,-160%);background:var(--ab-paper);color:var(--ab-ink);border:2px solid var(--ab-ink);padding:10px 16px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;font-weight:700;text-decoration:none;transition:transform .18s}
  .skip-link:focus{transform:translate(-50%,0)}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .app-shell{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px}
  .product-header{text-align:center;width:min(var(--content-max),94vw)}
  .eyebrow{font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.42em;text-transform:uppercase;font-size:11px;color:var(--brass);opacity:.85;margin-bottom:8px;padding-left:.42em}
  h1{font-size:clamp(28px,6vw,48px);font-weight:400;line-height:1}
  h1 em{color:var(--brass-soft);font-style:italic}
  .product-intro{max-width:52ch;margin:12px auto 0;color:var(--muted);font-family:"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.55}
  .reset-game{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:transparent;border:1px solid var(--line-soft);border-radius:999px;padding:7px 16px;cursor:pointer;transition:.18s}
  .reset-game:hover{border-color:var(--brass);color:var(--brass-soft)}
  .felts{display:flex;gap:5px;flex-wrap:nowrap;align-items:center;width:100%}
  .felt{flex:1 1 0;min-width:0;max-width:30px;position:relative;border:2px solid transparent;border-radius:50%;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
  .felt::before{content:"";display:block;padding-top:100%}
  .felt.sel{border-color:var(--brass)}
  .lang{position:absolute;top:12px;right:12px;z-index:80}
  .lang-icon{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid rgba(201,162,75,.5);color:var(--brass);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s}
  .lang-icon:hover{border-color:var(--brass)}
  .lang-icon svg{width:20px;height:20px}
  .lang-menu{position:absolute;top:44px;right:0;display:none;flex-direction:column;background:var(--panel-solid);border:1px solid rgba(201,162,75,.35);border-radius:10px;overflow:hidden;min-width:130px;box-shadow:0 12px 26px rgba(0,0,0,.4)}
  .lang-menu[hidden]{display:none}
  .lang.open .lang-menu{display:flex}
  .lang-menu button{font-family:"Helvetica Neue",Arial,sans-serif;font-size:13px;color:var(--cream);background:transparent;border:none;padding:10px 14px;text-align:left;cursor:pointer;transition:.15s}
  .lang-menu button:hover{background:rgba(201,162,75,.14)}
  .lang-menu button[aria-current="true"]{color:var(--brass);font-weight:700}

  /* Tablero */
  .board{width:min(560px,94vw)}
  .board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .board-head h2{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);opacity:.9;font-weight:600}
  .collapse-btn{width:36px;height:36px;border-radius:9px;background:var(--panel-card);border:1px solid rgba(201,162,75,.4);color:var(--brass);font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.18s;flex:none}
  .board-tools{display:flex;align-items:center;gap:6px}
  .board-tool{width:36px;height:36px;border-radius:9px;background:var(--panel-card);border:1px solid rgba(201,162,75,.4);color:var(--brass);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.18s;flex:none}
  .board-tool:hover{border-color:var(--brass)}
  .board-tool[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass)}
  .board-tool svg{width:15px;height:15px}
  .collapse-btn:hover{border-color:var(--brass)}
  .collapsed .collapse-btn{transform:rotate(-90deg)}
  .board.collapsed .board-track{display:none}
  #historyBlock.collapsed .history-bar{display:none}
  .board-track{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;scroll-behavior:smooth}
  .board-track.matrix{display:grid;grid-template-columns:repeat(auto-fill,46px);gap:6px;justify-content:center;overflow-x:visible}
  .board-track::-webkit-scrollbar{display:none}
  .board-cell{flex:none;width:46px;min-height:58px;border-radius:12px;border:1px solid var(--line-soft);background:var(--panel-card);display:flex;flex-direction:column;align-items:center;padding:4px 2px;gap:2px}
  .board-cell.start{border-color:rgba(201,162,75,.5)}
  .board-cell .idx{font-family:"Helvetica Neue",Arial,sans-serif;font-size:9px;color:var(--muted)}
  .board-cell .tokens{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;font-size:18px;line-height:1.15}

  /* Icono de personalización + cajón lateral */
  .gear{position:absolute;top:12px;left:12px;z-index:80;width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid rgba(201,162,75,.5);color:var(--brass);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s}
  .gear:hover{border-color:var(--brass)}
  .gear svg{width:21px;height:21px}
  .drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
  .drawer-backdrop.open{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:min(430px,92vw);z-index:95;transform:translateX(102%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;overflow-y:auto;padding:18px 16px 30px;background:linear-gradient(180deg,var(--felt-1),var(--felt-2));border-left:1px solid rgba(201,162,75,.3);display:flex;flex-direction:column;gap:14px}
  .drawer.open{transform:translateX(0);visibility:visible;transition-delay:0s}
  .drawer-head{display:flex;align-items:center;justify-content:space-between}
  .drawer-head h2{font-family:"Georgia",serif;font-weight:400;font-size:22px;color:var(--cream)}
  .drawer-close{width:34px;height:34px;border-radius:50%;background:var(--panel);border:1px solid rgba(201,162,75,.3);color:var(--cream);font-size:14px;cursor:pointer}
  .drawer-body{display:flex;flex-direction:column;gap:14px}
  .drawer .dropdown,.drawer .block{width:100%}

  /* Emoji del turno y selector por jugador */
  .turn-emoji{font-size:20px;line-height:1;flex:none}
  .emoji-wrap{position:relative;flex:none}
  .emoji-btn{width:38px;height:38px;border-radius:10px;font-size:20px;background:var(--panel-card);border:1px solid rgba(201,162,75,.3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
  .emoji-btn:hover{border-color:var(--brass)}
  .emoji-pop{position:absolute;top:44px;left:0;z-index:10;display:none;flex-direction:column;gap:3px;background:var(--panel-solid);border:1px solid rgba(201,162,75,.35);border-radius:10px;padding:8px;width:244px;max-height:264px;overflow-y:auto;box-shadow:0 12px 26px rgba(0,0,0,.4)}
  .emoji-pop.open{display:flex}
  .emoji-cat{font-family:"Helvetica Neue",Arial,sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);opacity:.8;margin:5px 2px 1px}
  .emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
  .emoji-pop button{font-size:19px;background:transparent;border:none;border-radius:7px;padding:5px 0;cursor:pointer}
  .emoji-pop button:hover{background:rgba(201,162,75,.16)}

  /* Modo niños */
  body.kids{--brass:#f2b645;--brass-soft:#ffd884;font-family:ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif}
  body.kids *{font-family:ui-rounded,"SF Pro Rounded","Nunito","Baloo 2","Segoe UI",system-ui,sans-serif!important}
  body.kids .gbtn{border-radius:20px}
  body.kids .btn-lg{text-transform:none;letter-spacing:.04em}
  body.kids .stage-emoji{font-size:31px}
  body.kids .roll-chip,body.kids .control,body.kids .dropdown,body.kids .prow,body.kids .stage{border-radius:22px}
  body.kids .segmented button{border-radius:14px}

  .topbar{width:min(560px,94vw);display:flex;align-items:center;justify-content:flex-end;gap:12px}
  .topbar .reset-game{flex:none}
  .stage-name{position:absolute;top:15px;left:20px;z-index:3;font-family:"Georgia",serif;font-size:18px;color:var(--cream);max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stage-emoji{position:absolute;top:12px;right:16px;z-index:3;width:46px;height:46px;border-radius:11px;background:var(--face);display:flex;align-items:center;justify-content:center;font-size:25px;transform:rotate(-8deg);box-shadow:0 5px 12px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.45)}

  .stage{position:relative;width:min(560px,94vw);border-radius:20px;padding:44px 24px 30px;background:radial-gradient(90% 70% at 50% 22%, rgba(255,244,214,.10), rgba(0,0,0,0) 60%);border:1px solid rgba(201,162,75,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 60px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.4)}
  .stage::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,162,75,.16);border-radius:14px;pointer-events:none}
  .table{display:flex;justify-content:center;align-items:flex-end;gap:clamp(48px,12vw,72px);min-height:170px;perspective:900px}
  .die-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
  .die-wrap.hidden{display:none}
  .scene{width:96px;height:96px;perspective:640px;cursor:pointer;border:0;background:transparent;color:inherit;padding:0;border-radius:18px}

  /* Dado D6 (cubo con puntos) */
  .cube{position:relative;width:96px;height:96px;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(24deg);will-change:transform}
  .face{position:absolute;width:96px;height:96px;background:linear-gradient(150deg, color-mix(in srgb, var(--face) 100%, white 8%), var(--face) 62%, color-mix(in srgb, var(--face) 100%, black 12%));border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -8px 16px rgba(0,0,0,.14), inset 0 8px 14px rgba(255,255,255,.35);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:13px;gap:2px}
  .cell{display:flex;align-items:center;justify-content:center}
  .pip{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pip) 100%, white 45%), var(--pip) 70%);box-shadow:inset 0 -1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(255,255,255,.25)}
  .f1{transform:translateZ(48px)} .f6{transform:rotateY(180deg) translateZ(48px)}
  .f3{transform:rotateY(90deg) translateZ(48px)} .f4{transform:rotateY(-90deg) translateZ(48px)}
  .f2{transform:rotateX(90deg) translateZ(48px)} .f5{transform:rotateX(-90deg) translateZ(48px)}

  /* Dados poliédricos (D4/D8/D12/D20) */
  .poly{width:96px;height:96px;will-change:transform}
  .poly svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
  .poly polygon{fill:var(--face);stroke:var(--pip);stroke-opacity:.35;stroke-width:2;stroke-linejoin:round}
  .poly text{fill:var(--pip);font-family:"Georgia",serif;font-weight:700}

  .shadow{width:78px;height:16px;border-radius:50%;background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));transition:transform .3s ease, opacity .3s ease}
  .rolling .shadow{opacity:.45;transform:scale(1.15)}

  .button-row{width:min(560px,94vw);display:flex;gap:10px}
  .gbtn{font-family:"Georgia",serif;border-radius:12px;padding:16px 18px;cursor:pointer;transition:filter .18s,border-color .18s,background .18s,transform .1s}
  .gbtn:active{transform:translateY(2px)}
  .gbtn:disabled{opacity:.35;cursor:not-allowed}
  .btn-lg{flex:1;font-size:20px;letter-spacing:.14em;text-transform:uppercase}
  .btn-sm{flex:none;font-size:15px;letter-spacing:.06em}
  .btn-primary{border:1px solid var(--brass);color:var(--ink);background:linear-gradient(180deg,var(--brass-soft),var(--brass));box-shadow:0 10px 24px rgba(201,162,75,.28), inset 0 1px 0 rgba(255,255,255,.5)}
  .btn-primary:hover{filter:brightness(1.05)}
  .btn-secondary{border:1px solid rgba(201,162,75,.45);color:var(--cream);background:var(--panel)}
  .btn-secondary:hover:not(:disabled){border-color:var(--brass);background:var(--panel-hover)}
  .btn-stop{border:1px solid #c14436;color:#fff;background:linear-gradient(180deg,#e6675a,#c14436);box-shadow:0 10px 24px rgba(193,68,54,.32)}
  .btn-stop:hover{filter:brightness(1.05)}

  .toggles{width:min(560px,94vw);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .toggle{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:var(--panel);border:1px solid rgba(201,162,75,.28);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.18s}
  .toggle:hover{border-color:var(--brass)}
  .toggle[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass);font-weight:700}

  .block{width:min(560px,94vw)}
  .controls{display:flex;flex-wrap:nowrap;gap:10px;align-items:stretch}
  .control{flex:1 1 0;min-width:0;background:var(--panel);border:1px solid rgba(201,162,75,.22);border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:9px}
  .control .clabel{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);opacity:.9}
  .segmented{display:flex;gap:6px}
  .segmented button{flex:1;font-family:"Georgia",serif;font-size:14px;color:var(--cream);background:transparent;border:1px solid var(--line-soft);border-radius:8px;padding:8px 0;cursor:pointer;transition:.18s}
  .segmented button:hover{border-color:var(--brass)}
  .segmented button[aria-pressed="true"]{background:var(--brass);color:var(--ink);border-color:var(--brass);font-weight:bold}

  .dropdown{width:min(560px,94vw);background:var(--panel);border:1px solid rgba(201,162,75,.22);border-radius:12px;overflow:hidden}
  .dropdown>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
  .dropdown>summary::-webkit-details-marker{display:none}
  .chev{transition:transform .2s;color:var(--brass);font-size:12px}
  .dropdown[open] .chev{transform:rotate(180deg)}
  .player-list{padding:2px 12px 12px;display:flex;flex-direction:column;gap:8px}
  .game-settings{padding:2px 12px 12px;display:flex;flex-direction:column;gap:10px}
  .game-settings .control{background:var(--panel-card)}
  .switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:12px;letter-spacing:.03em;color:var(--cream)}
  .switch-row+.switch-row{margin-top:10px}
  .switch{position:relative;flex:none;width:44px;height:25px;border-radius:999px;border:1px solid rgba(201,162,75,.4);background:var(--panel-card);cursor:pointer;padding:0;transition:.18s}
  .switch::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:var(--cream);transition:.18s}
  .switch[aria-checked="true"]{background:var(--brass);border-color:var(--brass)}
  .switch[aria-checked="true"]::after{left:21px;background:var(--ink)}
  .prow{display:flex;flex-direction:column;gap:9px;padding:9px 10px;border-radius:9px;border:1px solid var(--line-soft);background:var(--panel-card);transition:.18s}
  .prow.active{border-color:var(--brass);background:rgba(201,162,75,.09)}
  .prow-top{display:flex;align-items:center;gap:10px}
  .reorder{display:flex;flex-direction:column;gap:2px;flex:none}
  .rbtn{width:22px;height:15px;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--brass);background:var(--panel-card);border:1px solid rgba(201,162,75,.25);border-radius:5px;cursor:pointer;padding:0;transition:.15s}
  .rbtn:hover:not(:disabled){border-color:var(--brass);background:rgba(201,162,75,.12)}
  .rbtn:disabled{opacity:.25;cursor:not-allowed}
  .plabel{font-family:"Helvetica Neue",Arial,sans-serif;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);opacity:.75}
  .presets{display:flex;flex-wrap:nowrap;gap:5px;justify-content:center;align-items:flex-start}
  .preset{flex:1 1 0;min-width:0;max-width:48px;position:relative;padding:0;border:none;outline:2px solid transparent;outline-offset:-2px;border-radius:8px;background:none;cursor:pointer;transition:outline-color .15s}
  .preset::before{content:"";display:block;padding-top:100%}
  .preset:hover{outline-color:rgba(201,162,75,.5)}
  .preset.sel{outline-color:var(--brass)}
  .pmini{position:absolute;inset:0;border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12%;gap:5%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.12)}
  .pmini span{border-radius:50%}
  .pname{flex:1 1 auto;min-width:0;background:transparent;border:none;color:var(--cream);font-family:"Georgia",serif;font-size:15px;padding:3px 5px;border-radius:6px;transition:background .15s}
  .pname:hover{background:rgba(255,255,255,.05)}
  .pname:focus{outline:none;background:rgba(255,255,255,.09);box-shadow:inset 0 -1px 0 var(--brass)}
  .badge{display:none;flex:none;font-family:"Helvetica Neue",Arial,sans-serif;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
  .prow.active .badge{display:inline}
  .pcolors{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-left:2px}
  .name-chips{display:flex;flex-wrap:wrap;gap:6px;padding-left:2px}
  .name-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel-card);border:1px solid rgba(201,162,75,.3);border-radius:999px;padding:3px 4px 3px 11px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;color:var(--cream)}
  .name-chip .pick{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .name-chip .name-del{width:16px;height:16px;border-radius:50%;border:none;background:rgba(0,0,0,.25);color:var(--cream);font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
  .name-chip .name-del:hover{background:#c14436;color:#fff}
  .pchip{display:flex;align-items:center;gap:6px;position:relative}
  .pchip .clab{font-family:"Helvetica Neue",Arial,sans-serif;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);opacity:.85}
  .pchip .dot{width:30px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);cursor:pointer;padding:0}
  .swapc{flex:none;align-self:center;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--brass);background:var(--panel-card);border:1px solid rgba(201,162,75,.28);border-radius:6px;cursor:pointer;padding:0;transition:.15s}
  .swapc:hover{border-color:var(--brass);background:rgba(201,162,75,.14)}
  .dot{border:1px solid rgba(0,0,0,.4)!important;padding:0}
  .color-pop{position:absolute;top:36px;left:0;z-index:12;display:none;flex-direction:column;gap:8px;background:var(--panel-solid);border:1px solid rgba(201,162,75,.35);border-radius:12px;padding:10px;width:210px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
  .color-pop.open{display:flex}
  .cp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
  .cp-grid-sm{grid-template-columns:repeat(9,1fr);gap:4px}
  .cp-sw{width:100%;aspect-ratio:1;border-radius:7px;border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);cursor:pointer;padding:0}
  .cp-grid-sm .cp-sw{border-radius:4px}
  .cp-sw:hover{outline:2px solid var(--brass);outline-offset:1px}
  .cp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .cp-title{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
  .cp-more{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.03em;color:var(--cream);background:var(--panel-card);border:1px solid rgba(201,162,75,.4);border-radius:8px;padding:5px 9px;cursor:pointer}
  .cp-more:hover{border-color:var(--brass)}
  .cp-view{min-height:20px}
  .cp-hsl{display:flex;flex-direction:column;gap:9px}
  .cp-rrow{display:flex;align-items:center;gap:8px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;color:var(--muted)}
  .cp-rrow>span{width:12px;flex:none}
  .cp-range{flex:1;width:100%;height:16px;border-radius:8px;-webkit-appearance:none;appearance:none;cursor:pointer}
  .cp-hue{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
  .cp-lit{background:linear-gradient(90deg,#000,#888,#fff)}
  .cp-r{background:linear-gradient(90deg,#000,#f00)}
  .cp-g{background:linear-gradient(90deg,#000,#0f0)}
  .cp-b{background:linear-gradient(90deg,#000,#00f)}
  .cp-sysview{display:flex;flex-direction:column;gap:8px;align-items:stretch}
  .cp-native-big{width:100%;height:42px;border:1px solid rgba(201,162,75,.4);border-radius:9px;background:none;padding:0;cursor:pointer}
  .cp-syshint{font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;color:var(--muted);text-align:center}
  .cp-sv-wrap{display:flex;flex-direction:column;gap:8px}
  .cp-sv-area{position:relative;width:100%;height:130px;border-radius:9px;cursor:crosshair;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  .cp-sv-cursor{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.55);transform:translate(-50%,-50%);pointer-events:none}
  .cp-sv-bottom{display:flex;align-items:center;gap:10px}
  .cp-sv-prev{width:30px;height:30px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
  .cp-sv-bottom .cp-range{flex:1}
  .cp-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--brass);cursor:pointer}
  .cp-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--brass);cursor:pointer}
  .cp-prev{height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);border:1px solid rgba(0,0,0,.3)}
  .cp-sys{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.03em;color:var(--cream);border-top:1px solid var(--line-soft);padding-top:8px}
  .cp-native{width:42px;height:26px;border:none;background:none;padding:0;cursor:pointer;border-radius:6px}
  .cp-ok{font-family:"Georgia",serif;font-size:14px;color:var(--ink);background:linear-gradient(180deg,var(--brass-soft),var(--brass));border:1px solid var(--brass);border-radius:8px;padding:7px;cursor:pointer}
  .cp-ok:hover{filter:brightness(1.05)}
  .saved-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
  .save-die{flex:none;align-self:center;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--brass);background:var(--panel-card);border:1px solid rgba(201,162,75,.35);border-radius:7px;cursor:pointer;padding:0;transition:.15s}
  .save-die:hover{border-color:var(--brass);background:rgba(201,162,75,.12)}
  .save-die svg{width:16px;height:16px}
  .presets.saved{flex-wrap:wrap;justify-content:flex-start;gap:9px}
  .saved-wrap{position:relative;flex:0 0 auto}
  .presets.saved .preset{flex:0 0 34px;width:34px;max-width:34px}
  .saved-del{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;border:1px solid rgba(201,162,75,.4);background:var(--panel-solid);color:var(--cream);font-size:10px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
  .saved-del:hover{border-color:#e6675a;color:#f2a99f}

  .history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
  .history-head h2{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);opacity:.9;font-weight:600}
  .hist-actions{display:flex;align-items:center;gap:8px}
  .hist-filter{appearance:none;-webkit-appearance:none;-moz-appearance:none;color-scheme:dark;font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.03em;color:var(--cream);background-color:var(--panel);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23c9a24b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 9px center;border:1px solid rgba(201,162,75,.3);border-radius:7px;padding:5px 26px 5px 10px;cursor:pointer;max-width:150px}
  .hist-filter:focus{outline:none;border-color:var(--brass)}
  .clear-btn{font-family:"Helvetica Neue",Arial,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--cream);background:transparent;border:1px solid var(--line-soft);border-radius:7px;padding:5px 12px;cursor:pointer;transition:.18s}
  .clear-btn:hover:not(:disabled){border-color:#e6675a;color:#f2a99f}
  .clear-btn:disabled{opacity:.3;cursor:not-allowed}
  .history-bar{display:flex;align-items:center;gap:8px}
  .nav{flex:none;width:34px;height:82px;border-radius:9px;background:var(--panel);border:1px solid rgba(201,162,75,.22);color:var(--brass);font-size:16px;cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center}
  .nav:hover:not(:disabled){border-color:var(--brass);background:var(--panel-hover)}
  .nav:disabled{opacity:.25;cursor:not-allowed}
  .track{flex:1;min-width:0;display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:8px 2px 2px}
  .track::-webkit-scrollbar{display:none}
  .roll-chip{position:relative;flex:none;background:var(--panel);border:1px solid rgba(201,162,75,.24);border-radius:10px;padding:9px 11px;text-align:center;animation:pop .3s ease}
  .roll-chip.skip{border-style:dashed;border-color:var(--line-soft)}
  .chip-del{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;border:1px solid rgba(201,162,75,.4);background:var(--panel-solid);color:var(--cream);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.15s}
  .chip-del:hover{border-color:#e6675a;color:#f2a99f}
  .faces{display:flex;gap:6px;justify-content:center}
  .mini{width:34px;height:34px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:4px;gap:1px}
  .mcell{display:flex;align-items:center;justify-content:center}
  .mp{width:6px;height:6px;border-radius:50%;box-shadow:inset 0 -1px 1px rgba(0,0,0,.4)}
  .mini-poly{width:36px;height:36px}
  .mini-poly svg{width:100%;height:100%;overflow:visible}
  .cap{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:6px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:10px;letter-spacing:.04em;font-weight:600;color:var(--cream)}
  .cap-dot{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
  .skip-mark{height:34px;display:flex;align-items:center;justify-content:center;font-size:20px;color:rgba(243,236,221,.45)}
  .skip-note{display:block;margin-top:2px;font-family:"Helvetica Neue",Arial,sans-serif;font-size:9px;letter-spacing:.06em;color:var(--muted)}
  .empty-msg{flex:1;text-align:center;color:var(--muted);font-size:13px;font-style:italic;padding:26px 0}
  @keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

  /* Efectos */
  #confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
  .flash{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;background:radial-gradient(circle at 50% 42%, rgba(226,196,127,.55), rgba(226,196,127,0) 60%)}
  .flash.go{animation:flash .6s ease}
  @keyframes flash{0%{opacity:0}22%{opacity:1}100%{opacity:0}}

  .site-footer{width:min(var(--content-max),94vw);margin-top:12px;border-top:1px solid var(--line-soft);padding:22px 0 0;font-family:"Helvetica Neue",Arial,sans-serif}
  .product-endorsement{display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);text-decoration:none}
  .endorsement-lockup{display:flex;align-items:center;gap:12px;min-width:0}
  .endorsement-lockup img{width:42px;height:42px;flex:none;background:var(--ab-paper);border-radius:9px;padding:5px}
  .endorsement-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
  .endorsement-copy strong{color:var(--cream);font-size:12px;letter-spacing:.05em;font-weight:650}
  .endorsement-copy span,.corporate-link-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
  .corporate-link-label{color:var(--brass-soft);white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:3px}
  body.light .endorsement-copy strong{color:var(--cream)}
  .footer-meta{display:flex;justify-content:space-between;gap:12px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:9px;letter-spacing:.1em;text-transform:uppercase}

  @media (max-width:520px){
    body{padding:18px 11px 30px;gap:14px}
    .app-shell{gap:14px}
    .product-header{padding:0 44px}
    .eyebrow{font-size:9px;letter-spacing:.34em}
    h1{font-size:31px}
    .product-intro{font-size:13px;line-height:1.45;margin-top:9px}
    .stage{width:100%;padding-left:16px;padding-right:16px}
    .button-row,.board,.block,.topbar{width:100%}
    .board-tool,.collapse-btn{width:44px;height:44px}
    .history-head{align-items:flex-start;gap:8px}
    .hist-actions{gap:6px}
    .hist-filter{max-width:105px;height:44px}
    .clear-btn{height:44px;padding-inline:10px}
    .product-endorsement{align-items:flex-start}
    .corporate-link-label{white-space:normal;text-align:right;line-height:1.4}
    .footer-meta{align-items:flex-start;flex-direction:column}
  }

  @media (max-width:360px){
    .history-head{flex-direction:column}
    .hist-actions{width:100%}
    .hist-filter{flex:1;min-width:0;max-width:none}
  }

  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
    #confetti,.flash{display:none!important}
  }