:root{
  --bg:#0b0b0d;
  --panel:#15161a;
  --panel2:#202127;
  --text:#f5f5f2;
  --muted:#a6a7ad;
  --line:rgba(255,255,255,.10);
  --stage:#f4f1ea;
  --accent:#ffcf33;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
button{border:0;background:#2a2b31;color:var(--text);border-radius:999px;padding:.62rem .82rem;cursor:pointer;transition:.16s transform,.16s background,.16s opacity}
button:hover{background:#3a3b42;transform:translateY(-1px)}
button:active{transform:translateY(0)}
.app{height:100dvh;display:grid;grid-template-columns:214px 1fr 256px;background:radial-gradient(circle at 50% 0,#1a1b20,#09090b 58%)}
.closet,.inspector{height:100dvh;background:#111217;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;z-index:50}
.inspector{border-right:0;border-left:1px solid var(--line);padding:14px;gap:12px;background:#131419;overflow:auto}
.brand{height:62px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 8px}
.brand strong{display:block;font-size:15px}.brand span{display:block;color:var(--muted);font-size:11px}.icon{width:34px;height:34px;padding:0;display:grid;place-items:center;background:#24252a}
.libraryModes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 10px 8px}.libraryModes button{border-radius:14px;background:#1d1e23;font-size:12px}.libraryModes button.active{background:var(--accent);color:#111;font-weight:800}
.search{margin:0 10px 9px;padding:10px 11px;border:1px solid var(--line);background:#0d0e11;color:var(--text);border-radius:14px;outline:none}.search:focus{border-color:rgba(255,207,51,.6)}
.chips{display:flex;gap:5px;flex-wrap:wrap;padding:0 10px 8px;overflow:auto;max-height:110px}.chips button{font-size:11px;padding:7px 8px;background:#1f2025;color:#cfd0d5;white-space:nowrap}.chips button.active{background:var(--accent);color:#101010;font-weight:700}
.libraryNote{padding:0 10px 8px;color:#b4b5bb;font-size:11px;line-height:1.3}
.library{overflow:auto;padding:0 8px 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.thumb{position:relative;height:88px;border-radius:16px;background:#202126;border:1px solid var(--line);padding:5px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{max-width:100%;max-height:100%;object-fit:contain;filter:none;mix-blend-mode:normal;opacity:1}
.thumb:hover{outline:2px solid rgba(255,207,51,.45)}
.thumb span{position:absolute;left:6px;right:6px;bottom:5px;font-size:9px;color:white;text-shadow:0 1px 5px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
.thumb.modelThumb{background:#1b1c21}
.thumb.modelThumb::after{content:'modelo';position:absolute;right:5px;top:5px;font-size:8px;letter-spacing:.03em;text-transform:uppercase;padding:2px 5px;border-radius:999px;background:rgba(255,207,51,.94);color:#111;font-weight:800}
.stageWrap{height:100dvh;min-width:0;display:grid;grid-template-rows:auto 1fr auto;padding:12px;gap:10px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.modeBtns{display:flex;gap:8px;align-items:center;min-width:max-content}.modeBtns button{background:#1d1e23}.modeBtns button:first-child{background:var(--accent);color:#111;font-weight:800}
.titleBox{min-width:220px;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:3px;flex:1}.titleBox input{width:min(100%,420px);text-align:center;background:transparent;border:0;color:var(--text);font-size:clamp(18px,2vw,28px);font-weight:850;outline:none}.titleBox span{font-size:12px;color:var(--muted)}
.stage{position:relative;height:100%;border-radius:28px;overflow:hidden;background:var(--stage);box-shadow:0 26px 80px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.72);touch-action:none;isolation:isolate}
.stage.dark{--stage:#111214}.stage.blue{--stage:#dfeaf6}.stage.warm{--stage:#f1e6d6}.stage.checker{background:linear-gradient(45deg,#e6e6e6 25%,transparent 25%),linear-gradient(-45deg,#e6e6e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6e6e6 75%),linear-gradient(-45deg,transparent 75%,#e6e6e6 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0;background-color:#fff}
.stage.erase-mode .lookItem,.stage.restore-mode .lookItem,.stage.paint-mode .lookItem{cursor:crosshair}
.baseLayer{position:absolute;inset:0;pointer-events:none;z-index:2;display:flex;align-items:center;justify-content:center}.baseLayer.editable{pointer-events:auto}.baseModel{position:absolute;left:50%;top:56%;width:62%;transform:translate(-50%,-50%);max-height:92%;opacity:1;display:none;filter:none;mix-blend-mode:normal;touch-action:none}.baseModel.show{display:block}.baseBtns{grid-template-columns:1fr 1fr}.baseBtns button:last-child{grid-column:1 / -1}
.gridGuide{display:none}.floor{position:absolute;left:50%;bottom:9%;width:34%;height:5%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.10),transparent 70%);border-radius:50%;z-index:3;pointer-events:none}.emptyState{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);color:rgba(0,0,0,.42);text-align:center;font-size:24px;font-weight:800;line-height:1.2;pointer-events:none;z-index:4}.emptyState small{font-size:13px;font-weight:600}.stage.dark .emptyState{color:rgba(255,255,255,.35)}
.mannequin{position:absolute;left:50%;top:49%;width:min(32vw,370px);height:min(72vh,720px);transform:translate(-50%,-50%);opacity:0;z-index:2;pointer-events:none;transition:opacity .18s}.stage.show-silhouette .mannequin{opacity:.075}.stage.dark.show-silhouette .mannequin{opacity:.12;filter:invert(1)}
.head,.neck,.torso,.hips,.leg{position:absolute;left:50%;transform:translateX(-50%);background:#000}.head{top:0;width:18%;aspect-ratio:1;border-radius:50%}.neck{top:15%;width:7%;height:7%;border-radius:10px}.torso{top:22%;width:38%;height:30%;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:30% 30% 14% 14%}.hips{top:53%;width:34%;height:12%;border-radius:40%}.leg{top:64%;width:10%;height:35%;border-radius:20px}.leg.l{margin-left:-8%}.leg.r{margin-left:8%}
.lookItem{position:absolute;left:50%;top:50%;width:42%;transform-origin:50% 50%;z-index:10;touch-action:none;user-select:none;cursor:grab;filter:none;mix-blend-mode:normal;opacity:1}.lookItem:active{cursor:grabbing}.lookItem.selected{outline:2px dashed rgba(255,207,51,.94);outline-offset:6px;border-radius:12px}.lookItem canvas{width:100%;height:auto;display:block;pointer-events:none;filter:none;mix-blend-mode:normal;opacity:1}
.hintbar{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;color:#a8a9b0;font-size:12px}.hintbar span{background:rgba(255,255,255,.055);border:1px solid var(--line);padding:5px 9px;border-radius:999px}
.insTitle{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#b9bac0}.selectedName{font-weight:800;line-height:1.15;min-height:22px}.inspector label{display:flex;flex-direction:column;gap:6px;color:#d8d9de;font-size:12px}.inspector input[type=range]{width:100%;accent-color:var(--accent)}.miniBtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}.miniBtns.twoCol{grid-template-columns:1fr 1fr}.miniBtns button,.toolBtns button,.wideBtn{border-radius:12px;padding:9px 6px;font-size:12px}.toolSection{display:flex;flex-direction:column;gap:8px;background:#1a1b20;border:1px solid var(--line);padding:10px;border-radius:16px}.compactSection{gap:7px}.subTitle{font-size:12px;color:#b9bac0;text-transform:uppercase;letter-spacing:.05em}.toolBtns{display:grid;grid-template-columns:1fr 1fr;gap:7px}.toolBtns button.active{background:var(--accent);color:#111;font-weight:700}.paintControls{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:end}.paintControls label{font-size:11px}.paintControls input[type=color]{width:100%;height:36px;border:1px solid var(--line);background:#0e0f12;border-radius:10px;padding:3px}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.palette button{height:28px;border-radius:999px;padding:0;background:var(--sw);border:2px solid rgba(255,255,255,.28)}.palette button:hover{transform:translateY(-1px) scale(1.03)}
.tips{margin-top:auto;color:#b5b6bd;font-size:12px;line-height:1.35;background:#1b1c21;border:1px solid var(--line);padding:11px;border-radius:16px}
.app.closed{grid-template-columns:58px 1fr 256px}.app.closed .brand strong,.app.closed .brand span,.app.closed .search,.app.closed .chips,.app.closed .thumb span,.app.closed .libraryModes,.app.closed .libraryNote{display:none}.app.closed .library{grid-template-columns:1fr;padding:0 6px}.app.closed .thumb{height:48px;border-radius:12px}.app.closed .icon{transform:rotate(180deg)}



/* v5.7.1 — desktop header fluido.
   Evita que Silueta / Fondo / Guardar PNG se corten en desktop medio. */
@media (min-width:1101px){
  .stageWrap{
    min-width:0;
    overflow:hidden;
  }

  .topbar{
    display:grid;
    grid-template-columns:minmax(250px,auto) minmax(180px,1fr) minmax(260px,auto);
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .modeBtns,
  .rightBtns{
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
    gap:8px;
  }

  .modeBtns::-webkit-scrollbar,
  .rightBtns::-webkit-scrollbar{
    display:none;
  }

  .modeBtns button,
  .rightBtns button{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .titleBox{
    min-width:0;
    max-width:none;
    overflow:hidden;
  }

  .titleBox input{
    width:100%;
    max-width:100%;
    font-size:clamp(18px,1.8vw,26px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .rightBtns{
    justify-content:flex-end;
  }
}

/* Desktop medio: se separan título y botones en dos líneas para no cortar controles. */
@media (min-width:1101px) and (max-width:1360px){
  .stageWrap{
    padding-top:10px;
    gap:8px;
  }

  .topbar{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "title title"
      "left right";
    gap:7px 10px;
  }

  .titleBox{
    grid-area:title;
    order:0;
    align-items:center;
    width:100%;
  }

  .modeBtns{
    grid-area:left;
    width:100%;
    justify-content:flex-start;
  }

  .rightBtns{
    grid-area:right;
    width:100%;
    justify-content:flex-end;
  }

  .topbar button{
    font-size:13px;
    padding:9px 12px;
  }

  .titleBox input{
    font-size:20px;
    line-height:1.05;
  }

  .titleBox span{
    font-size:11px;
  }
}


/* =========================================================
   v5.7 — Responsive limpio en 3 cortes:
   1. Desktop: base CSS, >= 1101px
   2. Tablet: 721px – 1100px
   3. Teléfono: <= 720px
   ========================================================= */

.sheetToggle{display:none}

/* ---------- TABLET: 721px – 1100px ---------- */
@media (min-width:721px) and (max-width:1100px){
  html,body{
    overflow:hidden;
  }

  .app,
  .app.closed{
    grid-template-columns:176px minmax(0,1fr) 218px !important;
    height:100dvh;
    overflow:hidden;
  }

  .closet,
  .app.closed .closet{
    width:176px !important;
    height:100dvh !important;
    min-width:0;
    overflow:hidden;
    border-right:1px solid var(--line);
  }

  .brand{
    height:54px;
    padding:8px 8px 6px;
  }

  .brand strong{
    font-size:14px;
    line-height:1;
  }

  .brand span{
    font-size:10px;
    line-height:1.1;
  }

  #toggleCloset{
    width:30px;
    height:30px;
    flex:0 0 auto;
  }

  .libraryModes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    padding:0 8px 8px;
  }

  .libraryModes button{
    font-size:11px;
    padding:8px 4px;
  }

  .search{
    margin:0 8px 8px;
    padding:9px 10px;
    font-size:13px;
  }

  .chips{
    padding:0 8px 8px;
    gap:5px;
    max-height:74px;
    overflow:auto;
  }

  .chips button{
    font-size:10px;
    padding:6px 7px;
  }

  .libraryNote{
    display:none;
  }

  .library{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding:0 7px 10px;
    height:calc(100dvh - 210px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .thumb{
    height:74px;
    border-radius:14px;
    padding:5px;
  }

  .thumb span{
    font-size:8px;
  }

  .stageWrap{
    min-width:0;
    height:100dvh;
    padding:10px;
    gap:8px;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }

  .topbar{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    align-items:start;
    min-width:0;
  }

  .titleBox{
    order:-1;
    width:100%;
    max-width:none;
    min-width:0;
    align-items:center;
    gap:2px;
  }

  .titleBox input{
    width:100%;
    max-width:none;
    font-size:18px;
    line-height:1.05;
    text-align:center;
  }

  .titleBox span{
    font-size:11px;
    text-align:center;
  }

  .modeBtns,
  .rightBtns{
    width:100%;
    min-width:0;
    display:flex;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:1px;
    justify-content:flex-start;
    margin-left:0;
  }

  .modeBtns::-webkit-scrollbar,
  .rightBtns::-webkit-scrollbar{
    display:none;
  }

  .modeBtns button,
  .rightBtns button,
  .topbar button{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:12px;
    padding:9px 11px;
  }

  .stage{
    border-radius:24px;
    min-height:0;
  }

  .emptyState{
    width:70%;
    font-size:19px;
  }

  .emptyState small{
    font-size:12px;
  }

  .hintbar{
    display:none;
  }

  .inspector{
    position:relative;
    right:auto;
    top:auto;
    width:218px;
    height:100dvh;
    max-height:100dvh;
    border-left:1px solid var(--line);
    border-top:0;
    border-right:0;
    border-bottom:0;
    border-radius:0;
    padding:11px;
    gap:9px;
    overflow:auto;
    z-index:50;
    box-shadow:none;
  }

  .insTitle{
    font-size:10px;
  }

  .selectedName{
    font-size:13px;
    line-height:1.15;
  }

  .toolSection{
    padding:9px;
    gap:7px;
    border-radius:15px;
  }

  .subTitle{
    font-size:10px;
  }

  .toolBtns{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .toolBtns button,
  .miniBtns button{
    font-size:11px;
    padding:8px 5px;
  }

  .miniBtns{
    grid-template-columns:1fr 1fr;
    gap:6px;
  }

  .baseBtns{
    grid-template-columns:1fr 1fr;
  }

  .baseBtns button:last-child{
    grid-column:1 / -1;
  }

  .paintControls{
    grid-template-columns:56px 1fr;
    gap:7px;
  }

  .paintControls label,
  .inspector label{
    font-size:11px;
  }

  .paintControls input[type=color]{
    height:32px;
  }

  .palette{
    grid-template-columns:repeat(4,1fr);
    gap:5px;
  }

  .palette button{
    height:22px;
  }

  .tips{
    font-size:11px;
    padding:9px;
    border-radius:14px;
  }

  .app.closed{
    grid-template-columns:58px minmax(0,1fr) 218px !important;
  }

  .app.closed .brand strong,
  .app.closed .brand span,
  .app.closed .search,
  .app.closed .chips,
  .app.closed .thumb span,
  .app.closed .libraryModes,
  .app.closed .libraryNote{
    display:none;
  }

  .app.closed .library{
    grid-template-columns:1fr;
    height:calc(100dvh - 62px);
    padding:0 6px;
  }

  .app.closed .thumb{
    height:48px;
    border-radius:12px;
  }
}

/* ---------- TELÉFONO: <= 720px ---------- */
@media (max-width:720px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    overscroll-behavior:none;
  }

  .app,
  .app.closed{
    grid-template-columns:82px minmax(0,1fr) !important;
    grid-template-rows:1fr;
    width:100vw;
    height:100dvh;
    overflow:hidden;
  }

  #toggleCloset{
    display:none !important;
  }

  .closet,
  .app.closed .closet{
    width:82px !important;
    height:100dvh !important;
    max-height:100dvh;
    overflow:hidden;
    z-index:60;
  }

  .app.sheet-open .closet{
    height:calc(100dvh - 214px - env(safe-area-inset-bottom)) !important;
  }

  .brand{
    height:28px !important;
    padding:4px 5px 2px !important;
    justify-content:center;
  }

  .brand div,
  .brand strong,
  .brand span{
    display:none !important;
  }

  .libraryModes{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
    padding:5px 6px 7px !important;
    position:sticky;
    top:0;
    z-index:3;
    background:#111217;
  }

  .libraryModes button,
  .libraryModes button.active,
  .app.closed .libraryModes button{
    display:block !important;
    width:100%;
    font-size:10px !important;
    line-height:1 !important;
    padding:8px 3px !important;
    border-radius:14px !important;
    text-align:center;
    white-space:nowrap;
  }

  .search,
  .chips,
  .libraryNote{
    display:none !important;
  }

  .library,
  .app.closed .library{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    padding:0 6px 8px !important;
    height:calc(100dvh - 96px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  .app.sheet-open .library{
    height:calc(100dvh - 306px - env(safe-area-inset-bottom)) !important;
  }

  .thumb,
  .app.closed .thumb{
    height:54px !important;
    min-height:54px;
    border-radius:13px !important;
    padding:4px !important;
  }

  .thumb span,
  .thumb.modelThumb::after{
    display:none !important;
  }

  .stageWrap{
    height:100dvh !important;
    min-width:0;
    overflow:hidden;
    padding:4px 6px calc(58px + env(safe-area-inset-bottom)) 6px !important;
    gap:5px !important;
    grid-template-rows:auto minmax(0,1fr) !important;
  }

  .app.sheet-open .stageWrap{
    padding-bottom:calc(216px + env(safe-area-inset-bottom)) !important;
  }

  .topbar{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:4px !important;
    min-height:0;
  }

  .modeBtns,
  .rightBtns{
    display:flex !important;
    width:100% !important;
    gap:5px !important;
    overflow-x:auto !important;
    min-width:0 !important;
    scrollbar-width:none;
  }

  .modeBtns::-webkit-scrollbar,
  .rightBtns::-webkit-scrollbar{
    display:none;
  }

  .modeBtns button,
  .rightBtns button,
  .topbar button{
    font-size:10px !important;
    line-height:1 !important;
    padding:8px 10px !important;
    border-radius:999px !important;
    white-space:nowrap;
    flex:0 0 auto;
  }

  .titleBox{
    order:-1 !important;
    align-items:flex-start !important;
    min-width:0 !important;
    max-width:none !important;
    gap:0 !important;
    padding-left:2px;
  }

  .titleBox input{
    width:100% !important;
    font-size:13px !important;
    line-height:1.05 !important;
    text-align:left !important;
    padding:0 !important;
  }

  .titleBox span{
    display:none !important;
  }

  .stage{
    min-height:0 !important;
    height:100% !important;
    border-radius:16px !important;
  }

  .floor{
    bottom:8%;
    width:42%;
  }

  .emptyState{
    width:78% !important;
    font-size:14px !important;
    line-height:1.22 !important;
  }

  .emptyState small{
    font-size:11px !important;
  }

  .inspector{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:auto !important;
    height:210px !important;
    max-height:48dvh !important;
    overflow:auto !important;
    border:1px solid var(--line) !important;
    border-bottom:0 !important;
    border-radius:16px 16px 0 0 !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    gap:7px !important;
    z-index:120 !important;
    box-shadow:0 -18px 45px rgba(0,0,0,.45) !important;
    -webkit-overflow-scrolling:touch;
  }

  .sheetToggle{
    display:block !important;
    position:sticky;
    top:0;
    z-index:5;
    width:100%;
    min-height:38px;
    border-radius:999px !important;
    background:var(--accent) !important;
    color:#111 !important;
    font-weight:850;
    font-size:12px !important;
    letter-spacing:.01em;
  }

  .app.sheet-collapsed .inspector,
  .inspector.collapsed{
    height:54px !important;
    max-height:54px !important;
    overflow:hidden !important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  .app.sheet-collapsed .inspector > *:not(.sheetToggle),
  .inspector.collapsed > *:not(.sheetToggle){
    display:none !important;
  }

  .insTitle{
    font-size:9px !important;
  }

  .selectedName{
    min-height:0 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11px !important;
  }

  .toolSection{
    padding:7px !important;
    gap:6px !important;
    border-radius:14px !important;
  }

  .subTitle,
  .tips{
    display:none !important;
  }

  .toolBtns{
    grid-template-columns:repeat(4,1fr) !important;
    gap:5px !important;
  }

  .toolBtns button,
  .miniBtns button{
    font-size:10px !important;
    padding:7px 4px !important;
    border-radius:11px !important;
  }

  .miniBtns{
    grid-template-columns:repeat(4,1fr) !important;
    gap:5px !important;
  }

  .miniBtns.twoCol,
  .baseBtns{
    grid-template-columns:1fr 1fr !important;
  }

  .baseBtns button:last-child{
    grid-column:1 / -1;
  }

  .paintControls{
    grid-template-columns:52px 1fr !important;
    gap:6px !important;
  }

  .paintControls input[type=color]{
    height:30px !important;
  }

  .palette{
    grid-template-columns:repeat(8,1fr) !important;
    gap:4px !important;
  }

  .palette button{
    height:22px !important;
  }

  .inspector label{
    font-size:10px !important;
    gap:3px !important;
  }

  .hintbar{
    display:none !important;
  }
}

/* PACAMOR v0.2 sprint-start — base visual limpia + capas + rueda
   Regla visual: blanco/negro puro. Los 7 colores del arcoiris quedan solo para indicadores. */
:root{
  --bg:#000000;
  --panel:#000000;
  --panel2:#0b0b0b;
  --text:#ffffff;
  --muted:#bdbdbd;
  --line:rgba(255,255,255,.22);
  --stage:#ffffff;
  --stageText:#000000;
  --accent:#ffffff;
  --accentText:#000000;
  --r-red:#ff0000;
  --r-orange:#ff7f00;
  --r-yellow:#ffff00;
  --r-green:#00cc44;
  --r-blue:#0066ff;
  --r-indigo:#4b00ff;
  --r-violet:#9400d3;
}
body.theme-light{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f4f4f4;
  --text:#000000;
  --muted:#555555;
  --line:rgba(0,0,0,.20);
  --stage:#ffffff;
  --stageText:#000000;
  --accent:#000000;
  --accentText:#ffffff;
}
html,body{background:var(--bg)!important;color:var(--text)!important;}
.app{background:var(--bg)!important;}
.closet,.inspector{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important;}
.toolSection,.tips{background:var(--panel2)!important;border-color:var(--line)!important;color:var(--text)!important;}
button{background:var(--panel2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important;}
button:hover{background:var(--text)!important;color:var(--bg)!important;}
.libraryModes button.active,.chips button.active,.toolBtns button.active,.modeBtns button:first-child,.sheetToggle{background:var(--accent)!important;color:var(--accentText)!important;border-color:var(--accent)!important;}
.search,.titleBox input,.paintControls input[type=color]{background:var(--bg)!important;color:var(--text)!important;border-color:var(--line)!important;}
.brand span,.titleBox span,.libraryNote,.subTitle,.insTitle,.selectedName,.inspector label,.tips,.hintbar{color:var(--muted)!important;}
.selectedName{color:var(--text)!important;}
.stage{background:var(--stage)!important;color:var(--stageText)!important;box-shadow:none!important;border:1px solid var(--line)!important;}
.stage.dark{--stage:#000000!important;}
.stage.warm,.stage.blue{--stage:#ffffff!important;background:#ffffff!important;}
.stage.checker{background-color:#fff!important;background-image:linear-gradient(45deg,#e8e8e8 25%,transparent 25%),linear-gradient(-45deg,#e8e8e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8e8e8 75%),linear-gradient(-45deg,transparent 75%,#e8e8e8 75%)!important;}
.floor{background:radial-gradient(ellipse,rgba(0,0,0,.16),transparent 70%)!important;}
.thumb{background:var(--panel2)!important;border-color:var(--line)!important;}
.thumb:hover{outline:2px solid var(--r-yellow)!important;}
.thumb.modelThumb::after{background:var(--text)!important;color:var(--bg)!important;}
.lookItem.selected{outline:2px solid var(--r-yellow)!important;outline-offset:7px;border-radius:12px;}
.lookItem[data-locked="true"].selected{outline-color:var(--r-blue)!important;}
.lookItem.layer-hidden{display:none!important;}
.lookItem::before{
  content:'#' attr(data-layer-number);
  position:absolute;
  left:50%;
  top:-18px;
  transform:translateX(-50%);
  min-width:30px;
  height:18px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.85);
  font-size:10px;
  font-weight:900;
  line-height:1;
  z-index:4;
  pointer-events:none;
  opacity:0;
}
.lookItem.selected::before{opacity:1;}
.lookItem[data-locked="true"]::after{
  content:'🔒';
  position:absolute;
  right:-12px;
  top:-14px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.85);
  font-size:12px;
  z-index:4;
  pointer-events:none;
}
.layerMeta{
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  background:var(--panel2);
}
.layerList{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:220px;
  overflow:auto;
  padding-right:2px;
}
.layerRow{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:7px;
  width:100%;
  min-height:34px;
  padding:5px 6px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
}
.layerRow.is-selected{border-color:var(--r-yellow);box-shadow:inset 3px 0 0 var(--r-yellow);}
.layerRow.is-locked{box-shadow:inset 3px 0 0 var(--r-blue);}
.layerRow.is-hidden{opacity:.55;}
.layerNo{font-size:11px;font-weight:950;min-width:30px;color:var(--text);}
.layerIcon{font-size:14px;line-height:1;}
.layerLabel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:750;}
.layerMiniBtn{
  width:26px!important;
  height:26px!important;
  min-height:26px!important;
  padding:0!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  font-size:11px!important;
}
.layerQuickBtns{grid-template-columns:1fr 1fr!important;}
.toast{
  position:fixed;
  left:50%;
  bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:999;
  padding:10px 14px;
  border-radius:999px;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  font-size:13px;
  font-weight:850;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}
body.theme-light .toast{background:#fff;color:#000;border-color:rgba(0,0,0,.35);}

.centerNotice{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  z-index:1200;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.centerNotice.show{opacity:1;}
.centerNoticeBubble{
  max-width:min(520px, calc(100vw - 32px));
  padding:16px 18px;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.92);
  color:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  font-size:16px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.01em;
}
.centerNoticeBubble i{
  flex:0 0 auto;
  font-size:18px;
}
.centerNoticeBubble span{
  display:block;
}
body.theme-light .centerNoticeBubble{
  background:rgba(255,255,255,.96);
  color:#000;
  border-color:rgba(0,0,0,.12);
}
#pacaKeepBtn.is-locked{
  opacity:1;
  filter:none;
}
@media (max-width: 768px){
  .centerNotice{ padding:18px; }
  .centerNoticeBubble{
    border-radius:20px;
    padding:16px 16px;
    font-size:15px;
    line-height:1.28;
  }
}
.toolWheel{
  position:fixed;
  right:18px;
  bottom:86px;
  width:58px;
  height:58px;
  z-index:180;
  touch-action:none;
  user-select:none;
}
.wheelCore,.wheelBtn{
  position:absolute!important;
  left:50%;
  top:50%;
  width:54px!important;
  height:54px!important;
  min-height:54px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%);
  background:var(--text)!important;
  color:var(--bg)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
}
.wheelCore{z-index:2;font-size:17px!important;}
.wheelCore span,.wheelBtn span{display:none;}
.wheelBtn{
  width:44px!important;
  height:44px!important;
  min-height:44px!important;
  z-index:1;
  opacity:0;
  pointer-events:none;
  font-size:15px!important;
  transition:transform .18s, opacity .18s, background .18s, color .18s;
}
.toolWheel.open .wheelBtn{opacity:1;pointer-events:auto;transform:translate(calc(-50% + var(--wheel-x,0px)),calc(-50% + var(--wheel-y,0px)));}
.wheelBtn.active{background:var(--r-yellow)!important;color:#000!important;border-color:#000!important;}
.wheelBtn[data-wheel-action="lock"].is-locked{background:var(--r-blue)!important;color:#fff!important;}
.wheelBtn[data-wheel-action="erase"]{box-shadow:inset 0 -3px 0 var(--r-red)!important;}
.wheelBtn[data-wheel-action="paint"]{box-shadow:inset 0 -3px 0 var(--r-violet)!important;}
.wheelBtn[data-wheel-action="layers"]{box-shadow:inset 0 -3px 0 var(--r-green)!important;}
@media (min-width:721px) and (max-width:1199px){
  .toolWheel{right:20px;bottom:24px;}
}
@media (max-width:720px){
  .toolWheel{right:18px;bottom:calc(68px + env(safe-area-inset-bottom));}
  .app.sheet-open .toolWheel{bottom:calc(228px + env(safe-area-inset-bottom));}
  .wheelCore{width:52px!important;height:52px!important;min-height:52px!important;}
  .wheelBtn{width:42px!important;height:42px!important;min-height:42px!important;}
  .layerList{max-height:145px;}
  .layerRow{grid-template-columns:auto minmax(0,1fr) auto auto;gap:5px;min-height:30px;}
  .layerIcon{display:none;}
  .layerNo{font-size:10px;min-width:28px;}
  .layerLabel{font-size:11px;}
  .layerMiniBtn{width:24px!important;height:24px!important;min-height:24px!important;}
}

/* PACAMOR v0.3 — consola inferior segmentada + stage full screen
   Dirección visual oficial: centro limpio, bottom dock, drawer contextual y wheel con centro de arrastre. */
.legacyHidden{display:none!important;}
body{
  background:var(--bg)!important;
  color:var(--text)!important;
}
.app.gameShell,
.app.gameShell.closed{
  display:block!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  background:var(--bg)!important;
  color:var(--text)!important;
}
.gameStageWrap{
  position:fixed!important;
  inset:0!important;
  height:auto!important;
  width:auto!important;
  min-width:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:10px!important;
  padding:12px 12px calc(238px + env(safe-area-inset-bottom))!important;
  overflow:hidden!important;
  z-index:1!important;
}
.app[data-drawer="closed"] .gameStageWrap{
  padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
}
.gameTopbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  min-height:42px!important;
  padding:0!important;
  overflow:visible!important;
  pointer-events:auto;
}
.brandMark{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  height:38px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--text);
}
.brandMark strong{
  font-size:13px;
  font-weight:950;
  letter-spacing:.04em;
  white-space:nowrap;
}
.brandMark span{
  color:var(--muted)!important;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.topActions::-webkit-scrollbar{display:none;}
.topActions button{
  flex:0 0 auto;
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  font-size:12px!important;
  font-weight:800!important;
}
.stage{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border-radius:0!important;
  background:var(--stage)!important;
  border:1px solid var(--stageText)!important;
  box-shadow:none!important;
}
.emptyState{
  color:rgba(0,0,0,.48)!important;
}
.stage.dark .emptyState{color:rgba(255,255,255,.55)!important;}
.gameConsole{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:150;
  background:transparent;
  pointer-events:none;
}
.bottomDock{
  position:relative;
  min-height:58px;
  height:58px;
  display:grid;
  grid-template-columns:44px repeat(5,minmax(68px,1fr));
  gap:8px;
  align-items:center;
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  background:#000!important;
  color:#fff!important;
  border-top:1px solid #000;
  pointer-events:auto;
}
body.theme-light .bottomDock{
  background:#000!important;
  color:#fff!important;
}
.dockHandle,
.dockSegment{
  height:42px!important;
  min-height:42px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  background:#000!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:850!important;
  overflow:hidden;
}
.dockHandle{
  border-radius:999px!important;
  width:42px!important;
  padding:0!important;
}
.dockSegment i{font-size:14px;}
.dockSegment span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dockSegment.active{
  background:#fff!important;
  color:#000!important;
  border-color:#fff!important;
}
.dockSegment[data-segment="items"].active{box-shadow:inset 0 -4px 0 var(--r-red)!important;}
.dockSegment[data-segment="bases"].active{box-shadow:inset 0 -4px 0 var(--r-orange)!important;}
.dockSegment[data-segment="layers"].active{box-shadow:inset 0 -4px 0 var(--r-yellow)!important;}
.dockSegment[data-segment="tools"].active{box-shadow:inset 0 -4px 0 var(--r-green)!important;}
.dockSegment[data-segment="publish"].active{box-shadow:inset 0 -4px 0 var(--r-blue)!important;}
.app[data-drawer="closed"] .dockHandle i{transform:rotate(180deg);}
.consoleDrawer{
  height:180px;
  max-height:42dvh;
  background:var(--panel)!important;
  color:var(--text)!important;
  border-top:1px solid var(--line);
  pointer-events:auto;
  overflow:hidden;
  transition:height .18s ease, opacity .18s ease;
}
.app[data-drawer="closed"] .consoleDrawer{
  height:0!important;
  border-top:0!important;
  opacity:0;
  pointer-events:none;
}
.drawerPanel{
  display:none!important;
  height:100%!important;
  min-height:0!important;
  width:100%!important;
  padding:12px 16px!important;
  overflow:hidden!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  border:0!important;
  box-shadow:none!important;
}
.drawerPanel.active{display:grid!important;}
.drawerHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  min-height:0;
  margin-bottom:8px;
}
.drawerHeader strong{
  display:block;
  font-size:13px;
  font-weight:950;
  letter-spacing:.02em;
}
.drawerHeader span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--muted)!important;
}
.libraryDrawer{
  grid-template-rows:auto auto minmax(0,1fr)!important;
}
.libraryTools{
  display:grid;
  grid-template-columns:minmax(160px,270px) minmax(0,1fr);
  gap:10px;
  min-height:0;
  margin-bottom:8px;
}
.search{
  margin:0!important;
  height:38px;
  border-radius:10px!important;
  padding:0 11px!important;
  background:var(--panel2)!important;
}
.chips{
  padding:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  max-height:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
.chips button{
  flex:0 0 auto;
  height:38px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
}
.libraryModes{
  display:flex!important;
  grid-template-columns:none!important;
  gap:6px!important;
  padding:0!important;
  background:transparent!important;
}
.libraryModes button{
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:900!important;
}
.library{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:82px!important;
  grid-template-columns:none!important;
  grid-template-rows:1fr!important;
  align-content:stretch!important;
  gap:8px!important;
  height:100%!important;
  padding:0 0 8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin;
}
.thumb{
  height:100%!important;
  min-height:82px!important;
  width:82px!important;
  border-radius:10px!important;
  padding:5px!important;
  background:var(--panel2)!important;
}
.thumb span{
  display:block!important;
  font-size:8px!important;
  left:4px!important;
  right:4px!important;
  bottom:3px!important;
}
.layerDrawer{
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:8px!important;
}
.compactHeader{
  align-items:center;
  margin-bottom:0;
}
.layerMeta{
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%;
  border-radius:999px!important;
  padding:5px 8px!important;
  font-size:10px!important;
  font-weight:900!important;
  background:var(--panel2)!important;
}
.cleanSection{
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
.layerList{
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:minmax(180px,240px)!important;
  grid-template-columns:none!important;
  gap:8px!important;
  max-height:none!important;
  height:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 0 8px!important;
}
.layerRow{
  height:100%!important;
  min-height:74px!important;
  align-content:center;
  grid-template-columns:auto auto minmax(0,1fr) auto auto!important;
  border-radius:10px!important;
  background:var(--panel2)!important;
}
.layerRow.is-empty{
  display:flex!important;
  align-items:center;
  justify-content:center;
}
.layerQuickBtns{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(72px,1fr))!important;
  max-width:520px;
  gap:7px!important;
}
.layerQuickBtns button{
  min-height:34px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
}
.toolsDrawer{
  grid-template-columns:minmax(160px,.8fr) minmax(160px,.9fr) minmax(220px,1.2fr)!important;
  gap:12px!important;
  overflow:auto!important;
}
.toolColumn{
  min-width:0;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel2);
  overflow:auto;
}
.toolColumn label,
.publishDrawer label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:11px;
  color:var(--muted)!important;
  font-weight:750;
}
.toolBtns,
.miniBtns{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
.toolBtns button,
.miniBtns button{
  min-height:34px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  font-size:11px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}
.paintControls{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:8px!important;
}
.paintControls input[type=color]{height:34px!important;border-radius:8px!important;}
.palette{
  display:grid!important;
  grid-template-columns:repeat(7,1fr)!important;
  gap:6px!important;
}
.palette button{
  height:28px!important;
  min-height:28px!important;
  border-radius:999px!important;
  padding:0!important;
  background:var(--sw)!important;
  border:1px solid var(--line)!important;
}
.publishDrawer{
  grid-template-columns:1fr!important;
  align-items:center;
}
.publishMain{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto minmax(160px,.8fr);
  gap:14px;
  align-items:center;
}
.publishTitle input{
  width:100%!important;
  height:44px!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  padding:0 14px!important;
  background:var(--panel2)!important;
  color:var(--text)!important;
  font-weight:900;
  font-size:18px;
}
.publishActions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.publishActions button{
  min-height:40px!important;
  padding:0 13px!important;
  border-radius:999px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  font-weight:850!important;
}
.primarySave{
  background:var(--text)!important;
  color:var(--bg)!important;
}
.publishNote{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}
/* Rueda: anillo completo con centro solo para arrastrar/colapsar. */
.toolWheel{
  right:36px!important;
  bottom:calc(248px + env(safe-area-inset-bottom))!important;
  width:64px!important;
  height:64px!important;
  z-index:190!important;
}
.app[data-drawer="closed"] .toolWheel{
  bottom:calc(92px + env(safe-area-inset-bottom))!important;
}
.wheelCore,
.wheelBtn{
  background:#fff!important;
  color:#000!important;
  border:1px solid #000!important;
}
body:not(.theme-light) .wheelCore,
body:not(.theme-light) .wheelBtn{
  background:#000!important;
  color:#fff!important;
  border-color:#fff!important;
}
.wheelCore{
  width:58px!important;
  height:58px!important;
  min-height:58px!important;
  cursor:grab!important;
}
.wheelCore:active{cursor:grabbing!important;}
.wheelBtn{
  width:42px!important;
  height:42px!important;
  min-height:42px!important;
  font-size:14px!important;
}
.wheelBtn[hidden]{display:none!important;}
.wheelBtn.active{background:var(--r-yellow)!important;color:#000!important;border-color:#000!important;}
.wheelBtn.is-locked{background:var(--r-blue)!important;color:#fff!important;}
.wheelBtn.is-danger{box-shadow:inset 0 -4px 0 var(--r-red)!important;}
.wheelBtn.is-tools{box-shadow:inset 0 -4px 0 var(--r-green)!important;}
.wheelBtn.is-publish{box-shadow:inset 0 -4px 0 var(--r-blue)!important;}
.wheelBtn.is-layers{box-shadow:inset 0 -4px 0 var(--r-yellow)!important;}
/* Breakpoints estrictos: teléfono, tablet, desktop. */
@media (max-width:767px){
  .gameStageWrap{
    padding:8px 8px calc(226px + env(safe-area-inset-bottom))!important;
    gap:7px!important;
  }
  .app[data-drawer="closed"] .gameStageWrap{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important;}
  .gameTopbar{min-height:34px!important;}
  .brandMark{height:34px;padding:0 10px;}
  .brandMark strong{font-size:11px;}
  .brandMark span{display:none!important;}
  .topActions button{min-height:34px!important;padding:0 10px!important;font-size:11px!important;}
  .topActions button span{display:none;}
  .bottomDock{
    height:58px;
    min-height:58px;
    grid-template-columns:38px repeat(5,minmax(0,1fr));
    gap:5px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  }
  .dockHandle,.dockSegment{
    height:40px!important;
    min-height:40px!important;
    border-radius:8px!important;
    padding:0 5px!important;
    font-size:9px!important;
    gap:3px!important;
  }
  .dockHandle{width:38px!important;border-radius:999px!important;}
  .dockSegment{flex-direction:column;}
  .dockSegment i{font-size:13px;}
  .dockSegment span{font-size:8px;}
  .consoleDrawer{height:168px;max-height:46dvh;}
  .drawerPanel{padding:9px 8px!important;}
  .drawerHeader{gap:8px;margin-bottom:6px;}
  .drawerHeader strong{font-size:12px;}
  .drawerHeader span{font-size:10px;}
  .libraryTools{grid-template-columns:1fr;gap:6px;margin-bottom:6px;}
  .search{height:34px!important;font-size:12px;}
  .chips button{height:30px!important;font-size:10px!important;padding:0 8px!important;}
  .libraryModes button{min-height:30px!important;padding:0 9px!important;font-size:10px!important;}
  .library{grid-auto-columns:68px!important;gap:6px!important;}
  .thumb{width:68px!important;min-height:66px!important;}
  .thumb span{display:none!important;}
  .compactHeader{display:grid;grid-template-columns:1fr;}
  .layerQuickBtns{grid-template-columns:repeat(4,1fr)!important;max-width:none;}
  .layerQuickBtns button{font-size:0!important;padding:0!important;}
  .layerQuickBtns button i{font-size:12px!important;}
  .layerList{grid-auto-columns:minmax(150px,190px)!important;}
  .layerRow{min-height:66px!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;}
  .layerIcon{display:none!important;}
  .toolsDrawer{grid-template-columns:1fr!important;grid-auto-flow:column!important;grid-auto-columns:minmax(190px,76vw)!important;overflow-x:auto!important;overflow-y:hidden!important;}
  .toolColumn{height:100%;padding:8px;}
  .publishMain{grid-template-columns:1fr;gap:8px;align-items:stretch;}
  .publishTitle input{height:38px!important;font-size:14px;}
  .publishActions{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;}
  .publishActions button{flex:0 0 auto;min-height:36px!important;font-size:11px!important;}
  .publishNote{display:none;}
  .toolWheel{right:22px!important;bottom:calc(218px + env(safe-area-inset-bottom))!important;}
  .app[data-drawer="closed"] .toolWheel{bottom:calc(76px + env(safe-area-inset-bottom))!important;}
  .wheelCore{width:54px!important;height:54px!important;min-height:54px!important;}
  .wheelBtn{width:38px!important;height:38px!important;min-height:38px!important;}
}
@media (min-width:768px) and (max-width:1199px){
  .gameStageWrap{padding:12px 12px calc(232px + env(safe-area-inset-bottom))!important;}
  .app[data-drawer="closed"] .gameStageWrap{padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;}
  .consoleDrawer{height:174px;}
  .library{grid-auto-columns:78px!important;}
  .thumb{width:78px!important;}
  .toolsDrawer{grid-template-columns:repeat(3,minmax(180px,1fr))!important;}
  .toolWheel{right:30px!important;bottom:calc(240px + env(safe-area-inset-bottom))!important;}
  .app[data-drawer="closed"] .toolWheel{bottom:calc(90px + env(safe-area-inset-bottom))!important;}
}
@media (min-width:1200px){
  .consoleDrawer{height:184px;}
  .gameStageWrap{padding:14px 18px calc(252px + env(safe-area-inset-bottom))!important;}
  .app[data-drawer="closed"] .gameStageWrap{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;}
}
/* Corrección: el antiguo inspector móvil ahora vive dentro del drawer, no como sheet flotante. */
.inspector.drawerPanel{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:12px 16px!important;
  z-index:auto!important;
}
@media (max-width:767px){
  .inspector.drawerPanel{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    padding:9px 8px!important;
  }
}

/* PACAMOR v0.4 — carrusel contenido + flechas + wheel estable */
.consoleDrawer{
  height:208px;
  max-height:45dvh;
}
.gameStageWrap{
  padding-bottom:calc(266px + env(safe-area-inset-bottom))!important;
}
.app[data-drawer="closed"] .gameStageWrap{
  padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
}
.libraryDrawer{
  grid-template-rows:auto auto minmax(0,1fr)!important;
}
.carouselShell{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  border-radius:12px;
}
.libraryCarousel{
  padding:0 42px 0 42px;
}
.library{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-auto-flow:column!important;
  grid-auto-columns:86px!important;
  grid-template-columns:none!important;
  grid-template-rows:1fr!important;
  gap:9px!important;
  align-items:stretch!important;
  align-content:stretch!important;
  padding:0 4px 18px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--text) transparent;
}
.library::before,
.library::after{
  content:"";
  width:2px;
}
.thumb{
  width:86px!important;
  height:100%!important;
  min-height:76px!important;
  max-height:106px!important;
  scroll-snap-align:start;
  overflow:hidden!important;
}
.thumb img{
  max-height:calc(100% - 10px)!important;
}
.carouselArrow{
  position:absolute;
  top:0;
  bottom:18px;
  z-index:4;
  width:34px!important;
  min-height:0!important;
  height:auto!important;
  border-radius:10px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  background:var(--panel2)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  opacity:.96;
}
.carouselArrowLeft{left:0;}
.carouselArrowRight{right:0;}
.carouselArrow:hover{
  transform:scale(1.025)!important;
  background:var(--text)!important;
  color:var(--bg)!important;
}
.carouselArrow:disabled{
  opacity:.32;
  cursor:default;
  transform:none!important;
}
.library::-webkit-scrollbar,
.layerList::-webkit-scrollbar,
.chips::-webkit-scrollbar,
.toolColumn::-webkit-scrollbar{
  width:10px;
  height:10px;
}
.library::-webkit-scrollbar-track,
.layerList::-webkit-scrollbar-track,
.chips::-webkit-scrollbar-track,
.toolColumn::-webkit-scrollbar-track{
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
}
.library::-webkit-scrollbar-thumb,
.layerList::-webkit-scrollbar-thumb,
.chips::-webkit-scrollbar-thumb,
.toolColumn::-webkit-scrollbar-thumb{
  background:var(--text);
  border:2px solid var(--panel);
  border-radius:999px;
}
body.theme-light .library::-webkit-scrollbar-thumb,
body.theme-light .layerList::-webkit-scrollbar-thumb,
body.theme-light .chips::-webkit-scrollbar-thumb,
body.theme-light .toolColumn::-webkit-scrollbar-thumb{
  background:#000;
  border-color:#fff;
}
body:not(.theme-light) .library::-webkit-scrollbar-thumb,
body:not(.theme-light) .layerList::-webkit-scrollbar-thumb,
body:not(.theme-light) .chips::-webkit-scrollbar-thumb,
body:not(.theme-light) .toolColumn::-webkit-scrollbar-thumb{
  background:#fff;
  border-color:#000;
}
.toolWheel{
  transition:left .12s ease, top .12s ease, right .12s ease, bottom .12s ease, transform .16s ease;
  touch-action:none;
}
.wheelCore,
.wheelBtn{
  transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease!important;
}
.wheelCore{
  cursor:pointer!important;
  transform:translate(-50%,-50%) scale(1)!important;
  box-shadow:0 0 0 8px rgba(0,0,0,.04)!important;
}
body:not(.theme-light) .wheelCore{
  box-shadow:0 0 0 8px rgba(255,255,255,.035)!important;
}
.wheelCore:hover,
.wheelCore:focus-visible{
  transform:translate(-50%,-50%) scale(1.055)!important;
}
.wheelCore:active{
  transform:translate(-50%,-50%) scale(.985)!important;
}
.toolWheel.is-dragging .wheelCore{
  cursor:grabbing!important;
  transform:translate(-50%,-50%) scale(1.09)!important;
}
.wheelBtn:hover,
.wheelBtn:focus-visible{
  transform:translate(calc(-50% + var(--wheel-x,0px)),calc(-50% + var(--wheel-y,0px))) scale(1.07)!important;
}
.toolWheel:not(.open) .wheelBtn:hover,
.toolWheel:not(.open) .wheelBtn:focus-visible{
  transform:translate(-50%,-50%) scale(1)!important;
}
.toolWheel.open .wheelBtn{
  transform:translate(calc(-50% + var(--wheel-x,0px)),calc(-50% + var(--wheel-y,0px))) scale(1)!important;
}
.toolWheel.open .wheelBtn:active{
  transform:translate(calc(-50% + var(--wheel-x,0px)),calc(-50% + var(--wheel-y,0px))) scale(.95)!important;
}
@media (max-width:767px){
  .consoleDrawer{height:190px;max-height:48dvh;}
  .gameStageWrap{padding:8px 8px calc(248px + env(safe-area-inset-bottom))!important;}
  .app[data-drawer="closed"] .gameStageWrap{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important;}
  .libraryCarousel{padding:0 34px;}
  .carouselArrow{width:28px!important;bottom:16px;}
  .library{grid-auto-columns:74px!important;gap:7px!important;padding-bottom:16px!important;}
  .thumb{width:74px!important;min-height:66px!important;max-height:92px!important;}
}
@media (min-width:1200px){
  .consoleDrawer{height:214px;}
  .gameStageWrap{padding:14px 18px calc(276px + env(safe-area-inset-bottom))!important;}
  .app[data-drawer="closed"] .gameStageWrap{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;}
  .library{grid-auto-columns:92px!important;}
  .thumb{width:92px!important;}
}

/* PACAMOR v0.5 — Capas con scroll vertical + modelo frontal estándar */
.drawerPanel.layerDrawer,
.inspector.drawerPanel.layerDrawer{
  display:none!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  min-height:0!important;
  overflow:hidden!important;
}
.drawerPanel.layerDrawer.active,
.inspector.drawerPanel.layerDrawer.active{
  display:grid!important;
}
.layerDrawer .compactHeader{
  min-height:0!important;
  align-items:start!important;
  gap:8px!important;
  margin:0 0 8px!important;
}
.layerDrawer .cleanSection,
.layerDrawer .layerSection{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
  display:block!important;
}
.layerDrawer .layerList{
  display:flex!important;
  flex-direction:column!important;
  grid-auto-flow:initial!important;
  grid-auto-columns:initial!important;
  grid-template-columns:none!important;
  gap:7px!important;
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 8px 12px 0!important;
  scrollbar-width:thin;
  scrollbar-color:var(--text) transparent;
  overscroll-behavior:contain;
}
.layerDrawer .layerRow{
  height:auto!important;
  min-height:42px!important;
  width:100%!important;
  flex:0 0 auto!important;
  grid-template-columns:auto auto minmax(0,1fr) auto auto!important;
  align-content:center!important;
  align-items:center!important;
  padding:7px 8px!important;
  border-radius:12px!important;
  background:var(--panel2)!important;
}
.layerDrawer .layerRow.is-model-base{
  box-shadow:inset 3px 0 0 var(--r-violet);
}
.layerDrawer .layerRow.is-model-base .layerLabel::after{
  content:' · modelo base';
  color:var(--muted);
  font-weight:850;
}
.layerDrawer .layerNo{
  min-width:36px!important;
  font-size:11px!important;
}
.layerDrawer .layerLabel{
  font-size:12px!important;
  line-height:1.1!important;
}
.layerDrawer .layerMiniBtn{
  flex:0 0 28px!important;
}
.lookItem.model-base-layer{
  cursor:default;
}
.lookItem.model-base-layer.selected{
  outline-color:var(--r-violet)!important;
}
.lookItem.model-base-layer[data-locked="true"]::after{
  content:'base';
  width:auto;
  min-width:34px;
  padding:0 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
}
@media (max-width:767px){
  .layerDrawer .compactHeader{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  .layerDrawer .layerQuickBtns{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
  }
  .layerDrawer .layerQuickBtns button{
    min-height:30px!important;
    padding:0!important;
  }
  .layerDrawer .layerList{
    padding-right:6px!important;
  }
  .layerDrawer .layerRow{
    min-height:38px!important;
    padding:6px 7px!important;
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
  }
  .layerDrawer .layerIcon{display:none!important;}
  .layerDrawer .layerLabel{font-size:11px!important;}
}
@media (min-width:768px) and (max-width:1199px){
  .layerDrawer .layerRow{min-height:40px!important;}
}
@media (min-width:1200px){
  .layerDrawer .compactHeader{
    grid-template-columns:minmax(240px,1fr) minmax(420px,auto)!important;
  }
  .layerDrawer .layerList{
    padding-bottom:14px!important;
  }
}


/* PACAMOR v0.14 — FRONT RIG v1 dentro de la imagen del modelo */
.lookItem.model-base-layer{
  overflow:visible;
}
.lookItem.model-base-layer canvas{
  position:relative;
  z-index:1;
}
.frontRigOverlay{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:8;
  pointer-events:none;
  opacity:0;
  transition:opacity .14s ease;
  mix-blend-mode:normal;
  touch-action:none;
  overflow:visible;
}
.frontRigOverlay.show{
  opacity:1;
  pointer-events:auto;
}
.rigBone{
  stroke:#00c8ff;
  stroke-width:3.6;
  stroke-linecap:round;
  opacity:.96;
  vector-effect:non-scaling-stroke;
}
.rigPoint{
  fill:#ffcf00;
  stroke:#000;
  stroke-width:1.35;
  opacity:.99;
  cursor:grab;
  vector-effect:non-scaling-stroke;
}
.rigPoint.is-main{
  fill:#ffcf00;
  stroke:#000;
  stroke-width:1.55;
}
.rigPoint:hover{
  filter:drop-shadow(0 0 4px rgba(255,207,0,.95));
}
.rig-dragging .rigPoint{cursor:grabbing;}
.rigLabel,.rigBadge{display:none;}
.stage.dark .rigPoint,
body:not(.theme-light) .stage .rigPoint{stroke:#000;fill:#ffcf00;}
#rigToggleBtn.active{background:#ffcf33!important;color:#000!important;font-weight:900;}

@media (max-width:720px){
  .rigBone{stroke-width:3.2;}
  .rigPoint{stroke-width:1.25;}
}

/* v0.21 paired assets */
.lookItem.pair-part-layer.selected{ outline-style:dashed; }
.layerRow .layerIcon{min-width:1.4em;text-align:center;}

/* PACAMOR v0.26 — direct tool interaction */
.stage.scale-mode .lookItem{cursor:ns-resize!important;}
.stage.rotate-mode .lookItem{cursor:alias!important;}
.stage.paint-mode .lookItem,.stage.erase-mode .lookItem,.stage.restore-mode .lookItem{cursor:none!important;}
.brushPreview{
  position:absolute;
  z-index:9998;
  left:0;top:0;
  width:48px;height:48px;
  border:2px solid var(--stageText,#000);
  border-radius:999px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .08s ease,width .08s ease,height .08s ease;
  box-shadow:0 0 0 1px var(--stage,#fff),0 0 0 4px rgba(0,0,0,.10);
  background:rgba(255,255,255,.08);
  mix-blend-mode:difference;
}
.brushPreview span{
  position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:currentColor;
}
.brushPreview.show{opacity:1;}
.brushPreview[data-mode="paint"]{border-color:var(--brush-color,#ff0000);background:color-mix(in srgb,var(--brush-color,#ff0000) 22%,transparent);mix-blend-mode:normal;}
.brushPreview[data-mode="erase"]{border-color:var(--r-red,#ff3b30);background:rgba(255,59,48,.12);mix-blend-mode:normal;}
.brushPreview[data-mode="restore"]{border-color:var(--r-blue,#007aff);background:rgba(0,122,255,.12);mix-blend-mode:normal;}
.toolHud{
  position:absolute;z-index:9999;left:50%;top:50%;
  transform:translate(-50%,-50%);
  padding:8px 12px;border-radius:999px;
  background:var(--stageText,#000);color:var(--stage,#fff);
  border:1px solid var(--stageText,#000);
  font-size:12px;font-weight:950;letter-spacing:.02em;
  pointer-events:none;opacity:0;transition:opacity .1s ease,transform .1s ease;
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}
.toolHud.show{opacity:1;transform:translate(-50%,-58%);}
.directToolHint{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  background:var(--panel);
  color:var(--text);
}
.wheelBtn[data-wheel-action="scale"],.wheelBtn[data-wheel-action="rotate"]{box-shadow:inset 0 -4px 0 var(--r-blue)!important;}
.wheelBtn[data-wheel-action="paint"]{box-shadow:inset 0 -4px 0 var(--r-violet)!important;}
.wheelBtn[data-wheel-action="erase"]{box-shadow:inset 0 -4px 0 var(--r-red)!important;}
.wheelBtn[data-wheel-action="restore"]{box-shadow:inset 0 -4px 0 var(--r-cyan)!important;}
@media (max-width:767px){
  .toolsDrawer{grid-auto-columns:minmax(230px,82vw)!important;}
  .toolBtns{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .toolBtns button{min-height:40px!important;font-size:10px!important;}
  .directToolHint{font-size:10px;padding:7px 9px;}
}

/* v0.27 Compact Tool Panels: el wheel ejecuta, los paneles solo ajustan detalles. */
.toolsDrawer.compactToolsDrawer{
  display:none!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
  overflow:hidden!important;
  padding:10px 12px!important;
}
.toolsDrawer.compactToolsDrawer.active{display:grid!important;}
.compactPanelTabs{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  min-height:36px;
  padding:0 0 3px;
  scrollbar-width:thin;
}
.compactPanelTabs::-webkit-scrollbar{height:7px;}
.compactPanelTabs::-webkit-scrollbar-track{background:var(--panel2);border-radius:999px;}
.compactPanelTabs::-webkit-scrollbar-thumb{background:var(--text);border-radius:999px;border:2px solid var(--panel2);}
.compactPanelTab{
  flex:0 0 auto;
  min-height:34px!important;
  border-radius:999px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-size:11px!important;
  font-weight:900!important;
  background:var(--panel2)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
}
.compactPanelTab.active{background:var(--text)!important;color:var(--bg)!important;border-color:var(--text)!important;}
.compactPanelViewport{
  position:relative;
  min-height:0;
  overflow:hidden;
  height:100%;
}
.compactToolPanel{
  display:none;
  height:100%;
  min-height:0;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel2);
  padding:10px;
  gap:8px;
  grid-template-rows:auto minmax(0,auto);
  align-content:start;
  scrollbar-width:thin;
}
.compactToolPanel.active{display:grid;}
.compactToolPanel::-webkit-scrollbar{width:8px;height:8px;}
.compactToolPanel::-webkit-scrollbar-track{background:transparent;}
.compactToolPanel::-webkit-scrollbar-thumb{background:var(--text);border-radius:999px;border:2px solid var(--panel2);}
.compactPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.compactPanelHead strong{
  display:block;
  font-size:12px;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:950;
}
.compactPanelHead span{
  display:block;
  margin-top:3px;
  max-width:100%;
  color:var(--muted)!important;
  font-size:11px;
  line-height:1.2;
}
.compactBtnGrid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
.compactBtnGrid button{
  min-height:36px!important;
  border-radius:999px!important;
  padding:0 9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap;
}
.brushCompactGrid{
  display:grid;
  grid-template-columns:76px minmax(150px,1fr) minmax(150px,1fr);
  gap:8px;
  align-items:end;
}
.compactRange,
.compactColor{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  font-size:11px!important;
  font-weight:850!important;
  color:var(--muted)!important;
}
.compactRange input[type=range]{width:100%!important;accent-color:var(--accent);}
.compactColor input[type=color]{width:100%;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--panel);padding:3px;}
.opacityRange{max-width:360px;}
.hiddenControls,.hiddenToolBtns{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}
.compactToolsDrawer .palette{max-width:420px;}
.compactToolsDrawer .palette button{height:28px!important;}
.compactToolsDrawer .directToolHint{font-size:11px!important;line-height:1.2;color:var(--muted)!important;}

@media (max-width:767px){
  .consoleDrawer{height:176px!important;max-height:48dvh!important;}
  .toolsDrawer.compactToolsDrawer{padding:8px!important;gap:6px!important;}
  .compactPanelTabs{min-height:32px;gap:5px;}
  .compactPanelTab{min-height:30px!important;padding:0 9px!important;font-size:10px!important;}
  .compactPanelTab span{display:none;}
  .compactToolPanel{padding:8px;border-radius:12px;}
  .compactPanelHead strong{font-size:11px;}
  .compactPanelHead span{font-size:10px;}
  .compactBtnGrid{grid-template-columns:repeat(4,minmax(54px,1fr))!important;gap:5px!important;}
  .compactBtnGrid button{min-height:32px!important;padding:0 6px!important;font-size:0!important;}
  .compactBtnGrid button i{font-size:12px!important;}
  .compactBtnGrid button span{font-size:9px!important;line-height:1!important;}
  .modelActions,.rigActions{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .brushCompactGrid{grid-template-columns:68px minmax(110px,1fr);gap:6px;}
  .brushCompactGrid .compactRange:last-child{grid-column:1 / -1;}
  .compactToolsDrawer .palette{grid-template-columns:repeat(7,24px)!important;justify-content:start;gap:5px!important;}
  .compactToolsDrawer .palette button{height:24px!important;min-height:24px!important;width:24px!important;}
}
@media (min-width:768px) and (max-width:1199px){
  .toolsDrawer.compactToolsDrawer{padding:10px 12px!important;}
  .compactBtnGrid{grid-template-columns:repeat(4,minmax(88px,1fr))!important;}
}
@media (min-width:1200px){
  .compactToolPanel{grid-auto-flow:row;}
}

/* v0.28 Brush Panel Fix: panel dedicado al pincel, compacto y contextual. */
.brushToolPanel{
  overflow:hidden!important;
}
.brushToolPanel.active{
  grid-template-rows:auto minmax(0,1fr)!important;
}
.brushPanelHead{
  align-items:center!important;
}
.brushModePill{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--text);
  color:var(--bg);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:950;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.brushPanelBody{
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) minmax(220px,.85fr);
  grid-template-areas:
    "preview controls color"
    "actions actions actions";
  gap:9px;
  min-height:0;
  overflow:auto;
  align-items:center;
  scrollbar-width:thin;
}
.brushPanelBody::-webkit-scrollbar{width:8px;height:8px;}
.brushPanelBody::-webkit-scrollbar-thumb{background:var(--text);border-radius:999px;border:2px solid var(--panel2);}
.brushPreviewCard{
  grid-area:preview;
  min-width:98px;
  min-height:94px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  display:grid;
  place-items:center;
  align-content:center;
  gap:4px;
  padding:8px;
}
.brushPanelPreview{
  --brush-color:#ff0000;
  width:42px;
  height:42px;
  max-width:96px;
  max-height:96px;
  min-width:18px;
  min-height:18px;
  border:2px solid var(--text);
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 0 2px var(--panel),0 0 0 4px rgba(255,255,255,.10);
}
.brushPanelPreview span{
  width:5px;height:5px;border-radius:999px;background:currentColor;display:block;
}
.brushPanelPreview[data-mode="paint"]{border-color:var(--brush-color,#ff0000);background:color-mix(in srgb,var(--brush-color,#ff0000) 24%,transparent);}
.brushPanelPreview[data-mode="erase"]{border-color:var(--r-red,#ff3b30);background:rgba(255,59,48,.15);}
.brushPanelPreview[data-mode="restore"]{border-color:var(--r-blue,#007aff);background:rgba(0,122,255,.15);}
.brushPreviewCard small{
  font-size:11px;
  color:var(--muted);
  font-weight:900;
}
.brushControlsStack{
  grid-area:controls;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  min-width:0;
}
.brushSizeControl{font-size:12px!important;color:var(--text)!important;}
.brushSizeControl input[type=range]{height:22px;}
.brushIntensityControl input[type=range]{height:18px;}
.brushColorBlock{
  grid-area:color;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:8px;
  align-items:end;
  min-width:0;
}
.brushColorBlock.is-hidden{display:none!important;}
.brushColorBlock .palette{
  display:grid!important;
  grid-template-columns:repeat(7,28px)!important;
  justify-content:start;
  gap:6px!important;
  max-width:none!important;
}
.brushColorBlock .palette button{
  width:28px!important;
  height:28px!important;
  min-height:28px!important;
}
.brushToolPanel .brushActions{
  grid-area:actions;
  grid-template-columns:repeat(2,minmax(120px,220px))!important;
  justify-content:start;
}
.brushPanelBody[data-brush-mode="erase"],
.brushPanelBody[data-brush-mode="restore"]{
  grid-template-columns:auto minmax(220px,1fr);
  grid-template-areas:
    "preview controls"
    "actions actions";
}
.brushPanelBody[data-brush-mode="erase"] .brushActions,
.brushPanelBody[data-brush-mode="restore"] .brushActions{
  grid-template-columns:repeat(2,minmax(120px,220px))!important;
}

@media (max-width:767px){
  .consoleDrawer{height:190px!important;max-height:46dvh!important;}
  .brushPanelHead .directToolHint{max-width:310px!important;white-space:normal;}
  .brushModePill{padding:5px 8px;font-size:9px;}
  .brushPanelBody{
    grid-template-columns:66px minmax(0,1fr);
    grid-template-areas:
      "preview controls"
      "color color"
      "actions actions";
    gap:6px;
    align-items:center;
  }
  .brushPreviewCard{min-width:60px;min-height:58px;border-radius:12px;padding:5px;}
  .brushPanelPreview{max-width:48px;max-height:48px;}
  .brushPreviewCard small{font-size:9px;}
  .brushControlsStack{gap:5px;}
  .brushControlsStack .compactRange{gap:2px!important;font-size:10px!important;}
  .brushColorBlock{grid-template-columns:48px minmax(0,1fr);gap:5px;}
  .brushColorBlock .compactColor{font-size:10px!important;}
  .brushColorBlock .compactColor input[type=color]{height:26px!important;}
  .brushColorBlock .palette{grid-template-columns:repeat(7,22px)!important;gap:4px!important;}
  .brushColorBlock .palette button{width:22px!important;height:22px!important;min-height:22px!important;}
  .brushToolPanel .brushActions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;}
  .brushPanelBody[data-brush-mode="erase"],
  .brushPanelBody[data-brush-mode="restore"]{
    grid-template-columns:66px minmax(0,1fr);
    grid-template-areas:
      "preview controls"
      "actions actions";
  }
}
@media (min-width:768px) and (max-width:1199px){
  .brushPanelBody{grid-template-columns:auto minmax(220px,1fr) minmax(190px,.8fr);}
}

/* v0.29 Slim Brush Panel: menos caja, más espacio útil, como Modelo. */
.brushToolPanel.active{
  grid-template-rows:minmax(0,1fr)!important;
}
.brushToolPanel .brushPanelHead{
  display:none!important;
}
.brushToolPanel{
  overflow:hidden!important;
}
.brushPanelBody{
  height:100%!important;
  display:grid!important;
  grid-template-columns:auto minmax(260px,1.25fr) minmax(260px,1fr) auto!important;
  grid-template-areas:"preview controls color actions"!important;
  align-items:center!important;
  gap:10px!important;
  overflow:hidden!important;
  padding:0!important;
}
.brushPanelBody::-webkit-scrollbar{display:none!important;}
.brushPreviewCard{
  grid-area:preview!important;
  min-width:0!important;
  min-height:0!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
}
.brushPanelPreview{
  width:28px;
  height:28px;
  max-width:38px!important;
  max-height:38px!important;
  min-width:14px!important;
  min-height:14px!important;
  border-width:2px!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
}
.brushPanelPreview span{width:4px!important;height:4px!important;}
.brushPreviewCard small{
  font-size:10px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  color:var(--muted)!important;
}
.brushControlsStack{
  grid-area:controls!important;
  display:grid!important;
  grid-template-columns:minmax(130px,1fr) minmax(130px,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}
.brushControlsStack .compactRange,
.brushToolPanel .compactRange{
  gap:3px!important;
  font-size:10px!important;
  line-height:1!important;
  min-width:0!important;
}
.brushControlsStack input[type=range],
.brushToolPanel input[type=range]{
  height:18px!important;
  min-width:0!important;
}
.brushColorBlock{
  grid-area:color!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
}
.brushColorBlock.is-hidden{display:none!important;}
.brushColorBlock .compactColor{
  width:30px!important;
  flex:0 0 30px!important;
  font-size:0!important;
  gap:0!important;
}
.brushColorBlock .compactColor input[type=color]{
  width:30px!important;
  height:30px!important;
  padding:2px!important;
  border-radius:999px!important;
}
.brushColorBlock .palette{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  max-width:none!important;
  overflow:hidden!important;
}
.brushColorBlock .palette button{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  border-radius:999px!important;
}
.brushToolPanel .brushActions{
  grid-area:actions!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  justify-content:flex-end!important;
}
.brushToolPanel .brushActions button{
  min-height:30px!important;
  height:30px!important;
  padding:0 10px!important;
  font-size:10px!important;
  white-space:nowrap!important;
}
.brushPanelBody[data-brush-mode="erase"],
.brushPanelBody[data-brush-mode="restore"]{
  grid-template-columns:auto minmax(260px,1fr) auto!important;
  grid-template-areas:"preview controls actions"!important;
}
.brushPanelBody[data-brush-mode="erase"] .brushColorBlock,
.brushPanelBody[data-brush-mode="restore"] .brushColorBlock{
  display:none!important;
}

@media (max-width:767px){
  .consoleDrawer{height:156px!important;max-height:38dvh!important;}
  .toolsDrawer.compactToolsDrawer{padding:7px!important;gap:5px!important;}
  .brushPanelBody,
  .brushPanelBody[data-brush-mode="erase"],
  .brushPanelBody[data-brush-mode="restore"]{
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:
      "preview controls"
      "color color"
      "actions actions"!important;
    gap:6px!important;
    align-content:center!important;
  }
  .brushPanelBody[data-brush-mode="erase"],
  .brushPanelBody[data-brush-mode="restore"]{
    grid-template-areas:
      "preview controls"
      "actions actions"!important;
  }
  .brushPanelPreview{max-width:34px!important;max-height:34px!important;}
  .brushPreviewCard{gap:2px!important;justify-content:center!important;flex-direction:column!important;}
  .brushPreviewCard small{font-size:8px!important;}
  .brushControlsStack{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  .brushControlsStack .compactRange{font-size:9px!important;gap:1px!important;}
  .brushControlsStack input[type=range]{height:15px!important;}
  .brushColorBlock{gap:6px!important;overflow:hidden!important;}
  .brushColorBlock .compactColor{width:24px!important;flex-basis:24px!important;}
  .brushColorBlock .compactColor input[type=color]{width:24px!important;height:24px!important;}
  .brushColorBlock .palette{gap:5px!important;overflow-x:auto!important;scrollbar-width:none!important;}
  .brushColorBlock .palette::-webkit-scrollbar{display:none!important;}
  .brushColorBlock .palette button{width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;}
  .brushToolPanel .brushActions{justify-content:stretch!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;}
  .brushToolPanel .brushActions button{height:28px!important;min-height:28px!important;padding:0 6px!important;font-size:0!important;}
  .brushToolPanel .brushActions button i{font-size:11px!important;}
  .brushToolPanel .brushActions button span{font-size:9px!important;}
}

@media (min-width:1200px){
  .brushToolPanel .brushActions button{min-width:150px!important;}
}

/* v0.30 — Workspace camera: zoom/pan as view only, never as look data */
.stageCamera{
  position:absolute;
  inset:0;
  transform-origin:50% 50%;
  will-change:transform;
  pointer-events:auto;
}
.stage.view-mode{cursor:grab;}
.stage.view-panning{cursor:grabbing;}
.stage.view-mode .lookItem{cursor:grab;}
.stage.view-panning .lookItem{cursor:grabbing;}

.viewToolPanel .compactPanelHead{
  min-height:30px;
  padding-bottom:3px;
}
.viewToolPanel .compactPanelHead span{
  display:inline-flex;
  width:max-content;
  min-height:24px;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:900;
  color:var(--text);
  background:var(--panel2);
}
.viewActions{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
.viewActions button{
  min-height:34px!important;
  padding:0 8px!important;
}
@media (max-width:767px){
  .viewActions{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important;}
  .viewActions button{min-height:30px!important;padding:0 5px!important;font-size:10px!important;}
  .viewActions button span{font-size:9px!important;}
}


/* v0.31 ultra-compact brush controls */
.brushToolPanel .brushPanelHead{display:none!important;}
.brushToolPanel.active{grid-template-rows:minmax(0,1fr)!important;}
.brushPanelBody{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:
    "mini actions"
    "color color"!important;
  align-items:center!important;
  gap:6px!important;
  overflow:auto!important;
  padding:0!important;
}
.brushMiniRow{
  grid-area:mini;
  display:grid;
  grid-template-columns:32px 28px repeat(4,minmax(72px,1fr));
  align-items:center;
  gap:6px;
  min-width:0;
}
.brushPanelPreview{
  width:28px!important;height:28px!important;min-width:18px!important;min-height:18px!important;max-width:42px!important;max-height:42px!important;
  box-shadow:none!important;border-width:2px!important;background:transparent!important;
}
.brushPanelPreview span{width:4px!important;height:4px!important;}
#brushSizeLabel{font-size:10px!important;font-weight:950;color:var(--muted);white-space:nowrap;}
.brushMiniRow .compactRange{
  display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;align-items:center!important;gap:4px!important;
  font-size:10px!important;font-weight:900!important;color:var(--muted)!important;min-width:0!important;margin:0!important;
}
.brushMiniRow .compactRange span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brushMiniRow input[type=range]{height:18px!important;min-height:18px!important;}
.brushColorBlock{
  grid-area:color!important;display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;align-items:center!important;gap:6px!important;min-width:0!important;
}
.brushColorBlock.is-hidden{display:none!important;}
.brushColorBlock .compactColor{font-size:10px!important;margin:0!important;display:grid!important;grid-template-columns:1fr 26px!important;align-items:center!important;gap:5px!important;}
.brushColorBlock .compactColor input[type=color]{width:26px!important;height:24px!important;min-height:24px!important;padding:0!important;border-radius:8px!important;}
.brushColorBlock .palette{display:grid!important;grid-template-columns:repeat(7,22px)!important;gap:4px!important;justify-content:start!important;}
.brushColorBlock .palette button{width:22px!important;height:22px!important;min-height:22px!important;padding:0!important;}
.brushToolPanel .brushActions{grid-area:actions!important;display:grid!important;grid-template-columns:repeat(2,34px)!important;gap:5px!important;align-self:center!important;}
.brushToolPanel .brushActions button{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border-radius:11px!important;font-size:0!important;}
.brushToolPanel .brushActions button i{font-size:12px!important;}
.brushToolPanel .brushActions button span{display:none!important;}
.brushPanelBody[data-brush-mode="erase"],.brushPanelBody[data-brush-mode="restore"]{grid-template-areas:"mini actions"!important;}
.brushPanelBody[data-brush-mode="erase"] .brushColorBlock,.brushPanelBody[data-brush-mode="restore"] .brushColorBlock{display:none!important;}

@media (max-width:767px){
  .consoleDrawer{height:156px!important;max-height:40dvh!important;}
  .brushPanelBody{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"mini" "color" "actions"!important;gap:5px!important;}
  .brushMiniRow{grid-template-columns:28px 24px repeat(2,minmax(90px,1fr));grid-auto-rows:auto;gap:5px;}
  .brushMiniRow .compactRange{grid-template-columns:31px minmax(0,1fr)!important;font-size:9px!important;}
  .brushToolPanel .brushActions{grid-template-columns:repeat(2,32px)!important;justify-content:start!important;}
  .brushToolPanel .brushActions button{width:32px!important;height:32px!important;min-height:32px!important;}
  .brushColorBlock{grid-template-columns:48px minmax(0,1fr)!important;}
  .brushColorBlock .palette{grid-template-columns:repeat(7,20px)!important;gap:3px!important;}
  .brushColorBlock .palette button{width:20px!important;height:20px!important;min-height:20px!important;}
}


/* v0.32 — Pincel fluido: sin empacar a la fuerza, usa ancho disponible */
.brushToolPanel.active{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}
.brushPanelBody{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0!important;
}
.brushMiniRow{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr))!important;
  gap:6px!important;
  align-items:center!important;
  min-width:0!important;
}
.brushMiniRow .compactRange{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:2px!important;
  min-width:0!important;
  margin:0!important;
  font-size:9px!important;
  line-height:1!important;
  color:var(--muted)!important;
}
.brushMiniRow .compactRange > span{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:5px!important;
  min-height:13px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.brushMiniRow .compactRange input[type=range]{
  width:100%!important;
  height:14px!important;
  min-height:14px!important;
  margin:0!important;
}
.brushPrimaryControl b{
  font-size:9px!important;
  font-weight:950!important;
  color:var(--text)!important;
  font-style:normal!important;
  margin-left:auto!important;
}
.brushPanelPreview{
  position:relative!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:18px!important;
  height:18px!important;
  min-width:12px!important;
  min-height:12px!important;
  max-width:28px!important;
  max-height:28px!important;
  border:2px solid var(--text)!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  margin-left:1px!important;
}
.brushPanelPreview span{width:3px!important;height:3px!important;border-radius:999px!important;background:currentColor!important;}
.brushPanelPreview[data-mode="paint"]{border-color:var(--brush-color,#ff0000)!important;background:color-mix(in srgb,var(--brush-color,#ff0000) 14%,transparent)!important;}
.brushPanelPreview[data-mode="erase"]{border-color:var(--r-red,#ff3b30)!important;background:rgba(255,59,48,.08)!important;}
.brushPanelPreview[data-mode="restore"]{border-color:var(--r-blue,#007aff)!important;background:rgba(0,122,255,.08)!important;}
.brushColorBlock{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:24px!important;
  overflow:hidden!important;
  min-width:0!important;
}
.brushColorBlock.is-hidden{display:none!important;}
.brushColorBlock .compactColor{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  font-size:9px!important;
  line-height:1!important;
  margin:0!important;
  min-width:0!important;
}
.brushColorBlock .compactColor span{display:none!important;}
.brushColorBlock .compactColor input[type=color]{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  border-radius:8px!important;
  padding:0!important;
}
.brushColorBlock .palette{
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  gap:4px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  max-width:none!important;
}
.brushColorBlock .palette::-webkit-scrollbar{display:none!important;}
.brushColorBlock .palette button{
  flex:0 0 21px!important;
  width:21px!important;
  height:21px!important;
  min-width:21px!important;
  min-height:21px!important;
  padding:0!important;
}
.brushToolPanel .brushActions{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  justify-content:flex-start!important;
  align-items:center!important;
  min-height:28px!important;
  overflow:hidden!important;
}
.brushToolPanel .brushActions button{
  width:32px!important;
  height:28px!important;
  min-height:28px!important;
  min-width:32px!important;
  padding:0!important;
  border-radius:10px!important;
  font-size:0!important;
}
.brushToolPanel .brushActions button i{font-size:12px!important;}
.brushToolPanel .brushActions button span{display:none!important;}
.brushPanelBody[data-brush-mode="erase"],
.brushPanelBody[data-brush-mode="restore"]{
  justify-content:center!important;
}
.brushPanelBody[data-brush-mode="erase"] .brushColorBlock,
.brushPanelBody[data-brush-mode="restore"] .brushColorBlock{display:none!important;}

@media (max-width:767px){
  .consoleDrawer{height:142px!important;max-height:34dvh!important;}
  .brushMiniRow{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;}
  .brushMiniRow .compactRange{font-size:8.5px!important;}
  .brushMiniRow .compactRange input[type=range]{height:12px!important;min-height:12px!important;}
  .brushColorBlock{gap:5px!important;}
  .brushColorBlock .compactColor input[type=color]{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;}
  .brushColorBlock .palette button{flex-basis:19px!important;width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important;}
  .brushToolPanel .brushActions{min-height:25px!important;}
  .brushToolPanel .brushActions button{width:29px!important;height:25px!important;min-height:25px!important;min-width:29px!important;}
}
@media (min-width:768px) and (max-width:1199px){
  .brushMiniRow{grid-template-columns:repeat(4,minmax(118px,1fr))!important;}
}
@media (min-width:1200px){
  .brushPanelBody{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr) auto!important;align-items:center!important;gap:8px!important;}
  .brushMiniRow{grid-template-columns:repeat(4,minmax(120px,1fr))!important;}
  .brushColorBlock{min-width:0!important;}
  .brushToolPanel .brushActions{justify-content:flex-end!important;}
  .brushPanelBody[data-brush-mode="erase"],
  .brushPanelBody[data-brush-mode="restore"]{grid-template-columns:minmax(0,1fr) auto!important;}
}

/* v0.33 — Mobile brush overflow fix: el panel sigue compacto, pero ahora tiene scroll interno real */
@media (max-width:767px){
  /* Un poco más de aire sin volver al panel grande. */
  .consoleDrawer{height:150px!important;max-height:40dvh!important;}

  /* El viewport del sistema compacto no debe crecer, solo contener el scroll del panel activo. */
  .compactPanelViewport{
    min-height:0!important;
    overflow:hidden!important;
  }

  /* Solo el panel Pincel recibe scroll vertical interno en teléfono. */
  .compactToolPanel.brushToolPanel.active{
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    padding-right:4px!important;
  }

  .brushToolPanel.active .brushPanelBody{
    min-height:0!important;
    height:100%!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding:0 1px 8px 0!important;
    scrollbar-width:thin!important;
  }

  .brushToolPanel.active .brushPanelBody::-webkit-scrollbar{
    display:block!important;
    width:5px!important;
  }
  .brushToolPanel.active .brushPanelBody::-webkit-scrollbar-track{background:transparent!important;}
  .brushToolPanel.active .brushPanelBody::-webkit-scrollbar-thumb{
    background:var(--text)!important;
    border-radius:999px!important;
  }

  /* Ajuste fino para que el contenido quepa mejor antes de necesitar scroll. */
  .brushToolPanel.active .brushMiniRow{gap:4px!important;}
  .brushToolPanel.active .brushMiniRow .compactRange{gap:1px!important;}
  .brushToolPanel.active .brushColorBlock{min-height:22px!important;gap:4px!important;}
  .brushToolPanel.active .brushColorBlock .compactColor input[type=color]{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;}
  .brushToolPanel.active .brushColorBlock .palette button{flex-basis:18px!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;}
  .brushToolPanel.active .brushActions{min-height:24px!important;gap:4px!important;}
  .brushToolPanel.active .brushActions button{width:28px!important;height:24px!important;min-width:28px!important;min-height:24px!important;}
}

/* =========================================================
   v0.34 — Game entry / paca / critique foundation
   Pantallas de juego limpias. El editor se mantiene intacto.
   ========================================================= */
body.game-layer-open .gameShell{
  visibility:hidden;
  pointer-events:none;
}
body:not(.game-layer-open) .gameLayer{
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.gameLayer{
  position:fixed;
  inset:0;
  z-index:5000;
  background:#f4f1ea;
  color:#09090b;
  overflow:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.gameLayer button{
  background:#09090b;
  color:#fff;
  border:1px solid #09090b;
  border-radius:999px;
  box-shadow:none;
}
.gameLayer button:hover{background:#242428;transform:translateY(-1px)}
.gameLayer button:active{transform:translateY(0)}
.gameScreen{
  position:absolute;
  inset:0;
  display:none;
  min-height:100dvh;
  overflow:hidden;
}
.gameScreen.active{display:block}
.sceneBackdrop{
  position:absolute;
  inset:0;
  background:#f4f1ea;
  overflow:hidden;
}
.sceneBackdrop::before{
  content:'';
  position:absolute;
  left:7vw;
  right:7vw;
  top:8dvh;
  height:54dvh;
  border:3px solid #09090b;
  border-radius:34px 34px 10px 10px;
  background:#fff;
}
.sceneSign{
  position:absolute;
  left:50%;
  top:10.4dvh;
  transform:translateX(-50%);
  min-width:min(62vw,430px);
  height:58px;
  display:grid;
  place-items:center;
  border:3px solid #09090b;
  background:#09090b;
  color:#fff;
  font-weight:950;
  font-size:clamp(20px,4.6vw,48px);
  letter-spacing:.05em;
  border-radius:999px;
}
.sceneWindow{
  position:absolute;
  top:24dvh;
  width:min(25vw,220px);
  height:min(27dvh,220px);
  border:3px solid #09090b;
  background:#f4f1ea;
  border-radius:22px;
}
.sceneWindow.left{left:12vw}.sceneWindow.right{right:12vw}
.sceneWindow::after{
  content:'';
  position:absolute;
  left:50%;top:0;bottom:0;
  width:3px;background:#09090b;
  transform:translateX(-50%);
}
.sceneDoor{
  position:absolute;
  left:50%;
  top:27dvh;
  width:min(22vw,210px);
  height:36dvh;
  transform:translateX(-50%);
  border:3px solid #09090b;
  border-bottom:0;
  background:#fff;
  border-radius:28px 28px 0 0;
}
.sceneDoor::after{
  content:'';
  position:absolute;
  right:22px;top:48%;
  width:12px;height:12px;
  background:#09090b;
  border-radius:50%;
}
.sceneWalkway{
  position:absolute;
  left:50%;
  bottom:-8dvh;
  width:min(52vw,520px);
  height:44dvh;
  transform:translateX(-50%);
  border:3px solid #09090b;
  border-bottom:0;
  background:#fff;
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
}
.gameCenterPanel{
  position:absolute;
  left:50%;
  top:55%;
  width:min(92vw,560px);
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  padding:26px;
  border:3px solid #09090b;
  background:#fff;
  border-radius:32px;
}
.gameEyebrow{
  margin:0;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
}
.gameCenterPanel h1{
  margin:0;
  font-size:clamp(42px,10vw,92px);
  line-height:.86;
  letter-spacing:-.08em;
}
.gameLead{
  margin:0;
  font-size:clamp(14px,2.4vw,18px);
  font-weight:700;
  color:#333;
  max-width:34em;
}
.gamePrimaryChoices{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.gameChoice{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:clamp(15px,2.3vw,19px);
  font-weight:900;
  padding:14px 16px;
}
.gameChoice.primary{background:#fff;color:#09090b;border:3px solid #09090b}
.gameChoice.primary:hover{background:#f4f1ea}
.gameSecondaryChoices{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.gameSecondaryChoices button,.gameMiniAction,.gameBack{
  font-weight:850;
  padding:10px 14px;
}
.gameTopStrip{
  position:absolute;
  left:14px;right:14px;top:calc(12px + env(safe-area-inset-top));
  height:52px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  z-index:10;
}
.gameTopStrip strong{
  justify-self:center;
  padding:10px 18px;
  background:#fff;
  color:#09090b;
  border:3px solid #09090b;
  border-radius:999px;
  font-size:18px;
}
.gameBack,.gameMiniAction{
  display:flex;
  align-items:center;
  gap:8px;
}
.pacaPlayfield,.critiquePlayfield{
  position:absolute;
  inset:0;
  padding:86px 18px 20px;
  display:grid;
  grid-template-columns:minmax(90px,18vw) minmax(0,1fr) minmax(112px,20vw);
  gap:16px;
}
.pacaDiscardZone,.pacaKeepZone,.critiqueZone{
  min-width:0;
  border:3px solid #09090b;
  border-radius:28px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12px;
  overflow:hidden;
}
.pacaDiscardZone i,.pacaKeepZone i,.critiqueZone i{font-size:24px}
.pacaKeepZone{justify-content:flex-start;padding:16px 10px}
.savedRail,.acceptedRail{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  overflow:auto;
  scrollbar-width:thin;
  padding:4px;
  min-height:0;
}
.savedMini,.acceptedMini{
  aspect-ratio:1;
  border:2px solid #09090b;
  border-radius:16px;
  background:#f4f1ea;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.savedMini img,.acceptedMini img{max-width:96%;max-height:96%;object-fit:contain}
.designWithSaved{
  margin-top:auto;
  width:100%;
  padding:11px 8px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.pacaCenter,.critiqueCenter{
  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  overflow:hidden;
}
.pacaBundle{
  position:relative;
  width:min(60vw,420px);
  aspect-ratio:1.38;
  border:4px solid #09090b;
  background:#fff;
  border-radius:30px;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-weight:950;
  font-size:clamp(34px,8vw,74px);
  letter-spacing:-.08em;
  transition:transform .22s ease, opacity .22s ease;
}
.pacaBundle[data-open="1"]{transform:rotate(-1deg)}
.pacaBundle[data-open="2"]{transform:rotate(1deg) scale(.98)}
.pacaBundle[data-open="3"]{opacity:.18;transform:translateY(10px) scale(.88)}
.pacaStrap{
  position:absolute;
  inset:auto 0;
  height:28px;
  background:#09090b;
}
.strapA{top:24%}.strapB{bottom:25%}
.pacaRip{
  position:absolute;
  left:48%;top:0;bottom:0;
  width:0;
  border-left:5px dashed #f4f1ea;
  opacity:0;
}
.pacaBundle[data-open="2"] .pacaRip,.pacaBundle[data-open="3"] .pacaRip{opacity:1}
.pacaOpenBtn{
  min-width:220px;
  font-weight:950;
  display:flex;
  justify-content:center;
  gap:10px;
}
.pacaCardSlot,.lookVoteSlot{
  position:relative;
  width:min(56vw,360px);
  aspect-ratio:.76;
  display:none;
  align-items:center;
  justify-content:center;
  touch-action:none;
}
.pacaCardSlot.is-visible,.lookVoteSlot.is-visible{display:flex}
.discoveryCard,.voteLookCard{
  position:absolute;
  inset:0;
  border:4px solid #09090b;
  border-radius:30px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px;
  box-shadow:0 12px 0 #09090b;
  touch-action:none;
  user-select:none;
  transition:transform .18s ease, opacity .18s ease;
  will-change:transform;
}
.discoveryCard img{
  width:100%;
  height:74%;
  object-fit:contain;
  pointer-events:none;
}
.discoveryCard strong,.voteLookCard strong{
  font-size:13px;
  line-height:1.12;
  text-align:center;
  max-width:100%;
}
.discoveryCard small,.voteLookCard small{font-weight:900;color:#555;text-transform:uppercase;letter-spacing:.08em}
.discoveryCard.go-right,.voteLookCard.go-right{transform:translateX(80vw) rotate(14deg);opacity:0}
.discoveryCard.go-left,.voteLookCard.go-left{transform:translateX(-80vw) rotate(-14deg);opacity:0}
.pacaDecisionButtons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:min(56vw,360px);
}
.pacaDecisionButtons button{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:950;
}
#pacaKeepBtn,#lookAcceptBtn{background:#fff;color:#09090b;border:3px solid #09090b}
.gameMicrocopy{
  margin:0;
  max-width:360px;
  font-weight:800;
  text-align:center;
  color:#333;
}
.voteLookCard{
  justify-content:space-between;
}
.voteLookGrid{
  width:100%;
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
}
.voteLookGrid span{
  border:2px solid #09090b;
  border-radius:18px;
  background:#f4f1ea;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.voteLookGrid img{max-width:96%;max-height:96%;object-fit:contain}
.simpleGamePanel{
  position:absolute;
  left:50%;top:52%;
  transform:translate(-50%,-50%);
  width:min(92vw,620px);
  border:3px solid #09090b;
  background:#fff;
  border-radius:32px;
  padding:28px;
  text-align:center;
}
.simpleGamePanel h2{font-size:clamp(32px,6vw,64px);margin:0 0 10px;letter-spacing:-.06em;line-height:.9}
.simpleGamePanel p{font-weight:750;color:#333;margin:0 auto 20px;max-width:44em;line-height:1.4}
.galleryPlaceholders,.rankingPills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.galleryPlaceholders span,.rankingPills span{
  border:2px solid #09090b;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  background:#f4f1ea;
}

@media (max-width:720px){
  .gameCenterPanel{
    top:58%;
    width:calc(100vw - 24px);
    padding:18px;
    border-radius:26px;
    gap:12px;
  }
  .gamePrimaryChoices{grid-template-columns:1fr;gap:8px}
  .gameChoice{min-height:56px;padding:12px 14px}
  .gameSecondaryChoices button{padding:8px 11px;font-size:12px}
  .sceneBackdrop::before{left:12px;right:12px;top:8dvh;height:48dvh;border-radius:28px 28px 8px 8px}
  .sceneSign{top:10dvh;min-width:78vw;height:46px;font-size:30px}
  .sceneWindow{display:none}
  .sceneDoor{top:24dvh;width:42vw;height:32dvh}
  .sceneWalkway{width:88vw;height:38dvh}
  .gameTopStrip{left:10px;right:10px;height:44px;gap:6px}
  .gameTopStrip strong{font-size:14px;padding:8px 12px;border-width:2px;white-space:nowrap}
  .gameBack,.gameMiniAction{padding:8px 10px;font-size:12px;gap:5px}
  .gameBack span,.gameMiniAction span{display:none}
  .pacaPlayfield,.critiquePlayfield{
    padding:68px 10px calc(10px + env(safe-area-inset-bottom));
    grid-template-columns:42px minmax(0,1fr) 66px;
    gap:8px;
  }
  .pacaDiscardZone,.pacaKeepZone,.critiqueZone{
    border-width:2px;
    border-radius:18px;
    font-size:9px;
    letter-spacing:.03em;
    padding:8px 4px;
  }
  .pacaDiscardZone span,.pacaKeepZone > div:first-child span,.critiqueZone span{writing-mode:vertical-rl;text-orientation:mixed}
  .pacaKeepZone{padding:8px 4px}
  .pacaKeepZone i,.pacaDiscardZone i,.critiqueZone i{font-size:16px}
  .savedRail,.acceptedRail{grid-template-columns:1fr;gap:5px;padding:2px}
  .savedMini,.acceptedMini{border-width:1px;border-radius:10px}
  .designWithSaved{font-size:0;padding:8px 4px;min-height:38px}
  .designWithSaved i{font-size:14px}
  .pacaBundle{width:min(72vw,290px);border-width:3px;border-radius:24px}
  .pacaOpenBtn{min-width:190px;padding:10px 14px}
  .pacaCardSlot,.lookVoteSlot{width:min(66vw,310px)}
  .discoveryCard,.voteLookCard{border-width:3px;border-radius:24px;box-shadow:0 8px 0 #09090b;padding:10px}
  .discoveryCard strong,.voteLookCard strong{font-size:11px}
  .pacaDecisionButtons{width:min(66vw,310px);gap:8px}
  .pacaDecisionButtons button{min-height:42px;padding:9px 8px;font-size:12px}
  .gameMicrocopy{font-size:12px;max-width:70vw}
  .simpleGamePanel{width:calc(100vw - 20px);padding:20px;border-radius:26px}
  .galleryPlaceholders span,.rankingPills span{font-size:12px;padding:8px 10px}
}

@media (min-width:721px) and (max-width:1100px){
  .gameCenterPanel{top:55%;width:min(86vw,620px)}
  .pacaPlayfield,.critiquePlayfield{grid-template-columns:90px minmax(0,1fr) 130px;gap:12px}
  .pacaCardSlot,.lookVoteSlot{width:min(52vw,360px)}
  .pacaDecisionButtons{width:min(52vw,360px)}
}

/* v0.35 — Pacas PNG reales: 3 momentos por set, sin bloque CSS falso */
.pacaBundle{
  width:min(58vw,430px);
  max-width:100%;
  aspect-ratio:1;
  border:0;
  background:transparent;
  border-radius:0;
  overflow:visible;
  box-shadow:none;
  display:grid;
  place-items:center;
  font-size:0;
  letter-spacing:0;
  transition:transform .24s ease, opacity .24s ease, filter .24s ease;
}
.pacaBundleImg{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18));
  transform-origin:center center;
  transition:transform .24s ease, filter .24s ease;
  user-select:none;
  -webkit-user-drag:none;
}
.pacaBundle[data-open="1"]{transform:rotate(-1.2deg) scale(1.01)}
.pacaBundle[data-open="2"]{transform:rotate(.8deg) scale(1.02)}
.pacaBundle[data-open="3"]{opacity:.24;transform:translateY(8px) scale(.9);filter:saturate(.92)}
.pacaBundle[data-open="1"] .pacaBundleImg{transform:translateY(-2px) rotate(-.4deg)}
.pacaBundle[data-open="2"] .pacaBundleImg{transform:translateY(-4px) scale(1.02)}
.pacaStrap,.pacaRip,.pacaBundle > strong{display:none!important}
.pacaStageTag{
  position:absolute;
  left:50%;
  bottom:-4px;
  transform:translate(-50%,50%);
  padding:7px 11px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-size:10px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
  box-shadow:0 4px 0 #09090b;

  margin-bottom:2px;}
.pacaOpenBtn{
  margin-top:2px;
}
@media (max-width: 720px){
  .pacaBundle{width:min(74vw,330px)}
  .pacaStageTag{font-size:9px;padding:6px 9px;bottom:0;max-width:78vw;overflow:hidden;text-overflow:ellipsis}
  .pacaOpenBtn{min-width:172px;padding:9px 12px}
}

/* v0.36 — Celebración in-game liviana para paca: CSS, estrellas y glow dinámico */
.pacaCenter{
  isolation:isolate;
}
.pacaFxLayer{
  position:absolute;
  inset:-14% -12%;
  pointer-events:none;
  overflow:hidden;
  z-index:9;
  mix-blend-mode:screen;
}
.pacaFxStar{
  position:absolute;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  color:#ffd56a;
  font-style:normal;
  font-size:18px;
  line-height:1;
  text-shadow:
    0 0 7px rgba(255,214,104,.95),
    0 0 16px rgba(255,121,210,.6),
    0 0 28px rgba(255,255,255,.42);
  transform:translate3d(0,0,0) scale(var(--scale,1)) rotate(0deg);
  opacity:0;
  animation:pacaStarPop 920ms cubic-bezier(.16,1,.3,1) forwards;
  will-change:transform,opacity,filter;
}
.pacaFxStar:nth-child(3n){color:#ff8ee8;text-shadow:0 0 8px rgba(255,142,232,.9),0 0 20px rgba(255,214,104,.42)}
.pacaFxStar:nth-child(4n){color:#fff5c8;text-shadow:0 0 8px rgba(255,255,255,.96),0 0 20px rgba(255,200,80,.66)}
.pacaFxStar.fx-return{color:#c9f7ff;text-shadow:0 0 8px rgba(99,220,255,.8),0 0 18px rgba(255,255,255,.55)}
.pacaFxStar.fx-save{color:#ffe48a;text-shadow:0 0 9px rgba(255,226,128,1),0 0 22px rgba(255,120,220,.68)}
@keyframes pacaStarPop{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.18) rotate(0deg);filter:blur(1px)}
  14%{opacity:1;filter:blur(0)}
  72%{opacity:.96}
  100%{opacity:0;transform:translate3d(var(--dx,0),var(--dy,-80px),0) scale(calc(var(--scale,1) * 1.35)) rotate(var(--rot,28deg));filter:blur(.4px)}
}
.pacaBundle::before,
.pacaBundle::after{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:42%;
  pointer-events:none;
  opacity:0;
  z-index:-1;
  transform:scale(.9);
  transition:opacity .22s ease, transform .22s ease;
}
.pacaBundle::before{
  background:radial-gradient(circle at 50% 52%, rgba(255,230,128,.72), rgba(255,142,232,.24) 38%, transparent 68%);
  filter:blur(18px);
}
.pacaBundle::after{
  inset:-3%;
  border:2px solid rgba(255,220,110,.48);
  box-shadow:0 0 20px rgba(255,210,90,.52), inset 0 0 18px rgba(255,255,255,.35);
}
.pacaCenter.is-celebrating .pacaBundle::before,
.pacaBundle.fx-cut::before,
.pacaBundle.fx-open::before,
.pacaBundle.fx-burst::before,
.pacaBundle.fx-save::before,
.pacaBundle.fx-return::before{
  opacity:1;
  transform:scale(1.08);
}
.pacaBundle.fx-cut .pacaBundleImg{animation:pacaCutPulse 560ms cubic-bezier(.2,1,.2,1)}
.pacaBundle.fx-open .pacaBundleImg{animation:pacaOpenPulse 640ms cubic-bezier(.2,1,.2,1)}
.pacaBundle.fx-burst .pacaBundleImg{animation:pacaBurstPulse 720ms cubic-bezier(.2,1,.2,1)}
.pacaBundle.fx-save .pacaBundleImg{animation:pacaSavePulse 520ms cubic-bezier(.2,1,.2,1)}
.pacaBundle.fx-return .pacaBundleImg{animation:pacaReturnPulse 520ms cubic-bezier(.2,1,.2,1)}
@keyframes pacaCutPulse{
  0%,100%{filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18))}
  38%{transform:translateY(-4px) rotate(-1.4deg) scale(1.035);filter:drop-shadow(0 0 16px rgba(255,225,110,.62)) drop-shadow(0 22px 30px rgba(9,9,11,.22))}
}
@keyframes pacaOpenPulse{
  0%,100%{filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18))}
  42%{transform:translateY(-7px) scale(1.05);filter:drop-shadow(0 0 22px rgba(255,181,235,.58)) drop-shadow(0 24px 34px rgba(9,9,11,.2))}
}
@keyframes pacaBurstPulse{
  0%,100%{filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18))}
  35%{transform:translateY(-10px) scale(1.075);filter:drop-shadow(0 0 30px rgba(255,232,126,.8)) drop-shadow(0 0 18px rgba(255,139,220,.5)) drop-shadow(0 26px 38px rgba(9,9,11,.18))}
}
@keyframes pacaSavePulse{
  0%,100%{filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18))}
  45%{transform:translateX(5px) translateY(-4px) scale(1.035);filter:drop-shadow(0 0 18px rgba(255,223,96,.76)) drop-shadow(0 20px 32px rgba(9,9,11,.2))}
}
@keyframes pacaReturnPulse{
  0%,100%{filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18))}
  45%{transform:translateX(-5px) translateY(-3px) scale(1.02);filter:drop-shadow(0 0 14px rgba(168,230,255,.65)) drop-shadow(0 20px 30px rgba(9,9,11,.19))}
}
.pacaOpenBtn{
  position:relative;
  overflow:hidden;
}
.pacaOpenBtn::after,
.designWithSaved.is-ready::after{
  content:"";
  position:absolute;
  inset:-35% -20%;
  background:linear-gradient(110deg, transparent 28%, rgba(255,255,255,.82) 47%, transparent 66%);
  transform:translateX(-115%);
  animation:pacaButtonGleam 2.65s ease-in-out infinite;
  pointer-events:none;
}
.designWithSaved.is-ready{
  box-shadow:0 0 0 2px #09090b inset, 0 0 18px rgba(255,220,110,.44);
}
@keyframes pacaButtonGleam{
  0%,58%{transform:translateX(-115%)}
  86%,100%{transform:translateX(115%)}
}
.savedMini{
  position:relative;
  animation:savedMiniPop 360ms cubic-bezier(.16,1,.3,1);
}
.savedMini::after{
  content:"✦";
  position:absolute;
  right:4px;
  top:2px;
  color:#ffd86d;
  font-size:12px;
  text-shadow:0 0 8px rgba(255,216,109,.9);
  opacity:.9;
}
@keyframes savedMiniPop{
  0%{transform:scale(.72);filter:brightness(1.4)}
  70%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .pacaFxStar,
  .pacaBundle .pacaBundleImg,
  .pacaOpenBtn::after,
  .designWithSaved.is-ready::after,
  .savedMini{animation:none!important}
  .pacaFxLayer{display:none!important}
}
@media (max-width:720px){
  .pacaFxLayer{inset:-10% -7%}
  .pacaFxStar{width:15px;height:15px;margin:-7.5px 0 0 -7.5px;font-size:15px}
  .pacaBundle::before{filter:blur(14px)}
}

/* =========================================================
   v0.37 — Paca responsive stage fit
   La paca + estado + botón + carta + decisiones se tratan como un solo bloque visual.
   El bloque se escala desde JS según el espacio real disponible para evitar cortes.
   ========================================================= */
.gameScreenPaca .pacaPlayfield{
  min-height:0;
  align-items:stretch;
}
.gameScreenPaca .pacaCenter{
  min-height:0;
  overflow:hidden;
  padding:clamp(2px,.9vmin,10px);
  display:grid;
  place-items:center;
  contain:layout paint;
}
.pacaStageUnit{
  --paca-stage-scale:1;
  position:absolute;
  left:50%;
  top:50%;
  width:max-content;
  max-width:none;
  min-width:0;
  max-height:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(9px,1.55dvh,18px);
  transform:translate(-50%,-50%) scale(var(--paca-stage-scale));
  transform-origin:center center;
  will-change:transform;
}
.pacaStageUnit > *{
  flex:0 0 auto;
}
.pacaStageUnit .pacaBundle{
  margin:0;
}
.pacaStageUnit .pacaOpenBtn{
  margin:2px 0 0;
  min-height:44px;
  padding:11px 18px;
  flex:0 0 auto;
}
.pacaStageUnit .pacaCardSlot,
.pacaStageUnit .pacaDecisionButtons{
  flex:0 0 auto;
}
.pacaStageUnit .pacaDecisionButtons button[disabled]{
  opacity:.45;
}
.gameScreenPaca .pacaDiscardZone,
.gameScreenPaca .pacaKeepZone{
  min-height:0;
  max-height:100%;
}
.gameScreenPaca .pacaKeepZone > div:first-child{
  flex:0 0 auto;
}
.gameScreenPaca .savedRail{
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
}
.gameScreenPaca .designWithSaved{
  flex:0 0 auto;
}
.gameScreenPaca .pacaFxLayer{
  inset:0;
  overflow:hidden;
}
@media (max-width:720px){
  .gameScreenPaca .pacaPlayfield{
    padding:calc(64px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));
    grid-template-columns:38px minmax(0,1fr) 58px;
    gap:6px;
  }
  .gameScreenPaca .pacaCenter{
    padding:0;
  }
  .pacaStageUnit{
    gap:7px;
  }
  .pacaStageUnit .pacaBundle{
    width:min(74vw,330px);
  }
  .pacaStageUnit .pacaOpenBtn{
    width:min(66vw,260px);
    min-width:0;
    min-height:40px;
    padding:9px 12px;
    font-size:12px;
  }
  .pacaStageUnit .pacaCardSlot{
    width:min(68vw,310px);
  }
  .pacaStageUnit .pacaDecisionButtons{
    width:min(68vw,310px);
  }
  .pacaStageUnit .pacaDecisionButtons button{
    min-height:40px;
    padding:8px 8px;
  }
  .gameScreenPaca .pacaDiscardZone,
  .gameScreenPaca .pacaKeepZone{
    border-radius:16px;
  }
}
@media (min-width:721px) and (max-width:1100px){
  .gameScreenPaca .pacaPlayfield{
    padding:82px 14px 18px;
    grid-template-columns:76px minmax(0,1fr) 124px;
    gap:10px;
  }
  .pacaStageUnit .pacaBundle{
    width:min(55vw,410px);
  }
}
@media (min-width:1101px){
  .gameScreenPaca .pacaPlayfield{
    padding:86px 20px 22px;
    grid-template-columns:minmax(100px,16vw) minmax(0,1fr) minmax(128px,18vw);
  }
}

/* =========================================================
   v0.38 — Paca short-landscape fit
   En pantallas anchas y bajas, el bloque central usa una composición horizontal
   para aprovechar el ancho y evitar que la carta/botones se corten hacia abajo.
   ========================================================= */
.gameScreenPaca.is-short-landscape .pacaPlayfield{
  padding:calc(58px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom));
  grid-template-columns:clamp(82px,14vw,180px) minmax(0,1fr) clamp(116px,17vw,220px);
  gap:clamp(8px,1.4vw,14px);
}
.gameScreenPaca.is-short-landscape .pacaCenter{
  padding:0;
  align-items:center;
  justify-items:center;
}
.gameScreenPaca.is-short-landscape .pacaStageUnit{
  display:grid;
  grid-template-columns:clamp(150px,24vw,260px) clamp(190px,25vw,260px);
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:center;
  gap:8px 12px;
  width:max-content;
}
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaBundle{
  grid-column:1;
  grid-row:1;
  width:100%;
  align-self:end;
  justify-self:center;
}
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaOpenBtn{
  grid-column:1;
  grid-row:2;
  width:100%;
  min-width:0;
  min-height:36px;
  padding:8px 10px;
  font-size:12px;
  align-self:start;
}
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaCardSlot{
  grid-column:2;
  grid-row:1;
  width:100%;
  align-self:end;
  justify-self:center;
}
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaDecisionButtons{
  grid-column:2;
  grid-row:2;
  width:100%;
  align-self:start;
  gap:7px;
}
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaDecisionButtons button{
  min-height:36px;
  padding:7px 8px;
  font-size:12px;
}
.gameScreenPaca.is-short-landscape .discoveryCard{
  border-width:3px;
  border-radius:22px;
  box-shadow:0 7px 0 #09090b;
  padding:9px;
  gap:6px;
}
.gameScreenPaca.is-short-landscape .discoveryCard img{
  height:70%;
}
.gameScreenPaca.is-short-landscape .discoveryCard strong{
  font-size:11px;
  line-height:1.04;
}
.gameScreenPaca.is-short-landscape .discoveryCard small{
  font-size:10px;
}
.gameScreenPaca.is-short-landscape .pacaDiscardZone,
.gameScreenPaca.is-short-landscape .pacaKeepZone{
  border-radius:22px;
}
.gameScreenPaca.is-short-landscape .pacaKeepZone{
  padding:12px 8px;
}
.gameScreenPaca.is-short-landscape .savedRail{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
@media (max-height:520px) and (min-width:721px){
  .gameTopStrip{height:42px;top:calc(8px + env(safe-area-inset-top))}
  .gameTopStrip strong{font-size:16px;padding:8px 16px;border-width:3px}
  .gameBack,.gameMiniAction{padding:8px 12px;font-size:13px}
}
@media (max-height:430px){
  .gameScreenPaca.is-short-landscape .pacaPlayfield{
    padding:calc(52px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
    grid-template-columns:clamp(64px,12vw,130px) minmax(0,1fr) clamp(88px,15vw,160px);
    gap:8px;
  }
  .gameScreenPaca.is-short-landscape .pacaStageUnit{
    grid-template-columns:clamp(128px,23vw,220px) clamp(170px,24vw,230px);
    gap:6px 10px;
  }
  .gameScreenPaca.is-short-landscape .pacaStageUnit .pacaOpenBtn,
  .gameScreenPaca.is-short-landscape .pacaStageUnit .pacaDecisionButtons button{
    min-height:32px;
    padding:6px 8px;
    font-size:11px;
  }
}


/* =========================================================
   v0.39 — Paca single-block uniform fit
   No reflow: paca + botón + carta + decisiones conservan la misma composición
   y se escalan juntos con un solo factor calculado por JS.
   ========================================================= */
.gameScreenPaca .pacaCenter{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  min-height:0!important;
  contain:layout paint;
}
.gameScreenPaca .pacaStageUnit,
.gameScreenPaca.is-short-landscape .pacaStageUnit{
  --paca-stage-scale:1;
  --paca-bundle-base:320px;
  --paca-card-base:300px;
  --paca-gap-base:10px;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--paca-gap-base)!important;
  width:max-content!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  transform:scale(var(--paca-stage-scale))!important;
  transform-origin:center center!important;
  will-change:transform;
}
.gameScreenPaca .pacaStageUnit > *,
.gameScreenPaca.is-short-landscape .pacaStageUnit > *{
  flex:0 0 auto!important;
}
.gameScreenPaca .pacaStageUnit .pacaBundle,
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaBundle{
  width:var(--paca-bundle-base)!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:center!important;
  justify-self:center!important;
}
.gameScreenPaca .pacaStageUnit .pacaOpenBtn,
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaOpenBtn{
  width:min(260px, var(--paca-card-base))!important;
  min-width:0!important;
  min-height:42px!important;
  padding:10px 16px!important;
  font-size:13px!important;
  align-self:center!important;
}
.gameScreenPaca .pacaStageUnit .pacaCardSlot,
.gameScreenPaca .pacaStageUnit .pacaDecisionButtons,
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaCardSlot,
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaDecisionButtons{
  width:var(--paca-card-base)!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:center!important;
  justify-self:center!important;
}
.gameScreenPaca .pacaStageUnit .pacaDecisionButtons,
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaDecisionButtons{
  gap:8px!important;
}
.gameScreenPaca .pacaStageUnit .pacaDecisionButtons button,
.gameScreenPaca.is-short-landscape .pacaStageUnit .pacaDecisionButtons button{
  min-height:42px!important;
  padding:8px 10px!important;
  font-size:12px!important;
}
.gameScreenPaca .discoveryCard,
.gameScreenPaca.is-short-landscape .discoveryCard{
  border-width:3px;
  border-radius:24px;
  box-shadow:0 8px 0 #09090b;
  padding:10px;
  gap:7px;
}
.gameScreenPaca .discoveryCard img,
.gameScreenPaca.is-short-landscape .discoveryCard img{
  height:72%;
}
.gameScreenPaca .discoveryCard strong,
.gameScreenPaca.is-short-landscape .discoveryCard strong{
  font-size:11px;
  line-height:1.08;
}
.gameScreenPaca .discoveryCard small,
.gameScreenPaca.is-short-landscape .discoveryCard small{
  font-size:10px;
}
@media (max-width:720px){
  .gameScreenPaca .pacaStageUnit,
  .gameScreenPaca.is-short-landscape .pacaStageUnit{
    --paca-bundle-base:300px;
    --paca-card-base:292px;
    --paca-gap-base:9px;
  }
}
@media (min-width:721px) and (max-height:560px){
  .gameScreenPaca .pacaStageUnit,
  .gameScreenPaca.is-short-landscape .pacaStageUnit{
    --paca-bundle-base:310px;
    --paca-card-base:292px;
    --paca-gap-base:8px;
  }
}
@media (max-height:430px){
  .gameScreenPaca .pacaStageUnit,
  .gameScreenPaca.is-short-landscape .pacaStageUnit{
    --paca-bundle-base:292px;
    --paca-card-base:276px;
    --paca-gap-base:7px;
  }
}

/* =========================================================
   v0.40 — Paca true viewport fit
   Corrección real: la unidad central queda absoluta al centro del espacio disponible.
   Se escala como una sola pieza y el layout del documento ya no puede empujarla/cortarla.
   ========================================================= */
.gameScreenPaca .pacaPlayfield{
  overflow:hidden!important;
  min-height:0!important;
}
.gameScreenPaca .pacaCenter{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  contain:layout paint;
}
.gameScreenPaca .pacaStageUnit,
.gameScreenPaca.is-short-landscape .pacaStageUnit{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  transform:translate3d(-50%,-50%,0) scale(var(--paca-stage-scale,1))!important;
  transform-origin:center center!important;
  will-change:transform;
}
.gameScreenPaca .pacaDiscardZone,
.gameScreenPaca .pacaKeepZone{
  overflow:hidden!important;
}
@media (max-height:620px){
  .gameScreenPaca .pacaPlayfield{
    padding-top:calc(62px + env(safe-area-inset-top))!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }
}
@media (max-height:500px){
  .gameScreenPaca .pacaPlayfield{
    padding-top:calc(54px + env(safe-area-inset-top))!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
  }
  .gameScreenPaca .gameTopStrip{height:42px!important;top:calc(8px + env(safe-area-inset-top))!important;}
  .gameScreenPaca .gameTopStrip strong{font-size:16px!important;padding:7px 16px!important;}
  .gameScreenPaca .gameBack,.gameScreenPaca .gameMiniAction{padding:8px 12px!important;font-size:13px!important;}
}
@media (max-height:440px){
  .gameScreenPaca .pacaPlayfield{
    padding-top:calc(48px + env(safe-area-inset-top))!important;
    grid-template-columns:clamp(54px,10vw,120px) minmax(0,1fr) clamp(72px,13vw,150px)!important;
    gap:8px!important;
  }
  .gameScreenPaca .gameTopStrip{height:38px!important;}
  .gameScreenPaca .gameTopStrip strong{font-size:14px!important;padding:6px 13px!important;border-width:2px!important;}
}


/* =========================================================
   v0.42 — Paca tag spacing real
   La etiqueta ya no vive pegada/absoluta sobre la paca: ahora participa
   en el bloque central y deja aire real antes del botón principal.
   ========================================================= */
.pacaStageUnit{
  gap:clamp(10px,1.75dvh,20px)!important;
}
.pacaStageUnit .pacaStageTag{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:2px 0 4px!important;
  z-index:3!important;
  max-width:min(82vw,360px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.pacaStageUnit .pacaOpenBtn{
  margin-top:2px!important;
}
@media (max-height:680px){
  .pacaStageUnit{gap:clamp(8px,1.35dvh,14px)!important;}
  .pacaStageUnit .pacaStageTag{margin:1px 0 3px!important;}
  .pacaStageUnit .pacaOpenBtn{margin-top:1px!important;}
}
@media (max-width:720px){
  .pacaStageUnit .pacaStageTag{
    position:static!important;
    bottom:auto!important;
    transform:none!important;
    max-width:70vw!important;
  }
}




/* =========================================================
   v0.44 — Paneles laterales simétricos + glow
   Ambos paneles conservan forma similar; la mejora vive en el feedback visual.
   ========================================================= */
.gameScreenPaca .pacaDiscardZone,
.gameScreenPaca .pacaKeepZone{
  color:#09090b;
  border-radius:28px;
  border:3px solid #09090b;
  background:#fff;
  box-shadow:0 5px 0 #09090b;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
}
.gameScreenPaca .pacaDiscardZone{
  appearance:none;
  cursor:default;
  padding:14px 10px;
}
.gameScreenPaca .pacaDiscardZone i,
.gameScreenPaca .pacaKeepHead i{
  transition:transform .18s ease, filter .18s ease;
}
.gameScreenPaca .pacaDiscardZone span,
.gameScreenPaca .pacaKeepHead span{
  display:block;
}
.gameScreenPaca .pacaDiscardZone small,
.gameScreenPaca .pacaKeepHead small{
  display:block;
  max-width:100%;
  margin-top:4px;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.42;
  text-transform:uppercase;
  transition:opacity .18s ease, max-height .18s ease, margin .18s ease;
}
.gameScreenPaca .pacaDiscardZone:not(.is-drop-active) small,
.gameScreenPaca .pacaKeepZone:not(.is-drop-active) .pacaKeepHead small{
  opacity:0;
  max-height:0;
  margin:0;
  overflow:hidden;
}
.gameScreenPaca .pacaKeepHead{
  width:100%;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  text-align:center;
  transition:transform .18s ease;
}
.gameScreenPaca .pacaDiscardZone.is-drop-active,
.gameScreenPaca .pacaKeepZone.is-drop-active{
  cursor:pointer;
  background:linear-gradient(180deg,#fff 0%,#f8f8f8 100%);
}
.gameScreenPaca .pacaDiscardZone.is-drop-active{
  box-shadow:0 5px 0 #09090b, 0 0 0 0 rgba(145,219,255,0);
}
.gameScreenPaca .pacaKeepZone.is-drop-active{
  box-shadow:0 5px 0 #09090b, 0 0 0 0 rgba(255,214,90,0);
}
.gameScreenPaca .pacaDiscardZone.is-drop-hot{
  background:linear-gradient(180deg,#ffffff 0%,#f3fbff 100%);
  box-shadow:0 5px 0 #09090b, 0 0 0 4px rgba(135,221,255,.18), 0 0 26px rgba(135,221,255,.34), inset 0 0 18px rgba(135,221,255,.15);
  border-color:#09090b;
  transform:translateY(-1px);
  filter:saturate(1.03);
}
.gameScreenPaca .pacaKeepZone.is-drop-hot{
  background:linear-gradient(180deg,#fffefb 0%,#fff9e8 100%);
  box-shadow:0 5px 0 #09090b, 0 0 0 4px rgba(255,223,120,.20), 0 0 28px rgba(255,215,90,.32), inset 0 0 18px rgba(255,231,150,.17);
  border-color:#09090b;
  transform:translateY(-1px);
  filter:saturate(1.03);
}
.gameScreenPaca .pacaDiscardZone.is-drop-hot i,
.gameScreenPaca .pacaKeepZone.is-drop-hot .pacaKeepHead i{
  transform:scale(1.06);
}
.gameScreenPaca .pacaDiscardZone.is-drop-hot span::after{
  content:' ✦';
}
.gameScreenPaca .pacaKeepZone.is-drop-hot .pacaKeepHead span::after{
  content:' ✦';
}
@media (max-width:720px){
  .gameScreenPaca .pacaDiscardZone small,
  .gameScreenPaca .pacaKeepHead small{
    display:none!important;
  }
}
@media (max-width:720px),(max-height:520px){
  .gameScreenPaca .pacaDiscardZone,
  .gameScreenPaca .pacaKeepZone{
    border-width:2px!important;
    box-shadow:0 4px 0 #09090b;
  }
}

/* =========================================================
   v0.45 — Fondos cuadrados + tienda/tipo + colección personal
   ========================================================= */
.gameScreen.hasGameBg{
  background:#0a0a0a;
}
.gameScreen.hasGameBg::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--game-bg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  filter:saturate(.98) contrast(.98);
  transform:scale(1.01);
}
.gameScreen.hasGameBg::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(244,241,234,.20),rgba(244,241,234,.34)), radial-gradient(circle at 50% 45%,rgba(244,241,234,.34),rgba(244,241,234,.18) 42%,rgba(244,241,234,.54) 100%);
}
.gameScreen.hasGameBg > *{
  position:relative;
  z-index:2;
}
.gameScreen.hasGameBg .sceneBackdrop{display:none!important}
.gameScreenCritique.hasGameBg::after{
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(244,241,234,.20)), radial-gradient(circle at 50% 48%,rgba(244,241,234,.16),rgba(244,241,234,.34) 70%);
}
.gameScreenPaca.hasGameBg::after{
  background:linear-gradient(180deg,rgba(244,241,234,.24),rgba(244,241,234,.42)), radial-gradient(circle at 50% 46%,rgba(244,241,234,.20),rgba(244,241,234,.54) 78%);
}
.gameScreenLobby.hasGameBg .gameCenterPanel,
.gameScreenCollection.hasGameBg .collectionPanel,
.gameScreenWardrobe.hasGameBg .wardrobePanel,
.gameScreenGallery.hasGameBg .simpleGamePanel,
.gameScreenRanking.hasGameBg .simpleGamePanel{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
}
.gameSceneCaption{
  margin:0;
  padding:7px 12px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.gameTopTitle{
  justify-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  min-width:0;
}
.gameTopTitle strong{
  display:inline-grid;
  place-items:center;
}
.gameTopTitle small{
  max-width:min(48vw,360px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 9px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  font-size:9px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.gameTopActions{
  justify-self:end;
  display:flex;
  gap:7px;
  align-items:center;
  min-width:0;
}
.gameTopActions .gameMiniAction{
  white-space:nowrap;
}
.collectionPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1120px,calc(100vw - 32px));
  max-height:calc(100dvh - 112px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
  padding:18px;
  border:3px solid #09090b;
  border-radius:32px;
  background:#fff;
  overflow:hidden;
}
.collectionHero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 14px;
  align-items:end;
}
.collectionHero .gameEyebrow{grid-column:1 / -1}
.collectionHero h2{
  margin:0;
  font-size:clamp(28px,5vw,58px);
  line-height:.9;
  letter-spacing:-.06em;
}
.collectionHero p{
  grid-column:1;
  margin:0;
  max-width:60em;
  font-size:13px;
  font-weight:800;
  color:#333;
}
.collectionStats{
  grid-column:2;
  grid-row:2 / span 2;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.collectionStats span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 11px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#f4f1ea;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.collectionGrid{
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}
.collectionCard{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:9px;
  border:2px solid #09090b;
  border-radius:22px;
  background:#fff;
  box-shadow:0 4px 0 #09090b;
}
.collectionThumb{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:2px solid #09090b;
  border-radius:16px;
  background:#f4f1ea;
  overflow:hidden;
}
.collectionThumb img{max-width:96%;max-height:96%;object-fit:contain}
.collectionCard strong{
  font-size:12px;
  line-height:1.05;
  min-height:2.1em;
  overflow:hidden;
}
.collectionCard small{
  font-size:10px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#555;
}
.collectionActions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:5px;
  margin-top:auto;
}
.collectionActions button{
  min-height:31px;
  padding:6px 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:999px;
  font-size:10px;
  font-weight:950;
}
.collectionActions button span{display:none}
.collectionEmpty{
  grid-column:1 / -1;
  min-height:280px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  text-align:center;
  border:3px dashed #09090b;
  border-radius:26px;
  background:rgba(255,255,255,.74);
  padding:22px;
}
.collectionEmpty strong{
  font-size:clamp(24px,4vw,42px);
  line-height:.95;
  letter-spacing:-.05em;
}
.collectionEmpty span{font-weight:800;color:#333;max-width:34em}
.collectionEmpty button{padding:12px 18px;font-weight:950}
@media (max-width:720px){
  .gameTopStrip{left:8px!important;right:8px!important;gap:6px!important}
  .gameTopActions{gap:5px}
  .gameTopActions .gameMiniAction span,
  .gameBack span{display:none}
  .gameTopTitle small{max-width:42vw;font-size:8px;padding:3px 7px}
  .gameSecondaryChoices button{font-size:12px;padding:9px 11px}
  .gameSceneCaption{font-size:9px;padding:6px 9px}
  .collectionPanel{width:calc(100vw - 16px);max-height:calc(100dvh - 88px);padding:12px;border-radius:24px;gap:10px}
  .collectionHero{display:flex;flex-direction:column;align-items:flex-start}
  .collectionHero p{font-size:12px}
  .collectionStats{width:100%;justify-content:flex-start}
  .collectionStats span{font-size:10px;min-height:28px;padding:6px 9px}
  .collectionGrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .collectionCard{border-radius:18px;padding:7px;box-shadow:0 3px 0 #09090b}
  .collectionCard strong{font-size:11px}
  .collectionActions{gap:4px}
  .collectionActions button{min-height:29px;font-size:9px}
}


/* =========================================================
   v0.70 — Armario personal / subir prendas propias
   ========================================================= */
.gameScreenWardrobe.hasGameBg > .wardrobePanel{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
}
.wardrobePanel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1180px,calc(100vw - 32px));
  max-height:calc(100dvh - 112px);
  display:grid;
  grid-template-columns:minmax(280px,.95fr) minmax(320px,1.05fr);
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
  padding:18px;
  border:3px solid #09090b;
  border-radius:32px;
  background:#fff;
  overflow:hidden;
}
.wardrobeHero{
  grid-column:1 / -1;
  display:grid;
  gap:5px;
}
.wardrobeHero h2{
  margin:0;
  font-size:clamp(26px,4.5vw,52px);
  line-height:.92;
  letter-spacing:-.055em;
}
.wardrobeHero p{
  margin:0;
  max-width:68em;
  color:#333;
  font-size:13px;
  font-weight:800;
}
.wardrobeUploader{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:10px;
}
.wardrobeUploadDrop{
  min-height:74px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:12px;
  padding:12px;
  border:2px dashed #09090b;
  border-radius:22px;
  background:#f4f1ea;
  cursor:pointer;
}
.wardrobeUploadDrop input{display:none}
.wardrobeUploadDrop i{grid-row:1 / span 2;font-size:24px}
.wardrobeUploadDrop strong{font-size:16px;line-height:1}
.wardrobeUploadDrop span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#555}
.wardrobePreviewBox{
  min-height:0;
  aspect-ratio:1;
  width:100%;
  max-height:48dvh;
  position:relative;
  display:grid;
  place-items:center;
  border:2px solid #09090b;
  border-radius:24px;
  background:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
  overflow:hidden;
}
.wardrobePreviewBox canvas{width:100%;height:100%;display:block;touch-action:none}
.wardrobePreviewEmpty{
  position:absolute;
  inset:16px;
  display:grid;
  place-items:center;
  text-align:center;
  border:2px solid #09090b;
  border-radius:18px;
  background:rgba(255,255,255,.84);
  font-weight:950;
  color:#333;
}
.wardrobePreviewEmpty[hidden]{display:none}
.wardrobeControls{
  display:grid;
  gap:8px;
}
.wardrobeControls label{
  display:grid;
  gap:5px;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.wardrobeControls input,
.wardrobeControls select{
  width:100%;
  min-height:38px;
  padding:9px 11px;
  border:2px solid #09090b;
  border-radius:14px;
  background:#fff;
  font:inherit;
  font-size:13px;
  font-weight:850;
  text-transform:none;
  letter-spacing:0;
}
.wardrobeRange input{padding:0;min-height:28px}
.wardrobeToolRow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.wardrobeToolRow button,
.wardrobeSaveBtn{
  min-height:40px;
  border:2px solid #09090b!important;
  border-radius:16px!important;
  font-size:12px!important;
  font-weight:950!important;
}
.wardrobeToolRow button.active{background:#09090b!important;color:#fff!important}
.wardrobeSaveBtn{background:#09090b!important;color:#fff!important}
.wardrobeSaved{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:10px;
}
.wardrobeSavedHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.wardrobeSavedHead strong{font-size:18px;line-height:1}
.wardrobeSavedHead small{font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.wardrobeSavedGrid{
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  align-content:start;
  gap:10px;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}
.wardrobeCard .collectionActions{grid-template-columns:1fr 1fr 1fr}
@media (max-width:820px){
  .wardrobePanel{
    width:calc(100vw - 16px);
    max-height:calc(100dvh - 88px);
    padding:12px;
    border-radius:24px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .wardrobeHero h2{font-size:clamp(24px,9vw,38px)}
  .wardrobeHero p{font-size:12px}
  .wardrobeUploader{grid-template-rows:auto auto auto}
  .wardrobePreviewBox{max-height:none}
  .wardrobeToolRow{grid-template-columns:1fr}
  .wardrobeToolRow button,.wardrobeSaveBtn{min-height:42px}
  .wardrobeSaved{min-height:280px}
  .wardrobeSavedGrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;max-height:60dvh}
}

/* =========================================================
   v0.46 — Hotfix fondos normales + paca responsive restaurada
   Quita el lavado global y refuerza los paneles laterales como en v0.44.
   ========================================================= */
.gameScreen.hasGameBg::before{
  filter:none!important;
  transform:none!important;
  opacity:1!important;
}
.gameScreen.hasGameBg::after{
  display:none!important;
  content:none!important;
  background:transparent!important;
}
.gameScreen.hasGameBg .sceneBackdrop{display:none!important;}
.gameScreen.hasGameBg > *{
  position:relative!important;
  z-index:2!important;
}
.gameScreenPaca.hasGameBg .pacaPlayfield,
.gameScreenCritique.hasGameBg .critiquePlayfield{
  background:transparent!important;
}
.gameScreenPaca .pacaDiscardZone,
.gameScreenPaca .pacaKeepZone{
  background:#fff!important;
  color:#09090b!important;
  border:3px solid #09090b!important;
  border-radius:28px!important;
  box-shadow:0 5px 0 #09090b!important;
  opacity:1!important;
}
.gameScreenPaca .pacaDiscardZone.is-drop-active,
.gameScreenPaca .pacaKeepZone.is-drop-active{
  background:#fff!important;
}
.gameScreenPaca .pacaDiscardZone.is-drop-hot{
  background:linear-gradient(180deg,#ffffff 0%,#f3fbff 100%)!important;
  box-shadow:0 5px 0 #09090b,0 0 0 4px rgba(135,221,255,.18),0 0 26px rgba(135,221,255,.34),inset 0 0 18px rgba(135,221,255,.15)!important;
}
.gameScreenPaca .pacaKeepZone.is-drop-hot{
  background:linear-gradient(180deg,#fffefb 0%,#fff9e8 100%)!important;
  box-shadow:0 5px 0 #09090b,0 0 0 4px rgba(255,223,120,.20),0 0 28px rgba(255,215,90,.32),inset 0 0 18px rgba(255,231,150,.17)!important;
}
.gameScreenPaca .pacaStageUnit{
  --paca-stage-scale:1;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate3d(-50%,-50%,0) scale(var(--paca-stage-scale,1))!important;
  transform-origin:center center!important;
}
.gameScreenPaca .pacaBundle[data-open="3"]{
  opacity:.44!important;
  filter:saturate(.98) contrast(1.02)!important;
}
.gameScreenPaca .pacaBundleImg{
  filter:drop-shadow(0 14px 0 rgba(9,9,11,.18)) drop-shadow(0 20px 28px rgba(9,9,11,.18))!important;
}
.gameScreenPaca .savedRail{
  min-height:0!important;
  overflow:auto!important;
}
@media (max-width:720px),(max-height:520px){
  .gameScreenPaca .pacaDiscardZone,
  .gameScreenPaca .pacaKeepZone{
    border-width:2px!important;
    border-radius:16px!important;
    box-shadow:0 4px 0 #09090b!important;
  }
}

/* =========================================================
   v0.47 — Hotfix real de layout con fondos
   El bug era que hasGameBg convertía hijos absolutos en relative.
   Restauramos posiciones absolutas originales y el grid completo de paca.
   ========================================================= */
.gameScreen.hasGameBg > .gameTopStrip{
  position:absolute!important;
  z-index:10!important;
}
.gameScreenLobby.hasGameBg > .gameCenterPanel,
.gameScreenCollection.hasGameBg > .collectionPanel,
.gameScreenGallery.hasGameBg > .simpleGamePanel,
.gameScreenRanking.hasGameBg > .simpleGamePanel{
  position:absolute!important;
  z-index:2!important;
}
.gameScreenPaca.hasGameBg > .pacaPlayfield,
.gameScreenCritique.hasGameBg > .critiquePlayfield{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  min-height:0!important;
  height:auto!important;
  align-content:stretch!important;
  align-items:stretch!important;
  grid-template-rows:minmax(0,1fr)!important;
  grid-auto-rows:minmax(0,1fr)!important;
}
.gameScreenPaca.hasGameBg > .pacaPlayfield{
  padding:86px 18px 20px!important;
  grid-template-columns:minmax(90px,18vw) minmax(0,1fr) minmax(112px,20vw)!important;
  gap:16px!important;
}
.gameScreenPaca.hasGameBg .pacaDiscardZone,
.gameScreenPaca.hasGameBg .pacaCenter,
.gameScreenPaca.hasGameBg .pacaKeepZone{
  align-self:stretch!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}
.gameScreenPaca.hasGameBg .pacaCenter{
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  padding:0!important;
}
.gameScreenPaca.hasGameBg .pacaStageUnit{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate3d(-50%,-50%,0) scale(var(--paca-stage-scale,1))!important;
  transform-origin:center center!important;
}
.gameScreenPaca.hasGameBg .pacaKeepZone{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  padding:16px 10px!important;
}
.gameScreenPaca.hasGameBg .savedRail{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:auto!important;
}
.gameScreenPaca.hasGameBg .designWithSaved{
  flex:0 0 auto!important;
  margin-top:auto!important;
}
@media (max-width:720px){
  .gameScreenPaca.hasGameBg > .pacaPlayfield{
    padding:calc(64px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom))!important;
    grid-template-columns:38px minmax(0,1fr) 58px!important;
    gap:6px!important;
  }
  .gameScreenPaca.hasGameBg .pacaKeepZone{
    padding:8px 4px!important;
  }
}
@media (min-width:721px) and (max-width:1100px){
  .gameScreenPaca.hasGameBg > .pacaPlayfield{
    padding:82px 14px 18px!important;
    grid-template-columns:76px minmax(0,1fr) 124px!important;
    gap:10px!important;
  }
}
@media (max-height:620px){
  .gameScreenPaca.hasGameBg > .pacaPlayfield{
    padding-top:calc(62px + env(safe-area-inset-top))!important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }
}
@media (max-height:500px){
  .gameScreenPaca.hasGameBg > .pacaPlayfield{
    padding-top:calc(54px + env(safe-area-inset-top))!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
  }
}
@media (max-height:440px){
  .gameScreenPaca.hasGameBg > .pacaPlayfield{
    padding-top:calc(48px + env(safe-area-inset-top))!important;
    grid-template-columns:clamp(54px,10vw,120px) minmax(0,1fr) clamp(72px,13vw,150px)!important;
    gap:8px!important;
  }
}

/* =========================================================
   v0.48 — Top title true center
   Paca y Crítica: el título queda centrado respecto al viewport,
   no respecto al espacio entre botones laterales.
   ========================================================= */
.gameScreenPaca .gameTopTitle,
.gameScreenCritique .gameTopTitle{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  justify-self:auto!important;
  width:max-content!important;
  max-width:min(54vw,440px)!important;
  text-align:center!important;
  z-index:1!important;
  pointer-events:none!important;
}
.gameScreenPaca .gameTopTitle strong,
.gameScreenCritique .gameTopTitle strong,
.gameScreenPaca .gameTopTitle small,
.gameScreenCritique .gameTopTitle small{
  pointer-events:none!important;
}
.gameScreenPaca .gameBack,
.gameScreenCritique .gameBack,
.gameScreenPaca .gameTopActions,
.gameScreenCritique .gameTopActions{
  position:relative!important;
  z-index:2!important;
}
@media (max-width:720px){
  .gameScreenPaca .gameTopTitle,
  .gameScreenCritique .gameTopTitle{
    max-width:46vw!important;
  }
  .gameScreenPaca .gameTopTitle strong,
  .gameScreenCritique .gameTopTitle strong{
    padding-left:11px!important;
    padding-right:11px!important;
  }
  .gameScreenPaca .gameTopTitle small,
  .gameScreenCritique .gameTopTitle small{
    max-width:44vw!important;
  }
}
@media (max-width:420px){
  .gameScreenPaca .gameTopTitle,
  .gameScreenCritique .gameTopTitle{
    max-width:42vw!important;
  }
  .gameScreenPaca .gameTopTitle small,
  .gameScreenCritique .gameTopTitle small{
    max-width:40vw!important;
  }
}

/* =========================================================
   v0.50 — Guardar look / tarjetas coleccionables / crítica
   ========================================================= */
.gameScreenSaveLook .gameTopStrip,
.gameScreenGallery .gameTopStrip{
  left:0!important;right:0!important;width:100%!important;
}
.saveLookPanel,
.savedLooksPanel{
  position:absolute;
  inset:0;
  padding:calc(92px + env(safe-area-inset-top)) clamp(16px,4vw,54px) calc(24px + env(safe-area-inset-bottom));
  display:grid;
  place-items:center;
  gap:clamp(16px,3vw,34px);
  overflow:auto;
}
.saveLookPanel{
  grid-template-columns:minmax(220px,360px) minmax(260px,480px);
  align-content:center;
  justify-content:center;
}
.lookCollectibleCard{
  width:min(34vw,360px);
  min-width:250px;
  aspect-ratio:.72;
  background:#fff;
  color:#09090b;
  border:4px solid #09090b;
  border-radius:34px;
  box-shadow:0 14px 0 #09090b,0 0 42px rgba(255,255,255,.34);
  padding:16px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:12px;
  position:relative;
  overflow:hidden;
}
.lookCollectibleCard::before{
  content:'';
  position:absolute;
  inset:-35%;
  background:radial-gradient(circle at 20% 20%,rgba(255,235,132,.34),transparent 24%),radial-gradient(circle at 82% 12%,rgba(255,129,226,.22),transparent 20%),radial-gradient(circle at 50% 88%,rgba(118,221,255,.20),transparent 22%);
  pointer-events:none;
}
.lookCardTop,.lookCardBody{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px}
.lookCardNumber,.lookCardStatus{
  border:2px solid #09090b;
  border-radius:999px;
  padding:5px 9px;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#fff;
}
.lookCardStatus{background:#09090b;color:#fff}
.lookCardMedia{
  position:relative;
  z-index:1;
  min-height:0;
  border:3px solid #09090b;
  border-radius:24px;
  background:#f4f1ea;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.lookCardMedia img{width:100%;height:100%;object-fit:cover;display:block}
.lookCardBody{align-items:flex-start;flex-direction:column;justify-content:center}
.lookCardBody strong{font-size:clamp(18px,2.2vw,28px);line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.lookCardBody span{font-size:11px;font-weight:900;color:#555;text-transform:uppercase;letter-spacing:.08em}
.saveLookControls{
  width:min(100%,480px);
  background:rgba(255,255,255,.92);
  color:#09090b;
  border:3px solid #09090b;
  border-radius:30px;
  box-shadow:0 10px 0 #09090b;
  padding:clamp(16px,2.4vw,26px);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.saveLookControls h2{margin:0;font-size:clamp(24px,3.4vw,44px);line-height:.9;letter-spacing:-.07em;text-transform:uppercase}
.saveLookControls p{margin:0;color:#555;font-weight:800}
.saveLookName{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.saveLookName input{
  border:3px solid #09090b;
  border-radius:16px;
  padding:12px 14px;
  font-size:18px;
  font-weight:900;
  color:#09090b;
  background:#fff;
  outline:none;
}
.lookMoodChips,.saveLookActions,.saveLookNext{display:flex;gap:8px;flex-wrap:wrap}
.lookMoodChips button,
.saveLookActions button,
.saveLookNext button{
  min-height:42px;
  border:3px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-weight:950;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.lookMoodChips button.active,
.saveLookActions .primarySave{
  background:#09090b;
  color:#fff;
}
.saveLookNext{
  border-top:2px solid rgba(0,0,0,.12);
  padding-top:12px;
}
.savedLooksPanel{
  place-items:stretch;
  align-content:start;
}
.savedLooksHero{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}
.savedLooksHero h2{margin:0;font-size:clamp(36px,6vw,72px);letter-spacing:-.08em;line-height:.82;text-transform:uppercase}
.savedLooksHero p{font-weight:850;max-width:560px;margin:12px auto 0}
.savedLooksGrid{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}
.savedLookCard{
  background:#fff;
  color:#09090b;
  border:3px solid #09090b;
  border-radius:28px;
  box-shadow:0 9px 0 #09090b;
  padding:12px;
  display:grid;
  gap:10px;
}
.savedLookCard[data-status="published"]{
  box-shadow:0 9px 0 #09090b,0 0 30px rgba(255,218,95,.28);
}
.savedLookMedia{aspect-ratio:.75;border:3px solid #09090b;border-radius:20px;background:#f4f1ea;overflow:hidden;display:grid;place-items:center}
.savedLookMedia img{width:100%;height:100%;object-fit:cover;display:block}
.savedLookInfo{display:grid;gap:3px}
.savedLookInfo span,.savedLookInfo small{font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#555}
.savedLookInfo strong{font-size:18px;line-height:.95;text-transform:uppercase;letter-spacing:-.04em}
.savedLookActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.savedLookActions button{
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  min-height:36px;
  font-weight:950;
}
.savedLookActions button:first-child{background:#09090b;color:#fff}
.publishedLookVote .publishedLookFrame{
  width:92%;
  flex:1 1 auto;
  min-height:0;
  border:3px solid #09090b;
  border-radius:24px;
  overflow:hidden;
  background:#f4f1ea;
  display:grid;
  place-items:center;
}
.publishedLookVote .publishedLookFrame img{width:100%;height:100%;object-fit:cover;display:block}
.publishActions #finalizeLookBtn{background:#09090b;color:#fff}
.publishActions #savePNG{background:#fff;color:#09090b}
@media (max-width:760px){
  .saveLookPanel{grid-template-columns:1fr;align-content:start;padding-top:calc(78px + env(safe-area-inset-top));}
  .lookCollectibleCard{width:min(74vw,310px);min-width:0;box-shadow:0 8px 0 #09090b;border-radius:26px;padding:12px;gap:9px}
  .saveLookControls{border-radius:24px;box-shadow:0 7px 0 #09090b;padding:14px}
  .saveLookActions button,.saveLookNext button{flex:1 1 140px}
  .savedLooksGrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .savedLookCard{border-radius:22px;padding:9px;box-shadow:0 6px 0 #09090b}
}
@media (max-height:620px) and (min-width:761px){
  .saveLookPanel{grid-template-columns:minmax(180px,280px) minmax(260px,420px);padding-top:64px;padding-bottom:14px}
  .lookCollectibleCard{width:min(28vw,280px);min-width:210px;box-shadow:0 8px 0 #09090b;padding:12px;border-radius:26px}
  .saveLookControls{padding:14px;gap:10px;box-shadow:0 7px 0 #09090b}
  .saveLookControls h2{font-size:30px}
  .lookMoodChips button,.saveLookActions button,.saveLookNext button{min-height:36px;padding:7px 11px;font-size:12px}
}


/* =========================================================
   v0.51 — Tarjetas cuadradas centradas + Mis looks estándar
   ========================================================= */
.lookCardMedia{
  aspect-ratio:1 / 1!important;
  min-height:0!important;
  width:100%!important;
  align-self:center!important;
}
.lookCardMedia img,
.savedLookMedia img,
.publishedLookVote .publishedLookFrame img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
.savedLooksPanel{
  overflow:auto!important;
  align-content:start!important;
  place-items:start center!important;
}
.savedLooksGrid{
  grid-template-columns:repeat(auto-fill,minmax(190px,220px))!important;
  justify-content:center!important;
  align-items:start!important;
  overflow:visible!important;
}
.savedLookCard{
  width:100%!important;
  max-width:220px!important;
  justify-self:center!important;
}
.savedLookMedia{
  aspect-ratio:1 / 1!important;
}
.publishedLookVote .publishedLookFrame{
  aspect-ratio:1 / 1!important;
  flex:0 0 auto!important;
  min-height:0!important;
}
@media (max-width:760px){
  .savedLooksGrid{
    grid-template-columns:repeat(auto-fill,minmax(140px,164px))!important;
    gap:12px!important;
  }
  .savedLookCard{max-width:164px!important;}
}
@media (max-height:620px) and (min-width:761px){
  .savedLooksGrid{
    grid-template-columns:repeat(auto-fill,minmax(160px,190px))!important;
  }
  .savedLookCard{max-width:190px!important;}
}

/* =========================================================
   v0.52 — PACAMOR Sound toggle independiente
   ========================================================= */
.lookSoundToggle{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:2600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:9px 13px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-size:12px;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 4px 0 #09090b,0 0 18px rgba(255,255,255,.28);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease,background .16s ease;
}
.lookSoundToggle:hover{transform:translateY(-1px);box-shadow:0 5px 0 #09090b,0 0 24px rgba(255,214,104,.28)}
.lookSoundToggle.is-muted{background:#09090b;color:#fff;border-color:#fff;box-shadow:0 4px 0 rgba(255,255,255,.72),0 0 14px rgba(0,0,0,.24)}
.lookSoundToggle span{line-height:1}
@media(max-width:720px){
  .lookSoundToggle{right:10px;bottom:10px;min-height:34px;padding:8px 10px;font-size:11px}
  .lookSoundToggle span{display:none}
}
body:not(.game-layer-open) .lookSoundToggle{opacity:.72}

/* =========================================================
   v0.54 — PACAMOR Radio global compacta
   ========================================================= */
.lookRadioLobbyBtn{
  position:relative;
}
.lookRadioLobbyBtn.is-playing::after{
  content:'';
  position:absolute;
  right:8px;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffcf33;
  box-shadow:0 0 0 2px #09090b,0 0 12px rgba(255,207,51,.7);
}
.lookRadioPanel{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(66px + env(safe-area-inset-bottom));
  z-index:6500;
  width:min(360px,calc(100vw - 28px));
  padding:14px;
  border:3px solid #09090b;
  border-radius:28px;
  background:#fff;
  color:#09090b;
  box-shadow:0 8px 0 #09090b,0 18px 44px rgba(0,0,0,.24);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  transform:translateY(18px) scale(.98);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.lookRadioPanel.is-open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}
.lookRadioHead{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:start;
}
.lookRadioHead p{
  margin:0 0 4px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#565656;
}
.lookRadioHead strong{
  display:block;
  font-size:15px;
  line-height:1.12;
  letter-spacing:-.02em;
  max-width:250px;
}
.lookRadioClose,
.lookRadioControls button,
.lookRadioModes button{
  border:2px solid #09090b;
  background:#fff;
  color:#09090b;
  border-radius:999px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 3px 0 #09090b;
  transition:transform .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease;
}
.lookRadioClose:hover,
.lookRadioControls button:hover,
.lookRadioModes button:hover{
  transform:translateY(-1px);
  background:#f4f1ea;
  box-shadow:0 4px 0 #09090b;
}
.lookRadioClose{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
}
.lookRadioMeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  font-size:11px;
  font-weight:850;
  color:#3a3a3a;
}
.lookRadioProgress{
  position:relative;
  height:7px;
  margin:8px 0 12px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#f4f1ea;
  overflow:hidden;
}
.lookRadioProgress span{
  position:absolute;
  inset:0;
  background:#09090b;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .2s linear;
}
.lookRadioControls{
  display:grid;
  grid-template-columns:42px 1fr 42px 42px;
  gap:8px;
  align-items:center;
}
.lookRadioControls button{
  min-height:42px;
  padding:0 10px;
}
.lookRadioControls .primary{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  background:#09090b;
  color:#fff;
}
.lookRadioControls .primary:hover{background:#252529;color:#fff}
.lookRadioModes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.lookRadioModes button{
  min-height:36px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  font-size:12px;
}
.lookRadioModes button.is-active{
  background:#ffcf33;
  color:#09090b;
  box-shadow:0 3px 0 #09090b,0 0 16px rgba(255,207,51,.42);
}
.lookRadioVolume{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:12px;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lookRadioVolume input{
  width:100%;
  accent-color:#09090b;
}
.lookRadioStatus{
  margin:10px 0 0;
  font-size:11px;
  font-weight:800;
  color:#5f5f5f;
}
.lookRadioMini{
  position:fixed;
  left:calc(14px + env(safe-area-inset-left));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:6500;
  max-width:min(330px,calc(100vw - 92px));
  min-height:38px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px 8px 12px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  font-weight:950;
  box-shadow:0 4px 0 #09090b,0 12px 26px rgba(0,0,0,.18);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  cursor:pointer;
  transition:opacity .18s ease,transform .18s ease,box-shadow .16s ease;
}
.lookRadioMini.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.lookRadioMini:hover{box-shadow:0 5px 0 #09090b,0 0 22px rgba(255,207,51,.26)}
.lookRadioMini span{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lookRadioMini b{
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#09090b;
  color:#fff;
  font-size:11px;
}
.look-radio-open .lookRadioMini{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
}
@media(max-width:720px){
  .lookRadioPanel{
    left:10px;
    right:10px;
    bottom:calc(58px + env(safe-area-inset-bottom));
    width:auto;
    padding:12px;
    border-radius:24px;
    box-shadow:0 6px 0 #09090b,0 16px 34px rgba(0,0,0,.24);
  }
  .lookRadioHead strong{font-size:14px;max-width:calc(100vw - 104px)}
  .lookRadioControls{grid-template-columns:40px 1fr 40px 40px;gap:7px}
  .lookRadioControls button{min-height:40px}
  .lookRadioModes button{min-height:34px;font-size:11px}
  .lookRadioVolume{margin-top:10px}
  .lookRadioMini{
    left:10px;
    bottom:10px;
    min-height:34px;
    max-width:calc(100vw - 70px);
    font-size:11px;
    padding:7px 8px 7px 10px;
  }
  .lookRadioMini b{width:24px;height:24px}
}
@media(min-width:721px){
  body:not(.game-layer-open) .lookRadioPanel{bottom:18px}
}

/* PACAMOR v0.55 — Radio global más discreta: mini wheel movible */
.lookRadioWheel{
  position:fixed;
  left:calc(14px + env(safe-area-inset-left));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:6500;
  width:46px;
  height:46px;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px) scale(.96);
  transition:opacity .18s ease,transform .18s ease;
  touch-action:none;
}
.lookRadioWheel.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.lookRadioWheel.is-dragging{z-index:6700;}
.lookRadioWheel .lookRadioMini{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  min-height:46px!important;
  max-width:46px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid #09090b!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#09090b!important;
  box-shadow:0 4px 0 #09090b,0 10px 22px rgba(0,0,0,.18)!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate(-50%,-50%) scale(1)!important;
  cursor:grab!important;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease!important;
}
.lookRadioWheel .lookRadioMini:hover,
.lookRadioWheel .lookRadioMini:focus-visible{
  transform:translate(-50%,-50%) scale(1.06)!important;
  box-shadow:0 5px 0 #09090b,0 0 18px rgba(255,207,51,.32)!important;
}
.lookRadioWheel .lookRadioMini:active{cursor:grabbing!important;transform:translate(-50%,-50%) scale(.98)!important;}
.lookRadioWheel.is-open .lookRadioMini{background:#09090b!important;color:#fff!important;}
.lookRadioWheel .lookRadioMini > i{font-size:16px;line-height:1;}
.lookRadioWheel .lookRadioMini span{
  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;
}
.lookRadioWheel .lookRadioMini b{
  position:absolute!important;
  right:-5px!important;
  top:-5px!important;
  width:21px!important;
  height:21px!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid #09090b!important;
  border-radius:999px!important;
  background:#ffcf33!important;
  color:#09090b!important;
  font-size:9px!important;
  box-shadow:none!important;
}
.lookRadioWheelBtn{
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  box-shadow:0 3px 0 #09090b,0 8px 18px rgba(0,0,0,.14);
  font-size:13px;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.35);
  transition:opacity .16s ease,transform .18s ease,background .14s ease,color .14s ease,box-shadow .14s ease;
  cursor:pointer;
}
.lookRadioWheelBtn:hover,
.lookRadioWheelBtn:focus-visible{
  background:#f4f1ea;
  transform:translate(calc(-50% + var(--radio-x,0px)),calc(-50% + var(--radio-y,0px))) scale(1.08)!important;
}
.lookRadioWheel.is-open .lookRadioWheelBtn{
  opacity:1;
  pointer-events:auto;
  transform:translate(calc(-50% + var(--radio-x,0px)),calc(-50% + var(--radio-y,0px))) scale(1);
}
.lookRadioWheelBtnPlay{--radio-x:0px;--radio-y:-58px;background:#09090b;color:#fff;}
.lookRadioWheelBtnPlay:hover{background:#252529;color:#fff;}
.lookRadioWheelBtnPrev{--radio-x:-50px;--radio-y:-32px;}
.lookRadioWheelBtnNext{--radio-x:50px;--radio-y:-32px;}
.lookRadioWheelBtnPanel{--radio-x:0px;--radio-y:-106px;background:#ffcf33;color:#09090b;}
.look-radio-open .lookRadioWheel{opacity:0!important;pointer-events:none!important;transform:translateY(8px) scale(.96)!important;}
@media(max-width:720px){
  .lookRadioWheel{
    left:calc(10px + env(safe-area-inset-left));
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:42px;
    height:42px;
  }
  .lookRadioWheel .lookRadioMini{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .lookRadioWheelBtn{width:35px;height:35px;min-height:35px;font-size:12px;}
  .lookRadioWheelBtnPlay{--radio-y:-52px;}
  .lookRadioWheelBtnPrev{--radio-x:-45px;--radio-y:-30px;}
  .lookRadioWheelBtnNext{--radio-x:45px;--radio-y:-30px;}
  .lookRadioWheelBtnPanel{--radio-y:-96px;}
}

/* =========================================================
   v0.56 — SFX más presentes + panel compacto de volumen
   ========================================================= */
.lookSoundToggle{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  right:calc(14px + env(safe-area-inset-right))!important;
  bottom:calc(14px + env(safe-area-inset-bottom))!important;
  z-index:6600!important;
  gap:0!important;
  border-radius:999px!important;
  box-shadow:0 4px 0 #09090b,0 10px 22px rgba(0,0,0,.16)!important;
}
.lookSoundToggle i{font-size:15px;line-height:1;}
.lookSoundToggle span{
  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;
}
.lookSoundToggle::after{
  content:'SFX';
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  min-width:28px;
  height:16px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#ffcf33;
  color:#09090b;
  font-size:8px;
  font-weight:950;
  letter-spacing:.02em;
  line-height:1;
  box-shadow:0 2px 0 #09090b;
}
.lookSoundToggle.is-muted::after{content:'OFF';background:#fff;color:#09090b;border-color:#fff;box-shadow:0 2px 0 rgba(255,255,255,.58)}
.lookSoundToggle.is-open{background:#09090b!important;color:#fff!important;box-shadow:0 4px 0 #ffcf33,0 0 22px rgba(255,207,51,.26)!important;}
.lookSoundPanel{
  position:fixed;
  right:calc(12px + env(safe-area-inset-right));
  bottom:calc(68px + env(safe-area-inset-bottom));
  z-index:6590;
  width:min(260px,calc(100vw - 24px));
  padding:12px;
  border:3px solid #09090b;
  border-radius:24px;
  background:#fff;
  color:#09090b;
  box-shadow:0 6px 0 #09090b,0 18px 36px rgba(0,0,0,.24);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.98);
  transition:opacity .16s ease,transform .16s ease;
}
.lookSoundPanel.is-open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.lookSoundPanelHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.lookSoundPanelHead strong{font-size:13px;font-weight:1000;letter-spacing:.02em;}
.lookSoundPanelClose{
  width:30px;
  height:30px;
  min-height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  box-shadow:0 2px 0 #09090b;
  cursor:pointer;
}
.lookSoundMuteBtn,.lookSoundPreviewBtn{
  width:100%;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#09090b;
  color:#fff;
  font-size:12px;
  font-weight:950;
  box-shadow:0 3px 0 #09090b;
  cursor:pointer;
}
.lookSoundMuteBtn.is-muted{background:#fff;color:#09090b;}
.lookSoundVolumeControl{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 10px;
  align-items:center;
  margin:12px 0 10px;
  padding:10px;
  border:2px solid #09090b;
  border-radius:18px;
  background:#f4f1ea;
}
.lookSoundVolumeControl span{font-size:11px;font-weight:950;letter-spacing:.02em;}
.lookSoundVolumeControl b{font-size:11px;font-weight:1000;}
.lookSoundVolumeControl input{
  grid-column:1 / -1;
  width:100%;
  accent-color:#09090b;
}
.lookSoundPreviewBtn{background:#ffcf33;color:#09090b;}
@media(max-width:720px){
  .lookSoundToggle{
    right:10px!important;
    bottom:10px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .lookSoundPanel{
    right:10px;
    left:10px;
    bottom:calc(62px + env(safe-area-inset-bottom));
    width:auto;
    border-radius:22px;
  }
}


/* =========================================================
   v0.57 — Player local + SFX solo en lobby
   ========================================================= */
body:not([data-look-screen="lobby"]) .lookSoundToggle{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(8px) scale(.88)!important;
}
body:not([data-look-screen="lobby"]) .lookSoundPanel{
  opacity:0!important;
  pointer-events:none!important;
  transform:translateY(12px) scale(.96)!important;
}
.lookPlayerLobbyBtn{
  position:relative;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}
.lookPlayerLobbyBtn b{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:2px solid #09090b;
  border-radius:999px;
  background:#ffcf33;
  color:#09090b;
  font-size:11px;
  line-height:1;
  box-shadow:0 2px 0 #09090b;
}
.lookPlayerPanel{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right));
  top:calc(14px + env(safe-area-inset-top));
  z-index:6650;
  width:min(360px,calc(100vw - 28px));
  padding:14px;
  border:3px solid #09090b;
  border-radius:28px;
  background:#fff;
  color:#09090b;
  box-shadow:0 8px 0 #09090b,0 20px 46px rgba(0,0,0,.26);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px) scale(.98);
  visibility:hidden;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.lookPlayerPanel.is-open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  visibility:visible;
}
.lookPlayerHead{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:start;
}
.lookPlayerHead p{
  margin:0 0 4px;
  font-size:10px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#555;
}
.lookPlayerHead strong{
  display:block;
  margin:0;
  font-size:18px;
  line-height:.98;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.lookPlayerHead button,
.lookPlayerAvatar,
.lookPlayerActions button{
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-weight:950;
  box-shadow:0 3px 0 #09090b;
  cursor:pointer;
}
.lookPlayerHead button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
}
.lookPlayerIdentity{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:10px;
  align-items:center;
  margin-top:14px;
}
.lookPlayerAvatar{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  padding:0;
  background:#ffcf33;
  font-size:24px;
  box-shadow:0 4px 0 #09090b,0 0 20px rgba(255,207,51,.28);
}
.lookPlayerIdentity label{
  display:grid;
  gap:6px;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lookPlayerIdentity input{
  width:100%;
  min-height:42px;
  border:2px solid #09090b;
  border-radius:16px;
  padding:0 12px;
  background:#f4f1ea;
  color:#09090b;
  font-size:15px;
  font-weight:900;
  outline:none;
}
.lookPlayerIdentity input:focus{box-shadow:0 0 0 3px rgba(255,207,51,.36)}
.lookPlayerStatus{
  display:grid;
  gap:3px;
  margin-top:12px;
  padding:10px 12px;
  border:2px solid #09090b;
  border-radius:18px;
  background:#f4f1ea;
}
.lookPlayerStatus strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lookPlayerStatus small{
  color:#555;
  font-size:11px;
  font-weight:850;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lookPlayerStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
}
.lookPlayerStats span{
  display:grid;
  place-items:center;
  gap:2px;
  min-height:58px;
  border:2px solid #09090b;
  border-radius:18px;
  background:#fff;
  box-shadow:0 3px 0 #09090b;
}
.lookPlayerStats strong{
  font-size:22px;
  line-height:.9;
  letter-spacing:-.05em;
}
.lookPlayerStats small{
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#555;
}
.lookPlayerActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.lookPlayerActions button{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  font-size:12px;
}
.lookPlayerActions button.primary{
  background:#09090b;
  color:#fff;
}
.lookPlayerSyncNote{
  margin:11px 0 0;
  color:#4e4e4e;
  font-size:11px;
  line-height:1.28;
  font-weight:800;
}
.lookPlayerToast{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:6900;
  transform:translate(-50%,10px);
  padding:10px 14px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  box-shadow:0 4px 0 #09090b,0 16px 30px rgba(0,0,0,.22);
  font-size:12px;
  font-weight:950;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.lookPlayerToast.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}
@media(max-width:720px){
  .lookPlayerPanel{
    left:10px;
    right:10px;
    top:calc(10px + env(safe-area-inset-top));
    width:auto;
    padding:12px;
    border-radius:24px;
    box-shadow:0 6px 0 #09090b,0 18px 38px rgba(0,0,0,.24);
  }
  .lookPlayerHead strong{font-size:16px}
  .lookPlayerIdentity{grid-template-columns:52px 1fr;gap:9px}
  .lookPlayerAvatar{width:52px;height:52px;font-size:22px}
  .lookPlayerActions{grid-template-columns:1fr;}
  .lookPlayerStats span{min-height:52px}
}

/* =========================================================
   v0.57b — Scroll real en Guardar look / Galería / Mis tarjetas
   La colección ya tenía scroll interno correcto; estas pantallas ahora
   usan scroll del screen para que en teléfono nunca queden botones cortados.
   ========================================================= */
.gameScreenSaveLook.active,
.gameScreenGallery.active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
}
.gameScreenSaveLook .saveLookPanel,
.gameScreenGallery .savedLooksPanel{
  position:relative!important;
  inset:auto!important;
  min-height:100dvh!important;
  height:auto!important;
  overflow:visible!important;
  box-sizing:border-box!important;
  padding-top:calc(86px + env(safe-area-inset-top))!important;
  padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
}
.gameScreenSaveLook .saveLookPanel{
  display:grid!important;
  grid-template-columns:minmax(220px,340px) minmax(280px,480px)!important;
  align-content:center!important;
  align-items:center!important;
  justify-content:center!important;
  justify-items:center!important;
  gap:clamp(14px,3vw,32px)!important;
}
.gameScreenSaveLook .lookCollectibleCard{
  width:min(32vw,330px)!important;
  min-width:220px!important;
  max-width:330px!important;
}
.gameScreenSaveLook .saveLookControls{
  max-width:480px!important;
}
.gameScreenGallery .savedLooksPanel{
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-content:start!important;
  align-items:start!important;
  justify-content:center!important;
  justify-items:center!important;
  gap:16px!important;
  place-items:start center!important;
}
.gameScreenGallery .savedLooksHero{
  width:min(760px,100%)!important;
  margin:0 auto!important;
}
.gameScreenGallery .savedLooksGrid{
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  overflow:visible!important;
  padding-bottom:16px!important;
}
@media (max-width:760px){
  .gameScreenSaveLook .saveLookPanel,
  .gameScreenGallery .savedLooksPanel{
    min-height:100dvh!important;
    padding-left:12px!important;
    padding-right:12px!important;
    padding-top:calc(68px + env(safe-area-inset-top))!important;
    padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;
  }
  .gameScreenSaveLook .saveLookPanel{
    grid-template-columns:1fr!important;
    align-content:start!important;
    align-items:start!important;
    justify-content:center!important;
    justify-items:center!important;
    gap:14px!important;
  }
  .gameScreenSaveLook .lookCollectibleCard{
    width:min(82vw,286px)!important;
    min-width:0!important;
    max-width:286px!important;
    border-radius:24px!important;
  }
  .gameScreenSaveLook .saveLookControls{
    width:min(100%,430px)!important;
    max-width:430px!important;
    margin-bottom:10px!important;
  }
  .gameScreenGallery .savedLooksHero h2{
    font-size:clamp(30px,12vw,48px)!important;
  }
  .gameScreenGallery .savedLooksHero p{
    font-size:13px!important;
    margin-top:8px!important;
  }
  .gameScreenGallery .savedLooksGrid{
    grid-template-columns:repeat(auto-fill,minmax(146px,168px))!important;
    justify-content:center!important;
    align-items:start!important;
    gap:12px!important;
  }
  .gameScreenGallery .savedLookCard{
    width:100%!important;
    max-width:168px!important;
    justify-self:center!important;
  }
}
@media (max-height:620px) and (min-width:761px){
  .gameScreenSaveLook .saveLookPanel,
  .gameScreenGallery .savedLooksPanel{
    align-content:start!important;
    padding-top:calc(64px + env(safe-area-inset-top))!important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
  }
  .gameScreenSaveLook .lookCollectibleCard{
    width:min(28vw,280px)!important;
    max-width:280px!important;
  }
}

/* =========================================================
   v0.58 — Scroll sobre fondos fijos + crítica detallada
   El fondo permanece fijo y solo se mueve el contenido útil.
   ========================================================= */
.gameScreen.hasGameBg::before{
  position:fixed!important;
  inset:0!important;
  transform:none!important;
  background-attachment:scroll!important;
}
.gameScreen.active.hasGameBg{
  background:#0a0a0a!important;
}
.gameScreenSaveLook.active,
.gameScreenGallery.active,
.gameScreenRanking.active,
.gameScreenCritiqueDetail.active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
}
.gameScreenSaveLook.active::before,
.gameScreenGallery.active::before,
.gameScreenRanking.active::before,
.gameScreenCritiqueDetail.active::before{
  position:fixed!important;
}
.gameScreenRanking .rankingPanel{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  margin:calc(92px + env(safe-area-inset-top)) auto calc(96px + env(safe-area-inset-bottom))!important;
  width:min(92vw,780px)!important;
  max-width:780px!important;
  max-height:none!important;
  text-align:left!important;
}
.gameScreenRanking .rankingPanel h2,
.gameScreenRanking .rankingPanel p{
  text-align:center!important;
}
.rankingStartBtn{
  margin:4px auto 0;
  min-height:42px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
}
.rankingList{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.rankingCard{
  display:grid;
  grid-template-columns:auto 64px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  border:2px solid #09090b;
  border-radius:22px;
  background:#fff;
  padding:10px;
}
.rankingPlace{
  width:42px;
  height:42px;
  border:2px solid #09090b;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:950;
  background:#f4f1ea;
}
.rankingThumb{
  width:64px;
  aspect-ratio:1;
  border:2px solid #09090b;
  border-radius:16px;
  background:#f4f1ea;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.rankingThumb img{width:100%;height:100%;object-fit:contain;display:block}
.rankingThumb i{font-size:22px}
.rankingCard strong{display:block;font-size:16px;line-height:.95;text-transform:uppercase;letter-spacing:-.04em}
.rankingCard small{display:block;margin-top:4px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:#555}
.rankingCard b{
  min-width:46px;
  padding:8px 10px;
  border-radius:999px;
  background:#09090b;
  color:#fff;
  text-align:center;
}
.critiqueDetailCta{
  width:100%;
  margin-top:auto;
  padding:10px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:3px solid #09090b!important;
  background:#09090b!important;
  color:#fff!important;
  font-weight:950;
}
.critiqueDetailCta[hidden]{display:none!important}
.critiqueDetailPanel{
  position:relative!important;
  z-index:2!important;
  min-height:100dvh;
  padding:calc(92px + env(safe-area-inset-top)) clamp(14px,4vw,54px) calc(96px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:minmax(220px,340px) minmax(280px,500px);
  align-content:center;
  align-items:center;
  justify-content:center;
  justify-items:center;
  gap:clamp(14px,3vw,34px);
}
.detailLookCard,
.detailScorePanel{
  background:rgba(255,255,255,.95);
  color:#09090b;
  border:3px solid #09090b;
  box-shadow:0 10px 0 #09090b;
}
.detailLookCard{
  width:min(32vw,330px);
  min-width:220px;
  max-width:330px;
  border-radius:32px;
  padding:14px;
  display:grid;
  gap:12px;
}
.detailLookMedia{
  aspect-ratio:1/1;
  border:3px solid #09090b;
  border-radius:24px;
  background:#f4f1ea;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.detailLookMedia > img{width:100%;height:100%;object-fit:contain;display:block}
.detailPieceGrid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
  padding:8px;
}
.detailPieceGrid span{
  border:2px solid #09090b;
  border-radius:16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
}
.detailPieceGrid img{max-width:96%;max-height:96%;object-fit:contain}
.detailDoneIcon{
  width:82px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:3px solid #09090b;
  border-radius:999px;
  background:#09090b;
  color:#fff;
  font-size:32px;
}
.detailLookInfo{display:grid;gap:4px}
.detailLookInfo span,
.detailLookInfo small{font-size:10px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:#555}
.detailLookInfo strong{font-size:clamp(20px,2.2vw,28px);line-height:.9;text-transform:uppercase;letter-spacing:-.05em}
.detailScorePanel{
  width:min(100%,500px);
  border-radius:30px;
  padding:clamp(16px,2.4vw,26px);
  display:grid;
  gap:14px;
}
.detailScorePanel h2{margin:0;font-size:clamp(24px,3.2vw,42px);line-height:.9;letter-spacing:-.07em;text-transform:uppercase}
.detailScoreRows{display:grid;gap:10px}
.detailScoreRow{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.detailScoreRow > span{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}
.detailScoreButtons{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.detailScoreButtons button{
  min-height:38px;
  border:2px solid #09090b!important;
  background:#fff!important;
  color:#09090b!important;
  font-weight:950;
  padding:0;
}
.detailScoreButtons button.active{
  background:#09090b!important;
  color:#fff!important;
}
.detailComment{
  display:grid;
  gap:7px;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.detailComment textarea{
  width:100%;
  resize:vertical;
  min-height:74px;
  max-height:140px;
  border:3px solid #09090b;
  border-radius:18px;
  background:#fff;
  color:#09090b;
  padding:10px 12px;
  font:800 14px/1.25 Inter,ui-sans-serif,system-ui;
  outline:none;
}
.detailActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detailActions button{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:3px solid #09090b!important;
  font-weight:950;
}
.detailActions .primaryDetail{background:#09090b!important;color:#fff!important}
@media (max-width:760px){
  .gameScreenRanking .rankingPanel{
    margin-top:calc(72px + env(safe-area-inset-top))!important;
    margin-bottom:calc(118px + env(safe-area-inset-bottom))!important;
    width:calc(100vw - 24px)!important;
    padding:18px!important;
    border-radius:26px!important;
  }
  .rankingCard{grid-template-columns:auto 54px minmax(0,1fr);gap:9px;border-radius:18px}
  .rankingCard b{grid-column:2 / 4;justify-self:start}
  .rankingThumb{width:54px;border-radius:14px}
  .critiqueDetailPanel{
    grid-template-columns:1fr;
    min-height:100dvh;
    align-content:start;
    align-items:start;
    padding:calc(70px + env(safe-area-inset-top)) 12px calc(118px + env(safe-area-inset-bottom));
    gap:14px;
  }
  .detailLookCard{
    width:min(82vw,286px);
    min-width:0;
    max-width:286px;
    border-radius:24px;
    box-shadow:0 7px 0 #09090b;
    padding:12px;
  }
  .detailScorePanel{
    width:min(100%,430px);
    border-radius:24px;
    box-shadow:0 7px 0 #09090b;
    padding:14px;
  }
  .detailScoreRow{grid-template-columns:1fr;gap:6px}
  .detailScoreButtons button{min-height:36px}
  .detailActions{grid-template-columns:1fr}
}

/* =========================================================
   v0.59 — Ranking panel center hotfix
   Mantiene el fondo fijo y centra solo el panel de contenido.
   ========================================================= */
.gameScreenRanking.active{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  display:block!important;
}
.gameScreenRanking.active .rankingPanel,
.gameScreenRanking.hasGameBg.active > .rankingPanel,
.gameScreenRanking.hasGameBg.active > .simpleGamePanel.rankingPanel{
  position:relative!important;
  left:50%!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  margin:calc(92px + env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom)) 0!important;
  width:min(92vw,780px)!important;
  max-width:780px!important;
  justify-self:auto!important;
}
@media (max-width:760px){
  .gameScreenRanking.active .rankingPanel,
  .gameScreenRanking.hasGameBg.active > .rankingPanel,
  .gameScreenRanking.hasGameBg.active > .simpleGamePanel.rankingPanel{
    left:50%!important;
    transform:translateX(-50%)!important;
    margin-top:calc(72px + env(safe-area-inset-top))!important;
    margin-bottom:calc(118px + env(safe-area-inset-bottom))!important;
    width:calc(100vw - 24px)!important;
  }
}

/* =========================================================
   v0.62 — Crítica viva + PACAMOR Studio
   Responsividad de crítica basada en la unidad escalable de pacas.
   ========================================================= */
.gameScreenCritique .critiquePlayfield{
  position:absolute!important;
  inset:0!important;
  padding:86px 18px 20px!important;
  display:grid!important;
  grid-template-columns:minmax(92px,18vw) minmax(0,1fr) minmax(124px,20vw)!important;
  gap:16px!important;
  overflow:hidden!important;
}
.gameScreenCritique .critiqueCenter{
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
}
.critiqueStageUnit{
  --critique-stage-scale:1;
  --critique-card-base:340px;
  --critique-gap-base:10px;
  width:max-content!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:var(--critique-gap-base)!important;
  transform:scale(var(--critique-stage-scale))!important;
  transform-origin:center center!important;
  will-change:transform;
}
.critiqueStageUnit > *{flex:0 0 auto!important;}
.critiqueStageUnit .gameMicrocopy{
  width:var(--critique-card-base)!important;
  max-width:var(--critique-card-base)!important;
  min-height:34px;
  display:grid;
  place-items:center;
  padding:0 8px;
  margin:0!important;
  font-size:12px!important;
  line-height:1.18!important;
  color:#09090b!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.critiqueStageUnit .lookVoteSlot,
.critiqueStageUnit .critiqueDecisionButtons{
  width:var(--critique-card-base)!important;
  grid-column:auto!important;
  grid-row:auto!important;
  align-self:center!important;
  justify-self:center!important;
}
.critiqueStageUnit .lookVoteSlot{
  aspect-ratio:.76!important;
}
.critiqueStageUnit .critiqueDecisionButtons{
  gap:8px!important;
}
.critiqueStageUnit .critiqueDecisionButtons button{
  min-height:42px!important;
  padding:8px 10px!important;
  font-size:12px!important;
}
.critiqueStatusLine{
  width:var(--critique-card-base)!important;
  min-height:24px;
  display:grid;
  place-items:center;
  padding:5px 10px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
  text-align:center;
  box-shadow:0 3px 0 #09090b;
}
.gameScreenCritique .voteLookCard{
  border-width:3px!important;
  border-radius:26px!important;
  box-shadow:0 9px 0 #09090b!important;
  padding:12px!important;
  background:rgba(255,255,255,.97)!important;
}
.voteLookBadge{
  position:absolute;
  left:14px;
  top:12px;
  z-index:4;
  padding:5px 9px;
  border:2px solid #09090b;
  border-radius:999px;
  background:#fff;
  color:#09090b;
  font-size:9px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:0 2px 0 #09090b;
}
.voteLookCardDone{
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  gap:12px!important;
}
.voteLookCardDone i{
  width:76px;
  height:76px;
  border-radius:999px;
  background:#09090b;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:30px;
}
.studioVoteCard{
  justify-content:space-between!important;
}
.studioLookPreview{
  position:relative;
  width:92%;
  flex:1 1 auto;
  min-height:0;
  border:3px solid #09090b;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,#f8f6ee,#eee9dc);
  display:block;
  isolation:isolate;
}
.studioMannequin{
  position:absolute;
  inset:8% 30% 7%;
  z-index:0;
  opacity:.55;
  pointer-events:none;
}
.studioMannequin::before{
  content:'';
  position:absolute;
  left:50%;top:0;
  width:26%;aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:999px;
  background:#fefbf0;
  border:2px solid rgba(9,9,11,.18);
}
.studioMannequin i{
  position:absolute;
  left:50%;top:15%;
  width:42%;height:32%;
  transform:translateX(-50%);
  border-radius:42% 42% 32% 32%;
  background:#fefbf0;
  border:2px solid rgba(9,9,11,.16);
}
.studioMannequin b{
  position:absolute;
  left:50%;bottom:0;
  width:34%;height:53%;
  transform:translateX(-50%);
  border-radius:0 0 32px 32px;
  background:#fefbf0;
  border:2px solid rgba(9,9,11,.14);
}
.studioPiece{
  position:absolute;
  z-index:2;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 4px 4px rgba(9,9,11,.12));
}
.studioPiece--hat{left:38%;top:1%;width:24%;height:16%;z-index:7;}
.studioPiece--glasses{left:38%;top:11%;width:24%;height:10%;z-index:8;}
.studioPiece--jewelry{left:61%;top:18%;width:18%;height:18%;z-index:8;}
.studioPiece--neck{left:34%;top:18%;width:32%;height:16%;z-index:7;}
.studioPiece--body{left:30%;top:22%;width:40%;height:52%;z-index:3;}
.studioPiece--top{left:27%;top:22%;width:46%;height:30%;z-index:4;}
.studioPiece--layer{left:22%;top:18%;width:56%;height:42%;z-index:5;}
.studioPiece--waist{left:32%;top:45%;width:36%;height:14%;z-index:7;}
.studioPiece--bottom{left:31%;top:47%;width:38%;height:38%;z-index:3;}
.studioPiece--legs{left:34%;top:50%;width:32%;height:36%;z-index:4;}
.studioPiece--shoes{left:28%;bottom:1%;width:44%;height:17%;z-index:8;}
.studioPiece--bag{right:10%;top:38%;width:28%;height:26%;z-index:8;}
.studioPiece--hands{left:12%;top:38%;width:32%;height:26%;z-index:8;}
.critiqueAcceptHead{
  width:100%;
  display:grid;
  place-items:center;
  gap:5px;
  text-align:center;
}
.critiqueAcceptHead small{
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
  color:#555;
}
.gameScreenCritique .critiqueDetailCta{
  box-shadow:0 4px 0 #09090b!important;
}
.gameScreenCritique .critiqueDetailCta:not([hidden]){
  animation:critiqueDetailPulse 1.45s ease-in-out infinite;
}
@keyframes critiqueDetailPulse{
  0%,100%{transform:translateY(0);filter:none;}
  50%{transform:translateY(-2px);filter:drop-shadow(0 0 9px rgba(255,207,51,.52));}
}
.gameScreenCritique .critiqueZone{
  box-shadow:0 5px 0 #09090b!important;
}
.gameScreenCritique .critiqueZone.pass,
.gameScreenCritique .critiqueZone.accept{
  background:rgba(255,255,255,.96)!important;
  color:#09090b!important;
}
.gameScreenCritique .acceptedRail{
  align-content:start;
}
@media (max-width:720px){
  .gameScreenCritique .gameTopStrip{
    left:10px!important;
    right:10px!important;
    height:46px!important;
    gap:6px!important;
  }
  .gameScreenCritique .gameTopActions{display:flex;gap:5px;}
  .gameScreenCritique .gameTopActions .gameMiniAction{padding:8px 9px!important;font-size:11px!important;}
  .gameScreenCritique .gameTopActions .gameMiniAction span{display:none;}
  .gameScreenCritique .critiquePlayfield{
    padding:70px 8px 12px!important;
    grid-template-columns:48px minmax(0,1fr) 68px!important;
    gap:8px!important;
  }
  .gameScreenCritique .critiqueZone{
    border-width:2px!important;
    border-radius:18px!important;
    font-size:9px!important;
    letter-spacing:.04em!important;
    padding:8px 4px!important;
  }
  .gameScreenCritique .critiqueZone span{writing-mode:vertical-rl;text-orientation:mixed;}
  .gameScreenCritique .critiqueZone i{font-size:16px!important;}
  .critiqueAcceptHead small{display:none;}
  .gameScreenCritique .acceptedRail{
    grid-template-columns:1fr!important;
    gap:5px!important;
    padding:2px!important;
  }
  .gameScreenCritique .acceptedMini{border-radius:10px!important;border-width:1.5px!important;}
  .gameScreenCritique .critiqueDetailCta{
    min-height:40px;
    padding:8px 4px!important;
    font-size:10px!important;
  }
  .gameScreenCritique .critiqueDetailCta span{writing-mode:horizontal-tb!important;}
  .critiqueStageUnit{
    --critique-card-base:300px;
    --critique-gap-base:8px;
  }
  .critiqueStageUnit .gameMicrocopy{font-size:11px!important;min-height:32px;}
  .critiqueStatusLine{font-size:9px;min-height:22px;padding:4px 8px;}
  .gameScreenCritique .voteLookCard{border-radius:22px!important;box-shadow:0 7px 0 #09090b!important;}
  .voteLookBadge{font-size:8px;left:10px;top:9px;padding:4px 7px;}
}
@media (min-width:721px) and (max-width:1100px){
  .gameScreenCritique .critiquePlayfield{
    grid-template-columns:90px minmax(0,1fr) 132px!important;
    gap:12px!important;
  }
  .critiqueStageUnit{--critique-card-base:330px;}
}
@media (max-height:620px) and (orientation:landscape){
  .gameScreenCritique .critiquePlayfield{
    padding-top:64px!important;
    padding-bottom:10px!important;
    grid-template-columns:78px minmax(0,1fr) 110px!important;
    gap:10px!important;
  }
  .critiqueStageUnit{--critique-card-base:280px;--critique-gap-base:7px;}
  .critiqueStageUnit .gameMicrocopy{display:none!important;}
  .critiqueStatusLine{min-height:20px;font-size:8px;}
  .critiqueStageUnit .critiqueDecisionButtons button{min-height:34px!important;padding:6px 8px!important;}
}

/* =========================================================
   v0.63 — Crítica con preview cuadrada oficial
   Unifica el look visible: crítica rápida, detalle, aceptados y ranking
   usan el mismo bloque cuadrado, sin reinterpretar proporciones.
   ========================================================= */
.lookSquarePreview{
  position:relative!important;
  width:100%!important;
  aspect-ratio:1/1!important;
  flex:0 0 auto!important;
  border:3px solid #09090b!important;
  border-radius:24px!important;
  background:#f4f1ea!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
}
.lookSquarePreview > img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
}
.lookSquarePreview .studioLookPreview{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:1/1!important;
  flex:0 0 auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.lookSquarePieceGrid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:8px;
  padding:10px;
}
.lookSquarePieceGrid span{
  border:2px solid #09090b;
  border-radius:16px;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.lookSquarePieceGrid img{max-width:96%;max-height:96%;object-fit:contain;display:block;}
.gameScreenCritique .voteLookCard{
  justify-content:flex-start!important;
  align-items:center!important;
  gap:8px!important;
}
.gameScreenCritique .voteLookCard > .lookSquarePreview{
  width:100%!important;
  max-width:100%!important;
}
.gameScreenCritique .voteLookCard > strong{
  margin-top:2px!important;
  flex:0 0 auto!important;
}
.gameScreenCritique .voteLookCard > small{
  flex:0 0 auto!important;
  text-align:center!important;
}
.studioVoteCard{justify-content:flex-start!important;}
.studioLookPreview{
  aspect-ratio:1/1!important;
  flex:0 0 auto!important;
  min-height:0!important;
}
.detailLookMedia{
  aspect-ratio:1/1!important;
}
.detailLookMedia > .lookSquarePreview{
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
}
.acceptedMini{
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
}
.acceptedMini > .lookSquarePreview{
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
}
.rankingThumb{
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
}
.rankingThumb > .lookSquarePreview{
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
}
.publishedLookVote .publishedLookFrame{display:none!important;}
@media (max-width:720px){
  .gameScreenCritique .voteLookCard{gap:6px!important;padding:10px!important;}
  .lookSquarePreview{border-radius:20px!important;}
  .voteLookBadge{font-size:7px!important;top:8px!important;left:8px!important;padding:3px 6px!important;}
}

/* =========================================================
   v0.64 — Lobby vertical centering hotfix
   El panel del lobby debe sentirse centrado en desktop, tablet y móvil.
   ========================================================= */
.gameScreenLobby .lobbyPanel{
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}
@media (max-width:720px){
  .gameScreenLobby .lobbyPanel{
    top:calc(50% - 3dvh)!important;
    max-height:calc(100dvh - 38px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}
@media (max-height:640px){
  .gameScreenLobby .lobbyPanel{
    top:50%!important;
    max-height:calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    overflow:auto!important;
  }
}

/* =========================================================
   v0.66 — PACAMOR Studio accesorios + aviso armario lleno
   ========================================================= */
.gameScreenPaca .pacaKeepZone.is-wardrobe-full{
  background:#fff7d8!important;
  border-color:#09090b!important;
  box-shadow:0 5px 0 #09090b,0 0 0 6px rgba(255,207,51,.22)!important;
}
.gameScreenPaca .pacaKeepZone.is-wardrobe-full .pacaKeepHead i{
  transform:scale(1.12)!important;
}
.gameScreenPaca .pacaKeepZone.is-wardrobe-full .pacaKeepHead span{
  font-size:13px!important;
}
.gameScreenPaca .pacaKeepZone.is-wardrobe-full .pacaKeepHead small{
  opacity:1!important;
  max-height:none!important;
  margin-top:6px!important;
  overflow:visible!important;
  color:#09090b!important;
  line-height:1.15!important;
  max-width:16ch!important;
}
#pacaKeepBtn:disabled{
  opacity:.72!important;
  cursor:not-allowed!important;
}
#pacaKeepBtn:disabled span{white-space:nowrap;}

/* Studio: los accesorios se colocan como piezas de look, no como thumbnails sueltos. */
.studioPiece--jewelry,
.studioPiece[data-studio-kind="earrings"]{
  left:25%!important;
  top:7%!important;
  width:50%!important;
  height:20%!important;
  z-index:10!important;
  object-fit:contain!important;
  filter:drop-shadow(0 3px 3px rgba(9,9,11,.10))!important;
}
.studioPiece--hands,
.studioPiece[data-studio-kind="gloves"]{
  left:10%!important;
  top:31%!important;
  width:80%!important;
  height:37%!important;
  z-index:9!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 4px rgba(9,9,11,.11))!important;
}
.studioPiece--hat{top:0%!important;z-index:11!important;}
.studioPiece--glasses{top:10%!important;z-index:12!important;}
.studioPiece--neck{top:18%!important;z-index:9!important;}
.lookSquarePreview .studioPiece--jewelry,
.lookSquarePreview .studioPiece[data-studio-kind="earrings"]{
  left:25%!important;
  top:7%!important;
  width:50%!important;
  height:20%!important;
}
.lookSquarePreview .studioPiece--hands,
.lookSquarePreview .studioPiece[data-studio-kind="gloves"]{
  left:10%!important;
  top:31%!important;
  width:80%!important;
  height:37%!important;
}
@media (max-width:760px){
  .gameScreenPaca .pacaKeepZone.is-wardrobe-full .pacaKeepHead small{max-width:11ch!important;font-size:8px!important;}
  .gameScreenPaca .pacaKeepZone.is-wardrobe-full .pacaKeepHead span{font-size:10px!important;}
}


/* v0.68 — aviso central fuerte + FX móvil global */
.centerNotice{
  position:fixed!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  z-index:2147483000!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .16s ease!important;
}
.centerNotice.show{opacity:1!important;}
.centerNoticeBubble{
  max-width:min(560px, calc(100vw - 28px))!important;
  padding:18px 20px!important;
  border-radius:24px!important;
  border:3px solid #09090b!important;
  background:#fff!important;
  color:#09090b!important;
  box-shadow:0 8px 0 #09090b, 0 24px 70px rgba(0,0,0,.42)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  text-align:center!important;
  font-size:clamp(15px, 4vw, 20px)!important;
  line-height:1.22!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
}
.centerNoticeBubble i{font-size:20px!important;flex:0 0 auto!important;}
.lookGlobalFxLayer{
  position:fixed;
  inset:0;
  z-index:1500;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:normal;
}
.lookGlobalFxStar{
  position:fixed;
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  color:#ffe071;
  font-style:normal;
  font-size:20px;
  line-height:1;
  text-shadow:0 0 8px rgba(255,224,113,.95),0 0 18px rgba(255,126,218,.65),0 0 30px rgba(255,255,255,.5);
  opacity:0;
  transform:translate3d(0,0,0) scale(var(--scale,1));
  animation:lookGlobalFxPop 1050ms cubic-bezier(.16,1,.3,1) forwards;
  will-change:transform,opacity;
}
.lookGlobalFxStar:nth-child(3n){color:#ff8ee8;}
.lookGlobalFxStar:nth-child(4n){color:#fff8c8;}
.lookGlobalFxStar.fx-return{color:#c9f7ff;}
.lookGlobalFxStar.fx-save{color:#ffe48a;}
@keyframes lookGlobalFxPop{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.2) rotate(0deg)}
  12%{opacity:1}
  72%{opacity:.98}
  100%{opacity:0;transform:translate3d(var(--dx,0),var(--dy,-80px),0) scale(calc(var(--scale,1) * 1.35)) rotate(var(--rot,28deg))}
}
@media (max-width:720px){
  .centerNotice{padding:18px!important;}
  .centerNoticeBubble{font-size:16px!important;border-radius:22px!important;padding:17px 16px!important;}
  .lookGlobalFxStar{font-size:22px;width:22px;height:22px;margin:-11px 0 0 -11px;}
}
@media (prefers-reduced-motion: reduce){
  .lookGlobalFxStar{animation:lookGlobalFxPop 780ms ease-out forwards!important;}
  .pacaFxLayer{display:block!important;}
}

/* =========================================================
   v0.71 — Armario personal responsive estable
   Corrige adaptación en tablet/teléfono: el panel ya no se aplasta,
   el preview queda cuadrado y los controles/lista fluyen en orden.
   ========================================================= */
.gameScreenWardrobe .wardrobePanel{
  box-sizing:border-box;
}
@media (max-width: 1100px){
  .gameScreenWardrobe .wardrobePanel{
    position:absolute!important;
    left:50%!important;
    top:calc(76px + env(safe-area-inset-top))!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(760px, calc(100vw - 20px))!important;
    height:auto!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    padding:14px!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:26px!important;
  }
  .gameScreenWardrobe .wardrobeHero{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }
  .gameScreenWardrobe .wardrobeHero h2{
    font-size:clamp(28px, 7vw, 44px)!important;
    line-height:.92!important;
    max-width:12ch!important;
  }
  .gameScreenWardrobe .wardrobeHero p:not(.gameEyebrow){
    max-width:58em!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  .gameScreenWardrobe .wardrobeUploader{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop{
    flex:0 0 auto!important;
    min-height:68px!important;
    padding:12px!important;
    border-radius:22px!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    flex:0 0 auto!important;
    width:min(100%, 440px)!important;
    max-width:440px!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:1 / 1!important;
    margin:0 auto!important;
    border-radius:22px!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox canvas{
    width:100%!important;
    height:100%!important;
    display:block!important;
  }
  .gameScreenWardrobe .wardrobePreviewEmpty{
    inset:12px!important;
    border-radius:18px!important;
    padding:14px!important;
    font-size:14px!important;
    line-height:1.2!important;
  }
  .gameScreenWardrobe .wardrobeControls{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    min-height:auto!important;
    overflow:visible!important;
  }
  .gameScreenWardrobe .wardrobeToolRow{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow button,
  .gameScreenWardrobe .wardrobeSaveBtn{
    min-height:42px!important;
    border-radius:16px!important;
    white-space:normal!important;
  }
  .gameScreenWardrobe .wardrobeSaved{
    flex:0 0 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    overflow:visible!important;
  }
  .gameScreenWardrobe .wardrobeSavedHead{
    align-items:flex-end!important;
  }
  .gameScreenWardrobe .wardrobeSavedGrid{
    max-height:none!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fill, minmax(118px, 1fr))!important;
    gap:9px!important;
    padding:2px 2px 10px!important;
  }
}
@media (max-width: 620px){
  .gameScreenWardrobe .gameTopStrip{
    top:calc(8px + env(safe-area-inset-top))!important;
    left:8px!important;
    right:8px!important;
    height:40px!important;
  }
  .gameScreenWardrobe .gameBack,
  .gameScreenWardrobe .gameMiniAction{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
  }
  .gameScreenWardrobe .gameBack span,
  .gameScreenWardrobe .gameMiniAction span{display:none!important;}
  .gameScreenWardrobe .gameTopTitle strong{
    font-size:15px!important;
    padding:8px 14px!important;
    border-width:2px!important;
  }
  .gameScreenWardrobe .gameTopTitle small{
    font-size:8px!important;
    max-width:48vw!important;
  }
  .gameScreenWardrobe .wardrobePanel{
    top:calc(64px + env(safe-area-inset-top))!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    width:calc(100vw - 14px)!important;
    padding:12px!important;
    gap:10px!important;
    border-width:3px!important;
    border-radius:22px!important;
  }
  .gameScreenWardrobe .wardrobeHero .gameEyebrow{
    font-size:10px!important;
    letter-spacing:.1em!important;
  }
  .gameScreenWardrobe .wardrobeHero h2{
    font-size:clamp(28px, 8vw, 36px)!important;
    max-width:12ch!important;
  }
  .gameScreenWardrobe .wardrobeHero p:not(.gameEyebrow){
    font-size:12px!important;
    line-height:1.18!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop{
    min-height:64px!important;
    border-radius:20px!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop i{font-size:20px!important;}
  .gameScreenWardrobe .wardrobeUploadDrop strong{font-size:15px!important;}
  .gameScreenWardrobe .wardrobeUploadDrop span{font-size:10px!important;}
  .gameScreenWardrobe .wardrobePreviewBox{
    width:min(100%, 390px)!important;
    max-width:390px!important;
    border-radius:20px!important;
  }
  .gameScreenWardrobe .wardrobePreviewEmpty{
    inset:10px!important;
    font-size:13px!important;
  }
  .gameScreenWardrobe .wardrobeControls input,
  .gameScreenWardrobe .wardrobeControls select{
    min-height:36px!important;
    font-size:12px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow button,
  .gameScreenWardrobe .wardrobeSaveBtn{
    min-height:40px!important;
    font-size:12px!important;
  }
  .gameScreenWardrobe .wardrobeSavedHead strong{font-size:18px!important;}
  .gameScreenWardrobe .wardrobeSavedHead small{font-size:9px!important;}
  .gameScreenWardrobe .wardrobeSavedGrid{
    grid-template-columns:repeat(auto-fill, minmax(104px, 1fr))!important;
    gap:8px!important;
  }
}
@media (max-width: 420px){
  .gameScreenWardrobe .wardrobePreviewBox{width:100%!important;}
  .gameScreenWardrobe .wardrobeHero h2{font-size:30px!important;}
}

/* =========================================================
   v0.72 — Armario personal: borrador claro + fondos de prueba
   ========================================================= */
.gameScreenWardrobe .wardrobePreviewBox[data-bg="checker"]{
  background:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%),
    #fff!important;
  background-size:20px 20px!important;
  background-position:0 0,0 10px,10px -10px,-10px 0!important;
}
.gameScreenWardrobe .wardrobePreviewBox[data-bg="white"]{background:#fff!important;}
.gameScreenWardrobe .wardrobePreviewBox[data-bg="black"]{background:#09090b!important;}
.gameScreenWardrobe .wardrobePreviewBox[data-bg="warm"]{background:#f4f1ea!important;}
.gameScreenWardrobe .wardrobePreviewBox[data-bg="blue"]{background:#dbeafe!important;}
.gameScreenWardrobe .wardrobePreviewBox.is-erasing{
  outline:3px solid #ffcf33;
  outline-offset:3px;
}
.gameScreenWardrobe .wardrobePreviewBox canvas.is-erasing{
  cursor:none!important;
}
.personalBrushCursor{
  position:absolute;
  left:50%;
  top:50%;
  width:34px;
  height:34px;
  transform:translate(-50%,-50%);
  border:2px solid #ff3b30;
  border-radius:999px;
  background:rgba(255,59,48,.12);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 6px 20px rgba(0,0,0,.22);
  pointer-events:none;
  opacity:0;
  z-index:6;
}
.personalBrushCursor.is-visible{opacity:1;}
.wardrobeBrushHint{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:5;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#111;
  border:2px solid rgba(9,9,11,.18);
  text-align:center;
  font-size:11px;
  line-height:1.15;
  font-weight:950;
  pointer-events:none;
  opacity:.84;
}
.wardrobeBrushHint.is-active{
  background:#09090b;
  color:#fff;
  border-color:#ffcf33;
  opacity:1;
}
.gameScreenWardrobe .wardrobeToolRow{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.gameScreenWardrobe .wardrobeToolRow button span{
  overflow:hidden;
  text-overflow:ellipsis;
}
.gameScreenWardrobe .wardrobeRange input[type="range"]{
  accent-color:#09090b;
}
@media (max-width: 1100px){
  .gameScreenWardrobe .wardrobeToolRow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .wardrobeBrushHint{
    bottom:10px;
    font-size:10px;
    border-radius:16px;
  }
}
@media (max-width: 420px){
  .gameScreenWardrobe .wardrobeToolRow{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow button{
    min-height:42px!important;
    font-size:11px!important;
  }
  .wardrobeBrushHint{
    left:8px;
    right:8px;
    bottom:8px;
    padding:7px 8px;
    font-size:9px;
  }
}


/* =========================================================
   v0.73 — Armario: scroll desktop bajo + pincel restaurar
   ========================================================= */
.gameScreenWardrobe .wardrobePanel{
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain;
}
.gameScreenWardrobe .wardrobeToolRow{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.gameScreenWardrobe .wardrobePreviewBox.is-restoring{
  outline:3px solid #21c55d;
  outline-offset:3px;
}
.gameScreenWardrobe .wardrobePreviewBox canvas.is-restoring{
  cursor:none!important;
}
.personalBrushCursor.is-restore{
  border-color:#21c55d;
  background:rgba(33,197,93,.14);
}
.wardrobeBrushHint.is-restore{
  background:#064e3b;
  color:#fff;
  border-color:#21c55d;
}
@media (min-width:1101px) and (max-height:820px){
  .gameScreenWardrobe .wardrobePanel{
    top:calc(70px + env(safe-area-inset-top))!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    height:auto!important;
    max-height:none!important;
    align-content:start!important;
    grid-template-rows:auto auto!important;
    overflow:auto!important;
  }
  .gameScreenWardrobe .wardrobeHero h2{
    font-size:clamp(26px,3.6vw,42px)!important;
  }
  .gameScreenWardrobe .wardrobeHero p:not(.gameEyebrow){
    font-size:12px!important;
    line-height:1.18!important;
  }
  .gameScreenWardrobe .wardrobeUploader{
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    width:min(100%, 420px)!important;
    max-height:none!important;
    justify-self:center!important;
  }
  .gameScreenWardrobe .wardrobeSavedGrid{
    max-height:62dvh!important;
  }
}
@media (min-width:1101px) and (max-height:680px){
  .gameScreenWardrobe .wardrobePanel{
    padding:14px!important;
    gap:10px!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    width:min(100%, 340px)!important;
  }
  .gameScreenWardrobe .wardrobeToolRow button,
  .gameScreenWardrobe .wardrobeSaveBtn{
    min-height:36px!important;
    font-size:11px!important;
  }
}
@media (max-width:1100px){
  .gameScreenWardrobe .wardrobeToolRow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:420px){
  .gameScreenWardrobe .wardrobeToolRow{
    grid-template-columns:1fr 1fr!important;
  }
}

/* =========================================================
   v0.74 — Armario: desktop bajo sin solapamientos
   En pantallas desktop con poca altura, el panel mantiene dos columnas
   pero deja de comprimir el uploader: preview, controles y guardado
   fluyen en orden y el scroll pertenece al panel completo.
   ========================================================= */
.gameScreenWardrobe .wardrobePanel{
  scrollbar-gutter:stable;
}
@media (min-width:1101px) and (max-height:820px){
  .gameScreenWardrobe .wardrobePanel{
    position:absolute!important;
    left:50%!important;
    top:calc(70px + env(safe-area-inset-top))!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(1160px, calc(100vw - 32px))!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:minmax(360px, 480px) minmax(280px, 1fr)!important;
    grid-template-rows:auto auto!important;
    align-items:start!important;
    align-content:start!important;
    justify-items:stretch!important;
    gap:12px!important;
    padding:16px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }
  .gameScreenWardrobe .wardrobeHero{
    grid-column:1 / -1!important;
    min-height:auto!important;
  }
  .gameScreenWardrobe .wardrobeUploader{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:10px!important;
    min-height:auto!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    align-self:start!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop,
  .gameScreenWardrobe .wardrobePreviewBox,
  .gameScreenWardrobe .wardrobeControls,
  .gameScreenWardrobe .wardrobeSaveBtn{
    flex:0 0 auto!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    width:min(100%, 400px)!important;
    max-width:400px!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:1 / 1!important;
    margin:0 auto 10px!important;
    position:relative!important;
    z-index:1!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox + .wardrobeControls{
    margin-top:0!important;
  }
  .gameScreenWardrobe .wardrobeControls{
    position:relative!important;
    z-index:3!important;
    display:grid!important;
    gap:8px!important;
    min-height:auto!important;
    height:auto!important;
    overflow:visible!important;
    background:#fff!important;
  }
  .gameScreenWardrobe .wardrobeToolRow{
    display:grid!important;
    grid-template-columns:repeat(5, minmax(0, 1fr))!important;
    gap:6px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow button,
  .gameScreenWardrobe .wardrobeSaveBtn{
    min-height:38px!important;
    font-size:10px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .gameScreenWardrobe .wardrobeSaved{
    align-self:start!important;
    min-height:auto!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .gameScreenWardrobe .wardrobeSavedGrid{
    max-height:none!important;
    overflow:visible!important;
    align-content:start!important;
  }
}
@media (min-width:1101px) and (max-height:680px){
  .gameScreenWardrobe .wardrobePanel{
    padding:14px!important;
    gap:10px!important;
    grid-template-columns:minmax(320px, 380px) minmax(260px, 1fr)!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    width:min(100%, 320px)!important;
    max-width:320px!important;
    margin-bottom:8px!important;
  }
  .gameScreenWardrobe .wardrobeHero h2{
    font-size:clamp(24px, 3.2vw, 38px)!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop{
    min-height:60px!important;
    padding:10px!important;
  }
  .gameScreenWardrobe .wardrobeControls input,
  .gameScreenWardrobe .wardrobeControls select{
    min-height:34px!important;
    padding:7px 9px!important;
  }
}


/* =========================================================
   v0.75 — Armario desktop real + radio random default
   En desktop se usan 3 zonas: preview, controles y prendas subidas.
   Evita apilar todos los controles debajo del objeto y usa mejor el ancho.
   ========================================================= */
@media (min-width:1101px){
  .gameScreenWardrobe .wardrobePanel{
    position:absolute!important;
    left:50%!important;
    top:calc(64px + env(safe-area-inset-top))!important;
    bottom:calc(16px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(1240px, calc(100vw - 36px))!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:minmax(390px, 500px) minmax(245px, 310px) minmax(240px, 1fr)!important;
    grid-template-rows:auto minmax(0, 1fr)!important;
    align-items:start!important;
    align-content:start!important;
    gap:14px!important;
    padding:16px!important;
    overflow:auto!important;
    overflow-x:hidden!important;
    scrollbar-gutter:stable!important;
  }
  .gameScreenWardrobe .wardrobeHero{
    grid-column:1 / -1!important;
    grid-row:1!important;
    min-height:auto!important;
  }
  .gameScreenWardrobe .wardrobeHero h2{
    font-size:clamp(30px, 3.6vw, 48px)!important;
    line-height:.9!important;
  }
  .gameScreenWardrobe .wardrobeHero p:not(.gameEyebrow){
    font-size:12px!important;
    line-height:1.18!important;
    max-width:78em!important;
  }
  .gameScreenWardrobe .wardrobeUploader{
    grid-column:1 / 3!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:minmax(360px, 1fr) minmax(245px, 310px)!important;
    grid-template-rows:auto auto!important;
    align-items:start!important;
    align-content:start!important;
    gap:10px 12px!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop{
    grid-column:1 / -1!important;
    grid-row:1!important;
    min-height:58px!important;
    padding:10px 12px!important;
    border-radius:20px!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    grid-column:1!important;
    grid-row:2!important;
    width:min(100%, 48dvh, 460px)!important;
    max-width:460px!important;
    max-height:none!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    margin:0 auto!important;
    align-self:start!important;
    justify-self:center!important;
    position:relative!important;
    z-index:1!important;
  }
  .gameScreenWardrobe .wardrobeControls{
    grid-column:2!important;
    grid-row:2!important;
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
    min-height:auto!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    align-self:start!important;
    background:#fff!important;
    position:relative!important;
    z-index:3!important;
  }
  .gameScreenWardrobe .wardrobeControls input,
  .gameScreenWardrobe .wardrobeControls select{
    min-height:34px!important;
    padding:7px 9px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .gameScreenWardrobe .wardrobeToolRow button,
  .gameScreenWardrobe .wardrobeSaveBtn{
    min-height:38px!important;
    font-size:10px!important;
    line-height:1.05!important;
    white-space:normal!important;
  }
  .gameScreenWardrobe .wardrobeSaved{
    grid-column:3!important;
    grid-row:2!important;
    align-self:stretch!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-rows:auto minmax(0, 1fr)!important;
  }
  .gameScreenWardrobe .wardrobeSavedGrid{
    max-height:none!important;
    overflow:auto!important;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr))!important;
    align-content:start!important;
  }
}
@media (min-width:1101px) and (max-height:760px){
  .gameScreenWardrobe .wardrobePanel{
    top:calc(58px + env(safe-area-inset-top))!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    padding:14px!important;
    gap:10px!important;
  }
  .gameScreenWardrobe .wardrobeHero h2{
    font-size:clamp(26px, 3vw, 40px)!important;
  }
  .gameScreenWardrobe .wardrobePreviewBox{
    width:min(100%, 42dvh, 380px)!important;
    max-width:380px!important;
  }
  .gameScreenWardrobe .wardrobeUploadDrop{
    min-height:52px!important;
  }
}
@media (min-width:1101px) and (max-width:1240px){
  .gameScreenWardrobe .wardrobePanel{
    grid-template-columns:minmax(350px, 440px) minmax(230px, 280px) minmax(210px, 1fr)!important;
  }
  .gameScreenWardrobe .wardrobeUploader{
    grid-template-columns:minmax(330px, 1fr) minmax(230px, 280px)!important;
  }
}

/* =========================================================
   v0.78 — PACAMOR logo transparente en lobby
   Usa el logo acolchonado/heart-paca como marca visual sin romper el h1 accesible.
   ========================================================= */
.gameScreenLobby .lobbyBrandTitle{
  margin:-2px 0 0!important;
  width:min(100%,440px)!important;
  max-width:100%!important;
  line-height:0!important;
  letter-spacing:0!important;
  display:block!important;
  position:relative!important;
}
.gameScreenLobby .lobbyBrandLogo{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:190px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 18px rgba(9,9,11,.12));
}
.gameScreenLobby .lobbyBrandText{
  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;
}
@media (max-width:720px){
  .gameScreenLobby .lobbyBrandTitle{width:min(100%,360px)!important;}
  .gameScreenLobby .lobbyBrandLogo{max-height:150px!important;}
}
@media (max-height:700px){
  .gameScreenLobby .lobbyBrandLogo{max-height:132px!important;}
}
@media (max-height:560px){
  .gameScreenLobby .lobbyBrandLogo{max-height:104px!important;}
}

/* =========================================================
   PACAMOR · Reunioon identity bridge states
   ========================================================= */
body.pacamor-reunioon-user .lookPlayerLobbyBtn b,
.lookPlayerStatus[data-connected="1"]{
  background:#09090b;
  color:#fff;
}
.lookPlayerStatus[data-connected="1"] small,
.lookPlayerStatus[data-connected="1"] strong{
  color:#fff;
}
.lookPlayerStatus[data-connected="1"]{
  box-shadow:0 3px 0 #09090b,0 0 0 4px rgba(255,207,51,.18);
}
.lookPlayerStatus[data-connected="0"]{
  background:#f4f1ea;
}
body.pacamor-reunioon-cloud .lookPlayerActions button.primary{
  background:#ffcf33;
  color:#09090b;
}