/* Diseño: escritorio a pantalla completa con fondo animado por tema, ventanas flotantes y barra de tareas abajo. Cada tema redefine todos los tokens; los valores de :root son los de Steampunk (el tema inicial). */ :root{ --bar-h:46px; --bg:#1a0f07; --fg:#f3e3c3; --muted:#6f5230; --accent:#a3452b; --accent-fg:#fff3dc; --danger:#9b1c1c; --win-bg:#efe0bd; --win-fg:#2b1a0b; --win-border:#8a6424; --bw:6px; --radius:12px; --shadow:0 18px 44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,236,190,.55); --title-bg:linear-gradient(180deg,#f3d37c 0%,#c99a3a 45%,#8f6420 100%); --title-fg:#2b1607; --btn-bg:linear-gradient(180deg,#f2dfaa,#c9a050); --btn-fg:#2b1607; --btn-border:#6e4c18; --pri-bg:linear-gradient(180deg,#b9573a,#7a2a16); --pri-fg:#fff1d8; --cell-bg:#e8d6aa; --cell-bg2:#dcc493; --cell-line:#b7955a; --cell-on:radial-gradient(circle at 35% 30%,#fff1c2,#d4a43c 45%,#7a521a 100%); --cell-play:rgba(124,63,29,.25); --bar-bg:linear-gradient(180deg,#5a3a1a,#2a180a); --bar-fg:#f3e3c3; --bar-border:2px solid #c99a3a; --menu-bg:#efe0bd; --menu-fg:#2b1a0b; --menu-hi:#e2c27c; --focus:#7a2a16; --icon-bg:radial-gradient(circle at 35% 30%,#fbe7ad,#c9973a 55%,#6b4410); --icon-fg:#2b1607; --icon-border:#4f330d; --icon-bw:2px; --icon-radius:50%; --icon-shadow:0 4px 10px rgba(0,0,0,.5); --label-fg:#f8ebcf; --label-bg:rgba(26,14,5,.62); --pv-bg:radial-gradient(circle at 30% 40%,#5a3a1a,#120a05); --f-title:'IM Fell English SC',Georgia,'Times New Roman',serif; --f-ui:'Special Elite','Courier New',Courier,monospace; --f-mark:'IM Fell English SC',Georgia,serif; --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; color-scheme:light; } [data-os="steampunk"]{ --bg:#1a0f07; --fg:#f3e3c3; --muted:#6f5230; --accent:#a3452b; --accent-fg:#fff3dc; --danger:#9b1c1c; --win-bg:#efe0bd; --win-fg:#2b1a0b; --win-border:#8a6424; --bw:6px; --radius:12px; --shadow:0 18px 44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,236,190,.55); --title-bg:linear-gradient(180deg,#f3d37c 0%,#c99a3a 45%,#8f6420 100%); --title-fg:#2b1607; --btn-bg:linear-gradient(180deg,#f2dfaa,#c9a050); --btn-fg:#2b1607; --btn-border:#6e4c18; --pri-bg:linear-gradient(180deg,#b9573a,#7a2a16); --pri-fg:#fff1d8; --cell-bg:#e8d6aa; --cell-bg2:#dcc493; --cell-line:#b7955a; --cell-on:radial-gradient(circle at 35% 30%,#fff1c2,#d4a43c 45%,#7a521a 100%); --cell-play:rgba(124,63,29,.25); --bar-bg:linear-gradient(180deg,#5a3a1a,#2a180a); --bar-fg:#f3e3c3; --bar-border:2px solid #c99a3a; --menu-bg:#efe0bd; --menu-fg:#2b1a0b; --menu-hi:#e2c27c; --focus:#7a2a16; --icon-bg:radial-gradient(circle at 35% 30%,#fbe7ad,#c9973a 55%,#6b4410); --icon-fg:#2b1607; --icon-border:#4f330d; --icon-bw:2px; --icon-radius:50%; --icon-shadow:0 4px 10px rgba(0,0,0,.5); --label-fg:#f8ebcf; --label-bg:rgba(26,14,5,.62); --pv-bg:radial-gradient(circle at 30% 40%,#5a3a1a,#120a05); --f-title:'IM Fell English SC',Georgia,'Times New Roman',serif; --f-ui:'Special Elite','Courier New',Courier,monospace; --f-mark:'IM Fell English SC',Georgia,serif; color-scheme:light; } [data-os="vaporwave"]{ --bg:#2b1055; --fg:#2b1055; --muted:#6c4f9c; --accent:#e0399f; --accent-fg:#fff; --danger:#c0124f; --win-bg:#f1e9ff; --win-fg:#2b1055; --win-border:#2b1055; --bw:2px; --radius:0px; --shadow:inset -2px -2px 0 #9b87d8,inset 2px 2px 0 #fff,7px 7px 0 rgba(43,16,85,.35); --title-bg:linear-gradient(90deg,#ff71ce,#b967ff 55%,#01cdfe); --title-fg:#fff; --btn-bg:#e6dbff; --btn-fg:#2b1055; --btn-border:#2b1055; --pri-bg:linear-gradient(90deg,#ff71ce,#b967ff); --pri-fg:#fff; --cell-bg:#faf6ff; --cell-bg2:#ece2ff; --cell-line:#c6b2f2; --cell-on:linear-gradient(135deg,#ff71ce,#01cdfe); --cell-play:rgba(1,205,254,.28); --bar-bg:#e6dbff; --bar-fg:#2b1055; --bar-border:2px solid #fff; --menu-bg:#f1e9ff; --menu-fg:#2b1055; --menu-hi:#ffd3f0; --focus:#e0399f; --icon-bg:#f1e9ff; --icon-fg:#7b2fd6; --icon-border:#2b1055; --icon-bw:2px; --icon-radius:0; --icon-shadow:inset -2px -2px 0 #9b87d8,inset 2px 2px 0 #fff,4px 4px 0 rgba(43,16,85,.3); --label-fg:#2b1055; --label-bg:rgba(255,255,255,.78); --pv-bg:linear-gradient(#a0f1ff,#ffc6f2 56%,#b967ff 57%,#3d0a63); --f-title:'DotGothic16','MS Gothic',monospace; --f-ui:'DotGothic16','MS Gothic',monospace; --f-mark:'DotGothic16','MS Gothic',monospace; color-scheme:light; } [data-os="synthwave"]{ --bg:#090017; --fg:#f6e8ff; --muted:#b9a2dc; --accent:#ff2fd6; --accent-fg:#fff; --danger:#ff6b8b; --win-bg:rgba(20,5,42,.9); --win-fg:#f6e8ff; --win-border:#ff2fd6; --bw:1px; --radius:6px; --shadow:0 0 0 1px rgba(255,47,214,.45),0 0 26px rgba(255,47,214,.45),0 22px 50px rgba(0,0,0,.65); --title-bg:linear-gradient(180deg,rgba(255,47,214,.32),rgba(33,247,255,.05)); --title-fg:#21f7ff; --btn-bg:rgba(255,47,214,.1); --btn-fg:#f6e8ff; --btn-border:#21f7ff; --pri-bg:linear-gradient(90deg,#ff2fd6,#8c1eff); --pri-fg:#fff; --cell-bg:rgba(255,255,255,.04); --cell-bg2:rgba(255,255,255,.09); --cell-line:rgba(33,247,255,.28); --cell-on:linear-gradient(180deg,#ff2fd6,#8c1eff); --cell-play:rgba(33,247,255,.24); --bar-bg:rgba(9,0,23,.86); --bar-fg:#f6e8ff; --bar-border:1px solid #ff2fd6; --menu-bg:rgba(20,5,42,.97); --menu-fg:#f6e8ff; --menu-hi:rgba(255,47,214,.24); --focus:#21f7ff; --icon-bg:rgba(20,5,42,.75); --icon-fg:#21f7ff; --icon-border:#ff2fd6; --icon-bw:1px; --icon-radius:10px; --icon-shadow:0 0 14px rgba(255,47,214,.55); --label-fg:#f6e8ff; --label-bg:rgba(9,0,23,.66); --pv-bg:linear-gradient(#090017,#2b0a3d 55%,#ff2fd6 56%,#160030 58%,#090017); --f-title:'Audiowide','Trebuchet MS',sans-serif; --f-ui:'Exo 2','Trebuchet MS',Arial,sans-serif; --f-mark:'Monoton','Audiowide',sans-serif; color-scheme:dark; } [data-os="cristal"]{ --bg:#e9edff; --fg:#1d2340; --muted:#4e5679; --accent:#5b4cf0; --accent-fg:#fff; --danger:#c0264d; --win-bg:rgba(255,255,255,.46); --win-fg:#1d2340; --win-border:rgba(255,255,255,.8); --bw:1px; --radius:20px; --shadow:0 22px 54px rgba(40,50,120,.2),inset 0 1px 0 rgba(255,255,255,.95); --title-bg:rgba(255,255,255,.4); --title-fg:#1d2340; --btn-bg:rgba(255,255,255,.62); --btn-fg:#1d2340; --btn-border:rgba(29,35,64,.16); --pri-bg:linear-gradient(135deg,#7c6dff,#2fb9c9); --pri-fg:#fff; --cell-bg:rgba(255,255,255,.5); --cell-bg2:rgba(255,255,255,.3); --cell-line:rgba(29,35,64,.1); --cell-on:linear-gradient(135deg,#8b7dff,#3fcbd8); --cell-play:rgba(91,76,240,.18); --bar-bg:rgba(255,255,255,.5); --bar-fg:#1d2340; --bar-border:1px solid rgba(255,255,255,.9); --menu-bg:rgba(255,255,255,.74); --menu-fg:#1d2340; --menu-hi:rgba(91,76,240,.13); --focus:#5b4cf0; --icon-bg:rgba(255,255,255,.6); --icon-fg:#5b4cf0; --icon-border:rgba(255,255,255,.95); --icon-bw:1px; --icon-radius:16px; --icon-shadow:0 8px 20px rgba(40,50,120,.16); --label-fg:#1d2340; --label-bg:rgba(255,255,255,.6); --pv-bg:radial-gradient(circle at 22% 30%,#c4b5fd,transparent 55%),radial-gradient(circle at 80% 72%,#67e8f9,transparent 55%),radial-gradient(circle at 70% 20%,#fda4af,transparent 50%),#eef1ff; --f-title:'Quicksand','Segoe UI',system-ui,sans-serif; --f-ui:'Quicksand','Segoe UI',system-ui,sans-serif; --f-mark:'Quicksand','Segoe UI',sans-serif; color-scheme:light; } [data-os="liquidmetal"]{ --bg:#0d0f12; --fg:#e8ebef; --muted:#a7b0ba; --accent:#8fc1ff; --accent-fg:#0d0f12; --danger:#ff8a8a; --win-bg:#1f2227; --win-fg:#e8ebef; --win-border:#9aa3ad; --bw:2px; --radius:16px; --shadow:0 0 0 1px rgba(255,255,255,.06),0 26px 64px rgba(0,0,0,.72); --title-bg:linear-gradient(180deg,#f4f6f8 0%,#b9c0c8 46%,#6c757f 52%,#cfd5db 100%); --title-fg:#14171b; --btn-bg:linear-gradient(180deg,#f0f2f5,#a2abb5); --btn-fg:#14171b; --btn-border:#58606a; --pri-bg:linear-gradient(180deg,#ffffff,#b8c0c9 46%,#6a737d 52%,#d9dee4); --pri-fg:#14171b; --cell-bg:#262a30; --cell-bg2:#1f2328; --cell-line:#3b424b; --cell-on:linear-gradient(180deg,#ffffff 0%,#bcc4cd 44%,#59626c 56%,#dfe4e9 100%); --cell-play:rgba(143,193,255,.22); --bar-bg:linear-gradient(180deg,#3b4047,#17191d); --bar-fg:#e8ebef; --bar-border:1px solid #8a939d; --menu-bg:#22262b; --menu-fg:#e8ebef; --menu-hi:rgba(207,214,222,.16); --focus:#8fc1ff; --icon-bg:linear-gradient(180deg,#f6f8fa,#b4bcc5 46%,#5f6872 54%,#d6dbe1); --icon-fg:#14171b; --icon-border:#3c434b; --icon-bw:1px; --icon-radius:18px; --icon-shadow:0 8px 18px rgba(0,0,0,.6); --label-fg:#eef1f4; --label-bg:rgba(0,0,0,.58); --pv-bg:radial-gradient(circle at 38% 42%,#f3f4f6,#9ca3af 16%,#2b2f35 34%,transparent 36%),radial-gradient(circle at 70% 64%,#e5e7eb,#6b7280 14%,#1f2328 30%,transparent 32%),#0d0f12; --f-title:'Michroma','Arial Black',sans-serif; --f-ui:'Saira','Arial',sans-serif; --f-mark:'Michroma','Arial Black',sans-serif; color-scheme:dark; } [data-os="coderain"]{ --bg:#000; --fg:#b6ffcf; --muted:#45b56e; --accent:#00ff66; --accent-fg:#001a09; --danger:#ff5f5f; --win-bg:rgba(0,12,4,.96); --win-fg:#b6ffcf; --win-border:#00ff66; --bw:1px; --radius:0px; --shadow:0 0 22px rgba(0,255,102,.22); --title-bg:rgba(0,255,102,.12); --title-fg:#00ff66; --btn-bg:rgba(0,0,0,.6); --btn-fg:#00ff66; --btn-border:#00ff66; --pri-bg:#00ff66; --pri-fg:#001a09; --cell-bg:rgba(0,255,102,.04); --cell-bg2:rgba(0,255,102,.09); --cell-line:rgba(0,255,102,.24); --cell-on:#00ff66; --cell-play:rgba(168,255,207,.22); --bar-bg:rgba(0,0,0,.92); --bar-fg:#00ff66; --bar-border:1px solid #00ff66; --menu-bg:rgba(0,10,3,.97); --menu-fg:#b6ffcf; --menu-hi:rgba(0,255,102,.18); --focus:#a8ffcf; --icon-bg:rgba(0,20,8,.85); --icon-fg:#00ff66; --icon-border:#00ff66; --icon-bw:1px; --icon-radius:0; --icon-shadow:0 0 12px rgba(0,255,102,.35); --label-fg:#b6ffcf; --label-bg:rgba(0,0,0,.8); --pv-bg:repeating-linear-gradient(90deg,rgba(0,255,102,.28) 0 2px,transparent 2px 13px),#000; --f-title:'VT323','Courier New',monospace; --f-ui:'Share Tech Mono','Courier New',monospace; --f-mark:'VT323','Courier New',monospace; color-scheme:dark; } [data-os="popart"]{ --bg:#ffde00; --fg:#111; --muted:#3d3d3d; --accent:#e60f0f; --accent-fg:#fff; --danger:#c00; --win-bg:#fff; --win-fg:#111; --win-border:#111; --bw:4px; --radius:4px; --shadow:9px 9px 0 #111; --title-bg:radial-gradient(circle,rgba(230,15,15,.38) 1.7px,transparent 2px) 0 0/9px 9px,#ffde00; --title-fg:#111; --btn-bg:#fff; --btn-fg:#111; --btn-border:#111; --pri-bg:#e60f0f; --pri-fg:#fff; --cell-bg:#fff; --cell-bg2:#eef6ff; --cell-line:#111; --cell-on:radial-gradient(circle,rgba(255,255,255,.4) 1.5px,transparent 1.8px) 0 0/6px 6px,#e60f0f; --cell-play:rgba(0,120,255,.22); --bar-bg:#fff; --bar-fg:#111; --bar-border:4px solid #111; --menu-bg:#fff; --menu-fg:#111; --menu-hi:#ffde00; --focus:#0078ff; --icon-bg:#fff; --icon-fg:#e60f0f; --icon-border:#111; --icon-bw:3px; --icon-radius:50%; --icon-shadow:4px 4px 0 #111; --label-fg:#111; --label-bg:#fff; --pv-bg:radial-gradient(circle,#0078ff 2.4px,transparent 2.8px) 0 0/10px 10px,#fff; --f-title:'Bangers',Impact,'Arial Black',sans-serif; --f-ui:'Comic Neue','Comic Sans MS','Chalkboard SE',sans-serif; --f-mark:'Bangers',Impact,sans-serif; color-scheme:light; } [data-os="kintsugi"]{ --bg:#14161b; --fg:#ece6d8; --muted:#a59c8c; --accent:#d9b25f; --accent-fg:#1a1306; --danger:#e07a64; --win-bg:#1f2228; --win-fg:#ece6d8; --win-border:rgba(217,178,95,.55); --bw:1px; --radius:8px; --shadow:0 24px 64px rgba(0,0,0,.62); --title-bg:#1a1c21; --title-fg:#e8c97e; --btn-bg:rgba(255,255,255,.03); --btn-fg:#e8c97e; --btn-border:rgba(217,178,95,.6); --pri-bg:linear-gradient(135deg,#f6dc8c,#c9973f 60%,#9b7428); --pri-fg:#1a1306; --cell-bg:#272b32; --cell-bg2:#22252b; --cell-line:rgba(236,230,216,.1); --cell-on:linear-gradient(135deg,#f6dc8c,#c9973f 55%,#8e6a24); --cell-play:rgba(217,178,95,.16); --bar-bg:rgba(20,22,27,.93); --bar-fg:#ece6d8; --bar-border:1px solid rgba(217,178,95,.45); --menu-bg:#1f2228; --menu-fg:#ece6d8; --menu-hi:rgba(217,178,95,.15); --focus:#e8c97e; --icon-bg:#1f2228; --icon-fg:#e8c97e; --icon-border:rgba(217,178,95,.7); --icon-bw:1px; --icon-radius:14px; --icon-shadow:0 8px 20px rgba(0,0,0,.5); --label-fg:#ece6d8; --label-bg:rgba(20,22,27,.72); --pv-bg:linear-gradient(118deg,transparent 46%,#e8c97e 47%,transparent 48.5%),linear-gradient(30deg,transparent 60%,#c9973f 61%,transparent 62%),#1b1d22; --f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif; --f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif; --f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif; color-scheme:dark; } /* ---------- Base ---------- */ html,body{height:100%} body{margin:0;overflow:hidden;background:var(--bg);color:var(--fg);font:15px/1.45 var(--f-ui);-webkit-font-smoothing:antialiased} button,input,textarea{font:inherit;color:inherit} button{-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} #wall{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0} #desk{position:fixed;z-index:1;left:0;right:0;top:env(safe-area-inset-top,0px);bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));padding:16px;box-sizing:border-box} .icons{position:relative;z-index:1;display:grid;grid-template-columns:96px;gap:4px;justify-items:center;align-content:start;width:96px} .icon{display:flex;flex-direction:column;align-items:center;gap:6px;width:94px;padding:6px 2px;border:0;background:none;cursor:pointer;border-radius:8px;color:inherit} .icon .tile{display:grid;place-items:center;width:50px;height:50px;background:var(--icon-bg);color:var(--icon-fg);border:var(--icon-bw) solid var(--icon-border);border-radius:var(--icon-radius);box-shadow:var(--icon-shadow);box-sizing:border-box} .icon .tile svg{width:26px;height:26px} .icon.big .tile{width:64px;height:64px} .icon.big .tile svg{width:34px;height:34px} .icon .lbl{font-size:13px;line-height:1.2;color:var(--label-fg);background:var(--label-bg);padding:2px 7px;border-radius:5px;text-align:center} .icon:hover .tile{filter:brightness(1.1)} a.icon{text-decoration:none;box-sizing:border-box}.icon-kofi .tile svg path:last-child{fill:var(--accent)} .mark{position:absolute;right:22px;bottom:16px;display:flex;align-items:baseline;gap:10px;pointer-events:none;user-select:none;z-index:0;max-width:calc(100% - 44px)} .mark-name{white-space:nowrap} .mark-name{font-family:var(--f-mark);font-size:clamp(30px,5.2vw,68px);line-height:1.05;padding:0 4px} .mark-ver{font-size:14px;color:var(--label-fg);background:var(--label-bg);padding:1px 7px;border-radius:5px} #layer{position:absolute;inset:16px;pointer-events:none;z-index:2} #layer .win{pointer-events:auto} /* ---------- Ventanas ---------- */ .win{position:absolute;container-type:inline-size;display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;max-height:100%;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);animation:winIn .16s ease-out} @keyframes winIn{from{transform:scale(.97);opacity:.55}to{transform:none;opacity:1}} .win.max{left:0!important;top:0!important;width:100%!important;height:100%!important} .win-title{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 6px 4px 10px;background:var(--title-bg);color:var(--title-fg);font-family:var(--f-title);cursor:grab;user-select:none;touch-action:none;border-radius:max(0px,calc(var(--radius) - var(--bw))) max(0px,calc(var(--radius) - var(--bw))) 0 0;flex:none} .win-title:active{cursor:grabbing} .win-title h2{margin:0;font-size:16px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wt-icon{display:grid;place-items:center;width:20px;height:20px;flex:none} .wt-icon svg{width:18px;height:18px} .wt-btns{display:flex;gap:6px;flex:none} .wb{display:grid;place-items:center;width:28px;height:24px;padding:0;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer} .wb svg{width:12px;height:12px} .win.inactive .win-title{filter:saturate(.5) brightness(.9)} .win-body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--wb-pad,16px);box-sizing:border-box} /* ---------- Barra de tareas y menú ---------- */ #bar{position:fixed;z-index:50;left:0;right:0;bottom:0;height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px));padding:0 8px env(safe-area-inset-bottom,0px);box-sizing:border-box;display:flex;align-items:center;gap:8px;background:var(--bar-bg);color:var(--bar-fg);border-top:var(--bar-border)} #start{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--btn-border);background:var(--pri-bg);color:var(--pri-fg);border-radius:max(0px,calc(var(--radius)*.6));font-family:var(--f-title);font-weight:700;font-size:15px;cursor:pointer;flex:none} #start svg{width:22px;height:22px} #tasks{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} #tasks::-webkit-scrollbar{display:none} .task{display:flex;align-items:center;gap:6px;max-width:180px;height:32px;padding:0 10px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer;white-space:nowrap;flex:none} .task[aria-pressed="true"]{background:var(--menu-hi);font-weight:700} .task svg{width:16px;height:16px;flex:none} .task span{overflow:hidden;text-overflow:ellipsis} .tray{display:flex;align-items:center;gap:8px;flex:none} :is(#snd,.tray-b){display:grid;place-items:center;width:36px;height:32px;padding:0;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer} :is(#snd,.tray-b) svg{width:18px;height:18px} .clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;font-variant-numeric:tabular-nums;padding-right:4px;white-space:nowrap} .clock{margin:0;padding:3px 6px 3px 8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} /* 1.19: un botón (abre el reloj inteligente) */ .clock:hover{background:color-mix(in srgb,currentColor 12%,transparent)} .clock[aria-expanded="true"]{background:color-mix(in srgb,currentColor 18%,transparent)} .clock:focus-visible{outline:2px solid var(--accent);outline-offset:1px} #clk-time{font-size:14px;font-weight:700} #clk-day{font-size:11px;opacity:.85} .menu{position:fixed;z-index:60;left:8px;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 6px);width:280px;max-width:calc(100vw - 16px);max-height:calc(100% - var(--bar-h) - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px) - 18px);overflow:auto;padding:8px;box-sizing:border-box;background:var(--menu-bg);color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px} .menu-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--cell-line)} .menu-head svg{width:32px;height:32px;color:var(--accent);flex:none} .menu-head b{display:block;font-family:var(--f-title);font-size:18px;font-weight:700} .menu-head span{font-size:12px;color:var(--muted)} .mi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;text-align:left;border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer;color:inherit} .mi svg{width:20px;height:20px;flex:none} a.mi{text-decoration:none;box-sizing:border-box} a.tray-b{text-decoration:none;box-sizing:border-box}.kofi-tray svg{width:19px;height:19px}.kofi-tray svg path:last-child{fill:var(--accent)}.kofi-tray:hover svg path:last-child{transform:scale(1.15);transform-origin:10px 13.5px;transition:transform .15s} .mi-kofi span{display:flex;flex-direction:column;line-height:1.2}.mi-kofi small{font-size:11px;color:var(--muted)}.mi-kofi svg{color:var(--accent)} .mi:hover{background:var(--menu-hi)} .menu hr{border:0;border-top:1px solid var(--cell-line);margin:6px 4px} .menu-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px} .seg{display:flex;border:1px solid var(--btn-border);border-radius:max(0px,calc(var(--radius)*.45));overflow:hidden} .seg button{border:0;background:var(--btn-bg);color:var(--btn-fg);padding:4px 12px;cursor:pointer;font-weight:700} .seg button[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} /* ---------- Encendido ---------- */ #power{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);color:var(--fg);padding:16px;box-sizing:border-box} .pw-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .pw-inner svg{width:72px;height:72px;color:var(--accent)} [data-os="vaporwave"] #power{color:#fff} [data-os="cristal"] #power{color:var(--fg)} .pw-name{font-family:var(--f-mark);font-size:clamp(34px,7vw,72px);line-height:1.05} .pw-bar{width:min(300px,70vw);height:10px;border:1px solid currentColor;border-radius:999px;overflow:hidden;opacity:.9} .pw-bar i{display:block;height:100%;width:0;background:currentColor} #power.booting .pw-bar i{animation:boot 1.7s ease-in-out forwards} @keyframes boot{to{width:100%}} .pw-msg{margin:0;max-width:34ch;font-size:16px} #toast{position:fixed;z-index:70;left:50%;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 16px;box-sizing:border-box;background:var(--menu-bg);color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s} #toast.show{opacity:1} /* ---------- Controles ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 14px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.55));cursor:pointer;font-weight:700;white-space:nowrap} .btn svg{width:16px;height:16px;flex:none} .btn.primary{background:var(--pri-bg);color:var(--pri-fg)} .btn:active{transform:translateY(1px)} .lnk{border:0;background:none;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font-weight:700} .iconbtn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:50%;cursor:pointer;flex:none} .iconbtn svg{width:16px;height:16px} .iconbtn.primary{background:var(--pri-bg);color:var(--pri-fg)} /* ---------- Ocho Notas ---------- */ .win-body > .on{display:flex;flex-direction:column;gap:14px} .on-head{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:end} .on-meta{grid-column:1/-1;display:flex;gap:12px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums} .on-meta b{color:var(--win-fg)} .on-mode{margin:0;font-family:var(--f-title);font-size:clamp(24px,3.4vw,32px);line-height:1.1;font-weight:700;text-wrap:balance} .on-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin:0;padding:0;list-style:none} .chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 9px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:999px;cursor:pointer;font-weight:700;font-variant-numeric:tabular-nums} .chip.tonic{box-shadow:inset 0 0 0 2px var(--accent)} .tabs{display:flex;gap:4px;border-bottom:1px solid var(--cell-line);overflow-x:auto} .tab{border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:700;white-space:nowrap} .tab[aria-selected="true"]{color:var(--win-fg);border-bottom-color:var(--accent)} .panel{display:flex;flex-direction:column;gap:14px} .on-example{margin:0;padding:8px 12px;border:1px dashed var(--btn-border);border-radius:max(0px,calc(var(--radius)*.45));font-size:14px} .seq-wrap{overflow-x:auto;padding:2px} .seq{display:grid;gap:3px;user-select:none} .lab{display:flex;align-items:center;justify-content:flex-end;padding:0 6px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} .lab.tonic{color:var(--accent)} .lab.top{justify-content:center;padding:0 0 2px} .bt{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .cell{display:block;width:100%;height:100%;min-width:0;min-height:28px;padding:0;border:1px solid var(--cell-line);background:var(--cell-bg);border-radius:max(0px,calc(var(--radius)*.3));cursor:pointer;box-sizing:border-box} .cell.alt{background:var(--cell-bg2)} .cell.on{background:var(--cell-on);border-color:transparent} .cell.play{box-shadow:inset 0 0 0 999px var(--cell-play)} .cell.on.play{box-shadow:none;filter:brightness(1.3) saturate(1.2)} .seq-head{display:grid;gap:3px;padding-bottom:3px;user-select:none} .on-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px} .transport,.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px} .tog{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .tog input{width:18px;height:18px;margin:0;accent-color:var(--accent)} .tempo{display:inline-flex;align-items:center;gap:8px} .tempo input{width:110px;margin:0;accent-color:var(--accent)} .tempo output{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:700} .on-goals{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px} .goal{display:inline-flex;align-items:center;gap:8px} .goal .mk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--muted);font-size:12px;line-height:1;box-sizing:border-box} .goal.ok .mk{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)} .goal b{font-variant-numeric:tabular-nums} .dots{display:inline-flex;gap:3px} .dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--muted);box-sizing:border-box} .dots i.u{background:var(--accent);border-color:var(--accent)} .box{display:grid;gap:10px;padding:12px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.55));background:var(--cell-bg2)} .share-text{margin:0;font:14px/1.55 var(--f-mono);white-space:pre-wrap;word-break:break-word} .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .status{font-size:13px;color:var(--muted)} .share-fallback{width:100%;min-height:110px;box-sizing:border-box;font:13px/1.45 var(--f-mono);background:var(--cell-bg);color:var(--win-fg);border:1px solid var(--btn-border);border-radius:6px;padding:8px;resize:vertical} .field{display:flex;flex-direction:column;gap:6px} .field label{font-weight:700} .field input{flex:1;min-width:0;min-height:38px;padding:0 10px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));font-family:var(--f-mono);box-sizing:border-box} .hint{margin:0;font-size:13px;color:var(--muted)} .err{margin:0;font-size:14px;color:var(--danger);font-weight:700} .banner{margin:0;padding:10px 12px;border-radius:max(0px,calc(var(--radius)*.45));background:var(--cell-play);font-weight:700} .contour{font:22px/1.2 var(--f-mono);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px} .card-head b{font-family:var(--f-title);font-size:18px} .card-head span{font-size:13px;color:var(--muted)} .streak{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .streak b{font-family:var(--f-title);font-size:30px;line-height:1} .hist{list-style:none;margin:0;padding:0;display:grid;gap:8px} .hist li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.45));background:var(--cell-bg2)} .hist .meta{display:flex;flex-direction:column;min-width:0;gap:2px} .hist .contour{font-size:17px} .hist small{color:var(--muted);font-size:12px} .tag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:700;vertical-align:1px} /* ---------- Temas ---------- */ .intro{margin:0 0 12px;max-width:60ch} .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px} .tcard{display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;border:var(--bw) solid var(--win-border);background:var(--win-bg);color:var(--win-fg);border-radius:max(4px,calc(var(--radius)*.6));cursor:pointer;text-align:left;font-family:var(--f-ui);box-shadow:none} .tcard[aria-pressed="true"]{outline:3px solid var(--focus);outline-offset:3px} .pv{display:block;position:relative;height:88px;border-radius:max(2px,calc(var(--radius)*.4));overflow:hidden;background:var(--pv-bg)} .pv-win{display:block;position:absolute;left:14%;top:18%;width:64%;height:62%;background:var(--win-bg);border:max(1px,calc(var(--bw)*.5)) solid var(--win-border);border-radius:max(0px,calc(var(--radius)*.45));overflow:hidden} .pv-win i{display:block;height:13px;background:var(--title-bg)} .pv-win b{display:block;margin:7px 7px 5px;height:7px;width:62%;background:var(--cell-on);border-radius:3px} .pv-win em{display:block;margin:0 7px;height:6px;width:40%;background:var(--cell-line);border-radius:3px} .tname{font-family:var(--f-title);font-size:17px;line-height:1.15;font-weight:700} .tinst{font-size:12px;color:var(--muted)} .tuse{font-size:12px;font-weight:700;color:var(--accent);min-height:1.2em} /* ---------- Documento y papelera ---------- */ .doc{max-width:62ch} .doc h3{font-family:var(--f-title);font-size:24px;margin:0 0 8px;text-wrap:balance} .doc h4{font-family:var(--f-title);font-size:17px;margin:18px 0 6px} .doc h5{font-family:var(--f-title);font-size:15px;margin:14px 0 4px;opacity:.9} .doc :is(h4,h5)[id]{scroll-margin-top:52px} .doc p,.doc li{margin:0 0 8px} .doc ol{padding-left:22px;margin:0 0 8px} .doc .fine{font-size:13px;color:var(--muted)} .files{display:flex;flex-wrap:wrap;gap:12px} .file{display:flex;flex-direction:column;align-items:center;gap:6px;width:116px;padding:8px;border:0;background:none;cursor:pointer;color:inherit;border-radius:8px;font-size:13px} .file svg{width:38px;height:38px} .file:hover{background:var(--cell-play)} .note-box{margin:0;padding:10px 12px;border:1px solid var(--cell-line);border-radius:6px;background:var(--cell-bg2)} /* ---------- Detalles de cada tema ---------- */ [data-os="steampunk"] .win{background:repeating-linear-gradient(0deg,rgba(120,80,30,.05) 0 1px,transparent 1px 3px),var(--win-bg)} [data-os="steampunk"] .win::after{content:"";position:absolute;inset:-6px;pointer-events:none;border-radius:var(--radius);background: radial-gradient(circle at 3px 3px,#fff3cf 0 .9px,#9c7428 1.4px 2.3px,transparent 2.8px), radial-gradient(circle at calc(100% - 3px) 3px,#fff3cf 0 .9px,#9c7428 1.4px 2.3px,transparent 2.8px), radial-gradient(circle at 3px calc(100% - 3px),#fff3cf 0 .9px,#9c7428 1.4px 2.3px,transparent 2.8px), radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#fff3cf 0 .9px,#9c7428 1.4px 2.3px,transparent 2.8px)} [data-os="steampunk"] .win-title h2{text-shadow:0 1px 0 rgba(255,240,200,.7);letter-spacing:.04em;font-size:18px} [data-os="steampunk"] .wb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1c2,#c9973a 52%,#6e4c18);border-color:#5a3d12} [data-os="steampunk"] .mark-name,[data-os="steampunk"] .pw-name{background:linear-gradient(180deg,#fbe7ad,#c9973a 55%,#6b4410);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.75))} [data-os="steampunk"] .tab[aria-selected="true"]{color:var(--accent)} [data-os="vaporwave"] .win-title{margin:3px 3px 0} [data-os="vaporwave"] .win-title h2{letter-spacing:.06em} [data-os="vaporwave"] .wb,[data-os="vaporwave"] .btn,[data-os="vaporwave"] #start,[data-os="vaporwave"] .task,[data-os="vaporwave"] :is(#snd,.tray-b),[data-os="vaporwave"] .iconbtn{border-radius:0;box-shadow:inset -2px -2px 0 #9b87d8,inset 2px 2px 0 #fff} [data-os="vaporwave"] .btn.primary,[data-os="vaporwave"] #start{box-shadow:inset -2px -2px 0 rgba(43,16,85,.35),inset 2px 2px 0 rgba(255,255,255,.6)} [data-os="vaporwave"] .chip{border-radius:0} [data-os="vaporwave"] .mark-name,[data-os="vaporwave"] .pw-name{color:#fff;text-shadow:3px 3px 0 #ff71ce,6px 6px 0 #01cdfe} [data-os="synthwave"] .win{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} [data-os="synthwave"] .win-title h2{text-shadow:0 0 6px rgba(33,247,255,.9),0 0 18px rgba(33,247,255,.45);letter-spacing:.05em} [data-os="synthwave"] .cell.on{box-shadow:0 0 10px rgba(255,47,214,.75)} [data-os="synthwave"] .btn.primary,[data-os="synthwave"] #start{box-shadow:0 0 16px rgba(255,47,214,.6);border-color:#ff2fd6} [data-os="synthwave"] #bar{box-shadow:0 -6px 26px rgba(255,47,214,.25)} [data-os="synthwave"] .mark-name,[data-os="synthwave"] .pw-name{background:linear-gradient(180deg,#fff 0%,#c9fbff 42%,#ff2fd6 62%,#6a12a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,47,214,.65))} [data-os="cristal"] .win,[data-os="cristal"] #bar,[data-os="cristal"] .menu,[data-os="cristal"] #toast,[data-os="cristal"] .icon .tile{-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)} [data-os="cristal"] .wb{border-radius:50%;width:24px} [data-os="cristal"] .btn{border-radius:999px} [data-os="cristal"] .mark-name{color:rgba(255,255,255,.9);text-shadow:0 6px 30px rgba(70,80,200,.35)} [data-os="liquidmetal"] .win{border-color:transparent;background:linear-gradient(180deg,#2a2e34,#1b1e22) padding-box,linear-gradient(135deg,#ffffff,#6c757f 30%,#e5e9ee 55%,#4b525a 80%,#d5dae0) border-box} [data-os="liquidmetal"] .win-title h2{letter-spacing:.06em;font-size:13px} [data-os="liquidmetal"] .wb{border-radius:50%;width:24px} [data-os="liquidmetal"] .mark-name,[data-os="liquidmetal"] .pw-name{background:linear-gradient(180deg,#fff 0%,#c3cad2 44%,#3a4048 50%,#e4e8ec 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))} [data-os="coderain"] body{text-shadow:0 0 5px rgba(0,255,102,.25)} [data-os="coderain"] .win-title h2{font-size:22px;text-shadow:0 0 8px rgba(0,255,102,.75)} [data-os="coderain"] .win-title h2::before{content:"> "} [data-os="coderain"] .win-title h2::after{content:"_";animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} [data-os="coderain"] .wb,[data-os="coderain"] .btn,[data-os="coderain"] #start,[data-os="coderain"] .task,[data-os="coderain"] :is(#snd,.tray-b),[data-os="coderain"] .chip{border-radius:0} [data-os="coderain"] .mark-name,[data-os="coderain"] .pw-name{color:#00ff66;text-shadow:0 0 14px rgba(0,255,102,.8)} [data-os="coderain"] .mark-name::after,[data-os="coderain"] .pw-name::after{content:"_";animation:blink 1s steps(1) infinite} [data-os="popart"] .win-title{border-bottom:4px solid #111} [data-os="popart"] .win-title h2{font-size:22px;letter-spacing:.04em;font-weight:400} [data-os="popart"] .btn,[data-os="popart"] .wb,[data-os="popart"] #start,[data-os="popart"] .task,[data-os="popart"] :is(#snd,.tray-b),[data-os="popart"] .iconbtn{border-width:3px;border-color:#111;box-shadow:3px 3px 0 #111} [data-os="popart"] .cell{border-width:2px} [data-os="popart"] .tab{font-family:var(--f-title);font-size:18px;font-weight:400;letter-spacing:.03em} [data-os="popart"] .on-mode,[data-os="popart"] .doc h3,[data-os="popart"] .doc h4,[data-os="popart"] .tname,[data-os="popart"] .card-head b,[data-os="popart"] .streak b,[data-os="popart"] .menu-head b{font-weight:400;letter-spacing:.03em} [data-os="popart"] .mark-name,[data-os="popart"] .pw-name{color:#ffde00;-webkit-text-stroke:2px #111;text-shadow:5px 5px 0 #111;transform:rotate(-3deg)} [data-os="kintsugi"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 170 44%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%2230%22 y1=%220%22 x2=%22120%22 y2=%2244%22%3E%3Cstop offset=%220%22 stop-color=%22%239b7428%22/%3E%3Cstop offset=%22.3%22 stop-color=%22%23f3d98b%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23c9973f%22/%3E%3Cstop offset=%22.8%22 stop-color=%22%23f7e3a3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23a07a2c%22/%3E%3C/linearGradient%3E%3Cpath id=%22k%22 d=%22M100.0 -6.5 98.5 -3.7 96.7 -1.0 94.9 1.6 93.1 4.3 92.0 5.6 90.9 6.9 89.6 8.0 88.4 9.0 86.9 9.8 84.9 10.5 83.2 12.1 81.8 13.4 80.2 14.6 78.5 15.8 77.0 17.3 75.5 18.6 73.9 19.8 72.3 21.1 70.9 22.1 69.6 23.0 68.1 23.7 66.4 24.5 64.9 25.6 63.4 26.7 61.8 27.7 60.3 28.9 59.0 30.4 57.8 31.7 56.6 32.9 55.2 34.2 53.3 36.3 51.0 38.4 49.9 41.5 48.9 44.2 47.4 46.7 46.0 49.5 48.0 50.5 49.4 47.8 51.0 45.2 52.1 42.3 53.0 39.6 55.0 38.0 56.8 35.8 58.1 34.6 59.5 33.3 60.7 31.9 61.9 30.6 63.2 29.6 64.7 28.5 66.2 27.5 67.6 26.5 69.1 25.7 70.7 25.0 72.3 24.0 73.7 22.9 75.3 21.6 77.0 20.4 78.5 19.0 80.0 17.6 81.6 16.5 83.3 15.2 84.8 13.7 86.1 12.5 87.8 12.0 89.6 11.0 91.1 9.8 92.5 8.5 93.7 7.1 94.9 5.7 96.7 2.9 98.6 0.3 100.5 -2.5 102.0 -5.5ZM66.7 26.3 69.0 27.2 71.3 28.0 73.4 29.2 75.7 30.3 78.5 31.1 81.3 31.9 84.1 32.7 86.8 33.7 89.4 33.8 91.9 34.2 94.0 34.7 96.2 35.2 98.4 35.6 100.5 36.1 102.6 36.8 104.7 37.5 106.8 38.1 108.9 38.8 111.9 39.4 114.9 40.0 118.0 40.2 121.0 40.6 121.0 40.4 118.0 40.0 115.0 39.6 112.0 39.0 109.1 38.2 107.0 37.5 104.9 36.7 102.8 36.0 100.7 35.2 98.6 34.7 96.4 34.2 94.3 33.6 92.1 33.0 89.6 32.5 87.2 32.3 84.5 31.3 81.8 30.4 79.0 29.5 76.3 28.7 74.2 27.7 71.9 26.5 69.6 25.6 67.3 24.7ZM85.7 10.9 83.3 10.3 80.9 9.6 78.5 9.0 76.1 8.5 73.8 8.4 71.5 8.2 69.3 8.0 67.0 8.1 65.3 7.8 63.5 7.5 61.8 7.0 60.0 6.4 60.0 6.6 61.7 7.1 63.4 7.8 65.2 8.2 67.0 8.7 69.2 8.7 71.5 8.9 73.7 9.2 75.9 9.5 78.3 10.0 80.6 10.8 83.0 11.4 85.3 12.1Z%22/%3E%3C/defs%3E%3Cuse href=%22%23k%22 x=%22.6%22 y=%22.8%22 fill=%22%23000%22 fill-opacity=%22.5%22/%3E%3Cuse href=%22%23k%22 x=%22-.3%22 y=%22-.38%22 fill=%22%23fff4c8%22 fill-opacity=%22.62%22/%3E%3Cuse href=%22%23k%22 fill=%22url(%23g)%22/%3E%3C/svg%3E") right 96px center/170px 100% no-repeat,var(--title-bg);border-bottom:1px solid rgba(217,178,95,.35)} [data-os="kintsugi"] .win-title h2{letter-spacing:.05em} @container (max-width:560px){ [data-os="kintsugi"] .win-title{background-position:right 100px center;background-size:96px 100%} } [data-os="kintsugi"] .wb{border-radius:50%;width:24px} [data-os="kintsugi"] .mark-name,[data-os="kintsugi"] .pw-name{background:linear-gradient(100deg,#8a6a24,#f3d98b 45%,#b88a35 70%,#f7e3a3);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- 0.2: piezas compartidas ---------- */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bar{display:block;height:8px;border-radius:99px;background:var(--cell-bg);border:1px solid var(--cell-line);overflow:hidden} .bar i{display:block;height:100%;background:var(--accent);border-radius:99px} .bar.sm{height:6px;margin-top:4px} .btn[disabled]{opacity:.45;cursor:not-allowed} kbd{font:700 11px/1 var(--f-mono);padding:2px 5px;border:1px solid var(--btn-border);border-radius:4px;background:var(--cell-bg2);color:var(--win-fg)} .tbl-wrap{overflow-x:auto} .rec-tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums} .rec-tbl th,.rec-tbl td{padding:6px 8px;border-bottom:1px solid var(--cell-line);text-align:left;white-space:nowrap} .rec-tbl th{color:var(--muted);font-size:12px} .rec-tbl td:nth-child(n+2){text-align:right} .rec-tbl th:nth-child(n+2){text-align:right} .icons{grid-auto-flow:column;grid-template-rows:repeat(auto-fill,minmax(88px,auto));grid-template-columns:none;grid-auto-columns:96px;height:100%;width:max-content;align-content:start;justify-content:start} .icon .lbl{max-width:92px} /* barra: avatar y avisos */ .me{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--btn-border);background:var(--btn-bg);border-radius:50%;overflow:hidden;cursor:pointer;flex:none} .me .av{width:100%;height:100%;display:block} #notes{position:fixed;z-index:80;right:12px;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 12px);display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 24px)} .note-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;width:320px;max-width:100%;padding:10px 12px;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:var(--menu-bg);color:var(--menu-fg);box-shadow:var(--shadow);text-align:left;cursor:pointer;transform:translateX(30px);opacity:0;transition:transform .25s,opacity .25s} .note-toast.show{transform:none;opacity:1} .nt-t{display:flex;flex-direction:column;min-width:0;gap:1px} .nt-t small{font-size:11px;color:var(--muted);font-weight:700} .nt-t b{font-family:var(--f-title);font-size:15px;line-height:1.2} .nt-t em{font-style:normal;font-size:12px;color:var(--accent);font-weight:700} .nt-card .gcard{width:44px} .ach-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg);color:var(--muted);border:1px solid var(--cell-line);flex:none} .ach-ic.on{background:var(--pri-bg);color:var(--pri-fg);border-color:var(--btn-border)} .ach-ic svg{width:26px;height:26px} .lvring{--lv:#9b9b9b;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:3px solid var(--lv);font:700 13px/1 var(--f-ui);color:var(--win-fg);background:var(--cell-bg);flex:none;font-variant-numeric:tabular-nums} .lvring.big{width:52px;height:52px;border-width:4px;font-size:20px} /* ---------- Sísifo Feliz ---------- */ .sf-body-host{padding:12px} .sf{display:flex;flex-direction:column;min-height:0} .sf-menu{display:flex;flex-direction:column;gap:12px} .sf-head{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:center} .sf-head canvas{width:240px;height:120px;image-rendering:pixelated;border-radius:max(4px,calc(var(--radius)*.5));display:block;border:1px solid var(--cell-line)} .sf-head h3{margin:0;font-family:var(--f-title);font-size:clamp(22px,3vw,30px);line-height:1.1} .sf-head p{margin:4px 0 0;max-width:52ch;color:var(--muted);font-size:14px} .sf-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start} .sf-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:430px;overflow:auto;padding-right:4px} .sf-item{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0 10px;width:100%;padding:8px 10px;border:1px solid transparent;background:none;border-radius:max(4px,calc(var(--radius)*.45));text-align:left;cursor:pointer;color:inherit} .sf-item:hover{background:var(--cell-play)} .sf-item[aria-pressed="true"]{background:var(--cell-bg2);border-color:var(--btn-border)} .sf-it-t{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-it-s{grid-column:1;font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sf-it-r{grid-row:1/3;grid-column:2;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;font-size:13px} .sf-peak{display:inline-flex;color:var(--accent);vertical-align:-3px} .sf-peak svg{width:16px;height:16px} .sf-lvl{display:inline-flex;gap:3px} .sf-lvl i{width:7px;height:7px;border-radius:50%;border:1px solid var(--muted)} .sf-lvl i.on{background:var(--accent);border-color:var(--accent)} .sf-detail{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2)} .sf-detail h4{margin:0;font-family:var(--f-title);font-size:22px;line-height:1.15} .sf-meta,.sf-desc,.sf-best{margin:0;font-size:13px;color:var(--muted)} .sf-desc{color:var(--win-fg)} .sf-best b{color:var(--win-fg)} .sf-chips{justify-content:flex-start} .sf-chips .chip{gap:6px;padding:0 8px} .sf-chips kbd{font-size:10px;padding:1px 4px} .sf-opts{display:grid;gap:2px;margin:2px -10px 0} .sf-opts .menu-row{flex-wrap:wrap} .sf-midi .status{flex:1;min-width:12ch} .sf-go{align-self:flex-start;min-height:44px;padding:0 22px;font-size:16px} .sf-empty{padding:16px} .sf-stage{position:relative;height:calc(100vh + var(--fw-gain,0px) - 210px);height:calc(100dvh + var(--fw-gain,0px) - 210px);max-height:640px;min-height:340px;border-radius:max(4px,calc(var(--radius)*.5));overflow:hidden;background:var(--cell-bg2)} .sf-stage canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;outline:none} .sf-top{position:absolute;top:8px;right:8px;display:flex;gap:6px} .sf-over{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.35);overflow:auto} .sf-over.res{align-items:end;background:linear-gradient(to bottom,transparent 0,transparent var(--scene,140px),rgba(0,0,0,.4) var(--scene,140px))} .sf-card{width:min(460px,100%);display:flex;flex-direction:column;gap:10px;padding:18px;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:var(--win-bg);color:var(--win-fg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .sf-card h3{margin:0;font-family:var(--f-title);font-size:28px;line-height:1.1} .sf-kick{margin:0;font-size:13px;color:var(--muted);font-weight:700} .sf-quote{margin:0;font-style:italic;max-width:46ch} .sf-big{margin:0;font-family:var(--f-title);font-size:40px;line-height:1;font-variant-numeric:tabular-nums} .sf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 14px;margin:0} .sf-stats div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--cell-line);padding:3px 0} .sf-stats dt{color:var(--muted);font-size:13px} .sf-stats dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums} .sf-stats small{font-weight:400;color:var(--muted)} /* ---------- Avatares ---------- */ .ave{display:grid;grid-template-columns:minmax(220px,clamp(320px,42%,720px)) minmax(0,1fr);gap:18px;align-items:start} .ave-prev{display:flex;flex-direction:column;gap:10px;align-items:stretch;position:sticky;top:0} .ave-prev>.seg{align-self:flex-start} .ave-stage{aspect-ratio:1;max-width:100%;width:min(100%,calc(100vh - 230px));align-self:center;border-radius:max(6px,var(--radius));overflow:hidden;background:var(--pv-bg);border:1px solid var(--cell-line);display:grid;place-items:center} .ave-stage .av-big{width:100%;height:100%;display:block} .ave-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab} .ave-stage canvas:active{cursor:grabbing} .ave-edit{min-width:0;display:flex;flex-direction:column;gap:10px} .ave-panel{display:flex;flex-direction:column;gap:14px} .ave-grp h4{margin:0 0 6px;font-size:14px;color:var(--muted)} .ave-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px} .ave-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 4px 6px;border:1px solid var(--cell-line);background:var(--cell-bg);border-radius:max(4px,calc(var(--radius)*.5));cursor:pointer;color:inherit;font-size:11px;line-height:1.2;text-align:center} .ave-opt .av-th{width:64px;height:64px;display:block;border-radius:50%} .ave-opt[aria-pressed="true"]{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent} .ave-cols{display:flex;flex-wrap:wrap;gap:8px} .ave-sw{width:34px;height:34px;border-radius:50%;border:2px solid var(--cell-line);cursor:pointer;padding:0} .ave-sw[aria-pressed="true"]{outline:3px solid var(--focus);outline-offset:2px} .ave-sw.theme{width:auto;padding:0 12px;border-radius:99px;background:var(--pri-bg);color:var(--pri-fg);font-size:12px;font-weight:700} /* ---------- Perfil ---------- */ .pf{display:flex;flex-direction:column;gap:12px} .pf-body{display:flex;flex-direction:column;gap:14px} .pf-head{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center} .pf-av .av-pf{width:120px;height:120px;display:block;border-radius:50%;box-shadow:0 0 0 3px var(--accent)} .pf-id{display:flex;flex-direction:column;gap:10px;min-width:0} .pf-id input{font-family:var(--f-title);font-size:20px;min-height:42px} .pf-lv{display:flex;align-items:center;gap:12px} .pf-xp{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0} .pf-xp small{color:var(--muted);font-size:12px} .pf-sec{display:flex;flex-direction:column;gap:8px} .pf-sec h4{margin:0;font-family:var(--f-title);font-size:17px} .pf-sec p{margin:0} .pf-count{margin:0;color:var(--muted)} .pf-badges{display:flex;flex-wrap:wrap;gap:12px} .pf-badge{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;text-align:center} .pf-badge small{font-size:11px;color:var(--muted);line-height:1.2} .badge-ic{display:inline-block;width:52px;height:52px;flex:none} .badge-ic svg{width:100%;height:100%;display:block} .badge-ic.foil svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.6)) saturate(1.4)} .pf-sets{display:grid;gap:8px} .pf-set{display:grid;grid-template-columns:130px 1fr 64px;gap:10px;align-items:center;font-size:14px} .pf-set small{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums} .ach-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .ach{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.45));background:var(--cell-bg2)} .ach:not(.on){opacity:.78} .ach-t{display:flex;flex-direction:column;gap:2px;min-width:0} .ach-t span{font-size:13px;color:var(--muted)} .ach-t small{font-size:11px;color:var(--muted)} .ach-x{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;text-align:right} .ach-x small{color:var(--muted)} .ach-list.compact .ach{padding:6px 8px} .pf-setsel{align-self:flex-start;flex-wrap:wrap} .pf-setsel small{opacity:.75;font-weight:400} .gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px} .gcard{position:relative;display:flex;flex-direction:column;gap:4px;aspect-ratio:5/7;padding:7px;border-radius:9px;overflow:hidden;box-sizing:border-box;color:#2b1d12;background:linear-gradient(160deg,#fff8e8,#efe0bd);border:2px solid #b8913f;box-shadow:0 4px 12px rgba(0,0,0,.28)} .gcard.mini{padding:3px;gap:1px;border-width:1px;border-radius:5px} .gcard.mini .gc-t{font-size:6px} .gcard.mini .gc-n{display:none} .gc-art{flex:1;min-height:0;display:grid;place-items:center;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.55)} .gc-art svg{width:100%;height:auto;display:block} .gc-t{font:700 12px/1.15 'IM Fell English SC',Georgia,serif;text-align:center} .gc-s{font-size:9.5px;line-height:1.2;text-align:center;opacity:.8} .gc-n{position:absolute;top:4px;left:6px;font:700 9px/1 var(--f-mono);opacity:.6} .gc-c{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:99px;background:#1b1b1f;color:#fff;font:700 10px/1.3 var(--f-ui)} .staff line{stroke:#2b1d12;stroke-width:.8} .staff line.stem{stroke-width:1} .staff ellipse{fill:#2b1d12} .staff .acc{font-size:8px;fill:#2b1d12} .gcard.set-modos{background:linear-gradient(160deg,#f4f8ff,#d7e6ff);border-color:#2d6cb5;color:#13305a} .gcard.set-modos .gc-t{font-family:'Cinzel','IM Fell English SC',Georgia,serif} .mode-steps rect{fill:#2d6cb5} .mode-steps rect.ch{fill:#e0a92e} .mode-steps text{font:700 7px var(--f-mono);fill:#13305a} .gcard.set-temas{background:var(--win-bg);color:var(--win-fg);border-color:var(--win-border)} .gcard.set-temas .gc-t{font-family:var(--f-title)} .gcard.set-temas .gc-art{background:var(--pv-bg)} .gcard.set-temas .pv{width:100%;height:100%;border-radius:0} .gcard.back{display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--cell-bg) 0 8px,var(--cell-bg2) 8px 16px);border:2px dashed var(--cell-line);box-shadow:none;color:var(--muted)} .gc-q{font:700 34px/1 var(--f-title)} .pf-craft{display:flex;flex-direction:column;gap:8px} .badge-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .badge-list li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.45));background:var(--cell-bg2)} .badge-list li span{display:flex;flex-direction:column;gap:2px} .badge-list small{color:var(--muted);font-size:12px} .badge-list .xp{font-size:13px;color:var(--accent)} .menu-head .av{width:40px;height:40px;border-radius:50%;flex:none} .menu-head .lvring{margin-left:auto} @media (max-width:720px){ .icons{grid-auto-flow:row;grid-template-columns:repeat(4,78px);grid-template-rows:none;grid-auto-columns:auto;height:auto} .sf-head{grid-template-columns:1fr} .sf-head canvas{width:100%;height:120px} .sf-cols{grid-template-columns:1fr} .sf-list{max-height:none} .sf-stage{height:calc(100vh + var(--fw-gain,0px) - var(--bar-h) - 90px);height:calc(100dvh + var(--fw-gain,0px) - var(--bar-h) - 90px);max-height:none} .ave{grid-template-columns:1fr} .ave-prev{position:static} .ave-stage{width:min(100%,320px);align-self:center} .pf-head{grid-template-columns:84px 1fr} .pf-av .av-pf{width:84px;height:84px} .pf-set{grid-template-columns:100px 1fr 54px} .note-toast{width:280px} } /* 1.12 · el ícono chico es el emblema oficial a color (marca_icono.js): sin el trazo ni el relleno que heredan los íconos de línea */ svg.arc-logo{fill:none;stroke:none;overflow:visible} svg.arc-logo path:not([stroke]){stroke:none!important} /* ================= Temas 0.2 (generado por themes/gen.py) ================= */ [data-os="kzafiro"]{--bg:#081230;--fg:#ece6d8;--muted:#909196;--accent:#e3c06e;--accent-fg:#1a1306;--danger:#ff8a7a;--win-bg:#101b3c;--win-fg:#ece6d8;--win-border:rgba(227,192,110,0.55);--bw:1px;--radius:8px;--shadow:0 24px 64px rgba(0,0,0,.62);--title-bg:#0c1633;--title-fg:#ecd08a;--btn-bg:rgba(255,255,255,.04);--btn-fg:#ecd08a;--btn-border:rgba(227,192,110,.6);--pri-bg:linear-gradient(135deg,#f6dc8c,#c9973f 60%,#9b7428);--pri-fg:#1a1306;--cell-bg:#1b2544;--cell-bg2:#262f4c;--cell-line:#3c445b;--cell-on:linear-gradient(135deg,#f6dc8c,#c9973f 55%,#8e6a24);--cell-play:rgba(227,192,110,0.22);--bar-bg:rgba(5,12,31,0.93);--bar-fg:#ffffff;--bar-border:1px solid rgba(227,192,110,.45);--menu-bg:#101b3c;--menu-fg:#ece6d8;--menu-hi:rgba(227,192,110,0.16);--focus:#e3c06e;--icon-bg:#101b3c;--icon-fg:#ecd08a;--icon-border:rgba(227,192,110,.7);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 8px 20px rgba(0,0,0,.5);--label-fg:#ffffff;--label-bg:rgba(4,10,26,0.66);--pv-bg:linear-gradient(118deg,transparent 46%,#ecd08a 47%,transparent 48.5%),linear-gradient(30deg,transparent 60%,#c9973f 61%,transparent 62%),radial-gradient(circle at 40% 40%,#2a4f9e,#060d24);--f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif;--glow:rgba(227,192,110,0.75);--glow2:rgba(227,192,110,0.3);--ink:#ece6d8;--client:#101b3c;--frame:inset 0 0 0 1px rgba(227,192,110,0.7),inset 0 0 0 5px #101b3c,inset 0 0 0 6px rgba(227,192,110,0.4);color-scheme:dark} [data-os="kzafiro"] .mark-name,[data-os="kzafiro"] .pw-name{background:linear-gradient(100deg,#947d48,#f0dcaf 45%,#e3c06e 70%,#f2e3be);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="krubi"]{--bg:#1a0509;--fg:#ece6d8;--muted:#988984;--accent:#e3c06e;--accent-fg:#1a1306;--danger:#ff8a7a;--win-bg:#24090f;--win-fg:#ece6d8;--win-border:rgba(227,192,110,0.55);--bw:1px;--radius:8px;--shadow:0 24px 64px rgba(0,0,0,.62);--title-bg:#1d070c;--title-fg:#ecd08a;--btn-bg:rgba(255,255,255,.04);--btn-fg:#ecd08a;--btn-border:rgba(227,192,110,.6);--pri-bg:linear-gradient(135deg,#f6dc8c,#c9973f 60%,#9b7428);--pri-fg:#1a1306;--cell-bg:#2e1419;--cell-bg2:#381f23;--cell-line:#4c3537;--cell-on:linear-gradient(135deg,#f6dc8c,#c9973f 55%,#8e6a24);--cell-play:rgba(227,192,110,0.22);--bar-bg:rgba(17,3,6,0.93);--bar-fg:#ffffff;--bar-border:1px solid rgba(227,192,110,.45);--menu-bg:#24090f;--menu-fg:#ece6d8;--menu-hi:rgba(227,192,110,0.16);--focus:#e3c06e;--icon-bg:#24090f;--icon-fg:#ecd08a;--icon-border:rgba(227,192,110,.7);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 8px 20px rgba(0,0,0,.5);--label-fg:#ffffff;--label-bg:rgba(14,3,5,0.66);--pv-bg:linear-gradient(118deg,transparent 46%,#ecd08a 47%,transparent 48.5%),linear-gradient(30deg,transparent 60%,#c9973f 61%,transparent 62%),radial-gradient(circle at 40% 40%,#9e1f33,#1e0408);--f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif;--glow:rgba(227,192,110,0.75);--glow2:rgba(227,192,110,0.3);--ink:#ece6d8;--client:#24090f;--frame:inset 0 0 0 1px rgba(227,192,110,0.7),inset 0 0 0 5px #24090f,inset 0 0 0 6px rgba(227,192,110,0.4);color-scheme:dark} [data-os="krubi"] .mark-name,[data-os="krubi"] .pw-name{background:linear-gradient(100deg,#947d48,#f0dcaf 45%,#e3c06e 70%,#f2e3be);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="kjade"]{--bg:#081a14;--fg:#ece6d8;--muted:#8f9589;--accent:#e3c06e;--accent-fg:#1a1306;--danger:#ff8a7a;--win-bg:#0e241c;--win-fg:#ece6d8;--win-border:rgba(227,192,110,0.55);--bw:1px;--radius:8px;--shadow:0 24px 64px rgba(0,0,0,.62);--title-bg:#0b1f18;--title-fg:#ecd08a;--btn-bg:rgba(255,255,255,.04);--btn-fg:#ecd08a;--btn-border:rgba(227,192,110,.6);--pri-bg:linear-gradient(135deg,#f6dc8c,#c9973f 60%,#9b7428);--pri-fg:#1a1306;--cell-bg:#192e25;--cell-bg2:#24372f;--cell-line:#3a4b42;--cell-on:linear-gradient(135deg,#f6dc8c,#c9973f 55%,#8e6a24);--cell-play:rgba(227,192,110,0.22);--bar-bg:rgba(5,17,13,0.93);--bar-fg:#ffffff;--bar-border:1px solid rgba(227,192,110,.45);--menu-bg:#0e241c;--menu-fg:#ece6d8;--menu-hi:rgba(227,192,110,0.16);--focus:#e3c06e;--icon-bg:#0e241c;--icon-fg:#ecd08a;--icon-border:rgba(227,192,110,.7);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 8px 20px rgba(0,0,0,.5);--label-fg:#ffffff;--label-bg:rgba(4,14,11,0.66);--pv-bg:linear-gradient(118deg,transparent 46%,#ecd08a 47%,transparent 48.5%),linear-gradient(30deg,transparent 60%,#c9973f 61%,transparent 62%),radial-gradient(circle at 40% 40%,#3e8f6c,#071d16);--f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif;--glow:rgba(227,192,110,0.75);--glow2:rgba(227,192,110,0.3);--ink:#ece6d8;--client:#0e241c;--frame:inset 0 0 0 1px rgba(227,192,110,0.7),inset 0 0 0 5px #0e241c,inset 0 0 0 6px rgba(227,192,110,0.4);color-scheme:dark} [data-os="kjade"] .mark-name,[data-os="kjade"] .pw-name{background:linear-gradient(100deg,#947d48,#f0dcaf 45%,#e3c06e 70%,#f2e3be);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="espacial"]{--bg:#04050d;--fg:#e8ecff;--muted:#8c90a3;--accent:#8fb0ff;--accent-fg:#05060f;--danger:#ff8a7a;--win-bg:rgba(14,18,40,.84);--win-fg:#e8ecff;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:18px;--shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);--title-bg:linear-gradient(90deg,rgba(143,176,255,.3),rgba(186,120,255,.12));--title-fg:#e3e9ff;--btn-bg:rgba(143,176,255,.1);--btn-fg:#e8ecff;--btn-border:rgba(143,176,255,.55);--pri-bg:linear-gradient(135deg,#a9c1ff,#cfa6ff);--pri-fg:#05060f;--cell-bg:rgba(255,255,255,.05);--cell-bg2:rgba(255,255,255,.09);--cell-line:rgba(143,176,255,.24);--cell-on:linear-gradient(135deg,#a8c1ff,#7a96d9);--cell-play:rgba(143,176,255,0.22);--bar-bg:rgba(4,5,13,.82);--bar-fg:#ffffff;--bar-border:1px solid rgba(143,176,255,.5);--menu-bg:rgba(12,15,34,.96);--menu-fg:#e8ecff;--menu-hi:rgba(143,176,255,0.16);--focus:#8fb0ff;--icon-bg:#0c1024;--icon-fg:#8fb0ff;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 20px rgba(0,0,0,.18);--label-fg:#ffffff;--label-bg:rgba(2,3,7,0.66);--pv-bg:radial-gradient(circle at 72% 30%,#e9d6ff 0 6px,transparent 7px),radial-gradient(ellipse at 30% 60%,rgba(122,90,255,.55),transparent 60%),radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 1.5px) 0 0/23px 19px,#04050d;--f-title:'Orbitron','Audiowide','Trebuchet MS',sans-serif;--f-ui:'Exo 2','Trebuchet MS',Arial,sans-serif;--f-mark:'Orbitron','Audiowide',sans-serif;--glow:rgba(143,176,255,0.75);--glow2:rgba(143,176,255,0.3);--ink:#e8ecff;--client:#0c1024;--frame:inset 0 0 0 1px rgba(143,176,255,0.7),inset 0 0 0 5px #0c1024,inset 0 0 0 6px rgba(143,176,255,0.4);color-scheme:dark} [data-os="espacial"] .mark-name,[data-os="espacial"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(143,176,255,0.95),0 0 28px rgba(143,176,255,0.6)} [data-os="lunar"]{--bg:#07080b;--fg:#eceef2;--muted:#94969a;--accent:#c3ccd8;--accent-fg:#0b0c10;--danger:#ff8a7a;--win-bg:#1a1c21;--win-fg:#eceef2;--win-border:#64666a;--bw:2px;--radius:12px;--shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.7);--title-bg:linear-gradient(180deg,#eceff3 0%,#b3bac4 48%,#868d97 52%,#c9ced5 100%);--title-fg:#121418;--btn-bg:linear-gradient(180deg,#eef0f3,#a7aeb8);--btn-fg:#121418;--btn-border:#5a616b;--pri-bg:linear-gradient(180deg,#ffffff,#bcc4cd 46%,#6f7782 54%,#dde2e8);--pri-fg:#121418;--cell-bg:#23262c;--cell-bg2:#1e2126;--cell-line:#3a3f47;--cell-on:linear-gradient(135deg,#d0d7e1,#a6adb8);--cell-play:rgba(195,204,216,0.22);--bar-bg:linear-gradient(180deg,#2c3036,#111316);--bar-fg:#ffffff;--bar-border:1px solid #8a939d;--menu-bg:#1a1c21;--menu-fg:#eceef2;--menu-hi:rgba(195,204,216,0.16);--focus:#c3ccd8;--icon-bg:#1a1c21;--icon-fg:#c3ccd8;--icon-border:#64666a;--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 18px rgba(0,0,0,.6);--label-fg:#ffffff;--label-bg:rgba(4,4,6,0.66);--pv-bg:radial-gradient(circle at 28% 28%,#5b8fd6 0 9px,transparent 10px),radial-gradient(ellipse 120% 60% at 50% 110%,#9ba1a8 0 55%,transparent 56%),#07080b;--f-title:'Space Grotesk','Segoe UI',system-ui,sans-serif;--f-ui:'Space Grotesk','Segoe UI',system-ui,sans-serif;--f-mark:'Space Grotesk','Segoe UI',sans-serif;--glow:rgba(195,204,216,0.75);--glow2:rgba(195,204,216,0.3);--ink:#eceef2;--client:#1a1c21;--frame:inset 0 0 0 1px rgba(195,204,216,0.7),inset 0 0 0 5px #1a1c21,inset 0 0 0 6px rgba(195,204,216,0.4);color-scheme:dark} [data-os="lunar"] .mark-name,[data-os="lunar"] .pw-name{background:linear-gradient(180deg,#ffffff 0%,#c3cad2 44%,#5a616a 52%,#e4e8ec 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))} [data-os="marciano"]{--bg:#2a0f08;--fg:#ffe7d6;--muted:#7e5f52;--accent:#b8441f;--accent-fg:#fff3ea;--danger:#b3261e;--win-bg:#f7e4d6;--win-fg:#3a1408;--win-border:#b59b8e;--bw:1px;--radius:8px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#d4683f,#ad3b1d 60%,#8a2c14);--title-fg:#fff3ea;--btn-bg:linear-gradient(180deg,#fdeee3,#ecc6ab);--btn-fg:#3a1408;--btn-border:#9a3218;--pri-bg:linear-gradient(180deg,#d65a32,#9a3218);--pri-fg:#fff3ea;--cell-bg:#eedacc;--cell-bg2:#e4cfc1;--cell-line:#d1baad;--cell-on:linear-gradient(135deg,#c86d50,#9c3a1a);--cell-play:rgba(184,68,31,0.22);--bar-bg:linear-gradient(180deg,#6b2412,#2a0f08);--bar-fg:#ffe7d6;--bar-border:2px solid #e8835a;--menu-bg:#f7e4d6;--menu-fg:#3a1408;--menu-hi:rgba(184,68,31,0.16);--focus:#b8441f;--icon-bg:#f7e4d6;--icon-fg:#b8441f;--icon-border:#b59b8e;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(23,8,4,0.66);--pv-bg:radial-gradient(circle at 75% 22%,#fff1d0 0 5px,transparent 6px),linear-gradient(170deg,transparent 58%,#b5532c 59%,#7a2f15 80%),linear-gradient(#e9b58e,#c77c55);--f-title:'Rajdhani','Exo 2','Arial Narrow',sans-serif;--f-ui:'Rajdhani','Exo 2',Arial,sans-serif;--f-mark:'Rajdhani','Exo 2',sans-serif;--glow:rgba(184,68,31,0.75);--glow2:rgba(184,68,31,0.3);--ink:#3a1408;--client:#f7e4d6;--frame:inset 0 0 0 1px rgba(184,68,31,0.7),inset 0 0 0 5px #f7e4d6,inset 0 0 0 6px rgba(184,68,31,0.4);color-scheme:light} [data-os="marciano"] .mark-name,[data-os="marciano"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="nebulosa"]{--bg:#0d0618;--fg:#f3e8ff;--muted:#9b8ea8;--accent:#ff86dd;--accent-fg:#1a0620;--danger:#ff8a7a;--win-bg:rgba(32,14,54,.84);--win-fg:#f6ecff;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:18px;--shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);--title-bg:linear-gradient(90deg,rgba(255,134,221,.34),rgba(122,140,255,.24));--title-fg:#ffe6f7;--btn-bg:rgba(255,134,221,.1);--btn-fg:#f6ecff;--btn-border:rgba(255,134,221,.55);--pri-bg:linear-gradient(135deg,#ff9be3,#a7b2ff);--pri-fg:#1a0620;--cell-bg:rgba(255,255,255,.05);--cell-bg2:rgba(255,255,255,.09);--cell-line:rgba(255,134,221,.24);--cell-on:linear-gradient(135deg,#ffa1e4,#d972bc);--cell-play:rgba(255,134,221,0.22);--bar-bg:rgba(13,6,24,.82);--bar-fg:#ffffff;--bar-border:1px solid rgba(255,134,221,.5);--menu-bg:rgba(26,11,44,.96);--menu-fg:#f6ecff;--menu-hi:rgba(255,134,221,0.16);--focus:#ff86dd;--icon-bg:#1d0d31;--icon-fg:#ff86dd;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 20px rgba(0,0,0,.18);--label-fg:#ffffff;--label-bg:rgba(7,3,13,0.66);--pv-bg:radial-gradient(ellipse at 35% 45%,rgba(255,110,200,.75),transparent 55%),radial-gradient(ellipse at 70% 60%,rgba(110,130,255,.7),transparent 55%),radial-gradient(circle at 20% 20%,#fff 0 1px,transparent 1.5px) 0 0/19px 17px,#0d0618;--f-title:'Comfortaa','Quicksand','Segoe UI',sans-serif;--f-ui:'Quicksand','Segoe UI',system-ui,sans-serif;--f-mark:'Comfortaa','Quicksand',sans-serif;--glow:rgba(255,134,221,0.75);--glow2:rgba(255,134,221,0.3);--ink:#f6ecff;--client:#1d0d31;--frame:inset 0 0 0 1px rgba(255,134,221,0.7),inset 0 0 0 5px #1d0d31,inset 0 0 0 6px rgba(255,134,221,0.4);color-scheme:dark} [data-os="nebulosa"] .mark-name,[data-os="nebulosa"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(255,134,221,0.95),0 0 28px rgba(255,134,221,0.6)} [data-os="eclipse"]{--bg:#030303;--fg:#f1ece0;--muted:#939089;--accent:#f2c45a;--accent-fg:#140e02;--danger:#ff8a7a;--win-bg:#121212;--win-fg:#f1ece0;--win-border:#605e5a;--bw:1px;--radius:6px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#1b1b1b,#0d0d0d);--title-fg:#f2c45a;--btn-bg:rgba(255,255,255,.04);--btn-fg:#f1ece0;--btn-border:rgba(242,196,90,.55);--pri-bg:linear-gradient(135deg,#ffe29a,#e0a93a);--pri-fg:#140e02;--cell-bg:#1a1a1a;--cell-bg2:#161616;--cell-line:rgba(241,236,224,.12);--cell-on:linear-gradient(135deg,#f5d17e,#cea74c);--cell-play:rgba(242,196,90,0.22);--bar-bg:rgba(3,3,3,.92);--bar-fg:#ffffff;--bar-border:1px solid rgba(242,196,90,.45);--menu-bg:#121212;--menu-fg:#f1ece0;--menu-hi:rgba(242,196,90,0.16);--focus:#f2c45a;--icon-bg:#121212;--icon-fg:#f2c45a;--icon-border:#605e5a;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(2,2,2,0.66);--pv-bg:radial-gradient(circle at 50% 45%,#000 0 15px,#fff6d8 16px,rgba(242,196,90,.6) 19px,transparent 34px),#030303;--f-title:'Playfair Display',Georgia,'Times New Roman',serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Playfair Display',Georgia,serif;--glow:rgba(242,196,90,0.75);--glow2:rgba(242,196,90,0.3);--ink:#f1ece0;--client:#121212;--frame:inset 0 0 0 1px rgba(242,196,90,0.7),inset 0 0 0 5px #121212,inset 0 0 0 6px rgba(242,196,90,0.4);color-scheme:dark} [data-os="eclipse"] .mark-name,[data-os="eclipse"] .pw-name{background:linear-gradient(100deg,#9d7f3a,#f8dfa4 45%,#f2c45a 70%,#f9e4b5);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="orbital"]{--bg:#060a16;--fg:#eef3ff;--muted:#686e7a;--accent:#c24a00;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f3f5f9;--win-fg:#1a2233;--win-border:#9aa4b5;--bw:1px;--radius:4px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#ffffff,#e1e6ee);--title-fg:#1a2233;--btn-bg:linear-gradient(180deg,#ffffff,#e4e8ef);--btn-fg:#1a2233;--btn-border:#8a94a6;--pri-bg:#c24a00;--pri-fg:#ffffff;--cell-bg:#e8eaef;--cell-bg2:#dde0e5;--cell-line:#c8cbd1;--cell-on:linear-gradient(135deg,#cf7238,#a53f00);--cell-play:rgba(194,74,0,0.22);--bar-bg:linear-gradient(180deg,#e9edf3,#c9d0db);--bar-fg:#1a2233;--bar-border:3px solid #c24a00;--menu-bg:#f3f5f9;--menu-fg:#1a2233;--menu-hi:rgba(194,74,0,0.16);--focus:#c24a00;--icon-bg:#f3f5f9;--icon-fg:#c24a00;--icon-border:#9aa4b5;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(3,6,12,0.66);--pv-bg:radial-gradient(ellipse 140% 70% at 50% 120%,#5aa0ff 0 50%,#bde0ff 52%,transparent 56%),radial-gradient(circle at 20% 25%,#fff 0 1px,transparent 1.5px) 0 0/21px 17px,#060a16;--f-title:'Rajdhani','Exo 2','Arial Narrow',sans-serif;--f-ui:'Rajdhani','Exo 2',Arial,sans-serif;--f-mark:'Rajdhani','Exo 2',sans-serif;--glow:rgba(194,74,0,0.75);--glow2:rgba(194,74,0,0.3);--ink:#1a2233;--client:#f3f5f9;--frame:inset 0 0 0 1px rgba(194,74,0,0.7),inset 0 0 0 5px #f3f5f9,inset 0 0 0 6px rgba(194,74,0,0.4);color-scheme:light} [data-os="orbital"] .mark-name,[data-os="orbital"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="orbital"] .win-title{box-shadow:inset 5px 0 0 #c24a00} [data-os="subterraneo"]{--bg:#0b0908;--fg:#efe6dc;--muted:#979089;--accent:#5fe0c6;--accent-fg:#03201a;--danger:#ff8a7a;--win-bg:#1d1916;--win-fg:#efe6dc;--win-border:#66615b;--bw:1px;--radius:6px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#2d2723,#1a1613);--title-fg:#9ff3e2;--btn-bg:rgba(255,255,255,.04);--btn-fg:#efe6dc;--btn-border:rgba(95,224,198,.5);--pri-bg:linear-gradient(135deg,#8ff5df,#3fbfa5);--pri-fg:#03201a;--cell-bg:#25201c;--cell-bg2:#211c19;--cell-line:rgba(239,230,220,.12);--cell-on:linear-gradient(135deg,#82e7d3,#51bea8);--cell-play:rgba(95,224,198,0.22);--bar-bg:rgba(11,9,8,.94);--bar-fg:#ffffff;--bar-border:1px solid rgba(95,224,198,.4);--menu-bg:#1d1916;--menu-fg:#efe6dc;--menu-hi:rgba(95,224,198,0.16);--focus:#5fe0c6;--icon-bg:#1d1916;--icon-fg:#5fe0c6;--icon-border:#66615b;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,5,4,0.66);--pv-bg:linear-gradient(transparent 70%,#1a1512 70%),radial-gradient(circle at 70% 75%,rgba(95,224,198,.9) 0 4px,transparent 12px),radial-gradient(circle at 30% 80%,rgba(190,120,255,.8) 0 3px,transparent 10px),linear-gradient(#17120f,#0b0908);--f-title:'Oswald','Arial Narrow',Impact,sans-serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'Oswald','Arial Narrow',sans-serif;--glow:rgba(95,224,198,0.75);--glow2:rgba(95,224,198,0.3);--ink:#efe6dc;--client:#1d1916;--frame:inset 0 0 0 1px rgba(95,224,198,0.7),inset 0 0 0 5px #1d1916,inset 0 0 0 6px rgba(95,224,198,0.4);color-scheme:dark} [data-os="subterraneo"] .mark-name,[data-os="subterraneo"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(95,224,198,0.95),0 0 28px rgba(95,224,198,0.6)} [data-os="submarino"]{--bg:#021a2b;--fg:#dff6ff;--muted:#859ead;--accent:#46d4ea;--accent-fg:#022030;--danger:#ff8a7a;--win-bg:rgba(4,38,62,.84);--win-fg:#e2f7ff;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:18px;--shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);--title-bg:linear-gradient(180deg,rgba(70,212,234,.34),rgba(70,212,234,.08));--title-fg:#c2f4ff;--btn-bg:rgba(70,212,234,.1);--btn-fg:#e2f7ff;--btn-border:rgba(70,212,234,.55);--pri-bg:linear-gradient(135deg,#8fe9f6,#3fb8d8);--pri-fg:#022030;--cell-bg:rgba(255,255,255,.05);--cell-bg2:rgba(255,255,255,.09);--cell-line:rgba(70,212,234,.24);--cell-on:linear-gradient(135deg,#6fddef,#3cb4c7);--cell-play:rgba(70,212,234,0.22);--bar-bg:rgba(2,22,36,.84);--bar-fg:#ffffff;--bar-border:1px solid rgba(70,212,234,.5);--menu-bg:rgba(4,32,52,.97);--menu-fg:#e2f7ff;--menu-hi:rgba(70,212,234,0.16);--focus:#46d4ea;--icon-bg:#04243b;--icon-fg:#46d4ea;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 20px rgba(0,0,0,.18);--label-fg:#ffffff;--label-bg:rgba(1,14,24,0.66);--pv-bg:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 34%,transparent 40%),radial-gradient(circle at 70% 60%,rgba(255,255,255,.5) 0 2px,transparent 3px),linear-gradient(#1a8db0,#03304d 70%,#021a2b);--f-title:'Comfortaa','Quicksand','Segoe UI',sans-serif;--f-ui:'Quicksand','Segoe UI',system-ui,sans-serif;--f-mark:'Comfortaa','Quicksand',sans-serif;--glow:rgba(70,212,234,0.75);--glow2:rgba(70,212,234,0.3);--ink:#e2f7ff;--client:#04243b;--frame:inset 0 0 0 1px rgba(70,212,234,0.7),inset 0 0 0 5px #04243b,inset 0 0 0 6px rgba(70,212,234,0.4);color-scheme:dark} [data-os="submarino"] .mark-name,[data-os="submarino"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(70,212,234,0.95),0 0 28px rgba(70,212,234,0.6)} [data-os="bosque"]{--bg:#0e1a12;--fg:#f3efe2;--muted:#5f655a;--accent:#2f6b3c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f3efe2;--win-fg:#1f2a1f;--win-border:#5c4a2e;--bw:2px;--radius:8px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#3d6b45,#24472b);--title-fg:#f3efe2;--btn-bg:linear-gradient(180deg,#f8f5ea,#e2dcc8);--btn-fg:#1f2a1f;--btn-border:#5c4a2e;--pri-bg:linear-gradient(180deg,#3f7d4b,#24472b);--pri-fg:#ffffff;--cell-bg:#e8e5d8;--cell-bg2:#dedbce;--cell-line:#c9c8bb;--cell-on:linear-gradient(135deg,#5d8c67,#285b33);--cell-play:rgba(47,107,60,0.22);--bar-bg:linear-gradient(180deg,#2c4a31,#152618);--bar-fg:#f3efe2;--bar-border:2px solid #8a7a4e;--menu-bg:#f3efe2;--menu-fg:#1f2a1f;--menu-hi:rgba(47,107,60,0.16);--focus:#2f6b3c;--icon-bg:#f3efe2;--icon-fg:#2f6b3c;--icon-border:#5c4a2e;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(8,14,10,0.66);--pv-bg:linear-gradient(170deg,transparent 52%,#2b4a33 53%),linear-gradient(190deg,transparent 60%,#1b3322 61%),linear-gradient(#b9cdb8,#7d9c86);--f-title:'DM Serif Display',Georgia,serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'DM Serif Display',Georgia,serif;--glow:rgba(47,107,60,0.75);--glow2:rgba(47,107,60,0.3);--ink:#1f2a1f;--client:#f3efe2;--frame:inset 0 0 0 1px rgba(47,107,60,0.7),inset 0 0 0 5px #f3efe2,inset 0 0 0 6px rgba(47,107,60,0.4);color-scheme:light} [data-os="bosque"] .mark-name,[data-os="bosque"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="selva"]{--bg:#062012;--fg:#f2ffe9;--muted:#546c59;--accent:#c2410c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#eef7e8;--win-fg:#12301c;--win-border:#a1b1a1;--bw:1px;--radius:20px;--shadow:0 16px 40px rgba(194,65,12,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(180deg,#22924f,#126435);--title-fg:#fffbe6;--btn-bg:#ffffff;--btn-fg:#12301c;--btn-border:#6aa57a;--pri-bg:linear-gradient(180deg,#e0612a,#b23a0a);--pri-fg:#ffffff;--cell-bg:#e3edde;--cell-bg2:#d8e3d4;--cell-line:#c2cfbf;--cell-on:linear-gradient(135deg,#cf6b41,#a5370a);--cell-play:rgba(194,65,12,0.22);--bar-bg:linear-gradient(180deg,#0f4a2a,#062012);--bar-fg:#f2ffe9;--bar-border:2px solid #f2b705;--menu-bg:#eef7e8;--menu-fg:#12301c;--menu-hi:rgba(194,65,12,0.16);--focus:#c2410c;--icon-bg:#eef7e8;--icon-fg:#c2410c;--icon-border:#a1b1a1;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(194,65,12,0.25);--label-fg:#ffffff;--label-bg:rgba(3,18,10,0.66);--pv-bg:radial-gradient(ellipse at 10% 20%,#1f7a3a 0 22%,transparent 23%),radial-gradient(ellipse at 90% 15%,#2b8f48 0 25%,transparent 26%),radial-gradient(ellipse at 80% 95%,#145c2c 0 30%,transparent 31%),linear-gradient(#bde8b0,#4fa36a);--f-title:'Fredoka','Nunito',sans-serif;--f-ui:'Fredoka','Nunito',sans-serif;--f-mark:'Righteous','Fredoka',sans-serif;--glow:rgba(194,65,12,0.75);--glow2:rgba(194,65,12,0.3);--ink:#12301c;--client:#eef7e8;--frame:inset 0 0 0 1px rgba(194,65,12,0.7),inset 0 0 0 5px #eef7e8,inset 0 0 0 6px rgba(194,65,12,0.4);color-scheme:light} [data-os="selva"] .mark-name,[data-os="selva"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="desierto"]{--bg:#e9b46c;--fg:#3a2412;--muted:#746251;--accent:#a84a22;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fbf2e3;--win-fg:#3a2412;--win-border:#b7aa9a;--bw:1px;--radius:6px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#f0ad66,#d9853f);--title-fg:#2e1708;--btn-bg:linear-gradient(180deg,#fff8ec,#f0dcc0);--btn-fg:#3a2412;--btn-border:#9a5a2e;--pri-bg:linear-gradient(180deg,#c25a2c,#8f3a16);--pri-fg:#ffffff;--cell-bg:#f1e8d9;--cell-bg2:#e8ddce;--cell-line:#d4c9b9;--cell-on:linear-gradient(135deg,#bb7253,#8f3f1d);--cell-play:rgba(168,74,34,0.22);--bar-bg:linear-gradient(180deg,#a8582a,#6a3216);--bar-fg:#fff2e0;--bar-border:2px solid #f0ad66;--menu-bg:#fbf2e3;--menu-fg:#3a2412;--menu-hi:rgba(168,74,34,0.16);--focus:#a84a22;--icon-bg:#fbf2e3;--icon-fg:#a84a22;--icon-border:#b7aa9a;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#111111;--label-bg:rgba(255,255,255,.75);--pv-bg:radial-gradient(circle at 70% 30%,#fff3c4 0 8px,transparent 9px),linear-gradient(172deg,transparent 55%,#e19a55 56%),linear-gradient(185deg,transparent 68%,#c47a3a 69%),linear-gradient(#ffc98a,#f4a76a);--f-title:'DM Serif Display',Georgia,serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'DM Serif Display',Georgia,serif;--glow:rgba(168,74,34,0.75);--glow2:rgba(168,74,34,0.3);--ink:#3a2412;--client:#fbf2e3;--frame:inset 0 0 0 1px rgba(168,74,34,0.7),inset 0 0 0 5px #fbf2e3,inset 0 0 0 6px rgba(168,74,34,0.4);color-scheme:light} [data-os="desierto"] .mark-name,[data-os="desierto"] .pw-name{color:#111111;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="artico"]{--bg:#dfeef8;--fg:#10283a;--muted:#627380;--accent:#1a6fa8;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(255,255,255,.66);--win-fg:#10283a;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:18px;--shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);--title-bg:rgba(255,255,255,.5);--title-fg:#10283a;--btn-bg:rgba(255,255,255,.7);--btn-fg:#10283a;--btn-border:rgba(16,40,58,.2);--pri-bg:linear-gradient(135deg,#2f80c2,#155f92);--pri-fg:#ffffff;--cell-bg:rgba(255,255,255,.55);--cell-bg2:rgba(255,255,255,.35);--cell-line:rgba(16,40,58,.12);--cell-on:linear-gradient(135deg,#4c8fbb,#165e8f);--cell-play:rgba(26,111,168,0.22);--bar-bg:rgba(255,255,255,.55);--bar-fg:#10283a;--bar-border:1px solid rgba(255,255,255,.9);--menu-bg:rgba(255,255,255,.85);--menu-fg:#10283a;--menu-hi:rgba(26,111,168,0.16);--focus:#1a6fa8;--icon-bg:#f4f9fd;--icon-fg:#1a6fa8;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 20px rgba(0,0,0,.18);--label-fg:#10283a;--label-bg:rgba(255,255,255,.65);--pv-bg:linear-gradient(175deg,transparent 60%,#ffffff 61%,#d6ebf7 75%,#9fc9e6 76%),linear-gradient(#cfe6f5,#f2f9ff);--f-title:'Comfortaa','Quicksand','Segoe UI',sans-serif;--f-ui:'Quicksand','Segoe UI',system-ui,sans-serif;--f-mark:'Comfortaa','Quicksand',sans-serif;--glow:rgba(26,111,168,0.75);--glow2:rgba(26,111,168,0.3);--ink:#10283a;--client:#f4f9fd;--frame:inset 0 0 0 1px rgba(26,111,168,0.7),inset 0 0 0 5px #f4f9fd,inset 0 0 0 6px rgba(26,111,168,0.4);color-scheme:light} [data-os="artico"] .mark-name,[data-os="artico"] .pw-name{color:#10283a;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="volcan"]{--bg:#120604;--fg:#ffe6d6;--muted:#a08b80;--accent:#ff7a3d;--accent-fg:#1d0700;--danger:#ff8a7a;--win-bg:#1d0e0a;--win-fg:#ffe6d6;--win-border:#6c5a51;--bw:1px;--radius:6px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#3a140b,#1d0a06);--title-fg:#ffb38a;--btn-bg:rgba(255,255,255,.04);--btn-fg:#ffe6d6;--btn-border:rgba(255,122,61,.55);--pri-bg:linear-gradient(135deg,#ffb36b,#ff5a1f);--pri-fg:#1d0700;--cell-bg:#271410;--cell-bg2:#22110d;--cell-line:rgba(255,230,214,.12);--cell-on:linear-gradient(135deg,#ff9768,#d96834);--cell-play:rgba(255,122,61,0.22);--bar-bg:rgba(18,6,4,.94);--bar-fg:#ffffff;--bar-border:1px solid rgba(255,122,61,.5);--menu-bg:#1d0e0a;--menu-fg:#ffe6d6;--menu-hi:rgba(255,122,61,0.16);--focus:#ff7a3d;--icon-bg:#1d0e0a;--icon-fg:#ff7a3d;--icon-border:#6c5a51;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(10,3,2,0.66);--pv-bg:radial-gradient(ellipse at 50% 40%,rgba(255,110,40,.8),transparent 30%),linear-gradient(160deg,transparent 52%,#2a0c06 53%),linear-gradient(200deg,transparent 52%,#2a0c06 53%),linear-gradient(#3a0f06,#120604);--f-title:'Oswald','Arial Narrow',Impact,sans-serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'Oswald','Arial Narrow',sans-serif;--glow:rgba(255,122,61,0.75);--glow2:rgba(255,122,61,0.3);--ink:#ffe6d6;--client:#1d0e0a;--frame:inset 0 0 0 1px rgba(255,122,61,0.7),inset 0 0 0 5px #1d0e0a,inset 0 0 0 6px rgba(255,122,61,0.4);color-scheme:dark} [data-os="volcan"] .mark-name,[data-os="volcan"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(255,122,61,0.95),0 0 28px rgba(255,122,61,0.6)} [data-os="volcan"] .win-title{box-shadow:inset 0 -2px 0 #ff5a1f,0 2px 12px rgba(255,90,31,.25)} [data-os="otono"]{--bg:#3a1d0e;--fg:#fff2e0;--muted:#756252;--accent:#a83c14;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fdf4e6;--win-fg:#3b2312;--win-border:#b9ab9c;--bw:1px;--radius:10px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#f3a85c,#dc7a3a);--title-fg:#2a1206;--btn-bg:linear-gradient(180deg,#fffaf2,#f1dcc0);--btn-fg:#3b2312;--btn-border:#a0603a;--pri-bg:linear-gradient(180deg,#c24e1c,#8f3410);--pri-fg:#ffffff;--cell-bg:#f3eadb;--cell-bg2:#eadfd1;--cell-line:#d6cabc;--cell-on:linear-gradient(135deg,#bb6748,#8f3311);--cell-play:rgba(168,60,20,0.22);--bar-bg:linear-gradient(180deg,#6a3416,#3a1d0e);--bar-fg:#fff2e0;--bar-border:2px solid #f3a85c;--menu-bg:#fdf4e6;--menu-fg:#3b2312;--menu-hi:rgba(168,60,20,0.16);--focus:#a83c14;--icon-bg:#fdf4e6;--icon-fg:#a83c14;--icon-border:#b9ab9c;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(32,16,8,0.66);--pv-bg:radial-gradient(circle at 25% 30%,#e8742c 0 3px,transparent 4px),radial-gradient(circle at 65% 55%,#c9461c 0 3px,transparent 4px),linear-gradient(180deg,transparent 70%,#5a2a12 71%),linear-gradient(#f7c88a,#e38d4c);--f-title:'Playfair Display',Georgia,'Times New Roman',serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Playfair Display',Georgia,serif;--glow:rgba(168,60,20,0.75);--glow2:rgba(168,60,20,0.3);--ink:#3b2312;--client:#fdf4e6;--frame:inset 0 0 0 1px rgba(168,60,20,0.7),inset 0 0 0 5px #fdf4e6,inset 0 0 0 6px rgba(168,60,20,0.4);color-scheme:light} [data-os="otono"] .mark-name,[data-os="otono"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="sakura"]{--bg:#fbe3ea;--fg:#4a1f2c;--muted:#80606a;--accent:#c72a63;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fff7f9;--win-fg:#4a1f2c;--win-border:#c0abb1;--bw:1px;--radius:20px;--shadow:0 16px 40px rgba(199,42,99,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(180deg,#ffd6e2,#f7adc3);--title-fg:#4a1f2c;--btn-bg:#ffffff;--btn-fg:#4a1f2c;--btn-border:#e8a3b8;--pri-bg:linear-gradient(180deg,#d9407a,#b3204f);--pri-fg:#ffffff;--cell-bg:#f6ecef;--cell-bg2:#ede1e4;--cell-line:#dbccd0;--cell-on:linear-gradient(135deg,#d35985,#a92454);--cell-play:rgba(199,42,99,0.22);--bar-bg:rgba(255,247,249,.9);--bar-fg:#4a1f2c;--bar-border:1px solid #f3b8c8;--menu-bg:#fff7f9;--menu-fg:#4a1f2c;--menu-hi:rgba(199,42,99,0.16);--focus:#c72a63;--icon-bg:#fff7f9;--icon-fg:#c72a63;--icon-border:#c0abb1;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(199,42,99,0.25);--label-fg:#4a1f2c;--label-bg:rgba(255,247,249,.75);--pv-bg:radial-gradient(circle at 30% 30%,#ff9ab8 0 3px,transparent 4px),radial-gradient(circle at 70% 60%,#ffc2d4 0 3px,transparent 4px),linear-gradient(135deg,transparent 60%,#5a3a3a 61%,#5a3a3a 63%,transparent 64%),linear-gradient(#ffe3ec,#fff6f0);--f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif;--glow:rgba(199,42,99,0.75);--glow2:rgba(199,42,99,0.3);--ink:#4a1f2c;--client:#fff7f9;--frame:inset 0 0 0 1px rgba(199,42,99,0.7),inset 0 0 0 5px #fff7f9,inset 0 0 0 6px rgba(199,42,99,0.4);color-scheme:light} [data-os="sakura"] .mark-name,[data-os="sakura"] .pw-name{color:#4a1f2c;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="tormenta"]{--bg:#0b1016;--fg:#e3eaf2;--muted:#8e969e;--accent:#9fd3ff;--accent-fg:#0b1016;--danger:#ff8a7a;--win-bg:#19212b;--win-fg:#e3eaf2;--win-border:#606771;--bw:1px;--radius:6px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#2a3542,#19212b);--title-fg:#cfe6ff;--btn-bg:rgba(255,255,255,.05);--btn-fg:#e3eaf2;--btn-border:rgba(159,211,255,.45);--pri-bg:linear-gradient(135deg,#c9e7ff,#7fb8ee);--pri-fg:#0b1016;--cell-bg:#212a35;--cell-bg2:#1d2630;--cell-line:rgba(227,234,242,.12);--cell-on:linear-gradient(135deg,#b4ddff,#87b3d9);--cell-play:rgba(159,211,255,0.22);--bar-bg:rgba(11,16,22,.94);--bar-fg:#ffffff;--bar-border:1px solid rgba(159,211,255,.4);--menu-bg:#19212b;--menu-fg:#e3eaf2;--menu-hi:rgba(159,211,255,0.16);--focus:#9fd3ff;--icon-bg:#19212b;--icon-fg:#9fd3ff;--icon-border:#606771;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,9,12,0.66);--pv-bg:repeating-linear-gradient(105deg,rgba(200,220,255,.18) 0 1px,transparent 1px 7px),linear-gradient(160deg,transparent 45%,#e8f4ff 46%,transparent 47%),linear-gradient(#2a3442,#0b1016);--f-title:'Oswald','Arial Narrow',Impact,sans-serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'Oswald','Arial Narrow',sans-serif;--glow:rgba(159,211,255,0.75);--glow2:rgba(159,211,255,0.3);--ink:#e3eaf2;--client:#19212b;--frame:inset 0 0 0 1px rgba(159,211,255,0.7),inset 0 0 0 5px #19212b,inset 0 0 0 6px rgba(159,211,255,0.4);color-scheme:dark} [data-os="tormenta"] .mark-name,[data-os="tormenta"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(159,211,255,0.95),0 0 28px rgba(159,211,255,0.6)} [data-os="jardinzen"]{--bg:#e9e1cf;--fg:#2d2a24;--muted:#6a6760;--accent:#5f7044;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f8f4eb;--win-fg:#2d2a24;--win-border:#b9ae95;--bw:1px;--radius:2px;--shadow:0 1px 0 rgba(255,255,255,.6) inset,0 16px 40px rgba(60,50,30,.18);--title-bg:#efe8da;--title-fg:#2d2a24;--btn-bg:#f8f4eb;--btn-fg:#2d2a24;--btn-border:#b9ae95;--pri-bg:#5f7044;--pri-fg:#ffffff;--cell-bg:#eeeae1;--cell-bg2:#e4e0d7;--cell-line:#cfccc3;--cell-on:linear-gradient(135deg,#828f6d,#515f3a);--cell-play:rgba(95,112,68,0.22);--bar-bg:rgba(248,244,235,.92);--bar-fg:#2d2a24;--bar-border:1px solid #cfc4ad;--menu-bg:#f8f4eb;--menu-fg:#2d2a24;--menu-hi:rgba(95,112,68,0.16);--focus:#5f7044;--icon-bg:#f8f4eb;--icon-fg:#5f7044;--icon-border:#b9ae95;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#2d2a24;--label-bg:rgba(248,244,235,.8);--pv-bg:radial-gradient(circle at 35% 55%,#7a7468 0 7px,transparent 8px),repeating-radial-gradient(circle at 35% 55%,transparent 0 9px,rgba(120,100,70,.25) 9px 10px),#e9e1cf;--f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif;--glow:rgba(95,112,68,0.75);--glow2:rgba(95,112,68,0.3);--ink:#2d2a24;--client:#f8f4eb;--frame:inset 0 0 0 1px rgba(95,112,68,0.7),inset 0 0 0 5px #f8f4eb,inset 0 0 0 6px rgba(95,112,68,0.4);color-scheme:light} [data-os="jardinzen"] .mark-name,[data-os="jardinzen"] .pw-name{color:#2d2a24;opacity:.88} [data-os="biolum"]{--bg:#01060f;--fg:#d7f7ff;--muted:#7e96a0;--accent:#39f5c8;--accent-fg:#012018;--danger:#ff8a7a;--win-bg:rgba(3,16,32,.9);--win-fg:#d7f7ff;--win-border:#39f5c8;--bw:1px;--radius:12px;--shadow:0 0 0 1px rgba(57,245,200,0.5),0 0 24px rgba(57,245,200,0.4),0 20px 50px rgba(0,0,0,.6);--title-bg:linear-gradient(90deg,rgba(57,245,200,.2),rgba(57,140,245,.12));--title-fg:#9ffbe2;--btn-bg:rgba(57,245,200,.08);--btn-fg:#d7f7ff;--btn-border:rgba(57,245,200,.5);--pri-bg:linear-gradient(135deg,#7ffbe0,#39c5f5);--pri-fg:#012018;--cell-bg:rgba(255,255,255,.04);--cell-bg2:rgba(255,255,255,.08);--cell-line:rgba(57,245,200,.22);--cell-on:linear-gradient(135deg,#65f7d4,#30d0aa);--cell-play:rgba(57,245,200,0.22);--bar-bg:rgba(1,6,15,.9);--bar-fg:#ffffff;--bar-border:1px solid rgba(57,245,200,.45);--menu-bg:rgba(3,14,28,.97);--menu-fg:#d7f7ff;--menu-hi:rgba(57,245,200,0.16);--focus:#39f5c8;--icon-bg:#030f1e;--icon-fg:#39f5c8;--icon-border:#39f5c8;--icon-bw:1px;--icon-radius:10px;--icon-shadow:0 0 14px rgba(57,245,200,0.5);--label-fg:#ffffff;--label-bg:rgba(1,3,8,0.66);--pv-bg:radial-gradient(circle at 30% 40%,rgba(57,245,200,.9) 0 2px,transparent 6px),radial-gradient(circle at 70% 30%,rgba(120,180,255,.9) 0 2px,transparent 6px),radial-gradient(ellipse at 55% 65%,rgba(170,120,255,.6) 0 8px,transparent 18px),#01060f;--f-title:'Comfortaa','Quicksand','Segoe UI',sans-serif;--f-ui:'Quicksand','Segoe UI',system-ui,sans-serif;--f-mark:'Comfortaa','Quicksand',sans-serif;--glow:rgba(57,245,200,0.75);--glow2:rgba(57,245,200,0.3);--ink:#d7f7ff;--client:#030f1e;--frame:inset 0 0 0 1px rgba(57,245,200,0.7),inset 0 0 0 5px #030f1e,inset 0 0 0 6px rgba(57,245,200,0.4);color-scheme:dark} [data-os="biolum"] .mark-name,[data-os="biolum"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(57,245,200,0.95),0 0 28px rgba(57,245,200,0.6)} [data-os="pradera"]{--bg:#2f6cc4;--fg:#ffffff;--muted:#63625b;--accent:#2459c0;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#ece9d8;--win-fg:#000000;--win-border:#0831d9;--bw:3px;--radius:8px;--shadow:2px 4px 14px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#0a5fd6 0%,#3d8bf2 9%,#2a6fe0 38%,#1d5bd0 86%,#1b4fb8 100%);--title-fg:#ffffff;--btn-bg:linear-gradient(180deg,#ffffff,#ece9d8 85%,#d6d0bc);--btn-fg:#000000;--btn-border:#003c74;--pri-bg:linear-gradient(180deg,#4caa38 0%,#2f8a22 45%,#246d18 100%);--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#f4f2e8;--cell-line:#c9c3ad;--cell-on:linear-gradient(135deg,#547ece,#1f4ca3);--cell-play:rgba(36,89,192,0.22);--bar-bg:linear-gradient(180deg,#3d7be0 0%,#245edb 12%,#1f50c7 88%,#1941a5 100%);--bar-fg:#ffffff;--bar-border:1px solid #0b3aa8;--menu-bg:#ffffff;--menu-fg:#000000;--menu-hi:#cfe0fb;--focus:#2459c0;--icon-bg:rgba(255,255,255,.18);--icon-fg:#ffffff;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:10px;--icon-shadow:2px 2px 4px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(0,0,0,0);--pv-bg:radial-gradient(ellipse 90% 40% at 30% 100%,#4fae32 0 70%,transparent 71%),radial-gradient(ellipse 80% 45% at 85% 105%,#3d9a26 0 70%,transparent 71%),radial-gradient(ellipse at 30% 30%,#fff 0 6%,transparent 12%),linear-gradient(#2f6fd6,#a9d3ff);--f-title:'Trebuchet MS','Segoe UI',Tahoma,sans-serif;--f-ui:Tahoma,Verdana,'Segoe UI',system-ui,sans-serif;--f-mark:'Trebuchet MS',Tahoma,sans-serif;--glow:rgba(36,89,192,0.75);--glow2:rgba(36,89,192,0.3);--ink:#000000;--client:#ece9d8;--frame:inset 0 0 0 1px rgba(36,89,192,0.7),inset 0 0 0 5px #ece9d8,inset 0 0 0 6px rgba(36,89,192,0.4);color-scheme:light} [data-os="pradera"] .mark-name,[data-os="pradera"] .pw-name{color:#ffffff;font-style:italic;font-weight:700;text-shadow:2px 2px 3px rgba(0,0,0,.55)} [data-os="pradera"] .icon .lbl{text-shadow:1px 1px 2px #000,0 0 4px rgba(0,0,0,.6)} [data-os="boreal"]{--bg:#06141d;--fg:#ffffff;--muted:#60686f;--accent:#1d6fb0;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(170,205,228,.46);--win-fg:#0b1620;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:8px;--shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.45),0 16px 44px rgba(0,0,0,.5);--title-bg:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.08) 50%,rgba(0,0,0,.04) 51%,rgba(255,255,255,.14));--title-fg:#0b1620;--btn-bg:linear-gradient(180deg,#f7fafc,#dfe8ef 50%,#cfdbe5 51%,#e7eef4);--btn-fg:#0b1620;--btn-border:#6f8796;--pri-bg:linear-gradient(180deg,#4aa8e8,#1565a8 50%,#0f5594 51%,#1f78bd);--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#eef3f7;--cell-line:#c9d6df;--cell-on:linear-gradient(135deg,#4f8fc1,#195e96);--cell-play:rgba(29,111,176,0.22);--bar-bg:linear-gradient(180deg,rgba(48,60,72,.82),rgba(6,9,14,.92));--bar-fg:#ffffff;--bar-border:1px solid rgba(255,255,255,.28);--menu-bg:rgba(246,249,251,.97);--menu-fg:#0b1620;--menu-hi:#d6e8f7;--focus:#1d6fb0;--icon-bg:rgba(255,255,255,.14);--icon-fg:#ffffff;--icon-border:rgba(255,255,255,.5);--icon-bw:1px;--icon-radius:12px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(3,11,16,0.66);--pv-bg:radial-gradient(ellipse 80% 30% at 40% 45%,rgba(80,255,190,.65),transparent 70%),radial-gradient(ellipse 60% 25% at 70% 35%,rgba(120,140,255,.55),transparent 70%),linear-gradient(#041019,#0b2a3a);--f-title:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;--f-ui:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;--f-mark:'Segoe UI Light','Segoe UI',system-ui,sans-serif;--glow:rgba(29,111,176,0.75);--glow2:rgba(29,111,176,0.3);--ink:#0b1620;--client:#f6f9fb;--frame:inset 0 0 0 1px rgba(29,111,176,0.7),inset 0 0 0 5px #f6f9fb,inset 0 0 0 6px rgba(29,111,176,0.4);color-scheme:light} [data-os="boreal"] .mark-name,[data-os="boreal"] .pw-name{color:#ffffff;font-weight:300;letter-spacing:.02em;text-shadow:0 0 16px rgba(120,210,255,.85)} [data-os="frutiger"]{--bg:#1371c6;--fg:#ffffff;--muted:#4e6d82;--accent:#0a72ba;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(215,240,255,.5);--win-fg:#06304d;--win-border:rgba(255,255,255,.75);--bw:1px;--radius:10px;--shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.45),0 16px 44px rgba(0,0,0,.5);--title-bg:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.2) 50%,rgba(170,230,255,.14) 51%,rgba(255,255,255,.34));--title-fg:#06304d;--btn-bg:linear-gradient(180deg,#ffffff,#e4f5ff 50%,#c9ebff 51%,#eaf8ff);--btn-fg:#06304d;--btn-border:#6fb3d9;--pri-bg:linear-gradient(180deg,#b4f592,#5fcf3c 50%,#47b828 51%,#86e05e);--pri-fg:#0b2f08;--cell-bg:#ffffff;--cell-bg2:#eef8ff;--cell-line:#bfe0f2;--cell-on:linear-gradient(135deg,#4091c9,#08619e);--cell-play:rgba(10,114,186,0.22);--bar-bg:linear-gradient(180deg,rgba(110,190,245,.78),rgba(14,90,178,.9) 50%,rgba(6,62,142,.94) 51%,rgba(22,104,190,.92));--bar-fg:#ffffff;--bar-border:1px solid rgba(255,255,255,.6);--menu-bg:rgba(247,252,255,.97);--menu-fg:#06304d;--menu-hi:#d4efff;--focus:#0a72ba;--icon-bg:rgba(255,255,255,.24);--icon-fg:#ffffff;--icon-border:rgba(255,255,255,.7);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(10,62,109,0.66);--pv-bg:radial-gradient(circle at 28% 34%,rgba(255,255,255,.9) 0 3%,rgba(255,255,255,.22) 4% 8%,transparent 9%),radial-gradient(circle at 64% 52%,rgba(255,255,255,.75) 0 2%,rgba(255,255,255,.2) 3% 6%,transparent 7%),radial-gradient(ellipse 90% 40% at 25% 100%,#86e04a 0 70%,transparent 71%),radial-gradient(ellipse 80% 45% at 85% 105%,#45b92e 0 70%,transparent 71%),radial-gradient(circle at 80% 18%,#fff 0 5%,transparent 18%),linear-gradient(#0f63d8,#86ccff);--f-title:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;--f-ui:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;--f-mark:'Segoe UI Light','Segoe UI',system-ui,sans-serif;--glow:rgba(10,114,186,0.75);--glow2:rgba(10,114,186,0.3);--ink:#06304d;--client:#f7fcff;--frame:inset 0 0 0 1px rgba(10,114,186,0.7),inset 0 0 0 5px #f7fcff,inset 0 0 0 6px rgba(10,114,186,0.4);color-scheme:light} [data-os="frutiger"] .mark-name,[data-os="frutiger"] .pw-name{background:linear-gradient(180deg,#ffffff 0%,#d4f0ff 46%,#5cb6f0 54%,#c2ecff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,40,80,.55))} [data-os="frutiger"] #start{background:radial-gradient(circle at 50% 28%,#f4ffe8,#8fe85a 38%,#36a81c 74%,#2a8a16);color:#0b2f08;border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 14px rgba(120,230,120,.55)} [data-os="frutiger"] .icon .tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 16px rgba(0,60,120,.28)} [data-os="frutiger"] .icon .lbl{text-shadow:0 1px 2px rgba(0,40,90,.85),0 0 6px rgba(0,60,120,.6)} [data-os="ochobits"]{--bg:#1c1f3a;--fg:#ffffff;--muted:#a1a8c7;--accent:#ffcc33;--accent-fg:#1c1f3a;--danger:#ff8a7a;--win-bg:#20307a;--win-fg:#ffffff;--win-border:#ffffff;--bw:4px;--radius:0px;--shadow:6px 6px 0 rgba(0,0,0,.45);--title-bg:#3d55c7;--title-fg:#ffffff;--btn-bg:#2c3e9a;--btn-fg:#ffffff;--btn-border:#ffffff;--pri-bg:#ffcc33;--pri-fg:#1c1f3a;--cell-bg:#2a3a8c;--cell-bg2:#24337d;--cell-line:#5d6fd6;--cell-on:#ffcc33;--cell-play:rgba(255,204,51,0.22);--bar-bg:#101326;--bar-fg:#ffffff;--bar-border:4px solid #ffffff;--menu-bg:#20307a;--menu-fg:#ffffff;--menu-hi:#3d55c7;--focus:#ffcc33;--icon-bg:#20307a;--icon-fg:#ffcc33;--icon-border:#ffffff;--icon-bw:3px;--icon-radius:0px;--icon-shadow:4px 4px 0 rgba(0,0,0,.45);--label-fg:#ffffff;--label-bg:#101326;--pv-bg:linear-gradient(transparent 70%,#3fa34d 70% 78%,#8a5a2b 78%),linear-gradient(170deg,transparent 52%,#5a6bd6 53%),linear-gradient(#5c94fc,#9ec2ff);--f-title:'Press Start 2P','VT323','Courier New',monospace;--f-ui:'VT323','Courier New',monospace;--f-mark:'Press Start 2P','VT323',monospace;--glow:rgba(255,204,51,0.75);--glow2:rgba(255,204,51,0.3);--ink:#ffffff;--client:#20307a;--frame:inset 0 0 0 1px rgba(255,204,51,0.7),inset 0 0 0 5px #20307a,inset 0 0 0 6px rgba(255,204,51,0.4);color-scheme:dark} [data-os="ochobits"] .mark-name,[data-os="ochobits"] .pw-name{color:#ffcc33;font-size:clamp(18px,3.2vw,40px);text-shadow:4px 4px 0 #000} [data-os="ambar"]{--bg:#0a0600;--fg:#ffcf66;--muted:#9b7c3b;--accent:#ffb000;--accent-fg:#1a0f00;--danger:#ff8a7a;--win-bg:rgba(16,9,0,.96);--win-fg:#ffcf66;--win-border:#ffb000;--bw:1px;--radius:0px;--shadow:0 0 22px rgba(255,176,0,.22);--title-bg:rgba(255,176,0,.12);--title-fg:#ffb000;--btn-bg:rgba(0,0,0,.6);--btn-fg:#ffb000;--btn-border:#ffb000;--pri-bg:#ffb000;--pri-fg:#1a0f00;--cell-bg:rgba(255,176,0,.04);--cell-bg2:rgba(255,176,0,.09);--cell-line:rgba(255,176,0,.24);--cell-on:#ffb000;--cell-play:rgba(255,207,102,.22);--bar-bg:rgba(0,0,0,.92);--bar-fg:#ffb000;--bar-border:1px solid #ffb000;--menu-bg:rgba(10,6,0,.97);--menu-fg:#ffcf66;--menu-hi:rgba(255,176,0,.18);--focus:#ffb000;--icon-bg:rgba(20,12,0,.85);--icon-fg:#ffb000;--icon-border:#ffb000;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 0 12px rgba(255,176,0,.35);--label-fg:#ffcf66;--label-bg:rgba(0,0,0,.8);--pv-bg:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.35) 3px 4px),linear-gradient(transparent 20%,rgba(255,176,0,.5) 20% 24%,transparent 24% 36%,rgba(255,176,0,.35) 36% 40%,transparent 40%),#0a0600;--f-title:'VT323','Courier New',monospace;--f-ui:'Share Tech Mono','Courier New',monospace;--f-mark:'VT323','Courier New',monospace;--glow:rgba(255,176,0,0.75);--glow2:rgba(255,176,0,0.3);--ink:#ffcf66;--client:#100900;--frame:inset 0 0 0 1px rgba(255,176,0,0.7),inset 0 0 0 5px #100900,inset 0 0 0 6px rgba(255,176,0,0.4);color-scheme:dark} [data-os="ambar"] .mark-name,[data-os="ambar"] .pw-name{color:#ffb000;text-shadow:0 0 14px rgba(255,176,0,0.8)} [data-os="ambar"] .mark-name::after,[data-os="ambar"] .pw-name::after{content:"_";animation:blink 1s steps(1) infinite} [data-os="noventas"]{--bg:#2ec4b6;--fg:#1b1b3a;--muted:#6d6c7d;--accent:#6a22d9;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffdf5;--win-fg:#1b1b3a;--win-border:#1b1b3a;--bw:3px;--radius:6px;--shadow:7px 7px 0 #1b1b3a;--title-bg:#ffd23f;--title-fg:#1b1b3a;--btn-bg:#fffdf5;--btn-fg:#1b1b3a;--btn-border:#1b1b3a;--pri-bg:#ff5d8f;--pri-fg:#1b1b3a;--cell-bg:#fffdf5;--cell-bg2:#f1f9f8;--cell-line:#1b1b3a;--cell-on:linear-gradient(135deg,#ff5d8f,#6a22d9);--cell-play:rgba(106,34,217,0.22);--bar-bg:#1b1b3a;--bar-fg:#fffdf5;--bar-border:3px solid #ffd23f;--menu-bg:#fffdf5;--menu-fg:#1b1b3a;--menu-hi:#ffd23f;--focus:#6a22d9;--icon-bg:#fffdf5;--icon-fg:#6a22d9;--icon-border:#1b1b3a;--icon-bw:3px;--icon-radius:50%;--icon-shadow:3px 3px 0 #1b1b3a;--label-fg:#1b1b3a;--label-bg:#fffdf5;--pv-bg:linear-gradient(45deg,transparent 40%,#ff5d8f 40% 50%,transparent 50%) 0 0/24px 24px,radial-gradient(circle,#1b1b3a 1.5px,transparent 2px) 6px 6px/12px 12px,#2ec4b6;--f-title:'Righteous','Trebuchet MS',sans-serif;--f-ui:'Fredoka','Nunito','Segoe UI',sans-serif;--f-mark:'Righteous','Trebuchet MS',sans-serif;--glow:rgba(106,34,217,0.75);--glow2:rgba(106,34,217,0.3);--ink:#1b1b3a;--client:#fffdf5;--frame:inset 0 0 0 1px rgba(106,34,217,0.7),inset 0 0 0 5px #fffdf5,inset 0 0 0 6px rgba(106,34,217,0.4);color-scheme:light} [data-os="noventas"] .mark-name,[data-os="noventas"] .pw-name{color:#ff5d8f;-webkit-text-stroke:2px #1b1b3a;text-shadow:5px 5px 0 #1b1b3a;transform:rotate(-3deg)} [data-os="vhs"]{--bg:#0b1bb0;--fg:#ffffff;--muted:#8d91a4;--accent:#00e0ff;--accent-fg:#001018;--danger:#ff8a7a;--win-bg:#0f1426;--win-fg:#e8ecff;--win-border:#5b6072;--bw:1px;--radius:2px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(90deg,#1a1f3a,#262c52);--title-fg:#ffffff;--btn-bg:rgba(255,255,255,.06);--btn-fg:#e8ecff;--btn-border:rgba(0,224,255,.5);--pri-bg:#00e0ff;--pri-fg:#001018;--cell-bg:#161c34;--cell-bg2:#13182d;--cell-line:rgba(232,236,255,.14);--cell-on:linear-gradient(135deg,#38e7ff,#00bed9);--cell-play:rgba(0,224,255,0.22);--bar-bg:#05071a;--bar-fg:#ffffff;--bar-border:2px solid #00e0ff;--menu-bg:#0f1426;--menu-fg:#e8ecff;--menu-hi:rgba(0,224,255,0.16);--focus:#00e0ff;--icon-bg:#0f1426;--icon-fg:#00e0ff;--icon-border:#5b6072;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,15,97,0.66);--pv-bg:repeating-linear-gradient(transparent 0 2px,rgba(255,255,255,.06) 2px 3px),linear-gradient(transparent 70%,rgba(255,255,255,.25) 70% 73%,transparent 73%),#0b1bb0;--f-title:'VT323','Courier New',monospace;--f-ui:'Share Tech Mono','Courier New',monospace;--f-mark:'VT323','Courier New',monospace;--glow:rgba(0,224,255,0.75);--glow2:rgba(0,224,255,0.3);--ink:#e8ecff;--client:#0f1426;--frame:inset 0 0 0 1px rgba(0,224,255,0.7),inset 0 0 0 5px #0f1426,inset 0 0 0 6px rgba(0,224,255,0.4);color-scheme:dark} [data-os="vhs"] .mark-name,[data-os="vhs"] .pw-name{color:#ffffff;text-shadow:3px 0 rgba(255,42,109,.9),-3px 0 rgba(5,217,232,.9)} [data-os="vhs"] .win-title h2{text-shadow:2px 0 rgba(255,42,109,.85),-2px 0 rgba(5,217,232,.85)} [data-os="maquinita"]{--bg:#000000;--fg:#ffffff;--muted:#91919c;--accent:#ff4d79;--accent-fg:#1a0008;--danger:#ff8a7a;--win-bg:#0a0a14;--win-fg:#f2f2ff;--win-border:#ff4d79;--bw:2px;--radius:0px;--shadow:0 0 0 1px rgba(255,77,121,0.5),0 0 24px rgba(255,77,121,0.4),0 20px 50px rgba(0,0,0,.6);--title-bg:linear-gradient(90deg,#ff2e63,#ffcd38);--title-fg:#14000a;--btn-bg:#14141f;--btn-fg:#f2f2ff;--btn-border:#ff4d79;--pri-bg:linear-gradient(90deg,#ff4d79,#ffcd38);--pri-fg:#14000a;--cell-bg:#13131f;--cell-bg2:#181826;--cell-line:rgba(255,77,121,.3);--cell-on:linear-gradient(180deg,#ffcd38,#ff2e63);--cell-play:rgba(255,77,121,0.22);--bar-bg:#000000;--bar-fg:#ffcd38;--bar-border:2px solid #ff4d79;--menu-bg:#0a0a14;--menu-fg:#f2f2ff;--menu-hi:rgba(255,77,121,0.16);--focus:#ff4d79;--icon-bg:#0a0a14;--icon-fg:#ffcd38;--icon-border:#ff4d79;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 0 14px rgba(255,77,121,0.5);--label-fg:#ffffff;--label-bg:rgba(0,0,0,0.66);--pv-bg:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0/14px 18px,linear-gradient(transparent 40%,#36f 40% 46%,transparent 46% 52%,#36f 52% 58%,transparent 58%) 30% 0/40% 100% no-repeat,#000;--f-title:'Press Start 2P','VT323','Courier New',monospace;--f-ui:'VT323','Courier New',monospace;--f-mark:'Press Start 2P','VT323',monospace;--glow:rgba(255,77,121,0.75);--glow2:rgba(255,77,121,0.3);--ink:#f2f2ff;--client:#0a0a14;--frame:inset 0 0 0 1px rgba(255,77,121,0.7),inset 0 0 0 5px #0a0a14,inset 0 0 0 6px rgba(255,77,121,0.4);color-scheme:dark} [data-os="maquinita"] .mark-name,[data-os="maquinita"] .pw-name{color:#ff4d79;font-size:clamp(18px,3.2vw,40px);text-shadow:4px 4px 0 #000} [data-os="disco"]{--bg:#12001f;--fg:#fff0fb;--muted:#a08ea7;--accent:#ffcf3f;--accent-fg:#241000;--danger:#ff8a7a;--win-bg:#1e0633;--win-fg:#fff0fb;--win-border:#6d5879;--bw:1px;--radius:16px;--shadow:0 16px 40px rgba(255,207,63,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(90deg,#ff6ade,#ffcf3f,#56e3ff);--title-fg:#1e0633;--btn-bg:rgba(255,255,255,.06);--btn-fg:#fff0fb;--btn-border:rgba(255,207,63,.55);--pri-bg:linear-gradient(90deg,#ff6ade,#ffcf3f);--pri-fg:#241000;--cell-bg:#280b42;--cell-bg2:#22093a;--cell-line:rgba(255,240,251,.14);--cell-on:linear-gradient(135deg,#ffda69,#d9b036);--cell-play:rgba(255,207,63,0.22);--bar-bg:rgba(18,0,31,.92);--bar-fg:#ffffff;--bar-border:2px solid #ffcf3f;--menu-bg:#1e0633;--menu-fg:#fff0fb;--menu-hi:rgba(255,207,63,0.16);--focus:#ffcf3f;--icon-bg:#1e0633;--icon-fg:#ffcf3f;--icon-border:#6d5879;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(255,207,63,0.25);--label-fg:#ffffff;--label-bg:rgba(10,0,17,0.66);--pv-bg:radial-gradient(circle at 50% 35%,#f4f4f4 0 9px,#9a9a9a 12px,transparent 13px),radial-gradient(circle at 20% 70%,rgba(255,106,222,.7) 0 6px,transparent 12px),radial-gradient(circle at 80% 65%,rgba(86,227,255,.7) 0 6px,transparent 12px),#12001f;--f-title:'Righteous','Trebuchet MS',sans-serif;--f-ui:'Fredoka','Nunito',sans-serif;--f-mark:'Monoton','Righteous',sans-serif;--glow:rgba(255,207,63,0.75);--glow2:rgba(255,207,63,0.3);--ink:#fff0fb;--client:#1e0633;--frame:inset 0 0 0 1px rgba(255,207,63,0.7),inset 0 0 0 5px #1e0633,inset 0 0 0 6px rgba(255,207,63,0.4);color-scheme:dark} [data-os="disco"] .mark-name,[data-os="disco"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(255,207,63,0.95),0 0 28px rgba(255,207,63,0.6)} [data-os="retrofuturista"]{--bg:#0f3d4a;--fg:#fff6e6;--muted:#626769;--accent:#c4421a;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fff6e6;--win-fg:#1f2a33;--win-border:#b1afa7;--bw:1px;--radius:18px;--shadow:0 16px 40px rgba(196,66,26,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(90deg,#2a9d8f,#47bdac);--title-fg:#0b2a2f;--btn-bg:linear-gradient(180deg,#fffaf0,#f3e3c3);--btn-fg:#1f2a33;--btn-border:#1f2a33;--pri-bg:linear-gradient(180deg,#e0663d,#a8380f);--pri-fg:#ffffff;--cell-bg:#f4ecdd;--cell-bg2:#e9e2d4;--cell-line:#d2cdc2;--cell-on:linear-gradient(135deg,#d16c4c,#a73816);--cell-play:rgba(196,66,26,0.22);--bar-bg:#0f3d4a;--bar-fg:#fff6e6;--bar-border:3px solid #e8a33a;--menu-bg:#fff6e6;--menu-fg:#1f2a33;--menu-hi:rgba(196,66,26,0.16);--focus:#c4421a;--icon-bg:#fff6e6;--icon-fg:#c4421a;--icon-border:#b1afa7;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(196,66,26,0.25);--label-fg:#ffffff;--label-bg:rgba(8,34,41,0.66);--pv-bg:radial-gradient(circle at 70% 30%,transparent 10px,#e8a33a 10px 11px,transparent 12px),radial-gradient(ellipse 30% 8% at 35% 40%,#e9e9e9 0 60%,transparent 62%),linear-gradient(#1f6f78,#f4d6a0);--f-title:'Atomic Age','Righteous','Trebuchet MS',sans-serif;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'Atomic Age','Righteous',sans-serif;--glow:rgba(196,66,26,0.75);--glow2:rgba(196,66,26,0.3);--ink:#1f2a33;--client:#fff6e6;--frame:inset 0 0 0 1px rgba(196,66,26,0.7),inset 0 0 0 5px #fff6e6,inset 0 0 0 6px rgba(196,66,26,0.4);color-scheme:light} [data-os="retrofuturista"] .mark-name,[data-os="retrofuturista"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="cyberpunk"]{--bg:#07070d;--fg:#f0f0ff;--muted:#91919e;--accent:#00f0ff;--accent-fg:#00161a;--danger:#ff8a7a;--win-bg:#0e0e18;--win-fg:#f0f0ff;--win-border:#00f0ff;--bw:1px;--radius:0px;--shadow:0 0 0 1px rgba(0,240,255,0.5),0 0 24px rgba(0,240,255,0.4),0 20px 50px rgba(0,0,0,.6);--title-bg:#fcee0a;--title-fg:#000000;--btn-bg:#14141f;--btn-fg:#00f0ff;--btn-border:#00f0ff;--pri-bg:#fcee0a;--pri-fg:#000000;--cell-bg:#13131f;--cell-bg2:#181826;--cell-line:rgba(0,240,255,.25);--cell-on:linear-gradient(90deg,#00f0ff,#ff2a6d);--cell-play:rgba(0,240,255,0.22);--bar-bg:#07070d;--bar-fg:#00f0ff;--bar-border:2px solid #fcee0a;--menu-bg:#0e0e18;--menu-fg:#f0f0ff;--menu-hi:rgba(0,240,255,0.16);--focus:#00f0ff;--icon-bg:#0e0e18;--icon-fg:#fcee0a;--icon-border:#00f0ff;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 0 14px rgba(0,240,255,0.5);--label-fg:#ffffff;--label-bg:rgba(4,4,7,0.66);--pv-bg:linear-gradient(transparent 55%,#ff2a6d 55% 56%,transparent 56%),linear-gradient(90deg,#14141f 10%,transparent 10% 20%,#1b1b2a 20% 34%,transparent 34% 50%,#14141f 50% 70%,transparent 70%) 0 100%/100% 45% no-repeat,linear-gradient(#1a0b2e,#07070d);--f-title:'Teko','Rajdhani','Arial Narrow',sans-serif;--f-ui:'Rajdhani','Exo 2',Arial,sans-serif;--f-mark:'Teko','Rajdhani',sans-serif;--glow:rgba(0,240,255,0.75);--glow2:rgba(0,240,255,0.3);--ink:#f0f0ff;--client:#0e0e18;--frame:inset 0 0 0 1px rgba(0,240,255,0.7),inset 0 0 0 5px #0e0e18,inset 0 0 0 6px rgba(0,240,255,0.4);color-scheme:dark} [data-os="cyberpunk"] .mark-name,[data-os="cyberpunk"] .pw-name{color:#fcee0a;text-shadow:3px 0 #ff2a6d,-3px 0 #00f0ff} [data-os="cyberpunk"] .btn,[data-os="cyberpunk"] #start,[data-os="cyberpunk"] .task{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}[data-os="cyberpunk"] .win-title h2{font-size:21px;letter-spacing:.03em} [data-os="holograma"]{--bg:#dfe6f5;--fg:#1d1d3a;--muted:#696a7f;--accent:#5a3dff;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(255,255,255,.55);--win-fg:#1d1d3a;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:18px;--shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);--title-bg:linear-gradient(110deg,rgba(255,170,230,.62),rgba(170,220,255,.62),rgba(190,255,220,.62));--title-fg:#1d1d3a;--btn-bg:rgba(255,255,255,.65);--btn-fg:#1d1d3a;--btn-border:rgba(29,29,58,.18);--pri-bg:linear-gradient(110deg,#ff8ad8,#8ab4ff,#7ff0c0);--pri-fg:#1d1d3a;--cell-bg:rgba(255,255,255,.5);--cell-bg2:rgba(255,255,255,.3);--cell-line:rgba(29,29,58,.12);--cell-on:linear-gradient(110deg,#ff8ad8,#8ab4ff,#7ff0c0);--cell-play:rgba(90,61,255,0.22);--bar-bg:rgba(255,255,255,.5);--bar-fg:#1d1d3a;--bar-border:1px solid rgba(255,255,255,.9);--menu-bg:rgba(255,255,255,.82);--menu-fg:#1d1d3a;--menu-hi:rgba(90,61,255,0.16);--focus:#5a3dff;--icon-bg:#f1f4fa;--icon-fg:#5a3dff;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 20px rgba(0,0,0,.18);--label-fg:#1d1d3a;--label-bg:rgba(255,255,255,.62);--pv-bg:linear-gradient(115deg,#ffc4ec,#c4e4ff 35%,#d4ffe8 60%,#ffe9c4 85%);--f-title:'Comfortaa','Quicksand','Segoe UI',sans-serif;--f-ui:'Quicksand','Segoe UI',system-ui,sans-serif;--f-mark:'Comfortaa','Quicksand',sans-serif;--glow:rgba(90,61,255,0.75);--glow2:rgba(90,61,255,0.3);--ink:#1d1d3a;--client:#f1f4fa;--frame:inset 0 0 0 1px rgba(90,61,255,0.7),inset 0 0 0 5px #f1f4fa,inset 0 0 0 6px rgba(90,61,255,0.4);color-scheme:light} [data-os="holograma"] .mark-name,[data-os="holograma"] .pw-name{background:linear-gradient(100deg,#ff8ad8,#9ab8ff 40%,#7ff0c0 70%,#ffd58a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(255,255,255,.7))} [data-os="rock"]{--bg:#0a0a0a;--fg:#ffffff;--muted:#959595;--accent:#ff3b30;--accent-fg:#000000;--danger:#ff8a7a;--win-bg:#111111;--win-fg:#f5f5f5;--win-border:#ffffff;--bw:3px;--radius:0px;--shadow:8px 8px 0 #d10a00;--title-bg:#d10a00;--title-fg:#ffffff;--btn-bg:#1c1c1c;--btn-fg:#ffffff;--btn-border:#ffffff;--pri-bg:#d10a00;--pri-fg:#ffffff;--cell-bg:#181818;--cell-bg2:#1f1f1f;--cell-line:rgba(255,255,255,.18);--cell-on:linear-gradient(180deg,#ff3b30,#a00800);--cell-play:rgba(255,59,48,0.22);--bar-bg:#000000;--bar-fg:#ffffff;--bar-border:3px solid #d10a00;--menu-bg:#111111;--menu-fg:#f5f5f5;--menu-hi:#2a0a08;--focus:#ff3b30;--icon-bg:#111111;--icon-fg:#ff3b30;--icon-border:#ffffff;--icon-bw:3px;--icon-radius:0px;--icon-shadow:4px 4px 0 #d10a00;--label-fg:#ffffff;--label-bg:rgba(6,6,6,0.66);--pv-bg:linear-gradient(115deg,transparent 42%,#ffffff 42% 46%,transparent 46%),radial-gradient(ellipse at 30% 0%,rgba(255,40,30,.75),transparent 60%),#0a0a0a;--f-title:'Metal Mania',Impact,'Arial Black',sans-serif;--f-ui:'Oswald','Arial Narrow',Arial,sans-serif;--f-mark:'Metal Mania',Impact,sans-serif;--glow:rgba(255,59,48,0.75);--glow2:rgba(255,59,48,0.3);--ink:#d10a00;--client:#111111;--frame:inset 0 0 0 1px rgba(255,59,48,0.7),inset 0 0 0 5px #111111,inset 0 0 0 6px rgba(255,59,48,0.4);color-scheme:dark} [data-os="rock"] .mark-name,[data-os="rock"] .pw-name{color:#ffffff;text-shadow:5px 5px 0 #d10a00;transform:skew(-6deg)} [data-os="rock"] .win-title h2{font-size:20px;letter-spacing:.04em;font-weight:400} [data-os="jazz"]{--bg:#0b0f1f;--fg:#f3ead8;--muted:#959391;--accent:#d4a24c;--accent-fg:#1a1204;--danger:#ff8a7a;--win-bg:#141a30;--win-fg:#f3ead8;--win-border:#d4a24c;--bw:2px;--radius:0px;--shadow:0 0 0 4px #141a30,0 0 0 5px #d4a24c,0 24px 60px rgba(0,0,0,.6);--title-bg:linear-gradient(180deg,#1d2546,#141a30);--title-fg:#e8c27a;--btn-bg:rgba(255,255,255,.04);--btn-fg:#f3ead8;--btn-border:rgba(212,162,76,.55);--pri-bg:linear-gradient(135deg,#f0cf86,#c08a32);--pri-fg:#1a1204;--cell-bg:#1b2240;--cell-bg2:#171d38;--cell-line:rgba(243,234,216,.12);--cell-on:linear-gradient(135deg,#ddb673,#b48a41);--cell-play:rgba(212,162,76,0.22);--bar-bg:rgba(11,15,31,.94);--bar-fg:#ffffff;--bar-border:1px solid rgba(212,162,76,.5);--menu-bg:#141a30;--menu-fg:#f3ead8;--menu-hi:rgba(212,162,76,0.16);--focus:#d4a24c;--icon-bg:#141a30;--icon-fg:#d4a24c;--icon-border:#d4a24c;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,8,17,0.66);--pv-bg:radial-gradient(ellipse 30% 70% at 50% 0%,rgba(255,220,150,.45),transparent 70%),radial-gradient(circle at 25% 70%,rgba(212,162,76,.6) 0 3px,transparent 6px),#0b0f1f;--f-title:'Limelight',Georgia,serif;--f-ui:'Josefin Sans','Segoe UI',sans-serif;--f-mark:'Limelight',Georgia,serif;--glow:rgba(212,162,76,0.75);--glow2:rgba(212,162,76,0.3);--ink:#f3ead8;--client:#141a30;--frame:inset 0 0 0 1px rgba(212,162,76,0.7),inset 0 0 0 5px #141a30,inset 0 0 0 6px rgba(212,162,76,0.4);color-scheme:dark} [data-os="jazz"] .mark-name,[data-os="jazz"] .pw-name{background:linear-gradient(100deg,#8a6931,#e7cc9d 45%,#d4a24c 70%,#ecd5ae);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="punk"]{--bg:#ff4fa3;--fg:#000000;--muted:#6a6966;--accent:#d1006f;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fdfbf2;--win-fg:#000000;--win-border:#000000;--bw:3px;--radius:0px;--shadow:6px 6px 0 #000000;--title-bg:#000000;--title-fg:#f4ff3a;--btn-bg:#ffffff;--btn-fg:#000000;--btn-border:#000000;--pri-bg:#f4ff3a;--pri-fg:#000000;--cell-bg:#ffffff;--cell-bg2:#f4f1e4;--cell-line:#000000;--cell-on:#000000;--cell-play:rgba(209,0,111,0.22);--bar-bg:#000000;--bar-fg:#f4ff3a;--bar-border:3px solid #f4ff3a;--menu-bg:#fdfbf2;--menu-fg:#000000;--menu-hi:#f4ff3a;--focus:#d1006f;--icon-bg:#ffffff;--icon-fg:#d1006f;--icon-border:#000000;--icon-bw:3px;--icon-radius:0px;--icon-shadow:3px 3px 0 #000;--label-fg:#f4ff3a;--label-bg:#000000;--pv-bg:linear-gradient(8deg,transparent 40%,#f4ff3a 40% 58%,transparent 58%),linear-gradient(-12deg,transparent 55%,#fff 55% 70%,transparent 70%),radial-gradient(circle,#000 1px,transparent 1.5px) 0 0/6px 6px,#ff4fa3;--f-title:'Permanent Marker','Comic Sans MS',cursive;--f-ui:'Space Grotesk','Arial',sans-serif;--f-mark:'Permanent Marker',cursive;--glow:rgba(209,0,111,0.75);--glow2:rgba(209,0,111,0.3);--ink:#000000;--client:#fdfbf2;--frame:inset 0 0 0 1px rgba(209,0,111,0.7),inset 0 0 0 5px #fdfbf2,inset 0 0 0 6px rgba(209,0,111,0.4);color-scheme:light} [data-os="punk"] .mark-name,[data-os="punk"] .pw-name{color:#000000;background:linear-gradient(transparent 52%,#f4ff3a 52% 90%,transparent 90%);padding:0 12px} [data-os="punk"] .win{transform:rotate(-.25deg)}[data-os="punk"] .win-title h2{font-size:18px;font-weight:400} [data-os="gransala"]{--bg:#1a0306;--fg:#f7e3b0;--muted:#755e5b;--accent:#8f1020;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fbf3e4;--win-fg:#2a0a0e;--win-border:#b8913a;--bw:2px;--radius:0px;--shadow:0 0 0 4px #fbf3e4,0 0 0 5px #b8913a,0 24px 60px rgba(0,0,0,.6);--title-bg:linear-gradient(180deg,#a3142a,#6b0a18);--title-fg:#f7e3b0;--btn-bg:linear-gradient(180deg,#fffaf0,#f0e2c4);--btn-fg:#2a0a0e;--btn-border:#b8913a;--pri-bg:linear-gradient(180deg,#d9b866,#a8822e);--pri-fg:#2a0a0e;--cell-bg:#f1e7d9;--cell-bg2:#e6dccf;--cell-line:#d1c4b9;--cell-on:linear-gradient(135deg,#a84551,#7a0e1b);--cell-play:rgba(143,16,32,0.22);--bar-bg:linear-gradient(180deg,#5a0612,#2a0208);--bar-fg:#f7e3b0;--bar-border:2px solid #c9a24a;--menu-bg:#fbf3e4;--menu-fg:#2a0a0e;--menu-hi:rgba(143,16,32,0.16);--focus:#8f1020;--icon-bg:#fbf3e4;--icon-fg:#8f1020;--icon-border:#b8913a;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(14,2,3,0.66);--pv-bg:repeating-linear-gradient(90deg,#8a0f20 0 6px,#5a0612 6px 12px),radial-gradient(ellipse 40% 30% at 50% 90%,rgba(255,230,170,.55),transparent 70%);--f-title:'Playfair Display',Georgia,'Times New Roman',serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Playfair Display',Georgia,serif;--glow:rgba(143,16,32,0.75);--glow2:rgba(143,16,32,0.3);--ink:#2a0a0e;--client:#fbf3e4;--frame:inset 0 0 0 1px rgba(143,16,32,0.7),inset 0 0 0 5px #fbf3e4,inset 0 0 0 6px rgba(143,16,32,0.4);color-scheme:light} [data-os="gransala"] .mark-name,[data-os="gransala"] .pw-name{background:linear-gradient(100deg,#8d743e,#ead5a7 45%,#d9b25f 70%,#eedcb7);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="vinilo"]{--bg:#2b1a10;--fg:#f6ead2;--muted:#725f4d;--accent:#a34c12;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f6ead2;--win-fg:#3a2414;--win-border:#b4a590;--bw:1px;--radius:16px;--shadow:0 16px 40px rgba(163,76,18,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(180deg,#f2a541,#e4572e);--title-fg:#2b1206;--btn-bg:linear-gradient(180deg,#fdf5e4,#ecd9b4);--btn-fg:#3a2414;--btn-border:#8a5a2b;--pri-bg:linear-gradient(180deg,#f2a541,#e4572e);--pri-fg:#2b1206;--cell-bg:#ede0c8;--cell-bg2:#e3d6bf;--cell-line:#d0c2ac;--cell-on:linear-gradient(135deg,#b77346,#8b410f);--cell-play:rgba(163,76,18,0.22);--bar-bg:linear-gradient(180deg,#4a2c18,#2b1a10);--bar-fg:#f6ead2;--bar-border:3px solid #f2a541;--menu-bg:#f6ead2;--menu-fg:#3a2414;--menu-hi:rgba(163,76,18,0.16);--focus:#a34c12;--icon-bg:#f6ead2;--icon-fg:#a34c12;--icon-border:#b4a590;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(163,76,18,0.25);--label-fg:#ffffff;--label-bg:rgba(24,14,9,0.66);--pv-bg:radial-gradient(circle at 50% 50%,#e4572e 0 7px,#111 8px 22px,transparent 23px),repeating-linear-gradient(180deg,#f2a541 0 8px,#e4572e 8px 16px,#a33b20 16px 24px,#2b1a10 24px 40px);--f-title:'Righteous','Trebuchet MS',sans-serif;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'Righteous',sans-serif;--glow:rgba(163,76,18,0.75);--glow2:rgba(163,76,18,0.3);--ink:#3a2414;--client:#f6ead2;--frame:inset 0 0 0 1px rgba(163,76,18,0.7),inset 0 0 0 5px #f6ead2,inset 0 0 0 6px rgba(163,76,18,0.4);color-scheme:light} [data-os="vinilo"] .mark-name,[data-os="vinilo"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="vinilo"] .win-title{box-shadow:inset 0 -4px 0 #a33b20,inset 0 -8px 0 #e4572e} [data-os="lofi"]{--bg:#1b1626;--fg:#f3e9e2;--muted:#9f959a;--accent:#ffb38a;--accent-fg:#2a1408;--danger:#ff8a7a;--win-bg:#2a2236;--win-fg:#f3e9e2;--win-border:#706872;--bw:1px;--radius:14px;--shadow:0 16px 40px rgba(255,179,138,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:#241d30;--title-fg:#ffcfb3;--btn-bg:rgba(255,255,255,.05);--btn-fg:#f3e9e2;--btn-border:rgba(255,179,138,.45);--pri-bg:#ffb38a;--pri-fg:#2a1408;--cell-bg:#332a40;--cell-bg2:#2e2539;--cell-line:rgba(243,233,226,.12);--cell-on:linear-gradient(135deg,#ffc4a4,#d99875);--cell-play:rgba(255,179,138,0.22);--bar-bg:rgba(27,22,38,.94);--bar-fg:#ffffff;--bar-border:1px solid rgba(255,179,138,.35);--menu-bg:#2a2236;--menu-fg:#f3e9e2;--menu-hi:rgba(255,179,138,0.16);--focus:#ffb38a;--icon-bg:#2a2236;--icon-fg:#ffb38a;--icon-border:#706872;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(255,179,138,0.25);--label-fg:#ffffff;--label-bg:rgba(15,12,21,0.66);--pv-bg:radial-gradient(circle at 75% 70%,rgba(255,179,138,.7) 0 6px,transparent 18px),linear-gradient(90deg,transparent 15%,#2a2236 15% 18%,transparent 18% 82%,#2a2236 82% 85%,transparent 85%),linear-gradient(#2c3a5a,#1b1626);--f-title:'Kalam','Comic Sans MS',cursive;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'Kalam',cursive;--glow:rgba(255,179,138,0.75);--glow2:rgba(255,179,138,0.3);--ink:#f3e9e2;--client:#2a2236;--frame:inset 0 0 0 1px rgba(255,179,138,0.7),inset 0 0 0 5px #2a2236,inset 0 0 0 6px rgba(255,179,138,0.4);color-scheme:dark} [data-os="lofi"] .mark-name,[data-os="lofi"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="glitterpop"]{--bg:#ffd6f5;--fg:#3d1240;--muted:#836484;--accent:#b0158c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fff5fc;--win-fg:#3d1240;--win-border:#bba6ba;--bw:1px;--radius:20px;--shadow:0 16px 40px rgba(176,21,140,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(90deg,#ff8ad8,#b98cff,#7fd8ff);--title-fg:#2e0d33;--btn-bg:#ffffff;--btn-fg:#3d1240;--btn-border:#e59ad0;--pri-bg:linear-gradient(90deg,#ff8ad8,#b98cff);--pri-fg:#2e0d33;--cell-bg:#f5eaf3;--cell-bg2:#ecdee9;--cell-line:#d8c8d6;--cell-on:linear-gradient(135deg,#c148a5,#961277);--cell-play:rgba(176,21,140,0.22);--bar-bg:rgba(255,245,252,.9);--bar-fg:#3d1240;--bar-border:2px solid #ff8ad8;--menu-bg:#fff5fc;--menu-fg:#3d1240;--menu-hi:rgba(176,21,140,0.16);--focus:#b0158c;--icon-bg:#fff5fc;--icon-fg:#b0158c;--icon-border:#bba6ba;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(176,21,140,0.25);--label-fg:#3d1240;--label-bg:rgba(255,245,252,.75);--pv-bg:radial-gradient(circle at 30% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#fff 0 2px,transparent 3px),linear-gradient(135deg,#ff9ad9,#c7a0ff,#8fe0ff);--f-title:'Fredoka','Nunito',sans-serif;--f-ui:'Fredoka','Nunito',sans-serif;--f-mark:'Righteous','Fredoka',sans-serif;--glow:rgba(176,21,140,0.75);--glow2:rgba(176,21,140,0.3);--ink:#3d1240;--client:#fff5fc;--frame:inset 0 0 0 1px rgba(176,21,140,0.7),inset 0 0 0 5px #fff5fc,inset 0 0 0 6px rgba(176,21,140,0.4);color-scheme:light} [data-os="glitterpop"] .mark-name,[data-os="glitterpop"] .pw-name{background:linear-gradient(100deg,#ff8ad8,#9ab8ff 40%,#7ff0c0 70%,#ffd58a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(255,255,255,.7))} [data-os="papelpicado"]{--bg:#fff1dc;--fg:#2d1530;--muted:#796776;--accent:#c8006c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffaf2;--win-fg:#2d1530;--win-border:#2d1530;--bw:2px;--radius:12px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:#c8006c;--title-fg:#ffffff;--btn-bg:#ffffff;--btn-fg:#2d1530;--btn-border:#2d1530;--pri-bg:#007a74;--pri-fg:#ffffff;--cell-bg:#f4efe8;--cell-bg2:#eae3df;--cell-line:#d5cccb;--cell-on:linear-gradient(135deg,#d4388c,#aa005c);--cell-play:rgba(200,0,108,0.22);--bar-bg:#2d1530;--bar-fg:#fffaf2;--bar-border:3px solid #ffb400;--menu-bg:#fffaf2;--menu-fg:#2d1530;--menu-hi:rgba(200,0,108,0.16);--focus:#c8006c;--icon-bg:#fffaf2;--icon-fg:#c8006c;--icon-border:#2d1530;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#2d1530;--label-bg:rgba(255,250,242,.85);--pv-bg:linear-gradient(transparent 12%,#c8006c 12% 40%,transparent 40%) 0 0/33% 100%,linear-gradient(transparent 12%,#ffb400 12% 40%,transparent 40%) 33% 0/33% 100% no-repeat,linear-gradient(transparent 12%,#00a19a 12% 40%,transparent 40%) 66% 0/34% 100% no-repeat,#fff1dc;--f-title:'Luckiest Guy','Fredoka',Impact,sans-serif;--f-ui:'Fredoka','Nunito',sans-serif;--f-mark:'Luckiest Guy',Impact,sans-serif;--glow:rgba(200,0,108,0.75);--glow2:rgba(200,0,108,0.3);--ink:#2d1530;--client:#fffaf2;--frame:inset 0 0 0 1px rgba(200,0,108,0.7),inset 0 0 0 5px #fffaf2,inset 0 0 0 6px rgba(200,0,108,0.4);color-scheme:light} [data-os="papelpicado"] .mark-name,[data-os="papelpicado"] .pw-name{color:#c8006c;-webkit-text-stroke:1.5px #2d1530;text-shadow:4px 4px 0 #ffb400} [data-os="papelpicado"] .win-title h2{font-weight:400;letter-spacing:.03em;font-size:18px}[data-os="papelpicado"] .win-title{box-shadow:inset 0 -4px 0 #ffb400} [data-os="talavera"]{--bg:#f5f1e6;--fg:#0d2a6b;--muted:#566995;--accent:#1546a8;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffdf7;--win-fg:#0d2a6b;--win-border:#1546a8;--bw:2px;--radius:6px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:radial-gradient(circle,#f2b705 0 2.5px,transparent 3px) 0 0/18px 18px,linear-gradient(#1546a8,#0d2f7a);--title-fg:#ffffff;--btn-bg:#fffdf7;--btn-fg:#0d2a6b;--btn-border:#1546a8;--pri-bg:#1546a8;--pri-fg:#ffffff;--cell-bg:#f3f6fd;--cell-bg2:#e8eefb;--cell-line:#b9c8ea;--cell-on:linear-gradient(135deg,#486fbb,#123c8f);--cell-play:rgba(21,70,168,0.22);--bar-bg:#0d2f7a;--bar-fg:#ffffff;--bar-border:3px solid #f2b705;--menu-bg:#fffdf7;--menu-fg:#0d2a6b;--menu-hi:rgba(21,70,168,0.16);--focus:#1546a8;--icon-bg:#fffdf7;--icon-fg:#1546a8;--icon-border:#1546a8;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#0d2a6b;--label-bg:rgba(255,253,247,.88);--pv-bg:radial-gradient(circle,#1546a8 0 5px,transparent 6px) 0 0/22px 22px,radial-gradient(circle,#f2b705 0 2px,transparent 3px) 11px 11px/22px 22px,#fffdf7;--f-title:'DM Serif Display',Georgia,serif;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'DM Serif Display',Georgia,serif;--glow:rgba(21,70,168,0.75);--glow2:rgba(21,70,168,0.3);--ink:#0d2a6b;--client:#fffdf7;--frame:inset 0 0 0 1px rgba(21,70,168,0.7),inset 0 0 0 5px #fffdf7,inset 0 0 0 6px rgba(21,70,168,0.4);color-scheme:light} [data-os="talavera"] .mark-name,[data-os="talavera"] .pw-name{color:#0d2a6b;opacity:.88} [data-os="talavera"] .win-title h2{text-shadow:0 1px 0 #0a2260} [data-os="alebrije"]{--bg:#1a0b2e;--fg:#fff8e7;--muted:#6c6071;--accent:#c8006c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fff8e7;--win-fg:#1a0b2e;--win-border:#1a0b2e;--bw:3px;--radius:8px;--shadow:6px 6px 0 #1a0b2e;--title-bg:#6a22d9;--title-fg:#ffffff;--btn-bg:#fff8e7;--btn-fg:#1a0b2e;--btn-border:#1a0b2e;--pri-bg:#007d6b;--pri-fg:#ffffff;--cell-bg:#f4ecde;--cell-bg2:#e8e0d4;--cell-line:#d1c9c2;--cell-on:linear-gradient(135deg,#ff2d8b,#ffcc00);--cell-play:rgba(200,0,108,0.22);--bar-bg:#1a0b2e;--bar-fg:#fff8e7;--bar-border:3px solid #ffcc00;--menu-bg:#fff8e7;--menu-fg:#1a0b2e;--menu-hi:#ffe7a3;--focus:#c8006c;--icon-bg:#fff8e7;--icon-fg:#c8006c;--icon-border:#1a0b2e;--icon-bw:3px;--icon-radius:14px;--icon-shadow:3px 3px 0 #1a0b2e;--label-fg:#ffffff;--label-bg:rgba(14,6,25,0.66);--pv-bg:repeating-conic-gradient(from 0deg at 30% 40%,#ff2d8b 0 20deg,#ffcc00 20deg 40deg,#00c2a8 40deg 60deg,#6a22d9 60deg 80deg);--f-title:'Luckiest Guy','Fredoka',Impact,sans-serif;--f-ui:'Fredoka','Nunito',sans-serif;--f-mark:'Luckiest Guy',Impact,sans-serif;--glow:rgba(200,0,108,0.75);--glow2:rgba(200,0,108,0.3);--ink:#1a0b2e;--client:#fff8e7;--frame:inset 0 0 0 1px rgba(200,0,108,0.7),inset 0 0 0 5px #fff8e7,inset 0 0 0 6px rgba(200,0,108,0.4);color-scheme:light} [data-os="alebrije"] .mark-name,[data-os="alebrije"] .pw-name{color:#c8006c;-webkit-text-stroke:1.5px #2d1530;text-shadow:4px 4px 0 #ffb400} [data-os="alebrije"] .win-title{box-shadow:inset 0 -5px 0 #ffcc00,inset 0 -10px 0 #ff2d8b}[data-os="alebrije"] .win-title h2{font-weight:400;letter-spacing:.03em;font-size:18px} [data-os="muertos"]{--bg:#1b0a2a;--fg:#fff0e0;--muted:#a6949d;--accent:#ff9f1c;--accent-fg:#2a1206;--danger:#ff8a7a;--win-bg:#2a1440;--win-fg:#fff0e0;--win-border:#756178;--bw:1px;--radius:10px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#5b1f7a,#3a1257);--title-fg:#ffd08a;--btn-bg:rgba(255,255,255,.06);--btn-fg:#fff0e0;--btn-border:rgba(255,159,28,.6);--pri-bg:linear-gradient(180deg,#ffb547,#ff8a00);--pri-fg:#2a1206;--cell-bg:#331a4d;--cell-bg2:#2e1745;--cell-line:rgba(255,240,224,.14);--cell-on:linear-gradient(135deg,#ffb547,#ff6a00);--cell-play:rgba(255,159,28,0.22);--bar-bg:#14061f;--bar-fg:#fff0e0;--bar-border:2px solid #ff9f1c;--menu-bg:#2a1440;--menu-fg:#fff0e0;--menu-hi:rgba(255,159,28,0.16);--focus:#ff9f1c;--icon-bg:#2a1440;--icon-fg:#ff9f1c;--icon-border:#756178;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(15,6,23,0.66);--pv-bg:radial-gradient(circle at 20% 80%,#ff9f1c 0 5px,transparent 6px),radial-gradient(circle at 75% 85%,#ff9f1c 0 5px,transparent 6px),radial-gradient(circle at 50% 75%,rgba(255,200,80,.8) 0 2px,transparent 9px),linear-gradient(transparent 15%,#c8006c 15% 22%,transparent 22%),#1b0a2a;--f-title:'Playfair Display',Georgia,'Times New Roman',serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Playfair Display',Georgia,serif;--glow:rgba(255,159,28,0.75);--glow2:rgba(255,159,28,0.3);--ink:#fff0e0;--client:#2a1440;--frame:inset 0 0 0 1px rgba(255,159,28,0.7),inset 0 0 0 5px #2a1440,inset 0 0 0 6px rgba(255,159,28,0.4);color-scheme:dark} [data-os="muertos"] .mark-name,[data-os="muertos"] .pw-name{background:linear-gradient(100deg,#a66712,#ffca82 45%,#ff9f1c 70%,#ffd499);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="barronegro"]{--bg:#0b0b0c;--fg:#efe4c4;--muted:#a3946a;--accent:#d4af37;--accent-fg:#1a1204;--danger:#ff8a7a;--win-bg:#151413;--win-fg:#efe4c4;--win-border:rgba(212,175,55,.42);--bw:1px;--radius:14px;--shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.6);--title-bg:linear-gradient(180deg,#1b1a18,#111110);--title-fg:#e8c872;--btn-bg:#1c1b19;--btn-fg:#efe4c4;--btn-border:rgba(212,175,55,.45);--pri-bg:linear-gradient(180deg,#f3d98b,#d4af37 48%,#a8822a);--pri-fg:#1a1204;--cell-bg:#1f1e1c;--cell-bg2:#1a1918;--cell-line:rgba(232,200,114,.14);--cell-on:linear-gradient(135deg,#f0d27e,#b8902f);--cell-play:rgba(212,175,55,0.22);--bar-bg:rgba(11,11,12,.95);--bar-fg:#e8c872;--bar-border:1px solid rgba(212,175,55,.38);--menu-bg:#151413;--menu-fg:#efe4c4;--menu-hi:rgba(212,175,55,0.16);--focus:#e8c872;--icon-bg:#141312;--icon-fg:#e2bf5c;--icon-border:rgba(212,175,55,.55);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 1px 0 rgba(243,217,139,.12);--label-fg:#ecd28a;--label-bg:rgba(6,6,7,0.7);--pv-bg:repeating-radial-gradient(circle at 50% 50%,transparent 0 8px,rgba(232,200,114,.12) 8px 9px),radial-gradient(circle at 40% 35%,#2a2a2c,#0b0b0c 70%);--f-title:'Josefin Sans','Segoe UI',sans-serif;--f-ui:'Josefin Sans','Segoe UI',sans-serif;--f-mark:'Josefin Sans',sans-serif;--glow:rgba(212,175,55,0.75);--glow2:rgba(212,175,55,0.3);--ink:#efe4c4;--client:#151413;--frame:inset 0 0 0 1px rgba(212,175,55,0.7),inset 0 0 0 5px #151413,inset 0 0 0 6px rgba(212,175,55,0.4);color-scheme:dark} [data-os="barronegro"] .mark-name,[data-os="barronegro"] .pw-name{background:linear-gradient(180deg,#fff3c4 0%,#f0d27e 30%,#c79a2e 50%,#8a6418 54%,#e8c872 78%,#fbe6a6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))} [data-os="barronegro"] .win-title{background-image:repeating-linear-gradient(60deg,transparent 0 6px,rgba(232,200,114,.05) 6px 7px),repeating-linear-gradient(-60deg,transparent 0 6px,rgba(232,200,114,.05) 6px 7px),linear-gradient(180deg,#1b1a18,#111110);border-bottom:1px solid rgba(212,175,55,.4)} /* 1.6: glifos de hoja de oro (degradado con brillo) en íconos y barra; el degradado vive en #apGoldDefs */ [data-os="barronegro"] :is(.icon .tile,.tray) svg [stroke="currentColor"]{stroke:url(#apGold)} [data-os="barronegro"] :is(.icon .tile,.tray) svg [fill="currentColor"]{fill:url(#apGold)} [data-os="barronegro"] .icon .tile svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 3px rgba(212,175,55,.25))} [data-os="barronegro"] .icon .lbl{text-shadow:0 1px 0 rgba(0,0,0,.8)} [data-os="luchalibre"]{--bg:#0033a0;--fg:#ffffff;--muted:#757575;--accent:#c4001c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#ffffff;--win-fg:#111111;--win-border:#111111;--bw:4px;--radius:6px;--shadow:7px 7px 0 #111111;--title-bg:#c4001c;--title-fg:#ffffff;--btn-bg:#ffffff;--btn-fg:#111111;--btn-border:#111111;--pri-bg:#ffcc00;--pri-fg:#111111;--cell-bg:#ffffff;--cell-bg2:#f2f4fa;--cell-line:#111111;--cell-on:linear-gradient(135deg,#ffcc00,#ff8a00);--cell-play:rgba(196,0,28,0.22);--bar-bg:#111111;--bar-fg:#ffffff;--bar-border:4px solid #ffcc00;--menu-bg:#ffffff;--menu-fg:#111111;--menu-hi:#ffe680;--focus:#c4001c;--icon-bg:#ffffff;--icon-fg:#c4001c;--icon-border:#111111;--icon-bw:3px;--icon-radius:50%;--icon-shadow:3px 3px 0 #111;--label-fg:#ffffff;--label-bg:#111111;--pv-bg:linear-gradient(transparent 30%,#fff 30% 32%,transparent 32% 50%,#fff 50% 52%,transparent 52% 70%,#fff 70% 72%,transparent 72%),radial-gradient(ellipse at 50% 0%,rgba(255,220,80,.7),transparent 60%),#0033a0;--f-title:'Bowlby One SC',Impact,'Arial Black',sans-serif;--f-ui:'Oswald','Arial Narrow',sans-serif;--f-mark:'Bowlby One SC',Impact,sans-serif;--glow:rgba(196,0,28,0.75);--glow2:rgba(196,0,28,0.3);--ink:#111111;--client:#ffffff;--frame:inset 0 0 0 1px rgba(196,0,28,0.7),inset 0 0 0 5px #ffffff,inset 0 0 0 6px rgba(196,0,28,0.4);color-scheme:light} [data-os="luchalibre"] .mark-name,[data-os="luchalibre"] .pw-name{color:#ffcc00;-webkit-text-stroke:2px #111111;text-shadow:5px 5px 0 #111111;transform:rotate(-2deg)} [data-os="luchalibre"] .win-title h2{font-weight:400;font-size:17px;letter-spacing:.02em} [data-os="angel"]{--bg:#2a6cc2;--fg:#ffffff;--muted:#776f80;--accent:#6b44b8;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffaf2;--win-fg:#2a2140;--win-border:#b8892c;--bw:2px;--radius:4px;--shadow:0 0 0 4px #fffaf2,0 0 0 5px #6b44b8,0 24px 60px rgba(0,0,0,.6);--title-bg:linear-gradient(180deg,#fdf0bd,#f0cd6a 55%,#d9a73a);--title-fg:#3a2508;--btn-bg:#f6efe2;--btn-fg:#2a2140;--btn-border:#c9a24a;--pri-bg:linear-gradient(180deg,#8f69d6,#6b44b8);--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#f6f1fb;--cell-line:#e4d8c2;--cell-on:#6b44b8;--cell-play:rgba(107,68,184,0.22);--bar-bg:linear-gradient(180deg,rgba(66,44,120,.92),rgba(38,26,74,.95));--bar-fg:#fff3cf;--bar-border:1px solid #d9b25f;--menu-bg:#fffaf2;--menu-fg:#2a2140;--menu-hi:#ece2f8;--focus:#6b44b8;--icon-bg:rgba(255,250,242,.2);--icon-fg:#ffffff;--icon-border:rgba(240,205,106,.75);--icon-bw:1px;--icon-radius:12px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(34,22,70,.42);--pv-bg:radial-gradient(ellipse 30% 36% at 0% 22%,#9572d4 0 60%,transparent 62%),radial-gradient(ellipse 26% 32% at 100% 30%,#b393e6 0 60%,transparent 62%),radial-gradient(circle at 50% 20%,#f6d468 0 5%,transparent 6%),linear-gradient(90deg,transparent 47.5%,#f2e9d4 47.5% 52.5%,transparent 52.5%) 0 100%/100% 74% no-repeat,linear-gradient(transparent 80%,#6e9a46 80%),linear-gradient(#1a62c4,#a5d0f4);--f-title:'Cinzel','Trajan Pro',Georgia,serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Cinzel',Georgia,serif;--glow:rgba(107,68,184,0.75);--glow2:rgba(107,68,184,0.3);--ink:#2a2140;--client:#fffaf2;--frame:inset 0 0 0 1px rgba(107,68,184,0.7),inset 0 0 0 5px #fffaf2,inset 0 0 0 6px rgba(107,68,184,0.4);color-scheme:light} [data-os="angel"] .mark-name,[data-os="angel"] .pw-name{background:linear-gradient(100deg,#8d743e,#ead5a7 45%,#d9b25f 70%,#eedcb7);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="angel"] .mark-name,[data-os="angel"] .pw-name{filter:drop-shadow(0 2px 3px rgba(40,20,0,.55))} [data-os="artdeco"]{--bg:#0b0b0c;--fg:#f1e7cf;--muted:#948e80;--accent:#d4af37;--accent-fg:#141005;--danger:#ff8a7a;--win-bg:#141414;--win-fg:#f1e7cf;--win-border:rgba(212,175,55,.7);--bw:2px;--radius:0px;--shadow:0 0 0 4px #141414,0 0 0 5px #d4af37,0 24px 60px rgba(0,0,0,.65);--title-bg:#101010;--title-fg:#e6c766;--btn-bg:rgba(255,255,255,.03);--btn-fg:#e6c766;--btn-border:rgba(212,175,55,.6);--pri-bg:linear-gradient(135deg,#f3d77a,#b8902c);--pri-fg:#141005;--cell-bg:#1c1c1c;--cell-bg2:#181818;--cell-line:rgba(241,231,207,.12);--cell-on:linear-gradient(135deg,#ddc163,#b4952f);--cell-play:rgba(212,175,55,0.22);--bar-bg:rgba(11,11,12,.95);--bar-fg:#ffffff;--bar-border:2px solid #d4af37;--menu-bg:#141414;--menu-fg:#f1e7cf;--menu-hi:rgba(212,175,55,0.16);--focus:#d4af37;--icon-bg:#141414;--icon-fg:#d4af37;--icon-border:rgba(212,175,55,.7);--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,6,7,0.66);--pv-bg:repeating-conic-gradient(from -90deg at 50% 100%,#d4af37 0 2deg,transparent 2deg 12deg),#0b0b0c;--f-title:'Limelight',Georgia,serif;--f-ui:'Josefin Sans','Segoe UI',sans-serif;--f-mark:'Limelight',Georgia,serif;--glow:rgba(212,175,55,0.75);--glow2:rgba(212,175,55,0.3);--ink:#f1e7cf;--client:#141414;--frame:inset 0 0 0 1px rgba(212,175,55,0.7),inset 0 0 0 5px #141414,inset 0 0 0 6px rgba(212,175,55,0.4);color-scheme:dark} [data-os="artdeco"] .mark-name,[data-os="artdeco"] .pw-name{background:linear-gradient(100deg,#8a7224,#e7d391 45%,#d4af37 70%,#ecdba5);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="bauhaus"]{--bg:#f2ebdd;--fg:#111111;--muted:#656462;--accent:#c62222;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fbf8f1;--win-fg:#111111;--win-border:#111111;--bw:3px;--radius:0px;--shadow:6px 6px 0 #111111;--title-bg:#111111;--title-fg:#fbf8f1;--btn-bg:#fbf8f1;--btn-fg:#111111;--btn-border:#111111;--pri-bg:#1d4e9e;--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#f4efe4;--cell-line:#111111;--cell-on:#c62222;--cell-play:rgba(198,34,34,0.22);--bar-bg:#111111;--bar-fg:#fbf8f1;--bar-border:4px solid #f2b705;--menu-bg:#fbf8f1;--menu-fg:#111111;--menu-hi:#f2b705;--focus:#c62222;--icon-bg:#fbf8f1;--icon-fg:#1d4e9e;--icon-border:#111111;--icon-bw:3px;--icon-radius:0px;--icon-shadow:3px 3px 0 #111;--label-fg:#fbf8f1;--label-bg:#111111;--pv-bg:radial-gradient(circle at 30% 40%,#c62222 0 18px,transparent 19px),linear-gradient(transparent 60%,#1d4e9e 60% 72%,transparent 72%),conic-gradient(from 135deg at 75% 30%,#f2b705 0 90deg,transparent 90deg),#f2ebdd;--f-title:'Josefin Sans','Futura','Century Gothic',sans-serif;--f-ui:'Josefin Sans','Futura','Century Gothic',sans-serif;--f-mark:'Josefin Sans','Futura',sans-serif;--glow:rgba(198,34,34,0.75);--glow2:rgba(198,34,34,0.3);--ink:#111111;--client:#fbf8f1;--frame:inset 0 0 0 1px rgba(198,34,34,0.7),inset 0 0 0 5px #fbf8f1,inset 0 0 0 6px rgba(198,34,34,0.4);color-scheme:light} [data-os="bauhaus"] .mark-name,[data-os="bauhaus"] .pw-name{color:#111111;font-weight:700;letter-spacing:.04em;text-shadow:6px 6px 0 #c62222} [data-os="bauhaus"] .win-title h2{font-weight:700;letter-spacing:.06em} [data-os="ukiyoe"]{--bg:#e9dfc8;--fg:#1d2a44;--muted:#5e6572;--accent:#b83227;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f6efdd;--win-fg:#1d2a44;--win-border:#1d3557;--bw:2px;--radius:2px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:#1d3557;--title-fg:#f6efdd;--btn-bg:#f6efdd;--btn-fg:#1d2a44;--btn-border:#1d3557;--pri-bg:#b83227;--pri-fg:#ffffff;--cell-bg:#ebe5d5;--cell-bg2:#e0dbce;--cell-line:#cbc8be;--cell-on:linear-gradient(135deg,#c85f57,#9c2a21);--cell-play:rgba(184,50,39,0.22);--bar-bg:#1d3557;--bar-fg:#f6efdd;--bar-border:3px solid #b83227;--menu-bg:#f6efdd;--menu-fg:#1d2a44;--menu-hi:rgba(184,50,39,0.16);--focus:#b83227;--icon-bg:#f6efdd;--icon-fg:#b83227;--icon-border:#1d3557;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#1d2a44;--label-bg:rgba(246,239,221,.85);--pv-bg:radial-gradient(circle at 72% 30%,#c0392b 0 9px,transparent 10px),repeating-radial-gradient(circle at 50% 120%,#1d3557 0 3px,#f6efdd 3px 5px,#5a7fa8 5px 8px,#f6efdd 8px 10px),#e9dfc8;--f-title:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',sans-serif;--f-mark:'Shippori Mincho','Hiragino Mincho ProN',serif;--glow:rgba(184,50,39,0.75);--glow2:rgba(184,50,39,0.3);--ink:#1d2a44;--client:#f6efdd;--frame:inset 0 0 0 1px rgba(184,50,39,0.7),inset 0 0 0 5px #f6efdd,inset 0 0 0 6px rgba(184,50,39,0.4);color-scheme:light} [data-os="ukiyoe"] .mark-name,[data-os="ukiyoe"] .pw-name{color:#1d2a44;opacity:.88} [data-os="acuarela"]{--bg:#f4efe6;--fg:#2b3a4a;--muted:#6b747e;--accent:#2f6f96;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffdf8;--win-fg:#2b3a4a;--win-border:#9fb3c8;--bw:2px;--radius:6px;--shadow:4px 5px 0 rgba(43,58,74,0.22);--title-bg:linear-gradient(90deg,rgba(130,190,230,.55),rgba(240,170,190,.5),rgba(250,220,140,.5));--title-fg:#2b3a4a;--btn-bg:#fffdf8;--btn-fg:#2b3a4a;--btn-border:#9fb3c8;--pri-bg:#2f6f96;--pri-fg:#ffffff;--cell-bg:#f4f3ef;--cell-bg2:#eaeae7;--cell-line:#d5d6d5;--cell-on:linear-gradient(135deg,#5d8fad,#285e80);--cell-play:rgba(47,111,150,0.22);--bar-bg:rgba(255,253,248,.92);--bar-fg:#2b3a4a;--bar-border:1px solid #d8cfc0;--menu-bg:#fffdf8;--menu-fg:#2b3a4a;--menu-hi:rgba(47,111,150,0.16);--focus:#2f6f96;--icon-bg:#fffdf8;--icon-fg:#2f6f96;--icon-border:#9fb3c8;--icon-bw:2px;--icon-radius:12px;--icon-shadow:3px 3px 0 rgba(43,58,74,0.25);--label-fg:#2b3a4a;--label-bg:rgba(255,253,248,.8);--pv-bg:radial-gradient(ellipse at 30% 40%,rgba(120,180,230,.55),transparent 40%),radial-gradient(ellipse at 70% 60%,rgba(240,150,180,.5),transparent 40%),radial-gradient(ellipse at 55% 30%,rgba(250,210,120,.5),transparent 35%),#f4efe6;--f-title:'Kalam','Comic Sans MS',cursive;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'Kalam',cursive;--glow:rgba(47,111,150,0.75);--glow2:rgba(47,111,150,0.3);--ink:#2b3a4a;--client:#fffdf8;--frame:inset 0 0 0 1px rgba(47,111,150,0.7),inset 0 0 0 5px #fffdf8,inset 0 0 0 6px rgba(47,111,150,0.4);color-scheme:light} [data-os="acuarela"] .mark-name,[data-os="acuarela"] .pw-name{color:#2b3a4a;opacity:.88} [data-os="vitral"]{--bg:#0d0a14;--fg:#f2ead8;--muted:#968f8a;--accent:#e2b13c;--accent-fg:#1a1204;--danger:#ff8a7a;--win-bg:#17121f;--win-fg:#f2ead8;--win-border:#5a4a6a;--bw:2px;--radius:2px;--shadow:0 0 0 1px rgba(226,177,60,0.35),0 26px 64px rgba(0,0,0,.7);--title-bg:linear-gradient(90deg,#7a1f3a,#24407a 35%,#1f6a4a 65%,#8a6a1a);--title-fg:#ffffff;--btn-bg:#1f1828;--btn-fg:#f2ead8;--btn-border:#5a4a6a;--pri-bg:linear-gradient(180deg,#ecc463,#b88a25);--pri-fg:#1a1204;--cell-bg:#1f1828;--cell-bg2:#1b1524;--cell-line:rgba(242,234,216,.12);--cell-on:linear-gradient(135deg,#e8c267,#c09633);--cell-play:rgba(226,177,60,0.22);--bar-bg:rgba(13,10,20,.95);--bar-fg:#ffffff;--bar-border:2px solid #3a2e4a;--menu-bg:#17121f;--menu-fg:#f2ead8;--menu-hi:rgba(226,177,60,0.16);--focus:#e2b13c;--icon-bg:#17121f;--icon-fg:#e2b13c;--icon-border:#5a4a6a;--icon-bw:1px;--icon-radius:6px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(7,6,11,0.66);--pv-bg:conic-gradient(from 30deg at 40% 40%,#7a1f3a 0 60deg,#24407a 60deg 140deg,#1f6a4a 140deg 220deg,#8a6a1a 220deg 300deg,#4a1f6a 300deg);--f-title:'Grenze Gotisch','Cinzel',Georgia,serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Grenze Gotisch','Cinzel',serif;--glow:rgba(226,177,60,0.75);--glow2:rgba(226,177,60,0.3);--ink:#f2ead8;--client:#17121f;--frame:inset 0 0 0 1px rgba(226,177,60,0.7),inset 0 0 0 5px #17121f,inset 0 0 0 6px rgba(226,177,60,0.4);color-scheme:dark} [data-os="vitral"] .mark-name,[data-os="vitral"] .pw-name{background:linear-gradient(100deg,#937327,#efd494 45%,#e2b13c 70%,#f2dca7);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="vitral"] .win-title h2{text-shadow:0 1px 2px rgba(0,0,0,.7)} [data-os="origami"]{--bg:#eef0f2;--fg:#1d2733;--muted:#6e757c;--accent:#c94320;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#ffffff;--win-fg:#1d2733;--win-border:#c9ced6;--bw:1px;--radius:2px;--shadow:0 1px 0 #c9ced6,0 14px 30px rgba(29,39,51,.18);--title-bg:linear-gradient(135deg,#ffffff 0 50%,#eceff3 50%);--title-fg:#1d2733;--btn-bg:#ffffff;--btn-fg:#1d2733;--btn-border:#c9ced6;--pri-bg:#c94320;--pri-fg:#ffffff;--cell-bg:#f4f4f5;--cell-bg2:#e8e9eb;--cell-line:#d2d4d6;--cell-on:linear-gradient(135deg,#d56c51,#ab391b);--cell-play:rgba(201,67,32,0.22);--bar-bg:#ffffff;--bar-fg:#1d2733;--bar-border:1px solid #d5dae1;--menu-bg:#ffffff;--menu-fg:#1d2733;--menu-hi:rgba(201,67,32,0.16);--focus:#c94320;--icon-bg:#ffffff;--icon-fg:#c94320;--icon-border:#c9ced6;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#1d2733;--label-bg:rgba(255,255,255,.85);--pv-bg:linear-gradient(135deg,#f6f7f9 0 33%,#e4e7eb 33% 50%,#d6dbe1 50% 66%,#eef0f2 66%),linear-gradient(45deg,#fff,#ddd);--f-title:'Zen Kaku Gothic New','Hiragino Sans','Segoe UI',sans-serif;--f-ui:'Zen Kaku Gothic New','Hiragino Sans','Segoe UI',sans-serif;--f-mark:'Zen Kaku Gothic New',sans-serif;--glow:rgba(201,67,32,0.75);--glow2:rgba(201,67,32,0.3);--ink:#1d2733;--client:#ffffff;--frame:inset 0 0 0 1px rgba(201,67,32,0.7),inset 0 0 0 5px #ffffff,inset 0 0 0 6px rgba(201,67,32,0.4);color-scheme:light} [data-os="origami"] .mark-name,[data-os="origami"] .pw-name{color:#1d2733;opacity:.88} [data-os="barroco"]{--bg:#1f0710;--fg:#f0d78a;--muted:#755f5d;--accent:#7a1630;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f8f0e0;--win-fg:#2b0d14;--win-border:#b8913a;--bw:2px;--radius:0px;--shadow:0 0 0 4px #f8f0e0,0 0 0 5px #b8913a,0 24px 60px rgba(0,0,0,.6);--title-bg:linear-gradient(180deg,#5a0f22,#3a0815);--title-fg:#e8c56a;--btn-bg:linear-gradient(180deg,#fffaf0,#efdfbf);--btn-fg:#2b0d14;--btn-border:#b8913a;--pri-bg:linear-gradient(180deg,#e2c06a,#b38a2c);--pri-fg:#2b0d14;--cell-bg:#eee5d6;--cell-bg2:#e4d9cc;--cell-line:#cfc3b7;--cell-on:linear-gradient(135deg,#97495e,#681329);--cell-play:rgba(122,22,48,0.22);--bar-bg:linear-gradient(180deg,#3a0815,#1f0710);--bar-fg:#f0d78a;--bar-border:2px solid #c9a24a;--menu-bg:#f8f0e0;--menu-fg:#2b0d14;--menu-hi:rgba(122,22,48,0.16);--focus:#7a1630;--icon-bg:#f8f0e0;--icon-fg:#7a1630;--icon-border:#b8913a;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(17,4,9,0.66);--pv-bg:radial-gradient(ellipse 20% 30% at 50% 50%,rgba(232,197,106,.45) 0 60%,transparent 62%) 0 0/30px 40px,#3a0815;--f-title:'Cormorant Garamond',Garamond,Georgia,serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Cormorant Garamond',Garamond,serif;--glow:rgba(122,22,48,0.75);--glow2:rgba(122,22,48,0.3);--ink:#2b0d14;--client:#f8f0e0;--frame:inset 0 0 0 1px rgba(122,22,48,0.7),inset 0 0 0 5px #f8f0e0,inset 0 0 0 6px rgba(122,22,48,0.4);color-scheme:light} [data-os="barroco"] .mark-name,[data-os="barroco"] .pw-name{background:linear-gradient(100deg,#8d743e,#ead5a7 45%,#d9b25f 70%,#eedcb7);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="barroco"] .win-title h2{font-weight:700;font-size:18px} [data-os="cinenegro"]{--bg:#0e0e0e;--fg:#eaeaea;--muted:#919191;--accent:#d9d9d9;--accent-fg:#111111;--danger:#ff8a7a;--win-bg:#1a1a1a;--win-fg:#e8e8e8;--win-border:#626262;--bw:1px;--radius:2px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#2a2a2a,#161616);--title-fg:#f2f2f2;--btn-bg:#222222;--btn-fg:#eeeeee;--btn-border:#777777;--pri-bg:#e6e6e6;--pri-fg:#111111;--cell-bg:#222222;--cell-bg2:#1e1e1e;--cell-line:rgba(232,232,232,.14);--cell-on:linear-gradient(180deg,#ffffff,#9a9a9a);--cell-play:rgba(217,217,217,0.22);--bar-bg:#0a0a0a;--bar-fg:#ffffff;--bar-border:1px solid #555555;--menu-bg:#1a1a1a;--menu-fg:#e8e8e8;--menu-hi:rgba(217,217,217,0.16);--focus:#d9d9d9;--icon-bg:#1a1a1a;--icon-fg:#d9d9d9;--icon-border:#626262;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(8,8,8,0.66);--pv-bg:repeating-linear-gradient(160deg,rgba(255,255,255,.22) 0 7px,transparent 7px 16px),radial-gradient(circle at 50% 40%,#444,#0e0e0e 70%);--f-title:'Bebas Neue','Oswald',Impact,sans-serif;--f-ui:'Special Elite','Courier New',monospace;--f-mark:'Bebas Neue','Oswald',sans-serif;--glow:rgba(217,217,217,0.75);--glow2:rgba(217,217,217,0.3);--ink:#e8e8e8;--client:#1a1a1a;--frame:inset 0 0 0 1px rgba(217,217,217,0.7),inset 0 0 0 5px #1a1a1a,inset 0 0 0 6px rgba(217,217,217,0.4);color-scheme:dark} [data-os="cinenegro"] .mark-name,[data-os="cinenegro"] .pw-name{color:#f2f2f2;letter-spacing:.06em;text-shadow:12px 12px 0 rgba(0,0,0,.6)} [data-os="cinenegro"] .win-title h2{font-size:20px;letter-spacing:.06em;font-weight:400} [data-os="darkfantasy"]{--bg:#0a0710;--fg:#ece3d3;--muted:#928a86;--accent:#c9a961;--accent-fg:#1a1306;--danger:#ff8a7a;--win-bg:#15101c;--win-fg:#ece3d3;--win-border:rgba(201,169,97,0.7);--bw:2px;--radius:2px;--shadow:0 0 0 1px rgba(201,169,97,0.35),0 26px 64px rgba(0,0,0,.7);--title-bg:linear-gradient(180deg,#2a1830,#15101c);--title-fg:#e6d3a3;--btn-bg:rgba(255,255,255,.04);--btn-fg:#ece3d3;--btn-border:rgba(201,169,97,.5);--pri-bg:linear-gradient(180deg,#a3243a,#6e1424);--pri-fg:#ffffff;--cell-bg:#1e1726;--cell-bg2:#1a1421;--cell-line:rgba(236,227,211,.12);--cell-on:linear-gradient(180deg,#c9384f,#6e1424);--cell-play:rgba(201,169,97,0.22);--bar-bg:rgba(10,7,16,.95);--bar-fg:#ffffff;--bar-border:1px solid rgba(201,169,97,.45);--menu-bg:#15101c;--menu-fg:#ece3d3;--menu-hi:rgba(201,169,97,0.16);--focus:#c9a961;--icon-bg:#15101c;--icon-fg:#c9a961;--icon-border:rgba(201,169,97,0.7);--icon-bw:1px;--icon-radius:6px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,4,9,0.66);--pv-bg:radial-gradient(circle at 70% 28%,#efe6cf 0 8px,rgba(239,230,207,.2) 10px,transparent 18px),linear-gradient(175deg,transparent 62%,#120c18 63%),linear-gradient(#2a1838,#0a0710);--f-title:'Cinzel','Trajan Pro',Georgia,serif;--f-ui:'Cormorant Garamond',Garamond,Georgia,serif;--f-mark:'Cinzel',Georgia,serif;--glow:rgba(201,169,97,0.75);--glow2:rgba(201,169,97,0.3);--ink:#ece3d3;--client:#15101c;--frame:inset 0 0 0 1px rgba(201,169,97,0.7),inset 0 0 0 5px #15101c,inset 0 0 0 6px rgba(201,169,97,0.4);color-scheme:dark} [data-os="darkfantasy"] .mark-name,[data-os="darkfantasy"] .pw-name{color:#e6d3a3;text-shadow:0 0 18px rgba(160,30,50,.65)} [data-os="hadas"]{--bg:#081418;--fg:#eafff6;--muted:#8da09d;--accent:#c6ff7a;--accent-fg:#12210a;--danger:#ff8a7a;--win-bg:rgba(14,30,36,.9);--win-fg:#eafff6;--win-border:#5a6c6d;--bw:1px;--radius:20px;--shadow:0 16px 40px rgba(198,255,122,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(90deg,rgba(198,255,122,.18),rgba(255,170,240,.16));--title-fg:#eaffc4;--btn-bg:rgba(198,255,122,.08);--btn-fg:#eafff6;--btn-border:rgba(198,255,122,.45);--pri-bg:linear-gradient(135deg,#dcff9e,#ffb3ef);--pri-fg:#12210a;--cell-bg:rgba(255,255,255,.05);--cell-bg2:rgba(255,255,255,.09);--cell-line:rgba(198,255,122,.2);--cell-on:linear-gradient(135deg,#d3ff97,#a8d968);--cell-play:rgba(198,255,122,0.22);--bar-bg:rgba(8,20,24,.9);--bar-fg:#ffffff;--bar-border:1px solid rgba(198,255,122,.4);--menu-bg:rgba(12,26,32,.97);--menu-fg:#eafff6;--menu-hi:rgba(198,255,122,0.16);--focus:#c6ff7a;--icon-bg:#0d1d23;--icon-fg:#c6ff7a;--icon-border:#5a6c6d;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(198,255,122,0.25);--label-fg:#ffffff;--label-bg:rgba(4,11,13,0.66);--pv-bg:radial-gradient(circle at 25% 40%,#e9ff9e 0 2px,transparent 6px),radial-gradient(circle at 70% 30%,#ffb3ef 0 2px,transparent 6px),radial-gradient(circle at 55% 65%,#e9ff9e 0 2px,transparent 6px),linear-gradient(180deg,transparent 72%,#0d2a22 73%),#081418;--f-title:'Uncial Antiqua',Georgia,serif;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'Uncial Antiqua',Georgia,serif;--glow:rgba(198,255,122,0.75);--glow2:rgba(198,255,122,0.3);--ink:#eafff6;--client:#0d1d23;--frame:inset 0 0 0 1px rgba(198,255,122,0.7),inset 0 0 0 5px #0d1d23,inset 0 0 0 6px rgba(198,255,122,0.4);color-scheme:dark} [data-os="hadas"] .mark-name,[data-os="hadas"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(198,255,122,0.95),0 0 28px rgba(198,255,122,0.6)} [data-os="piratas"]{--bg:#1a100a;--fg:#ecdcb8;--muted:#9a8460;--accent:#c8a052;--accent-fg:#1a1006;--danger:#d0453a;--win-bg:#1f140c;--win-fg:#ecdcb8;--win-border:#8a6a32;--bw:2px;--radius:6px;--shadow:0 16px 40px rgba(0,0,0,.55);--title-bg:linear-gradient(180deg,#3a2414,#22150c);--title-fg:#e2c27a;--btn-bg:linear-gradient(180deg,#2e1e12,#1e130b);--btn-fg:#ecdcb8;--btn-border:#8a6a32;--pri-bg:linear-gradient(180deg,#e2c27a,#a87c34);--pri-fg:#1a1006;--cell-bg:#2a1c12;--cell-bg2:#24180f;--cell-line:rgba(200,160,82,.22);--cell-on:linear-gradient(135deg,#e2c27a,#9a6e28);--cell-play:rgba(200,160,82,0.22);--bar-bg:linear-gradient(180deg,#3a2414,#1e120a);--bar-fg:#e2c27a;--bar-border:3px solid #8a6a32;--menu-bg:#1f140c;--menu-fg:#ecdcb8;--menu-hi:rgba(200,160,82,0.16);--focus:#e2c27a;--icon-bg:radial-gradient(circle at 35% 30%,#4a2e1a,#24150c 75%);--icon-fg:#e2c27a;--icon-border:#9a7638;--icon-bw:2px;--icon-radius:10px;--icon-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 0 0 2px rgba(20,10,4,.6);--label-fg:#ecdcb8;--label-bg:rgba(20,12,6,.78);--pv-bg:radial-gradient(circle at 70% 35%,rgba(226,194,122,.5) 0 6px,transparent 7px),repeating-linear-gradient(90deg,#2a1a0e 0 14px,#24160c 14px 15px);--f-title:'Pirata One',Georgia,serif;--f-ui:'IM Fell English',Georgia,serif;--f-mark:'Pirata One',Georgia,serif;--glow:rgba(226,194,122,0.7);--glow2:rgba(226,194,122,0.3);--ink:#ecdcb8;--client:#1f140c;--frame:inset 0 0 0 1px rgba(200,160,82,0.7),inset 0 0 0 5px #1f140c,inset 0 0 0 6px rgba(200,160,82,0.4);color-scheme:dark} [data-os="piratas"] .mark-name,[data-os="piratas"] .pw-name{background:linear-gradient(180deg,#f6e2a8,#c8a052 55%,#7a5420);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.7))} [data-os="piratas"] .icon .tile{background-image:radial-gradient(circle at 18% 18%,#c8a052 0 1.6px,transparent 2.2px),radial-gradient(circle at 82% 18%,#c8a052 0 1.6px,transparent 2.2px),radial-gradient(circle at 18% 82%,#c8a052 0 1.6px,transparent 2.2px),radial-gradient(circle at 82% 82%,#c8a052 0 1.6px,transparent 2.2px),var(--icon-bg)} [data-os="piratas"] .win-title h2{font-weight:400;font-size:19px;letter-spacing:.02em} [data-os="islas"]{--bg:#cfe6f5;--fg:#12324a;--muted:#556d7e;--accent:#13795b;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(255,253,249,.72);--win-fg:#12324a;--win-border:rgba(255,255,255,.55);--bw:1px;--radius:18px;--shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);--title-bg:linear-gradient(90deg,rgba(255,255,255,.66),rgba(255,238,204,.58));--title-fg:#12324a;--btn-bg:rgba(255,255,255,.74);--btn-fg:#12324a;--btn-border:rgba(18,50,74,.2);--pri-bg:linear-gradient(135deg,#23a57e,#0f6249);--pri-fg:#ffffff;--cell-bg:rgba(255,255,255,.56);--cell-bg2:rgba(255,255,255,.36);--cell-line:rgba(18,50,74,.12);--cell-on:linear-gradient(135deg,#2bb08a,#0f6249);--cell-play:rgba(19,121,91,0.22);--bar-bg:rgba(255,252,246,.6);--bar-fg:#12324a;--bar-border:1px solid rgba(255,255,255,.92);--menu-bg:rgba(255,253,249,.9);--menu-fg:#12324a;--menu-hi:rgba(19,121,91,0.16);--focus:#13795b;--icon-bg:#f2f7f8;--icon-fg:#13795b;--icon-border:rgba(255,255,255,.55);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 20px rgba(0,0,0,.18);--label-fg:#12324a;--label-bg:rgba(255,255,255,.68);--pv-bg:radial-gradient(ellipse 26% 8% at 64% 42%,#57b878 0 66%,transparent 70%),radial-gradient(ellipse 15% 20% at 64% 50%,#a07a55 0 58%,transparent 62%),radial-gradient(ellipse 11% 4% at 27% 30%,#6cc485 0 66%,transparent 70%),radial-gradient(ellipse 7% 9% at 27% 33%,#a88360 0 56%,transparent 60%),linear-gradient(180deg,transparent 72%,#fff7ef 73%,#f3dfe8),linear-gradient(#86c8f0,#e4f4fd);--f-title:'Fraunces','Cormorant Garamond',Georgia,serif;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'Fraunces','Cormorant Garamond',Georgia,serif;--glow:rgba(19,121,91,0.75);--glow2:rgba(19,121,91,0.3);--ink:#12324a;--client:#f2f7f8;--frame:inset 0 0 0 1px rgba(19,121,91,0.7),inset 0 0 0 5px #f2f7f8,inset 0 0 0 6px rgba(19,121,91,0.4);color-scheme:light} [data-os="islas"] .mark-name,[data-os="islas"] .pw-name{color:#12324a;text-shadow:0 0 2px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.85),0 6px 26px rgba(255,236,200,.7)} [data-os="islas"] .win-title h2{font-weight:600;letter-spacing:.01em} [data-os="kawaii"]{--bg:#ffe8f3;--fg:#5a2a4a;--muted:#8c6880;--accent:#c93d82;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffafd;--win-fg:#5a2a4a;--win-border:#c5b1be;--bw:1px;--radius:24px;--shadow:0 16px 40px rgba(201,61,130,0.22),0 2px 6px rgba(0,0,0,.12);--title-bg:linear-gradient(90deg,#ffd1e8,#d9d1ff,#c9f2ff);--title-fg:#5a2a4a;--btn-bg:#ffffff;--btn-fg:#5a2a4a;--btn-border:#f3b8d6;--pri-bg:#c93d82;--pri-fg:#ffffff;--cell-bg:#f7f0f4;--cell-bg2:#eee5eb;--cell-line:#ded0d9;--cell-on:linear-gradient(135deg,#d5689e,#ab346e);--cell-play:rgba(201,61,130,0.22);--bar-bg:rgba(255,255,255,.9);--bar-fg:#5a2a4a;--bar-border:2px solid #ffc4e0;--menu-bg:#fffafd;--menu-fg:#5a2a4a;--menu-hi:rgba(201,61,130,0.16);--focus:#c93d82;--icon-bg:#fffafd;--icon-fg:#c93d82;--icon-border:#c5b1be;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 18px rgba(201,61,130,0.25);--label-fg:#5a2a4a;--label-bg:rgba(255,255,255,.8);--pv-bg:radial-gradient(circle at 30% 40%,#fff 0 10px,transparent 11px),radial-gradient(circle at 42% 38%,#fff 0 12px,transparent 13px),radial-gradient(circle at 75% 65%,#ffd6ea 0 8px,transparent 9px),linear-gradient(#ffd9ee,#e3dcff);--f-title:'Fredoka','Nunito',sans-serif;--f-ui:'Fredoka','Nunito',sans-serif;--f-mark:'Righteous','Fredoka',sans-serif;--glow:rgba(201,61,130,0.75);--glow2:rgba(201,61,130,0.3);--ink:#5a2a4a;--client:#fffafd;--frame:inset 0 0 0 1px rgba(201,61,130,0.7),inset 0 0 0 5px #fffafd,inset 0 0 0 6px rgba(201,61,130,0.4);color-scheme:light} [data-os="kawaii"] .mark-name,[data-os="kawaii"] .pw-name{color:#ffffff;-webkit-text-stroke:2px #c93d82;text-shadow:4px 4px 0 #ffc4e0} [data-os="marmol"]{--bg:#efede9;--fg:#2a2622;--muted:#696662;--accent:#8a6b1f;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fbfaf8;--win-fg:#2a2622;--win-border:#cfc8bb;--bw:1px;--radius:4px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:linear-gradient(180deg,#ffffff,#eeebe5);--title-fg:#2a2622;--btn-bg:#ffffff;--btn-fg:#2a2622;--btn-border:#cfc8bb;--pri-bg:linear-gradient(180deg,#e2c46e,#c09a3e);--pri-fg:#1d1608;--cell-bg:#f1efed;--cell-bg2:#e6e5e3;--cell-line:#d1d0cd;--cell-on:linear-gradient(135deg,#a48c50,#755b1a);--cell-play:rgba(138,107,31,0.22);--bar-bg:rgba(251,250,248,.94);--bar-fg:#2a2622;--bar-border:1px solid #cfc8bb;--menu-bg:#fbfaf8;--menu-fg:#2a2622;--menu-hi:rgba(138,107,31,0.16);--focus:#8a6b1f;--icon-bg:#fbfaf8;--icon-fg:#8a6b1f;--icon-border:#cfc8bb;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#2a2622;--label-bg:rgba(251,250,248,.85);--pv-bg:linear-gradient(115deg,transparent 30%,rgba(120,110,100,.35) 31%,transparent 33%),linear-gradient(160deg,transparent 55%,rgba(201,167,74,.5) 56%,transparent 57%),linear-gradient(#f7f5f1,#e4e0d8);--f-title:'Bodoni Moda','Playfair Display',Georgia,serif;--f-ui:'Jost','Nunito','Segoe UI',sans-serif;--f-mark:'Bodoni Moda','Playfair Display',Georgia,serif;--glow:rgba(138,107,31,0.75);--glow2:rgba(138,107,31,0.3);--ink:#2a2622;--client:#fbfaf8;--frame:inset 0 0 0 1px rgba(138,107,31,0.7),inset 0 0 0 5px #fbfaf8,inset 0 0 0 6px rgba(138,107,31,0.4);color-scheme:light} [data-os="marmol"] .mark-name,[data-os="marmol"] .pw-name{background:linear-gradient(100deg,#8d743e,#ead5a7 45%,#d9b25f 70%,#eedcb7);-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="marmol"] .win-title{box-shadow:inset 0 -2px 0 #c9a74a} [data-os="madera"]{--bg:#2b1a0f;--fg:#f6ead6;--muted:#725f4e;--accent:#8a4b1c;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#f6ead6;--win-fg:#3a2414;--win-border:#7a4a24;--bw:3px;--radius:8px;--shadow:0 18px 44px rgba(0,0,0,.45);--title-bg:repeating-linear-gradient(95deg,#9a6234 0 6px,#8a5530 6px 9px,#a86c3b 9px 16px);--title-fg:#fff4e2;--btn-bg:linear-gradient(180deg,#fbf3e4,#ead6b4);--btn-fg:#3a2414;--btn-border:#7a4a24;--pri-bg:#8a4b1c;--pri-fg:#ffffff;--cell-bg:#ede0cc;--cell-bg2:#e3d6c3;--cell-line:#d0c2af;--cell-on:linear-gradient(135deg,#a4734e,#754018);--cell-play:rgba(138,75,28,0.22);--bar-bg:linear-gradient(180deg,#6a4022,#3d2412);--bar-fg:#f6ead6;--bar-border:2px solid #c08a50;--menu-bg:#f6ead6;--menu-fg:#3a2414;--menu-hi:rgba(138,75,28,0.16);--focus:#8a4b1c;--icon-bg:#f6ead6;--icon-fg:#8a4b1c;--icon-border:#7a4a24;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(24,14,8,0.66);--pv-bg:repeating-radial-gradient(ellipse 120% 40% at 30% 50%,#a86c3b 0 4px,#8a5530 4px 6px,#9a6234 6px 10px);--f-title:'DM Serif Display',Georgia,serif;--f-ui:'Nunito','Segoe UI',sans-serif;--f-mark:'DM Serif Display',Georgia,serif;--glow:rgba(138,75,28,0.75);--glow2:rgba(138,75,28,0.3);--ink:#3a2414;--client:#f6ead6;--frame:inset 0 0 0 1px rgba(138,75,28,0.7),inset 0 0 0 5px #f6ead6,inset 0 0 0 6px rgba(138,75,28,0.4);color-scheme:light} [data-os="madera"] .mark-name,[data-os="madera"] .pw-name{color:#ffffff;text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35)} [data-os="madera"] .win-title h2{text-shadow:0 1px 1px rgba(0,0,0,.55)} [data-os="pizarron"]{--bg:#1e3a2b;--fg:#f2f2ea;--muted:#a8b4ab;--accent:#ffe066;--accent-fg:#1e2a1e;--danger:#ff8a7a;--win-bg:#24453a;--win-fg:#f2f2ea;--win-border:rgba(242,242,234,.7);--bw:2px;--radius:6px;--shadow:4px 5px 0 rgba(196,196,192,0.22);--title-bg:#1c3a2e;--title-fg:#f2f2ea;--btn-bg:rgba(255,255,255,.06);--btn-fg:#f2f2ea;--btn-border:rgba(242,242,234,.6);--pri-bg:#ffe066;--pri-fg:#1e2a1e;--cell-bg:rgba(255,255,255,.05);--cell-bg2:rgba(255,255,255,.09);--cell-line:rgba(242,242,234,.25);--cell-on:#ffe066;--cell-play:rgba(255,224,102,0.22);--bar-bg:#5a3d22;--bar-fg:#f2f2ea;--bar-border:4px solid #8a5f36;--menu-bg:#24453a;--menu-fg:#f2f2ea;--menu-hi:rgba(255,224,102,0.16);--focus:#ffe066;--icon-bg:#24453a;--icon-fg:#ffe066;--icon-border:rgba(242,242,234,.7);--icon-bw:2px;--icon-radius:12px;--icon-shadow:3px 3px 0 rgba(196,196,192,0.25);--label-fg:#f2f2ea;--label-bg:rgba(30,58,43,.75);--pv-bg:radial-gradient(ellipse at 40% 50%,rgba(255,255,255,.12),transparent 60%),linear-gradient(transparent 30%,rgba(242,242,234,.5) 30% 31%,transparent 31% 40%,rgba(242,242,234,.5) 40% 41%,transparent 41%),#24453a;--f-title:'Cormorant Garamond',Georgia,serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'Cormorant Garamond',Georgia,serif;--glow:rgba(255,224,102,0.75);--glow2:rgba(255,224,102,0.3);--ink:rgba(242,242,234,.6);--client:#24453a;--frame:inset 0 0 0 1px rgba(255,224,102,0.7),inset 0 0 0 5px #24453a,inset 0 0 0 6px rgba(255,224,102,0.4);color-scheme:dark} [data-os="pizarron"] .mark-name,[data-os="pizarron"] .pw-name{color:rgba(242,242,234,.9);text-shadow:0 0 2px rgba(255,255,255,.6)} [data-os="pizarron"] .win-title h2{font-size:18px} [data-os="minimal"]{--bg:#f4f4f2;--fg:#111111;--muted:#757575;--accent:#2f5bea;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#ffffff;--win-fg:#111111;--win-border:#e2e2de;--bw:1px;--radius:10px;--shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.08);--title-bg:#ffffff;--title-fg:#111111;--btn-bg:#ffffff;--btn-fg:#111111;--btn-border:#d4d4d0;--pri-bg:#111111;--pri-fg:#ffffff;--cell-bg:#f7f7f5;--cell-bg2:#f0f0ee;--cell-line:#e2e2de;--cell-on:linear-gradient(135deg,#5d7fef,#284dc7);--cell-play:rgba(47,91,234,0.22);--bar-bg:#ffffff;--bar-fg:#111111;--bar-border:1px solid #e2e2de;--menu-bg:#ffffff;--menu-fg:#111111;--menu-hi:#f0f0ee;--focus:#2f5bea;--icon-bg:#ffffff;--icon-fg:#111111;--icon-border:#e2e2de;--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 2px 6px rgba(0,0,0,.08);--label-fg:#111111;--label-bg:rgba(255,255,255,.9);--pv-bg:radial-gradient(circle at 68% 40%,#2f5bea 0 5px,transparent 6px),#f4f4f2;--f-title:'Space Grotesk','Segoe UI',system-ui,sans-serif;--f-ui:'Space Grotesk','Segoe UI',system-ui,sans-serif;--f-mark:'Space Grotesk','Segoe UI',sans-serif;--glow:rgba(47,91,234,0.75);--glow2:rgba(47,91,234,0.3);--ink:#111111;--client:#ffffff;--frame:inset 0 0 0 1px rgba(47,91,234,0.7),inset 0 0 0 5px #ffffff,inset 0 0 0 6px rgba(47,91,234,0.4);color-scheme:light} [data-os="minimal"] .mark-name,[data-os="minimal"] .pw-name{color:#111111;opacity:.88} [data-os="minimal"] .win-title{border-bottom:1px solid #ececea} [data-os="altocontraste"]{--bg:#000000;--fg:#ffffff;--muted:#d0d0d0;--accent:#ffff00;--accent-fg:#000000;--danger:#ff8a7a;--win-bg:#000000;--win-fg:#ffffff;--win-border:#ffffff;--bw:2px;--radius:0px;--shadow:none;--title-bg:#000000;--title-fg:#ffff00;--btn-bg:#000000;--btn-fg:#ffffff;--btn-border:#ffffff;--pri-bg:#ffff00;--pri-fg:#000000;--cell-bg:#000000;--cell-bg2:#141414;--cell-line:#ffffff;--cell-on:#ffff00;--cell-play:rgba(255,255,0,.3);--bar-bg:#000000;--bar-fg:#ffffff;--bar-border:2px solid #ffffff;--menu-bg:#000000;--menu-fg:#ffffff;--menu-hi:#333333;--focus:#00ffff;--icon-bg:#000000;--icon-fg:#ffff00;--icon-border:#ffffff;--icon-bw:3px;--icon-radius:0px;--icon-shadow:none;--label-fg:#ffffff;--label-bg:#000000;--pv-bg:linear-gradient(#000,#000);--f-title:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--f-ui:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--f-mark:system-ui,-apple-system,'Segoe UI',sans-serif;--glow:rgba(255,255,0,0.75);--glow2:rgba(255,255,0,0.3);--ink:#ffffff;--client:#000000;--frame:inset 0 0 0 1px rgba(255,255,0,0.7),inset 0 0 0 5px #000000,inset 0 0 0 6px rgba(255,255,0,0.4);color-scheme:dark} [data-os="altocontraste"] .mark-name,[data-os="altocontraste"] .pw-name{color:#ffffff;opacity:.88} [data-os="altocontraste"] .win-title{border-bottom:2px solid #ffffff}[data-os="altocontraste"] a{color:#ffff00} [data-os="terminalia"]{--bg:#010801;--fg:#8cff66;--muted:#5b9948;--accent:#41ff00;--accent-fg:#031a00;--danger:#ff8a7a;--win-bg:#020b02;--win-fg:#9cff7a;--win-border:#41ff00;--bw:4px;--radius:0px;--shadow:0 0 26px rgba(65,255,0,.22);--title-bg:#41ff00;--title-fg:#031a00;--btn-bg:#020b02;--btn-fg:#41ff00;--btn-border:#41ff00;--pri-bg:#41ff00;--pri-fg:#031a00;--cell-bg:rgba(65,255,0,.05);--cell-bg2:rgba(65,255,0,.1);--cell-line:rgba(65,255,0,.3);--cell-on:#41ff00;--cell-play:rgba(156,255,122,.22);--bar-bg:#000000;--bar-fg:#41ff00;--bar-border:2px solid #41ff00;--menu-bg:#020b02;--menu-fg:#9cff7a;--menu-hi:#41ff00;--focus:#41ff00;--icon-bg:#020b02;--icon-fg:#41ff00;--icon-border:#41ff00;--icon-bw:1px;--icon-radius:0px;--icon-shadow:0 0 12px rgba(65,255,0,.35);--label-fg:#9cff7a;--label-bg:rgba(0,0,0,.85);--pv-bg:repeating-linear-gradient(transparent 0 3px,rgba(0,0,0,.35) 3px 4px),linear-gradient(transparent 22%,#41ff00 22% 30%,transparent 30% 40%,rgba(65,255,0,.5) 40% 44%,transparent 44%) 15% 0/60% 100% no-repeat,#010801;--f-title:'VT323','Courier New',monospace;--f-ui:'Space Mono','Courier New',monospace;--f-mark:'VT323','Courier New',monospace;--glow:rgba(65,255,0,0.75);--glow2:rgba(65,255,0,0.3);--ink:#9cff7a;--client:#020b02;--frame:inset 0 0 0 1px rgba(65,255,0,0.7),inset 0 0 0 5px #020b02,inset 0 0 0 6px rgba(65,255,0,0.4);color-scheme:dark} [data-os="terminalia"] .mark-name,[data-os="terminalia"] .pw-name{color:#41ff00;text-shadow:0 0 14px rgba(65,255,0,0.8)} [data-os="terminalia"] .mark-name::after,[data-os="terminalia"] .pw-name::after{content:"_";animation:blink 1s steps(1) infinite} [data-os="videotex"]{--bg:#000000;--fg:#ffffff;--muted:#00ffff;--accent:#00ffff;--accent-fg:#000000;--danger:#ff8a7a;--win-bg:#000000;--win-fg:#ffffff;--win-border:#0000ff;--bw:3px;--radius:0px;--shadow:6px 6px 0 #0000ff;--title-bg:#0000ff;--title-fg:#ffff00;--btn-bg:#000000;--btn-fg:#ffffff;--btn-border:#00ffff;--pri-bg:#ffff00;--pri-fg:#000000;--cell-bg:#000000;--cell-bg2:#0b0b0b;--cell-line:#3a3aff;--cell-on:#00ff00;--cell-play:rgba(255,0,255,.35);--bar-bg:#000000;--bar-fg:#ffffff;--bar-border:4px solid #0000ff;--menu-bg:#000000;--menu-fg:#ffffff;--menu-hi:#0000ff;--focus:#00ffff;--icon-bg:#000000;--icon-fg:#ffff00;--icon-border:#00ffff;--icon-bw:2px;--icon-radius:0px;--icon-shadow:3px 3px 0 #0000ff;--label-fg:#ffffff;--label-bg:#0000ff;--pv-bg:linear-gradient(#0000ff 0 18%,transparent 18%),linear-gradient(90deg,#ff0000 0 25%,#00ff00 25% 50%,#ffff00 50% 75%,#00ffff 75%) 0 100%/100% 12% no-repeat,radial-gradient(circle,#ffff00 0 2px,transparent 2.5px) 0 0/8px 8px,#000000;--f-title:'VT323','Courier New',monospace;--f-ui:'Share Tech Mono','Courier New',monospace;--f-mark:'VT323','Courier New',monospace;--glow:rgba(0,255,255,0.75);--glow2:rgba(0,255,255,0.3);--ink:#ffffff;--client:#000000;--frame:inset 0 0 0 1px rgba(0,255,255,0.7),inset 0 0 0 5px #000000,inset 0 0 0 6px rgba(0,255,255,0.4);color-scheme:dark} [data-os="videotex"] .mark-name,[data-os="videotex"] .pw-name{color:#ffff00;background:#0000ff;padding:0 14px;transform:scaleY(1.3);transform-origin:50% 70%} [data-os="bitonal"]{--bg:#808080;--fg:#000000;--muted:#4d4d4d;--accent:#000000;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#ffffff;--win-fg:#000000;--win-border:#000000;--bw:2px;--radius:0px;--shadow:3px 3px 0 #000000;--title-bg:repeating-linear-gradient(180deg,#000000 0 1px,#ffffff 1px 3px);--title-fg:#000000;--btn-bg:#ffffff;--btn-fg:#000000;--btn-border:#000000;--pri-bg:#000000;--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#ffffff;--cell-line:#000000;--cell-on:#000000;--cell-play:repeating-conic-gradient(#000000 0 25%,#ffffff 0 50%) 0 0/2px 2px;--bar-bg:#ffffff;--bar-fg:#000000;--bar-border:2px solid #000000;--menu-bg:#ffffff;--menu-fg:#000000;--menu-hi:#000000;--focus:#000000;--icon-bg:#ffffff;--icon-fg:#000000;--icon-border:#000000;--icon-bw:2px;--icon-radius:0px;--icon-shadow:2px 2px 0 #000000;--label-fg:#000000;--label-bg:#ffffff;--pv-bg:radial-gradient(circle at 70% 35%,#ffffff 0 12px,#000000 12px 14px,transparent 14px),repeating-conic-gradient(#000000 0 25%,#ffffff 0 50%) 0 0/4px 4px;--f-title:'DotGothic16','Courier New',monospace;--f-ui:'DotGothic16','Courier New',monospace;--f-mark:'DotGothic16','Courier New',monospace;--glow:rgba(0,0,0,0.75);--glow2:rgba(0,0,0,0.3);--ink:#000000;--client:#ffffff;--frame:inset 0 0 0 1px rgba(0,0,0,0.7),inset 0 0 0 5px #ffffff,inset 0 0 0 6px rgba(0,0,0,0.4);color-scheme:light} [data-os="bitonal"] .mark-name,[data-os="bitonal"] .pw-name{color:#000000;background:#ffffff;padding:0 12px;border:2px solid #000000;box-shadow:4px 4px 0 #000000} [data-os="oscilia"]{--bg:#07040f;--fg:#f2e9ff;--muted:#90899f;--accent:#ff3df2;--accent-fg:#1a0018;--danger:#ff8a7a;--win-bg:rgba(14,8,28,.92);--win-fg:#efe6ff;--win-border:#ff3df2;--bw:1px;--radius:6px;--shadow:0 0 0 1px rgba(255,61,242,0.5),0 0 24px rgba(255,61,242,0.4),0 20px 50px rgba(0,0,0,.6);--title-bg:linear-gradient(90deg,#1b0f33,#2a0d3d);--title-fg:#3df2ff;--btn-bg:rgba(255,61,242,.08);--btn-fg:#efe6ff;--btn-border:#3df2ff;--pri-bg:linear-gradient(90deg,#ff3df2,#3df2ff);--pri-fg:#12001a;--cell-bg:rgba(255,255,255,.04);--cell-bg2:rgba(255,255,255,.08);--cell-line:rgba(61,242,255,.25);--cell-on:linear-gradient(180deg,#3df2ff,#ff3df2);--cell-play:rgba(255,61,242,0.22);--bar-bg:rgba(7,4,15,.92);--bar-fg:#ffffff;--bar-border:1px solid #ff3df2;--menu-bg:rgba(16,9,30,.97);--menu-fg:#efe6ff;--menu-hi:rgba(255,61,242,0.16);--focus:#ff3df2;--icon-bg:#0d081b;--icon-fg:#ff3df2;--icon-border:#ff3df2;--icon-bw:1px;--icon-radius:10px;--icon-shadow:0 0 14px rgba(255,61,242,0.5);--label-fg:#ffffff;--label-bg:rgba(4,2,8,0.66);--pv-bg:linear-gradient(90deg,rgba(61,242,255,.18) 1px,transparent 1px) 0 0/14px 14px,linear-gradient(rgba(61,242,255,.18) 1px,transparent 1px) 0 0/14px 14px,radial-gradient(ellipse 60% 18% at 50% 50%,rgba(255,61,242,.6),transparent 70%),#07040f;--f-title:'Quantico','Orbitron','Trebuchet MS',sans-serif;--f-ui:'Exo 2','Trebuchet MS',Arial,sans-serif;--f-mark:'Quantico','Orbitron',sans-serif;--glow:rgba(255,61,242,0.75);--glow2:rgba(255,61,242,0.3);--ink:#efe6ff;--client:#0d081b;--frame:inset 0 0 0 1px rgba(255,61,242,0.7),inset 0 0 0 5px #0d081b,inset 0 0 0 6px rgba(255,61,242,0.4);color-scheme:dark} [data-os="oscilia"] .mark-name,[data-os="oscilia"] .pw-name{color:#ffffff;text-shadow:0 0 10px rgba(255,61,242,0.95),0 0 28px rgba(255,61,242,0.6)} [data-os="oscilia"] .wb{border-radius:50%;width:24px;background:radial-gradient(circle at 50% 35%,#3a2d55,#120a20 75%);border:1px solid #3df2ff;color:#3df2ff;box-shadow:0 0 8px rgba(61,242,255,.4)}[data-os="oscilia"] .wb-close{border-color:#ff3df2;color:#ff3df2;box-shadow:0 0 8px rgba(255,61,242,.45)}[data-os="oscilia"] .win-title{box-shadow:inset 0 -1px 0 rgba(61,242,255,.5)} [data-os="chiptunia"]{--bg:#14121c;--fg:#ffffff;--muted:#9a98a6;--accent:#ff5470;--accent-fg:#1a0008;--danger:#ff8a7a;--win-bg:#1e1c2a;--win-fg:#f4f1ff;--win-border:#ffffff;--bw:4px;--radius:0px;--shadow:6px 6px 0 rgba(0,0,0,.5);--title-bg:linear-gradient(180deg,#ff6a83 0 50%,#e8475f 50%);--title-fg:#1a0008;--btn-bg:#2b2840;--btn-fg:#ffffff;--btn-border:#ffffff;--pri-bg:#ffd23f;--pri-fg:#14121c;--cell-bg:#262338;--cell-bg2:#221f33;--cell-line:#4a4566;--cell-on:#ffd23f;--cell-play:rgba(255,84,112,0.22);--bar-bg:#0d0c14;--bar-fg:#ffffff;--bar-border:4px solid #ff5470;--menu-bg:#1e1c2a;--menu-fg:#f4f1ff;--menu-hi:#3a3654;--focus:#ff5470;--icon-bg:#1e1c2a;--icon-fg:#ffd23f;--icon-border:#ffffff;--icon-bw:3px;--icon-radius:0px;--icon-shadow:4px 4px 0 rgba(0,0,0,.5);--label-fg:#ffffff;--label-bg:#0d0c14;--pv-bg:repeating-linear-gradient(transparent 0 9px,rgba(255,255,255,.08) 9px 10px),linear-gradient(90deg,transparent 18%,rgba(255,210,63,.7) 18% 20%,transparent 20% 48%,rgba(255,84,112,.7) 48% 50%,transparent 50%),#14121c;--f-title:'Press Start 2P','VT323','Courier New',monospace;--f-ui:'VT323','Courier New',monospace;--f-mark:'Press Start 2P','VT323',monospace;--glow:rgba(255,84,112,0.75);--glow2:rgba(255,84,112,0.3);--ink:#f4f1ff;--client:#1e1c2a;--frame:inset 0 0 0 1px rgba(255,84,112,0.7),inset 0 0 0 5px #1e1c2a,inset 0 0 0 6px rgba(255,84,112,0.4);color-scheme:dark} [data-os="chiptunia"] .mark-name,[data-os="chiptunia"] .pw-name{color:#ff5470;font-size:clamp(16px,2.6vw,34px);white-space:nowrap;text-shadow:4px 4px 0 #000} [data-os="lunaria"]{--bg:#0b1212;--fg:#ffd28a;--muted:#939287;--accent:#ffb547;--accent-fg:#1a0f00;--danger:#ff8a7a;--win-bg:#1c2424;--win-fg:#e9e2cf;--win-border:#5f6b6b;--bw:2px;--radius:4px;--shadow:0 0 0 1px #000000,0 22px 50px rgba(0,0,0,.65);--title-bg:linear-gradient(180deg,#0e1414,#070a0a);--title-fg:#ffb547;--btn-bg:linear-gradient(180deg,#3a4444,#252d2d);--btn-fg:#f2ead6;--btn-border:#5f6b6b;--pri-bg:linear-gradient(180deg,#ffc56b,#e8962a);--pri-fg:#1a0f00;--cell-bg:#232c2c;--cell-bg2:#1f2727;--cell-line:rgba(233,226,207,.14);--cell-on:linear-gradient(180deg,#ffd27a,#e8962a);--cell-play:rgba(255,181,71,0.22);--bar-bg:linear-gradient(180deg,#2a3333,#121818);--bar-fg:#ffd28a;--bar-border:2px solid #ffb547;--menu-bg:#1c2424;--menu-fg:#e9e2cf;--menu-hi:rgba(255,181,71,0.16);--focus:#ffb547;--icon-bg:#1c2424;--icon-fg:#ffb547;--icon-border:#5f6b6b;--icon-bw:1px;--icon-radius:6px;--icon-shadow:0 6px 14px rgba(0,0,0,.35);--label-fg:#ffffff;--label-bg:rgba(6,10,10,0.66);--pv-bg:radial-gradient(circle at 30% 45%,transparent 9px,#ffb547 9px 10px,transparent 11px),radial-gradient(circle at 72% 40%,#ffb547 0 4px,transparent 5px),linear-gradient(transparent 70%,#1c2424 70%),#0b1212;--f-title:'Michroma','Arial Black',sans-serif;--f-ui:'Share Tech Mono','Courier New',monospace;--f-mark:'Michroma','Arial Black',sans-serif;--glow:rgba(255,181,71,0.75);--glow2:rgba(255,181,71,0.3);--ink:#e9e2cf;--client:#1c2424;--frame:inset 0 0 0 1px rgba(255,181,71,0.7),inset 0 0 0 5px #1c2424,inset 0 0 0 6px rgba(255,181,71,0.4);color-scheme:dark} [data-os="lunaria"] .mark-name,[data-os="lunaria"] .pw-name{color:#ffd28a;letter-spacing:.08em;text-shadow:0 0 12px rgba(255,181,71,.65)} [data-os="desktopia"]{--bg:#56626e;--fg:#ffffff;--muted:#464646;--accent:#1f3a8a;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#c3c3c3;--win-fg:#000000;--win-border:#000000;--bw:1px;--radius:0px;--shadow:3px 3px 0 rgba(0,0,0,.45);--title-bg:linear-gradient(90deg,#262626,#4a4a4a);--title-fg:#ffffff;--btn-bg:#c3c3c3;--btn-fg:#000000;--btn-border:#000000;--pri-bg:#1f3a8a;--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#d6d6d6;--cell-line:#808080;--cell-on:#1f3a8a;--cell-play:rgba(31,58,138,0.22);--bar-bg:#c3c3c3;--bar-fg:#000000;--bar-border:2px solid #ffffff;--menu-bg:#c3c3c3;--menu-fg:#000000;--menu-hi:#1f3a8a;--focus:#1f3a8a;--icon-bg:#c3c3c3;--icon-fg:#1f3a8a;--icon-border:#000000;--icon-bw:1px;--icon-radius:0px;--icon-shadow:inset -2px -2px 0 #808080,inset 2px 2px 0 #ffffff;--label-fg:#ffffff;--label-bg:rgba(0,0,0,0);--pv-bg:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(#66727e,#4a5663);--f-title:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;--f-ui:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;--f-mark:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;--glow:rgba(31,58,138,0.75);--glow2:rgba(31,58,138,0.3);--ink:#000000;--client:#c3c3c3;--frame:inset 0 0 0 1px rgba(31,58,138,0.7),inset 0 0 0 5px #c3c3c3,inset 0 0 0 6px rgba(31,58,138,0.4);color-scheme:light} [data-os="desktopia"] .mark-name,[data-os="desktopia"] .pw-name{color:#c3c3c3;text-shadow:-1px -1px 0 #ffffff,2px 2px 0 #303030} [data-os="desktopia"] .icon .lbl{text-shadow:1px 1px 0 #000000,0 0 3px rgba(0,0,0,.6)} [data-os="coralia"]{--bg:#0a5f8a;--fg:#ffffff;--muted:#5a6670;--accent:#0874ae;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:repeating-linear-gradient(180deg,#f4f7fa 0 2px,#e9eef2 2px 4px);--win-fg:#1b2a36;--win-border:rgba(110,130,150,.6);--bw:1px;--radius:10px;--shadow:0 18px 40px rgba(0,30,60,.35);--title-bg:linear-gradient(180deg,#fdfdfd,#e2e7ec 50%,#d5dbe1 51%,#eef1f4);--title-fg:#1b2a36;--btn-bg:linear-gradient(180deg,#ffffff,#e6ebf0 50%,#d8dee4 51%,#f2f5f8);--btn-fg:#1b2a36;--btn-border:#8a98a6;--pri-bg:linear-gradient(180deg,#bfe6ff,#5cb6f0 50%,#3aa2e8 51%,#8fd4ff);--pri-fg:#06233a;--cell-bg:#ffffff;--cell-bg2:#eef3f7;--cell-line:#c3cfd9;--cell-on:radial-gradient(circle at 35% 30%,#d6f1ff,#3aa2e8 55%,#1269a8);--cell-play:rgba(8,116,174,0.22);--bar-bg:linear-gradient(180deg,rgba(255,255,255,.86),rgba(214,228,240,.8));--bar-fg:#1b2a36;--bar-border:1px solid rgba(255,255,255,.95);--menu-bg:#f7fafc;--menu-fg:#1b2a36;--menu-hi:#bfe3fa;--focus:#0874ae;--icon-bg:linear-gradient(180deg,#ffffff,#dbe5ee);--icon-fg:#0874ae;--icon-border:rgba(255,255,255,.95);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 6px 14px rgba(0,40,80,.3);--label-fg:#ffffff;--label-bg:rgba(0,40,70,.45);--pv-bg:radial-gradient(circle at 30% 60%,rgba(255,255,255,.55) 0 5px,transparent 9px),radial-gradient(circle at 70% 35%,rgba(255,255,255,.5) 0 7px,transparent 12px),linear-gradient(170deg,transparent 55%,rgba(255,255,255,.25) 56%,transparent 70%),linear-gradient(#7fd8ff,#1f86d0 60%,#0a5f8a);--f-title:'Varela Round','Nunito','Segoe UI',sans-serif;--f-ui:'Varela Round','Nunito','Segoe UI',sans-serif;--f-mark:'Varela Round','Nunito',sans-serif;--glow:rgba(8,116,174,0.75);--glow2:rgba(8,116,174,0.3);--ink:#1b2a36;--client:#eef2f6;--frame:inset 0 0 0 1px rgba(8,116,174,0.7),inset 0 0 0 5px #eef2f6,inset 0 0 0 6px rgba(8,116,174,0.4);color-scheme:light} [data-os="coralia"] .mark-name,[data-os="coralia"] .pw-name{background:linear-gradient(180deg,#ffffff 0%,#d4f0ff 46%,#5cb6f0 54%,#c2ecff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,40,80,.55))} [data-os="translucia"]{--bg:#d9eef3;--fg:#0b2f3a;--muted:#62737a;--accent:#00809f;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(0,168,204,.55);--win-fg:#0d2630;--win-border:rgba(0,0,0,0);--bw:8px;--radius:18px;--shadow:0 16px 38px rgba(0,90,120,.28);--title-bg:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 55%,rgba(255,255,255,0));--title-fg:#0a1c22;--btn-bg:linear-gradient(180deg,#ffffff,#e4f3f7);--btn-fg:#0d2630;--btn-border:rgba(0,110,140,.5);--pri-bg:linear-gradient(180deg,#169fc4,#06739a 55%,#055f80);--pri-fg:#ffffff;--cell-bg:#ffffff;--cell-bg2:#eef8fb;--cell-line:#c2e3ec;--cell-on:linear-gradient(180deg,#5fd3f0,#0a8db3);--cell-play:rgba(0,168,204,.2);--bar-bg:rgba(0,150,190,.5);--bar-fg:#06222b;--bar-border:1px solid rgba(255,255,255,.75);--menu-bg:rgba(248,253,254,.95);--menu-fg:#0d2630;--menu-hi:rgba(0,168,204,.2);--focus:#06739a;--icon-bg:rgba(0,168,204,.5);--icon-fg:#06303c;--icon-border:rgba(255,255,255,.8);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,90,120,.25);--label-fg:#0b2f3a;--label-bg:rgba(255,255,255,.75);--pv-bg:radial-gradient(circle at 74% 26%,rgba(255,255,255,.95) 0 3px,transparent 4px),linear-gradient(rgba(236,52,100,.45),rgba(236,52,100,.45)) 64% 62%/34% 40% no-repeat,linear-gradient(rgba(255,124,28,.5),rgba(255,124,28,.5)) 18% 26%/40% 46% no-repeat,linear-gradient(rgba(0,168,204,.48),rgba(0,168,204,.48)) 42% 74%/40% 40% no-repeat,repeating-linear-gradient(90deg,transparent 0 9px,rgba(60,120,140,.22) 9px 10px),linear-gradient(#e9f6f9,#cfe8ef);--f-title:'M PLUS Rounded 1c','Varela Round','Nunito',sans-serif;--f-ui:'M PLUS Rounded 1c','Nunito','Segoe UI',sans-serif;--f-mark:'M PLUS Rounded 1c','Varela Round',sans-serif;--glow:rgba(0,128,159,0.75);--glow2:rgba(0,128,159,0.3);--ink:#0d2630;--client:#f8fdfe;--frame:inset 0 0 0 1px rgba(0,128,159,0.7),inset 0 0 0 5px #f8fdfe,inset 0 0 0 6px rgba(0,128,159,0.4);color-scheme:light} [data-os="translucia"] .mark-name,[data-os="translucia"] .pw-name{color:rgba(255,255,255,.78);font-weight:800;-webkit-text-stroke:1.5px rgba(0,120,150,.55);text-shadow:0 3px 0 rgba(0,140,180,.35),0 10px 22px rgba(0,90,120,.3)} [data-os="dirigible"]{--bg:#0f2a33;--fg:#f4e6c4;--muted:#c9b48a;--accent:#d9a441;--accent-fg:#1d1206;--danger:#ff8a7a;--win-bg:#241812;--win-fg:#f1e2c0;--win-border:#b8873a;--bw:5px;--radius:10px;--shadow:0 0 0 1px #4a3216,0 22px 50px rgba(0,0,0,.6);--title-bg:linear-gradient(180deg,#f7e3a1 0%,#d6a548 38%,#b07c26 62%,#e0b65c 100%);--title-fg:#2a1a08;--btn-bg:linear-gradient(180deg,#3a2a1f,#2a1d15);--btn-fg:#f1e2c0;--btn-border:#b8873a;--pri-bg:linear-gradient(180deg,#f2d27c,#c9922f 55%,#a87422);--pri-fg:#1d1206;--cell-bg:#2e2018;--cell-bg2:#35261c;--cell-line:rgba(217,164,65,.3);--cell-on:radial-gradient(circle at 35% 30%,#fff0bf,#d9a441 50%,#7a5212);--cell-play:rgba(80,180,160,.24);--bar-bg:linear-gradient(180deg,#3b2a1c,#1f150e);--bar-fg:#f4e6c4;--bar-border:2px solid #c9922f;--menu-bg:#241812;--menu-fg:#f1e2c0;--menu-hi:rgba(217,164,65,.2);--focus:#d9a441;--icon-bg:radial-gradient(circle at 35% 30%,#5fa196,#1f4a46 70%);--icon-fg:#f7dc8e;--icon-border:#c9922f;--icon-bw:1px;--icon-radius:50%;--icon-shadow:0 0 0 3px #7a5212,0 6px 14px rgba(0,0,0,.5);--label-fg:#f4e6c4;--label-bg:rgba(12,30,38,.72);--pv-bg:radial-gradient(ellipse 27% 12% at 56% 38%,#f1e2c0 0 58%,#b8873a 60% 70%,transparent 72%),linear-gradient(#7a5212,#7a5212) 56% 55%/14% 7% no-repeat,radial-gradient(circle at 80% 18%,#fbe9c0 0 4px,transparent 5px),linear-gradient(180deg,#0c1f2c,#24485a 45%,#c4794a 76%,#f6d29a);--f-title:'Bodoni Moda','Playfair Display',Georgia,serif;--f-ui:'Old Standard TT','Cormorant Garamond',Georgia,serif;--f-mark:'Bodoni Moda','Playfair Display',Georgia,serif;--glow:rgba(217,164,65,0.75);--glow2:rgba(217,164,65,0.3);--ink:#f1e2c0;--client:#241812;--frame:inset 0 0 0 1px rgba(217,164,65,0.7),inset 0 0 0 5px #241812,inset 0 0 0 6px rgba(217,164,65,0.4);color-scheme:dark} [data-os="dirigible"] .mark-name,[data-os="dirigible"] .pw-name{background:linear-gradient(180deg,#fff2c2 0%,#e2b354 42%,#8a5c16 56%,#f0c870 100%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.04em;filter:drop-shadow(0 2px 0 #3a2508) drop-shadow(0 6px 12px rgba(0,0,0,.5))} [data-os="fantasma"]{--bg:#14120f;--fg:#ede5d3;--muted:#a59a89;--accent:#e89b3c;--accent-fg:#1a1206;--danger:#ff8a7a;--win-bg:#1e1b17;--win-fg:#ede5d3;--win-border:#3d362c;--bw:1px;--radius:6px;--shadow:0 0 0 1px rgba(0,0,0,.55),0 26px 60px rgba(0,0,0,.62);--title-bg:linear-gradient(180deg,#2c271f,#1c1915);--title-fg:#ede5d3;--btn-bg:linear-gradient(180deg,#302b23,#231f19);--btn-fg:#ede5d3;--btn-border:#4d443a;--pri-bg:linear-gradient(180deg,#f3af57,#da8a2c);--pri-fg:#1a1206;--cell-bg:#262119;--cell-bg2:#2b2820;--cell-line:#3d362c;--cell-on:linear-gradient(180deg,#f6bb6a,#d6832a);--cell-play:rgba(111,191,172,.28);--bar-bg:linear-gradient(180deg,#25211b,#161410);--bar-fg:#ede5d3;--bar-border:1px solid #3d362c;--menu-bg:#1e1b17;--menu-fg:#ede5d3;--menu-hi:rgba(232,155,60,.16);--focus:#6fbfac;--icon-bg:linear-gradient(180deg,#2f2a22,#1b1814);--icon-fg:#e89b3c;--icon-border:#4a4136;--icon-bw:1px;--icon-radius:12px;--icon-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,200,.1);--label-fg:#ede5d3;--label-bg:rgba(20,18,15,.74);--pv-bg:linear-gradient(90deg,transparent 91%,#5b3720 91% 93%,#7a4a28 93% 97%,#4a2c17 97%),radial-gradient(circle at 36% 70%,#e9e2d2 0 2px,#2a251f 3px 7px,transparent 8px),radial-gradient(circle at 54% 70%,#e9e2d2 0 2px,#2a251f 3px 7px,transparent 8px),radial-gradient(circle at 72% 70%,#e9e2d2 0 2px,#2a251f 3px 7px,transparent 8px),radial-gradient(ellipse 22% 16% at 62% 34%,rgba(232,155,60,.55),transparent 70%),radial-gradient(circle at 24% 26%,rgba(111,191,172,.5) 0 2px,transparent 6px),linear-gradient(180deg,#14120f 52%,#221e19 53%,#1a1713);--f-title:'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Barlow Condensed','Arial Narrow',sans-serif;--glow:rgba(232,155,60,0.75);--glow2:rgba(232,155,60,0.3);--ink:#0b0a08;--client:#1e1b17;--frame:inset 0 0 0 1px rgba(232,155,60,0.7),inset 0 0 0 5px #1e1b17,inset 0 0 0 6px rgba(232,155,60,0.4);color-scheme:dark} [data-os="fantasma"] .mark-name,[data-os="fantasma"] .pw-name{color:#ede5d3;font-weight:600;text-transform:uppercase;letter-spacing:.16em;text-shadow:0 1px 0 rgba(0,0,0,.65),0 0 26px rgba(232,155,60,.4)} [data-os="aurora"]{--bg:#0b2a4a;--fg:#f2f8ff;--muted:#b8d4f0;--accent:#7fe0ff;--accent-fg:#05223a;--danger:#ff8a7a;--win-bg:rgba(14,48,86,.76);--win-fg:#f2f8ff;--win-border:rgba(170,225,255,.55);--bw:1px;--radius:14px;--shadow:0 24px 56px rgba(0,12,30,.55),inset 0 1px 0 rgba(255,255,255,.32);--title-bg:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 58%,rgba(255,255,255,.01));--title-fg:#ffffff;--btn-bg:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06));--btn-fg:#f2f8ff;--btn-border:rgba(170,225,255,.5);--pri-bg:linear-gradient(180deg,#b3f0ff,#6fd6f6 52%,#46b9e8);--pri-fg:#05223a;--cell-bg:rgba(255,255,255,.06);--cell-bg2:rgba(255,255,255,.1);--cell-line:rgba(160,215,255,.24);--cell-on:linear-gradient(135deg,#a8f2ff,#7fe0ff 45%,#b6f2c7);--cell-play:rgba(182,242,199,.24);--bar-bg:rgba(7,28,52,.6);--bar-fg:#f2f8ff;--bar-border:1px solid rgba(160,220,255,.42);--menu-bg:rgba(12,42,76,.92);--menu-fg:#f2f8ff;--menu-hi:rgba(127,224,255,.2);--focus:#b6f2c7;--icon-bg:linear-gradient(160deg,rgba(255,255,255,.3),rgba(127,224,255,.12) 60%,rgba(182,242,199,.2));--icon-fg:#ffffff;--icon-border:rgba(190,235,255,.6);--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 8px 18px rgba(0,16,40,.35),inset 0 1px 0 rgba(255,255,255,.5);--label-fg:#f2f8ff;--label-bg:rgba(6,26,48,.55);--pv-bg:linear-gradient(158deg,transparent 30%,rgba(182,242,199,.55) 40%,transparent 52%),linear-gradient(150deg,transparent 44%,rgba(127,224,255,.65) 54%,transparent 66%),linear-gradient(162deg,transparent 58%,rgba(201,182,255,.45) 66%,transparent 76%),linear-gradient(180deg,#0b2a4a,#1b6fa8 62%,#7fd0f0);--f-title:'Sora','Segoe UI',system-ui,sans-serif;--f-ui:'Sora','Segoe UI',system-ui,sans-serif;--f-mark:'Sora','Segoe UI Light','Segoe UI',system-ui,sans-serif;--glow:rgba(127,224,255,0.75);--glow2:rgba(127,224,255,0.3);--ink:#f2f8ff;--client:#0d2f53;--frame:inset 0 0 0 1px rgba(127,224,255,0.7),inset 0 0 0 5px #0d2f53,inset 0 0 0 6px rgba(127,224,255,0.4);color-scheme:dark} [data-os="aurora"] .mark-name,[data-os="aurora"] .pw-name{background:linear-gradient(100deg,#a6f2ff,#b6f2c7 42%,#d6c8ff 78%,#a6f2ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300;letter-spacing:.02em;filter:drop-shadow(0 0 14px rgba(127,224,255,.55))} [data-os="petalos"]{--bg:#fff3f6;--fg:#4a2c38;--muted:#86566a;--accent:#c94169;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:#fffbfc;--win-fg:#4a2c38;--win-border:#f1c3d2;--bw:1px;--radius:16px;--shadow:0 18px 40px rgba(180,80,110,.18),0 2px 6px rgba(120,40,70,.08);--title-bg:linear-gradient(180deg,#fff2f6,#ffe2eb);--title-fg:#4a2c38;--btn-bg:#ffffff;--btn-fg:#4a2c38;--btn-border:#efb3c6;--pri-bg:linear-gradient(180deg,#d9507b,#b8325c);--pri-fg:#ffffff;--cell-bg:#fff6f8;--cell-bg2:#ffeef3;--cell-line:#f4cfdb;--cell-on:linear-gradient(135deg,#f590b0,#d94c78);--cell-play:rgba(111,168,140,.22);--bar-bg:rgba(255,251,252,.86);--bar-fg:#4a2c38;--bar-border:1px solid #f4cfdb;--menu-bg:#fffbfc;--menu-fg:#4a2c38;--menu-hi:#ffe6ee;--focus:#4f8a6e;--icon-bg:#ffffff;--icon-fg:#c94169;--icon-border:#f4cfdb;--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 6px 14px rgba(200,90,120,.18);--label-fg:#4a2c38;--label-bg:rgba(255,251,252,.8);--pv-bg:radial-gradient(ellipse 7px 4px at 28% 34%,#f08cae 80%,transparent),radial-gradient(ellipse 5px 3px at 64% 24%,#f5a3bf 80%,transparent),radial-gradient(ellipse 6px 3px at 46% 58%,#f7b8cc 80%,transparent),radial-gradient(circle at 68% 68%,transparent 9px,rgba(224,86,126,.32) 10px 11px,transparent 12px),radial-gradient(circle at 68% 68%,transparent 17px,rgba(224,86,126,.18) 18px 19px,transparent 20px),linear-gradient(180deg,#ffe9f0,#fbe7ee 50%,#f5dbe4);--f-title:'Zen Maru Gothic','M PLUS Rounded 1c','Varela Round',sans-serif;--f-ui:'Zen Maru Gothic','M PLUS Rounded 1c','Nunito',sans-serif;--f-mark:'Zen Maru Gothic','M PLUS Rounded 1c',sans-serif;--glow:rgba(201,65,105,0.75);--glow2:rgba(201,65,105,0.3);--ink:#4a2c38;--client:#fffbfc;--frame:inset 0 0 0 1px rgba(201,65,105,0.7),inset 0 0 0 5px #fffbfc,inset 0 0 0 6px rgba(201,65,105,0.4);color-scheme:light} [data-os="petalos"] .mark-name,[data-os="petalos"] .pw-name{background:linear-gradient(180deg,#e0567e,#a92f57);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;filter:drop-shadow(0 2px 0 rgba(255,255,255,.95)) drop-shadow(0 8px 18px rgba(224,86,126,.35))} [data-os="planetario"]{--bg:#03040c;--fg:#e8ecff;--muted:#9aa5e0;--accent:#9b7bff;--accent-fg:#0a0620;--danger:#ff6b8a;--win-bg:#0b0e22;--win-fg:#e8ecff;--win-border:#2c3670;--bw:1px;--radius:6px;--shadow:0 0 0 1px rgba(155,123,255,.16),0 24px 60px rgba(0,0,0,.72);--title-bg:linear-gradient(180deg,#151b3e,#0c1028);--title-fg:#e8ecff;--btn-bg:rgba(155,123,255,.1);--btn-fg:#e8ecff;--btn-border:rgba(155,123,255,.5);--pri-bg:linear-gradient(135deg,#b9a2ff,#86d8ff);--pri-fg:#07061a;--cell-bg:#10142b;--cell-bg2:#161b38;--cell-line:#252d60;--cell-on:linear-gradient(135deg,#c8b8ff,#9b7bff 50%,#5fd6ff);--cell-play:rgba(95,214,255,.2);--bar-bg:rgba(3,4,12,.9);--bar-fg:#e8ecff;--bar-border:1px solid rgba(155,123,255,.45);--menu-bg:#0b0e22;--menu-fg:#e8ecff;--menu-hi:rgba(155,123,255,.18);--focus:#5fd6ff;--icon-bg:radial-gradient(circle at 50% 30%,#1d2454,#0a0d1f 72%);--icon-fg:#cdbfff;--icon-border:#343f80;--icon-bw:1px;--icon-radius:50%;--icon-shadow:0 0 0 3px rgba(155,123,255,.14),0 6px 16px rgba(0,0,0,.6);--label-fg:#e8ecff;--label-bg:rgba(3,4,12,.72);--pv-bg:radial-gradient(circle at 70% 28%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 52% 46%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 38% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 84% 52%,#cfc4ff 0 1.5px,transparent 2px),linear-gradient(28deg,transparent 47%,rgba(155,123,255,.55) 48% 49%,transparent 50%),radial-gradient(ellipse 140% 100% at 50% 118%,#2a2160 0 30%,#0e1030 55%,#03040c 80%);--f-title:'Jost','Futura','Century Gothic','Trebuchet MS',sans-serif;--f-ui:'Jost','Futura','Segoe UI',system-ui,sans-serif;--f-mark:'Jost','Futura','Century Gothic',sans-serif;--glow:rgba(155,123,255,0.75);--glow2:rgba(155,123,255,0.3);--ink:#e8ecff;--client:#0b0e22;--frame:inset 0 0 0 1px rgba(155,123,255,0.7),inset 0 0 0 5px #0b0e22,inset 0 0 0 6px rgba(155,123,255,0.4);color-scheme:dark} [data-os="planetario"] .mark-name,[data-os="planetario"] .pw-name{color:#eef0ff;font-weight:300;text-transform:uppercase;letter-spacing:.22em;text-shadow:0 0 10px rgba(155,123,255,.85),0 0 30px rgba(95,214,255,.35)} [data-os="pastel"]{--bg:#1a0b2e;--fg:#fdf4ff;--muted:#e3b5f5;--accent:#ff8ad8;--accent-fg:#2a0838;--danger:#ff8aa8;--win-bg:#25103f;--win-fg:#fdf4ff;--win-border:rgba(255,138,216,.55);--bw:2px;--radius:12px;--shadow:0 20px 50px rgba(10,0,30,.6),0 0 30px rgba(255,138,216,.16);--title-bg:linear-gradient(90deg,#3b1764,#2b1150 58%,#1f3270);--title-fg:#fdf4ff;--btn-bg:rgba(255,138,216,.1);--btn-fg:#fdf4ff;--btn-border:rgba(140,214,255,.55);--pri-bg:linear-gradient(180deg,#ffe39a,#ff95db 55%,#c98cff);--pri-fg:#2a0838;--cell-bg:#2f1650;--cell-bg2:#381b5c;--cell-line:rgba(140,214,255,.26);--cell-on:linear-gradient(180deg,#ffe08a,#ff8ad8 70%,#c98cff);--cell-play:rgba(143,240,210,.22);--bar-bg:linear-gradient(180deg,rgba(40,17,68,.94),rgba(22,9,40,.96));--bar-fg:#fdf4ff;--bar-border:1px solid rgba(255,138,216,.6);--menu-bg:#25103f;--menu-fg:#fdf4ff;--menu-hi:rgba(140,214,255,.18);--focus:#8ff0d2;--icon-bg:linear-gradient(160deg,#3d1e66,#25103f);--icon-fg:#ffa6e4;--icon-border:rgba(140,214,255,.55);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.4),0 0 12px rgba(255,138,216,.22);--label-fg:#fdf4ff;--label-bg:rgba(26,11,46,.66);--pv-bg:repeating-linear-gradient(180deg,transparent 0 5px,#3a1460 5px 7px) 50% 38%/34% 22% no-repeat,radial-gradient(circle at 50% 60%,#ffd36e 0 12%,#ff8ad8 17%,#c98cff 21%,transparent 22%),linear-gradient(180deg,#1a0b2e,#4a1a6e 58%,#13a5c4 59%,#5a2a9a 82%,#2a1050);--f-title:'Unbounded','Righteous','Trebuchet MS',sans-serif;--f-ui:'Rubik','Nunito','Segoe UI',sans-serif;--f-mark:'Yellowtail','Kalam',cursive;--glow:rgba(255,138,216,0.75);--glow2:rgba(255,138,216,0.3);--ink:#fdf4ff;--client:#25103f;--frame:inset 0 0 0 1px rgba(255,138,216,0.7),inset 0 0 0 5px #25103f,inset 0 0 0 6px rgba(255,138,216,0.4);color-scheme:dark} [data-os="pastel"] .mark-name,[data-os="pastel"] .pw-name{background:linear-gradient(180deg,#ffe39a 15%,#ff8ad8 58%,#c98cff 92%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 10px;filter:drop-shadow(3px 3px 0 rgba(140,214,255,.7)) drop-shadow(0 0 16px rgba(255,138,216,.45))} [data-os="invierno"]{--bg:#0e2a1e;--fg:#fff8ea;--muted:#c3d8c6;--accent:#f1d27a;--accent-fg:#2a1d05;--danger:#ff8a7a;--win-bg:#15382a;--win-fg:#fff8ea;--win-border:rgba(201,162,74,.7);--bw:1px;--radius:10px;--shadow:0 22px 50px rgba(0,10,5,.6),0 0 0 1px rgba(0,0,0,.35);--title-bg:linear-gradient(180deg,#1f4c39,#163b2c);--title-fg:#fff8ea;--btn-bg:linear-gradient(180deg,#21503d,#1a4232);--btn-fg:#fff8ea;--btn-border:rgba(201,162,74,.62);--pri-bg:linear-gradient(180deg,#d9463f,#b02c31);--pri-fg:#fff8ea;--cell-bg:#1b4534;--cell-bg2:#21523e;--cell-line:#2e6a4e;--cell-on:radial-gradient(circle at 50% 38%,#fff3c8,#f1d27a 42%,#c9a24a);--cell-play:rgba(232,76,76,.26);--bar-bg:linear-gradient(180deg,#133628,#0b2218);--bar-fg:#fff8ea;--bar-border:1px solid rgba(201,162,74,.6);--menu-bg:#15382a;--menu-fg:#fff8ea;--menu-hi:rgba(241,210,122,.16);--focus:#f1d27a;--icon-bg:linear-gradient(180deg,#21503d,#143425);--icon-fg:#f1d27a;--icon-border:rgba(201,162,74,.72);--icon-bw:1px;--icon-radius:14px;--icon-shadow:0 6px 14px rgba(0,0,0,.45);--label-fg:#fff8ea;--label-bg:rgba(8,24,16,.72);--pv-bg:radial-gradient(circle at 18% 20%,#e84c4c 0 3px,transparent 4px),radial-gradient(circle at 38% 27%,#f1d27a 0 3px,transparent 4px),radial-gradient(circle at 58% 21%,#7de07a 0 3px,transparent 4px),radial-gradient(circle at 78% 27%,#5fd6ff 0 3px,transparent 4px),radial-gradient(circle at 30% 56%,#fff 0 1.5px,transparent 2px),radial-gradient(circle at 66% 46%,#fff 0 1.5px,transparent 2px),linear-gradient(transparent 62%,#f2c35e 62% 66%,transparent 66%) 64% 0/8% 100% no-repeat,linear-gradient(180deg,#071a12,#0e2a1e 64%,#dfe9e4 65%,#c6d6cf);--f-title:'Lora','Playfair Display',Georgia,serif;--f-ui:'Nunito','Segoe UI',system-ui,sans-serif;--f-mark:'Yeseva One','Playfair Display',Georgia,serif;--glow:rgba(241,210,122,0.75);--glow2:rgba(241,210,122,0.3);--ink:#fff8ea;--client:#15382a;--frame:inset 0 0 0 1px rgba(241,210,122,0.7),inset 0 0 0 5px #15382a,inset 0 0 0 6px rgba(241,210,122,0.4);color-scheme:dark} [data-os="invierno"] .mark-name,[data-os="invierno"] .pw-name{color:#fff8ea;text-shadow:0 0 6px rgba(255,214,130,.9),0 0 24px rgba(241,210,122,.55),0 2px 0 rgba(0,0,0,.35)} [data-os="bolsillo"]{--bg:#9bbc0f;--fg:#0f380f;--muted:#1e4a14;--accent:#0f380f;--accent-fg:#9bbc0f;--danger:#0f380f;--win-bg:#9bbc0f;--win-fg:#0f380f;--win-border:#0f380f;--bw:3px;--radius:0px;--shadow:6px 6px 0 rgba(15,56,15,.5);--title-bg:#0f380f;--title-fg:#9bbc0f;--btn-bg:#8bac0f;--btn-fg:#0f380f;--btn-border:#0f380f;--pri-bg:#0f380f;--pri-fg:#9bbc0f;--cell-bg:#8bac0f;--cell-bg2:#93b40f;--cell-line:#306230;--cell-on:#0f380f;--cell-play:rgba(48,98,48,.38);--bar-bg:#0f380f;--bar-fg:#9bbc0f;--bar-border:3px solid #306230;--menu-bg:#9bbc0f;--menu-fg:#0f380f;--menu-hi:#8bac0f;--focus:#0f380f;--icon-bg:#9bbc0f;--icon-fg:#0f380f;--icon-border:#0f380f;--icon-bw:3px;--icon-radius:0px;--icon-shadow:4px 4px 0 rgba(15,56,15,.5);--label-fg:#9bbc0f;--label-bg:#0f380f;--pv-bg:repeating-linear-gradient(90deg,rgba(15,56,15,.1) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(15,56,15,.1) 0 1px,transparent 1px 4px),linear-gradient(transparent 60%,#306230 60% 72%,#0f380f 72%),radial-gradient(circle at 72% 30%,#e0f0a0 0 9%,transparent 10%),linear-gradient(#8bac0f,#9bbc0f);--f-title:'Silkscreen','Press Start 2P','Courier New',monospace;--f-ui:'Pixelify Sans','VT323','Courier New',monospace;--f-mark:'Silkscreen','Press Start 2P',monospace;--glow:rgba(15,56,15,0.75);--glow2:rgba(15,56,15,0.3);--ink:#0f380f;--client:#9bbc0f;--frame:inset 0 0 0 1px rgba(15,56,15,0.7),inset 0 0 0 5px #9bbc0f,inset 0 0 0 6px rgba(15,56,15,0.4);color-scheme:light} [data-os="bolsillo"] .mark-name,[data-os="bolsillo"] .pw-name{color:#9bbc0f;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(22px,3.6vw,46px);text-shadow:0 3px 0 #0f380f,3px 0 0 #0f380f,0 -3px 0 #0f380f,-3px 0 0 #0f380f,3px 3px 0 #0f380f,-3px -3px 0 #0f380f,3px -3px 0 #0f380f,-3px 3px 0 #0f380f,6px 7px 0 rgba(48,98,48,.8)} /* barra de tareas: la ventana activa usa el color de botón con una marca del acento */ :is([data-os="kzafiro"],[data-os="krubi"],[data-os="kjade"],[data-os="espacial"],[data-os="lunar"],[data-os="marciano"],[data-os="nebulosa"],[data-os="eclipse"],[data-os="orbital"],[data-os="subterraneo"],[data-os="submarino"],[data-os="bosque"],[data-os="selva"],[data-os="desierto"],[data-os="artico"],[data-os="volcan"],[data-os="otono"],[data-os="sakura"],[data-os="tormenta"],[data-os="jardinzen"],[data-os="biolum"],[data-os="pradera"],[data-os="boreal"],[data-os="ochobits"],[data-os="ambar"],[data-os="noventas"],[data-os="vhs"],[data-os="maquinita"],[data-os="disco"],[data-os="retrofuturista"],[data-os="cyberpunk"],[data-os="holograma"],[data-os="rock"],[data-os="jazz"],[data-os="punk"],[data-os="gransala"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="papelpicado"],[data-os="talavera"],[data-os="alebrije"],[data-os="muertos"],[data-os="barronegro"],[data-os="luchalibre"],[data-os="artdeco"],[data-os="bauhaus"],[data-os="ukiyoe"],[data-os="acuarela"],[data-os="vitral"],[data-os="origami"],[data-os="barroco"],[data-os="cinenegro"],[data-os="darkfantasy"],[data-os="hadas"],[data-os="piratas"],[data-os="islas"],[data-os="kawaii"],[data-os="marmol"],[data-os="madera"],[data-os="pizarron"],[data-os="minimal"],[data-os="altocontraste"],[data-os="terminalia"],[data-os="videotex"],[data-os="bitonal"],[data-os="oscilia"],[data-os="chiptunia"],[data-os="lunaria"],[data-os="desktopia"],[data-os="coralia"],[data-os="translucia"],[data-os="dirigible"],[data-os="fantasma"],[data-os="aurora"],[data-os="petalos"],[data-os="planetario"],[data-os="pastel"],[data-os="invierno"],[data-os="bolsillo"],[data-os="frutiger"],[data-os="angel"]) .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: kintsugi */ :is([data-os="kzafiro"],[data-os="krubi"],[data-os="kjade"]) .win-title{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 170 44%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 gradientUnits=%22userSpaceOnUse%22 x1=%2230%22 y1=%220%22 x2=%22120%22 y2=%2244%22%3E%3Cstop offset=%220%22 stop-color=%22%239b7428%22/%3E%3Cstop offset=%22.3%22 stop-color=%22%23f3d98b%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%23c9973f%22/%3E%3Cstop offset=%22.8%22 stop-color=%22%23f7e3a3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23a07a2c%22/%3E%3C/linearGradient%3E%3Cpath id=%22k%22 d=%22M100.0 -6.5 98.5 -3.7 96.7 -1.0 94.9 1.6 93.1 4.3 92.0 5.6 90.9 6.9 89.6 8.0 88.4 9.0 86.9 9.8 84.9 10.5 83.2 12.1 81.8 13.4 80.2 14.6 78.5 15.8 77.0 17.3 75.5 18.6 73.9 19.8 72.3 21.1 70.9 22.1 69.6 23.0 68.1 23.7 66.4 24.5 64.9 25.6 63.4 26.7 61.8 27.7 60.3 28.9 59.0 30.4 57.8 31.7 56.6 32.9 55.2 34.2 53.3 36.3 51.0 38.4 49.9 41.5 48.9 44.2 47.4 46.7 46.0 49.5 48.0 50.5 49.4 47.8 51.0 45.2 52.1 42.3 53.0 39.6 55.0 38.0 56.8 35.8 58.1 34.6 59.5 33.3 60.7 31.9 61.9 30.6 63.2 29.6 64.7 28.5 66.2 27.5 67.6 26.5 69.1 25.7 70.7 25.0 72.3 24.0 73.7 22.9 75.3 21.6 77.0 20.4 78.5 19.0 80.0 17.6 81.6 16.5 83.3 15.2 84.8 13.7 86.1 12.5 87.8 12.0 89.6 11.0 91.1 9.8 92.5 8.5 93.7 7.1 94.9 5.7 96.7 2.9 98.6 0.3 100.5 -2.5 102.0 -5.5ZM66.7 26.3 69.0 27.2 71.3 28.0 73.4 29.2 75.7 30.3 78.5 31.1 81.3 31.9 84.1 32.7 86.8 33.7 89.4 33.8 91.9 34.2 94.0 34.7 96.2 35.2 98.4 35.6 100.5 36.1 102.6 36.8 104.7 37.5 106.8 38.1 108.9 38.8 111.9 39.4 114.9 40.0 118.0 40.2 121.0 40.6 121.0 40.4 118.0 40.0 115.0 39.6 112.0 39.0 109.1 38.2 107.0 37.5 104.9 36.7 102.8 36.0 100.7 35.2 98.6 34.7 96.4 34.2 94.3 33.6 92.1 33.0 89.6 32.5 87.2 32.3 84.5 31.3 81.8 30.4 79.0 29.5 76.3 28.7 74.2 27.7 71.9 26.5 69.6 25.6 67.3 24.7ZM85.7 10.9 83.3 10.3 80.9 9.6 78.5 9.0 76.1 8.5 73.8 8.4 71.5 8.2 69.3 8.0 67.0 8.1 65.3 7.8 63.5 7.5 61.8 7.0 60.0 6.4 60.0 6.6 61.7 7.1 63.4 7.8 65.2 8.2 67.0 8.7 69.2 8.7 71.5 8.9 73.7 9.2 75.9 9.5 78.3 10.0 80.6 10.8 83.0 11.4 85.3 12.1Z%22/%3E%3C/defs%3E%3Cuse href=%22%23k%22 x=%22.6%22 y=%22.8%22 fill=%22%23000%22 fill-opacity=%22.5%22/%3E%3Cuse href=%22%23k%22 x=%22-.3%22 y=%22-.38%22 fill=%22%23fff4c8%22 fill-opacity=%22.62%22/%3E%3Cuse href=%22%23k%22 fill=%22url(%23g)%22/%3E%3C/svg%3E") right 96px center/170px 100% no-repeat,var(--title-bg);border-bottom:1px solid var(--glow2)} :is([data-os="kzafiro"],[data-os="krubi"],[data-os="kjade"]) .win-title h2{letter-spacing:.05em} :is([data-os="kzafiro"],[data-os="krubi"],[data-os="kjade"]) .wb{border-radius:50%;width:24px} @container (max-width:560px){ :is([data-os="kzafiro"],[data-os="krubi"],[data-os="kjade"]) .win-title{background-position:right 100px center;background-size:96px 100%} } /* chrome: glass */ :is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) .win,:is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) #bar,:is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) .menu,:is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) #toast,:is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) .icon .tile{-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)} :is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) .wb{border-radius:50%;width:24px} :is([data-os="espacial"],[data-os="nebulosa"],[data-os="submarino"],[data-os="artico"],[data-os="holograma"],[data-os="islas"]) .btn{border-radius:999px} /* chrome: metal */ :is([data-os="lunar"]) .win-title{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),var(--title-bg)} :is([data-os="lunar"]) .win-title h2{letter-spacing:.05em;font-size:15px} :is([data-os="lunar"]) .wb{border-radius:50%;width:24px} /* chrome: soft */ :is([data-os="selva"],[data-os="sakura"],[data-os="disco"],[data-os="retrofuturista"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="hadas"],[data-os="kawaii"]) .btn,:is([data-os="selva"],[data-os="sakura"],[data-os="disco"],[data-os="retrofuturista"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="hadas"],[data-os="kawaii"]) #start,:is([data-os="selva"],[data-os="sakura"],[data-os="disco"],[data-os="retrofuturista"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="hadas"],[data-os="kawaii"]) .task,:is([data-os="selva"],[data-os="sakura"],[data-os="disco"],[data-os="retrofuturista"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="hadas"],[data-os="kawaii"]) :is(#snd,.tray-b),:is([data-os="selva"],[data-os="sakura"],[data-os="disco"],[data-os="retrofuturista"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="hadas"],[data-os="kawaii"]) .seg{border-radius:999px} :is([data-os="selva"],[data-os="sakura"],[data-os="disco"],[data-os="retrofuturista"],[data-os="vinilo"],[data-os="lofi"],[data-os="glitterpop"],[data-os="hadas"],[data-os="kawaii"]) .wb{border-radius:50%;width:24px} /* chrome: neon */ :is([data-os="biolum"],[data-os="maquinita"],[data-os="cyberpunk"],[data-os="oscilia"]) .win-title h2{text-shadow:0 0 6px var(--glow),0 0 16px var(--glow)} :is([data-os="biolum"],[data-os="maquinita"],[data-os="cyberpunk"],[data-os="oscilia"]) .btn.primary,:is([data-os="biolum"],[data-os="maquinita"],[data-os="cyberpunk"],[data-os="oscilia"]) #start{box-shadow:0 0 16px var(--glow)} :is([data-os="biolum"],[data-os="maquinita"],[data-os="cyberpunk"],[data-os="oscilia"]) #bar{box-shadow:0 -6px 26px var(--glow2)} /* chrome: bevel */ :is([data-os="pradera"]) .win-title{min-height:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25)} :is([data-os="pradera"]) .win-title h2{font-weight:700;font-size:15px;text-shadow:1px 1px 0 rgba(0,0,0,.45)} :is([data-os="pradera"]) .wb{border:1px solid #ffffff;border-radius:3px;background:linear-gradient(180deg,#6aa3ff,#2a64e0);color:#ffffff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} :is([data-os="pradera"]) .wb-close{background:linear-gradient(180deg,#ec8f78,#c9431f)} :is([data-os="pradera"]) #start{border-radius:0 16px 16px 0;font-style:italic;font-size:17px;text-shadow:1px 1px 1px rgba(0,0,0,.45);padding:0 18px 0 12px;border-color:rgba(0,0,0,.25);margin-left:-8px;height:var(--bar-h)} :is([data-os="pradera"]) .btn{border-radius:3px} :is([data-os="pradera"]) .task{border-radius:3px;border-color:rgba(0,0,0,.3);background:linear-gradient(180deg,#5b93f2,#3a74e2);color:#ffffff} :is([data-os="pradera"]) .task[aria-pressed="true"]{background:linear-gradient(180deg,#1e4eb8,#2a5fd0);color:#ffffff;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)} :is([data-os="pradera"]) .tray{background:linear-gradient(180deg,#0f8de8,#1aa1f0 12%,#0d7fd6);height:100%;margin-right:-8px;padding:0 8px;border-left:1px solid #0a4fb0;box-shadow:inset 1px 0 0 rgba(255,255,255,.25)} /* chrome: aero */ :is([data-os="boreal"],[data-os="frutiger"]) .win{-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)} :is([data-os="boreal"],[data-os="frutiger"]) .win-title{min-height:34px} :is([data-os="boreal"],[data-os="frutiger"]) .win-title h2{font-weight:400;font-size:15px;text-shadow:0 0 8px #ffffff,0 0 14px rgba(255,255,255,.9),0 0 2px #ffffff} :is([data-os="boreal"],[data-os="frutiger"]) .win-body{background:var(--client);margin:0 6px 6px;border:1px solid rgba(0,0,0,.32);border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.5)} :is([data-os="boreal"],[data-os="frutiger"]) .wb{border-radius:4px;border:1px solid rgba(0,0,0,.45);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.3) 50%,rgba(255,255,255,.08) 51%,rgba(255,255,255,.35));color:#0b1620} :is([data-os="boreal"],[data-os="frutiger"]) .wb-close{width:42px;background:linear-gradient(180deg,#f3a497,#d64a33 50%,#b8301b 51%,#e07a5f);color:#ffffff} :is([data-os="boreal"],[data-os="frutiger"]) #bar,:is([data-os="boreal"],[data-os="frutiger"]) .menu{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} :is([data-os="boreal"],[data-os="frutiger"]) #bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.25)} :is([data-os="boreal"],[data-os="frutiger"]) .task{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(0,0,0,.12) 51%,rgba(255,255,255,.08));color:#ffffff;border-color:rgba(255,255,255,.32)} :is([data-os="boreal"],[data-os="frutiger"]) .task[aria-pressed="true"]{background:linear-gradient(180deg,rgba(150,210,255,.5),rgba(60,140,220,.3) 50%,rgba(20,80,160,.4) 51%,rgba(120,190,255,.35));color:#ffffff;box-shadow:0 0 10px rgba(120,200,255,.45)} :is([data-os="boreal"],[data-os="frutiger"]) #start{border-radius:999px;box-shadow:0 0 14px rgba(95,192,255,.55)} :is([data-os="boreal"],[data-os="frutiger"]) .transport,:is([data-os="boreal"],[data-os="frutiger"]) .seq-head{background:var(--client)} /* chrome: pixel */ :is([data-os="ochobits"],[data-os="chiptunia"]) .win-title h2{font-size:12px;line-height:1.5} :is([data-os="ochobits"],[data-os="chiptunia"]) .btn,:is([data-os="ochobits"],[data-os="chiptunia"]) .wb,:is([data-os="ochobits"],[data-os="chiptunia"]) .task,:is([data-os="ochobits"],[data-os="chiptunia"]) :is(#snd,.tray-b),:is([data-os="ochobits"],[data-os="chiptunia"]) #start,:is([data-os="ochobits"],[data-os="chiptunia"]) .seg,:is([data-os="ochobits"],[data-os="chiptunia"]) .tcard,:is([data-os="ochobits"],[data-os="chiptunia"]) .gcard,:is([data-os="ochobits"],[data-os="chiptunia"]) .cell,:is([data-os="ochobits"],[data-os="chiptunia"]) .chip{border-radius:0} :is([data-os="ochobits"],[data-os="chiptunia"]) .btn,:is([data-os="ochobits"],[data-os="chiptunia"]) .task,:is([data-os="ochobits"],[data-os="chiptunia"]) :is(#snd,.tray-b),:is([data-os="ochobits"],[data-os="chiptunia"]) .wb{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.3)} :is([data-os="ochobits"],[data-os="chiptunia"]) #start{font-size:11px} :is([data-os="ochobits"],[data-os="chiptunia"]) .menu-head b{font-size:12px} :is([data-os="ochobits"],[data-os="chiptunia"]) .win h3{font-size:16px;line-height:1.45} :is([data-os="ochobits"],[data-os="chiptunia"]) .win h4,:is([data-os="ochobits"],[data-os="chiptunia"]) .tname{font-size:11px;line-height:1.5} /* chrome: terminal */ :is([data-os="ambar"]) .win-title h2{font-size:22px} :is([data-os="ambar"]) .win-title h2::before{content:"> "} :is([data-os="ambar"]) .win-title h2::after{content:"_";animation:blink 1s steps(1) infinite} :is([data-os="ambar"]) body{text-shadow:0 0 5px var(--glow2)} :is([data-os="ambar"]) .wb,:is([data-os="ambar"]) .btn,:is([data-os="ambar"]) #start,:is([data-os="ambar"]) .task,:is([data-os="ambar"]) :is(#snd,.tray-b),:is([data-os="ambar"]) .chip{border-radius:0} /* chrome: comic */ :is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) .btn,:is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) .wb,:is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) #start,:is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) .task,:is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) :is(#snd,.tray-b),:is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) .seg{border-width:3px;border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)} :is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) .win-title{border-bottom:3px solid var(--ink)} :is([data-os="noventas"],[data-os="alebrije"],[data-os="luchalibre"]) .cell{border-width:2px} /* chrome: brutal */ :is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) .btn,:is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) .wb,:is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) #start,:is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) .task,:is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) :is(#snd,.tray-b),:is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) .seg{border-width:2px;box-shadow:3px 3px 0 var(--ink)} :is([data-os="rock"],[data-os="punk"],[data-os="bauhaus"],[data-os="altocontraste"]) .win-title{border-bottom:3px solid var(--ink)} /* chrome: deco */ :is([data-os="jazz"],[data-os="gransala"],[data-os="artdeco"],[data-os="barroco"],[data-os="angel"]) .win-title{border-bottom:1px solid var(--accent)} :is([data-os="jazz"],[data-os="gransala"],[data-os="artdeco"],[data-os="barroco"],[data-os="angel"]) .win-title h2{text-align:center;letter-spacing:.12em} :is([data-os="jazz"],[data-os="gransala"],[data-os="artdeco"],[data-os="barroco"],[data-os="angel"]) .win-title h2::before,:is([data-os="jazz"],[data-os="gransala"],[data-os="artdeco"],[data-os="barroco"],[data-os="angel"]) .win-title h2::after{content:"";display:inline-block;width:22px;height:6px;margin:0 10px;vertical-align:middle;border-top:1px solid currentColor;border-bottom:1px solid currentColor} /* chrome: paper */ :is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) .win{border-radius:16px 5px 14px 6px/6px 14px 5px 16px} :is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) .win-title{border-radius:14px 3px 0 0/5px 12px 0 0;border-bottom:2px solid var(--win-border)} :is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) .btn,:is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) .wb,:is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) .task,:is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) :is(#snd,.tray-b),:is([data-os="acuarela"],[data-os="piratas"],[data-os="pizarron"]) #start{border-radius:255px 15px 225px 15px/15px 225px 15px 255px} /* chrome: gothic */ :is([data-os="vitral"],[data-os="darkfantasy"]) .win{box-shadow:var(--shadow),var(--frame)} :is([data-os="vitral"],[data-os="darkfantasy"]) .win-title{border-bottom:1px solid var(--accent)} :is([data-os="vitral"],[data-os="darkfantasy"]) .win-title h2{text-align:center;letter-spacing:.08em} :is([data-os="vitral"],[data-os="darkfantasy"]) .win-title h2::before{content:"✦ ";color:var(--accent)} :is([data-os="vitral"],[data-os="darkfantasy"]) .win-title h2::after{content:" ✦";color:var(--accent)} /* chrome: tty */ :is([data-os="terminalia"]) .win{border-style:double} :is([data-os="terminalia"]) .win-title{min-height:30px} :is([data-os="terminalia"]) .win-title h2{font-size:22px;font-weight:400} :is([data-os="terminalia"]) .win-title h2::before{content:"[ "} :is([data-os="terminalia"]) .win-title h2::after{content:" ]"} :is([data-os="terminalia"]) .wb{border-radius:0;background:var(--title-bg);color:var(--title-fg);border:1px solid var(--title-fg)} :is([data-os="terminalia"]) .wb,:is([data-os="terminalia"]) .btn,:is([data-os="terminalia"]) #start,:is([data-os="terminalia"]) .task,:is([data-os="terminalia"]) :is(#snd,.tray-b),:is([data-os="terminalia"]) .chip,:is([data-os="terminalia"]) .seg,:is([data-os="terminalia"]) .tw-cat,:is([data-os="terminalia"]) .tcard,:is([data-os="terminalia"]) .gcard{border-radius:0} :is([data-os="terminalia"]) body{text-shadow:0 0 5px var(--glow2)} :is([data-os="terminalia"]) .mi:hover,:is([data-os="terminalia"]) .tw-cat[aria-pressed="true"],:is([data-os="terminalia"]) .seg button[aria-pressed="true"]{color:#031a00} /* chrome: teletext */ :is([data-os="videotex"]) .win-title h2{font-size:22px;font-weight:400;letter-spacing:.02em;transform:scaleY(1.25);transform-origin:0 60%} :is([data-os="videotex"]) .wb{border-radius:0;border:0;color:#000000;width:26px} :is([data-os="videotex"]) .wb-min{background:#00ff00} :is([data-os="videotex"]) .wb-max{background:#ffff00} :is([data-os="videotex"]) .wb-close{background:#ff0000;color:#ffffff} :is([data-os="videotex"]) .wb,:is([data-os="videotex"]) .btn,:is([data-os="videotex"]) #start,:is([data-os="videotex"]) .task,:is([data-os="videotex"]) :is(#snd,.tray-b),:is([data-os="videotex"]) .chip,:is([data-os="videotex"]) .seg,:is([data-os="videotex"]) .tw-cat,:is([data-os="videotex"]) .tcard,:is([data-os="videotex"]) .gcard{border-radius:0} :is([data-os="videotex"]) a{color:#00ffff} /* chrome: onebit */ :is([data-os="bitonal"]) .win-title{justify-content:center;border-bottom:2px solid #000000} :is([data-os="bitonal"]) .win-title h2{flex:0 1 auto;margin:0 auto;padding:0 10px;background:#ffffff;font-weight:400} :is([data-os="bitonal"]) .wt-icon{background:#ffffff;outline:3px solid #ffffff} :is([data-os="bitonal"]) .wb{border-radius:0;border:1px solid #000000;background:#ffffff;color:#000000;box-shadow:none} :is([data-os="bitonal"]) .wb,:is([data-os="bitonal"]) .btn,:is([data-os="bitonal"]) #start,:is([data-os="bitonal"]) .task,:is([data-os="bitonal"]) :is(#snd,.tray-b),:is([data-os="bitonal"]) .chip,:is([data-os="bitonal"]) .seg,:is([data-os="bitonal"]) .tw-cat,:is([data-os="bitonal"]) .tcard,:is([data-os="bitonal"]) .gcard,:is([data-os="bitonal"]) .tw-q{border-radius:0} :is([data-os="bitonal"]) .btn{border-width:2px} :is([data-os="bitonal"]) .btn:active,:is([data-os="bitonal"]) .wb:active{background:#000000;color:#ffffff} :is([data-os="bitonal"]) .mi:hover,:is([data-os="bitonal"]) .seg button[aria-pressed="true"],:is([data-os="bitonal"]) .tw-cat[aria-pressed="true"]{color:#ffffff} :is([data-os="bitonal"]) .win,:is([data-os="bitonal"]) .icon .tile{image-rendering:pixelated} /* chrome: console */ :is([data-os="lunaria"]) .win{background:radial-gradient(circle at 9px calc(100% - 9px),#6b7777 0 2.5px,#0b1010 3px 3.6px,transparent 4px),radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#6b7777 0 2.5px,#0b1010 3px 3.6px,transparent 4px),var(--win-bg)} :is([data-os="lunaria"]) .win-title{border-bottom:2px solid #000000;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} :is([data-os="lunaria"]) .win-title h2{letter-spacing:.12em;font-size:13px} :is([data-os="lunaria"]) .wb{border-radius:2px;background:linear-gradient(180deg,#4a5555,#2a3232);border:1px solid #000000;color:#ffb547;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} :is([data-os="lunaria"]) .wb-close{color:#ff7a5a} :is([data-os="lunaria"]) .btn,:is([data-os="lunaria"]) #start,:is([data-os="lunaria"]) .task,:is([data-os="lunaria"]) :is(#snd,.tray-b){border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #000000} /* chrome: bevel90 */ :is([data-os="desktopia"]) .win{padding:3px;box-shadow:inset 1px 1px 0 #ffffff,inset -1px -1px 0 #404040,inset 2px 2px 0 #e6e6e6,inset -2px -2px 0 #808080,var(--shadow)} :is([data-os="desktopia"]) .win-title{min-height:26px} :is([data-os="desktopia"]) .win-title h2{font-size:14px;font-weight:700} :is([data-os="desktopia"]) .wb,:is([data-os="desktopia"]) .btn,:is([data-os="desktopia"]) .task,:is([data-os="desktopia"]) :is(#snd,.tray-b),:is([data-os="desktopia"]) #start,:is([data-os="desktopia"]) .seg button,:is([data-os="desktopia"]) .chip,:is([data-os="desktopia"]) .tw-cat{border-radius:0;border:1px solid #000000;box-shadow:inset 1px 1px 0 #ffffff,inset -1px -1px 0 #808080} :is([data-os="desktopia"]) .wb{background:#c3c3c3;color:#000000;width:22px;height:20px} :is([data-os="desktopia"]) .btn:active,:is([data-os="desktopia"]) .wb:active,:is([data-os="desktopia"]) .task[aria-pressed="true"]{box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #ffffff;background:#d6d6d6;color:#000000} :is([data-os="desktopia"]) .mi:hover,:is([data-os="desktopia"]) .seg button[aria-pressed="true"],:is([data-os="desktopia"]) .tw-cat[aria-pressed="true"]{color:#ffffff} :is([data-os="desktopia"]) #bar{box-shadow:inset 0 1px 0 #ffffff} :is([data-os="desktopia"]) .tw-q,:is([data-os="desktopia"]) .tcard,:is([data-os="desktopia"]) .gcard{border-radius:0} :is([data-os="desktopia"]) .tw-q{box-shadow:inset 1px 1px 0 #808080,inset -1px -1px 0 #ffffff} /* chrome: gel */ :is([data-os="coralia"]) .win-title{box-shadow:inset 0 -1px 0 rgba(0,0,0,.12)} :is([data-os="coralia"]) .wb{width:20px;height:20px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(255,255,255,.6)} :is([data-os="coralia"]) .wb svg{opacity:0;color:#1b2a36;transition:opacity .15s} :is([data-os="coralia"]) .wt-btns:hover .wb svg,:is([data-os="coralia"]) .wb:focus-visible svg{opacity:.8} :is([data-os="coralia"]) .wb-min{background:radial-gradient(circle at 50% 28%,#ffffff 0 16%,transparent 42%),radial-gradient(circle at 50% 75%,#a8f5ec,#1fb5a6 72%)} :is([data-os="coralia"]) .wb-max{background:radial-gradient(circle at 50% 28%,#ffffff 0 16%,transparent 42%),radial-gradient(circle at 50% 75%,#f4f8fb,#9aa8b6 72%)} :is([data-os="coralia"]) .wb-close{background:radial-gradient(circle at 50% 28%,#ffffff 0 16%,transparent 42%),radial-gradient(circle at 50% 75%,#ffc4b9,#ff6f61 72%)} :is([data-os="coralia"]) .btn,:is([data-os="coralia"]) #start,:is([data-os="coralia"]) .task,:is([data-os="coralia"]) :is(#snd,.tray-b),:is([data-os="coralia"]) .seg,:is([data-os="coralia"]) .tw-cat{border-radius:999px} :is([data-os="coralia"]) .btn.primary,:is([data-os="coralia"]) #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 3px rgba(0,60,120,.35)} :is([data-os="coralia"]) #bar{-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 -1px 0 rgba(0,40,80,.15)} /* chrome: candy */ :is([data-os="translucia"]) .win{--tl:rgba(0,168,204,.55);border-color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 44px),var(--tl);-webkit-backdrop-filter:blur(7px) saturate(1.5);backdrop-filter:blur(7px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 6px rgba(0,0,0,.12),0 16px 38px rgba(0,60,90,.3)} :is([data-os="translucia"]) .win::before{content:"";position:absolute;inset:calc(-1 * var(--bw));z-index:-1;border-radius:var(--radius);pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%230b3b48' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M0 18h28l10 10h36l10-10h36M0 62h18l10-10h22M58 52h22l10 10h30M12 120V92l10-10h30l10 10v28M84 0v18M102 120V90l10-10h8M40 28v24'/%3E%3C/g%3E%3Cg fill='%230b3b48'%3E%3Ccircle cx='28' cy='18' r='3.4'/%3E%3Ccircle cx='84' cy='18' r='3.4'/%3E%3Ccircle cx='50' cy='52' r='3.4'/%3E%3Ccircle cx='58' cy='52' r='3.4'/%3E%3Ccircle cx='22' cy='82' r='3.4'/%3E%3Ccircle cx='52' cy='82' r='3.4'/%3E%3Ccircle cx='112' cy='80' r='3.4'/%3E%3Crect x='66' y='70' width='26' height='18' rx='2'/%3E%3Cpath d='M69 66v4M75 66v4M81 66v4M87 66v4M69 88v4M75 88v4M81 88v4M87 88v4' stroke='%230b3b48' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px;opacity:.2} :is([data-os="translucia"]) .win[data-tint="1"]{--tl:rgba(255,124,28,.55)} :is([data-os="translucia"]) .win[data-tint="2"]{--tl:rgba(112,190,36,.56)} :is([data-os="translucia"]) .win[data-tint="3"]{--tl:rgba(140,72,200,.5)} :is([data-os="translucia"]) .win[data-tint="4"]{--tl:rgba(236,52,100,.5)} :is([data-os="translucia"]) .win-title{background:transparent;min-height:34px;padding-top:0} :is([data-os="translucia"]) .win-title h2{font-weight:800;text-shadow:0 1px 0 rgba(255,255,255,.7)} :is([data-os="translucia"]) .win-body{background:var(--client);border-radius:11px;box-shadow:inset 0 2px 6px rgba(0,40,60,.28),0 1px 0 rgba(255,255,255,.65)} :is([data-os="translucia"]) .wb{width:26px;height:20px;border-radius:7px;border:1px solid rgba(255,255,255,.8);background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.28));color:#0b2730;box-shadow:inset 0 -2px 3px rgba(0,0,0,.12)} :is([data-os="translucia"]) .wb-close{background:linear-gradient(180deg,rgba(255,176,176,.95),rgba(226,52,76,.8));color:#ffffff} :is([data-os="translucia"]) .btn,:is([data-os="translucia"]) #start,:is([data-os="translucia"]) .task,:is([data-os="translucia"]) :is(#snd,.tray-b),:is([data-os="translucia"]) .seg,:is([data-os="translucia"]) .tw-cat{border-radius:12px} :is([data-os="translucia"]) .btn{box-shadow:inset 0 1px 0 #ffffff,inset 0 -2px 3px rgba(0,80,110,.12)} :is([data-os="translucia"]) .btn.primary,:is([data-os="translucia"]) #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(0,90,120,.3)} :is([data-os="translucia"]) #bar{-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.75)} :is([data-os="translucia"]) .menu{-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)} :is([data-os="translucia"]) .icon .tile{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 2px 1px rgba(255,255,255,.75),0 6px 14px rgba(0,60,90,.25)} :is([data-os="translucia"]) .icon:nth-child(5n+2) .tile{background:rgba(255,124,28,.55)} :is([data-os="translucia"]) .icon:nth-child(5n+3) .tile{background:rgba(112,190,36,.56)} :is([data-os="translucia"]) .icon:nth-child(5n+4) .tile{background:rgba(140,72,200,.5)} :is([data-os="translucia"]) .icon:nth-child(5n+5) .tile{background:rgba(236,52,100,.5)} /* chrome: brass */ :is([data-os="dirigible"]) .win{background:repeating-linear-gradient(93deg,rgba(255,214,160,.03) 0 2px,transparent 2px 7px,rgba(0,0,0,.05) 7px 8px,transparent 8px 13px),var(--win-bg);box-shadow:inset 0 0 0 1px #f2d27c,0 0 0 1px #4a3216,0 22px 50px rgba(0,0,0,.6)} :is([data-os="dirigible"]) .win::after{content:"";position:absolute;inset:calc(-1 * var(--bw));pointer-events:none;border-radius:var(--radius);background:radial-gradient(circle,#fff1c2 0 .7px,#d6a548 1.1px 1.6px,#5a3d12 2px,transparent 2.4px) 9px 0/18px var(--bw) repeat-x,radial-gradient(circle,#fff1c2 0 .7px,#d6a548 1.1px 1.6px,#5a3d12 2px,transparent 2.4px) 9px 100%/18px var(--bw) repeat-x,radial-gradient(circle,#fff1c2 0 .7px,#d6a548 1.1px 1.6px,#5a3d12 2px,transparent 2.4px) 0 9px/var(--bw) 18px repeat-y,radial-gradient(circle,#fff1c2 0 .7px,#d6a548 1.1px 1.6px,#5a3d12 2px,transparent 2.4px) 100% 9px/var(--bw) 18px repeat-y} :is([data-os="dirigible"]) .win-title{border-bottom:2px solid #5a3d12;box-shadow:inset 0 1px 0 rgba(255,250,220,.7),inset 0 -1px 0 rgba(90,61,18,.6)} :is([data-os="dirigible"]) .win-title h2{font-weight:800;letter-spacing:.08em;font-variant:small-caps;text-shadow:0 1px 0 rgba(255,244,210,.75)} :is([data-os="dirigible"]) .wb{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2c2,#d9a441 45%,#7a5212 82%);border:1px solid #3a2508;color:#2a1a08;box-shadow:inset 0 0 0 2px rgba(255,240,200,.3),0 1px 2px rgba(0,0,0,.5)} :is([data-os="dirigible"]) .wb-close{background:radial-gradient(circle at 35% 30%,#c9f2e4,#4f9f8c 50%,#1f4a40 86%);color:#0d211c} :is([data-os="dirigible"]) .btn,:is([data-os="dirigible"]) .task,:is([data-os="dirigible"]) :is(#snd,.tray-b),:is([data-os="dirigible"]) .seg,:is([data-os="dirigible"]) .tw-cat{border-radius:6px} :is([data-os="dirigible"]) .btn{box-shadow:inset 0 1px 0 rgba(255,230,180,.14),0 1px 0 #000000} :is([data-os="dirigible"]) .btn.primary,:is([data-os="dirigible"]) #start{box-shadow:inset 0 1px 0 rgba(255,250,220,.75),0 1px 0 #3a2508;text-shadow:0 1px 0 rgba(255,240,200,.5)} :is([data-os="dirigible"]) #start{border-radius:999px;border-color:#5a3d12} :is([data-os="dirigible"]) #bar{box-shadow:inset 0 2px 0 rgba(255,240,200,.18)} :is([data-os="dirigible"]) .icon .tile{border-width:2px} /* chrome: analog */ :is([data-os="fantasma"]) .win{background:repeating-linear-gradient(180deg,rgba(255,240,214,.022) 0 1px,transparent 1px 3px),var(--win-bg)} :is([data-os="fantasma"]) .win::before,:is([data-os="fantasma"]) .win::after{content:"";position:absolute;top:-1px;bottom:-1px;width:12px;pointer-events:none;background:repeating-linear-gradient(91deg,rgba(0,0,0,.22) 0 1px,transparent 1px 4px,rgba(255,214,170,.07) 4px 5px,transparent 5px 8px),linear-gradient(90deg,#3a2213,#6e4325 30%,#8a5733 55%,#5a3519 85%,#3a2213);box-shadow:inset 0 1px 0 rgba(255,220,180,.28),inset 0 -1px 0 rgba(0,0,0,.4)} :is([data-os="fantasma"]) .win::before{left:-12px;border-radius:7px 0 0 7px} :is([data-os="fantasma"]) .win::after{right:-12px;border-radius:0 7px 7px 0} :is([data-os="fantasma"]) .win.max::before,:is([data-os="fantasma"]) .win.max::after{display:none} :is([data-os="fantasma"]) .win-title{border-bottom:1px solid #0d0c0a;box-shadow:inset 0 1px 0 rgba(255,240,214,.08),0 1px 0 rgba(255,240,214,.05)} :is([data-os="fantasma"]) .win-title h2{font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase} :is([data-os="fantasma"]) .win-title h2::before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px 2px;border-radius:50%;background:#ffb35c;box-shadow:0 0 6px #e89b3c,0 0 14px rgba(232,155,60,.65);vertical-align:middle} :is([data-os="fantasma"]) .win.inactive .win-title h2::before{background:#4a3a26;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)} :is([data-os="fantasma"]) .wb{width:24px;height:24px;border-radius:50%;border:1px solid #0b0a08;background:radial-gradient(circle at 50% 38%,#4d463c,#26221c 60%,#161310);color:#ede5d3;box-shadow:0 2px 3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,240,214,.2)} :is([data-os="fantasma"]) .wb-close{color:#ffb08f} :is([data-os="fantasma"]) .wb:hover{color:#f3b25e} :is([data-os="fantasma"]) .btn,:is([data-os="fantasma"]) .task,:is([data-os="fantasma"]) :is(#snd,.tray-b),:is([data-os="fantasma"]) .seg{box-shadow:inset 0 1px 0 rgba(255,240,214,.08),0 2px 0 #0b0a08} :is([data-os="fantasma"]) .btn.primary,:is([data-os="fantasma"]) #start{box-shadow:inset 0 1px 0 rgba(255,240,200,.6),0 2px 0 #5e3a10} :is([data-os="fantasma"]) .btn{border-radius:5px} :is([data-os="fantasma"]) #start{letter-spacing:.12em;text-transform:uppercase} :is([data-os="fantasma"]) #bar{box-shadow:inset 0 1px 0 rgba(255,240,214,.07)} :is([data-os="fantasma"]) .menu-head b{letter-spacing:.08em;text-transform:uppercase} /* chrome: vidrio */ :is([data-os="aurora"]) .win,:is([data-os="aurora"]) #bar,:is([data-os="aurora"]) .menu,:is([data-os="aurora"]) #toast{-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)} :is([data-os="aurora"]) .win::before{content:"";position:absolute;left:14px;right:14px;top:-1px;height:2px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,rgba(127,224,255,0),#7fe0ff 18%,#b6f2c7 50%,#c9b6ff 82%,rgba(201,182,255,0));box-shadow:0 0 12px rgba(127,224,255,.75)} :is([data-os="aurora"]) .win.inactive::before{opacity:.35} :is([data-os="aurora"]) .win-title{position:relative;min-height:38px} :is([data-os="aurora"]) .win-title::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.13) 30%,transparent 40%,transparent 62%,rgba(255,255,255,.07) 68%,transparent 74%)} :is([data-os="aurora"]) .win-title h2{font-weight:400;letter-spacing:.02em;text-shadow:0 0 10px rgba(127,224,255,.6)} :is([data-os="aurora"]) .win-body{background:rgba(8,32,60,.3)} :is([data-os="aurora"]) .wb{width:22px;height:22px;border-radius:50%;border:1px solid rgba(210,240,255,.65);background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.75),rgba(255,255,255,.16) 52%,rgba(127,224,255,.3));color:#05223a;box-shadow:0 1px 4px rgba(0,20,50,.35)} :is([data-os="aurora"]) .wb-close{background:radial-gradient(circle at 50% 28%,#ffe9e3,#ff9a8a 52%,#e0614c);border-color:rgba(255,215,205,.85);color:#3a0b04} :is([data-os="aurora"]) .btn,:is([data-os="aurora"]) .seg,:is([data-os="aurora"]) .tw-cat,:is([data-os="aurora"]) .task,:is([data-os="aurora"]) :is(#snd,.tray-b),:is([data-os="aurora"]) #start{border-radius:999px} :is([data-os="aurora"]) .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.35)} :is([data-os="aurora"]) .btn.primary,:is([data-os="aurora"]) #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 18px rgba(127,224,255,.45)} :is([data-os="aurora"]) #bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} :is([data-os="aurora"]) #bar::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#7fe0ff 25%,#b6f2c7 50%,#c9b6ff 75%,transparent);box-shadow:0 0 10px rgba(127,224,255,.8)} :is([data-os="aurora"]) .icon .tile{-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5)} /* chrome: hanami */ :is([data-os="petalos"]) .win{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .7' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .42 0 0 0 0 .52 0 0 0 -2.4 1.1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)' opacity='.16'/%3E%3C/svg%3E") 0 0/240px 240px,var(--win-bg)} :is([data-os="petalos"]) .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 30'%3E%3Cg transform='translate(15 17) rotate(24)'%3E%3Cpath d='M0-9C5-7 7 1 2.6 8.4L0 6.2-2.6 8.4C-7 1-5-7 0-9z' fill='%23f6a9c2'/%3E%3Cpath d='M0-7.5V5' stroke='%23e57c9f' stroke-width='.6'/%3E%3C/g%3E%3Cg transform='translate(44 10) rotate(-38) scale(.78)'%3E%3Cpath d='M0-9C5-7 7 1 2.6 8.4L0 6.2-2.6 8.4C-7 1-5-7 0-9z' fill='%23fbd0dd'/%3E%3C/g%3E%3Cg transform='translate(70 19) rotate(70) scale(.9)'%3E%3Cpath d='M0-9C5-7 7 1 2.6 8.4L0 6.2-2.6 8.4C-7 1-5-7 0-9z' fill='%23f08cae'/%3E%3Cpath d='M0-7.5V5' stroke='%23d9668d' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E") right 104px center/86px 30px no-repeat,var(--title-bg);border-bottom:1px solid #f6d3de} :is([data-os="petalos"]) .win-title h2{font-weight:700;letter-spacing:.02em} :is([data-os="petalos"]) .wb{width:24px;height:22px;border-radius:60% 14% 60% 14%;border:1px solid #efb3c6;background:linear-gradient(135deg,#ffffff,#ffe3ec);color:#8a3a56} :is([data-os="petalos"]) .wb-max{background:linear-gradient(135deg,#fff0f5,#ffc9da)} :is([data-os="petalos"]) .wb-close{background:linear-gradient(135deg,#ff9fbd,#d94c78);border-color:#c94070;color:#ffffff} :is([data-os="petalos"]) .btn,:is([data-os="petalos"]) .seg,:is([data-os="petalos"]) .tw-cat,:is([data-os="petalos"]) .task,:is([data-os="petalos"]) :is(#snd,.tray-b),:is([data-os="petalos"]) #start{border-radius:999px} :is([data-os="petalos"]) .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 5px rgba(200,90,120,.12)} :is([data-os="petalos"]) .btn.primary,:is([data-os="petalos"]) #start{box-shadow:0 4px 12px rgba(200,60,100,.28),inset 0 1px 0 rgba(255,255,255,.35)} :is([data-os="petalos"]) #bar,:is([data-os="petalos"]) .menu{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)} :is([data-os="petalos"]) .cell{border-radius:6px} @container (max-width:560px){ :is([data-os="petalos"]) .win-title{background-position:right 84px center;background-size:56px 20px} } /* chrome: astro */ :is([data-os="planetario"]) .win::after{content:"";position:absolute;inset:-5px;pointer-events:none;opacity:.9;background:linear-gradient(#9b7bff,#9b7bff) 0 0/12px 1px no-repeat,linear-gradient(#9b7bff,#9b7bff) 0 0/1px 12px no-repeat,linear-gradient(#9b7bff,#9b7bff) 100% 0/12px 1px no-repeat,linear-gradient(#9b7bff,#9b7bff) 100% 0/1px 12px no-repeat,linear-gradient(#9b7bff,#9b7bff) 0 100%/12px 1px no-repeat,linear-gradient(#9b7bff,#9b7bff) 0 100%/1px 12px no-repeat,linear-gradient(#9b7bff,#9b7bff) 100% 100%/12px 1px no-repeat,linear-gradient(#9b7bff,#9b7bff) 100% 100%/1px 12px no-repeat} :is([data-os="planetario"]) .win.max::after{display:none} :is([data-os="planetario"]) .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 28'%3E%3Cpath d='M5 20L22 9 41 14 60 5 86 17M41 14L50 24' fill='none' stroke='%239b7bff' stroke-opacity='.65' stroke-width='.8'/%3E%3Cg fill='%23e8ecff'%3E%3Ccircle cx='5' cy='20' r='1.4'/%3E%3Ccircle cx='22' cy='9' r='2'/%3E%3Ccircle cx='41' cy='14' r='1.5'/%3E%3Ccircle cx='60' cy='5' r='2.3'/%3E%3Ccircle cx='86' cy='17' r='1.6'/%3E%3Ccircle cx='50' cy='24' r='1.2'/%3E%3C/g%3E%3Ccircle cx='60' cy='5' r='4.5' fill='%239b7bff' fill-opacity='.25'/%3E%3C/svg%3E") right 104px center/92px 28px no-repeat,repeating-linear-gradient(90deg,rgba(155,123,255,.07) 0 1px,transparent 1px 22px),var(--title-bg);border-bottom:1px solid rgba(155,123,255,.32)} :is([data-os="planetario"]) .win-title h2{font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase} :is([data-os="planetario"]) .wb{width:22px;height:22px;border-radius:50%;background:transparent;border:1px solid rgba(155,123,255,.75);color:#cdbfff} :is([data-os="planetario"]) .wb:hover{background:rgba(155,123,255,.2);box-shadow:0 0 10px rgba(155,123,255,.55)} :is([data-os="planetario"]) .wb-close{border-color:rgba(255,107,138,.8);color:#ffb3c4} :is([data-os="planetario"]) .btn,:is([data-os="planetario"]) .task,:is([data-os="planetario"]) :is(#snd,.tray-b),:is([data-os="planetario"]) .seg,:is([data-os="planetario"]) .tw-cat{border-radius:3px} :is([data-os="planetario"]) .btn{letter-spacing:.03em} :is([data-os="planetario"]) .btn.primary,:is([data-os="planetario"]) #start{box-shadow:0 0 14px rgba(155,123,255,.45)} :is([data-os="planetario"]) #start{letter-spacing:.14em;text-transform:uppercase;font-weight:500} :is([data-os="planetario"]) #bar{box-shadow:0 -8px 30px rgba(155,123,255,.08)} :is([data-os="planetario"]) .menu-head b{letter-spacing:.12em;text-transform:uppercase;font-weight:500} @container (max-width:560px){ :is([data-os="planetario"]) .win-title{background-position:right 84px center,0 0,0 0;background-size:60px 18px,auto,auto} } /* chrome: dream */ :is([data-os="pastel"]) .win{border-color:transparent;background:linear-gradient(var(--win-bg),var(--win-bg)) padding-box,linear-gradient(135deg,#ff8ad8,#c98cff 45%,#8cd6ff 80%,#8ff0d2) border-box} :is([data-os="pastel"]) .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe39a'/%3E%3Cstop offset='.62' stop-color='%23ff8ad8'/%3E%3Cstop offset='1' stop-color='%23c98cff'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='30' height='30' fill='%23fff'/%3E%3Crect y='17' width='30' height='1.4' fill='%23000'/%3E%3Crect y='20.4' width='30' height='1.8' fill='%23000'/%3E%3Crect y='24.2' width='30' height='2.3' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='15' cy='16' r='11' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E") right 104px center/30px 30px no-repeat,var(--title-bg)} :is([data-os="pastel"]) .win-title h2{font-weight:500;font-size:15px;letter-spacing:.01em} :is([data-os="pastel"]) .wb{width:22px;height:22px;border-radius:50%;border:0;color:#2a0838;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)} :is([data-os="pastel"]) .wb-min{background:linear-gradient(180deg,#d4fff2,#8ff0d2)} :is([data-os="pastel"]) .wb-max{background:linear-gradient(180deg,#dcf3ff,#8cd6ff)} :is([data-os="pastel"]) .wb-close{background:linear-gradient(180deg,#ffe39a,#ff8ad8 62%,#c98cff)} :is([data-os="pastel"]) .btn,:is([data-os="pastel"]) .task,:is([data-os="pastel"]) :is(#snd,.tray-b),:is([data-os="pastel"]) .seg,:is([data-os="pastel"]) .tw-cat{border-radius:10px} :is([data-os="pastel"]) .btn.primary,:is([data-os="pastel"]) #start{box-shadow:0 0 16px rgba(255,138,216,.45),inset 0 1px 0 rgba(255,255,255,.55)} :is([data-os="pastel"]) #start{border-radius:999px} :is([data-os="pastel"]) #bar{box-shadow:0 -1px 0 rgba(140,214,255,.35),0 -10px 30px rgba(255,138,216,.12)} :is([data-os="pastel"]) .cell{border-radius:5px} @container (max-width:560px){ :is([data-os="pastel"]) .win-title{background-position:right 84px center;background-size:22px 22px} } /* chrome: garland */ :is([data-os="invierno"]) .win::before{content:"";position:absolute;left:-3px;right:-3px;top:-8px;height:15px;pointer-events:none;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 15' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q6 1 14 6 20 2 27 7 33 0 42 6 50 3 56 8 63 1 72 6 79 3 86 7 91 2 96 7V10Q90 13 84 10.5 79 14.5 72 10.5 64 13 57 10.5 49 15 41 10.5 33 13 26 10.5 19 14.5 11 10.5 5 13 0 10Z' fill='%23dfeaf2'/%3E%3Cpath d='M0 7Q6 1 14 6 20 2 27 7 33 0 42 6 50 3 56 8 63 1 72 6 79 3 86 7 91 2 96 7V8.6Q90 11 84 9 78 12 71 9 64 11 57 9 49 12.5 41 9 33 11 26 9 19 12 11 9 5 11 0 8.6Z' fill='%23fbfdff'/%3E%3C/svg%3E") left top/96px 15px repeat-x;filter:drop-shadow(0 2px 2px rgba(0,20,10,.35))} :is([data-os="invierno"]) .win.max::before{display:none} :is([data-os="invierno"]) .win-title{position:relative;padding-top:8px;min-height:40px} :is([data-os="invierno"]) .win-title::after{content:"";position:absolute;left:10px;right:10px;bottom:-6px;height:12px;pointer-events:none;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 12'%3E%3Cpath d='M0 2.5Q21 7 42 2.5T84 2.5' fill='none' stroke='%230b2218' stroke-width='1'/%3E%3Cg%3E%3Ccircle cx='10.5' cy='7.6' r='3.6' fill='%23e84c4c' fill-opacity='.28'/%3E%3Cellipse cx='10.5' cy='7.4' rx='1.9' ry='2.6' fill='%23ff6a5c'/%3E%3Ccircle cx='9.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='31.5' cy='7.6' r='3.6' fill='%23f1d27a' fill-opacity='.3'/%3E%3Cellipse cx='31.5' cy='7.4' rx='1.9' ry='2.6' fill='%23ffe08a'/%3E%3Ccircle cx='30.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='52.5' cy='7.6' r='3.6' fill='%237de07a' fill-opacity='.28'/%3E%3Cellipse cx='52.5' cy='7.4' rx='1.9' ry='2.6' fill='%238ff08c'/%3E%3Ccircle cx='51.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='73.5' cy='7.6' r='3.6' fill='%235fd6ff' fill-opacity='.28'/%3E%3Cellipse cx='73.5' cy='7.4' rx='1.9' ry='2.6' fill='%237fe0ff'/%3E%3Ccircle cx='72.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3C/svg%3E") left center/84px 12px repeat-x} :is([data-os="invierno"]) .win-title h2{font-weight:700;letter-spacing:.01em} :is([data-os="invierno"]) .wb{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.35);color:#2a1d05;box-shadow:inset 0 2px 2px rgba(255,255,255,.55),0 0 10px rgba(255,220,140,.25)} :is([data-os="invierno"]) .wb-min{background:radial-gradient(circle at 40% 30%,#d8ffd6,#7de07a 55%,#3f9a3c)} :is([data-os="invierno"]) .wb-max{background:radial-gradient(circle at 40% 30%,#fff6d8,#f1d27a 55%,#b88f2e)} :is([data-os="invierno"]) .wb-close{background:radial-gradient(circle at 40% 30%,#ffd2cc,#e84c4c 55%,#a82a2a);color:#fff8ea} :is([data-os="invierno"]) .btn,:is([data-os="invierno"]) .task,:is([data-os="invierno"]) :is(#snd,.tray-b),:is([data-os="invierno"]) .seg,:is([data-os="invierno"]) .tw-cat{border-radius:8px} :is([data-os="invierno"]) .btn.primary,:is([data-os="invierno"]) #start{box-shadow:inset 0 1px 0 rgba(255,220,210,.45),0 0 14px rgba(232,76,76,.3)} :is([data-os="invierno"]) #bar::before{content:"";position:absolute;left:0;right:0;top:-7px;height:13px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 12'%3E%3Cpath d='M0 2.5Q21 7 42 2.5T84 2.5' fill='none' stroke='%230b2218' stroke-width='1'/%3E%3Cg%3E%3Ccircle cx='10.5' cy='7.6' r='3.6' fill='%23e84c4c' fill-opacity='.28'/%3E%3Cellipse cx='10.5' cy='7.4' rx='1.9' ry='2.6' fill='%23ff6a5c'/%3E%3Ccircle cx='9.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='31.5' cy='7.6' r='3.6' fill='%23f1d27a' fill-opacity='.3'/%3E%3Cellipse cx='31.5' cy='7.4' rx='1.9' ry='2.6' fill='%23ffe08a'/%3E%3Ccircle cx='30.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='52.5' cy='7.6' r='3.6' fill='%237de07a' fill-opacity='.28'/%3E%3Cellipse cx='52.5' cy='7.4' rx='1.9' ry='2.6' fill='%238ff08c'/%3E%3Ccircle cx='51.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='73.5' cy='7.6' r='3.6' fill='%235fd6ff' fill-opacity='.28'/%3E%3Cellipse cx='73.5' cy='7.4' rx='1.9' ry='2.6' fill='%237fe0ff'/%3E%3Ccircle cx='72.9' cy='6.6' r='.7' fill='%23fff' fill-opacity='.85'/%3E%3C/g%3E%3C/svg%3E") left center/84px 13px repeat-x} @media (prefers-reduced-motion:no-preference){ :is([data-os="invierno"]) .win-title::after,:is([data-os="invierno"]) #bar::before{animation:wsTwinkle 3.2s ease-in-out infinite} } @keyframes wsTwinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.32) saturate(1.15)}} /* chrome: lcd */ :is([data-os="bolsillo"]) .win{background:linear-gradient(90deg,rgba(15,56,15,.07) 1px,transparent 1px) 0 0/3px 3px,linear-gradient(rgba(15,56,15,.07) 1px,transparent 1px) 0 0/3px 3px,var(--win-bg)} :is([data-os="bolsillo"]) .win-body{text-shadow:1px 1px 0 rgba(15,56,15,.18)} :is([data-os="bolsillo"]) .win-title{min-height:34px;border-bottom:3px solid #306230} :is([data-os="bolsillo"]) .win-title h2{font-size:14px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;line-height:1.4} :is([data-os="bolsillo"]) .wb{width:22px;height:20px;border-radius:0;border:2px solid #9bbc0f;background:#306230;color:#9bbc0f;box-shadow:none} :is([data-os="bolsillo"]) .wb:hover,:is([data-os="bolsillo"]) .wb:focus-visible{background:#9bbc0f;color:#0f380f} :is([data-os="bolsillo"]) .btn,:is([data-os="bolsillo"]) .wb,:is([data-os="bolsillo"]) .task,:is([data-os="bolsillo"]) :is(#snd,.tray-b),:is([data-os="bolsillo"]) #start,:is([data-os="bolsillo"]) .seg,:is([data-os="bolsillo"]) .tcard,:is([data-os="bolsillo"]) .gcard,:is([data-os="bolsillo"]) .cell,:is([data-os="bolsillo"]) .chip,:is([data-os="bolsillo"]) .tw-cat,:is([data-os="bolsillo"]) .tw-q,:is([data-os="bolsillo"]) .iconbtn,:is([data-os="bolsillo"]) .icon .lbl,:is([data-os="bolsillo"]) .mark-ver{border-radius:0} :is([data-os="bolsillo"]) .btn,:is([data-os="bolsillo"]) .seg,:is([data-os="bolsillo"]) .tw-cat{border-width:2px;box-shadow:3px 3px 0 #306230} :is([data-os="bolsillo"]) .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #306230} :is([data-os="bolsillo"]) .task,:is([data-os="bolsillo"]) :is(#snd,.tray-b){border-color:#306230;background:#0f380f;color:#9bbc0f} :is([data-os="bolsillo"]) .task[aria-pressed="true"]{background:#306230;color:#9bbc0f;box-shadow:inset 0 -3px 0 #9bbc0f} :is([data-os="bolsillo"]) #start{border:2px solid #9bbc0f;font-size:13px} :is([data-os="bolsillo"]) .menu{box-shadow:6px 6px 0 rgba(15,56,15,.5)} /* 1.6: temas nuevos */ [data-os="halloween"]{--bg:#0c0714;--fg:#f6e9dc;--muted:#a897a8;--accent:#ff7a1a;--accent-fg:#1a0a00;--danger:#ff6b6b;--win-bg:#170d22;--win-fg:#f6e9dc;--win-border:#4a2f5e;--bw:1px;--radius:14px;--shadow:0 16px 44px rgba(255,122,26,0.18),0 2px 8px rgba(0,0,0,.4);--title-bg:linear-gradient(90deg,#1f1029,#2a1236);--title-fg:#ffb36b;--btn-bg:rgba(255,255,255,.05);--btn-fg:#f6e9dc;--btn-border:rgba(255,122,26,.45);--pri-bg:linear-gradient(135deg,#ff9a3c,#e2560e);--pri-fg:#1a0a00;--cell-bg:#22142e;--cell-bg2:#1d1128;--cell-line:rgba(246,233,220,.12);--cell-on:linear-gradient(135deg,#ff9a3c,#c94d0c);--cell-play:rgba(255,122,26,0.22);--bar-bg:rgba(12,7,20,.94);--bar-fg:#f6e9dc;--bar-border:1px solid rgba(255,122,26,.35);--menu-bg:#170d22;--menu-fg:#f6e9dc;--menu-hi:rgba(255,122,26,0.16);--focus:#ff9a3c;--icon-bg:#170d22;--icon-fg:#ff9a3c;--icon-border:#5a3a70;--icon-bw:1px;--icon-radius:16px;--icon-shadow:0 0 0 1px rgba(255,122,26,.15),0 8px 22px rgba(255,122,26,0.28);--label-fg:#ffe2c4;--label-bg:rgba(12,7,20,0.72);--pv-bg:radial-gradient(circle at 70% 28%,#f3e9d6 0 7px,rgba(210,190,255,.35) 8px,transparent 20px),linear-gradient(#2a1240,#0c0714);--f-title:'Bebas Neue','Oswald','Arial Narrow',sans-serif;--f-ui:'Rubik','Segoe UI',sans-serif;--f-mark:'Grenze Gotisch','Bebas Neue',serif;--glow:rgba(255,122,26,0.75);--glow2:rgba(170,90,255,0.35);--ink:#f6e9dc;--client:#170d22;--frame:inset 0 0 0 1px rgba(255,122,26,0.55),inset 0 0 0 5px #170d22,inset 0 0 0 6px rgba(170,90,255,0.35);color-scheme:dark} [data-os="halloween"] .mark-name,[data-os="halloween"] .pw-name{color:#ffb36b;text-shadow:0 0 12px rgba(255,122,26,.55),0 0 38px rgba(170,90,255,.35),0 4px 0 rgba(0,0,0,.45)} [data-os="halloween"] .win-title h2{letter-spacing:.06em;font-weight:400;font-size:1.15em} [data-os="jacarandas"]{--bg:#f3e9f7;--fg:#3a2350;--muted:#7a6a86;--accent:#7e4fc2;--accent-fg:#ffffff;--danger:#b3261e;--win-bg:rgba(255,250,246,.86);--win-fg:#3a2350;--win-border:rgba(126,79,194,.28);--bw:1px;--radius:16px;--shadow:0 18px 44px rgba(90,50,140,.22),inset 0 1px 0 rgba(255,255,255,.6);--title-bg:linear-gradient(90deg,rgba(239,226,247,.95),rgba(255,236,214,.9));--title-fg:#3a2350;--btn-bg:rgba(255,255,255,.8);--btn-fg:#3a2350;--btn-border:rgba(58,35,80,.18);--pri-bg:linear-gradient(135deg,#9a6fdc,#6a3fb0);--pri-fg:#ffffff;--cell-bg:rgba(255,255,255,.62);--cell-bg2:rgba(255,255,255,.42);--cell-line:rgba(58,35,80,.12);--cell-on:linear-gradient(135deg,#9a6fdc,#6a3fb0);--cell-play:rgba(126,79,194,0.2);--bar-bg:rgba(255,250,246,.72);--bar-fg:#3a2350;--bar-border:1px solid rgba(255,255,255,.9);--menu-bg:rgba(255,250,246,.95);--menu-fg:#3a2350;--menu-hi:rgba(126,79,194,0.14);--focus:#7e4fc2;--icon-bg:rgba(255,250,246,.88);--icon-fg:#6a3fb0;--icon-border:rgba(126,79,194,.3);--icon-bw:1px;--icon-radius:18px;--icon-shadow:0 8px 20px rgba(90,50,140,.2);--label-fg:#3a2350;--label-bg:rgba(255,250,246,.8);--pv-bg:radial-gradient(circle at 70% 30%,#b48ce6 0 10px,transparent 22px),linear-gradient(#ffd9c2,#e9d6f2);--f-title:'Fraunces','Cormorant Garamond',Georgia,serif;--f-ui:'Jost','Nunito','Segoe UI',sans-serif;--f-mark:'Fraunces','Cormorant Garamond',Georgia,serif;--glow:rgba(126,79,194,0.55);--glow2:rgba(255,190,140,0.35);--ink:#3a2350;--client:#fffaf6;--frame:inset 0 0 0 1px rgba(126,79,194,0.35),inset 0 0 0 5px #fffaf6,inset 0 0 0 6px rgba(126,79,194,0.2)} [data-os="jacarandas"] .mark-name,[data-os="jacarandas"] .pw-name{color:#4a2a6e;text-shadow:0 0 2px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.8),0 6px 26px rgba(255,214,190,.7)} [data-os="jacarandas"] .win-title h2{font-weight:600;letter-spacing:.01em} [data-os="marmol"] .win-title h2{font-variant:small-caps;letter-spacing:.08em;font-weight:600} [data-os="marmol"] .mark-name{letter-spacing:.04em;font-weight:600} [data-os="marmol"] .tname{font-variant:small-caps;letter-spacing:.04em} /* 1.6.3 · Engranes cósmicos (a mano desde themes/gen.py: el generador completo ya no coincide con los temas añadidos a mano) */ [data-os="relojeria"]{--bg:#070b12;--fg:#f3e8d4;--muted:#b9ab94;--accent:#ffc457;--accent-fg:#1d1204;--danger:#ff8a6b;--win-bg:#0c121b;--win-fg:#f3e8d4;--win-border:rgba(196,122,62,.6);--bw:1px;--radius:4px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(255,196,87,.06);--title-bg:linear-gradient(180deg,#151d2a,#0e141e);--title-fg:#ffd68a;--btn-bg:rgba(255,196,87,.08);--btn-fg:#f3e8d4;--btn-border:rgba(255,196,87,.45);--pri-bg:linear-gradient(180deg,#ffdc93,#f0ad4a 60%,#d58a45);--pri-fg:#1d1204;--cell-bg:#111924;--cell-bg2:#151e2b;--cell-line:rgba(255,196,87,.16);--cell-on:linear-gradient(135deg,#ffdc93,#ffc457 45%,#c47a3e);--cell-play:rgba(255,196,87,.18);--bar-bg:rgba(7,11,18,.92);--bar-fg:#f3e8d4;--bar-border:1px solid rgba(255,196,87,.38);--menu-bg:#0c121b;--menu-fg:#f3e8d4;--menu-hi:rgba(255,196,87,.14);--focus:#ffd68a;--icon-bg:radial-gradient(circle at 50% 32%,#1a2330,#0a0f17 78%);--icon-fg:#ffc457;--icon-border:rgba(196,122,62,.65);--icon-bw:1px;--icon-radius:12px;--icon-shadow:inset 0 0 0 2px #0a0f17,inset 0 0 0 3px rgba(255,196,87,.32),0 6px 16px rgba(0,0,0,.6);--label-fg:#f3e8d4;--label-bg:rgba(7,11,18,.76);--pv-bg:radial-gradient(circle at 42% 58%,transparent 9px,#c47a3e 10px 12px,transparent 13px),radial-gradient(circle at 42% 58%,transparent 3px,#ffc457 4px 5px,transparent 6px),radial-gradient(circle at 72% 30%,transparent 5px,#a8663a 6px 7px,transparent 8px),radial-gradient(circle at 20% 22%,#ffc457 0 1px,transparent 1.5px),radial-gradient(circle at 86% 72%,#ffc457 0 1px,transparent 1.5px),repeating-linear-gradient(0deg,rgba(255,196,87,.05) 0 1px,transparent 1px 4px),linear-gradient(#070b12,#0b111b);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(255,196,87,0.75);--glow2:rgba(255,196,87,0.3);--ink:#f3e8d4;--client:#0c121b;--frame:inset 0 0 0 1px rgba(255,196,87,0.7),inset 0 0 0 5px #0c121b,inset 0 0 0 6px rgba(255,196,87,0.4);color-scheme:dark} [data-os="relojeria"] .mark-name,[data-os="relojeria"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="relojeria"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: clock */ [data-os="relojeria"] .win{background:radial-gradient(rgba(255,196,87,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="relojeria"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='12' fill='none' stroke='%23c47a3e' stroke-width='3' stroke-dasharray='2.6 2.11'/%3E%3Ccircle cx='15' cy='15' r='9.6' fill='none' stroke='%23ffc457' stroke-width='2.2'/%3E%3Cpath d='M15 6.5v17M6.5 15h17M9 9l12 12M21 9L9 21' stroke='%23ffc457' stroke-width='1.2' stroke-opacity='.8'/%3E%3Ccircle cx='15' cy='15' r='2.6' fill='%230e141e' stroke='%23ffc457' stroke-width='1.2'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,repeating-linear-gradient(90deg,rgba(255,196,87,.42) 0 1px,transparent 1px 8px) left bottom/100% 3px no-repeat,repeating-linear-gradient(90deg,rgba(255,196,87,.6) 0 1px,transparent 1px 40px) left bottom/100% 6px no-repeat,var(--title-bg);border-bottom:1px solid rgba(255,196,87,.3)} [data-os="relojeria"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="relojeria"] .wb{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,196,87,.65);background:radial-gradient(circle at 36% 30%,#2b2318,#0c121b 70%);color:#ffd68a;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)} [data-os="relojeria"] .wb:hover,[data-os="relojeria"] .wb:focus-visible{background:radial-gradient(circle at 36% 30%,#4a3a22,#1a1710 70%);box-shadow:0 0 10px rgba(255,196,87,.45)} [data-os="relojeria"] .wb-close{border-color:rgba(255,138,107,.8);color:#ffb39e} [data-os="relojeria"] .btn,[data-os="relojeria"] .task,[data-os="relojeria"] :is(#snd,.tray-b),[data-os="relojeria"] .seg,[data-os="relojeria"] .tw-cat{border-radius:3px} [data-os="relojeria"] .btn{letter-spacing:.02em} [data-os="relojeria"] .btn.primary,[data-os="relojeria"] #start{box-shadow:inset 0 1px 0 rgba(255,245,220,.6),0 0 14px rgba(255,196,87,.3)} [data-os="relojeria"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="relojeria"] #bar{box-shadow:0 -1px 0 rgba(255,196,87,.2),0 -10px 30px rgba(255,196,87,.06)} [data-os="relojeria"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} @container (max-width:560px){ [data-os="relojeria"] .win-title{background-position:right 84px center,left bottom,left bottom,0 0;background-size:20px 20px,100% 3px,100% 6px,auto} } /* Engranes cósmicos: marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="relojeria"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="relojeria"] :is(.mark-name,.pw-name)::before,[data-os="relojeria"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="relojeria"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#ffe6a8,#ffc457 45%,#d58a45);filter:drop-shadow(0 0 1.5px #070b12) drop-shadow(0 0 1.5px #070b12) drop-shadow(0 0 6px rgba(255,196,87,.42))} [data-os="relojeria"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#d39a5a,#9a5f34);opacity:.85;filter:drop-shadow(0 0 1.5px #070b12)} [data-os="relojeria"] .pw-name::before,[data-os="relojeria"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} /* 1.6.3 · Cristal vivo (a mano desde themes/gen.py) */ [data-os="cristalvivo"]{--bg:#0a0716;--fg:#f5ecff;--muted:#c9b8e0;--accent:#ee92ff;--accent-fg:#24062e;--danger:#ff8aa6;--win-bg:#120c22;--win-fg:#f5ecff;--win-border:rgba(150,100,230,.62);--bw:1px;--radius:4px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 30px rgba(238,146,255,.08);--title-bg:linear-gradient(180deg,#1d1236,#140d26);--title-fg:#f3c9ff;--btn-bg:rgba(238,146,255,.08);--btn-fg:#f5ecff;--btn-border:rgba(238,146,255,.45);--pri-bg:linear-gradient(180deg,#f6c2ff,#e07af5 55%,#a066e6);--pri-fg:#24062e;--cell-bg:#171030;--cell-bg2:#1c1438;--cell-line:rgba(238,146,255,.16);--cell-on:linear-gradient(135deg,#f6c2ff,#ee92ff 45%,#8a52d1);--cell-play:rgba(238,146,255,.18);--bar-bg:rgba(10,7,22,.92);--bar-fg:#f5ecff;--bar-border:1px solid rgba(238,146,255,.38);--menu-bg:#120c22;--menu-fg:#f5ecff;--menu-hi:rgba(238,146,255,.14);--focus:#f3c9ff;--icon-bg:radial-gradient(circle at 50% 32%,#22183c,#0c0818 78%);--icon-fg:#ee92ff;--icon-border:rgba(150,100,230,.65);--icon-bw:1px;--icon-radius:12px;--icon-shadow:inset 0 0 0 2px #0c0818,inset 0 0 0 3px rgba(238,146,255,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#f5ecff;--label-bg:rgba(10,7,22,.76);--pv-bg:linear-gradient(115deg,transparent 46%,rgba(238,146,255,.55) 47% 48%,transparent 49%),radial-gradient(ellipse 14% 34% at 50% 62%,#f6c2ff 0 25%,#ee92ff 45%,transparent 70%),radial-gradient(ellipse 10% 22% at 36% 68%,#b98aff 0 30%,transparent 70%),radial-gradient(ellipse 10% 22% at 64% 68%,#b98aff 0 30%,transparent 70%),repeating-linear-gradient(0deg,rgba(238,146,255,.05) 0 1px,transparent 1px 4px),linear-gradient(#0a0716,#160e2a);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(238,146,255,0.75);--glow2:rgba(238,146,255,0.3);--ink:#f5ecff;--client:#120c22;--frame:inset 0 0 0 1px rgba(238,146,255,0.7),inset 0 0 0 5px #120c22,inset 0 0 0 6px rgba(238,146,255,0.4);color-scheme:dark} [data-os="cristalvivo"] .mark-name,[data-os="cristalvivo"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="cristalvivo"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: prism */ [data-os="cristalvivo"] .win{background:radial-gradient(rgba(238,146,255,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="cristalvivo"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 2.5l7.5 6v13L15 27.5l-7.5-6v-13z' fill='%238a52d1' stroke='%23f6c2ff' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M15 2.5v25M7.5 8.5L15 13l7.5-4.5M7.5 21.5L15 17l7.5 4.5' fill='none' stroke='%23f6c2ff' stroke-opacity='.7' stroke-width='.9'/%3E%3Cpath d='M15 2.5l7.5 6L15 13z' fill='%23ee92ff'/%3E%3Cpath d='M7.5 8.5L15 13v4l-7.5 4.5z' fill='%23b98aff' fill-opacity='.8'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#7fd8ff,#b98aff 35%,#ff8fd8 70%,#ffd18a) left bottom/100% 2px no-repeat,repeating-linear-gradient(115deg,rgba(238,146,255,.1) 0 1px,transparent 1px 11px),var(--title-bg);border-bottom:1px solid rgba(238,146,255,.25)} [data-os="cristalvivo"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="cristalvivo"] .wb{width:22px;height:20px;border:0;border-radius:0;clip-path:polygon(25% 4%,75% 4%,98% 50%,75% 96%,25% 96%,2% 50%);background:linear-gradient(160deg,#3a2560,#1a1030);color:#f3c9ff} [data-os="cristalvivo"] .wb:hover,[data-os="cristalvivo"] .wb:focus-visible{background:linear-gradient(160deg,#6a3fa0,#2e1a52);color:#fff} [data-os="cristalvivo"] .wb-close{background:linear-gradient(160deg,#6a2350,#2a0f22);color:#ffc2d6} [data-os="cristalvivo"] .btn,[data-os="cristalvivo"] .task,[data-os="cristalvivo"] :is(#snd,.tray-b),[data-os="cristalvivo"] .seg,[data-os="cristalvivo"] .tw-cat{border-radius:3px} [data-os="cristalvivo"] .btn.primary,[data-os="cristalvivo"] #start{box-shadow:inset 0 1px 0 rgba(255,240,255,.6),0 0 16px rgba(238,146,255,.35)} [data-os="cristalvivo"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="cristalvivo"] #bar{box-shadow:0 -1px 0 rgba(238,146,255,.22),0 -10px 30px rgba(238,146,255,.07)} [data-os="cristalvivo"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="cristalvivo"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="cristalvivo"] :is(.mark-name,.pw-name)::before,[data-os="cristalvivo"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="cristalvivo"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#fde8ff,#ee92ff 45%,#9a5ce0);filter:drop-shadow(0 0 1.5px #0a0716) drop-shadow(0 0 1.5px #0a0716) drop-shadow(0 0 6px rgba(238,146,255,.42))} [data-os="cristalvivo"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#b886e6,#6c3fb0);opacity:.85;filter:drop-shadow(0 0 1.5px #0a0716)} [data-os="cristalvivo"] .pw-name::before,[data-os="cristalvivo"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="cristalvivo"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* 1.6.3 · Biblioteca infinita (a mano desde themes/gen.py) */ [data-os="bibinfinita"]{--bg:#0b0806;--fg:#f2e6cf;--muted:#c4b292;--accent:#e8b45a;--accent-fg:#201405;--danger:#ff8a6b;--win-bg:#15100b;--win-fg:#f2e6cf;--win-border:rgba(160,104,58,.62);--bw:1px;--radius:5px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(232,180,90,.05);--title-bg:linear-gradient(180deg,#25190f,#1a120b);--title-fg:#f0cf8a;--btn-bg:rgba(232,180,90,.08);--btn-fg:#f2e6cf;--btn-border:rgba(232,180,90,.45);--pri-bg:linear-gradient(180deg,#f6d79a,#e8b45a 60%,#c08440);--pri-fg:#201405;--cell-bg:#1c150e;--cell-bg2:#221910;--cell-line:rgba(232,180,90,.16);--cell-on:linear-gradient(135deg,#f6d79a,#e8b45a 45%,#a8642e);--cell-play:rgba(232,180,90,.18);--bar-bg:rgba(11,8,6,.92);--bar-fg:#f2e6cf;--bar-border:1px solid rgba(232,180,90,.36);--menu-bg:#15100b;--menu-fg:#f2e6cf;--menu-hi:rgba(232,180,90,.14);--focus:#f0cf8a;--icon-bg:radial-gradient(circle at 50% 32%,#2a1e13,#0e0a07 78%);--icon-fg:#e8b45a;--icon-border:rgba(160,104,58,.65);--icon-bw:1px;--icon-radius:8px;--icon-shadow:inset 0 0 0 2px #0e0a07,inset 0 0 0 3px rgba(232,180,90,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#f2e6cf;--label-bg:rgba(11,8,6,.76);--pv-bg:repeating-linear-gradient(90deg,#7a3b22 0 4px,#a0682e 4px 6px,#3e5a3a 6px 9px,#c79a4a 9px 10px,#5b2f45 10px 13px) 0 28%/22% 44% no-repeat,repeating-linear-gradient(90deg,#5b2f45 0 3px,#c79a4a 3px 4px,#7a3b22 4px 8px,#3e5a3a 8px 10px) 100% 28%/22% 44% no-repeat,radial-gradient(ellipse 16% 9% at 50% 46%,#ffe2a0 0 40%,transparent 72%),radial-gradient(circle at 46% 30%,#ffd98a 0 1px,transparent 1.5px),radial-gradient(circle at 56% 22%,#ffd98a 0 1px,transparent 1.5px),linear-gradient(#0b0806,#1d140c);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(232,180,90,0.75);--glow2:rgba(232,180,90,0.3);--ink:#f2e6cf;--client:#15100b;--frame:inset 0 0 0 1px rgba(232,180,90,0.7),inset 0 0 0 5px #15100b,inset 0 0 0 6px rgba(232,180,90,0.4);color-scheme:dark} [data-os="bibinfinita"] .mark-name,[data-os="bibinfinita"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="bibinfinita"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: shelf */ [data-os="bibinfinita"] .win{background:radial-gradient(rgba(232,180,90,.045) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="bibinfinita"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 8.5C12 6.4 7.6 6 3.5 6.6v15.6c4.1-.6 8.5-.2 11.5 1.9 3-2.1 7.4-2.5 11.5-1.9V6.6C22.4 6 18 6.4 15 8.5z' fill='%232a1e13' stroke='%23e8b45a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M15 8.5v15.6M6.5 10.4c2.3-.2 4.6.1 6.4 1M6.5 13.6c2.3-.2 4.6.1 6.4 1M17.1 11.4c1.8-.9 4.1-1.2 6.4-1M17.1 14.6c1.8-.9 4.1-1.2 6.4-1' fill='none' stroke='%23f0cf8a' stroke-opacity='.8' stroke-width='1'/%3E%3Ccircle cx='22' cy='4' r='1' fill='%23ffd98a'/%3E%3Ccircle cx='9' cy='3.2' r='.8' fill='%23ffd98a'/%3E%3C/svg%3E") right 120px center/26px 26px no-repeat,repeating-linear-gradient(90deg,#7a3b22 0 5px,#a0682e 5px 8px,#3e5a3a 8px 12px,#c79a4a 12px 14px,#5b2f45 14px 19px,#24180f 19px 20px,#8a4a2a 20px 26px,#4a6a52 26px 29px,#24180f 29px 31px) left bottom/100% 5px no-repeat,var(--title-bg);border-bottom:1px solid rgba(232,180,90,.35)} [data-os="bibinfinita"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="bibinfinita"] .wb{width:22px;height:20px;border-radius:4px;border:1px solid rgba(232,180,90,.6);background:linear-gradient(180deg,#2e2014,#17100a);color:#f0cf8a;box-shadow:inset 0 1px 0 rgba(255,230,180,.12)} [data-os="bibinfinita"] .wb:hover,[data-os="bibinfinita"] .wb:focus-visible{background:linear-gradient(180deg,#4a3420,#24180e);box-shadow:0 0 10px rgba(232,180,90,.4)} [data-os="bibinfinita"] .wb-close{border-color:rgba(255,138,107,.8);color:#ffb39e} [data-os="bibinfinita"] .btn,[data-os="bibinfinita"] .task,[data-os="bibinfinita"] :is(#snd,.tray-b),[data-os="bibinfinita"] .seg,[data-os="bibinfinita"] .tw-cat{border-radius:4px} [data-os="bibinfinita"] .btn.primary,[data-os="bibinfinita"] #start{box-shadow:inset 0 1px 0 rgba(255,245,220,.6),0 0 14px rgba(232,180,90,.28)} [data-os="bibinfinita"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="bibinfinita"] #bar{box-shadow:0 -1px 0 rgba(232,180,90,.2),0 -10px 30px rgba(232,180,90,.05)} [data-os="bibinfinita"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="bibinfinita"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="bibinfinita"] :is(.mark-name,.pw-name)::before,[data-os="bibinfinita"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="bibinfinita"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#fff0c8,#e8b45a 45%,#b0742e);filter:drop-shadow(0 0 1.5px #0b0806) drop-shadow(0 0 1.5px #0b0806) drop-shadow(0 0 6px rgba(232,180,90,.4))} [data-os="bibinfinita"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#c99252,#8a5a2c);opacity:.85;filter:drop-shadow(0 0 1.5px #0b0806)} [data-os="bibinfinita"] .pw-name::before,[data-os="bibinfinita"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="bibinfinita"] .win-title{background-position:right 84px center,left bottom,0 0;background-size:22px 22px,100% 5px,auto} } /* 1.6.3 · Horologium (a mano desde themes/gen.py) */ [data-os="horologium"]{--bg:#090d12;--fg:#f3ece0;--muted:#b4ada0;--accent:#d7b888;--accent-fg:#1f1709;--danger:#ff8a6b;--win-bg:#10161a;--win-fg:#f3ece0;--win-border:rgba(215,184,136,.42);--bw:1px;--radius:6px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(215,184,136,.05);--title-bg:linear-gradient(180deg,#182026,#11171c);--title-fg:#eadcc0;--btn-bg:rgba(215,184,136,.08);--btn-fg:#f3ece0;--btn-border:rgba(215,184,136,.42);--pri-bg:linear-gradient(180deg,#f3e2c0,#d7b888 60%,#b08f5c);--pri-fg:#1f1709;--cell-bg:#141b20;--cell-bg2:#182026;--cell-line:rgba(215,184,136,.15);--cell-on:linear-gradient(135deg,#f3e2c0,#d7b888 45%,#9c7a48);--cell-play:rgba(215,184,136,.18);--bar-bg:rgba(9,13,18,.92);--bar-fg:#f3ece0;--bar-border:1px solid rgba(215,184,136,.32);--menu-bg:#10161a;--menu-fg:#f3ece0;--menu-hi:rgba(215,184,136,.13);--focus:#eadcc0;--icon-bg:radial-gradient(circle at 50% 32%,#1d252b,#0b1014 78%);--icon-fg:#d7b888;--icon-border:rgba(215,184,136,.55);--icon-bw:1px;--icon-radius:50%;--icon-shadow:inset 0 0 0 2px #0b1014,inset 0 0 0 3px rgba(215,184,136,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#f3ece0;--label-bg:rgba(9,13,18,.76);--pv-bg:radial-gradient(circle at 50% 52%,transparent 0 3%,#e9cf9e 3.5% 4.5%,transparent 5%),linear-gradient(62deg,transparent 49%,#eee2cb 49.5% 50.5%,transparent 51%) 50% 52%/26% 30% no-repeat,linear-gradient(160deg,transparent 48%,#eee2cb 48.5% 51.5%,transparent 52%) 50% 52%/18% 22% no-repeat,radial-gradient(circle at 50% 52%,#1a2229 0 26%,#c9a66a 26.5% 29%,#0f171d 29.5% 31%,transparent 31.5%),linear-gradient(#090d12,#11181d);--f-title:'Cormorant Garamond',Georgia,'Times New Roman',serif;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(215,184,136,0.75);--glow2:rgba(215,184,136,0.3);--ink:#f3ece0;--client:#10161a;--frame:inset 0 0 0 1px rgba(215,184,136,0.7),inset 0 0 0 5px #10161a,inset 0 0 0 6px rgba(215,184,136,0.4);color-scheme:dark} [data-os="horologium"] .mark-name,[data-os="horologium"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="horologium"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: dial */ [data-os="horologium"] .win{background:radial-gradient(rgba(215,184,136,.04) .7px,transparent 1.2px) 0 0/4px 6.6px,var(--win-bg)} [data-os="horologium"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='12.6' fill='%23141b20' stroke='%23d7b888' stroke-width='1.6'/%3E%3Ccircle cx='15' cy='15' r='10.6' fill='none' stroke='%23b08f5c' stroke-width='.5'/%3E%3Cg stroke='%23eadcc0' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M15 4.6v2M15 23.4v2M4.6 15h2M23.4 15h2'/%3E%3C/g%3E%3Cg stroke='%23b08f5c' stroke-width='.7'%3E%3Cpath d='M20.2 6l-.7 1.2M24 9.8l-1.2.7M24 20.2l-1.2-.7M20.2 24l-.7-1.2M9.8 24l.7-1.2M6 20.2l1.2-.7M6 9.8l1.2.7M9.8 6l.7 1.2'/%3E%3C/g%3E%3Cpath d='M15 15l-3.6-5.4M15 15l6.2 2.4' stroke='%23f3ece0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M15 15l1.6 7.6' stroke='%236aa7bd' stroke-width='.7'/%3E%3Ccircle cx='15' cy='15' r='1.3' fill='%23d7b888'/%3E%3Crect x='27' y='13.4' width='2.6' height='3.2' rx='.8' fill='%23d7b888'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,repeating-linear-gradient(90deg,rgba(215,184,136,.5) 0 1px,transparent 1px 6px) left bottom/100% 3px no-repeat,repeating-linear-gradient(90deg,rgba(234,220,192,.8) 0 1.5px,transparent 1.5px 30px) left bottom/100% 6px no-repeat,repeating-radial-gradient(circle at 0 50%,rgba(215,184,136,.07) 0 1px,transparent 1px 5px),var(--title-bg);border-bottom:1px solid rgba(215,184,136,.28)} [data-os="horologium"] .win-title h2{font-weight:600;font-size:17px;letter-spacing:.1em;font-variant:small-caps} [data-os="horologium"] .wb{width:20px;height:20px;border-radius:50%;border:1px solid rgba(215,184,136,.7);background:repeating-conic-gradient(#2c2820 0 9deg,#3e372b 9deg 18deg);color:#eadcc0;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)} [data-os="horologium"] .wb:hover,[data-os="horologium"] .wb:focus-visible{background:repeating-conic-gradient(#4a4232 0 9deg,#5e543f 9deg 18deg);box-shadow:0 0 10px rgba(215,184,136,.45)} [data-os="horologium"] .wb-close{border-color:rgba(255,138,107,.8);color:#ffb39e} [data-os="horologium"] .btn,[data-os="horologium"] .task,[data-os="horologium"] :is(#snd,.tray-b),[data-os="horologium"] .seg,[data-os="horologium"] .tw-cat{border-radius:5px} [data-os="horologium"] .btn.primary,[data-os="horologium"] #start{box-shadow:inset 0 1px 0 rgba(255,250,235,.6),0 0 14px rgba(215,184,136,.28)} [data-os="horologium"] #start{font-family:var(--f-title);letter-spacing:.1em;font-variant:small-caps;font-weight:700;font-size:16px} [data-os="horologium"] #bar{box-shadow:0 -1px 0 rgba(215,184,136,.2),0 -10px 30px rgba(215,184,136,.05)} [data-os="horologium"] .menu-head b{font-family:var(--f-title);letter-spacing:.06em;font-variant:small-caps;font-size:1.1em} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="horologium"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="horologium"] :is(.mark-name,.pw-name)::before,[data-os="horologium"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="horologium"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#fff6e2,#e9cf9e 45%,#b8925a);filter:drop-shadow(0 0 1.5px #090d12) drop-shadow(0 0 1.5px #090d12) drop-shadow(0 0 6px rgba(215,184,136,.4))} [data-os="horologium"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#b79a6c,#7d6440);opacity:.85;filter:drop-shadow(0 0 1.5px #090d12)} [data-os="horologium"] .pw-name::before,[data-os="horologium"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="horologium"] .win-title{background-position:right 84px center,left bottom,left bottom,0 0,0 0;background-size:20px 20px,100% 3px,100% 6px,auto,auto} } /* 1.6.3 · Medusas abisales (a mano desde themes/gen.py) */ [data-os="medusas"]{--bg:#040b16;--fg:#e6f0ff;--muted:#a9b9d2;--accent:#8fc2ff;--accent-fg:#06142a;--danger:#ff8a6b;--win-bg:#091425;--win-fg:#e6f0ff;--win-border:rgba(143,194,255,.45);--bw:1px;--radius:10px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(143,194,255,.06);--title-bg:linear-gradient(180deg,#122034,#081221);--title-fg:#bfdbff;--btn-bg:rgba(143,194,255,.08);--btn-fg:#e6f0ff;--btn-border:rgba(143,194,255,.42);--pri-bg:linear-gradient(180deg,#bcdaff,#8fc2ff 60%,#a4a6ff);--pri-fg:#06142a;--cell-bg:#121d2e;--cell-bg2:#182334;--cell-line:rgba(143,194,255,.15);--cell-on:linear-gradient(135deg,#bcdaff,#8fc2ff 45%,#b98aff);--cell-play:rgba(143,194,255,.18);--bar-bg:#040a14eb;--bar-fg:#e6f0ff;--bar-border:1px solid rgba(143,194,255,.32);--menu-bg:#091425;--menu-fg:#e6f0ff;--menu-hi:rgba(143,194,255,.13);--focus:#bfdbff;--icon-bg:radial-gradient(circle at 50% 32%,#19293f,#030912 78%);--icon-fg:#8fc2ff;--icon-border:rgba(143,194,255,.55);--icon-bw:1px;--icon-radius:9px;--icon-shadow:inset 0 0 0 2px #030912,inset 0 0 0 3px rgba(143,194,255,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#e6f0ff;--label-bg:#040a14c2;--pv-bg:radial-gradient(ellipse 18% 12% at 46% 38%,#9fd0ff 0 45%,transparent 70%),repeating-linear-gradient(90deg,transparent 0 6px,rgba(143,194,255,.35) 6px 7px) 40% 62%/14% 30% no-repeat,radial-gradient(ellipse 10% 7% at 66% 30%,#c8a6ff 0 45%,transparent 70%),linear-gradient(#071a30,#040b16);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(143,194,255,0.75);--glow2:rgba(143,194,255,0.3);--ink:#e6f0ff;--client:#091425;--frame:inset 0 0 0 1px rgba(143,194,255,0.7),inset 0 0 0 5px #091425,inset 0 0 0 6px rgba(143,194,255,0.4);color-scheme:dark} [data-os="medusas"] .mark-name,[data-os="medusas"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="medusas"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: jelly */ [data-os="medusas"] .win{background:radial-gradient(rgba(143,194,255,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="medusas"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M5 14C5 7.5 9.5 3.5 15 3.5S25 7.5 25 14c-1.7 1-3.3-.6-5 .3-1.7.9-3.3-.6-5 .3-1.7-.9-3.3.6-5-.3-1.7-.9-3.3.7-5-.3z' fill='%232a4f86' stroke='%23bfe0ff' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M9 15c-1 4 1.5 6 0 10M13 15.5c.5 4-1.5 6.5 0 11M17 15.5c-.5 4 1.5 6.5 0 11M21 15c1 4-1.5 6 0 10' fill='none' stroke='%239fc9ff' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M9 9.5c1.5-2.6 3.6-3.8 6-3.8' fill='none' stroke='%23e6f2ff' stroke-opacity='.8' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#4f8fe0,#9fd0ff 40%,#c8a6ff 75%,#4f8fe0) left bottom/100% 2px no-repeat,repeating-linear-gradient(90deg,rgba(143,194,255,.06) 0 1px,transparent 1px 13px),var(--title-bg);border-bottom:1px solid rgba(143,194,255,.25)} [data-os="medusas"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="medusas"] .wb{width:22px;height:20px;border:1px solid rgba(143,194,255,.5);border-radius:50% 50% 42% 42%/66% 66% 34% 34%;background:linear-gradient(180deg,#1d3a66,#0b1830);color:#d6e9ff} [data-os="medusas"] .wb:hover,[data-os="medusas"] .wb:focus-visible{background:linear-gradient(180deg,#2f5f9e,#14284c);color:#fff;box-shadow:0 0 10px rgba(143,194,255,.45)} [data-os="medusas"] .wb-close{background:linear-gradient(180deg,#5a2440,#24101c);color:#ffc6d6;border-color:rgba(255,138,107,.7)} [data-os="medusas"] .btn,[data-os="medusas"] .task,[data-os="medusas"] :is(#snd,.tray-b),[data-os="medusas"] .seg,[data-os="medusas"] .tw-cat{border-radius:10px} [data-os="medusas"] .btn.primary,[data-os="medusas"] #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(143,194,255,.32)} [data-os="medusas"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="medusas"] #bar{box-shadow:0 -1px 0 rgba(143,194,255,.22),0 -10px 30px rgba(143,194,255,.06)} [data-os="medusas"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="medusas"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="medusas"] :is(.mark-name,.pw-name)::before,[data-os="medusas"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="medusas"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#eef6ff,#9fd0ff 45%,#6a8fe8);filter:drop-shadow(0 0 1.5px #040b16) drop-shadow(0 0 1.5px #040b16) drop-shadow(0 0 6px rgba(143,194,255,.45))} [data-os="medusas"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#8fa9e0,#4a5fa8);opacity:.85;filter:drop-shadow(0 0 1.5px #040b16)} [data-os="medusas"] .pw-name::before,[data-os="medusas"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="medusas"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* 1.6.3 · Volcán de obsidiana (a mano desde themes/gen.py) */ [data-os="obsidiana"]{--bg:#0a0706;--fg:#f6e7dc;--muted:#c7b2a6;--accent:#ff8a4c;--accent-fg:#260d03;--danger:#ff8a6b;--win-bg:#141011;--win-fg:#f6e7dc;--win-border:rgba(255,138,76,.45);--bw:1px;--radius:3px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(255,138,76,.06);--title-bg:linear-gradient(180deg,#241915,#120e0f);--title-fg:#fabd9b;--btn-bg:rgba(255,138,76,.08);--btn-fg:#f6e7dc;--btn-border:rgba(255,138,76,.42);--pri-bg:linear-gradient(180deg,#ffb994,#ff8a4c 60%,#e0663b);--pri-fg:#260d03;--cell-bg:#1d1919;--cell-bg2:#241f1f;--cell-line:rgba(255,138,76,.15);--cell-on:linear-gradient(135deg,#ffb994,#ff8a4c 45%,#c2412a);--cell-play:rgba(255,138,76,.18);--bar-bg:#090605eb;--bar-fg:#f6e7dc;--bar-border:1px solid rgba(255,138,76,.32);--menu-bg:#141011;--menu-fg:#f6e7dc;--menu-hi:rgba(255,138,76,.13);--focus:#fabd9b;--icon-bg:radial-gradient(circle at 50% 32%,#301f18,#080605 78%);--icon-fg:#ff8a4c;--icon-border:rgba(255,138,76,.55);--icon-bw:1px;--icon-radius:9px;--icon-shadow:inset 0 0 0 2px #080605,inset 0 0 0 3px rgba(255,138,76,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#f6e7dc;--label-bg:#090605c2;--pv-bg:linear-gradient(118deg,transparent 46%,#ff8a4c 47% 49%,transparent 50%) 50% 70%/40% 40% no-repeat,conic-gradient(from 150deg at 50% 38%,transparent 0 60deg,#2a2226 60deg 300deg,transparent 300deg) 50% 100%/80% 70% no-repeat,radial-gradient(circle at 50% 36%,#ffb36b 0 4%,transparent 9%),linear-gradient(#1b1311,#0a0706);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(255,138,76,0.75);--glow2:rgba(255,138,76,0.3);--ink:#f6e7dc;--client:#141011;--frame:inset 0 0 0 1px rgba(255,138,76,0.7),inset 0 0 0 5px #141011,inset 0 0 0 6px rgba(255,138,76,0.4);color-scheme:dark} [data-os="obsidiana"] .mark-name,[data-os="obsidiana"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="obsidiana"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: obsid */ [data-os="obsidiana"] .win{background:radial-gradient(rgba(255,138,76,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="obsidiana"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M2.5 26.5l9-15.5h7l9 15.5z' fill='%232b2326' stroke='%23ffb27a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M11.5 11h7l-1.6 3.4-1.5-1.4-1.7 4-1.2-3.1-1.2 1.5z' fill='%23ff8a4c'/%3E%3Cpath d='M14.7 14.5l-2.2 12M15.6 15l3.4 11.5' fill='none' stroke='%23ff7a3a' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='6' r='1.3' fill='%23ffcf8a'/%3E%3Ccircle cx='17.5' cy='4' r='1' fill='%23ffb36b'/%3E%3Ccircle cx='15' cy='8' r='.8' fill='%23ff8a4c'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#7a1e10,#ff6a2a 30%,#ffb36b 50%,#ff6a2a 70%,#7a1e10) left bottom/100% 2px no-repeat,repeating-linear-gradient(128deg,rgba(255,138,76,.06) 0 1px,transparent 1px 9px),repeating-linear-gradient(52deg,rgba(255,255,255,.03) 0 1px,transparent 1px 15px),var(--title-bg);border-bottom:1px solid rgba(255,138,76,.25)} [data-os="obsidiana"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="obsidiana"] .wb{width:22px;height:20px;border:1px solid rgba(255,138,76,.5);border-radius:0;clip-path:polygon(16% 0,84% 6%,100% 50%,80% 100%,20% 94%,0 48%);background:linear-gradient(160deg,#3a2c30,#141012);color:#ffd2b4} [data-os="obsidiana"] .wb:hover,[data-os="obsidiana"] .wb:focus-visible{background:linear-gradient(160deg,#6a3a2c,#2a1612);color:#fff;box-shadow:0 0 10px rgba(255,138,76,.45)} [data-os="obsidiana"] .wb-close{background:linear-gradient(160deg,#7a2414,#2a0c06);color:#ffc9b0;border-color:rgba(255,138,107,.7)} [data-os="obsidiana"] .btn,[data-os="obsidiana"] .task,[data-os="obsidiana"] :is(#snd,.tray-b),[data-os="obsidiana"] .seg,[data-os="obsidiana"] .tw-cat{border-radius:2px} [data-os="obsidiana"] .btn.primary,[data-os="obsidiana"] #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(255,138,76,.32)} [data-os="obsidiana"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="obsidiana"] #bar{box-shadow:0 -1px 0 rgba(255,138,76,.22),0 -10px 30px rgba(255,138,76,.06)} [data-os="obsidiana"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="obsidiana"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="obsidiana"] :is(.mark-name,.pw-name)::before,[data-os="obsidiana"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="obsidiana"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#fff0d6,#ffb36b 40%,#e2522a);filter:drop-shadow(0 0 1.5px #0a0706) drop-shadow(0 0 1.5px #0a0706) drop-shadow(0 0 6px rgba(255,138,76,.5))} [data-os="obsidiana"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#b06a52,#6a2c1e);opacity:.85;filter:drop-shadow(0 0 1.5px #0a0706)} [data-os="obsidiana"] .pw-name::before,[data-os="obsidiana"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="obsidiana"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* 1.6.3 · Ballet de origami (a mano desde themes/gen.py) */ [data-os="balletorigami"]{--bg:#0a0e15;--fg:#f4ece2;--muted:#bfb6aa;--accent:#efb992;--accent-fg:#2a1608;--danger:#ff8a6b;--win-bg:#121821;--win-fg:#f4ece2;--win-border:rgba(239,185,146,.45);--bw:1px;--radius:2px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(239,185,146,.06);--title-bg:linear-gradient(180deg,#212329,#10161e);--title-fg:#f2d5be;--btn-bg:rgba(239,185,146,.08);--btn-fg:#f4ece2;--btn-border:rgba(239,185,146,.42);--pri-bg:linear-gradient(180deg,#f5d5be,#efb992 60%,#c0c4ad);--pri-fg:#2a1608;--cell-bg:#1b2029;--cell-bg2:#22272f;--cell-line:rgba(239,185,146,.15);--cell-on:linear-gradient(135deg,#f5d5be,#efb992 45%,#92cfc8);--cell-play:rgba(239,185,146,.18);--bar-bg:#090d13eb;--bar-fg:#f4ece2;--bar-border:1px solid rgba(239,185,146,.32);--menu-bg:#121821;--menu-fg:#f4ece2;--menu-hi:rgba(239,185,146,.13);--focus:#f2d5be;--icon-bg:radial-gradient(circle at 50% 32%,#2d2b2f,#080b11 78%);--icon-fg:#efb992;--icon-border:rgba(239,185,146,.55);--icon-bw:2px;--icon-radius:9px;--icon-shadow:inset 0 0 0 2px #080b11,inset 0 0 0 3px rgba(239,185,146,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#f4ece2;--label-bg:#090d13c2;--pv-bg:conic-gradient(from 200deg at 50% 50%,#efdcb8 0 40deg,#e8948d 40deg 70deg,transparent 70deg) 30% 40%/30% 30% no-repeat,conic-gradient(from 20deg at 50% 50%,#92cfc8 0 40deg,#bcb7d7 40deg 70deg,transparent 70deg) 70% 60%/26% 26% no-repeat,linear-gradient(#151b26,#0a0e15);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(239,185,146,0.75);--glow2:rgba(239,185,146,0.3);--ink:#f4ece2;--client:#121821;--frame:inset 0 0 0 1px rgba(239,185,146,0.7),inset 0 0 0 5px #121821,inset 0 0 0 6px rgba(239,185,146,0.4);color-scheme:dark} [data-os="balletorigami"] .mark-name,[data-os="balletorigami"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="balletorigami"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: paper */ [data-os="balletorigami"] .win{background:radial-gradient(rgba(239,185,146,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="balletorigami"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3 12.5l10.5 2.5L15 20z' fill='%23e8948d'/%3E%3Cpath d='M27 9l-11.5 6L15 20z' fill='%23efdcb8'/%3E%3Cpath d='M13.5 15l2 0 -.5 5z' fill='%23c99a74'/%3E%3Cpath d='M15.5 15L22 5.5l1.5 1.2-6.2 9.2z' fill='%23f4e6cf'/%3E%3Cpath d='M22 5.5l3.8-.6-2.3 1.8z' fill='%23efb992'/%3E%3Cpath d='M13.5 15l-6.5 5.5 6-2.6z' fill='%2392cfc8'/%3E%3Cpath d='M3 12.5l10.5 2.5L15 20 27 9' fill='none' stroke='%23fff3e2' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#efdcb8,#e8948d 30%,#92cfc8 60%,#bcb7d7 85%,#efdcb8) left bottom/100% 2px no-repeat,linear-gradient(135deg,transparent 49.4%,rgba(239,185,146,.12) 50%,transparent 50.6%) 0 0/48px 48px,linear-gradient(45deg,transparent 49.4%,rgba(146,207,200,.1) 50%,transparent 50.6%) 0 0/48px 48px,var(--title-bg);border-bottom:1px solid rgba(239,185,146,.25)} [data-os="balletorigami"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="balletorigami"] .wb{width:22px;height:20px;border:1px solid rgba(239,185,146,.5);border-radius:0;clip-path:polygon(0 0,70% 0,100% 30%,100% 100%,0 100%);background:linear-gradient(225deg,#efdcb8 0 18%,#2a2620 19%,#17150f);color:#f4e6cf} [data-os="balletorigami"] .wb:hover,[data-os="balletorigami"] .wb:focus-visible{background:linear-gradient(225deg,#fff0d8 0 18%,#4a3e30 19%,#24201a);color:#fff;box-shadow:0 0 10px rgba(239,185,146,.45)} [data-os="balletorigami"] .wb-close{background:linear-gradient(225deg,#ffb4a8 0 18%,#4a1c18 19%,#24100c);color:#ffd6cc;border-color:rgba(255,138,107,.7)} [data-os="balletorigami"] .btn,[data-os="balletorigami"] .task,[data-os="balletorigami"] :is(#snd,.tray-b),[data-os="balletorigami"] .seg,[data-os="balletorigami"] .tw-cat{border-radius:2px} [data-os="balletorigami"] .btn.primary,[data-os="balletorigami"] #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(239,185,146,.32)} [data-os="balletorigami"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="balletorigami"] #bar{box-shadow:0 -1px 0 rgba(239,185,146,.22),0 -10px 30px rgba(239,185,146,.06)} [data-os="balletorigami"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="balletorigami"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="balletorigami"] :is(.mark-name,.pw-name)::before,[data-os="balletorigami"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="balletorigami"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#fff6e8,#efb992 45%,#92cfc8);filter:drop-shadow(0 0 1.5px #0a0e15) drop-shadow(0 0 1.5px #0a0e15) drop-shadow(0 0 6px rgba(239,185,146,.38))} [data-os="balletorigami"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#c9a888,#7a8f8c);opacity:.85;filter:drop-shadow(0 0 1.5px #0a0e15)} [data-os="balletorigami"] .pw-name::before,[data-os="balletorigami"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="balletorigami"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* 1.6.3 · Aurora boreal (a mano desde themes/gen.py) */ [data-os="auroraboreal"]{--bg:#040c13;--fg:#e8fff6;--muted:#a7c4bb;--accent:#7cf7c3;--accent-fg:#032217;--danger:#ff8a6b;--win-bg:#09141e;--win-fg:#e8fff6;--win-border:rgba(124,247,195,.45);--bw:1px;--radius:14px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(124,247,195,.06);--title-bg:linear-gradient(180deg,#11242a,#08121b);--title-fg:#b7fbdf;--btn-bg:rgba(124,247,195,.08);--btn-fg:#e8fff6;--btn-border:rgba(124,247,195,.42);--pri-bg:linear-gradient(180deg,#b0fadb,#7cf7c3 60%,#8bbbd8);--pri-fg:#032217;--cell-bg:#121d27;--cell-bg2:#19242d;--cell-line:rgba(124,247,195,.15);--cell-on:linear-gradient(135deg,#b0fadb,#7cf7c3 45%,#9a7fee);--cell-play:rgba(124,247,195,.18);--bar-bg:#040b11eb;--bar-fg:#e8fff6;--bar-border:1px solid rgba(124,247,195,.32);--menu-bg:#09141e;--menu-fg:#e8fff6;--menu-hi:rgba(124,247,195,.13);--focus:#b7fbdf;--icon-bg:radial-gradient(circle at 50% 32%,#172f32,#030a0f 78%);--icon-fg:#7cf7c3;--icon-border:rgba(124,247,195,.55);--icon-bw:1px;--icon-radius:9px;--icon-shadow:inset 0 0 0 2px #030a0f,inset 0 0 0 3px rgba(124,247,195,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#e8fff6;--label-bg:#040b11c2;--pv-bg:linear-gradient(180deg,transparent 18%,#7cf7c3 28%,#4fb4c9 40%,#9a7fee 55%,transparent 70%) 50% 30%/86% 60% no-repeat,radial-gradient(circle at 20% 14%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 78% 10%,#fff 0 1px,transparent 1.5px),linear-gradient(#0b1824,#040c13);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(124,247,195,0.75);--glow2:rgba(124,247,195,0.3);--ink:#e8fff6;--client:#09141e;--frame:inset 0 0 0 1px rgba(124,247,195,0.7),inset 0 0 0 5px #09141e,inset 0 0 0 6px rgba(124,247,195,0.4);color-scheme:dark} [data-os="auroraboreal"] .mark-name,[data-os="auroraboreal"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="auroraboreal"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: borealis */ [data-os="auroraboreal"] .win{background:radial-gradient(rgba(124,247,195,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="auroraboreal"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M3 17c3-6 5.5 2 8.5-4s5 3 8-3 5 2 7.5-2v9c-2.5 3-5-3-7.5 2s-5-4-8 2-5.5-3-8.5 3z' fill='%231f6f63' fill-opacity='.85'/%3E%3Cpath d='M3 17c3-6 5.5 2 8.5-4s5 3 8-3 5 2 7.5-2' fill='none' stroke='%237cf7c3' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M3 21c3-5 5.5 1.5 8.5-3.5s5 2.5 8-2.5 5 1.5 7.5-1.5' fill='none' stroke='%239a7fee' stroke-width='1' stroke-linecap='round' stroke-opacity='.85'/%3E%3Ccircle cx='7' cy='5' r='1' fill='%23e8fff6'/%3E%3Ccircle cx='22' cy='3.5' r='.8' fill='%23e8fff6'/%3E%3Ccircle cx='15' cy='6.5' r='.6' fill='%23e8fff6'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#9a7fee,#4fb4c9 30%,#7cf7c3 55%,#4fb4c9 80%,#9a7fee) left bottom/100% 2px no-repeat,linear-gradient(180deg,rgba(124,247,195,.07),transparent 70%),repeating-linear-gradient(90deg,rgba(124,247,195,.05) 0 2px,transparent 2px 9px),var(--title-bg);border-bottom:1px solid rgba(124,247,195,.25)} [data-os="auroraboreal"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="auroraboreal"] .wb{width:22px;height:20px;border:1px solid rgba(124,247,195,.5);border-radius:10px;background:linear-gradient(180deg,#14403a,#0a1a1e);color:#d8fff0} [data-os="auroraboreal"] .wb:hover,[data-os="auroraboreal"] .wb:focus-visible{background:linear-gradient(180deg,#1f6f63,#10302e);color:#fff;box-shadow:0 0 10px rgba(124,247,195,.45)} [data-os="auroraboreal"] .wb-close{background:linear-gradient(180deg,#4a2450,#1c0f20);color:#ffc6e0;border-color:rgba(255,138,107,.7)} [data-os="auroraboreal"] .btn,[data-os="auroraboreal"] .task,[data-os="auroraboreal"] :is(#snd,.tray-b),[data-os="auroraboreal"] .seg,[data-os="auroraboreal"] .tw-cat{border-radius:14px} [data-os="auroraboreal"] .btn.primary,[data-os="auroraboreal"] #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(124,247,195,.32)} [data-os="auroraboreal"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="auroraboreal"] #bar{box-shadow:0 -1px 0 rgba(124,247,195,.22),0 -10px 30px rgba(124,247,195,.06)} [data-os="auroraboreal"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="auroraboreal"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="auroraboreal"] :is(.mark-name,.pw-name)::before,[data-os="auroraboreal"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="auroraboreal"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#f0fff8,#7cf7c3 40%,#9a7fee);filter:drop-shadow(0 0 1.5px #040c13) drop-shadow(0 0 1.5px #040c13) drop-shadow(0 0 6px rgba(124,247,195,.45))} [data-os="auroraboreal"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#5fae96,#5a4ba0);opacity:.85;filter:drop-shadow(0 0 1.5px #040c13)} [data-os="auroraboreal"] .pw-name::before,[data-os="auroraboreal"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="auroraboreal"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* 1.6.3 · Expreso de las estrellas (a mano desde themes/gen.py) */ [data-os="expreso"]{--bg:#060c15;--fg:#e9f4f4;--muted:#a6babb;--accent:#75dedf;--accent-fg:#03201f;--danger:#ff8a6b;--win-bg:#0c141f;--win-fg:#e9f4f4;--win-border:rgba(117,222,223,.45);--bw:1px;--radius:4px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(117,222,223,.06);--title-bg:linear-gradient(180deg,#13222c,#0b121c);--title-fg:#b5eaeb;--btn-bg:rgba(117,222,223,.08);--btn-fg:#e9f4f4;--btn-border:rgba(117,222,223,.42);--pri-bg:linear-gradient(180deg,#acebec,#75dedf 60%,#a2b298);--pri-fg:#03201f;--cell-bg:#151d28;--cell-bg2:#1b242e;--cell-line:rgba(117,222,223,.15);--cell-on:linear-gradient(135deg,#acebec,#75dedf 45%,#d08751);--cell-play:rgba(117,222,223,.18);--bar-bg:#050b13eb;--bar-fg:#e9f4f4;--bar-border:1px solid rgba(117,222,223,.32);--menu-bg:#0c141f;--menu-fg:#e9f4f4;--menu-hi:rgba(117,222,223,.13);--focus:#b5eaeb;--icon-bg:radial-gradient(circle at 50% 32%,#192c36,#050a11 78%);--icon-fg:#75dedf;--icon-border:rgba(117,222,223,.55);--icon-bw:1px;--icon-radius:9px;--icon-shadow:inset 0 0 0 2px #050a11,inset 0 0 0 3px rgba(117,222,223,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#e9f4f4;--label-bg:#050b13c2;--pv-bg:linear-gradient(90deg,#d08751 0 30%,#41708a 30% 100%) 50% 58%/40% 16% no-repeat,radial-gradient(ellipse 50% 14% at 50% 70%,transparent 0 80%,#75dedf 82% 86%,transparent 88%),radial-gradient(circle at 24% 22%,#d6a26f 0 8%,transparent 9%),linear-gradient(#0e1724,#060c15);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(117,222,223,0.75);--glow2:rgba(117,222,223,0.3);--ink:#e9f4f4;--client:#0c141f;--frame:inset 0 0 0 1px rgba(117,222,223,0.7),inset 0 0 0 5px #0c141f,inset 0 0 0 6px rgba(117,222,223,0.4);color-scheme:dark} [data-os="expreso"] .mark-name,[data-os="expreso"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="expreso"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: express */ [data-os="expreso"] .win{background:radial-gradient(rgba(117,222,223,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="expreso"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='3' y='9' width='8' height='10' rx='1' fill='%2341708a' stroke='%23bfeeee' stroke-width='.9'/%3E%3Crect x='4.6' y='11' width='4.6' height='3.6' fill='%23ffd08a'/%3E%3Cpath d='M11 13h12a3 3 0 0 1 3 3v3H11z' fill='%23d08751' stroke='%23ffd6a6' stroke-width='.9'/%3E%3Crect x='19' y='8' width='2.6' height='5' fill='%232c4656'/%3E%3Cpath d='M26 19l2.5 2.5H24z' fill='%23b07a4c'/%3E%3Ccircle cx='7' cy='22' r='2.4' fill='%2324394a' stroke='%2375dedf' stroke-width='1'/%3E%3Ccircle cx='14' cy='22' r='2.4' fill='%2324394a' stroke='%2375dedf' stroke-width='1'/%3E%3Ccircle cx='21' cy='22' r='2.4' fill='%2324394a' stroke='%2375dedf' stroke-width='1'/%3E%3Ccircle cx='22' cy='5' r='1.6' fill='%23bfeeee' fill-opacity='.7'/%3E%3Ccircle cx='25' cy='3' r='1.1' fill='%23bfeeee' fill-opacity='.5'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#d08751 0 50%,#75dedf 50% 100%) left bottom/100% 2px no-repeat,radial-gradient(circle,rgba(208,135,81,.35) 0 1px,transparent 1.5px) 6px 50%/18px 100% repeat-x,repeating-linear-gradient(90deg,rgba(117,222,223,.05) 0 1px,transparent 1px 18px),var(--title-bg);border-bottom:1px solid rgba(117,222,223,.25)} [data-os="expreso"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="expreso"] .wb{width:22px;height:20px;border:1px solid rgba(117,222,223,.5);border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,220,180,.25);background:radial-gradient(circle at 3px 3px,#ffd6a6 0 .8px,transparent 1.2px),radial-gradient(circle at calc(100% - 3px) 3px,#ffd6a6 0 .8px,transparent 1.2px),linear-gradient(180deg,#8a5634,#4a2c1a);color:#ffe2c2} [data-os="expreso"] .wb:hover,[data-os="expreso"] .wb:focus-visible{background:radial-gradient(circle at 3px 3px,#fff0d8 0 .8px,transparent 1.2px),radial-gradient(circle at calc(100% - 3px) 3px,#fff0d8 0 .8px,transparent 1.2px),linear-gradient(180deg,#b8743e,#6a3c20);color:#fff;box-shadow:0 0 10px rgba(117,222,223,.45)} [data-os="expreso"] .wb-close{background:linear-gradient(180deg,#7a2a1e,#3a120c);color:#ffc4b0;border-color:rgba(255,138,107,.7)} [data-os="expreso"] .btn,[data-os="expreso"] .task,[data-os="expreso"] :is(#snd,.tray-b),[data-os="expreso"] .seg,[data-os="expreso"] .tw-cat{border-radius:3px} [data-os="expreso"] .btn.primary,[data-os="expreso"] #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(117,222,223,.32)} [data-os="expreso"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="expreso"] #bar{box-shadow:0 -1px 0 rgba(117,222,223,.22),0 -10px 30px rgba(117,222,223,.06)} [data-os="expreso"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="expreso"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="expreso"] :is(.mark-name,.pw-name)::before,[data-os="expreso"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="expreso"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#f2ffff,#75dedf 40%,#d08751);filter:drop-shadow(0 0 1.5px #060c15) drop-shadow(0 0 1.5px #060c15) drop-shadow(0 0 6px rgba(117,222,223,.45))} [data-os="expreso"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#6aa0a0,#8a5a3a);opacity:.85;filter:drop-shadow(0 0 1.5px #060c15)} [data-os="expreso"] .pw-name::before,[data-os="expreso"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="expreso"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* 1.6.3 · Horizonte de sucesos (a mano desde themes/gen.py) */ [data-os="horizonte"]{--bg:#05060b;--fg:#fff1e0;--muted:#c4b6a6;--accent:#ffb967;--accent-fg:#2a1402;--danger:#ff8a6b;--win-bg:#0c0d15;--win-fg:#fff1e0;--win-border:rgba(255,185,103,.45);--bw:1px;--radius:12px;--shadow:0 0 0 1px rgba(0,0,0,.5),0 22px 54px rgba(0,0,0,.7),0 0 28px rgba(255,185,103,.06);--title-bg:linear-gradient(180deg,#1d191b,#0b0c13);--title-fg:#ffd8aa;--btn-bg:rgba(255,185,103,.08);--btn-fg:#fff1e0;--btn-border:rgba(255,185,103,.42);--pri-bg:linear-gradient(180deg,#ffd5a4,#ffb967 60%,#ec8850);--pri-fg:#2a1402;--cell-bg:#16161d;--cell-bg2:#1d1d23;--cell-line:rgba(255,185,103,.15);--cell-on:linear-gradient(135deg,#ffd5a4,#ffb967 45%,#d8573a);--cell-play:rgba(255,185,103,.18);--bar-bg:#04050aeb;--bar-fg:#fff1e0;--bar-border:1px solid rgba(255,185,103,.32);--menu-bg:#0c0d15;--menu-fg:#fff1e0;--menu-hi:rgba(255,185,103,.13);--focus:#ffd8aa;--icon-bg:radial-gradient(circle at 50% 32%,#29221f,#040509 78%);--icon-fg:#ffb967;--icon-border:rgba(255,185,103,.55);--icon-bw:1px;--icon-radius:9px;--icon-shadow:inset 0 0 0 2px #040509,inset 0 0 0 3px rgba(255,185,103,.3),0 6px 16px rgba(0,0,0,.6);--label-fg:#fff1e0;--label-bg:#04050ac2;--pv-bg:radial-gradient(circle at 50% 50%,#000 0 13%,#fff2d4 14% 15%,transparent 16%),radial-gradient(ellipse 46% 9% at 50% 52%,#ffd18a 0 30%,#e8703e 55%,transparent 72%),radial-gradient(ellipse 18% 22% at 50% 44%,transparent 0 60%,#ffb967 64% 70%,transparent 74%),linear-gradient(#0e1322,#05060b);--f-title:'Space Mono','Courier New',monospace;--f-ui:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--f-mark:'Space Mono','Courier New',monospace;--glow:rgba(255,185,103,0.75);--glow2:rgba(255,185,103,0.3);--ink:#fff1e0;--client:#0c0d15;--frame:inset 0 0 0 1px rgba(255,185,103,0.7),inset 0 0 0 5px #0c0d15,inset 0 0 0 6px rgba(255,185,103,0.4);color-scheme:dark} [data-os="horizonte"] .mark-name,[data-os="horizonte"] .pw-name{color:#ffc457;font-weight:700;letter-spacing:.08em;text-shadow:0 0 10px rgba(255,196,87,.6),0 0 30px rgba(196,122,62,.4)} [data-os="horizonte"] .task[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 -3px 0 var(--accent)} /* chrome: horizon */ [data-os="horizonte"] .win{background:radial-gradient(rgba(255,185,103,.05) .8px,transparent 1.3px) 0 0/7px 11.5px,var(--win-bg)} [data-os="horizonte"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cellipse cx='15' cy='16' rx='13' ry='3.6' fill='none' stroke='%23e8703e' stroke-width='1.6'/%3E%3Cpath d='M8.6 13.6a7 7 0 0 1 12.8 0' fill='none' stroke='%23ffd18a' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='15' cy='15' r='5.4' fill='%23000' stroke='%23fff2d4' stroke-width='.9'/%3E%3Cpath d='M2 16c4 2.4 22 2.4 26 0' fill='none' stroke='%23ffb967' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 120px center/24px 24px no-repeat,linear-gradient(90deg,#3a0f20,#d8573a 25%,#ffd18a 50%,#d8573a 75%,#3a0f20) left bottom/100% 2px no-repeat,radial-gradient(ellipse 60% 220% at 50% 50%,rgba(255,185,103,.08),transparent 70%),var(--title-bg);border-bottom:1px solid rgba(255,185,103,.25)} [data-os="horizonte"] .win-title h2{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} [data-os="horizonte"] .wb{width:22px;height:20px;border:1px solid rgba(255,185,103,.5);border-radius:50%;width:20px;box-shadow:inset 0 0 0 2px #05060b,inset 0 0 0 3px rgba(255,185,103,.35);background:radial-gradient(circle,#000 0 45%,#3a2410 60%,#1a1209);color:#ffe2b8} [data-os="horizonte"] .wb:hover,[data-os="horizonte"] .wb:focus-visible{background:radial-gradient(circle,#000 0 40%,#8a4a1c 60%,#2a1a0a);color:#fff;box-shadow:0 0 10px rgba(255,185,103,.45)} [data-os="horizonte"] .wb-close{background:radial-gradient(circle,#000 0 40%,#8a2416 60%,#2a0a06);color:#ffc4b0;border-color:rgba(255,138,107,.7)} [data-os="horizonte"] .btn,[data-os="horizonte"] .task,[data-os="horizonte"] :is(#snd,.tray-b),[data-os="horizonte"] .seg,[data-os="horizonte"] .tw-cat{border-radius:999px} [data-os="horizonte"] .btn.primary,[data-os="horizonte"] #start{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 16px rgba(255,185,103,.32)} [data-os="horizonte"] #start{font-family:var(--f-title);letter-spacing:.12em;text-transform:uppercase;font-weight:700} [data-os="horizonte"] #bar{box-shadow:0 -1px 0 rgba(255,185,103,.22),0 -10px 30px rgba(255,185,103,.06)} [data-os="horizonte"] .menu-head b{font-family:var(--f-title);letter-spacing:.1em;text-transform:uppercase} /* marca en arte ASCII que se mueve con el péndulo (wp_relojeria.js escribe --rc-mark y --rc-mark2) */ [data-os="horizonte"] :is(.mark-name,.pw-name){font-size:0!important;letter-spacing:0;text-shadow:none;line-height:0;position:relative;display:inline-block;padding:0} [data-os="horizonte"] :is(.mark-name,.pw-name)::before,[data-os="horizonte"] :is(.mark-name,.pw-name)::after{display:block;white-space:pre;font-family:'Space Mono','DejaVu Sans Mono','Courier New',monospace;font-weight:700;font-size:clamp(3.5px,.42vw,6.3px);line-height:1.01;height:12.12em;letter-spacing:0;text-transform:none;text-align:left;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent} [data-os="horizonte"] :is(.mark-name,.pw-name)::before{content:var(--rc-mark," !&? %% \A =??? @@@! ?@@? @@@ %@@& \A @@@@@ @@@! = &@@ == \A ?@@&@@! &@@*&@? ?@@@@@? &@@@@?@@@ @@@@@@@@@! #@@@@@* #@@%@@@@#= =&@@@@@* &@@ *@@* !@@@@@% \A @@% &@@ %@@@#&+ @@@*=*#@# @@@?+!@@@@ @@@@@#@@@@! +@@#*+?@@@ &@@@*+!#@@= *@@&!+%@@# &@@ !@@* =@@% +#@& \A &@@= !@@% %@@* !@@* !@@? @@@ @@@ @@@* @@@= ?@@! &@@+ =@@# @@# &@@= &@@ !@@* &@@#?+ \A +@@@&&&@@@ %@@= !@@% !@@% @@@ =@@@ @@@* @@@ %@@! &@@+ =@@& #@@ &@@= &@@ !@@* =!?#@@? \A @@#****?@@# %@@= &@@%!&@@# &@@&*?@@@@ #@@@#@@@@@? !@@@%?&@@& &@@@%!%@@&= !#@@**#@@% &@@ !@@* !@@& @@# \A *#&! ?&#+ ?## !&#@#%! *&##&!&&@ ?@@@@@@@@? =#@@@@&! &@@*%###? ?##@#%+ %#& !##! +?#@@#? \A &@@ \A &@@= \A &@@= ");background-image:linear-gradient(180deg,#fff6e6,#ffd18a 40%,#e8703e);filter:drop-shadow(0 0 1.5px #05060b) drop-shadow(0 0 1.5px #05060b) drop-shadow(0 0 6px rgba(255,185,103,.5))} [data-os="horizonte"] :is(.mark-name,.pw-name)::after{content:var(--rc-mark2," ~ - \A ~ - - \A - - \A ~ - \A ~ - - \A ;;; ; - ; - ; \A - - ~ - \A ; - ~- \A - ; ; - - ~ ~ \A : :; ~ ;; - : :: :: \A \A ");position:absolute;left:0;top:0;background-image:linear-gradient(180deg,#b07a52,#7a3a3a);opacity:.85;filter:drop-shadow(0 0 1.5px #05060b)} [data-os="horizonte"] .pw-name::before,[data-os="horizonte"] .pw-name::after{font-size:clamp(3.8px,.5vw,6.9px)} @container (max-width:560px){ [data-os="horizonte"] .win-title{background-position:right 84px center,left bottom,0 0,0 0;background-size:20px 20px,100% 2px,auto,auto} } /* ---------- Temas 0.2: ventana con categorías y búsqueda ---------- */ .tw{display:flex;flex-direction:column;gap:14px} .tw-top{display:flex;flex-direction:column;gap:10px;position:sticky;top:-16px;z-index:6;margin:-16px -16px 0;padding:16px 16px 12px;background:var(--client,var(--win-bg));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--cell-line)} .tw-top .intro{margin:0} .tw-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .tw-q{flex:1 1 220px;min-width:0;height:38px;padding:0 12px;box-sizing:border-box;border:1px solid var(--btn-border);border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-bg);color:var(--win-fg);font:inherit} .tw-q::placeholder{color:var(--muted);opacity:1} .tw-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding:2px 2px 4px;margin:0 -2px} .tw-cat{flex:none;display:flex;align-items:baseline;gap:5px;padding:5px 11px;border:1px solid var(--btn-border);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;font:700 13px/1.3 var(--f-ui);white-space:nowrap} .tw-cat small{font-weight:400;opacity:.8;font-variant-numeric:tabular-nums} .tw-cat[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .tw-sec{display:flex;flex-direction:column;gap:10px} .tw-sec + .tw-sec{margin-top:8px} .tw-sec h4{margin:0;font-family:var(--f-title);font-size:17px;display:flex;align-items:baseline;gap:8px} .tw-sec h4 small{font-family:var(--f-ui);font-size:12px;color:var(--muted);font-weight:400} /* 1.7: «Avísame cuando llegue» del Paquete premium (premium.js) */ .tw-sec h4 .pr-nb{margin-left:auto;align-self:center;gap:6px;height:32px;padding:0 12px;font:600 13px/1.2 var(--f-ui);white-space:nowrap} .pr-nb svg,.tp-bar [data-tp="notify"] svg{width:16px;height:16px;flex:none} .pr-nb.on,.tp-bar [data-tp="notify"].on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} /* 1.16.3 · «Comprar el Paquete premium» (premium.js): el mismo lugar que «Avísame», con el precio debajo del nombre */ .tw-sec h4 .pr-buy{margin-left:auto;align-self:center;display:inline-grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;min-height:36px;padding:3px 14px;font:700 13px/1.15 var(--f-ui);white-space:nowrap;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)} .tw-sec h4 .pr-buy svg{grid-row:span 2;width:17px;height:17px}.tw-sec h4 .pr-buy small{font:500 11.5px/1.1 var(--f-ui);opacity:.8} .tp-bar [data-tp="buy"] small{margin-left:6px;font-weight:500;opacity:.85}.tp-bar [data-tp="buy"] svg{width:16px;height:16px;flex:none} @container (max-width:520px){ .tw-sec h4{flex-wrap:wrap} .tw-sec h4 .pr-nb,.tw-sec h4 .pr-buy{margin-left:0} } .tw .tgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .tw .tcard{min-width:0} .tw .tname{display:block;font-size:16px;overflow-wrap:normal;word-break:normal;hyphens:manual;max-width:100%} .tw .pv{height:80px} /* 1.6.3 · temas del Paquete premium (próximamente): la miniatura se ve completa, con un sello de candado */ .tw .pv{position:relative} .tlock{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:999px;background:rgba(10,10,14,.78);color:#fff;font:700 11px/1.2 var(--f-ui);letter-spacing:.02em;box-shadow:0 1px 4px rgba(0,0,0,.35)} .tlock svg{width:12px;height:12px} .tcard-lock .tname,.tcard-lock .tinst{opacity:.8} .tcard-lock:hover .pv{filter:brightness(1.06)} /* ---------- beta: temas que se ganan, invitaciones e insignia «Mecenas de Arcadópolis» (recompensas.js) ---------- */ .tcard-earn .tlock{background:color-mix(in srgb,var(--accent) 82%,#000);color:var(--pri-fg,#fff)} .tw-tools #tw-inv svg{width:18px;height:18px} .tw-inv-p{margin:0 0 14px;padding:14px 16px;border:var(--bw) solid var(--win-border);border-radius:max(0px,calc(var(--radius)*.7));background:var(--cell-bg2,rgba(127,127,127,.08))} .tw-inv-p h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--f-title);font-size:17px} .tw-inv-p h4 svg{width:22px;height:22px;color:var(--accent)} .tw-inv-p p{margin:6px 0} .rw-steps{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .rw-steps li{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px dashed var(--btn-border);border-radius:max(0px,calc(var(--radius)*.5));min-width:0} .rw-steps li.done{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)} .rw-steps .rw-n{font-size:12px;opacity:.8} .rw-steps b{overflow-wrap:anywhere} .rw-steps small{font-weight:700;color:var(--accent);min-height:1em} .rw-count{font-weight:700} @media (max-width:520px){ .rw-steps{grid-template-columns:1fr} } .rw-ic{display:inline-grid;place-items:center} .rw-ic svg{width:22px;height:22px} .rw-pat{color:#e8b22a} .rw-patcard{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px dashed var(--btn-border);border-radius:max(0px,calc(var(--radius)*.7))} .rw-patcard.on{border:1.5px solid #e8b22a;background:linear-gradient(135deg,rgba(232,178,42,.16),rgba(232,178,42,.04))} .rw-patcard .rw-ic svg{width:30px;height:30px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))} .rw-patcard p{margin:4px 0} .rw-patcard .btn{display:inline-flex;align-items:center;gap:6px;margin-top:4px;text-decoration:none} .rw-patcard .btn svg{width:18px;height:18px} .rw-code{padding:1px 6px;border-radius:6px;background:rgba(127,127,127,.18);font-weight:700;letter-spacing:.06em;user-select:all} #me{position:relative} #me.pat::after{content:'';position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:#e8b22a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3s-7.6-4.6-9.1-9.4C1.8 7.4 4 4.4 7.2 4.4c2 0 3.6 1.1 4.8 2.8 1.2-1.7 2.8-2.8 4.8-2.8 3.2 0 5.4 3 4.3 6.5-1.5 4.8-9.1 9.4-9.1 9.4z' fill='%23fff'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:0 0 0 2px var(--bar-bg,#000)} .el-pat{display:inline-grid;place-items:center;margin-left:4px;color:#e8b22a;font-style:normal;vertical-align:-2px} .el-pat svg{width:13px;height:13px} .rw-pfacc{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1.5px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:max(0px,calc(var(--radius)*.7));background:color-mix(in srgb,var(--accent) 10%,transparent)} .rw-pfacc.on{border:1px dashed var(--btn-border);background:none} .rw-pfacc .rw-ic svg{width:28px;height:28px;color:var(--accent)} .rw-pfacc p{margin:4px 0} .rw-pfacc .btn{display:inline-flex;align-items:center;gap:6px;margin-top:4px} .rw-pfacc .btn svg{width:18px;height:18px} /* ---------- 1.7: barra de la vista previa de un tema bloqueado (premium.js › tpBar) ---------- */ .tp-bar{position:fixed;z-index:80;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);box-sizing:border-box;padding:10px 12px 10px 14px;background:var(--menu-bg);color:var(--menu-fg);border:var(--bw,1px) solid var(--win-border);border-radius:max(10px,var(--radius));box-shadow:0 12px 34px rgba(0,0,0,.35);animation:tpIn .25s ease-out} @keyframes tpIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}} .tp-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)} .tp-ic svg{width:17px;height:17px} .tp-t{display:flex;flex-direction:column;min-width:0;line-height:1.2} .tp-t small{font-size:12px;opacity:.78} .tp-t b{font-family:var(--f-title);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tp-t em{font-style:normal;font-size:12.5px;opacity:.85} .tp-left{font:700 13px/1 var(--f-mono,monospace);font-variant-numeric:tabular-nums;padding:6px 8px;border-radius:6px;background:color-mix(in srgb,var(--menu-fg) 10%,transparent);flex:none} .tp-bar .btn{min-height:36px;white-space:nowrap;flex:none} .tp-bar .btn svg{width:16px;height:16px} @media (max-width:560px){ .tp-bar{flex-wrap:wrap;width:calc(100vw - 24px);gap:8px 10px} .tp-t{flex:1 1 0} .tp-bar .btn{flex:1 1 auto;justify-content:center} } @media (prefers-reduced-motion:reduce){ .tp-bar{animation:none} } /* ================= Apps 0.3: piezas comunes ================= */ .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fold{display:flex;flex-direction:column;gap:12px} .fold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px} .fold-app{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--cell-line);background:var(--cell-bg2);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.55));cursor:pointer;text-align:left;font:inherit} .fold-app:hover{border-color:var(--accent)} .fold-app .tile{display:grid;place-items:center;flex:none;width:46px;height:46px;background:var(--icon-bg);color:var(--icon-fg);border:var(--icon-bw) solid var(--icon-border);border-radius:var(--icon-radius);box-shadow:var(--icon-shadow);box-sizing:border-box} .fold-app .tile svg{width:26px;height:26px} .fold-t{display:flex;flex-direction:column;gap:3px;min-width:0} .fold-t b{font-family:var(--f-title);font-size:16px;line-height:1.2} .fold-t small{font-size:13px;color:var(--muted);line-height:1.35} .ap-share{margin-top:4px} .ap-import{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .ap-import input{flex:1 1 220px;min-width:0;min-height:38px;padding:0 10px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));font-family:var(--f-mono);box-sizing:border-box} .ap-import .err{flex-basis:100%} .ap-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ap-item{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.45));background:var(--cell-bg2)} .ap-item-main{display:flex;flex-direction:column;gap:4px;min-width:0} .ap-av{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:hsl(var(--h),58%,46%);color:#fff;font-weight:700;font-size:14px;font-family:system-ui,sans-serif} .ap-field{display:flex;flex-direction:column;gap:5px} .ap-field>span{font-weight:700;font-size:14px} .ap-field input,.ap-field textarea,.ap-field select{min-height:38px;padding:7px 10px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));box-sizing:border-box;width:100%;font:inherit} .ap-field textarea{resize:vertical;line-height:1.5} .ap-field small{font-size:12px;color:var(--muted)} .ap-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;border:1px solid var(--cell-line);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} /* ================= Imanes de refrigerador ================= */ .im,.im-w{display:flex;flex-direction:column;gap:14px} .im-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px} .im-head h3{margin:0;font-family:var(--f-title);font-size:22px;line-height:1.15} .im-intro{max-width:62ch} .im-fridge{position:relative;border-radius:max(6px,calc(var(--radius)*.9));background:linear-gradient(90deg,var(--cell-bg2),var(--cell-bg) 60%,var(--cell-bg2));border:1px solid var(--cell-line);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -6px 12px rgba(0,0,0,.08)} .im-fridge::before{content:"";position:absolute;left:0;right:0;top:64px;border-top:1px solid var(--cell-line);opacity:.7;pointer-events:none} .im-door{display:flex;flex-direction:column;gap:6px;min-height:230px;padding:18px 54px 22px 18px;box-sizing:border-box} .im-handle{position:absolute;right:16px;top:86px;width:12px;height:min(55%,140px);border-radius:7px;background:var(--btn-bg);border:1px solid var(--btn-border);box-shadow:inset -2px 0 3px rgba(0,0,0,.15),2px 2px 4px rgba(0,0,0,.12)} .im-line{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 7px;min-height:40px;padding:4px 6px;border-radius:6px;border:1px dashed transparent;cursor:text} .im-line.cur{border-color:var(--cell-line);background:var(--cell-play)} .im-fridge.view .im-line{cursor:default} .mag{display:inline-flex;align-items:center;padding:5px 9px 4px;background:var(--cell-bg);color:var(--win-fg);border:1px solid var(--cell-line);border-radius:2px;box-shadow:1px 2px 0 rgba(0,0,0,.2),0 3px 7px rgba(0,0,0,.12);transform:rotate(var(--r,0deg));font:600 15px/1.2 var(--f-ui);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;white-space:nowrap} .im-tray .mag{touch-action:pan-y} .mag.sx{padding-left:5px;padding-right:6px;font-style:italic;color:var(--muted)} .im-door .mag.sx{margin-left:-6px} .mag:hover{border-color:var(--accent)} .mag.lifted{opacity:.25} .mag.ghost{position:fixed;z-index:200;pointer-events:none;transform:rotate(3deg) scale(1.08);box-shadow:4px 8px 16px rgba(0,0,0,.35);margin:0} .mag.pop{animation:magPop .22s ease-out} @keyframes magPop{from{transform:rotate(var(--r,0deg)) scale(1.25);box-shadow:4px 8px 16px rgba(0,0,0,.3)}to{transform:rotate(var(--r,0deg)) scale(1)}} .im-caret{display:inline-block;width:3px;height:28px;border-radius:2px;background:var(--accent);align-self:center} .im-empty{margin:auto;color:var(--muted);text-align:center;max-width:36ch} .im-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px} .im-tray-wrap{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px dashed var(--btn-border);border-radius:max(0px,calc(var(--radius)*.55))} .im-tray-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px} .im-tray-head .lnk{margin-left:auto} .im-tray{display:flex;flex-wrap:wrap;gap:10px 8px} .im-poem{margin:0;font:600 16px/1.6 var(--f-ui);white-space:pre-wrap;word-break:break-word} .im-poem.big{font-size:18px;padding:4px 2px} @media (max-width:720px){ .im-door{padding:14px 40px 18px 12px;min-height:180px} .im-handle{right:12px;width:10px} .mag{font-size:14px;padding:5px 8px 4px} } /* ================= Décima ================= */ .dc,.dc-w{display:flex;flex-direction:column;gap:14px} .dc-intro{max-width:64ch} .dc-pie{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:10px 12px;border:1px dashed var(--btn-border);border-radius:max(0px,calc(var(--radius)*.5))} .dc-pie.on{border-style:solid;border-color:var(--accent);background:var(--cell-play)} .dc-pie q{font-family:var(--f-title);font-size:18px;font-style:italic} .dc-pie small{flex-basis:100%} .dc-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:dcv} .dc-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto 26px;align-items:start;gap:8px 10px} .dc-row[data-pause]{padding-bottom:10px;margin-bottom:4px;border-bottom:1px dashed var(--cell-line)} .dc-rl{display:grid;place-items:center;width:28px;height:28px;margin-top:5px;border-radius:7px;background:hsl(var(--gh),62%,44%);color:#fff;font:700 14px/1 system-ui,sans-serif} .dc-in{display:flex;flex-direction:column;gap:3px;min-width:0} .dc-in input{width:100%;min-height:38px;padding:0 10px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.4));box-sizing:border-box;font:500 16px/1.3 var(--f-ui)} .dc-in input.pie{border-style:dashed;background:var(--cell-bg2);font-style:italic} .dc-ro{margin:0;padding:6px 2px 0;font:500 17px/1.4 var(--f-ui)} .dc-syl{min-height:1.2em;font:12px/1.35 var(--f-mono);color:var(--muted);overflow-wrap:anywhere} .dc-count{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:44px;margin-top:6px;font-variant-numeric:tabular-nums} .dc-count b{font-size:18px;line-height:1;color:var(--muted)} .dc-count.ok b{color:var(--accent)} .dc-count.over b{color:var(--danger)} .dc-dots{display:flex;gap:2px} .dc-dots i{width:4px;height:4px;border-radius:50%;background:var(--cell-line)} .dc-dots i.on{background:var(--accent)} .dc-dots i.x{background:var(--danger)} .dc-rh{display:grid;place-items:center;width:26px;height:26px;margin-top:6px;border-radius:50%;font-weight:700;font-size:14px;color:var(--muted)} .dc-rh.ok{background:var(--accent);color:var(--accent-fg)} .dc-rh.no{border:1.5px solid var(--danger);color:var(--danger)} .dc-rh.ason,.dc-rh.same{border:1.5px dashed var(--muted)} .dc-rh.first{color:hsl(var(--gh),62%,44%);font-size:20px} .dc-sum{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0;font-variant-numeric:tabular-nums} .dc-perfect{padding:2px 10px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-weight:700} .dc-acts .dc-sp{flex:1} .dc-help{border-top:1px solid var(--cell-line);padding-top:8px;max-width:66ch} .dc-help summary{cursor:pointer;font-weight:700} .dc-help p{margin:8px 0;font-size:14px} .dc-view{display:flex;flex-direction:column;gap:10px} .dc-view-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px} .dc-view-head h3{margin:0;font-family:var(--f-title);font-size:22px} .dc-lines.ro .dc-row{grid-template-columns:30px minmax(0,1fr) auto 26px} .dc-first{margin:0;font-style:italic} @media (max-width:560px){ .dc-row{grid-template-columns:26px minmax(0,1fr) 22px;} .dc-count{grid-column:2;grid-row:2;flex-direction:row;align-items:center;justify-content:flex-start;margin-top:0;gap:8px} .dc-rh{grid-column:3;grid-row:1} .dc-rl{width:24px;height:24px} } /* ================= Apps 0.3: piezas musicales ================= */ .st2{display:block;max-width:none;height:auto;overflow:visible} .st2 .l{stroke:var(--win-fg);stroke-width:1;opacity:.55} .st2 .bl{stroke:var(--win-fg);stroke-width:1;opacity:.5} .st2 .bl.end{stroke-width:2.4;opacity:.7} .st2 .clef{fill:none;stroke:var(--win-fg);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;opacity:.85} .st2 .lg{stroke:var(--win-fg);stroke-width:1;opacity:.55} .st2 .n{fill:var(--win-fg);stroke:var(--win-fg)} .st2 ellipse.n{stroke-width:0} .st2 ellipse.n.ho{fill:none;stroke-width:1.6} .st2 .stem,.st2 .flag,.st2 .sh,.st2 .rz{fill:none;stroke-width:1.4;stroke-linecap:round} .st2 .sh{stroke-width:1.1} .st2 .n.gh{fill:var(--muted);stroke:var(--muted);opacity:.55} .st2 ellipse.n.gh.ho{fill:none} .st2 .hi{fill:var(--accent);stroke:var(--accent)} .st2 ellipse.hi.ho{fill:none} .st2 .cur{stroke:var(--accent);stroke-width:2;stroke-dasharray:3 3} .pg-c>.pg-staff .st2{height:132px;width:auto} .pg-post .st2,.tr-res .st2{height:112px;width:auto} .pg-staff{overflow-x:auto;padding:4px 2px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.45));background:var(--cell-bg)} .pg-staff.ghost{opacity:.75;background:var(--cell-bg2)} .pno{position:relative;flex:1;min-width:calc(var(--nw) * 30px);height:132px;user-select:none;-webkit-user-select:none;touch-action:none} .pk{position:absolute;top:0;padding:0;margin:0;cursor:pointer;box-sizing:border-box;font:inherit} .pk.w{height:100%;background:#fbfaf7;border:1px solid #6f6a64;border-radius:0 0 6px 6px;color:#3b3833;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;z-index:1} .pk.w span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;pointer-events:none} .pk.w.c span{color:#111} .pk.b{height:60%;background:linear-gradient(180deg,#2c2a28,#111);border:1px solid #000;border-radius:0 0 4px 4px;z-index:2;color:#ddd} .pk kbd{font:600 9px/1 var(--f-mono);opacity:.6} .pk.b kbd{position:absolute;bottom:5px;left:0;right:0;text-align:center} .pk.w.down,.pk.w:active{background:linear-gradient(180deg,#e6e2da,#d2cdc2)} .pk.b.down,.pk.b:active{background:#47433f} .pk.hl.w{background:linear-gradient(180deg,#fbfaf7 30%,var(--accent))} .pk.hl.b{background:linear-gradient(180deg,#111 30%,var(--accent))} .pg-kb{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:2px} .pg-kb>.iconbtn{flex:none} /* ---- Pentagrama ---- */ .pg,.pg-c,.pg-th{display:flex;flex-direction:column;gap:12px} .pg-title{max-width:420px} .pg-reply{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-left:4px solid var(--accent);background:var(--cell-bg2);border-radius:0 max(0px,calc(var(--radius)*.45)) max(0px,calc(var(--radius)*.45)) 0} .pg-reply p{margin:0} .pg-meter{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums} .pg-meter .bar{flex:1;max-width:300px} .pg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} .pg-durs button{display:grid;place-items:center;padding:3px 8px} .pg-durs svg{width:22px;height:22px} .pg-pub{justify-content:flex-end} .pg-pub .status{margin-right:auto} .pg-th-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px} .pg-th-head h3{margin:0;font-family:var(--f-title);font-size:22px} .pg-posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .pg-post{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.5));background:var(--cell-bg2);margin-left:calc(var(--ind,0) * 28px)} .pg-post.playing{border-color:var(--accent);box-shadow:0 0 0 2px var(--cell-play)} .pg-post-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .pg-post-h .iconbtn{margin-left:auto} .pg-rep{gap:16px} .pg-mine{display:flex;flex-direction:column;gap:12px} .pg-mine h4{margin:10px 0 0} /* ---- Jam infinita ---- */ .jm{display:flex;flex-direction:column;gap:16px} .jm-top{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:18px;align-items:start} .jm-ring{width:100%;max-width:260px;height:auto} .jm-arc{fill:none;stroke:var(--cell-line);stroke-width:14;stroke-linecap:round} .jm-arc.on{stroke:var(--accent)} .jm-ch{fill:var(--win-fg);font:700 14px var(--f-ui);text-anchor:middle} .jm-hand{stroke:var(--accent);stroke-width:3;stroke-linecap:round} .jm-hub{fill:var(--accent)} .jm-c1{fill:var(--win-fg);font:700 13px var(--f-title);text-anchor:middle} .jm-c2,.jm-c3{fill:var(--muted);font:12px var(--f-ui);text-anchor:middle} .jm-side{display:flex;flex-direction:column;gap:10px;min-width:0} .jm-side h3{margin:0;font-family:var(--f-title);font-size:22px} .jm-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .jm-parts li{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.4));background:var(--cell-bg2)} .jm-parts li i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--pc)} .jm-parts li span{display:flex;flex-direction:column;min-width:0;flex:1} .jm-parts li small{color:var(--muted);font-size:12px} .jm-parts li.playing{border-color:var(--pc);box-shadow:inset 4px 0 0 var(--pc)} .jm-mine,.jm-fr{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--cell-line)} .jm-mine h4,.jm-fr h4{margin:0;font-family:var(--f-title);font-size:18px} .jm-mine-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px} .jm-grid-wrap{overflow-x:auto;padding-bottom:4px} .jm-grid{display:flex;flex-direction:column;gap:2px;min-width:680px} .jm-chrow,.jm-row{display:grid;grid-template-columns:52px repeat(32,minmax(16px,1fr));gap:2px;align-items:stretch} .jm-chrow{grid-template-columns:52px repeat(4,1fr)} .jm-chrow b{font-size:13px;padding:2px 4px;border-bottom:2px solid var(--cell-line)} .jm-lab{font:600 11px/1 var(--f-mono);color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding-right:6px} .jm-cell{height:22px;padding:0;border:1px solid var(--cell-line);background:var(--cell-bg);border-radius:3px;cursor:pointer} .jm-cell.off{background:var(--cell-bg2)} .jm-cell.b1{margin-left:4px} .jm-cell.on{background:var(--cell-on);border-color:transparent} .jm-cell.ph{box-shadow:inset 0 0 0 99px var(--cell-play)} .jm-cell.on.ph{filter:brightness(1.3)} .jm-sp{flex:1} @media (max-width:640px){ .jm-top{grid-template-columns:1fr} .jm-ring{max-width:220px;margin:0 auto} } /* ---- Acorde del día ---- */ .acd{display:flex;flex-direction:column;gap:18px} .acd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px} .acd-pick,.acd-card{display:flex;flex-direction:column;gap:10px;min-width:0} .acd h4{margin:0;font-family:var(--f-title);font-size:18px} .ac-wheel{width:100%;max-width:240px;height:auto;align-self:center} .ac-wn{cursor:pointer;outline:none} .ac-wn circle{fill:hsl(var(--h),60%,52%);stroke:var(--win-bg);stroke-width:2;opacity:.55;transition:opacity .15s} .ac-wn text{fill:#fff;font:700 12px system-ui,sans-serif;text-anchor:middle;pointer-events:none} .ac-wn:hover circle,.ac-wn:focus-visible circle{opacity:.85} .ac-wn.on circle{opacity:1;stroke:var(--win-fg);stroke-width:3} .ac-core{fill:hsl(var(--h),60%,46%)} .ac-core-t{fill:#fff;font:700 22px var(--f-title);text-anchor:middle} .acd-quals{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px} .acd-q{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 9px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.4));cursor:pointer;text-align:left;font:inherit} .acd-q small{font-size:12px;opacity:.8} .acd-q[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .acd-card{padding:14px;border-radius:max(0px,calc(var(--radius)*.6));border:1px solid var(--cell-line);background:linear-gradient(160deg,hsla(var(--h),70%,55%,.22),transparent 60%),var(--cell-bg2)} .acd-card h3{margin:0;font-family:var(--f-title);font-size:clamp(26px,4vw,36px);line-height:1.1} .acd-mood{display:flex;align-items:center;gap:8px;margin:0;font-size:18px;font-weight:700} .acd-mood::before{content:"";width:14px;height:14px;border-radius:50%;background:hsl(var(--h),60%,50%);flex:none} .acd-kb{overflow-x:auto} .acd-kb .pno{height:92px;min-width:calc(var(--nw) * 24px)} .acd-group{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--cell-line)} .acd-gh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .acd-gwrap{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:16px;align-items:start} .ac-const{width:100%;max-width:260px;height:auto} .ac-tick{fill:var(--muted);font:11px var(--f-ui);text-anchor:middle} .ac-orbit{fill:none;stroke:var(--cell-line);stroke-dasharray:2 4} .ac-link{stroke:var(--accent);opacity:.55;stroke-linecap:round} .ac-node circle{fill:hsl(var(--h),60%,48%);stroke:var(--win-bg);stroke-width:2} .ac-node.me circle{stroke:var(--win-fg);stroke-width:3} .ac-node text{fill:#fff;font:700 12px system-ui,sans-serif;text-anchor:middle} .acd-glist{display:flex;flex-direction:column;gap:10px;min-width:0} .acd-chips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .acd-chips li{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.4))} .acd-chips li i{flex:none;width:14px;height:14px;border-radius:50%;background:hsl(var(--h),60%,50%)} .acd-chips li span{display:flex;flex-direction:column;flex:1;min-width:0} .acd-chips li small{color:var(--muted);font-size:12px} .acd-chips li.playing{border-color:hsl(var(--h),60%,50%);box-shadow:inset 4px 0 0 hsl(var(--h),60%,50%)} .acd-hist{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--cell-line)} .acd-days{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .acd-days li{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:6px 4px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.4))} .acd-days li i{width:22px;height:22px;border-radius:50%;background:hsl(var(--h),60%,50%)} .acd-days li small{font-size:11px;color:var(--muted)} @media (max-width:720px){ .acd-top,.acd-gwrap{grid-template-columns:1fr} .ac-const{margin:0 auto} } /* ---- Tarareo ---- */ .tr{display:flex;flex-direction:column;gap:14px} .tr-intro{max-width:64ch} .tr-modes{align-self:flex-start} .tr-mic{align-items:center;gap:10px;flex-wrap:wrap} .tr-mic .btn svg{width:18px;height:18px} .tr-mic .hint{min-width:0} .tr-or{margin:-2px 0 -4px;text-align:center} .tr-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;border:2px dashed var(--btn-border);border-radius:max(0px,calc(var(--radius)*.6));background:var(--cell-bg2);cursor:pointer;text-align:center} .tr-drop svg{width:40px;height:40px;color:var(--accent)} .tr-drop b{font-size:16px} .tr-drop small{color:var(--muted)} .tr-drop.over{border-color:var(--accent);background:var(--cell-play)} .tr-drop.busy{cursor:progress} .tr-drop .bar{width:min(320px,80%)} .tr-rec{display:flex;flex-direction:column;gap:10px} .tr-res,.tr-mine{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--cell-line)} .tr-res h4,.tr-mine h4{margin:0;font-family:var(--f-title);font-size:18px} .tr-tools{gap:10px 14px} /* ================= Bestiario ================= */ .bs{display:flex;flex-direction:column;gap:12px;min-height:100%} .bs-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .bs-bar .tw-q{flex:1 1 200px;min-width:0} .bs-cols{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start} .bs-index{position:sticky;top:0;display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow:auto;padding-right:4px} .bs-index ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .bs-letter{font:700 13px var(--f-title);color:var(--accent);padding:8px 6px 2px;border-bottom:1px solid var(--cell-line);margin-bottom:2px} .bs-item{display:flex;align-items:center;gap:8px;width:100%;padding:5px 6px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;border-radius:max(0px,calc(var(--radius)*.35));font:inherit} .bs-item:hover{background:var(--cell-play)} .bs-item.on{background:var(--menu-hi);box-shadow:inset 3px 0 0 var(--accent)} .bs-item img,.bs-plate img,.bs-g img,.bs-plate-btn img{image-rendering:pixelated;image-rendering:crisp-edges} .bs-item img{flex:none;background:var(--cell-bg2);border-radius:4px} .bs-item span{display:flex;flex-direction:column;min-width:0} .bs-item b{font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bs-item small{font-size:12px;color:var(--muted)} .bs-noimg{flex:none;width:28px;height:28px;border-radius:4px;border:1px dashed var(--cell-line)} .bs-noimg.big{width:56px;height:56px} .bs-imp{margin-top:8px;font-size:14px} .bs-imp summary{cursor:pointer;font-weight:700} .bs-imp .ap-import{margin-top:8px} .bs-main{min-width:0} .bs-art{display:flow-root;max-width:72ch} .bs-art header{margin-bottom:10px} .bs-art h2{margin:0;font-family:var(--f-title);font-size:clamp(26px,3.6vw,36px);line-height:1.1;text-wrap:balance} .bs-sub{margin:4px 0 0;color:var(--muted);font-size:15px} .bs-info{float:right;width:min(232px,42%);margin:0 0 14px 18px;padding:10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.5));background:var(--cell-bg2);font-size:14px} .bs-plate{margin:0 0 8px;display:flex;flex-direction:column;align-items:center;gap:4px} .bs-plate img{width:100%;max-width:192px;height:auto;aspect-ratio:1;background:radial-gradient(circle at 50% 42%,var(--cell-bg),var(--cell-bg2));border-radius:max(0px,calc(var(--radius)*.35))} .bs-plate figcaption{font-size:12px;color:var(--muted)} .bs-info dl{display:grid;grid-template-columns:1fr;gap:1px;margin:0} .bs-info dt{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px} .bs-info dd{margin:0;min-width:0;overflow-wrap:anywhere} .bs-text{line-height:1.62} .bs-text p{margin:0 0 10px} .bs-lead p{font-size:17px} .bs-text h3{font-family:var(--f-title);font-size:19px;margin:16px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--cell-line);overflow:hidden} .bs-link{color:var(--accent);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px} .bs-link.red{color:var(--danger);text-decoration-style:dashed} .bs-quote{margin:14px 0;padding:8px 14px;border-left:4px solid var(--accent);font-style:italic;background:var(--cell-bg2)} .bs-quote p{margin:0} .bs-quote footer{font-size:12px;font-style:normal;color:var(--muted);margin-top:4px} .bs-acts{clear:both;padding-top:10px} .bs-back{display:none;margin-bottom:8px} .bs-welcome .bs-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:12px} .bs-plate-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--cell-line);background:var(--cell-bg2);color:inherit;border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer;font:inherit;font-size:13px;text-align:center} .bs-plate-btn:hover{border-color:var(--accent)} .bs-form{display:flex;flex-direction:column;gap:12px;max-width:72ch} .bs-form h2{margin:0;font-family:var(--f-title);font-size:26px} .bs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .bs-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px} .bs-g{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px;border:2px solid transparent;background:var(--cell-bg2);border-radius:max(0px,calc(var(--radius)*.4));cursor:pointer;color:var(--muted);font:inherit;font-size:11px} .bs-g.on{border-color:var(--accent);background:var(--cell-play)} .bs-g img{width:56px;height:56px} @media (max-width:760px){ .bs-cols{grid-template-columns:1fr} .bs-index{position:static;max-height:none} .bs.reading .bs-index{display:none} .bs.reading .bs-back{display:inline-block} .bs-info{float:none;width:auto;margin:0 0 14px} .bs-two{grid-template-columns:1fr} } /* ================= Trivia ================= */ .tv{display:flex;flex-direction:column;gap:16px} .tv-hero{display:flex;align-items:center;gap:16px} .tv-logo{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);font:700 40px/1 var(--f-title);box-shadow:0 0 0 4px var(--cell-line)} .tv-hero h3{margin:0;font-family:var(--f-title);font-size:30px;line-height:1} .tv-hero p{margin:4px 0 0;color:var(--muted);max-width:52ch} .tv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .tv-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.6));background:var(--cell-bg2)} .tv-card.daily{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)} .tv-card h4{margin:0;font-family:var(--f-title);font-size:19px} .tv-card .hint{flex:1} .tv-done{margin:0;font-weight:700} .tv-grid{margin:0;font-size:20px;letter-spacing:2px;line-height:1.2;word-break:break-all} .tv-cats h4{margin:0 0 8px;font-family:var(--f-title);font-size:18px} .tv-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .tv-cat{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;border:1px solid var(--btn-border);border-left:6px solid hsl(var(--h),62%,50%);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer;font:inherit;font-weight:700;text-align:left} .tv-cat small{color:hsl(var(--h),62%,45%)} .tv-stats{margin:0} .tv-play{gap:14px} .tv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tv-chip{padding:3px 12px;border-radius:999px;background:hsl(var(--h),62%,46%);color:#fff;font-weight:700;font-size:14px} .tv-pts{margin-left:auto;font-variant-numeric:tabular-nums} .tv-time{height:10px;border-radius:99px;background:var(--cell-bg);border:1px solid var(--cell-line);overflow:hidden} .tv-time i{display:block;height:100%;background:hsl(var(--h),62%,50%);transition:width .1s linear} .tv-time.low i{background:var(--danger)} .tv-q{margin:4px 0;font-family:var(--f-title);font-size:clamp(20px,3vw,28px);line-height:1.25;text-wrap:balance} .tv-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .tv-opt{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;border:2px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.6));cursor:pointer;font:inherit;font-size:17px;font-weight:700;text-align:left} .tv-opt kbd{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:hsl(var(--h),62%,46%);color:#fff;font:700 14px/1 system-ui,sans-serif} .tv-opt:not([disabled]):hover{border-color:hsl(var(--h),62%,50%)} .tv-opt.ok{border-color:#2f9e55;background:linear-gradient(0deg,rgba(47,158,85,.25),rgba(47,158,85,.25)),var(--btn-bg)} .tv-opt.ok kbd{background:#2f9e55} .tv-opt.bad{border-color:#d0453b;background:linear-gradient(0deg,rgba(208,69,59,.22),rgba(208,69,59,.22)),var(--btn-bg)} .tv-opt.bad kbd{background:#d0453b} .tv-opt.dim{opacity:.5} .tv-opt[disabled]{cursor:default} .tv-fb{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px;border-radius:max(0px,calc(var(--radius)*.55));border:1px solid var(--cell-line);background:var(--cell-bg2)} .tv-fb.ok{box-shadow:inset 4px 0 0 #2f9e55} .tv-fb.bad{box-shadow:inset 4px 0 0 #d0453b} .tv-fb b{font-size:17px} .tv-fb p{margin:0;max-width:62ch} .tv-keys{margin:0} .tv-over h3{margin:0;font-family:var(--f-title);font-size:22px} .tv-big{margin:0;font:700 clamp(44px,8vw,64px)/1 var(--f-title);font-variant-numeric:tabular-nums;color:var(--accent)} .tv-over>p{margin:0} .tv-review{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:14px} .tv-review li span{display:block;color:var(--muted)} .tv-review li.ok b::before{content:'✓ ';color:#2f9e55} .tv-review .tv-you{display:block;color:var(--danger);font-weight:600} .tv-review .tv-you::before{content:'✗ '} @media (max-width:560px){ .tv-opts{grid-template-columns:1fr} .tv-opt{min-height:52px;font-size:16px} } /* 1.3: en pantallas táctiles no se muestran las teclas */ @media (pointer: coarse){ .tv-keys{display:none} } /* ---------- 1.17.61 · teléfono acostado: el menú cabe sin bajar (pendiente de la 1.17.41) ---------- Solo el menú (la raíz que trae .tv-cards; la partida y el final no cambian). Con 520 px de alto o menos va en dos columnas del alto de la pantalla (--fw-h): a la izquierda el título en un renglón, el reto del día y la partida rápida lado a lado, en línea y los números; a la derecha las diez categorías en dos columnas. La última fila (1fr) absorbe lo que sobra, así las categorías no estiran los renglones de la izquierda. Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .tv:has(>.tv-cards){height:var(--fw-h,calc(100dvh - 56px));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(6,auto) minmax(0,1fr);column-gap:14px;row-gap:0;align-content:start;overflow-y:auto;overscroll-behavior:contain;font-size:14px} .tv:has(>.tv-cards)>*{grid-column:1;margin-bottom:8px} .tv:has(>.tv-cards)>.tv-cats{grid-column:2;grid-row:1/-1;margin:0;min-height:0;display:flex;flex-direction:column} .tv:has(>.tv-cards) .tv-cats h4{margin:0 0 6px;font-size:16px} .tv:has(>.tv-cards) .tv-cat-grid{flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(38px,1fr);gap:6px;min-height:0} .tv:has(>.tv-cards) .tv-cat{padding:4px 10px;font-size:13.5px;line-height:1.2} .tv:has(>.tv-cards)>.tv-hero{gap:10px} .tv:has(>.tv-cards) .tv-logo{width:36px;height:36px;font-size:22px;box-shadow:0 0 0 3px var(--cell-line)} .tv:has(>.tv-cards) .tv-hero h3{font-size:20px} .tv:has(>.tv-cards) .tv-hero p{display:none} .tv:has(>.tv-cards)>.tv-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .tv:has(>.tv-cards) .tv-card{gap:5px;padding:8px 10px} .tv:has(>.tv-cards) .tv-card h4{font-size:15px} .tv:has(>.tv-cards) .tv-card>.hint{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .tv:has(>.tv-cards) .tv-card .btn{min-height:32px;padding-top:0;padding-bottom:0} .tv:has(>.tv-cards) .tv-done{font-size:12.5px} .tv:has(>.tv-cards) .tv-grid{font-size:13px;letter-spacing:1px} /* en línea: el título y el botón en un renglón; la explicación debajo */ .tv:has(>.tv-cards)>.tv-olc{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px} .tv:has(>.tv-cards)>.tv-olc>h4{flex:1 1 auto;min-width:0} .tv:has(>.tv-cards)>.tv-olc>.hint{order:3;flex:1 1 100%} .tv:has(>.tv-cards)>.tv-olc .el-entry{margin-left:auto} .tv:has(>.tv-cards)>.tv-stats{font-size:12px} .tv:has(>.tv-cards)>.mtx-row .btn{min-height:32px} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .tv:has(>.tv-cards){column-gap:10px} .tv:has(>.tv-cards)>.tv-olc>.hint{display:none} .tv:has(>.tv-cards) .tv-cat{font-size:12.5px;padding:3px 8px} } /* ---------- Dominó ---------- */ .dm{display:flex;flex-direction:column;gap:10px;min-width:0} .dm-hero{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:center} .dm-hero canvas{width:240px;height:112px;display:block;image-rendering:pixelated} .dm-hero h3{margin:0;font-family:var(--f-title);font-size:clamp(22px,3vw,30px);line-height:1.1} .dm-hero p{margin:4px 0 0;max-width:60ch;color:var(--muted);font-size:14px} .dm-h{margin:6px 0 0;font-family:var(--f-title);font-size:18px} .dm-daily{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2)} .dm-daily h4{margin:0;font-family:var(--f-title);font-size:18px} .dm-daily .hint{margin:2px 0 8px} .dm-done{margin:0 0 8px;font-weight:700} .dm-daily canvas,.dm-club canvas{width:128px;height:80px;display:block;image-rendering:pixelated} .dm-friend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border:1px dashed var(--accent);border-radius:max(4px,calc(var(--radius)*.55))} .dm-friend p{margin:0;flex:1 1 260px} .dm-tables{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px} .dm-club{display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;gap:8px 12px;padding:12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2)} .dm-club h5{margin:0;font-family:var(--f-title);font-size:17px;line-height:1.15} .dm-club p{margin:3px 0 0;font-size:13px} .dm-club .dm-meta{color:var(--muted);font-size:12px} .dm-club .btn{grid-column:1/-1;justify-self:start} .dm-stars{color:var(--accent);letter-spacing:1px} .dm-stars i{font-style:normal;opacity:.3} .dm-won{color:var(--accent)} .dm-rules summary{cursor:pointer;font-weight:700} .dm-rules ol{margin:8px 0 0;padding-left:22px;display:grid;gap:4px;font-size:14px;max-width:70ch} .dm-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} .dm-tt{display:grid;min-width:0;flex:1 1 160px} .dm-tt b{font-family:var(--f-title);font-size:18px;line-height:1.15} .dm-tt small{color:var(--muted);font-size:12px} .dm-score{display:flex;gap:6px} .dm-score span{display:grid;justify-items:center;min-width:76px;padding:4px 10px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-bg2)} .dm-score small{font-size:11px;color:var(--muted)} .dm-score b{font:700 22px/1.05 var(--f-title);font-variant-numeric:tabular-nums} .dm-us{box-shadow:inset 0 -3px 0 var(--accent)} .dm-tools{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:13px} .dm-game{position:relative} .dm-stage{position:relative;height:clamp(240px,calc(100vh + var(--fw-gain,0px) - 435px),600px);height:clamp(240px,calc(100dvh + var(--fw-gain,0px) - 435px),600px);min-height:0} .dm-cv{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:manipulation} .dm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;min-height:38px} .dm-status{margin:0;text-align:center;font-weight:700} .dm-hand{display:flex;justify-content:center;align-items:flex-end;gap:6px;flex-wrap:wrap;min-height:106px;padding-top:10px} .dm-tile{--px:3;padding:0;border:0;background:none;cursor:pointer;border-radius:4px;transition:transform .12s ease,opacity .12s;color:inherit} .dm-tile canvas{display:block;width:calc(16px*var(--px));height:calc(32px*var(--px));image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))} .dm-tile:hover{transform:translateY(-4px)} .dm-tile.ok{transform:translateY(-10px)} .dm-tile.no{opacity:.5} .dm-tile.sel{transform:translateY(-14px);outline:3px solid var(--accent);outline-offset:2px} .dm-tile.hint canvas{filter:drop-shadow(0 0 0 #ffd34d) drop-shadow(0 0 6px #ffd34d)} .dm-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .dm-tile.shake{animation:dmShake .32s} @keyframes dmShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} .dm-acts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} .dm-phr{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin} .dm-ph{flex:none;padding:6px 12px;border:1px solid var(--btn-border);border-radius:999px;background:var(--cell-bg2);color:inherit;font:inherit;font-size:13px;cursor:pointer} .dm-ph:hover{background:var(--cell-play)} .dm-ph:active{transform:translateY(1px)} .dm-over{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:12px;background:rgba(0,0,0,.42);overflow:auto;border-radius:max(4px,calc(var(--radius)*.5))} .dm-card{width:min(470px,100%);display:flex;flex-direction:column;gap:8px;padding:18px;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:var(--win-bg);color:var(--win-fg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)} .dm-card h3{margin:0;font-family:var(--f-title);font-size:26px;line-height:1.1} .dm-card h4{margin:6px 0 0;font-size:13px;color:var(--muted)} .dm-card p{margin:0} .dm-card.won h3{color:var(--accent)} .dm-pts,.dm-sc{font-weight:700;font-variant-numeric:tabular-nums} .dm-capi,.dm-zap{font-weight:700;color:var(--accent)} .dm-left{list-style:none;margin:0;padding:0;display:grid;gap:4px} .dm-left li{display:grid;grid-template-columns:minmax(0,9ch) 1fr auto;gap:8px;align-items:center;font-size:13px} .dm-left em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums} .dm-mini-row{display:flex;flex-wrap:wrap;gap:3px} .dm-mini{width:22px;height:44px;image-rendering:pixelated} /* ---- 1.1: modo musical ---- */ .dm-mus-card{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2)} .dm-mus-card.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .dm-mus-art canvas{width:128px;height:80px;display:block;image-rendering:pixelated} .dm-mus-main{display:flex;flex-direction:column;gap:8px;min-width:0} .dm-mus-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px} .dm-mus-head h4{margin:0;font-family:var(--f-title);font-size:18px} .dm-mus-tog{font-weight:700} .dm-mus-main>.hint{max-width:72ch} .dm-mus-set{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px} .dm-mus-set[hidden],.dm-mus-last[hidden]{display:none} .dm-f select{min-width:92px} .dm-f-m select{min-width:170px} .dm .dm-tempo{flex:0 1 auto;min-height:38px} .dm .dm-tempo input{width:120px} .dm-tempo-l{font-weight:700;font-size:14px} .dm-tb{display:contents} .dm-mus-last{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:8px;border-top:1px dashed var(--cell-line)} .dm-mus-last p{margin:0;display:grid;flex:1 1 220px;min-width:0} .dm-mus-last small{color:var(--muted);font-size:12px} /* teclas de las notas: mitad de ficha + nombre, con el color de su nota abajo */ .dm-keys{display:flex;gap:5px;flex-wrap:wrap} .dm-key{--nc:#888;display:grid;justify-items:center;align-content:center;gap:3px;min-width:42px;height:46px;padding:3px 4px 6px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.45));background:var(--cell-bg);color:var(--win-fg);font:inherit;cursor:pointer;box-shadow:inset 0 -4px 0 var(--nc);transition:transform .09s ease,background-color .09s ease,color .09s ease} .dm-key canvas{width:22px;height:22px;display:block;image-rendering:pixelated} .dm-key b{font-size:12px;line-height:1;font-weight:700;white-space:nowrap} .dm-key:hover{transform:translateY(-1px)} .dm-key.on,.dm-key.tap{background:var(--nc);border-color:var(--nc);color:#17110b;box-shadow:0 2px 0 rgba(0,0,0,.25),0 0 14px var(--nc);transform:translateY(-3px)} .dm-key.on2{box-shadow:inset 0 -9px 0 var(--nc)} .dm-key:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* barra de música bajo la mesa */ .dm-mus{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;padding:6px 10px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2)} .dm-mus[hidden]{display:none} .dm-mplay{width:42px;height:42px} .dm-mplay svg{width:18px;height:18px} .dm-mtools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px} .dm-mset{position:static} .dm-mpanel .dm-tb-p{display:none} .dm-mset>summary{list-style:none;cursor:pointer;font-variant-numeric:tabular-nums} .dm-mset>summary::-webkit-details-marker{display:none} .dm-mset>summary::after{content:'';width:7px;height:7px;margin:-3px 0 0 2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:.75} .dm-mset[open]>summary::after{transform:rotate(-135deg);margin-top:4px} .dm-mpanel{position:absolute;z-index:2;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;width:max-content;max-width:min(560px,86vw);padding:12px 14px;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:var(--win-bg);color:var(--win-fg);box-shadow:var(--shadow)} .dm-minfo{flex:0 1 auto;margin:0;font-size:12px;font-weight:700} .dm-minfo[hidden]{display:none} .dm-mtog{font-weight:700} /* --dm-mh: alto real de la barra de música (lo pone dmmBarFit); si ocupa dos renglones, la mesa se encoge lo mismo */ .dm-is-mus .dm-stage{height:clamp(220px,calc(100vh + var(--fw-gain,0px) - 450px - var(--dm-mh,60px)),560px);height:clamp(220px,calc(100dvh + var(--fw-gain,0px) - 450px - var(--dm-mh,60px)),560px)} /* fin de mano: la melodía sigue sonando y se puede pausar o descargar */ .dm-card-mus{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 10px;border:1px dashed var(--cell-line);border-radius:max(4px,calc(var(--radius)*.5))} .dm-card-mus p{flex:1 1 160px;margin:0;font-size:13px} @media (max-width:720px){ .dm-hero{grid-template-columns:1fr} .dm-hero canvas{width:100%;height:auto;aspect-ratio:240/112} .dm-tile{--px:2} .dm-hand{min-height:80px} .dm-stage{height:clamp(220px,calc(100vh + var(--fw-gain,0px) - 540px),420px);height:clamp(220px,calc(100dvh + var(--fw-gain,0px) - 540px),420px)} .dm-score span{min-width:64px} .dm-mus-card{grid-template-columns:1fr} .dm-mus-art{display:none} .dm-keys{gap:4px;flex-wrap:nowrap} .dm-key{min-width:0;flex:1 1 0;padding-left:2px;padding-right:2px} /* celular: fila 1 = reproducir y las notas; fila 2 = escala/tempo y descarga (el timbre pasa al panel) */ .dm-mus{gap:6px;padding:6px} .dm-mus>.dm-keys{flex:1 1 0;min-width:0} .dm-mtools{flex:1 1 100%;justify-content:center;flex-wrap:nowrap} .dm-tb-b{display:none} .dm-mpanel .dm-tb-p{display:contents} .dm-mpanel{left:6px;right:6px;transform:none;width:auto;max-width:none} .dm .dm-tempo{flex:1 1 200px} .dm .dm-tempo input{flex:1 1 auto;width:auto;min-width:100px} .dm-mdl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .dm-mdl{padding:0 11px} .dm-is-mus .dm-stage{height:clamp(200px,calc(100vh + var(--fw-gain,0px) - 540px - var(--dm-mh,100px)),420px);height:clamp(200px,calc(100dvh + var(--fw-gain,0px) - 540px - var(--dm-mh,100px)),420px)} } @media (prefers-reduced-motion:reduce){.dm-tile{transition:none}.dm-tile.shake{animation:none}.dm-key{transition:none}.dm-key:hover,.dm-key.on,.dm-key.tap{transform:none}} /* ---- 1.6: en pantalla completa y en teléfonos la mesa ocupa todo el alto libre (sin cuentas de píxeles fijas) ---- */ .win.fw[data-id="domino"] .win-body{display:flex;flex-direction:column} .win.fw[data-id="domino"] .dm-game{flex:1 0 auto} .win.fw[data-id="domino"] .dm-game .dm-stage{flex:1 1 0;height:auto;min-height:170px} @media (max-width:720px){ .win[data-id="domino"] .win-body{display:flex;flex-direction:column;padding:8px 10px} .win[data-id="domino"] .dm-game{flex:1 0 auto;gap:6px} .win[data-id="domino"] .dm-game .dm-stage{flex:1 1 0;height:auto;min-height:170px} /* cabecera compacta: volver (solo icono) · mesa · marcador; las opciones en un renglón chico debajo */ .dm-game .dm-top{gap:4px 8px} .dm-game .dm-back{padding:0 9px;min-width:38px} .dm-game .dm-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .dm-game .dm-tt{flex:1 1 90px} .dm-game .dm-tt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-game .dm-tt small{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dm-game .dm-score{gap:4px} .dm-game .dm-score span{min-width:48px;padding:2px 7px} .dm-game .dm-score small{font-size:10px} .dm-game .dm-score b{font-size:18px} .dm-game .dm-tools{flex:1 1 100%;gap:2px 12px;font-size:12px} .dm-game .dm-bar{min-height:30px;gap:4px 10px} .dm-game .dm-status{font-size:14px} .dm-game .dm-hand{min-height:74px;padding-top:8px;gap:5px} } /* frases rápidas: un solo renglón que se desliza con el dedo; el borde se desvanece para que se note que hay más */ .dm-phr{min-width:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .dm-ph{scroll-snap-align:start} @media (max-width:720px),(pointer:coarse){ .dm-phr{scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)} .dm-phr::-webkit-scrollbar{display:none} .dm-phr.dm-end{-webkit-mask-image:none;mask-image:none} .dm-ph{padding:6px 11px;font-size:12.5px} } /* teléfono acostado (o cualquier pantalla baja): la mesa a la izquierda y tu juego a la derecha */ @media (max-height:540px) and (min-width:560px){ .win.fw[data-id="domino"] .win-body,.win[data-id="domino"] .win-body{padding-inline:10px;padding-bottom:6px} .win.fw[data-id="domino"] .dm-game{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,36%);grid-template-rows:auto auto auto 1fr auto;gap:6px 12px;align-content:stretch} .win.fw[data-id="domino"] .dm-game>.dm-stage{grid-column:1;grid-row:1/-1;min-height:0} .win.fw[data-id="domino"] .dm-game>:not(.dm-stage):not(.dm-over){grid-column:2;min-width:0} .win.fw[data-id="domino"] .dm-top{grid-row:1} .win.fw[data-id="domino"] .dm-mus{grid-row:2} .win.fw[data-id="domino"] .dm-bar{grid-row:3} .win.fw[data-id="domino"] .dm-hand{grid-row:4} .win.fw[data-id="domino"] .dm-phr{grid-row:5;align-self:end} .win.fw[data-id="domino"] .dm-top{gap:4px 8px} .win.fw[data-id="domino"] .dm-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .win.fw[data-id="domino"] .dm-tt b{font-size:15px} .win.fw[data-id="domino"] .dm-score span{min-width:48px;padding:2px 7px} .win.fw[data-id="domino"] .dm-score b{font-size:18px} .win.fw[data-id="domino"] .dm-tools{flex:1 1 100%;font-size:12px;gap:2px 10px} .win.fw[data-id="domino"] .dm-tile{--px:2} .win.fw[data-id="domino"] .dm-hand{align-content:center;min-height:0;padding-top:12px} .win.fw[data-id="domino"] .dm-bar{min-height:28px} .win.fw[data-id="domino"] .dm-mus{padding:4px 6px} .win.fw[data-id="domino"] .dm-mus>.dm-keys{flex:1 1 100%} .win.fw[data-id="domino"] .dm-key{min-width:0;flex:1 1 0;height:40px} } @media (max-height:540px) and (min-width:560px) and (hover:none){ .win.fw[data-id="domino"] .win-body{padding-top:6px} } /* ---------- 1.17.61 · teléfono acostado: el vestíbulo cabe sin bajar (pendiente de la 1.17.41) ---------- Antes medía tres pantallas de alto. Con 520 px de alto o menos va en dos columnas del alto de la pantalla (--fw-h): a la izquierda el título en un renglón, en línea, el modo musical, la partida del día y las reglas; a la derecha las mesas de los clubes, más compactas, que se desplazan dentro. La última fila (1fr) absorbe lo que sobra, así las mesas no estiran los renglones de la izquierda. Si algo abierto ya no cabe (la escala del modo musical, el resultado para compartir), se desplaza el vestíbulo, no la ventana. Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .dm.dm-lobby{height:var(--fw-h,calc(100dvh - 56px));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:repeat(7,auto) minmax(0,1fr);column-gap:12px;row-gap:0;align-content:start;overflow-y:auto;overscroll-behavior:contain} .dm-lobby>*{grid-column:1;margin-bottom:7px} .dm-lobby>.dm-h{grid-column:2;grid-row:1;align-self:center;margin:0 0 6px;font-size:16px} .dm-lobby>.dm-tables{grid-column:2;grid-row:2/-1;margin:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));align-content:start;gap:6px;padding-bottom:2px} .dm-lobby>.dm-rules{margin-bottom:0;font-size:13px} .dm-lobby>.dm-rules[open]{max-height:50vh;overflow-y:auto} /* el título en un renglón, sin la mesita ni el texto largo */ .dm-lobby>.dm-hero{display:flex;align-items:center;gap:10px} .dm-lobby>.dm-hero canvas,.dm-lobby>.dm-hero p{display:none} .dm-lobby>.dm-hero h3{font-size:20px} /* tarjetas más compactas: sin los dibujos de la izquierda y con el texto corto */ .dm-lobby>.dm-olc{flex-wrap:nowrap;gap:8px;padding:7px 10px} .dm-lobby>.dm-olc>div{min-width:0} .dm-lobby>.dm-olc h4,.dm-lobby .dm-mus-head h4,.dm-lobby>.dm-daily h4{font-size:15px} .dm-lobby .hint{font-size:12px;line-height:1.3} .dm-lobby>.dm-olc>div>.hint{display:none} .dm-lobby .dm-mus-main>.hint,.dm-lobby>.dm-daily>div>.hint{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .dm-lobby>.dm-olc .btn{min-height:34px;white-space:nowrap} .dm-lobby .dm-mus-tog{font-size:13px} .dm-lobby>.dm-mus-card,.dm-lobby>.dm-daily{grid-template-columns:minmax(0,1fr);gap:6px;padding:7px 10px} .dm-lobby .dm-mus-art,.dm-lobby .dm-daily-art{display:none} .dm-lobby .dm-mus-main{gap:5px} .dm-lobby .dm-mus-card.on .dm-mus-main>.hint{display:none} .dm-lobby .dm-keys{gap:4px;flex-wrap:nowrap} .dm-lobby .dm-key{min-width:0;flex:1 1 0;height:38px;padding-left:2px;padding-right:2px} /* con el modo musical prendido: tónica, escala, tempo y timbre en dos renglones bajos (cada nombre junto a su control) */ .dm-lobby .dm-mus-set{align-items:center;gap:5px 10px} .dm-lobby .dm-mus-set .ap-field{flex-direction:row;align-items:center;gap:6px} .dm-lobby .dm-mus-set .ap-field>span,.dm-lobby .dm-mus-set .dm-tempo-l{font-size:12.5px} .dm-lobby .dm-mus-set select{min-height:30px;padding:2px 8px;font-size:13px;width:auto;min-width:0} .dm-lobby .dm-mus-set .dm-tempo{flex:1 1 150px;min-height:30px;font-size:13px} .dm-lobby .dm-mus-set .dm-tempo input{flex:1 1 auto;width:auto;min-width:70px} .dm-lobby .dm-mus-set .btn{min-height:30px;padding-top:0;padding-bottom:0;font-size:13px} .dm-lobby .dm-mus-last{padding-top:5px;gap:4px 10px} .dm-lobby .dm-mus-last .btn{min-height:30px} .dm-lobby .dm-mus-card.on .dm-keys{display:none} /* ya prendido, las teclas de las notas salen en la barra de la mesa */ .dm-lobby>.dm-daily .hint{margin:1px 0 5px} .dm-lobby>.dm-daily .btn,.dm-lobby>.row .btn{min-height:32px} .dm-lobby .dm-done{margin:0 0 5px;font-size:13px} .dm-lobby>.dm-friend{padding:6px 10px;font-size:13px} /* las mesas: la mesita chica a la izquierda, el texto y «Sentarse» a la derecha */ .dm-lobby .dm-club{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 10px;padding:7px 9px} .dm-lobby .dm-club canvas{width:72px;height:45px;grid-row:1/span 2} .dm-lobby .dm-club h5{font-size:14.5px} .dm-lobby .dm-club p{margin-top:1px;font-size:12px} .dm-lobby .dm-club .dm-meta{font-size:11.5px} .dm-lobby .dm-club .btn{grid-column:2;min-height:30px;padding-top:0;padding-bottom:0} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .dm.dm-lobby{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:10px} .dm-lobby>*{margin-bottom:6px} .dm-lobby .dm-mus-main>.hint{-webkit-line-clamp:1} .dm-lobby .dm-key b{font-size:11px} /* tónica y escala en un renglón: sus nombres solo para los lectores de pantalla (cada select va dentro de su etiqueta) */ .dm-lobby .dm-mus-set .ap-field>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .dm-lobby .dm-club{grid-template-columns:56px minmax(0,1fr)} .dm-lobby .dm-club canvas{width:56px;height:35px} } /* ---------- Buscaminas ---------- */ /* Las casillas tapadas son teclitas en relieve hechas con los botones del tema; las descubiertas, la bandeja donde descansan. Los colores de los números se mezclan con el color del texto de la ventana: así se leen en temas claros y oscuros. */ .bm{--cs:30px;--gap:2px;--cols:9;--bm-r:max(0px,min(6px,calc(var(--radius)*.34))); --bm-cov:var(--btn-bg);--bm-cov-l:var(--btn-border);--bm-cov-fg:var(--btn-fg); --bm-open:color-mix(in oklab,var(--win-fg) 11%,var(--cell-bg2));--bm-grid:color-mix(in oklab,var(--win-fg) 12%,transparent); --bm-tint:color-mix(in srgb,var(--accent) 10%,transparent); --bm-flag:var(--accent);--bm-boom:var(--danger); --bm-n1:color-mix(in oklab,#1d4ed8 80%,var(--win-fg));--bm-n2:color-mix(in oklab,#15803d 80%,var(--win-fg));--bm-n3:color-mix(in oklab,#c81e1e 82%,var(--win-fg));--bm-n4:color-mix(in oklab,#6d28d9 80%,var(--win-fg)); --bm-n5:color-mix(in oklab,#b45309 82%,var(--win-fg));--bm-n6:color-mix(in oklab,#0e7490 80%,var(--win-fg));--bm-n7:color-mix(in oklab,#9d174d 70%,var(--win-fg));--bm-n8:color-mix(in oklab,#475569 60%,var(--win-fg)); --bm-p1:color-mix(in oklab,#ff4d4d 85%,var(--win-fg));--bm-p2:color-mix(in oklab,#ff9a2e 85%,var(--win-fg));--bm-p3:color-mix(in oklab,#f2c200 85%,var(--win-fg));--bm-p4:color-mix(in oklab,#2fc06a 85%,var(--win-fg)); --bm-p5:color-mix(in oklab,#1fb5d1 85%,var(--win-fg));--bm-p6:color-mix(in oklab,#4772ff 85%,var(--win-fg));--bm-p7:color-mix(in oklab,#9a63ff 85%,var(--win-fg));--bm-p8:color-mix(in oklab,#f052c0 85%,var(--win-fg)); display:flex;flex-direction:column;gap:10px;min-width:0} .bm.dk{--bm-n1:color-mix(in oklab,#7cb4ff 85%,var(--win-fg));--bm-n2:color-mix(in oklab,#6be38f 85%,var(--win-fg));--bm-n3:color-mix(in oklab,#ff7b7b 85%,var(--win-fg));--bm-n4:color-mix(in oklab,#cfa6ff 85%,var(--win-fg)); --bm-n5:color-mix(in oklab,#ffb862 85%,var(--win-fg));--bm-n6:color-mix(in oklab,#5fe6e6 85%,var(--win-fg));--bm-n7:color-mix(in oklab,#ff94cc 85%,var(--win-fg));--bm-n8:color-mix(in oklab,#d0d8e4 85%,var(--win-fg))} .bm svg{flex:none} .bm .n1{--pc:var(--bm-p1)}.bm .n2{--pc:var(--bm-p2)}.bm .n3{--pc:var(--bm-p3)}.bm .n4{--pc:var(--bm-p4)}.bm .n5{--pc:var(--bm-p5)}.bm .n6{--pc:var(--bm-p6)}.bm .n7{--pc:var(--bm-p7)}.bm .n8{--pc:var(--bm-p8)} /* barra de arriba */ .bm-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px} .bm-diff button{display:grid;justify-items:center;gap:1px;line-height:1.1;padding:4px 12px;min-height:36px} .bm-diff small{font-weight:400;font-size:11px;opacity:.8;font-variant-numeric:tabular-nums} .bm-dsel{display:none} .bm-dsel select,.bm-f select{min-height:36px;padding:0 8px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));font:inherit} .bm-dayb{position:relative} .bm-dayb[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .bm-dayb .bm-ds{display:none} .bm-okm{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-style:normal;font-size:12px;line-height:1} .bm-mode{gap:8px} .bm-mode-t{display:none} .bm-mode svg{width:16px;height:16px} .bm-sw{position:relative;display:inline-block;width:30px;height:18px;border-radius:999px;background:color-mix(in srgb,currentColor 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 35%,transparent);flex:none} .bm-sw::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:currentColor;transition:transform .18s ease} .bm-mode[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .bm-mode[aria-pressed="true"] .bm-sw::after{transform:translateX(12px)} @container (max-width:900px){ .bm-dayb .bm-dl{display:none} .bm-dayb .bm-ds{display:inline} } .bm-friend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border:1px dashed var(--accent);border-radius:max(4px,calc(var(--radius)*.55))} .bm-friend p{margin:0;flex:1 1 260px} .bm-dayi{margin:0;font-size:13px;color:var(--muted)} .bm-dayi b{color:var(--win-fg)} .bm-cus{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2)} .bm-cus .ap-field{width:96px} .bm-cus .hint{flex-basis:100%} /* marcador */ .bm-hud{display:grid;grid-template-columns:1fr auto auto auto 1fr;align-items:center;gap:10px} .bm-hl{display:flex;align-items:center;gap:8px;justify-self:start} .bm-ctr{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:88px;height:40px;padding:0 12px;box-sizing:border-box;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-bg2);font:700 21px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em} .bm-ctr svg{width:18px;height:18px;opacity:.85} .bm-face{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--btn-border);border-radius:max(6px,calc(var(--radius)*.6));background:var(--pri-bg);color:var(--pri-fg);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.18)} .bm-face svg{width:34px;height:34px} .bm-face:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)} .bm-tools{display:flex;align-items:center;gap:6px;justify-self:end} .bm-tools .iconbtn{width:36px;height:36px} .bm-tools .iconbtn:disabled{opacity:.45;cursor:default} .bm-fm{display:none} .bm-fm svg{--bm-flag:currentColor} .bm-fm[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 0 0 2px var(--accent)} .bm-resb{min-height:34px} .bm-opt{position:relative} .bm-opt summary{list-style:none} .bm-opt summary::-webkit-details-marker{display:none} .bm-opt[open] summary{background:var(--pri-bg);color:var(--pri-fg)} .bm-optp{position:absolute;right:0;top:calc(100% + 6px);z-index:8;width:min(320px,calc(100vw - 40px));display:grid;gap:10px;padding:12px;box-sizing:border-box;background:var(--menu-bg);color:var(--menu-fg);border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.6));box-shadow:var(--shadow)} .bm-tg{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .bm-tg input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent);flex:none} .bm-tg span{display:grid;gap:2px} .bm-tg small{font-size:12px;color:var(--muted);line-height:1.35} .bm-zrow{display:none;align-items:center;gap:8px;padding-top:4px;border-top:1px solid var(--cell-line)} .bm-zrow span{flex:1;font-weight:700;font-size:14px} /* tablero */ .bm-stage{position:relative;display:flex;justify-content:center;min-width:0} .bm-scroll{max-width:100%;overflow:auto;overscroll-behavior:contain;border-radius:max(4px,calc(var(--radius)*.6))} .bm-board{position:relative;display:grid;grid-template-columns:repeat(var(--cols),var(--cs));grid-auto-rows:var(--cs);gap:var(--gap);padding:8px;width:max-content;box-sizing:content-box;background:var(--bm-open);border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.6));box-shadow:inset 0 2px 7px rgba(0,0,0,.13);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation} .bm-c{position:relative;display:grid;place-items:center;width:var(--cs);height:var(--cs);margin:0;padding:0;box-sizing:border-box;border:1px solid var(--bm-cov-l);border-radius:var(--bm-r);background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 46%,rgba(0,0,0,.08)),linear-gradient(var(--bm-tint),var(--bm-tint)),var(--bm-cov);color:var(--bm-cov-fg);font:700 calc(var(--cs)*.6)/1 var(--f-title);font-variant-numeric:tabular-nums;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.14)} .bm-c:hover{filter:brightness(1.07)} .bm-c.dn{transform:translateY(1px);filter:brightness(.93);box-shadow:inset 0 2px 4px rgba(0,0,0,.25)} .bm-c.o{background:transparent;border-color:var(--bm-grid);box-shadow:none;color:var(--win-fg);cursor:default;filter:none} .bm-c.o:hover{filter:none} .bm-c.o.n1{color:var(--bm-n1);cursor:pointer}.bm-c.o.n2{color:var(--bm-n2);cursor:pointer}.bm-c.o.n3{color:var(--bm-n3);cursor:pointer}.bm-c.o.n4{color:var(--bm-n4);cursor:pointer} .bm-c.o.n5{color:var(--bm-n5);cursor:pointer}.bm-c.o.n6{color:var(--bm-n6);cursor:pointer}.bm-c.o.n7{color:var(--bm-n7);cursor:pointer}.bm-c.o.n8{color:var(--bm-n8);cursor:pointer} .bm-c svg{width:70%;height:70%;pointer-events:none} .bm-c.f svg{width:76%;height:76%} .bm-c.q{color:var(--muted)} .bm-c.m{color:var(--win-fg);background:color-mix(in oklab,var(--win-fg) 9%,transparent)} .bm-c.x{background:var(--bm-boom);border-color:var(--bm-boom);color:#fff} .bm-c.w::after{content:"";position:absolute;inset:14%;background:linear-gradient(45deg,transparent 43%,var(--danger) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--danger) 43% 57%,transparent 57%)} .bm-c:focus-visible{outline:3px solid var(--focus);outline-offset:-1px;z-index:2} .bm-c.rv{animation:bmRv .2s ease-out} .bm-c.pt svg{animation:bmPt .32s cubic-bezier(.3,1.7,.55,1)} .bm-c.bo{animation:bmBo .45s ease-out} .bm-c.wv{animation:bmWv .5s ease-out} .bm-board.shake{animation:bmSh .38s ease-out} .bm.over .bm-c:not(.o){cursor:default} .bm.pz .bm-board{visibility:hidden} .bm.fmode .bm-c:not(.o){cursor:crosshair} .bm.busy .bm-board{cursor:progress} .bm.busy .bm-c{cursor:progress;animation:bmBusy 1s ease-in-out infinite alternate} @keyframes bmBusy{to{filter:brightness(1.12)}} @keyframes bmRv{from{transform:scale(.6);opacity:.25}to{transform:none;opacity:1}} @keyframes bmPt{from{transform:translateY(-35%) scale(.3);opacity:0}} @keyframes bmBo{0%{transform:scale(1.35);filter:brightness(1.6)}100%{transform:none}} @keyframes bmWv{0%{filter:none}35%{filter:brightness(1.35) saturate(1.3);box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--accent) 22%,transparent)}100%{filter:none}} @keyframes bmSh{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}} /* caja de música: púas, línea de lectura y registros */ .bm.mus .bm-c.o[class*=" n"]{line-height:.9;padding-bottom:9%} .bm.mus .bm-c.o[class*=" n"]::before{content:"";position:absolute;left:24%;right:24%;bottom:9%;height:max(3px,11%);border-radius:999px;background:var(--pc);opacity:.95} .bm.mus .bm-c.pl{animation:bmPl .42s ease-out} .bm.mus .bm-c.o.pl::before{animation:bmPd .42s ease-out} .bm.mus .bm-c.f.pl svg{animation:bmPf .3s ease-out} @keyframes bmPl{0%{background:color-mix(in srgb,var(--pc,var(--accent)) 42%,transparent);transform:scale(1.1)}100%{transform:none}} @keyframes bmPd{0%{transform:scaleX(1.9) scaleY(1.6);filter:brightness(1.5)}100%{transform:none}} @keyframes bmPf{0%{transform:translateY(-14%) rotate(-8deg)}100%{transform:none}} .bm-ph{position:absolute;left:0;top:0;z-index:3;pointer-events:none;opacity:0;border-radius:var(--bm-r);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 26%,transparent) 30% 70%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 80%,transparent),0 0 18px 3px color-mix(in srgb,var(--accent) 45%,transparent);transition:opacity .25s;will-change:transform} .bm-ph.h{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 26%,transparent) 30% 70%,transparent)} .bm-ph.on{opacity:1} .bm-band{position:absolute;left:8px;right:8px;height:2px;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 6px,transparent 6px 11px);opacity:.75} .bm-band.v{left:auto;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 6px,transparent 6px 11px)} .bm-bar{position:absolute;top:8px;bottom:8px;width:2px;z-index:1;pointer-events:none;background:color-mix(in srgb,var(--win-fg) 30%,transparent);border-radius:2px} .bm-bar.h{top:auto;bottom:auto;left:8px;right:8px;width:auto;height:2px} .bm-chord{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--pri-bg);color:var(--pri-fg);font-weight:700;font-size:12px;white-space:nowrap} .bm.mus .bm-board{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 7%,var(--bm-open)),var(--bm-open) 40%,color-mix(in oklab,var(--win-fg) 4%,var(--bm-open)));box-shadow:inset 0 2px 7px rgba(0,0,0,.13),inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)} .bm-main{display:flex;flex-direction:column;gap:10px;min-width:0} .bm.side .bm-main{display:grid;grid-template-columns:minmax(0,1fr) 272px;align-items:start;gap:14px} .bm-mu{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2);min-width:0} .bm.side .bm-mu{gap:10px;padding:12px} .bm.side .bm-mur{flex-direction:column;align-items:stretch;gap:8px} .bm.side .bm-mur>.btn{justify-content:center} .bm.side .bm-f{justify-content:space-between} .bm.side .bm-f select{flex:1;max-width:170px} .bm.side .bm-tempo input{flex:1;width:auto;min-width:0} .bm-mur{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .bm-mup{min-width:112px} .bm-f{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700} .bm-tempo input{width:110px;margin:0;accent-color:var(--accent)} .bm-tempo output{min-width:3ch;font-variant-numeric:tabular-nums} .bm-leg{display:flex;flex-wrap:wrap;gap:5px} .bm-chip{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 9px 0 4px;border:1px solid var(--cell-line);border-radius:999px;background:var(--cell-bg);color:var(--win-fg);font:inherit;font-size:12px;cursor:pointer} .bm-chip b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--pc);color:#141414;font:700 12px/1 var(--f-title)} .bm-chip.pl{animation:bmPl .42s ease-out} .bm-muh{line-height:1.4} /* pausa y resultado */ .bm-pz{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:12px} .bm-pzc{display:grid;justify-items:center;gap:8px;max-width:340px;padding:18px;text-align:center;border:1px solid var(--cell-line);border-radius:var(--radius);background:linear-gradient(var(--cell-bg2),var(--cell-bg2)),linear-gradient(var(--win-bg),var(--win-bg)),var(--bg)} .bm-pzc h3{margin:0;font-family:var(--f-title);font-size:24px} .bm-cardw{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:12px;background:color-mix(in srgb,var(--win-bg) 45%,transparent);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);border-radius:max(4px,calc(var(--radius)*.6));overflow:auto} .bm-card{position:relative;width:min(430px,100%);display:flex;flex-direction:column;gap:8px;padding:18px;box-sizing:border-box;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:linear-gradient(var(--win-bg),var(--win-bg)),var(--bg);color:var(--win-fg);box-shadow:var(--shadow);animation:bmCard .28s cubic-bezier(.2,1.2,.4,1)} .bm-card h3{margin:0;padding-right:36px;font-family:var(--f-title);font-size:26px;line-height:1.1} .bm-card p{margin:0} .bm-card.won h3{color:var(--accent)} .bm-ck{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .bm-big{font:700 clamp(30px,6cqw,44px)/1 var(--f-mono);font-variant-numeric:tabular-nums} .bm-rec{color:var(--accent)} .bm-mumsg{padding:8px 10px;border-radius:max(4px,calc(var(--radius)*.45));background:var(--cell-play);font-weight:700} .bm-cx{position:absolute;top:10px;right:10px;width:34px;height:34px} .bm-cact,.bm-cmu{margin-top:2px} .bm-out:empty{display:none} @keyframes bmCard{from{transform:translateY(14px) scale(.96);opacity:0}} .bm-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px} .bm-tip{flex:1 1 260px;min-width:0;line-height:1.4} .bm-tip:empty{display:none} .bm-rules summary{cursor:pointer;font-weight:700;white-space:nowrap} .bm-rules[open]{flex-basis:100%} .bm-rules ol{margin:8px 0 6px;padding-left:22px;display:grid;gap:4px;font-size:14px;max-width:72ch} .bm-rules .hint{margin-top:4px;max-width:80ch} /* temas con personalidad propia */ :is([data-os="ochobits"],[data-os="maquinita"],[data-os="chiptunia"],[data-os="bolsillo"]) .bm-c:not(.o){box-shadow:inset 2px 2px 0 rgba(255,255,255,.38),inset -2px -2px 0 rgba(0,0,0,.35)} :is([data-os="ochobits"],[data-os="maquinita"],[data-os="chiptunia"],[data-os="bolsillo"]) .bm-c{font-size:calc(var(--cs)*.5)} [data-os="altocontraste"] .bm{--bm-open:#000;--bm-grid:#5a5a5a;--bm-n1:#6cf;--bm-n2:#6f6;--bm-n3:#f77;--bm-n4:#f8f;--bm-n5:#fb4;--bm-n6:#4ff;--bm-n7:#fff;--bm-n8:#ccc} [data-os="altocontraste"] .bm-c:not(.o){border-width:2px;border-color:#fff;background:#262626;box-shadow:none} [data-os="altocontraste"] .bm-board{border-color:#fff} [data-os="cyberpunk"] .bm-c:not(.o){box-shadow:inset 0 0 0 1px rgba(0,240,255,.15),0 0 6px rgba(0,240,255,.12)} /* celular y ventanas angostas */ @media (max-width:720px){ .bm{gap:8px} .bm-diff{display:none} .bm-dsel{display:block;flex:1 1 150px;min-width:0} .bm-dsel select{width:100%} .bm-dayb .bm-dl{display:none} .bm-dayb .bm-ds{display:inline} .bm-mode-t{display:inline-flex} .bm-mode-h{display:none} .bm-hud{position:sticky;top:-16px;z-index:6;margin:0 -16px;padding:6px 16px;grid-template-columns:auto 1fr auto 1fr auto;gap:6px;background:var(--win-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--cell-line)} .bm-hud .bm-ctr:nth-of-type(1){justify-self:end} .bm-hud .bm-ctr:nth-of-type(2){justify-self:start} .bm-ctr{min-width:0;height:36px;padding:0 8px;font-size:17px;gap:4px} .bm-ctr svg{width:15px;height:15px} .bm-face{width:42px;height:42px} .bm-tools{gap:4px} .bm-tools .iconbtn{width:34px;height:34px} .bm-tools>[data-bma="zo"],.bm-tools>[data-bma="zi"]{display:none} .bm-zrow{display:flex} .bm-fm{display:grid} .bm-mu{padding:8px} .bm-f{flex:1 1 140px} .bm-f select{flex:1;min-width:0} .bm-tempo input{flex:1;min-width:0;width:auto} .bm-cus .ap-field{width:calc(33% - 8px);min-width:70px} } @media (pointer:coarse){ .bm-fm{display:grid} .bm-c:hover{filter:none} } /* pantalla completa */ .win.fw .bm{margin-inline:auto;width:100%} @media (prefers-reduced-motion:reduce){ .bm-c.rv,.bm-c.pt svg,.bm-c.bo,.bm-c.wv,.bm-board.shake,.bm.mus .bm-c.pl,.bm.mus .bm-c.o.pl::before,.bm.mus .bm-c.f.pl svg,.bm-card,.bm-chip.pl{animation:none} .bm-ph{transition:none} .bm.mus .bm-c.pl{background:color-mix(in srgb,var(--pc,var(--accent)) 30%,transparent)} } /* ---------- Eco melódico ---------- */ /* Todo sale de las variables del tema; las teclas del piano conservan su blanco y negro, entintados con el acento, y los botones de colores mezclan su matiz con el texto de la ventana para leerse en temas claros y oscuros. */ .sm{--sm-r:max(4px,calc(var(--radius)*.6));--sm-line:var(--cell-line);--sm-soft:color-mix(in oklab,var(--accent) 12%,var(--cell-bg2)); --sm-wk:color-mix(in oklab,var(--accent) 5%,#fbfbf8);--sm-wk2:color-mix(in oklab,var(--accent) 12%,#e9e8e2);--sm-bk:color-mix(in oklab,var(--accent) 14%,#24242a);--sm-bk2:color-mix(in oklab,var(--accent) 8%,#0d0d11); display:flex;flex-direction:column;gap:12px;min-width:0;position:relative} .sm svg{flex:none} .sm h3,.sm h4{margin:0;font-family:var(--f-title)} /* menú: biblioteca de canciones */ .sm-hero{display:flex;align-items:center;gap:14px} .sm-hero>div{flex:1;min-width:0} .sm-hero h3{font-size:24px;line-height:1.1} .sm-hero p{margin:3px 0 0;color:var(--muted);line-height:1.4;max-width:62ch} .sm-logo{display:grid;place-items:center;width:54px;height:54px;border-radius:var(--sm-r);background:radial-gradient(circle at 30% 25%,color-mix(in oklab,var(--accent) 70%,#fff),var(--accent) 60%,color-mix(in oklab,var(--accent) 70%,#000));color:var(--accent-fg);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent);flex:none} .sm-logo svg{width:32px;height:32px} .sm-lib{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start} .sm-list{display:flex;flex-direction:column;gap:10px;min-width:0} .sm-seg{flex-wrap:wrap;width:max-content;max-width:100%} .sm-seg button{min-height:34px} .sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:8px} .sm-song{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:10px 12px 9px;text-align:left;border:1px solid var(--sm-line);border-radius:var(--sm-r);background:var(--cell-bg);color:var(--win-fg);font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s} .sm-song:hover{border-color:var(--accent)} .sm-song[aria-pressed="true"]{border-color:var(--accent);background:var(--sm-soft);box-shadow:inset 0 0 0 1px var(--accent)} .sm-song b{font-size:14px;line-height:1.2} .sm-song small{font-size:12px;color:var(--muted);line-height:1.25} .sm-song:focus-visible{outline:3px solid var(--focus);outline-offset:2px} .sm-spark{width:100%;height:26px;margin-bottom:4px;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;opacity:.9} .sm-meta{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:4px} .sm-lvd{display:inline-flex;gap:3px} .sm-lvd i{width:7px;height:7px;border-radius:50%;background:color-mix(in oklab,var(--accent) 70%,var(--win-fg))} .sm-stars{display:inline-flex;gap:1px;color:color-mix(in oklab,var(--win-fg) 22%,transparent)} .sm-stars i{display:grid} .sm-stars svg{width:14px;height:14px} .sm-stars i.y{color:#f2b600;color:color-mix(in oklab,#f2b600 82%,var(--win-fg))} .sm-stars.big svg{width:38px;height:38px} .sm-stars.big{gap:6px;margin:4px 0} .sm-det{position:sticky;top:0;display:flex;flex-direction:column;gap:11px;padding:14px;border:1px solid var(--sm-line);border-radius:var(--radius);background:var(--cell-bg2)} .sm-det-h .sm-spark{height:30px;stroke-width:4} .sm-det h4{font-size:20px;line-height:1.15} .sm-by{margin:4px 0 0;font-size:13px;color:var(--muted)} .sm-note{margin:8px 0 0;line-height:1.4;font-size:14px} .sm-rec{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;color:var(--muted)} .sm-opt{display:grid;gap:6px} .sm-ol{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .sm-opt .seg{width:100%} .sm-opt .seg button{flex:1 1 auto;padding:4px 8px} .sm-md,.sm-opt .hint{margin:0;line-height:1.35} .sm-tgs{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center} .sm-spd{display:flex;align-items:center;gap:8px;flex:1 1 100%;font-size:14px;font-weight:700} .sm-spd input{flex:1;min-width:0;accent-color:var(--accent)} .sm-spd output{min-width:4.5ch;text-align:right;font-variant-numeric:tabular-nums;font-weight:400} .sm-go{display:flex;flex-wrap:wrap;gap:8px} .sm-go .btn{flex:1 1 auto} .sm-tb{display:flex} .sm-tb .mtx-tb{flex:1;min-width:0} .sm-start{font-size:16px;min-height:42px} /* chip de MIDI */ .sm-midi{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 8px;border:1px solid var(--sm-line);border-radius:999px;background:var(--cell-bg);color:var(--win-fg);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;flex:none} .sm-midi svg{width:16px;height:16px} .sm-midi>i{width:8px;height:8px;border-radius:50%;background:color-mix(in oklab,var(--win-fg) 35%,transparent);flex:none} .sm-midi[data-st="on"]>i{background:#2fc06a;box-shadow:0 0 0 3px color-mix(in srgb,#2fc06a 25%,transparent)} .sm-midi[data-st="none"]>i,.sm-midi[data-st="wait"]>i{background:#f2b600} .sm-midi[data-st="no"],.sm-midi[data-st="deny"]{color:var(--muted);cursor:default} .sm-midi[data-st="wait"]>i{animation:smBlink 1s ease-in-out infinite alternate} @keyframes smBlink{to{opacity:.25}} /* juego */ .sm-game{min-height:0} .sm-hud{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;gap:8px 12px} .sm-back{width:36px;height:36px} .sm-back svg{width:20px;height:20px} .sm-orb{position:relative;display:grid;place-items:center;width:52px;height:52px;--p:0} .sm-orb svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .sm-orb circle{fill:none;stroke-width:4} .sm-orb-t{stroke:color-mix(in oklab,var(--win-fg) 14%,transparent)} .sm-orb-p{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:calc(var(--p) * 1) 100;transition:stroke-dasharray .35s ease} .sm-orb b{font:700 19px/1 var(--f-title);font-variant-numeric:tabular-nums} .sm-orb::after{content:"";position:absolute;inset:6px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s} .sm-orb[data-k="listen"]::after{opacity:1;transform:none;animation:smEcho 1.1s ease-out infinite} .sm-orb[data-k="turn"]::after{opacity:.55;transform:none} .sm-orb[data-k="bad"]::after{opacity:1;transform:none;background:color-mix(in srgb,var(--danger) 26%,transparent)} .sm-orb.pop{animation:smPop .45s cubic-bezier(.3,1.6,.5,1)} @keyframes smEcho{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 0%,transparent)}} @keyframes smPop{40%{transform:scale(1.16)}} .sm-info{display:grid;gap:2px;min-width:0} .sm-tt{font-family:var(--f-title);font-size:18px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sm-info>span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .sm-st{margin:0;padding:6px 12px;border-radius:999px;font-weight:700;font-size:14px;white-space:nowrap;background:var(--cell-bg2);border:1px solid var(--sm-line);min-width:8ch;text-align:center} .sm-st[data-k="turn"]{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .sm-st[data-k="ok"],.sm-st[data-k="won"]{background:color-mix(in oklab,#2fc06a 22%,var(--cell-bg2));border-color:color-mix(in oklab,#2fc06a 55%,var(--sm-line))} .sm-st[data-k="bad"],.sm-st[data-k="over"]{background:color-mix(in oklab,var(--danger) 18%,var(--cell-bg2));border-color:color-mix(in oklab,var(--danger) 55%,var(--sm-line))} .sm-st:empty{visibility:hidden} .sm-side{display:flex;align-items:center;gap:10px} .sm-lives{display:inline-flex;gap:2px} .sm-lives i{display:grid;color:color-mix(in oklab,var(--win-fg) 20%,transparent);transition:color .2s,transform .2s} .sm-lives i.y{color:var(--danger)} .sm-lives svg{width:20px;height:20px} .sm-combo{display:grid;justify-items:center;line-height:1} .sm-combo small{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .sm-combo b{font:700 20px/1 var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums} .sm-tools{display:flex;align-items:center;gap:6px} .sm-tools .iconbtn{width:36px;height:36px} .sm-rep:disabled{opacity:.45;cursor:default} /* cinta de la melodía */ .sm-ribbon{position:relative;height:92px;border:1px solid var(--sm-line);border-radius:var(--sm-r);overflow:hidden; background:repeating-linear-gradient(180deg,transparent 0 17px,color-mix(in oklab,var(--win-fg) 6%,transparent) 17px 18px),linear-gradient(180deg,var(--cell-bg2),color-mix(in oklab,var(--accent) 6%,var(--cell-bg2)))} .sm-rb-in{position:absolute;inset:10px 10px 8px} .sm-rn{position:absolute;left:var(--x);width:var(--w);top:calc((100% - 15px) * var(--y));height:15px;min-width:4px;display:grid;place-items:center;overflow:hidden;border-radius:999px; --c:color-mix(in oklab,oklch(.6 .15 var(--h)) 84%,var(--win-fg));background:var(--c);color:#fff;transition:top .3s cubic-bezier(.3,1.4,.5,1),opacity .25s,background .2s} .sm-rn b{font:700 10px/1 var(--f-ui);white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.35);pointer-events:none} .sm-rn.hid{top:auto;bottom:0;height:5px;background:color-mix(in oklab,var(--win-fg) 26%,transparent)} .sm-rn.nx{background:color-mix(in oklab,var(--accent) 70%,transparent);height:7px} .sm-rn.now{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 40%,transparent)} .sm-rn.on{box-shadow:0 0 12px 2px var(--c),0 0 0 2px #fff;filter:brightness(1.18);z-index:1} .sm-rn.hid.on{background:var(--accent);box-shadow:0 0 10px 2px var(--accent)} .sm-head{position:absolute;top:0;bottom:0;left:calc(10px + (100% - 20px) * var(--pf,0));width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:0;pointer-events:none;transition:opacity .3s} .sm-head.on{opacity:.9} /* zona de juego */ .sm-stage{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-height:0} .sm-stage:has(.sm-cardw:not([hidden])){min-height:340px} .sm-input{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;outline:none;border-radius:var(--sm-r)} .sm-input.shake{animation:smSh .34s ease-out} @keyframes smSh{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}} .sm-kh{margin:0;line-height:1.35} /* piano */ .sm-piano{flex:1 1 auto;display:flex;height:clamp(170px,36vh,300px);padding:10px 10px 12px;box-sizing:border-box;border-radius:var(--sm-r); background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 22%,#16161b),color-mix(in oklab,var(--accent) 10%,#0b0b0e));box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.22)} .sm-keys{position:relative;flex:1;display:flex;gap:2px;min-width:0} .sm-k{position:relative;margin:0;padding:0;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none} .sm-k.w{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding-bottom:10px;border-radius:0 0 max(3px,calc(var(--radius)*.4)) max(3px,calc(var(--radius)*.4)); background:linear-gradient(180deg,var(--sm-wk2),var(--sm-wk) 12%,var(--sm-wk) 88%,var(--sm-wk2));color:#3a3a40;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.4)} .sm-k.b{position:absolute;top:0;z-index:2;height:60%;width:calc(100% / var(--nw) * .62);left:calc(100% / var(--nw) * var(--x) - 100% / var(--nw) * .31 - 1px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding-bottom:7px;box-sizing:border-box; border-radius:0 0 max(2px,calc(var(--radius)*.3)) max(2px,calc(var(--radius)*.3));background:linear-gradient(180deg,var(--sm-bk2),var(--sm-bk) 85%,color-mix(in oklab,var(--sm-bk) 70%,#555));color:#e8e8ee;box-shadow:inset 0 -4px 0 rgba(255,255,255,.08),0 3px 5px rgba(0,0,0,.45)} .sm-k b{font:700 clamp(10px,1.3vw,14px)/1 var(--f-ui);pointer-events:none} .sm-k.b b{font-size:clamp(8px,1vw,11px)} .sm-k kbd{display:grid;place-items:center;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;border-radius:4px;font:700 11px/1 var(--f-mono);background:rgba(0,0,0,.07);color:inherit;opacity:.75;pointer-events:none} .sm-k.b kbd{background:rgba(255,255,255,.12);min-width:16px;height:16px;font-size:10px} .sm-k i{position:absolute;top:6px;font:400 10px/1 var(--f-mono);font-style:normal;opacity:.45;pointer-events:none} .sm-k:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;z-index:3} .sm-k.w.lit,.sm-k.w.on{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 60%,#fff),color-mix(in oklab,var(--accent) 38%,#fff));box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 0 22px 3px color-mix(in srgb,var(--accent) 55%,transparent);z-index:1} .sm-k.b.lit,.sm-k.b.on{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 70%,#000),var(--accent));box-shadow:0 0 18px 3px color-mix(in srgb,var(--accent) 60%,transparent)} .sm-k.on{transform:translateY(2px)} .sm-k.w.ok{background:linear-gradient(180deg,color-mix(in oklab,#2fc06a 55%,#fff),color-mix(in oklab,#2fc06a 35%,#fff))} .sm-k.b.ok{background:linear-gradient(180deg,color-mix(in oklab,#2fc06a 60%,#000),#2fc06a)} .sm-k.bad{background:linear-gradient(180deg,color-mix(in oklab,var(--danger) 70%,#fff),var(--danger))!important;color:#fff} .sm-k.hint{animation:smHint .9s ease-in-out;outline:3px dashed var(--accent);outline-offset:-4px} @keyframes smHint{0%,100%{filter:none}50%{filter:brightness(1.25) saturate(1.3)}} /* botones de colores */ .sm-pads{flex:1 1 auto;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:minmax(72px,1fr);gap:10px;height:clamp(200px,40vh,380px)} .sm-pad{position:relative;display:grid;place-items:center;align-content:center;gap:4px;margin:0;padding:8px;border:0;border-radius:max(10px,var(--radius));cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none; --c:color-mix(in oklab,oklch(.62 .16 var(--h)) 86%,var(--win-fg));background:radial-gradient(circle at 50% 30%,color-mix(in oklab,var(--c) 75%,#fff),var(--c) 70%);color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.18);transition:transform .12s,filter .12s,box-shadow .12s} .sm-pad svg{width:clamp(26px,38%,64px);height:auto;max-height:55%;opacity:.92;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))} .sm-pad b{font:700 clamp(13px,1.6vw,18px)/1 var(--f-title);text-shadow:0 1px 2px rgba(0,0,0,.35)} .sm-pad kbd{position:absolute;top:7px;left:9px;font:700 11px/1 var(--f-mono);opacity:.75} .sm-pad:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .sm-pad.lit,.sm-pad.on{filter:brightness(1.3) saturate(1.15);transform:scale(1.04);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 26px 6px color-mix(in srgb,var(--c) 70%,transparent)} .sm-pad.on{transform:scale(.97)} .sm-pad.bad{background:var(--danger)} .sm-pad.hint{animation:smHint .9s ease-in-out;outline:4px dashed var(--win-fg);outline-offset:3px} .sm-game.ear .sm-rn.rv b{visibility:hidden} /* resultado */ .sm-cardw{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:10px;background:color-mix(in srgb,var(--win-bg) 55%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:var(--sm-r);overflow:auto} .sm-card{width:min(540px,100%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 18px;box-sizing:border-box;text-align:center;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:linear-gradient(var(--win-bg),var(--win-bg)),var(--bg);color:var(--win-fg);box-shadow:var(--shadow);animation:smCard .3s cubic-bezier(.2,1.2,.4,1)} .sm-card h3{font-size:26px;line-height:1.1} .sm-card.won h3{color:var(--accent)} .sm-card p{margin:0;line-height:1.4} .sm-ck{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .sm-newrec{padding:4px 12px;border-radius:999px;background:var(--cell-play);font-weight:700} .sm-cact{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px} .sm-cact .btn{min-height:34px;padding:0 12px} .sm-card.won .sm-stars i.y{animation:smStar .5s cubic-bezier(.3,1.7,.5,1) backwards} .sm-card.won .sm-stars i:nth-child(2){animation-delay:.15s}.sm-card.won .sm-stars i:nth-child(3){animation-delay:.3s} @keyframes smStar{from{transform:scale(0) rotate(-40deg);opacity:0}} @keyframes smCard{from{transform:translateY(14px) scale(.96);opacity:0}} /* temas con personalidad propia */ :is([data-os="ochobits"],[data-os="maquinita"],[data-os="chiptunia"],[data-os="bolsillo"]) .sm-pad{border-radius:0;box-shadow:inset 3px 3px 0 rgba(255,255,255,.35),inset -3px -3px 0 rgba(0,0,0,.3)} :is([data-os="ochobits"],[data-os="maquinita"],[data-os="chiptunia"],[data-os="bolsillo"]) :is(.sm-rn,.sm-midi,.sm-st){border-radius:0} :is([data-os="ochobits"],[data-os="maquinita"],[data-os="chiptunia"],[data-os="bolsillo"]) .sm-orb-p{stroke-linecap:butt} [data-os="altocontraste"] .sm{--sm-wk:#fff;--sm-wk2:#fff;--sm-bk:#000;--sm-bk2:#000;--sm-line:#fff} [data-os="altocontraste"] .sm-k.w{border:2px solid #000;color:#000} [data-os="altocontraste"] .sm-k.b{border:2px solid #fff} [data-os="altocontraste"] .sm-piano{background:#000;border:2px solid #fff} [data-os="altocontraste"] .sm-k.lit,[data-os="altocontraste"] .sm-k.on{background:#ff0!important;color:#000} [data-os="altocontraste"] .sm-pad{border:3px solid #fff} [data-os="altocontraste"] .sm-rn{border:2px solid #fff} [data-os="cyberpunk"] .sm-pad.lit,[data-os="cyberpunk"] .sm-pad.on{box-shadow:0 0 30px 8px var(--c),inset 0 0 0 2px #fff} /* pantalla completa: el piano o los botones crecen */ .win.fw .sm-game{min-height:100%;max-width:1600px;margin-inline:auto;width:100%} .win.fw :is(.sm-piano,.sm-pads){height:auto;min-height:220px} .win.fw .sm-ribbon{height:130px} .win.fw .sm-rn{height:18px;top:calc((100% - 18px) * var(--y))} /* celular y ventanas angostas */ @media (max-width:860px){ .sm-lib{grid-template-columns:minmax(0,1fr) 290px} } @media (max-width:720px){ .sm{gap:10px} .sm-hero{flex-wrap:wrap;gap:8px 12px} .sm-hero>div{flex:1 1 calc(100% - 60px)} .sm-hero h3{font-size:21px} .sm-hero p{font-size:14px} .sm-logo{width:44px;height:44px} .sm-lib{grid-template-columns:minmax(0,1fr);gap:12px} .sm-det{position:static;padding:12px} .sm-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 -16px;padding:2px 16px 8px;scroll-padding:0 16px;overscroll-behavior-x:contain} .sm-song{flex:0 0 min(64vw,220px);scroll-snap-align:start;padding:8px 10px} .sm-game{min-height:100%} .sm-hud{grid-template-columns:auto auto minmax(0,1fr) auto;gap:8px} .sm-info{grid-column:3 / 5} .sm-st{grid-column:1 / 3;grid-row:2;justify-self:start;font-size:13px;padding:5px 10px} .sm-side{grid-column:3;grid-row:2;justify-self:end} .sm-tools{grid-column:4;grid-row:2} .sm-tools .sm-midi span{display:none} .sm-tools .sm-midi{padding:0 8px} .sm-rep span{display:none} .sm-rep{min-height:36px;padding:0 9px} .sm-orb{width:44px;height:44px} .sm-tt{font-size:16px} .sm-ribbon{height:auto;flex:1 1 76px;min-height:76px;max-height:190px} .sm-stage{flex:0 0 auto} .sm-game:has(.sm-pads) .sm-stage{flex:1 1 auto} .sm-game:has(.sm-pads) .sm-ribbon{flex:0 0 76px} .sm-kh{display:none} .sm-piano{padding:8px 6px 10px;height:clamp(220px,40vh,330px);flex:0 0 auto} .sm-k kbd{display:none} .sm-pads{gap:8px;height:auto;min-height:240px} } @media (pointer:coarse){ .sm-k kbd,.sm-pad kbd{display:none} .sm-song:hover{border-color:var(--sm-line)} .sm-song[aria-pressed="true"]:hover{border-color:var(--accent)} } @media (prefers-reduced-motion:reduce){ .sm-orb[data-k="listen"]::after,.sm-orb.pop,.sm-input.shake,.sm-k.hint,.sm-pad.hint,.sm-card,.sm-card.won .sm-stars i.y,.sm-midi[data-st="wait"]>i{animation:none} .sm-rn,.sm-orb-p,.sm-song,.sm-pad,.sm-lives i{transition:none} .sm-pad.lit,.sm-pad.on{transform:none} } /* ---------- 1.17.61 · teléfono acostado: el menú cabe sin bajar (pendiente de la 1.17.41) ---------- Con 520 px de alto o menos el menú se queda del alto de la pantalla (--fw-h): un encabezado de un renglón y, abajo, dos columnas: las canciones (se desplazan dentro, en tarjetas más bajas) y el detalle de la elegida con «Empezar» arriba (sus opciones se desplazan dentro). smMenu conserva dónde iba cada lista al volver a dibujarse. Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .sm.sm-menu{height:var(--fw-h,calc(100dvh - 56px));box-sizing:border-box;gap:8px;display:grid;grid-template-rows:auto minmax(0,1fr)} .sm-menu .sm-hero{flex-wrap:nowrap;gap:10px} .sm-menu .sm-hero>div{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:10px} .sm-menu .sm-logo{width:34px;height:34px} .sm-menu .sm-logo svg{width:22px;height:22px} .sm-menu .sm-hero h3{font-size:19px;white-space:nowrap} .sm-menu .sm-hero p{margin:0;min-width:0;font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .sm-menu .sm-midi{min-height:30px} .sm-menu .sm-lib{grid-template-columns:minmax(0,1fr) minmax(250px,42%);gap:12px;align-items:stretch;min-height:0} .sm-menu .sm-list{min-height:0;gap:6px} .sm-menu .sm-seg button{min-height:30px;padding:0 10px;font-size:13px} .sm-menu .sm-grid{display:grid;flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-content:start;gap:6px;margin:0;padding:2px 2px 6px;scroll-snap-type:none;overscroll-behavior:contain} .sm-menu .sm-song{flex:none;padding:6px 9px 6px;scroll-snap-align:none} .sm-menu .sm-song .sm-spark{height:18px;margin-bottom:2px} .sm-menu .sm-song b{font-size:13px} .sm-menu .sm-song small{font-size:11.5px} .sm-menu .sm-det{position:static;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 12px;gap:9px} .sm-menu .sm-det-h .sm-spark{height:20px} .sm-menu .sm-det h4{font-size:17px} .sm-menu .sm-by{margin-top:2px;font-size:12px} .sm-menu .sm-note{margin-top:4px;font-size:12.5px;line-height:1.35} .sm-menu .sm-rec{margin-top:4px;font-size:12px} .sm-menu .sm-go .btn{min-height:36px} .sm-menu .sm-start{font-size:15px;min-height:38px} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .sm-menu .sm-hero p{display:none} .sm-menu .sm-lib{grid-template-columns:minmax(0,1fr) minmax(0,50%);gap:10px} .sm-menu .sm-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))} .sm-menu .sm-seg button{padding:0 8px;font-size:12.5px} .sm-menu .sm-det{padding:8px 10px} .sm-menu .sm-det-h .sm-spark{display:none} } /* ===== 1.17.1 · Blackjack (blackjack.js): una mesa de paño con baranda de madera ===== */ .bj{--cw:clamp(54px,7.2vw,84px);display:flex;flex-direction:column;gap:10px} .bj-top{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap} .bj-wal{display:inline-flex;align-items:center;gap:8px;padding:3px 14px 3px 3px;border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);border:1px solid color-mix(in srgb,currentColor 16%,transparent)} .bj-wal svg{width:32px;height:32px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} .bj-wal span{display:flex;flex-direction:column;line-height:1.05} .bj-wal small{font-size:11px;opacity:.75} .bj-wal b{font-size:19px;font-variant-numeric:tabular-nums} .bj-wal.prac{border-style:dashed} .bj-stat{font-size:13px;opacity:.75;font-variant-numeric:tabular-nums} .bj-sw{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:4px 12px 4px 4px;border:1px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:999px;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer} .bj-knob{position:relative;width:32px;height:18px;border-radius:999px;background:color-mix(in srgb,currentColor 26%,transparent);transition:background .15s ease} .bj-knob::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s ease} .bj-sw[aria-checked="true"] .bj-knob{background:var(--accent,#3d9a5f)} .bj-sw[aria-checked="true"] .bj-knob::after{transform:translateX(14px)} .bj-sw:focus-visible{outline:2px solid var(--focus,#fff);outline-offset:2px} /* la mesa */ .bj-table{padding:12px 14px 16px} .bj-felt{position:relative;display:flex;flex-direction:column;align-items:center;min-height:clamp(390px,54vh,520px);padding:16px 14px 30px;box-sizing:border-box; border-radius:24px 24px 50% 50% / 24px 24px 24% 24%; background:radial-gradient(120% 95% at 50% -6%,#2f9461 0%,#1f7049 40%,#114a2f 78%,#0c3a24 100%); box-shadow:inset 0 0 0 2px rgba(0,0,0,.22),inset 0 40px 70px -30px rgba(0,0,0,.35),inset 0 -30px 60px -40px rgba(0,0,0,.5), 0 0 0 9px #6b3f1c,0 0 0 11px #3c220d,0 0 0 12px rgba(255,214,150,.25),0 22px 44px -10px rgba(0,0,0,.55); color:#f6ecd4;isolation:isolate} .bj-felt::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:.5;pointer-events:none; background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.025) 2px 4px)} .bj-shoe{position:absolute;top:14px;right:22px;width:calc(var(--cw) * .74);aspect-ratio:100/140;border-radius:8%;transform:rotate(9deg); box-shadow:2px 2px 0 #efe7d4,4px 4px 0 #ddd3bd,6px 6px 0 #cbbfa6,9px 10px 0 #2a170a,0 14px 22px rgba(0,0,0,.4)} .bj-shoe svg{display:block;width:100%;height:100%} .bj-tray{position:absolute;top:16px;left:22px;width:calc(var(--cw) * .9);height:calc(var(--cw) * .62);border-radius:10px;border:2px solid rgba(233,201,122,.32);background:rgba(0,0,0,.12)} .bj-dealer{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:calc(var(--cw) * 1.4 + 30px)} .bj-who{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75} .bj-cards{display:flex;justify-content:center;min-height:calc(var(--cw) * 1.4);perspective:900px} .bj-card{position:relative;flex:none;width:var(--cw);aspect-ratio:100/140;border-radius:7%;box-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 18px -8px rgba(0,0,0,.55)} .bj-card svg{display:block;width:100%;height:100%} .bj-cards .bj-card+.bj-card{margin-left:calc(var(--cw) * -.46)} .bj-dealer .bj-cards .bj-card+.bj-card{margin-left:calc(var(--cw) * -.3)} .bj-card.in{animation:bj-in .44s cubic-bezier(.2,.8,.25,1) both} .bj-card.flip{animation:bj-flip .34s cubic-bezier(.3,.7,.3,1) both} @keyframes bj-in{from{transform:translate(var(--fx,0),var(--fy,0)) rotate(-14deg) scale(.86);opacity:.5}to{transform:none;opacity:1}} @keyframes bj-flip{from{transform:rotateY(88deg)}to{transform:none}} .bj-dealer .bj-tot,.bj-under .bj-tot{min-width:30px;padding:2px 9px;border-radius:999px;background:rgba(6,20,12,.62);color:#fff;font-weight:700;font-size:14px;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px rgba(233,201,122,.35)} .bj-print{display:block;width:min(560px,92%);margin:-2px 0 0;pointer-events:none} .bj-msg{min-height:1.4em;margin:2px 0 6px;max-width:44ch;text-align:center;font-weight:600;font-size:15px;line-height:1.35;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.5)} .bj-hands{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px clamp(10px,3vw,30px);margin-top:auto} .bj-hand{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px 6px;border-radius:16px;transition:background .2s ease,box-shadow .2s ease} .bj-hand.act{background:rgba(255,232,160,.08);box-shadow:0 0 0 2px rgba(255,218,120,.6)} .bj-under{display:flex;align-items:center;gap:8px;min-height:62px} .bj-circle{position:relative;display:grid;place-items:end center;width:58px;height:58px;border-radius:50%;border:2px solid rgba(233,201,122,.6);box-sizing:border-box;padding-bottom:7px} .bj-spot .bj-circle{width:84px;height:84px;border-style:dashed;padding-bottom:20px} .bj-spot.on .bj-circle{border-style:solid} .bj-betl{font-size:13px;opacity:.85;font-variant-numeric:tabular-nums} .bj-stack{position:relative;display:block;width:40px;height:40px} .bj-stack i{position:absolute;left:0;bottom:calc(var(--i) * 3.6px);width:40px;height:40px;filter:drop-shadow(0 1.6px 0 rgba(0,0,0,.45))} .bj-stack svg{display:block;width:100%;height:100%} .bj-insb{align-self:center;opacity:.9} .bj-res{padding:3px 10px;border-radius:999px;background:#f6ecd4;color:#1b2a1f;font-weight:700;font-size:13px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)} .bj-res b{font-variant-numeric:tabular-nums} .r-win .bj-res,.r-bj .bj-res,.r-dbust .bj-res{background:linear-gradient(#ffe7a3,#e2b04a);color:#3a2600} .r-lose .bj-res,.r-bust .bj-res{background:#7d1a24;color:#fff} .r-push .bj-res,.r-surr .bj-res{background:#3d4a44;color:#fff} .r-lose .bj-cards,.r-bust .bj-cards,.r-surr .bj-cards{filter:saturate(.6) brightness(.82)} .bj-hl{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:1px 8px;border-radius:999px;background:rgba(6,20,12,.7);font-size:11px;white-space:nowrap} /* los controles */ .bj-ctl{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:100px} .bj-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .bj-chip{width:58px;height:58px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 7px 10px rgba(0,0,0,.25));transition:transform .12s ease} .bj-chip svg{display:block;width:100%;height:100%} .bj-chip:hover:not(:disabled){transform:translateY(-3px)} .bj-chip:active:not(:disabled){transform:translateY(1px)} .bj-chip:disabled{opacity:.32;cursor:not-allowed} .bj-chip:focus-visible{outline:3px solid var(--focus,#fff);outline-offset:3px} .bj-act{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;min-height:46px;font-weight:700} .bj-act kbd{padding:0 4px;border:1px solid currentColor;border-radius:4px;font:600 11px/1.4 var(--f-mono,ui-monospace,monospace);opacity:.55} .bj-act.adv{outline:3px solid #ffd76a;outline-offset:2px;animation:bj-pulse 1.1s ease-in-out 2} @keyframes bj-pulse{50%{outline-offset:5px}} .bj-hint{min-height:46px} .bj-broke{max-width:52ch;margin:0;text-align:center} .bj-keys{margin:0;text-align:center;font-size:12px;opacity:.7} .bj-rules{padding:4px 14px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .bj-rules ol{margin:8px 0;padding-left:20px;display:grid;gap:6px;max-width:72ch} @media (hover:none){ .bj-keys,.bj-act kbd{display:none} } @media (max-width:620px){ .bj{--cw:clamp(46px,13.5vw,60px)} .bj-table{padding:8px 8px 12px} .bj-felt{min-height:360px;padding:12px 8px 26px;border-radius:20px 20px 46% 46% / 20px 20px 16% 16%} .bj-shoe{right:14px;top:10px}.bj-tray{left:14px;top:12px} .bj-print text+text{display:none} .bj-act{min-width:0;flex:1 1 30%} .bj-acts{width:100%} .bj-chip{width:54px;height:54px} .bj-sw{margin-left:0} } @media (prefers-reduced-motion:reduce){ .bj-card.in,.bj-card.flip,.bj-act.adv{animation:none} .bj-chip{transition:none} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): la mesa a la izquierda con todo el alto (--fw-h) y las fichas y jugadas a la derecha (antes la apuesta quedaba debajo de la mesa) */ @media (max-height:520px) and (min-width:560px){ .bj{--cw:clamp(42px,calc((var(--fw-h,100dvh) - 176px) / 3.6),60px);display:grid;grid-template-columns:minmax(0,1fr) 236px;grid-template-rows:auto minmax(0,1fr) auto;gap:6px 14px;min-height:var(--fw-h,auto)} .bj-top{grid-column:1/-1} .bj-table{grid-column:1;grid-row:2/-1;padding:6px 10px 12px;display:flex;min-height:0} .bj-felt{flex:1 1 auto;min-height:calc(var(--fw-h,100dvh) - 70px);padding:10px 10px 18px} .bj-ctl{grid-column:2;grid-row:2;align-self:center;min-height:0} .bj-chip{width:50px;height:50px} .bj-acts{width:100%} .bj-act{min-width:0;flex:1 1 45%;min-height:42px} .bj-rules{grid-column:1/-1} } /* ===== 1.17.2 · Solitario (solitario.js): las cartas se mueven con transform, así que todo se anima solo ===== */ .so{display:flex;flex-direction:column;gap:10px} .so-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .so-vars,.so-opt{display:inline-flex;padding:3px;border-radius:12px;background:color-mix(in srgb,currentColor 8%,transparent);border:1px solid color-mix(in srgb,currentColor 14%,transparent); box-shadow:inset 0 1px 3px rgba(0,0,0,.28),0 1px 0 color-mix(in srgb,currentColor 10%,transparent)} .so-opt[hidden]{display:none} .so-seg{min-height:34px;padding:0 12px;border:0;border-radius:9px;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer;white-space:nowrap} .so-seg[aria-pressed="true"]{background:var(--accent,#3d9a5f);color:var(--accent-fg,#fff);font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.22),0 1px 1px rgba(0,0,0,.25),0 3px 6px -2px rgba(0,0,0,.35)} .so-seg{transition:transform .12s cubic-bezier(.32,.72,0,1)} .so-seg:active{transform:translateY(1px) scale(.98)} .so-seg:focus-visible{outline:2px solid var(--focus,#fff);outline-offset:1px} .so-info{display:inline-flex;gap:12px;margin-left:auto;font-variant-numeric:tabular-nums;font-size:14px} .so-time{font-weight:700;min-width:3.2em;text-align:right} .so-btns{display:inline-flex;gap:8px;flex-wrap:wrap} .so-btns [hidden]{display:none} .so-board{--cw:80px;--ch:112px;position:relative;height:min(70vh,660px);min-height:380px;border-radius:18px;overflow:hidden;touch-action:none;isolation:isolate; background:radial-gradient(120% 90% at 50% 0%,var(--so-f1),var(--so-f2) 60%,var(--so-f3));box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 30px 60px -30px rgba(0,0,0,.35),inset 0 -40px 80px -50px rgba(0,0,0,.55)} .so-board[data-felt="g"]{--so-f1:#2c8c5c;--so-f2:#1c6743;--so-f3:#0f4029} .so-board[data-felt="b"]{--so-f1:#2f6f9c;--so-f2:#1d4c74;--so-f3:#10293f} .so-board[data-felt="w"]{--so-f1:#8c2f45;--so-f2:#661f32;--so-f3:#3a0f1c} .so-board::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.025) 2px 4px)} .so-slots,.so-cards{position:absolute;inset:0} .so-slot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);box-sizing:border-box;border-radius:calc(var(--cw) * .08);border:2px solid rgba(255,255,255,.22);background:rgba(0,0,0,.12)} .so-slot.so-f::after{content:"A";position:absolute;inset:0;display:grid;place-items:center;font:700 calc(var(--cw) * .36)/1 Georgia,'DejaVu Serif',serif;color:rgba(255,255,255,.2)} .so-slot.so-c{border-style:dashed} .so-slot.so-stock{cursor:pointer;display:grid;place-items:center} .so-slot.so-stock:focus-visible{outline:3px solid #fff;outline-offset:2px} .so-re{font-size:calc(var(--cw) * .42);color:rgba(255,255,255,.55)} .so-slot.so-done{border-color:rgba(233,201,122,.35)} .so-card{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .08);cursor:pointer;perspective:700px;transition:transform .22s cubic-bezier(.25,.8,.3,1);will-change:transform;-webkit-tap-highlight-color:transparent;outline:none} .so-card[hidden]{display:none} .so-f,.so-b{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .3s ease;box-shadow:0 1px 2px rgba(0,0,0,.35),0 6px 12px -6px rgba(0,0,0,.45)} .so-f svg{display:block;width:100%;height:100%} .so-b{background:var(--nai-back) center/100% 100% no-repeat;transform:rotateY(180deg)} .so-card:not(.up) .so-f{transform:rotateY(-180deg)} .so-card:not(.up) .so-b{transform:rotateY(0)} .so-card.so-drag{transition:none;cursor:grabbing} .so-card.so-drag .so-f{box-shadow:0 2px 4px rgba(0,0,0,.35),0 18px 30px -10px rgba(0,0,0,.6)} .so-card:focus-visible .so-f{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(0,0,0,.5)} .so-card.so-sel .so-f{box-shadow:0 0 0 3px #ffd76a,0 10px 20px -8px rgba(0,0,0,.6)} .so-card.so-lock .so-f{filter:brightness(.78) saturate(.85)} .so-card.so-hint .so-f,.so-slot.so-hint{box-shadow:0 0 0 3px #7cf7c3,0 0 18px 4px rgba(124,247,195,.55)} .so-card.so-no{animation:so-no .3s ease} @keyframes so-no{25%{translate:-4px 0}75%{translate:4px 0}} .so-win{position:absolute;inset:0;z-index:2000;display:grid;place-items:center;background:rgba(0,0,0,.25)} .so-win[hidden]{display:none} .so-wincard{min-width:min(320px,86%);padding:20px 24px;border-radius:18px;background:#fbf6e8;color:#1e2a22;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)} .so-wincard h3{margin:0 0 6px;font:700 26px/1.15 Georgia,'DejaVu Serif',serif} .so-wincard p{margin:0 0 12px;font-variant-numeric:tabular-nums} .so-rec{color:#9a6a00;font-weight:700} .so-foot{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:13px} .so-msg{flex:1 1 220px;min-height:1.3em;font-weight:600} .so-stats,.so-deal{opacity:.72;font-variant-numeric:tabular-nums} .so-felts{display:inline-flex;gap:6px} .so-felt{width:24px;height:24px;padding:0;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 30%,transparent);cursor:pointer} .so-felt[data-sof="g"]{background:#1c6743}.so-felt[data-sof="b"]{background:#1d4c74}.so-felt[data-sof="w"]{background:#661f32} .so-felt:focus-visible{outline:2px solid var(--focus,#fff);outline-offset:2px} .so-keys{margin:0;font-size:12px;opacity:.7} .so-rules{padding:4px 14px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .so-rules ol{margin:8px 0;padding-left:20px;display:grid;gap:6px;max-width:72ch} @media (hover:none){ .so-keys{display:none} } @media (max-width:640px){ .so-top{gap:6px} .so-vars{width:100%;overflow-x:auto} .so-seg{flex:1 0 auto;padding:0 10px;font-size:13px} .so-info{margin-left:0} .so-btns{width:100%}.so-btns .btn{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px} .so-board{height:calc(100dvh + var(--fw-gain,0px) - 300px);min-height:340px;border-radius:12px} } @media (prefers-reduced-motion:reduce){ .so-card,.so-f,.so-b{transition:none} .so-card.so-no{animation:none} } /* ===== Materiales reales (Andre, 21 oct: «Están muy planos»; decidido: madera, paño, papel, metal y cristal, con luz y sombras). El tapete de un café de la Plaza bajo una lámpara: marco de nogal con veta y bisel, paño con fibra, lugares hundidos en el paño, fundaciones con anillo de latón y cartas de cartulina con grosor y sombra de contacto. La luz viene de arriba. ===== */ .so-rail{--rail:clamp(9px,1.25vw,15px);position:relative;padding:var(--rail);border-radius:calc(18px + var(--rail)); background: radial-gradient(120% 60% at 50% -10%,rgba(255,214,160,.28),transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='600' height='120' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/600px 120px, linear-gradient(180deg,#7a4a26,#5a3318 45%,#43240f); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.45),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.55), 0 1px 0 rgba(255,255,255,.06),0 18px 34px -14px rgba(0,0,0,.65),0 4px 8px -2px rgba(0,0,0,.35)} /* la orilla interior del marco: un filo de latón entre la madera y el paño */ .so-rail::before{content:"";position:absolute;inset:calc(var(--rail) - 3px);border-radius:21px;pointer-events:none; box-shadow:0 0 0 1.5px #b88c3e,0 0 0 3px rgba(46,24,6,.75),inset 0 0 0 1px rgba(255,236,190,.25)} .so-rail .so-board{border-radius:18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E") 0 0/160px 160px, radial-gradient(70% 55% at 50% 8%,rgba(255,236,190,.22),transparent 70%), radial-gradient(120% 90% at 50% 0%,var(--so-f1),var(--so-f2) 60%,var(--so-f3)); background-blend-mode:soft-light,normal,normal; /* la sombra que el marco deja sobre el paño, más honda arriba porque la luz cae desde arriba */ box-shadow:inset 0 10px 18px -6px rgba(0,0,0,.55),inset 0 -6px 14px -8px rgba(0,0,0,.45),inset 8px 0 14px -10px rgba(0,0,0,.45),inset -8px 0 14px -10px rgba(0,0,0,.45)} .so-rail .so-board::before{opacity:.35} /* los lugares vacíos: hundidos en el paño, con su costura */ .so-rail .so-slot{border:0;background:rgba(0,0,0,.14);box-shadow:inset 0 2px 5px rgba(0,0,0,.42),inset 0 -1px 0 rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.07)} .so-rail .so-slot::before{content:"";position:absolute;inset:5%;border-radius:inherit;border:1.5px dashed rgba(255,244,214,.2);pointer-events:none} .so-rail .so-slot.so-c::before{border-style:dotted} /* fundaciones: un anillo de latón incrustado y la A grabada */ .so-rail .so-slot.so-f{background:radial-gradient(circle at 50% 46%,rgba(0,0,0,.05),rgba(0,0,0,.2))} .so-rail .so-slot.so-f::before{inset:auto;left:50%;top:50%;width:calc(var(--cw) * .66);aspect-ratio:1;border:0;border-radius:50%;translate:-50% -50%; background:radial-gradient(circle at 50% 50%,transparent 58%,#7d5a1d 60%,#e6c473 66%,#b58934 74%,#f2dc9a 80%,#8a6420 86%,transparent 88%); box-shadow:0 2px 3px rgba(0,0,0,.35);opacity:.8} .so-rail .so-slot.so-f::after{color:#e2c06c;font-size:calc(var(--cw) * .3);text-shadow:0 1px 0 rgba(0,0,0,.55),0 -1px 0 rgba(255,242,200,.25);opacity:.75} .so-rail .so-slot.so-done{box-shadow:inset 0 2px 5px rgba(0,0,0,.42),0 0 0 2px rgba(230,196,115,.35)} .so-rail .so-slot.so-done::before{border-color:rgba(230,196,115,.45)} /* el mazo: una bandeja de nogal hundida en la mesa */ .so-rail .so-slot.so-stock{background:linear-gradient(180deg,#4a2a12,#3a200c);box-shadow:inset 0 3px 6px rgba(0,0,0,.6),inset 0 -1px 0 rgba(255,214,160,.18),0 1px 0 rgba(255,255,255,.08)} .so-rail .so-slot.so-stock::before{border:1.5px solid rgba(184,140,62,.55);border-style:solid} .so-rail .so-re{color:#e2c06c;text-shadow:0 1px 0 rgba(0,0,0,.6);position:relative} /* las cartas: cartulina con grosor (un canto claro abajo), brillo de la lámpara y sombra de contacto */ .so-rail .so-card .so-f,.so-rail .so-card .so-b{box-shadow:0 1px 0 #cbbd9c,0 1.5px 1px rgba(0,0,0,.22),0 3px 6px -2px rgba(0,0,0,.35),0 10px 16px -10px rgba(0,0,0,.5)} .so-rail .so-card .so-f::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(165deg,rgba(255,255,255,.32),rgba(255,255,255,0) 38%,rgba(120,90,40,0) 70%,rgba(120,90,40,.07))} .so-rail .so-card.so-drag .so-f{translate:0 -3px;scale:1.035;box-shadow:0 1px 0 #cbbd9c,0 4px 6px rgba(0,0,0,.25),0 22px 34px -12px rgba(0,0,0,.6)} .so-rail .so-card:focus-visible .so-f{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(0,0,0,.5)} .so-rail .so-card.so-sel .so-f{box-shadow:0 0 0 3px #ffd76a,0 10px 20px -8px rgba(0,0,0,.6)} .so-rail .so-card.so-hint .so-f,.so-rail .so-slot.so-hint{box-shadow:0 0 0 3px #7cf7c3,0 0 18px 4px rgba(124,247,195,.55)} @media (max-width:640px){ .so-rail{--rail:8px;border-radius:20px} .so-rail .so-board{border-radius:12px;height:calc(100dvh + var(--fw-gain,0px) - 316px)} .so-rail::before{border-radius:15px} } @media (prefers-reduced-motion:reduce){ .so-rail .so-card.so-drag .so-f{translate:none;scale:none} } /* teléfono acostado: la mesa a la izquierda con todo el alto libre (--fw-h) y, a la derecha, en una columna, las variantes, los botones y el pie (antes la mesa medía 380 px y había que bajar) */ @media (max-height:520px) and (min-width:560px){ .so{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,200px);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 10px;height:var(--lh);box-sizing:border-box} .so-rail{grid-column:1;grid-row:1/-1;display:flex;min-height:0} .so-rail .so-board{flex:1 1 auto;height:auto;min-height:0} .so-top{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;gap:6px} .so-vars,.so-opt{flex-wrap:wrap} .so-top .so-seg{flex:1 1 auto;min-height:30px;padding:0 8px;font-size:12.5px} .so-info{margin-left:0;justify-content:space-between;font-size:13px} .so-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px} .so-btns .btn{min-height:32px;padding:0 6px} .so-foot{grid-column:2;grid-row:3;flex-direction:column;align-items:stretch;gap:6px;font-size:12px} .so-msg{flex:none;min-height:0} .so-foot .btn{min-height:30px;padding:0 6px;font-size:12.5px} .so-keys,.so-deal{display:none} .so-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:12.5px} } /* ===== 1.17.3 · Memorama (memorama.js): cartas con dorso de talavera sobre una mesa de nogal ===== Las cartas son objetos: se ven igual con cualquier tema (el resto de la ventana sí sigue al tema). */ .memo{display:flex;flex-direction:column;gap:10px; --me-cobalt:#1f3f9a;--me-cobalt2:#2f74c9;--me-cream:#f6efdd;--me-ochre:#e3a52a;--me-paper:#efe7d3;--me-ink:#1b2233; --me-p0:#e9b949;--me-p1:#58b4e8;--me-p2:#ee7396;--me-p3:#7bd389} .me-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .me-extra[hidden],.me-time[hidden],.me-score[hidden],.me-foundw[hidden],.me-win[hidden],.me-rules[hidden]{display:none} .me-np{align-self:center;padding:0 6px 0 8px;font-size:13px;opacity:.75} .me-newb{margin-left:auto} .me-bar{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;min-height:30px;font-size:14px;font-variant-numeric:tabular-nums} .me-time{font-weight:700;min-width:3.2em} .me-score{display:inline-flex;gap:6px;flex-wrap:wrap} .me-pl{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);transition:background .2s,border-color .2s} .me-pl::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--me-pc)} .me-pl:nth-child(1){--me-pc:var(--me-p0)}.me-pl:nth-child(2){--me-pc:var(--me-p1)}.me-pl:nth-child(3){--me-pc:var(--me-p2)}.me-pl:nth-child(4){--me-pc:var(--me-p3)} .me-pl b{font-weight:600}.me-pl i{font-style:normal;font-weight:800;min-width:1.2em;text-align:right} .me-pl.on{border-color:var(--me-pc);background:color-mix(in srgb,var(--me-pc) 22%,transparent)} .me-msg{flex:1 1 160px;min-height:1.3em;font-weight:600;text-align:right} .me-main{display:flex;gap:12px;align-items:stretch} .me-table{position:relative;flex:1 1 auto;min-width:0;height:clamp(340px,calc(100dvh + var(--fw-gain,0px) - 250px),860px);min-height:340px;border-radius:18px;overflow:hidden;isolation:isolate;display:grid;place-items:center; background: repeating-linear-gradient(92deg,rgba(0,0,0,.07) 0 1px,transparent 1px 9px,rgba(255,220,170,.035) 9px 11px,transparent 11px 23px), repeating-linear-gradient(88deg,rgba(0,0,0,.05) 0 2px,transparent 2px 41px), radial-gradient(130% 100% at 50% 0%,#6b4428,#4a2c18 55%,#2a170b); box-shadow:inset 0 0 0 2px rgba(0,0,0,.3),inset 0 30px 60px -30px rgba(255,200,140,.12),inset 0 -50px 90px -50px rgba(0,0,0,.6)} .me-board{--cw:90px;--gap:10px;--ch:calc(var(--cw) * 1.28);display:grid;grid-template-columns:repeat(var(--cols,4),var(--cw));grid-auto-rows:var(--ch);gap:var(--gap);justify-content:center;align-content:center;width:100%;height:100%;padding:12px;box-sizing:border-box} .me-wait{max-width:36ch;margin:0;padding:16px;color:#f6efdd;text-align:center;font-weight:600;grid-column:1/-1} /* la carta */ .me-card{position:relative;width:var(--cw);height:var(--ch);padding:0;border:0;background:none;cursor:pointer;perspective:800px;-webkit-tap-highlight-color:transparent;border-radius:calc(var(--cw) * .09);color:var(--me-ink)} .me-card.done{cursor:default} .me-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.3,.7,.25,1.15);border-radius:inherit} .me-card.up .me-in{transform:rotateY(180deg)} .me-back,.me-face{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.45),0 8px 14px -8px rgba(0,0,0,.65)} /* el dorso: un azulejo de talavera (cobalto y ocre sobre crema) con su filete */ .me-back{background:var(--me-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23f6efdd'/%3E%3Cg fill='%231f3f9a'%3E%3Ccircle r='9'/%3E%3Ccircle cx='40' r='9'/%3E%3Ccircle cy='40' r='9'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3Cellipse cx='20' cy='10.6' rx='3.6' ry='6.4'/%3E%3Cellipse cx='20' cy='29.4' rx='3.6' ry='6.4'/%3E%3Cellipse cx='10.6' cy='20' rx='6.4' ry='3.6'/%3E%3Cellipse cx='29.4' cy='20' rx='6.4' ry='3.6'/%3E%3C/g%3E%3Cg fill='%23f6efdd'%3E%3Ccircle r='5.6'/%3E%3Ccircle cx='40' r='5.6'/%3E%3Ccircle cy='40' r='5.6'/%3E%3Ccircle cx='40' cy='40' r='5.6'/%3E%3Cellipse cx='20' cy='10.6' rx='1.4' ry='3.6'/%3E%3Cellipse cx='20' cy='29.4' rx='1.4' ry='3.6'/%3E%3Cellipse cx='10.6' cy='20' rx='3.6' ry='1.4'/%3E%3Cellipse cx='29.4' cy='20' rx='3.6' ry='1.4'/%3E%3C/g%3E%3Cg fill='%232f74c9' transform='rotate(45 20 20)'%3E%3Cellipse cx='20' cy='12.8' rx='1.9' ry='3.8'/%3E%3Cellipse cx='20' cy='27.2' rx='1.9' ry='3.8'/%3E%3Cellipse cx='12.8' cy='20' rx='3.8' ry='1.9'/%3E%3Cellipse cx='27.2' cy='20' rx='3.8' ry='1.9'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='4.2' fill='%23e3a52a'/%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%231f3f9a'/%3E%3Cg fill='%23e3a52a'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='40' r='2.4'/%3E%3Ccircle cy='40' r='2.4'/%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center/calc(var(--cw) * .5) auto repeat} .me-back::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 calc(var(--cw) * .045) var(--me-cream),inset 0 0 0 calc(var(--cw) * .062) var(--me-cobalt),inset 0 1px 0 calc(var(--cw) * .062) rgba(255,255,255,.4); background:linear-gradient(155deg,rgba(255,255,255,.28),transparent 38%,transparent 70%,rgba(0,0,0,.12))} .me-face{transform:rotateY(180deg);background:var(--me-paper);display:grid;place-items:center} /* obras: el cuadro con su marco dorado, centrado en una cartulina */ .me-frame{display:grid;place-items:center;width:100%;height:100%;padding:calc(var(--cw) * .09);box-sizing:border-box; --fw:calc(var(--cw) * .82);--fh:calc(var(--ch) - var(--cw) * .18)} .me-pic{display:block;background-color:#d6cbb0;width:min(var(--fw),calc(var(--fh) * var(--a,1)));aspect-ratio:var(--a,1);background-repeat:no-repeat; box-shadow:0 0 0 calc(var(--cw) * .018) #d8b45a,0 0 0 calc(var(--cw) * .032) #7a5a1e,0 3px 6px rgba(0,0,0,.45)} .me-frame img{max-width:100%;max-height:100%;object-fit:contain} /* sonoro: una bocina; arriba suena (sus ondas laten) y al hacer par dice qué era */ .me-board[data-mode="snd"] .me-face{background:radial-gradient(120% 90% at 50% 20%,#2c56b8,var(--me-cobalt) 60%,#132863);color:var(--me-cream)} .me-snd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;padding:6%;box-sizing:border-box;text-align:center;line-height:1.1} .me-snd svg{width:46%;height:auto;max-height:45%} .me-card.up:not(.done) .me-snd svg path+path{animation:me-wave .9s ease-in-out 2} @keyframes me-wave{50%{opacity:.25}} .me-snd small{font-weight:800;font-size:max(11px,calc(var(--cw) * .16))} .me-snd em{font-style:normal;font-size:max(10px,calc(var(--cw) * .12));opacity:.85;overflow-wrap:anywhere} /* hechas: un sello de color (el de quien hizo el par) */ .me-card.done .me-face{box-shadow:0 0 0 2px rgba(255,255,255,.65),0 6px 12px -8px rgba(0,0,0,.6)} .me-card.done::after{content:"";position:absolute;right:-4px;top:-4px;width:max(14px,calc(var(--cw) * .17));aspect-ratio:1;border-radius:50%;z-index:1; background:var(--me-pc,#3fae6a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; box-shadow:0 1px 3px rgba(0,0,0,.5);animation:me-pop .35s cubic-bezier(.3,1.6,.5,1) both} .me-card.p0{--me-pc:var(--me-p0)}.me-card.p1{--me-pc:var(--me-p1)}.me-card.p2{--me-pc:var(--me-p2)}.me-card.p3{--me-pc:var(--me-p3)} .me-card.done.p0 .me-face,.me-card.done.p1 .me-face,.me-card.done.p2 .me-face,.me-card.done.p3 .me-face{box-shadow:0 0 0 3px var(--me-pc),0 6px 12px -8px rgba(0,0,0,.6)} @keyframes me-pop{from{transform:scale(0)}} .me-card:not(.done):hover .me-back{filter:brightness(1.06)} .me-card:not(.done):hover .me-in{translate:0 -2px} .me-card:focus-visible{outline:none} .me-card:focus-visible .me-back,.me-card:focus-visible .me-face{box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(0,0,0,.6)} /* el final */ .me-win{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(20,10,4,.42)} .me-wincard{min-width:min(320px,86%);max-width:92%;padding:20px 24px;border-radius:18px;background:var(--me-cream);color:var(--me-ink);text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.7); border:3px solid var(--me-cobalt);outline:2px solid var(--me-cream);outline-offset:-8px} .me-wincard h3{margin:0 0 6px;font:700 24px/1.15 Georgia,'DejaVu Serif',serif;text-wrap:balance} .me-wincard p{margin:0 0 12px;font-variant-numeric:tabular-nums} .me-rec{color:#9a6a00;font-weight:700} /* los pares encontrados */ .me-foundw{flex:0 0 220px;display:flex;flex-direction:column;min-height:0;max-height:clamp(340px,calc(100dvh + var(--fw-gain,0px) - 250px),860px);padding:10px 12px;border-radius:14px;background:color-mix(in srgb,currentColor 6%,transparent);box-sizing:border-box} .me-foundw h4{margin:0 0 6px;font-size:14px} .me-found{list-style:none;margin:0;padding:0;overflow:auto;display:grid;gap:8px;align-content:start} .me-found li{display:grid;gap:1px;padding-left:10px;border-left:3px solid var(--me-pc,color-mix(in srgb,currentColor 30%,transparent));animation:me-in .35s ease both} .me-found li.p0{--me-pc:var(--me-p0)}.me-found li.p1{--me-pc:var(--me-p1)}.me-found li.p2{--me-pc:var(--me-p2)}.me-found li.p3{--me-pc:var(--me-p3)} .me-found b{font-size:13px;line-height:1.25} .me-found span{font-size:12px;opacity:.72} .me-found li.me-empty{border-left-color:transparent;padding-left:0;font-size:13px;opacity:.65;animation:none} @keyframes me-in{from{opacity:0;translate:0 -6px}} .me-foot{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:13px} .me-stats{flex:1 1 200px;opacity:.72;font-variant-numeric:tabular-nums} .me-rules{padding:4px 14px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .me-rules ol{margin:8px 0;padding-left:20px;display:grid;gap:6px;max-width:72ch} @media (max-width:760px){ .me-main{flex-direction:column} .me-foundw{flex:none;max-height:180px} .me-found li.me-empty{display:none} .me-foundw:has(.me-empty){display:none} } @media (max-width:640px){ .me-top{gap:6px} .me-top .so-vars{flex:1 1 auto;width:auto;overflow-x:auto} .me-top .so-seg{flex:1 0 auto;padding:0 10px;font-size:13px} .me-newb{margin-left:0;width:100%} .me-msg{text-align:left} .me-table{height:calc(100dvh + var(--fw-gain,0px) - 330px);min-height:320px;border-radius:12px} .me-board{padding:8px} } @media (prefers-reduced-motion:reduce){ .me-in{transition:none} .me-card.done::after,.me-found li{animation:none} .me-card.up .me-snd svg path+path{animation:none} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): la mesa toma todo el alto que queda (--fw-h) y las cartas se acomodan a ella */ @media (max-height:520px) and (min-width:560px){ .memo{height:var(--fw-h,auto);gap:6px} .me-top{gap:6px 8px} .me-top .so-seg{padding:0 9px;font-size:13px} .me-bar{min-height:24px} .me-main{flex:1 1 auto;min-height:0} .me-table{height:auto;min-height:0} .me-foundw{max-height:none} } /* ===== 1.17.4 · Lo común de los juegos nuevos (juegos.js, prefijo gk) ===== */ .gk-win{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(10,8,14,.42);border-radius:inherit} .gk-win[hidden]{display:none} .gk-wincard{min-width:min(320px,86%);max-width:92%;padding:20px 24px;border-radius:18px;background:#fbf6e8;color:#1e2230;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)} .gk-wincard h3{margin:0 0 6px;font:700 24px/1.15 Georgia,'DejaVu Serif',serif;text-wrap:balance} .gk-wincard p{margin:0 0 12px;font-variant-numeric:tabular-nums} .gk-wincard .gk-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .gk-wincard .btn:not(.primary){background:#fffdf6;color:#1e2230;text-shadow:none} .gk-rec{color:#9a6a00;font-weight:700} .gk-msg{min-height:1.3em;font-weight:600} .gk-rules{padding:4px 14px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .gk-rules[hidden]{display:none} .gk-rules ol,.gk-rules ul{margin:8px 0;padding-left:20px;display:grid;gap:6px;max-width:72ch} @media (max-width:640px){ .gk-top .so-vars{flex:1 1 auto;width:auto;overflow-x:auto} .gk-top .so-seg{flex:1 0 auto;padding:0 10px;font-size:13px} } /* ===== 1.19.17 · Texturas compartidas de los juegos con materiales reales (Andre, 21 oct: «Están muy planos»). Veta de nogal horizontal y vertical, fibra fina (paño, papel), vetas de piedra (mármol, jade) y latón cepillado. Viven aquí (núcleo) para que cada juego (paquete perezoso) las use sin repetirlas. ===== */ :root{--gk-grain-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='600' height='120' filter='url(%23t)'/%3E%3C/svg%3E");--gk-grain-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='600'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .004' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='120' height='600' filter='url(%23t)'/%3E%3C/svg%3E");--gk-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23t)'/%3E%3C/svg%3E");--gk-stone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .02' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .12 0 0 0 0 .12 -1.6 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23t)'/%3E%3C/svg%3E");--gk-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='40'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='300' height='40' filter='url(%23t)'/%3E%3C/svg%3E"); --gk-brass:linear-gradient(180deg,#f0d690 0%,#d2ad5c 38%,#ad8538 52%,#c9a352 70%,#e7c97e 100%)} /* ===== 1.17.4 · Ajedrez (ajedrez.js): tablero con marco de madera, piezas SVG propias que se deslizan ===== */ .azd{display:flex;flex-direction:column;gap:10px; --ch-lt:#ecd6b0;--ch-dk:#a8774b;--ch-fr1:#5a371e;--ch-fr2:#2e1a0c;--ch-co:#7a5230;--ch-co2:#f3e2c3} .azd[data-board="marmol"]{--ch-lt:#eeebe3;--ch-dk:#8ea597;--ch-fr1:#6f7a74;--ch-fr2:#38403c;--ch-co:#5c7266;--ch-co2:#f4f2ec} .azd[data-board="jade"]{--ch-lt:#e3eedb;--ch-dk:#4d8a6b;--ch-fr1:#2f5a46;--ch-fr2:#143024;--ch-co:#2f6a4e;--ch-co2:#eef6ea} .az-sprite{position:absolute;width:0;height:0;overflow:hidden} .az-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .azd .so-vars[hidden],.az-btns [hidden],.az-newb[hidden],.az-puz[hidden],.azd [data-az][hidden]{display:none} .az-newb{margin-left:auto} .az-main{display:flex;gap:16px;align-items:flex-start} .az-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .az-frame{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 200px),780px);min-width:260px;padding:clamp(8px,2.2%,18px);box-sizing:border-box;border-radius:14px; background:linear-gradient(145deg,var(--ch-fr1),var(--ch-fr2));box-shadow:0 18px 40px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.35)} .az-board{position:relative;aspect-ratio:1;width:100%;border-radius:4px;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 0 4px rgba(232,198,120,.35);touch-action:none;user-select:none;-webkit-user-select:none} .az-sqs{position:absolute;inset:0;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);outline:none} .az-row{display:contents} .az-sq{position:relative;background:var(--ch-lt)} .az-sq.dk{background:var(--ch-dk)} .az-sq.dk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,.03) 2px 5px);pointer-events:none} .az-rk,.az-fl{position:absolute;font:700 clamp(8px,1.5vmin,12px)/1 system-ui,sans-serif;pointer-events:none;opacity:.85} .az-rk{left:4%;top:4%}.az-fl{right:5%;bottom:3%} .az-sq.lt .az-rk,.az-sq.lt .az-fl{color:var(--ch-co)}.az-sq.dk .az-rk,.az-sq.dk .az-fl{color:var(--ch-co2)} .az-sq.last{box-shadow:inset 0 0 0 999px rgba(255,214,90,.42)} .az-sq.sel{box-shadow:inset 0 0 0 999px rgba(110,190,255,.5)} .az-sq.hint{box-shadow:inset 0 0 0 999px rgba(124,247,195,.45),inset 0 0 0 3px #3ee0a0} .az-sq.chk{background-image:radial-gradient(circle,rgba(255,40,40,.95) 0,rgba(230,20,20,.6) 35%,rgba(200,0,0,0) 72%)} .az-sq.mv::after{content:"";position:absolute;left:50%;top:50%;width:28%;height:28%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(20,30,40,.28)} .az-sq.cp::after{content:"";position:absolute;inset:5%;border-radius:50%;box-shadow:inset 0 0 0 clamp(3px,.6vmin,6px) rgba(20,30,40,.3)} .az-sq.bad{animation:az-bad .6s ease} @keyframes az-bad{30%{box-shadow:inset 0 0 0 999px rgba(255,60,60,.55)}} .az-sqs:focus-visible .az-sq.cur{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 5px rgba(0,0,0,.45)} .az-pcs{position:absolute;inset:0;pointer-events:none} .az-pc{position:absolute;left:0;top:0;width:12.5%;height:12.5%;transform:translate(calc(var(--c,0) * 100%),calc(var(--r,0) * 100%));transition:transform .22s cubic-bezier(.3,.7,.25,1);will-change:transform} .az-pc svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 1.5px rgba(0,0,0,.4))} .az-pc.drag{transition:none;z-index:5} .az-pc.drag svg{transform:scale(1.12);filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))} .az-pc.moving{z-index:4} .az-pc.gone{opacity:0;transition:opacity .22s ease,transform .22s} .azd.thinking .az-pl-top.on,.azd.thinking .az-pl-bot.on{animation:az-think 1.2s ease-in-out infinite} @keyframes az-think{50%{border-color:transparent}} /* coronación */ .az-promo{position:absolute;inset:0;z-index:30;background:rgba(10,8,6,.35)} .az-promo[hidden]{display:none} .az-promo-in{position:absolute;top:0;left:calc(var(--c) * 12.5%);width:12.5%;display:flex;flex-direction:column;background:#fbf6e8;border-radius:0 0 8px 8px;box-shadow:0 12px 24px rgba(0,0,0,.5)} .az-promo-in button{aspect-ratio:1;padding:6%;border:0;background:none;cursor:pointer} .az-promo-in button:hover,.az-promo-in button:focus-visible{background:#e8d9b4;outline:none} .az-promo-in svg{display:block;width:100%;height:100%} /* el lado */ .az-side{flex:0 0 280px;display:flex;flex-direction:column;gap:8px;min-width:0} .az-pl{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,currentColor 6%,transparent);flex-wrap:wrap} .az-pl.on{border-color:var(--accent,#d9a441)} .az-pl b{font-weight:700} .az-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,0,0,.6);flex:none} .az-dot.w{background:#f6efdf}.az-dot.b{background:#1d1d22;border-color:rgba(255,255,255,.5)} .az-cap{display:inline-flex;flex-wrap:wrap;gap:0;margin-left:auto;padding:1px 4px 1px 9px;border-radius:999px;background:rgba(236,226,204,.78)} .az-cap:empty{display:none} .az-mini{display:inline-block;width:18px;height:18px;margin-left:-5px} .az-mini svg{width:100%;height:100%} .az-adv{font-weight:700;font-size:13px;opacity:.8} .az-status{min-height:1.4em;margin:0} .az-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .az-list{margin:0;padding:6px 10px;list-style:none;max-height:min(40vh,320px);min-height:80px;overflow:auto;border-radius:12px;background:color-mix(in srgb,currentColor 5%,transparent);font-variant-numeric:tabular-nums;font-size:14px} .az-list li{display:grid;grid-template-columns:2.4em 1fr 1fr;gap:6px;padding:1px 0} .az-list li i{font-style:normal;opacity:.55;text-align:right} .az-btns{display:flex;flex-wrap:wrap;gap:6px} .az-btns .btn{flex:1 1 auto} .az-puz{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent,#d9a441) 14%,transparent)} .az-puz-s{font-size:13px;opacity:.85} .az-foot{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:13px} .az-foot .btn{margin-left:auto} @media (max-width:900px){ .az-main{flex-direction:column;align-items:stretch} .az-frame{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 320px),640px)} .az-side{flex:none} .az-list{max-height:140px;min-height:0} } @media (max-width:640px){ .az-top .so-vars{flex-wrap:wrap} .az-newb{margin-left:0;width:100%} .az-frame{width:100%;min-width:0;padding:6px;border-radius:10px} .az-btns .btn{padding-left:8px;padding-right:8px;font-size:13px} } @media (prefers-reduced-motion:reduce){ .az-pc,.az-pc.gone{transition:none} .az-sq.bad,.azd.thinking .az-pl{animation:none} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) ---------- Abajo de 900 px de ancho el panel se iba debajo del tablero (las reglas de max-width también le tocan al teléfono acostado) y había que bajar para jugar. Ahora, con poco alto (520 px o menos), el tablero va a la izquierda con todo el alto libre (--fw-h, que mide fswin.js) y a la derecha, en una columna, los controles de arriba, el panel y el pie. La columna del tablero crece hasta ese alto y se encoge si el panel necesita su ancho mínimo; el teléfono en vertical no cambia. */ @media (max-height:520px) and (min-width:560px){ .azd{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,var(--lh)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 12px;height:var(--lh);box-sizing:border-box} .az-main{display:contents} .az-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .az-frame{width:100%;min-width:0;padding:6px;border-radius:10px} .az-top{grid-column:2;grid-row:1;gap:4px 6px} .az-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .az-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .az-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .az-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:4px;overflow:auto} .az-side>*{flex-shrink:0} .az-pl{min-height:0;padding:2px 8px;gap:6px;font-size:13.5px} .az-status{font-size:13.5px;min-height:1.3em} .az-side>.az-list{flex:1 1 0;min-height:0;max-height:none;padding:2px 8px;font-size:13px} .az-btns{gap:4px} .az-btns .btn{min-height:30px;padding:0 6px;font-size:12.5px} .az-puz{padding:6px 8px;gap:4px} .az-foot{grid-column:2;grid-row:3;gap:4px 6px;flex-wrap:nowrap} .az-foot .so-seg{min-height:28px;padding:0 7px;font-size:12.5px} .az-foot .btn{min-height:32px;padding:0 10px} .azd>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .azd:has(>.gk-rules:not([hidden])) .az-side{display:none} } /* el teléfono acostado más angosto (un iPhone SE): el panel queda de unos 235 px; todo un poco más compacto */ @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .azd{row-gap:4px} /* cada grupo en su renglón, con botones del mismo ancho; un nombre largo se parte en dos líneas en vez de bajar el grupo */ .az-top .so-vars{width:100%;flex-wrap:nowrap} .az-top .so-seg{flex:1 1 0;min-width:0;min-height:28px;padding:2px 4px;font-size:12px;line-height:1.15;white-space:normal} .az-foot .so-seg{min-height:26px;padding:0 6px;font-size:12px} .az-newb{min-height:30px} .az-pl{padding:1px 8px;font-size:13px} .az-status{font-size:13px} .az-btns .btn{min-height:28px;padding:0 5px;font-size:12px} .az-foot .btn{min-height:30px;padding:0 8px;font-size:13px} } /* ===== 1.19.17 · Materiales reales: la mesa del club (Andre, 21 oct: «Están muy planos»; 28 oct: seguir con los juegos). Marquetería: cada casilla con su veta (las claras a lo largo, las oscuras a lo ancho), un filo de latón entre el tablero y el marco de nogal con bisel, y la luz de una lámpara que cae desde arriba. El lado es una tablilla de nogal: los jugadores en placas de latón grabadas, las jugadas en una planilla de papel con renglones, y botones de boj que se hunden. ===== */ .azd .az-frame{position:relative; background:radial-gradient(120% 70% at 50% -12%,rgba(255,214,160,.26),transparent 60%),var(--gk-grain-h) 0 0/600px 120px,linear-gradient(160deg,var(--ch-fr1),var(--ch-fr2)); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.42),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.55),0 18px 36px -14px rgba(0,0,0,.7),0 4px 8px -2px rgba(0,0,0,.35)} .azd:not([data-board="nogal"]) .az-frame{background:radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.22),transparent 60%),var(--gk-stone) 0 0/400px 400px,linear-gradient(160deg,var(--ch-fr1),var(--ch-fr2))} .azd .az-board{box-shadow:0 0 0 1.5px #b88c3e,0 0 0 3px rgba(46,24,6,.8),0 0 0 4px rgba(255,236,190,.22),0 2px 6px 3px rgba(0,0,0,.35)} /* la veta de cada casilla (variada con nth-child para que no se repita) */ .azd .az-sq::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--gk-grain-h) var(--gx,0) var(--gy,0)/340px 68px;mix-blend-mode:multiply;opacity:.32} .azd .az-sq.dk::before{background:var(--gk-grain-v) var(--gy,0) var(--gx,0)/68px 340px;opacity:.42} .azd .az-sq:nth-child(3n+1){--gx:-120px}.azd .az-sq:nth-child(3n+2){--gx:-245px}.azd .az-sq:nth-child(4n){--gy:-30px} .azd .az-row:nth-child(2n) .az-sq{--gy:-17px}.azd .az-row:nth-child(3n) .az-sq:nth-child(odd){--gx:-60px} .azd:not([data-board="nogal"]) .az-sq::before,.azd:not([data-board="nogal"]) .az-sq.dk::before{background:var(--gk-stone) var(--gx,0) var(--gy,0)/260px 260px;mix-blend-mode:multiply;opacity:.38} /* la luz de la lámpara y la sombra del marco sobre el tablero (encima de las casillas, debajo de las piezas) */ .azd .az-sqs::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(75% 60% at 50% 6%,rgba(255,240,205,.2),transparent 70%),radial-gradient(140% 120% at 50% 40%,transparent 55%,rgba(20,8,0,.28)); box-shadow:inset 0 8px 14px -8px rgba(0,0,0,.5),inset 0 -4px 10px -6px rgba(0,0,0,.35)} /* la tablilla del lado */ .azd .az-side{padding:12px;border-radius:16px;color:#f6e7c8; background:radial-gradient(120% 50% at 50% -5%,rgba(255,214,160,.22),transparent 60%),var(--gk-grain-h) -80px 0/600px 120px,linear-gradient(180deg,#6e4222,#4f2c14 50%,#3c200c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 14px 28px -14px rgba(0,0,0,.65)} .azd .az-side .gk-msg{color:#fbeccb;text-shadow:0 1px 0 rgba(0,0,0,.55)} /* placas de latón: el nombre grabado, dos tornillos y, la que juega, encendida */ .azd .az-pl{position:relative;padding-left:20px;padding-right:20px;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55); background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .azd .az-pl::before,.azd .az-pl::after{content:"";position:absolute;top:50%;left:7px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none; background:linear-gradient(135deg,transparent 42%,rgba(60,38,8,.75) 44% 56%,transparent 58%),radial-gradient(circle at 35% 35%,#fff0c4,#b48a3c 60%,#6b4c16);box-shadow:0 0 0 .5px rgba(50,30,6,.6)} .azd .az-pl::after{left:auto;right:7px} .azd .az-pl b{letter-spacing:.02em} .azd .az-pl.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.55),0 0 16px 2px rgba(255,196,80,.45)} .azd.thinking .az-pl.on{animation:az-glow 1.2s ease-in-out infinite} @keyframes az-glow{50%{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.15),0 0 6px rgba(255,196,80,.15)}} /* la planilla: papel con renglones y su margen rojo; los renglones se mueven con las jugadas */ .azd .az-list{padding:0 10px 0 6px;border-radius:3px;color:#2a2418;font:15px/22px Georgia,'DejaVu Serif',serif; background:linear-gradient(90deg,transparent 2.75em,rgba(196,64,52,.45) 2.75em,rgba(196,64,52,.45) calc(2.75em + 1px),transparent calc(2.75em + 1px)), repeating-linear-gradient(180deg,transparent 0 21px,rgba(70,100,170,.26) 21px 22px),var(--gk-fiber) 0 0/160px 160px,linear-gradient(180deg,#fbf4e2,#f1e6cb); background-attachment:local;background-blend-mode:normal,normal,soft-light,normal; box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 3px 6px -1px rgba(0,0,0,.45),0 0 0 1px rgba(80,55,20,.35)} .azd .az-list li{padding:0;min-height:22px} .azd .az-list li i{color:rgba(120,60,40,.75);font-style:italic} /* botones de boj: claros, con canto, que se hunden al tocarlos */ .azd .az-side .btn{border:1px solid rgba(60,36,12,.6);border-radius:8px;color:#3a2610;text-shadow:0 1px 0 rgba(255,248,226,.6); background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#f4e5c4,#dcc391);background-blend-mode:soft-light,normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s} .azd .az-side .btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(80,50,15,.35),0 0 0 #8a6634,0 1px 2px rgba(0,0,0,.3)} .azd .az-side .btn:disabled{opacity:.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6634} .azd .az-side .btn:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px} @media (max-height:520px) and (min-width:560px){ .azd .az-side{padding:6px;border-radius:12px} .azd .az-list{font-size:13.5px;line-height:20px;background-size:auto,auto 20px,160px 160px,auto} .azd .az-list{background-image:linear-gradient(90deg,transparent 2.75em,rgba(196,64,52,.45) 2.75em,rgba(196,64,52,.45) calc(2.75em + 1px),transparent calc(2.75em + 1px)),repeating-linear-gradient(180deg,transparent 0 19px,rgba(70,100,170,.26) 19px 20px),var(--gk-fiber),linear-gradient(180deg,#fbf4e2,#f1e6cb)} .azd .az-list li{min-height:20px} } @media (prefers-reduced-motion:reduce){ .azd.thinking .az-pl.on{animation:none} .azd .az-side .btn{transition:none} } /* las piezas capturadas, en un surco de paño verde dentro de la placa */ .azd .az-cap{background:radial-gradient(120% 140% at 50% 0%,#2f6a4c,#183b2a);box-shadow:inset 0 2px 3px rgba(0,0,0,.55),0 1px 0 rgba(255,250,225,.5)} .azd .az-adv{color:#2b1c08;opacity:.9} /* el problema del día: una ficha de cartulina sobre la tablilla */ .azd .az-puz{color:#2a2418;text-shadow:none;background:var(--gk-fiber) 0 0/160px 160px,linear-gradient(180deg,#fffaf0,#f0e5c9);background-blend-mode:soft-light,normal;border-radius:6px;box-shadow:0 3px 6px -1px rgba(0,0,0,.45),0 0 0 1px rgba(80,55,20,.3)} .azd .az-puz .btn{font-size:13px} .azd .az-pcs{z-index:2} /* ===== 1.17.5 · Sudoku (sudoku.js): una hoja de papel con tinta azul; se ve igual con cualquier tema ===== */ .sk{display:flex;flex-direction:column;gap:10px;--sk-paper:#fbf7ec;--sk-ink:#1f2430;--sk-blue:#2456b8;--sk-line:#cfc4a8;--sk-box:#2d2a26} .sk-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .sk-newb{margin-left:auto} .sk-newb[hidden],.sk-dayinfo[hidden],.sk-hints[hidden],.sk-mist[hidden]{display:none} .sk-main{display:flex;gap:18px;align-items:flex-start} .sk-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .sk-paper{position:relative;width:min(100%,calc(100dvh + var(--fw-gain,0px) - 200px),660px);min-width:260px;padding:clamp(8px,2%,16px);box-sizing:border-box;border-radius:10px;background:var(--sk-paper); box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 36px -18px rgba(0,0,0,.6),0 2px 0 #e6dcc4; background-image:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.7),transparent 60%),repeating-linear-gradient(0deg,rgba(120,100,60,.025) 0 1px,transparent 1px 3px)} .sk-grid{display:grid;grid-template:repeat(9,1fr)/repeat(9,1fr);aspect-ratio:1;width:100%;border:3px solid var(--sk-box);border-radius:3px;outline:none;background:var(--sk-paper);touch-action:manipulation;user-select:none;-webkit-user-select:none} .sk-row{display:contents} .sk-c{position:relative;display:grid;place-items:center;border-right:1px solid var(--sk-line);border-bottom:1px solid var(--sk-line);cursor:pointer;color:var(--sk-blue);transition:background .12s} .sk-c.bx{border-right:2.5px solid var(--sk-box)} .sk-c.by{border-bottom:2.5px solid var(--sk-box)} .sk-c:nth-child(9){border-right:0} .sk-row:last-child .sk-c{border-bottom:0} .sk-v{font:500 clamp(18px,4.6vmin,40px)/1 Georgia,'DejaVu Serif',serif} .sk-c.given{color:var(--sk-ink);cursor:default} .sk-c.given .sk-v{font-weight:700} .sk-c.peer{background:rgba(36,86,184,.07)} .sk-c.same{background:#dfe8fb} .sk-c.sel{background:#ffe7a1} .sk-c.bad{color:#c62828;background:#fde3e1} .sk-c.bad.sel{background:#f9c9c4} .sk-n{position:absolute;inset:6%;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;font:600 clamp(7px,1.4vmin,12px)/1 system-ui,sans-serif;color:#6b6556} .sk-n i{font-style:normal;visibility:hidden} .sk-n i.on{visibility:visible} .sk-n i.hl{color:#fff;background:var(--sk-blue);border-radius:3px;padding:0 2px} .sk-grid:focus-visible .sk-c.sel{box-shadow:inset 0 0 0 3px var(--sk-blue)} .sk-c.wave{animation:sk-wave .7s ease var(--sk-d,0ms) both} @keyframes sk-wave{40%{background:#c9f2d8;transform:scale(1.04)}} .sk-c.flash{animation:sk-flash 1s ease} @keyframes sk-flash{0%,60%{box-shadow:inset 0 0 0 3px #2fbf71}} /* el lado */ .sk-side{flex:0 0 260px;display:flex;flex-direction:column;gap:10px;min-width:0} .sk-stat{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;font-variant-numeric:tabular-nums} .sk-time{font:700 26px/1 system-ui,sans-serif} .sk-mist,.sk-hints{font-size:13px;opacity:.8} .sk-dayinfo{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent,#2456b8) 14%,transparent)} .sk-dayinfo span{font-size:13px;opacity:.85} .sk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .sk-d{position:relative;aspect-ratio:1.25;border:0;border-radius:12px;background:var(--sk-paper);color:var(--sk-blue);font:600 28px/1 Georgia,'DejaVu Serif',serif;cursor:pointer;box-shadow:0 2px 0 #d9ceb2,0 6px 12px -8px rgba(0,0,0,.6)} .sk-d small{position:absolute;right:8px;bottom:5px;font:600 11px/1 system-ui,sans-serif;color:#8a8270} .sk-d:active{transform:translateY(2px);box-shadow:0 0 0 #d9ceb2} .sk-d.full{opacity:.35} .sk-d:focus-visible{outline:3px solid var(--focus,#fff);outline-offset:2px} .sk-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px} .sk-notesb[aria-pressed="true"]{background:var(--accent,#2456b8);color:var(--accent-fg,#fff)} .sk-msg{margin:0;min-height:2.6em;font-size:14px} .sk-opt{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer} .sk-best{margin:0;font-size:13px;opacity:.75} .sk-foot{display:flex;justify-content:flex-end} @media (max-width:860px){ .sk-main{flex-direction:column;align-items:stretch} .sk-paper{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 330px),560px)} .sk-side{flex:none} .sk-pad{grid-template-columns:repeat(9,1fr);gap:4px} .sk-d{aspect-ratio:.8;font-size:22px;border-radius:9px} .sk-d small{right:3px;bottom:3px;font-size:9px} .sk-tools{grid-template-columns:repeat(4,1fr)} .sk-tools .btn{padding-left:4px;padding-right:4px;font-size:13px} } @media (max-width:640px){ .sk-newb{margin-left:0;width:100%} .sk-paper{width:100%;min-width:0;padding:6px} .sk-top .so-vars{flex-wrap:wrap} } @media (prefers-reduced-motion:reduce){ .sk-c.wave,.sk-c.flash{animation:none} } /* ===== Materiales reales (Andre, 21 oct: «Están muy planos»): la hoja del sudoku del periódico, prensada en una tabla de apuntes con su pinza de latón; los números del lado son fichas de marfil con canto. La luz viene de arriba a la izquierda. ===== */ .sk-board{position:relative;display:block;width:min(100%,calc(100dvh + var(--fw-gain,0px) - 212px),680px);min-width:260px;margin-inline:auto;padding:30px clamp(10px,1.6vw,18px) clamp(12px,1.8vw,20px);box-sizing:border-box;border-radius:16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .15 0 0 0 0 .06 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)'/%3E%3C/svg%3E") 0 0/200px 200px, radial-gradient(120% 80% at 20% 0%,rgba(255,226,180,.25),transparent 60%), linear-gradient(165deg,#8d6239,#6e4826 55%,#583718); box-shadow:inset 0 1px 0 rgba(255,226,180,.4),inset 0 -2px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(40,20,6,.5),0 22px 40px -18px rgba(0,0,0,.7),0 3px 6px rgba(0,0,0,.3)} .sk-board .sk-paper{border-radius:3px;width:100%;min-width:0; background-color:var(--sk-paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"), radial-gradient(120% 90% at 25% 0%,rgba(255,255,255,.75),transparent 60%), linear-gradient(180deg,transparent 85%,rgba(120,96,50,.06)); box-shadow:0 1px 1px rgba(0,0,0,.18),0 6px 10px -6px rgba(0,0,0,.5),0 0 0 .5px rgba(90,70,30,.25)} /* la esquina de abajo se levanta un poco: su sombra cae sobre la tabla */ .sk-board .sk-paper::after{content:"";position:absolute;right:6px;bottom:2px;width:40%;height:14px;z-index:-1;border-radius:50%;box-shadow:12px 10px 14px rgba(0,0,0,.45);transform:rotate(3deg);pointer-events:none} .sk-board .sk-grid{background:transparent} .sk-board .sk-c.given .sk-v{text-shadow:0 0 .5px rgba(31,36,48,.6)} .sk-board .sk-c:not(.given) .sk-v{text-shadow:0 0 .6px rgba(36,86,184,.55)} /* la pinza de latón */ .sk-clip{position:absolute;left:50%;top:6px;z-index:3;width:clamp(110px,34%,190px);height:34px;translate:-50% 0;border-radius:10px 10px 6px 6px;pointer-events:none; background:linear-gradient(180deg,#f3dc9a 0%,#d4ad55 22%,#a97c2c 55%,#e8c879 78%,#8a6320 100%); box-shadow:inset 0 1px 0 rgba(255,250,225,.8),inset 0 -1px 0 rgba(60,36,6,.6),0 3px 4px rgba(0,0,0,.4),0 8px 10px -6px rgba(0,0,0,.5)} .sk-clip::before{content:"";position:absolute;left:12%;right:12%;top:9px;height:8px;border-radius:5px;background:linear-gradient(180deg,#6d4c16,#a37a2c);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,240,200,.5)} .sk-clip::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:5px; background:radial-gradient(circle at 3px 2.5px,#fff2c4 0 1px,#7a561a 1.2px 2.5px,transparent 2.7px) left/8px 5px no-repeat,radial-gradient(circle at 3px 2.5px,#fff2c4 0 1px,#7a561a 1.2px 2.5px,transparent 2.7px) right/8px 5px no-repeat} /* las fichas de los números: marfil con canto */ .sk-d{background:linear-gradient(180deg,#fffcf3,#f1e8d2);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(120,100,60,.12),0 3px 0 #c9b88f,0 4px 0 #9c8a62,0 9px 14px -7px rgba(0,0,0,.6); transition:transform .1s cubic-bezier(.32,.72,0,1),box-shadow .1s ease} .sk-d:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff,0 1px 0 #9c8a62,0 3px 6px -4px rgba(0,0,0,.5)} @media (max-width:860px){ .sk-board{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 342px),580px)} } @media (max-width:640px){ .sk-board{width:100%;min-width:0;padding:22px 7px 9px;border-radius:12px} .sk-board .sk-paper{width:100%;padding:5px} .sk-clip{height:26px;top:3px} .sk-clip::before{top:7px;height:6px} } @media (prefers-reduced-motion:reduce){ .sk-d{transition:none} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) · SOLO ACOMODO ---------- Bloque aparte a propósito: aquí solo se acomoda (dirección, columnas, anchos y altos), nada de la apariencia de la hoja, para que se pueda juntar con otros cambios de estilo del Sudoku. Con 520 px de alto o menos, la hoja va a la izquierda con todo el alto libre (--fw-h) y, a la derecha, los niveles, el teclado de números, las herramientas y el pie en una columna (antes quedaban debajo y había que bajar). La columna de la hoja (.sk-left) manda el tamaño: lo que la envuelva debe medir lo mismo de ancho que de alto. Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .sk{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,var(--lh)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 12px;height:var(--lh);box-sizing:border-box} .sk-main{display:contents} .sk-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .sk-paper{width:100%;min-width:0;padding:6px} .sk-grid{box-sizing:border-box} /* el borde dentro del cuadro: la hoja mide lo mismo de alto que de ancho */ .sk-top{grid-column:2;grid-row:1;gap:4px 6px} .sk-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .sk-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .sk-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .sk-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:6px;overflow:auto} .sk-side>*{flex-shrink:0} .sk-time{font-size:21px} .sk-pad{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px} .sk-d{aspect-ratio:auto;height:52px;font-size:22px;border-radius:9px} .sk-d small{right:3px;bottom:3px;font-size:9px} .sk-tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px} .sk-tools .btn{min-height:30px;padding:0 4px;font-size:12.5px} .sk-msg{min-height:1.3em;font-size:13.5px} .sk-best:empty{display:none} .sk-foot{grid-column:2;grid-row:3} .sk-foot .btn{min-height:32px;padding:0 10px} .sk>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .sk:has(>.gk-rules:not([hidden])) .sk-side{display:none} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .sk{row-gap:4px} .sk-top .so-seg{min-height:26px;padding:0 6px;font-size:12px} .sk-newb{min-height:30px} .sk-side{gap:3px} .sk-time{font-size:18px} .sk-pad{grid-template-columns:repeat(5,minmax(0,1fr))} .sk-d{height:36px;font-size:20px} .sk-opt,.sk-best{font-size:12px} .sk-tools{grid-template-columns:repeat(2,minmax(0,1fr))} .sk-tools .btn,.sk-foot .btn{min-height:28px} } /* la tabla de apuntes (1.17.59) en el teléfono acostado: cuadrada dentro de la columna de la hoja, con la pinza más chica */ @media (max-height:520px) and (min-width:560px){ .sk-board{width:min(100%,calc(var(--lh) - 14px));min-width:0;margin:0 auto;padding:18px 6px 6px;border-radius:12px} .sk-clip{height:22px;top:2px;width:clamp(80px,30%,140px)} .sk-clip::before{top:6px;height:5px} .sk-clip::after{bottom:3px} } /* ===== 1.17.6 · Damas (damas.js): fichas de madera torneada que saltan; mismo marco que el Ajedrez ===== */ .dzd{display:flex;flex-direction:column;gap:10px; --dz-lt:#ecd6b0;--dz-dk:#8f5f37;--dz-fr1:#5a371e;--dz-fr2:#2e1a0c;--dz-num:rgba(255,236,200,.38)} .dzd[data-board="marmol"]{--dz-lt:#eeebe3;--dz-dk:#7f978a;--dz-fr1:#6f7a74;--dz-fr2:#38403c;--dz-num:rgba(255,255,255,.42)} .dzd[data-board="jade"]{--dz-lt:#e3eedb;--dz-dk:#3f7d5f;--dz-fr1:#2f5a46;--dz-fr2:#143024;--dz-num:rgba(230,255,240,.4)} .dz-defs{position:absolute;width:0;height:0;overflow:hidden} .dz-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .dzd .so-vars[hidden],.dz-btns [hidden]{display:none} .dz-newb{margin-left:auto} .dz-main{display:flex;gap:16px;align-items:flex-start} .dz-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .dz-frame{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 200px),780px);min-width:260px;padding:clamp(8px,2.2%,18px);box-sizing:border-box;border-radius:14px; background:linear-gradient(145deg,var(--dz-fr1),var(--dz-fr2));box-shadow:0 18px 40px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.35)} .dz-board{--n:8;position:relative;aspect-ratio:1;width:100%;border-radius:4px;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 0 4px rgba(232,198,120,.35);touch-action:none;user-select:none;-webkit-user-select:none} .dz-sqs{position:absolute;inset:0;display:grid;grid-template:repeat(var(--n),1fr)/repeat(var(--n),1fr);outline:none} .dz-row{display:contents} .dz-sq{position:relative;background:var(--dz-lt)} .dz-sq.dk{background:var(--dz-dk)} .dz-sq.dk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,rgba(0,0,0,.03) 2px 5px);pointer-events:none} .dz-num{position:absolute;left:5%;top:3%;font:700 clamp(7px,1.2vmin,10px)/1 system-ui,sans-serif;color:var(--dz-num);pointer-events:none} .dz-sq.last{box-shadow:inset 0 0 0 999px rgba(255,214,90,.32)} .dz-sq.sel{box-shadow:inset 0 0 0 999px rgba(110,190,255,.45)} .dz-sq.must{box-shadow:inset 0 0 0 3px #ffd54a} .dz-sq.must.pulse{animation:dz-pulse .7s ease 2} @keyframes dz-pulse{50%{box-shadow:inset 0 0 0 999px rgba(255,213,74,.5)}} .dz-sq.hint{box-shadow:inset 0 0 0 999px rgba(124,247,195,.4),inset 0 0 0 3px #3ee0a0} .dz-sq.mv::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,240,200,.55);box-shadow:0 0 0 3px rgba(0,0,0,.18)} .dz-sqs:focus-visible .dz-sq.cur{outline:3px solid #fff;outline-offset:-3px} .dz-pcs{position:absolute;inset:0;pointer-events:none} .dz-pc{position:absolute;left:0;top:0;width:calc(100% / var(--n));height:calc(100% / var(--n));transform:translate(calc(var(--c,0) * 100%),calc(var(--r,0) * 100%));transition:transform .2s cubic-bezier(.3,.7,.25,1);will-change:transform} .dz-pc svg{display:block;width:84%;height:84%;margin:8%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))} .dz-pc.moving{z-index:4} .dz-pc.moving svg{transform:scale(1.08)} .dz-pc.drag{transition:none;z-index:5} .dz-pc.drag svg{transform:scale(1.14);filter:drop-shadow(0 10px 8px rgba(0,0,0,.45))} .dz-pc.taken{opacity:.45} .dz-pc.gone{opacity:0;transition:opacity .25s ease,transform .2s} .dz-pc.crown svg{animation:dz-crown .6s ease} @keyframes dz-crown{40%{transform:scale(1.25) rotate(-6deg)}} .dzd.thinking .dz-pl.on{animation:dz-think 1.2s ease-in-out infinite} @keyframes dz-think{50%{border-color:transparent}} .dz-side{flex:0 0 270px;display:flex;flex-direction:column;gap:8px;min-width:0} .dz-pl{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,currentColor 6%,transparent)} .dz-pl.on{border-color:var(--accent,#d9a441)} .dz-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(0,0,0,.6);flex:none} .dz-dot.w{background:#f3e5c8}.dz-dot.b{background:#1d1d22;border-color:rgba(255,255,255,.5)} .dz-cnt{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;opacity:.85} .dz-cap{font-weight:700;font-size:13px;opacity:.8} .dz-status{min-height:1.4em;margin:0} .dz-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .dz-list{margin:0;padding:6px 10px;list-style:none;max-height:min(40vh,320px);min-height:80px;overflow:auto;border-radius:12px;background:color-mix(in srgb,currentColor 5%,transparent);font-variant-numeric:tabular-nums;font-size:14px} .dz-list li{display:grid;grid-template-columns:2.4em 1fr 1fr;gap:6px;padding:1px 0} .dz-list li i{font-style:normal;opacity:.55;text-align:right} .dz-btns{display:flex;flex-wrap:wrap;gap:6px} .dz-btns .btn{flex:1 1 auto} .dz-foot{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:13px} .dz-foot .btn{margin-left:auto} @media (max-width:900px){ .dz-main{flex-direction:column;align-items:stretch} .dz-frame{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 320px),640px)} .dz-side{flex:none} .dz-list{max-height:140px;min-height:0} } @media (max-width:640px){ .dz-top .so-vars{flex-wrap:wrap} .dz-newb{margin-left:0;width:100%} .dz-frame{width:100%;min-width:0;padding:6px;border-radius:10px} .dz-num{display:none} } @media (prefers-reduced-motion:reduce){ .dz-pc,.dz-pc.gone{transition:none} .dz-sq.must.pulse,.dz-pc.crown svg,.dzd.thinking .dz-pl.on{animation:none} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) ---------- Como en el Ajedrez: con 520 px de alto o menos, el tablero a la izquierda con todo el alto libre (--fw-h) y, a la derecha, los controles, el panel y el pie en una columna (antes el panel quedaba debajo y había que bajar). Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .dzd{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,var(--lh)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 12px;height:var(--lh);box-sizing:border-box} .dz-main{display:contents} .dz-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .dz-frame{width:100%;min-width:0;padding:6px;border-radius:10px} .dz-top{grid-column:2;grid-row:1;gap:4px 6px} .dz-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .dz-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .dz-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .dz-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:4px;overflow:auto} .dz-side>*{flex-shrink:0} .dz-pl{min-height:0;padding:2px 8px;gap:6px;font-size:13.5px} .dz-status{font-size:13.5px;min-height:1.3em} .dz-side>.dz-list{flex:1 1 0;min-height:0;max-height:none;padding:2px 8px;font-size:13px} .dz-btns{gap:4px} .dz-btns .btn{min-height:30px;padding:0 6px;font-size:12.5px} .dz-foot{grid-column:2;grid-row:3;gap:4px 6px;flex-wrap:nowrap} .dz-foot .so-seg{min-height:28px;padding:0 7px;font-size:12.5px} .dz-foot .btn{min-height:32px;padding:0 10px} .dzd>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .dzd:has(>.gk-rules:not([hidden])) .dz-side{display:none} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .dzd{row-gap:4px} /* cada grupo en su renglón, con botones del mismo ancho; un nombre largo se parte en dos líneas en vez de bajar el grupo */ .dz-top .so-vars{width:100%;flex-wrap:nowrap} .dz-top .so-seg{flex:1 1 0;min-width:0;min-height:26px;padding:2px 4px;font-size:12px;line-height:1.15;white-space:normal} .dz-foot .so-seg{min-height:26px;padding:0 6px;font-size:12px} .dz-newb{min-height:30px} .dz-pl{padding:0 8px;min-height:26px;font-size:13px} .dz-side>.dz-list{display:none} /* las Damas traen un grupo más arriba (inglesas o internacionales): aquí no queda alto para la lista */ .dz-status{font-size:13px} .dz-btns{flex-wrap:nowrap} /* los cuatro botones en un renglón */ .dz-btns .btn{min-width:0;min-height:28px;padding:0 3px;font-size:11.5px} .dz-foot .btn{min-height:30px;padding:0 8px;font-size:13px} } /* ===== 1.19.17 · Materiales reales: la mesa del club (Andre, 21 oct: «Están muy planos»; 28 oct: seguir con los juegos). Marquetería: cada casilla con su veta (las claras a lo largo, las oscuras a lo ancho), un filo de latón entre el tablero y el marco de nogal con bisel, y la luz de una lámpara que cae desde arriba. El lado es una tablilla de nogal: los jugadores en placas de latón grabadas, las jugadas en una planilla de papel con renglones, y botones de boj que se hunden. ===== */ .dzd .dz-frame{position:relative; background:radial-gradient(120% 70% at 50% -12%,rgba(255,214,160,.26),transparent 60%),var(--gk-grain-h) 0 0/600px 120px,linear-gradient(160deg,var(--dz-fr1),var(--dz-fr2)); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.42),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.55),0 18px 36px -14px rgba(0,0,0,.7),0 4px 8px -2px rgba(0,0,0,.35)} .dzd:not([data-board="nogal"]) .dz-frame{background:radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.22),transparent 60%),var(--gk-stone) 0 0/400px 400px,linear-gradient(160deg,var(--dz-fr1),var(--dz-fr2))} .dzd .dz-board{box-shadow:0 0 0 1.5px #b88c3e,0 0 0 3px rgba(46,24,6,.8),0 0 0 4px rgba(255,236,190,.22),0 2px 6px 3px rgba(0,0,0,.35)} /* la veta de cada casilla (variada con nth-child para que no se repita) */ .dzd .dz-sq::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--gk-grain-h) var(--gx,0) var(--gy,0)/340px 68px;mix-blend-mode:multiply;opacity:.32} .dzd .dz-sq.dk::before{background:var(--gk-grain-v) var(--gy,0) var(--gx,0)/68px 340px;opacity:.42} .dzd .dz-sq:nth-child(3n+1){--gx:-120px}.dzd .dz-sq:nth-child(3n+2){--gx:-245px}.dzd .dz-sq:nth-child(4n){--gy:-30px} .dzd .dz-row:nth-child(2n) .dz-sq{--gy:-17px}.dzd .dz-row:nth-child(3n) .dz-sq:nth-child(odd){--gx:-60px} .dzd:not([data-board="nogal"]) .dz-sq::before,.dzd:not([data-board="nogal"]) .dz-sq.dk::before{background:var(--gk-stone) var(--gx,0) var(--gy,0)/260px 260px;mix-blend-mode:multiply;opacity:.38} /* la luz de la lámpara y la sombra del marco sobre el tablero (encima de las casillas, debajo de las piezas) */ .dzd .dz-sqs::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:radial-gradient(75% 60% at 50% 6%,rgba(255,240,205,.2),transparent 70%),radial-gradient(140% 120% at 50% 40%,transparent 55%,rgba(20,8,0,.28)); box-shadow:inset 0 8px 14px -8px rgba(0,0,0,.5),inset 0 -4px 10px -6px rgba(0,0,0,.35)} /* la tablilla del lado */ .dzd .dz-side{padding:12px;border-radius:16px;color:#f6e7c8; background:radial-gradient(120% 50% at 50% -5%,rgba(255,214,160,.22),transparent 60%),var(--gk-grain-h) -80px 0/600px 120px,linear-gradient(180deg,#6e4222,#4f2c14 50%,#3c200c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 14px 28px -14px rgba(0,0,0,.65)} .dzd .dz-side .gk-msg{color:#fbeccb;text-shadow:0 1px 0 rgba(0,0,0,.55)} /* placas de latón: el nombre grabado, dos tornillos y, la que juega, encendida */ .dzd .dz-pl{position:relative;padding-left:20px;padding-right:20px;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55); background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .dzd .dz-pl::before,.dzd .dz-pl::after{content:"";position:absolute;top:50%;left:7px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none; background:linear-gradient(135deg,transparent 42%,rgba(60,38,8,.75) 44% 56%,transparent 58%),radial-gradient(circle at 35% 35%,#fff0c4,#b48a3c 60%,#6b4c16);box-shadow:0 0 0 .5px rgba(50,30,6,.6)} .dzd .dz-pl::after{left:auto;right:7px} .dzd .dz-pl b{letter-spacing:.02em} .dzd .dz-pl.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.55),0 0 16px 2px rgba(255,196,80,.45)} .dzd.thinking .dz-pl.on{animation:dz-glow 1.2s ease-in-out infinite} @keyframes dz-glow{50%{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.15),0 0 6px rgba(255,196,80,.15)}} /* la planilla: papel con renglones y su margen rojo; los renglones se mueven con las jugadas */ .dzd .dz-list{padding:0 10px 0 6px;border-radius:3px;color:#2a2418;font:15px/22px Georgia,'DejaVu Serif',serif; background:linear-gradient(90deg,transparent 2.75em,rgba(196,64,52,.45) 2.75em,rgba(196,64,52,.45) calc(2.75em + 1px),transparent calc(2.75em + 1px)), repeating-linear-gradient(180deg,transparent 0 21px,rgba(70,100,170,.26) 21px 22px),var(--gk-fiber) 0 0/160px 160px,linear-gradient(180deg,#fbf4e2,#f1e6cb); background-attachment:local;background-blend-mode:normal,normal,soft-light,normal; box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 3px 6px -1px rgba(0,0,0,.45),0 0 0 1px rgba(80,55,20,.35)} .dzd .dz-list li{padding:0;min-height:22px} .dzd .dz-list li i{color:rgba(120,60,40,.75);font-style:italic} /* botones de boj: claros, con canto, que se hunden al tocarlos */ .dzd .dz-side .btn{border:1px solid rgba(60,36,12,.6);border-radius:8px;color:#3a2610;text-shadow:0 1px 0 rgba(255,248,226,.6); background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#f4e5c4,#dcc391);background-blend-mode:soft-light,normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s} .dzd .dz-side .btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(80,50,15,.35),0 0 0 #8a6634,0 1px 2px rgba(0,0,0,.3)} .dzd .dz-side .btn:disabled{opacity:.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6634} .dzd .dz-side .btn:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px} @media (max-height:520px) and (min-width:560px){ .dzd .dz-side{padding:6px;border-radius:12px} .dzd .dz-list{font-size:13.5px;line-height:20px;background-size:auto,auto 20px,160px 160px,auto} .dzd .dz-list{background-image:linear-gradient(90deg,transparent 2.75em,rgba(196,64,52,.45) 2.75em,rgba(196,64,52,.45) calc(2.75em + 1px),transparent calc(2.75em + 1px)),repeating-linear-gradient(180deg,transparent 0 19px,rgba(70,100,170,.26) 19px 20px),var(--gk-fiber),linear-gradient(180deg,#fbf4e2,#f1e6cb)} .dzd .dz-list li{min-height:20px} } @media (prefers-reduced-motion:reduce){ .dzd.thinking .dz-pl.on{animation:none} .dzd .dz-side .btn{transition:none} } .dzd .dz-cnt,.dzd .dz-cap{color:#2b1c08;opacity:.9} .dzd .dz-pcs{z-index:2} /* ===== 1.17.7 · Reversi (reversi.js): paño verde y fichas que son discos de vinilo (negro y perla) que giran ===== */ .rvd{display:flex;flex-direction:column;gap:10px;--rv-felt1:#2a7d58;--rv-felt2:#155238;--rv-line:rgba(0,0,0,.32)} .rv-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .rvd .so-vars[hidden]{display:none} .rv-newb{margin-left:auto} .rv-main{display:flex;gap:16px;align-items:flex-start} .rv-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .rv-frame{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 200px),720px);min-width:260px;padding:clamp(8px,2.2%,18px);box-sizing:border-box;border-radius:14px;background:linear-gradient(145deg,#4a2c17,#22130a);box-shadow:0 18px 40px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.16)} .rv-board{position:relative;aspect-ratio:1;width:100%;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 0 4px rgba(232,198,120,.3);background:radial-gradient(120% 100% at 50% 0%,var(--rv-felt1),var(--rv-felt2));user-select:none;-webkit-user-select:none} .rv-board::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,rgba(0,0,0,.03) 2px 4px)} .rv-sqs{position:absolute;inset:0;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr);outline:none} .rv-row{display:contents} .rv-sq{position:relative;border-right:1px solid var(--rv-line);border-bottom:1px solid var(--rv-line);cursor:pointer;perspective:500px} .rv-sq:nth-child(8){border-right:0} .rv-row:last-child .rv-sq{border-bottom:0} /* los cuatro puntos del tablero */ .rv-sq#rv-s18::before,.rv-sq#rv-s21::before,.rv-sq#rv-s42::before,.rv-sq#rv-s45::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.4);transform:translate(-50%,-50%)} .rv-sq#rv-s18::before,.rv-sq#rv-s42::before{left:100%;top:100%} .rv-sq#rv-s21::before,.rv-sq#rv-s45::before{left:0;top:100%} .rv-rk,.rv-fl{position:absolute;font:700 clamp(8px,1.4vmin,11px)/1 system-ui,sans-serif;color:rgba(230,255,240,.42);pointer-events:none} .rv-rk{left:4%;top:4%}.rv-fl{right:5%;bottom:4%} .rv-dot{position:absolute;left:50%;top:50%;width:22%;height:22%;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:rgba(255,255,255,.28);box-shadow:0 0 0 2px rgba(0,0,0,.18);transition:transform .2s} .rv-sq.can .rv-dot{transform:translate(-50%,-50%) scale(1)} .rv-sq.can:hover .rv-dot{background:rgba(255,255,255,.55)} .rv-sq.last{box-shadow:inset 0 0 0 999px rgba(255,214,90,.22)} .rv-sq.hint{box-shadow:inset 0 0 0 999px rgba(124,247,195,.35),inset 0 0 0 3px #3ee0a0} .rv-sq.no{animation:rv-no .35s ease} @keyframes rv-no{30%{box-shadow:inset 0 0 0 999px rgba(255,60,60,.35)}} .rv-sqs:focus-visible .rv-sq.cur{outline:3px solid #fff;outline-offset:-3px} /* el disco: dos caras de vinilo; .w lo gira para mostrar la perla */ .rv-disc{position:absolute;inset:8%;transform-style:preserve-3d;transition:transform .32s cubic-bezier(.4,.1,.3,1.3);pointer-events:none} .rv-disc.w{transform:rotateY(180deg)} .rv-a,.rv-b{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 3px rgba(0,0,0,.45),0 6px 10px -6px rgba(0,0,0,.6)} .rv-a{background:radial-gradient(circle,#d9493a 0 15%,#a52a1e 15.5% 20%,transparent 20.5%),repeating-radial-gradient(circle,#141418 0 1.6%,#26262c 1.8% 3.2%),#141418} .rv-a::after,.rv-b::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 12%,rgba(255,255,255,.22) 18%,transparent 26% 62%,rgba(255,255,255,.12) 68%,transparent 75%)} .rv-b{transform:rotateY(180deg);background:radial-gradient(circle,#3a7fd0 0 15%,#245a9c 15.5% 20%,transparent 20.5%),repeating-radial-gradient(circle,#f3efe6 0 1.6%,#dcd5c6 1.8% 3.2%),#f3efe6} .rv-disc.drop{animation:rv-drop .28s cubic-bezier(.3,1.5,.5,1)} .rv-disc.drop.w{animation-name:rv-dropw} @keyframes rv-drop{from{transform:scale(1.6);opacity:0}} @keyframes rv-dropw{from{transform:rotateY(180deg) scale(1.6);opacity:0}} .rvd.thinking .rv-pl.on{animation:rv-think 1.2s ease-in-out infinite} @keyframes rv-think{50%{border-color:transparent}} .rv-side{flex:0 0 250px;display:flex;flex-direction:column;gap:8px;min-width:0} .rv-pl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,currentColor 6%,transparent)} .rv-pl.on{border-color:var(--accent,#d9a441)} .rv-chip{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.5)} .rv-chip.b{background:radial-gradient(circle,#d9493a 0 20%,#141418 22%)} .rv-chip.w{background:radial-gradient(circle,#3a7fd0 0 20%,#f3efe6 22%)} .rv-n{margin-left:auto;font:700 22px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums} .rv-bar{height:8px;border-radius:99px;background:#f3efe6;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)} .rv-bar i{display:block;height:100%;background:#141418;transition:width .4s ease} .rv-status{min-height:2.6em;margin:0} .rv-btns{display:flex;gap:6px} .rv-btns .btn{flex:1 1 auto} .rv-opt{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer} .rv-foot{display:flex;justify-content:flex-end} @media (max-width:900px){ .rv-main{flex-direction:column;align-items:stretch} .rv-frame{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 330px),620px)} .rv-side{flex:none} } @media (max-width:640px){ .rv-top .so-vars{flex-wrap:wrap} .rv-newb{margin-left:0;width:100%} .rv-frame{width:100%;min-width:0;padding:6px;border-radius:10px} } @media (prefers-reduced-motion:reduce){ .rv-disc,.rv-dot,.rv-bar i{transition:none} .rv-disc.drop,.rv-sq.no,.rvd.thinking .rv-pl.on{animation:none} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) ---------- Como en el Ajedrez: con 520 px de alto o menos, el paño a la izquierda con todo el alto libre (--fw-h) y, a la derecha, los controles, el marcador y los botones en una columna (antes quedaban debajo y había que bajar). Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .rvd{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,var(--lh)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 12px;height:var(--lh);box-sizing:border-box} .rv-main{display:contents} .rv-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .rv-frame{width:100%;min-width:0;padding:6px;border-radius:10px} .rv-top{grid-column:2;grid-row:1;gap:4px 6px} .rv-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .rv-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .rv-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .rv-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:5px;overflow:auto} .rv-side>*{flex-shrink:0} .rv-pl{padding:3px 10px;font-size:13.5px} .rv-n{font-size:19px} .rv-status{min-height:2.5em;font-size:13.5px} .rv-btns .btn{min-height:30px;padding:0 6px;font-size:12.5px} .rv-foot{grid-column:2;grid-row:3} .rv-foot .btn{min-height:32px;padding:0 10px} .rvd>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .rvd:has(>.gk-rules:not([hidden])) .rv-side{display:none} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .rvd{row-gap:4px} .rv-top .so-vars{width:100%;flex-wrap:nowrap} .rv-top .so-seg{flex:1 1 0;min-width:0;min-height:28px;padding:2px 4px;font-size:12px;line-height:1.15;white-space:normal} .rv-newb{min-height:30px} .rv-pl{padding:2px 8px;font-size:13px} .rv-status{font-size:13px;min-height:1.3em} .rv-opt{font-size:12px} .rv-btns .btn,.rv-foot .btn{min-height:28px;font-size:12.5px} } /* ===== 1.19.17 · Materiales reales: la mesa de paño (Andre, 21 oct: «Están muy planos»; 28 oct: seguir con los juegos). Marco de nogal con veta y bisel y un filo de latón; paño con fibra, la luz de la lámpara y la sombra del marco; las líneas del tablero cosidas en el paño. El lado, como en el Ajedrez: tablilla de nogal, placas de latón con un contador grabado, una barra de marfil y ébano y botones de boj. ===== */ .rvd .rv-frame{background:radial-gradient(120% 70% at 50% -12%,rgba(255,214,160,.26),transparent 60%),var(--gk-grain-h) 0 0/600px 120px,linear-gradient(160deg,#5a341a,#2a170a); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.42),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.55),0 18px 36px -14px rgba(0,0,0,.7),0 4px 8px -2px rgba(0,0,0,.35)} .rvd .rv-board{background:var(--gk-fiber) 0 0/160px 160px,radial-gradient(70% 55% at 50% 6%,rgba(255,236,190,.2),transparent 70%),radial-gradient(120% 100% at 50% 0%,var(--rv-felt1),var(--rv-felt2)); background-blend-mode:soft-light,normal,normal;box-shadow:0 0 0 1.5px #b88c3e,0 0 0 3px rgba(46,24,6,.8),0 0 0 4px rgba(255,236,190,.22),0 2px 6px 3px rgba(0,0,0,.35)} .rvd .rv-board::before{opacity:1;background:none;box-shadow:inset 0 10px 18px -6px rgba(0,0,0,.5),inset 0 -6px 14px -8px rgba(0,0,0,.4),inset 8px 0 14px -10px rgba(0,0,0,.4),inset -8px 0 14px -10px rgba(0,0,0,.4);z-index:3} /* las líneas: un surco oscuro con su orilla clara, como costura en el paño */ .rvd .rv-sq{border-right-color:rgba(0,0,0,.38);border-bottom-color:rgba(0,0,0,.38)} .rvd .rv-sq::after{content:"";position:absolute;inset:0;pointer-events:none;border-right:1px solid rgba(190,255,215,.07);border-bottom:1px solid rgba(190,255,215,.07);transform:translate(1px,1px)} .rvd .rv-sq:nth-child(8)::after,.rvd .rv-row:last-child .rv-sq::after{display:none} /* las fichas: una sombra de contacto más honda en el paño */ .rvd .rv-a,.rvd .rv-b{box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 2px rgba(0,0,0,.5),0 7px 10px -5px rgba(0,0,0,.65)} /* la tablilla */ .rvd .rv-side{padding:12px;border-radius:16px;color:#f6e7c8; background:radial-gradient(120% 50% at 50% -5%,rgba(255,214,160,.22),transparent 60%),var(--gk-grain-h) -80px 0/600px 120px,linear-gradient(180deg,#6e4222,#4f2c14 50%,#3c200c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 14px 28px -14px rgba(0,0,0,.65)} .rvd .rv-side .gk-msg{color:#fbeccb;text-shadow:0 1px 0 rgba(0,0,0,.55)} .rvd .rv-opt{color:#f6e7c8} .rvd .rv-opt input{accent-color:#c9a352} .rvd .rv-pl{position:relative;padding-left:20px;padding-right:20px;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55); background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .rvd .rv-pl::before,.rvd .rv-pl::after{content:"";position:absolute;top:50%;left:7px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none; background:linear-gradient(135deg,transparent 42%,rgba(60,38,8,.75) 44% 56%,transparent 58%),radial-gradient(circle at 35% 35%,#fff0c4,#b48a3c 60%,#6b4c16);box-shadow:0 0 0 .5px rgba(50,30,6,.6)} .rvd .rv-pl::after{left:auto;right:7px} .rvd .rv-pl.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.55),0 0 16px 2px rgba(255,196,80,.45)} .rvd.thinking .rv-pl.on{animation:rv-glow 1.2s ease-in-out infinite} @keyframes rv-glow{50%{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.15),0 0 6px rgba(255,196,80,.15)}} /* el contador: una ventanita hundida en la placa, con el número en marfil */ .rvd .rv-n{min-width:2.1em;padding:3px 6px;border-radius:5px;text-align:center;color:#f7ecd2;text-shadow:0 1px 0 rgba(0,0,0,.6);font-size:20px; background:linear-gradient(180deg,#1c140c,#2e2215);box-shadow:inset 0 2px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,250,225,.55)} /* la barra: marfil y ébano incrustados en la madera */ .rvd .rv-bar{height:10px;background:linear-gradient(180deg,#fbf6ea,#e2d8c2);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,222,176,.25),0 0 0 1.5px rgba(30,14,4,.7)} .rvd .rv-bar i{background:linear-gradient(180deg,#2a2a30,#0e0e12)} .rvd .rv-side .btn{border:1px solid rgba(60,36,12,.6);border-radius:8px;color:#3a2610;text-shadow:0 1px 0 rgba(255,248,226,.6); background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#f4e5c4,#dcc391);background-blend-mode:soft-light,normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s} .rvd .rv-side .btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(80,50,15,.35),0 0 0 #8a6634,0 1px 2px rgba(0,0,0,.3)} .rvd .rv-side .btn:disabled{opacity:.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6634} .rvd .rv-side .btn:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px} @media (max-height:520px) and (min-width:560px){ .rvd .rv-side{padding:6px;border-radius:12px} .rvd .rv-n{font-size:16px;padding:1px 5px} } @media (prefers-reduced-motion:reduce){ .rvd.thinking .rv-pl.on{animation:none} .rvd .rv-side .btn{transition:none} } /* ===== 1.17.8 · Cuatro en línea (cuatro.js): marco de plástico cobalto con 42 agujeros; las fichas caen por detrás ===== */ .c4d{display:flex;flex-direction:column;gap:10px;--c4-f1:#2f63d8;--c4-f2:#173a8f;--c4-a1:#ff7a6b;--c4-a2:#d9362a;--c4-b1:#ffe17a;--c4-b2:#e7a51c} .c4-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .c4d .so-vars[hidden]{display:none} .c4-newb{margin-left:auto} .c4-main{display:flex;gap:18px;align-items:flex-start} .c4-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .c4-stage{position:relative;width:min(100%,calc((100dvh + var(--fw-gain,0px) - 230px) * .92),700px);min-width:260px} .c4-board{position:relative;display:grid;grid-template-rows:auto auto auto;user-select:none;-webkit-user-select:none} .c4-lane{position:relative;aspect-ratio:7/1;width:100%} .c4-well{position:relative;aspect-ratio:7/6;width:100%;border-radius:12px;background:radial-gradient(120% 90% at 50% 0%,#0d1838,#060b1c);box-shadow:0 18px 40px -16px rgba(0,0,0,.7)} .c4-discs{position:absolute;inset:0;overflow:hidden;border-radius:12px} .c4-frame-svg,.c4-win{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .c4-frame-svg{filter:drop-shadow(0 2px 0 rgba(255,255,255,.12))} .c4-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)} .c4-col{border:0;background:none;padding:0;cursor:pointer;border-radius:10px} .c4-col:hover:not(:disabled),.c4-col.on:not(:disabled){background:rgba(255,255,255,.06)} .c4-col.hint{background:rgba(124,247,195,.16);box-shadow:inset 0 0 0 3px #3ee0a0} .c4-col:disabled{cursor:default} .c4-col:focus-visible{outline:3px solid #fff;outline-offset:-3px} .c4-disc{position:absolute;left:0;top:0;width:calc(100% / 7);height:calc(100% / 6);transform:translate(calc(var(--c,0) * 100%),calc(var(--r,0) * 100%))} .c4-disc::before{content:"";position:absolute;inset:9%;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.35)} .c4-disc::after{content:"";position:absolute;inset:27%;border-radius:50%;box-shadow:inset 0 2px 0 rgba(0,0,0,.16),0 1px 0 rgba(255,255,255,.3)} .c4-disc.a::before{background:radial-gradient(circle at 35% 30%,var(--c4-a1),var(--c4-a2))} .c4-disc.b::before{background:radial-gradient(circle at 35% 30%,var(--c4-b1),var(--c4-b2))} .c4-ghost{height:100%;opacity:.75;transition:transform .15s ease} .c4-ghost[hidden]{display:none} .c4-disc.fall{animation:c4-fall calc(.18s + var(--fall,1) * .045s) cubic-bezier(.5,0,1,.6),c4-bounce .22s ease-out calc(.18s + var(--fall,1) * .045s)} @keyframes c4-fall{from{transform:translate(calc(var(--c) * 100%),calc((var(--r) - var(--fall) - 1) * 100%))}} @keyframes c4-bounce{40%{transform:translate(calc(var(--c) * 100%),calc((var(--r) - .14) * 100%))}} .c4-disc.win::before{animation:c4-glow 1s ease var(--wd,0ms) infinite alternate} @keyframes c4-glow{to{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 0 0 4px #fff,0 0 22px 6px rgba(255,255,255,.7)}} .c4-win line{stroke:#fff;stroke-width:12;stroke-linecap:round;opacity:0;stroke-dasharray:500;stroke-dashoffset:500;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))} .c4-win.on line{opacity:.85;animation:c4-line .5s ease .5s forwards} @keyframes c4-line{to{stroke-dashoffset:0}} .c4-feet{display:flex;justify-content:space-between;padding:0 6%} .c4-feet i{width:12%;height:14px;border-radius:0 0 8px 8px;background:linear-gradient(var(--c4-f2),#0c225a)} .c4-stage .gk-win{border-radius:12px} .c4d.thinking .c4-pl.on{animation:c4-think 1.2s ease-in-out infinite} @keyframes c4-think{50%{border-color:transparent}} .c4-side{flex:0 0 250px;display:flex;flex-direction:column;gap:8px;min-width:0;padding-top:calc(min(100%,700px) / 7 * 0)} .c4-pl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,currentColor 6%,transparent)} .c4-pl.on{border-color:var(--accent,#d9a441)} .c4-chip{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)} .c4-chip.a{background:radial-gradient(circle at 35% 30%,var(--c4-a1),var(--c4-a2))}.c4-chip.b{background:radial-gradient(circle at 35% 30%,var(--c4-b1),var(--c4-b2))} .c4-status{min-height:2.6em;margin:0} .c4-btns{display:flex;gap:6px}.c4-btns .btn{flex:1 1 auto} .c4-foot{display:flex;justify-content:flex-end} @media (max-width:900px){ .c4-main{flex-direction:column;align-items:stretch} .c4-stage{width:min(100%,calc((100dvh + var(--fw-gain,0px) - 340px) * .92),600px)} .c4-side{flex:none} } @media (max-width:640px){ .c4-top .so-vars{flex-wrap:wrap} .c4-newb{margin-left:0;width:100%} .c4-stage{width:100%;min-width:0} } @media (prefers-reduced-motion:reduce){ .c4-disc.fall,.c4-disc.win::before,.c4-win.on line{animation:none} .c4-win.on line{stroke-dashoffset:0} .c4-ghost{transition:none} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) ---------- Como en el Ajedrez: con 520 px de alto o menos, el marco a la izquierda con todo el alto libre (--fw-h; el marco mide su ancho más las patas, 14 px) y, a la derecha, los controles y el panel en una columna. Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .c4d{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,calc(var(--lh) - 14px)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:6px 12px;height:var(--lh);box-sizing:border-box} .c4-main{display:contents} .c4-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .c4-stage{width:100%;min-width:0} .c4-top{grid-column:2;grid-row:1;gap:4px 6px} .c4-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .c4-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .c4-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .c4-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:5px;overflow:auto;padding-top:0} .c4-side>*{flex-shrink:0} .c4-pl{padding:4px 10px;font-size:13.5px} .c4-status{min-height:2.5em;font-size:13.5px} .c4-btns .btn{min-height:30px;padding:0 6px;font-size:12.5px} .c4-foot{grid-column:2;grid-row:3} .c4-foot .btn{min-height:32px;padding:0 10px} .c4d>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .c4d:has(>.gk-rules:not([hidden])) .c4-side{display:none} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .c4d{row-gap:4px} .c4-top .so-vars{width:100%;flex-wrap:nowrap} .c4-top .so-seg{flex:1 1 0;min-width:0;min-height:28px;padding:2px 4px;font-size:12px;line-height:1.15;white-space:normal} .c4-newb{min-height:30px} .c4-pl{padding:2px 8px;font-size:13px} .c4-status{font-size:13px} .c4-btns .btn,.c4-foot .btn{min-height:28px;font-size:12.5px} } /* ===== 1.19.19 · Materiales reales: el juguete de plástico sobre la mesa del club (Andre, 21 oct: «Están muy planos»). El marco es plástico moldeado (brillo de lámpara, canto en cada agujero y bisel; c4FrameSVG); el fondo, un panel trasero que deja ver la oscuridad; las fichas, plástico grueso con sus surcos concéntricos y un brillo que corre al caer. El lado, como en el Ajedrez: tablilla de nogal, placas de latón y botones de boj. ===== */ .c4d .c4-well{background:radial-gradient(60% 50% at 50% 30%,#16264f,#070d22 70%),#070d22;box-shadow:0 22px 40px -16px rgba(0,0,0,.75),0 4px 10px -2px rgba(0,0,0,.4)} .c4d .c4-frame-svg{filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))} /* la ficha: canto grueso, surcos y brillo */ .c4d .c4-disc::before{box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.45),inset 0 0 0 2px rgba(0,0,0,.12),0 2px 3px rgba(0,0,0,.45)} .c4d .c4-disc.a::before{background:radial-gradient(60% 40% at 38% 26%,rgba(255,255,255,.55),transparent 70%),repeating-radial-gradient(circle,rgba(0,0,0,0) 0 6%,rgba(0,0,0,.08) 6.5% 7.5%,rgba(255,255,255,.07) 8% 9%),radial-gradient(circle at 35% 30%,var(--c4-a1),var(--c4-a2))} .c4d .c4-disc.b::before{background:radial-gradient(60% 40% at 38% 26%,rgba(255,255,255,.6),transparent 70%),repeating-radial-gradient(circle,rgba(0,0,0,0) 0 6%,rgba(0,0,0,.07) 6.5% 7.5%,rgba(255,255,255,.08) 8% 9%),radial-gradient(circle at 35% 30%,var(--c4-b1),var(--c4-b2))} .c4d .c4-disc::after{box-shadow:inset 0 2px 1px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.4)} /* las patas: el mismo plástico con su brillo */ .c4d .c4-feet i{height:16px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 30% 70%,rgba(0,0,0,.2)),linear-gradient(var(--c4-f2),#0b1f52);box-shadow:0 6px 8px -4px rgba(0,0,0,.6)} /* las fichas de las placas, iguales a las del tablero */ .c4d .c4-chip{box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.4),0 1px 2px rgba(0,0,0,.5)} .c4d .c4-side{padding:12px;border-radius:16px;color:#f6e7c8; background:radial-gradient(120% 50% at 50% -5%,rgba(255,214,160,.22),transparent 60%),var(--gk-grain-h) -80px 0/600px 120px,linear-gradient(180deg,#6e4222,#4f2c14 50%,#3c200c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 14px 28px -14px rgba(0,0,0,.65)} .c4d .c4-side .gk-msg{color:#fbeccb;text-shadow:0 1px 0 rgba(0,0,0,.55)} .c4d .c4-pl{position:relative;padding-left:20px;padding-right:20px;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55); background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .c4d .c4-pl::before,.c4d .c4-pl::after{content:"";position:absolute;top:50%;left:7px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none; background:linear-gradient(135deg,transparent 42%,rgba(60,38,8,.75) 44% 56%,transparent 58%),radial-gradient(circle at 35% 35%,#fff0c4,#b48a3c 60%,#6b4c16);box-shadow:0 0 0 .5px rgba(50,30,6,.6)} .c4d .c4-pl::after{left:auto;right:7px} .c4d .c4-pl.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.55),0 0 16px 2px rgba(255,196,80,.45)} .c4d.thinking .c4-pl.on{animation:c4-pl-glow 1.2s ease-in-out infinite} @keyframes c4-pl-glow{50%{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.15),0 0 6px rgba(255,196,80,.15)}} .c4d .c4-side .btn{border:1px solid rgba(60,36,12,.6);border-radius:8px;color:#3a2610;text-shadow:0 1px 0 rgba(255,248,226,.6); background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#f4e5c4,#dcc391);background-blend-mode:soft-light,normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s} .c4d .c4-side .btn.primary{color:#fff8e4;text-shadow:0 1px 0 rgba(0,0,0,.45);background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#a3542c,#7a3618);border-color:rgba(40,14,4,.7);box-shadow:inset 0 1px 0 rgba(255,210,170,.5),0 2px 0 #4a1e0a,0 3px 5px rgba(0,0,0,.35)} .c4d .c4-side .btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(80,50,15,.35),0 0 0 #8a6634,0 1px 2px rgba(0,0,0,.3)} .c4d .c4-side .btn:disabled{opacity:.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6634} .c4d .c4-side .btn:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px} @media (max-height:520px) and (min-width:560px){ .c4d .c4-side{padding:6px;border-radius:12px} } @media (prefers-reduced-motion:reduce){ .c4d.thinking .c4-pl.on{animation:none} .c4d .c4-side .btn{transition:none} } /* ===== 1.17.9 · Palabra del día (palabra.js): una hoja en la máquina de escribir; cada letra se sella con tinta ===== */ .pald{display:flex;flex-direction:column;gap:10px; --pal-paper:#fbf7ec;--pal-paper2:#efe6d0;--pal-ink:#24212c;--pal-c:#2e8b6b;--pal-cT:#f4fff9;--pal-p:#d9a033;--pal-pT:#24212c;--pal-a:#ddd6c6;--pal-aT:#8b8476; --pal-body:#24564a;--pal-body2:#143229;--pal-key:#1c1e23;--pal-keyT:#f3eee0;--pal-rim:#c5c9cf; --pal-ts:clamp(36px,min(calc((100dvh + var(--fw-gain,0px) - 520px) / 6.3),14.2vw),62px); --pal-type:'Courier Prime','Courier New',Courier,ui-monospace,monospace} .pald.hc{--pal-c:#e2621c;--pal-cT:#fff;--pal-p:#3b86d4;--pal-pT:#fff} .pal-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .pal-statsb{margin-left:auto} .pal-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 0 6px;border-radius:14px} .pal-machine{align-self:stretch;display:flex;flex-direction:column;align-items:center} .pal-roller{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;width:min(calc(var(--pal-ts) * 5 + 96px),calc(100% - 16px));height:22px;border-radius:11px;background:linear-gradient(#41464e,#131519 58%,#2c3036);box-shadow:0 5px 9px -3px rgba(0,0,0,.55)} .pal-roller i{width:14px;height:32px;border-radius:5px;background:linear-gradient(90deg,#8e949c,#eef0f2 45%,#727881);box-shadow:0 2px 4px rgba(0,0,0,.4)} .pal-roller i:first-child{margin-left:-7px}.pal-roller i:last-child{margin-right:-7px} .pal-sheet{position:relative;margin-top:-9px;padding:18px 18px 18px;color:var(--pal-ink);border-radius:1px 1px 6px 6px; background:repeating-linear-gradient(transparent 0 29px,rgba(70,100,150,.07) 29px 30px),linear-gradient(var(--pal-paper),var(--pal-paper2)); box-shadow:0 16px 30px -16px rgba(0,0,0,.6),inset 0 12px 10px -9px rgba(0,0,0,.28)} .pal-sheet:focus-visible{outline:3px solid var(--accent,#d9a441);outline-offset:3px} .pal-no{margin:0 0 10px;text-align:center;font:700 12px/1.2 var(--pal-type);letter-spacing:.05em;color:#6e6658} .pal-board{display:grid;gap:6px} .pal-row{display:grid;grid-template-columns:repeat(5,var(--pal-ts));gap:6px} .pal-t{box-sizing:border-box;position:relative;width:var(--pal-ts);height:var(--pal-ts);display:grid;place-items:center;border-radius:4px;border:2px dashed rgba(70,58,44,.2);font:700 calc(var(--pal-ts) * .56)/1 var(--pal-type)} .pal-row.now .pal-t{border-color:rgba(70,58,44,.36)} .pal-t b{position:relative;z-index:1;transform:translate(var(--jx,0),var(--jy,0)) rotate(var(--jr,0));color:var(--pal-ink);text-shadow:0 0 1px rgba(36,33,44,.6)} .pal-t[data-s="t"]{border-style:solid;border-color:rgba(70,58,44,.5)} .pal-t.hit b{animation:pal-hit .15s ease-out} @keyframes pal-hit{from{transform:translate(var(--jx,0),calc(var(--jy,0) - 5px)) rotate(var(--jr,0)) scale(1.2);filter:blur(.7px)}} /* los tres sellos: cuadrado lleno (en su lugar), redondo (en otro lugar), sin tinta (no está) */ .pal-t[data-s="c"]{border:0;background:var(--pal-c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)} .pal-t[data-s="c"] b{color:var(--pal-cT);text-shadow:none} .pal-t[data-s="p"]{border:0} .pal-t[data-s="p"]::before{content:"";position:absolute;inset:5%;border-radius:50%;background:var(--pal-p)} .pal-t[data-s="p"] b{color:var(--pal-pT);text-shadow:none} .pal-t[data-s="a"]{border:0;background:var(--pal-a)} .pal-t[data-s="a"] b{color:var(--pal-aT);text-shadow:none} .pal-t.stamp{animation:pal-stamp .28s cubic-bezier(.3,1.5,.6,1)} @keyframes pal-stamp{0%{transform:scale(1.28) rotate(-5deg);opacity:.35}100%{transform:none;opacity:1}} .pal-t.win{animation:pal-jump .55s ease var(--wd,0ms)} @keyframes pal-jump{40%{transform:translateY(-12px)}70%{transform:translateY(2px)}} .pal-row.shake{animation:pal-shake .4s} @keyframes pal-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}} .pal-msg{margin:0;min-height:1.4em;text-align:center;max-width:52ch} /* el teclado: teclas redondas con aro de metal sobre la carcasa esmaltada */ .pal-kb{display:grid;gap:7px;width:min(100%,580px);padding:12px 12px 16px;border-radius:16px 16px 28px 28px;background:linear-gradient(var(--pal-body),var(--pal-body2));box-shadow:0 18px 30px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.14)} .pal-kr{display:flex;justify-content:center;gap:5px} .pal-k{flex:1 1 0;min-width:0;max-width:48px;aspect-ratio:1;padding:0;border-radius:50%;border:3px solid var(--pal-rim);background:radial-gradient(circle at 50% 34%,#3b3e45,var(--pal-key) 70%);color:var(--pal-keyT); font:700 clamp(12px,3.4vw,17px)/1 var(--pal-type);cursor:pointer;box-shadow:0 3px 0 #0a0b0d,0 6px 7px -3px rgba(0,0,0,.65);touch-action:manipulation;transition:transform .05s,box-shadow .05s} .pal-k:active{transform:translateY(2px);box-shadow:0 1px 0 #0a0b0d} .pal-k.wide{flex:1.7 1 0;max-width:82px;aspect-ratio:auto;border-radius:24px;font-size:clamp(10px,2.6vw,13px);display:grid;place-items:center} .pal-k[data-s="c"]{background:var(--pal-c);color:var(--pal-cT)} .pal-k[data-s="p"]{background:var(--pal-p);color:var(--pal-pT)} .pal-k[data-s="a"]{background:#454950;color:#8f949c;border-color:#73777f} /* estadísticas: el panel y la tarjeta del final */ .pal-panel{position:absolute;inset:0;z-index:45;display:grid;place-items:center;background:rgba(10,8,14,.42);border-radius:inherit} .pal-panel[hidden]{display:none} .pal-pcard{min-width:min(320px,88%);max-width:92%;padding:18px 22px;border-radius:18px;background:#fbf6e8;color:#1e2230;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)} .pal-pcard h3{margin:0 0 8px;font:700 20px/1.2 Georgia,'DejaVu Serif',serif} .pal-pcard .btn:not(.primary){background:#fffdf6;color:#1e2230;text-shadow:none} .pal-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0 10px} .pal-nums div{display:flex;flex-direction:column;align-items:center;gap:2px} .pal-nums b{font:700 26px/1.1 Georgia,'DejaVu Serif',serif;font-variant-numeric:tabular-nums} .pal-nums span{font-size:12px;line-height:1.2;opacity:.75} .pal-dh{margin:0 0 6px;font-weight:700;font-size:13px} .pal-dist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px;text-align:left} .pal-dist li{display:flex;align-items:center;gap:6px} .pal-dist span{width:1em;font-variant-numeric:tabular-nums;font-weight:700} .pal-dist i{display:block;width:var(--w);min-width:24px;padding:2px 6px;border-radius:3px;background:#8d8676;color:#fff;font:700 13px/1.3 inherit;font-style:normal;text-align:right;font-variant-numeric:tabular-nums} .pal-dist li.pal-me i{background:var(--pal-c);color:var(--pal-cT)} .pal-nost{margin:6px 0 12px} .pal-was b{font:700 22px/1.2 var(--pal-type);letter-spacing:.12em} .pal-next{font-variant-numeric:tabular-nums;font-weight:600} .pal-stage .gk-win .gk-wincard{max-height:100%;overflow:auto} .pal-foot{display:flex;justify-content:flex-end} @media (max-width:640px){ .pal-statsb{margin-left:0} .pal-sheet{padding:14px 12px} .pal-row,.pal-board{gap:5px} } @media (max-width:520px){ .pal-kb{padding:10px 6px 12px;gap:6px;border-radius:14px 14px 22px 22px} .pal-kr{gap:4px} .pal-k{aspect-ratio:auto;height:48px;border-radius:12px;border-width:2px} .pal-k.wide{border-radius:12px} } @media (prefers-reduced-motion:reduce){ .pal-t.hit b,.pal-t.stamp,.pal-t.win,.pal-row.shake{animation:none} .pal-k{transition:none} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): la hoja a la izquierda y el teclado a la derecha (antes el teclado quedaba debajo y había que bajar para escribir) */ @media (max-height:520px) and (min-width:560px){ .pald{--pal-ts:clamp(28px,calc((var(--fw-h,100dvh) - 176px) / 6.2),52px);gap:6px} .pal-stage{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center;column-gap:18px;row-gap:6px;padding:0} .pal-machine{grid-column:1;grid-row:1/-1;align-self:start} .pal-msg{grid-column:2;grid-row:1} .pal-kb{grid-column:2;grid-row:2;align-self:start;justify-self:center;width:100%;max-width:520px} } /* ===== 1.17.10 · Sopa de letras (sopa.js): un plato hondo de talavera, caldo de jitomate y letras de pasta ===== */ .sdld{display:flex;flex-direction:column;gap:10px;--sdl-blue:#1d4fa0;--sdl-glaze:#f6f2e7;--sdl-pasta:#f7e4b4;--sdl-pasta2:#c99a52} .sdl-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .sdld .so-vars[hidden],.sdl-temaw[hidden]{display:none} .sdl-temaw{display:inline-flex;align-items:center;gap:8px;font-size:14px} .sdl-tsel{min-height:36px;padding:0 10px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);background:color-mix(in srgb,currentColor 8%,transparent);color:inherit;font:inherit;font-size:14px} .sdl-tsel option{color:#1e2230;background:#fbf6e8} .sdl-newb{margin-left:auto} .sdl-main{display:flex;gap:18px;align-items:flex-start} .sdl-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .sdl-stage{position:relative;width:min(100%,calc(100dvh + var(--fw-gain,0px) - 200px),660px);min-width:260px;border-radius:30px} /* el plato: borde de talavera azul y blanco */ .sdl-plate{padding:clamp(12px,3.2%,24px);border-radius:30px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23f6f2e7'/%3E%3Cg fill='%231d4fa0'%3E%3Cpath d='M16 5.5c3.2 4.2 3.2 6.3 0 10.5-3.2-4.2-3.2-6.3 0-10.5zM16 26.5c3.2-4.2 3.2-6.3 0-10.5-3.2 4.2-3.2 6.3 0 10.5zM5.5 16c4.2-3.2 6.3-3.2 10.5 0-4.2 3.2-6.3 3.2-10.5 0zM26.5 16c-4.2-3.2-6.3-3.2-10.5 0 4.2 3.2 6.3 3.2 10.5 0z'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='32' cy='0' r='5'/%3E%3Ccircle cx='0' cy='32' r='5'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2.3' fill='%23e3a52f'/%3E%3C/svg%3E") 0 0/28px 28px,var(--sdl-glaze); box-shadow:inset 0 0 0 3px var(--sdl-blue),inset 0 0 0 6px var(--sdl-glaze),inset 0 2px 0 7px rgba(255,255,255,.6),0 22px 40px -18px rgba(0,0,0,.75)} .sdl-broth{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;container-type:size; background:radial-gradient(circle at 22% 18%,rgba(255,214,140,.22) 0 3%,transparent 3.5%),radial-gradient(circle at 74% 66%,rgba(255,214,140,.18) 0 2.2%,transparent 2.7%),radial-gradient(circle at 62% 24%,rgba(255,214,140,.16) 0 1.6%,transparent 2%),radial-gradient(circle at 40% 36%,#d65a3a,#b23c22 55%,#8a2915); box-shadow:inset 0 0 0 4px #e9e1cf,inset 0 10px 22px rgba(0,0,0,.5),inset 0 -6px 14px rgba(255,170,110,.14)} .sdl-caps{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);pointer-events:none} .sdl-cap{stroke:var(--cc,#fff);stroke-opacity:.6;stroke-width:.76;stroke-linecap:round} .sdl-cap.new{animation:sdl-cap .35s cubic-bezier(.3,1.5,.6,1)} @keyframes sdl-cap{from{stroke-width:.2;stroke-opacity:1}} .sdl-sel{stroke-opacity:.42;stroke-width:.82} .sdl-grid{position:absolute;inset:4px;display:grid;grid-template-columns:repeat(var(--n,12),1fr);grid-template-rows:repeat(var(--n,12),1fr);touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;border-radius:14px} .sdl-grid:focus-visible{outline:3px solid #fff;outline-offset:2px} .sdl-c{display:grid;place-items:center;min-width:0;min-height:0;border-radius:50%;font:800 18px/1 'Nunito','Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;font-size:calc(100cqw / var(--n,12) * .58);color:var(--sdl-pasta)} .sdl-c span{display:block;transform:rotate(var(--rot,0));text-shadow:0 1px 0 var(--sdl-pasta2),0 2px 0 #9b6c2e,0 3px 5px rgba(40,6,0,.55)} .sdl-c.cur{box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)} .sdl-c.anchor{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 2px #fff} .sdl-c.hint{animation:sdl-hint 1s ease-in-out infinite alternate} @keyframes sdl-hint{to{background:rgba(255,216,77,.55);box-shadow:0 0 0 3px #ffd84d}} .sdl-stage .gk-win{border-radius:30px} /* el lado: tema, reloj y la lista */ .sdl-side{flex:0 0 270px;display:flex;flex-direction:column;gap:8px;min-width:0} .sdl-tema{margin:0;font:700 20px/1.2 Georgia,'DejaVu Serif',serif;text-wrap:balance} .sdl-sub{margin:0;opacity:.8} .sdl-stats{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums} .sdl-time b{font-size:1.1em} .sdl-count{font-weight:700} .sdl-list{list-style:none;margin:0;padding:10px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .sdl-list li{display:flex;align-items:center;gap:6px;min-width:0;font-weight:700;letter-spacing:.04em;overflow-wrap:anywhere} .sdl-list li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 40%,transparent)} .sdl-list li.got{opacity:.62;text-decoration:line-through;text-decoration-thickness:2px} .sdl-list li.got::before{background:var(--cc);border-color:var(--cc)} .sdl-msg{margin:0;min-height:2.6em} .sdl-btns{display:flex;gap:6px}.sdl-btns .btn{flex:1 1 auto} @media (max-width:900px){ .sdl-main{flex-direction:column;align-items:stretch} .sdl-stage{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 380px),600px)} .sdl-side{flex:none} .sdl-list{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:640px){ .sdl-top .so-vars{flex-wrap:wrap} .sdl-newb{margin-left:0;width:100%} .sdl-stage{width:100%;min-width:0} .sdl-plate{padding:10px;border-radius:22px} .sdl-list{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){ .sdl-cap.new,.sdl-c.hint{animation:none} .sdl-c.hint{background:rgba(255,216,77,.55)} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) ---------- Como en el Ajedrez: con 520 px de alto o menos, el plato a la izquierda con todo el alto libre (--fw-h) y, a la derecha, los controles, el tema, la lista y los botones en una columna. Si la lista no cabe, se desplaza ella sola (los botones siguen a la vista). Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .sdld{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,var(--lh)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px 12px;height:var(--lh);box-sizing:border-box} .sdl-main{display:contents} .sdl-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .sdl-stage{width:100%;min-width:0} .sdl-plate{padding:clamp(8px,2.6%,16px);border-radius:24px} .sdl-top{grid-column:2;grid-row:1;gap:4px 6px} .sdl-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .sdl-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .sdl-temaw{width:100%;font-size:13px} .sdl-tsel{flex:1 1 auto;min-width:0;min-height:30px} .sdl-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .sdl-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:5px;overflow:hidden} .sdl-side>*{flex-shrink:0} .sdl-tema{font-size:17px} .sdl-sub{font-size:13px} .sdl-stats{font-size:13.5px} .sdl-side>.sdl-list{flex:1 1 auto;min-height:0;overflow:auto;align-content:start;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));padding:6px 10px;gap:3px 10px;font-size:13px} .sdl-msg{min-height:1.3em;font-size:13.5px} .sdl-btns .btn{min-height:30px;padding:0 6px;font-size:12.5px} .sdld>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .sdld:has(>.gk-rules:not([hidden])){grid-template-rows:auto minmax(0,1fr) auto} /* con las reglas: un renglón más abajo para su botón */ .sdld:has(>.gk-rules:not([hidden])) .sdl-side>:not(.sdl-btns){display:none} .sdld:has(>.gk-rules:not([hidden])) .sdl-side{grid-row:3} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .sdld{row-gap:4px} .sdl-top .so-seg{min-height:26px;padding:0 6px;font-size:12px} .sdl-newb{min-height:30px} .sdl-tema{font-size:15.5px} .sdl-sub{font-size:12.5px} .sdl-side>.sdl-list{grid-template-columns:repeat(2,minmax(0,1fr));font-size:12.5px;gap:2px 8px;padding:5px 8px} .sdl-btns .btn{min-height:28px} } /* ===== 1.17.11 · Crucigrama del día (cruci.js): un vitral; cada palabra resuelta enciende sus vidrios ===== */ .cgd{display:flex;flex-direction:column;gap:10px;--cg-stone:#2b2723;--cg-stone2:#1a1714;--cg-lead:#141316;--cg-frost1:#f1ede2;--cg-frost2:#cfd7dc;--cg-ink:#25232c} .cg-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .cg-time{font-variant-numeric:tabular-nums} .cg-newb{margin-left:auto} .cg-main{display:flex;gap:20px;align-items:flex-start} .cg-left{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px} .cg-title{margin:0;font:700 20px/1.2 Georgia,'DejaVu Serif',serif;text-align:center;text-wrap:balance} .cg-bar{margin:0;min-height:2.6em;max-width:60ch;padding:6px 12px;border-left:5px solid var(--tone,transparent);border-radius:6px;background:color-mix(in srgb,currentColor 6%,transparent);text-align:left;align-self:stretch} .cg-stage{position:relative;max-width:100%;border-radius:22px} /* la ventana: arco de piedra y el emplomado */ .cg-window{padding:clamp(14px,3vw,26px) clamp(10px,2.4vw,20px) clamp(10px,2vw,18px);border-radius:46% 46% 14px 14px / 14% 14% 14px 14px;max-width:100%;overflow:auto; background:radial-gradient(120% 80% at 50% 0%,#3b352f,var(--cg-stone) 55%,var(--cg-stone2));box-shadow:inset 0 0 0 3px #4a433b,inset 0 0 0 7px #221e1a,0 24px 40px -20px rgba(0,0,0,.8);transition:box-shadow .8s} .cg-grid{--cg-cs:clamp(22px,min(calc((100vw - 480px - 3px * var(--w,12)) / var(--w,12)),calc((100dvh + var(--fw-gain,0px) - 340px - 3px * var(--h,12)) / var(--h,12))),46px);display:grid;grid-template-columns:repeat(var(--w,12),var(--cg-cs));grid-template-rows:repeat(var(--h,12),var(--cg-cs));gap:3px;margin:0 auto;width:max-content;padding:3px;border-radius:6px;background:transparent} .cg-grid:focus-visible{outline:2px solid rgba(255,231,168,.7);outline-offset:4px} .cg-x{background:transparent} .cg-c{position:relative;display:grid;place-items:center;border-radius:2px;cursor:pointer; background:linear-gradient(135deg,var(--cg-frost1),var(--cg-frost2));box-shadow:0 0 0 3px var(--cg-lead),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(0,0,0,.12);color:var(--cg-ink)} .cg-c i{position:absolute;left:2px;top:1px;font:700 calc(var(--cg-cs) * .26)/1 system-ui,sans-serif;font-style:normal;opacity:.75} .cg-c b{font:700 calc(var(--cg-cs) * .58)/1 Georgia,'DejaVu Serif',serif} .cg-c.word{background:linear-gradient(135deg,#fff6dc,#f2dca2)} .cg-c.sel{box-shadow:0 0 0 3px var(--cg-lead),inset 0 0 0 3px #e0a21c} .cg-c.lit{background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--tone) 45%,#fff),var(--tone) 62%,color-mix(in srgb,var(--tone) 65%,#000));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)} .cg-c.lit i{opacity:.9} .cg-c.lit.sel{box-shadow:0 0 0 3px var(--cg-lead),inset 0 0 0 3px #fff} .cg-c.bad b{color:#c4122f;text-decoration:line-through;text-decoration-thickness:2px} .cg-c.rev::after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55} .cg-c.flash{animation:cg-flash .7s ease var(--wd,0ms)} @keyframes cg-flash{30%{filter:brightness(1.6) saturate(1.3);transform:scale(1.08)}} .cgd.done .cg-window{box-shadow:inset 0 0 0 3px #6a5e4c,inset 0 0 0 7px #221e1a,0 0 60px 6px rgba(255,214,140,.32),0 24px 40px -20px rgba(0,0,0,.8)} .cg-stage .gk-win{border-radius:22px} /* las pistas */ .cg-side{flex:0 0 330px;display:flex;flex-direction:column;gap:8px;min-width:0} .cg-clues{max-height:calc(100dvh + var(--fw-gain,0px) - 260px);overflow:auto;padding:4px 12px 10px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .cg-clues h4{margin:10px 0 6px;font:700 15px/1.2 Georgia,'DejaVu Serif',serif} .cg-clues ol{list-style:none;margin:0;padding:0;display:grid;gap:4px} .cg-clues li{padding:5px 8px;border-radius:8px;cursor:pointer;line-height:1.35} .cg-clues li b{display:inline-block;min-width:1.6em;font-variant-numeric:tabular-nums} .cg-clues li span{opacity:.6;font-size:.9em} .cg-clues li:hover{background:color-mix(in srgb,currentColor 8%,transparent)} .cg-clues li.on{background:color-mix(in srgb,#e0a21c 28%,transparent)} .cg-clues li.ok{opacity:.55;text-decoration:line-through} .cg-msg{margin:0;min-height:2.6em} /* el teclado de la pantalla (teléfono y tableta) */ .cg-kb{display:none;width:min(100%,560px);gap:5px;flex-direction:column} .cg-kr{display:flex;justify-content:center;gap:4px} .cg-kb button{flex:1 1 0;min-width:0;max-width:44px;height:46px;padding:0;border:0;border-radius:8px;background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;font:700 16px/1 system-ui,sans-serif;touch-action:manipulation} .cg-kb button.wide{flex:1.6 1 0;max-width:70px} .cg-kb button:active{background:color-mix(in srgb,currentColor 26%,transparent)} @media (pointer:coarse),(max-width:700px){ .cg-kb{display:flex} } @media (max-width:980px){ .cg-main{flex-direction:column;align-items:stretch} .cg-side{flex:none} .cg-clues{max-height:none} .cg-grid{--cg-cs:clamp(20px,min(calc((100vw - 60px - 3px * var(--w,12)) / var(--w,12)),calc((100dvh + var(--fw-gain,0px) - 420px - 3px * var(--h,12)) / var(--h,12))),44px)} } @media (max-width:640px){ .cg-newb{margin-left:0} .cg-top .btn{flex:1 1 auto} } @media (prefers-reduced-motion:reduce){ .cg-c.flash{animation:none} .cg-window{transition:none} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el vitral a la izquierda con todo el alto (--fw-h) y, a la derecha, la pista, el teclado y las pistas */ @media (max-height:520px) and (min-width:560px){ .cgd{gap:6px} .cg-main{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:6px 14px;align-items:start;height:calc(var(--fw-h,100dvh) - 50px)} .cg-left{display:contents} .cg-title{display:none} .cg-stage{grid-column:1;grid-row:1/-1} .cg-window{padding:10px 10px 8px} .cg-grid{--cg-cs:clamp(16px,calc((var(--fw-h,100dvh) - 74px - 3px * var(--h,12)) / var(--h,12)),40px)} .cg-bar{grid-column:2;grid-row:1;min-height:0;font-size:13px} .cg-kb{grid-column:2;grid-row:2;width:100%} .cg-side{grid-column:2;grid-row:3;min-height:0;height:100%;flex:none} .cg-clues{flex:1 1 auto;min-height:0;max-height:none} } /* ===== 1.17.12 · Gato supremo (gato.js): un cojín acolchado de nueve retazos; huellas contra ovillos de estambre ===== */ .gtd{display:flex;flex-direction:column;gap:10px;--gt-paw:#22305a;--gt-yarn1:#ef6a5c;--gt-yarn2:#b3261e;--gt-felt:#fbf3e2;--gt-gold:#f5c95a} .gt-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .gtd .so-vars[hidden]{display:none} .gt-newb{margin-left:auto} .gt-main{display:flex;gap:18px;align-items:flex-start} .gt-left{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .gt-stage{position:relative;width:min(100%,calc(100dvh + var(--fw-gain,0px) - 200px),640px);min-width:260px;border-radius:26px} .gt-cushion{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(5px,1.4%,10px);aspect-ratio:1;padding:clamp(10px,2.6%,18px);border-radius:26px; background:radial-gradient(120% 120% at 30% 20%,#7a4a66,#4e2c43 60%,#341c2c);box-shadow:inset 0 0 0 4px #2a1622,inset 0 0 0 7px #8f6a3f,inset 0 0 0 9px #2a1622,inset 0 12px 30px rgba(255,255,255,.12),0 24px 44px -20px rgba(0,0,0,.8)} .gt-cushion:focus-visible{outline:3px solid var(--gt-gold);outline-offset:4px} /* los retazos: cada uno con su tela */ .gt-patch{position:relative;border-radius:14px;background:var(--fab);box-shadow:inset 0 8px 14px rgba(255,255,255,.18),inset 0 -10px 16px rgba(0,0,0,.28),0 3px 6px rgba(0,0,0,.35);transition:filter .25s,box-shadow .25s} .gt-patch::before{content:"";position:absolute;inset:6px;border-radius:10px;border:2px dashed rgba(255,250,235,.5);pointer-events:none} .gt-patch[data-b="0"]{--fab:repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 7px,transparent 7px 14px),repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 7px,transparent 7px 14px),#c56a52} .gt-patch[data-b="1"]{--fab:radial-gradient(circle,rgba(255,255,255,.4) 17%,transparent 19%) 0 0/15px 15px,#3d7d86} .gt-patch[data-b="2"]{--fab:repeating-linear-gradient(45deg,#e7c167 0 7px,#d4a84a 7px 14px)} .gt-patch[data-b="3"]{--fab:repeating-linear-gradient(60deg,rgba(0,0,0,.12) 0 4px,transparent 4px 8px),repeating-linear-gradient(-60deg,rgba(255,255,255,.12) 0 4px,transparent 4px 8px),#6b8a4c} .gt-patch[data-b="4"]{--fab:radial-gradient(90% 90% at 35% 25%,#b24f74,#7d2f4f)} .gt-patch[data-b="5"]{--fab:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 3px,transparent 3px 9px),repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 3px,transparent 3px 9px),#4a5f9e} .gt-patch[data-b="6"]{--fab:radial-gradient(circle,#f3e1b8 12%,transparent 14%) 0 0/18px 18px,radial-gradient(circle,#e98a6a 8%,transparent 10%) 9px 9px/18px 18px,#b07f55} .gt-patch[data-b="7"]{--fab:repeating-linear-gradient(90deg,#7558a0 0 9px,#62488a 9px 18px)} .gt-patch[data-b="8"]{--fab:repeating-linear-gradient(0deg,rgba(255,214,120,.22) 0 2px,transparent 2px 16px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 8px,transparent 8px 16px),#2f6f5a} .gt-patch.dim{filter:saturate(.55) brightness(.7)} .gt-patch.live{box-shadow:inset 0 8px 14px rgba(255,255,255,.2),inset 0 -10px 16px rgba(0,0,0,.25),0 0 0 3px var(--gt-gold),0 0 22px 3px rgba(245,201,90,.55)} .gt-patch[data-s="d"]{filter:grayscale(.85) brightness(.75)} .gt-cells{position:absolute;inset:9%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)} .gt-c{position:relative;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer;border-right:2px dashed rgba(255,250,235,.38);border-bottom:2px dashed rgba(255,250,235,.38);border-radius:0} .gt-c:nth-child(3n){border-right:0}.gt-c:nth-child(n+7){border-bottom:0} .gt-c:disabled{cursor:default} .gt-patch.live .gt-c:not(:disabled):not([data-k="a"]):not([data-k="b"]):hover{background:rgba(255,250,235,.22)} .gt-c svg{width:74%;height:74%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))} .gt-c[data-k="a"]::before,.gt-c[data-k="b"]::before{content:"";position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--gt-felt));box-shadow:0 1px 2px rgba(0,0,0,.35)} .gt-c svg{position:relative} .gt-c[data-k="a"] svg,.gt-chip.a svg,.gt-claim[data-k="a"] svg{fill:var(--gt-paw)} .gt-ball{fill:var(--gt-yarn2)} .gt-str{fill:none;stroke:var(--gt-yarn1);stroke-width:1.3;stroke-linecap:round} .gt-tail{fill:none;stroke:var(--gt-yarn2);stroke-width:1.4;stroke-linecap:round} .gt-c.last::after{content:"";position:absolute;inset:4%;border-radius:50%;box-shadow:0 0 0 2px var(--gt-gold)} .gt-c.hint{animation:gt-hint 1s ease-in-out infinite alternate} @keyframes gt-hint{to{background:rgba(124,247,195,.4)}} .gt-c.cur{outline:2px solid #fff;outline-offset:-3px} .gt-cushion:not(:focus-visible) .gt-c.cur{outline:0} /* el retazo ganado: la huella o el ovillo bordado encima */ .gt-claim{position:absolute;inset:10%;display:grid;place-items:center;pointer-events:none} .gt-claim svg{width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))} .gt-claim[data-k="a"] svg{stroke:rgba(255,250,235,.8);stroke-width:.5;stroke-dasharray:1 .8} .gt-patch[data-s="a"] .gt-cells,.gt-patch[data-s="b"] .gt-cells{opacity:.35} .gt-patch.claimed .gt-claim{animation:gt-claim .5s cubic-bezier(.3,1.5,.6,1)} @keyframes gt-claim{from{transform:scale(.3) rotate(-20deg);opacity:0}} .gt-patch.win{animation:gt-win 1.1s ease var(--wd,0ms) infinite alternate} @keyframes gt-win{to{box-shadow:0 0 0 4px #fff,0 0 30px 8px rgba(255,255,255,.65)}} .gt-stage .gk-win{border-radius:26px} /* el lado */ .gt-side{flex:0 0 250px;display:flex;flex-direction:column;gap:8px;min-width:0} .gt-pl{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:2px solid transparent;background:color-mix(in srgb,currentColor 6%,transparent)} .gt-pl.on{border-color:var(--accent,#d9a441)} .gt-chip{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--gt-felt))} .gt-chip svg{width:24px;height:24px} .gtd.thinking .gt-pl.on{animation:gt-think 1.2s ease-in-out infinite} @keyframes gt-think{50%{border-color:transparent}} .gt-status{min-height:3.9em;margin:0} .gt-btns{display:flex;gap:6px}.gt-btns .btn{flex:1 1 auto} @media (max-width:900px){ .gt-main{flex-direction:column;align-items:stretch} .gt-stage{width:min(100%,calc(100dvh + var(--fw-gain,0px) - 360px),600px)} .gt-side{flex:none} } @media (max-width:640px){ .gt-top .so-vars{flex-wrap:wrap} .gt-newb{margin-left:0;width:100%} .gt-stage{width:100%;min-width:0} .gt-patch::before{inset:4px} } @media (prefers-reduced-motion:reduce){ .gt-patch.claimed .gt-claim,.gt-patch.win,.gt-c.hint{animation:none} .gt-patch{transition:none} } /* ---------- 1.17.61 · teléfono acostado chico (pendiente de la 1.17.41) ---------- Como en el Ajedrez: con 520 px de alto o menos, el cojín a la izquierda con todo el alto libre (--fw-h) y, a la derecha, los controles y el panel en una columna (antes quedaban debajo y había que bajar). Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .gtd{--lh:var(--fw-h,calc(100dvh - 56px));display:grid;grid-template-columns:minmax(0,var(--lh)) minmax(232px,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px 12px;height:var(--lh);box-sizing:border-box} .gt-main{display:contents} .gt-left{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .gt-stage{width:100%;min-width:0} .gt-top{grid-column:2;grid-row:1;gap:4px 6px} .gt-top .so-vars{flex-wrap:wrap;max-width:100%;padding:2px} .gt-top .so-seg{flex:1 1 auto;min-height:28px;padding:0 7px;font-size:12.5px} .gt-newb{margin-left:0;width:100%;min-height:32px;padding-top:0;padding-bottom:0} .gt-side{grid-column:2;grid-row:2;flex:none;min-height:0;gap:5px;overflow:auto} .gt-side>*{flex-shrink:0} .gt-pl{padding:3px 10px;font-size:13.5px} .gt-chip{width:26px;height:26px} .gt-chip svg{width:20px;height:20px} .gt-status{min-height:2.6em;font-size:13.5px} .gt-btns .btn,.gt-side>.btn{min-height:30px;padding:0 6px;font-size:12.5px} .gtd>.gk-rules{grid-column:2;grid-row:2;min-height:0;overflow:auto;font-size:13px} .gtd:has(>.gk-rules:not([hidden])){grid-template-rows:auto minmax(0,1fr) auto} /* con las reglas: un renglón más abajo para su botón */ .gtd:has(>.gk-rules:not([hidden])) .gt-side>:not(.btn){display:none} .gtd:has(>.gk-rules:not([hidden])) .gt-side{grid-row:3} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .gtd{row-gap:4px} .gt-top .so-vars{width:100%;flex-wrap:nowrap} .gt-top .so-seg{flex:1 1 0;min-width:0;min-height:28px;padding:2px 4px;font-size:12px;line-height:1.15;white-space:normal} .gt-newb{min-height:30px} .gt-pl{padding:2px 8px;font-size:13px} .gt-status{font-size:13px} .gt-btns .btn,.gt-side>.btn{min-height:28px;font-size:12.5px} } /* ===== 1.17.13 · Mahjong solitario (mahjong.js): fichas de marfil con canto de palo de rosa sobre paño verde ===== */ .mjd{display:flex;flex-direction:column;gap:8px;--mj-ivory1:#fffaf0;--mj-ivory2:#ece2cc;--mj-edge1:#d9c9a3;--mj-edge2:#8a4630;--mj-gold:#f2c14e} .mj-defs{position:absolute;width:0;height:0;overflow:hidden} .mj-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .mjd .so-vars[hidden]{display:none} .mj-newb{margin-left:auto} .mj-bar{display:flex;align-items:baseline;gap:6px 18px;flex-wrap:wrap;font-variant-numeric:tabular-nums} .mj-title{font:700 18px/1.2 Georgia,'DejaVu Serif',serif} .mj-pairs{opacity:.75} .mj-stage{position:relative;border-radius:22px} .mj-table{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(280px,calc(100dvh + var(--fw-gain,0px) - 290px),760px);border-radius:22px;overflow:hidden; background:radial-gradient(120% 90% at 50% 30%,#2f7a5a,#1c5440 60%,#123a2c);box-shadow:inset 0 0 0 6px #5a3420,inset 0 0 0 8px #2b170e,inset 0 0 40px rgba(0,0,0,.45)} .mj-tiles{position:relative;flex:none;--tw:44px;--th:calc(var(--tw) * 1.3);--d:calc(var(--tw) * .12)} .mj-tiles:focus-visible{outline:2px solid rgba(242,193,78,.7);outline-offset:6px} .mj-t{position:absolute;left:calc(var(--x) * var(--tw) / 2 + (var(--mz,4) - var(--z)) * var(--d));top:calc(var(--y) * var(--th) / 2 + (var(--mz,4) - var(--z)) * var(--d)); width:var(--tw);height:var(--th);padding:0;border:0;border-radius:calc(var(--tw) * .12);cursor:pointer; background:linear-gradient(150deg,var(--mj-ivory1),var(--mj-ivory2)); box-shadow:inset 0 0 0 1px rgba(120,80,40,.25),calc(var(--tw) * .045) calc(var(--tw) * .045) 0 var(--mj-edge1),calc(var(--tw) * .1) calc(var(--tw) * .1) 0 var(--mj-edge2),calc(var(--tw) * .14) calc(var(--tw) * .16) calc(var(--tw) * .12) rgba(0,0,0,.4); transition:transform .12s,filter .2s} .mj-t[hidden]{display:none} .mj-t svg{position:absolute;inset:6% 7%;width:86%;height:88%} .mj-t.dim{filter:brightness(.68) saturate(.65)} .mj-t.free:hover{transform:translate(-1px,-2px)} .mj-t.sel{transform:translate(-2px,-4px);box-shadow:inset 0 0 0 2px var(--mj-gold),0 0 0 2px var(--mj-gold),calc(var(--tw) * .045) calc(var(--tw) * .045) 0 var(--mj-edge1),calc(var(--tw) * .1) calc(var(--tw) * .1) 0 var(--mj-edge2),0 0 calc(var(--tw) * .4) rgba(242,193,78,.75)} .mj-t.hint{animation:mj-hint .9s ease-in-out infinite alternate} @keyframes mj-hint{to{box-shadow:inset 0 0 0 3px #3ee0a0,0 0 0 2px #3ee0a0,calc(var(--tw) * .045) calc(var(--tw) * .045) 0 var(--mj-edge1),calc(var(--tw) * .1) calc(var(--tw) * .1) 0 var(--mj-edge2),0 0 calc(var(--tw) * .45) rgba(62,224,160,.8)}} .mj-t.cur{outline:2px dashed #fff;outline-offset:2px} .mj-tiles:not(:focus-visible) .mj-t.cur{outline:0} .mj-t.nope{animation:mj-nope .3s} @keyframes mj-nope{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}} .mj-t.gone{pointer-events:none;animation:mj-gone .42s ease-in forwards} @keyframes mj-gone{to{transform:translateY(calc(var(--th) * -.4)) scale(1.15);opacity:0}} .mj-stage .gk-win{border-radius:22px} .mj-msg{margin:0;min-height:1.4em} .mj-btns{display:flex;gap:6px;flex-wrap:wrap} .mj-dim[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent,#d9a441)} @media (max-width:640px){ .mj-newb{margin-left:0;width:100%} .mj-table{height:clamp(240px,calc(100dvh + var(--fw-gain,0px) - 400px),520px)} .mj-btns .btn{flex:1 1 auto} .mj-top .so-vars{flex-wrap:wrap} } @media (prefers-reduced-motion:reduce){ .mj-t{transition:none} .mj-t.hint,.mj-t.nope,.mj-t.gone{animation:none} .mj-t.gone{display:none} } /* ===== Materiales reales (Andre, 21 oct: «Están muy planos»): la mesa de juego con paño de fibra bajo una lámpara y un marco de nogal con veta y bisel; las fichas proyectan su sombra sobre el paño. ===== */ .mj-stage{padding:clamp(9px,1.2vw,14px);border-radius:calc(22px + clamp(9px,1.2vw,14px)); background: radial-gradient(120% 60% at 50% -10%,rgba(255,214,160,.26),transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='600' height='120' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/600px 120px, linear-gradient(180deg,#7a4a26,#5a3318 45%,#43240f); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.45),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.55),0 18px 34px -14px rgba(0,0,0,.65),0 4px 8px -2px rgba(0,0,0,.35)} .mj-stage .mj-table{height:clamp(260px,calc(100dvh + var(--fw-gain,0px) - 318px),740px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E") 0 0/160px 160px, radial-gradient(60% 55% at 50% 35%,rgba(255,236,190,.2),transparent 70%), radial-gradient(120% 90% at 50% 30%,#2f7a5a,#1c5440 60%,#123a2c); background-blend-mode:soft-light,normal,normal; box-shadow:0 0 0 1.5px #b88c3e,0 0 0 3px rgba(46,24,6,.75),inset 0 10px 18px -6px rgba(0,0,0,.55),inset 0 -6px 14px -8px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.35)} @media (max-width:640px){ .mj-stage{padding:7px;border-radius:26px} .mj-stage .mj-table{border-radius:18px;height:clamp(230px,calc(100dvh + var(--fw-gain,0px) - 414px),510px)} } /* teléfono acostado: la mesa con el alto libre de la pantalla completa, sin que haya que bajar */ @media (max-height:520px) and (min-width:560px){ .mj-stage{padding:6px;border-radius:20px} .mj-stage .mj-table{height:max(160px,calc(var(--fw-h,100dvh) - 170px));border-radius:14px} } /* ===== 1.17.15 · Póker (poker.js): la mesa del Salón de jazz, paño verde azulado con riel de latón art déco ===== */ .pqd{display:flex;flex-direction:column;gap:10px;--pq-felt1:#16615f;--pq-felt2:#0b3c3d;--pq-brass:#c39543;--pq-wood:#2a1810} .pq-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .pq-bank{font-weight:700;font-variant-numeric:tabular-nums} .pq-leave{margin-left:auto} .pq-lobby{max-width:640px;margin:10px auto;padding:22px 26px;border-radius:18px;background:#fbf6e8;color:#1e2230;text-align:center;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)} .pq-lobby[hidden]{display:none} .pq-lobby h3{margin:0 0 8px;font:700 22px/1.2 Georgia,'DejaVu Serif',serif} .pq-lobby p{margin:0 0 10px;line-height:1.45} .pq-lobby .btn:not(.primary){background:#fffdf6;color:#1e2230;text-shadow:none} .pq-mode{opacity:.75}.pq-warn{color:#9a2a1a;font-weight:600} .pq-play{display:flex;flex-direction:column;gap:8px} .pq-play[hidden]{display:none} .pq-table{position:relative;width:min(100%,1000px);margin:0 auto;aspect-ratio:2.05/1;container-type:inline-size;--cw:clamp(30px,6.4cqw,72px)} .pq-felt{position:absolute;inset:9% 6% 14%;border-radius:999px;background:radial-gradient(70% 70% at 50% 40%,var(--pq-felt1),var(--pq-felt2)); box-shadow:0 0 0 1.4cqw var(--pq-wood),0 0 0 1.75cqw var(--pq-brass),0 0 0 2.3cqw #1a0f0a,inset 0 0 4cqw rgba(0,0,0,.45),0 3cqw 5cqw -2cqw rgba(0,0,0,.7)} .pq-felt::after{content:"";position:absolute;inset:7% 10%;border-radius:999px;border:2px solid rgba(195,149,67,.32); background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 8deg,rgba(195,149,67,.05) 8deg 9deg)} .pq-seat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;gap:2px 6px;z-index:3} .pq-seat[data-i="0"]{--x:50%;--y:88%}.pq-seat[data-i="1"]{--x:9%;--y:50%}.pq-seat[data-i="2"]{--x:28%;--y:9%}.pq-seat[data-i="3"]{--x:72%;--y:9%}.pq-seat[data-i="4"]{--x:91%;--y:50%} .pq-face{position:relative;grid-row:1/3;width:clamp(36px,5.2cqw,60px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px var(--pq-brass),0 4px 10px rgba(0,0,0,.5)} .pq-face svg{width:100%;height:100%;border-radius:50%;display:block} .pq-me{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe7a8,#c39543);color:#2a1810;font-size:clamp(16px,2.4cqw,28px)} .pq-dealer{position:absolute;right:-6px;bottom:-4px;display:grid;place-items:center;width:clamp(16px,2cqw,22px);aspect-ratio:1;border-radius:50%;background:#fff;color:#111;font:800 clamp(9px,1.1cqw,12px)/1 system-ui,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.5)} .pq-dealer[hidden]{display:none} .pq-info{display:flex;flex-direction:column;padding:3px 9px;border-radius:9px;background:rgba(10,14,18,.78);color:#f3ead8;min-width:clamp(54px,7cqw,90px);line-height:1.15} .pq-name{font-size:clamp(11px,1.25cqw,14px)} .pq-stack{font-variant-numeric:tabular-nums;font-size:clamp(11px,1.2cqw,14px);color:var(--pq-brass);font-weight:700} .pq-stack::before{content:"◉ ";opacity:.8} .pq-hole{display:flex;gap:2px} .pq-seat:not([data-i="0"]) .pq-hole .pq-card{width:calc(var(--cw) * .58)} .pq-seat[data-i="0"]{grid-template-columns:auto auto auto} .pq-seat[data-i="0"] .pq-hole{grid-row:1/3;grid-column:3} .pq-seat[data-i="0"] .pq-hole .pq-card{width:calc(var(--cw) * 1.02)} .pq-seat.turn .pq-info{box-shadow:0 0 0 2px #ffe08a,0 0 16px rgba(255,224,138,.55)} .pq-seat.fold{opacity:.5} .pq-seat.won .pq-face{animation:pq-won 1s ease 2} @keyframes pq-won{50%{box-shadow:0 0 0 3px #ffe08a,0 0 26px 6px rgba(255,224,138,.8)}} .pq-say{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:3px 9px;border-radius:10px;background:#fffdf4;color:#1e2230;font-size:clamp(11px,1.15cqw,13px);white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.4);animation:pq-say .25s ease} .pq-say[hidden]{display:none} .pq-seat[data-i="2"] .pq-say,.pq-seat[data-i="3"] .pq-say{bottom:auto;top:calc(100% + 4px)} @keyframes pq-say{from{opacity:0;transform:translate(-50%,4px)}} .pq-card{display:inline-block;width:var(--cw);aspect-ratio:100/140;border-radius:7%;box-shadow:0 2px 5px rgba(0,0,0,.45)} .pq-card svg{display:block;width:100%;height:100%} .pq-card.pq-back{background:var(--nai-back) center/100% 100% no-repeat} .pq-card.empty{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(195,149,67,.35)} .pq-card.gone{visibility:hidden} .pq-card.flip{animation:pq-flip .45s ease} @keyframes pq-flip{from{transform:rotateY(90deg) translateY(-6px)}} .pq-table.dealing .pq-hole .pq-card{animation:pq-deal .5s cubic-bezier(.2,.8,.3,1) both} .pq-table.dealing .pq-hole .pq-card:nth-child(2){animation-delay:.12s} @keyframes pq-deal{from{opacity:0;transform:translateY(-30px) scale(.6) rotate(-14deg)}} .pq-mid{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.8cqw;z-index:2} .pq-board{display:flex;gap:.6cqw} .pq-pot{display:flex;align-items:center;gap:6px;color:#f7ecd2;font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(12px,1.35cqw,16px);text-shadow:0 1px 2px rgba(0,0,0,.6)} .pq-bet{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;color:#fff;font-weight:700;font-size:clamp(11px,1.2cqw,14px);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000;z-index:2} .pq-bet[hidden]{display:none} .pq-bet[data-i="0"]{--x:50%;--y:67%}.pq-bet[data-i="1"]{--x:22%;--y:52%}.pq-bet[data-i="2"]{--x:34%;--y:29%}.pq-bet[data-i="3"]{--x:66%;--y:29%}.pq-bet[data-i="4"]{--x:78%;--y:52%} .pq-chips{position:relative;display:inline-block;width:clamp(16px,2cqw,24px);height:clamp(16px,2cqw,24px)} .pq-chips i{position:absolute;left:0;bottom:calc(var(--i) * 3px);width:100%;height:100%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))} .pq-chips svg{display:block;width:100%;height:100%} .pq-msg{margin:0;min-height:1.4em;text-align:center} .pq-ctl{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .pq-ctl[hidden]{display:none} .pq-raise{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .pq-presets{display:flex;gap:4px} .pq-presets .so-seg{min-height:30px;padding:0 9px;font-size:13px;border:1px solid color-mix(in srgb,currentColor 18%,transparent)} .pq-amtw{display:flex;align-items:center;gap:6px;font-size:13px} .pq-amt{width:min(220px,40vw);accent-color:var(--pq-brass)} .pq-after{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap} .pq-after[hidden]{display:none} .pq-rebuys{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center} .pq-rebuys[hidden]{display:none} .pq-rebuys p{margin:0;width:100%;text-align:center;font-weight:600} .pq-log{box-sizing:border-box;list-style:none;margin:0 auto;padding:6px 12px;max-width:640px;width:100%;border-radius:10px;background:color-mix(in srgb,currentColor 5%,transparent);font-size:13px;opacity:.85;display:grid;gap:2px} .pq-log:empty{display:none} .pq-foot{display:flex;justify-content:flex-end} @media (max-width:700px){ .pq-leave{margin-left:0} .pq-table{aspect-ratio:.92;--cw:clamp(30px,10.5cqw,58px)} .pq-felt{inset:12% 5% 16%;border-radius:46%/36%} .pq-seat[data-i="0"]{--x:50%;--y:89%}.pq-seat[data-i="1"]{--x:15%;--y:58%}.pq-seat[data-i="2"]{--x:22%;--y:9%}.pq-seat[data-i="3"]{--x:78%;--y:9%}.pq-seat[data-i="4"]{--x:85%;--y:58%} .pq-seat:not([data-i="0"]){grid-template-columns:auto;justify-items:center} .pq-seat:not([data-i="0"]) .pq-face{grid-row:auto} .pq-bet[data-i="0"]{--y:71%}.pq-bet[data-i="1"]{--x:30%;--y:47%}.pq-bet[data-i="2"]{--x:28%;--y:30%}.pq-bet[data-i="3"]{--x:72%;--y:30%}.pq-bet[data-i="4"]{--x:70%;--y:47%} .pq-mid{top:47%} .pq-face{width:clamp(30px,9cqw,46px)} .pq-info{min-width:0;padding:2px 6px} .pq-ctl .btn{flex:1 1 auto}.pq-raise{width:100%;justify-content:center}.pq-amt{width:100%}.pq-amtw{flex:1 1 100%} } @media (prefers-reduced-motion:reduce){ .pq-card.flip,.pq-table.dealing .pq-hole .pq-card,.pq-say,.pq-seat.won .pq-face{animation:none} } /* ===== Materiales reales (Andre, 21 oct: «Están muy planos»): la mesa del club bajo su lámpara. Paño con fibra y la luz que cae al centro, filo de latón, baranda de nogal con veta y bisel, y una costura alrededor del paño. ===== */ .pq-table{isolation:isolate} .pq-felt{background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E") 0 0/160px 160px, radial-gradient(46% 52% at 50% 42%,rgba(255,238,196,.2),transparent 70%), radial-gradient(70% 70% at 50% 40%,var(--pq-felt1),var(--pq-felt2)); background-blend-mode:soft-light,normal,normal; box-shadow:inset 0 1.6cqw 2.4cqw -.6cqw rgba(0,0,0,.6),inset 0 0 4cqw rgba(0,0,0,.4),0 0 0 .35cqw #a77d34,0 0 0 .5cqw #3a2410} /* la baranda de nogal */ .pq-felt::before{content:"";position:absolute;inset:-3.3cqw;z-index:-1;border-radius:999px;pointer-events:none; background: radial-gradient(120% 70% at 50% 0%,rgba(255,226,180,.22),transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .08 0 0 0 0 .03 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='600' height='120' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/600px 120px, linear-gradient(180deg,#6e4122,#4a2914 50%,#2e180a); box-shadow:inset 0 .25cqw 0 rgba(255,222,176,.4),inset 0 -.3cqw 0 rgba(0,0,0,.5), inset 0 0 0 .9cqw rgba(24,12,6,.0),0 0 0 .2cqw #1a0f0a,0 3cqw 5cqw -2cqw rgba(0,0,0,.75),0 .6cqw 1.2cqw rgba(0,0,0,.35)} /* la costura alrededor del paño */ .pq-felt::after{box-shadow:none} .pq-table::after{content:"";position:absolute;inset:calc(9% - 1.25cqw) calc(6% - 1.25cqw) calc(14% - 1.25cqw);border-radius:999px;pointer-events:none;z-index:1; border:1.5px dashed rgba(255,226,170,.28)} .pq-info{background:linear-gradient(180deg,rgba(28,22,18,.9),rgba(10,8,6,.86));box-shadow:inset 0 1px 0 rgba(255,236,200,.18),0 0 0 1px rgba(195,149,67,.45),0 3px 8px rgba(0,0,0,.45)} .pq-card{box-shadow:0 1px 0 #cbbd9c,0 1.5px 1px rgba(0,0,0,.22),0 3px 6px -2px rgba(0,0,0,.4),0 10px 16px -10px rgba(0,0,0,.55)} @media (max-width:640px){ .pq-table::after{inset:calc(12% - 1.25cqw) calc(5% - 1.25cqw) calc(16% - 1.25cqw);border-radius:46%/36%} .pq-felt::before{border-radius:46%/36%} } /* ===== 1.17.16 · Billar (billar.js): mesa de paño azul petróleo, bandas de nogal y miras de latón ===== */ .bld{display:flex;flex-direction:column;gap:10px;--bl-brass:#e3c06a} .bl-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .bl-newb{margin-left:auto} .bl-players{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;max-width:1000px;width:100%;margin:0 auto} .bl-pl{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:6px 12px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent);min-width:0} .bl-pl-1{justify-content:flex-end;text-align:right} .bl-pl b{font-size:15px} .bl-pl > span{font-size:13px;opacity:.75} .bl-pl.on{box-shadow:0 0 0 2px var(--bl-brass),0 0 14px color-mix(in srgb,var(--bl-brass) 45%,transparent)} .bl-left{display:flex;gap:3px;flex-wrap:wrap} .bl-left i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 10px/1 system-ui,sans-serif;font-style:normal;color:#151515;background:radial-gradient(circle,#fbf8ef 0 42%,var(--c) 44%);box-shadow:inset 0 -2px 3px rgba(0,0,0,.35)} .bl-left i[data-s="1"]{background:radial-gradient(circle,#fbf8ef 0 42%,transparent 44%),linear-gradient(#f7f3e8 0 22%,var(--c) 22% 78%,#f7f3e8 78%)} .bl-left i.in{opacity:.28} .bl-nine{font-weight:700;font-variant-numeric:tabular-nums;color:var(--bl-brass);min-width:3ch;text-align:center} .bl-stage{position:relative;width:min(100%,1000px);margin:0 auto} .bl-wrap{width:100%} .bl-cv{display:block;max-width:100%;border-radius:18px;box-shadow:0 22px 44px -22px rgba(0,0,0,.8);touch-action:none;cursor:crosshair} .bl-cv:focus-visible{outline:3px solid var(--bl-brass);outline-offset:3px} .bl-status{margin:0;min-height:1.4em;text-align:center} .bl-ctl{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .bl-poww{display:flex;align-items:center;gap:8px;font-size:13px} .bl-pow{width:min(240px,40vw);accent-color:var(--bl-brass)} .bl-spin .so-seg{min-height:32px;padding:0 10px;font-size:13px} .bl-shoot{min-width:96px} .bl-foot{display:flex;justify-content:flex-end} @media (max-width:700px){ .bl-newb{margin-left:0} .bl-players{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .bl-nine{grid-column:1/-1;grid-row:1} .bl-pl{padding:5px 8px}.bl-pl b{font-size:14px} .bl-left i{width:17px;height:17px;font-size:9px} .bl-cv{border-radius:12px} .bl-poww{flex:1 1 100%;justify-content:center}.bl-pow{width:100%} .bl-ctl .btn{flex:1 1 auto;min-height:44px} .bl-spin .so-seg{min-height:40px} } /* 1.17.41 · teléfono acostado: la mesa a la izquierda, con todo el alto que queda (--fw-h, fswin.js), y el tiro (dirección, fuerza, efecto y «Tirar») en una columna a la derecha. Antes la mesa medía todo el ancho y había que bajar para verla entera */ @media (max-height:520px) and (min-width:560px){ .bld{display:grid;grid-template-columns:minmax(0,1fr) 214px;grid-template-rows:auto auto auto auto 1fr;gap:8px 14px;align-items:start} .bl-top,.bl-players,.bld > .gk-rules{grid-column:1/-1} .bl-players{max-width:none} .bl-stage{grid-column:1;grid-row:3/6;width:min(100%,calc((var(--fw-h,100dvh) - 92px) * 108 / 58))} .bl-status{grid-column:2;grid-row:3;text-align:left;font-size:13px} .bl-ctl{grid-column:2;grid-row:4;justify-content:flex-start;align-content:flex-start} .bl-poww,.bl-spin,.bl-shoot{flex:1 1 100%} .bl-poww{justify-content:space-between}.bl-pow{width:auto;flex:1} .bl-foot{grid-column:2;grid-row:5;justify-content:flex-start} } /* 1.17.64 · teléfono acostado: los letreros de los jugadores pasan a la columna de la derecha y las opciones de arriba se compactan en un solo renglón, así la mesa toma todo el alto libre (antes la fila de opciones se partía en dos y la página bajaba unos 44 px) */ @media (max-height:520px) and (min-width:560px){ .bl-top{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none} .bl-top .so-vars{flex:none;flex-wrap:nowrap} .bl-top .so-seg{min-height:30px;padding:0 8px;font-size:12.5px} .bl-top .btn{flex:none;min-height:32px;padding:0 10px;font-size:13px} .bl-players{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:4px} .bl-players>*{min-width:0} .bl-stage{grid-row:2/6;width:min(100%,calc((var(--fw-h,100dvh) - 52px) * 108 / 58))} .bl-status{grid-row:3}.bl-ctl{grid-row:4}.bl-foot{grid-row:5} } /* la columna de la derecha, compacta, para que no baje; en el más angosto (iPhone SE acostado) también las opciones de arriba */ @media (max-height:520px) and (min-width:560px){ .bld{row-gap:5px} .bl-pl{padding:3px 8px;gap:2px 6px}.bl-pl b{font-size:12.5px}.bl-pl > span{font-size:11.5px} .bl-status{font-size:12px;line-height:1.25;min-height:0} .bl-ctl{gap:5px} .bl-ctl .btn{min-height:34px} .bl-spin .so-seg{min-height:30px;font-size:12px} .bl-poww{font-size:12px} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .bld{grid-template-columns:minmax(0,1fr) 200px} .bl-top .so-seg{padding:0 6px;font-size:11.5px} .bl-top .btn{padding:0 8px;font-size:12px} } /* ===== 1.17.17 · Rompebloques (rompe.js): barras de metalófono sobre el terciopelo ciruela de un estuche de madera ===== */ .rmp-cq{container-type:inline-size} .rmpd{display:flex;justify-content:center;align-items:flex-start;gap:18px;--rmp-gold:#e0a92a} .rmp-stage{position:relative;flex:none;margin:6px;border-radius:16px} .rmp-wrap{display:flex;justify-content:center} /* el estuche: un marco de nogal alrededor del terciopelo */ .rmp-cv{display:block;max-width:100%;border-radius:16px;touch-action:none;cursor:none; box-shadow:0 0 0 5px #6e3f22,0 0 0 6px #2b160b,0 26px 46px -22px rgba(0,0,0,.8)} .rmp-cv:focus-visible{outline:3px solid var(--rmp-gold);outline-offset:9px} .rmp-side{display:flex;flex-direction:column;gap:12px;flex:0 1 250px;min-width:200px;padding-top:6px} .rmp-head{display:grid;gap:2px} .rmp-lvl{margin:0;font-size:13px;opacity:.72;font-variant-numeric:tabular-nums} .rmp-song{margin:0;font-size:19px;line-height:1.2;text-wrap:balance} .rmp-by{margin:0;font-size:13px;opacity:.72;font-style:italic} .rmp-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0} .rmp-nums>div{display:grid;gap:2px;padding:7px 6px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:0} .rmp-nums dt{font-size:11px;opacity:.72} .rmp-nums dd{margin:0;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rmp-lives b{letter-spacing:.06em} .rmp-status{margin:0;min-height:2.9em;font-size:14px;line-height:1.4} .rmp-btns{display:flex;flex-wrap:wrap;gap:8px} .rmp-btns .btn{min-height:38px} .rmp-btns .mtx-tb-ic{width:38px;height:38px} .rmp-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} /* angosto (teléfono o ventana chica): arriba la canción y las cifras, la mesa tan grande como quepa, los botones abajo */ @container (max-width:620px){ .rmpd{flex-direction:column;align-items:stretch;gap:10px} .rmp-stage{align-self:center;margin:5px} .rmp-side{order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;flex:none;min-width:0;padding-top:0} .rmp-head{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:0 8px} .rmp-song{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rmp-by{display:none} .rmp-nums{grid-template-columns:repeat(3,auto);gap:4px} .rmp-nums>div{padding:4px 8px} .rmp-nums dt{font-size:10px}.rmp-nums dd{font-size:15px} .rmp-status{grid-column:1/-1;min-height:1.4em;font-size:13px;text-align:center} .rmp-btns{grid-column:1/-1;justify-content:center} .rmp-btns .btn{flex:1 1 auto;min-height:44px} .rmp-btns .mtx-tb-ic{width:44px;height:44px;flex:none} .rmp-rules{grid-column:1/-1} .rmp-cv{border-radius:12px;box-shadow:0 0 0 4px #6e3f22,0 0 0 5px #2b160b,0 18px 30px -18px rgba(0,0,0,.8)} } @container (max-width:380px){ .rmp-side{grid-template-columns:minmax(0,1fr)} .rmp-nums{grid-template-columns:repeat(3,minmax(0,1fr))} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el lienzo a la izquierda con todo el alto y el panel a la derecha también en los teléfonos chicos (antes, debajo de 620 px de ancho, el panel se iba arriba y el lienzo se encogía) */ @media (max-height:520px) and (min-width:560px){ .rmpd{flex-direction:row;align-items:flex-start;gap:12px} .rmp-side{order:0;flex:0 1 220px;min-width:180px;grid-template-columns:minmax(0,1fr)} } /* ===== Materiales reales (Andre, 21 oct: «Están muy planos»): el estuche es de nogal con veta y bisel, con un filo de latón alrededor del terciopelo (en el lienzo, el terciopelo tiene grano y las barras su sombra, su canto y su brillo). ===== */ .rmp-stage{isolation:isolate} .rmp-stage::before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:21px;pointer-events:none; background: radial-gradient(120% 50% at 50% -8%,rgba(255,214,160,.3),transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='600'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .004' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .1 0 0 0 0 .04 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='120' height='600' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/120px 600px, linear-gradient(90deg,#5a3318,#7a4a26 50%,#5a3318); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.45),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 26px 46px -22px rgba(0,0,0,.8)} .rmp-cv{box-shadow:0 0 0 1.5px #b88c3e,0 0 0 2.5px rgba(46,24,6,.8),inset 0 0 0 1px rgba(0,0,0,.4)} @container (max-width:620px){ .rmp-stage::before{inset:-5px;border-radius:16px} .rmp-cv{box-shadow:0 0 0 1.5px #b88c3e,0 0 0 2.5px rgba(46,24,6,.8)} } /* ===== 1.17.18 · Batalla naval en Coralópolis (naval.js): una pantalla de sonar para las aguas del rival y el arrecife para las tuyas ===== */ .nvd{container-type:inline-size;display:flex;flex-direction:column;gap:10px;--nv-brass:#d9b25a;--nv-brass2:#7a5a1e;--nv-phos:#6dffc8} .nv-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .nv-newb{margin-left:auto} .nv-main{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px 22px;align-items:start;max-width:1040px;width:100%;margin:0 auto;border-radius:16px} .nvd[data-phase="place"] .nv-main{grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr)} .nv-sec{display:flex;flex-direction:column;gap:8px;min-width:0} .nv-sec[hidden]{display:none} .nv-h{margin:0;font-size:15px;font-weight:700;text-wrap:balance} /* el tablero: letras arriba, números a la izquierda y el mar con su bisel de latón */ .nv-board{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:18px auto;gap:3px} .nv-cols{grid-column:2;display:grid;grid-template-columns:repeat(10,1fr);font-size:11px;font-weight:600;text-align:center;opacity:.7} .nv-rows{grid-row:2;display:grid;grid-template-rows:repeat(10,1fr);font-size:11px;font-weight:600;align-items:center;justify-items:end;padding-right:2px;opacity:.7;font-variant-numeric:tabular-nums} .nv-sea{grid-column:2;grid-row:2;position:relative;aspect-ratio:1;width:100%;max-width:min(100%,68vh);border-radius:12px;overflow:hidden; box-shadow:0 0 0 4px var(--nv-brass),0 0 0 5px var(--nv-brass2),inset 0 0 0 1px rgba(0,0,0,.4),0 18px 34px -18px rgba(0,0,0,.75)} .nv-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);z-index:2} .nv-c{position:relative;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-right:1px solid var(--nv-line);border-bottom:1px solid var(--nv-line);font:inherit} .nv-c:nth-child(10n){border-right:0}.nv-c:nth-child(n+91){border-bottom:0} .nv-c:disabled{cursor:default} .nv-c:focus-visible{outline:2px solid #fff;outline-offset:-3px;z-index:3} .nv-art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .nv-fx{position:absolute;inset:0;z-index:4;pointer-events:none} /* la pantalla de sonar: fósforo verde azulado, anillos y el barrido */ .nv-sonar{--nv-line:rgba(109,255,200,.16)} .nv-sonar .nv-sea{background:radial-gradient(circle at 50% 50%,transparent 0 19.6%,rgba(109,255,200,.12) 20% 20.4%,transparent 20.8% 39.6%,rgba(109,255,200,.1) 40% 40.4%,transparent 40.8% 59.6%,rgba(109,255,200,.08) 60% 60.4%,transparent 60.8%), radial-gradient(circle at 50% 45%,#0d4a3d,#062a24 62%,#03140f)} .nv-sweep{position:absolute;inset:-25%;z-index:1;pointer-events:none;background:conic-gradient(from 0deg,rgba(109,255,200,0) 0 300deg,rgba(109,255,200,.05) 330deg,rgba(109,255,200,.22) 359deg,rgba(109,255,200,0) 360deg);animation:nv-sweep 4.5s linear infinite} @keyframes nv-sweep{to{transform:rotate(1turn)}} .nv-sonar .nv-c:not(:disabled):hover,.nv-sonar .nv-c:not(:disabled):focus-visible{background:rgba(109,255,200,.18)} .nv-sonar.nv-son .nv-c:not(:disabled):hover{background:rgba(255,224,120,.22)} .nv-sonar .nv-c.m::after{content:"";position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:rgba(160,255,225,.55)} .nv-sonar .nv-c.h::after{content:"";position:absolute;left:50%;top:50%;width:52%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff3c8 0 18%,#ff8a3a 40%,rgba(255,60,40,.0) 72%);box-shadow:0 0 10px rgba(255,120,60,.8)} .nv-sonar .nv-c.s::after{background:radial-gradient(circle,#ffd0c0 0 14%,#ff4a3a 42%,rgba(255,40,40,0) 74%)} .nv-sonar .nv-c.sc{background:rgba(255,224,120,.09)} .nv-sonar .nv-c.scc::before{content:attr(data-k);position:absolute;inset:14%;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,224,120,.85);color:#ffe9a8;font-weight:800;font-size:clamp(11px,2.4cqw,18px);font-variant-numeric:tabular-nums;background:rgba(10,30,24,.6);z-index:1} .nv-sonar .nv-ship{filter:saturate(.5) brightness(.75) sepia(.5) hue-rotate(-25deg)} .nv-sonar .nv-ship.reveal{opacity:.55;filter:saturate(.4) brightness(.9)} .nv-sonar.nv-wait .nv-sea{filter:saturate(.75) brightness(.9)} /* el arrecife: agua turquesa con reflejos y arena al fondo */ .nv-reef{--nv-line:rgba(220,255,255,.14)} .nv-reef .nv-sea{background:radial-gradient(ellipse 30% 18% at 22% 30%,rgba(255,255,255,.08),transparent 70%),radial-gradient(ellipse 26% 14% at 72% 64%,rgba(255,255,255,.07),transparent 70%), repeating-radial-gradient(circle at 30% 120%,rgba(255,236,190,.05) 0 6px,transparent 6px 16px),linear-gradient(160deg,#1a8ea3,#0d5d75 55%,#0a4458)} .nv-reef .nv-c.pv{background:rgba(160,255,210,.32)} .nv-reef .nv-c.pv.bad{background:rgba(255,110,110,.35)} .nvd[data-phase="place"] .nv-reef .nv-c:not(:disabled):hover{background:rgba(255,255,255,.12)} .nv-reef .nv-c.m::after{content:"";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgba(235,255,255,.65)} .nv-reef .nv-c.h::after{content:"";position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,#fff0c0 0 16%,#ff6a3a 44%,rgba(255,60,40,0) 74%);box-shadow:0 0 8px rgba(255,90,60,.9);z-index:3} .nv-ship.sel{filter:drop-shadow(0 0 .12px #fff) brightness(1.15)} .nv-reef .nv-ship.sunk{opacity:.5;filter:grayscale(.7) brightness(.7)} /* los anillos del disparo y del sonar */ .nv-ring{position:absolute;width:10%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.3);border:2px solid rgba(200,255,240,.9);animation:nv-ring 1.1s ease-out forwards} .nv-ring.hit{border-color:#ffb36a;box-shadow:0 0 12px rgba(255,140,60,.8)} .nv-ring.scan{width:30%;border-color:rgba(255,224,120,.95);animation-duration:1.3s} @keyframes nv-ring{to{transform:translate(-50%,-50%) scale(2.2);opacity:0}} /* las flotas: cada submarino con sus casillas */ .nv-fleet h4{margin:0 0 4px;font-size:13px;opacity:.75} .nv-fleet ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px} .nv-fleet li{display:flex;align-items:center;gap:6px} .nv-fleet li.gone{opacity:.45;text-decoration:line-through} .nv-fi{display:inline-flex;gap:2px} .nv-fi i{width:9px;height:9px;border-radius:3px;background:color-mix(in srgb,currentColor 55%,transparent)} .nv-fi i.x{background:#ff6a3a} /* el muelle: los submarinos por acomodar */ .nv-dock{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:26px} .nv-dock[hidden]{display:none} .nv-dock-l{list-style:none;margin:0;padding:0;display:grid;gap:6px} .nv-dk{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:6px 12px;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:color-mix(in srgb,currentColor 5%,transparent);color:inherit;font:inherit;cursor:pointer;text-align:left} .nv-dk small{margin-left:auto;opacity:.65;font-variant-numeric:tabular-nums} .nv-dk[aria-pressed="true"]{border-color:var(--nv-brass);box-shadow:0 0 0 2px var(--nv-brass)} .nv-dk.on{opacity:.6} .nv-dk.on .nv-fi i{background:#5fd3a8} .nv-left{margin:0;min-height:1.2em;font-size:13px;opacity:.8} .nv-dock-b{display:flex;flex-wrap:wrap;gap:8px} /* la cortina entre turnos */ .nv-cover{position:absolute;inset:-6px;z-index:60;display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle at 50% 30%,#12485a,#06202b 70%);color:#eafcff} .nv-cover[hidden]{display:none} .nv-cov-card{display:grid;gap:8px;justify-items:center;text-align:center;max-width:34ch;padding:20px} .nv-cov-card h3{margin:0;font-size:22px;text-wrap:balance} .nv-cov-card p{margin:0;opacity:.85} .nv-cov-last{font-size:14px;min-height:1.2em} .nv-status{margin:0;text-align:center;min-height:2.6em} .nv-foot{display:flex;align-items:center;justify-content:center;gap:8px 14px;flex-wrap:wrap} .nv-sonb[aria-pressed="true"]{box-shadow:0 0 0 2px var(--nv-brass),0 0 14px color-mix(in srgb,var(--nv-brass) 55%,transparent)} .nv-shots{font-size:13px;opacity:.75;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){.nv-sweep{animation:none;opacity:.4}.nv-ring{animation-duration:.01s}} /* angosto (teléfono o ventana chica): un mar debajo del otro; el tuyo, más chico */ @container (max-width:640px){ .nv-newb{margin-left:0} .nv-main,.nvd[data-phase="place"] .nv-main{grid-template-columns:minmax(0,1fr);gap:12px} .nv-sec-o{width:min(100%,260px);justify-self:center} /* el aviso y el sonar, arriba del mar del rival: lo que pasó se lee sin bajar */ .nv-status{order:1;min-height:2.6em} .nv-foot{order:2} .nv-main{order:3} .nv-rules{order:4} .nvd[data-phase="place"] .nv-sec-o{width:100%} .nv-board{grid-template-columns:14px minmax(0,1fr);grid-template-rows:14px auto} .nv-cols,.nv-rows{font-size:10px} .nv-dock{padding-top:0} .nv-dock-l{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .nv-foot .btn,.nv-dock-b .btn{min-height:44px;flex:1 1 auto} .nv-foot .mtx-tb-ic{width:44px;height:44px;flex:none} } /* ===== 1.19.20 · Materiales reales (Andre, 21 oct: «Están muy planos»): el arrecife tiene la luz que baja en redes por el agua (cáusticas) y arena al fondo; las dos pantallas van en un bisel de latón con su brillo; los submarinos del muelle, en placas de latón. ===== */ .nvd .nv-sea{box-shadow:0 0 0 2px #f2d78f,0 0 0 4px #b8913e,0 0 0 6px #7a5a1e,0 0 0 7px rgba(255,236,190,.35),inset 0 0 0 1px rgba(0,0,0,.4),inset 0 10px 22px -8px rgba(0,0,0,.55),0 20px 36px -18px rgba(0,0,0,.8)} .nv-reef .nv-sea{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='turbulence' baseFrequency='.018' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 1.25'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='3' amplitude='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23t)'/%3E%3C/svg%3E") 0 0/220px 220px,radial-gradient(ellipse 30% 18% at 22% 30%,rgba(255,255,255,.08),transparent 70%),radial-gradient(ellipse 26% 14% at 72% 64%,rgba(255,255,255,.07),transparent 70%), radial-gradient(120% 60% at 50% 120%,rgba(232,212,160,.38),transparent 60%),linear-gradient(160deg,#1a8ea3,#0d5d75 55%,#0a4458);background-blend-mode:soft-light,normal,normal,normal,normal} .nv-sonar .nv-sea::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.12),transparent 45%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(0,0,0,.45))} .nvd .nv-dk{position:relative;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55);background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .nvd .nv-dk[aria-pressed="true"]{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px #6dffc8,0 0 14px rgba(109,255,200,.5)} .nvd .nv-dk small{opacity:.8} /* ===== 1.17.19 · Parchís (parchis.js): tablero de madera lacada y fichas de cuatro joyas ===== */ .pcd{container-type:inline-size;display:flex;flex-direction:column;gap:10px} .pc-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .pc-newb{margin-left:auto} .pc-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:18px;align-items:start;max-width:1040px;width:100%;margin:0 auto} .pc-stage{position:relative;justify-self:center;width:100%;max-width:min(100%,72vh);border-radius:18px} .pc-board{display:block;width:100%;height:auto;aspect-ratio:1;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))} .pc-pc{transition:transform .11s ease-out} .pc-pc.can{cursor:pointer} .pc-pc.can .pc-halo{animation:pc-halo 1.1s ease-in-out infinite} @keyframes pc-halo{50%{opacity:.25}} .pc-pc.last circle:nth-of-type(1){filter:drop-shadow(0 0 .12px #fff)} .pc-side{display:flex;flex-direction:column;gap:12px;min-width:0} .pc-players{list-style:none;margin:0;padding:0;display:grid;gap:6px} .pc-players li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;padding:7px 10px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .pc-players li.on{box-shadow:0 0 0 2px var(--pc1),0 0 14px color-mix(in srgb,var(--pc1) 45%,transparent)} .pc-chip{grid-row:span 2;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff8 0 12%,var(--pc1) 40%);box-shadow:inset 0 -2px 3px rgba(0,0,0,.35)} .pc-players b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pc-cnt{font-size:12px;opacity:.72;font-variant-numeric:tabular-nums} .pc-roll{display:flex;align-items:center;gap:12px} .pc-die{width:58px;height:58px;flex:none;border-radius:14px;box-shadow:0 0 0 3px var(--pc1,#888),0 8px 16px -8px rgba(0,0,0,.6)} .pc-die svg{display:block;width:100%;height:100%} .pc-die.dim{opacity:.55} .pc-die.roll{animation:pc-roll .5s cubic-bezier(.3,1.4,.5,1)} @keyframes pc-roll{0%{transform:rotate(-200deg) scale(.6)}100%{transform:none}} .pc-bonus{font-weight:800;font-size:18px;min-width:2.5ch;font-variant-numeric:tabular-nums} .pc-rollb{flex:1 1 auto;min-height:44px;box-shadow:0 0 0 2px var(--pc1,transparent)} .pc-pick{display:flex;gap:8px;flex-wrap:wrap;min-height:0} .pc-pk{min-width:44px;min-height:40px;font-weight:800;box-shadow:inset 0 0 0 2px var(--pc1)} .pc-status{margin:0;min-height:2.8em;font-size:14px;line-height:1.4} .pc-btns{display:flex;flex-wrap:wrap;gap:8px} .pc-btns [aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor} .pc-rules ol{font-size:13px;line-height:1.45} @media (prefers-reduced-motion:reduce){.pc-pc{transition:none}.pc-die.roll{animation:none}.pc-pc.can .pc-halo{animation:none}} @container (max-width:680px){ .pc-newb{margin-left:0} .pc-main{grid-template-columns:minmax(0,1fr);gap:12px} .pc-stage{max-width:100%} .pc-players{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .pc-roll .btn,.pc-btns .btn{min-height:44px} .pc-side{order:0} .pc-btns .mtx-tb-ic{width:44px;height:44px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el tablero cabe entero a lo alto (--fw-h) */ @media (max-height:520px) and (min-width:560px){ .pc-stage{max-width:min(100%,calc(var(--fw-h,100dvh) - 92px))} } /* ===== 1.19.19 · Materiales reales (Andre, 21 oct: «Están muy planos»): el tablero es de nogal lacado con su veta, filo de latón, superficie de marfil con fibra, huecos tallados en las casas, estrella de latón en la meta y el brillo de la lámpara (pchBoardSVG). El lado, como en el Ajedrez: tablilla de nogal, placas de latón y botones de boj. ===== */ .pcd .pc-players li{padding-left:20px;padding-right:20px} .pcd .pc-players li.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px var(--pc1),0 0 16px 2px color-mix(in srgb,var(--pc1) 55%,transparent)} .pcd .pc-cnt{opacity:.85} .pcd .pc-die{box-shadow:0 0 0 3px var(--pc1,#888),0 2px 0 3px rgba(0,0,0,.25),0 10px 16px -8px rgba(0,0,0,.7)} .pcd .pc-side .pc-pk{color:#3a2610} .pcd .pc-side{padding:12px;border-radius:16px;color:#f6e7c8; background:radial-gradient(120% 50% at 50% -5%,rgba(255,214,160,.22),transparent 60%),var(--gk-grain-h) -80px 0/600px 120px,linear-gradient(180deg,#6e4222,#4f2c14 50%,#3c200c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 14px 28px -14px rgba(0,0,0,.65)} .pcd .pc-side .gk-msg{color:#fbeccb;text-shadow:0 1px 0 rgba(0,0,0,.55)} .pcd .pc-players li{position:relative;padding-left:20px;padding-right:20px;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55); background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .pcd .pc-players li::before,.pcd .pc-players li::after{content:"";position:absolute;top:50%;left:7px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none; background:linear-gradient(135deg,transparent 42%,rgba(60,38,8,.75) 44% 56%,transparent 58%),radial-gradient(circle at 35% 35%,#fff0c4,#b48a3c 60%,#6b4c16);box-shadow:0 0 0 .5px rgba(50,30,6,.6)} .pcd .pc-players li::after{left:auto;right:7px} .pcd .pc-players li.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.55),0 0 16px 2px rgba(255,196,80,.45)} .pcd.thinking .pc-players li.on{animation:pc-players-li-glow 1.2s ease-in-out infinite} @keyframes pc-players-li-glow{50%{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.15),0 0 6px rgba(255,196,80,.15)}} .pcd .pc-side .btn{border:1px solid rgba(60,36,12,.6);border-radius:8px;color:#3a2610;text-shadow:0 1px 0 rgba(255,248,226,.6); background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#f4e5c4,#dcc391);background-blend-mode:soft-light,normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s} .pcd .pc-side .btn.primary{color:#fff8e4;text-shadow:0 1px 0 rgba(0,0,0,.45);background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#a3542c,#7a3618);border-color:rgba(40,14,4,.7);box-shadow:inset 0 1px 0 rgba(255,210,170,.5),0 2px 0 #4a1e0a,0 3px 5px rgba(0,0,0,.35)} .pcd .pc-side .btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(80,50,15,.35),0 0 0 #8a6634,0 1px 2px rgba(0,0,0,.3)} .pcd .pc-side .btn:disabled{opacity:.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6634} .pcd .pc-side .btn:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px} @media (max-height:520px) and (min-width:560px){ .pcd .pc-side{padding:6px;border-radius:12px} } @media (prefers-reduced-motion:reduce){ .pcd.thinking .pc-players li.on{animation:none} .pcd .pc-side .btn{transition:none} } .pcd .pc-players li.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px var(--pc1),0 0 16px 2px color-mix(in srgb,var(--pc1) 55%,transparent)} .pcd .pc-side .pc-pk{box-shadow:inset 0 0 0 2px var(--pc1),inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35)} /* ===== 1.17.20 · Mancala (mancala.js): tablero de nogal tallado y semillas de vidrio ===== */ .mncd{container-type:inline-size;display:flex;flex-direction:column;gap:10px;--mnc-gold:#e0b45a} .mnc-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .mnc-newb{margin-left:auto} .mnc-stage{position:relative;width:100%;max-width:min(980px,calc((100vh + var(--fw-gain,0px) - 300px) * 8 / 3));margin:0 auto;border-radius:24px} .mnc-board{display:block;width:100%;height:auto;aspect-ratio:8/3;filter:drop-shadow(0 18px 24px rgba(0,0,0,.4))} .mnc-n{font:700 22px/1 system-ui,sans-serif;fill:#f6e6c8;paint-order:stroke;stroke:#2a1408;stroke-width:4px;font-variant-numeric:tabular-nums} .mnc-n.hl{fill:#ffe08a} .mnc-hits{position:absolute;inset:0} .mnc-hit{position:absolute;width:10%;height:26.667%;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;color:inherit} .mnc-hit:disabled{cursor:default} .mnc-hit.can:hover,.mnc-hit.can:focus-visible{background:radial-gradient(circle,rgba(255,224,140,.0) 55%,rgba(255,224,140,.35) 72%,rgba(255,224,140,0) 80%)} .mnc-hit.can{box-shadow:inset 0 0 0 2px rgba(255,224,140,.38)} .mnc-hit:focus-visible{outline:3px solid var(--mnc-gold);outline-offset:2px} .mnc-hit.bump{animation:mnc-bump .22s ease-out} @keyframes mnc-bump{40%{transform:scale(1.07)}} .mnc-pl{display:flex;align-items:center;gap:10px;justify-content:center;font-size:15px} .mnc-pl b{font-weight:700} .mnc-sc{display:inline-grid;place-items:center;min-width:2.4em;height:1.9em;padding:0 8px;border-radius:999px;background:color-mix(in srgb,currentColor 9%,transparent);font-weight:800;font-variant-numeric:tabular-nums} .mnc-pl.on b{text-decoration:underline;text-decoration-color:var(--mnc-gold);text-decoration-thickness:3px;text-underline-offset:5px} .mnc-status{margin:0;text-align:center;min-height:2.6em} .mnc-foot{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} @media (prefers-reduced-motion:reduce){.mnc-hit.bump{animation:none}} @container (max-width:640px){ .mnc-newb{margin-left:0} .mnc-n{font-size:30px} .mnc-foot .btn{min-height:44px} .mnc-foot .mtx-tb-ic{width:44px;height:44px} } /* ===== 1.17.21 · Serpientes y escaleras (escaleras.js): escaleras de pentagrama y serpientes con escamas de teclado ===== */ .syed{container-type:inline-size;display:flex;flex-direction:column;gap:10px} .sye-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .sye-newb{margin-left:auto} .sye-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,270px);gap:18px;align-items:start;max-width:1000px;width:100%;margin:0 auto} .sye-stage{position:relative;justify-self:center;width:100%;max-width:min(100%,72vh);border-radius:16px} .sye-board{display:block;width:100%;height:auto;aspect-ratio:11.8/10.8;filter:drop-shadow(0 16px 24px rgba(0,0,0,.4))} .sye-tok.on .sye-halo{animation:sye-halo 1.1s ease-in-out infinite} @keyframes sye-halo{50%{opacity:.2}} .sye-side{display:flex;flex-direction:column;gap:12px;min-width:0} .sye-players{list-style:none;margin:0;padding:0;display:grid;gap:6px} .sye-players li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:center;padding:7px 10px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .sye-players li.on{box-shadow:0 0 0 2px var(--sc),0 0 14px color-mix(in srgb,var(--sc) 45%,transparent)} .sye-chip{grid-row:span 2;width:26px;height:26px} .sye-chip svg{display:block;width:100%;height:100%} .sye-players b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sye-at{font-size:12px;opacity:.72;font-variant-numeric:tabular-nums} .sye-roll{display:flex;align-items:center;gap:12px} .sye-die{width:58px;height:58px;flex:none;border-radius:14px;box-shadow:0 0 0 3px var(--sc,#888),0 8px 16px -8px rgba(0,0,0,.6)} .sye-die svg{display:block;width:100%;height:100%} .sye-die.dim{opacity:.55} .sye-die.roll{animation:sye-roll .5s cubic-bezier(.3,1.4,.5,1)} @keyframes sye-roll{0%{transform:rotate(-200deg) scale(.6)}100%{transform:none}} .sye-rollb{flex:1 1 auto;min-height:44px;box-shadow:0 0 0 2px var(--sc,transparent)} .sye-status{margin:0;min-height:2.8em;font-size:14px;line-height:1.4} .sye-btns{display:flex;flex-wrap:wrap;gap:8px} .sye-btns [aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor} .sye-rules ol{font-size:13px;line-height:1.45} @media (prefers-reduced-motion:reduce){.sye-tok.on .sye-halo,.sye-die.roll{animation:none}} @container (max-width:680px){ .sye-newb{margin-left:0} .sye-main{grid-template-columns:minmax(0,1fr);gap:12px} .sye-stage{max-width:100%} .sye-players{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .sye-btns .btn{min-height:44px} .sye-btns .mtx-tb-ic{width:44px;height:44px} } /* ===== 1.19.19 · Materiales reales (Andre, 21 oct: «Están muy planos»): marco de nogal con veta y filo de latón, casillas pintadas sobre cartón con fibra, serpientes con lomo brillante y la laca con la luz de la lámpara (syeBoardSVG). El lado, como en el Ajedrez: tablilla de nogal, placas de latón y botones de boj. ===== */ .syed .sye-die{box-shadow:0 0 0 3px var(--sc,#888),0 2px 0 3px rgba(0,0,0,.25),0 10px 16px -8px rgba(0,0,0,.7)} .syed .sye-side{padding:12px;border-radius:16px;color:#f6e7c8; background:radial-gradient(120% 50% at 50% -5%,rgba(255,214,160,.22),transparent 60%),var(--gk-grain-h) -80px 0/600px 120px,linear-gradient(180deg,#6e4222,#4f2c14 50%,#3c200c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.4),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.6),0 14px 28px -14px rgba(0,0,0,.65)} .syed .sye-side .gk-msg{color:#fbeccb;text-shadow:0 1px 0 rgba(0,0,0,.55)} .syed .sye-players li{position:relative;padding-left:20px;padding-right:20px;border:0;border-radius:6px;color:#2b1c08;text-shadow:0 1px 0 rgba(255,244,208,.55); background:var(--gk-brush) 0 0/300px 40px,var(--gk-brass);background-blend-mode:overlay,normal; box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 2px 3px rgba(0,0,0,.45)} .syed .sye-players li::before,.syed .sye-players li::after{content:"";position:absolute;top:50%;left:7px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none; background:linear-gradient(135deg,transparent 42%,rgba(60,38,8,.75) 44% 56%,transparent 58%),radial-gradient(circle at 35% 35%,#fff0c4,#b48a3c 60%,#6b4c16);box-shadow:0 0 0 .5px rgba(50,30,6,.6)} .syed .sye-players li::after{left:auto;right:7px} .syed .sye-players li.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.55),0 0 16px 2px rgba(255,196,80,.45)} .syed.thinking .sye-players li.on{animation:sye-players-li-glow 1.2s ease-in-out infinite} @keyframes sye-players-li-glow{50%{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -1px 0 rgba(90,60,15,.6),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px rgba(255,214,110,.15),0 0 6px rgba(255,196,80,.15)}} .syed .sye-side .btn{border:1px solid rgba(60,36,12,.6);border-radius:8px;color:#3a2610;text-shadow:0 1px 0 rgba(255,248,226,.6); background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#f4e5c4,#dcc391);background-blend-mode:soft-light,normal; box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #8a6634,0 3px 5px rgba(0,0,0,.35);transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s} .syed .sye-side .btn.primary{color:#fff8e4;text-shadow:0 1px 0 rgba(0,0,0,.45);background:var(--gk-grain-h) -200px -30px/420px 84px,linear-gradient(180deg,#a3542c,#7a3618);border-color:rgba(40,14,4,.7);box-shadow:inset 0 1px 0 rgba(255,210,170,.5),0 2px 0 #4a1e0a,0 3px 5px rgba(0,0,0,.35)} .syed .sye-side .btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 2px rgba(80,50,15,.35),0 0 0 #8a6634,0 1px 2px rgba(0,0,0,.3)} .syed .sye-side .btn:disabled{opacity:.5;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a6634} .syed .sye-side .btn:focus-visible{outline:2px solid #ffe2a0;outline-offset:2px} @media (max-height:520px) and (min-width:560px){ .syed .sye-side{padding:6px;border-radius:12px} } @media (prefers-reduced-motion:reduce){ .syed.thinking .sye-players li.on{animation:none} .syed .sye-side .btn{transition:none} } .syed .sye-players li.on{box-shadow:inset 0 1px 0 rgba(255,250,225,.75),0 0 0 1px rgba(60,38,8,.65),0 0 0 3px var(--sc),0 0 16px 2px color-mix(in srgb,var(--sc) 55%,transparent)} .syed .sye-at{opacity:.85} /* ===== 1.17.22 · Conquián (conquian.js): baraja española sobre un mantel de cantina con orilla de sarape ===== */ .cnqd{container-type:inline-size;display:flex;flex-direction:column;gap:10px;--cnq-w:78px} .cnq-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .cnq-newb{margin-left:auto} .cnq-table{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'cpu mid' 'me mid';gap:12px 20px;padding:16px 18px;border-radius:18px;max-width:1000px;width:100%;margin:0 auto;box-sizing:border-box;color:#fdf3e2; background:radial-gradient(ellipse at 50% 40%,#2f6a52,#1b4535 70%,#123326); box-shadow:inset 0 0 0 6px #b8452e,inset 0 0 0 9px #f2c14e,inset 0 0 0 12px #2a8a7a,inset 0 0 0 14px #f6efe0,0 20px 34px -20px rgba(0,0,0,.7)} .cnq-cpu{grid-area:cpu}.cnq-me{grid-area:me} .cnq-row{display:flex;align-items:flex-start;gap:12px;min-height:calc(var(--cnq-w) * .75 * 1.5);flex-wrap:wrap;padding:4px 8px} .cnq-cpuhand{display:flex} .cnq-cpuhand .cnq-back + .cnq-back{margin-left:calc(var(--cnq-w) * -.5)} .cnq-back{display:inline-block;width:calc(var(--cnq-w) * .7);aspect-ratio:2/3;border-radius:6px;background:var(--nai-back) center/cover;box-shadow:0 2px 4px rgba(0,0,0,.4);border:1px solid #e9dfc6} .cnq-melds{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 auto;min-width:0} .cnq-meld{display:flex;gap:0;padding:4px;margin:0;border:2px solid transparent;border-radius:10px;background:rgba(0,0,0,.14);cursor:pointer;color:inherit} .cnq-meld:disabled{cursor:default} .cnq-meld .cnq-card + .cnq-card{margin-left:calc(var(--cnq-w) * -.32)} .cnq-mymelds.can .cnq-meld{border-color:rgba(242,193,78,.35)} .cnq-meld.sel{border-color:#f2c14e;box-shadow:0 0 12px rgba(242,193,78,.6)} .cnq-meld.hint{border-color:#7fe0c0;box-shadow:0 0 12px rgba(127,224,192,.6)} .cnq-mlab{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.9;width:100%} .cnq-count{font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.25)} .cnq-card{display:inline-block;width:var(--cnq-w);aspect-ratio:2/3;flex:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} .cnq-card svg{display:block;width:100%;height:100%} .cnq-card.sm{width:calc(var(--cnq-w) * .72)} .cnq-card.big{width:calc(var(--cnq-w) * 1.35)} .cnq-card.big.mine{filter:drop-shadow(0 0 10px rgba(242,193,78,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.35))} .cnq-card.dim{opacity:.7} .cnq-empty{display:inline-block;width:calc(var(--cnq-w) * .7);aspect-ratio:2/3;border-radius:6px;border:2px dashed rgba(255,255,255,.25)} .cnq-empty.big{width:calc(var(--cnq-w) * 1.35)}.cnq-empty.sm{width:calc(var(--cnq-w) * .72)} .cnq-mid{grid-area:mid;align-self:center;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3cqw,32px);padding-right:16px} .cnq-stock,.cnq-dead{display:flex;flex-direction:column;align-items:center;gap:4px} .cnq-stock small,.cnq-dead small{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums} .cnq-status{margin:0;text-align:center;min-height:2.6em;max-width:72ch;margin-inline:auto} .cnq-acts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:40px} .cnq-hand{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:4px 0 6px} .cnq-hc{width:var(--cnq-w);aspect-ratio:2/3;padding:0;margin:0;border:0;border-radius:8px;background:none;cursor:pointer;transition:transform .12s;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))} .cnq-hc svg{display:block;width:100%;height:100%} .cnq-hc:disabled{cursor:default} .cnq-hc.sel{transform:translateY(-12px);filter:drop-shadow(0 0 8px rgba(242,193,78,.9))} .cnq-hand.disc .cnq-hc.sel{filter:drop-shadow(0 0 8px rgba(255,120,90,.9))} .cnq-hc.hint{transform:translateY(-6px);filter:drop-shadow(0 0 8px rgba(127,224,192,.95))} .cnq-hc:focus-visible{outline:3px solid #f2c14e;outline-offset:2px} .cnq-foot{display:flex;justify-content:center;gap:8px} @media (prefers-reduced-motion:reduce){.cnq-hc{transition:none}} @container (max-width:900px){ .cnqd{--cnq-w:64px} } @container (max-width:760px){ .cnq-table{grid-template-columns:minmax(0,1fr);grid-template-areas:'cpu' 'mid' 'me'} .cnq-mid{gap:clamp(16px,6cqw,56px);padding-right:0} } @container (max-width:680px){ .cnqd{--cnq-w:48px} .cnq-newb{margin-left:0} .cnq-table{padding:12px 10px} .cnq-hand{gap:4px} .cnq-acts .btn,.cnq-foot .btn{min-height:44px;flex:1 1 auto} .cnq-foot .mtx-tb-ic{width:44px;height:44px;flex:none} } @container (max-width:400px){ .cnqd{--cnq-w:42px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): las cartas un poco más chicas, para que tu mano se vea sin bajar */ @media (max-height:520px) and (min-width:560px){ .cnqd{--cnq-w:50px} .cnq-table{padding:10px 14px;gap:8px 16px} } /* ===== 1.19.19 · Materiales reales (Andre, 21 oct: «Están muy planos»): el mantel de la cantina es algodón tejido (trama y urdimbre) con su orilla de sarape, bajo la luz de una lámpara que cae desde arriba; tus cartas descansan en un atril de nogal con filo de latón, y todas las cartas tienen canto y sombra de contacto. ===== */ .cnqd .cnq-table{ background: radial-gradient(70% 55% at 50% 8%,rgba(255,236,190,.2),transparent 70%), repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px), repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px), var(--gk-fiber) 0 0/160px 160px, radial-gradient(ellipse at 50% 40%,#2f6a52,#1b4535 70%,#123326); background-blend-mode:normal,normal,normal,soft-light,normal; box-shadow:inset 0 0 0 6px #b8452e,inset 0 0 0 9px #f2c14e,inset 0 0 0 12px #2a8a7a,inset 0 0 0 14px #f6efe0,inset 0 18px 26px -10px rgba(0,0,0,.45),0 20px 34px -20px rgba(0,0,0,.7)} /* la trama del sarape: rayitas finas encima de las franjas */ .cnqd .cnq-table::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 1px,transparent 1px 2.5px); padding:14px;box-sizing:border-box;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .cnqd .cnq-card,.cnqd .cnq-hc{filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(0 3px 4px rgba(0,0,0,.4))} .cnqd .cnq-back{box-shadow:0 1px 0 rgba(0,0,0,.25),0 3px 5px rgba(0,0,0,.45)} .cnqd .cnq-meld{background:rgba(0,0,0,.18);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06)} .cnqd .cnq-count{background:rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} /* el atril: una repisa de nogal con filo de latón donde se paran tus cartas */ .cnqd .cnq-hand{position:relative;padding:8px 14px 18px;max-width:1000px;width:100%;margin:0 auto;box-sizing:border-box;border-radius:14px; background:linear-gradient(180deg,transparent 0 62%,rgba(0,0,0,.18) 62%,transparent 70%), linear-gradient(180deg,transparent 0 66%,#b88c3e 66% calc(66% + 2px),transparent calc(66% + 2px)), linear-gradient(180deg,transparent 0 66%,rgba(255,214,160,.0) 66%), var(--gk-grain-h) 0 100%/600px 120px, linear-gradient(180deg,transparent 0 66%,#7a4a26 66%,#4f2c14 100%); background-repeat:no-repeat;background-size:auto,auto,auto,600px 34%,auto;background-position:0 0,0 0,0 0,0 100%,0 0} .cnqd .cnq-hc.sel{filter:drop-shadow(0 0 8px rgba(242,193,78,.9)) drop-shadow(0 8px 6px rgba(0,0,0,.35))} /* ===== 1.17.23 · Lotería (loteria.js): el cantor con su carta grande, tu tabla de 4 × 4 con frijoles y las tablas de los vecinos ===== */ .lotd{container-type:inline-size;display:flex;flex-direction:column;gap:10px;--lot-rosa:#e4007c;--lot-amar:#ffcc00} .lot-top{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap} .lot-newb{margin-left:auto} .lot-main{position:relative;display:grid;grid-template-columns:minmax(180px,230px) minmax(0,380px) minmax(160px,210px);justify-content:center;gap:18px;align-items:start;border-radius:16px} .lot-cantor{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .lot-now{width:min(100%,200px);aspect-ratio:2/3;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))} .lot-now svg{display:block;width:100%;height:100%} .lot-now.in{animation:lot-in .45s cubic-bezier(.2,1.3,.5,1)} @keyframes lot-in{0%{transform:rotateY(80deg) scale(.85);opacity:.4}100%{transform:none;opacity:1}} .lot-deck{display:block;width:100%;height:100%;border-radius:10px;background:repeating-linear-gradient(45deg,var(--lot-rosa) 0 10px,#c2006a 10px 20px);border:3px solid #fffdf6;box-sizing:border-box} .lot-verse{margin:0;font-style:italic;font-size:15px;line-height:1.4;min-height:2.8em;max-width:28ch;text-wrap:balance} .lot-n{margin:0;font-size:12px;opacity:.75;font-variant-numeric:tabular-nums} .lot-prev{display:flex;gap:4px;justify-content:center;min-height:42px} .lot-mini{width:28px;aspect-ratio:2/3;opacity:.85} .lot-mini svg{display:block;width:100%;height:100%} .lot-cbtn{display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .lot-cbtn [aria-pressed="true"]:not([data-lot="pause"]){box-shadow:inset 0 0 0 2px currentColor} .lot-me{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:0;width:100%;max-width:400px;justify-self:center} /* la tabla no crece de más: con la ventana de siempre, el botón «¡Lotería!» se ve sin bajar */ .lot-goal{margin:0;text-align:center;font-size:14px} .lot-tabla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:10px;border-radius:14px;background:#8a4b2a;box-shadow:inset 0 0 0 3px #5a2e14,0 14px 24px -14px rgba(0,0,0,.7)} .lot-cell{position:relative;padding:0;margin:0;border:0;background:none;cursor:pointer;aspect-ratio:2/3;border-radius:6px;transition:transform .1s} .lot-cell svg{display:block;width:100%;height:100%} .lot-cell:hover{transform:translateY(-2px)} .lot-cell:focus-visible{outline:3px solid var(--lot-amar);outline-offset:2px} .lot-cell.pat{box-shadow:0 0 0 3px var(--lot-amar)} /* el frijol: un frijol pinto sobre la carta */ .lot-bean{position:absolute;left:50%;top:44%;width:42%;aspect-ratio:1.4;transform:translate(-50%,-50%) rotate(-24deg);border-radius:50%;background:radial-gradient(ellipse at 35% 30%,#d9a37a 0 12%,#8a4b2a 40%,#5a2e14 75%);box-shadow:0 3px 5px rgba(0,0,0,.45),inset -3px -3px 0 rgba(0,0,0,.18);animation:lot-bean .2s ease-out} .lot-bean::after{content:"";position:absolute;inset:22% 18%;border-radius:50%;background:radial-gradient(circle,rgba(255,240,220,.55) 0 18%,transparent 20%) 30% 40%/10px 10px,radial-gradient(circle,rgba(255,240,220,.45) 0 15%,transparent 17%) 70% 60%/8px 8px} @keyframes lot-bean{0%{transform:translate(-50%,-90%) rotate(-24deg) scale(1.4);opacity:0}} .lot-claim{min-height:52px;font-size:20px;font-weight:800;letter-spacing:.02em} .lot-side h4{margin:0 0 8px;font-size:13px;opacity:.8} .lot-rivals{list-style:none;margin:0;padding:0;display:grid;gap:10px} .lot-rivals li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;padding:8px;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent)} .lot-rivals b{grid-column:1/-1;font-size:14px} .lot-rt{display:grid;grid-template-columns:repeat(4,12px);gap:3px} .lot-rt i{width:12px;height:16px;border-radius:2px;background:#fbf1dc;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)} .lot-rt i.on{background:radial-gradient(ellipse at 50% 50%,#8a4b2a 0 45%,#fbf1dc 50%)} .lot-rc{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums} .lot-status{margin:0;text-align:center;min-height:2.6em;max-width:72ch;margin-inline:auto} .lot-foot{display:flex;justify-content:center;gap:8px} @media (prefers-reduced-motion:reduce){.lot-now.in,.lot-bean{animation:none}.lot-cell{transition:none}} @container (max-width:860px){ .lot-main{grid-template-columns:minmax(0,200px) minmax(0,1fr)} .lot-side{grid-column:1/-1} .lot-rivals{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} } @container (max-width:560px){ .lot-newb{margin-left:0} .lot-main{grid-template-columns:minmax(0,1fr);gap:12px} /* en el teléfono la carta del cantor se queda pegada arriba mientras bajas a tu tabla */ .lot-cantor{position:sticky;top:-16px;z-index:6;margin:0 -16px;padding:8px 16px;display:grid;grid-template-columns:72px minmax(0,1fr);text-align:left;align-items:center;gap:4px 12px; background:var(--win-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 16px -14px rgba(0,0,0,.6)} .lot-now{width:72px;grid-row:span 3} .lot-verse{font-size:14px;min-height:0;max-width:none} .lot-prev{justify-content:flex-start;min-height:0} .lot-mini{width:20px} .lot-cbtn{grid-column:1/-1;justify-content:stretch;flex-wrap:nowrap} .lot-cbtn .btn{padding-inline:8px;font-size:14px} .lot-cbtn .btn,.lot-foot .btn{flex:1 1 0;min-height:44px} .lot-tabla{gap:4px;padding:6px} .lot-foot .mtx-tb-ic{width:44px;height:44px;flex:none} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): la carta del cantor, tu tabla con todo el alto (--fw-h) y, a la derecha, la meta, «¡Lotería!» y los vecinos */ @media (max-height:520px) and (min-width:560px){ .lot-main{grid-template-columns:118px auto minmax(150px,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:8px 14px;justify-content:stretch} .lot-cantor{grid-column:1;grid-row:1/-1;gap:6px} .lot-now{width:100px} .lot-verse{font-size:13px;min-height:0} .lot-prev{min-height:0}.lot-mini{width:20px} .lot-cbtn .btn{padding-inline:8px;font-size:13px;min-height:34px} .lot-me{display:contents} .lot-tabla{grid-column:2;grid-row:1/-1;width:calc(38px + (var(--fw-h,100dvh) - 132px) / 1.5);box-sizing:border-box} .lot-goal{grid-column:3;grid-row:1;text-align:left} .lot-claim{grid-column:3;grid-row:2} .lot-side{grid-column:3;grid-row:3;min-height:0;overflow:auto} .lot-rivals{grid-template-columns:minmax(0,1fr)} } /* ===== 1.19.20 · Materiales reales (Andre, 21 oct: «Están muy planos»): tu tabla es una tablita de madera con su veta, canto con bisel y la luz de la lámpara; las cartas son cartoncillo con canto y sombra de contacto, y la baraja del cantor tiene grosor. ===== */ .lotd .lot-tabla{background:radial-gradient(90% 50% at 50% -5%,rgba(255,214,160,.28),transparent 65%),var(--gk-grain-h) 0 0/600px 120px,linear-gradient(170deg,#a05a32,#7a3f1f 55%,#5e2e14); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.45),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(40,16,4,.6),0 16px 28px -14px rgba(0,0,0,.7),0 3px 6px -1px rgba(0,0,0,.35)} .lotd .lot-cell svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3)) drop-shadow(0 2px 3px rgba(0,0,0,.35))} .lotd .lot-cell.pat{box-shadow:0 0 0 3px var(--lot-amar),0 0 12px rgba(255,204,0,.55)} .lotd .lot-deck{box-shadow:0 1px 0 #e9dcc0,0 2px 0 #fffdf6,0 3px 0 #e9dcc0,0 4px 0 #fffdf6,0 5px 0 #d8c8a4,0 8px 12px -2px rgba(0,0,0,.45)} .lotd .lot-mini{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))} /* ===== 1.17.24 · Pinball de la Plaza (pinball.js): la mesa de noche, con su gabinete de nogal y remates dorados ===== */ .pnb-cq{container-type:inline-size} .pnbd{display:flex;justify-content:center;align-items:flex-start;gap:18px;--pnb-gold:#e0a92a} .pnb-stage{position:relative;flex:none;margin:7px;border-radius:18px} .pnb-wrap{display:flex;justify-content:center} /* el gabinete: nogal con un filo dorado */ .pnb-cv{display:block;max-width:100%;border-radius:18px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; box-shadow:0 0 0 3px #c99a2e,0 0 0 7px #5a3218,0 0 0 8px #24120a,0 28px 50px -22px rgba(0,0,0,.85)} .pnb-cv:focus-visible{outline:3px solid var(--pnb-gold);outline-offset:11px} .pnb-side{display:flex;flex-direction:column;gap:12px;flex:0 1 250px;min-width:200px;padding-top:6px} .pnb-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0} .pnb-nums>div{display:grid;gap:2px;padding:8px 6px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:0} .pnb-score{grid-column:1/-1} .pnb-nums dt{font-size:11px;opacity:.72} .pnb-nums dd{margin:0;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pnb-score dd{font-size:26px;letter-spacing:.02em} .pnb-status{margin:0;min-height:4.2em;font-size:14px;line-height:1.4} .pnb-btns{display:flex;flex-wrap:wrap;gap:8px} .pnb-btns .btn{min-height:38px} .pnb-btns .mtx-tb-ic{width:38px;height:38px} .pnb-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} /* angosto (teléfono o ventana chica): las cifras arriba, la mesa tan grande como quepa, los botones abajo */ @container (max-width:620px){ .pnbd{flex-direction:column;align-items:stretch;gap:8px} .pnb-stage{align-self:center;margin:6px} .pnb-side{order:-1;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;flex:none;min-width:0;padding-top:0} .pnb-nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px} .pnb-score{grid-column:auto} .pnb-nums>div{padding:4px 6px} .pnb-nums dt{font-size:10px}.pnb-nums dd,.pnb-score dd{font-size:15px} .pnb-status{min-height:1.4em;font-size:13px;text-align:center} .pnb-btns{justify-content:center} .pnb-btns .btn{flex:1 1 auto;min-height:44px} .pnb-btns .mtx-tb-ic{width:44px;height:44px;flex:none} .pnb-cv{border-radius:14px;box-shadow:0 0 0 2px #c99a2e,0 0 0 5px #5a3218,0 0 0 6px #24120a,0 18px 30px -18px rgba(0,0,0,.8)} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el lienzo a la izquierda con todo el alto y el panel a la derecha también en los teléfonos chicos (antes, debajo de 620 px de ancho, el panel se iba arriba y el lienzo se encogía) */ @media (max-height:520px) and (min-width:560px){ .pnbd{flex-direction:row;align-items:flex-start;gap:12px} .pnb-side{order:0;flex:0 1 230px;min-width:180px;grid-template-columns:minmax(0,1fr)} } /* ===== 1.17.25 · Rompecabezas de Pinacópolis (rompecabezas.js): la galería de obras y la mesa del restaurador ===== */ .rzd{container-type:inline-size;height:100%;display:flex;flex-direction:column} .rz-pickwrap{flex:1 1 auto;min-height:0} .rz-pick{display:flex;flex-direction:column;gap:14px;padding-bottom:8px} /* la obra del día: la miniatura grande y su ficha */ .rz-day{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:12px;border-radius:16px;background:color-mix(in srgb,currentColor 6%,transparent)} .rz-dimg{display:block;width:auto;height:auto;max-width:220px;max-height:180px;border-radius:4px;box-shadow:0 0 0 4px #c9a15a,0 0 0 7px #6b4421,0 14px 22px -12px rgba(0,0,0,.7);margin:7px} .rz-dtxt{display:flex;flex-direction:column;gap:4px;min-width:0} .rz-dlab{margin:0;font-size:13px;opacity:.75} .rz-dtxt h3{margin:0;font:600 22px/1.2 Georgia,'DejaVu Serif',serif;text-wrap:balance} .rz-dtxt p{margin:0} .rz-dbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .rz-opts{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center} .rz-sel{display:flex;align-items:center;gap:8px;font-size:14px} .rz-sel select{min-height:36px;max-width:240px} .rz-gh{margin:0;font-size:15px;display:flex;align-items:baseline;gap:10px} .rz-gh small{font-weight:400;opacity:.7;font-size:13px} /* la galería: miniaturas con su marco */ .rz-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .rz-grid>li{display:flex} .rz-work{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:10px 8px;border:0;border-radius:12px;background:color-mix(in srgb,currentColor 5%,transparent);color:inherit;cursor:pointer;text-align:center;font:inherit;transition:transform .12s} .rz-work:hover{transform:translateY(-2px)} .rz-work:focus-visible{outline:3px solid #c9a15a;outline-offset:2px} .rz-wi{display:flex;align-items:center;justify-content:center;height:132px;width:100%} .rz-work img{display:block;width:auto;height:auto;max-width:calc(100% - 10px);max-height:120px;border-radius:2px;box-shadow:0 0 0 3px #c9a15a,0 0 0 5px #6b4421,0 8px 14px -8px rgba(0,0,0,.7);margin:5px 0 6px;background:#3a2a1a} .rz-wt{font-size:13px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rz-wp{font-size:12px;opacity:.72} .rz-ok{position:absolute;top:6px;right:6px;padding:1px 7px;border-radius:999px;background:#2f7a4a;color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums} .rz-note{margin:0;font-size:12px;opacity:.65} .rz-crnote{margin:-6px 0 0;font-size:13px;opacity:.8;max-width:80ch} .rz-cr{position:absolute;top:6px;left:6px;padding:1px 7px;border-radius:999px;background:linear-gradient(135deg,#f6dc8a,#c9963a);color:#3a2408;font-size:11px;font-weight:700} .rz-cr.in{position:static;display:inline-block;vertical-align:1px} /* la mesa */ .rz-board{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px} .rz-bar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap} .rz-head{display:flex;flex-direction:column;min-width:0;flex:1 1 200px} .rz-title{font:600 17px/1.2 Georgia,'DejaVu Serif',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rz-by{font-size:13px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rz-nums{font-variant-numeric:tabular-nums;font-size:15px;white-space:nowrap} /* la mesa del restaurador: nogal oscuro con un paño verde */ .rz-stage{position:relative;flex:1 1 auto;min-height:300px;border-radius:14px;overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#35574a,#1f3a30 70%,#16291f);box-shadow:inset 0 0 0 5px #5a3218,inset 0 0 0 6px #24120a,inset 0 0 40px rgba(0,0,0,.45)} .rz-cv{position:absolute;inset:0;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none} .rz-cv:active{cursor:grabbing} .rz-load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fdf3e2;text-align:center;padding:16px;background:rgba(10,20,15,.55)} .rz-load p{margin:0;max-width:40ch} .rz-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .rz-tools [aria-pressed="true"]{box-shadow:inset 0 0 0 2px currentColor} .rz-zoom{display:inline-flex;gap:4px} .rz-zb{min-width:40px;font-size:18px;line-height:1} .rz-status{margin:0;min-height:1.4em;font-size:14px} .rz-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} @media (prefers-reduced-motion:reduce){.rz-work{transition:none}} @container (max-width:620px){ .rz-day{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center} .rz-dimg{max-width:100%;max-height:200px} .rz-dbtns{justify-content:center} .rz-dbtns .btn,.rz-tools .btn{min-height:44px} .rz-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .rz-tools{justify-content:center} .rz-tools .mtx-tb-ic{width:44px;height:44px} .rz-stage{min-height:360px} .rz-nums{width:100%;text-align:right} } /* ===== 1.17.26 · Nonogramas del Bestiario (nonogramas.js): papel cuadriculado y las criaturas en arte de píxeles ===== */ .nngd{container-type:inline-size;height:100%;display:flex;flex-direction:column} .nng-pickwrap{flex:1 1 auto;min-height:0} .nng-pick{display:flex;flex-direction:column;gap:14px;padding-bottom:8px} .nng-ptop{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .nng-gh{margin:0;font-size:15px;display:flex;align-items:baseline;gap:10px} .nng-gh small{font-weight:400;opacity:.7;font-size:13px} .nng-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px} .nng-grid>li{display:flex} .nng-cr{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:0;border-radius:12px;background:color-mix(in srgb,currentColor 6%,transparent);color:inherit;font:inherit;cursor:pointer;transition:transform .12s} .nng-cr:hover{transform:translateY(-2px)} .nng-cr:focus-visible{outline:3px solid #ffb000;outline-offset:2px} .nng-cr img{width:64px;height:64px;image-rendering:pixelated;image-rendering:crisp-edges} /* las que faltan: un recuadro de papel cuadriculado con un signo */ .nng-q{display:grid;place-items:center;width:64px;height:64px;border-radius:4px;font:700 30px/1 Georgia,'DejaVu Serif',serif;color:#6b5a3a; background:#fbf7ec linear-gradient(90deg,rgba(60,40,20,.14) 1px,transparent 1px) 0 0/8px 8px,#fbf7ec linear-gradient(rgba(60,40,20,.14) 1px,transparent 1px) 0 0/8px 8px} .nng-cn{font-size:13px;font-weight:600;text-align:center;line-height:1.2} .nng-cr.done .nng-cn{opacity:1} .nng-board{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px} .nng-bar{display:flex;align-items:center;gap:12px} .nng-name{flex:1 1 auto;min-width:0;font:600 17px/1.2 Georgia,'DejaVu Serif',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nng-time{font-variant-numeric:tabular-nums;font-size:15px} .nng-stage{position:relative;flex:1 1 auto;min-height:300px;border-radius:14px;overflow:hidden;background:color-mix(in srgb,currentColor 5%,transparent)} .nng-cv{position:absolute;inset:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair} .nng-cv:focus-visible{outline:3px solid #ffb000;outline-offset:-3px} .nng-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .nng-status{margin:0;min-height:1.4em;font-size:14px} .nng-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} @media (prefers-reduced-motion:reduce){.nng-cr{transition:none}} @container (max-width:620px){ .nng-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .nng-tools{justify-content:center} .nng-tools .btn,.nng-ptop .btn{min-height:44px} .nng-tools .mtx-tb-ic{width:44px;height:44px} .nng-stage{min-height:min(110cqw,520px)} } /* ===== 1.19.20 · Materiales reales (Andre, 21 oct: «Están muy planos»): la hoja (con su pinza de latón, nngDraw) descansa en un escritorio de nogal con veta, bajo la luz de una lámpara; las criaturas por resolver son fichas de papel cuadriculado. ===== */ .nngd .nng-stage{background:radial-gradient(80% 60% at 50% 0%,rgba(255,220,170,.22),transparent 70%),var(--gk-grain-h) 0 0/600px 120px,linear-gradient(170deg,#6e4222,#4f2c14 55%,#3a1f0c); box-shadow:inset 0 1.5px 0 rgba(255,222,176,.35),inset 0 -2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(30,14,4,.55),inset 0 14px 24px -12px rgba(0,0,0,.5)} .nngd .nng-q{box-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 6px -1px rgba(0,0,0,.4)} .nngd .nng-cr img{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))} /* ===== 1.17.27 · Octavas (octavas.js): fichas de madera a cristal que se deslizan y un piano de 88 teclas ===== */ .ovsd{container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:12px} .ovs-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;width:100%;max-width:520px} .ovs-nums{display:flex;gap:6px;margin:0} .ovs-nums>div{display:grid;gap:2px;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:70px} .ovs-nums dt{font-size:11px;opacity:.72} .ovs-nums dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap} .ovs-board{position:relative;width:min(100%,460px);border-radius:16px} /* el tablero: un estuche de nogal con sus casillas de fieltro */ .ovs-grid{--n:4;--gap:10px;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap);padding:var(--gap);aspect-ratio:1;border-radius:16px;touch-action:none;user-select:none;-webkit-user-select:none; background:linear-gradient(160deg,#5a3218,#3a1e0c);box-shadow:inset 0 0 0 2px rgba(255,220,170,.15),0 18px 30px -18px rgba(0,0,0,.75)} .ovs-grid[data-n="5"]{--gap:8px} .ovs-grid:focus-visible{outline:3px solid #e0a83d;outline-offset:4px} .ovs-cell{border-radius:10px;background:rgba(0,0,0,.28);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)} .ovs-tiles{position:absolute;inset:var(--gap);pointer-events:none} .ovs-t{--r:0;--cc:0;--s:calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));position:absolute;left:0;top:0;width:var(--s);height:var(--s); transform:translate(calc(var(--cc) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap))));transition:transform .12s ease-out; border-radius:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 75%,#000)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.25),0 4px 8px -4px rgba(0,0,0,.6);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%} .ovs-n{font:700 clamp(18px,7cqw,40px)/1 Georgia,"DejaVu Serif",serif;text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 1px rgba(0,0,0,.8)} .ovs-grid[data-n="5"] .ovs-n{font-size:clamp(15px,5.6cqw,32px)} .ovs-n sub{font-size:.55em;vertical-align:-.15em;margin-left:1px} /* el teclito: dónde queda ese do en el piano */ .ovs-k{position:relative;width:70%;height:6px;border-radius:2px;background:repeating-linear-gradient(90deg,#fffdf6 0 3px,rgba(0,0,0,.35) 3px 4px);opacity:.85} .ovs-k i{position:absolute;top:-2px;width:5px;height:10px;margin-left:-2px;border-radius:2px;background:#ffd24a;box-shadow:0 0 6px #ffd24a} .ovs-t.beyond{background:linear-gradient(160deg,#fff4c4,#e8b93a 55%,#a8740c);color:#3a2408} .ovs-t.beyond .ovs-n{text-shadow:0 1px 0 rgba(255,255,255,.6)} .ovs-t.born{animation:ovs-born .18s ease-out both} .ovs-t.merged{animation:ovs-pop .2s ease-out both} .ovs-t.gone{z-index:0;opacity:.9} @keyframes ovs-born{0%{transform:translate(calc(var(--cc) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap)))) scale(.2);opacity:0}100%{opacity:1}} @keyframes ovs-pop{0%{transform:translate(calc(var(--cc) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap)))) scale(1)}50%{transform:translate(calc(var(--cc) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap)))) scale(1.14)}100%{transform:translate(calc(var(--cc) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap)))) scale(1)}} /* el piano de 88 teclas, con los do que ya alcanzaste encendidos */ .ovs-under{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(100%,520px)} .ovs-piano{position:relative;width:100%;height:44px;border-radius:4px;overflow:hidden;background:#1d1408;box-shadow:inset 0 3px 0 #5a3218,0 6px 12px -8px rgba(0,0,0,.7)} .ovs-w{position:absolute;top:3px;bottom:0;width:calc(100% / 52 - 1px);background:linear-gradient(#f3eee2,#fffdf6);border-radius:0 0 2px 2px} .ovs-w.c{background:linear-gradient(#e8dcc0,#f6efdc)} .ovs-w.c.on{background:linear-gradient(#ffe7a0,#ffd24a);box-shadow:0 0 8px #ffd24a} .ovs-b{position:absolute;top:3px;height:58%;width:calc(100% / 52 * .62);background:linear-gradient(#2a2a30,#0c0c0f);border-radius:0 0 2px 2px} .ovs-by{margin:0;font-size:13px;color:#e8b93a} .ovs-status{margin:0;min-height:1.4em;font-size:14px;text-align:center;max-width:60ch} .ovs-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .ovs-pad{display:inline-flex;gap:4px} .ovs-arr{min-width:40px;font-size:18px;line-height:1} .ovs-rules{max-width:60ch} .ovs-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} @media (prefers-reduced-motion:reduce){.ovs-t{transition:none}.ovs-t.born,.ovs-t.merged{animation:none}} @container (max-width:520px){ .ovs-head{justify-content:center} .ovs-nums>div{min-width:0;padding:5px 8px} .ovs-btns .btn{min-height:44px} .ovs-arr{min-width:44px} .ovs-btns .mtx-tb-ic{width:44px;height:44px} .ovs-grid{--gap:7px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el tablero a la izquierda con todo el alto (--fw-h) y lo demás a la derecha */ @media (max-height:520px) and (min-width:560px){ .ovsd{display:grid;grid-template-columns:auto minmax(220px,330px);grid-template-rows:auto auto auto auto 1fr;justify-content:center;align-items:start;gap:8px 20px} .ovs-board{grid-column:1;grid-row:1/-1;width:min(460px,var(--fw-h,calc(100dvh - 120px)))} .ovs-head,.ovs-under,.ovs-status,.ovs-btns,.ovs-rules{grid-column:2;width:100%;max-width:none} .ovs-head{justify-content:flex-start} .ovs-status{text-align:left} .ovs-btns{justify-content:flex-start} } /* ===== 1.17.28 · Órgano de tubos (organo.js): la consola de nogal, los ductos de madera y la fachada de tubos dorados ===== */ .otbd{container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:12px} .otb-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;width:100%;max-width:560px} .otb-nums{display:flex;gap:6px;margin:0} .otb-nums>div{display:grid;gap:2px;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center} .otb-nums dt{font-size:11px;opacity:.72} .otb-nums dd{margin:0;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap} /* el órgano: la caja de nogal con su fachada arriba y la consola de ductos abajo */ .otb-organ{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 14px 16px;border-radius:20px 20px 14px 14px; background:linear-gradient(170deg,#6b3d1c,#3b1f0c);box-shadow:inset 0 0 0 3px #c99a2e,inset 0 0 0 6px #2a1508,0 22px 36px -20px rgba(0,0,0,.8)} .otb-facade{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:96px;padding:0 8px;border-bottom:4px solid #c99a2e} .otb-fp{position:relative;flex:0 1 26px;height:var(--h);min-width:10px;border-radius:9px 9px 2px 2px;background:linear-gradient(90deg,#6b5418,#d9b85a 35%,#fff0b8 50%,#c99a2e 65%,#6b5418);opacity:.55;transition:opacity .25s,filter .25s} .otb-fp i{position:absolute;left:22%;right:22%;bottom:14%;height:10px;border-radius:0 0 50% 50%;background:#2a1508} .otb-fp.on{opacity:1;filter:drop-shadow(0 0 6px rgba(255,214,110,.75))} .otb-pipes{margin:0;font-size:12px;color:#f6e7c8;opacity:.85;font-variant-numeric:tabular-nums} .otb-stage{position:relative;width:100%;border-radius:12px} .otb-grid{--n:5;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;padding:6px;border-radius:12px;background:#24130a;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)} .otb-p{aspect-ratio:1;padding:0;margin:0;border:0;border-radius:6px;background:#3d2414;cursor:pointer;display:block;overflow:hidden} .otb-p:focus-visible{outline:3px solid #ffd24a;outline-offset:-3px} .otb-rot{display:block;width:100%;height:100%;transition:transform .16s ease-out} .otb-rot svg{display:block;width:100%;height:100%} /* los ductos: madera; el aire: una veta de luz que se enciende cuando la pieza está conectada */ .otb-duct{fill:none;stroke:#b07a42;stroke-width:26;stroke-linecap:butt} .otb-air{fill:none;stroke:#5a3a20;stroke-width:9;stroke-linecap:butt;transition:stroke .2s} .otb-hub{fill:#b07a42;stroke:#5a3a20;stroke-width:5} .otb-p.on .otb-air{stroke:#ffd77a} .otb-p.on .otb-hub{fill:#d29a55} .otb-src{fill:#7a3b1c;stroke:#c99a2e;stroke-width:5} .otb-srcl{stroke:#c99a2e;stroke-width:4;stroke-linecap:round} .otb-pipe rect{fill:#9b7a2a;stroke:#5a3a10;stroke-width:4} .otb-mouth{fill:#2a1508} .otb-dot{fill:#5a3a10} .otb-p.on .otb-pipe rect{fill:#f2c14e} .otb-p.on .otb-dot{fill:#fff3c4} .otb-p.done{cursor:default} .otb-status{margin:0;min-height:1.4em;font-size:14px;text-align:center;max-width:60ch} .otb-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .otb-rules{max-width:60ch} .otb-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} @media (prefers-reduced-motion:reduce){.otb-rot{transition:none}.otb-fp{transition:none}} @container (max-width:520px){ .otb-top{justify-content:center} .otb-organ{padding:10px} .otb-facade{height:72px} .otb-btns .btn{min-height:44px} .otb-btns .mtx-tb-ic{width:44px;height:44px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el órgano a la izquierda con todo el alto (--fw-h) y lo demás a la derecha */ @media (max-height:520px) and (min-width:560px){ .otbd{display:grid;grid-template-columns:auto minmax(220px,330px);grid-template-rows:auto auto auto 1fr;justify-content:center;align-items:start;gap:8px 20px} .otb-organ{grid-column:1;grid-row:1/-1;width:min(520px,calc(var(--fw-h,100dvh) - 98px));padding:10px 12px 12px} .otb-facade{height:64px} .otb-top,.otb-status,.otb-btns,.otb-rules{grid-column:2;width:100%;max-width:none} .otb-top{justify-content:flex-start} } /* ===== 1.17.29 · La bodega del museo (bodega.js): duela de madera, ladrillo de bodega y cajas de cuadros ===== */ .bdgd{container-type:inline-size;height:100%;display:flex;flex-direction:column} .bdg-play{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px} .bdg-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between} .bdg-head{display:flex;flex-direction:column;min-width:0} .bdg-lvl{font:600 17px/1.2 Georgia,'DejaVu Serif',serif} .bdg-goal{font-size:13px;opacity:.75} .bdg-nums{display:flex;gap:6px;margin:0} .bdg-nums>div{display:grid;gap:2px;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:64px} .bdg-nums dt{font-size:11px;opacity:.72} .bdg-nums dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums} .bdg-stage{position:relative;flex:1 1 auto;min-height:280px;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#3a2a20,#1d140e 75%)} .bdg-cv{position:absolute;inset:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none} .bdg-cv:focus-visible{outline:3px solid #e0a83d;outline-offset:-3px} .bdg-status{margin:0;min-height:1.4em;font-size:14px} .bdg-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .bdg-pad{display:inline-flex;gap:4px} .bdg-arr{min-width:40px;font-size:18px;line-height:1} .bdg-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} .bdg-pickwrap{flex:1 1 auto;min-height:0} .bdg-pick{display:flex;flex-direction:column;gap:16px;padding-bottom:8px} .bdg-pickbar{display:flex} .bdg-pick h4{margin:0 0 8px;font-size:15px} .bdg-lv{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .bdg-lb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;border:0;border-radius:12px;background:#a06a3a;color:#fff7e8;font:inherit;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)} .bdg-lb b{font-size:20px;font-variant-numeric:tabular-nums} .bdg-lb small{font-size:11px;opacity:.85;font-variant-numeric:tabular-nums} .bdg-lb.done{background:#5e8f4a} .bdg-lb:disabled{background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;opacity:.55;cursor:not-allowed;box-shadow:none} .bdg-lb:focus-visible{outline:3px solid #e0a83d;outline-offset:2px} @container (max-width:560px){ .bdg-btns{justify-content:center} .bdg-btns .btn{min-height:44px} .bdg-arr{min-width:44px} .bdg-btns .mtx-tb-ic{width:44px;height:44px} .bdg-lv{grid-template-columns:repeat(3,minmax(0,1fr))} .bdg-stage{min-height:min(95cqw,460px)} } /* ===== 1.17.30 · Gemas cantoras (gemas.js): terciopelo morado, cristales de seis notas y la frase de arriba ===== */ .gmcd{container-type:inline-size;height:100%;display:flex;flex-direction:column;gap:8px} .gmc-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between} .gmc-nums{display:flex;gap:6px;margin:0} .gmc-nums>div{display:grid;gap:2px;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:70px} .gmc-nums dt{font-size:11px;opacity:.72} .gmc-nums dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums} .gmc-phrase{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 12px;border-radius:12px;background:linear-gradient(90deg,#2c2050,#1a1230);color:#f3ecff} .gmc-song{font:600 14px/1.25 Georgia,'DejaVu Serif',serif;min-width:0} .gmc-notes{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .gmc-nt{--c:#ff6b6b;--c2:#b3122e;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.06);transition:transform .2s,opacity .2s} .gmc-nt i{display:block;width:18px;height:18px;background:radial-gradient(circle at 35% 30%,#fff 0,var(--c) 32%,var(--c2) 100%)} .gmc-nt.t0 i{border-radius:50%} .gmc-nt.t1{--c:#ffb35a;--c2:#c2620f}.gmc-nt.t1 i{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)} .gmc-nt.t2{--c:#ffe66b;--c2:#b8930f}.gmc-nt.t2 i{clip-path:polygon(50% 4%,100% 90%,0 90%)} .gmc-nt.t3{--c:#7be08a;--c2:#1f8a3a}.gmc-nt.t3 i{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)} .gmc-nt.t4{--c:#6bb8ff;--c2:#1f5fb3}.gmc-nt.t4 i{width:15px;height:15px} .gmc-nt.t5{--c:#c49bff;--c2:#6a32b8}.gmc-nt.t5 i{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} .gmc-nt.done{opacity:.35} .gmc-nt.next{background:rgba(255,255,255,.18);box-shadow:0 0 0 2px #ffd24a;transform:scale(1.12)} .gmc-stage{position:relative;flex:1 1 auto;min-height:300px;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#3a2a66,#140d26 75%)} .gmc-cv{position:absolute;inset:0;display:block;touch-action:none;user-select:none;-webkit-user-select:none} .gmc-cv:focus-visible{outline:3px solid #ffd24a;outline-offset:-3px} .gmc-status{margin:0;min-height:1.4em;font-size:14px} .gmc-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .gmc-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} .gmc-stars{margin:4px 0;font-size:34px;letter-spacing:4px;line-height:1} .gmc-stars span{color:rgba(255,255,255,.22)} .gmc-stars span.on{color:#ffd24a;text-shadow:0 0 12px rgba(255,210,74,.6)} @media (prefers-reduced-motion:reduce){.gmc-nt{transition:none}.gmc-nt.next{transform:none}} @container (max-width:560px){ .gmc-top{justify-content:center} .gmc-nums>div{min-width:60px;padding:4px 8px} .gmc-btns{justify-content:center} .gmc-btns .btn{min-height:44px} .gmc-btns .mtx-tb-ic{width:44px;height:44px} .gmc-stage{min-height:min(96cqw,480px)} .gmc-nt{width:24px;height:24px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el tablero a la izquierda con todo el alto (--fw-h) y la frase, los números y los botones a la derecha */ @media (max-height:520px) and (min-width:560px){ .gmcd{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);grid-template-rows:auto auto auto auto minmax(0,1fr);gap:8px 16px;height:var(--fw-h,100%)} .gmc-stage{grid-column:1;grid-row:1/-1;min-height:0;height:100%} .gmc-top,.gmc-phrase,.gmc-status,.gmc-btns,.gmc-rules{grid-column:2} .gmc-rules{min-height:0;overflow:auto} } /* ===== 1.17.31 · Primera línea (primera.js): la frase en una hoja de libro, cuatro lomos para elegir y la portada al final ===== */ .prld{container-type:inline-size;height:100%;display:flex;flex-direction:column;gap:8px} .prl-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between} .prl-segs{display:flex;flex-wrap:wrap;gap:8px} .prl-nums{display:flex;gap:6px;margin:0} .prl-nums>div{display:grid;gap:2px;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:64px} .prl-nums dt{font-size:11px;opacity:.72} .prl-nums dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums} .prl-stage{position:relative;flex:1 1 auto;min-height:320px;overflow:auto;border-radius:14px;padding:14px;background:radial-gradient(ellipse at 50% 0,#4a3424,#22160e 80%)} .prl-play{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto} .prl-round{margin:0;font-size:13px;color:#f1dfc4;opacity:.8;text-align:center} .prl-page{margin:0;padding:22px 26px 18px;border-radius:4px 10px 10px 4px;background:linear-gradient(90deg,#e9dcc1 0,#f7efdd 6%,#fbf5e8 60%,#f3e8d1);color:#2b1d12;box-shadow:inset 6px 0 10px -6px rgba(80,50,20,.45),0 6px 18px rgba(0,0,0,.35)} .prl-page blockquote{margin:0} .prl-page blockquote p{margin:0;font:400 clamp(17px,2.6cqw,22px)/1.5 Georgia,'DejaVu Serif',serif;text-wrap:pretty} .prl-page blockquote p::first-letter{font-size:2.6em;line-height:.8;float:left;margin:.08em .08em 0 0;color:#7a3b1a} .prl-hinttxt{margin-top:12px;padding-top:8px;border-top:1px solid rgba(80,50,20,.2);font:italic 14px/1.3 Georgia,'DejaVu Serif',serif;color:#6a4a2c} .prl-q{margin:0;font-size:14px;color:#f1dfc4;text-align:center} .prl-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .prl-opt{display:flex;gap:10px;align-items:center;min-height:56px;padding:9px 12px;border:0;border-radius:6px 10px 10px 6px;background:linear-gradient(90deg,#6e2f1c,#8a4127 12%,#7a3820);color:#fbecd4;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 3px 0 0 #c99a2e,0 2px 0 rgba(0,0,0,.3)} .prl-opt:hover{filter:brightness(1.1)} .prl-opt:focus-visible{outline:3px solid #ffd27a;outline-offset:2px} .prl-opt kbd{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,236,200,.18);font:600 12px/1 system-ui,sans-serif} .prl-opt span{display:flex;flex-direction:column;min-width:0} .prl-opt b{font:600 15px/1.25 Georgia,'DejaVu Serif',serif} .prl-opt small{font-size:12px;opacity:.8} .prl-opt.ok{background:linear-gradient(90deg,#2f5a26,#3f7a33);box-shadow:inset 3px 0 0 #b8e08a} .prl-opt.no{background:linear-gradient(90deg,#7a1f1f,#9a2b2b);box-shadow:inset 3px 0 0 #ffb0a0} .prl-opt.off{opacity:.5} .prl-opt[aria-disabled="true"]{cursor:default} .prl-reveal{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:12px;background:rgba(255,240,215,.08);color:#f6e8d2} .prl-reveal>div{display:flex;flex-direction:column;gap:4px;min-width:0} .prl-reveal b{font:600 18px/1.25 Georgia,'DejaVu Serif',serif} .prl-play .gk-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .prl-reveal .gk-btns{margin-top:8px;justify-content:flex-start} .prl-pts{color:#ffd27a;font-weight:600} .prl-cover{flex:0 0 auto;width:88px;aspect-ratio:2/3;max-width:100%;border-radius:3px;background-size:1000% 1000%;background-color:#3a2a1e;box-shadow:0 4px 12px rgba(0,0,0,.45)} .prl-status{margin:0;min-height:1.4em;font-size:14px} .prl-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .prl-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} .prl-found{font-size:13px;opacity:.85} .prl-sum{margin:6px 0 0;padding-left:1.2em;font-size:13px;line-height:1.4;text-align:left;max-height:150px;overflow:auto} .prl-sum li.ok::marker{color:#7be08a} .prl-sum li.no{opacity:.65} @container (max-width:560px){ .prl-top{justify-content:center} .prl-opts{grid-template-columns:1fr} .prl-page{padding:16px 16px 14px} .prl-btns{justify-content:center} .prl-btns .btn,.prl-reveal .btn{min-height:44px} .prl-btns .mtx-tb-ic{width:44px;height:44px} .prl-cover{width:68px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): la página del libro a la izquierda y las cuatro respuestas a la derecha (antes había que bajar para verlas) */ @media (max-height:520px) and (min-width:560px){ .prld{height:var(--fw-h,100%)} .prl-stage{min-height:0;padding:10px} .prl-play{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-auto-rows:min-content;gap:8px 14px;max-width:none;align-items:start} .prl-round{grid-column:2;text-align:left} .prl-page{grid-column:1;grid-row:1 / span 7;padding:14px 18px 12px} .prl-page blockquote p{font-size:16px} .prl-q,.prl-opts,.prl-reveal,.prl-play .gk-btns{grid-column:2} .prl-q{text-align:left} .prl-opts{grid-template-columns:minmax(0,1fr);gap:6px} .prl-opt{min-height:40px;padding:5px 10px} .prl-opt b{font-size:14px} .prl-play .gk-btns{justify-content:flex-start} } /* ===== 1.17.32 · ¿Quién lo pintó? (quien.js): el detalle en un marco dorado sobre la pared de la sala y las opciones al lado ===== */ .qlpd{container-type:inline-size;height:100%;display:flex;flex-direction:column;gap:8px} .qlp-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between} .qlp-nums{display:flex;gap:6px;margin:0} .qlp-nums>div{display:grid;gap:2px;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:64px} .qlp-nums dt{font-size:11px;opacity:.72} .qlp-nums dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums} .qlp-stage{position:relative;flex:1 1 auto;min-height:340px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:16px;padding:14px;border-radius:14px;background:linear-gradient(180deg,#5b2333,#3c1622 70%,#2a0f17);overflow:auto} .qlp-main{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0} .qlp-round{margin:0;font-size:13px;color:#f4dfc8;opacity:.85;text-align:center;min-height:1.2em} .qlp-frame{position:relative;flex:1 1 auto;min-height:260px;border:10px solid #b88a2a;border-radius:3px;background:#1b1210;box-shadow:inset 0 0 0 2px #6e4f14,inset 0 0 16px rgba(0,0,0,.6),0 0 0 2px #e6c56a,0 10px 24px rgba(0,0,0,.45)} .qlp-cv{position:absolute;inset:0;display:block;width:100%;height:100%} .qlp-load{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;color:#f4dfc8;background:rgba(27,18,16,.55);font-size:14px;text-align:center;padding:12px} .qlp-load[hidden]{display:none} .qlp-load p{margin:0} .qlp-side{display:flex;flex-direction:column;gap:10px;min-width:0;align-self:center} .qlp-q{margin:0;font:600 18px/1.25 Georgia,'DejaVu Serif',serif;color:#fbecd8} .qlp-opts{display:grid;gap:8px} .qlp-opt{display:flex;gap:10px;align-items:center;min-height:52px;padding:8px 12px;border:1px solid rgba(230,197,106,.45);border-radius:10px;background:rgba(255,240,220,.08);color:#fbecd8;font:inherit;text-align:left;cursor:pointer} .qlp-opt:hover{background:rgba(255,240,220,.15)} .qlp-opt:focus-visible{outline:3px solid #e6c56a;outline-offset:2px} .qlp-opt kbd{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(230,197,106,.22);font:600 12px/1 system-ui,sans-serif} .qlp-opt span{display:flex;flex-direction:column;min-width:0} .qlp-opt b{font:600 15px/1.25 Georgia,'DejaVu Serif',serif} .qlp-opt small{font-size:12px;opacity:.75} .qlp-opt.ok{background:#2f5a26;border-color:#b8e08a} .qlp-opt.no{background:#7a1f1f;border-color:#ffb0a0} .qlp-opt.off{opacity:.45} .qlp-opt[aria-disabled="true"]{cursor:default} .qlp-side .gk-btns{display:flex;flex-wrap:wrap;gap:8px} .qlp-card{display:flex;flex-direction:column;gap:3px;padding:12px;border-radius:12px;background:#f6ecd9;color:#2b1d12;box-shadow:0 4px 12px rgba(0,0,0,.3)} .qlp-card b{font:600 17px/1.25 Georgia,'DejaVu Serif',serif} .qlp-card small{font-size:12px;opacity:.75} .qlp-card .gk-btns{margin-top:8px} .qlp-pts{color:#8a5a00;font-weight:600} .qlp-status{margin:0;min-height:1.4em;font-size:14px} .qlp-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .qlp-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} .qlp-found{font-size:13px;opacity:.85} .qlp-sum{margin:6px 0 0;padding-left:1.2em;font-size:13px;line-height:1.4;text-align:left;max-height:150px;overflow:auto} .qlp-sum li.ok::marker{color:#7be08a} .qlp-sum li.no{opacity:.65} @container (max-width:640px){ .qlp-stage{grid-template-columns:1fr;grid-auto-rows:max-content;gap:12px} .qlp-main{min-height:auto} .qlp-frame{flex:none;min-height:0;aspect-ratio:4/3;max-width:100%} .qlp-top{justify-content:center} .qlp-btns{justify-content:center} .qlp-btns .btn,.qlp-side .btn{min-height:44px} .qlp-btns .mtx-tb-ic{width:44px;height:44px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el detalle y las respuestas se acomodan al alto que queda (--fw-h) */ @media (max-height:520px) and (min-width:560px){ .qlpd{height:var(--fw-h,100%)} .qlp-stage{min-height:0;padding:10px;gap:12px} .qlp-frame{min-height:0} .qlp-opt{min-height:44px;padding:6px 10px} } /* ===== 1.17.33 · Oído de oro (oido.js): una sala de conciertos con un gran botón de bocina, las respuestas y el teclado ===== */ .odod{container-type:inline-size;height:100%;display:flex;flex-direction:column;gap:8px} .odo-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between} .odo-segs{display:flex;flex-wrap:wrap;gap:8px} .odo-nums{display:flex;gap:6px;margin:0} .odo-nums>div{display:grid;gap:2px;padding:5px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:64px} .odo-nums dt{font-size:11px;opacity:.72} .odo-nums dd{margin:0;font-size:17px;font-variant-numeric:tabular-nums} .odo-stage{position:relative;flex:1 1 auto;min-height:320px;overflow:auto;border-radius:14px;padding:14px;background:radial-gradient(ellipse at 50% 0,#4a3412,#1d1408 75%);color:#fbecd0} .odo-play{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:640px;margin:0 auto} .odo-q{margin:0;font-size:13px;opacity:.8} .odo-horn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:132px;height:132px;border:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe08a,#d39b1f 55%,#8a5a0c);color:#3a2306;font:inherit;cursor:pointer;box-shadow:0 0 0 6px rgba(255,214,120,.18),0 8px 22px rgba(0,0,0,.45)} .odo-horn svg{width:52px;height:52px} .odo-horn b{font-size:14px} .odo-horn:focus-visible{outline:3px solid #fff2c4;outline-offset:4px} .odo-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,214,120,.55);opacity:0;pointer-events:none} .odod.playing .odo-ring{animation:odo-ring 1.2s ease-out infinite} .odod.playing .odo-ring.r2{animation-delay:.6s} @keyframes odo-ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.45);opacity:0}} .odo-ask{margin:0;font:600 18px/1.25 Georgia,'DejaVu Serif',serif} .odo-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%} .odo-opts.n7,.odo-opts.n8,.odo-opts.n12{grid-template-columns:repeat(4,minmax(0,1fr))} .odo-opt{display:flex;gap:8px;align-items:center;justify-content:center;min-height:50px;padding:8px 10px;border:1px solid rgba(255,214,120,.45);border-radius:10px;background:rgba(255,240,210,.07);color:inherit;font:inherit;font-weight:600;text-align:center;cursor:pointer} .odo-opt:hover{background:rgba(255,240,210,.14)} .odo-opt:focus-visible{outline:3px solid #ffd27a;outline-offset:2px} .odo-opt kbd{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,214,120,.22);font:600 11px/1 system-ui,sans-serif} .odo-opt span{min-width:0} .odo-opt.ok{background:#2f5a26;border-color:#b8e08a} .odo-opt.no{background:#7a1f1f;border-color:#ffb0a0} .odo-opt.off{opacity:.45} .odo-opt[aria-disabled="true"]{cursor:default} .odo-reveal{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%} .odo-reveal .gk-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .odo-pts{color:#ffd27a;font-weight:600} .odo-kb{position:relative;display:flex;height:74px;width:100%;max-width:520px} .odo-kb .wk{flex:1 1 0;margin:0 1px;border-radius:0 0 5px 5px;background:#f8f1e2;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)} .odo-kb .bk{flex:0 0 0;width:0;position:relative;z-index:1} .odo-kb .bk::before{content:'';position:absolute;left:-9px;top:0;width:18px;height:46px;border-radius:0 0 4px 4px;background:#1f1610} .odo-kb .wk.on{background:#ffcf4a} .odo-kb .bk.on::before{background:#e0a020} .odo-kb .wk.mine{background:#ff9d8a} .odo-kb .bk.mine::before{background:#c0503a} .odo-status{margin:0;min-height:1.4em;font-size:14px} .odo-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .odo-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} .odo-sum{margin:6px 0 0;padding-left:1.2em;font-size:13px;line-height:1.4;text-align:left;max-height:150px;overflow:auto} .odo-sum li.ok::marker{color:#7be08a} .odo-sum li.no{opacity:.7} @media (prefers-reduced-motion:reduce){.odod.playing .odo-ring{animation:none;opacity:.6}} @container (max-width:560px){ .odo-top{justify-content:center} .odo-opts.n7,.odo-opts.n8,.odo-opts.n12{grid-template-columns:repeat(2,minmax(0,1fr))} .odo-opt{min-height:44px} .odo-btns{justify-content:center} .odo-btns .btn,.odo-reveal .btn{min-height:44px} .odo-btns .mtx-tb-ic{width:44px;height:44px} .odo-horn{width:112px;height:112px} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): la bocina a la izquierda y la pregunta y sus respuestas a la derecha (antes quedaban debajo) */ @media (max-height:520px) and (min-width:560px){ .odod{height:var(--fw-h,100%)} .odo-stage{min-height:0;padding:10px} .odo-play{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:min-content;column-gap:22px;row-gap:8px;align-items:center;max-width:none} .odo-q{grid-column:1;grid-row:1;justify-self:center} .odo-horn{grid-column:1;grid-row:2 / span 3;justify-self:center;width:118px;height:118px} .odo-ask{grid-column:2;grid-row:1} .odo-opts{grid-column:2;grid-row:2} .odo-reveal{grid-column:2;grid-row:3} } /* ===== 1.17.34 · Canta la melodía (canta.js): un escenario azul de noche con la pauta que corre y el cancionero al lado ===== */ .cntd{container-type:inline-size;height:100%;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px} .cnt-main{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0} .cnt-head{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:flex-end;justify-content:space-between} .cnt-title{margin:0;font:600 20px/1.2 Georgia,'DejaVu Serif',serif} .cnt-best{margin:2px 0 0;font-size:13px;opacity:.75} .cnt-priv{margin:0;font-size:12px;opacity:.7;max-width:280px} .cnt-stage{position:relative;flex:1 1 auto;min-height:240px;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 25% 50%,#24346a,#0d1430 70%)} .cntd.singing .cnt-stage{box-shadow:inset 0 0 0 2px #7fe0ff} .cnt-cv{position:absolute;inset:0;display:block} .cnt-piano{display:flex;gap:4px} .cnt-piano[hidden]{display:none} .cnt-pk{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-height:64px;padding:6px 2px;border:0;border-radius:0 0 8px 8px;background:#f6efe0;color:#2a1d10;font:inherit;cursor:pointer;touch-action:none;box-shadow:inset 0 -5px 0 rgba(0,0,0,.12)} .cnt-pk b{font-size:13px} .cnt-pk kbd{font:600 10px/1 system-ui,sans-serif;opacity:.6} .cnt-pk.on{background:#ffd36b} .cnt-status{margin:0;min-height:1.4em;font-size:14px} .cnt-acts{display:flex;flex-wrap:wrap;gap:8px} .cnt-side{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0} .cnt-side h4{margin:0;font-size:14px} .cnt-songs{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0} .cnt-sg{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:10px;background:color-mix(in srgb,currentColor 5%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer} .cnt-sg b{font-size:14px} .cnt-sg small{font-size:12px;opacity:.75;color:#e0b04a} .cnt-sg.on{border-color:#7fe0ff;background:color-mix(in srgb,#7fe0ff 14%,transparent)} .cnt-sg:focus-visible{outline:3px solid #7fe0ff;outline-offset:2px} .cnt-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .cnt-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} @container (max-width:640px){ .cntd{grid-template-columns:1fr;grid-auto-rows:max-content;height:auto} .cnt-stage{flex:none;min-height:0;height:min(62cqw,300px)} .cnt-songs{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px} .cnt-sg{flex:0 0 auto;min-width:150px} .cnt-acts .btn,.cnt-btns .btn{min-height:44px} .cnt-btns .mtx-tb-ic{width:44px;height:44px} .cnt-pk{min-height:72px} } /* ===== 1.17.35 · Lluvia de meteoritos (meteoritos.js): el cielo de la Luna visto por la escotilla de la base ===== */ .lmt-cq{container-type:inline-size} .lmtd{display:flex;justify-content:center;align-items:flex-start;gap:18px;--lmt-ice:#9fefff} .lmt-stage{position:relative;flex:none;margin:6px;border-radius:18px} .lmt-wrap{display:flex;justify-content:center} /* la escotilla: un aro de metal con su junta oscura alrededor del cielo */ .lmt-cv{display:block;max-width:100%;border-radius:18px;touch-action:none;cursor:none;background:#05060d; box-shadow:0 0 0 4px #8d93a6,0 0 0 6px #3a3f52,0 0 0 7px #10131c,0 26px 46px -22px rgba(0,0,0,.85)} @media (pointer:coarse){.lmt-cv{cursor:default}} .lmt-cv:focus-visible{outline:3px solid var(--lmt-ice);outline-offset:10px} .lmt-side{display:flex;flex-direction:column;gap:12px;flex:0 1 250px;min-width:200px;padding-top:6px} .lmt-head{display:grid;gap:2px} .lmt-lvl{margin:0;font-size:13px;opacity:.72;font-variant-numeric:tabular-nums} .lmt-name{margin:0;font-size:19px;line-height:1.2;text-wrap:balance} .lmt-sub{margin:0;font-size:13px;opacity:.72} .lmt-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0} .lmt-nums>div{display:grid;gap:2px;padding:7px 6px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:0} .lmt-nums dt{font-size:11px;opacity:.72} .lmt-nums dd{margin:0;font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lmt-pips{display:inline-flex;gap:2px;align-items:flex-end;height:1em;vertical-align:-.1em} .lmt-pips i{display:block;width:7px;height:11px;border-radius:4px 4px 1px 1px;background:linear-gradient(#e6e9f2,#8d96ad);box-shadow:inset 0 -2px 0 rgba(255,215,122,.9)} .lmt-pips i.off{background:currentColor;opacity:.2;box-shadow:none;height:5px;border-radius:1px} .lmt-spare{margin:-4px 0 0;font-size:12.5px;opacity:.8} .lmt-status{margin:0;min-height:2.9em;font-size:14px;line-height:1.4} .lmt-btns{display:flex;flex-wrap:wrap;gap:8px} .lmt-btns .btn{min-height:38px} .lmt-btns .mtx-tb-ic{width:38px;height:38px} .lmt-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} .lmtd .gk-win .lmt-bonus{font-size:13px;opacity:.85} /* angosto (teléfono o ventana chica): arriba la lluvia y las cifras, el cielo tan grande como quepa, los botones abajo */ @container (max-width:620px){ .lmtd{flex-direction:column;align-items:stretch;gap:10px} .lmt-stage{align-self:center;margin:5px} .lmt-side{order:-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;flex:none;min-width:0;padding-top:0} .lmt-head{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:0 8px} .lmt-name{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lmt-sub{display:none} .lmt-nums{grid-template-columns:repeat(3,auto);gap:4px} .lmt-nums>div{padding:4px 8px} .lmt-nums dt{font-size:10px}.lmt-nums dd{font-size:15px} .lmt-spare{grid-column:1/-1;margin:0;text-align:center} .lmt-status{grid-column:1/-1;min-height:1.4em;font-size:13px;text-align:center} .lmt-btns{grid-column:1/-1;justify-content:center} .lmt-btns .btn{flex:1 1 auto;min-height:44px} .lmt-btns .mtx-tb-ic{width:44px;height:44px;flex:none} .lmt-rules{grid-column:1/-1} .lmt-cv{border-radius:14px;box-shadow:0 0 0 3px #8d93a6,0 0 0 5px #3a3f52,0 0 0 6px #10131c,0 18px 30px -18px rgba(0,0,0,.85)} } @container (max-width:380px){ .lmt-side{grid-template-columns:minmax(0,1fr)} .lmt-nums{grid-template-columns:repeat(3,minmax(0,1fr))} } /* 1.17.41 · teléfono acostado (pantalla completa real, fswin.js): el lienzo a la izquierda con todo el alto y el panel a la derecha también en los teléfonos chicos (antes, debajo de 620 px de ancho, el panel se iba arriba y el lienzo se encogía) */ @media (max-height:520px) and (min-width:560px){ .lmtd{flex-direction:row;align-items:flex-start;gap:12px} .lmt-side{order:0;flex:0 1 220px;min-width:180px;grid-template-columns:minmax(0,1fr)} } /* ===== 1.17.36 · Defensa del cristal (defensa.js): un tablero de piedra con su secuenciador arriba ===== */ .dfc-cq{container-type:inline-size} .dfcd{display:flex;justify-content:center;align-items:flex-start;gap:18px;--dfc-gold:#ffe39a} .dfc-stage{position:relative;flex:none;margin:6px;border-radius:14px} .dfc-wrap{display:flex;justify-content:center} /* el marco: piedra oscura con un filo dorado, como la caja de un instrumento */ .dfc-cv{display:block;max-width:100%;border-radius:14px;touch-action:none;background:#0a1416; box-shadow:0 0 0 3px #2a2733,0 0 0 4px rgba(255,227,154,.55),0 0 0 6px #17151d,0 24px 44px -22px rgba(0,0,0,.85)} .dfc-cv:focus-visible{outline:3px solid var(--dfc-gold);outline-offset:9px} .dfc-side{display:flex;flex-direction:column;gap:12px;flex:0 1 270px;min-width:220px;padding-top:4px} .dfc-head{display:grid;gap:2px} .dfc-wave{margin:0;font-size:13px;opacity:.72;font-variant-numeric:tabular-nums} .dfc-map-n{margin:0;font-size:19px;line-height:1.2;text-wrap:balance} .dfc-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0} .dfc-nums>div{display:grid;gap:2px;padding:7px 8px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:0} .dfc-nums dt{font-size:11px;opacity:.72} .dfc-nums dd{margin:0;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap} .dfc-nums small{font-size:12px;opacity:.6;margin-left:1px} .dfc-life.low dd b{color:#ff8a8a} .dfc-money dd b::before{content:'✦ ';font-size:.8em;color:var(--dfc-gold)} /* la paleta: los cuatro instrumentos con su precio */ .dfc-pal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .dfc-tw{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:0 6px;padding:6px 8px;min-height:46px;border-radius:10px; border:1px solid color-mix(in srgb,currentColor 18%,transparent);background:color-mix(in srgb,currentColor 6%,transparent);color:inherit;font:inherit;text-align:left;cursor:pointer} .dfc-tw svg{grid-row:1/3;width:28px;height:28px} .dfc-tw span{font-size:13px;font-weight:600;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dfc-tw b{font-size:12px;font-weight:500;opacity:.8;font-variant-numeric:tabular-nums} .dfc-tw[aria-pressed="true"]{border-color:var(--dfc-gold);background:color-mix(in srgb,var(--dfc-gold) 18%,transparent);box-shadow:0 0 0 1px var(--dfc-gold) inset} .dfc-tw:disabled{opacity:.42;cursor:default} .dfc-tw:focus-visible{outline:2px solid var(--dfc-gold);outline-offset:2px} .dfc-sel{display:grid;gap:4px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--dfc-gold) 45%,transparent)} .dfc-sel-n{margin:0;font-weight:700;font-size:14px} .dfc-sel-d{margin:0;font-size:12.5px;line-height:1.4;opacity:.85} .dfc-sel-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .dfc-sel-b .btn{min-height:34px;font-size:13px} .dfc-status{margin:0;min-height:2.9em;font-size:14px;line-height:1.4} .dfc-btns{display:flex;flex-wrap:wrap;gap:8px} .dfc-btns .btn{min-height:38px} .dfc-btns [data-dfc="call"]{flex:1 1 100%} .dfc-btns [data-dfc="fast"][aria-pressed="true"]{border-color:var(--dfc-gold);color:var(--dfc-gold)} .dfc-btns .mtx-tb-ic{width:38px;height:38px} .dfc-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} /* la tarjeta de los paisajes */ .dfcd .gk-win .dfc-maps{display:grid;gap:8px;margin:4px 0 2px} .dfcd .gk-win .dfc-map{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;padding:8px 12px;text-align:left; background:linear-gradient(100deg,var(--m1),color-mix(in srgb,var(--m1) 60%,#000));color:#fff;border:1px solid color-mix(in srgb,var(--m2) 60%,transparent)} .dfcd .gk-win .dfc-map b{font-size:14px;color:#fff} .dfcd .gk-win .dfc-map>span{font-size:12px;opacity:.9;text-align:right;color:#fff} .dfcd .gk-win .dfc-map.locked{filter:grayscale(.7);opacity:.6} .dfcd .gk-win .dfc-map:not(:disabled):hover{filter:brightness(1.15)} .dfc-st{color:#ffd76a;letter-spacing:.08em}.dfc-st i{font-style:normal;opacity:.28} .dfc-st.big{font-size:26px;margin:0 0 4px} /* angosto (teléfono o ventana chica): el tablero arriba, todo lo demás abajo */ @container (max-width:640px){ .dfcd{flex-direction:column;align-items:stretch;gap:10px} .dfc-stage{align-self:center;margin:5px} .dfc-side{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;flex:none;min-width:0;padding-top:0} .dfc-head{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:0 8px} .dfc-map-n{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dfc-nums{grid-template-columns:repeat(2,auto);gap:4px} .dfc-nums>div{padding:4px 10px} .dfc-nums dt{font-size:10px}.dfc-nums dd{font-size:16px} .dfc-pal{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))} .dfc-tw{grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;padding:6px 4px;min-height:64px;gap:2px} .dfc-tw svg{grid-row:auto;width:24px;height:24px} .dfc-tw span{font-size:11.5px;white-space:normal} .dfc-sel,.dfc-status,.dfc-btns,.dfc-rules{grid-column:1/-1} .dfc-status{min-height:1.4em;font-size:13px;text-align:center} .dfc-btns{justify-content:center} .dfc-btns .btn{flex:1 1 auto;min-height:44px} .dfc-btns [data-dfc="call"]{flex:1 1 100%} .dfc-btns .mtx-tb-ic{width:44px;height:44px;flex:none} } /* 1.17.41 · teléfono acostado: el panel se angosta para que el paisaje crezca (antes lo limitaba a lo ancho) */ @media (max-height:520px) and (min-width:560px){ .dfcd{gap:12px;flex-direction:row;align-items:flex-start} .dfc-side{order:0} .dfc-side{flex-basis:214px;min-width:204px;gap:8px;padding-top:0} } /* ===== 1.17.37 · Rover de Marte (rovermarte.js): la llanura vista por la ventana panorámica de la base ===== */ .rvr-cq{container-type:inline-size} .rvrd{display:flex;justify-content:center;align-items:flex-start;gap:18px;--rvr-sand:#f0a070} .rvr-stage{position:relative;flex:none;margin:6px;border-radius:14px} .rvr-wrap{display:flex;justify-content:center} /* el marco: el blanco con franja roja del rover y la base */ .rvr-cv{display:block;max-width:100%;border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:#c98a5a; box-shadow:0 0 0 3px #e9ebf1,0 0 0 5px #c23a3a,0 0 0 6px #2a1c1e,0 24px 44px -22px rgba(0,0,0,.85)} .rvr-cv:focus-visible{outline:3px solid var(--rvr-sand);outline-offset:10px} .rvr-side{display:flex;flex-direction:column;gap:12px;flex:0 1 250px;min-width:200px;padding-top:4px} .rvr-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0} .rvr-nums>div{display:grid;gap:2px;padding:7px 6px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);text-align:center;min-width:0} .rvr-nums dt{font-size:11px;opacity:.72} .rvr-nums dd{margin:0;font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rvr-nums dd b{font-size:18px;font-variant-numeric:tabular-nums} .rvr-enw{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:12px} .rvr-enw span{opacity:.75} .rvr-en{height:10px;border-radius:5px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden} .rvr-en i{display:block;height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#3fb6d8,#9ff2ff);transition:width .2s linear} .rvr-en.low i{background:linear-gradient(90deg,#d84a3a,#ff9a7a)} .rvr-status{margin:0;min-height:2.9em;font-size:14px;line-height:1.4} .rvr-btns{display:flex;flex-wrap:wrap;gap:8px} .rvr-btns .btn{min-height:38px} .rvr-btns .mtx-tb-ic{width:38px;height:38px} .rvr-rules ol{margin:0;padding-left:1.2em;font-size:13px;line-height:1.45;display:grid;gap:6px} @media (prefers-reduced-motion:reduce){.rvr-en i{transition:none}} /* angosto (teléfono o ventana chica): el paisaje arriba, todo lo demás abajo */ @container (max-width:620px){ .rvrd{flex-direction:column;align-items:stretch;gap:10px} .rvr-stage{align-self:center;margin:5px} .rvr-side{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;flex:none;min-width:0;padding-top:0} .rvr-nums>div{padding:4px 8px} .rvr-nums dt{font-size:10px}.rvr-nums dd b{font-size:16px} .rvr-status{min-height:1.4em;font-size:13px;text-align:center} .rvr-btns{justify-content:center} .rvr-btns .btn{flex:1 1 auto;min-height:44px} .rvr-btns .mtx-tb-ic{width:44px;height:44px;flex:none} } /* 1.17.41 · teléfono acostado: el panel se angosta para que la llanura crezca (antes la limitaba a lo ancho) */ @media (max-height:520px) and (min-width:560px){ .rvrd{gap:12px;flex-direction:row;align-items:flex-start} .rvr-side{flex-basis:180px;min-width:170px;gap:8px;padding-top:0} .rvr-nums>div{padding:5px 4px} .rvr-nums dt{font-size:10px}.rvr-nums dd b{font-size:16px} .rvr-status{min-height:0;font-size:13px} } /* ===== 1.17.38 · Luna de Diamante (lunadiamante.js): el salón de juego del zepelín Áurea · nogal, latón y paño color pátina ===== */ .ldd-cq{container-type:inline-size} .lddd{position:relative;display:flex;flex-direction:column;gap:10px;min-height:420px;padding:12px;border-radius:16px;color:#eedfc2; --ld-brass:#c9973f;--ld-brass-hi:#ecc678;--ld-brass-dk:#8a6526;--ld-copper:#c07a4a;--ld-patina:#4e8b7a;--ld-patina-hi:#86c4af; --ld-ink:#eedfc2;--ld-dim:#c2ab82;--ld-faint:#9c875f;--ld-red:#c04434;--ld-red-hi:#ee7a60;--ld-panel:#241b12;--ld-panel2:#2e2216; --ld-cw:112px;--ld-ch:170px;--ld-mw:58px;--ld-mh:84px; font:14px/1.42 Lora,Georgia,'DejaVu Serif',serif; background:radial-gradient(900px 480px at 50% -12%,rgba(201,151,63,.15),transparent 62%),radial-gradient(700px 460px at 92% 112%,rgba(78,139,122,.14),transparent 60%),linear-gradient(180deg,#1b140c,#110c07); box-shadow:inset 0 0 0 1px rgba(201,151,63,.38),inset 0 0 0 5px #0d0905,inset 0 0 0 6px rgba(201,151,63,.2)} .lddd ::selection{background:rgba(201,151,63,.35)} /* los botones de latón (ganan a los de cada tema) */ .lddd.lddd .btn{font:15px/1.1 'IM Fell English SC',Georgia,serif;letter-spacing:.04em;color:var(--ld-brass-hi);background:linear-gradient(180deg,#3a2b19,#241a0e); border:1px solid var(--ld-brass-dk);border-radius:9px;padding:9px 14px;min-height:38px;text-shadow:none;box-shadow:inset 0 1px 0 rgba(236,198,120,.18),0 3px 8px rgba(0,0,0,.45)} .lddd.lddd .btn.primary{color:#1d1306;background:linear-gradient(180deg,var(--ld-brass-hi),var(--ld-brass) 56%,var(--ld-brass-dk));border-color:#6d4f1d;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 8px rgba(0,0,0,.5)} .lddd.lddd .btn:not(:disabled):hover{filter:brightness(1.12)} .lddd.lddd .btn:disabled{filter:grayscale(.65) brightness(.62);cursor:not-allowed} .lddd.lddd .btn[aria-pressed="true"]{color:#10231d;background:linear-gradient(180deg,#a6dcc9,var(--ld-patina-hi) 55%,var(--ld-patina));border-color:#2f5e51} .lddd.lddd .btn:focus-visible,.lddd .ldd-card:focus-visible{outline:2px solid var(--ld-patina-hi);outline-offset:2px} .lddd .mtx-tb-ic{width:38px;height:38px;padding:0} .lddd .mtx-tb-ic svg{width:20px;height:20px} /* ---------- portada ---------- */ .ldd-intro{display:grid;place-items:center;padding:8px 0 4px} .ldd-icard{max-width:620px;text-align:center;display:grid;gap:10px;justify-items:center} .ldd-imoon{width:104px;height:104px;color:var(--ld-brass-hi);filter:drop-shadow(0 0 16px rgba(236,198,120,.45))} .ldd-icard h2{margin:0;font:400 clamp(30px,6cqw,46px)/1.05 Cinzel,'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi);text-shadow:0 0 28px rgba(201,151,63,.35);text-wrap:balance} .ldd-tag{margin:0;font:16px/1.2 'IM Fell English SC',Georgia,serif;color:var(--ld-patina-hi);letter-spacing:.06em} .ldd-story{margin:0;max-width:56ch;font-style:italic;color:var(--ld-dim);text-wrap:pretty} .ldd-icard h3{margin:6px 0 0;font:400 18px/1.2 'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi)} .ldd-icard ul{margin:0;padding:12px 16px 12px 32px;text-align:left;display:grid;gap:5px;max-width:58ch;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid rgba(201,151,63,.22);color:var(--ld-dim)} .ldd-seg{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center} .ldd-seg>span{width:100%;font:15px 'IM Fell English SC',Georgia,serif;color:var(--ld-faint)} .lddd.lddd .ldd-go{font-size:18px;padding:12px 26px;margin-top:4px} /* ---------- la mesa ---------- */ .ldd-table{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);grid-template-areas:"opps opps" "mid log" "me me" "rules rules";gap:10px} .ldd-table[hidden]{display:none} .ldd-opps{grid-area:opps;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px} .ldd-mid{grid-area:mid} .ldd-logw{grid-area:log;min-width:0} .ldd-me{grid-area:me} .ldd-rules{grid-area:rules} .ldd-zone{position:relative;min-width:0;display:grid;gap:6px;padding:10px 12px;border-radius:11px;background:linear-gradient(180deg,var(--ld-panel),var(--ld-panel2));border:1px solid rgba(201,151,63,.38);box-shadow:inset 0 1px 0 rgba(236,198,120,.08)} .ldd-zone.now{border-color:var(--ld-brass-hi);box-shadow:0 0 0 1px rgba(236,198,120,.35),0 0 22px -4px rgba(236,198,120,.4)} .ldd-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .ldd-who{margin:0;font:17px/1.15 'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi);letter-spacing:.04em} .ldd-who small{font-size:13px;color:var(--ld-dim);letter-spacing:.02em} .ldd-crown{width:18px;height:18px;margin-left:6px;vertical-align:-3px;color:var(--ld-brass-hi);filter:drop-shadow(0 0 5px rgba(236,198,120,.7))} .ldd-gauge{position:relative;margin:0;display:flex;align-items:baseline;gap:5px;padding:2px 10px;border-radius:8px;background:#160f07;border:1px solid rgba(201,151,63,.35)} .ldd-gauge b{min-width:2ch;text-align:right;font:700 22px/1.2 Cinzel,Georgia,serif;color:var(--ld-brass-hi);font-variant-numeric:tabular-nums} .ldd-gauge b.neg{color:var(--ld-red-hi)} .ldd-gauge span{font:13px 'IM Fell English SC',Georgia,serif;color:var(--ld-faint)} .ldd-badges{display:flex;flex-wrap:wrap;gap:4px} .ldd-badge{padding:1px 8px;border-radius:999px;font-size:12px;color:var(--ld-dim);background:rgba(0,0,0,.28);border:1px solid rgba(201,151,63,.3)} .ldd-badge.good{color:var(--ld-patina-hi);border-color:rgba(134,196,175,.5)} .ldd-badge.bad{color:var(--ld-red-hi);border-color:rgba(238,122,96,.5)} .ldd-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-height:var(--ld-mh)} .ldd-row.played{min-height:0;padding-top:4px;border-top:1px dashed rgba(201,151,63,.2)} .ldd-lbl{font:14px 'IM Fell English SC',Georgia,serif;color:var(--ld-faint);letter-spacing:.04em} .ldd-row.played>.ldd-lbl{width:100%} .ldd-opps.four{--ld-mw:46px;--ld-mh:66px} .ldd-opps.four .ldd-card.mini .ldd-cname{display:none} /* el centro: el mazo, la próxima carta, la última robada y el aviso del turno */ .ldd-mid{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 14px;border-radius:12px; background:radial-gradient(120% 140% at 50% 0%,#2f6d61,#173a33 72%);border:1px solid rgba(201,151,63,.45);box-shadow:inset 0 0 0 4px rgba(0,0,0,.25),inset 0 0 26px rgba(0,0,0,.45)} .ldd-pile{display:grid;justify-items:center;gap:4px} .ldd-pile .ldd-lbl{color:#cfe6dc} .ldd-deckn.low{color:var(--ld-brass-hi)} .ldd-stack{position:relative;width:calc(var(--ld-mw) + 8px);height:calc(var(--ld-mh) + 8px);display:grid;place-items:center} .ldd-stack .ldd-card{position:absolute;left:0;bottom:0} .ldd-next,.ldd-last{min-width:var(--ld-mw);min-height:var(--ld-mh);display:grid;place-items:center} .ldd-midinfo{position:relative;z-index:1;flex:1 1 180px;min-width:0;display:grid;gap:2px} /* la luna grabada en el paño */ .ldd-midmoon{position:absolute;right:22px;top:50%;width:118px;height:118px;transform:translateY(-50%);color:#ecc678;opacity:.13;pointer-events:none} .ldd-midinfo p{margin:0} .ldd-round{font:400 20px/1.1 Cinzel,Georgia,serif;color:var(--ld-brass-hi)} .ldd-banner{font:17px/1.25 'IM Fell English SC',Georgia,serif;color:#e6f3ec;min-height:1.25em;text-wrap:balance} .ldd-status{font-size:13px;color:#cfe6dc} /* tu lugar */ .ldd-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto} .ldd-hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:calc(var(--ld-ch) + 14px);padding:6px 0} .ldd-hand .ldd-card{cursor:pointer;transition:transform .18s ease,filter .18s ease} .ldd-hand .ldd-card:hover,.ldd-hand .ldd-card:focus-visible{transform:translateY(-8px);filter:brightness(1.12)} /* la bitácora */ .ldd-logw{display:flex;flex-direction:column;border-radius:11px;background:rgba(0,0,0,.3);border:1px solid rgba(201,151,63,.25)} .ldd-logw summary{cursor:pointer;padding:7px 12px;font:16px 'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi)} .ldd-log{max-height:150px;overflow-y:auto;padding:0 12px 8px;font-size:13px;color:var(--ld-dim);scrollbar-width:thin;overscroll-behavior:contain} .ldd-log p{margin:0;padding:2px 0;border-bottom:1px dotted rgba(201,151,63,.15)} .ldd-log p.you{color:var(--ld-ink)} .ldd-log p.sys{color:var(--ld-patina-hi);font-style:italic} .ldd-log p.bad{color:var(--ld-red-hi)} .ldd-rules{color:var(--ld-dim)} .ldd-rules li::marker{color:var(--ld-brass)} /* ---------- las cartas ---------- */ .ldd-card{position:relative;flex:none;width:var(--ld-cw);height:var(--ld-ch);display:flex;flex-direction:column;border-radius:9px;overflow:hidden;user-select:none;-webkit-user-select:none; background:linear-gradient(165deg,#3a2b17,#1b130b);border:1.5px solid var(--ld-brass-dk);box-shadow:inset 0 0 0 1px rgba(236,198,120,.24),inset 0 0 18px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.55)} .ldd-card.pub{background:linear-gradient(165deg,#43281a,#1e110a);border-color:#8a5130;box-shadow:inset 0 0 0 1px rgba(232,150,100,.3),inset 0 0 18px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.55)} .ldd-card.norm{background:linear-gradient(165deg,#463521,#251b0d)} .ldd-card.roja{background:linear-gradient(165deg,#43201a,#1f0e0a);border-color:#86301f;box-shadow:inset 0 0 0 1px rgba(238,122,96,.3),inset 0 0 18px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.55)} .ldd-cname{min-height:2.3em;padding:6px 16px 0;text-align:center;font:12px/1.1 'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi);display:flex;align-items:center;justify-content:center;text-wrap:balance} .ldd-card.pub .ldd-cname{color:#f0b184} .ldd-card.roja .ldd-cname{color:var(--ld-red-hi)} .ldd-art{position:relative;flex:1;display:grid;place-items:center;min-height:56px} .ldd-card.mini .ldd-art{min-height:0} .ldd-art>*{grid-area:1/1} .ldd-ic{width:52px;height:52px;color:var(--ld-brass);filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))} .ldd-card.pub .ldd-ic{color:var(--ld-copper)} .ldd-wm{width:84px;height:84px;color:rgba(201,151,63,.1)} .ldd-num{font:900 46px/1 Cinzel,Georgia,serif;color:var(--ld-brass-hi);text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 18px rgba(201,151,63,.35)} .ldd-card.roja .ldd-num{color:var(--ld-red-hi);text-shadow:0 2px 6px rgba(0,0,0,.7),0 0 18px rgba(192,68,52,.45)} .ldd-cdesc{min-height:3.6em;padding:2px 7px 8px;text-align:center;font-size:10.5px;line-height:1.22;color:var(--ld-dim)} .ldd-cpts{position:absolute;top:3px;left:5px;z-index:2;font:700 14px/1 Cinzel,Georgia,serif;color:var(--ld-patina-hi);text-shadow:0 1px 2px #000} .ldd-cpts.neg{color:var(--ld-red-hi)} .ldd-seen{position:absolute;right:3px;bottom:3px;z-index:3;padding:0 5px;border-radius:6px;font:11px 'IM Fell English SC',Georgia,serif;color:var(--ld-patina-hi);background:rgba(0,0,0,.6);border:1px solid rgba(134,196,175,.45)} .ldd-back{flex:1;display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(201,151,63,.08) 0 2px,transparent 2px 10px),radial-gradient(circle,#2e2213,#170f07)} .ldd-back svg{width:58%;height:auto;aspect-ratio:1;color:rgba(201,151,63,.5)} .ldd-card.mini{width:var(--ld-mw);height:var(--ld-mh);border-radius:7px} .ldd-card.mini .ldd-cname{min-height:2em;padding:13px 3px 0;font-size:9px} .ldd-card.mini .ldd-ic{width:28px;height:28px} .ldd-card.mini .ldd-wm{width:44px;height:44px} .ldd-card.mini .ldd-num{font-size:22px} .ldd-card.mini .ldd-cdesc{display:none} .ldd-card.mini .ldd-cpts{font-size:10px;top:2px;left:3px} .ldd-card.mini .ldd-seen{font-size:9px;right:2px;bottom:2px;padding:0 3px} .ldd-row .ldd-card:not(.down),.ldd-next .ldd-card,.ldd-last .ldd-card{cursor:help} /* ---------- la carta en grande (al jugarse) ---------- */ .ldd-flash{position:absolute;inset:0;z-index:40;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding-top:40px;background:rgba(8,5,2,.45);border-radius:inherit} .ldd-flash[hidden]{display:none} .ldd-fbox{position:sticky;top:30px;display:grid;justify-items:center;gap:8px} .ldd-fbox p{margin:0;font:18px 'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi);text-shadow:0 2px 6px #000;text-align:center} .ldd-flash .ldd-card{--ld-cw:150px;--ld-ch:214px;animation:ldd-play .9s ease both;box-shadow:0 0 0 1px rgba(236,198,120,.4),0 0 40px rgba(236,198,120,.45),0 18px 40px rgba(0,0,0,.7)} .ldd-flash .ldd-ic{width:72px;height:72px}.ldd-flash .ldd-num{font-size:64px}.ldd-flash .ldd-cname{font-size:15px}.ldd-flash .ldd-cdesc{font-size:12px} @keyframes ldd-play{0%{opacity:0;transform:translateY(24px) scale(.82)}25%{opacity:1;transform:scale(1.06)}45%{transform:scale(1)}100%{opacity:1;transform:none}} /* los puntos que suben */ .ldd-delta{position:absolute;right:-6px;top:-8px;z-index:30;pointer-events:none;font:700 20px/1 Cinzel,Georgia,serif;text-shadow:0 2px 4px #000;animation:ldd-rise 1.4s ease-out both} .ldd-delta.plus{color:var(--ld-patina-hi)}.ldd-delta.minus{color:var(--ld-red-hi)} @keyframes ldd-rise{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-40px)}} /* ---------- las ventanitas de elegir y la tarjeta del final ---------- */ .ldd-modal,.ldd-final{position:absolute;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:14px;background:rgba(8,5,2,.72);border-radius:inherit} .ldd-modal[hidden],.ldd-final[hidden]{display:none} .ldd-mcard,.ldd-fcard{position:sticky;top:12px;width:min(100%,760px);max-height:calc(100% - 4px);overflow:auto;padding:18px 20px 20px;border-radius:13px;text-align:center; background:linear-gradient(180deg,var(--ld-panel2),var(--ld-panel));border:2px solid var(--ld-brass-dk);box-shadow:0 12px 50px rgba(0,0,0,.8),inset 0 1px 0 rgba(236,198,120,.15);animation:ldd-in .25s ease both} @keyframes ldd-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .ldd-mcard h3,.ldd-fcard h3{margin:0;font:400 21px/1.2 Cinzel,Georgia,serif;color:var(--ld-brass-hi);text-wrap:balance} .ldd-mcard>p{margin:6px auto 12px;max-width:56ch;color:var(--ld-dim)} .ldd-mcards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:14px} .ldd-mcards .ldd-card.pick{cursor:pointer;transition:transform .18s ease,outline-color .18s ease;outline:2px solid transparent;outline-offset:2px} .ldd-mcards .ldd-card.pick:hover{transform:translateY(-6px);outline-color:var(--ld-patina-hi)} .ldd-mbtns,.ldd-fcard .gk-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .ldd-fcard{width:min(100%,560px);display:grid;gap:10px;justify-items:center} .ldd-fmoon{width:84px;height:84px;color:var(--ld-brass-hi);filter:drop-shadow(0 0 18px rgba(236,198,120,.55))} .ldd-fcard h3.ldd-r-win{color:var(--ld-patina-hi)}.ldd-fcard h3.ldd-r-lose{color:var(--ld-red-hi)} .ldd-fcard p{margin:0} .ldd-fsc{font-size:15px;color:var(--ld-ink);font-variant-numeric:tabular-nums} .ldd-fcard .gk-rec{color:var(--ld-brass-hi)} .ldd-fich{font:16px 'IM Fell English SC',Georgia,serif;color:var(--ld-brass-hi)} @media (prefers-reduced-motion:reduce){.ldd-flash .ldd-card,.ldd-mcard,.ldd-fcard,.ldd-delta{animation-duration:.01s}.ldd-hand .ldd-card{transition:none}} /* ---------- mediano: la bitácora pasa abajo ---------- */ @container (max-width:760px){ .ldd-table{grid-template-columns:minmax(0,1fr);grid-template-areas:"opps" "mid" "me" "rules" "log"} .ldd-opps.four{grid-template-columns:minmax(0,1fr)} .ldd-opps.four .ldd-row:not(.played){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin} } /* ---------- angosto (teléfono) ---------- */ @container (max-width:560px){ .lddd{padding:8px;gap:8px;--ld-cw:78px;--ld-ch:112px;--ld-mw:44px;--ld-mh:63px} .ldd-opps.four{--ld-mw:38px;--ld-mh:54px} .ldd-zone{padding:8px 9px;gap:5px} .ldd-who{font-size:15px} .ldd-gauge b{font-size:19px} .ldd-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin} .ldd-row.played>.ldd-lbl{width:auto;flex:none;margin-right:2px} .ldd-card.mini .ldd-cname{display:none} .ldd-card.mini .ldd-ic{width:24px;height:24px} .ldd-card .ldd-cdesc{display:none} .ldd-hand{gap:6px;min-height:calc(var(--ld-ch) + 10px)} .ldd-art{min-height:0} .ldd-hand .ldd-ic{width:36px;height:36px} .ldd-hand .ldd-num{font-size:32px} .ldd-hand .ldd-wm{width:60px;height:60px} .ldd-cname{font-size:11px;padding:5px 12px 0} .ldd-mid{gap:8px 10px;padding:8px 10px;justify-content:center} .ldd-midinfo{flex-basis:100%;text-align:center} .ldd-midmoon{display:none} .ldd-acts{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px} .lddd.lddd .ldd-acts .btn{min-height:44px;padding:8px 10px} .ldd-acts [data-ldd="end"]{grid-column:1/-1} .lddd .ldd-acts .mtx-tb-ic{width:44px;height:44px;justify-self:center} .ldd-flash .ldd-card{--ld-cw:128px;--ld-ch:182px} .ldd-flash .ldd-cdesc{display:block} .ldd-mcards .ldd-card:not(.mini){--ld-cw:96px;--ld-ch:136px} .ldd-mcards .ldd-cdesc{display:block;font-size:9.5px;min-height:0} .ldd-mcard,.ldd-fcard{padding:14px 12px 16px} } /* ===== 1.17.39 · Fiesta de Minijuegos (fiesta.js): el lienzo de 960 × 540 de la fiesta, a lo ancho de la ventana ===== */ .fst-cq{container-type:inline-size} .fstd{display:flex;flex-direction:column;align-items:center;gap:8px} /* el lienzo conserva su proporción y no se sale de la pantalla cuando la ventana va a pantalla completa */ .fst-stage{position:relative;width:min(100%,calc((100dvh + var(--fw-gain,0px) - 150px) * 16 / 9));min-width:min(100%,300px);aspect-ratio:16/9;margin:0 auto} .fst-cv{display:block;width:100%;height:100%;border-radius:12px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; background:#16121f;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -22px rgba(0,0,0,.85)} .fst-cv:focus,.fst-cv:focus-visible{outline:none} .fst-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;max-width:100%} .fst-tip{margin:0;font-size:13px;opacity:.75;min-width:0} .fst-bar .mtx-tb-ic{flex:none;width:38px;height:38px} /* teléfono en vertical: la sugerencia de girarlo, encima del lienzo */ .fst-rot{position:absolute;inset:0;z-index:2;display:grid;place-items:center;align-content:center;gap:8px;padding:14px;border-radius:12px;text-align:center; background:rgba(14,10,22,.9);color:#f6f2ff} .fst-rot[hidden]{display:none} .fst-rot svg{width:40px;height:40px;animation:fst-turn 2.4s ease-in-out infinite} .fst-rot h3{margin:0;font-size:18px} .fst-rot p{margin:0;font-size:13px;line-height:1.4;max-width:30ch;opacity:.9} @keyframes fst-turn{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}} @media (prefers-reduced-motion:reduce){.fst-rot svg{animation:none}} /* pantallas bajas (un teléfono en horizontal): el lienzo se queda con todo el alto */ @media (max-height:520px){ .win-body:has(> .fst-cq){padding:6px} .fst-stage{width:min(100%,calc((100dvh - env(safe-area-inset-bottom,0px) + var(--fw-gain,0px) - 60px) * 16 / 9))} .fst-bar{display:none} } @container (max-width:560px){ .fst-tip{font-size:12px} .fst-bar .mtx-tb-ic{width:44px;height:44px} } /* ===== 1.17.40 · Piano Football (pianofootball.js): la portería de 960 × 540 y, debajo, la canción, el tempo y los botones ===== */ .pfb-cq{container-type:inline-size} .pfbd{display:flex;flex-direction:column;gap:10px} /* el lienzo conserva su proporción y deja ver la barra cuando la ventana va a pantalla completa */ .pfb-stage{position:relative;width:min(100%,calc((100dvh + var(--fw-gain,0px) - 250px) * 16 / 9));min-width:min(100%,300px);aspect-ratio:16/9;margin:0 auto;border-radius:14px} .pfb-cv{display:block;width:100%;height:100%;border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none; background:#0b1230;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px -22px rgba(0,0,0,.85)} .pfb-cv:focus{outline:none} .pfb-cv:focus-visible{outline:3px solid var(--focus);outline-offset:3px} .pfb-card{grid-template-rows:100%} /* en pantallas táctiles no hace falta explicar los teclados ni mostrar sus letras */ @media (pointer:coarse){.pfb-how li:nth-child(2),.pfb-togs [data-pfb="keys"]{display:none}} .pfb-card .gk-wincard{max-width:min(460px,92%);max-height:calc(100% - 16px);overflow:auto;overscroll-behavior:contain} /* 1.17.41: la canción y el tempo en la tarjeta de inicio */ .pfb-cset{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:0 0 14px} .pfb-cf{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;min-width:0} .pfb-cf select{color-scheme:light;max-width:230px;min-width:0;padding:6px 8px;border:1px solid #c9c2ad;border-radius:8px;background:#fff;color:#1e2230;font:inherit;font-weight:500} .pfb-ct input{width:110px;accent-color:#c0392b} .pfb-ct output{min-width:3.4em;font-variant-numeric:tabular-nums;text-align:left} .pfb-how{margin:0 0 14px;padding-left:20px;display:grid;gap:6px;text-align:left;line-height:1.4} .pfb-stars{margin:0 0 6px;font-size:30px;letter-spacing:4px;color:#d3cbb4} .pfb-stars .on{color:#e8a400;text-shadow:0 1px 0 #8a5a00} .pfb-pct{font-weight:700} .pfb-bar{display:grid;gap:8px} .pfb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .pfb-field{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0} .pfb-song{flex:1 1 230px} .pfb-song select{flex:1;min-width:0;max-width:340px} .pfb-tempo{flex:0 1 auto} .pfb-tempo input{width:130px} .pfb-tempo output{min-width:3.6em;font-variant-numeric:tabular-nums} .pfb-acts,.pfb-togs{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .pfb-row .pfb-acts:last-child{margin-left:auto} /* los interruptores (notas, letras del teclado, metrónomo): un punto que se enciende */ .pfb-togs .btn{display:inline-flex;align-items:center;gap:7px} .pfb-togs .btn::before{content:'';width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.28;flex:none} .pfb-togs .btn[aria-pressed="true"]::before{background:#2fc06a;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#2fc06a 25%,transparent)} .pfb-midi{display:inline-flex;align-items:center;gap:6px} .pfb-midi svg{width:17px;height:17px;flex:none} .pfb-midi>i{width:8px;height:8px;border-radius:50%;background:color-mix(in oklab,currentColor 35%,transparent);flex:none} .pfb-midi[data-st="on"]>i{background:#2fc06a;box-shadow:0 0 0 3px color-mix(in srgb,#2fc06a 25%,transparent)} .pfb-midi[data-st="none"]>i,.pfb-midi[data-st="wait"]>i{background:#f2b600} .pfb-midi[data-st="no"],.pfb-midi[data-st="deny"]{opacity:.65;cursor:default} .pfb-status{margin:0} /* teléfono en vertical: la sugerencia de girarlo, encima del lienzo */ .pfb-rot{position:absolute;inset:0;z-index:60;display:grid;place-items:center;align-content:center;gap:8px;padding:14px;border-radius:14px;text-align:center;background:rgba(8,12,30,.92);color:#eef3ff} .pfb-rot[hidden]{display:none} .pfb-rot svg{width:40px;height:40px;animation:pfb-turn 2.4s ease-in-out infinite} .pfb-rot h3{margin:0;font-size:18px} .pfb-rot p{margin:0;font-size:13px;line-height:1.4;max-width:30ch;opacity:.9} @keyframes pfb-turn{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}} @media (prefers-reduced-motion:reduce){.pfb-rot svg{animation:none}} /* pantallas bajas (un teléfono en horizontal): el lienzo se queda con casi todo el alto y la barra queda debajo */ @media (max-height:520px){ .win-body:has(> .pfb-cq){padding:6px} .pfb-stage{width:min(100%,calc((100dvh - env(safe-area-inset-bottom,0px) + var(--fw-gain,0px) - 60px) * 16 / 9))} .pfb-cset{margin-bottom:8px;gap:6px 10px} .pfb-card .gk-wincard{padding:12px 16px} .pfb-card .gk-wincard h3{font-size:19px} .pfb-how{font-size:13px;gap:3px;margin-bottom:8px} } @container (max-width:620px){ .pfb-card .gk-wincard{padding:12px 14px;border-radius:14px} .pfb-card .gk-wincard h3{font-size:18px} .pfb-card .gk-wincard p{margin-bottom:8px} .pfb-how{font-size:13px;gap:3px;margin-bottom:8px} .pfb-stars{font-size:22px} .pfb-row .pfb-acts:last-child{margin-left:0} .pfb-tempo input{width:100px} .pfb-bar .btn{min-height:40px} } /* ===== 1.17.68 · Trazo (trazo.js): el claro del bosque en un lienzo que llena la ventana y, encima, las hojas de cristal (título, desafíos, pausa y final) con los botones del tema ===== */ .win[data-id="trazo"] .win-body,.win.fw[data-id="trazo"] .win-body{padding:0;overflow:hidden;position:relative} .tz{--tz-gold:#ffd27a;--tz-mist:#dcf0f3;--tz-dim:#9fc0c8;--tz-ember:#ff7f8f; --tz-ui:"Gill Sans","Gill Sans MT","Trebuchet MS",system-ui,sans-serif; --tz-disp:"Snell Roundhand","Apple Chancery","Segoe Script","URW Chancery L","IM Fell English SC",Georgia,serif; position:relative;height:min(72vh,640px);min-height:340px;overflow:hidden;background:#050b16;color:var(--tz-mist);font-family:var(--tz-ui); user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none} .win.max .tz,.win.fw .tz{height:100%;min-height:0} @media (max-width:720px){ .tz{height:100%;min-height:0} } .tz-cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none} .tz-cv:focus,.tz-cv:focus-visible{outline:none} /* el lienzo es toda la ventana: un aro de foco alrededor de la cancha solo estorba */ .tz-ui{position:absolute;inset:0;z-index:2;pointer-events:none} .tz-scr{position:absolute;inset:0;pointer-events:none} .tz-scr[hidden]{display:none} .tz-sr{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* el menú del título, debajo de la palabra «Trazo» (que se dibuja en el lienzo) */ .tz-menu{position:absolute;display:flex;flex-direction:column;gap:10px;width:min(300px,calc(100% - 32px));pointer-events:auto} .tz-tag{margin:0 0 4px;max-width:30ch;font:500 17px/1.35 var(--tz-ui);color:var(--tz-dim);text-shadow:0 1px 10px rgba(0,0,0,.75)} .tz .tz-big{min-height:48px;justify-content:flex-start;padding:0 20px;font-size:17px;text-align:left} .tz-row{display:flex;flex-wrap:wrap;gap:8px} /* los interruptores (música, brillo suave): un punto que se enciende en dorado */ .tz .tz-tog{display:inline-flex;align-items:center;gap:8px;min-height:40px} .tz-tog::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.3} .tz-tog[aria-pressed="true"]::before{background:var(--tz-gold);opacity:1;box-shadow:0 0 0 3px rgba(255,210,122,.25),0 0 10px rgba(255,210,122,.7)} /* las hojas de cristal: bandeja y placa, con las esquinas de hoja del original */ .tz-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 40%,rgba(3,8,18,.55),rgba(3,8,18,.82));pointer-events:auto} .tz-panel{position:absolute;left:16px;top:50%;transform:translateY(-50%);box-sizing:border-box;width:min(440px,calc(100% - 32px));max-height:calc(100% - 20px);overflow:auto;overscroll-behavior:contain; padding:7px;border-radius:28px 10px 28px 10px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px rgba(255,255,255,.09);pointer-events:auto} @container (min-width:760px){ .tz-panel{left:8%} } .tz-plate{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border-radius:21px 4px 21px 4px; background:linear-gradient(180deg,rgba(14,34,50,.86),rgba(6,14,26,.92));box-shadow:inset 0 1px 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .tz-plate h2{margin:0;font:400 50px/1.05 var(--tz-disp);color:var(--tz-gold);text-shadow:0 0 22px rgba(255,200,110,.45);text-wrap:balance} .tz-plate p{margin:0;color:var(--tz-dim);font-size:16px;line-height:1.45} .tz-rbig{color:var(--tz-mist);font:700 25px/1.2 var(--tz-ui);font-variant-numeric:tabular-nums} .tz-rec{color:var(--tz-gold);font-weight:700;white-space:nowrap} .tz-btns{display:flex;flex-wrap:wrap;gap:8px} .tz-btns .btn{min-height:42px} .tz-stars{font-size:34px;letter-spacing:.18em;line-height:1} .tz-stars[hidden]{display:none} .tz-stars .on{color:var(--tz-gold);text-shadow:0 0 16px rgba(255,200,110,.8)} .tz-stars .off{color:rgba(147,182,191,.28)} /* los diez desafíos */ .tz-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .tz .tz-lv{flex-direction:column;gap:3px;min-height:62px;padding:6px 2px;font-size:20px;white-space:normal} .tz-lv small{font-size:11px;letter-spacing:.1em;color:var(--tz-gold);text-shadow:0 0 6px rgba(0,0,0,.6)} .tz-lv small i{font-style:normal;opacity:.3} .tz-lv:disabled{opacity:.38;cursor:default} .tz-lvname{min-height:1.4em;color:var(--tz-mist)!important;font-weight:500} @container (max-width:420px){ .tz-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} .tz .tz-lv{min-height:54px;font-size:18px} .tz-plate{padding:18px 16px 16px} .tz-plate h2{font-size:42px} } /* la pausa, arriba a la derecha (los botones de la ventana van en su propia tira, arriba) */ .tz-pbtn{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;cursor:pointer;pointer-events:auto;color:var(--tz-mist); background:rgba(8,20,34,.55);box-shadow:inset 0 1px 1px rgba(255,255,255,.15),0 0 0 1px rgba(150,230,220,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .tz-pbtn[hidden]{display:none} .tz-pbtn svg{width:18px;height:18px} .tz-pbtn:hover{box-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 0 0 1px rgba(255,210,122,.55),0 0 18px -4px rgba(255,210,122,.5)} .tz-pbtn:focus-visible,.tz .btn:focus-visible{outline:2px solid var(--tz-gold);outline-offset:3px} /* pantallas bajas (el teléfono acostado): todo más compacto para que quepa sin desplazarse */ @media (max-height:520px){ .tz-menu{gap:7px} .tz-tag{font-size:14px;margin-bottom:0} .tz .tz-big{min-height:40px;font-size:15px} .tz .tz-tog{min-height:34px;font-size:13px;padding:0 10px} .tz-panel{width:min(560px,calc(100% - 24px));left:12px;max-height:calc(100% - 12px)} .tz-plate{gap:8px;padding:12px 16px 12px} .tz-plate h2{font-size:34px} .tz-plate p{font-size:14px;line-height:1.35} .tz-rbig{font-size:20px} .tz-stars{font-size:26px} .tz .tz-lv{min-height:44px;font-size:16px;gap:1px} .tz-lv small{font-size:10px} .tz-grid{gap:6px} .tz-btns .btn{min-height:36px} .tz-pbtn{width:40px;height:40px;top:6px;right:8px} } @media (prefers-reduced-motion:reduce){ .tz *{transition:none!important} } /* ===== 1.17.69 · El Ruiseñor (ruisenor.js) ===== Su propio mundo, con su único tema oscuro: el escenario 3D llena la ventana (el jarrón a la izquierda del centro), la franja de notas de cristal a la derecha (se dibuja en el lienzo), la consola de laca con incrustación de oro abajo y los paneles de cristal de doble bisel que suben desde ella. Todo bajo .rsn; las medidas, contra la raíz (cqw/cqh). */ .win[data-id="ruisenor"] .win-body,.win.fw[data-id="ruisenor"] .win-body{padding:0;overflow:hidden;position:relative} .arc.rsn{ container:rsn / size;isolation:isolate;color-scheme:dark; --rs-noche:#140607;--rs-laca:#7a1a19;--rs-porc:#f4efe4;--rs-porc2:#d9d2c3;--rs-oro:#d6b25e;--rs-tinta:#1a1a22; --rs-panel-a:.62;--rs-vidrio:rgba(26,10,12,var(--rs-panel-a));--rs-borde:rgba(244,239,228,.14);--rs-brillo:rgba(255,255,255,.16); --rs-fd:"Shippori Mincho","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--rs-fu:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --rs-resorte:cubic-bezier(.32,.72,0,1);--rs-strip-w:100px;--rs-strip-r:16px; background:var(--rs-noche);color:var(--rs-porc);font:15px/1.35 var(--rs-fu);touch-action:none;-webkit-tap-highlight-color:transparent;min-height:340px } .rsn [hidden]{display:none!important} .rsn .rs-c3d,.rsn .rs-ov{position:absolute;inset:0;width:100%;height:100%;display:block} .rsn .rs-ov{z-index:2;touch-action:none;outline:none;cursor:default} /* en el teléfono acostado los lienzos llegan a las orillas (fswin.js › fwBleed); solo lo que se toca recibe el margen seguro */ .win.fw-bleed .rsn>canvas{margin:0!important} /* el inicio y el fondo de los ajustes también cubren todo; su contenido se aparta de la orilla */ .win.fw-bleed .rsn>.rs-start,.win.fw-bleed .rsn>.rs-modal{margin:0!important;padding-left:calc(var(--fw-sl) + 16px);padding-right:calc(var(--fw-sr) + 16px);padding-bottom:calc(var(--fw-sb) + 16px)} .rsn .rs-safe{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;visibility:hidden} .rsn button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;touch-action:manipulation} .rsn button:focus-visible,.rsn input:focus-visible{outline:2px solid var(--rs-oro);outline-offset:3px} .rsn button:disabled{opacity:.45;cursor:default} .rsn .rs-ico{width:18px;height:18px;flex:none} .rsn kbd{font:12px var(--rs-fu);border:1px solid rgba(244,239,228,.25);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:rgba(244,239,228,.06);color:var(--rs-porc)} /* cristal de doble bisel: bandeja + placa */ .rsn .rs-tray{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .rsn .rs-plate{background:var(--rs-vidrio);border-radius:16px;box-shadow:inset 0 1px 1px var(--rs-brillo),0 14px 34px rgba(0,0,0,.42)} /* barra de arriba */ .rsn .rs-top{position:absolute;z-index:20;top:12px;left:16px;right:calc(var(--rs-strip-r) + var(--rs-strip-w) + 16px);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none} .rsn .rs-top>*{pointer-events:auto} .rsn .rs-mark{font:600 26px/1 var(--rs-fd);letter-spacing:.005em;color:var(--rs-porc);text-shadow:0 2px 12px rgba(0,0,0,.5);pointer-events:none} .rsn .rs-mark small{display:block;font:12px var(--rs-fu);letter-spacing:.06em;color:var(--rs-porc2);margin-top:4px;text-shadow:none} .rsn .rs-tbtns{display:flex;gap:8px} .rsn .rs-hbtn{min-width:44px;height:44px;padding:0 14px;border-radius:13px;border:1px solid var(--rs-borde);background:var(--rs-vidrio);box-shadow:inset 0 1px 1px var(--rs-brillo);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;transition:transform .18s var(--rs-resorte),border-color .18s} .rsn .rs-hbtn:hover{border-color:rgba(214,178,94,.55)} .rsn .rs-hbtn:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 5px rgba(0,0,0,.45)} /* consola de laca */ .rsn .rs-console{position:absolute;z-index:20;left:14px;bottom:14px;right:calc(var(--rs-strip-w) + var(--rs-strip-r) + 14px);display:flex;justify-content:flex-start} .rsn .rs-console .rs-tray{border-radius:26px;background:linear-gradient(180deg,rgba(214,178,94,.22),rgba(143,106,42,.12));border-color:rgba(214,178,94,.35);max-width:100%;min-width:0} .rsn .rs-console .rs-plate{border-radius:20px;padding:8px;display:flex;gap:6px;align-items:stretch;overflow-x:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-x; background:linear-gradient(180deg,rgba(122,26,25,calc(var(--rs-panel-a) + .2)),rgba(40,8,9,calc(var(--rs-panel-a) + .25)))} .rsn .rs-console .rs-plate::-webkit-scrollbar{display:none} .rsn .rs-chip{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:52px;padding:6px 14px;border-radius:14px;text-align:left;white-space:nowrap;flex:none;transition:background-color .18s,transform .18s var(--rs-resorte)} .rsn .rs-chip:hover{background:rgba(244,239,228,.08)} .rsn .rs-chip:active{transform:scale(.98)} .rsn .rs-chip[aria-expanded="true"]{background:rgba(244,239,228,.14);box-shadow:inset 0 1px 1px var(--rs-brillo)} .rsn .rs-k{font-size:11px;letter-spacing:.07em;color:var(--rs-oro);font-weight:600} .rsn .rs-v{font-size:15px;font-weight:500;color:var(--rs-porc)} .rsn .rs-sep{width:1px;background:linear-gradient(transparent,rgba(214,178,94,.45),transparent);margin:6px 2px;flex:none} .rsn .rs-round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid rgba(244,239,228,.18);background:rgba(244,239,228,.07);box-shadow:inset 0 1px 1px var(--rs-brillo);transition:transform .18s var(--rs-resorte)} .rsn .rs-round:hover{border-color:rgba(214,178,94,.6)} .rsn .rs-round:active{transform:translateY(1px) scale(.97)} .rsn .rs-brec{flex:none;height:52px;padding:0 18px 0 14px;border-radius:26px;gap:10px;display:flex;align-items:center;font-weight:600;font-size:15px;white-space:nowrap; background:radial-gradient(120% 140% at 30% 20%,#c4473a,var(--rs-laca) 55%,#4a0d0d);border:1px solid rgba(214,178,94,.7);box-shadow:inset 0 1px 1px rgba(255,220,200,.4),inset 0 -2px 4px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.4)} .rsn .rs-brec .rs-dot{width:14px;height:14px;border-radius:50%;background:var(--rs-porc);box-shadow:0 0 0 3px rgba(244,239,228,.25)} .rsn .rs-brec.on .rs-dot{border-radius:3px} .rsn .rs-brec.on{animation:rs-recpulse 1.2s ease-in-out infinite} @keyframes rs-recpulse{50%{box-shadow:inset 0 1px 1px rgba(255,220,200,.4),0 0 0 6px rgba(196,71,58,.25)}} /* paneles que suben desde la consola */ .rsn .rs-panel{position:absolute;z-index:19;left:14px;bottom:98px;width:min(560px,calc(100cqw - var(--rs-strip-w) - var(--rs-strip-r) - 44px));max-height:calc(100cqh - 172px);display:flex;box-sizing:border-box} .rsn .rs-panel .rs-plate{padding:18px 18px 16px;overflow:auto;overscroll-behavior:contain;width:100%;touch-action:pan-y} .rsn .rs-panel h2{font:600 30px/1 var(--rs-fd);margin:0 0 6px;outline:none} .rsn .rs-lead{margin:0 0 14px;color:var(--rs-porc2);font-size:14px;line-height:1.45} .rsn .rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px} .rsn .rs-opt{position:relative;text-align:left;padding:12px 12px 11px;border-radius:13px;border:1px solid rgba(244,239,228,.1);background:rgba(244,239,228,.04);min-height:44px;transition:border-color .18s,background-color .18s,transform .18s var(--rs-resorte)} .rsn .rs-opt:hover{border-color:rgba(214,178,94,.5)} .rsn .rs-opt:active{transform:scale(.985)} .rsn .rs-opt[aria-checked="true"]{border-color:var(--rs-oro);background:rgba(214,178,94,.13);box-shadow:inset 0 1px 1px var(--rs-brillo)} .rsn .rs-opt[aria-checked="true"]::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--rs-oro)} .rsn .rs-opt b{display:block;font-weight:600;font-size:15px;margin-bottom:3px} .rsn .rs-opt span{display:block;font-size:12.5px;color:var(--rs-porc2);line-height:1.35} .rsn .rs-opt i{font-style:normal;display:block;margin-top:6px;font-size:12px;color:var(--rs-oro);letter-spacing:.03em;font-variant-numeric:tabular-nums} .rsn .rs-sw{width:30px;height:30px;border-radius:50%;margin-bottom:8px;box-shadow:inset -3px -4px 8px rgba(0,0,0,.35),inset 3px 3px 6px rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.4)} .rsn .rs-roots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0 14px} .rsn .rs-roots .rs-opt{text-align:center;padding:10px 4px} .rsn .rs-roots .rs-opt::after{display:none} .rsn .rs-sub{font-size:12px;letter-spacing:.07em;color:var(--rs-oro);font-weight:600;margin:14px 0 8px} .rsn .rs-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin:12px 0} .rsn .rs-row output{font-variant-numeric:tabular-nums;font-size:13px;color:var(--rs-porc2)} .rsn .rs-row input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--rs-oro);height:30px;margin:0} .rsn .rs-check{display:flex;gap:12px;align-items:center;min-height:44px;font-size:14px;cursor:pointer} .rsn .rs-check input{width:22px;height:22px;accent-color:var(--rs-oro);flex:none;margin:0} .rsn .rs-check small{display:block;color:var(--rs-porc2);font-size:12.5px} .rsn .rs-take{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:12px;border-radius:13px;border:1px solid rgba(244,239,228,.1);background:rgba(244,239,228,.04);margin-bottom:8px} .rsn .rs-n{font-weight:600} .rsn .rs-m{font-size:12.5px;color:var(--rs-porc2);font-variant-numeric:tabular-nums} .rsn .rs-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center} .rsn .rs-sbtn{height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(244,239,228,.16);background:rgba(244,239,228,.06);font-size:14px;display:inline-flex;align-items:center;gap:6px} .rsn .rs-sbtn:hover{border-color:rgba(214,178,94,.6)} .rsn .rs-sbtn.rs-main{background:var(--rs-porc);color:var(--rs-tinta);border-color:var(--rs-porc);font-weight:600} .rsn .rs-sbtn.rs-warn{border-color:#c4473a;color:#f0b3a8} .rsn .rs-empty{padding:18px 4px;color:var(--rs-porc2);line-height:1.5;margin:0} /* inicio */ .rsn .rs-start{position:absolute;inset:0;z-index:40;display:flex;align-items:center;padding:16px 16px 16px max(7cqw,16px);box-sizing:border-box; background:linear-gradient(90deg,rgba(20,6,7,.9) 0%,rgba(20,6,7,.66) 40%,rgba(20,6,7,0) 70%)} .rsn .rs-box{max-width:520px} .rsn .rs-h1{font:600 clamp(46px,8.4cqw,108px)/.92 var(--rs-fd);margin:0;letter-spacing:-.01em;text-wrap:balance} .rsn .rs-slead{font-size:clamp(15px,1.7cqw,18px);line-height:1.5;color:var(--rs-porc2);margin:18px 0 26px;max-width:42ch} .rsn .rs-go{height:54px;padding:0 26px;border-radius:16px;font-size:17px;font-weight:600;background:var(--rs-porc);color:var(--rs-tinta);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 8px 24px rgba(0,0,0,.4);transition:transform .18s var(--rs-resorte)} .rsn .rs-go:active{transform:translateY(1px) scale(.98)} .rsn .rs-keys{margin-top:22px;font-size:13.5px;line-height:1.7;color:var(--rs-porc2)} /* ajustes */ .rsn .rs-modal{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(10,3,4,.55);padding:16px;box-sizing:border-box} .rsn .rs-modal .rs-tray{width:min(480px,94cqw);box-sizing:border-box} .rsn .rs-modal .rs-plate{padding:20px 22px;max-height:calc(100cqh - 52px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;box-sizing:border-box} .rsn .rs-modal h2{font:600 32px/1.1 var(--rs-fd);margin:0 0 6px} .rsn .rs-modal p{color:var(--rs-porc2);font-size:13.5px;line-height:1.45;margin:4px 0 8px} .rsn .rs-sfoot{margin-top:12px} /* octavas y trino junto a la franja */ .rsn .rs-oct{position:absolute;z-index:21;width:var(--rs-strip-w);display:flex;gap:6px} .rsn .rs-oct button{flex:1;height:40px;border-radius:12px;border:1px solid var(--rs-borde);background:var(--rs-vidrio);box-shadow:inset 0 1px 1px var(--rs-brillo);display:grid;place-items:center} .rsn .rs-oct button:active{transform:scale(.97)} .rsn .rs-oct span{min-width:28px;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--rs-oro);font-variant-numeric:tabular-nums} .rsn .rs-trill{position:absolute;z-index:21;width:var(--rs-strip-w);height:44px;border-radius:12px;border:1px solid var(--rs-borde);background:var(--rs-vidrio);font-weight:600;font-size:13px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none} .rsn .rs-trill.on{background:var(--rs-porc);color:var(--rs-tinta)} .rsn .rs-count{position:absolute;z-index:30;left:50%;top:38%;transform:translate(-50%,-50%);font:600 min(22cqw,180px)/1 var(--rs-fd);color:var(--rs-porc);text-shadow:0 6px 30px rgba(0,0,0,.6);pointer-events:none} .rsn .rs-toast{position:absolute;z-index:45;left:50%;top:70px;transform:translateX(-50%);width:max-content;max-width:min(520px,calc(100cqw - 40px));box-sizing:border-box;pointer-events:none} .rsn .rs-toast .rs-plate{padding:10px 16px;font-size:14px;line-height:1.4} .rsn .rs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ventanas medianas y bajas */ @container rsn (max-width:900px) or (max-height:560px){ .rsn .rs-chip{padding:4px 10px;min-height:46px} .rsn .rs-v{font-size:13.5px} .rsn .rs-k{font-size:10.5px} .rsn .rs-round{width:46px;height:46px} .rsn .rs-brec{height:46px;padding:0 14px 0 12px;font-size:14px} .rsn .rs-panel{bottom:84px;max-height:calc(100cqh - 150px)} .rsn .rs-panel h2{font-size:24px} .rsn .rs-mark{font-size:22px} .rsn .rs-mark small{display:none} .rsn .rs-keys{display:none} .rsn .rs-hbtn span{display:none} .rsn .rs-hbtn{padding:0 12px} } /* el teléfono acostado y las ventanas muy bajas */ @container rsn (max-height:440px){ .rsn .rs-top{top:8px} .rsn .rs-hbtn{height:38px;min-width:38px} .rsn .rs-panel{top:56px;bottom:72px;max-height:none} .rsn .rs-k{display:none} .rsn .rs-chip{min-height:42px} .rsn .rs-round{width:42px;height:42px} .rsn .rs-brec{height:42px} .rsn .rs-console{bottom:8px} .rsn .rs-console .rs-plate{padding:5px} .rsn .rs-h1{font-size:clamp(40px,7cqw,64px)} .rsn .rs-slead{margin:10px 0 16px;font-size:14px} .rsn .rs-go{height:46px} .rsn .rs-toast{top:54px} .rsn .rs-modal .rs-plate{padding:14px 18px} .rsn .rs-modal h2{font-size:24px} } /* el teléfono en vertical: el título del inicio y la consola, más compactos */ @container rsn (max-width:520px){ .rsn .rs-start{align-items:flex-end;padding:16px 16px 28px;background:linear-gradient(0deg,rgba(20,6,7,.94) 0%,rgba(20,6,7,.78) 45%,rgba(20,6,7,0) 80%)} .rsn .rs-h1{font-size:clamp(44px,14cqw,64px)} .rsn .rs-slead{font-size:15px;margin:12px 0 18px} .rsn .rs-console{left:8px;right:calc(var(--rs-strip-w) + var(--rs-strip-r) + 8px);bottom:10px} .rsn .rs-console .rs-plate{padding:5px;gap:4px} .rsn .rs-chip{padding:4px 8px} .rsn .rs-top{left:12px} .rsn .rs-mark{font-size:20px} .rsn .rs-panel{left:8px;width:calc(100cqw - 16px);bottom:80px} .rsn .rs-panel .rs-plate{padding:14px} .rsn .rs-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} .rsn .rs-take{grid-template-columns:1fr} .rsn .rs-acts{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){.rsn *{transition:none!important;animation:none!important}} /* ================= El Borrador 2D (parts/borrador*.js) ================= La interfaz va con el juego: pergamino, tinta azul oscura y una sombra plana; la goma del marcador es una barra rosa y azul que se achica de verdad. En la Sala del Códice el botón de borrar dice «Entrar». */ .win[data-id="borrador"] .win-body,.win.fw[data-id="borrador"] .win-body{padding:0;overflow:hidden;position:relative} /* en pantalla completa, de orilla a orilla (sin la franja de 8 px de fswin) */ .arc.bd{--bd-ink:#1d2340;--bd-paper:#fbf3dc;--bd-pink:#ff8fab;--bd-blue:#6c94f5;--bd-gold:#e3a72f;background:#0d0b1a;font-family:var(--f-ui)} .arc.bd .arc-cv{cursor:default} .arc.bd .arc-cv{touch-action:none} /* el marcador */ .bd-hud{position:absolute;left:12px;right:12px;top:12px;z-index:4;display:flex;align-items:flex-start;gap:10px;pointer-events:none} .bd-hud > *{pointer-events:auto} .bd-er{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:2px solid var(--bd-ink);border-radius:999px;background:var(--bd-paper);color:var(--bd-ink);box-shadow:3px 3px 0 var(--bd-ink)} .bd-er-bar{--k:1;position:relative;display:block;width:86px;height:18px;border-radius:5px;background:rgba(29,35,64,.12);overflow:hidden} .bd-er-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k) * 100%);border-radius:5px;background:linear-gradient(90deg,var(--bd-pink) 0 50%,#fff 50% calc(50% + 2px),var(--bd-blue) calc(50% + 2px));box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);transition:width .45s cubic-bezier(.3,1.4,.5,1)} .bd-er b{font:700 19px/1 Georgia,'DejaVu Serif',serif;font-variant-numeric:tabular-nums;min-width:1.4ch;text-align:right} .bd-er small{font-size:12px;font-weight:700;opacity:.8} .bd-er.low{animation:bd-low 1s ease-in-out infinite} @keyframes bd-low{50%{background:#ffe0e6}} .bd-lv{align-self:center;padding:5px 12px;border-radius:999px;background:rgba(13,11,26,.62);color:#f3ead2;font:600 14px/1.2 Georgia,'DejaVu Serif',serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%} .bd-pg{margin-left:auto;display:flex;gap:5px;padding:7px 10px;border:2px solid var(--bd-ink);border-radius:12px;background:var(--bd-paper);box-shadow:3px 3px 0 var(--bd-ink)} .bd-pg i{display:block;width:14px;height:18px;border:2px solid var(--bd-ink);border-radius:2px 5px 2px 2px;background:transparent;opacity:.35} .bd-pg i.on{background:#f7d77a;opacity:1;box-shadow:inset 0 -4px 0 #e2a92f} .bd-pause{display:grid;place-items:center;width:42px;height:42px;padding:0;border:2px solid var(--bd-ink);border-radius:12px;background:var(--bd-paper);color:var(--bd-ink);box-shadow:3px 3px 0 var(--bd-ink);cursor:pointer} .bd-pause svg{width:20px;height:20px} .bd-pause:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bd-ink)} .bd-pause:focus-visible,.bd-btn:focus-visible{outline:3px solid #fff;outline-offset:3px} .bd-hud.hub .bd-er,.bd-hud.hub .bd-pg{display:none} /* el aviso de la letra, la voz del Códice o del Censor y los avisos cortos */ .bd-prompt{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;padding:8px 16px;border:2px solid var(--bd-ink);border-radius:999px;background:var(--bd-paper);color:var(--bd-ink);font:700 15px/1.25 var(--f-ui);text-align:center;box-shadow:3px 3px 0 var(--bd-ink);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bd-say{position:absolute;left:50%;bottom:72px;z-index:5;transform:translateX(-50%);width:min(640px,calc(100% - 32px));box-sizing:border-box;padding:12px 18px 14px;border:2px solid var(--bd-ink);border-radius:14px;background:var(--bd-paper);color:var(--bd-ink);box-shadow:4px 4px 0 var(--bd-ink);transition:opacity .6s ease,transform .6s ease;pointer-events:none} .bd-say b{display:block;margin-bottom:4px;font:700 13px/1 var(--f-ui);color:#7b5a1c;letter-spacing:.04em} .bd-say span{display:block;font:italic 17px/1.45 Georgia,'DejaVu Serif',serif;text-wrap:pretty} .bd-say[data-who="censor"]{background:#1b1c26;color:#e8e2d4;border-color:#000;box-shadow:4px 4px 0 #000} .bd-say[data-who="censor"] b{color:#e0624f} .bd-say[data-who="censor"] span{font-style:normal;font-weight:700;letter-spacing:.01em} .bd-say.off{opacity:0;transform:translate(-50%,8px)} .bd-toast{position:absolute;left:50%;top:66px;z-index:5;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;padding:7px 15px;border-radius:999px;background:rgba(13,11,26,.78);color:#fff6dd;font:600 14px/1.3 var(--f-ui);text-align:center;pointer-events:none;transition:opacity .5s ease} .bd-toast.off{opacity:0} .bd-help{position:absolute;left:50%;bottom:64px;z-index:3;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:min(560px,calc(100% - 28px));margin:0;padding:8px 14px;border:2px solid var(--bd-ink);border-radius:12px;background:var(--bd-paper);color:var(--bd-ink);box-shadow:3px 3px 0 var(--bd-ink);text-align:center;font:600 13.5px/1.35 var(--f-ui);pointer-events:none;transition:opacity 1s ease} .bd-help.off{opacity:0} .bd-skip{position:absolute;left:50%;bottom:24px;z-index:6;transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:999px;background:rgba(13,11,26,.7);color:#f3ead2;font:600 13px/1.3 var(--f-ui);pointer-events:none;white-space:nowrap} /* el cartel del nivel: número romano y nombre, como una cinta de pergamino */ .bd-banner{position:absolute;left:50%;top:22%;z-index:6;transform:translate(-50%,-10px);display:grid;justify-items:center;gap:2px;padding:10px 34px 12px;border:2px solid var(--bd-ink);border-radius:6px;background:var(--bd-paper);color:var(--bd-ink);box-shadow:4px 4px 0 var(--bd-ink);opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s ease;white-space:nowrap} .bd-banner small{font:700 15px/1 Georgia,'DejaVu Serif',serif;letter-spacing:.12em;color:#7b5a1c} .bd-banner b{font:700 clamp(20px,3.4vw,30px)/1.15 Georgia,'DejaVu Serif',serif} .bd-banner.on{opacity:1;transform:translate(-50%,0)} /* el telón de tinta entre lugares */ .bd-fade{position:absolute;inset:0;z-index:7;background:#0b0918;opacity:0;pointer-events:none;transition:opacity .42s ease} .bd-fade.on{opacity:1} /* los botones táctiles */ .bd-btn{position:absolute;z-index:5;display:grid;place-items:center;border:2px solid var(--bd-ink);border-radius:50%;background:var(--bd-paper);color:var(--bd-ink);box-shadow:3px 3px 0 var(--bd-ink);touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none} .bd-btn.on{transform:translate(2px,2px) scale(.96);box-shadow:1px 1px 0 var(--bd-ink)} .bd-jump{right:18px;bottom:24px;width:68px;height:68px} .bd-jump svg{width:30px;height:30px} .bd-erase{right:100px;bottom:40px;width:78px;height:78px;gap:0;align-content:center;background:linear-gradient(135deg,#ffd3de 0 50%,#d9e4ff 50%)} .bd-erase svg{width:30px;height:30px} .bd-erase span{font:800 11px/1 var(--f-ui);letter-spacing:.02em} .bd-erase.on{background:linear-gradient(135deg,var(--bd-pink) 0 50%,var(--bd-blue) 50%);color:#fff} .arc.bd.touch .bd-prompt{bottom:128px} .arc.bd.touch .bd-say{bottom:136px} .arc.bd.touch .bd-help{top:60px;bottom:auto} /* abajo están los botones */ .arc.bd.in-hub .bd-erase{background:linear-gradient(135deg,#fff3d4 0 50%,#e8dcff 50%)} /* las tarjetas (título, dificultad, pausa, final) */ .bd-card .gk-wincard{max-width:min(520px,92%);max-height:calc(100% - 20px);overflow:auto;overscroll-behavior:contain;background:var(--bd-paper);border:2px solid var(--bd-ink);box-shadow:5px 5px 0 var(--bd-ink);color:var(--bd-ink)} .bd-title{display:grid;gap:4px;font-size:34px!important;letter-spacing:.01em} .bd-title small{font:italic 400 18px/1.2 Georgia,'DejaVu Serif',serif;color:#7b5a1c} .bd-how{margin:6px 0 16px;padding-left:20px;display:grid;gap:6px;text-align:left;line-height:1.45} .bd-dif-now{margin:12px 0 0!important;font-size:13px;opacity:.75} .bd-dn{font:italic 17px/1.3 Georgia,'DejaVu Serif',serif;color:#7b5a1c} .bd-difs{display:grid;gap:10px;margin-top:10px} .bd-dif{display:grid;gap:4px;padding:12px 16px;border:2px solid var(--bd-ink);border-radius:14px;background:#fffdf5;color:var(--bd-ink);text-align:left;cursor:pointer;box-shadow:3px 3px 0 var(--bd-ink);font:inherit} .bd-dif b{font:700 19px/1.1 Georgia,'DejaVu Serif',serif} .bd-dif span{font-size:14px;line-height:1.4;opacity:.85} .bd-dif:hover{background:#fff3d6} .bd-dif:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bd-ink)} .bd-dif:focus-visible{outline:3px solid var(--bd-blue);outline-offset:3px} .gk-btns.bd-col{flex-direction:column;align-items:stretch;max-width:280px;margin:0 auto} .bd-ctl{text-align:left;margin:6px 0 12px} .bd-ctl h4{margin:10px 0 4px;font:700 15px/1.2 Georgia,'DejaVu Serif',serif} .bd-ctl ul{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14px;line-height:1.4} .arc.bd.nocv{display:flex;align-items:center;justify-content:center;padding:16px;min-height:300px} .arc.bd.nocv > :not(.bd-nocv){display:none!important} .bd-nocv{color:#f3ead2;text-align:center;max-width:40ch} @media (max-width:720px){ .bd-hud{left:8px;right:8px;top:8px;gap:6px} .bd-er{padding:4px 10px 4px 6px;gap:6px} .bd-er-bar{width:58px;height:15px} .bd-er b{font-size:16px} .bd-er small{display:none} .bd-lv{display:none} .bd-pg{padding:5px 8px} .bd-pg i{width:11px;height:15px} .bd-pause{width:38px;height:38px} .bd-say span{font-size:15px} .bd-title{font-size:28px!important} } @media (hover:hover) and (pointer:fine){ .win.fw:not(.fw-imm) .bd-hud{top:50px} } @media (prefers-reduced-motion:reduce){ .bd-er-bar i,.bd-say,.bd-fade,.bd-toast,.bd-help,.bd-banner{transition:none} .bd-er.low{animation:none} } /* ================= Estampas sonoras (1.6.3) ================= */ .et{ display:flex; flex-direction:column; gap:12px; container-type:inline-size; } .et-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .et-logo{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; color:var(--accent-fg); background:var(--accent); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 10px rgba(0,0,0,.18); transform:rotate(-6deg); } .et-logo svg{ width:28px; height:28px; } .et-hd{ flex:1 1 260px; min-width:0; } .et-hd h3{ margin:0; font-family:var(--f-title); font-size:1.25em; } .et-hd p{ margin:2px 0 0; color:var(--muted); font-size:.92em; line-height:1.35; } .et-tr{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .et-tr .btn svg{ width:18px; height:18px; } .et-play{ min-width:108px; } .et-tg[aria-pressed="true"]{ background:var(--accent); color:var(--accent-fg); border-color:transparent; } .et-tempo{ display:flex; align-items:center; gap:6px; font-size:.86em; color:var(--muted); } .et-tempo input{ width:110px; accent-color:var(--accent); } .et-tempo b{ min-width:2.4em; font-variant-numeric:tabular-nums; color:var(--win-fg); } .et-ts button{ font-variant-numeric:tabular-nums; } /* paleta: las estampas como sellos de goma sobre un cojín de tinta */ .et-pal{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px; border-radius:14px; background:color-mix(in srgb, var(--win-fg) 6%, transparent); border:1px solid color-mix(in srgb, var(--win-fg) 12%, transparent); } .et-sts{ display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto; min-width:0; } .et-st, .et-tl{ width:42px; height:42px; padding:0; display:grid; place-items:center; border-radius:11px; cursor:pointer; border:1px solid color-mix(in srgb, var(--win-fg) 16%, transparent); background:var(--cell-bg, var(--win-bg)); color:var(--win-fg); box-shadow:0 2px 0 color-mix(in srgb, var(--win-fg) 18%, transparent); transition:transform .12s, box-shadow .12s; } .et-st .et-ic svg{ width:30px; height:30px; display:block; } .et-tl svg{ width:22px; height:22px; } .et-tl b{ font:700 22px/1 Georgia, 'Times New Roman', serif; } .et-st:hover, .et-tl:hover{ transform:translateY(-1px); } .et-st[aria-pressed="true"], .et-tl[aria-pressed="true"]{ transform:translateY(1px); box-shadow:0 0 0 2px var(--accent), inset 0 2px 4px rgba(0,0,0,.18); background:color-mix(in srgb, var(--accent) 18%, var(--cell-bg, var(--win-bg))); } .et-st:focus-visible, .et-tl:focus-visible{ outline:2px solid var(--focus, var(--accent)); outline-offset:2px; } .et-tl:disabled{ opacity:.4; cursor:default; transform:none; } .et-tools{ display:flex; gap:6px; padding-left:10px; border-left:1px solid color-mix(in srgb, var(--win-fg) 15%, transparent); } /* pentagrama: una tira de papel que se desplaza a lo largo */ .et-staff{ border-radius:14px; overflow:hidden; border:1px solid color-mix(in srgb, var(--win-fg) 16%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.12); } .et-scr{ overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; } .et-inner{ position:relative; } .et-cv{ position:sticky; left:0; display:block; cursor:crosshair; touch-action:pan-x; outline:none; } .et-cv.erase{ cursor:cell; } .et-cv:focus-visible{ box-shadow:inset 0 0 0 2px var(--focus, var(--accent)); } .et-hint{ margin:-4px 0 0; font-size:.8em; color:var(--muted); } .et-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .et-ti{ flex:1 1 200px; min-width:0; } .et-ti input{ width:100%; box-sizing:border-box; padding:8px 10px; border-radius:9px; border:1px solid color-mix(in srgb, var(--win-fg) 20%, transparent); background:var(--cell-bg, var(--win-bg)); color:var(--win-fg); font:inherit; } .et-meta{ font-size:.85em; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; } .et-acts{ display:flex; gap:6px; flex-wrap:wrap; } .et-acts .btn svg{ width:17px; height:17px; } .et-acts .btn[aria-expanded="true"]{ background:var(--accent); color:var(--accent-fg); border-color:transparent; } .et-pop{ padding:12px 14px; border-radius:14px; background:var(--cell-bg, var(--win-bg)); border:1px solid color-mix(in srgb, var(--win-fg) 15%, transparent); } .et-pop h4{ margin:4px 0 8px; font-family:var(--f-title); } .et-pop h4 + .hint{ margin-top:0; } .et-list{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:6px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); } .et-list li{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; background:color-mix(in srgb, var(--win-fg) 5%, transparent); } .et-pt{ flex:1; min-width:0; display:flex; flex-direction:column; } .et-pt b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .et-pt small{ color:var(--muted); font-variant-numeric:tabular-nums; } .et-list .iconbtn svg{ width:18px; height:18px; } @container (max-width:640px){ .et-pal{ display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); justify-items:center; } .et-sts, .et-tools{ display:contents; } .et-tools{ border-left:0; padding-left:0; } .et-st, .et-tl{ width:38px; height:38px; } .et-st .et-ic svg{ width:27px; height:27px; } .et-acts .btn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .et-acts .btn{ padding-inline:10px; } } @media (prefers-reduced-motion:reduce){ .et-st, .et-tl{ transition:none; } } /* ---------- Cromos holográficos ---------- */ @property --mx{syntax:'';inherits:true;initial-value:50%} @property --my{syntax:'';inherits:true;initial-value:50%} @property --hp{syntax:'';inherits:true;initial-value:0} @property --ang{syntax:'';inherits:true;initial-value:0deg} .gcard{--rx:0deg;--ry:0deg;transform:perspective(650px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s;isolation:isolate} .gcard.hv{transition:transform .06s linear,box-shadow .3s;z-index:2;box-shadow:0 10px 22px rgba(0,0,0,.35)} .gc-holo,.gc-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3} .gc-holo{background:linear-gradient(105deg,transparent 20%,hsl(330 100% 83%) 30%,hsl(45 100% 78%) 38%,hsl(140 85% 79%) 46%,hsl(195 100% 81%) 54%,hsl(265 95% 85%) 62%,transparent 72%);background-size:250% 250%;background-position:calc(100% - var(--mx)) calc(100% - var(--my));mix-blend-mode:multiply;opacity:calc(var(--hp) * .72);transition:opacity .35s} .gc-glare{background:linear-gradient(115deg,transparent calc(var(--mx) - 30%),rgba(255,255,255,.62) calc(var(--mx) - 2%),rgba(255,255,255,.62) calc(var(--mx) + 2%),transparent calc(var(--mx) + 30%)),radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.2),rgba(0,0,0,.14));opacity:calc(var(--hp) * .8);transition:opacity .35s} .gcard.dk .gc-holo{background-image:linear-gradient(105deg,transparent 20%,rgba(255,92,170,.6) 31%,rgba(255,225,90,.62) 39%,rgba(110,255,170,.58) 47%,rgba(90,190,255,.62) 55%,rgba(190,120,255,.58) 63%,transparent 75%);mix-blend-mode:color-dodge} .gcard.dk .gc-glare{mix-blend-mode:overlay} .gc-seal{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;z-index:4;background:conic-gradient(from var(--ang),#ff6fae,#ffe36b,#6bffb5,#6bc4ff,#c48bff,#ff6fae);box-shadow:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 3px rgba(255,255,255,.3);pointer-events:none} .gc-seal::after{content:"A";position:absolute;inset:0;display:grid;place-items:center;font:700 8px/1 Arial,sans-serif;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.5)} .gcard.foil{border-color:#c8a64a;box-shadow:0 0 0 1px rgba(255,236,170,.55),0 4px 14px rgba(0,0,0,.3)} .gcard.foil .gc-holo{background:repeating-linear-gradient(115deg,hsl(330 100% 80%) 0%,hsl(45 100% 74%) 4%,hsl(140 80% 74%) 8%,hsl(195 100% 76%) 12%,hsl(265 95% 82%) 16%,hsl(330 100% 80%) 20%),repeating-linear-gradient(35deg,rgba(0,0,0,.07) 0 1px,transparent 1px 4px);background-size:400% 400%,100% 100%;background-position:var(--mx) var(--my),0 0;opacity:calc(.42 + var(--hp) * .4)} .gcard.foil.dk .gc-holo{background:repeating-linear-gradient(115deg,hsl(330 100% 60%) 0%,hsl(45 100% 55%) 4%,hsl(140 90% 50%) 8%,hsl(195 100% 55%) 12%,hsl(265 100% 64%) 16%,hsl(330 100% 60%) 20%),repeating-linear-gradient(35deg,rgba(255,255,255,.12) 0 1px,transparent 1px 4px);background-size:400% 400%,100% 100%;background-position:var(--mx) var(--my),0 0;mix-blend-mode:color-dodge;opacity:calc(.32 + var(--hp) * .45)} .gcard.foil .gc-glare{opacity:calc(.3 + var(--hp) * .7)} .gcard.foil .gc-glare::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,#fff 0 .9px,transparent 1.5px) 0 0/19px 23px,radial-gradient(circle,rgba(255,250,210,.95) 0 .7px,transparent 1.3px) 7px 11px/29px 17px;background-position:calc(var(--mx) * .3) calc(var(--my) * .3),calc(var(--mx) * -.2) calc(var(--my) * -.2);opacity:calc(.25 + var(--hp) * .75)} .gcard.foil::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),#fff6c9,#d9a73a,#fff6c9,#b7861f,#fff6c9);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);z-index:4;pointer-events:none} @keyframes holoIdle{0%{--mx:15%;--my:20%;--hp:.5;--ang:0deg}50%{--mx:85%;--my:60%;--hp:.85;--ang:180deg}100%{--mx:40%;--my:92%;--hp:.6;--ang:360deg}} .gcard.foil:not(.hv):not(.mini),.ab-rv .gcard:not(.hv),.ab-insp-card .gcard:not(.hv){animation:holoIdle 7s ease-in-out infinite alternate} /* sellos y estilos de las colecciones nuevas */ .gcard.set-notacion{background:linear-gradient(160deg,#fffdf7,#ece5d3);border-color:#1b1b1f;color:#1b1b1f} .gcard.set-notacion .gc-t{font-family:'Bodoni Moda','Playfair Display',Georgia,serif;font-weight:800} .gcard.set-notacion .gc-art{background:#fffdf7} .nt-art{width:100%;height:auto;display:block} .nt-art .st{stroke:#2b2420;stroke-width:.7} .nt-art path{fill:#1f1a17} .nt-art .hi{fill:#c0392b} .nt-art .lbl{font:700 5.2px Arial,sans-serif;fill:#2b2420} .nt-art .lbl.hi{fill:#c0392b} .nt-art .sp0{fill:#efe2c4}.nt-art .sp1{fill:#fbf3df} .nt-art .hp{fill:none;stroke:#c0392b;stroke-width:1.2;stroke-linecap:round} .nt-art .bx{fill:none;stroke:#b9ad95;stroke-width:.8} .nt-art .bx-f{fill:#c0392b} .nt-art .bx-r{fill:#c0392b;opacity:.35} .gcard.set-bestiario{background:linear-gradient(160deg,#2c2452,#141026);border-color:#f2c94c;color:#f6efff} .gcard.set-bestiario .gc-art{background:radial-gradient(circle at 50% 42%,#4a3d86,#1b1633 75%)} .gcard.set-bestiario .gc-t{font:400 15px/1 'VT323','Press Start 2P',monospace;letter-spacing:.02em} .gcard.set-bestiario .gc-s{color:#d8ccff} .gc-art .bs-px{width:78%;height:auto;image-rendering:pixelated;display:block} .gcard.back.set-bestiario,.gcard.back.set-notacion{color:var(--muted)} /* ---------- Álbumes: ventana ---------- */ .ab{position:relative;display:flex;flex-direction:column;gap:12px;min-height:420px} .ab-shelf{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;min-width:0;scrollbar-width:thin} .ab-main{display:flex;gap:16px;align-items:flex-start;min-width:0} .ab-side{flex:0 0 196px;display:flex;flex-direction:column;gap:10px;min-width:0} .ab-narrow .ab-main{flex-direction:column;align-items:stretch} .ab-narrow .ab-side{flex:none;width:100%} .ab-spine{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg2);color:var(--win-fg);cursor:pointer;flex:none;text-align:left;font:inherit} .ab-spine:hover{background:var(--cell-bg)} .ab-spine[aria-selected="true"]{outline:2px solid var(--accent);outline-offset:1px;background:var(--cell-bg)} .ab-spine:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:2px} .ab-sp-t{display:flex;flex-direction:column;gap:2px;line-height:1.15} .ab-sp-t b{font-size:13px} .ab-sp-t small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums} .ab-sp-t em{font-style:normal;color:var(--accent);font-weight:700} .ab-acts{display:flex;flex-direction:column;gap:8px} .ab-narrow .ab-acts{flex-direction:row;flex-wrap:wrap} .ab-acts .btn{display:flex;align-items:center;gap:8px;min-height:42px;width:100%;text-align:left} .ab-acts .btn span{flex:1} .ab-narrow .ab-acts .btn{width:auto;flex:1 1 160px} .ab-acts .btn svg{width:19px;height:19px;flex:none} .ab-cnt{min-width:20px;padding:0 6px;border-radius:99px;background:rgba(0,0,0,.2);font:700 12px/20px var(--f-ui);text-align:center;font-variant-numeric:tabular-nums} .ab-cnt.z{opacity:.5} .ab-packbtn:not([disabled]) svg{animation:abWiggle 2.6s ease-in-out infinite} @keyframes abWiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}} /* portadas */ .ab-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:84px;aspect-ratio:3/4;padding:9px 7px;box-sizing:border-box;border-radius:3px 8px 8px 3px;background:linear-gradient(150deg,var(--c1),var(--c2));color:var(--ink);box-shadow:inset 5px 0 0 rgba(0,0,0,.25),inset 6px 0 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.3);overflow:hidden;flex:none;text-align:center} .ab-cover.sm{width:38px;padding:4px 3px 4px 6px;gap:2px} .ab-cover.sm .ab-cv-t{display:none} .ab-cover::before{content:"";position:absolute;inset:0;pointer-events:none} .ab-cv-em{position:relative;display:grid;place-items:center;width:62%;aspect-ratio:1} .ab-cv-em svg,.ab-cv-em img{width:100%;height:100%;display:block} .ab-cv-em img{image-rendering:pixelated;object-fit:contain} .ab-cv-t{position:relative;font:700 10px/1.1 var(--fa);letter-spacing:.02em} .ab-cv-done{position:absolute;top:2px;right:4px;font-size:11px;color:#ffd84a;text-shadow:0 0 4px rgba(0,0,0,.7)} .ab-x-compositores{--c1:#3e0f17;--c2:#8e2a35;--ink:#e8c46a;--paper:#f7eedb;--pink:#3a2414;--acc:#7a2230;--acc-ink:#f3d58a;--slot:#efe2c4;--sline:#b89a67;--fa:'IM Fell English SC',Georgia,serif;--fn:'IM Fell English SC',Georgia,serif} .ab-x-modos{--c1:#0d2140;--c2:#2d6cb5;--ink:#eef4ff;--paper:#f4f7fc;--pink:#13305a;--acc:#2d6cb5;--acc-ink:#fff;--slot:#e2ebf8;--sline:#8fb0dc;--fa:'Cinzel',Georgia,serif;--fn:'Cinzel',Georgia,serif} .ab-x-temas{--c1:#35205e;--c2:#c2368f;--ink:#fff3c4;--paper:#f8f5fc;--pink:#2b2140;--acc:#6f45b8;--acc-ink:#fff3c4;--slot:#ece6f6;--sline:#b6a3d9;--fa:'Righteous','Fredoka',sans-serif;--fn:'Righteous','Fredoka',sans-serif} .ab-x-notacion{--c1:#0b0b0d;--c2:#3a3a41;--ink:#f4efe2;--paper:#fffdf7;--pink:#1b1b1f;--acc:#1b1b1f;--acc-ink:#fffdf7;--slot:#f2eee3;--sline:#a8a294;--fa:'Bodoni Moda','Playfair Display',Georgia,serif;--fn:'Bodoni Moda','Playfair Display',Georgia,serif} .ab-x-bestiario{--c1:#100d20;--c2:#3d2a6b;--ink:#f2c94c;--paper:#221b3a;--pink:#efe6ff;--acc:#f2c94c;--acc-ink:#221b3a;--slot:#2e2650;--sline:#7464b6;--fa:'Press Start 2P','VT323',monospace;--fn:'VT323','Press Start 2P',monospace} .ab-cover.ab-x-compositores::before{inset:7% 9% 7% 13%;border:1px solid rgba(232,196,106,.6);outline:1px solid rgba(232,196,106,.3);outline-offset:2px;border-radius:2px} .ab-cover.ab-x-modos::before{background:linear-gradient(var(--ink),var(--ink)) 0 6%/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 94%/100% 1px no-repeat,repeating-linear-gradient(90deg,transparent 0 3px,rgba(238,244,255,.35) 3px 4px) 0 1%/100% 4% no-repeat,repeating-linear-gradient(90deg,transparent 0 3px,rgba(238,244,255,.35) 3px 4px) 0 99%/100% 4% no-repeat} .ab-cover.ab-x-temas::before{background:repeating-linear-gradient(135deg,rgba(255,255,255,.0) 0 9px,rgba(255,255,255,.1) 9px 18px)} .ab-cover.ab-x-notacion::before{top:auto;height:20%;background:linear-gradient(#0b0b0d,#0b0b0d) 0 0/100% 55% no-repeat,repeating-linear-gradient(90deg,#f4efe2 0 calc(14.28% - 1px),#777 calc(14.28% - 1px) 14.28%)} .ab-cover.ab-x-bestiario::before{background:radial-gradient(circle,#fff 0 .7px,transparent 1.2px) 0 0/13px 17px,radial-gradient(circle,#f2c94c 0 .7px,transparent 1.2px) 5px 9px/19px 23px;opacity:.7} /* libro */ .ab-stage{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0} .ab-bookwrap{width:100%;display:flex;justify-content:center;min-width:0;touch-action:pan-y} .ab-book{position:relative;width:calc(var(--pw,360px) * 2);height:var(--ph,470px);font-size:calc(var(--pw,360px) / 29);max-width:100%} .ab-book.one{width:var(--pw,360px)} .ab-leafs{position:relative;width:100%;height:100%;display:flex;perspective:2400px} .ab-pw{position:relative;width:var(--pw);height:var(--ph);flex:none} .ab-pg{position:absolute;inset:0;display:flex;flex-direction:column;gap:.65em;padding:1.35em 1.45em 1em;box-sizing:border-box;background:var(--paper);color:var(--pink);overflow:hidden} .ab-pw.l .ab-pg,.ab-leaf.bw .front .ab-pg,.ab-leaf.fw .back .ab-pg{border-radius:10px 2px 2px 10px;box-shadow:inset -22px 0 24px -16px rgba(0,0,0,.38),-2px 3px 0 -1px #e9e1cf,-4px 6px 0 -2px #d9cdb3,0 14px 28px rgba(0,0,0,.35)} .ab-pw.r .ab-pg,.ab-leaf.fw .front .ab-pg,.ab-leaf.bw .back .ab-pg{border-radius:2px 10px 10px 2px;box-shadow:inset 22px 0 24px -16px rgba(0,0,0,.38),2px 3px 0 -1px #e9e1cf,4px 6px 0 -2px #d9cdb3,0 14px 28px rgba(0,0,0,.35)} .ab-pw.s .ab-pg,.ab-leaf.one .ab-pg{border-radius:3px 10px 10px 3px;box-shadow:inset 16px 0 18px -14px rgba(0,0,0,.3),2px 3px 0 -1px #e9e1cf,4px 6px 0 -2px #d9cdb3,0 14px 28px rgba(0,0,0,.35)} .ab-pg-blank{background:var(--paper)} .ab-leaf{position:absolute;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;z-index:5;will-change:transform} .ab-leaf.fw{left:var(--pw);transform-origin:0 50%} .ab-leaf.bw{left:0;transform-origin:100% 50%} .ab-leaf.one{left:0;transform-origin:0 50%} .ab-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden} .ab-face.back{transform:rotateY(180deg)} .ab-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 35%,transparent 70%,rgba(255,255,255,.08))} /* papeles */ .ab-book.ab-x-compositores .ab-pg{background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(122,74,30,.12)),repeating-linear-gradient(0deg,transparent 0 1.7em,rgba(122,34,48,.06) 1.7em calc(1.7em + 1px)),var(--paper)} .ab-book.ab-x-modos .ab-pg{background:linear-gradient(118deg,transparent 38%,rgba(45,108,181,.05) 44%,transparent 49%),linear-gradient(64deg,transparent 60%,rgba(45,108,181,.04) 66%,transparent 72%),var(--paper)} .ab-book.ab-x-temas .ab-pg{background:radial-gradient(circle at 0 0,rgba(194,54,143,.08),transparent 40%),radial-gradient(circle at 100% 100%,rgba(111,69,184,.1),transparent 45%),var(--paper)} .ab-book.ab-x-notacion .ab-pg{background:repeating-linear-gradient(0deg,transparent 0 .55em,rgba(27,27,31,.05) .55em calc(.55em + 1px),transparent calc(.55em + 1px) 1.1em,rgba(27,27,31,.05) 1.1em calc(1.1em + 1px),transparent calc(1.1em + 1px) 5.5em),var(--paper)} .ab-book.ab-x-bestiario .ab-pg{background:radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.6px) 0 0/37px 41px,radial-gradient(circle,rgba(242,201,76,.5) 0 1px,transparent 1.6px) 13px 19px/53px 47px,radial-gradient(ellipse at 50% 30%,#2c2450,var(--paper) 70%)} /* encabezado de página */ .ab-ph{display:flex;align-items:center;gap:.6em;margin:-1.35em -1.45em 0;padding:.65em 1.1em;background:var(--acc);color:var(--acc-ink);position:relative} .ab-ph h4{margin:0;font:1.3em/1.08 var(--fa);text-wrap:balance} .ab-ph small{font-size:.74em;opacity:.85;letter-spacing:.04em} .ab-pnum{display:grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:var(--acc-ink);color:var(--acc);font:1.05em/1 var(--fn)} .ab-book.ab-x-compositores .ab-ph::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-top:1px solid var(--acc);border-bottom:1px solid var(--acc);opacity:.6} .ab-book.ab-x-modos .ab-ph::after{content:"";position:absolute;left:0;right:0;bottom:-.55em;height:.45em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 7H6V1H2V4H4' fill='none' stroke='%232d6cb5' stroke-width='1.2'/%3E%3Cpath d='M8 7H14V1H10V4H12' fill='none' stroke='%232d6cb5' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/auto 100% repeat-x;opacity:.75} .ab-book.ab-x-temas .ab-ph{background:linear-gradient(90deg,#6f45b8,#c2368f 35%,#e8913a 65%,#1f9e8f)} .ab-book.ab-x-notacion .ab-ph{padding-bottom:1.25em} .ab-book.ab-x-notacion .ab-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.75em;background:repeating-linear-gradient(90deg,transparent 0 .62em,#1b1b1f .62em 1.18em,transparent 1.18em 1.62em,#1b1b1f 1.62em 2.18em,transparent 2.18em 3.42em,#1b1b1f 3.42em 3.98em,transparent 3.98em 4.42em,#1b1b1f 4.42em 4.98em,transparent 4.98em 5.42em,#1b1b1f 5.42em 5.98em,transparent 5.98em 6.3em) 0 0/6.3em 62% repeat-x,repeating-linear-gradient(90deg,#fffdf7 0 calc(.9em - 1px),#8d877a calc(.9em - 1px) .9em)} .ab-book.ab-x-bestiario .ab-ph h4{font-size:.86em;line-height:1.45} .ab-book.ab-x-bestiario .ab-ph{box-shadow:0 4px 0 #b8902a} .ab-pd{margin:0;font-size:.84em;line-height:1.38;opacity:.88} .ab-pf{display:flex;justify-content:space-between;align-items:baseline;align-self:stretch;margin-top:auto;font-size:.68em;opacity:.6;font-variant-numeric:tabular-nums} .ab-pg .bar{width:100%;max-width:none;background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.14)} .ab-pg .bar i{background:var(--acc)} .ab-book.ab-x-bestiario .ab-pg .bar{background:rgba(255,255,255,.12)} .ab-pf b{font:1.25em var(--fn)} /* espacios para los cromos */ .ab-slots{flex:1;min-height:0;display:flex;flex-wrap:wrap;gap:var(--gap,10px);justify-content:center;align-content:center;margin:0 auto;width:100%;max-width:calc(var(--cols) * var(--sw,110px) + (var(--cols) - 1) * var(--gap,10px) + 1px)} .ab-slot{position:relative;width:var(--sw,110px);height:calc(var(--sw,110px) * 1.4);flex:none} .ab-empty{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;padding:.35em;box-sizing:border-box;border:2px dashed var(--sline);border-radius:8px;background:var(--slot);color:var(--pink);cursor:pointer;font:inherit;text-align:center} .ab-empty:hover{border-style:solid} .ab-empty:focus-visible,.ab-stk:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .ab-num{font:calc(var(--sw,110px) * .36)/1 var(--fn);opacity:.5} .ab-name{font-size:calc(var(--sw,110px) * .088);line-height:1.2;opacity:.78;max-width:96%;overflow-wrap:anywhere} .ab-slot.pend .ab-empty{border-style:solid;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent);animation:abPend 1.8s ease-in-out infinite} @keyframes abPend{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 12%,transparent)}} .ab-pend{font:700 calc(var(--sw,110px) * .082) var(--f-ui);padding:.25em .6em;border-radius:99px;background:var(--accent);color:var(--pri-fg,#fff)} .ab-stk{all:unset;display:block;width:100%;height:100%;cursor:zoom-in;transform:rotate(var(--tilt,0deg))} .ab-stk .gcard{width:100%;height:100%;box-shadow:0 0 0 2px #fff,0 6px 10px rgba(0,0,0,.28)} .ab-slots.tiny .gc-s,.ab-slots.tiny .gc-seal{display:none} .ab-slots.tiny .gc-t{font-size:10px} .ab-slot.fresh .ab-stk{animation:abStick .6s cubic-bezier(.2,1.6,.4,1)} @keyframes abStick{0%{transform:scale(1.28) rotate(-7deg)}55%{transform:scale(.93) rotate(calc(var(--tilt,0deg) + 1.5deg))}100%{transform:scale(1) rotate(var(--tilt,0deg))}} .ab-book.ab-x-bestiario .ab-stk .gcard{box-shadow:0 0 0 2px #f2c94c,0 6px 12px rgba(0,0,0,.5)} /* portadilla, insignia y contraportada */ .ab-pg-title{align-items:center;justify-content:space-between;text-align:center} .ab-tt{display:flex;flex-direction:column;align-items:center;gap:.35em;margin-top:.4em} .ab-tt-o{font-size:.7em;letter-spacing:.08em;opacity:.7} .ab-tt-em{display:grid;place-items:center;width:4.6em;height:4.6em;color:var(--acc)} .ab-tt-em svg,.ab-tt-em img{width:100%;height:100%} .ab-tt-em img{image-rendering:pixelated} .ab-tt h3{margin:0;font:2.05em/1.05 var(--fa);color:var(--acc);text-wrap:balance} .ab-book.ab-x-bestiario .ab-tt h3{font-size:1.15em;line-height:1.5} .ab-book.ab-x-notacion .ab-tt h3,.ab-book.ab-x-notacion .ab-tt-em{color:var(--pink)} .ab-tt-s{margin:0;font-size:.85em;opacity:.75} .ab-owner{display:flex;flex-direction:column;align-items:center;gap:.45em;padding:.8em 1.2em;border:1px dashed var(--sline);border-radius:8px;min-width:62%;box-sizing:border-box} .ab-owner span{font-size:.75em;opacity:.75} .ab-own-row{display:flex;align-items:center;gap:.6em} .ab-own-row .av-ab{width:2.8em;height:2.8em;border-radius:50%;flex:none} .ab-own-row b{min-width:6em;padding:0 .3em .1em;border-bottom:1.5px solid currentColor;font:1.25em/1.2 'Kalam','Patrick Hand',cursive} .ab-prog{display:flex;flex-direction:column;gap:.3em;width:78%} .ab-prog small{font-size:.74em;opacity:.8;font-variant-numeric:tabular-nums} .ab-how{margin:0;font-size:.76em;line-height:1.4;opacity:.8} .ab-pg-badge .ab-bdg{display:flex;align-items:center;gap:1em;margin-top:.6em} .ab-pg-badge .badge-ic{width:5em;height:5em} .ab-bdg div{display:flex;flex-direction:column;gap:.2em} .ab-bdg small{font-size:.75em;opacity:.8} .ab-bdg-acts{display:flex;flex-wrap:wrap;gap:.5em} .ab-bdg-acts .btn{font-size:13px;display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:var(--acc-ink);border:1px solid var(--acc);box-shadow:none;text-shadow:none} .ab-bdg-acts .btn+.btn{background:transparent;color:var(--pink);border-color:var(--sline)} .ab-bdg-acts .btn[disabled]{opacity:.42;cursor:not-allowed} .ab-bdg-acts .btn svg{width:17px;height:17px} .ab-pg-badge .hint{margin:0;font-size:.76em;color:inherit;opacity:.75} .ab-pg-back{align-items:center;justify-content:center;text-align:center;gap:.6em;background:linear-gradient(150deg,var(--c1),var(--c2))!important;color:var(--ink)!important} .ab-bk-em{width:5em;height:5em;opacity:.85} .ab-bk-em svg,.ab-bk-em img{width:100%;height:100%;image-rendering:pixelated} .ab-pg-back b{font:1.1em var(--fa)} .ab-pg-back small{font-size:.75em;opacity:.8;max-width:22em} .ab-bk-code{display:flex;gap:2px;height:2.2em;margin-top:1em;padding:.3em .5em;background:#fff;border-radius:2px} .ab-bk-code i{width:2px;background:#111;opacity:.2} .ab-bk-code i.on{width:4px;opacity:1} /* paginación */ .ab-nav{display:flex;align-items:center;gap:14px} .ab-turn{width:44px;height:44px;padding:0;font-size:26px;line-height:1} .ab-pgn{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:12em;font-size:14px;font-variant-numeric:tabular-nums} .ab-pgn small{font-size:11px;color:var(--muted)} @media (hover:none){.ab-pgn small{display:none}} /* bandeja */ .ab-tray{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg2)} .ab-tr-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ab-tr-h h4{margin:0;font-family:var(--f-title);font-size:16px} .ab-tr-h h4 small{font:700 12px var(--f-ui);color:var(--muted)} .ab-tr-o{color:var(--muted);font-size:12px} .ab-pall{width:100%;min-height:36px;order:3} .ab-narrow .ab-pall{width:auto;margin-left:auto;order:0} .ab-tr-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 6px;overflow-y:auto;padding:6px 10px 10px 2px;scrollbar-width:thin;justify-items:center} .ab-narrow .ab-tr-list{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden} .ab-tr-it{all:unset;position:relative;flex:none;width:48px;cursor:pointer;transition:transform .15s} .ab-tr-it:hover{transform:translateY(-4px) rotate(-3deg)} .ab-tr-it:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px} .ab-tr-it .gcard{width:48px} .gcard.mini.set-bestiario .gc-t{font-size:7px;line-height:1} .ab-tr-it small{position:absolute;right:-5px;bottom:-5px;min-width:18px;padding:0 4px;border-radius:99px;background:var(--accent);color:var(--pri-fg,#fff);font:700 10px/18px var(--f-ui);text-align:center} .ab-tray .hint{margin:0} /* vuelo y destellos */ .ab-fly{position:fixed;z-index:99999;pointer-events:none;transform-origin:0 0} .ab-fly .gcard{width:100%;height:100%;box-shadow:0 0 0 2px #fff,0 16px 30px rgba(0,0,0,.45)} .ab-burst{position:fixed;width:0;height:0;z-index:99999;pointer-events:none} .ab-burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:hsl(var(--h) 90% 62%);animation:abBurst .8s ease-out forwards} @keyframes abBurst{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.3) rotate(170deg);opacity:0}} /* repetidas */ .ab-stage.dupes{align-items:stretch} .ab-dupes{width:100%;display:flex;flex-direction:column;gap:14px} .ab-dupes header h3{margin:0;font-family:var(--f-title);font-size:22px} .ab-dupes header .hint{margin:4px 0 0} .ab-dg h4{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--f-title);font-size:17px;flex-wrap:wrap} .ab-dg h4 small{margin-left:auto;color:var(--muted);font:12px var(--f-ui)} .ab-dg-list{display:flex;flex-wrap:wrap;gap:14px} .ab-dg-it{all:unset;position:relative;width:100px;cursor:zoom-in} .ab-dg-it .gcard{width:100%} .ab-dg-it:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px} .ab-dg-n{position:absolute;top:-7px;right:-7px;z-index:5;padding:1px 7px;border-radius:99px;background:#1b1b1f;color:#fff;font:700 11px/1.6 var(--f-ui)} .ab-dg-n em{font-style:normal;color:#ffd84a} .ab-empty-msg{margin:0;padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--cell-line);border-radius:8px} /* capas */ .ab-ov{position:absolute;inset:-6px;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(10,8,22,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:max(6px,calc(var(--radius)*.6));overflow:auto} .ab-ov-in{position:relative;width:min(760px,100%);max-height:100%;box-sizing:border-box;overflow:auto;padding:24px;border-radius:max(8px,var(--radius));background:var(--win-bg);color:var(--win-fg);box-shadow:0 22px 50px rgba(0,0,0,.5)} .ab-ov.pack .ab-ov-in{background:transparent;box-shadow:none;color:#fff;overflow:visible} .ab-x{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);font-size:22px;line-height:1;cursor:pointer;z-index:3} .ab-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .ab-insp,.ab-gift{display:flex;gap:24px;align-items:center;flex-wrap:wrap} .ab-insp-card{width:min(230px,62vw);flex:none;margin:0 auto} .ab-insp-card.sm{width:min(150px,42vw)} .ab-insp-card .gcard{width:100%;touch-action:none} .ab-insp-card:not(.sm) .gc-t{font-size:20px} .ab-insp-card:not(.sm) .gc-s{font-size:13px} .ab-insp-card:not(.sm) .gc-n{font-size:12px;top:7px;left:9px} .ab-insp-card:not(.sm) .gc-seal{width:22px;height:22px;top:7px;right:7px} .ab-insp-card:not(.sm) .gc-seal::after{font-size:12px} .ab-insp-card:not(.sm) .gcard.set-bestiario .gc-t{font-size:26px} .ab-insp-t{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:8px} .ab-insp-t small{color:var(--muted);font-size:12px} .ab-insp-t h3{margin:0;font-family:var(--f-title);font-size:26px;line-height:1.1;text-wrap:balance} .ab-insp-t p{margin:0;line-height:1.45;max-width:60ch} .ab-insp-sub{color:var(--accent);font-weight:700} .ab-insp-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .ab-insp-acts .btn{display:inline-flex;align-items:center;gap:7px;min-height:40px} .ab-insp-acts .btn svg{width:18px;height:18px} .ab-share-slot{display:flex;flex-direction:column;gap:8px} .ab-share-slot .ok-msg,.ab-insp-t .ok-msg{margin:0;color:var(--accent);font-weight:700} /* sobre */ .ab-packv{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;min-height:380px;justify-content:center} .ab-pack{position:relative;width:196px;height:286px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));animation:abPackIn .7s cubic-bezier(.2,1.4,.4,1)} @keyframes abPackIn{from{transform:translateY(40px) rotate(-8deg) scale(.7);opacity:0}} .ab-pk-top,.ab-pk-body,.ab-pk-bot{position:absolute;left:0;right:0;background:linear-gradient(120deg,#b9bdc9,#f7f8fb 18%,#9097a6 36%,#eceef3 55%,#868c9b 74%,#dde0e8)} .ab-pk-top{top:0;height:34px;z-index:2;cursor:ew-resize;touch-action:none;display:grid;place-items:center;-webkit-mask:linear-gradient(#000 0 0) 0 6px/100% 100% no-repeat,conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/10px 6px repeat-x;mask:linear-gradient(#000 0 0) 0 6px/100% 100% no-repeat,conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/10px 6px repeat-x;transform:rotate(calc(var(--tear,0) * -6deg)) translateY(calc(var(--tear,0) * -6px));transform-origin:0 100%} .ab-pk-top::before{content:"";position:absolute;inset:6px 0 0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 5px)} .ab-pk-top span{position:relative;font:700 10px/1 var(--f-ui);letter-spacing:.12em;color:#3a3f4c} .ab-pk-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;border-bottom:2px dashed rgba(40,44,56,.5)} .ab-pk-body{top:33px;bottom:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;color:#20172e;background:linear-gradient(150deg,#3b2366,#c2368f 48%,#f2a03d)} .ab-pk-holo{position:absolute;inset:0;background:repeating-linear-gradient(115deg,hsl(330 100% 72%) 0%,hsl(45 100% 70%) 6%,hsl(140 90% 68%) 12%,hsl(195 100% 70%) 18%,hsl(265 100% 76%) 24%,hsl(330 100% 72%) 30%);background-size:250% 250%;mix-blend-mode:overlay;opacity:.55;animation:abFoil 4s linear infinite} @keyframes abFoil{to{background-position:-250% 0}} .ab-pk-brand{position:relative;font:700 11px/1 var(--f-ui);letter-spacing:.2em;color:#fff3c4} .ab-pk-t{position:relative;max-width:96%;font:400 36px/1 'Luckiest Guy','Bowlby One SC',var(--f-title);color:#fff;letter-spacing:.03em;text-shadow:0 3px 0 #6b1f4f,0 6px 12px rgba(0,0,0,.35);transform:rotate(-6deg)} .ab-pk-t.en{font-size:28px} .ab-pk-ems{position:relative;display:flex;gap:5px} .ab-pk-em{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(150deg,var(--c1),var(--c2));color:var(--ink);box-shadow:0 0 0 2px #fff3c4} .ab-pk-em svg,.ab-pk-em img{width:62%;height:62%;image-rendering:pixelated} .ab-pk-n{position:relative;font:700 10px/1 var(--f-ui);color:#fff3c4;letter-spacing:.06em} .ab-pk-bot{bottom:0;height:22px;-webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 6px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/10px 6px repeat-x;mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 6px) no-repeat,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/10px 6px repeat-x} .ab-pk-bot::before{content:"";position:absolute;inset:0 0 6px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 5px)} .ab-pack.torn .ab-pk-top{animation:abTear .55s ease-in forwards} @keyframes abTear{to{transform:translate(-40px,-90px) rotate(-38deg);opacity:0}} .ab-pack.torn{animation:abPackOut .6s .3s ease-in forwards} @keyframes abPackOut{to{transform:translateY(80px) scale(.85);opacity:0;height:0}} .ab-pk-hint{margin:0;color:#e9e3ff;text-align:center;max-width:34ch} .ab-ov.pack .ab-insp-acts{justify-content:center} .ab-reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:abFade .4s .5s backwards} @keyframes abFade{from{opacity:0}} .ab-reveal h3{margin:0;color:#fff;font:400 28px/1 'Luckiest Guy','Bowlby One SC',var(--f-title);letter-spacing:.04em;text-shadow:0 3px 0 rgba(0,0,0,.4)} .ab-rv-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;perspective:1100px} .ab-rv{all:unset;position:relative;width:118px;aspect-ratio:5/7;cursor:pointer;animation:abRise .65s calc(.55s + var(--i,0) * .09s) backwards cubic-bezier(.2,1.3,.4,1)} @keyframes abRise{from{transform:translateY(160px) rotate(calc(var(--i,0) * 6deg - 12deg)) scale(.6);opacity:0}} .ab-rv:focus-visible{outline:3px solid #ffd84a;outline-offset:4px;border-radius:10px} .ab-rv-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.4,.5,1)} .ab-rv.flip .ab-rv-in{transform:rotateY(180deg)} .ab-rv-back,.ab-rv-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden} .ab-rv-front{transform:rotateY(180deg)} .ab-rv .gcard{width:100%;height:100%} .ab-rv-tag{position:absolute;left:50%;bottom:-11px;z-index:6;transform:translateX(-50%) scale(0);padding:4px 10px;border-radius:99px;font:400 13px/1 'Luckiest Guy','Bowlby One SC',var(--f-ui);letter-spacing:.06em;white-space:nowrap;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .35s .4s cubic-bezier(.2,1.6,.4,1)} .ab-rv.flip .ab-rv-tag{transform:translateX(-50%) scale(1)} .ab-rv-tag.nu{background:#ffd84a;color:#3b2200} .ab-rv-tag.dup{background:#ece6f6;color:#3d2a6b} .gcard.ab-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(242,201,76,.16) 5px 6px),linear-gradient(150deg,#2c2452,#141026);border-color:#f2c94c;color:#f2c94c} .ab-back-em{display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:50%;background:rgba(242,201,76,.12);box-shadow:0 0 0 2px #f2c94c} .ab-back-em svg{width:64%;height:64%} .ab-back-t{font:700 9px/1 var(--f-ui);letter-spacing:.16em} .ab-gift.recv .ab-rv.flip-in{display:block;width:100%;animation:abFlipIn .8s cubic-bezier(.3,1.4,.5,1)} /* 1.10: el cromo recibido o encontrado llena su lugar (antes se quedaba en 118 px y el título lo tapaba) */ @keyframes abFlipIn{from{transform:rotateY(180deg) scale(.6);opacity:.2}} /* perfil › cromos */ .ab-prof{display:flex;flex-direction:column;gap:12px} .ab-pf-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .ab-pf-acts .btn{display:inline-flex;align-items:center;gap:7px;min-height:40px} .ab-pf-acts .btn svg{width:18px;height:18px} .ab-pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .ab-pf-al{all:unset;display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.5));background:var(--cell-bg2);cursor:pointer} .ab-pf-al:hover{background:var(--cell-bg)} .ab-pf-al:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .ab-pf-al .ab-cover{width:58px} .ab-pf-al .ab-cover .ab-cv-t{display:none} .ab-pf-t{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0} .ab-pf-t small{color:var(--muted);font-variant-numeric:tabular-nums} @media (max-width:720px){ .ab-ov-in{padding:18px} .ab-insp-t h3{font-size:22px} .ab-rv{width:92px} .ab-rv-row{gap:10px} .ab-packv{min-height:470px} } @media (prefers-reduced-motion:reduce){ .gcard{transition:none;transform:none!important;animation:none!important} .ab-slot.pend .ab-empty,.ab-packbtn svg,.ab-pk-holo{animation:none} .ab-pack,.ab-rv,.ab-reveal{animation:none} } /* 1.6: en el teléfono la repisa de álbumes llega de borde a borde y se desliza con el dedo (el siguiente álbum se asoma) */ @media (max-width:720px){ .ab-shelf{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain} .ab-shelf::-webkit-scrollbar{display:none} .ab-shelf>*{scroll-snap-align:start} } /* ================= 1.10 · Pinacópolis, Bibliópolis y Arcadópolis; fichas, máquina expendedora y polvo de cromo ================= */ /* la imagen de los cromos nuevos: una celda de la hoja de su álbum (museo/c/<álbum>.webp) */ .gcard.set-pinacopolis .gc-art,.gcard.set-bibliopolis .gc-art,.gcard.set-arcadopolis .gc-art{position:relative;background:#1c1626} .gc-img{position:absolute;inset:0;background-repeat:no-repeat} /* Pinacópolis: marfil de museo, cada pintura en su marco dorado */ .gcard.set-pinacopolis{background:linear-gradient(160deg,#fbf6ea,#eadfc6);border-color:#b8913f;color:#2e1a14} .gcard.set-pinacopolis .gc-art{border-radius:2px;box-shadow:0 0 0 2px #f6e6b4,0 0 0 4px #b8913f,0 0 0 5px #7a5a2a,0 3px 6px 4px rgba(60,30,10,.25);margin:4px 4px 2px} .gcard.set-pinacopolis .gc-t{font:italic 600 13px/1.1 'Cormorant Garamond',Georgia,serif} .gcard.set-pinacopolis .gc-s{font-size:9px} .gcard.mini.set-pinacopolis .gc-art{margin:1px;box-shadow:0 0 0 1px #b8913f} /* Bibliópolis: piel verde de biblioteca con filete dorado */ .gcard.set-bibliopolis{background:radial-gradient(ellipse at 30% 20%,#2f5a47,#163025 75%);border-color:#c9a14a;color:#f3e6c4} .gcard.set-bibliopolis::after{content:"";position:absolute;inset:3px;border:1px solid rgba(239,220,174,.45);border-radius:6px;pointer-events:none} .gcard.set-bibliopolis .gc-art{border-radius:50%;width:84%;flex:none;aspect-ratio:1;align-self:center;margin:2px auto;box-shadow:0 0 0 2px #c9a14a,0 4px 10px rgba(0,0,0,.4)} .gcard.set-bibliopolis .gc-t{font:400 12px/1.12 'IM Fell English SC',Georgia,serif;color:#f3d68b} .gcard.set-bibliopolis .gc-s{color:#d8ccaa} .gcard.mini.set-bibliopolis .gc-art{width:100%;flex:1;aspect-ratio:auto;border-radius:3px} /* Arcadópolis: noche espacial con borde de neón */ .gcard.set-arcadopolis{background:linear-gradient(165deg,#1d2766,#0b0f2e 70%);border-color:#59d8ff;color:#e9f3ff;box-shadow:0 0 0 1px rgba(143,233,255,.35),0 4px 14px rgba(0,0,0,.4)} .gcard.set-arcadopolis .gc-art{border-radius:6px;box-shadow:inset 0 0 0 1px rgba(143,233,255,.5)} .gcard.set-arcadopolis .gc-t{font:700 11px/1.15 Orbitron,'Righteous',system-ui,sans-serif;letter-spacing:.02em;color:#bff3ff} .gcard.set-arcadopolis .gc-s{color:#a9b9e8} .ab-insp-card:not(.sm) .gcard.set-pinacopolis .gc-t{font-size:22px} .ab-insp-card:not(.sm) .gcard.set-arcadopolis .gc-t{font-size:16px} .gcard.back.set-pinacopolis,.gcard.back.set-bibliopolis,.gcard.back.set-arcadopolis{color:var(--muted)} /* los álbumes */ .ab-x-pinacopolis{--c1:#3b0f1b;--c2:#7a2a3a;--ink:#f3d68b;--paper:#f7f0e2;--pink:#2e1a14;--acc:#6e2433;--acc-ink:#f3d68b;--slot:#ece2cf;--sline:#b8975e;--fa:'Cormorant Garamond',Georgia,serif;--fn:'Cormorant Garamond',Georgia,serif} .ab-x-bibliopolis{--c1:#10241a;--c2:#2f5a47;--ink:#efdcae;--paper:#f4ecd8;--pink:#22301f;--acc:#24493a;--acc-ink:#efdcae;--slot:#e9dec4;--sline:#a69168;--fa:'IM Fell English SC',Georgia,serif;--fn:'IM Fell English SC',Georgia,serif} .ab-x-arcadopolis{--c1:#070a24;--c2:#26348a;--ink:#8fe9ff;--paper:#11163a;--pink:#e6f1ff;--acc:#2b3a8f;--acc-ink:#bff3ff;--slot:#1a2152;--sline:#4b5bb8;--fa:Orbitron,'Righteous',system-ui,sans-serif;--fn:Orbitron,'Righteous',system-ui,sans-serif} .ab-cover.ab-x-pinacopolis::before{inset:8% 10% 8% 14%;border:3px double rgba(243,214,139,.7);border-radius:2px} .ab-cover.ab-x-bibliopolis::before{background:linear-gradient(rgba(239,220,174,.5),rgba(239,220,174,.5)) 0 9%/100% 1px no-repeat,linear-gradient(rgba(239,220,174,.5),rgba(239,220,174,.5)) 0 91%/100% 1px no-repeat,repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 3px,transparent 3px 6px)} .ab-cover.ab-x-arcadopolis::before{background:radial-gradient(circle,#fff 0 .7px,transparent 1.2px) 0 0/11px 13px,radial-gradient(circle,#8fe9ff 0 .7px,transparent 1.3px) 4px 7px/17px 19px;opacity:.8} .ab-book.ab-x-pinacopolis .ab-pg{background:radial-gradient(ellipse at 50% 35%,transparent 55%,rgba(110,36,51,.08)),repeating-linear-gradient(90deg,rgba(46,26,20,.025) 0 1px,transparent 1px 3px),var(--paper)} .ab-book.ab-x-pinacopolis .ab-ph::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:4px;background:linear-gradient(90deg,#7a5a2a,#f3d68b 30%,#b8913f 60%,#f6e6b4 80%,#7a5a2a)} .ab-book.ab-x-bibliopolis .ab-pg{background:repeating-linear-gradient(0deg,transparent 0 1.6em,rgba(36,73,58,.05) 1.6em calc(1.6em + 1px)),radial-gradient(ellipse at 50% 40%,transparent 60%,rgba(120,90,40,.1)),var(--paper)} .ab-book.ab-x-bibliopolis .ab-ph{box-shadow:inset 0 -3px 0 rgba(239,220,174,.35)} .ab-book.ab-x-arcadopolis .ab-pg{background:radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.6px) 0 0/41px 37px,radial-gradient(circle,rgba(143,233,255,.5) 0 1px,transparent 1.6px) 17px 21px/59px 43px,radial-gradient(ellipse at 70% 0%,rgba(110,90,255,.25),transparent 60%),var(--paper)} .ab-book.ab-x-arcadopolis .ab-ph{background:linear-gradient(90deg,#2b3a8f,#4b2a8f 55%,#1d5f8f);box-shadow:0 0 14px rgba(89,216,255,.35)} .ab-book.ab-x-arcadopolis .ab-ph h4{font-size:1.05em;letter-spacing:.03em} .ab-book.ab-x-arcadopolis .ab-pg .bar{background:rgba(255,255,255,.12)} .ab-book.ab-x-arcadopolis .ab-stk .gcard{box-shadow:0 0 0 2px #59d8ff,0 6px 12px rgba(0,0,0,.5)} .ab-book.ab-x-pinacopolis .ab-stk .gcard{box-shadow:0 0 0 2px #fff,0 6px 12px rgba(60,30,10,.35)} /* la cartera: fichas y polvo */ .ab-wallet{display:flex;gap:8px} .ab-wallet>span{flex:1 1 0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;align-items:center;padding:7px 10px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg2);min-width:0} .ab-wallet svg{grid-row:1/3;width:24px;height:24px} .ab-wallet b{font:700 18px/1 var(--f-ui);font-variant-numeric:tabular-nums} .ab-wallet small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ab-w-f svg{color:#d9a020} .ab-w-d svg{color:#9a6bff} .ab-narrow .ab-acts .ab-wallet{flex:1 1 100%} .ab-claim svg{animation:abWiggle 2.6s ease-in-out infinite} /* repetidas a polvo */ .ab-dustall{display:flex;flex-direction:column;gap:8px;margin-top:8px} .ab-dustall .btn{align-self:flex-start;display:inline-flex;align-items:center;gap:7px} .ab-dustall .btn svg{width:18px;height:18px} .ab-dustq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--accent);border-radius:8px} .ab-dustq p{flex:1 1 100%;margin:0} /* la capa sobre todo (máquinas de la Plaza y del Arcade, cromos encontrados) */ .ab-layer .ab-ov{position:fixed;inset:0;z-index:2147482000;border-radius:0;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));background:rgba(8,6,20,.72);backdrop-filter:none;-webkit-backdrop-filter:none} /* sin desenfoque: detrás sigue andando un mundo 3D y desenfocarlo en cada cuadro cuesta mucho */ .cr-found .ab-insp-t .ab-rv-tag{position:static;display:inline-block;vertical-align:.15em;margin-left:6px;transform:none} .cr-found h3{color:var(--accent)} /* la máquina expendedora */ .ab-vend{display:flex;gap:26px;align-items:center;flex-wrap:wrap} .ab-vm{position:relative;flex:none;width:220px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px;box-sizing:border-box;border-radius:16px 16px 8px 8px;background:linear-gradient(160deg,#5a1a4c,#2a0b26 70%);box-shadow:inset 0 0 0 2px rgba(255,140,210,.35),inset 0 -6px 0 rgba(0,0,0,.35),0 18px 30px rgba(0,0,0,.45);color:#ffe3f4} .ab-vm::before,.ab-vm::after{content:"";position:absolute;top:10px;bottom:12px;width:3px;border-radius:3px;background:#ff73c4;box-shadow:0 0 8px #ff3fa7} .ab-vm::before{left:3px}.ab-vm::after{right:3px} .ab-vm-head{display:flex;flex-direction:column;align-items:center;padding:5px 0 6px;border-radius:8px;background:#12051a;box-shadow:inset 0 0 0 1px rgba(255,140,210,.4)} .ab-vm-head span{font:700 9px/1 var(--f-ui);letter-spacing:.22em;color:#ffb9df} .ab-vm-head b{font:900 22px/1.05 'Arial Black',Impact,system-ui,sans-serif;letter-spacing:.06em;color:#ffe3f4;text-shadow:0 0 10px #ff3fa7,0 0 2px #fff} .ab-vm-body{display:grid;grid-template-columns:1fr 46px;gap:7px} .ab-vm-glass{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 6px;padding:10px 7px 12px;border-radius:6px;background:linear-gradient(180deg,#0d1730,#0a0f22);box-shadow:inset 0 0 0 2px #2a3150;overflow:hidden} .ab-vm-pk{position:relative;aspect-ratio:3/4;border-radius:3px;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:inset 0 3px 0 rgba(220,224,232,.85),inset 0 -3px 0 rgba(220,224,232,.85),0 3px 6px rgba(0,0,0,.4);display:grid;place-items:center;color:var(--ink)} .ab-vm-em{display:grid;place-items:center;width:58%;aspect-ratio:1} .ab-vm-em svg,.ab-vm-em img{width:100%;height:100%;image-rendering:pixelated} .ab-vm-coil{position:absolute;left:8%;right:8%;bottom:-8px;height:5px;background:repeating-linear-gradient(90deg,#c7cbd6 0 3px,transparent 3px 6px);border-radius:2px;opacity:.85} .ab-vm-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.18) 0 18%,transparent 30% 55%,rgba(255,255,255,.08) 62%,transparent 70%)} .ab-vm-side{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 4px;border-radius:6px;background:#26122a;box-shadow:inset 0 0 0 1px rgba(255,140,210,.25)} .ab-vm-led{display:flex;flex-direction:column;align-items:center;width:100%;padding:4px 0;border-radius:4px;background:#05140a;color:#5cff8a;text-shadow:0 0 6px rgba(92,255,138,.7)} .ab-vm-led small{font:700 7px/1 monospace;letter-spacing:.06em} .ab-vm-led b{font:700 16px/1.1 monospace;font-variant-numeric:tabular-nums} .ab-vm-slot{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#ffe58a,#d9a020 60%,#7a5410);position:relative;box-shadow:0 0 8px rgba(255,216,74,.5)} .ab-vm-slot::after{content:"";position:absolute;left:50%;top:15%;bottom:15%;width:3px;margin-left:-1.5px;border-radius:2px;background:#26122a} .ab-vm-keys{display:grid;grid-template-columns:repeat(2,13px);gap:4px} .ab-vm-keys i{width:13px;height:10px;border-radius:2px;background:#d9dce4;box-shadow:inset 0 -2px 0 #9aa0ad} .ab-vm-price{margin-top:auto;font:700 9px/1 monospace;color:#ffd84a} .ab-vm-tray{height:34px;border-radius:5px;background:#0e0a12;box-shadow:inset 0 3px 8px rgba(0,0,0,.8),inset 0 0 0 2px #3a1d36;display:grid;place-items:center} .ab-vm-flap{width:78%;height:8px;border-radius:3px;background:#2a2a33} .ab-vm-pk.drop{z-index:3;animation:abVmDrop .95s cubic-bezier(.5,0,.75,0) forwards} @keyframes abVmDrop{0%{transform:none}22%{transform:translateY(-3px) rotate(-5deg)}38%{transform:translateY(4px) rotate(3deg)}100%{transform:translateY(260px) rotate(24deg);opacity:.2}} .ab-vend .ab-insp-t .ab-wallet{max-width:320px} @media (max-width:520px){ .ab-vm{width:176px} .ab-vm-head b{font-size:18px} .ab-vend{gap:16px} } @media (prefers-reduced-motion:reduce){ .ab-vm-pk.drop,.ab-claim svg{animation:none} } /* cromos chiquitos (bandeja «Por pegar», avisos): la letra de cada álbum nuevo, a su tamaño */ .gcard.mini.set-pinacopolis .gc-t,.gcard.mini.set-bibliopolis .gc-t,.gcard.mini.set-arcadopolis .gc-t{font-size:6px;line-height:1.05} .gcard.mini.set-pinacopolis .gc-art{margin:0} .gcard.set-pinacopolis .gc-n{z-index:3;color:#7a5a2a;opacity:.85} .ab-slots.tiny .gcard.set-pinacopolis .gc-t,.ab-slots.tiny .gcard.set-bibliopolis .gc-t,.ab-slots.tiny .gcard.set-arcadopolis .gc-t{font-size:10px} @media (max-width:520px){ .ab-gift.recv .ab-insp-card{width:min(180px,46vw)} .ab-gift.recv{gap:14px} } /* 1.11 · cuándo llegan las siguientes fichas (a mediodía de la Ciudad de México, en tu hora) */ .ab-next{margin:0;padding:6px 10px;font-size:12px;line-height:1.35;color:var(--muted);text-align:center;border:1px dashed color-mix(in srgb,var(--win-border) 70%,transparent);border-radius:8px} .cr-count{margin:2px 0 0;font-size:13px;font-weight:700;color:var(--accent)} .cr-secret{margin:4px 0 0;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:700} /* ================= 1.11 · Juegos de Arcadópolis (tarjeta de salón de maquinitas) y los cien temas ================= */ .gcard.set-juegos .gc-art{position:relative;background:#1a0f1c;border-radius:5px;box-shadow:inset 0 0 0 2px #ffd166,0 0 0 2px #7a1f3d} .gcard.set-juegos{background:repeating-linear-gradient(135deg,#8c2347 0 9px,#7a1f3d 9px 18px);border-color:#ffd166;color:#fff5dc;box-shadow:0 0 0 1px rgba(255,209,102,.4),0 4px 14px rgba(0,0,0,.4)} .gcard.set-juegos .gc-t{font:400 12px/1.1 'Press Start 2P','VT323',monospace;font-size:9px;letter-spacing:.02em;color:#ffd166;text-shadow:1px 1px 0 #3a0d1c} .gcard.set-juegos .gc-s{color:#ffe7b3} .ab-insp-card:not(.sm) .gcard.set-juegos .gc-t{font-size:13px} .gcard.back.set-juegos{color:var(--muted)} .ab-x-juegos{--c1:#3a0d1c;--c2:#a12a52;--ink:#ffd166;--paper:#fff6e6;--pink:#3a0d1c;--acc:#7a1f3d;--acc-ink:#ffd166;--slot:#f6e3c8;--sline:#c99a5a;--fa:'Press Start 2P','VT323',monospace;--fn:'VT323',monospace} .ab-cover.ab-x-juegos::before{background:repeating-linear-gradient(135deg,rgba(255,209,102,.18) 0 6px,transparent 6px 14px);border:2px solid rgba(255,209,102,.6);inset:8% 10% 8% 14%;border-radius:4px} .ab-book.ab-x-juegos .ab-ph{background:linear-gradient(90deg,#7a1f3d,#a12a52);box-shadow:inset 0 -3px 0 #ffd166} .ab-book.ab-x-juegos .ab-ph h4{font-size:.8em;line-height:1.3} /* temas: la miniatura real del fondo detrás de la ventanita */ .gcard[data-os] .pv{background-image:var(--wall-thumb,none);background-size:cover;background-position:center} /* ================= Musical Trains ================= */ .mt{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:14px;align-items:start} .win.max .mt{height:100%;align-items:stretch} .mt-stage{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0} .mt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .mt-go{min-width:9.5em;justify-content:center} .mt-rs{padding-left:10px;padding-right:10px} .mt-rs svg{width:16px;height:16px;vertical-align:-3px} .mt-tempo output{min-width:5.2em;text-align:left} .mt-meters button{padding:4px 9px;font-variant-numeric:tabular-nums} .mt-cvwrap{position:relative;flex:1 1 auto;min-height:0;background:#0b1224;border-radius:max(4px,calc(var(--radius)*.6));overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .mt-cv{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none;cursor:default} .mt-cv:focus-visible{box-shadow:0 0 0 3px var(--accent)} .mt-status{margin:0;min-height:1.45em;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums} .mt-visit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:10px 12px;border:1px solid var(--accent);border-radius:max(0px,calc(var(--radius)*.5));background:var(--cell-bg2)} .mt-visit p{display:flex;align-items:center;gap:10px;margin:0;font-weight:700} .mt-side{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:0} .win.max .mt-side{overflow:auto;padding-right:4px} .mt-sec{display:flex;flex-direction:column;gap:8px} .mt-sec h4{margin:0;font-family:var(--f-title);font-size:15px;line-height:1.2} /* 1.7: la tónica mide lo que su opción más larga y la escala se queda con el resto (antes se cortaba «Mayor (diatóni…») */ .mt-keyrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px} .mt-modef{grid-column:1/-1} .mt-mdesc{margin:0} .mt-pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .mt-pal button{display:flex;align-items:center;gap:7px;min-height:36px;padding:5px 8px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.45));font:inherit;font-weight:700;cursor:pointer;min-width:0} .mt-pal button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mt-pal button i{flex:none;width:15px;height:15px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.25)} .mt-pal .mt-er i{display:grid;place-items:center;background:none;box-shadow:none;font-style:normal;color:#e5484d;font-size:14px} /* 1.7: la tecla va de insignia en la esquina, para que el nombre quepa completo (antes «Bor…») */ .mt-pal button{position:relative;padding-right:15px} .mt-pal button kbd{position:absolute;top:3px;right:4px;margin:0;font:600 10px/1 var(--f-mono);opacity:.6} @media (hover:none) and (pointer:coarse){ .mt-pal button{padding-right:8px} .mt-pal button kbd{display:none} } .mt-pal button[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);background:var(--cell-bg)} .mt-trains{list-style:none;margin:0;padding:0;display:grid;gap:8px} .mt-tr{display:grid;gap:7px;padding:8px 10px;border:1px solid var(--cell-line);border-left:6px solid var(--tc);border-radius:max(0px,calc(var(--radius)*.45));background:var(--cell-bg2)} .mt-tr.off{opacity:.65} .mt-tr-h{display:flex;align-items:center;gap:8px} .mt-tr-h b{flex:1;min-width:0} .mt-tr-dot{width:12px;height:12px;border-radius:3px;background:var(--tc);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)} .mt-tr-c{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px} .mt-sel select{min-height:32px;max-width:100%;padding:3px 8px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));font:inherit;font-size:14px} .mt-oct{display:inline-flex;align-items:center;border:1px solid var(--btn-border);border-radius:max(0px,calc(var(--radius)*.45));overflow:hidden} .mt-oct button{width:28px;min-height:30px;border:0;background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:16px;cursor:pointer} .mt-oct button:disabled{opacity:.4;cursor:default} .mt-oct span{padding:0 8px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap} .mt-spd button{padding:4px 9px} .mt-songs{display:flex;flex-wrap:wrap;gap:6px} .mt-imp summary{cursor:pointer;font-weight:700;font-size:14px} .mt-imp[open] summary{margin-bottom:8px} @media (max-width:720px){ .mt{grid-template-columns:minmax(0,1fr)} .mt-go{min-width:0;flex:1} .mt-tempo{flex:1 1 100%} .mt-meters{flex:1 1 100%;overflow-x:auto} .mt-meters button{flex:1;padding:6px 4px} } /* ---------- Filtro CRT ---------- */ /* #crt usa display:contents para que cada capa sea hija directa del contexto raíz y su modo de mezcla (multiply, screen, overlay…) actúe sobre todo lo que está debajo. */ #crt,#crt-fx-layer{display:contents} .crt-l{position:fixed;inset:0;z-index:9000;display:block;pointer-events:none} .crt-l[hidden],.crt-pow[hidden],.crt-deg[hidden],.crt-deg2[hidden]{display:none} html.crt-on{background:#000} .crt-mask{mix-blend-mode:multiply;image-rendering:pixelated;background-repeat:repeat;background-position:0 0} .crt-glow{-webkit-backdrop-filter:blur(var(--crt-gr,6px)) brightness(1.15) saturate(1.25);backdrop-filter:blur(var(--crt-gr,6px)) brightness(1.15) saturate(1.25);mix-blend-mode:screen;opacity:var(--crt-ga,.25)} .crt-noise{inset:-160px;mix-blend-mode:overlay;opacity:var(--crt-na,.05);animation:crtNoise .5s steps(1) infinite} @keyframes crtNoise{0%{transform:translate(0,0)}12%{transform:translate(-37px,61px)}25%{transform:translate(83px,-24px)}37%{transform:translate(-112px,-90px)}50%{transform:translate(45px,128px)}62%{transform:translate(-70px,17px)}75%{transform:translate(121px,93px)}87%{transform:translate(-14px,-131px)}} .crt-roll{inset:auto 0;top:-42vh;height:42vh;background:linear-gradient(transparent,rgba(255,255,255,.45) 40%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.45) 60%,transparent);mix-blend-mode:soft-light;opacity:var(--crt-ra,.2);animation:crtRoll 7.5s linear infinite} @keyframes crtRoll{to{transform:translateY(145vh)}} .crt-flick{opacity:var(--crt-fa,.01)} .crt-flick::before{content:"";position:absolute;inset:0;background:#000;animation:crtFlick 1.7s steps(1) infinite} @keyframes crtFlick{0%{opacity:.3}8%{opacity:1}11%{opacity:0}23%{opacity:.6}31%{opacity:.1}44%{opacity:.9}47%{opacity:.2}61%{opacity:.7}69%{opacity:0}82%{opacity:.5}91%{opacity:.15}} .crt-vig{background:radial-gradient(ellipse 74% 72% at 50% 50%,transparent var(--crt-vr,62%),rgba(0,0,0,.92) 100%);opacity:var(--crt-va,.3)} .crt-glass{background:radial-gradient(ellipse 55% 38% at 27% 13%,rgba(255,255,255,.085),transparent 70%),radial-gradient(ellipse 28% 20% at 84% 92%,rgba(255,255,255,.035),transparent 70%),linear-gradient(162deg,rgba(255,255,255,.045),transparent 36%);mix-blend-mode:screen;opacity:var(--crt-gl,.6)} .crt-bezel{border-radius:var(--crt-r,20px);box-shadow:0 0 0 120vmax #050505,inset 0 0 calc(var(--crt-r,20px)*1.15) calc(var(--crt-r,20px)*.2) rgba(0,0,0,var(--crt-ea,.4))} #crt.still .crt-noise,#crt.still .crt-roll,#crt.still .crt-flick::before{animation:none} #crt.still .crt-flick,#crt.still .crt-roll{display:none} /* encendido y apagado del tubo */ .crt-pow{position:fixed;inset:0;z-index:9001;display:block;pointer-events:none;overflow:hidden} .crt-pow b,.crt-pow u{position:absolute;left:0;right:0;height:50.5%;background:#000} .crt-pow b{top:0} .crt-pow u{bottom:0} .crt-pow s{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:#fff;border-radius:2px;box-shadow:0 0 12px 4px rgba(210,235,255,.9),0 0 46px 12px rgba(150,200,255,.55);transform:scaleX(0)} .crt-pow.on b{animation:crtOnTop .7s cubic-bezier(.2,.7,.2,1) forwards} .crt-pow.on u{animation:crtOnBot .7s cubic-bezier(.2,.7,.2,1) forwards} .crt-pow.on s{animation:crtOnLine .7s ease-out forwards} @keyframes crtOnTop{0%,24%{transform:none}100%{transform:translateY(-101%)}} @keyframes crtOnBot{0%,24%{transform:none}100%{transform:translateY(101%)}} @keyframes crtOnLine{0%{transform:scaleX(0);opacity:1}22%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1) scaleY(40);opacity:0}} .crt-pow.off b{animation:crtOffTop .76s cubic-bezier(.6,0,.9,.4) forwards} .crt-pow.off u{animation:crtOffBot .76s cubic-bezier(.6,0,.9,.4) forwards} .crt-pow.off s{animation:crtOffLine .76s linear forwards} @keyframes crtOffTop{0%{transform:translateY(-101%)}30%,100%{transform:none}} @keyframes crtOffBot{0%{transform:translateY(101%)}30%,100%{transform:none}} @keyframes crtOffLine{0%,22%{transform:scaleX(1) scaleY(6);opacity:0}30%{transform:scaleX(1);opacity:1}58%{transform:scaleX(.006) scaleY(1.6);opacity:1}100%{transform:scaleX(.001) scaleY(.4);opacity:0}} /* desmagnetizar */ .crt-deg{position:fixed;inset:-25%;z-index:9001;display:block;pointer-events:none;border-radius:50%;background:conic-gradient(from 30deg,#ff2a2a,#ffd52a,#2aff6a,#2ad5ff,#5a2aff,#ff2ad5,#ff2a2a);mix-blend-mode:color;opacity:0;filter:blur(36px)} .crt-deg.go{animation:crtDeg 1.6s ease-out forwards} @keyframes crtDeg{0%{opacity:.8;transform:rotate(0) scale(.55)}35%{opacity:.5}100%{opacity:0;transform:rotate(320deg) scale(1.35)}} body.crt-wob{animation:crtWob 1.25s cubic-bezier(.2,.6,.3,1)} @keyframes crtWob{0%{transform:none}8%{transform:skewX(2.4deg) scale(1.012)}18%{transform:skewX(-2deg) translateX(6px)}30%{transform:skewX(1.4deg) translateX(-4px)}44%{transform:skewX(-.9deg) translateX(3px)}60%{transform:skewX(.5deg)}78%{transform:skewX(-.2deg)}100%{transform:none}} /* ---------- Botones de la bandeja ---------- */ .tray-b{display:grid;place-items:center;width:36px;height:32px;padding:0;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.45));cursor:pointer} .tray-b svg{width:18px;height:18px} .tray-b[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} /* ---------- Ventana Pantalla ---------- */ .crt-ui{display:grid;gap:14px} .crt-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} .crt-power{display:flex;align-items:center;gap:12px;padding:7px 18px 7px 7px;border:1px solid var(--btn-border);background:var(--cell-bg2);color:var(--win-fg);border-radius:999px;cursor:pointer;text-align:left;font:inherit} .crt-knob{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6a6f77,#1d1f23 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 6px rgba(0,0,0,.45)} .crt-knob::before{content:"";position:absolute;inset:11px;border-radius:50%;border:2.5px solid #b9bec5;border-top-color:transparent} .crt-knob::after{content:"";position:absolute;left:50%;top:9px;width:2.5px;height:12px;margin-left:-1.25px;border-radius:2px;background:#b9bec5} .crt-power[aria-checked="true"] .crt-knob{background:radial-gradient(circle at 35% 30%,#59ff8f,#0f8a3b 70%);box-shadow:0 0 16px 3px rgba(80,255,140,.55),inset 0 1px 0 rgba(255,255,255,.45)} .crt-power[aria-checked="true"] .crt-knob::before{border-color:#eafff0;border-top-color:transparent} .crt-power[aria-checked="true"] .crt-knob::after{background:#eafff0} .crt-pw-t b{display:block;font-family:var(--f-title);font-size:18px;line-height:1.2} .crt-pw-t small{color:var(--muted);font-size:13px} .crt-acts{display:flex;flex-wrap:wrap;gap:8px} .crt-lead{margin:0;max-width:66ch} .crt-ch{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px} .crt-chb{position:relative;display:flex;flex-direction:column;gap:6px;padding:6px 6px 8px;border:1px solid var(--cell-line);background:var(--cell-bg);color:var(--win-fg);border-radius:max(4px,calc(var(--radius)*.5));cursor:pointer;text-align:left;font:inherit;min-width:0} .crt-chb img{width:100%;aspect-ratio:8/5;display:block;border-radius:3px;background:#000} .crt-chb b{font-size:13px;line-height:1.2} .crt-chn{position:absolute;top:10px;left:10px;min-width:18px;padding:2px 4px 1px;border-radius:3px;background:rgba(0,0,0,.7);color:#7dffa0;font:17px/1 'VT323','Share Tech Mono',monospace;text-align:center} .crt-chb[aria-checked="true"]{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent} .crt-cust{cursor:default;justify-content:flex-end;min-height:74px;background:repeating-linear-gradient(135deg,var(--cell-bg) 0 8px,var(--cell-bg2) 8px 16px);outline:3px solid var(--focus);outline-offset:1px;border-color:transparent} .crt-main{display:grid;grid-template-columns:minmax(190px,236px) minmax(0,1fr);gap:18px;align-items:start} .crt-loupe{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;position:sticky;top:0} .crt-lens{position:relative;width:100%;max-width:228px;aspect-ratio:1;border-radius:50%;padding:11px;box-sizing:border-box;background:linear-gradient(145deg,#f4f6f8,#a3aab2 38%,#575e66 62%,#dde1e5);box-shadow:0 12px 26px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.3)} .crt-lens canvas{width:100%;height:100%;display:block;border-radius:50%;background:#000} .crt-lens::after{content:"";position:absolute;inset:11px;border-radius:50%;background:radial-gradient(circle at 31% 25%,rgba(255,255,255,.38),transparent 28%),radial-gradient(circle,transparent 60%,rgba(0,0,0,.5) 100%);pointer-events:none} .crt-loupe figcaption{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted);text-align:center;max-width:30ch} .crt-loupe figcaption b{color:var(--win-fg);font-family:var(--f-title);font-size:15px} .crt-sets{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;align-items:start;min-width:0} .crt-sets>.row{grid-column:1/-1} .crt-g{margin:0;padding:8px 12px 12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.5));display:flex;flex-direction:column;gap:10px;min-width:0} .crt-g legend{padding:0 6px;font-family:var(--f-title);font-weight:700} .crt-sl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px} .crt-sl-t{font-size:13px;font-weight:700} .crt-sl output{grid-column:2;grid-row:1;font:18px/1 'VT323','Share Tech Mono',var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap} .crt-sl input{grid-column:1/-1;grid-row:2} .crt-sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:0;background:transparent;cursor:pointer} .crt-sl input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .crt-sl input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:3px;border:1px solid var(--cell-line);background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.3) 6px 8px),linear-gradient(90deg,var(--accent) var(--p,50%),var(--cell-bg2) var(--p,50%))} .crt-sl input[type=range]::-moz-range-track{height:12px;border-radius:3px;border:1px solid var(--cell-line);background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.3) 6px 8px),linear-gradient(90deg,var(--accent) var(--p,50%),var(--cell-bg2) var(--p,50%))} .crt-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:22px;margin-top:-6px;border-radius:2px;background:var(--win-fg);border:2px solid var(--win-bg);box-sizing:border-box} .crt-sl input[type=range]::-moz-range-thumb{width:9px;height:22px;border-radius:2px;background:var(--win-fg);border:2px solid var(--win-bg);box-sizing:border-box} .crt-seg-f{display:flex;flex-direction:column;gap:6px;min-width:0} .crt-seg{flex-wrap:wrap;align-self:flex-start;max-width:100%} .crt-seg button{padding:4px 8px;font-size:13px} .crt-seg button:disabled{opacity:.45;cursor:default} .crt-tog{font-size:14px;font-weight:700} @container (max-width:640px){ .crt-main{grid-template-columns:minmax(0,1fr)} .crt-loupe{position:static} .crt-lens{max-width:190px} } @media (max-width:720px){ .tray :is(#crt-tray,#fs-tray){display:none} } .mi .mi-on{margin-left:auto;padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-size:11px;font-weight:700} .mi .mi-k{margin-left:auto;font:11px/1 var(--f-mono);opacity:.65;white-space:nowrap} /* 1.6: segunda capa que ilumina el arcoíris para que se vea también sobre fondos negros; versión suave con movimiento reducido */ .crt-deg2{position:fixed;inset:-25%;z-index:9001;display:block;pointer-events:none;border-radius:50%;background:conic-gradient(from 30deg,#ff2a2a,#ffd52a,#2aff6a,#2ad5ff,#5a2aff,#ff2ad5,#ff2a2a);mix-blend-mode:screen;opacity:0;filter:blur(48px)} .crt-deg2.go{animation:crtDeg2 1.6s ease-out forwards} @keyframes crtDeg2{0%{opacity:.32;transform:rotate(0) scale(.55)}40%{opacity:.18}100%{opacity:0;transform:rotate(320deg) scale(1.35)}} .crt-deg.go-rm,.crt-deg2.go-rm{animation:crtDegRM 1.2s ease-out forwards} @keyframes crtDegRM{0%{opacity:.35}100%{opacity:0}} .crt-autofs{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px;cursor:pointer}.crt-autofs input{margin-top:3px;width:18px;height:18px;flex:none}.crt-autofs span{display:flex;flex-direction:column;gap:2px}.crt-autofs small{opacity:.75} /* ---------- 1.20.1 · 3D para lentes rojo y azul ---------- */ /* el fondo detrás del vidrio; la barra, el menú y los íconos delante; la escena de los mundos 3D (menos la Plaza, que se dibuja con dos cámaras) detrás de la ventana */ html.ana-on #wall{filter:url(#ana-far)} html.ana-on #icons,html.ana-on #bar,html.ana-on #menu{filter:url(#ana-near)} html.ana-on .win:is([data-id="museo"],[data-id="biblio"],[data-id="arcade"],[data-id="luna"],[data-id="mar"],[data-id="marte"],[data-id="andromeda"],[data-id="campos"],[data-id="noche"],[data-id="terraza"],[data-id="rodano"],[data-id="trigal"]) canvas{filter:url(#ana-far)} .ana-sec{display:grid;gap:12px;padding:12px 14px 14px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:linear-gradient(100deg,rgba(255,59,74,.08),transparent 38%,transparent 62%,rgba(41,216,255,.08))} .ana-power{justify-self:start} .ana-power[aria-checked="true"] .ana-knob{background:radial-gradient(circle at 35% 30%,#ff6b77,#b3122a 48%,#29d8ff 52%,#0a7fa0 90%);box-shadow:-5px 0 14px rgba(255,60,80,.55),5px 0 14px rgba(40,210,255,.55),inset 0 1px 0 rgba(255,255,255,.45)} .ana-body{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start} .ana-test{margin:0;display:flex;flex-direction:column;gap:6px;flex:0 1 320px;min-width:0} .ana-test canvas{width:100%;max-width:320px;aspect-ratio:320/150;height:auto;border-radius:10px;border:1px solid var(--cell-line);background:#120b34} .ana-test figcaption{font-size:12.5px;opacity:.8;max-width:320px} .ana-sets{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px} /* ---------- Avatares vivos (2D): parpadeo, mirada, respiración ---------- */ .avh,.avb,.avk,.avp,.avm,.avbr{transform-box:view-box} .avh,.avb{transform-origin:100px 150px} .ave-l,.ave-r{transform-box:fill-box;transform-origin:50% 55%} .av-live .ave-open .ave-l,.av-live .ave-open .ave-r{animation:avBlink 5.4s infinite} .av-live .ave-open .ave-r{animation-delay:.04s} .av-live .ave-open .avp{animation:avGaze 11s ease-in-out infinite} .av-live .avb{transform-origin:100px 200px;animation:avBreath 4.2s ease-in-out infinite} .av-live .avh{animation:avIdle 6.5s ease-in-out infinite} @keyframes avBlink{0%,92%,97%,100%{transform:none}94.5%{transform:scaleY(.08)}} @keyframes avGaze{0%,18%{transform:none}24%,40%{transform:translate(2.2px,.4px)}46%,60%{transform:translate(-2px,.6px)}66%,82%{transform:translate(.6px,-1.2px)}88%,100%{transform:none}} @keyframes avBreath{0%,100%{transform:none}50%{transform:scaleY(1.012)}} @keyframes avIdle{0%,100%{transform:none}30%{transform:rotate(1.4deg)}65%{transform:rotate(-1deg) translateY(.6px)}} /* ---------- Gestos (2D) ---------- */ .avfx *{transform-box:fill-box;transform-origin:50% 50%} .g-hola .avk-wave{transform-origin:178px 220px;animation:avWave .55s ease-in-out infinite alternate} @keyframes avWave{from{transform:rotate(-10deg)}to{transform:rotate(9deg)}} .g-hola .avh{animation:avTiltR 2.4s ease-in-out infinite} @keyframes avTiltR{0%,100%{transform:rotate(0)}20%,80%{transform:rotate(-4deg)}} .g-risa .avh{animation:avLaugh .3s ease-in-out infinite alternate} @keyframes avLaugh{from{transform:translateY(1px) rotate(-2.5deg)}to{transform:translateY(-3px) rotate(2.5deg)}} .g-risa .avb{animation:avLaughB .3s ease-in-out infinite alternate} @keyframes avLaughB{from{transform:translateY(1px)}to{transform:translateY(-1.5px)}} .g-risa .avtj-l{animation:avTjL 1.1s ease-in infinite} .g-risa .avtj-r{animation:avTjR 1.1s ease-in infinite .55s} @keyframes avTjL{0%{transform:translate(4px,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(-22px,30px) scale(1);opacity:0}} @keyframes avTjR{0%{transform:translate(-4px,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(22px,30px) scale(1);opacity:0}} .g-guino .avh{animation:avTiltL 2.4s ease-in-out infinite} @keyframes avTiltL{0%,100%{transform:rotate(0)}18%,82%{transform:rotate(5deg)}} .g-guino .avsp{animation:avSpark 2.4s ease-in-out infinite} @keyframes avSpark{0%,20%{transform:scale(0) rotate(0);opacity:0}30%{transform:scale(1.3) rotate(45deg);opacity:1}60%{transform:scale(1) rotate(90deg);opacity:1}80%,100%{transform:scale(0) rotate(140deg);opacity:0}} .g-sorpresa .avh{animation:avJolt 2.4s cubic-bezier(.3,1.6,.5,1) infinite} @keyframes avJolt{0%{transform:none}8%{transform:translateY(-8px) scale(1.05)}20%,100%{transform:translateY(-2px) scale(1.02)}} .g-sorpresa .avex{transform-origin:50% 100%;animation:avPop 2.4s ease-out infinite} @keyframes avPop{0%,4%{transform:scale(0);opacity:0}12%{transform:scale(1.25);opacity:1}20%,85%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}} .g-festejo .avh,.g-festejo .avb{animation:avHop .5s ease-in-out infinite alternate} @keyframes avHop{from{transform:translateY(2px)}to{transform:translateY(-6px)}} .g-festejo .avk-l,.g-festejo .avk-r{animation:avPump .5s ease-in-out infinite alternate} @keyframes avPump{from{transform:translateY(8px)}to{transform:translateY(-6px)}} .g-festejo .avc{animation:avConf 1.8s linear infinite;animation-delay:var(--d)} @keyframes avConf{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--x),222px) rotate(540deg)}} .g-aplauso .avk-l{animation:avClapL .34s ease-in infinite alternate} .g-aplauso .avk-r{animation:avClapR .34s ease-in infinite alternate} @keyframes avClapL{from{transform:translateX(-7px)}to{transform:translateX(5px)}} @keyframes avClapR{from{transform:translateX(7px)}to{transform:translateX(-5px)}} .g-aplauso .avcl{transform-origin:50% 100%;animation:avClapFx .68s ease-out infinite} @keyframes avClapFx{0%,40%{transform:scale(.4);opacity:0}50%{transform:scale(1.1);opacity:1}80%,100%{transform:scale(1.3);opacity:0}} .g-pensar .avh{animation:avPonder 2.4s ease-in-out infinite} @keyframes avPonder{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-6deg) translateY(1px)}} .g-pensar .avk-chin{animation:avTap 1.2s ease-in-out infinite} @keyframes avTap{0%,60%,100%{transform:none}70%{transform:translateY(-2px)}80%{transform:none}90%{transform:translateY(-2px)}} .g-pensar .avth .t1{animation:avTh1 2.4s infinite} .g-pensar .avth .t2{animation:avTh2 2.4s infinite} .g-pensar .avth .t3{transform-origin:20% 90%;animation:avTh3 2.4s infinite} @keyframes avTh1{0%,10%{opacity:0}18%,100%{opacity:1}} @keyframes avTh2{0%,25%{opacity:0}33%,100%{opacity:1}} @keyframes avTh3{0%,40%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.08)}58%,100%{opacity:1;transform:scale(1)}} .g-triste .avh{animation:avSad 2.4s ease-in-out infinite} @keyframes avSad{0%,100%{transform:translateY(3px) rotate(3deg)}50%{transform:translateY(4px) rotate(4deg)}} .g-triste .avtear{animation:avTear 2.4s ease-in infinite} @keyframes avTear{0%,15%{transform:translateY(-4px) scale(.3);opacity:0}25%{transform:translateY(0) scale(1);opacity:1}85%{transform:translateY(30px);opacity:1}100%{transform:translateY(36px);opacity:0}} .g-enojo .avh{animation:avShake 2.4s linear infinite} @keyframes avShake{0%,100%{transform:none}5%,15%,25%,35%{transform:translateX(-2.5px)}10%,20%,30%,40%{transform:translateX(2.5px)}45%{transform:none}} .g-enojo .avred{animation:avRed 2.4s ease-in-out infinite} @keyframes avRed{0%,100%{opacity:.08}30%{opacity:.26}} .g-enojo .avang{animation:avPulse .6s ease-in-out infinite alternate} @keyframes avPulse{from{transform:scale(.85)}to{transform:scale(1.15)}} .g-enojo .avsteam circle{animation:avSteam 1.2s ease-out infinite} .g-enojo .avsteam circle:nth-child(2n){animation-delay:.6s} @keyframes avSteam{0%{transform:translateY(6px) scale(.4);opacity:0}30%{opacity:.9}100%{transform:translateY(-14px) scale(1.3);opacity:0}} .g-amor .avh{animation:avSway 2.4s ease-in-out infinite} @keyframes avSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} .g-amor .ave-l,.g-amor .ave-r{animation:avBeat .6s ease-in-out infinite} @keyframes avBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}} .g-amor .avhe>g{animation:avFloat 2.4s ease-out infinite} .g-amor .avhe .h2{animation-delay:.8s} .g-amor .avhe .h3{animation-delay:1.6s} @keyframes avFloat{0%{transform:translateY(10px) scale(.3);opacity:0}20%{opacity:1}100%{transform:translateY(-40px) scale(1.1);opacity:0}} .g-dormir .avh{animation:avDroop 3s ease-in-out infinite} @keyframes avDroop{0%,100%{transform:rotate(4deg) translateY(1px)}50%{transform:rotate(9deg) translateY(4px)}} .g-dormir .avz text{animation:avZ 3s ease-out infinite} .g-dormir .avz .z2{animation-delay:1s} .g-dormir .avz .z3{animation-delay:2s} @keyframes avZ{0%{transform:translate(-6px,10px) scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(8px,-14px) scale(1.1);opacity:0}} .g-dormir .avm{transform-box:fill-box;transform-origin:center;animation:avSnore 3s ease-in-out infinite} @keyframes avSnore{0%,100%{transform:scale(.8)}50%{transform:scale(1.25)}} .g-si .avh{animation:avNod .42s ease-in-out infinite alternate} @keyframes avNod{from{transform:translateY(-2px)}to{transform:translateY(4px) rotate(.5deg)}} .g-si .avk-thumb{animation:avThumb 1.2s ease-in-out infinite} @keyframes avThumb{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px) rotate(-4deg)}} .av-still,.av-still *{animation:none!important} /* ---------- Escenario de una reacción ---------- */ .rx-stage{position:relative;overflow:hidden;container-type:inline-size;background:var(--pv-bg)} .rx-stage .rx-av{position:absolute;left:50%;bottom:2%;width:76%;transform:translateX(-50%)} .rx-stage .av-rx{display:block;width:100%;height:auto} .rx-stage canvas.av3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab} .rx-bub{position:absolute;z-index:2;left:50%;top:5%;max-width:86%;margin:0;padding:.42em .9em .48em;border-radius:1.1em;background:#fff;color:#1d1d26;font:700 clamp(14px,6.2cqi,26px)/1.12 var(--f-title);text-align:center;text-wrap:balance;box-shadow:0 6px 18px rgba(0,0,0,.28);translate:-50% 0;transform-origin:50% 130%;animation:rxBub .55s cubic-bezier(.3,1.5,.5,1) both} .rx-bub::after{content:"";position:absolute;left:50%;bottom:-.5em;width:1em;height:.6em;margin-left:-.5em;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)} @keyframes rxBub{from{scale:.4;opacity:0}to{scale:1;opacity:1}} .rxp h4{margin:12px 0 6px;font-size:14px;color:var(--muted)} .rxp h4:first-child{margin-top:0} .rxp-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px} .rxp-gb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 4px 7px;border:1px solid var(--cell-line);background:var(--cell-bg);color:inherit;border-radius:max(4px,calc(var(--radius)*.5));cursor:pointer;font:inherit;font-size:12px;font-weight:700;line-height:1.15;text-align:center;min-width:0} .rxp-gb .av-th{width:58px;height:58px;display:block;border-radius:50%} .rxp-gb[aria-checked="true"]{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent} .rxp-p{display:flex;flex-wrap:wrap;gap:6px} .rxp-pb{min-height:32px;padding:0 12px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:999px;cursor:pointer;font:inherit;font-size:14px;font-weight:700} .rxp-pb[aria-checked="true"]{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .ave-view{align-self:flex-start} .ave-rx{display:flex;flex-direction:column;gap:10px} .ave-rx-lead{margin:0;max-width:60ch} .ave-rx-nick{display:grid;gap:4px;max-width:360px} .rxv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:center} .rxv-stage{aspect-ratio:1;border-radius:max(6px,var(--radius));border:1px solid var(--cell-line)} .rxv-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0} .rxv-from{margin:0;display:flex;flex-direction:column;gap:4px} .rxv-from b{font-family:var(--f-title);font-size:20px;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere} .rxv-from span{color:var(--muted)} @container (max-width:460px){ .rxv{grid-template-columns:minmax(0,1fr)} } .nt-av{display:block;width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden} .nt-av svg{width:100%;height:100%;display:block} /* ---------- 1.2: centro de avisos (campana de la barra, panel y ventanitas) ---------- */ .nt-tray{position:relative;overflow:visible} .nt-tray svg{width:19px;height:19px} .nt-tray[aria-expanded="true"]{background:var(--menu-hi)} .nt-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--danger);color:#fff;font:700 11px/18px var(--f-ui);text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bar-bg,var(--bg));pointer-events:none} .nt-tray.dnd .nt-badge{background:var(--muted)} .nt-ring svg{animation:ntRing .5s ease-in-out 2;transform-origin:50% 12%} @keyframes ntRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}} /* panel: hereda el aspecto del menú de inicio de cada tema (.menu), con su propia geometría */ #nt-panel.ntc{left:auto;right:8px;top:auto;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 6px);width:392px;max-width:calc(100vw - 16px);height:auto;max-height:min(680px,calc(100% - var(--bar-h) - 24px));padding:0;gap:0;overflow:hidden;z-index:61; display:flex;flex-direction:column;opacity:0;transform:translateX(24px);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1)} #nt-panel.ntc.open{opacity:1;transform:none} #nt-panel.ntc[hidden]{display:none} .ntc-head{display:flex;align-items:center;gap:8px;padding:12px 10px 8px 16px;flex:none} .ntc-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .ntc-ht h2{margin:0;font-family:var(--f-title);font-size:20px;line-height:1.15;outline:none;border-radius:4px} .ntc-ht h2:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .ntc-count{font-size:12px;color:var(--muted);font-weight:600;min-height:1em} .ntc-acts{display:flex;gap:6px;flex:none} .ntc-acts .iconbtn{width:34px;height:34px} .ntc-acts .iconbtn svg{width:18px;height:18px} .ntc-acts .iconbtn:disabled{opacity:.4;cursor:default} .ntc-acts .iconbtn[data-sure]{width:auto;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--danger);color:#fff;border-color:transparent} #nt-panel .ntc-dnd{flex:none;margin:0 10px 6px;padding:8px 10px;background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .ntc-dnd .wp-st small{font-size:.74rem} .ntc-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 10px 10px;scrollbar-width:thin} .ntc-day+.ntc-day{margin-top:6px} .ntc-dh{position:sticky;top:-2px;z-index:1;margin:0 -10px;padding:8px 16px 6px;font:700 12px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--menu-bg)} .ntc-dh::first-letter{text-transform:uppercase} .ntc-grp{margin:0 0 8px;padding:6px;border-radius:calc(var(--radius) * .8);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .ntc-gh{display:flex;align-items:center;gap:7px;padding:2px 4px 6px;font-size:12px} .ntc-gh b{font-weight:700} .ntc-gh small{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums} .ntc-gi{display:grid;place-items:center;width:20px;height:20px;color:var(--accent);flex:none} .ntc-gi svg{width:17px;height:17px} .ntc-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px} .ntc-it{border-radius:calc(var(--radius) * .6);transition:height .22s ease,opacity .2s ease,transform .22s ease;overflow:hidden} .ntc-it article{position:relative;display:flex;align-items:flex-start;gap:10px;padding:8px 6px 8px 8px;border-radius:inherit;cursor:pointer;background:var(--menu-bg)} .ntc-it article:hover{background:var(--menu-hi)} .ntc-it.new article{background:color-mix(in srgb,var(--accent) 12%,var(--menu-bg))} .ntc-it.new article:hover{background:color-mix(in srgb,var(--accent) 20%,var(--menu-bg))} .ntc-it.fresh{animation:ntIn .4s cubic-bezier(.2,.8,.2,1)} @keyframes ntIn{from{opacity:0;transform:translateY(-8px)}} .ntc-it.gone{height:0!important;opacity:0;transform:translateX(30px)} .ntc-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:max(6px,calc(var(--radius)*.5));background:var(--pri-bg);color:var(--pri-fg)} .ntc-it:not(.new) .ntc-ic:not(.av){background:var(--cell-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--cell-line)} .ntc-ic svg{width:22px;height:22px} .ntc-ic.av{background:var(--cell-bg);border-radius:50%;overflow:hidden} .ntc-ic.av svg{width:100%;height:100%} .ntc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .ntc-meta{display:flex;gap:6px;margin:0;font-size:11px;color:var(--muted);font-weight:600} .ntc-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .ntc-meta time{flex:none;margin-left:auto;font-variant-numeric:tabular-nums} .ntc-meta span+time::before{content:"·";margin-right:6px} .ntc-t{font-family:var(--f-title);font-size:14.5px;line-height:1.25;overflow-wrap:anywhere} .ntc-dot{display:inline-block;width:8px;height:8px;margin:0 6px 1px 0;border-radius:50%;background:var(--accent);vertical-align:middle} .ntc-x{margin:0;font-size:12.5px;line-height:1.35;color:var(--muted);overflow-wrap:anywhere} .ntc-act{align-self:flex-start;display:inline-flex;align-items:center;gap:2px;margin-top:4px;padding:3px 6px 3px 8px;border:1px solid var(--btn-border);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:700 12px/1.2 var(--f-ui);cursor:pointer} .ntc-act svg{width:14px;height:14px} .ntc-act:hover{background:var(--menu-hi)} .ntc-x-b{display:grid;place-items:center;width:28px;height:28px;padding:0;margin:-2px -2px 0 0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;flex:none;opacity:.55} .ntc-x-b svg{width:14px;height:14px} .ntc-it article:hover .ntc-x-b,.ntc-x-b:focus-visible{opacity:1} .ntc-x-b:hover{background:var(--menu-hi);color:var(--menu-fg)} .ntc-more{display:block;width:100%;margin-top:4px;padding:6px;border:0;border-radius:calc(var(--radius) * .5);background:none;color:var(--accent);font:700 12px/1.2 var(--f-ui);cursor:pointer} .ntc-more:hover{background:var(--menu-hi)} .ntc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:36px 20px 40px} .ntc-empty p{margin:0;max-width:30ch} .ntc-empty-ic{display:grid;place-items:center;width:64px;height:64px;margin-bottom:8px;border-radius:50%;background:var(--cell-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--cell-line)} .ntc-empty-ic svg{width:32px;height:32px} .ntc-foot{flex:none;display:flex;justify-content:flex-end;padding:6px 10px 8px;border-top:1px solid var(--cell-line)} .ntc-link{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:0;border-radius:calc(var(--radius) * .5);background:none;color:inherit;font:600 12.5px/1.2 var(--f-ui);cursor:pointer} .ntc-link svg{width:16px;height:16px;color:var(--accent)} .ntc-link:hover{background:var(--menu-hi)} /* ventanitas: el cuerpo de las apps nuevas va como texto normal; salen deslizando */ .note-toast .nt-body{font-weight:500;color:var(--muted)} .note-toast.out{transform:translateX(30px);opacity:0} .note-toast{touch-action:pan-y} /* reacciones recibidas (ventana Reacción) y el botón en Avatares › Reaccionar */ .rxr{grid-column:1/-1;margin-top:14px;padding-top:12px;border-top:1px solid var(--cell-line)} .rxr h3{margin:0 0 8px;font-family:var(--f-title);font-size:16px} .rxr h3 small{color:var(--muted);font-size:12px} .rxr-ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px;max-height:240px;overflow:auto} .rxr-b{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border:1px solid var(--cell-line);border-radius:calc(var(--radius) * .6);background:var(--cell-bg);color:inherit;text-align:left;cursor:pointer} .rxr-b:hover,.rxr-b.cur{background:var(--menu-hi)} .rxr-b .ntc-ic{width:36px;height:36px} .rxr-t{flex:1;min-width:0;display:flex;flex-direction:column} .rxr-t b,.rxr-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rxr-t small,.rxr-b time{font-size:11.5px;color:var(--muted)} .rxr-open{margin-top:12px} /* teléfono: el panel baja desde arriba y las ventanitas también */ @media (max-width:720px){ #nt-panel.ntc{left:0;right:0;top:0;bottom:auto;width:100%;max-width:none;max-height:calc(100% - var(--bar-h) - env(safe-area-inset-bottom,0px) - 12px);padding-top:env(safe-area-inset-top,0px); border-top:0;border-left:0;border-right:0;border-radius:0 0 calc(var(--radius) + 6px) calc(var(--radius) + 6px);transform:translateY(-40px)} .ntc-head{padding:14px 12px 8px 18px} .ntc-acts .iconbtn{width:40px;height:40px} .ntc-x-b{width:36px;height:36px;opacity:.8} .ntc-act{padding:6px 8px 6px 10px;font-size:13px} .ntc-list{padding-bottom:6px} /* abajo, sobre la barra de tareas: así nunca tapan la barra de título ni la X de la ventana */ #notes{top:auto;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 8px);left:8px;right:8px;max-width:none;align-items:stretch} #notes .note-toast{width:auto;transform:translateY(24px)} #notes .note-toast.show{transform:none} #notes .note-toast.out{transform:translateY(30px)} } @media (prefers-reduced-motion:reduce){ #nt-panel.ntc,#nt-panel.ntc.open{transform:none;transition:opacity .01s} .nt-ring svg,.ntc-it.fresh{animation:none} .ntc-it{transition:none} .note-toast,#notes .note-toast,#notes .note-toast.out,.note-toast.out{transform:none;transition:opacity .15s} } /* ---------- 1.17.61 · avisos compactos sobre un juego en pantalla completa en el teléfono acostado (pendiente de la 1.17.41) ---------- Ahí las ventanitas de logros y avisos salían abajo a la derecha, grandes, encima del juego unos 5 s. Mientras un juego está en pantalla completa (fswin.js › fw-imm) en una pantalla táctil de 520 px de alto o menos, salen arriba al centro, dentro del área segura, como una píldora de un renglón (el ícono, el título y el extra), y solo las dos más nuevas. Se siguen pudiendo tocar (abren lo suyo) y deslizar para descartarlas. Vertical, tabletas, computadora y apps que no son juegos: igual. */ @media (hover:none) and (max-height:520px),(pointer:coarse) and (max-height:520px){ html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes{top:calc(env(safe-area-inset-top,0px) + 6px);bottom:auto;left:50%;right:auto;transform:translateX(-50%); width:max-content;max-width:min(360px,calc(100vw - var(--fw-sl,46px) - var(--fw-sr,0px) - 24px));align-items:center;gap:4px} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes>.note-toast{width:auto;max-width:100%;min-height:40px;box-sizing:border-box;padding:4px 14px 4px 5px;gap:8px;border-radius:999px;transform:translateY(-14px);box-shadow:0 6px 18px rgba(0,0,0,.35)} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes>.note-toast.show{transform:none} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes>.note-toast.out{transform:translateY(-18px)} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes>.note-toast:nth-last-child(n+3){display:none} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .ntc-ic,html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .ach-ic{width:30px;height:30px;border-radius:50%} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .ntc-ic svg,html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .ach-ic svg{width:18px;height:18px} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .ntc-ic.av svg{width:100%;height:100%} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .nt-card .gcard{width:24px} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .nt-t{flex-direction:row;align-items:baseline;gap:6px;min-width:0;white-space:nowrap} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .nt-t small{display:none} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .nt-t b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13.5px} html.fw-on:has(.win.fw.fw-imm:not([hidden])) #notes .nt-t em{flex:none;font-size:11.5px;max-width:40%;overflow:hidden;text-overflow:ellipsis} } /* ---------- 1.2: Snake musical (ventana del escritorio) ---------- */ .snk{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;min-height:0} .snk-main{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0} .snk-hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .snk-stats{display:flex;gap:6px;margin:0;flex:0 0 auto} .snk-stats div{display:flex;flex-direction:column;align-items:flex-start;min-width:64px;padding:5px 12px 6px;border-radius:calc(var(--radius) * .6);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .snk-stats dt{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .snk-stats dd{margin:0;font:700 22px/1.1 var(--f-title);font-variant-numeric:tabular-nums} .snk-tools{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto;min-width:0} .snk-tools .iconbtn{width:40px;height:40px} .snk-tools .iconbtn svg{width:18px;height:18px} .snk-tools .iconbtn.primary{background:var(--pri-bg);color:var(--pri-fg)} .snk-board{position:relative;flex:none;min-height:200px;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none} #sn-cv{display:block;border-radius:max(2px,calc(var(--radius) * .5));box-shadow:0 0 0 1px var(--cell-line),0 8px 24px rgba(0,0,0,.18);cursor:pointer} .snk-ov{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .snk-ov[hidden]{display:none} .snk-card{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(320px,86%);padding:18px 22px 16px;text-align:center;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:var(--menu-bg);color:var(--menu-fg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .snk-card h3{margin:0;font-family:var(--f-title);font-size:22px;line-height:1.15} .snk-card p{margin:0;color:var(--muted)} .snk-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg)} .snk-logo svg{width:30px;height:30px} .snk-big{font:700 44px/1 var(--f-title)!important;color:var(--menu-fg)!important;font-variant-numeric:tabular-nums} .snk-rec{font-weight:700;color:var(--accent)!important} .snk-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px} .snk-acts .btn svg{width:16px;height:16px} .snk-flash{position:absolute;left:50%;top:42%;margin:0;transform:translate(-50%,-50%);font:700 44px/1 var(--f-title);color:var(--accent);text-shadow:0 2px 0 var(--win-bg),0 0 18px var(--win-bg);opacity:0;pointer-events:none} .snk-flash.go{animation:snFlash 1.1s ease-out} @keyframes snFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}} .snk-foot{margin:0;min-height:1.3em;text-align:center;font-weight:700;color:var(--accent)} .snk-pad{display:none;position:relative;width:168px;height:118px;margin:0 auto;flex:none} .snk-pad.show{display:block} .snk-k{position:absolute;display:grid;place-items:center;width:54px;height:48px;padding:0;border:1px solid var(--btn-border);border-radius:max(6px,calc(var(--radius) * .6));background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;touch-action:none} .snk-k svg{width:22px;height:22px;transform:rotate(var(--r))} .snk-k:active{background:var(--menu-hi);transform:translateY(1px)} .snk-up{left:57px;top:0}.snk-down{left:57px;top:70px}.snk-left{left:0;top:35px}.snk-right{left:114px;top:35px} .snk-side{display:flex;flex-direction:column;gap:14px;min-width:0;overflow:auto} .snk-side section{padding:12px;border-radius:var(--radius);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .snk-side h3{margin:0 0 8px;font-family:var(--f-title);font-size:15px} .snk-side .hint{margin:8px 0 0;font-size:12px} .snk-notes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .snk-notes li{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:calc(var(--radius) * .5);box-shadow:inset 0 0 0 1px var(--cell-line);transition:transform .15s,box-shadow .15s} .snk-notes i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--nc);color:#10161f;font:700 13px/1 var(--f-ui);font-style:normal} .snk-notes span{font-size:12px;font-weight:700} .snk-notes li.next{box-shadow:inset 0 0 0 2px var(--accent);transform:translateY(-1px)} .snk-notes li.done i{box-shadow:0 0 0 2px var(--win-bg),0 0 0 4px var(--nc)} .snk-recs{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:4px;font-size:13px} .snk-recs li{padding-left:2px} .snk-recs li b{display:inline-block;min-width:34px;font-variant-numeric:tabular-nums} .snk-recs li span{color:var(--muted)} .snk-recs li time{display:block;font-size:11px;color:var(--muted)} .snk-recs li.hint{list-style:none;margin-left:-22px} .snk-keys{margin:0!important} /* pantalla completa: el tablero crece y el panel sigue al lado */ @container (min-width:641px){ .win.fw[data-id="snake"] .snk{max-width:1500px;margin:0 auto;grid-template-columns:minmax(0,1fr) 260px} } @media (min-width:721px) and (min-height:541px){ .win.fw[data-id="snake"] .win-body{overflow:hidden} } /* ventanas angostas y teléfono: todo en una columna, el panel de notas abajo y compacto */ @container (max-width:640px){ .snk{grid-template-columns:minmax(0,1fr);height:auto} .snk-side{overflow:visible} .snk-side section:last-of-type,.snk-keys{display:none} .mtx-tb .mtx-tb-k{display:none} } @media (max-width:720px){ .snk{grid-template-columns:minmax(0,1fr);height:auto} .snk-stats div{min-width:0;flex:1;padding:4px 8px} .snk-stats dd{font-size:19px} .snk-side section:last-of-type{display:none} .snk-keys{display:none} } @keyframes snFlashRM{0%,80%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .snk-flash.go{animation:snFlashRM 1.1s steps(1,end)} .snk-notes li{transition:none} } /* 1.4 (musica14): modos de velocidad y paredes que dejan pasar */ .snk-modes{display:grid;gap:8px;width:100%;margin-top:6px;text-align:left} .snk-mrow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:600} .snk-mrow .seg button{min-height:32px;padding:0 10px} .snk-wrap{align-items:flex-start;font-size:13px} .snk-wrap span{display:grid;gap:1px} .snk-wrap small{color:var(--muted);font-weight:400} .snk-card p.snk-mode{font-size:13px} /* ---- 1.6: teléfono. Arriba los puntos, luego las 8 notas en una tira, el tablero tan grande como quepa y la cruceta abajo ---- */ @media (max-width:720px){ .win[data-id="snake"] .win-body{padding:8px 10px} .snk{gap:8px} .snk-main{display:contents} .snk-hud{order:1;gap:6px;flex-wrap:nowrap} .snk-tools .mtx-tb{width:38px;height:38px;padding:0;justify-content:center;flex:none} .snk-tools .mtx-tb .mtx-tb-k,.snk-tools .mtx-tb .mtx-tb-n,.snk-tools .mtx-tb>svg:last-child{display:none} .snk-stats{flex:1 1 auto;min-width:0} .snk-stats dt{font-size:10px} .snk-tools{gap:6px} .snk-tools .iconbtn{width:38px;height:38px} .snk-side{order:2;gap:0} .snk-side section{padding:6px 8px} .snk-side h3{font-size:13px;margin:0} .snk-side .nn-h4{margin-bottom:4px} .snk-side .hint{display:none} .snk-notes{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px} .snk-notes li{padding:3px 0 2px;gap:1px} .snk-notes i{width:20px;height:20px;font-size:11px} .snk-notes span{font-size:10px} .snk-board{order:3;min-height:0} .snk-foot{order:4;min-height:1.2em;font-size:14px} .snk-pad{order:5;transform:scale(.92);margin-block:-4px} .snk-card{padding:14px 16px 12px;max-width:min(320px,92%)} } /* teléfono acostado: tablero a la izquierda; puntos, notas y cruceta a la derecha */ @media (max-height:540px) and (min-width:560px){ .win.fw[data-id="snake"] .win-body,.win[data-id="snake"] .win-body{padding:6px 10px} .win.fw[data-id="snake"] .snk{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,30%);grid-template-rows:auto auto auto 1fr;gap:6px 14px;max-width:none} .win.fw[data-id="snake"] .snk-main{display:contents} .win.fw[data-id="snake"] .snk-board{grid-column:1;grid-row:1/-1;align-self:center;min-height:0} .win.fw[data-id="snake"] .snk-hud{grid-column:2;grid-row:1;flex-wrap:wrap;gap:4px 6px} .win.fw[data-id="snake"] .snk-stats{flex:1 1 100%} .win.fw[data-id="snake"] .snk-tools{margin-left:auto} .win.fw[data-id="snake"] .snk-stats div{min-width:0;flex:1;padding:3px 7px} .win.fw[data-id="snake"] .snk-stats dd{font-size:17px} .win.fw[data-id="snake"] .snk-tools .iconbtn{width:36px;height:36px} .win.fw[data-id="snake"] .snk-tools .mtx-tb{width:36px;height:36px;padding:0;justify-content:center;flex:none} .win.fw[data-id="snake"] .snk-tools .mtx-tb .mtx-tb-k,.win.fw[data-id="snake"] .snk-tools .mtx-tb .mtx-tb-n,.win.fw[data-id="snake"] .snk-tools .mtx-tb>svg:last-child{display:none} .win.fw[data-id="snake"] .snk-side{grid-column:2;grid-row:2;overflow:visible} .win.fw[data-id="snake"] .snk-side section{padding:6px 8px} .win.fw[data-id="snake"] .snk-side section:last-of-type,.win.fw[data-id="snake"] .snk-keys,.win.fw[data-id="snake"] .snk-side .hint{display:none} .win.fw[data-id="snake"] .snk-notes{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px} .win.fw[data-id="snake"] .snk-notes li{padding:3px 0 2px;gap:1px} .win.fw[data-id="snake"] .snk-notes i{width:20px;height:20px;font-size:11px} .win.fw[data-id="snake"] .snk-notes span{font-size:10px} .win.fw[data-id="snake"] .snk-foot{grid-column:2;grid-row:3;font-size:13px} .win.fw[data-id="snake"] .snk-pad{grid-column:2;grid-row:4;align-self:center;transform:scale(.84);margin:-10px auto} } @media (max-width:720px) and (max-height:760px){ .snk-pad{transform:scale(.8);margin-block:-12px} .snk-card .snk-logo,.snk-wrap small{display:none} .snk-card{gap:4px;padding:10px 12px} .snk-card h3{font-size:19px} } /* ================= Arcade 3D ================= */ .win[data-id="arcade"] .win-body{padding:0;overflow:hidden;position:relative} .arc{position:relative;height:min(68vh,620px);min-height:360px;background:#07060b;overflow:hidden;user-select:none;-webkit-user-select:none} .win.max .arc{height:100%;min-height:0} .arc-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none} .arc-cv:active{cursor:grabbing} .arc-cv:focus-visible{box-shadow:inset 0 0 0 3px var(--focus)} .arc-help{position:absolute;left:12px;top:12px;max-width:min(420px,calc(100% - 150px));margin:0;padding:8px 12px;border-radius:8px;background:rgba(8,6,14,.72);color:#fff;font-size:14px;pointer-events:none} .arc-prompt{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:10px 18px;border:2px solid #fff;border-radius:999px;background:rgba(10,8,18,.82);color:#fff;font:700 16px var(--f-ui);cursor:pointer;box-shadow:0 0 24px rgba(255,255,255,.25)} .arc-prompt kbd{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#fff;color:#111;font:700 14px/1 system-ui,sans-serif} .arc-prompt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .arc-joy{position:absolute;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);opacity:0;pointer-events:none;transition:opacity .15s} .arc-joy.on{opacity:1} .arc-joy i{position:absolute;left:32px;top:32px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.7)} .arc-listbtn{position:absolute;right:12px;top:12px;opacity:.92} .arc-list{position:absolute;right:12px;top:58px;width:min(300px,calc(100% - 24px));max-height:calc(100% - 80px);overflow:auto;padding:10px;border:var(--bw) solid var(--win-border);border-radius:var(--radius);background:var(--menu-bg);color:var(--menu-fg);box-shadow:var(--shadow)} .arc-list ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .arc-li{display:block;width:100%;padding:7px 10px;border:1px solid var(--btn-border);border-left:6px solid hsl(var(--h),70%,50%);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(0px,calc(var(--radius)*.4));text-align:left;cursor:pointer;font:inherit;font-weight:700} .arc.no3d{display:flex;align-items:flex-start;justify-content:center;padding:16px;height:auto;min-height:0;background:none} .arc.no3d .arc-list{position:static;width:100%;max-height:none;box-shadow:none} .arc.no3d .arc-cv,.arc.no3d .arc-listbtn,.arc.no3d .arc-help,.arc.no3d .arc-joy{display:none} @media (max-width:720px){ .arc{height:100%;min-height:0} .arc-prompt{bottom:16px;font-size:15px} } /* ---------- Descargas 0.8: panel de descarga y Mis MIDI ---------- */ .dl-open svg{width:17px;height:17px} .dl-pop{position:absolute;z-index:60;box-sizing:border-box;width:440px;max-width:calc(100% - 16px);max-height:calc(100% - 48px);overflow:auto;display:flex;flex-direction:column; background:var(--win-bg);color:var(--win-fg);border:2px solid var(--win-border);border-radius:var(--radius);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset; animation:dlIn .16s ease-out;transform-origin:top right;overscroll-behavior:contain;-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)} .dl-pop.out{animation:dlOut .14s ease-in forwards} @keyframes dlIn{from{opacity:0;transform:translateY(-6px) scale(.98)}} @keyframes dlOut{to{opacity:0;transform:translateY(-4px) scale(.98)}} .dl-pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-width:none;max-height:min(88%,640px);border-radius:var(--radius) var(--radius) 0 0;border-width:2px 0 0;animation:dlUp .2s ease-out;transform-origin:bottom center} @keyframes dlUp{from{transform:translateY(24px);opacity:0}} .dl-pop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 6px 14px;position:sticky;top:0;z-index:2;background:var(--win-bg);border-bottom:1px solid var(--cell-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .dl-pop-h b{display:flex;align-items:center;gap:8px;font-family:var(--f-title);font-size:1.02rem;letter-spacing:.01em} .dl-pop-h b svg{width:18px;height:18px;color:var(--accent)} .dl-pane{display:flex;flex-direction:column;gap:12px;padding:12px 14px 14px} .dl-pane.dl-in{padding:0} .dl-head{display:flex;align-items:center;gap:10px;min-width:0} .dl-play{flex:none} .dl-t{min-width:0;display:flex;flex-direction:column;gap:2px} .dl-t b{font-family:var(--f-title);font-size:1.05rem;line-height:1.2;overflow-wrap:anywhere} .dl-t small{color:var(--muted);font-size:.78rem;line-height:1.35} .dl-roll-w{position:relative;height:64px;border-radius:calc(var(--radius) * .6);overflow:hidden;background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line)} .dl-roll{display:block;width:100%;height:100%} .dl-ph{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--accent);opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 0 8px var(--accent)} .dl-sec h5{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 6px;font-size:.8rem;font-family:var(--f-ui);font-weight:700;letter-spacing:.03em} .dl-sec h5 svg{width:15px;height:15px;color:var(--accent)} .dl-sec h5 small{font-weight:400;color:var(--muted);letter-spacing:0} .dl-keep{margin-left:auto;font-size:.76rem;font-weight:400;letter-spacing:0} .dl-keep:disabled{opacity:.5;text-decoration:none} .dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .dl-fmt{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:baseline;gap:1px 8px;min-width:0;padding:8px 9px 7px;text-align:left;cursor:pointer; font:inherit;color:inherit;background:var(--cell-bg);border:1.5px solid var(--cell-line);border-radius:calc(var(--radius) * .55);transition:border-color .12s,background .12s,transform .08s} .dl-fmt:hover:not(:disabled){border-color:var(--accent)} .dl-fmt:active:not(:disabled){transform:translateY(1px)} .dl-fmt:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .dl-fmt:disabled{cursor:default;opacity:.55} .dl-fmt.na{opacity:.45} .dl-ext{font-family:var(--f-title);font-weight:700;font-size:1.12rem;line-height:1.1;letter-spacing:.01em} .dl-d{grid-column:1 / -1;font-size:.72rem;line-height:1.3;color:var(--muted);min-width:0} .dl-sz{font-family:var(--f-mono);font-size:.68rem;color:var(--muted);white-space:nowrap;justify-self:end} .dl-sec-m .dl-fmt{width:100%;grid-template-columns:auto 1fr auto;grid-template-rows:auto;align-items:center;gap:10px;padding:9px 11px;border-left:5px solid var(--accent)} .dl-sec-m .dl-d{grid-column:auto;font-size:.76rem} .dl-fmt[data-dlf="all"]{background:transparent;border-style:dashed} .dl-q{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;margin-top:8px;font-size:.78rem;color:var(--muted)} .dl-st{display:flex;flex-direction:column;gap:6px;padding:9px 11px;border-radius:calc(var(--radius) * .55);background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line)} .dl-st p{margin:0;font-size:.82rem;line-height:1.4;overflow-wrap:anywhere} .dl-bar{height:6px;border-radius:3px;background:rgba(127,127,127,.25);overflow:hidden} .dl-bar[hidden]{display:none} .dl-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .18s linear} .busy .dl-bar i{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);background-size:60px 100%;animation:dlShine 1s linear infinite} @keyframes dlShine{from{background-position:-60px 0}to{background-position:200px 0}} .dl-note{margin:0;font-size:.74rem;line-height:1.45;color:var(--muted)} .dl-lib{display:flex;align-items:center;gap:6px;margin:0 14px 12px;align-self:flex-start;font-size:.82rem} .dl-lib svg{width:16px;height:16px} .on .box .row .dl-open{margin-left:auto} .hist-b{display:flex;align-items:center;gap:6px;flex:none} /* Mis MIDI */ .mm{display:flex;flex-direction:column;gap:12px;min-height:100%} .mm-intro{margin:0;max-width:72ch} .mm-cols{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;align-items:start} .mm-side{display:flex;flex-direction:column;gap:6px;min-width:0} .mm-count{font-size:.76rem;color:var(--muted)} .mm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:min(60vh,520px);overflow:auto} .mm-it{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;text-align:left;font:inherit;color:inherit;cursor:pointer;background:var(--cell-bg);border:1.5px solid transparent;border-radius:calc(var(--radius) * .55)} .mm-it:hover{border-color:var(--cell-line)} .mm-it[aria-pressed="true"]{border-color:var(--accent);background:var(--cell-bg2)} .mm-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-fg)} .mm-ic svg{width:18px;height:18px} .mm-tx{display:flex;flex-direction:column;gap:1px;min-width:0} .mm-tx b{font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mm-tx small{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mm-main{min-width:0;display:flex;flex-direction:column;gap:10px} .mm-edit{display:flex;align-items:flex-end;gap:8px} .mm-edit .ap-field{flex:1;min-width:0} .mm-date{margin:-4px 0 0;font-size:.74rem} .mm-empty p{margin:0 0 10px} @container (max-width:640px){ .mm-cols{grid-template-columns:1fr} .mm-list{max-height:none} .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:720px){ .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (prefers-reduced-motion:reduce){ .dl-pop,.dl-pop.out,.dl-pop.sheet{animation:none} .busy .dl-bar i{animation:none} } /* ---------- Pantalla completa propia de cada juego ---------- */ .win.fw{border-radius:0!important;border-width:0!important;box-shadow:none!important;animation:none!important;max-width:none!important;max-height:none!important} .win.fw .wb-max{display:none} .win.fw .win-title{border-radius:0} /* 1.5: la ventana se estira a toda la pantalla, pero sin z-index propio: lo que se abre después queda encima */ .win.fw{position:fixed!important;left:0!important;top:0!important;right:0;bottom:0;width:100vw!important;height:100vh!important;height:100dvh!important} html.fw-on #icons,html.fw-on .mark{visibility:hidden} html.fw-on #layer{inset:0} /* la barra de tareas se esconde y aparece si otra ventana está encima, con el menú o al llevar el ratón al borde de abajo */ html.fw-on #bar{transform:translateY(calc(100% + 6px));visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s} html.fw-on.fw-bar #bar{transform:none;visibility:visible;transition:transform .22s ease} @media (hover:hover) and (pointer:fine){ .win.fw .win-title{position:absolute;left:0;right:0;top:0;z-index:30;transition:transform .28s ease,opacity .28s ease;box-shadow:0 6px 18px rgba(0,0,0,.35)} .win.fw .win-body{padding-top:var(--fw-padtop,calc(16px + 36px))} .win.fw[data-id="arcade"] .win-body,.win.fw[data-id="sisifo"] .win-body{padding-top:0} .win.fw.fw-idle .win-title{transform:translateY(-100%);opacity:0;pointer-events:none} .win.fw.fw-idle{cursor:none} .win.fw.fw-idle .win-body *{cursor:inherit} } .wb-fs[aria-pressed="true"]{color:var(--accent)} .win.fw .sf-stage{height:calc(100vh + var(--fw-gain,0px) - 66px);height:calc(100dvh + var(--fw-gain,0px) - 66px);max-height:none} @media (hover:hover) and (pointer:fine){ .win.fw .sf-stage{height:calc(100vh + var(--fw-gain,0px) - 22px);height:calc(100dvh + var(--fw-gain,0px) - 22px)} .win.fw .arc-help,.win.fw .arc-listbtn{top:50px} .win.fw .arc-list{top:96px;max-height:calc(100% - 116px)} .win.fw.fw-idle .arc-help,.win.fw.fw-idle .arc-listbtn{top:12px} .win.fw.fw-idle .arc-list{top:58px} } /* 1.17.52: sin barra (fw-imm) no hace falta bajar los botones de los mundos: se quedan arriba aunque se mueva el ratón (antes saltaban de 12 a 50 px al moverlo y el clic caía en el lienzo) */ @media (hover:hover) and (pointer:fine){ .win.fw.fw-imm .arc-help,.win.fw.fw-imm .arc-listbtn{top:12px} .win.fw.fw-imm .arc-list{top:58px} } .win.fw[data-id="sisifo"] .win-body{padding:10px} .win.fw .win-body>.tv,.win.fw .win-body>.on{max-width:1180px;margin-inline:auto;width:100%} /* 1.10: solo la raíz de Trivia y de Ocho Notas (antes estiraba los cromos pegados del álbum, .ab-slot.on) */ .win.fw[data-id="trivia"] .win-body{font-size:1.1em} @media (prefers-reduced-motion:reduce){ .win.fw .win-title,html.fw-on #bar,html.fw-on.fw-bar #bar{transition:none} } /* 1.6: en pantalla completa respeta las zonas seguras del teléfono (muesca, isla y barra de inicio) */ .win.fw{padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);box-sizing:border-box} .win.fw .win-title{padding-top:env(safe-area-inset-top,0px);box-sizing:content-box} /* ---------- 1.17.41 · pantalla completa real en los juegos (fswin.js › fwImmOn) ---------- La ventana de un juego en pantalla completa se queda solo con el juego. --wb-pad y --fw-padtop bajan los márgenes de la ventana (los juegos que fijan los suyos los conservan) y --fw-gain, que mide fswin.js, es el alto que ganó. */ .fw-chip{display:none} @media (hover:hover) and (pointer:fine){ .win.fw.fw-imm{--fw-padtop:8px;--wb-pad:8px} .win.fw.fw-imm .win-title{transform:translateY(-100%);opacity:0;pointer-events:none} .win.fw.fw-imm.fw-peek .win-title,.win.fw.fw-imm.fw-under .win-title,.win.fw.fw-imm .win-title:has(button:focus-visible){transform:none;opacity:1;pointer-events:auto} } /* teléfono acostado: sin barra; el botón de la orilla izquierda la muestra. La orilla es el área segura de la isla o la muesca y, si no hay, una columna de 46 px: así el botón nunca tapa el juego */ @media (hover:none) and (max-height:520px),(pointer:coarse) and (max-height:520px){ .win.fw.fw-imm{--wb-pad:8px;padding-left:max(env(safe-area-inset-left,0px),46px)} .win.fw.fw-imm .win-title{position:absolute;top:0;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);z-index:30;transform:translateY(-110%);opacity:0;pointer-events:none; transition:transform .22s ease,opacity .22s ease;box-shadow:0 6px 18px rgba(0,0,0,.35)} .win.fw.fw-imm.fw-peek .win-title,.win.fw.fw-imm.fw-under .win-title{transform:none;opacity:1;pointer-events:auto} .win.fw.fw-imm .fw-chip{display:grid} .win.fw.fw-imm.fw-peek .fw-chip,.win.fw.fw-imm.fw-under .fw-chip{opacity:0;pointer-events:none} } .fw-chip{position:absolute;z-index:31;top:calc(env(safe-area-inset-top,0px) + 8px);left:calc((max(env(safe-area-inset-left,0px),46px) - 38px) / 2);width:38px;height:38px;place-items:center;padding:0; border:1px solid var(--btn-border);border-radius:50%;background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 4px 14px rgba(0,0,0,.35);cursor:pointer;transition:opacity .18s ease;-webkit-tap-highlight-color:transparent} .fw-chip svg{width:20px;height:20px} @media (prefers-reduced-motion:reduce){ .win.fw.fw-imm .win-title,.fw-chip{transition:none} } /* ---------- 1.17.51 · pantalla completa sin franjas (fswin.js › fwBleed) ---------- En el teléfono acostado, el lienzo del juego llega a las cuatro orillas (también detrás de la isla y de la barra de inicio) y lo que se toca se queda dentro del área segura. --fw-sl también deja libre la columna del botón de la barra (46 px). */ :root{--fw-sl:max(env(safe-area-inset-left,0px),46px);--fw-sr:env(safe-area-inset-right,0px);--fw-sb:env(safe-area-inset-bottom,0px)} @media (hover:none) and (max-height:520px),(pointer:coarse) and (max-height:520px){ .win.fw.fw-imm.fw-bleed{padding:0!important} .win.fw.fw-imm.fw-bleed>.win-body{padding:0!important} .fw-bleed .fw-stage>:not(.fw-bg),.fw-bleed .fw-bg>:not(.fw-bg){margin-left:var(--fw-sl)!important;margin-right:var(--fw-sr)!important;margin-bottom:var(--fw-sb)!important} } /* 1.17.70 · con el teléfono de pie: el lienzo hasta abajo (detrás de la barra de inicio) y lo demás dentro del área segura */ @media (hover:none) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){ :root{--fw-sl:env(safe-area-inset-left,0px)} /* de pie no hay columna del botón de la barra: solo el área segura */ .win.fw.fw-imm.fw-bleed{padding-bottom:0!important} .fw-bleed .fw-stage>:not(.fw-bg),.fw-bleed .fw-bg>:not(.fw-bg){margin-bottom:var(--fw-sb)!important} } /* sin lienzo a todo lo ancho: la franja del área segura, del color del fondo del juego (fswin.js › fwFill) */ .win.fw[style*="--fw-fill"]{background:var(--fw-fill)!important} /* ---------- 1.17.53 · en la computadora, los botones de la ventana en la fila de arriba del juego (fswin.js › fwBtnsPlace) ---------- Salir de pantalla completa, minimizar y cerrar, siempre a la vista: en el hueco libre de la fila de arriba del juego o, si no lo hay (los de lienzo), en una tira delgada propia. La barra de título ya no se asoma por el borde de arriba. */ .fw-btns{display:none} @media (hover:hover) and (pointer:fine){ .win.fw.fw-imm.fw-hasbtns .fw-btns{position:absolute;z-index:32;display:flex;gap:4px;height:34px;padding:3px;box-sizing:border-box;border-radius:999px; background:color-mix(in srgb,var(--title-bg,var(--win-bg,#1b1d27)) 82%,transparent);color:var(--title-fg,var(--win-fg,#fff));border:1px solid color-mix(in srgb,currentColor 22%,transparent); box-shadow:0 4px 14px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .fw-btns button{width:36px;height:26px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer} .fw-btns button:hover{background:color-mix(in srgb,currentColor 16%,transparent)} .fw-btns .fwb-x:hover{background:#e5352b;color:#fff} .fw-btns button:focus-visible{outline:2px solid var(--accent,#2f7cf6);outline-offset:1px} .fw-btns svg{width:16px;height:16px} .win.fw.fw-idle .fw-btns,.win.fw.fw-idle .fw-btns *{cursor:pointer} .win.fw.fw-imm.fw-strip>.win-body{padding-top:40px!important} .win.fw.fw-imm.fw-strip::before{content:attr(data-fwt);position:absolute;left:0;right:0;top:0;height:38px;z-index:31;box-sizing:border-box;padding:0 150px 0 14px; background:var(--title-bg,var(--win-bg));color:var(--title-fg,var(--win-fg));font:600 13px/38px var(--f-title,var(--f-ui));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.96;pointer-events:none} } /* 1.18.1 · teléfono de pie en pantalla completa: iOS desenfoca un poco más abajo del área segura de arriba (el difuminado de la barra de estado) y dejaba borrosa la mitad de arriba del título de la ventana. El título baja un poco más, solo donde hay área segura (sin muesca ni isla, env() vale 0 y no cambia nada). */ @media (hover:none) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){ .win.fw .win-title{padding-top:calc(env(safe-area-inset-top,0px) * 1.3)} } /* ---------- Fondos 0.9: capas de acabado y ajustes del fondo ---------- */ .wall-fx{position:fixed;inset:0;z-index:0;pointer-events:none} #wall-gd{mix-blend-mode:soft-light;opacity:0} #wall-gr{mix-blend-mode:overlay;background-repeat:repeat;opacity:0} #wall-gr.wfx-anim{inset:-96px;animation:wfxGrain .6s steps(1) infinite} @keyframes wfxGrain{0%{transform:translate(0,0)}17%{transform:translate(-37px,23px)}33%{transform:translate(19px,-41px)}50%{transform:translate(-53px,-11px)}67%{transform:translate(31px,47px)}83%{transform:translate(-13px,61px)}} html.fw-on .wall-fx{display:none} @media (prefers-reduced-motion:reduce){#wall-gr.wfx-anim{animation:none}} /* controles */ .wp-sec{display:grid;gap:8px;padding:12px 14px;border-radius:var(--radius);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .wp-sec h3{margin:0;font-family:var(--f-title);font-size:1rem} .wp-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px} .wp-sw{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 280px;padding:6px 4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:calc(var(--radius) * .5)} .wp-sw:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .wp-sw:disabled{cursor:default;opacity:.6} .wp-si,.wp-fl svg{flex:none;display:grid;place-items:center;color:var(--accent)} .wp-si svg{width:22px;height:22px} .wp-st{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .wp-st b{font-size:.92rem} .wp-st small,.wp-fps small{color:var(--muted);font-size:.76rem;line-height:1.35} .wp-knob{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--cell-line);transition:background .2s;margin-left:auto} .wp-knob::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s} [aria-checked="true"]>.wp-knob::after{transform:translateX(18px)} @media (prefers-reduced-motion:reduce){ .wp-knob,.wp-knob::after{transition:none} } .wp-sw[aria-checked="true"]>.wp-knob{background:var(--accent)} .wp-fps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px} .wp-fl{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600} .wp-fl svg{width:20px;height:20px} .wp-fps small{flex-basis:100%} .wp-fps .seg button{min-width:44px;font-variant-numeric:tabular-nums} .wp-fps .seg button:disabled{opacity:.5;cursor:default} /* versión compacta (ventana de Temas) */ .wp-ctl-c{margin-left:auto;gap:6px 12px;flex-wrap:nowrap} .wp-ctl-c .wp-sw{flex:none;padding:4px 2px;gap:8px} .wp-ctl-c .wp-st b{font-size:.84rem;white-space:nowrap} .wp-ctl-c .wp-si svg{width:19px;height:19px} .wp-ctl-c .wp-knob{transform:scale(.86);margin-left:0} .wp-ctl-c .wp-fl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} @container (max-width:620px){ .wp-ctl-c{margin-left:0;flex-wrap:wrap} } @media (max-width:720px){ .wp-ctl-c{margin-left:0;flex-wrap:wrap} } /* las tarjetas de Temas muestran el fondo real (miniatura) con la ventanita del tema encima */ .pv{background:var(--wall-thumb,none) 50% 50%/cover no-repeat,var(--pv-bg)} /* ================= Bibliópolis ================= */ .win[data-id="biblio"] .win-body{padding:0;overflow:hidden;position:relative} .bb{position:relative;height:min(78vh,720px);min-height:440px;display:flex;flex-direction:column;overflow:hidden;background:var(--win-bg);color:var(--win-fg)} .win.max .bb,.win.fw .bb{height:100%;min-height:0} .bb>section{display:none;flex:1 1 auto;min-height:0;position:relative} .bb[data-view="hall"] .bb-hall,.bb[data-view="cat"] .bb-cat,.bb[data-view="read"] .bb-read{display:block} .bb[data-view="read"] .bb-top{display:none} .bb svg{flex:none} /* barra superior: cabecera en el catálogo, flotante sobre la sala */ .bb-top{position:relative;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--cell-line);flex:none} .bb-views button{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;min-height:34px} .bb-views svg{width:17px;height:17px} .bb-views button[disabled]{opacity:.45;cursor:not-allowed} .bb-brand{display:flex;flex-direction:column;min-width:0;line-height:1.15;margin-right:auto} .bb-brand b{font-family:var(--f-title);font-size:19px;letter-spacing:.01em} .bb-brand small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-cont{max-width:min(340px,40%);min-width:0} .bb-cont span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .bb-cont svg{width:18px;height:18px} .bb[data-view="hall"] .bb-top{position:absolute;left:0;right:0;top:0;border:0;background:linear-gradient(rgba(12,8,5,.62),rgba(12,8,5,.28) 70%,rgba(12,8,5,0));padding-bottom:22px;pointer-events:none} .bb[data-view="hall"] .bb-top>*{pointer-events:auto} .bb[data-view="hall"] .bb-brand{color:#fff6e6;text-shadow:0 1px 3px rgba(0,0,0,.7)} .bb[data-view="hall"] .bb-brand small{color:rgba(255,240,215,.82)} /* ---- sala 3D ---- */ .bb-hall{background:#120c08;overflow:hidden} .bb-h{position:absolute;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none} .bb-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none} .bb-cv:active{cursor:grabbing} .bb-h.ptr-on .bb-cv{cursor:pointer} .bb-cv:focus-visible{box-shadow:inset 0 0 0 3px var(--focus)} .bb-cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,248,232,.75);box-shadow:0 0 0 1.5px rgba(0,0,0,.45);pointer-events:none;transition:transform .15s,background .15s} .bb-h.aiming .bb-cross{transform:scale(2.4);background:transparent;box-shadow:0 0 0 1px rgba(255,236,190,.95),0 0 10px rgba(255,210,140,.6)} .bb-h.touch .bb-cross{display:none} .bb-tip{position:absolute;z-index:4;transform:translate(-50%,-100%);max-width:min(300px,70%);padding:7px 12px 8px;border-radius:10px;background:rgba(22,14,8,.86);color:#fff6e4;border:1px solid rgba(232,196,120,.55);box-shadow:0 8px 22px rgba(0,0,0,.45);pointer-events:none;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .bb-tip b{display:block;font:600 15px/1.25 var(--f-title);text-wrap:balance} .bb-tip span{display:block;margin-top:2px;font-size:12px;opacity:.85} .bb-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);background:rgba(22,14,8,.86);border-right:1px solid rgba(232,196,120,.55);border-bottom:1px solid rgba(232,196,120,.55)} .bb-prompt{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:9px 18px 9px 10px;border:1.5px solid rgba(240,210,150,.9);border-radius:999px;background:rgba(24,15,8,.86);color:#fff6e4;font:700 15px var(--f-ui);cursor:pointer;box-shadow:0 0 24px rgba(255,200,120,.25)} .bb-prompt kbd{display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:7px;background:#f6e4bd;color:#2a1a0c;border:0;font:700 14px/1 system-ui,sans-serif} .bb-prompt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-h.touch .bb-prompt{bottom:16px} .bb-help{position:absolute;left:14px;bottom:16px;z-index:3;max-width:min(430px,calc(100% - 90px));margin:0;padding:9px 13px;border-radius:10px;background:rgba(18,12,7,.78);color:#fbf1df;font-size:14px;line-height:1.4;pointer-events:none;transition:opacity .4s,transform .4s} .bb-help.off{opacity:0;transform:translateY(8px)} .bb-helpb{position:absolute;right:14px;bottom:16px;z-index:3;opacity:.9} .bb-joy{position:absolute;z-index:3;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;border:2px solid rgba(255,240,215,.55);background:rgba(255,240,215,.08);opacity:0;pointer-events:none;transition:opacity .15s} .bb-joy.on{opacity:1} .bb-joy i{position:absolute;left:33px;top:33px;width:42px;height:42px;border-radius:50%;background:rgba(255,240,215,.75)} .bb-load{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#3a2516,#120b06 70%);color:#f6e8cf;transition:opacity .45s} .bb-load.done{opacity:0;pointer-events:none} .bb-load-c{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,80%);text-align:center} .bb-load-ic svg{width:54px;height:54px;color:#e6c27a} .bb-load p{margin:0;font-family:var(--f-title);font-size:18px} .bb-load .bar{width:100%;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)} .bb-load .bar i{width:0;background:#e6c27a;transition:width .2s} /* ---- catálogo ---- */ .bb-cat{overflow:auto;overscroll-behavior:contain} .bb-cat-in{display:flex;flex-direction:column;gap:14px;padding:14px 16px 24px;max-width:1240px;margin:0 auto} .bb-no3d{margin:0;padding:10px 12px;border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-play);font-weight:700} .bb-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px} .bb-search{position:relative;display:flex;align-items:center;flex:1 1 240px;min-width:0} .bb-search svg{position:absolute;left:11px;width:18px;height:18px;color:var(--muted);pointer-events:none} .bb-search input{width:100%;min-height:40px;padding:0 12px 0 38px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.55));box-sizing:border-box;font:inherit} .bb-langf button{min-height:40px} .bb-sel{flex:0 1 auto;min-width:130px} .bb-sel>span{font-size:12px;color:var(--muted);font-weight:700} .bb-sel select{min-height:40px;padding:6px 8px} .bb-count{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline} .bb-count .lnk{color:var(--win-fg);font-size:13px} .bb-ret{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:14px;line-height:1.45} .bb-controw h3{margin:0 0 8px;font-family:var(--f-title);font-size:17px} .bb-crow{list-style:none;margin:0;padding:2px 2px 6px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin} .bb-cc{display:flex;align-items:center;gap:10px;width:270px;padding:8px;border:1px solid var(--cell-line);background:var(--cell-bg2);color:var(--win-fg);border-radius:max(4px,calc(var(--radius)*.6));cursor:pointer;text-align:left;font:inherit} .bb-cc:hover{border-color:var(--accent)} .bb-cc img,.bb-cc .bb-cvph{width:46px;height:69px;object-fit:cover;border-radius:3px;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.3)} .bb-cc span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .bb-cc b{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-cc small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-cc em{font-style:normal;font-size:11px;color:var(--muted)} .bb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:22px 18px} .bb-card{display:flex;flex-direction:column;gap:9px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:6px} .bb-cover{position:relative;display:block;aspect-ratio:2/3;border-radius:3px 6px 6px 3px;overflow:hidden;background:var(--sb,#5a3a2a);box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.22);transition:transform .2s ease,box-shadow .2s ease} .bb-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.12) 4%,rgba(0,0,0,0) 9%,rgba(0,0,0,0) 92%,rgba(0,0,0,.12));pointer-events:none} .bb-cover img{display:block;width:100%;height:100%;object-fit:cover} .bb-card:hover .bb-cover,.bb-card:focus-visible .bb-cover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 2px 3px rgba(0,0,0,.25),0 16px 28px rgba(0,0,0,.3)} .bb-card:focus-visible{outline:none} .bb-card:focus-visible .bb-cover{outline:3px solid var(--focus);outline-offset:3px} .bb-cvph{display:grid;place-items:center;width:100%;height:100%;padding:12px;box-sizing:border-box;background:var(--sb,#5a3a2a);color:var(--sf,#f2e3c3);font:700 14px/1.2 var(--f-title);text-align:center;font-style:normal} .bb-cbar{position:absolute;left:8px;right:8px;bottom:8px;height:5px;border-radius:9px;background:rgba(0,0,0,.45);overflow:hidden;z-index:1} .bb-cbar b{display:block;height:100%;background:#f3c86a} .bb-done{position:absolute;right:6px;top:6px;z-index:1;padding:2px 8px;border-radius:99px;background:var(--pri-bg);color:var(--pri-fg);font:700 11px var(--f-ui);font-style:normal} .bb-ct{display:flex;flex-direction:column;gap:2px;min-width:0} .bb-ct b{font-family:var(--f-title);font-size:15px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bb-ct small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);min-width:0} .bb-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-lang{display:inline-block;padding:1px 6px;border-radius:5px;border:1px solid var(--cell-line);background:var(--cell-bg);color:var(--win-fg);font:700 10.5px/1.5 var(--f-ui);font-style:normal;letter-spacing:.04em;flex:none} /* ---- ficha del libro ---- */ .bb-det{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;box-sizing:border-box;background:rgba(10,6,3,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s} .bb-det.in{opacity:1} .bb-det-card{position:relative;display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:22px;width:min(780px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:22px;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);transform:translateY(10px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)} [data-os] .bb-det-card{background:var(--client,var(--menu-bg))} .bb-det.in .bb-det-card{transform:none} .bb-det.side{place-items:stretch end;padding:0;background:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(8,5,3,.35));-webkit-backdrop-filter:none;backdrop-filter:none} .bb-det.side .bb-det-card{grid-template-columns:1fr;width:min(430px,48%);height:100%;max-height:none;border-radius:0;border-width:0 0 0 var(--bw);align-content:start;gap:14px;padding:58px 22px 22px;transform:translateX(24px)} .bb-det.side.in .bb-det-card{transform:none} /* en la sala con pantalla estrecha: sin desenfoque, para ver el libro que asoma arriba */ .bb-det.peek{background:linear-gradient(rgba(8,5,3,0) 22%,rgba(8,5,3,.45));-webkit-backdrop-filter:none;backdrop-filter:none} .bb-det.side .bb-det-cv{width:150px;height:225px;justify-self:start} .bb-det-x{position:absolute;right:12px;top:12px;z-index:1} .bb-det-cv{align-self:start;aspect-ratio:2/3;border-radius:4px 8px 8px 4px;overflow:hidden;background:var(--sb,#5a3a2a);box-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 34px rgba(0,0,0,.32)} .bb-det-cv img{display:block;width:100%;height:100%;object-fit:cover} .bb-det-in{display:flex;flex-direction:column;gap:10px;min-width:0} .bb-det-k{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding-right:40px} .bb-det-in h3{margin:0;font-family:var(--f-title);font-size:clamp(22px,3.2vw,30px);line-height:1.12;text-wrap:balance} .bb-det-by{margin:0;font-size:16px} .bb-det-by span{color:var(--muted)} .bb-det-f{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .bb-det-f li{padding:3px 10px;border-radius:99px;border:1px solid var(--cell-line);background:var(--cell-bg2);font-size:12.5px;font-weight:700} .bb-det-bl{margin:2px 0 0;font-size:15px;line-height:1.55;max-width:60ch} .bb-det-p{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)} .bb-det-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:4px} .bb-det-read{min-height:42px;padding:0 20px;font-size:16px} .bb-det-read svg{width:20px;height:20px} .bb-dlb{position:relative;overflow:hidden;min-height:42px} .bb-dlb small{font-weight:400;font-size:12px;opacity:.8} .bb-dlbar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);transition:width .15s} .bb-dlb.busy{cursor:progress} .bb-det-shelf{display:inline-flex;align-items:center;gap:6px;font-size:14px} .bb-det-shelf svg{width:17px;height:17px} .bb-det-st{margin:0;min-height:1.3em;font-size:13px} .bb-det-st.err{color:var(--danger);font-weight:700} .bb-det-src{margin:0;font-size:12px;color:var(--muted)} /* ---- abrir el libro ---- */ .bb-read{background:var(--win-bg)} .bb-rload{position:absolute;inset:0;display:grid;place-items:center;padding:20px} .bb-rload-c{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(360px,100%);text-align:center} .bb-rload img{width:120px;border-radius:4px 7px 7px 4px;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bbBreath 1.6s ease-in-out infinite} .bb-rload-c>b{font-family:var(--f-title);font-size:20px;line-height:1.2} .bb-rload p{margin:0;color:var(--muted)} .bb-rload p.err{color:var(--danger);font-weight:700} .bb-rload .bar{width:100%} .bb-rload .bar i{width:0;transition:width .2s} @keyframes bbBreath{50%{transform:translateY(-4px)}} /* ---- lector ---- */ .bb-rd{position:absolute;inset:0;display:flex;flex-direction:column;--bb-paper:#fbf8f1;--bb-ink:#26211c;--bb-soft:#80766a;--bb-link:#8a4f1d;--bb-sel:rgba(214,170,90,.35)} .bb-rd[data-theme="sepia"]{--bb-paper:#f4e8d0;--bb-ink:#4b3b29;--bb-soft:#8e7a5e;--bb-link:#8a4f1d} .bb-rd[data-theme="night"]{--bb-paper:#17191d;--bb-ink:#d6d1c6;--bb-soft:#8d897f;--bb-link:#dcb46e;--bb-sel:rgba(220,180,110,.3)} .bb-rd[data-theme="os"]{--bb-paper:transparent;--bb-ink:var(--win-fg);--bb-soft:var(--muted);--bb-link:var(--accent);--bb-sel:var(--cell-play)} .bb-rd-top{flex:none;position:relative;z-index:4;display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--cell-line);transition:opacity .25s} .bb-rd-back svg{width:16px;height:16px} .bb-rd-ttl{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2;text-align:center} .bb-rd-ttl b{font-family:var(--f-title);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-rd-ttl small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-rd-tools{display:flex;gap:6px;flex:none} .bb-rd-ib svg{width:18px;height:18px} .bb-rd-ib[aria-pressed="true"],.bb-rd-ib[aria-expanded="true"]{background:var(--pri-bg);color:var(--pri-fg)} .bb-rd-main{position:relative;flex:1 1 auto;min-height:0} .bb-rd-view{position:absolute;inset:0;overflow:hidden;outline:none} .bb-rd-view:focus-visible{outline:2px solid var(--focus);outline-offset:-5px} .bb-rd[data-mode="page"] .bb-rd-view{touch-action:pan-y pinch-zoom} /* el deslizamiento horizontal es para pasar de página, no para el navegador */ .bb-rd-sheet{position:absolute;inset:8px 10px;border-radius:6px;background:var(--bb-paper);box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 30px rgba(0,0,0,.16)} .bb-rd[data-theme="paper"] .bb-rd-sheet{background:radial-gradient(ellipse at 50% 40%,#fdfbf6,#f6f0e3 90%)} .bb-rd[data-theme="sepia"] .bb-rd-sheet{background:radial-gradient(ellipse at 50% 40%,#f7ecd6,#ecdcbc 92%)} .bb-rd[data-theme="os"] .bb-rd-sheet{box-shadow:none;background:transparent} .bb-rd[data-spread="1"][data-mode="page"] .bb-rd-sheet::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:70px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.05) 42%,rgba(0,0,0,.11) 50%,rgba(0,0,0,.05) 58%,rgba(0,0,0,0));pointer-events:none} .bb-rd[data-theme="night"][data-spread="1"] .bb-rd-sheet::after{background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.25) 50%,rgba(0,0,0,0))} .bb-rd-clip{position:absolute;overflow:hidden} .bb-rd[data-mode="scroll"] .bb-rd-clip{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin} .bb-rd-txt{position:relative;box-sizing:border-box;color:var(--bb-ink);font-size:var(--bb-fs,19px);line-height:var(--bb-lh,1.55);overflow-wrap:break-word;font-kerning:normal;font-variant-ligatures:common-ligatures;transition:transform .34s cubic-bezier(.22,.75,.25,1),opacity .18s;will-change:transform} .bb-rd[data-mode="page"] .bb-rd-txt{column-fill:auto} .bb-rd-txt.bb-fade{opacity:.15;transition:none} .bb-rd-txt ::selection{background:var(--bb-sel)} .bb-rd[data-font="serif"] .bb-rd-txt{font-family:Literata,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"DejaVu Serif",serif} .bb-rd[data-font="sans"] .bb-rd-txt{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif} .bb-rd[data-font="legible"] .bb-rd-txt{font-family:"Atkinson Hyperlegible",Verdana,Tahoma,"DejaVu Sans",sans-serif;letter-spacing:.02em;word-spacing:.12em} .bb-f-serif{font-family:Literata,Georgia,"DejaVu Serif",serif} .bb-f-sans{font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif} .bb-f-legible{font-family:"Atkinson Hyperlegible",Verdana,sans-serif} .bb-rd-txt>*:first-child{margin-top:0} .bb-rd-txt p{margin:0;text-indent:1.35em;orphans:2;widows:2} .bb-rd[data-just="1"] .bb-rd-txt p{text-align:justify;-webkit-hyphens:auto;hyphens:auto} .bb-rd-txt :is(h1,h2,h3,h4,h5,h6,hgroup,header,hr,blockquote,figure,table,ul,ol)+p,.bb-rd-txt p:first-child,.bb-rd-txt .bk-wrap+p,.bb-rd-txt .bk-noindent,.bb-rd-txt [data-et~="z3998:salutation"]{text-indent:0} .bb-rd-txt :is(h1,h2,h3,h4,h5,h6){margin:1.4em 0 .9em;text-align:center;font-weight:600;line-height:1.25;break-after:avoid;text-wrap:balance;text-indent:0} .bb-rd-txt h1{font-size:1.6em}.bb-rd-txt h2{font-size:1.38em}.bb-rd-txt h3{font-size:1.2em}.bb-rd-txt h4{font-size:1.06em} .bb-rd-txt .bb-brk{break-before:column} .bb-rd[data-mode="scroll"] .bb-rd-txt .bb-brk{margin-top:2.5em} .bb-rd-txt hgroup{margin:1em 0 1.6em;text-align:center;break-after:avoid} .bb-rd-txt hgroup :is(h1,h2,h3,h4){margin:0 0 .35em;font-size:.95em;font-weight:500;letter-spacing:.22em} .bb-rd-txt hgroup p{text-indent:0;font-size:1.36em;font-style:italic;line-height:1.25;text-align:center!important} .bb-rd-txt section,.bb-rd-txt article,.bb-rd-txt div{margin:0} .bb-rd-txt blockquote{margin:1em 1.4em} .bb-rd-txt :is([data-et~="z3998:poem"],[data-et~="z3998:verse"],[data-et~="z3998:song"],[data-et~="z3998:hymn"],.bk-verse,.bk-poem) p{text-indent:0;text-align:left!important;margin:0 0 1em;-webkit-hyphens:manual;hyphens:manual} .bb-rd-txt :is([data-et~="z3998:poem"],[data-et~="z3998:verse"],[data-et~="z3998:song"],[data-et~="z3998:hymn"]) span{display:block;padding-left:1.6em;text-indent:-1.6em} .bb-rd-txt :is([data-et~="z3998:poem"],[data-et~="z3998:verse"],[data-et~="z3998:song"],[data-et~="z3998:hymn"]) br{display:none} .bb-rd-txt :is([data-et~="z3998:poem"],[data-et~="z3998:verse"]) span span{display:inline;padding:0;text-indent:0} .bb-rd-txt .bk-i1{padding-left:2.6em!important}.bb-rd-txt .bk-i2{padding-left:3.6em!important}.bb-rd-txt .bk-i3{padding-left:4.6em!important}.bb-rd-txt .bk-i4{padding-left:5.6em!important} .bb-rd-txt [data-et~="epigraph"]{font-style:italic;margin:1.6em 1.4em} .bb-rd-txt :is([data-et~="z3998:signature"],.bk-signature,.bk-al-right){text-align:right!important;text-indent:0} .bb-rd-txt :is(.bk-center,.bk-al-center){text-align:center!important;text-indent:0} .bb-rd-txt [data-et~="z3998:letter"]{margin:1em 1.2em} .bb-rd-txt [data-et~="z3998:roman"]{font-variant-numeric:normal} .bb-rd-txt img{display:block;max-width:100%;max-height:calc(var(--bb-ph,70vh) * .7);height:auto;margin:1em auto;break-inside:avoid;object-fit:contain} /* una ilustración grande tras un título no debe dejar la página en blanco: tope al 70 %, salvo las de página entera */ .bb-rd-txt :is(.bk-full-page,[data-et~="cover"]) img{max-height:calc(var(--bb-ph,70vh) - 2.6em)} .bb-rd-txt .bk-half-page img{max-height:calc(var(--bb-ph,70vh) * .5)} .bb-rd-txt figure{margin:1.2em 0;break-inside:avoid;text-align:center} .bb-rd-txt figcaption{font-size:.84em;color:var(--bb-soft);font-style:italic;text-indent:0;margin-top:.3em} .bb-rd[data-theme="night"] .bb-rd-txt img{background:#efe8da;border-radius:5px;padding:6px;box-sizing:border-box} .bb-rd[data-theme="night"] .bb-rd-txt img.bk-bot{background:none;padding:0;filter:invert(.86) sepia(.15)} .bb-rd-txt hr{border:0;height:1.2em;margin:1em 0;text-align:center;overflow:visible} .bb-rd-txt hr::after{content:"·\2003·\2003·";color:var(--bb-soft);font-size:1.1em} .bb-rd-txt a{color:var(--bb-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)} .bb-rd-txt a:hover{text-decoration-color:currentColor} .bb-rd-txt a.bk-noteref{text-decoration:none;font-size:.72em;vertical-align:super;line-height:0;padding:0 .12em;font-weight:700} .bb-rd-txt .bk-ext{color:inherit;text-decoration:underline dotted;cursor:default} .bb-rd-txt :is(ul,ol){margin:.6em 0 .8em;padding-left:1.6em} .bb-rd-txt li{margin:.2em 0} .bb-rd-txt table{border-collapse:collapse;margin:1em auto;font-size:.88em;max-width:100%;break-inside:avoid} .bb-rd-txt :is(td,th){border:1px solid color-mix(in srgb,var(--bb-ink) 25%,transparent);padding:.25em .5em;vertical-align:top} .bb-rd-txt pre{white-space:pre-wrap;font-size:.86em} .bb-rd-txt small{font-size:.84em} .bb-rd-txt .bb-first::first-letter{float:left;font-size:3.15em;line-height:.86;padding:.07em .09em 0 0;font-weight:600;color:var(--bb-link)} .bb-rd-txt :is([data-et~="titlepage"],[data-et~="halftitlepage"],[data-et~="imprint"],[data-et~="colophon"],[data-et~="dedication"],[data-et~="z3998:dedication"],[data-et~="copyright-page"]){text-align:center} .bb-rd-txt :is([data-et~="titlepage"],[data-et~="halftitlepage"],[data-et~="dedication"],[data-et~="z3998:dedication"],[data-et~="colophon"]) p{text-align:center!important;text-indent:0} .bb-rd-txt [data-et~="imprint"] p{text-indent:0;margin:0 0 .7em;font-size:.9em} /* portadilla y dedicatoria: más abajo en la página, como en un libro impreso */ .bb-rd[data-mode="page"] .bb-rd-txt :is([data-et~="halftitlepage"],[data-et~="dedication"],[data-et~="z3998:dedication"]){padding-top:calc(var(--bb-ph,600px) * .26)} .bb-rd-txt [data-et~="titlepage"]:has(img)>:not(img){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bb-rd-txt img[data-et~="z3998:publisher-logo"],.bb-rd-txt :is([data-et~="imprint"],[data-et~="colophon"]) header img{width:min(9em,45%);max-height:9em;margin:.4em auto 1.2em} .bb-rd-txt [data-et~="z3998:poem"] [data-et~="title"]{font-weight:600;font-style:italic;text-align:center;padding:0;text-indent:0;margin-bottom:.6em} .bb-rd-txt [data-et~="titlepage"] img,.bb-rd-txt [data-et~="z3998:publisher-logo"]{max-height:calc(var(--bb-ph,70vh) - 4em)} .bb-rd-tail{display:flex;justify-content:center;padding:2.5em 0 1em} .bb-rd-tail .btn{max-width:100%;white-space:normal;text-align:left;padding:10px 16px} .bb-rd-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;max-width:min(420px,80%);margin:0;padding:12px 18px;border-radius:10px;background:var(--menu-bg);color:var(--menu-fg);text-align:center;box-shadow:var(--shadow)} .bb-rd-msg.err{color:var(--danger);font-weight:700} .bb-rd-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:46px;height:96px;margin-top:-48px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--bb-soft);cursor:pointer;opacity:0;transition:opacity .2s,background .2s} .bb-rd-nav svg{width:26px;height:26px} .bb-rd-nav.prev{left:12px}.bb-rd-nav.next{right:12px} .bb-rd-main:hover .bb-rd-nav:not([disabled]),.bb-rd-nav:focus-visible{opacity:.85} .bb-rd-nav:hover{background:color-mix(in srgb,var(--bb-ink) 8%,transparent)} .bb-rd-nav[disabled]{opacity:0!important;cursor:default} .bb-rd[data-mode="scroll"] .bb-rd-nav{display:none} .bb-rd-foot{flex:none;position:relative;z-index:3;display:flex;flex-direction:column;gap:2px;padding:4px 16px 9px;transition:opacity .25s} .bb-rd-info{display:flex;align-items:baseline;gap:12px;font-size:12.5px;color:var(--muted);min-width:0} .bb-rd-where{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-rd-left,.bb-rd-pg{white-space:nowrap;flex:none} .bb-rd-pg{font-variant-numeric:tabular-nums} .bb-rd-pct{color:var(--win-fg);font-variant-numeric:tabular-nums} .bb-rd-seekw{position:relative} .bb-rd-seek{display:block;width:100%;height:18px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer} .bb-rd-seek::-webkit-slider-runnable-track{height:4px;border-radius:9px;background:linear-gradient(90deg,var(--accent) var(--bb-p,0%),var(--cell-line) var(--bb-p,0%))} .bb-rd-seek::-moz-range-track{height:4px;border-radius:9px;background:linear-gradient(90deg,var(--accent) var(--bb-p,0%),var(--cell-line) var(--bb-p,0%))} .bb-rd-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--accent);border:2px solid var(--win-bg);box-shadow:0 1px 3px rgba(0,0,0,.4)} .bb-rd-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--win-bg)} .bb-rd-seek:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px} .bb-rd-tip{position:absolute;bottom:22px;transform:translateX(-50%);padding:4px 10px;border-radius:8px;background:var(--menu-bg);color:var(--menu-fg);font-size:12px;white-space:nowrap;box-shadow:var(--shadow);pointer-events:none;max-width:70vw;overflow:hidden;text-overflow:ellipsis} .bb-rd.bare .bb-rd-top,.bb-rd.bare .bb-rd-foot{opacity:0;pointer-events:none} .bb-rd-panel{position:absolute;left:0;top:0;bottom:0;z-index:8;width:min(390px,92%);display:flex;flex-direction:column;background:var(--client,var(--menu-bg));color:var(--menu-fg);border-right:var(--bw) solid var(--win-border);box-shadow:var(--shadow);animation:bbPanelIn .2s ease-out} @keyframes bbPanelIn{from{transform:translateX(-14px);opacity:0}} .bb-rd-ptabs{display:flex;align-items:center;gap:4px;padding:8px 8px 0 10px;border-bottom:1px solid var(--cell-line)} .bb-rd-ptabs [role="tab"]{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:700 14px var(--f-ui);cursor:pointer} .bb-rd-ptabs [role="tab"] svg{width:16px;height:16px} .bb-rd-ptabs [role="tab"][aria-selected="true"]{color:var(--menu-fg);border-bottom-color:var(--accent)} .bb-rd-ptabs .iconbtn{margin-left:auto;width:34px;height:34px} .bb-rd-pbody{flex:1;overflow:auto;padding:6px 6px 14px;overscroll-behavior:contain} .bb-rd-toc{list-style:none;margin:0;padding:0} .bb-rd-toc button{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:8px 10px 8px calc(10px + var(--d,0) * 16px);border:0;background:none;color:inherit;font:inherit;font-size:14px;text-align:left;border-radius:max(3px,calc(var(--radius)*.4));cursor:pointer} .bb-rd-toc button:hover{background:var(--menu-hi)} .bb-rd-toc button[aria-current="true"]{background:var(--menu-hi);font-weight:700} .bb-rd-toc small{flex:none;font-size:11px;color:var(--accent);font-weight:700} .bb-rd-marks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .bb-rd-marks li{display:flex;align-items:flex-start;gap:6px} .bb-rd-mk{flex:1;display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid var(--cell-line);background:var(--cell-bg2);color:inherit;font:inherit;text-align:left;border-radius:max(3px,calc(var(--radius)*.45));cursor:pointer;min-width:0} .bb-rd-mk b{font-size:13px} .bb-rd-mk span{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:italic} .bb-rd-mk small{font-size:11px;color:var(--muted)} .bb-rd-empty{padding:16px 12px} .bb-rd-pop{position:absolute;right:10px;top:calc(var(--bb-hh,52px) + 6px);z-index:9;width:min(350px,calc(100% - 20px));max-height:calc(100% - var(--bb-hh,52px) - 20px);overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:13px;padding:12px 14px 14px;background:var(--client,var(--menu-bg));color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);animation:bbPopIn .16s ease-out} @keyframes bbPopIn{from{transform:translateY(-6px);opacity:0}} .bb-rd-poph{display:flex;align-items:center;justify-content:space-between} .bb-rd-poph b{font-family:var(--f-title);font-size:16px} .bb-rd-poph .iconbtn{width:32px;height:32px} .bb-rd-row{display:flex;flex-direction:column;gap:6px} .bb-rd-row>span{font-size:12px;font-weight:700;color:var(--muted)} .bb-rd-row .seg{align-self:stretch} .bb-rd-row .seg button{flex:1;min-height:34px;padding:4px 6px;display:grid;place-items:center} .bb-rd-row .seg svg{width:20px;height:20px} .bb-rd-fs{display:flex;align-items:center;gap:8px} .bb-rd-fs input{flex:1;min-width:0;accent-color:var(--accent)} .bb-rd-fs .iconbtn{width:34px;height:34px;font-family:Georgia,serif;font-weight:700} .bb-rd-sw{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .bb-rd-sw button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 2px;border:0;background:none;color:inherit;font:600 11px var(--f-ui);cursor:pointer;border-radius:8px} .bb-rd-sw i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:700 15px/1 Georgia,serif;font-style:normal;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 1px 2px rgba(255,255,255,.4)} .bb-sw-paper i{background:#fbf8f1;color:#26211c}.bb-sw-sepia i{background:#f1e2c4;color:#4b3b29}.bb-sw-night i{background:#17191d;color:#d6d1c6;border-color:rgba(255,255,255,.2)}.bb-sw-os i{background:var(--win-bg);color:var(--win-fg);border-color:var(--win-border)} .bb-rd-sw button[aria-pressed="true"] i{outline:3px solid var(--accent);outline-offset:2px} .bb-rd-sw button span{white-space:nowrap} .bb-rd-just{font-size:14px} .bb-rd-note{position:absolute;left:50%;bottom:16px;z-index:9;transform:translateX(-50%);width:min(520px,calc(100% - 24px));max-height:46%;overflow:auto;box-sizing:border-box;padding:10px 14px 12px;background:var(--client,var(--menu-bg));color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);font-size:15px;line-height:1.5;animation:bbPopIn .16s ease-out} .bb-rd-noteh{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .bb-rd-noteh .iconbtn{width:30px;height:30px} .bb-rd-notet p,.bb-rd-notet li{margin:0 0 .5em} .bb-rd-notet ol,.bb-rd-notet ul{padding-left:1.2em;margin:0} .bb-rd-end{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:20px;background:rgba(10,6,3,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .bb-rd-endc{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(440px,100%);padding:24px;text-align:center;background:var(--client,var(--menu-bg));color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow)} .bb-rd-endc b{font-family:var(--f-title);font-size:22px;line-height:1.2;text-wrap:balance} .bb-rd-endc p{margin:0;color:var(--muted)} .bb-rd-endc .row{justify-content:center} .bb-rd-orn{font-size:34px;line-height:1;color:var(--accent)} /* ---- pantalla completa ---- */ .win.fw[data-id="biblio"] .win-body{padding-top:0} @media (hover:hover) and (pointer:fine){ .win.fw[data-id="biblio"] .bb-top,.win.fw[data-id="biblio"] .bb-rd-top{transition:transform .28s ease,opacity .25s} .win.fw[data-id="biblio"]:not(.fw-idle):not(.fw-imm) .bb-top,.win.fw[data-id="biblio"]:not(.fw-idle):not(.fw-imm) .bb-rd-top{transform:translateY(36px)} /* 1.17.52: sin barra no se baja */ } /* ---- pantallas angostas ---- */ @media (max-width:720px){ .bb{height:100%;min-height:0} .bb-top{gap:8px;padding:8px 10px} .bb-views span{display:none} .bb-views button{padding:6px 11px} .bb-brand b{font-size:17px} .bb-sur{display:none} .bb-cont{max-width:44%;padding:0 10px} .bb-cat-in{padding:12px 12px 22px;gap:12px} .bb-tools{gap:8px} .bb-search{flex-basis:100%} .bb-langf{flex:1 1 100%} .bb-langf button{flex:1} .bb-sel{flex:1 1 calc(50% - 8px);min-width:0} .bb-sel select{width:100%} .bb-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 12px} .bb-ct b{font-size:14px} .bb-det{padding:0;place-items:end stretch} .bb-det-card,.bb-det.side .bb-det-card{grid-template-columns:96px minmax(0,1fr);gap:14px;width:100%;height:auto;max-height:92%;padding:18px 16px 20px;border-radius:var(--radius) var(--radius) 0 0;border-width:var(--bw) 0 0;transform:translateY(30px)} .bb-det.side{place-items:end stretch;background:rgba(10,6,3,.4)} .bb-det.side .bb-det-cv{width:auto} .bb-det-in h3{font-size:22px} .bb-det-bl,.bb-det-a,.bb-det-st,.bb-det-src,.bb-det-p{grid-column:1/-1} .bb-det-in{display:contents} .bb-det-k,.bb-det-in h3,.bb-det-by,.bb-det-f{grid-column:2} .bb-det-cv{grid-row:1/span 4} .bb-det-a .btn{flex:1 1 auto} .bb-det-read{flex-basis:100%!important} .bb-rd-back span{display:none} .bb-rd-back{padding:0 10px} .bb-rd-tools{gap:4px} .bb-rd-ib{width:36px;height:36px} .bb-rd-sheet{inset:0;border-radius:0;box-shadow:none} .bb-rd-foot{padding:3px 12px 8px} .bb-rd-left{display:none} .bb-help{font-size:13px;bottom:12px} } @media (pointer:coarse){ .bb-rd-nav{display:none} } @media (prefers-reduced-motion:reduce){ .bb-cover,.bb-det,.bb-det-card,.bb-rd-txt,.bb-help,.bb-load{transition:none!important} .bb-rload img{animation:none} } /* 1.18.1 · en pantalla completa con el teléfono de pie, la Biblioteca llega hasta abajo (antes dejaba libre la franja de la barra de inicio y se veía lo de detrás): el catálogo, el fichero y el lector corren detrás de ella y solo sus botones y su última fila se quedan dentro del área segura (--bb-sb). */ @media (hover:none) and (orientation:portrait),(pointer:coarse) and (orientation:portrait){ .win.fw[data-id="biblio"]{padding-bottom:0!important;--bb-sb:env(safe-area-inset-bottom,0px)} } .win[data-id="biblio"] .bb-cat,.win[data-id="biblio"] .bb-fich-body,.win[data-id="biblio"] .bb-rd-panel{padding-bottom:var(--bb-sb,0px)} .win[data-id="biblio"] .bb-rd-foot{padding-bottom:calc(8px + var(--bb-sb,0px))} .win[data-id="biblio"] :is(.bb-prompts,.bb-help,.bb-helpb,.bb-cbar,.bb-rd-note,.bb-rd-tip,.bb-dlbar){margin-bottom:var(--bb-sb,0px)} .win[data-id="biblio"] .bb-prompt:not(.bb-prompts>.bb-prompt){margin-bottom:var(--bb-sb,0px)} /* ================= Bibliópolis 1.5: portadas en hoja, lista, grupos por estante, aviso «E» y fichero ================= */ /* portada: la celda de la hoja se superpone a una tapa de tela con el título (visible si la hoja no carga) */ .bb-cover,.bb-det-cv{position:relative;display:block;overflow:hidden} .bb-cvs{position:absolute;inset:0;z-index:1;background-repeat:no-repeat} /* sin imagen (hoja ausente) queda transparente: se ve la tapa */ .bb-cvph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 9px;box-sizing:border-box; background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 10%),var(--sb,#5a3a2a);color:var(--sf,#f2e3c3);text-align:center;font-style:normal; box-shadow:inset 0 0 0 4px var(--sb,#5a3a2a),inset 0 0 0 5px var(--sa,#c9a24a)} .bb-cvph em{font:700 13px/1.15 var(--f-title);font-style:normal;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance} .bb-cvph small{font-size:10px;opacity:.85;letter-spacing:.04em;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bb-cover.sm{width:40px;height:60px;flex:none;border-radius:2px 4px 4px 2px;box-shadow:0 1px 2px rgba(0,0,0,.25),0 3px 8px rgba(0,0,0,.2)} .bb-cover.sm .bb-cvph{padding:3px}.bb-cover.sm .bb-cvph em{font-size:7px}.bb-cover.sm .bb-cvph small{display:none} .bb-cover.cc{width:46px;height:69px;flex:none;border-radius:2px 4px 4px 2px} .bb-cover.cc .bb-cvph em{font-size:8px}.bb-cover.cc .bb-cvph small{display:none} .bb-cover.rl{width:120px;height:180px;margin:0 auto;border-radius:4px 7px 7px 4px;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bbBreath 1.6s ease-in-out infinite;flex:none} @media (prefers-reduced-motion:reduce){.bb-cover.rl{animation:none}} .bb-det-cv{aspect-ratio:2/3;border-radius:4px 8px 8px 4px;box-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 34px rgba(0,0,0,.32)} .bb-cc .bb-cover::after{display:none} /* metadatos de la tarjeta: pueden pasar a dos líneas en vez de cortarse (letras anchas de algunos temas) */ .bb-meta{align-items:flex-start} .bb-meta span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;padding-top:1px} /* barra: vista portadas/lista */ .bb-viewf button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px} .bb-viewf svg{width:17px;height:17px} /* grupos por estante (orden «Estantería») */ .bb-res{display:flex;flex-direction:column;gap:26px} .bb-grp{scroll-margin-top:8px;border-radius:max(6px,calc(var(--radius)*.8))} .bb-grp-h{position:sticky;top:0;z-index:2;display:flex;align-items:baseline;gap:8px;margin:0 0 12px;padding:8px 2px 7px; background:linear-gradient(var(--win-bg) 78%,transparent);font-family:var(--f-title);font-size:18px;line-height:1.2} .bb-grp-h i{font-style:normal;color:var(--muted)} .bb-grp-h span{color:var(--muted);font-weight:600} .bb-grp-h small{margin-left:auto;font:700 12px var(--f-ui);color:var(--muted);padding:2px 8px;border-radius:99px;border:1px solid var(--cell-line)} .bb-grp.hl .bb-grp-h{animation:bbHl 1.6s ease-out} @keyframes bbHl{0%{color:var(--accent)}100%{color:inherit}} @media (prefers-reduced-motion:reduce){.bb-grp.hl .bb-grp-h{animation:none;color:var(--accent)}} /* vista de lista */ .bb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--cell-line)} .bb-row{display:grid;grid-template-columns:40px minmax(0,1fr) 64px minmax(90px,150px) 40px minmax(70px,96px);align-items:center;gap:6px 14px;width:100%;padding:8px 8px; border:0;border-bottom:1px solid var(--cell-line);background:none;color:var(--win-fg);font:inherit;text-align:left;cursor:pointer} .bb-row:hover{background:var(--cell-bg2)} .bb-row:focus-visible{outline:3px solid var(--focus);outline-offset:-3px} .bb-rt{display:flex;flex-direction:column;gap:2px;min-width:0} .bb-rt b{font-family:var(--f-title);font-size:15.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-rt small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-ry,.bb-rg,.bb-rm{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-ry{font-variant-numeric:tabular-nums} .bb-rm em{font-style:normal;color:var(--win-fg);font-weight:700} /* ---- avisos de la sala: «E · Todos los libros» y «Intro · Ver …» ---- */ .bb-prompts{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);pointer-events:none} .bb-prompts .bb-prompt{position:static;transform:none;pointer-events:auto;left:auto;bottom:auto;max-width:100%} .bb-pall>span{flex:none} .bb-prompt[hidden]{display:none} .bb-pall{gap:10px;padding:8px 18px 8px 9px;animation:bbPin .28s cubic-bezier(.2,.8,.2,1)} .bb-pall small{font:600 12.5px var(--f-ui);opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .bb-pall small:not(:empty)::before{content:"·";margin-right:8px;opacity:.7} .bb-pic{display:none;place-items:center;width:30px;height:30px;border-radius:8px;background:#f6e4bd;color:#2a1a0c} .bb-pic svg{width:20px;height:20px} .bb-h.touch .bb-pall kbd{display:none} .bb-h.touch .bb-pic{display:grid} .bb-h.touch .bb-pall{min-height:48px;font-size:16px} .bb-pbook{opacity:.92;font-size:14px;padding:7px 15px 7px 8px} .bb-pbook kbd{width:auto;padding:0 7px;font-size:12px} .bb-prompt:focus-visible{outline:3px solid var(--focus);outline-offset:3px} @keyframes bbPin{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.bb-pall{animation:none}} .bb-h.near .bb-help{opacity:0} /* ---- el fichero (sobre la sala) ---- */ .bb-fich{position:absolute;inset:0;z-index:15;display:flex;padding:14px;box-sizing:border-box;background:rgba(10,6,3,.55);opacity:0;transition:opacity .2s} /* sin desenfoque: el panel es opaco y el desenfoque cuesta mucho en equipos sin GPU */ .bb-fich.in{opacity:1} .bb-fich[hidden]{display:none} .bb-fich:not([hidden])~.bb-det{-webkit-backdrop-filter:none;backdrop-filter:none} .bb-fich-card{position:relative;display:flex;flex-direction:column;width:min(1180px,100%);margin:0 auto;min-height:0;flex:1 1 auto;background:var(--win-bg);color:var(--win-fg); --bbp:var(--win-bg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transform:translateY(14px) scale(.985);transition:transform .28s cubic-bezier(.2,.8,.2,1)} /* fondo opaco del tema (como la ficha): los temas de cristal dejarían ver la sala detrás de la lista */ [data-os] .bb-fich-card{--bbp:var(--client,var(--menu-bg,var(--win-bg)));background:var(--bbp)} .bb-fich.in .bb-fich-card{transform:none} @media (prefers-reduced-motion:reduce){.bb-fich,.bb-fich-card{transition:none}.bb-fich-card{transform:none}} .bb-fich-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:12px 14px 10px 14px;border-bottom:1px solid var(--cell-line);flex:none} .bb-fich-back{display:inline-flex;align-items:center;gap:6px} .bb-fich-back svg{width:17px;height:17px} .bb-fich-tt{display:flex;flex-direction:column;min-width:0;margin-right:auto} .bb-fich-tt h2{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--f-title);font-size:21px;line-height:1.15} .bb-fich-tt h2 svg{width:22px;height:22px;color:var(--accent)} .bb-fich-tt p{margin:2px 0 0;font-size:12.5px;color:var(--muted)} .bb-fich-here{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)} .bb-fich-here span{white-space:nowrap} .bb-fich-only{min-height:32px} .bb-fich-only[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg);border-color:var(--pri-bg)} .bb-fich-x{flex:none} .bb-fich-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto} .bb-fich-body .bb-cat-in{max-width:none;padding:12px 16px 22px} .bb-fich-body .bb-tools{position:sticky;top:0;z-index:3;margin:-12px -16px 0;padding:12px 16px 10px;background:var(--bbp,var(--win-bg));border-bottom:1px solid var(--cell-line)} .bb-fich-body .bb-grp-h{top:var(--bbtools,66px);background:linear-gradient(var(--bbp,var(--win-bg)) 78%,transparent)} /* teléfono y ventanas estrechas */ @media (max-width:720px){ .bb-fich{padding:0} .bb-fich-card{border-radius:0;border-width:0} .bb-fich-h{flex-wrap:wrap;padding:10px 12px 8px;gap:6px 10px} .bb-fich-back span{display:none} .bb-fich-back{flex:none;padding:0 10px} .bb-fich-tt{flex:1 1 0;min-width:0;margin-right:0} .bb-fich-tt h2{font-size:18px} .bb-fich-tt p{font-size:12px} .bb-fich-x{order:3} .bb-fich-here{order:5;width:100%} .bb-tools{gap:8px} .bb-search{flex-basis:100%} .bb-sel{min-width:0;flex:1 1 40%} .bb-viewf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .bb-viewf button{padding:0 10px} .bb-fich-body .bb-tools{position:static;margin:-12px -12px 0;padding:10px 12px} .bb-fich-body .bb-cat-in{padding:12px 12px 20px} .bb-fich-body .bb-grp-h{top:0} .bb-grid{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:18px 12px} .bb-row{grid-template-columns:40px minmax(0,1fr) auto;gap:4px 10px} .bb-rg,.bb-rl{display:none} .bb-ry{grid-column:3;grid-row:1} .bb-rm{grid-column:3;grid-row:1;align-self:end;display:none} .bb-pall small{max-width:120px} .bb-prompts{max-width:calc(100% - 128px)} /* deja libre el botón de ayuda de la esquina */ } @media (max-width:480px){.bb-pall small{display:none}} /* el nombre del estante sigue en la etiqueta accesible y en el fichero */ @container (max-width:560px){.bb-row{grid-template-columns:40px minmax(0,1fr) auto}.bb-rg,.bb-rl{display:none}} .bb-fich-tt h2:focus{outline:none} /* ===== Bibliópolis 1.4 · buscar en el libro, subrayados y notas ===== */ .bb-rd{--hl-y:rgba(255,206,0,.42);--hl-g:rgba(60,190,95,.32);--hl-b:rgba(60,145,255,.30);--hl-p:rgba(255,80,165,.28);--hl-ys:#d9a900;--hl-gs:#2f9e5a;--hl-bs:#3a7bd5;--hl-ps:#d2448e;--bb-hit:rgba(255,140,0,.5);--bb-hitl:#e07800} .bb-rd[data-theme="night"]{--hl-y:rgba(255,206,0,.30);--hl-g:rgba(80,210,120,.26);--hl-b:rgba(90,160,255,.30);--hl-p:rgba(255,110,180,.26);--bb-hit:rgba(255,150,40,.45);--bb-hitl:#ffa040} .bb-rd[data-theme="os"]{--bb-hit:color-mix(in srgb,var(--accent) 45%,transparent);--bb-hitl:var(--accent)} /* marcas dentro del texto */ .bb-rd-txt mark{color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone} .bb-rd-txt mark.bb-hl{background:var(--hl-y);border-radius:.18em;padding:.04em 0;cursor:pointer} .bb-rd-txt mark.bb-hl[data-col="g"]{background:var(--hl-g)} .bb-rd-txt mark.bb-hl[data-col="b"]{background:var(--hl-b)} .bb-rd-txt mark.bb-hl[data-col="p"]{background:var(--hl-p)} .bb-rd-txt mark.bb-hl.has-note{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)} .bb-rd-txt mark.bb-hl.has-note.end::after{content:"";display:inline-block;width:.42em;height:.42em;margin:0 0 0 .14em;border-radius:50%;background:var(--bb-link);vertical-align:.45em} .bb-rd-txt mark.bb-hit{background:var(--bb-hit);border-radius:.15em;box-shadow:0 0 0 2px var(--bb-hitl)} .bb-rd-txt mark.bb-flash{animation:bbHitPulse 1.1s ease-out 2} @keyframes bbHitPulse{0%{box-shadow:0 0 0 2px var(--bb-hitl),0 0 0 2px transparent}50%{box-shadow:0 0 0 2px var(--bb-hitl),0 0 0 9px color-mix(in srgb,var(--bb-hitl) 30%,transparent)}100%{box-shadow:0 0 0 2px var(--bb-hitl),0 0 0 14px transparent}} .bb-rd-txt mark.bb-hl.bb-flash{animation:bbHlPulse 1s ease-out 2} @keyframes bbHlPulse{50%{filter:brightness(1.18) saturate(1.5)}} .bb-rd-txt{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} /* barra de búsqueda */ .bb-rd-find{position:absolute;right:10px;top:8px;z-index:9;width:min(430px,calc(100% - 20px));max-height:calc(100% - 16px);display:flex;flex-direction:column;box-sizing:border-box;background:var(--client,var(--menu-bg));color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);animation:bbPopIn .16s ease-out} .bb-fd-bar{display:flex;align-items:center;gap:3px;padding:6px} .bb-fd-q{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:36px;padding:0 9px;box-sizing:border-box;background:var(--cell-bg);color:var(--win-fg);border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius) * .6))} .bb-fd-q:focus-within{outline:2px solid var(--focus);outline-offset:1px} .bb-fd-q svg{width:17px;height:17px;flex:none;color:var(--muted)} .bb-fd-q input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:inherit;font:15px var(--f-ui);outline:none} .bb-fd-q input::-webkit-search-cancel-button{cursor:pointer} .bb-fd-n{flex:none;padding:0 4px;font:600 12px var(--f-ui);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap} .bb-fd-bar .iconbtn{width:34px;height:34px;flex:none} .bb-fd-bar .iconbtn svg{width:18px;height:18px} .bb-fd-lb[aria-expanded="true"]{background:var(--pri-bg);color:var(--pri-fg)} .bb-fd-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 6px 8px;border-top:1px solid var(--cell-line)} .bb-rd-find[data-m="bar"] .bb-fd-body{display:none} .bb-rd-find.low[data-m="bar"]{top:auto;bottom:8px} .bb-fd-st{margin:8px 6px 2px;font:700 13px var(--f-ui)} .bb-fd-st:empty{display:none} .bb-fd-hint{margin:6px 6px 8px;font-size:12px;color:var(--muted)} .bb-fd-st:not(:empty)+.bb-fd-hint{display:none} .bb-fd-prog{display:block;height:3px;margin:4px 6px;border-radius:3px;background:var(--cell-line);overflow:hidden} .bb-fd-prog>i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s} .bb-fd-list{list-style:none;margin:0;padding:0} .bb-fd-ch{position:sticky;top:0;z-index:1;margin:6px 0 2px;padding:6px 8px 4px;font:700 11.5px var(--f-ui);letter-spacing:.03em;color:var(--muted);background:var(--client,var(--menu-bg));white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bb-fd-list button{display:block;width:100%;box-sizing:border-box;padding:7px 10px;border:0;border-left:3px solid transparent;background:none;color:inherit;font:14px/1.45 var(--f-ui);text-align:left;border-radius:max(3px,calc(var(--radius) * .45));cursor:pointer} .bb-fd-list button:hover{background:var(--menu-hi)} .bb-fd-list button[aria-current="true"]{background:var(--menu-hi);border-left-color:var(--accent)} .bb-fd-list button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .bb-fd-list mark{background:color-mix(in srgb,var(--accent) 34%,transparent);color:inherit;border-radius:2px;padding:0 1px;font-weight:700} .bb-fd-more{margin:8px 8px 2px;font-size:12px;color:var(--muted)} /* barra para subrayar (junto a la selección) */ .bb-rd-sel{position:absolute;z-index:12;display:flex;align-items:center;gap:3px;padding:4px 5px;background:var(--menu-bg);color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:max(10px,var(--radius));box-shadow:var(--shadow);animation:bbPopIn .14s ease-out;-webkit-user-select:none;user-select:none;touch-action:manipulation} .bb-rd-sel[hidden]{display:none} .bb-sw{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer} .bb-sw i{width:22px;height:22px;border-radius:50%;background:var(--hl-ys);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18)} .bb-sw[data-col="g"] i{background:var(--hl-gs)}.bb-sw[data-col="b"] i{background:var(--hl-bs)}.bb-sw[data-col="p"] i{background:var(--hl-ps)} .bb-sw:hover{background:var(--menu-hi)} .bb-sw[aria-pressed="true"] i{outline:2.5px solid var(--accent);outline-offset:2px} .bb-sw:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .bb-sel-sep{width:1px;align-self:stretch;margin:5px 3px;background:var(--cell-line)} .bb-sel-b{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border:0;border-radius:999px;background:none;color:inherit;font:700 13px var(--f-ui);cursor:pointer;white-space:nowrap} .bb-sel-b svg{width:17px;height:17px} .bb-sel-b:hover{background:var(--menu-hi)} .bb-sel-del{width:36px;height:36px} @media (pointer:coarse){.bb-sw,.bb-sel-del{width:44px;height:44px}.bb-sw i{width:26px;height:26px}.bb-sel-b{height:44px}} /* editor de nota */ .bb-rd-hle{position:absolute;left:50%;bottom:14px;z-index:13;transform:translateX(-50%);width:min(500px,calc(100% - 24px));max-height:calc(100% - 28px);overflow:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:10px 14px 14px;background:var(--client,var(--menu-bg));color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);animation:bbPopIn .16s ease-out} .bb-rd-hle[hidden]{display:none} .bb-hle-h{display:flex;align-items:center;justify-content:space-between} .bb-hle-h b{font-family:var(--f-title);font-size:16px} .bb-hle-h .iconbtn{width:32px;height:32px} .bb-hle-q{margin:0;padding:8px 12px;max-height:7.5em;overflow:auto;border-left:4px solid var(--hl-ys);background:color-mix(in srgb,var(--hl-ys) 12%,transparent);border-radius:0 6px 6px 0;font:italic 14.5px/1.5 Literata,Georgia,"DejaVu Serif",serif} .bb-hle-q[data-col="g"]{border-left-color:var(--hl-gs);background:color-mix(in srgb,var(--hl-gs) 12%,transparent)} .bb-hle-q[data-col="b"]{border-left-color:var(--hl-bs);background:color-mix(in srgb,var(--hl-bs) 12%,transparent)} .bb-hle-q[data-col="p"]{border-left-color:var(--hl-ps);background:color-mix(in srgb,var(--hl-ps) 12%,transparent)} .bb-hle-pg{border-left-color:var(--muted);background:var(--cell-bg2);font-style:normal;font-family:var(--f-ui);font-size:13px} .bb-hle-c{display:flex;gap:4px} .bb-hle-l textarea{display:block;width:100%;min-height:96px;box-sizing:border-box;padding:9px 10px;resize:vertical;background:var(--cell-bg);color:var(--win-fg);border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius) * .6));font:15px/1.5 var(--f-ui)} .bb-hle-l textarea:focus{outline:2px solid var(--focus);outline-offset:1px} .bb-hle-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .bb-hle-del{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--danger)} .bb-hle-del svg{width:16px;height:16px} /* pestaña Notas */ .bb-rd-ptabs [role="tab"]{padding:8px 9px} @media (max-width:440px){.bb-rd-ptabs{gap:0;padding-left:4px}.bb-rd-ptabs [role="tab"]{padding:8px 6px;font-size:13px;gap:4px}.bb-rd-ptabs [role="tab"] svg{width:14px;height:14px}} .bb-nt-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 6px 4px} .bb-nt-n{flex:1 1 100%;margin:0 0 2px;font-size:12.5px;color:var(--muted)} .bb-nt-b{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 10px} .bb-nt-b svg{width:16px;height:16px} .bb-nt-st{margin:2px 8px;font-size:12.5px} .bb-nt-st:empty{display:none} .bb-nt-st.err{color:var(--danger);font-weight:700} .bb-nt-undo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px;padding:6px 10px;border-radius:max(3px,calc(var(--radius) * .45));background:var(--menu-hi);font-size:13px} .bb-nt-ch{margin:12px 8px 6px;font:700 12px var(--f-ui);letter-spacing:.02em;color:var(--muted)} .bb-nt-ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .bb-nt-it{display:flex;align-items:flex-start;gap:4px} .bb-nt-go{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:8px 10px 8px 11px;border:1px solid var(--cell-line);border-left:4px solid var(--hl-ys);background:var(--cell-bg2);color:inherit;font:inherit;text-align:left;border-radius:max(3px,calc(var(--radius) * .45));cursor:pointer} .bb-nt-it[data-col="g"] .bb-nt-go{border-left-color:var(--hl-gs)}.bb-nt-it[data-col="b"] .bb-nt-go{border-left-color:var(--hl-bs)}.bb-nt-it[data-col="p"] .bb-nt-go{border-left-color:var(--hl-ps)}.bb-nt-it[data-col="n"] .bb-nt-go{border-left-color:var(--muted);border-left-style:dashed} .bb-nt-go:hover{background:var(--menu-hi)} .bb-nt-go[aria-disabled="true"]{opacity:.65;cursor:default} .bb-nt-q{font:italic 13.5px/1.45 Literata,Georgia,"DejaVu Serif",serif;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .bb-nt-q.pg{font:12.5px/1.4 var(--f-ui);color:var(--muted)} .bb-nt-note{font-size:13.5px;line-height:1.45;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .bb-nt-go small{font-size:11px;color:var(--muted)} .bb-nt-a{display:flex;flex-direction:column;gap:2px} .bb-nt-a .iconbtn{width:32px;height:32px} .bb-nt-a .iconbtn svg{width:16px;height:16px} /* teléfono: la barra de herramientas del lector no aprieta el título */ @media (max-width:520px){.bb-rd-tools{gap:2px}.bb-rd-tools .bb-rd-ib{width:34px;height:34px}.bb-rd-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.bb-rd-find{right:6px;width:calc(100% - 12px);top:6px}} @media (prefers-reduced-motion:reduce){.bb-rd-txt mark.bb-flash{animation:none}.bb-rd-find,.bb-rd-sel,.bb-rd-hle{animation:none}} /* ================= Pinacópolis ================= */ .win[data-id="museo"] .win-body{padding:0;overflow:hidden;position:relative} .mu{position:relative;height:min(78vh,720px);min-height:440px;display:flex;flex-direction:column;overflow:hidden;background:var(--win-bg);color:var(--win-fg);container-type:inline-size;container-name:mu} .win.max .mu,.win.fw .mu{height:100%;min-height:0} .mu>section{display:none;flex:1 1 auto;min-height:0;position:relative} .mu[data-view="hall"] .mu-hall,.mu[data-view="gal"] .mu-gal{display:block} .mu svg{flex:none} .mu-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--pc,var(--accent));box-shadow:0 0 0 2px rgba(255,255,255,.35);flex:none} /* barra superior: cabecera en la galería, flotante sobre el museo 3D */ .mu-top{position:relative;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--cell-line);flex:none} .mu-views button{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;min-height:34px} .mu-views svg{width:17px;height:17px} .mu-views button[disabled]{opacity:.45;cursor:not-allowed} .mu-brand{display:flex;flex-direction:column;min-width:0;line-height:1.15;margin-right:auto} .mu-brand b{font-family:var(--f-title);font-size:19px;letter-spacing:.01em} .mu-brand small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-tools{display:flex;align-items:center;gap:6px;flex:none} .mu-tool{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px} .mu-tool svg{width:17px;height:17px} .mu-tool[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .mu-tb{width:34px;height:34px} .mu-tb[hidden]{display:none} .mu[data-view="hall"] .mu-top{position:absolute;left:0;right:0;top:0;border:0;background:linear-gradient(rgba(12,9,6,.66),rgba(12,9,6,.3) 70%,rgba(12,9,6,0));padding-bottom:24px;pointer-events:none} .mu[data-view="hall"] .mu-top>*{pointer-events:auto} .mu[data-view="hall"]:has(.mu-card.side:not([hidden])) .mu-top{z-index:21;background-size:calc(100% - min(410px,44%)) 100%;background-repeat:no-repeat} .mu[data-view="hall"] .mu-brand{color:#fff6e6;text-shadow:0 1px 3px rgba(0,0,0,.7)} .mu[data-view="hall"] .mu-brand small{color:rgba(255,240,215,.82)} /* ---- museo 3D ---- */ .mu-hall{background:#14100c;overflow:hidden} .mu-h{position:absolute;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none} .mu-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none} .mu-cv:active{cursor:grabbing} .mu-h.ptr-on .mu-cv{cursor:pointer} .mu-cv:focus-visible{box-shadow:inset 0 0 0 3px var(--focus)} .mu-cross{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgba(255,248,232,.75);box-shadow:0 0 0 1.5px rgba(0,0,0,.45);pointer-events:none;transition:transform .15s,background .15s} .mu-h.aiming .mu-cross{transform:scale(2.4);background:transparent;box-shadow:0 0 0 1px rgba(255,236,190,.95),0 0 10px rgba(255,210,140,.6)} .mu-h.touch .mu-cross{display:none} .mu-tip{position:absolute;z-index:4;transform:translate(-50%,-100%);max-width:min(320px,70%);padding:7px 13px 8px;border-radius:10px;background:rgba(20,15,10,.86);color:#fff6e4;border:1px solid rgba(232,196,120,.55);box-shadow:0 8px 22px rgba(0,0,0,.45);pointer-events:none;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .mu-tip b{display:block;font:600 16px/1.2 "Cormorant Garamond",Georgia,serif;text-wrap:balance} .mu-tip span{display:block;margin-top:2px;font-size:12px;opacity:.85} .mu-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);background:rgba(20,15,10,.86);border-right:1px solid rgba(232,196,120,.55);border-bottom:1px solid rgba(232,196,120,.55)} .mu-prompt{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;max-width:calc(100% - 120px);padding:9px 18px 9px 10px;border:1.5px solid rgba(240,210,150,.9);border-radius:999px;background:rgba(24,16,9,.86);color:#fff6e4;font:700 15px var(--f-ui);cursor:pointer;box-shadow:0 0 24px rgba(255,200,120,.25)} .mu-prompt kbd{display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:7px;background:#f6e4bd;color:#2a1a0c;border:0;font:700 14px/1 system-ui,sans-serif} .mu-prompt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-help{position:absolute;left:14px;bottom:16px;z-index:3;max-width:min(440px,calc(100% - 90px));margin:0;padding:9px 13px;border-radius:10px;background:rgba(18,13,8,.8);color:#fbf1df;font-size:14px;line-height:1.4;pointer-events:none;transition:opacity .4s,transform .4s} .mu-help.off,.mu-h.aiming .mu-help,.mu-h.ptr-on .mu-help{opacity:0;transform:translateY(8px)} .mu-helpb{position:absolute;right:14px;bottom:16px;z-index:3;opacity:.92} .mu-joy{position:absolute;z-index:3;width:108px;height:108px;margin:-54px 0 0 -54px;border-radius:50%;border:2px solid rgba(255,240,215,.55);background:rgba(255,240,215,.08);opacity:0;pointer-events:none;transition:opacity .15s} .mu-joy.on{opacity:1} .mu-joy i{position:absolute;left:33px;top:33px;width:42px;height:42px;border-radius:50%;background:rgba(255,240,215,.75)} .mu-banner{position:absolute;left:50%;top:70px;z-index:3;display:flex;align-items:center;gap:13px;max-width:calc(100% - 32px);padding:10px 20px 11px 14px;border-radius:12px;background:rgba(16,12,8,.74);color:#fbf3e3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,-8px);transition:opacity .5s,transform .5s;pointer-events:none} .mu-banner.in{opacity:1;transform:translate(-50%,0)} .mu-banner>i{width:5px;align-self:stretch;border-radius:3px;background:var(--pc);flex:none} .mu-banner small{display:block;font:700 11px var(--f-ui);letter-spacing:.16em;text-transform:uppercase;opacity:.78} .mu-banner b{display:block;font:600 24px/1.12 "Cormorant Garamond",Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-banner em{display:block;font-style:italic;font-size:13px;opacity:.85} .mu-banner em:empty{display:none} .mu-load{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#3b2f24,#120d09 72%);color:#f6ead2;transition:opacity .45s} .mu-load.done{opacity:0;pointer-events:none} .mu-load-c{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,80%);text-align:center} .mu-load-ic svg{width:56px;height:56px;color:#e2c27e} .mu-load p{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px} .mu-load .bar{width:100%;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)} .mu-load .bar i{width:0;background:#e2c27e;transition:width .2s} .mu-fade{position:absolute;inset:0;z-index:7;background:#0b0907;opacity:0;pointer-events:none;transition:opacity .28s} .mu-fade.on{opacity:1} /* ---- galería 2D ---- */ .mu-gal{overflow:auto;overscroll-behavior:contain} .mu-gal-in{display:flex;flex-direction:column;gap:14px;padding:14px 16px 26px;max-width:1240px;margin:0 auto} .mu-no3d{margin:0;padding:10px 12px;border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-play,var(--cell-bg2));font-weight:700} .mu-search{position:relative;display:flex;align-items:center} .mu-search svg{position:absolute;left:11px;width:18px;height:18px;color:var(--muted);pointer-events:none} .mu-search input{width:100%;min-height:42px;padding:0 12px 0 38px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.55));box-sizing:border-box;font:inherit} .mu-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin} .mu-tab{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:36px;padding:0 13px;border:1px solid var(--cell-line);background:var(--cell-bg);color:var(--win-fg);border-radius:999px;font:600 13.5px var(--f-ui);cursor:pointer;white-space:nowrap} .mu-tab svg{width:15px;height:15px;color:var(--accent)} .mu-tab:hover{border-color:var(--accent)} .mu-tab[aria-selected="true"]{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .mu-tab[aria-selected="true"] svg{color:currentColor} .mu-ph{padding:4px 0 4px 16px;border-left:5px solid var(--pc,var(--accent))} .mu-ph h3{margin:2px 0 4px;font-family:var(--f-title);font-size:clamp(24px,3.4vw,32px);line-height:1.1} .mu-ph-k{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .mu-ph-m{margin:0;font-style:italic;color:var(--muted)} .mu-ph-b{margin:8px 0 0;max-width:72ch;font-size:15px;line-height:1.55} .mu-count,.mu-empty{margin:0;color:var(--muted);font-size:14px} .mu-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px 18px} .mu-wc{display:flex;flex-direction:column;gap:9px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:6px} .mu-wc-im{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:max(3px,calc(var(--radius)*.5));background:var(--cell-bg2);border:1px solid var(--cell-line);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease} .mu-wc-im img{max-width:84%;max-height:84%;width:auto;height:auto;display:block;box-shadow:0 0 0 3px #b8924a,0 0 0 4px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.28)} /* 1.5: miniatura recortada de la hoja de su sala (sprite CSS); mismo tamaño y marco que la de antes */ .mu-th{display:block;background-repeat:no-repeat;background-color:#2b2520} .mu-wc-im .mu-th{width:calc(84% * min(1, var(--ar,1)));aspect-ratio:var(--ar,1);box-shadow:0 0 0 3px #b8924a,0 0 0 4px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.28)} .mu-wc:hover .mu-wc-im,.mu-wc:focus-visible .mu-wc-im{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.2)} .mu-wc:focus-visible{outline:none} .mu-wc:focus-visible .mu-wc-im{outline:3px solid var(--focus);outline-offset:3px} .mu-na-t{display:none;padding:12px;text-align:center;font-size:12px;font-style:normal;color:var(--muted)} .mu-na .mu-na-t{display:block} .mu-wc-fav{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg)} .mu-wc-fav svg{width:15px;height:15px} .mu-wc-t{display:flex;flex-direction:column;gap:2px;min-width:0} .mu-wc-t b{font-family:var(--f-title);font-size:15px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mu-wc-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- ficha (cartela) ---- */ .mu-card{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;box-sizing:border-box;background:rgba(10,7,4,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s} .mu-card.in{opacity:1} .mu-card-c{position:relative;display:grid;grid-template-columns:minmax(160px,300px) minmax(0,1fr);gap:22px;width:min(860px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:22px;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);transform:translateY(10px) scale(.98);transition:transform .25s cubic-bezier(.2,.8,.2,1)} [data-os] .mu-card-c{background:var(--client,var(--menu-bg))} .mu-card-c::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--pc)} .mu-card.in .mu-card-c{transform:none} .mu-card.side,.mu-card.peek{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none} .mu-card.side{place-items:stretch end;padding:0} .mu-card.side .mu-card-c,.mu-card.peek .mu-card-c{pointer-events:auto;grid-template-columns:1fr} .mu-card.side .mu-card-c{width:min(410px,44%);height:100%;max-height:none;border-radius:0;border-width:0 0 0 var(--bw);align-content:start;gap:12px;padding:66px 22px 22px;transform:translateX(24px)} .mu-card.side.in .mu-card-c{transform:none} .mu-card.peek{place-items:end stretch;padding:0} .mu-card.peek .mu-card-c{width:100%;max-height:min(58%,430px);border-radius:var(--radius) var(--radius) 0 0;border-width:var(--bw) 0 0;padding:18px 16px 16px;gap:8px;transform:translateY(30px)} .mu-card.peek.in .mu-card-c{transform:none} .mu-x{position:absolute;right:12px;top:12px;z-index:1} .mu-card.side .mu-x{top:62px} .mu-card-im{display:grid;place-items:center;align-self:start;width:100%;aspect-ratio:var(--ar,.8);max-height:60vh;padding:0;border:0;background:#1b1611;border-radius:4px;cursor:zoom-in;overflow:hidden;box-shadow:inset 0 0 0 5px #b8924a,inset 0 0 0 7px #6e5326,0 14px 30px rgba(0,0,0,.3)} .mu-card-im img,.mu-card-im canvas{width:calc(100% - 22px);height:calc(100% - 22px);object-fit:contain;display:block;grid-area:1/1} .mu-card-lo ~ img{opacity:0;transition:opacity .3s}.mu-card-lo ~ img.ok{opacity:1} .mu-card-in{display:flex;flex-direction:column;gap:9px;min-width:0} .mu-card-k{margin:0;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-right:44px} .mu-card-in h3{margin:0;font-family:var(--f-title);font-size:clamp(22px,3vw,30px);line-height:1.12;text-wrap:balance;padding-right:30px} .mu-card-alt{margin:-4px 0 0;font-style:italic;color:var(--muted)} .mu-card-by{margin:0;font-size:16px;font-weight:600} .mu-card-by span{color:var(--muted);font-weight:400} .mu-card-f{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:2px 0;padding:10px 0;border-top:1px solid var(--cell-line);border-bottom:1px solid var(--cell-line);font-size:14px} .mu-card-f div{display:contents} .mu-card-f dt{color:var(--muted);font-weight:700;font-size:12.5px;padding-top:1px} .mu-card-f dd{margin:0} .mu-card-n{margin:0;font-size:15px;line-height:1.55;max-width:62ch} .mu-card-sc{margin:0;font-size:12.5px;color:var(--muted)} .mu-card-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:2px} .mu-card-a .btn{display:inline-flex;align-items:center;gap:7px;min-height:40px} .mu-card-a svg{width:18px;height:18px} .mu-favb[aria-pressed="true"] svg{color:var(--accent)} .mu-inhall{display:inline-flex;align-items:center;gap:6px;font-size:14px} .mu-inhall svg{width:17px;height:17px} .mu-card-nav{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)} .mu-card-nav .iconbtn{width:34px;height:34px} .mu-card-nav .iconbtn svg{width:18px;height:18px} .mu-card-src{margin:0;font-size:11.5px;color:var(--muted)} /* ---- visor de cerca ---- */ .mu-zoom{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:#0e0b09;color:#f6ecda;opacity:0;transition:opacity .2s} .mu-zoom.in{opacity:1} .mu-z-top{display:flex;align-items:center;gap:12px;padding:10px 14px;flex:none;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0))} .mu-z-t{display:flex;flex-direction:column;min-width:0;margin-right:auto;line-height:1.2} .mu-z-t b{font:600 19px "Cormorant Garamond",Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-z-t small{font-size:12.5px;opacity:.8} .mu-z-b{display:flex;gap:6px;flex:none} .mu-z-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;touch-action:none;cursor:grab;outline:none} .mu-z-stage:active{cursor:grabbing} .mu-z-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--focus)} .mu-z-img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;box-shadow:0 20px 60px rgba(0,0,0,.6)} .mu-z-img img,.mu-z-img canvas{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none} .mu-z-lo{filter:blur(2px)} .mu-z-hi{opacity:0;transition:opacity .35s} .mu-zoom.hi .mu-z-hi{opacity:1} .mu-z-msg{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.6);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center} .mu-zoom.na .mu-z-msg{bottom:auto;top:50%;transform:translate(-50%,-50%);padding:18px 22px;border-radius:12px;border:1px solid rgba(255,255,255,.2)} .mu-zoom.na .mu-z-msg b{font:600 20px "Cormorant Garamond",Georgia,serif} .mu-z-msg small{opacity:.8} .mu-z-h{margin:0;padding:6px 14px 10px;font-size:12.5px;opacity:.72;text-align:center;flex:none} /* ---- diálogos: plano y créditos ---- */ .mu-dlg{position:absolute;inset:0;z-index:25;display:grid;place-items:center;padding:16px;box-sizing:border-box;background:rgba(10,7,4,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s} .mu-dlg.in{opacity:1} .mu-dlg-c{display:flex;flex-direction:column;gap:12px;width:min(940px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:18px 20px 20px;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow)} [data-os] .mu-dlg-c{background:var(--client,var(--menu-bg))} .mu-dlg-h{display:flex;align-items:center;gap:10px} .mu-dlg-h h3{margin:0 auto 0 0;font-family:var(--f-title);font-size:22px} .mu-map-b{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start} .mu-map-svg{border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-bg);border:1px solid var(--cell-line);padding:8px;position:sticky;top:0} .mu-plan{display:block;width:100%;max-height:min(52vh,440px)} .mu-plan .mu-pl-rot,.mu-plan .mu-pl-gal{fill:var(--cell-bg2);stroke:var(--cell-line);stroke-width:.18} .mu-plan .here{stroke:var(--accent);stroke-width:.45} .mu-pl-r{cursor:pointer} .mu-pl-r .mu-pl-rr{fill:color-mix(in srgb,var(--pc) 42%,transparent);stroke:var(--pc);stroke-width:.25} .mu-pl-r.vis .mu-pl-rr{fill:color-mix(in srgb,var(--pc) 70%,transparent)} .mu-pl-r.here .mu-pl-rr{stroke:var(--accent);stroke-width:.55} .mu-pl-r:hover .mu-pl-rr{stroke:var(--win-fg);stroke-width:.4} .mu-pl-door{fill:var(--cell-bg2)} .mu-plan text{fill:var(--win-fg);text-anchor:middle;dominant-baseline:middle;font-family:var(--f-ui);pointer-events:none} .mu-pl-n{font-size:2.2px;font-weight:800} .mu-pl-t{font-size:1.25px;font-weight:600} .mu-pl-big{font-size:1.5px;opacity:.75} .mu-pl-me circle{fill:var(--accent);stroke:var(--win-bg);stroke-width:.3} .mu-pl-me path{fill:var(--accent)} .mu-map-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .mu-map-l button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:1px solid var(--cell-line);background:var(--cell-bg);color:var(--win-fg);border-radius:max(4px,calc(var(--radius)*.55));text-align:left;font:inherit;cursor:pointer} .mu-map-l button:hover{border-color:var(--pc)} .mu-map-l button[aria-current]{outline:2px solid var(--accent);outline-offset:-2px} .mu-num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pc);color:#fff;font:800 13px var(--f-ui);font-style:normal;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.5)} .mu-map-l span{display:flex;flex-direction:column;min-width:0;flex:1} .mu-map-l b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-map-l small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-vis{font-style:normal;font-weight:800;color:var(--accent)} .mu-map-f{margin:0;font-size:13px;color:var(--muted)} .mu-cred-i{margin:0;max-width:70ch;line-height:1.5} .mu-cred-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:14px 22px} .mu-cred-l>*{min-width:0} .mu-cred-l li{overflow-wrap:anywhere;word-break:break-word} .mu-cred-l h4{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--f-title);font-size:16px} .mu-cred-l h4 small{font:400 12px var(--f-ui);color:var(--muted)} .mu-cred-l ul{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.45} .mu-cred-l li span{color:var(--muted)} /* ---- visita guiada ---- */ .mu-tourbar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:26;display:flex;align-items:center;gap:8px;max-width:calc(100% - 24px);padding:7px 8px 7px 14px;border-radius:999px;background:var(--client,var(--menu-bg));color:var(--win-fg);border:var(--bw) solid var(--win-border);box-shadow:var(--shadow)} .mu-tourbar[hidden]{display:none} .mu-tb-k{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;white-space:nowrap;margin-right:4px} .mu-tb-k svg{width:18px;height:18px;color:var(--accent)} .mu-tourbar .iconbtn{width:36px;height:36px} .mu-tourbar .iconbtn svg{width:18px;height:18px} .mu-tourbar .iconbtn[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .mu-card.side~.mu-tourbar,.mu:has(.mu-card.side:not([hidden])) .mu-tourbar{left:calc((100% - min(410px,44%)) / 2)} .mu:has(.mu-card.peek:not([hidden])) .mu-tourbar{bottom:auto;top:62px} /* ---- pantalla completa ---- */ .win.fw[data-id="museo"] .win-body{padding-top:0} @media (hover:hover) and (pointer:fine){ .win.fw[data-id="museo"] .mu-top{transition:transform .28s ease,opacity .25s} .win.fw[data-id="museo"]:not(.fw-idle) .mu-top{transform:translateY(36px)} } /* ---- ventanas angostas (el tamaño de la ventana manda, no el de la pantalla) ---- */ @container mu (max-width:940px){ .mu-tool span{display:none} .mu-tool{padding:0;width:36px;justify-content:center} } @container mu (max-width:640px){ .mu-top{gap:8px;padding:8px 10px} .mu-views span{display:none} .mu-views button{padding:6px 10px} .mu-brand b{font-size:16px} .mu-brand small{display:none} .mu-sur{display:none} .mu-tools{gap:4px} .mu-tb{display:none} .mu-gal-in{padding:12px 12px 22px;gap:12px} .mu-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:18px 12px} .mu-card{padding:0;place-items:end stretch} .mu-card-c{grid-template-columns:110px minmax(0,1fr);gap:12px;width:100%;max-height:92%;padding:18px 16px 18px;border-radius:var(--radius) var(--radius) 0 0;border-width:var(--bw) 0 0} .mu-card-in h3{font-size:22px} .mu-map-b{grid-template-columns:1fr} .mu-map-svg{position:static} .mu-plan{max-height:38vh} .mu-banner{top:58px} .mu-banner b{font-size:20px} .mu-help{font-size:13px;bottom:12px} .mu-tourbar{bottom:10px;gap:4px;padding:6px} .mu-tb-k span{display:none} .mu-tourbar .btn{padding:0 10px;font-size:13px} } @container mu (max-width:420px){ .mu-brand{display:none} .mu-tools{margin-left:auto} } @media (max-width:720px){ .mu{height:100%;min-height:0} } @media (prefers-reduced-motion:reduce){ .mu-card,.mu-card-c,.mu-help,.mu-load,.mu-banner,.mu-fade,.mu-zoom,.mu-dlg,.mu-wc-im,.mu-z-hi,.mu-card-lo ~ img{transition:none!important} } /* 1.7 · plano con alas: una lista por ala (museo.js › muMapFill) */ .mu-map-ls{display:flex;flex-direction:column;gap:6px;min-width:0} .mu-map-h{margin:8px 0 2px;font-size:13px;letter-spacing:.04em;color:var(--muted)} .mu-map-h:first-child{margin-top:0} /* 1.7 · Galería: filtros por continente y mujeres artistas */ .mu-gf{display:flex;flex-wrap:wrap;gap:6px} .mu-gf .chip{height:30px;font-weight:600} .mu-gf .chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg,#fff);border-color:var(--accent)} /* ===== Pinacópolis 1.4 · misiones y pasaporte ===== */ /* sello */ .mu-stamp{display:block;flex:none;overflow:visible;--inkc:color-mix(in srgb,var(--ink) 68%,var(--win-fg))} .mu-stamp circle{fill:none;stroke:var(--inkc)} .mu-stamp .mu-st-o{stroke-width:3.4;fill:color-mix(in srgb,var(--ink) 7%,transparent)} .mu-stamp .mu-st-i{stroke-width:1.5;stroke-dasharray:2.2 1.6} .mu-stamp text{fill:var(--inkc);font-family:var(--f-title),Georgia,serif;text-anchor:middle} .mu-stamp .mu-st-t{font-size:8px;font-weight:700;letter-spacing:.9px;text-anchor:start} .mu-stamp .mu-st-n{font-size:25px;font-weight:800} .mu-stamp .mu-st-p{font-size:7px;font-weight:700;letter-spacing:.4px} .mu-stamp .mu-st-d{font-size:6.5px;font-weight:700;opacity:.85} /* pasaporte */ .mu-pass-c{width:min(1000px,100%)} .mu-pass-c .mu-dlg-h h3{display:flex;align-items:center;gap:9px} .mu-pass-c .mu-dlg-h h3 svg{width:24px;height:24px;color:var(--accent)} .mu-pass-sum{margin:-6px 0 0;font:700 13px var(--f-ui);color:var(--muted)} .mu-pass-tabs{display:flex;gap:4px;border-bottom:1px solid var(--cell-line)} .mu-pass-tab{padding:8px 14px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:700 14px var(--f-ui);cursor:pointer} .mu-pass-tab[aria-selected="true"]{color:var(--win-fg);border-bottom-color:var(--accent)} .mu-pass-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .mu-pass-p{display:flex;flex-direction:column;gap:12px;min-height:0} .mu-pass-i{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:80ch} .mu-pass-rooms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:start} .mu-stamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px} .mu-stc{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;padding:9px 4px 7px;border:1px dashed var(--cell-line);border-radius:max(4px,calc(var(--radius) * .55));background:color-mix(in srgb,var(--pc) 6%,var(--cell-bg));color:var(--win-fg);font:inherit;cursor:pointer} .mu-stc:hover{border-color:var(--pc)} .mu-stc.ok{border-style:solid;border-color:color-mix(in srgb,var(--pc) 50%,var(--cell-line))} .mu-stc[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px} .mu-stc:focus-visible{outline:3px solid var(--focus);outline-offset:1px} .mu-stc b{max-width:100%;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-stc-e{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--pc) 55%,var(--cell-line));box-sizing:border-box} .mu-stc-e i{font:800 20px var(--f-title),Georgia,serif;font-style:normal;color:var(--muted)} .mu-stc-e em{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(var(--pc) 0 calc(var(--d) * 180deg),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px))} .mu-pass-q{position:sticky;top:0} @media (max-width:760px){.mu-pass-rooms{grid-template-columns:1fr}.mu-pass-q{position:static}.mu-stamps{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.mu-stc-e{width:50px;height:50px}.mu-stc .mu-stamp{width:50px;height:50px}} /* misión de una sala */ .mu-ms-quest{display:flex;flex-direction:column;gap:4px;padding:12px 14px 10px;border:1px solid var(--cell-line);border-top:4px solid var(--pc);border-radius:max(4px,calc(var(--radius) * .55));background:var(--cell-bg)} .mu-ms-qh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .mu-ms-qk{margin:0;font:700 11.5px var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .mu-ms-qh h4{margin:2px 0 0;font-family:var(--f-title);font-size:21px;line-height:1.15} .mu-ms-sealed{margin:4px 0 0;font-size:12.5px;color:var(--muted)} .mu-ms-steps{list-style:none;margin:4px 0 0;padding:0} .mu-ms-s{display:flex;gap:11px;padding:11px 0} .mu-ms-s+.mu-ms-s{border-top:1px solid var(--cell-line)} .mu-ms-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--pc) 18%,transparent);color:var(--win-fg)} .mu-ms-ic svg{width:17px;height:17px} .mu-ms-s.ok .mu-ms-ic{background:var(--pri-bg);color:var(--pri-fg)} .mu-ms-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .mu-ms-b>p{margin:0} .mu-ms-k b{font:700 11.5px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .mu-ms-q{font-size:15px;line-height:1.45} .mu-ms-how{font-size:12.5px;line-height:1.45;color:var(--muted)} .mu-ms-ok{display:flex;gap:7px;align-items:flex-start;font-size:14px;line-height:1.45;outline:none} .mu-ms-ok svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--accent)} .mu-ms-s.ok .mu-ms-q{color:var(--muted)} .mu-ms-opts{display:flex;flex-wrap:wrap;gap:6px} .mu-ms-o{font-size:13.5px;white-space:normal;text-align:left;line-height:1.3;min-height:36px} .mu-ms-o.no{opacity:.55;text-decoration:line-through} .mu-ms-cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mu-ms-w{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:6px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius) * .5));background:var(--cell-bg2);color:var(--win-fg);font:inherit;text-align:left;cursor:pointer} .mu-ms-w:hover{border-color:var(--pc)} .mu-ms-wi{position:relative;flex:none;width:50px;height:50px;overflow:hidden;border-radius:3px;background:color-mix(in srgb,var(--pc) 40%,var(--cell-bg))} .mu-ms-wi img{width:100%;height:100%;object-fit:cover;display:block} .mu-ms-wt{display:flex;flex-direction:column;min-width:0} .mu-ms-wt b{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mu-ms-wt small{font-size:11.5px;color:var(--muted)} .mu-ms-acts{display:flex;flex-wrap:wrap;gap:12px} .mu-ms-go{display:inline-flex;align-items:center;gap:5px} .mu-ms-go svg{width:16px;height:16px} .mu-ms-fb{font-size:13px;font-weight:700;color:var(--danger)} .mu-ms-fb:empty{display:none} .mu-ms-fb.no{animation:muMsNo .4s} @keyframes muMsNo{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} @media (max-width:520px){.mu-ms-cmp{grid-template-columns:1fr}} /* galería: misión bajo la presentación de la sala */ .mu-gq{border:1px solid var(--cell-line);border-left:5px solid var(--pc);border-radius:max(4px,calc(var(--radius) * .55));background:var(--cell-bg)} .mu-gq>summary{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;list-style:none} .mu-gq>summary::-webkit-details-marker{display:none} .mu-gq>summary::after{content:"";width:8px;height:8px;margin-left:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s} .mu-gq[open]>summary::after{transform:rotate(-135deg) translateY(-1px)} .mu-gq>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .mu-gq-ic{display:grid;place-items:center;width:30px;height:30px;color:var(--pc)} .mu-gq-ic>svg{width:24px;height:24px} .mu-gq-ic .mu-stamp{width:30px;height:30px} .mu-gq>summary b{font-size:14.5px} .mu-gq-n{margin-left:auto;font-size:12.5px;color:var(--muted)} .mu-gq .mu-ms-quest{border:0;border-top:1px solid var(--cell-line);border-radius:0;background:none} .mu-gq .mu-ms-qk,.mu-gq .mu-ms-qh h4{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mu-gq .mu-ms-qh:not(:has(.mu-stamp)){display:none} /* ficha: «¿es esta?» */ .mu-ms-strip{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--pc) 60%,var(--cell-line));border-radius:max(4px,calc(var(--radius) * .55));background:color-mix(in srgb,var(--pc) 8%,transparent);outline:none} .mu-ms-strip>p{margin:0} .mu-ms-strip-k{display:flex;align-items:center;gap:7px;font:700 11.5px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .mu-ms-strip-k svg{width:17px;height:17px;color:var(--pc)} .mu-ms-strip-q{font-size:14px;line-height:1.45} .mu-ms-yes{align-self:flex-start;display:inline-flex;align-items:center;gap:6px} .mu-ms-yes svg{width:16px;height:16px} .mu-ms-strip.ok{border-style:solid} .mu-ms-strip.ok .mu-ms-strip-k{color:var(--win-fg)} .mu-ms-strip.ok .mu-ms-strip-k svg{color:var(--accent)} /* visor: barra de la misión y anillos */ .mu-z-ms{position:absolute;left:50%;bottom:46px;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:max-content;max-width:min(640px,calc(100% - 24px));box-sizing:border-box;padding:8px 10px 8px 12px;border-radius:14px;background:rgba(14,11,9,.86);color:#f6ecda;border:1px solid color-mix(in srgb,var(--pc) 70%,rgba(255,255,255,.3));box-shadow:0 10px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .mu-z-ms>p{margin:0;display:flex;flex-direction:column;gap:2px;min-width:0} .mu-z-ms b{font-size:14px;line-height:1.35} .mu-z-ms small{font-size:12.5px;opacity:.82} .mu-z-ms-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;color:color-mix(in srgb,var(--pc) 55%,#fff)} .mu-z-ms-ic svg{width:24px;height:24px} .mu-z-ms .btn{flex:none} .mu-z-ms.ok{border-color:rgba(160,230,170,.7)} .mu-z-ms.ok .mu-z-ms-ic{color:#9be3a7} .mu-z-ring{position:absolute;box-sizing:border-box;border:3px solid #9be3a7;border-radius:10px;box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 24px rgba(155,227,167,.6);pointer-events:none;animation:muRing 1.2s ease-out 2} .mu-z-ring.tap{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border-color:#ffb3a8;box-shadow:0 0 0 2px rgba(0,0,0,.45);animation:muTap .9s ease-out forwards} @keyframes muRing{50%{box-shadow:0 0 0 2px rgba(0,0,0,.45),0 0 40px rgba(155,227,167,.95)}} @keyframes muTap{from{transform:scale(.5);opacity:1}to{transform:scale(1.4);opacity:0}} @media (max-width:560px){.mu-z-ms{bottom:52px;flex-wrap:wrap}.mu-z-ms>p{flex:1 1 calc(100% - 50px)}.mu-z-ms .btn{margin-left:42px}} /* plano: sellos */ .mu-pl-stamp circle{fill:color-mix(in srgb,var(--win-bg) 70%,transparent);stroke:var(--win-fg);stroke-width:.3} .mu-pl-stamp circle.in{fill:none;stroke-width:.14;stroke-dasharray:.35 .25} .mu-pl-stamp .ck{fill:none;stroke:var(--win-fg);stroke-width:.38;stroke-linecap:round;stroke-linejoin:round} .mu-pl-sl{display:grid;place-items:center;flex:none;margin-left:auto} .mu-pl-sl .mu-stamp{width:26px;height:26px} /* sala 3D: aviso de la misión */ .mu-qchip{position:absolute;left:14px;top:68px;transition:opacity .25s;z-index:4;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:5px 14px 5px 7px;border:var(--bw) solid var(--win-border);border-radius:999px;background:var(--client,var(--menu-bg));color:var(--menu-fg);font:700 13px var(--f-ui);box-shadow:var(--shadow);cursor:pointer} .mu-qchip>svg{width:22px;height:22px;flex:none;color:var(--pc)} .mu-qchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mu-qchip:focus-visible{outline:3px solid var(--focus);outline-offset:2px} .mu-qchip[hidden]{display:none} @container mu (max-width:620px){.mu-banner.in~.mu-qchip{opacity:0;pointer-events:none}.mu-qchip{top:62px;left:10px}} /* rutas */ .mu-routes{display:flex;flex-direction:column;gap:8px} .mu-route{border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius) * .55));background:var(--cell-bg)} .mu-route>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 14px;cursor:pointer;list-style:none} .mu-route>summary::-webkit-details-marker{display:none} .mu-route>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .mu-route-h{display:flex;flex-direction:column;min-width:0} .mu-route-h b{font-size:15.5px;font-family:var(--f-title)} .mu-route-h small{font-size:12.5px;color:var(--muted)} .mu-route-n{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--f-ui);font-variant-numeric:tabular-nums} .mu-route-n svg{width:15px;height:15px;color:var(--accent)} .mu-route-bar{grid-column:1/-1;display:block;height:4px;border-radius:4px;background:var(--cell-line);overflow:hidden} .mu-route-bar>i{display:block;height:100%;background:var(--accent)} .mu-stops{list-style:none;margin:0;padding:0 14px 10px} .mu-stop{display:flex;gap:10px;padding:9px 0;border-top:1px dashed var(--cell-line)} .mu-stop-n{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--cell-line);font:700 12px var(--f-ui);color:var(--muted);box-sizing:border-box} .mu-stop.ok .mu-stop-n{border:0;background:var(--pri-bg);color:var(--pri-fg)} .mu-stop-n svg{width:14px;height:14px} .mu-stop-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .mu-stop-c{margin:0;font-size:14px;line-height:1.45} .mu-stop-r{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--muted)} .mu-stop .mu-ms-w{max-width:420px} .mu-route-end{margin:0 14px 12px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--cell-bg2);font-size:13.5px;font-style:italic;line-height:1.45} /* museo */ .mu-mms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px} .mu-mm{display:flex;gap:12px;padding:12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius) * .55));background:var(--cell-bg)} .mu-mm-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--cell-bg2);color:var(--muted)} .mu-mm.ok .mu-mm-ic{background:var(--pri-bg);color:var(--pri-fg)} .mu-mm-ic svg{width:18px;height:18px} .mu-mm>div{flex:1;min-width:0} .mu-mm b{font-size:15px} .mu-mm p{margin:2px 0 8px;font-size:13px;line-height:1.45;color:var(--muted)} .mu-mm-bar{display:block;height:6px;border-radius:6px;background:var(--cell-line);overflow:hidden} .mu-mm-bar>i{display:block;height:100%;background:var(--accent)} .mu-mm small{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .mu-selfs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px} .mu-self-x{display:flex;align-items:center;gap:9px;padding:6px;border:1px dashed var(--cell-line);border-radius:max(4px,calc(var(--radius) * .5))} .mu-self-x i{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:3px;background:var(--cell-bg2);font:800 20px var(--f-title),Georgia,serif;font-style:normal;color:var(--muted)} .mu-self-x small{font-size:12px;color:var(--muted)} @media (prefers-reduced-motion:reduce){.mu-z-ring,.mu-z-ring.tap,.mu-ms-fb.no{animation:none}} /* ================= Pinacópolis · contenido sensible (museo_sens.js) ================= */ /* el lienzo cubierto (Ocultar): tela cruda con trama diagonal; nada de la obra se adivina */ .msv-h::before{content:'';position:absolute;z-index:1;background:repeating-linear-gradient(45deg,rgba(0,0,0,.09) 0 2px,transparent 2px 6px),linear-gradient(135deg,#5d554b,#3f3832)} /* la marca encima: ojo tachado y el tipo de contenido */ .msv-o{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;max-width:calc(100% - 10px);box-sizing:border-box;padding:6px 9px;border-radius:10px;background:rgba(14,10,7,.58);color:#fff4e4;font-size:11px;line-height:1.2;text-align:center;pointer-events:none} .msv-oi{display:grid;place-items:center} .msv-oi svg{width:18px;height:18px} .msv-o small{font-size:inherit;font-weight:600;letter-spacing:.01em} /* Galería */ .mu-wc-im.msv-b > :is(.mu-th,img,canvas){filter:blur(7px) saturate(.85)} .mu-wc-im.msv-h > :is(.mu-th,img,canvas){opacity:0} .mu-wc-im.msv-h::before{inset:8%;box-shadow:0 0 0 3px #b8924a,0 0 0 4px rgba(0,0,0,.25),0 8px 18px rgba(0,0,0,.28)} /* misiones (miniaturas de 50 px): solo el ojo */ .mu-ms-wi.msv-b > :is(.mu-th,img,canvas){filter:blur(5px)} .mu-ms-wi.msv-h > :is(.mu-th,img,canvas){opacity:0} .mu-ms-wi.msv-h::before{inset:0} .mu-ms-wi .msv-o{padding:4px;border-radius:50%} .mu-ms-wi .msv-o small{display:none} .mu-ms-wi .msv-oi svg{width:16px;height:16px} /* ficha (Galería): la imagen grande */ .mu-card-im.msv{position:relative} .mu-card-im.msv-b > :is(img,canvas){filter:blur(16px) saturate(.85)} .mu-card-im.msv-h > :is(img,canvas){opacity:0!important} .mu-card-im.msv-h::before{inset:11px} .mu-card-im .msv-o{gap:6px;padding:10px 14px;border-radius:12px;font-size:13px} .mu-card-im .msv-oi svg{width:26px;height:26px} /* visor «ver de cerca»: la obra queda debajo, borrosa o cubierta, con «Ver obra» al centro */ .mu-z-stage.msv-b .mu-z-img > *{filter:blur(34px) saturate(.85)!important} .mu-z-stage.msv-h .mu-z-img{opacity:0} .mu-z-stage.msv .mu-z-msg{display:none} .mu-z-stage.msv{cursor:default} .mu-z-stage.msv-h::before{display:none} .msv-ob{inset:0;left:0;top:0;transform:none;max-width:none;justify-content:center;gap:8px;padding:24px;border-radius:0;background:rgba(10,7,4,.34);font-size:14px;pointer-events:auto} .mu-z-stage.msv-h .msv-ob{background:repeating-linear-gradient(45deg,rgba(0,0,0,.09) 0 2px,transparent 2px 6px),linear-gradient(135deg,#4b443c,#2f2a25)} .msv-ob .msv-oi svg{width:34px;height:34px} .msv-ob b{font-size:17px} .msv-ob small{max-width:36ch;font-weight:400;font-size:13px;opacity:.9;letter-spacing:0} .msv-ob .btn{margin-top:6px} .msv-ob .btn svg,.msv-see svg{width:17px;height:17px} /* ajustes */ .msv-c{width:min(540px,100%)} .msv-i{margin:0;line-height:1.45;max-width:60ch} .msv-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:10px 0;border-top:1px solid var(--cell-line)} .msv-rl{margin:0;display:flex;flex-direction:column;gap:1px} .msv-rl small{opacity:.75} .msv-seg{display:flex;flex-wrap:nowrap} .msv-seg button{min-height:34px;padding:0 12px} .msv-f{margin:0;font-size:12.5px;opacity:.8;line-height:1.4} /* aviso de la primera visita: abajo a lo ancho en pantallas angostas; en anchas, abajo a la derecha (la ayuda de la sala va a la izquierda) */ .msv-note{position:absolute;z-index:22;left:12px;right:12px;bottom:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;box-sizing:border-box;padding:10px 12px 10px 14px;border-radius:14px;background:var(--client,var(--menu-bg));color:var(--win-fg);border:var(--bw) solid var(--win-border);box-shadow:var(--shadow)} .msv-note p{flex:1 1 240px;margin:0;font-size:13px;line-height:1.4} .msv-ni{display:grid;place-items:center;flex:none} .msv-ni svg{width:22px;height:22px} .msv-na{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;justify-content:flex-end} .msv-na .btn{min-height:32px;flex:1 1 auto} .mu[data-view="hall"]:has(.mu-help:not(.off)) .msv-note{bottom:128px} @container mu (min-width:980px){ .msv-note{left:auto;right:64px;width:max-content;max-width:min(600px,calc(100% - 540px))} .msv-na .btn{flex:0 0 auto} .mu[data-view="hall"]:has(.mu-help:not(.off)) .msv-note{bottom:10px} .mu:has(.mu-card.side:not([hidden])) .msv-note{right:calc(min(410px,44%) + 16px);max-width:min(560px,calc(100% - min(410px,44%) - 500px))} } .mu:has(.mu-tourbar:not([hidden])) .msv-note,.mu:has(.mu-card:not([hidden]):not(.side)) .msv-note,.mu:has(.mu-zoom:not([hidden])) .msv-note,.mu:has(.mu-dlg:not([hidden])) .msv-note{display:none} /* ================= Pinacópolis · esculturas del vestíbulo (museo_esc.js) ================= */ .mue-c{width:min(520px,100%);gap:10px} .mue-c .mu-dlg-h{align-items:flex-start} .mue-c .mu-dlg-h > div{margin-right:auto;min-width:0} .mue-c .mu-dlg-h h3{margin:0;line-height:1.15;text-wrap:balance} .mue-k{margin:0 0 3px;font-size:12.5px;color:var(--muted);font-weight:600} .mue-im{position:relative;aspect-ratio:4/3;max-height:46vh;border-radius:max(4px,calc(var(--radius)*.6));overflow:hidden;background:radial-gradient(circle at 50% 35%,#3b332b,#16120f 70%)} .mue-im img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain} .mue-by{margin:0;font-weight:700} .mue-by span{font-weight:400;color:var(--muted)} .mue-f{margin:0} .mue-n{margin:0;line-height:1.5;max-width:62ch} .mue-src{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--muted)} .mue-src a{color:var(--accent);font-weight:600} /* plano: las esculturas y el vestíbulo en la lista del ala */ .mu-plan .mu-pl-esc{fill:var(--accent);stroke:var(--win-bg);stroke-width:.18} .mue-num{background:color-mix(in srgb,var(--accent) 80%,#000)} .mue-num svg{width:16px;height:16px} .mue-ml{--pc:var(--accent)} /* Galería: tarjetas de las esculturas (fondo oscuro de vitrina, como la ficha) */ .mue-wc-im{background:radial-gradient(circle at 50% 35%,#3b332b,#16120f 70%)} .mue-wc-im img{width:100%;height:100%;object-fit:contain} .mue-ph{display:grid;place-items:center;width:100%;height:100%;color:rgba(255,240,215,.55)} .mue-ph svg{width:38%;height:38%} #mu-tab-esc svg{width:16px;height:16px;flex:none} /* ================= 1.21 · La galería escondida (parts/galeria*.js) ================= Abajo, la interfaz es de la Bóveda de Arcadia: placas de piedra y latón, la energía como una llama en un tubo de vidrio y letras talladas (Cinzel). Lo del museo (barra de arriba, mira, ficha, ayuda, cámara) se esconde mientras estás abajo. */ .mu.ge-on .mu-top,.mu.ge-on .msv-note{display:none!important} /* (abajo no hay obras todavía: el aviso de desnudos vuelve al subir) */ .mu-h.ge-on>*:not(.mu-cv):not(.ge-hud):not(.mu-joy):not(.jmp-btn):not(.mu-load){display:none!important} .mu-h.ge-on .mu-cv{cursor:crosshair} .ge-hud{--ge-brass:#c79a4e;--ge-brassD:#6e5124;--ge-stone:#2a2119;--ge-ink:#fff3dc;--ge-flame:#ffb347;position:absolute;inset:0;z-index:4;pointer-events:none;color:var(--ge-ink);font-family:var(--f-ui)} .ge-hud button{pointer-events:auto} /* la placa: energía y arma */ .ge-plq{position:absolute;left:12px;top:12px;display:flex;flex-direction:column;gap:7px;padding:9px 12px 10px;border-radius:12px;border:1px solid rgba(199,154,78,.55); background:linear-gradient(180deg,rgba(52,40,28,.86),rgba(24,18,13,.88));box-shadow:inset 0 1px 0 rgba(255,226,170,.22),inset 0 -2px 6px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.45)} .ge-plq::before,.ge-plq::after{content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f3d79a,#7a5626)} .ge-plq::before{left:6px}.ge-plq::after{right:6px} .ge-hp{position:relative;width:150px;height:14px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#120c08,#21160e);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 2px var(--ge-brassD),0 0 0 3px rgba(240,200,130,.35);transition:width .4s cubic-bezier(.32,.72,0,1)} .ge-hp i{position:absolute;inset:0;transform-origin:0 50%} .ge-hp-g{background:rgba(255,120,60,.45)} .ge-hp-f{background:linear-gradient(180deg,#ffe2a0 0%,#ffb347 35%,#e2601d 80%,#a63a10);box-shadow:inset 0 -2px 3px rgba(120,30,0,.5)} .ge-hp-f::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 36px,rgba(30,14,4,.55) 36px 37.5px)} .ge-hp.low .ge-hp-f{animation:geLow .8s ease-in-out infinite} @keyframes geLow{50%{filter:brightness(1.5) saturate(1.3)}} .ge-wp{display:flex;align-items:center;gap:8px;min-height:26px} .ge-wp-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#ffe8b8;background:radial-gradient(circle at 35% 30%,#5a4325,#1d150d);box-shadow:0 0 0 2px var(--ge-brass),inset 0 1px 2px rgba(255,230,180,.3)} .ge-wp-ic:empty{opacity:.35} .ge-wp-ic svg{width:18px;height:18px} .ge-wp-n{font:600 13px/1.1 var(--f-ui);letter-spacing:.02em;color:#f3dfb8} .ge-heat{position:relative;width:56px;height:6px;border-radius:3px;background:#140d08;box-shadow:0 0 0 1px var(--ge-brassD);overflow:hidden} .ge-heat i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(90deg,#5ad3ff,#ffd166 60%,#ff5b3a)} .ge-heat.over i{animation:geLow .3s linear infinite} /* 1.22: el tanque del fijador (barniz ámbar) */ .ge-heat.var i{background:linear-gradient(90deg,#8a4a10,#e8a33a 70%,#ffd98a)} /* volver a la rotonda */ .ge-tr{position:absolute;right:12px;top:12px;display:flex;gap:8px;align-items:center} .ge-tr .btn{display:inline-flex;align-items:center;gap:6px;opacity:.94} .ge-tr .btn svg{width:18px;height:18px} .ge-cam[aria-pressed="true"]{border-color:#f3c977} /* 1.21.1: la mira de la primera persona (un anillo de latón; se calienta cuando apuntas a algo) */ .ge-cross{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:1.5px solid rgba(255,226,170,.75);box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.25);transition:transform .12s cubic-bezier(.32,.72,0,1),border-color .12s} .ge-cross::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:rgba(255,236,196,.95);box-shadow:0 0 2px rgba(0,0,0,.6)} .ge-cross[hidden]{display:none} .ge-cross.on{transform:scale(1.35);border-color:#ffb347} .ge-cross.on::after{background:#ffcf7a} /* el nombre de la sala (tallado, con brillo de fuego) */ .ge-ban{position:absolute;left:0;right:0;top:18%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;text-align:center} .ge-ban[hidden]{display:none} .ge-ban b{font:700 clamp(24px,4.2vw,50px)/1.08 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.1em;text-indent:.1em;text-wrap:balance;color:#ffe9c2;text-shadow:0 0 22px rgba(255,150,60,.55),0 2px 0 rgba(60,30,10,.8),0 3px 12px rgba(0,0,0,.7)} .ge-ban small{font:600 14px/1.2 var(--f-ui);letter-spacing:.06em;color:rgba(255,226,180,.82);text-shadow:0 1px 6px rgba(0,0,0,.8)} .ge-ban small:empty{display:none} .ge-ban.on{animation:geBan 3.4s ease both} @keyframes geBan{0%{opacity:0;transform:translateY(10px)}14%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}} /* el jefe */ .ge-boss{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;width:min(520px,calc(100% - 300px))} .ge-boss[hidden]{display:none} .ge-boss b{font:700 18px/1 Cinzel,Georgia,serif;letter-spacing:.14em;color:#ffd9a8;text-shadow:0 0 14px rgba(255,90,60,.6),0 2px 6px rgba(0,0,0,.8)} .ge-boss>i{position:relative;display:block;width:100%;height:12px;border-radius:6px;overflow:hidden;background:#140c09;box-shadow:0 0 0 2px var(--ge-brassD),0 0 0 3px rgba(240,200,130,.35),0 6px 16px rgba(0,0,0,.5)} .ge-boss>i>i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(90deg,#6e1f4a,#c9334a 40%,#ff8a3d);transition:transform .25s ease} /* usar (E) */ .ge-prompt{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid rgba(199,154,78,.6); background:rgba(26,19,12,.82);color:#fff1d6;font:600 14px/1.2 var(--f-ui);box-shadow:0 0 18px rgba(255,170,70,.18),0 6px 16px rgba(0,0,0,.45);cursor:pointer} .ge-prompt[hidden]{display:none} .mu-h.touch .ge-prompt{padding-left:14px} .mu-h.touch .ge-prompt kbd{display:none} /* en el celular el aviso mismo es el botón */ .ge-prompt kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:linear-gradient(180deg,#f3d79a,#b8893f);color:#2a1a08;font:700 12px/1 var(--f-ui);box-shadow:0 2px 0 #6e5124} /* avisos y ayuda */ .ge-toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100% - 32px));margin:0;padding:9px 16px;border-radius:12px;border:1px solid rgba(199,154,78,.5);background:rgba(22,15,9,.86);color:#fff3dc;font:600 15px/1.35 var(--f-ui);text-align:center;text-wrap:balance;box-shadow:0 0 22px rgba(255,150,60,.2)} .ge-help{position:absolute;left:12px;top:96px;max-width:min(470px,calc(100% - 24px));margin:0;padding:9px 13px;border-radius:10px;background:rgba(14,10,7,.8);font:500 14px/1.42 var(--f-ui);box-shadow:0 8px 22px rgba(0,0,0,.35)} .ge-toast[hidden],.ge-help[hidden]{display:none} /* lo que encontraste en un cofre */ .ge-loot{position:absolute;left:50%;top:30%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:min(460px,calc(100% - 32px));padding:12px 18px 12px 12px;border-radius:16px;border:1px solid rgba(240,200,130,.6); background:linear-gradient(180deg,rgba(60,44,26,.92),rgba(26,18,11,.94));box-shadow:inset 0 1px 0 rgba(255,230,180,.25),0 0 40px rgba(255,170,70,.35),0 12px 30px rgba(0,0,0,.5)} .ge-loot[hidden]{display:none} .ge-loot.on{animation:geLoot 4.6s cubic-bezier(.32,.72,0,1) both} @keyframes geLoot{0%{opacity:0;transform:translateX(-50%) scale(.8)}10%{opacity:1;transform:translateX(-50%) scale(1)}86%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}} .ge-loot-ic{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;color:#ffe3a8;background:radial-gradient(circle at 35% 30%,#6b4f2a,#1f160d);box-shadow:0 0 0 2px var(--ge-brass),0 0 18px rgba(255,180,80,.5)} .ge-loot-ic svg{width:30px;height:30px} .ge-loot-t{display:flex;flex-direction:column;gap:3px;min-width:0} .ge-loot-t b{font:700 17px/1.2 Cinzel,Georgia,serif;letter-spacing:.04em;color:#ffe2b0} .ge-loot-t small{font:500 13.5px/1.35 var(--f-ui);color:rgba(255,236,206,.86)} /* las marcas de los vigías */ .ge-marks{position:absolute;inset:0;overflow:hidden} .ge-mk{position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;will-change:transform} .ge-mk i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ffd166 calc(var(--d,0)*360deg),rgba(255,209,102,.18) 0);-webkit-mask:radial-gradient(circle,transparent 54%,#000 56%);mask:radial-gradient(circle,transparent 54%,#000 56%)} .ge-mk b{font:800 18px/1 var(--f-ui);color:#ffe2a0;text-shadow:0 0 8px rgba(255,170,60,.8),0 1px 3px rgba(0,0,0,.9)} .ge-mk.al i{background:#ff5a3c;-webkit-mask:radial-gradient(circle,transparent 54%,#000 56%);mask:radial-gradient(circle,transparent 54%,#000 56%)} .ge-mk.al b{color:#ffd0c4;font-size:22px;animation:geAl .35s ease-in-out 3} @keyframes geAl{50%{transform:scale(1.4)}} /* los botones táctiles (junto al de saltar) */ .ge-tb{position:absolute;display:grid;place-items:center;padding:0;border-radius:50%;border:2px solid rgba(240,200,130,.85);background:radial-gradient(circle at 40% 32%,rgba(90,66,36,.8),rgba(24,17,10,.78));color:#ffe3ad;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 12px rgba(0,0,0,.4)} .ge-tb svg{width:52%;height:52%} .ge-tb.on{background:radial-gradient(circle at 40% 32%,#ffd98f,#d48a2c);color:#2a1606;transform:scale(.94)} .ge-tb[hidden]{display:none} .ge-tb-atk{right:88px;bottom:30px;width:70px;height:70px} .ge-tb-atk svg{width:46%;height:46%} .ge-tb-roll{right:21px;bottom:28px;width:50px;height:50px} .ge-tb-swap{right:102px;bottom:114px;width:44px;height:44px} /* el panel (la dificultad, el brasero): una tablilla de piedra */ .ge-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:auto;padding:20px 22px 18px;border-radius:18px;pointer-events:auto; border:1px solid rgba(240,200,130,.55);background:linear-gradient(180deg,rgba(64,50,34,.96),rgba(30,23,16,.97));box-shadow:inset 0 1px 0 rgba(255,232,190,.25),0 24px 60px rgba(0,0,0,.6)} .ge-panel[hidden]{display:none} .ge-panel.on{animation:gePanel .45s cubic-bezier(.32,.72,0,1) both} @keyframes gePanel{0%{opacity:0;transform:translate(-50%,-46%) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%)}} .ge-panel h3{margin:0 0 4px;font:700 22px/1.2 Cinzel,Georgia,serif;letter-spacing:.08em;color:#ffe2b2;text-align:center} .ge-pq{margin:0 0 14px;text-align:center;color:rgba(255,238,210,.9);font:500 15px/1.4 var(--f-ui)} .ge-pl{margin:0 0 6px;font:700 12px/1 var(--f-ui);letter-spacing:.08em;color:rgba(255,220,160,.75)} .ge-pn{margin:12px 0 0;text-align:center;color:rgba(255,232,200,.7);font:500 13px/1.35 var(--f-ui)} .ge-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .ge-seg button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:10px 11px;border-radius:12px;border:1px solid rgba(199,154,78,.4);background:rgba(18,13,9,.6);color:#f6e6c8;text-align:left;cursor:pointer;transition:transform .15s cubic-bezier(.32,.72,0,1),border-color .15s} .ge-seg button b{font:700 15px/1.1 var(--f-ui)} .ge-seg button small{font:500 12.5px/1.3 var(--f-ui);color:rgba(255,232,200,.72)} .ge-seg button[aria-pressed="true"]{border-color:#f3c977;background:linear-gradient(180deg,rgba(120,84,36,.6),rgba(54,38,18,.7));box-shadow:0 0 0 1px #f3c977,0 0 18px rgba(255,170,70,.25)} .ge-seg button:active{transform:scale(.98)} .ge-seg button:focus-visible,.ge-pacts .btn:focus-visible{outline:2px solid #ffd98f;outline-offset:2px} .ge-pacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px} /* 1.22: viajar entre braseros encendidos */ .ge-trav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px} .ge-trav .btn{flex:1 1 150px;justify-content:center} .ge-trav .btn:focus-visible{outline:2px solid #ffd98f;outline-offset:2px} .ge-pl{margin-top:12px} .ge-pacts .btn svg{width:18px;height:18px} /* golpe, desvanecerse y fundido */ .ge-hurt{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(200,40,20,.55))} .ge-hurt.on{animation:geHurt .5s ease-out} @keyframes geHurt{0%{opacity:1}100%{opacity:0}} .ge-dead{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(ellipse at 50% 50%,rgba(20,10,6,.35),rgba(6,3,2,.85))} .ge-dead[hidden]{display:none} .ge-dead.on{animation:geDead 2.6s ease both} @keyframes geDead{0%{opacity:0}25%{opacity:1}85%{opacity:1}100%{opacity:.9}} .ge-dead b{font:700 clamp(28px,5vw,52px)/1 Cinzel,Georgia,serif;letter-spacing:.12em;color:#ffcf9a;text-shadow:0 0 30px rgba(255,120,40,.6)} .ge-dead small{font:500 15px/1.3 var(--f-ui);color:rgba(255,226,190,.85)} .ge-fade{position:absolute;inset:0;z-index:5;opacity:0;background:#060403} @media (hover:hover) and (pointer:fine){ .win.fw .ge-plq,.win.fw .ge-tr{top:50px} .win.fw .ge-boss{top:52px} .win.fw .ge-help{top:134px} .win.fw.fw-idle .ge-plq,.win.fw.fw-idle .ge-tr{top:12px} .win.fw.fw-idle .ge-boss{top:14px} .win.fw.fw-idle .ge-help{top:96px} } @media (max-width:720px){ .ge-plq{padding:7px 10px 8px} .ge-hp{height:12px} .ge-tr .btn span{display:none} .ge-tr .btn{padding:6px 9px} .ge-boss{top:60px;width:calc(100% - 32px)} .ge-help{top:88px;font-size:13px} .ge-toast{bottom:auto;top:120px;font-size:14px} .ge-prompt{bottom:auto;top:62%} .ge-seg{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .ge-ban.on,.ge-loot.on,.ge-panel.on,.ge-dead.on,.ge-mk.al b,.ge-hp.low .ge-hp-f{animation:none} .ge-hp{transition:none} } /* ================= Andromeda Phantom DAW: la ventana y su iframe (el estudio se toca con el ratón: la barra de la ventana no se esconde) ================= */ .win[data-id="synth"] .win-body{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden} .sy-frame{display:block;flex:none;width:100%;height:min(84vh,980px);min-height:300px;margin:0;border:0;background:transparent;opacity:0;transition:opacity .25s ease} .sy-frame.sy-ready{opacity:1} .win.max .sy-frame{flex:1 1 auto;height:auto;min-height:0} .sy-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--win-fg);font:600 15px var(--f-ui);text-align:center;pointer-events:none} .sy-on .sy-wait{display:none} .sy-spin{width:34px;height:34px;box-sizing:border-box;border-radius:50%;border:3px solid var(--accent);border-right-color:transparent;animation:sySpin .9s linear infinite} @keyframes sySpin{to{transform:rotate(360deg)}} @media (max-width:720px){ .sy-frame{flex:1 1 auto;height:auto;min-height:0} } /* pantalla completa: la barra de la ventana se queda a la vista (el estudio se usa con el ratón y la salida no debe esconderse) */ .win.fw[data-id="synth"] .win-body{padding:0} @media (hover:hover) and (pointer:fine){ .win.fw[data-id="synth"] .win-title,.win.fw.fw-idle[data-id="synth"] .win-title{position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none} } .win.fw.fw-idle[data-id="synth"]{cursor:auto} @media (prefers-reduced-motion:reduce){ .sy-frame{transition:none} .sy-spin{animation:none;border-right-color:var(--accent);opacity:.6} } /* ---------- Sonidos del sistema ---------- */ .sns{display:grid;gap:18px} .sns-mute{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 14px;border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-play);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-mute[hidden]{display:none} .sns-mute-ic{display:grid;place-items:center;color:var(--danger)} .sns-mute-ic svg{width:24px;height:24px} .sns-mute p{margin:0;flex:1 1 240px;font-weight:700} /* mezcladora: sonido general + sonidos del sistema */ .sns-mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;align-items:start} .sns-ch{display:grid;gap:10px;padding:12px 14px;border-radius:var(--radius);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-sw{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ic h st kn" "ic d st kn";align-items:center;gap:2px 12px;width:100%;padding:4px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:calc(var(--radius)*.5)} .sns-sw:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-sw-ic{grid-area:ic;display:grid;place-items:center;width:42px;height:42px;border-radius:max(6px,calc(var(--radius)*.6));background:var(--pri-bg);color:var(--pri-fg);transition:background .2s,color .2s} .sns-sw[aria-checked="false"] .sns-sw-ic{background:var(--cell-bg2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-sw-ic svg{width:23px;height:23px} .sns-sw-h{grid-area:h;align-self:end;font-family:var(--f-title);font-size:1.04rem;line-height:1.2} .sns-sw-d{grid-area:d;align-self:start;color:var(--muted);font-size:.8rem;line-height:1.35} .sns-sw-st{grid-area:st;font-size:.78rem;font-weight:700;color:var(--muted)} .sns-sw .wp-knob{grid-area:kn;margin-left:0} .sns-sw[aria-checked="true"]>.wp-knob{background:var(--accent)} .sns-vol{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:0 4px 2px 58px} .sns-ch-sys .sns-vol{margin-top:2px} .sns-vol-t{font-size:.84rem;font-weight:700} .sns-vol output{font:700 .95rem/1 var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap} .sns-vol input,.sns-md-f input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer} .sns-vol input:focus-visible,.sns-md-f input:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px;border-radius:4px} .sns-vol input::-webkit-slider-runnable-track,.sns-md-f input::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p,100%),var(--cell-bg2) var(--p,100%));box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-vol input::-moz-range-track,.sns-md-f input::-moz-range-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p,100%),var(--cell-bg2) var(--p,100%));box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-vol input::-webkit-slider-thumb,.sns-md-f input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:50%;background:var(--accent-fg,#fff);border:3px solid var(--accent);box-sizing:border-box;box-shadow:0 1px 4px rgba(0,0,0,.3)} .sns-vol input::-moz-range-thumb,.sns-md-f input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent-fg,#fff);border:3px solid var(--accent);box-sizing:border-box;box-shadow:0 1px 4px rgba(0,0,0,.3)} .sns-offnote{padding:0 4px 0 58px} .sns-offnote[hidden]{display:none} .sns.sys-off .sns-vol{opacity:.6} /* esquemas */ .sns-sec{display:grid;gap:10px} .sns-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px} .sns-h h3{margin:0;font-family:var(--f-title);font-size:1.15rem} .sns-h .hint{flex:1 1 280px} .sns-acts{display:flex;align-items:center;gap:10px;margin-left:auto} .sns-count{font-size:.8rem;font-weight:700;color:var(--accent);white-space:nowrap} .sns-schs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));gap:10px} .sns-sch{position:relative;display:flex;align-items:center;gap:11px;min-width:0;min-height:68px;padding:10px 12px;border:1px solid var(--cell-line);background:var(--cell-bg);color:var(--win-fg);border-radius:max(6px,calc(var(--radius)*.6));cursor:pointer;text-align:left;font:inherit;overflow:hidden;isolation:isolate} .sns-sch::before{content:"";position:absolute;inset:0;z-index:-1;color:var(--accent);opacity:.16;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 85%);mask-image:linear-gradient(90deg,transparent 30%,#000 85%)} .sns-sch[data-sns-sch="arc"]::before{background:repeating-radial-gradient(circle at 105% 120%,currentColor 0 1.5px,transparent 1.5px 9px)} .sns-sch[data-sns-sch="tema"]::before{background:radial-gradient(circle at 86% 30%,currentColor 0 3px,transparent 4px),radial-gradient(circle at 93% 52%,currentColor 0 2.2px,transparent 3.2px),radial-gradient(circle at 80% 70%,currentColor 0 2.6px,transparent 3.6px),linear-gradient(90deg,transparent 40%,var(--cell-on));opacity:.22} .sns-sch[data-sns-sch="cri"]::before{background:linear-gradient(118deg,transparent 52%,currentColor 55%,transparent 58%,transparent 64%,currentColor 66%,transparent 68%),radial-gradient(circle at 88% 26%,currentColor 0 1.5px,transparent 2.5px)} .sns-sch[data-sns-sch="mad"]::before{background:repeating-linear-gradient(176deg,currentColor 0 1px,transparent 1px 5px,currentColor 5px 5.6px,transparent 5.6px 11px)} .sns-sch[data-sns-sch="bit"]::before{background:linear-gradient(90deg,currentColor 1px,transparent 1px) 0 0/6px 6px,linear-gradient(currentColor 1px,transparent 1px) 0 0/6px 6px} .sns-sch[data-sns-sch="suave"]::before{background:radial-gradient(ellipse 60% 90% at 92% 110%,currentColor,transparent 70%)} .sns-sch[data-sns-sch="min"]::before{background:radial-gradient(circle at 88% 50%,currentColor 0 2.5px,transparent 3.5px)} .sns-sch-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cell-bg2);color:var(--accent);box-shadow:inset 0 0 0 1px var(--cell-line);transition:background .2s,color .2s} .sns-sch-ic svg{width:22px;height:22px} .sns-sch-t{display:flex;flex-direction:column;gap:2px;min-width:0} .sns-sch-t b{font-family:var(--f-title);font-size:1rem;line-height:1.15} .sns-sch-t small{color:var(--muted);font-size:.76rem;line-height:1.3} .sns-sch:hover{border-color:var(--accent)} .sns-sch[aria-checked="true"]{outline:3px solid var(--focus,var(--accent));outline-offset:1px;border-color:transparent} .sns-sch[aria-checked="true"] .sns-sch-ic{background:var(--pri-bg);color:var(--pri-fg);box-shadow:none} .sns-sch:focus-visible{outline:4px double var(--focus,var(--accent));outline-offset:3px} /* eventos */ .sns-grp{display:grid;border-radius:var(--radius);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line);overflow:hidden} .sns-grp h4{margin:0;padding:8px 14px 7px;font-family:var(--f-title);font-size:.9rem;color:var(--muted);background:var(--cell-bg2);border-bottom:1px solid var(--cell-line)} .sns-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:9px 12px 9px 16px} .sns-row+.sns-row{border-top:1px solid var(--cell-line)} .sns-row.custom::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--accent)} .sns-ev{display:flex;flex-direction:column;gap:1px;min-width:0} .sns-ev b{font-size:.93rem;line-height:1.25} .sns-ev small{color:var(--muted);font-size:.76rem;line-height:1.3} .sns-pick{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0} .sns-gw{flex:none;display:grid;place-items:center;width:52px;height:24px;color:var(--accent)} .sns-gl{width:48px;height:20px;overflow:visible} .sns-gl circle{transform-box:fill-box;transform-origin:center} .sns-gw.play .sns-gl circle{animation:snsDot .55s ease-out both;animation-delay:var(--d,0s)} .sns-gw.play .sns-gl path{animation:snsBuzz .5s ease-out} @keyframes snsDot{0%{opacity:.3;transform:scale(.6)}30%{opacity:1;transform:scale(1.55)}100%{opacity:1;transform:none}} @keyframes snsBuzz{0%{opacity:.3}40%{opacity:1}} .sns-sel{width:272px;max-width:100%;min-width:0;min-height:36px;padding:4px 8px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));font:inherit;font-size:.86rem;cursor:pointer} .sns-sel:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-row.custom .sns-sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .sns-sel optgroup,.sns-sel option{background:var(--win-bg);color:var(--win-fg)} .sns-play,.sns-undo{width:36px;height:36px} .sns-undo[hidden]{display:none} .sns.sys-off .sns-grp,.sns.sys-off .sns-schs{opacity:.72} .sns-tip{margin-top:-4px} @media (hover:none){ .sns-tip{display:none} } @container (max-width:640px){ .sns-sw{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ic h kn" "d d d";row-gap:6px} .sns-sw-st{display:none} .sns-schs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .sns-sch{gap:9px;padding:9px 10px;min-height:62px} .sns-sch-ic{width:34px;height:34px} .sns-sch-ic svg{width:19px;height:19px} .sns-row{grid-template-columns:minmax(0,1fr);padding:10px 12px 11px 16px} .sns-pick{justify-content:flex-start;flex-wrap:wrap} .sns-row .sns-gw{position:absolute;top:10px;right:12px} .sns-ev{padding-right:60px} .sns-row.midi .sns-ev{padding-right:86px} .sns-sel{flex:1 1 150px;width:auto;padding:4px 6px;font-size:.8rem} /* 1.7: cabe «Esquema: Campanada del día» */ .sns-vol,.sns-offnote{padding-left:4px} .sns-acts{margin-left:0} } @media (prefers-reduced-motion:reduce){ .sns-gw.play .sns-gl circle,.sns-gw.play .sns-gl path{animation:none} } /* temas con bordes duros: sin redondeos */ [data-os="ochobits"] .sns-sch-ic,[data-os="ochobits"] .sns-sw-ic{border-radius:0} /* ---------- 1.1: MIDI propio ---------- */ /* en las filas: botón, insignia y rollo diminuto */ .sns-midb{width:36px;height:36px;color:var(--muted)} .sns-midb svg{width:18px;height:18px} .sns-midb.has{color:var(--accent);border-color:var(--accent)} .sns-midb:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-gw.midi{width:auto;min-width:52px;display:flex;align-items:center;justify-content:flex-end;gap:5px} .sns-mb{flex:none;padding:3px 5px 2px;border-radius:4px;background:var(--accent);color:var(--accent-fg,var(--pri-fg));font:800 .6rem/1 var(--f-ui);letter-spacing:.07em} .sns-mr{flex:none;width:34px;height:18px;overflow:visible} .sns-mr rect{fill:currentColor;transform-box:fill-box;transform-origin:center} .sns-gw.play .sns-mr rect{animation:snsMr .5s ease-out both;animation-delay:var(--d,0s)} @keyframes snsMr{0%{opacity:.25}35%{opacity:1;transform:scaleY(1.7)}100%{opacity:1;transform:none}} /* editor: capa sobre el cuerpo de la ventana y diálogo */ .sns-md-scrim{position:absolute;left:0;right:0;bottom:0;top:40px;z-index:58;background:rgba(0,0,0,.3);background:color-mix(in srgb,var(--win-bg) 55%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);animation:snsMdFade .16s ease-out} .sns-md{--md-top:40px;position:absolute;z-index:59;top:calc(var(--md-top) + 12px);left:50%;transform:translateX(-50%);box-sizing:border-box;width:min(680px,calc(100% - 24px));max-height:calc(100% - var(--md-top) - 22px);display:flex;flex-direction:column;overflow:hidden; background:var(--win-bg);color:var(--win-fg);border:var(--bw,2px) solid var(--win-border);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.06) inset;animation:snsMdIn .18s ease-out;-webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15)} .sns-md.out,.sns-md-scrim.out{animation:snsMdOut .15s ease-in forwards;pointer-events:none} @keyframes snsMdIn{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.985)}} @keyframes snsMdOut{to{opacity:0}} @keyframes snsMdFade{from{opacity:0}} .sns-md.sheet{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;max-height:calc(100% - var(--md-top) - 6px);border-width:var(--bw,2px) 0 0;border-radius:var(--radius) var(--radius) 0 0;animation:snsMdUp .22s ease-out} @keyframes snsMdUp{from{opacity:0;transform:translateY(28px)}} .sns-md-hd{display:flex;align-items:center;gap:12px;padding:10px 10px 9px 14px;border-bottom:1px solid var(--cell-line)} .sns-md-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:max(6px,calc(var(--radius)*.6));background:var(--pri-bg);color:var(--pri-fg)} .sns-md-ic svg{width:22px;height:22px} .sns-md-ht{flex:1;min-width:0} .sns-md-ht h3{margin:0;font-family:var(--f-title);font-size:1.12rem;line-height:1.2} .sns-md-ht p{margin:2px 0 0;color:var(--muted);font-size:.8rem;line-height:1.3} .sns-md-x{width:36px;height:36px} .sns-md-bd{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;gap:10px;align-content:start;padding:12px 16px 10px} /* fuentes: pestañas */ .sns-md-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:calc(max(6px,var(--radius)*.6) + 4px);background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:38px;padding:4px 8px;border:0;border-radius:max(6px,calc(var(--radius)*.6));background:transparent;color:var(--win-fg);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:background .15s,color .15s} .sns-md-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sns-md-tab svg{flex:none;width:19px;height:19px} .sns-md-tab:hover{background:var(--cell-bg)} .sns-md-tab[aria-selected="true"]{background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 1px 4px rgba(0,0,0,.16)} .sns-md-tab:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-md-pn[hidden]{display:none} /* archivo */ .sns-md-drop{position:relative;display:flex;align-items:center;gap:14px;padding:11px 14px;border:2px dashed var(--cell-line);border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg);cursor:pointer;transition:border-color .15s,background .15s} .sns-md-drop:hover,.sns-md.drag .sns-md-drop{border-color:var(--accent)} .sns-md.drag .sns-md-drop{background:var(--cell-bg2)} .sns-md-drop:focus-within{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-md-file{position:absolute;left:8px;top:8px;width:1px;height:1px;opacity:0} .sns-md-dic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg)} .sns-md-dic svg{width:24px;height:24px} .sns-md-dt{display:flex;flex-direction:column;gap:3px;min-width:0} .sns-md-dt b{font-family:var(--f-title);font-size:1rem;line-height:1.2} .sns-md-dt small{color:var(--muted);font-size:.78rem;line-height:1.35} /* con un archivo abierto: ficha compacta */ .sns-md-chip{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-chip .sns-md-dic{width:36px;height:36px} .sns-md-chip .sns-md-dic svg{width:20px;height:20px} .sns-md-chip .sns-md-dt{flex:1} .sns-md-chip .sns-md-dt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sns-md-other{position:relative;flex:none;cursor:pointer} .sns-md-other svg{width:17px;height:17px} .sns-md-other:focus-within{outline:2px solid var(--focus,var(--accent));outline-offset:2px} /* Mis MIDI */ .sns-md-lib{list-style:none;margin:0;padding:4px;display:grid;gap:3px;max-height:170px;overflow:auto;border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-li{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:1px solid transparent;border-radius:max(4px,calc(var(--radius)*.5));background:transparent;color:var(--win-fg);font:inherit;text-align:left;cursor:pointer} .sns-md-li:hover{background:var(--cell-bg2)} .sns-md-li[aria-pressed="true"]{border-color:var(--accent);background:var(--cell-bg2);box-shadow:inset 3px 0 0 var(--accent)} .sns-md-li:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:1px} .sns-md-lic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cell-bg2);color:var(--accent);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-lic svg{width:17px;height:17px} .sns-md-lit{display:flex;flex-direction:column;gap:1px;min-width:0} .sns-md-lit b{font-size:.88rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sns-md-lit small{color:var(--muted);font-size:.74rem} .sns-md-libe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 14px;border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-libe .hint{flex:1 1 240px} .sns-md-libe svg{width:17px;height:17px} /* tocar: teclado MIDI, piano en pantalla y grabación */ .sns-md-pn-keys{display:grid;gap:9px} .sns-md-kst{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:22px;font-size:.82rem} .sns-md-kst [data-md-kst]:empty{display:none} .sns-md-kdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)} .sns-md-kdot[data-st=""]{display:none} .sns-md-kdot[data-st="on"]{background:var(--accent);box-shadow:0 0 0 3px var(--cell-bg2),0 0 8px var(--accent)} .sns-md-kdot[data-st="wait"]{background:var(--accent);animation:snsBlink 1s ease-in-out infinite} @keyframes snsBlink{50%{opacity:.25}} .sns-md-kb{display:flex;align-items:center;gap:8px} .sns-md-oct{width:34px;height:34px} .sns-md-piano{--nw:15;position:relative;flex:1;display:flex;height:96px;min-width:0;border-radius:max(3px,calc(var(--radius)*.35));overflow:hidden;box-shadow:inset 0 0 0 1px var(--cell-line),0 2px 8px rgba(0,0,0,.14);touch-action:none;-webkit-user-select:none;user-select:none} .sns-k{margin:0;padding:0;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent} .sns-k.w{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;background:linear-gradient(#fff,#f2f2f4 78%,#e1e1e6);border-right:1px solid rgba(0,0,0,.16);color:#6b6b74;transition:background .06s} .sns-k.w:last-child{border-right:0} .sns-k.w small{font-size:.6rem;font-weight:700;pointer-events:none} .sns-k.b{position:absolute;top:0;z-index:2;left:calc(var(--i) * 100% / var(--nw) - 100% / var(--nw) * .31);width:calc(100% / var(--nw) * .62);height:60%;background:linear-gradient(#45454d,#141417);border-radius:0 0 3px 3px;box-shadow:inset 0 -3px 0 rgba(255,255,255,.14),0 2px 3px rgba(0,0,0,.35)} .sns-k.w.on{background:var(--accent);color:var(--accent-fg,var(--pri-fg))} .sns-k.b.on{background:var(--accent);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)} .sns-k:focus-visible{outline:3px solid var(--focus,var(--accent));outline-offset:-3px;z-index:3} .sns-md-recr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .sns-md-rec svg{width:14px;height:14px;color:var(--danger,#d33)} .sns-md-rec[aria-pressed="true"]{background:var(--danger,#d33);color:#fff;border-color:transparent} .sns-md-rec[aria-pressed="true"] svg{color:#fff;animation:snsBlink 1s ease-in-out infinite} .sns-md-rect{font:600 .8rem/1.3 var(--f-mono);color:var(--muted)} .sns-md.recording .sns-md-rect{color:var(--danger,#d33)} .sns-md-kh{font-size:.76rem} @media (hover:none){ .sns-md-kh{display:none} } /* los rollos */ .sns-md-stage{position:relative;display:grid;gap:6px;padding:8px;border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-ovw,.sns-md-rw{position:relative;border-radius:max(3px,calc(var(--radius)*.35));background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line);overflow:hidden;touch-action:none} .sns-md-ovw{height:32px;cursor:pointer} .sns-md-rw{height:132px;cursor:grab} .sns-md-rw.drag{cursor:grabbing} .sns-md-rw.len{cursor:ew-resize} .sns-md-stage.empty .sns-md-ovw,.sns-md-stage.empty .sns-md-rw{cursor:default} .sns-md-ov,.sns-md-roll{display:block;width:100%;height:100%} .sns-md-ph{position:absolute;left:0;top:4px;bottom:17px;width:2px;margin-left:-1px;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:0;pointer-events:none;will-change:transform} .sns-md-empty{position:absolute;inset:0 0 17px;display:grid;place-items:center;margin:0;padding:10px 22px;text-align:center;color:var(--muted);font-size:.86rem;line-height:1.45;pointer-events:none} .sns-md-empty[hidden]{display:none} /* controles */ .sns-md-ctl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px} .sns-md-f{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 8px;min-width:0} .sns-md-fl{font-size:.82rem;font-weight:700} .sns-md-f output{font:700 .86rem/1 var(--f-mono);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap} .sns-md-f input:disabled{opacity:.45;cursor:default} .sns-md-f input::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--cell-bg2) var(--p0,0%),var(--accent) var(--p0,0%),var(--accent) var(--p1,0%),var(--cell-bg2) var(--p1,0%))} .sns-md-f input::-moz-range-track{background:linear-gradient(90deg,var(--cell-bg2) var(--p0,0%),var(--accent) var(--p0,0%),var(--accent) var(--p1,0%),var(--cell-bg2) var(--p1,0%))} .sns-md-tb{display:grid;gap:3px;align-content:start;min-width:0} .sns-md-tbr{display:flex;align-items:center;gap:8px;min-width:0} .sns-md-tbr .sns-sel{flex:1 1 auto;width:auto;min-width:0} .sns-md-more{flex:none;min-height:36px;padding:0 10px;font-size:.84rem} /* el mismo MIDI en otros eventos */ .sns-md-also{border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .sns-md-also>summary{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;cursor:pointer;font-weight:700;font-size:.86rem;list-style:none;border-radius:inherit} .sns-md-also>summary::-webkit-details-marker{display:none} .sns-md-also>summary::before{content:"";flex:none;width:6px;height:6px;margin:0 3px 2px 1px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s} .sns-md-also[open]>summary::before{transform:rotate(45deg);margin-bottom:4px} .sns-md-also>summary:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-md-alson{margin-left:auto;font-size:.78rem;color:var(--accent);white-space:nowrap} .sns-md-alsog{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));gap:2px 16px;padding:0 12px 10px} .sns-md-also fieldset{display:grid;gap:0;align-content:start;min-width:0;margin:0;padding:0;border:0} .sns-md-also legend{padding:6px 0 2px;font-size:.72rem;font-weight:700;color:var(--muted)} .sns-md-ck{display:flex;align-items:center;gap:8px;min-height:30px;font-size:.84rem;line-height:1.2;cursor:pointer} .sns-md-ck input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer} .sns-md-ck input:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .sns-md-ck .sns-mb{font-style:normal} .sns-md-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;min-height:1.35em;padding:0 2px;font-size:.78rem;line-height:1.35} .sns-md-info{color:var(--muted);overflow-wrap:anywhere} .sns-md-st{font-weight:700;color:var(--accent);overflow-wrap:anywhere} .sns-md-info:empty,.sns-md-st:empty{display:none} .sns-md-stage.empty .sns-md-info{display:none} .sns-md-info.bad,.sns-md-st.bad{color:var(--danger,#c33)} /* pie */ .sns-md-ft{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 16px 12px;border-top:1px solid var(--cell-line);background:var(--win-bg)} .sns-md-ftl{display:flex;flex-wrap:wrap;gap:4px 16px;margin-right:auto;font-size:.84rem} .sns-md-del{color:var(--danger,#c33)} .sns-md-play svg{width:15px;height:15px} .sns-md-ft .btn:disabled{opacity:.5;cursor:default} @container (max-width:600px){ .sns-md-piano{--nw:10} .sns-k.x{display:none} .sns-md-bd{padding:12px 12px 10px;gap:10px} .sns-md-hd{padding:10px 10px 8px 12px} .sns-md-ft{padding:9px 12px 11px} .sns-md-rw{height:116px} .sns-md-ctl{gap:2px 16px} .sns-md-ctl>.sns-md-f:nth-child(5),.sns-md-tb{grid-column:1/-1} .sns-md-drop{padding:11px 12px;gap:12px} } @container (max-width:380px){ .sns-md-ctl{grid-template-columns:1fr} .sns-md-tab{gap:5px;font-size:.82rem} } @media (prefers-reduced-motion:reduce){ .sns-md,.sns-md.sheet,.sns-md-scrim,.sns-md.out,.sns-md-scrim.out{animation:none} .sns-gw.play .sns-mr rect,.sns-md-kdot[data-st="wait"],.sns-md-rec[aria-pressed="true"] svg{animation:none} } /* temas de bordes duros */ [data-os="ochobits"] :is(.sns-md,.sns-md-ic,.sns-md-chip,.sns-md-tabs,.sns-md-tab,.sns-md-drop,.sns-md-dic,.sns-md-lib,.sns-md-li,.sns-md-lic,.sns-md-libe,.sns-md-stage,.sns-md-ovw,.sns-md-rw,.sns-md-piano,.sns-md-also,.sns-mb){border-radius:0} /* ================= Legal 1.0: centro legal ================= */ .win[data-id="legal"]{height:min(780px,100%)} .win-body.lg-host{padding:0;overflow:hidden;display:flex;flex-direction:column} .lg{--lg-fs:16px;--lg-solid:var(--client,var(--win-bg));flex:1;min-height:0;display:grid;grid-template-columns:clamp(212px,27%,262px) minmax(0,1fr)} /* barra lateral */ .lg-side{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:14px 10px 12px 12px;border-right:1px solid var(--cell-line);background:var(--cell-bg2);scrollbar-width:thin} .lg-brand{display:flex;align-items:center;gap:11px;padding:2px 4px 2px 2px} .lg-seal{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 0 0 3px var(--cell-bg2),0 0 0 4.5px var(--accent)} .lg-seal svg{width:21px;height:21px} .lg-brand b{display:block;font-family:var(--f-title);font-size:16px;line-height:1.15} .lg-brand small{display:block;font-size:12px;color:var(--muted);margin-top:2px} .lg-q{position:relative} .lg-q>svg{position:absolute;left:10px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none} .lg-q input{width:100%;height:36px;margin:0;padding:0 32px 0 33px;box-sizing:border-box;border:1px solid var(--btn-border);border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-bg);color:var(--win-fg);font:inherit;font-size:14px;-webkit-appearance:none;appearance:none} .lg-q input::-webkit-search-cancel-button{display:none} .lg-q input::placeholder{color:var(--muted);opacity:1} .lg-qx{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer} .lg-qx svg{width:11px;height:11px} .lg-qx:hover{background:var(--cell-play);color:var(--win-fg)} .lg-docs{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none} .lg-d{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:0 10px;padding:7px 8px;border:1px solid transparent;border-radius:max(4px,calc(var(--radius)*.5));background:none;color:inherit;text-align:left;cursor:pointer;font:inherit} .lg-di{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:max(6px,calc(var(--radius)*.5));background:var(--cell-bg);border:1px solid var(--cell-line);color:var(--accent);box-sizing:border-box} .lg-di svg{width:17px;height:17px} .lg-d b{font-size:14px;line-height:1.2;font-weight:700;overflow-wrap:anywhere} .lg-d small{font-size:12px;line-height:1.25;color:var(--muted)} .lg-d:hover{background:var(--cell-play)} .lg-d[aria-current="page"]{background:var(--lg-solid);border-color:var(--cell-line);box-shadow:inset 3px 0 0 var(--accent)} .lg-d[aria-current="page"] .lg-di{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .lg-side-foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 4px 0;border-top:1px solid var(--cell-line);font-size:12px;color:var(--muted)} .lg-side-foot .lnk{font-size:12px;text-align:left} .lg-miss{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--win-fg)} .lg-miss svg{width:15px;height:15px;color:var(--accent);flex:none} /* lectura */ .lg-main{position:relative;min-height:0;overflow:auto;overscroll-behavior:contain;outline:none;background:color-mix(in srgb,var(--client,transparent) 40%,transparent)} .lg-prog{position:sticky;top:0;z-index:4;height:3px;margin-bottom:-3px;pointer-events:none} .lg-prog i{display:block;width:0;height:100%;background:var(--accent);border-radius:0 3px 3px 0} .lg-art{max-width:72ch;margin:0 auto;padding:24px clamp(16px,4.5%,40px) 36px;font-size:var(--lg-fs);line-height:1.62;color:var(--win-fg)} .lg[data-font="read"] .lg-art{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:0} .lg-kick{margin:0 0 6px;font-size:max(11px,.72em);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700} .lg-kick span{color:var(--accent)} .lg-h{margin:0;font-family:var(--f-title);font-size:clamp(25px,2.05em,38px);line-height:1.12;font-weight:700;text-wrap:balance;overflow-wrap:anywhere;outline-offset:2px;border-radius:2px} .lg-meta{margin:8px 0 0;font-size:.84em;color:var(--muted)} .lg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0} .lg-fs{display:inline-flex} .lg-fs .lg-tool:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0} .lg-fs .lg-tool:last-child{border-top-left-radius:0;border-bottom-left-radius:0} .lg-tool{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:max(4px,calc(var(--radius)*.5));font:700 13px/1 var(--f-ui);cursor:pointer;white-space:nowrap} .lg-tool svg{width:15px;height:15px;flex:none} .lg-tool small{font-size:11px;margin-left:1px} .lg-tool[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .lg-tool:disabled{opacity:.45;cursor:not-allowed} .lg-draft{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding:10px 12px;border:1.5px dashed var(--accent);border-radius:max(4px,calc(var(--radius)*.55));background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.86em;line-height:1.5} .lg-draft>svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--accent)} .lg-draft summary{cursor:pointer;font-weight:700;margin-top:4px;width:max-content;max-width:100%} .lg-draft ul{margin:6px 0 0;padding-left:18px} .lg-tldr{margin:18px 0 0;padding:14px 16px 10px;border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg2);border:1px solid var(--cell-line);position:relative;overflow:hidden} .lg-tldr::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)} .lg-tldr h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--f-title);font-size:1.02em;line-height:1.2} .lg-tldr h4 svg{width:18px;height:18px;color:var(--accent)} .lg-tldr ul{margin:0;padding:0;list-style:none;display:grid;gap:7px} .lg-tldr li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;margin:0} .lg-tldr li svg{width:18px;height:18px;margin-top:.18em;color:var(--accent)} .lg-toc{margin:16px 0 0;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.7));background:color-mix(in srgb,var(--cell-bg2) 55%,transparent)} .lg-toc summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:.92em;list-style:none} .lg-toc summary::-webkit-details-marker{display:none} .lg-toc summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7} .lg-toc[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .lg-toc summary small{font-weight:400;color:var(--muted)} .lg-toc ol{margin:0;padding:0 8px 10px;list-style:none;columns:2 15em;column-gap:14px} .lg-toc li{break-inside:avoid;margin:0} .lg-toc a{display:flex;align-items:baseline;gap:8px;padding:4px 6px;border-radius:5px;color:inherit;text-decoration:none;font-size:.86em;line-height:1.35} .lg-toc a:hover{background:var(--cell-play)} .lg-toc a.on{background:var(--cell-play);font-weight:700} .lg-toc a .lg-n{font-size:.78em} .lg-n{flex:none;display:inline-grid;place-items:center;min-width:1.75em;height:1.75em;padding:0 .35em;box-sizing:border-box;border-radius:999px;background:var(--cell-bg2);border:1px solid var(--cell-line);color:var(--accent);font:700 .66em/1 var(--f-ui);font-variant-numeric:tabular-nums} .lg-body{margin-top:6px} .lg-sec{margin-top:30px} .lg-sec h4{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-family:var(--f-title);font-size:1.24em;line-height:1.25;font-weight:700;text-wrap:balance;outline-offset:4px;border-radius:2px;scroll-margin-top:12px} .lg-sec h4 .lg-n{transform:translateY(-.12em)} .lg-sec h5{margin:20px 0 6px;font-size:1em;font-weight:800} .lg-sec p,.lg-sec li{margin:0 0 .6em} .lg-sec ul,.lg-sec ol{margin:0 0 .85em;padding-left:1.35em} .lg-sec li::marker{color:var(--accent)} .lg-check{list-style:none;padding-left:0!important} .lg-check li{position:relative;padding-left:1.7em} .lg-check li::before{content:"";position:absolute;left:.15em;top:.42em;width:.55em;height:.95em;border-right:.18em solid var(--accent);border-bottom:.18em solid var(--accent);transform:rotate(40deg) translate(-.05em,-.25em)} .lg-key{padding:10px 14px;border-left:4px solid var(--accent);background:var(--cell-bg2);border-radius:0 max(4px,calc(var(--radius)*.5)) max(4px,calc(var(--radius)*.5)) 0} .lg-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px!important} .lg-tw{overflow-x:auto;margin:6px 0 .9em;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.5))} .lg-tbl{width:100%;border-collapse:collapse;font-size:.88em;line-height:1.45} .lg-tbl th,.lg-tbl td{padding:8px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--cell-line)} .lg-tbl tr:last-child td{border-bottom:0} .lg-tbl th{background:var(--cell-bg2);font-size:.86em;color:var(--muted);font-weight:700} .lg-tbl .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .lg-art code{font-family:var(--f-mono);font-size:.84em;padding:1px 5px;border-radius:4px;background:var(--cell-bg2);border:1px solid var(--cell-line);overflow-wrap:anywhere} .lg-a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer} .lg-a:hover{background:var(--cell-play)} .lg-x{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;overflow-wrap:anywhere} .lg-x small{font-size:.86em;color:var(--muted)} span.lg-x{text-decoration:none;border-bottom:1px dotted var(--muted)} .lg-ph{display:inline;padding:0 .3em;border-radius:3px;background:color-mix(in srgb,var(--accent) 17%,transparent);color:inherit;outline:1.5px dashed var(--accent);outline-offset:0;font:700 .8em/1.4 var(--f-mono);letter-spacing:.01em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .lg-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:40px;padding-top:16px;border-top:1px solid var(--cell-line)} .lg-nb{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(4px,calc(var(--radius)*.55));background:var(--cell-bg2);color:inherit;text-align:left;cursor:pointer;font:inherit} .lg-nb.n{text-align:right;align-items:flex-end;grid-column:2} .lg-nb small{display:inline-flex;align-items:center;gap:4px;font-size:.78em;color:var(--muted);font-weight:700} .lg-nb small svg{width:14px;height:14px} .lg-nb b{font-family:var(--f-title);font-size:.98em;line-height:1.25;overflow-wrap:anywhere} .lg-nb:hover{border-color:var(--accent)} .lg-up{position:sticky;bottom:14px;float:right;margin:-54px 14px 0 0;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--btn-border);border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 6px 16px rgba(0,0,0,.25);cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} .lg-up svg{width:18px;height:18px} .lg-up.on{opacity:1;visibility:visible} /* tarjetas del resumen */ .lg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px;margin:14px 0 4px} .lg-card{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.7));background:var(--cell-bg2);color:inherit;text-decoration:none;line-height:1.4;transition:border-color .15s,transform .15s} .lg-card:hover{border-color:var(--accent);transform:translateY(-1px)} .lg-ci{display:grid;place-items:center;width:36px;height:36px;margin-bottom:2px;border-radius:max(8px,calc(var(--radius)*.6));background:var(--pri-bg);color:var(--pri-fg)} .lg-ci svg{width:20px;height:20px} .lg-card b{font-family:var(--f-title);font-size:1em;line-height:1.25} .lg-card>span:last-child{font-size:.86em;color:var(--muted)} .lg-status{display:grid;gap:0;margin:8px 0 0;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));overflow:hidden} .lg-status div{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:12px;padding:9px 12px;border-bottom:1px solid var(--cell-line)} .lg-status div:last-child{border-bottom:0} .lg-status dt{font-weight:700;font-size:.9em;color:var(--muted)} .lg-status dd{margin:0;font-size:.95em} /* regiones */ .lg-reg-pick{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px} .lg-chip{min-height:30px;padding:0 10px;border:1px solid var(--btn-border);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:700 12px/1 var(--f-ui);cursor:pointer;white-space:nowrap} .lg-chip[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .lg-reg-sug{margin:0 0 10px} .lg-r{margin:0 0 8px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg2)} .lg-r>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;font-weight:700;line-height:1.3} .lg-r>summary::-webkit-details-marker{display:none} .lg-r>summary::after{content:"";flex:none;width:7px;height:7px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6} .lg-r[open]>summary::after{transform:rotate(-135deg)} .lg-rc{flex:none;min-width:4.2em;padding:4px 6px;border-radius:4px;background:var(--lg-solid);border:1px solid var(--cell-line);color:var(--accent);font:700 11px/1 var(--f-ui);text-align:center;white-space:nowrap} .lg-rb{padding:2px 14px 6px;border-top:1px solid var(--cell-line);font-size:.95em} .lg-rb>*:first-child{margin-top:10px} /* almacenamiento */ .lg-store{display:flex;flex-direction:column;gap:6px;margin-top:8px} .lg-store-acts{gap:8px;margin-top:4px} .btn.lg-danger{color:var(--danger);border-color:var(--danger)} .btn.lg-danger.solid{background:var(--danger);color:#fff;border-color:transparent} .lg-wipe{margin-top:6px;padding:12px 14px;border:1.5px solid var(--danger);border-radius:max(6px,calc(var(--radius)*.6));background:color-mix(in srgb,var(--danger) 7%,transparent)} .lg-wipe p{margin:0 0 8px} .lg-ok{display:flex;align-items:flex-start;gap:9px;margin:4px 0 10px;cursor:pointer;font-weight:700} .lg-ok input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--danger)} /* fuentes */ .lg-fonts{display:flex;flex-direction:column;gap:10px;margin:8px 0} .lg-fl{display:flex;align-items:baseline;gap:8px;margin:0 0 6px!important} .lg-fl small{color:var(--muted);font-size:.84em} .lg-fch{display:flex;flex-wrap:wrap;gap:5px;margin:0!important;padding:0!important;list-style:none} .lg-fch li{margin:0!important;padding:2px 8px;border:1px solid var(--cell-line);border-radius:999px;background:var(--cell-bg2);font-size:.8em;line-height:1.5} /* resultados de búsqueda */ .lg-res-l{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px} .lg-res-b{display:flex;flex-direction:column;gap:3px;width:100%;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg2);color:inherit;text-align:left;cursor:pointer;font:inherit;line-height:1.45} .lg-res-b small{font-size:.75em;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em} .lg-res-b b{font-family:var(--f-title);font-size:1.02em} .lg-res-b span{font-size:.88em} .lg-res-b mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:2px;padding:0 1px} .lg-res-b:hover{border-color:var(--accent)} /* pantallas angostas y celular */ @container (max-width:720px){ .lg{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)} .lg-side{flex-direction:column;gap:8px;overflow:visible;padding:8px 10px 8px;border-right:0;border-bottom:1px solid var(--cell-line)} .lg-brand,.lg-side-foot{display:none} .lg-docs{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -10px;padding:0 10px 2px;scroll-padding:0 10px} .lg-docs::-webkit-scrollbar{display:none} .lg-d{width:auto;flex:none;display:flex;gap:7px;padding:4px 12px 4px 4px;border-color:var(--cell-line);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg)} .lg-d small{display:none} .lg-d b{font-size:13px;white-space:nowrap} .lg-di{width:26px;height:26px;border-radius:50%} .lg-di svg{width:15px;height:15px} .lg-d[aria-current="page"]{box-shadow:none;border-color:transparent;background:var(--pri-bg);color:var(--pri-fg)} .lg-d[aria-current="page"] .lg-di{background:rgba(255,255,255,.18);color:inherit} .lg-art{padding:18px 16px 28px} .lg-tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lg-tool{position:relative;min-width:38px;min-height:36px;justify-content:center;padding:0 9px} .lg-tool[data-lgt="font"] span{position:static;width:auto;height:auto;overflow:visible;clip:auto} .lg-toc ol{columns:1} .lg-status div{grid-template-columns:1fr;gap:2px} .lg-foot{grid-template-columns:1fr} .lg-nb.n{grid-column:auto} } @container (max-width:470px){ .lg-tool[data-lgt="font"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .lg-tools{gap:5px} } @media (prefers-reduced-motion:reduce){ .lg-card,.lg-up{transition:none} } .lg-h:focus:not(:focus-visible),.lg-sec h4:focus:not(:focus-visible),.lg-r>summary:focus:not(:focus-visible){outline:none} /* ================= Sitio (1.4; 1.7: la versión nueva se instala sola, sin aviso) ================= */ /* aviso de privacidad simplificado (lgShortNotice) dentro de formularios */ .lg-short{margin:8px 0;padding:8px 10px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:.86em;line-height:1.45} /* ================= Cuentas 1.0 ================= */ .win-body.ac-host{padding:0} .ac{display:flex;flex-direction:column;gap:12px;padding:12px 20px 22px} .ac-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px} .ac-back{display:inline-flex;align-items:center;gap:3px;padding:4px 10px 4px 4px;border:0;border-radius:max(4px,calc(var(--radius)*.45));background:none;color:inherit;font:700 14px/1.2 var(--f-ui);cursor:pointer} .ac-back svg{width:18px;height:18px} .ac-back:hover{background:var(--cell-play)} .ac-mode{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border:1px solid var(--cell-line);border-radius:999px;background:var(--cell-bg2);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap} .ac-mode svg{width:15px;height:15px;color:var(--accent)} .ac-view{display:flex;flex-direction:column;gap:14px} .ac-h{margin:0;font-family:var(--f-title);font-size:clamp(21px,4.4cqi,28px);line-height:1.15;font-weight:700;text-wrap:balance;overflow-wrap:anywhere;outline-offset:2px;border-radius:2px} .ac-lead{margin:6px 0 0;font-size:15px;line-height:1.5} .ac-sub{margin:-6px 0 0;line-height:1.5} .ac-fine{margin:0;font-size:13px;line-height:1.5} /* tarjeta de socio */ .ac-hero{display:flex;align-items:center;gap:20px} .ac-hero-t{min-width:0;flex:1} .ac-card{position:relative;flex:none;width:252px;aspect-ratio:1.586;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;isolation:isolate; border-radius:max(3px,calc(var(--radius)*.9));border:1px solid var(--cell-line);background:linear-gradient(160deg,var(--cell-bg),var(--cell-bg2));color:var(--win-fg); box-shadow:0 12px 26px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.22);transform:rotate(-2deg)} .ac-card::after{content:"";position:absolute;inset:-20%;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.32) 48%,transparent 58%);transform:translateX(-75%);animation:acShine 7s ease-in-out 1.2s infinite} @keyframes acShine{0%,72%{transform:translateX(-75%)}100%{transform:translateX(75%)}} .ac-card-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--pri-bg);color:var(--pri-fg)} .ac-card-top svg{width:20px;height:20px;flex:none} .ac-card-top b{font-family:var(--f-title);font-size:14px;letter-spacing:.02em;white-space:nowrap} .ac-card-top small{margin-left:auto;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.92;white-space:nowrap} .ac-card-body{flex:1;display:flex;align-items:center;gap:12px;min-height:0;padding:8px 12px} .ac-card-av{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--cell-bg2);border:2px solid var(--accent);box-sizing:border-box} .ac-card-av svg{width:100%;height:100%;display:block} .ac-card-id{display:flex;flex-direction:column;gap:1px;min-width:0} .ac-card-id small{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700} .ac-card-id b{font-family:var(--f-title);font-size:19px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ac-card-id small:last-child{text-transform:none;letter-spacing:0;font-size:11px;font-weight:400;line-height:1.3} .ac-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 12px 10px} .ac-bars{display:flex;align-items:stretch;gap:2px;height:15px;opacity:.5} .ac-bars i{display:block;width:calc(var(--w) * 1px);background:var(--win-fg)} .ac-card-chip{padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font:700 10px/1 var(--f-ui);letter-spacing:.04em;white-space:nowrap} .ac-card.guest .ac-card-av{border-style:dashed;opacity:.85} .ac-card.guest .ac-card-id b{color:var(--muted)} /* comparación y botones */ .ac-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ac-compare.ac-compare-fb{grid-template-columns:1fr} /* 1.7: en línea, una sola lista con lo que ganas */ .ac-compare-fb .ac-ul li{align-items:flex-start} .ac-compare section{padding:12px 14px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.6));background:var(--cell-bg2)} .ac-compare h4{margin:0 0 8px;font-family:var(--f-title);font-size:15px} .ac-ul{margin:0;padding:0;list-style:none;display:grid;gap:7px} .ac-ul li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;font-size:14px;line-height:1.4} .ac-ul svg{width:18px;height:18px;color:var(--accent)} .ac-cta{display:flex;flex-wrap:wrap;gap:8px} .ac-cta .btn,.ac-submit .btn,.ac-acts .btn{min-height:40px} .ac-g svg{width:18px;height:18px} .ac-cta .ac-skip{margin-left:auto} .btn.ac-skip{background:transparent;border-color:transparent;text-decoration:underline;text-underline-offset:3px;font-weight:700} .btn.ac-skip:hover{background:var(--cell-play)} .ac-center .ac-cta{justify-content:center} /* formularios */ .ac-form{display:flex;flex-direction:column;gap:12px;max-width:500px} .ac-field{display:flex;flex-direction:column;gap:5px;min-width:0} .ac-field label{font-weight:700;font-size:14px} .ac-field input{width:100%;min-height:40px;padding:8px 11px;box-sizing:border-box;border:1px solid var(--btn-border);border-radius:max(4px,calc(var(--radius)*.45));background:var(--cell-bg);color:var(--win-fg);font:inherit;font-size:15px} .ac-field input:disabled{opacity:.6} .ac-field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)} .ac-field small{font-size:12px;line-height:1.4;color:var(--muted)} .ac-field small:empty{display:none} .ac-ferr{margin:0;font-size:13px;font-weight:700;line-height:1.4;color:var(--danger)} .ac-pw{position:relative} .ac-pw input{padding-right:46px} .ac-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:34px;padding:0;border:0;border-radius:max(4px,calc(var(--radius)*.4));background:none;color:var(--muted);cursor:pointer} .ac-eye svg{width:19px;height:19px} .ac-eye:hover,.ac-eye[aria-pressed="true"]{color:var(--win-fg);background:var(--cell-play)} .ac-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;height:6px;margin-top:3px} .ac-meter i{border-radius:3px;background:var(--cell-line);transition:background .2s} .ac-meter[data-s="1"] i:nth-child(1){background:var(--danger)} .ac-meter[data-s="2"] i:nth-child(-n+2),.ac-meter[data-s="3"] i:nth-child(-n+3),.ac-meter[data-s="4"] i{background:var(--accent)} .ac-meter[data-s="2"] i:nth-child(-n+2){opacity:.7} .ac-meter-t{font-weight:700;color:var(--win-fg)!important} .ac-checks{display:flex;flex-direction:column;gap:9px;margin:2px 0 0;padding:0;border:0;min-width:0} .ac-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:3px 9px;align-items:start} .ac-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer} .ac-check label{font-size:14px;line-height:1.45;cursor:pointer} .ac-check .ac-ferr,.ac-check .ac-young-l{grid-column:2} .ac-young-l{justify-self:start;font-size:13px;font-weight:400;color:var(--muted)} .ac-doc{font-weight:700} .ac-note{display:flex;gap:9px;align-items:flex-start;margin:0;padding:10px 12px;border:1px dashed var(--cell-line);border-radius:max(6px,calc(var(--radius)*.55));background:var(--cell-bg2);font-size:13px;line-height:1.45} .ac-note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent)} .ac-submit{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} .ac-forgot{margin:-4px 0 0;font-size:14px} .ac-or{display:flex;align-items:center;gap:10px;max-width:500px;color:var(--muted);font-size:13px} .ac-or::before,.ac-or::after{content:"";flex:1;border-top:1px solid var(--cell-line)} /* mensajes */ .ac-msg{display:flex;align-items:flex-start;gap:9px;margin:0;padding:10px 12px;border-radius:max(6px,calc(var(--radius)*.55));font-size:14px;line-height:1.45} .ac-msg svg{width:18px;height:18px;flex:none;margin-top:1px} .ac-msg.ok{background:var(--cell-play);border:1px solid var(--accent)} .ac-msg.ok svg{color:var(--accent)} .ac-msg.err{background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid var(--danger)} .ac-msg.err svg{color:var(--danger)} .ac-msg.info{background:var(--cell-bg2);border:1px solid var(--cell-line)} .ac-msg.info svg{color:var(--accent)} .ac-center{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px;text-align:center} .ac-center p{margin:0;max-width:54ch;line-height:1.5} .ac-center .ac-ul{text-align:left;margin:4px 0} .ac-big-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 0 0 6px var(--cell-play)} .ac-big-ic svg{width:30px;height:30px} .ac-spin{display:inline-block;flex:none;width:34px;height:34px;box-sizing:border-box;border-radius:50%;border:3px solid var(--cell-line);border-top-color:var(--accent);animation:acSpin .8s linear infinite} .ac-spin.sm{width:14px;height:14px;border-width:2px;border-color:currentColor;border-top-color:transparent} @keyframes acSpin{to{transform:rotate(360deg)}} /* panel de la cuenta */ .ac-sec{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--cell-line)} .ac-sec h4{margin:0;font-family:var(--f-title);font-size:16px} .ac-nick{display:flex;align-items:flex-start;gap:8px;max-width:500px} .ac-nick .ac-field{flex:1} .ac-nick .ac-field>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ac-facts{display:grid;margin:0;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius)*.55));overflow:hidden} .ac-facts div{display:grid;grid-template-columns:minmax(110px,32%) minmax(0,1fr);gap:10px;padding:8px 12px;border-bottom:1px solid var(--cell-line);font-size:14px;line-height:1.45} .ac-facts div:last-child{border-bottom:0} .ac-facts dt{font-weight:700;color:var(--muted)} .ac-facts dd{margin:0;overflow-wrap:anywhere} .ac-tag{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid var(--danger);border-radius:999px;color:var(--danger);font-size:11px;font-weight:700;line-height:1.6;vertical-align:1px} .ac-tag.ok{border-color:var(--accent);color:var(--accent)} .ac-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--cell-line)} .ac-danger-z h4{color:var(--danger)} .ac-danger-z .btn{align-self:flex-start} .ac-what{padding:10px 14px;border-left:4px solid var(--accent);border-radius:0 max(4px,calc(var(--radius)*.5)) max(4px,calc(var(--radius)*.5)) 0;background:var(--cell-bg2)} .ac-what p{margin:4px 0 0} .ac-alt{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--cell-line)} .ac-alt p{margin:0} @container (max-width:560px){ .ac{padding:10px 14px 20px} .ac-hero{flex-direction:column;align-items:flex-start;gap:14px} .ac-hero .ac-card{width:min(270px,100%);transform:none} .ac-compare{grid-template-columns:1fr} .ac-facts div{grid-template-columns:1fr;gap:1px} .ac-cta .btn{flex:1 1 auto} } @media (prefers-reduced-motion:reduce){ .ac-card::after{display:none} .ac-meter i{transition:none} } .ac-h:focus:not(:focus-visible),.ac-msg:focus:not(:focus-visible){outline:none} /* ================= Acceso 1.4: pantalla de entrada con cuenta obligatoria (sitio) ================= */ .ax{position:fixed;inset:0;z-index:65;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));box-sizing:border-box; background:color-mix(in srgb,var(--bg,#111) 62%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);animation:ax-in .3s ease-out} /* sin «both»: si el equipo es lento y la animación tarda en arrancar, la pantalla ya se ve */ .ax.out{animation:ax-out .3s ease-in both} .ax-wrap{width:min(100%,640px);margin:auto 0;display:flex;flex-direction:column;gap:14px} .ax-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--fg)} .ax-brand{display:flex;align-items:center;gap:12px} .ax-brand>svg{width:44px;height:44px;padding:8px;box-sizing:border-box;border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow)} .ax-brand b{display:block;font:700 24px/1.1 var(--f-title);letter-spacing:-.2px} .ax-badge{display:inline-block;margin-top:3px;font:600 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--accent-fg)} .ax-lang{font:600 13px/1 var(--f-ui);color:var(--fg);background:color-mix(in srgb,var(--win-bg) 70%,transparent);border:var(--bw,1px) solid var(--win-border);border-radius:999px;padding:8px 14px;cursor:pointer} .ax-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ax-card{container-type:inline-size;background:var(--win-bg);color:var(--win-fg);border:var(--bw,1px) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .ax-card .ac{padding:18px 22px 24px} .ax-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;color:var(--fg);font-size:13px} .ax-foot .lnk{color:inherit;opacity:.85} /* el escritorio detrás: sin íconos; un aviso legal abierto se pone por encima de la pantalla */ body.ax-on #icons,body.ax-on .mark,body.ax-on #notes{visibility:hidden} /* las ventanitas de avisos esperan en el centro de avisos */ body.ax-on.ax-doc #desk{z-index:66} @keyframes ax-in{from{opacity:0}to{opacity:1}} @keyframes ax-out{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){.ax,.ax.out{animation:none}} @media (max-width:560px){.ax{padding-left:10px;padding-right:10px}.ax-card .ac{padding:14px 14px 20px}.ax-brand b{font-size:20px}} /* ================= En línea (1.4): vestíbulo, sala, barra de jugadores, frases y modos en línea de los cuatro juegos ================= */ .el{position:relative;display:flex;flex-direction:column;gap:14px} .el-head{display:flex;align-items:center;gap:12px} .el-head .el-back{flex:none} .el-ht{min-width:0;flex:1} .el-ht small{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} .el-ht small svg{width:14px;height:14px} .el-ht h3{margin:2px 0 0;font-family:var(--f-title);font-size:clamp(22px,3vw,28px);line-height:1.1} .el-me{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--cell-line);border-radius:999px;background:var(--cell-bg2);font-size:14px;max-width:46%} .el-me b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .el-face{flex:none;width:36px;height:36px;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:max(4px,calc(var(--radius)*.5));background:var(--cell-bg);box-shadow:0 0 0 1px var(--cell-line)} .el-face0{display:inline-block;background:repeating-linear-gradient(45deg,var(--cell-bg),var(--cell-bg) 4px,var(--cell-bg2) 4px,var(--cell-bg2) 8px)} .el-me .el-face{width:28px;height:28px;border-radius:50%} .el-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.6));background:var(--cell-bg2)} .el-card h4{margin:0;font-family:var(--f-title);font-size:19px;line-height:1.2} .el-card p{margin:0;max-width:62ch} .el-acts{gap:8px;flex-wrap:wrap;align-items:center} .el-gate{align-items:flex-start} .el-loading{flex-direction:row;align-items:center} .el-msg{margin:0;padding:10px 14px;border-radius:max(0px,calc(var(--radius)*.5));border:1px solid var(--cell-line);box-shadow:inset 4px 0 0 var(--danger,#d0453b);background:var(--cell-bg2);font-weight:700} .el-ferr{margin:-4px 0 0;color:var(--danger,#d0453b);font-size:13px;font-weight:700} .el-dev{border:1px dashed var(--cell-line);padding:6px 10px;border-radius:6px;align-self:flex-start} .el-spin{flex:none;width:28px;height:28px;border-radius:50%;border:3px solid var(--cell-line);border-top-color:var(--accent);animation:elSpin .9s linear infinite} @keyframes elSpin{to{transform:rotate(360deg)}} .tv-olw{display:grid;place-items:center;min-height:160px} /* vestíbulo */ .el-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px} .el-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 0 0 4px var(--cell-line)} .el-ic svg{width:22px;height:22px} .el-quick{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)} .el-card .hint{flex:1} .el-opt{width:100%} .el-join .ap-field{width:100%} .el-join input{font:700 22px/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.3em;text-transform:uppercase;text-align:center} .el-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px} .el-me2{display:inline-flex;align-items:center;gap:10px;margin-right:auto} .el-me2 span{display:flex;flex-direction:column} .el-me2 small{color:var(--muted);font-size:13px} .el-blocks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%} .el-blocks li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--cell-line)} .el-resume{padding:12px 16px} /* perfil */ .el-prof .ap-field{width:min(100%,360px)} .el-avs{border:0;margin:0;padding:0;min-width:0;width:100%} .el-avs legend{font-weight:700;font-size:14px;margin-bottom:6px;padding:0} .el-avg{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;max-width:520px} .el-av{position:relative;display:grid;place-items:center;cursor:pointer} .el-av input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .el-av .el-face{width:48px;height:48px;transition:transform .12s} .el-av input:checked+span .el-face{box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--cell-line);transform:scale(1.06)} .el-av input:focus-visible+span .el-face{outline:2px solid var(--accent);outline-offset:4px} .el-what{max-width:62ch} /* cola */ .el-queue{align-items:center;text-align:center;padding:26px 16px} .el-radar{position:relative;display:grid;place-items:center;width:132px;height:132px;color:var(--accent)} .el-radar svg{width:46px;height:46px;position:relative} .el-radar i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:elPing 2.4s ease-out infinite} .el-radar i:nth-child(2){animation-delay:.8s}.el-radar i:nth-child(3){animation-delay:1.6s} @keyframes elPing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1);opacity:0}} .el-qt{margin:0;font-variant-numeric:tabular-nums} /* sala */ .el-room{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:12px;align-items:start} .el-room:not(:has(.el-code)){grid-template-columns:1fr} .el-code{align-items:center;text-align:center} .el-cl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .el-cv{font:800 clamp(34px,5vw,46px)/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.18em;color:var(--accent);padding:4px 0 2px .18em;user-select:all} .el-seats{align-self:stretch} .el-seats ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;align-self:stretch} .el-seat{display:flex;align-self:stretch;box-sizing:border-box;width:100%;min-height:50px;align-items:center;gap:10px;padding:6px 8px;border-radius:max(0px,calc(var(--radius)*.5));background:var(--cell-bg);border:1px solid var(--cell-line)} .el-seat>span:not(.el-face){display:flex;flex-direction:column;min-width:0;flex:1} .el-seat b{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .el-seat small{color:var(--muted);font-size:12px} .el-seat.mine{box-shadow:inset 3px 0 0 var(--accent)} .el-seat.off{opacity:.62} .el-seat.free{border-style:dashed;background:transparent} .el-crown{display:inline-grid;width:16px;height:16px;color:#d9a23a}.el-crown svg{width:16px;height:16px} .el-st{flex:none;font-style:normal;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--cell-bg2);border:1px solid var(--cell-line)} .el-seat.ready .el-st{background:#2f9e55;border-color:#2f9e55;color:#fff} .el-kick,.el-more{flex:none} .el-optro{margin-top:4px} .el-room-acts{display:flex} .el-room-acts .hint{max-width:40ch} .el-sp{flex:1} /* barra en la partida */ .el-bar{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.6));background:var(--cell-bg2)} .el-bar-c{padding:2px 4px;border:0;background:transparent;flex-wrap:nowrap} .el-conn{display:inline-grid;place-items:center;width:18px;height:18px;flex:none} .el-conn i{width:10px;height:10px;border-radius:50%;background:#2f9e55;box-shadow:0 0 0 3px color-mix(in srgb,#2f9e55 25%,transparent)} .el-conn[data-conn="connecting"] i,.el-conn[data-conn="retry"] i{background:#e0a020;box-shadow:0 0 0 3px color-mix(in srgb,#e0a020 30%,transparent);animation:elBlink 1s steps(2) infinite} .el-conn[data-conn="off"] i{background:var(--danger,#d0453b);box-shadow:none} @keyframes elBlink{50%{opacity:.35}} .el-players{list-style:none;margin:0;padding:2px;display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin} .el-chip{position:relative;flex:none} .el-chipb{display:flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border:1px solid var(--btn-border);border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:inherit;text-align:left;cursor:default;max-width:190px} button.el-chipb{cursor:pointer} .el-chipb .el-face{width:28px;height:28px;border-radius:50%} .el-cn{display:flex;flex-direction:column;min-width:0;line-height:1.1} .el-cn b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .el-cn small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .el-chip.mine .el-chipb{box-shadow:inset 0 0 0 1px var(--accent)} .el-chip.act .el-chipb{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .el-chip.off .el-chipb,.el-chip.bl .el-chipb{opacity:.6} .el-chip.cpu .el-cn small::before{content:'⚙ ';opacity:.8} .el-bub{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:5;padding:5px 10px;border-radius:12px;background:var(--win-bg);color:var(--win-fg);border:1px solid var(--cell-line);box-shadow:0 4px 14px rgba(0,0,0,.22);font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none} .el-bub::after{content:'';position:absolute;left:50%;top:100%;width:8px;height:8px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:translate(-50%,-4px) rotate(45deg)} .el-bub.em{font-size:22px;padding:2px 8px} .el-bub.pop{animation:elPop .26s ease-out} @keyframes elPop{0%{transform:translateX(-50%) translateY(6px) scale(.7);opacity:0}100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}} .el-bar:not(.el-bar-c) .el-players{padding-top:2px} .el-tools{display:flex;align-items:center;gap:6px;margin-left:auto} .el-bar .el-phr-b span,.el-pl-b span{white-space:nowrap} .el-pop{position:absolute;z-index:70;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);width:min(360px,calc(100% - 8px));max-height:min(60vh,420px);overflow:auto;padding:10px;border:1px solid var(--win-border,var(--cell-line));border-radius:max(6px,calc(var(--radius)*.6));background:var(--win-bg);color:var(--win-fg);box-shadow:0 12px 34px rgba(0,0,0,.3)} .el-phrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px} .el-ph{padding:8px 10px;border:1px solid var(--btn-border);border-radius:max(0px,calc(var(--radius)*.5));background:var(--btn-bg);color:var(--btn-fg);font:inherit;font-weight:700;font-size:14px;cursor:pointer;text-align:left} .el-ph:hover:not([disabled]),.el-em:hover:not([disabled]){border-color:var(--accent)} .el-ph[disabled],.el-em[disabled]{opacity:.45;cursor:default} .el-emo{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--cell-line)} .el-em{display:grid;place-items:center;height:40px;border:1px solid var(--btn-border);border-radius:max(0px,calc(var(--radius)*.5));background:var(--btn-bg);font-size:22px;cursor:pointer} .el-pt{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:700} .el-pt .el-face{width:28px;height:28px} .el-menu{display:flex;flex-direction:column;align-items:stretch;gap:6px} .el-menu .btn{justify-content:flex-start} .el-plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .el-plist li{display:flex;align-items:center;gap:8px} .el-plist li>span{display:flex;flex-direction:column;flex:1;min-width:0} .el-plist small{color:var(--muted);font-size:12px} .el-plist .el-face{width:28px;height:28px} .el-end{gap:8px;flex-wrap:wrap;justify-content:center;align-items:center} /* botón «En línea» en los juegos */ .el-entry{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} .el-go svg{width:18px;height:18px} .el-offnote{display:inline-flex;align-items:center;gap:6px} .el-offnote svg{width:16px;height:16px;flex:none} /* dominó */ .dm-olc{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;border:1px solid var(--accent);border-radius:max(0px,calc(var(--radius)*.6));background:var(--cell-bg2);box-shadow:inset 4px 0 0 var(--accent)} .dm-olc h4{margin:0 0 2px;font-family:var(--f-title);font-size:18px} .dm-olc .el-entry .hint{display:none} .dm-ol .dm-top .el-bar-c{order:5} .dm-ol .dm-phr .dm-phe{font-size:18px;padding:0 10px} /* eco melódico */ .sm-olbox{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--accent);border-radius:max(0px,calc(var(--radius)*.55));background:var(--cell-bg2);box-shadow:inset 4px 0 0 var(--accent)} .sm-olbox h5{margin:0;font-family:var(--f-title);font-size:16px} .sm-olbox .el-entry .hint{display:none} .sm-duel{gap:12px} .sm-dl{font-variant-numeric:tabular-nums} .sm-dl.low{color:var(--danger,#d0453b);font-weight:700} /* buscaminas */ .el-go-s{min-height:32px} .bm-olv{gap:10px} .bm-race{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 12px} .bm-race li{display:grid;grid-template-columns:auto minmax(50px,auto) 1fr auto auto;align-items:center;gap:8px;padding:4px 8px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.5));background:var(--cell-bg2)} .bm-race li.mine{box-shadow:inset 3px 0 0 var(--accent)} .bm-race li.done{border-color:#2f9e55} .bm-race .el-face{width:24px;height:24px;border-radius:50%} .bm-rn{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px} .bm-rbar{height:10px;border-radius:99px;background:var(--cell-bg);border:1px solid var(--cell-line);overflow:hidden} .bm-rbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .45s ease-out} .bm-race li.done .bm-rbar i{background:#2f9e55} .bm-race b{font-size:13px;font-variant-numeric:tabular-nums} .bm-race small{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--danger,#d0453b)} .bm-race small svg{width:13px;height:13px} .bm-olv .bm-face{cursor:default} .bm-pz.bm-ollock{background:color-mix(in srgb,var(--danger,#d0453b) 22%,transparent);backdrop-filter:none} .bm-pz.bm-ollock .bm-pzc{border-color:var(--danger,#d0453b)} .bm-olbig,.tv-olbig{margin:0;font:800 64px/1 var(--f-title);color:var(--accent);font-variant-numeric:tabular-nums} .bm-olrank,.tv-olboard{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%} .bm-olrank li{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:3px 6px;border-radius:6px} .bm-olrank li.mine,.tv-olboard li.mine{background:var(--cell-bg);font-weight:700} .bm-olrank em{font-style:normal;font-variant-numeric:tabular-nums} /* trivia */ .tv-olc{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)} .tv-olc .el-entry .hint{display:none} .tv-olcount{text-align:center;gap:6px} .tv-olcount h3{margin:0;font-family:var(--f-title)} .tv-opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .tv-olboard li{display:grid;grid-template-columns:1fr auto 70px;gap:8px;align-items:center;padding:2px 6px;border-radius:6px;font-variant-numeric:tabular-nums} .tv-olboard em{font-style:normal;color:#2f9e55;font-weight:700} .tv-olboard b{text-align:right} .tv-ola{margin-top:-6px} .tv-olover{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px} .tv-olover h3,.tv-olover p{margin:0} .tv-olrank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:min(100%,460px)} .tv-olrank li{text-align:left;display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.5));background:var(--cell-bg2)} .tv-olrank li.mine{box-shadow:inset 3px 0 0 var(--accent)} .tv-olrank li.gold .tv-olp{background:#d9a23a;color:#fff} .tv-olp{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--cell-bg);font-weight:800} .tv-oln{display:flex;flex-direction:column;flex:1;min-width:0;font-weight:700} .tv-oln small{font-weight:400;color:var(--muted);font-size:12px} .tv-olrank b{font-variant-numeric:tabular-nums;font-size:18px} .tv-olrank .el-face{width:32px;height:32px} .tv-ol .tv-time.done i{width:0!important} /* teléfono */ @media (max-width:720px){ .el-head{flex-wrap:wrap} .el-me{max-width:100%} .el-room{grid-template-columns:1fr} .el-bar{padding:4px 6px} .el-bar .el-phr-b span,.el-bar .el-pl-b span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .el-chipb{max-width:150px} .bm-race{grid-template-columns:1fr} .el-emo{grid-template-columns:repeat(6,1fr)} .el-pop{width:calc(100% - 8px);left:4px!important} } @media (prefers-reduced-motion:reduce){ .el-spin{animation:none;border-top-color:var(--cell-line);border-right-color:var(--accent)} .el-radar i{animation:none;opacity:.35;transform:scale(.65)} .el-radar i:nth-child(2){transform:scale(.85)}.el-radar i:nth-child(3){transform:scale(1)} .el-bub.pop{animation:none} .el-conn i{animation:none!important} .bm-rbar i{transition:none} } /* ---------- 1.0: escritorio: los íconos nunca se aplastan y las etiquetas usan hasta dos líneas ---------- */ .icon .tile{flex:none} .icon .lbl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:normal;-webkit-hyphens:auto;hyphens:auto} @media (min-width:721px){ .icons{grid-template-rows:repeat(auto-fill,minmax(117px,auto))} } @media (max-width:720px){ .icon .lbl{-webkit-line-clamp:3} } /* ---------- 1.0: menú de inicio en dos columnas (apps | sistema) cuando hay espacio ---------- */ .menu-cols{display:grid;grid-template-columns:minmax(0,1fr)} .menu-apps,.menu-sys{display:flex;flex-direction:column;min-width:0} @media (min-width:721px) and (min-height:600px){ .menu{width:560px} .menu-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:8px} .menu-sys{padding-left:8px;border-left:1px solid var(--cell-line)} .menu-sys>.menu-sep{display:none} .menu-sys>hr:last-of-type{margin-top:auto} .menu .mi{padding-top:7px;padding-bottom:7px} } @media (min-width:721px) and (min-height:600px) and (max-height:779px){ .menu .mi{padding-top:5px;padding-bottom:5px} .menu .menu-head{padding-bottom:6px} } /* ---------- 1.0: enlaces internos del Léeme (#legal, #cuenta) ---------- */ .doc a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;border-radius:2px} .doc a:hover{text-decoration-thickness:3px} /* ---------- 1.3 (qa_sistema): el menú de inicio cabe entero en pantallas de 720 a 880 px de alto (antes había que desplazarlo para ver «Léeme» y «Apagar» en una laptop de 1280 × 800) ---------- */ @media (min-width:721px) and (min-height:600px) and (max-height:879px){ .menu .mi{padding-top:3px;padding-bottom:3px} .menu .menu-head{padding-bottom:5px} } @media (min-width:721px) and (min-height:600px) and (max-height:759px){ .menu .mi{padding-top:1px;padding-bottom:1px} .menu .menu-head{padding-top:2px;padding-bottom:3px;margin-bottom:2px} } /* ---------- 1.3: el título de la ventana recibe el foco al abrirla; su anillo queda dentro de la barra ---------- */ .win-title h2:focus-visible{outline-offset:-2px;border-radius:4px} /* ---------- 1.3: Temas › categorías: en ventanas anchas se ven todas (antes 7 de 15 quedaban escondidas a la derecha, sin pista de que había más); en angostas siguen deslizándose ---------- */ @container (min-width:640px){ .tw-cats{flex-wrap:wrap;overflow-x:visible} } /* ---------- 1.3: con muchas ventanas abiertas, los botones de la barra se encogen (antes los de la derecha quedaban escondidos sin barra de desplazamiento y no se podían alcanzar con el ratón) ---------- */ #tasks .task{flex:0 1 auto;min-width:42px} /* ---------- 1.3: teléfono apaisado o ventana muy baja (más de 720 px de ancho, menos de 520 de alto): íconos compactos en tres filas (antes hacían falta diez columnas y Perfil, Temas y Léeme quedaban fuera de la pantalla) ---------- */ @media (min-width:721px) and (max-height:520px){ .icons{grid-template-rows:repeat(auto-fill,minmax(98px,auto));grid-auto-columns:80px;gap:2px} .icon{width:78px;padding:4px 2px;gap:4px} .icon.big .tile{width:50px;height:50px} .icon.big .tile svg{width:28px;height:28px} .icon .lbl{font-size:12px} } /* ---------- 1.3: apagado, la barra de carga vacía parecía una carga trabada: sólo se ve al encender ---------- */ #power:not(.booting) .pw-bar{visibility:hidden} /* ---------- beta: teléfono angosto. La bandeja ocupaba 280 px y a las apps abiertas o minimizadas les quedaban unos cuantos píxeles. Ahora la bandeja se compacta, «Pausar todo» se esconde (minimizar ya pausa los juegos) y cada app abierta se ve como un ícono de 38 px que se puede tocar ---------- */ @media (max-width:560px){ #bar{gap:5px;padding-left:5px;padding-right:5px} .tray{gap:3px} .tray > .tray-b,.tray > #me,.tray > :is(#snd,.tray-b){width:32px;min-width:32px} #tasks{gap:4px} #tasks .task{min-width:38px;padding:0 8px;justify-content:center} #tasks .task svg{flex:none} .clock{padding-right:0} } @media (max-width:420px){ #pz-tray{display:none} #start{padding:0 8px} } @media (max-width:380px){ #kofi-tray{display:none} } /* Ko-fi sigue en Inicio y en el escritorio */ /* ---------- beta: escritorio del teléfono sin espacio desperdiciado. Las columnas se reparten el ancho (5 en un teléfono normal, 4 en los muy angostos) y los nombres ya no se parten con guiones: si una palabra no cabe, su letra se achica un poco (recompensas.js, rwIconFit) ---------- */ @media (max-width:720px){ #icons.icons{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));width:100%;column-gap:2px;row-gap:2px;justify-items:stretch} #icons .icon{width:auto;min-width:0;padding:4px 1px;gap:4px;box-sizing:border-box} #icons .icon .lbl{font-size:12px;padding:2px 3px;margin:0 -3px;max-width:calc(100% + 6px);box-sizing:border-box;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal} #desk{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))} } /* ---------- 1.17.41 · teléfono acostado: los íconos llenan el ancho, en filas (Andre, 20 oct: «ajustar mejor los iconos en orientación horizontal, caben más»). Antes iban en columnas de tres y la tercera parte derecha de la pantalla quedaba vacía; ahora se reparten como en el teléfono en vertical (en un iPhone grande, diez por fila: todos caben en dos filas y el logotipo queda libre) y los nombres no se parten con guion: si una palabra no cabe, su letra se achica (rwIconFit) ---------- */ @media (min-width:721px) and (max-height:520px){ #icons.icons{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));grid-template-rows:none;grid-auto-columns:auto;width:100%;height:auto;column-gap:2px;row-gap:4px;justify-items:stretch} #icons .icon{width:auto;min-width:0;padding:4px 1px;gap:4px;box-sizing:border-box} #icons .icon .lbl{font-size:12px;padding:2px 3px;margin:0 -3px;max-width:calc(100% + 6px);box-sizing:border-box;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal} } /* computadora y tableta: si así cabe una fila más de íconos, se aprietan un poco sus márgenes (recompensas.js) */ @media (min-width:721px){ #icons.tight .icon{padding-top:2px;padding-bottom:2px;gap:3px} } /* bienvenida: paso «Crea tu cuenta» */ .wl-acc{display:flex;flex-direction:column;gap:10px;margin-top:4px} .wl-acc .wl-gi svg{width:24px;height:24px} .wl-acc-ok{display:flex;align-items:center;gap:8px;font-weight:600} /* ================= Grabadora (1.3) ================= */ .gr{display:flex;flex-direction:column;gap:10px;min-width:0} .gr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;border-bottom:1px solid var(--cell-line)} .gr-tabs{display:flex;gap:4px;min-width:0} .gr-tab{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:5px 12px 6px;margin-bottom:-1px;border-bottom:3px solid transparent;color:var(--muted);font-weight:700;cursor:pointer;white-space:nowrap} .gr-tab svg{width:18px;height:18px;flex:none} .gr-tab[aria-selected="true"]{color:var(--win-fg);border-bottom-color:var(--accent)} .gr-tab:hover{color:var(--win-fg)} .gr-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-size:12px;font-variant-numeric:tabular-nums} .gr-n[hidden]{display:none} .gr-priv{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;font-size:13px;color:var(--muted)} .gr-priv svg{width:16px;height:16px;flex:none;color:var(--accent)} .gr-p[hidden]{display:none!important} .gr-recp{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:16px;align-items:start} .gr-main{display:flex;flex-direction:column;gap:12px;min-width:0} /* ---- monitor: la vista previa con su luz de grabación ---- */ .gr-mon{padding:8px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.7));background:var(--cell-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -8px 18px rgba(0,0,0,.08)} .gr-scr{position:relative;display:grid;place-items:center;min-height:120px;border-radius:max(0px,calc(var(--radius)*.45));overflow:hidden;background:var(--cell-bg2);outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s} .gr-cv{display:block;width:100%;height:auto;max-height:min(50vh,520px);aspect-ratio:16 / 9;object-fit:contain;background:var(--cell-bg2)} .gr[data-st="rec"] .gr-scr{outline-color:var(--danger)} .gr[data-st="pause"] .gr-scr{outline-color:var(--muted)} .gr-act{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);z-index:2} .gr-act[hidden],.gr-cd[hidden],.gr-badge[hidden]{display:none} .gr-cd{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--win-bg) 55%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .gr-cdn{display:grid;place-items:center;width:clamp(84px,22%,150px);aspect-ratio:1;border-radius:50%;border:4px solid var(--danger);background:var(--win-bg);color:var(--win-fg);font:700 clamp(46px,9vw,88px)/1 var(--f-title);font-variant-numeric:tabular-nums;box-shadow:0 10px 30px rgba(0,0,0,.25)} .gr-cdn.pop{animation:grPop .5s cubic-bezier(.2,.9,.3,1.3)} @keyframes grPop{from{transform:scale(1.35);opacity:.3}to{transform:none;opacity:1}} .gr-badge{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--win-bg);color:var(--win-fg);border:1px solid var(--cell-line);font:700 13px/1 var(--f-mono);letter-spacing:.04em;box-shadow:0 4px 12px rgba(0,0,0,.2)} .gr-badge i{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:grBlink 1.2s steps(2,jump-none) infinite} .gr[data-st="pause"] .gr-badge i{animation:none;background:var(--muted)} .gr-badge-s{font-variant-numeric:tabular-nums;opacity:.85} @keyframes grBlink{50%{opacity:.25}} .gr-mbar{display:flex;align-items:center;gap:8px;padding:8px 4px 0;font-size:13px;color:var(--muted);min-width:0} .gr-srcl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--win-fg);font-weight:700} .gr-res{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums} .gr-lamp{width:12px;height:12px;flex:none;border-radius:50%;background:var(--cell-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)} .gr[data-st="rec"] .gr-lamp{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent),0 0 12px var(--danger)} .gr[data-st="pause"] .gr-lamp,.gr[data-st="count"] .gr-lamp{background:var(--accent)} /* ---- consola: botón grande de grabar, pausa, tiempo ---- */ .gr-deck{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px} .gr-go{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:7px 20px 7px 7px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:999px;font:700 17px/1 var(--f-title);cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.12)} .gr-go:active:not(:disabled){transform:translateY(1px)} .gr-go:disabled{cursor:default;opacity:.75} .gr-go-i{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--win-bg);box-shadow:inset 0 0 0 2px var(--cell-line)} .gr-go-i::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--danger);transition:border-radius .18s,width .18s,height .18s;box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent)} .gr-go:hover:not(:disabled) .gr-go-i::after{box-shadow:0 0 0 5px color-mix(in srgb,var(--danger) 28%,transparent)} .gr-go.gr-on .gr-go-i::after{width:18px;height:18px;border-radius:3px} .gr-pz{width:46px;height:46px} .gr-pz[hidden]{display:none} .gr-pz svg{width:18px;height:18px} .gr-pz[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} .gr-time{display:flex;flex-direction:column;gap:2px;min-width:7ch;margin-right:auto} .gr-el{font:700 26px/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:.02em} .gr[data-st="rec"] .gr-el{color:var(--danger)} .gr-sz{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .gr-snap:disabled{opacity:.5;cursor:default} .gr-msg{margin:0;min-height:1.3em;font-size:14px;font-weight:700} .gr-msg:empty{min-height:0} /* ---- tarjeta «Listo» ---- */ .gr-done{display:flex;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.55));background:var(--cell-bg2)} .gr-done[hidden]{display:none} .gr-done-t{flex:none;width:104px;aspect-ratio:16 / 9;border-radius:max(0px,calc(var(--radius)*.35));overflow:hidden;background:var(--cell-bg);display:grid;place-items:center;color:var(--accent)} .gr-done-t img{width:100%;height:100%;object-fit:cover;display:block} .gr-done-b{flex:1;min-width:0;display:grid;gap:4px} .gr-done-b .btn{min-height:32px;padding:0 12px} .gr-done-b p{margin:0} .gr-done-b > p:first-child{font-weight:700;overflow-wrap:anywhere} .gr-x{width:34px;height:34px;margin-left:auto} .gr-wf{width:100%;height:100%;fill:currentColor} /* ---- panel lateral: fuentes ---- */ .gr-side{display:flex;flex-direction:column;gap:12px;min-width:0} .gr-fs{margin:0;padding:10px 12px 12px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.55));background:var(--cell-bg2);min-width:0;display:grid;gap:10px} .gr-fs > legend{padding:0 6px;font-family:var(--f-title);font-weight:700;font-size:15px} .gr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .gr-tile{position:relative;display:block;min-width:0;cursor:pointer} .gr-tile-b{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;padding:8px 4px 7px;box-sizing:border-box;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.5));text-align:center;transition:background .15s,box-shadow .15s} .gr-tile-b svg{width:24px;height:24px;color:var(--accent)} .gr-tile-b b{font-size:13px;line-height:1.15} .gr-tile-b small{font-size:11px;line-height:1.2;color:var(--muted)} .gr-tile-t{display:grid;gap:2px} .gr-tile:last-child{grid-column:span 2} .gr-tile:last-child .gr-tile-b{flex-direction:row;justify-content:center;gap:10px;text-align:left} .gr-tile:hover .gr-tile-b{background:var(--menu-hi)} .gr-tile input:checked + .gr-tile-b{background:var(--menu-hi);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)} .gr-tile input:focus-visible + .gr-tile-b,.gr-chip input:focus-visible + span,.gr-corner input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px} .gr-tile input:disabled + .gr-tile-b{opacity:.55;cursor:not-allowed} .gr-tile.lock .gr-tile-b{border-style:dashed} .gr-lk{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--win-bg);color:var(--muted);font:700 12px/1 var(--f-ui);font-style:normal} .gr-lk svg{width:12px;height:12px;color:inherit} .gr-wn{background:var(--danger);color:var(--accent-fg)} .gr-sub{display:grid;gap:6px} .gr-sub:empty{display:none} .gr-sub .hint{line-height:1.4} .gr-wins{margin:0;padding:0;border:0;min-width:0;display:grid;gap:6px} .gr-wins legend{padding:0;margin-bottom:6px} .gr-chips{display:flex;flex-wrap:wrap;gap:6px} .gr-chip{cursor:pointer;min-width:0} .gr-chip span{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 10px 5px 8px;box-sizing:border-box;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gr-chip svg{width:16px;height:16px;flex:none;color:var(--accent)} .gr-chip input:checked + span{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .gr-chip input:checked + span svg{color:inherit} .gr-try{gap:6px} .btn.gr-mini{min-height:32px;padding:0 10px;font-size:13px;gap:6px} .btn.gr-mini svg{width:15px;height:15px} .gr-bub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px dashed var(--cell-line)} .gr-bub .tog{align-items:center;gap:8px} .gr-bub .tog > span{display:inline-flex;align-items:center;gap:8px} .gr-bub .tog svg{width:22px;height:22px;flex:none;color:var(--accent)} .gr-bub .tog small{display:block;font-size:12px;color:var(--muted);font-weight:400} .gr-bub input:disabled ~ span{opacity:.55} .gr-mir{align-items:flex-start;gap:8px} .gr-mir input{margin-top:2px} .gr-mir > span{display:grid;gap:1px} .gr-mir small{font-size:12px;color:var(--muted);line-height:1.3} .gr-corners{display:grid;grid-template-columns:repeat(2,22px);gap:3px;padding:4px;border:1px solid var(--cell-line);border-radius:6px;background:var(--cell-bg)} .gr-corner{cursor:pointer;display:block} .gr-corner > span{position:relative;display:block;width:22px;height:15px;border-radius:3px;background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line)} .gr-corner > span::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.6} .gr-corner > span[data-k="tl"]::after{top:2px;left:2px}.gr-corner > span[data-k="tr"]::after{top:2px;right:2px} .gr-corner > span[data-k="bl"]::after{bottom:2px;left:2px}.gr-corner > span[data-k="br"]::after{bottom:2px;right:2px} .gr-corner input:checked + span{box-shadow:inset 0 0 0 2px var(--accent)} .gr-corner input:checked + span::after{background:var(--accent);opacity:1} /* ---- canales de sonido con medidor ---- */ .gr-chs{display:grid;gap:6px} .gr-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(84px,40%);grid-template-areas:"on on" "meter gain";gap:5px 10px;align-items:center;padding:6px 10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.45));background:var(--cell-bg)} .gr-ch-on{grid-area:on;display:flex;align-items:center;gap:8px;cursor:pointer;min-width:0} .gr-ch-on input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--accent)} .gr-ch-ic svg{display:block;width:20px;height:20px;color:var(--accent)} .gr-ch:not(.gr-on) .gr-ch-ic{opacity:.45} .gr-ch-t{display:grid;min-width:0} .gr-ch-t b{font-size:14px;line-height:1.2} .gr-ch-t small{font-size:12px;color:var(--muted);line-height:1.25} .gr-ch > .btn{grid-column:1 / -1;justify-self:start} .gr-meter{grid-area:meter;position:relative;height:10px;border-radius:3px;background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line);overflow:hidden;--l:0;--p:0} .gr-meter i{position:absolute;inset:1px;background:linear-gradient(90deg,var(--accent) 0 68%,color-mix(in srgb,var(--accent) 45%,var(--danger)) 84%,var(--danger) 94%);-webkit-mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px);mask:repeating-linear-gradient(90deg,#000 0 5px,transparent 5px 7px);clip-path:inset(0 calc((1 - var(--l)) * 100%) 0 0)} .gr-meter u{position:absolute;top:1px;bottom:1px;width:2px;left:calc(var(--p) * (100% - 2px));background:var(--win-fg);opacity:calc(var(--p) * 4);text-decoration:none} .gr-meter.clip{box-shadow:inset 0 0 0 1px var(--danger)} .gr-ch:not(.gr-on) .gr-meter{opacity:.5} .gr-gain{grid-area:gain;width:100%;min-width:0;margin:0;accent-color:var(--accent)} .gr-mute{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;font-size:13px} .gr-mute[hidden],.gr-why[hidden]{display:none} .gr-why{display:grid;gap:6px;justify-items:start;padding:8px 10px;border-left:3px solid var(--accent);background:var(--cell-bg2);border-radius:0 max(0px,calc(var(--radius)*.4)) max(0px,calc(var(--radius)*.4)) 0;line-height:1.4;color:var(--win-fg)} .gr-why p{margin:0} .gr-why-l{margin:0;padding:0 0 0 1.1em;display:grid;gap:5px} .gr-why-b{font-weight:600} .gr-more{border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.55));padding:0 12px;background:var(--cell-bg2)} .gr-more summary{padding:9px 0;cursor:pointer;font-weight:700} .gr-more-b{display:grid;gap:10px;padding:0 0 12px} .gr-q{margin:0;padding:0;border:0;display:grid;gap:6px} .gr-q legend{padding:0;margin-bottom:6px;font-size:13px;font-weight:700} .gr-q .seg{display:flex;width:max-content;max-width:100%} .gr-q label{cursor:pointer} .gr-q label input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .gr-q label span{display:block;padding:5px 10px;background:var(--btn-bg);color:var(--btn-fg);font-weight:700;font-size:13px;white-space:nowrap} .gr-q label span small{font-weight:400;opacity:.8} .gr-q label + label span{border-left:1px solid var(--btn-border)} .gr-q input:checked + span{background:var(--pri-bg);color:var(--pri-fg)} .gr-q input:focus-visible + span{outline:2px solid var(--focus);outline-offset:-3px} .gr-q input:disabled + span{opacity:.55;cursor:default} /* ---- Mis grabaciones ---- */ .gr-libp{display:flex;flex-direction:column;gap:12px} .gr-libmsg[hidden],.gr-player[hidden]{display:none} .gr-player{display:grid;gap:8px;padding:10px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.6));background:var(--cell-bg)} .gr-pm{display:grid;place-items:center;border-radius:max(0px,calc(var(--radius)*.4));overflow:hidden;background:var(--cell-bg2)} .gr-pm video{display:block;width:100%;max-height:min(58vh,540px);background:#000} .gr-pm audio{display:block;width:100%;margin:6px 0} .gr-pwf{width:100%;height:64px;color:var(--accent);padding:8px 10px 0;box-sizing:border-box} .gr-pb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0} .gr-pb > b{min-width:0;overflow-wrap:anywhere} .gr-sp{flex:1} .gr-pb .iconbtn{width:34px;height:34px} .gr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .gr-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.55));background:var(--cell-bg2);overflow:hidden} .gr-card.playing{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .gr-th{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16 / 9;padding:0;border:0;background:var(--cell-bg);color:var(--accent);cursor:pointer;overflow:hidden} .gr-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .gr-th .gr-wf{position:absolute;inset:14% 6%;width:88%;height:72%} .gr-pl{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);box-shadow:0 4px 14px rgba(0,0,0,.3);opacity:.92;transition:transform .15s} .gr-pl svg{width:20px;height:20px;margin-left:2px} .gr-th:hover .gr-pl,.gr-th:focus-visible .gr-pl{transform:scale(1.08);opacity:1} .gr-th:focus-visible{outline:2px solid var(--focus);outline-offset:-3px} .gr-du,.gr-kd{position:absolute;bottom:6px;padding:2px 7px;border-radius:5px;background:var(--win-bg);color:var(--win-fg);font:700 12px/1.3 var(--f-mono);font-variant-numeric:tabular-nums} .gr-du{right:6px} .gr-kd{left:6px;font-family:var(--f-ui);text-transform:uppercase;letter-spacing:.05em;font-size:11px} .gr-cb{display:grid;gap:6px;padding:10px;min-width:0} .gr-cn{margin:0;font-size:15px;line-height:1.25;overflow-wrap:anywhere} .gr-cm{line-height:1.35} .gr-ca{display:flex;align-items:center;gap:6px} .gr-ca .iconbtn{width:34px;height:34px} .gr-ca .gr-mini{margin-right:auto} .gr-dlm{display:grid;gap:4px;padding:6px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius)*.4));background:var(--cell-bg)} .gr-dlm[hidden]{display:none} .gr-dlo{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:max(0px,calc(var(--radius)*.35));background:none;color:inherit;text-align:left;cursor:pointer;font-size:13px} .gr-dlo:hover:not(:disabled){background:var(--menu-hi)} .gr-dlo:disabled{opacity:.5;cursor:default} .gr-dlo b{font-weight:700} .gr-dlp{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:400} .gr-dlp:empty{display:none} .gr-dlh{margin:4px 9px 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)} .gr-ren{display:flex;flex-wrap:wrap;gap:6px} .gr-ren input{flex:1 1 140px;min-width:0;min-height:34px;padding:0 9px;border:1px solid var(--btn-border);border-radius:max(0px,calc(var(--radius)*.4));background:var(--win-bg);color:var(--win-fg)} .gr-ren .btn{min-height:34px;padding:0 10px} .gr-conf{display:grid;gap:8px;padding:8px 10px;border:1px solid var(--danger);border-radius:max(0px,calc(var(--radius)*.4));background:var(--cell-bg)} .gr-conf p{margin:0;font-weight:700;overflow-wrap:anywhere} .btn.gr-danger{color:var(--danger);border-color:var(--danger)} .gr-empty{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 12px;text-align:center;border:1px dashed var(--cell-line);border-radius:max(0px,calc(var(--radius)*.55))} .gr-empty p{margin:0;max-width:40ch} .gr-empty-i svg{width:44px;height:44px;color:var(--accent);opacity:.8} .gr-store{line-height:1.45} /* ---- indicador de la bandeja ---- */ .gr-tray{display:inline-flex;align-items:stretch;height:32px;border:1px solid var(--danger);border-radius:999px;overflow:hidden;background:var(--btn-bg);color:var(--btn-fg);flex:none} .gr-tray[hidden]{display:none} .gr-tray button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:inherit;cursor:pointer;padding:0 10px;font:700 13px/1 var(--f-mono);font-variant-numeric:tabular-nums} .gr-tr-x{padding:0 9px!important;border-left:1px solid var(--btn-border)!important} .gr-tr-x svg{width:12px;height:12px;color:var(--danger)} .gr-tr-x[hidden]{display:none!important} .gr-tr-d{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:grBlink 1.2s steps(2,jump-none) infinite} .gr-tray[data-st="pause"] .gr-tr-d,.gr-tray[data-st="save"] .gr-tr-d{animation:none;background:var(--muted)} .gr-tray[data-st="count"] .gr-tr-d{animation:none} .gr-tray button:hover{background:var(--menu-hi)} /* ---- videos ocultos de las fuentes ---- */ #gr-vids{position:fixed;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none;z-index:-1} #gr-vids video{width:2px;height:2px} /* ---- ventanas angostas y teléfono ---- */ @container (max-width:800px){ .gr-recp{grid-template-columns:minmax(0,1fr)} .gr-cv{max-height:46vh} } @container (max-width:460px){ .gr-tab{padding:8px 8px} .gr-priv > span:not(.sr){display:none} .gr-priv{margin-left:auto} .gr-tiles{gap:5px} .gr-tile-b small{display:none} .gr-go{min-height:52px;padding-right:16px;font-size:16px} .gr-go-i{width:38px;height:38px} .gr-snap span{display:none} .gr-snap{padding:0 10px} .gr-el{font-size:22px} .gr-done{flex-direction:column;align-items:stretch} .gr-done-t{width:100%} .gr-list{grid-template-columns:minmax(0,1fr)} } @media (max-width:480px){ .gr-tray button{padding:0 8px} .gr-tr-x{display:none!important} } /* pantallas bajas (laptops de 768–860 px): sin las descripciones secundarias, para que todo quepa sin desplazarse */ @media (max-height:860px) and (min-width:721px){ .gr-tile-b small,.gr-ch-t small:not(.gr-state){display:none} .gr-tile-b{padding:7px 4px 6px} .gr-fs{padding:8px 10px 10px;gap:8px} .gr,.gr-side,.gr-main{gap:8px} .gr-mon{padding:6px} .gr-mbar{padding-top:6px} .gr-go{min-height:52px} .gr-go-i{width:40px;height:40px} } @media (prefers-reduced-motion:reduce){ .gr-badge i,.gr-tr-d{animation:none} .gr-cdn.pop{animation:none} } /* ================= Atelier: la mesa del artista ================= Materiales de verdad con la luz arriba a la izquierda: la mesa de nogal (bienvenida), el nogal oscuro de la barra y el gabinete, el papel, el latón, el acero cepillado de la charola y el vidrio de los frascos. El muro gris neutro alrededor del lienzo deja juzgar el color sin que la madera lo tiña. El acento del tema solo marca la herramienta activa, lo elegido y la acción principal. Letras propias (atelier.js › atFonts): Cormorant Garamond para títulos (itálica de galería), Caveat para lo escrito a mano y Instrument Sans para la interfaz, con versalitas espaciadas como en las cédulas de un museo. */ .win[data-id="atelier"] .win-body{display:flex;flex-direction:column;padding:0;overflow:hidden} .win.max .at,.win.wv-sized .at,.win.fw .at{flex:1 1 auto;height:auto;min-height:0} .win.fw[data-id="atelier"] .win-body{padding:0} @media (hover:hover) and (pointer:fine){ .win.fw[data-id="atelier"] .win-title,.win.fw.fw-idle[data-id="atelier"] .win-title{position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none} } .win.fw.fw-idle[data-id="atelier"]{cursor:auto} @media (max-width:720px){ .at{flex:1 1 auto!important;height:auto!important;min-height:0!important} } .at{ --at-acc:var(--accent,#c9a24a); --at-acc-fg:var(--accent-fg,#1b140c); --at-ink:#2a2118; --at-ink2:#5b4630; --at-ink3:#806a4c; --at-line:rgba(110,80,40,.24); --at-paper:#f6eedd; --at-paper2:#ecdfc3; --at-ivory:#f8ecd4; --at-ivory2:#e2cfa9; --at-cur:#2b2118; --at-ft:'Atelier Garamond','Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif; --at-fh:'Atelier Mano','Caveat','Segoe Print','Bradley Hand','Comic Sans MS',cursive; --at-fu:'Atelier Sans','Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --at-ease:cubic-bezier(.32,.72,0,1); --at-laton:linear-gradient(180deg,#fbe9b4 0%,#e2bd68 38%,#b78a35 70%,#d9b462 100%); --at-tex-mesa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='440'%3E %3Cfilter id='w' color-interpolation-filters='sRGB' x='-60' y='-60' width='1720' height='560' filterUnits='userSpaceOnUse'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.0026 .072' numOctaves='5' seed='17' result='g'/%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.004 .012' numOctaves='2' seed='3' result='d'/%3E %3CfeDisplacementMap in='g' in2='d' scale='20' xChannelSelector='R' yChannelSelector='G' result='g2'/%3E %3CfeColorMatrix in='g2' values='.95 0 0 0 -.07 .62 0 0 0 -.06 .38 0 0 0 -.045 0 0 0 0 1'/%3E%3C/filter%3E %3Cfilter id='f' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .62' numOctaves='3' seed='4' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .035 0 0 0 0 .015 2.4 0 0 0 -1.2'/%3E%3C/filter%3E %3Cfilter id='p' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2' seed='12' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .025 0 0 0 0 .01 1.6 0 0 0 -.95'/%3E%3C/filter%3E %3Crect x='-60' y='-60' width='1720' height='560' filter='url(%23w)'/%3E%3Crect width='1600' height='440' filter='url(%23f)' opacity='.4'/%3E%3Crect width='1600' height='440' filter='url(%23p)' opacity='.5'/%3E %3Cpath d='M0 1H1600M0 221H1600' stroke='%230d0603' stroke-opacity='.85' stroke-width='2.6'/%3E %3Cpath d='M0 3.6H1600M0 223.6H1600' stroke='%23ffd9a6' stroke-opacity='.10' stroke-width='1.2'/%3E %3Cpath d='M0 214H1600M0 434H1600' stroke='%23000' stroke-opacity='.12' stroke-width='10'/%3E %3Cpath d='M1 0V220M1 222V440M781 222V440' stroke='%230d0603' stroke-opacity='.75' stroke-width='2.4'/%3E %3Cpath d='M3.4 0V220M3.4 222V440M783.4 222V440' stroke='%23ffd9a6' stroke-opacity='.08' stroke-width='1.1'/%3E%3C/svg%3E"); --at-tex-nogal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='240'%3E %3Cfilter id='w' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='5' seed='29' stitchTiles='stitch'/%3E %3CfeColorMatrix values='.98 0 0 0 -.25 .6 0 0 0 -.165 .35 0 0 0 -.1 0 0 0 0 1'/%3E%3C/filter%3E %3Cfilter id='f' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .7' numOctaves='2' seed='9' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .025 0 0 0 0 .01 3 0 0 0 -1.5'/%3E%3C/filter%3E %3Crect width='700' height='240' filter='url(%23w)'/%3E%3Crect width='700' height='240' filter='url(%23f)' opacity='.35'/%3E%3C/svg%3E"); --at-tex-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .27 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --at-tex-fibras:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .3' numOctaves='3' seed='8' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --at-tex-wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .085 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --at-tex-acero:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --at-tex-mecate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Crect y='2' width='10' height='4' fill='%23cbb386'/%3E%3Cpath d='M-1 6.2 4 1.8M4 6.2 9 1.8M9 6.2 14 1.8' stroke='%238a7148' stroke-width='1.2'/%3E%3Cpath d='M0 2.6H10' stroke='%23fff3d2' stroke-opacity='.45' stroke-width='.7'/%3E%3C/svg%3E"); position:relative;isolation:isolate;display:flex;flex-direction:column;height:min(86vh,940px);min-height:440px;overflow:hidden; font:400 14px/1.35 var(--at-fu);color:var(--at-ink);background:#3a2516;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none; -webkit-font-smoothing:antialiased;font-kerning:normal } .at input,.at textarea,.at select{-webkit-user-select:text;user-select:text} /* los reinicios pesan (0,1,0): ganan a los estilos globales y pierden ante las clases que siguen */ .at :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:0;min-width:0;box-shadow:none;text-shadow:none;border-radius:0;letter-spacing:inherit} .at :where(button:disabled){cursor:default} .at :where(svg){display:block} .at :where(h2,h3,h4,h5,p){margin:0;font-weight:inherit} .at{color-scheme:light} .at :focus-visible{outline:2px solid var(--at-acc);outline-offset:2px} .at :is(.at-dlg,.at-panel,.at-opts,.at-menu,.at-picker,.at-texted,.at-ref) :focus-visible{outline-color:#6b3d0c} .at-stage:focus-visible{outline:3px solid var(--at-acc);outline-offset:-3px} .at .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .at-defs{position:absolute;width:0;height:0;overflow:hidden} /* ---------- campos y controles ---------- */ .at input[type=number],.at input[type=text],.at input[type=search],.at select,.at textarea{box-sizing:border-box;height:38px;padding:0 11px;border-radius:8px;border:1px solid rgba(110,80,40,.38);background:#fffdf7;color:var(--at-ink);font:500 14px var(--at-fu);box-shadow:inset 0 1px 2px rgba(60,40,20,.16),0 1px 0 rgba(255,255,255,.7)} .at textarea{height:auto;min-height:70px;padding:9px 11px;resize:vertical;line-height:1.35} .at select{padding-right:6px} .at :is(input[type=text],input[type=search],input[type=number],select,textarea):focus{outline:2px solid #6b3d0c;outline-offset:1px;border-color:#6b3d0c;box-shadow:inset 0 1px 2px rgba(60,40,20,.16)} /* deslizadores: ranura tallada y perilla de latón */ .at input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y} .at input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(180deg,#3a2414,#6a4527);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.65)} .at input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(180deg,#3a2414,#6a4527);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.65)} .at input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff8d8 0,#f0cf7c 28%,#b8862f 70%,#7d5a1c 100%);box-shadow:0 2px 3px rgba(0,0,0,.5),0 0 0 1px rgba(80,55,15,.55),inset 0 -1px 1px rgba(0,0,0,.3)} .at input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff8d8 0,#f0cf7c 28%,#b8862f 70%,#7d5a1c 100%);box-shadow:0 2px 3px rgba(0,0,0,.5),0 0 0 1px rgba(80,55,15,.55)} .at input[type=range]:focus-visible{outline:none} .at input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff7e4,0 0 0 4px #6b3d0c,0 2px 3px rgba(0,0,0,.5)} .at input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff7e4,0 0 0 4px #6b3d0c,0 2px 3px rgba(0,0,0,.5)} /* botones: papel, latón y el del acento (la acción principal) */ .at-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--at-fu);letter-spacing:.01em;color:#3a2918;white-space:nowrap; background:var(--at-tex-paper),linear-gradient(180deg,#fffaf0,#eadbbd);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(110,80,40,.34),0 1px 1px rgba(40,25,10,.18),0 3px 6px rgba(40,25,10,.14);transition:transform .18s var(--at-ease),box-shadow .18s,filter .18s} .at-btn:hover{filter:brightness(1.04);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(110,80,40,.45),0 2px 2px rgba(40,25,10,.2),0 6px 12px rgba(40,25,10,.18)} .at-btn:active{transform:translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),inset 0 0 0 1px rgba(110,80,40,.4)} .at-btn:disabled{opacity:.5;cursor:default;transform:none} .at-btn svg{width:18px;height:18px;flex:none} .at-btn-p{background:var(--at-acc);color:var(--at-acc-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.22),0 3px 8px rgba(0,0,0,.3)} .at-btn-p:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.25),0 6px 14px rgba(0,0,0,.32)} .at-btn-laton{background:var(--at-laton);color:#2c1c08;text-shadow:0 1px 0 rgba(255,246,214,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(80,50,10,.35),0 0 0 1px #6e4f16,0 3px 0 #5a3f10,0 6px 14px rgba(0,0,0,.45)} .at-btn-laton:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(80,50,10,.35),0 0 0 1px #6e4f16,0 3px 0 #5a3f10,0 9px 18px rgba(0,0,0,.5)} .at-btn-laton:active{transform:translateY(2px);box-shadow:inset 0 1px 3px rgba(80,50,10,.4),0 0 0 1px #6e4f16,0 1px 0 #5a3f10,0 3px 8px rgba(0,0,0,.4)} .at-btn-s{min-height:32px;padding:0 13px;font-size:12.5px} .at-btn-q{min-height:32px;padding:0 14px;font-size:12.5px} .at-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;color:inherit} .at-link:hover{text-decoration-color:var(--at-acc)} /* fichas: etiquetas de papel; la elegida, del acento */ .at-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;border-radius:999px;font:600 12.5px/1 var(--at-fu);color:#4a3826;white-space:nowrap; background:linear-gradient(180deg,#fffaf0,#efe2c6);box-shadow:inset 0 0 0 1px rgba(110,80,40,.28),0 1px 1px rgba(40,25,10,.14);transition:transform .15s var(--at-ease)} .at-chip:hover{box-shadow:inset 0 0 0 1px rgba(110,80,40,.42),0 2px 4px rgba(40,25,10,.16)} .at-chip:active{transform:scale(.97)} .at-chip small{font-weight:500;opacity:.7;margin-left:2px;font-variant-numeric:tabular-nums} .at-chip[aria-pressed=true]{background:#fffcf5;color:var(--at-ink);box-shadow:inset 0 0 0 2px var(--at-acc),0 2px 5px rgba(40,25,10,.2)} .at-chip[aria-pressed=true]::before{content:'';flex:none;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--at-acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--at-acc) 25%,transparent)} .at-chip-ic[aria-pressed=true]::before{display:none} .at-chip-ic{padding:0 9px} .at-chip-ic svg{width:24px;height:24px;color:var(--at-ink)} .at-chip-ic[aria-pressed=true] svg{color:var(--at-ink)} .at-chip-pat canvas{width:18px;height:18px;image-rendering:pixelated;border-radius:3px} .at-chips,.at-o-ch{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .at-field{display:flex;flex-direction:column;gap:5px;font:600 10.5px/1.2 var(--at-fu);letter-spacing:.12em;text-transform:uppercase;color:var(--at-ink3)} .at-field input,.at-field select{width:100%;text-transform:none;letter-spacing:0} .at-field-s{min-width:140px} .at-check{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13.5px;cursor:pointer} .at-check input{width:18px;height:18px;margin:0;accent-color:var(--at-acc)} .at-check input:focus-visible{outline:2px solid #6b3d0c;outline-offset:2px} .at-hint{margin:6px 0;font-size:12.5px;line-height:1.4;color:#6b573c} .at-spin{width:30px;height:30px;border-radius:50%;border:3px solid rgba(201,162,74,.3);border-top-color:var(--at-acc);animation:atSpin .8s linear infinite} @keyframes atSpin{to{transform:rotate(360deg)}} .at-ib{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:38px;height:38px;padding:0 8px;border-radius:10px;color:inherit;transition:transform .15s var(--at-ease),background .15s} .at-ib svg{width:20px;height:20px} .at-ib:active{transform:translateY(1px)} .at-ib:disabled{opacity:.3} /* ================================================================================================= BIENVENIDA: la mesa del pintor vista desde arriba ================================================================================================= */ .at-inicio{position:relative;isolation:isolate;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;color:var(--at-ivory); background:var(--at-tex-mesa) 0 0/1600px 440px,#5b3a20;scrollbar-width:thin;scrollbar-color:rgba(255,230,190,.3) transparent} /* la mesa es su propio grupo de mezcla: así la luz (soft-light) se funde con la madera y no la tapa */ .at-mesa{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--at-tex-mesa) 0 0/1600px 440px,#5b3a20} /* la viñeta y un velo cálido: la mesa se apaga hacia las orillas */ .at-mesa::before{content:'';position:absolute;inset:0;background:rgba(28,14,5,.2)} .at-mesa::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 85% 75% at 30% 26%,rgba(255,206,140,.07),transparent 55%),radial-gradient(ellipse 130% 110% at 40% 30%,transparent 42%,rgba(12,6,2,.66) 100%)} /* el tragaluz: cuatro vidrios de luz cálida, con la sombra de la cruceta, que caen en diagonal */ .at-luz{position:absolute;left:-6%;top:-40%;width:62%;height:150%;display:grid;grid-template:1fr 1fr/1fr 1fr;gap:5%;transform:skewX(-30deg) rotate(8deg);filter:blur(10px);mix-blend-mode:overlay;opacity:.6;animation:atLuz 16s ease-in-out infinite alternate} .at-luz b{background:linear-gradient(158deg,rgba(255,240,205,.95),rgba(255,214,150,.6) 70%,rgba(255,214,150,.3));border-radius:6px} @keyframes atLuz{0%{opacity:.5}55%{opacity:.68}100%{opacity:.58}} /* el polvo que flota dentro del haz */ .at-polvo{position:absolute;z-index:2;left:0;top:0;width:60%;height:100%;-webkit-mask:linear-gradient(118deg,#000 20%,transparent 70%);mask:linear-gradient(118deg,#000 20%,transparent 70%)} .at-polvo i{position:absolute;left:var(--x);top:var(--y);width:calc(3px * var(--s));height:calc(3px * var(--s));border-radius:50%;background:#fff6dc;box-shadow:0 0 6px 1px rgba(255,236,190,.85);opacity:0;animation:atDust var(--d) linear infinite;animation-delay:calc(var(--i) * -1.1s)} @keyframes atDust{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}50%{transform:translate(26px,-60px)}85%{opacity:.55}100%{transform:translate(-10px,-130px);opacity:0}} .at-ini-head{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:end;padding:26px 52px 0} .at-ini-t{grid-column:1;font:italic 600 118px/.86 var(--at-ft);letter-spacing:-.012em;padding:0 .12em .06em 0;margin-left:-.04em; background:linear-gradient(178deg,#fff8e8 6%,#f4ddaa 46%,#d4a957 82%,#b88936 100%);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 1px 0 rgba(70,40,10,.6)) drop-shadow(0 3px 1px rgba(30,15,5,.45)) drop-shadow(0 14px 22px rgba(0,0,0,.35))} .at-ini-s{grid-column:1;margin-top:4px;max-width:62ch;font:600 27px/1.12 var(--at-fh);color:#f3e2c0;text-shadow:0 1px 0 rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35);transform:rotate(-1deg);transform-origin:0 50%} .at-ini-acts{grid-column:2;grid-row:1/3;align-self:start;margin-top:18px;display:flex;align-items:center;gap:12px} .at-ini-luz{width:42px;min-width:42px;height:42px;padding:0;border-radius:50%;color:#2c1c08;background:var(--at-laton);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(80,50,10,.35),0 0 0 1px #6e4f16,0 3px 0 #5a3f10,0 6px 12px rgba(0,0,0,.4)} .at-ini-luz svg{width:20px;height:20px} .at-ini-luz[aria-pressed=false]{color:#e9d5ad;background:rgba(20,10,4,.55);box-shadow:inset 0 2px 4px rgba(0,0,0,.6),0 0 0 1px rgba(255,222,170,.25)} .at-ini-luz:active{transform:translateY(2px)} .at-inicio[data-quieta] .at-luz{animation:none;opacity:.5} .at-inicio[data-quieta] .at-polvo{display:none} .at-ini-open svg{width:17px;height:17px} /* las cuatro puertas: objetos sobre la mesa, cada uno con su giro; al acercarse, se levantan */ .at-ini-doors{display:grid;grid-template-columns:1.12fr 1fr 1fr 1fr;align-items:start;gap:6px 26px;padding:22px 44px 6px} .at-door{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 4px 10px;border-radius:18px;text-align:center;color:var(--at-ivory)} .at-door:nth-child(1){--r:-2.5deg}.at-door:nth-child(2){--r:2deg;margin-top:26px}.at-door:nth-child(3){--r:-1.5deg;margin-top:6px}.at-door:nth-child(4){--r:2.5deg;margin-top:30px} .at-door-obj{position:relative;display:block;width:100%;max-width:330px} .at-door-obj::before{content:'';position:absolute;left:12%;right:10%;top:22%;bottom:4%;border-radius:40%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0));filter:blur(10px);transform:translate(6px,10px);opacity:.7;transition:transform .55s var(--at-ease),opacity .55s} .at-door-obj svg{position:relative;width:100%;height:auto;transform:rotate(var(--r));filter:drop-shadow(1px 2px 1px rgba(20,8,0,.5)) drop-shadow(5px 10px 9px rgba(20,8,0,.35));transition:transform .55s var(--at-ease)} .at-door:hover .at-door-obj svg,.at-door:focus-visible .at-door-obj svg{transform:translateY(-12px) rotate(calc(var(--r) * .35)) scale(1.03)} .at-door:hover .at-door-obj::before,.at-door:focus-visible .at-door-obj::before{transform:translate(10px,22px) scale(1.08);opacity:.45} .at-door:active .at-door-obj svg{transform:translateY(-5px) rotate(calc(var(--r) * .35)) scale(1.01);transition-duration:.12s} .at-door:focus-visible{outline:none} .at-door:focus-visible .at-door-tx b{text-decoration:underline;text-decoration-color:var(--at-acc);text-decoration-thickness:2px;text-underline-offset:6px} .at-door-tx{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:27ch;padding:0 6px} .at-door-tx b{font:600 30px/1.02 var(--at-ft);letter-spacing:.003em;color:#fbf0d9;text-shadow:0 1px 0 rgba(0,0,0,.55),0 3px 12px rgba(0,0,0,.45)} .at-door-tx small{font:500 13.5px/1.38 var(--at-fu);color:#e2cea8;text-shadow:0 1px 2px rgba(0,0,0,.6)} .at-door:hover .at-door-tx b{color:#fff} /* el tendedero: las obras guardadas cuelgan con pinzas, como fotos que se secan */ .at-ini-obras{position:relative;margin-top:auto;padding:14px 0 22px} .at-ini-oh{display:flex;align-items:baseline;gap:14px;padding:0 52px 2px} .at-ini-oh h3{font:italic 600 32px/1 var(--at-ft);color:#fbf0d9;text-shadow:0 1px 0 rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.4)} .at-ini-n{font:500 12px var(--at-fu);letter-spacing:.12em;text-transform:uppercase;color:#d8c39b} .at-ini-all{font-size:13px;color:#f3e2c0} .at-tendedero{position:relative;min-height:190px;overflow-x:auto;overflow-y:hidden;padding:0 40px;scrollbar-width:thin;scrollbar-color:rgba(255,230,190,.3) transparent} .at-cuerda{position:absolute;left:0;right:0;top:26px;height:8px;min-width:100%;background:var(--at-tex-mecate) 0 0/10px 8px repeat-x;filter:drop-shadow(0 6px 3px rgba(0,0,0,.45));pointer-events:none} .at-colgadas,.at-vacio{position:relative;display:flex;align-items:flex-start;gap:30px;width:max-content;padding:16px 16px 18px} .at-obra{position:relative;flex:none;width:156px;display:flex;flex-direction:column;align-items:stretch;padding:8px 8px 9px;text-align:left;color:var(--at-ink); background:var(--at-tex-paper),#fbf8f0;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.25),0 12px 18px rgba(10,4,0,.42);transform-origin:50% -8px;transform:rotate(var(--r,0deg));transition:transform .5s var(--at-ease)} .at-obra:hover,.at-obra:focus-visible{animation:atSwing 1.3s var(--at-ease)} @keyframes atSwing{0%{transform:rotate(var(--r,0deg))}22%{transform:rotate(calc(var(--r,0deg) + 5deg))}48%{transform:rotate(calc(var(--r,0deg) - 3deg))}72%{transform:rotate(calc(var(--r,0deg) + 1.4deg))}100%{transform:rotate(var(--r,0deg))}} .at-pin{position:absolute;top:-24px;left:50%;width:16px;height:36px;margin-left:-8px;z-index:2;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.45))} .at-obra-im{display:block;height:104px;background:#e9e2d2 center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .at-obra-px{image-rendering:pixelated;background-size:contain;background-color:#ece6d8} .at-obra-n{margin-top:7px;font:600 19px/1 var(--at-fh);color:#2c2116;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .at-obra small{margin-top:3px;font:500 10.5px/1.2 var(--at-fu);letter-spacing:.04em;color:#8a7558} .at-tag{position:relative;flex:none;display:flex;flex-direction:column;gap:5px;width:220px;padding:20px 16px 14px;color:var(--at-ink);background:var(--at-tex-paper),#f7efdc;border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.25),0 12px 18px rgba(10,4,0,.4);transform-origin:50% -8px;transform:rotate(var(--r,0deg))} .at-tag b{font:600 25px/1.05 var(--at-fh);color:#2c2116} .at-tag small{font:500 12.5px/1.35 var(--at-fu);color:#7a6548} .at-tag-mini{width:auto;height:0;padding:0;margin-left:60px;background:none;box-shadow:none} .at.at-drop::after{content:'';position:absolute;inset:8px;border:3px dashed var(--at-acc);border-radius:14px;pointer-events:none;z-index:40} /* ================================================================================================= EDITOR ================================================================================================= */ .at-ed{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} /* la barra de nogal con su filete de latón */ .at-top{flex:none;position:relative;z-index:3;display:flex;align-items:center;gap:8px;height:54px;padding:0 10px;color:#f4e6c8; background:var(--at-tex-nogal) 0 0/700px 240px,#3a2414;box-shadow:inset 0 1px 0 rgba(255,222,170,.22),0 3px 10px rgba(0,0,0,.45)} .at-top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#7d5a1c,#f2d58a 20%,#c99b46 50%,#f2d58a 80%,#7d5a1c);opacity:.85} .at-top-l,.at-top-r{flex:none;display:flex;align-items:center;gap:2px} .at-top-c{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;justify-content:center;gap:12px} .at-name{min-width:0;max-width:36ch;padding:3px 10px 5px;border-radius:8px;font:italic 600 24px/1.05 var(--at-ft);color:#fbf0d9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.5)} .at-name:hover{background:rgba(255,236,200,.08)} .at-dim{flex:none;font:600 10.5px var(--at-fu);letter-spacing:.14em;text-transform:uppercase;color:#cdb68c;font-variant-numeric:tabular-nums} .at-save{flex:none;font:600 17px/1 var(--at-fh);color:#d9c39a} .at-save[data-st=err]{color:#ffb39d} .at-ref-b{min-height:28px;padding:0 11px;font-size:12px} .at-top .at-ib:hover{background:rgba(255,236,200,.1)} .at-menu-b span{font:600 13.5px var(--at-fu);letter-spacing:.01em} /* Sencillo / Avanzado: una ranura con su tecla de hueso */ .at-seg{display:inline-flex;padding:3px;border-radius:12px;background:rgba(0,0,0,.34);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,222,170,.14)} .at-seg button{padding:6px 12px;border-radius:9px;font:600 12.5px/1 var(--at-fu);letter-spacing:.02em;color:#dccaa5;transition:background .2s,color .2s} .at-seg button[aria-pressed=true]{background:linear-gradient(180deg,#fffaf0,#e6d6b6);color:#2c1f12;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(0,0,0,.5)} .at-zoom{display:inline-flex;align-items:center} .at-zv{min-width:62px;height:32px;padding:0 6px;border-radius:8px;font:600 12.5px var(--at-fu);font-variant-numeric:tabular-nums;color:#f0e0c0} .at-zv:hover{background:rgba(255,236,200,.1)} /* la tira de opciones: papel, con versalitas */ .at-opts{flex:none;position:relative;z-index:2;display:flex;align-items:center;gap:16px;min-height:56px;padding:6px 14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;color:var(--at-ink); background:var(--at-tex-paper),linear-gradient(180deg,#f8f0de,#e9dbbd);box-shadow:inset 0 -1px 0 rgba(90,60,30,.3),0 3px 8px rgba(0,0,0,.3)} .at-opts:empty{display:none} .at-o-sl{flex:none;display:flex;flex-direction:column;gap:0;min-width:136px} .at-o-sl>span{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:600 10px/1.3 var(--at-fu);letter-spacing:.13em;text-transform:uppercase;color:var(--at-ink3)} .at-o-sl output{font:600 12px var(--at-fu);letter-spacing:0;text-transform:none;color:var(--at-ink);font-variant-numeric:tabular-nums} .at-o-hint{flex:none;font:600 16px/1.1 var(--at-fh);color:#6b5236;white-space:nowrap} .at-o-rack{flex:none;display:flex;gap:2px;padding:3px;border-radius:14px;background:rgba(90,60,30,.08);box-shadow:inset 0 1px 3px rgba(60,40,20,.2),0 1px 0 rgba(255,255,255,.6)} .at-o-br{display:flex;flex-direction:column;align-items:center;gap:1px;width:66px;padding:4px 2px 3px;border-radius:11px;font:600 10.5px/1.1 var(--at-fu);font-stretch:88%;color:var(--at-ink2);transition:transform .2s var(--at-ease),background .2s} .at-o-br svg{width:32px;height:32px;color:var(--at-cur);filter:drop-shadow(1px 2px 1px rgba(0,0,0,.32));transition:transform .25s var(--at-ease)} .at-o-br:hover svg{transform:translateY(-2px) rotate(-6deg)} .at-o-br[aria-pressed=true]{background:#fffbf3;color:var(--at-ink);box-shadow:0 2px 5px rgba(60,40,20,.28),inset 0 -2px 0 var(--at-acc)} .at-o-sep{flex:none;width:1px;align-self:stretch;margin:4px 0;background:linear-gradient(transparent,rgba(90,60,30,.3),transparent)} .at-opts .at-o-ch{flex-wrap:nowrap} .at-main{flex:1 1 auto;display:flex;min-height:0;position:relative} /* la charola de acero: cada herramienta en su ranura; la activa se levanta */ .at-tray{flex:none;z-index:1;width:84px;display:flex;flex-direction:column;gap:3px;padding:10px 7px;overflow-y:auto;scrollbar-width:none; background:var(--at-tex-acero) 0 0/300px 120px,linear-gradient(90deg,#8a9198,#c9cfd5 22%,#b9c0c7 70%,#7b828a); box-shadow:inset -1px 0 0 rgba(0,0,0,.4),inset 1px 0 0 rgba(255,255,255,.55),inset -6px 0 10px -6px rgba(0,0,0,.35),3px 0 10px rgba(0,0,0,.35)} .at-tray::-webkit-scrollbar{display:none} .at-tool{flex:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px 5px;border-radius:13px;color:#1d2226;font:600 10.5px/1.1 var(--at-fu);font-stretch:90%; text-shadow:0 1px 0 rgba(255,255,255,.55);background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(255,255,255,.14));box-shadow:inset 0 2px 4px rgba(0,0,0,.28),inset 0 -1px 0 rgba(255,255,255,.55);transition:background .2s} .at-tool-ic{display:flex;align-items:center;justify-content:center;width:44px;height:38px} .at-tool-ic svg{width:36px;height:36px;color:var(--at-cur);filter:drop-shadow(1px 2px 1px rgba(0,0,0,.42));transition:transform .28s var(--at-ease),filter .28s} .at-tool-t{text-align:center;max-width:70px} .at-tool:hover .at-tool-ic svg{transform:translateY(-2px)} .at-tool[aria-pressed=true]{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.4));box-shadow:inset 0 0 0 2px var(--at-acc),0 6px 14px rgba(0,0,0,.3)} .at-tool[aria-pressed=true] .at-tool-ic svg{transform:translateY(-4px) rotate(-8deg) scale(1.08);filter:drop-shadow(3px 8px 4px rgba(0,0,0,.38))} /* el muro gris neutro alrededor del lienzo */ .at-stage{flex:1 1 auto;position:relative;min-width:0;min-height:0;overflow:hidden;touch-action:none;cursor:crosshair; background:var(--at-tex-wall),radial-gradient(ellipse at 50% 42%,#6a6a6a,#4e4e4e 70%,#3e3e3e)} .at-stage::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 8px 14px -8px rgba(0,0,0,.55),inset 8px 0 14px -10px rgba(0,0,0,.4)} .at-view{position:absolute;inset:0;width:100%;height:100%;display:block} @media (pointer:fine){ .at-stage[data-cur=brush],.at-stage[data-cur=pixel]{cursor:none} } .at-stage[data-cur=grab],.at-stage.at-grab{cursor:grab} .at-stage[data-cur=move]{cursor:move} .at-stage[data-cur=text]{cursor:text} .at-stage[data-cur=fill],.at-stage[data-cur=pick]{cursor:crosshair} .at-note{position:absolute;left:50%;bottom:20px;z-index:4;max-width:min(560px,86%);padding:10px 18px;border-radius:12px;background:rgba(28,20,13,.92);color:#f6ead2;font:500 13.5px/1.4 var(--at-fu);text-align:center; opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .22s,transform .35s var(--at-ease);box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,236,200,.12)} .at-note.on{opacity:1;transform:translate(-50%,0)} .at-ref{position:absolute;right:16px;top:16px;z-index:3;width:196px;margin:0;padding:9px 9px 7px;border-radius:3px;cursor:grab;touch-action:none; background:var(--at-laton);box-shadow:0 12px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(90,60,15,.5)} .at-ref img{display:block;width:100%;height:auto;border:3px solid #3a2313;pointer-events:none} .at-ref figcaption{padding:6px 24px 0 2px;font:italic 600 14px/1.15 var(--at-ft);color:#2a1a0c} .at-ref .at-ib{position:absolute;right:2px;bottom:1px;min-width:26px;height:26px;padding:0;color:#2a1a0c} /* el gabinete de nogal: la paleta, los frascos, los cajones y el panel de papel */ .at-side{flex:none;z-index:1;width:324px;display:flex;flex-direction:column;min-height:0; background:var(--at-tex-nogal) 0 0/700px 240px,#3a2414;box-shadow:inset 1px 0 0 rgba(255,222,170,.18),inset 8px 0 14px -10px rgba(0,0,0,.6),-3px 0 12px rgba(0,0,0,.35)} .at-pal{flex:none;padding:10px 8px 0} .at-pal-board{position:relative;width:100%;aspect-ratio:320/190} .at-pal-wood{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.45)) drop-shadow(0 10px 12px rgba(0,0,0,.5))} /* los grumos de óleo: relieve, brillo húmedo y una cresta de pincel */ .at-blob{position:absolute;width:31px;height:29px;transform:translate(-50%,-50%) rotate(var(--rot,0deg));border-radius:54% 46% 52% 48%/50% 56% 44% 50%;background:var(--c);touch-action:none; box-shadow:inset -3px -5px 7px rgba(0,0,0,.32),inset 3px 3px 5px rgba(255,255,255,.35),0 2px 2px rgba(0,0,0,.45),0 4px 6px rgba(0,0,0,.2);transition:transform .25s var(--at-ease)} .at-blob::after{content:'';position:absolute;left:30%;top:42%;width:46%;height:18%;border-radius:50%;border-top:2px solid rgba(255,255,255,.28);transform:rotate(-18deg);pointer-events:none} .at-blob i{position:absolute;left:19%;top:14%;width:34%;height:24%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 70%);pointer-events:none} .at-blob:hover{transform:translate(-50%,-50%) scale(1.14)} .at-blob.on{box-shadow:0 0 0 3px #fff7e4,0 0 0 5px var(--at-acc),inset -3px -5px 7px rgba(0,0,0,.32),inset 3px 3px 5px rgba(255,255,255,.35),0 4px 8px rgba(0,0,0,.4)} .at-blob.drag{z-index:5;transition:none;cursor:grabbing} .at-blob.tgt{transform:translate(-50%,-50%) scale(1.32)} .at-blob.swirl{animation:atSwirl .7s var(--at-ease)} @keyframes atSwirl{0%{transform:translate(-50%,-50%) scale(.5) rotate(-120deg)}65%{transform:translate(-50%,-50%) scale(1.2) rotate(12deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}} .at-blob-add{display:flex;align-items:center;justify-content:center;background:rgba(255,246,226,.12);box-shadow:inset 0 0 0 2px rgba(255,238,206,.55),0 1px 2px rgba(0,0,0,.3);color:#fff3da} .at-blob-add::after{display:none} .at-blob-add svg{width:16px;height:16px} .at-cur{position:absolute;left:3%;top:57%;width:30%;height:40%} .at-cur1,.at-cur2{position:absolute;border-radius:52% 48% 50% 50%/48% 54% 46% 52%;background:var(--c)} .at-cur1{left:4%;top:2%;width:48px;height:46px;z-index:1;box-shadow:0 0 0 3px #fff7e4,0 3px 8px rgba(0,0,0,.6),inset -4px -6px 9px rgba(0,0,0,.28),inset 4px 4px 7px rgba(255,255,255,.36)} .at-cur2{left:46%;top:36%;width:36px;height:34px;box-shadow:0 0 0 2px #fff7e4,0 2px 6px rgba(0,0,0,.55),inset -3px -4px 6px rgba(0,0,0,.26),inset 3px 3px 5px rgba(255,255,255,.32)} .at-swap{position:absolute;left:68%;top:-8%;width:28px;height:28px;border-radius:50%;color:#f4e8cf;display:flex;align-items:center;justify-content:center} .at-swap svg{width:16px;height:16px} .at-swap:hover{background:rgba(255,255,255,.12)} .at-pal-h{margin:0 12px 2px;font:600 15px/1.15 var(--at-fh);color:#e9d5ad;text-align:center} /* «Mezclar»: la alternativa a arrastrar un grumo sobre otro (con un toque o con el teclado) */ .at-pal-tip{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 10px 0} .at-pal-tip .at-pal-h{margin:0;flex:1 1 auto;min-width:0;text-align:left} .at-mixb{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px 0 9px;border-radius:999px;color:#f1dfba;font:600 12.5px/1 var(--at-fu); background:rgba(255,238,206,.08);box-shadow:inset 0 0 0 1px rgba(255,238,206,.34)} .at-mixb svg{width:17px;height:17px} .at-mixb:hover{background:rgba(255,238,206,.16)} .at-mixb[aria-pressed=true]{background:var(--at-acc);color:var(--at-acc-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(0,0,0,.3)} .at-pal[data-mixing] .at-blob:not(.at-blob-add){cursor:copy;animation:atMixWait 1.6s ease-in-out infinite} @keyframes atMixWait{50%{transform:translate(-50%,-50%) scale(1.08)}} @media (prefers-reduced-motion:reduce){.at-pal[data-mixing] .at-blob{animation:none}} .at[data-kind=foto]:not([data-ph="1"]) .at-pal-tip{display:none} /* borrar en dos pasos: el botón armado dice «¿Borrar?» */ .at .at-ib.at-armed{background:#9b2226;color:#fff;padding:0 12px 0 9px;box-shadow:0 0 0 2px #fff7e4,0 2px 6px rgba(0,0,0,.3)} .at .at-ib.at-armed::after{content:attr(data-armt);font:700 12.5px/1 var(--at-fu)} .at .at-ib.at-armed:hover{background:#7f1d1f} /* en las fotos la paleta se hace chica: el lugar es para los efectos */ .at[data-kind=foto]:not([data-ph="1"]) .at-pal-board{width:74%;margin:0 auto} .at[data-kind=foto]:not([data-ph="1"]) .at-pal-h,.at[data-kind=foto]:not([data-ph="1"]) .at-pal .at-jars{display:none} .at[data-kind=foto]:not([data-ph="1"]) .at-blob{width:23px;height:22px} .at[data-kind=foto]:not([data-ph="1"]) .at-cur1{width:36px;height:35px} .at[data-kind=foto]:not([data-ph="1"]) .at-cur2{width:27px;height:26px} /* los frascos de pigmento con su etiqueta escrita a mano */ .at-jars{display:flex;gap:2px;overflow-x:auto;padding:4px 8px 8px;scrollbar-width:thin;scrollbar-color:rgba(255,230,190,.25) transparent} .at-jars:not(.at-jars-row){flex-wrap:wrap;overflow:visible;padding:2px 0} .at-jar{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;width:58px;padding:6px 2px 5px;border-radius:12px;font:600 14px/.95 var(--at-fh);color:#f1e3c6;transition:transform .2s var(--at-ease)} .at-jar:hover{transform:translateY(-2px)} .at-dlg .at-jar{color:var(--at-ink2)} .at-jar svg{width:32px;height:40px;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.45))} .at-jar span{max-width:60px;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .at-jar[aria-pressed=true]{background:rgba(255,238,206,.12);box-shadow:inset 0 0 0 2px var(--at-acc)} .at-dlg .at-jar[aria-pressed=true]{background:rgba(255,255,255,.65)} /* los cajones: cada uno con su portaetiquetas de latón */ .at-tabs{flex:none;display:flex;gap:5px;padding:4px 8px 0} .at-tab{flex:1;display:flex;align-items:center;justify-content:center;height:40px;border-radius:9px 9px 0 0;color:#2c1f12; background:linear-gradient(180deg,rgba(255,236,200,.1),rgba(0,0,0,.18));box-shadow:inset 0 1px 0 rgba(255,222,170,.16),inset 0 0 0 1px rgba(0,0,0,.22);transition:background .2s} .at-tab svg{display:none} .at-tab span{display:inline-block;padding:4px 11px 3px;border-radius:2px;font:700 10.5px/1 var(--at-fu);letter-spacing:.16em;text-transform:uppercase;color:#3a2a18; background:var(--at-tex-paper),linear-gradient(180deg,#f7eedb,#e2d1ae);box-shadow:0 0 0 2px #c79a45,0 0 0 3px #6e5220,0 1px 3px 3px rgba(0,0,0,.25),inset 0 1px 2px rgba(0,0,0,.18)} .at-tab:hover{background:linear-gradient(180deg,rgba(255,236,200,.16),rgba(0,0,0,.1))} .at-tab[aria-selected=true]{background:var(--at-tex-paper),#f6eedd;box-shadow:0 -3px 8px rgba(0,0,0,.25)} .at-tab[aria-selected=true] span{box-shadow:0 0 0 2px #d8ae55,0 0 0 3px #7d5d22,0 0 0 4px var(--at-acc),inset 0 1px 2px rgba(0,0,0,.15)} .at-tabs:has(.at-tab:only-child) .at-tab{flex:0 1 auto;padding:0 22px;margin:0 auto 0 0} .at-panel{flex:1 1 auto;min-height:0;overflow-y:auto;scroll-padding-block:12px 92px;margin:0 8px 8px;padding:14px 12px;border-radius:0 0 12px 12px;color:var(--at-ink); background:var(--at-tex-paper),var(--at-tex-fibras),#f6eedd;box-shadow:0 8px 16px rgba(0,0,0,.4);scrollbar-width:thin} .at-tabs:has(.at-tab:only-child)+.at-panel{border-top-left-radius:0;border-top-right-radius:12px} /* capas */ .at-ly-tools{display:flex;justify-content:space-between;gap:2px;padding-bottom:8px;border-bottom:1px solid var(--at-line)} .at-ly-tools .at-ib{color:#4a3a28;min-width:36px;height:36px} .at-ly-tools .at-ib:hover{background:rgba(90,60,30,.1)} .at-lys{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:5px} .at-ly{display:flex;align-items:center;gap:4px;padding:3px;border-radius:11px;background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(110,80,40,.12)} .at-ly.on{background:#fffbf3;box-shadow:inset 0 0 0 2px var(--at-acc),0 2px 6px rgba(60,40,20,.15)} .at-ly-eye{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--at-ink2)} .at-ly-eye svg{width:18px;height:18px} .at-ly-eye:hover{background:rgba(90,60,30,.1)} .at-ly-eye[aria-pressed=false]{color:#b19d80} .at-ly-sel{flex:1;min-width:0;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:2px;text-align:left} .at-ly-th{grid-row:1/3;width:46px;height:36px;border-radius:3px;background:conic-gradient(#e8e8e8 25%,#cfcfcf 0 50%,#e8e8e8 0 75%,#cfcfcf 0) 0 0/10px 10px;box-shadow:0 0 0 1px rgba(90,60,30,.28),0 1px 3px rgba(0,0,0,.18)} .at-ly-n{min-width:0;font:600 13.5px var(--at-fu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .at-ly-n i{font-style:normal;color:#8a6a2a;margin-right:4px} .at-ly-sel small{font:500 11px var(--at-fu);color:var(--at-ink3)} .at-ly-lk{flex:none;padding:0 4px;color:#8a6a2a} .at-ly-lk svg{width:16px;height:16px} .at-ly-props{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--at-line)} /* efectos: cada uno en su cazoleta de porcelana */ .at-fxl{display:flex;flex-direction:column} .at-fxb{display:flex;align-items:center;gap:13px;padding:9px 8px;border-radius:12px;text-align:left;transition:background .2s,transform .2s var(--at-ease)} .at-fxb+.at-fxb{box-shadow:0 -1px 0 rgba(110,80,40,.14)} .at-fxb:hover{background:rgba(255,255,255,.62);box-shadow:none;transform:translateX(2px)} .at-fxb:hover+.at-fxb{box-shadow:none} .at-fxb-ic{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%; background:radial-gradient(circle at 38% 32%,#ffffff,#f1ece2 55%,#d9d0bf);box-shadow:0 2px 4px rgba(60,40,20,.28),inset 0 -2px 3px rgba(0,0,0,.08),inset 0 0 0 1px rgba(120,100,70,.18)} .at-fxb-ic svg{width:30px;height:30px;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.2));transition:transform .3s var(--at-ease)} .at-fxb:hover .at-fxb-ic svg{transform:rotate(-8deg) scale(1.08)} .at-fxb-t{min-width:0} .at-fxb-t b{display:block;font:600 19px/1.05 var(--at-ft);color:var(--at-ink)} .at-fxb-t small{display:block;margin-top:2px;font:500 12px/1.3 var(--at-fu);color:var(--at-ink3)} .at-fxh{display:flex;align-items:center;gap:4px;margin:-6px 0 10px} .at-fxh .at-ib{color:var(--at-ink2)} .at-fxh .at-ib:hover{background:rgba(90,60,30,.1)} .at-fxh h4{font:italic 600 23px/1.1 var(--at-ft)} .at-fxf{position:sticky;bottom:-14px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:14px -12px -14px;padding:14px 12px;background:linear-gradient(180deg,rgba(246,238,221,0),#f6eedd 30%)} .at-adj h5{display:flex;align-items:center;gap:10px;margin:16px 0 4px;font:italic 600 20px/1.1 var(--at-ft);color:var(--at-ink2)} .at-adj h5::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(110,80,40,.3),transparent)} .at-adj h5:first-child{margin-top:0} .at-adj-sl{display:flex;margin:4px 0} .at-adj .at-btn{margin-top:12px} .at-flt .at-hint{margin-top:0} .at-fcats{display:flex;gap:5px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin} .at-fcats .at-chip{flex:none} .at-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px} .at-ft{display:flex;flex-direction:column;gap:4px;padding:4px 4px 5px;border-radius:10px;font:600 11px/1.15 var(--at-fu);text-align:center;background:#fffbf3;box-shadow:inset 0 0 0 1px rgba(110,80,40,.2),0 1px 2px rgba(60,40,20,.12);transition:transform .2s var(--at-ease)} .at-ft:hover{transform:translateY(-2px)} .at-ft canvas{width:100%;height:auto;aspect-ratio:4/3;border-radius:6px;background:#2b2724} .at-ft[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--at-acc),0 2px 6px rgba(60,40,20,.2)} .at-fchain{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px} .at-fc{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:'n u x' 'r r r';align-items:center;gap:0 2px;padding:7px 7px 7px 11px;border-radius:11px;background:#fffbf3;box-shadow:inset 0 0 0 1px rgba(110,80,40,.22)} .at-fc b{grid-area:n;font:600 13px var(--at-fu)} .at-fc input{grid-area:r} .at-fc [data-fcu]{grid-area:u} .at-fc [data-fcx]{grid-area:x} .at-fc .at-ib{min-width:30px;height:30px;color:var(--at-ink2)} .at-cut,.at-lines{display:flex;flex-direction:column;gap:11px} .at-cut-big{display:grid;grid-template-columns:1fr 1fr;gap:8px} .at-cut .at-o-ch .at-btn-s{flex:none} .at-ln-cols{display:flex;flex-wrap:wrap;gap:6px} .at-sw{flex:none;width:30px;height:30px;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.2)} .at-sw[aria-pressed=true],.at-sw.on{box-shadow:0 0 0 2px #fff7e4,0 0 0 4px var(--at-acc),inset 0 0 0 1px rgba(0,0,0,.25)} .at-sw.on2{outline:2px dashed rgba(255,248,230,.85);outline-offset:2px} .at-sw-add{display:flex;align-items:center;justify-content:center;background:rgba(255,246,226,.14);color:#fff3da;box-shadow:inset 0 0 0 2px rgba(255,238,206,.5)} .at-sw-add svg{width:16px;height:16px} .at-menu .at-sw-add{color:var(--at-ink2);box-shadow:inset 0 0 0 2px var(--at-line)} /* pixel art: la caja de pastillas y los cuadros */ .at-pxp-cur{position:relative;display:flex;align-items:center;gap:9px;padding:8px 12px 4px;color:#f1e3c6} .at-pxp-cur .at-cur1,.at-pxp-cur .at-cur2{position:static;width:38px;height:38px;border-radius:6px} .at-pxp-cur .at-swap{position:static} .at-pxp-n{margin-left:auto;font:600 16px var(--at-fh);color:#e6d3af} .at-pxp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(31px,1fr));gap:5px;padding:4px 12px 8px} .at-pxp-grid .at-sw{width:100%;height:auto;aspect-ratio:1;border-radius:4px} .at-frames{display:flex;flex-direction:column;gap:11px} .at-fr-strip{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin} .at-fr{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px;border-radius:10px;background:#fffbf3;box-shadow:inset 0 0 0 1px rgba(110,80,40,.22)} .at-fr canvas{width:58px;height:58px;image-rendering:pixelated;background:conic-gradient(#eee 25%,#d5d5d5 0 50%,#eee 0 75%,#d5d5d5 0) 0 0/8px 8px;border-radius:4px} .at-fr small{font:600 11px var(--at-fu);color:var(--at-ink3);font-variant-numeric:tabular-nums} .at-fr.on{box-shadow:inset 0 0 0 2px var(--at-acc)} /* ================================================================================================= DIÁLOGOS, MENÚS Y AVISOS: hojas de papel con su pinza de latón ================================================================================================= */ .at-dlgw{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(ellipse at 50% 40%,rgba(30,18,8,.5),rgba(12,7,3,.72));animation:atFade .25s ease} @keyframes atFade{from{opacity:0}} .at-dlg{position:relative;width:min(600px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:6px;color:var(--at-ink); background:var(--at-tex-paper),var(--at-tex-fibras),linear-gradient(180deg,#fcf6e8,#f0e4c9);box-shadow:0 2px 2px rgba(0,0,0,.2),0 24px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.6);animation:atPop .38s var(--at-ease)} .at-dlg::before{content:'';position:absolute;top:-9px;left:50%;width:64px;height:18px;margin-left:-32px;border-radius:5px;background:var(--at-laton);box-shadow:0 3px 4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(90,60,15,.35);z-index:1} @keyframes atPop{from{opacity:0;transform:translateY(16px) rotate(-.6deg) scale(.985)}} .at-dlg-top{flex:none;display:flex;align-items:center;gap:8px;padding:20px 14px 4px 24px} .at-dlg-top h3{flex:1;min-width:0;font:italic 600 32px/1.05 var(--at-ft);letter-spacing:.002em;overflow:hidden;text-overflow:ellipsis} .at-dlg-x{color:var(--at-ink2)} .at-dlg-x:hover{background:rgba(90,60,30,.1)} .at-dlg-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 24px 16px;scrollbar-width:thin} .at-dlg-msg{flex:none;margin:6px 24px 0;padding:8px 12px;border-radius:8px;background:rgba(201,162,74,.16);box-shadow:inset 0 0 0 1px rgba(110,80,40,.22);color:#4a2c0c;font:600 13.5px/1.35 var(--at-fu);text-wrap:pretty} .at-dlg-msg:empty{display:none} .at-dlg-f{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;padding:14px 18px 18px;border-top:1px dashed rgba(110,80,40,.3)} .at-dlg-h{display:flex;align-items:baseline;gap:8px;margin:18px 0 9px;font:700 10.5px/1.2 var(--at-fu);letter-spacing:.17em;text-transform:uppercase;color:#8a6a3c} .at-dlg-h::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(110,80,40,.28),transparent)} .at-dlg-h:first-child{margin-top:6px} .at-dlg-h small{font:500 12px var(--at-fu);letter-spacing:0;text-transform:none;color:var(--at-ink3)} .at-dlg-alt{margin-top:16px;font-size:13px} /* muestras de papel, con la esquina doblada */ .at-papers{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px} .at-dlg-new .at-dlg{width:min(700px,100%)} .at-paper{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 6px 7px;border-radius:12px;font:600 12px var(--at-fu);transition:transform .2s var(--at-ease)} .at-paper:hover{transform:translateY(-2px)} .at-paper-sw{position:relative;width:100%;aspect-ratio:4/3;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,.2),0 4px 8px rgba(40,25,10,.25)} .at-paper-sw::after{content:'';position:absolute;right:0;bottom:0;width:16px;height:16px;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.12) 50%,rgba(255,255,255,.75) 58%,#e9dfca);box-shadow:-1px -1px 2px rgba(0,0,0,.15);border-top-left-radius:3px} .at-paper[aria-pressed=true]{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 2px var(--at-acc)} .at-pp-blanco{background:#fbfaf6} .at-pp-marfil{background:var(--at-tex-paper),#f3ead6} .at-pp-acuarela{background:radial-gradient(circle at 30% 30%,rgba(0,0,0,.05),transparent 40%),radial-gradient(circle at 70% 70%,rgba(0,0,0,.06),transparent 45%),var(--at-tex-paper),#f7f3ea} .at-pp-lienzo{background:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),#efe7d6} .at-pp-kraft{background:var(--at-tex-paper),#c9a57a} .at-pp-pizarron{background:var(--at-tex-wall),#22282a} .at-pp-transparente{background:conic-gradient(#e6e6e6 25%,#cbcbcb 0 50%,#e6e6e6 0 75%,#cbcbcb 0) 0 0/12px 12px} /* tamaños: una hojita de la proporción real */ .at-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px} .at-szb{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;border-radius:12px;transition:transform .2s var(--at-ease),background .2s} .at-szb:hover{background:rgba(255,255,255,.45)} .at-szw{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:3px} .at-sz{display:block;background:#fffdf8;border-radius:1px;box-shadow:0 1px 1px rgba(0,0,0,.18),0 3px 6px rgba(40,25,10,.22);transition:transform .25s var(--at-ease)} .at-sz-x{background:repeating-linear-gradient(135deg,rgba(110,80,40,.12) 0 3px,transparent 3px 6px),#fffdf8;outline:1.5px dashed rgba(110,80,40,.5);outline-offset:-1px} .at-szb b{font:600 12.5px/1.15 var(--at-fu);text-align:center} .at-szb small{font:500 10.5px var(--at-fu);color:var(--at-ink3);font-variant-numeric:tabular-nums} .at-szb[aria-pressed=true]{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 2px var(--at-acc)} .at-szb[aria-pressed=true] .at-sz{transform:rotate(-4deg) scale(1.06)} .at-wh{display:flex;align-items:flex-end;gap:8px;margin-top:12px} .at-wh label{display:flex;flex-direction:column;gap:4px;font:600 10.5px var(--at-fu);letter-spacing:.12em;text-transform:uppercase;color:var(--at-ink3)} .at-wh input{width:104px} .at-wh span,.at-wh small{padding-bottom:10px;color:var(--at-ink3)} .at-menu{position:absolute;z-index:25;min-width:236px;max-height:80%;overflow-y:auto;display:flex;flex-direction:column;padding:6px;border-radius:12px;color:var(--at-ink); background:var(--at-tex-paper),#fcf6e8;box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(110,80,40,.24);animation:atPop .25s var(--at-ease)} .at-menu button{padding:9px 12px;border-radius:8px;text-align:left;font:500 14px var(--at-fu)} .at-menu button:hover,.at-menu button:focus-visible{background:rgba(201,162,74,.22)} .at-menu button:focus-visible{outline:2px solid #6b3d0c;outline-offset:-2px} .at-menu hr{border:0;border-top:1px dashed rgba(110,80,40,.28);margin:5px 8px} .at-te-pal{flex-direction:row;flex-wrap:wrap;gap:5px;width:214px;min-width:0} .at-picker{position:absolute;z-index:26;width:252px;display:flex;flex-direction:column;gap:10px;padding:13px;border-radius:14px;color:var(--at-ink); background:var(--at-tex-paper),#fcf6e8;box-shadow:0 16px 36px rgba(0,0,0,.52),inset 0 0 0 1px rgba(110,80,40,.24);animation:atPop .25s var(--at-ease)} .at-pk-sv{position:relative;height:152px;border-radius:8px;overflow:hidden;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} .at-pk-sv canvas,.at-pk-h canvas{display:block;width:100%;height:100%} .at-pk-dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4);pointer-events:none} .at-pk-h{position:relative;height:16px;border-radius:8px;overflow:visible;touch-action:none;cursor:ew-resize} .at-pk-h canvas{border-radius:8px} .at-pk-knob{position:absolute;top:-3px;width:10px;height:22px;margin-left:-5px;border-radius:5px;background:var(--at-laton);box-shadow:0 0 0 1px rgba(80,55,15,.6),0 2px 3px rgba(0,0,0,.4);pointer-events:none} .at-pk-row{display:flex;align-items:center;gap:7px} .at-pk-old,.at-pk-new{flex:none;width:32px;height:32px;border-radius:52% 48% 50% 50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset -2px -3px 4px rgba(0,0,0,.2)} .at-pk-hex input{width:100px;height:34px;font-family:var(--f-mono,ui-monospace,monospace)} .at-pk-row .at-ib{color:var(--at-ink2)} .at-pk-row .at-ib svg{width:24px;height:24px} .at-pk-f{display:flex;justify-content:flex-end;gap:6px} .at-busy{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(18,12,6,.5)} .at-busy-c{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:230px;max-width:80%;padding:20px 24px;border-radius:14px;color:var(--at-ink);text-align:center; background:var(--at-tex-paper),#fcf6e8;box-shadow:0 14px 34px rgba(0,0,0,.5)} .at-busy-t{font:600 19px/1.15 var(--at-fh)} .at-busy progress{width:100%;height:8px;accent-color:var(--at-acc)} .at-texted{position:absolute;z-index:12;left:50%;top:122px;width:min(560px,calc(100% - 24px));transform:translateX(-50%);display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:14px;color:var(--at-ink); background:var(--at-tex-paper),#fcf6e8;box-shadow:0 16px 36px rgba(0,0,0,.52),inset 0 0 0 1px rgba(110,80,40,.24);animation:atPop .25s var(--at-ease)} .at-texted textarea{width:100%;font-size:16px} .at-te-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .at-te-font select{height:36px;max-width:200px} .at-te-num{display:flex;flex-direction:column;flex:1 1 120px;font:600 10.5px var(--at-fu);letter-spacing:.12em;text-transform:uppercase;color:var(--at-ink3)} .at-te-col{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px 0 6px;border-radius:999px;font:600 12.5px var(--at-fu);background:#fffbf3;box-shadow:inset 0 0 0 1px var(--at-line)} .at-te-col::before{content:'';width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)} .at-te-tg{gap:5px} .at-te-f{display:flex;justify-content:space-between;gap:8px} /* diálogos con contenido especial */ .at-dlg-works .at-dlg,.at-dlg-museo .at-dlg,.at-dlg-stk .at-dlg{width:min(900px,100%)} .at-dlg-colorear .at-dlg,.at-dlg-conv .at-dlg{width:min(840px,100%)} .at-works{display:flex;flex-direction:column;gap:7px} .at-work{display:flex;align-items:center;gap:13px;padding:7px;border-radius:12px;background:rgba(255,255,255,.5)} .at-work-im{flex:none;width:94px;height:70px;border-radius:2px;background:#e9e2d2 center/cover no-repeat;box-shadow:0 0 0 4px #fbf8f0,0 0 0 5px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.25)} .at-work-tx{flex:1;min-width:0} .at-work-tx b{display:block;font:600 18px/1.1 var(--at-ft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .at-work-tx small{color:var(--at-ink3);font-size:12px} .at-work .at-ib{color:var(--at-ink2)} .at-mu-top{display:flex;gap:8px;align-items:center;margin-bottom:12px} .at-mu-top .at-field{flex:1} .at-mu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:14px} .at-mu{display:flex;flex-direction:column;gap:7px;text-align:left;padding:7px;border-radius:10px;content-visibility:auto;contain-intrinsic-size:auto 230px;transition:transform .25s var(--at-ease),background .2s} .at-mu:hover{background:rgba(255,255,255,.55);transform:translateY(-2px)} .at-mu img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:5px solid #2f1c0f;box-shadow:0 0 0 2px #c79a45,0 0 0 3px #6e5220,0 8px 14px rgba(0,0,0,.35);background:#ddd} .at-mu b{display:block;font:600 15px/1.15 var(--at-ft)} .at-mu small{display:block;font-size:11px;color:var(--at-ink3)} .at-col,.at-conv{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:18px;align-items:start} .at-col-prev canvas,.at-conv-prev canvas{display:block;width:100%;height:auto;border-radius:3px;background:#fbfaf6;box-shadow:0 2px 2px rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.3)} .at-conv-prev canvas{image-rendering:pixelated;background:conic-gradient(#eee 25%,#d8d8d8 0 50%,#eee 0 75%,#d8d8d8 0) 0 0/16px 16px} .at-col-o,.at-conv-o{display:flex;flex-direction:column;gap:11px} .at-col-by{font:italic 600 16px/1.2 var(--at-ft);color:var(--at-ink2)} .at-stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:12px} .at-stk{display:block;padding:2px;border-radius:10px;transition:transform .25s var(--at-ease)} .at-stk:hover{transform:translateY(-3px) rotate(-1.5deg)} .at-stk .gcard{pointer-events:none} .at-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:6px 0} .at-wall-prev{position:relative;margin:4px auto 12px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 7px #2b2b2b,0 0 0 8px #555,0 12px 26px rgba(0,0,0,.45)} .at-wall-prev canvas{display:block;width:100%;height:100%} .at-wall-bar{position:absolute;left:0;right:0;bottom:0;height:8%;background:rgba(10,10,14,.6)} .at-exp-q{font-variant-numeric:tabular-nums} /* ================================================================================================= TELÉFONO (o ventana angosta): la charola abajo, la barra de cajones y hojas que suben ================================================================================================= */ .at-phone{display:none} .at[data-ph="1"] .at-top{height:50px;gap:2px;padding:0 4px} .at[data-ph="1"] .at-menu-b span,.at[data-ph="1"] .at-dim,.at[data-ph="1"] .at-zoom,.at[data-ph="1"] .at-save{display:none} .at[data-ph="1"] .at-ib{min-width:36px;padding:0 6px} .at[data-ph="1"] .at-top-c{justify-content:flex-start} .at[data-ph="1"] .at-name{font-size:20px;padding:3px 4px 5px} .at[data-ph="1"] .at-seg button{position:relative;padding:5px 8px;font-size:11.5px} .at[data-ph="1"] .at-seg button::after{content:'';position:absolute;inset:-11px -3px} .at[data-ph="1"] .at-top .at-ib{position:relative} .at[data-ph="1"] .at-top .at-ib::after{content:'';position:absolute;inset:-4px -4px} .at[data-ph="1"] .at-blob::before{content:'';position:absolute;inset:-7px} .at[data-ph="1"] .at-swap::before,.at[data-ph="1"] .at-mixb::before{content:'';position:absolute;inset:-8px} .at[data-ph="1"] .at-mixb{position:relative} .at[data-ph="1"] .at-ref-b{display:none} .at[data-ph="1"] .at-main{flex-direction:column} .at[data-ph="1"] .at-stage{order:1} .at[data-ph="1"] .at-tray{order:2;width:auto;height:74px;flex-direction:row;gap:3px;padding:5px 7px;overflow-x:auto;overflow-y:hidden; background:var(--at-tex-acero) 0 0/300px 120px,linear-gradient(180deg,#c9cfd5,#aab1b8 70%,#80878e);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 -3px 10px rgba(0,0,0,.3)} .at[data-ph="1"] .at-tool{width:62px;padding:4px 1px 3px} .at[data-ph="1"] .at-tool-ic{height:34px} .at[data-ph="1"] .at-tool-ic svg{width:32px;height:32px} .at[data-ph="1"] .at-opts{display:none} .at[data-ph="1"][data-sheet=opts] .at-opts{display:flex;position:absolute;left:0;right:0;bottom:128px;z-index:6;flex-wrap:wrap;max-height:46%;overflow-y:auto;border-radius:18px 18px 0 0;padding:14px;gap:14px;box-shadow:0 -10px 26px rgba(0,0,0,.5)} .at[data-ph="1"][data-sheet=opts] .at-opts .at-o-ch{flex-wrap:wrap} .at[data-ph="1"] .at-side{display:none} .at[data-ph="1"]:is([data-sheet=color],[data-sheet=capas],[data-sheet=efectos],[data-sheet=cuadros]) .at-side{display:flex;position:absolute;left:0;right:0;bottom:128px;z-index:6;width:auto;max-height:min(72%,620px);border-radius:18px 18px 0 0;box-shadow:0 -10px 26px rgba(0,0,0,.5)} .at[data-ph="1"][data-sheet=color] .at-tabs,.at[data-ph="1"][data-sheet=color] .at-panel{display:none} .at[data-ph="1"]:not([data-sheet=color]) .at-pal{display:none} .at[data-ph="1"][data-sheet=color] .at-pal{max-width:420px;margin:0 auto;width:100%} .at[data-ph="1"] .at-phone{display:flex;flex:none;height:54px;align-items:center;justify-content:space-around;padding:0 6px env(safe-area-inset-bottom,0);color:#f4e6c8; background:var(--at-tex-nogal) 0 0/700px 240px,#3a2414;box-shadow:inset 0 1px 0 rgba(255,222,170,.2),inset 0 2px 0 rgba(201,155,70,.5)} .at-ph-b{width:58px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px} .at-ph-b svg{width:24px;height:24px} .at[data-sheet=color] [data-ph=color],.at[data-sheet=opts] [data-ph=opts],.at[data-sheet=capas] [data-ph=capas],.at[data-sheet=efectos] [data-ph=efectos],.at[data-sheet=cuadros] [data-ph=cuadros]{background:rgba(255,238,206,.14);box-shadow:inset 0 0 0 2px var(--at-acc)} .at-blob-mini{display:block;width:30px;height:30px;border-radius:52% 48% 50% 50%;background:var(--c);box-shadow:0 0 0 2px #fff7e4,0 2px 4px rgba(0,0,0,.5),inset -2px -3px 4px rgba(0,0,0,.25)} .at[data-ph="1"] .at-texted{top:58px} .at[data-ph="1"] .at-note{bottom:12px} /* con una hoja abierta, el aviso sube arriba del lienzo (abajo lo tapaba la hoja) */ .at[data-ph="1"][data-sheet] .at-note{top:12px;bottom:auto} .at[data-ph="1"] .at-ref{width:124px} /* la bienvenida en el teléfono: la mesa en dos columnas y el tendedero abajo */ .at[data-ph="1"] .at-ini-head{grid-template-columns:1fr;padding:22px 20px 0} .at[data-ph="1"] .at-ini-t{font-size:74px} .at[data-ph="1"] .at-ini-s{font-size:22px;max-width:none} .at[data-ph="1"] .at-ini-acts{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px} .at[data-ph="1"] .at-ini-open{min-height:44px;padding:0 16px;font-size:13.5px} .at[data-ph="1"] .at-ini-luz{width:44px;min-width:44px;height:44px} .at[data-ph="1"] .at-ini-doors{grid-template-columns:1fr 1fr;gap:4px 10px;padding:16px 10px 4px} .at[data-ph="1"] .at-door:nth-child(n){margin-top:0} .at[data-ph="1"] .at-door:nth-child(even){margin-top:18px} .at[data-ph="1"] .at-door-tx b{font-size:23px} .at[data-ph="1"] .at-door-tx small{font-size:12px} .at[data-ph="1"] .at-ini-oh{padding:0 20px 2px} .at[data-ph="1"] .at-ini-oh h3{font-size:27px} .at[data-ph="1"] .at-tendedero{padding:0 12px} .at[data-ph="1"] .at-obra{width:132px} .at[data-ph="1"] .at-obra-im{height:88px} .at[data-ph="1"] .at-dlgw{align-items:flex-end;padding:0} .at[data-ph="1"] .at-dlg{width:100%;max-height:93%;border-radius:20px 20px 0 0;animation-name:atSheet} .at[data-ph="1"] .at-dlg::before{top:8px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(110,80,40,.35);box-shadow:none} @keyframes atSheet{from{transform:translateY(40px);opacity:.4}} .at[data-ph="1"] .at-dlg-top{padding-top:24px} .at[data-ph="1"] .at-dlg-top h3{font-size:28px} .at[data-ph="1"] .at-col,.at[data-ph="1"] .at-conv{grid-template-columns:1fr} .at[data-ph="1"] .at-picker{left:8px!important;right:8px;top:auto!important;bottom:132px;width:auto} .at[data-ph="1"] .at-menu{left:8px!important;right:8px} /* ventana mediana (escritorio sin maximizar): la mesa en dos filas */ @container (max-width:1080px){ .at:not([data-ph="1"]) .at-ini-doors{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px 60px 4px;gap:10px 60px} .at:not([data-ph="1"]) .at-door-obj{max-width:290px} .at:not([data-ph="1"]) .at-ini-t{font-size:96px} } @media (prefers-reduced-motion:reduce){ .at *,.at *::before,.at *::after{animation:none!important;transition:none!important} .at-polvo{display:none} } /* ---------- 1.17.50 · respaldo en Google Drive ---------- */ .at-gd{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px 0 8px;border:0;border-radius:999px;font:600 12.5px/1 var(--at-fu);color:#e9d5ad;background:rgba(20,10,4,.38);box-shadow:inset 0 0 0 1px rgba(255,222,170,.24);cursor:pointer;transition:background-color .2s,color .2s} .at-gd[hidden]{display:none} .at-gd i{display:flex}.at-gd svg{width:18px;height:18px} .at-gd:hover{background:rgba(20,10,4,.55);color:#fff3da} .at-gd[data-st=ok]{color:#c6e6b0} .at-gd[data-st=sube] svg{animation:atGdSube 1.4s var(--at-ease) infinite} .at-gd[data-st=permiso],.at-gd[data-st=lleno]{color:#2c1c08;background:var(--at-laton);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px #6e4f16,0 2px 0 #5a3f10} .at-gd[data-st=permiso]:hover,.at-gd[data-st=lleno]:hover{filter:brightness(1.06)} @keyframes atGdSube{50%{transform:translateY(-2px)}} .at[data-ph="1"] .at-gd{display:none} .at-ini-gd{position:relative;width:42px;min-width:42px;height:42px;padding:0;border-radius:50%;color:#2c1c08;background:var(--at-laton);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(80,50,10,.35),0 0 0 1px #6e4f16,0 3px 0 #5a3f10,0 6px 12px rgba(0,0,0,.4)} .at-ini-gd svg{width:22px;height:22px} .at-ini-gd:active{transform:translateY(2px)} .at-ini-gd::after{content:"";position:absolute;right:1px;top:1px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px #3a2516;opacity:0;transition:opacity .2s} .at-ini-gd[data-st=ok]::after{opacity:1;background:#5aa65f} .at-ini-gd[data-st=sube]::after,.at-ini-gd[data-st=espera]::after{opacity:1;background:#e3b04a} .at-ini-gd[data-st=permiso]::after,.at-ini-gd[data-st=lleno]::after{opacity:1;background:#e0634b} .at[data-ph="1"] .at-ini-gd{width:44px;min-width:44px;height:44px} .at-obra-gd{position:absolute;right:9px;top:72px;width:22px;height:22px;border-radius:50%;background:#2f6b3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 18.5h10a4.2 4.2 0 0 0 .4-8.4 5.8 5.8 0 0 0-11.2-.6 4.5 4.5 0 0 0 .8 9z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.3 13.9l2 2 3.7-3.9' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 2px #fbf8f0,0 2px 4px rgba(0,0,0,.35)} .at[data-ph="1"] .at-obra-gd{top:58px} .at-gd-dlg .at-dlg{max-width:520px} .at-gd-art{display:flex;justify-content:center;margin:2px 0 6px} .at-gd-art svg{width:min(220px,70%);height:auto} .at-gd-pts{margin:8px 0 6px;padding-left:20px;display:grid;gap:6px;font-size:13.5px;line-height:1.45} .at-gd-who{display:flex;align-items:center;gap:9px;margin:2px 0 4px;font-weight:600;overflow-wrap:anywhere} .at-gd-who svg{flex:none;width:24px;height:24px;color:#2f6b3a} .at-gd-st{min-height:2.8em} .at-gd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .at-gd-ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px} .at-gd-ul li{display:flex;align-items:center;gap:12px;padding:9px 10px 9px 12px;border-radius:10px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--at-line)} .at-gd-fn{flex:1 1 auto;min-width:0;display:grid;gap:3px} .at-gd-fn b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .at-gd-fn small{font-size:12px;color:var(--at-ink3);font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){.at-gd[data-st=sube] svg{animation:none}.at-gd{transition:none}} /* ===== 1.17.54 · Máquina de escribir (maquina.js, prefijo mq): una hoja metida en el rodillo, con su regla de columnas y la línea de margen; todo sale de las variables del tema (papel = --cell-bg, tinta = --win-fg, acento = --accent, botones = --btn-*). ===== */ .win[data-id="maquina"] .win-body{display:flex;flex-direction:column;padding:0;overflow:hidden} /* en pantalla completa (las apps se abren así) la barra de título se queda en su lugar, como en Atelier: es una app para trabajar, no un juego, y la barra de herramientas va justo debajo */ .win.fw[data-id="maquina"] .win-body{padding:0} @media (hover:hover) and (pointer:fine){ .win.fw[data-id="maquina"] .win-title,.win.fw.fw-idle[data-id="maquina"] .win-title{position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none} } .win.fw.fw-idle[data-id="maquina"]{cursor:auto} .mqw{--mq-line:var(--cell-line,rgba(127,127,127,.35));--mq-paper:var(--cell-bg,var(--win-bg));--mq-r:max(0px,calc(var(--radius,8px)*.5)); --mq-desk:color-mix(in srgb,var(--win-fg) 6%,var(--win-bg));--mq-lat:color-mix(in srgb,var(--win-fg) 3%,var(--win-bg)); --mq-letra:'Special Elite','Courier New',Courier,var(--f-mono),monospace;--mq-courier:'Courier New',Courier,'Nimbus Mono PS','Liberation Mono',var(--f-mono),monospace; position:relative;isolation:isolate;display:flex;flex-direction:column;height:min(80vh,860px);min-height:340px;overflow:hidden; color:var(--win-fg);font:15px/1.4 var(--f-ui);container:mqw / inline-size} .mqw[data-letra="courier"]{--mq-letra:var(--mq-courier)} .mqw[data-letra="serif"]{--mq-letra:Georgia,'Old Standard TT','Times New Roman',serif} .mqw[data-letra="tema"]{--mq-letra:var(--f-ui)} .win.max .mqw,.win.wv-sized .mqw,.win.fw .mqw{flex:1 1 auto;height:auto;min-height:0} @media (max-width:720px){ .mqw{flex:1 1 auto;height:auto;min-height:0} } @media (min-width:721px) and (max-height:560px){ .mqw{height:calc(100vh - var(--bar-h,46px) - 64px);min-height:220px} } .mqw :where(button){font:inherit;color:inherit;-webkit-tap-highlight-color:transparent} .mqw svg{display:block} .mqw [hidden]{display:none!important} /* ---- barra de arriba ---- */ .mqw .mq-top{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--mq-line);transition:opacity .4s ease} .mqw .mq-acts{display:flex;align-items:center;gap:4px;flex:none} .mqw .mq-ib{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px;height:38px;padding:0 9px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mq-r);background:none;color:var(--win-fg);cursor:pointer;font:700 13px/1 var(--f-ui);white-space:nowrap} .mqw .mq-ib svg{width:19px;height:19px;flex:none} .mqw .mq-ib:hover,.mqw .mq-ib[aria-pressed="true"],.mqw .mq-ib[aria-expanded="true"]{border-color:var(--btn-border);background:var(--btn-bg);color:var(--btn-fg)} .mqw .mq-ib:focus-visible,.mqw .mq-chip:focus-visible,.mqw .mq-doc-a:focus-visible,.mqw .mq-seg button:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:1px} .mqw .mq-titulo{flex:1 1 auto;min-width:0;height:38px;padding:0 10px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mq-r);background:transparent;color:var(--win-fg); font:600 18px/1 var(--f-title);text-align:center;text-overflow:ellipsis} .mqw .mq-titulo:hover{border-color:var(--mq-line)} .mqw .mq-titulo:focus{outline:none;border-color:var(--accent);background:var(--mq-paper)} .mqw .mq-titulo::placeholder{color:var(--muted);opacity:.85} .mqw:not([data-modo="guion"]) .mq-sg{display:none} /* ---- elementos del guion ---- */ .mqw .mq-barra{display:none;gap:6px;padding:6px 10px;border-bottom:1px solid var(--mq-line);overflow-x:auto;scrollbar-width:thin;transition:opacity .4s ease} .mqw[data-modo="guion"] .mq-barra{display:flex} .mqw .mq-chip{flex:none;min-height:30px;padding:0 11px;border:1px solid var(--mq-line);border-radius:999px;background:transparent;color:var(--win-fg);cursor:pointer;font:600 12.5px/1 var(--f-ui);letter-spacing:.02em} .mqw .mq-chip:hover{border-color:var(--accent)} .mqw .mq-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#fff)} .mqw .mq-sugb{border-style:dashed;border-color:var(--accent);font-family:var(--mq-courier);font-weight:700;max-width:60%;overflow:hidden;text-overflow:ellipsis} /* ---- cuerpo: laterales y la hoja ---- */ .mqw .mq-cuerpo{position:relative;flex:1 1 auto;display:flex;min-height:0} .mqw .mq-lat{display:none;flex-direction:column;gap:8px;width:252px;flex:0 0 252px;box-sizing:border-box;padding:12px;overflow-y:auto;background:var(--mq-lat)} .mqw[data-modo="guion"].mq-vp .mq-lat-p{display:flex;border-right:1px solid var(--mq-line);order:-1} .mqw[data-modo="guion"].mq-ve .mq-lat-e{display:flex;border-left:1px solid var(--mq-line)} .mqw .mq-lat h3{margin:0 0 2px;font:700 12px/1.2 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .mqw .mq-lat h3.mq-sec{margin-top:10px;padding-top:10px;border-top:1px solid var(--mq-line)} .mqw .mq-vacio,.mqw .mq-pista{font-size:12.5px;color:var(--muted)} .mqw .mq-vacio{font-style:italic} .mqw .mq-lat textarea,.mqw .mq-campo,.mqw .mq-in-pers{width:100%;box-sizing:border-box;border:1px solid var(--btn-border);border-radius:var(--mq-r);background:var(--mq-paper);color:var(--win-fg);font:14px/1.45 var(--f-ui)} .mqw .mq-lat textarea{min-height:64px;padding:7px 8px;resize:vertical} .mqw .mq-lat textarea:focus,.mqw .mq-campo:focus,.mqw .mq-in-pers:focus{outline:none;border-color:var(--accent)} .mqw .mq-mas{align-self:flex-start;min-height:32px;padding:0 10px;border:1px dashed var(--btn-border);border-radius:var(--mq-r);background:transparent;cursor:pointer;font:600 13px/1 var(--f-ui)} .mqw .mq-mas:hover{border-style:solid;border-color:var(--accent);color:var(--accent)} .mqw .mq-fila-pers{display:flex;gap:6px} .mqw .mq-in-pers{flex:1;min-width:0;min-height:32px;padding:0 8px;text-transform:uppercase} .mqw .mq-pers{border:1px solid var(--mq-line);border-radius:var(--mq-r);overflow:hidden} .mqw .mq-pers-cab{display:flex;align-items:center;gap:6px;width:100%;min-height:34px;padding:0 9px;border:0;background:none;cursor:pointer;text-align:left;font:700 13px/1.2 var(--mq-courier);letter-spacing:.03em} .mqw .mq-pers-cab:hover{color:var(--accent)} .mqw .mq-pers-n{margin-left:auto;font:400 11.5px/1 var(--f-ui);color:var(--muted)} .mqw .mq-pers-bio{display:flex;flex-direction:column;gap:5px;padding:0 8px 8px} .mqw .mq-link{align-self:flex-end;border:0;background:none;padding:2px;cursor:pointer;font-size:12px;color:var(--muted);text-decoration:underline} .mqw .mq-nota{position:relative} .mqw .mq-nota textarea{padding-right:28px;background:color-mix(in srgb,var(--accent) 7%,var(--mq-paper))} .mqw .mq-x{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border:0;border-radius:var(--mq-r);background:none;color:var(--muted);cursor:pointer;font:700 12px/1 var(--f-ui)} .mqw .mq-x svg{width:14px;height:14px} .mqw .mq-x:hover{color:var(--accent)} .mqw .mq-x.mq-arm{background:var(--danger,#b3261e);color:#fff} .mqw .mq-nota-x{position:absolute;top:3px;right:3px} .mqw .mq-escena{position:relative;padding:7px 8px;border:1px solid var(--mq-line);border-left-width:4px;border-radius:var(--mq-r);cursor:pointer} .mqw .mq-escena:hover{border-color:var(--accent)} .mqw .mq-escena.mq-arr{opacity:.4} .mqw .mq-escena.mq-sobre{box-shadow:0 -3px 0 0 var(--accent)} .mqw .mq-escena.mq-sobre-ab{box-shadow:0 3px 0 0 var(--accent)} .mqw .mq-esc-cab{display:flex;align-items:center;gap:2px} .mqw .mq-esc-num{flex:1;font-size:11px;letter-spacing:.1em;color:var(--muted)} .mqw .mq-esc-b{min-width:24px;height:24px;padding:0;border:0;border-radius:var(--mq-r);background:none;color:var(--muted);cursor:pointer;font-size:12px;line-height:1} .mqw .mq-esc-b:hover:not(:disabled),.mqw .mq-esc-b.mq-on{color:var(--accent)} .mqw .mq-esc-b:disabled{opacity:.3;cursor:default} .mqw .mq-esc-color{width:14px;height:14px;margin:0 4px;padding:0;border:1px solid var(--btn-border);border-radius:50%;cursor:pointer} .mqw .mq-esc-tit{margin-top:2px;font:700 12.5px/1.3 var(--mq-courier);overflow-wrap:anywhere} .mqw .mq-escena textarea{display:none;margin-top:6px;min-height:52px;font-size:13px} .mqw .mq-escena.mq-consin textarea{display:block} .mqw .mq-esc-res{margin-top:3px;font-size:12px;color:var(--muted);white-space:pre-wrap} .mqw .mq-main{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;padding:12px 16px 0;background:var(--mq-desk);overflow:hidden} /* el rodillo: caucho oscuro con un brillo arriba; la hoja sale por debajo */ .mqw .mq-rodillo{flex:none;position:relative;z-index:1;width:min(100% + 8px,49rem);height:13px;border-radius:7px; background:linear-gradient(180deg,color-mix(in srgb,var(--win-fg) 40%,var(--win-bg)) 0,color-mix(in srgb,var(--win-fg) 82%,var(--win-bg)) 45%,color-mix(in srgb,var(--win-fg) 92%,var(--win-bg)) 100%); box-shadow:0 3px 6px -2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25)} .mqw .mq-hoja{position:relative;flex:1 1 auto;display:flex;flex-direction:column;width:100%;max-width:48rem;min-height:0;margin-top:-5px;box-sizing:border-box; background:var(--mq-paper);color:var(--win-fg);border:1px solid var(--mq-line);border-bottom:0;border-radius:2px 2px 0 0;box-shadow:0 12px 30px -16px rgba(0,0,0,.5)} /* la línea del margen, en el color del acento */ .mqw .mq-hoja::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:clamp(18px,6.4%,48px);width:1px;background:color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none} /* la regla de columnas del carro */ .mqw .mq-regla{flex:none;height:12px;margin:6px 14px 0;opacity:.5; background:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 10px) bottom/100% 4px no-repeat,repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 50px) bottom/100% 9px no-repeat} .mqw .mq-texto,.mqw .mq-guion{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box;margin:0;border:0;outline:none;background:transparent;color:var(--win-fg);caret-color:var(--accent);overflow-y:auto} .mqw .mq-texto{resize:none;padding:18px clamp(16px,6%,52px) 30% clamp(30px,10%,76px);font:clamp(16px,1.05rem,18px)/1.8 var(--mq-letra);letter-spacing:.01em} .mqw .mq-texto::placeholder{color:var(--muted);opacity:.8} .mqw .mq-texto::selection,.mqw .mq-guion ::selection{background:color-mix(in srgb,var(--accent) 55%,transparent);color:inherit} .mqw[data-modo="guion"] .mq-texto,.mqw:not([data-modo="guion"]) .mq-guion{display:none} .mqw .mq-guion{padding:16px clamp(14px,5%,44px) 30% clamp(30px,10%,76px);font:16px/1.6 var(--mq-courier);white-space:normal} .mqw .mq-guion > div{min-height:1.6em;white-space:pre-wrap;overflow-wrap:anywhere} .mqw .mq-guion > div[data-t="escena"]{margin-top:1.4em;text-transform:uppercase;font-weight:700;letter-spacing:.02em} .mqw .mq-guion > div[data-t="escena"]::before{content:'▸ ';color:var(--accent)} .mqw.mq-num .mq-guion > div[data-t="escena"][data-num]::before{content:attr(data-num) ' ';font-weight:400} .mqw .mq-guion > div[data-t="accion"]{margin-top:.8em} .mqw .mq-guion > div[data-t="personaje"]{margin:.8em 0 0 32%;text-transform:uppercase;font-weight:700} .mqw .mq-guion > div[data-t="parentesis"]{margin-left:26%;width:46%;color:var(--muted)} .mqw .mq-guion > div[data-t="dialogo"]{margin-left:16%;width:66%} .mqw .mq-guion > div[data-t="transicion"]{margin-top:.8em;text-align:right;text-transform:uppercase;color:var(--muted)} .mqw .mq-guion > div[data-t="sonido"]{margin-top:.8em;text-transform:uppercase;font-weight:700;letter-spacing:.06em} .mqw .mq-guion > div[data-t="sonido"]::before{content:'♪ ';color:var(--accent)} .mqw .mq-guion > div:first-child{margin-top:0} .mqw .mq-guion > div.mq-res{outline:2px solid var(--accent);outline-offset:3px} .mqw .mq-guion > div[data-sug]::after{content:attr(data-sug);color:var(--muted);opacity:.7} /* ---- barra de estado ---- */ .mqw .mq-pie{display:flex;flex-wrap:wrap;align-items:center;gap:3px 14px;padding:6px 12px;border-top:1px solid var(--mq-line);font:12px/1.3 var(--f-ui);color:var(--muted);font-variant-numeric:tabular-nums;transition:opacity .4s ease} .mqw .mq-sep{flex:1} .mqw .mq-guardado{color:var(--accent);font-weight:700} .mqw .mq-obj{display:inline-flex;align-items:center;gap:6px} .mqw .mq-obj-b{width:70px;height:5px;border-radius:3px;background:var(--mq-line);overflow:hidden} .mqw .mq-obj-b i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s} /* mientras escribes, lo de alrededor se aparta (vuelve al mover el ratón) */ @media (hover:hover){ .mqw.mq-esc .mq-top:not(:hover):not(:focus-within),.mqw.mq-esc .mq-pie:not(:hover),.mqw.mq-esc .mq-barra:not(:hover){opacity:.28} } /* ---- documentos (cajón) y ventanitas ---- */ .mqw .mq-velo{position:absolute;inset:0;z-index:7;display:none;background:rgba(0,0,0,.22)} .mqw[data-pop] .mq-velo,.mqw.mq-latvelo .mq-velo{display:block} .mqw.mq-latvelo .mq-velo{z-index:4} /* con una ventanita abierta, la barra de arriba sigue a la mano (su botón la cierra o abre otra) */ .mqw:is([data-pop="ajustes"],[data-pop="herr"],[data-pop="buscar"]) .mq-top{position:relative;z-index:9;background:var(--win-bg)} .mqw .mq-docs{position:absolute;z-index:8;top:0;bottom:0;left:0;width:min(340px,90%);box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:12px 14px 16px;overflow-y:auto; background:var(--win-bg);color:var(--win-fg);border-right:1px solid var(--mq-line);transform:translateX(-104%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s} .mqw[data-pop="docs"] .mq-docs{transform:none;visibility:visible;transition:transform .22s ease} .mqw .mq-pop-h{display:flex;align-items:center;justify-content:space-between;gap:8px} .mqw .mq-docs h3{margin:0;font:700 17px/1.2 var(--f-title)} .mqw .mq-docs h4{margin:6px 0 0;font:700 12px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .mqw .mq-fila{display:flex;flex-wrap:wrap;gap:8px} .mqw .mq-lista{display:flex;flex-direction:column;gap:6px} .mqw .mq-doc{display:flex;align-items:center;gap:4px;border:1px solid var(--mq-line);border-radius:var(--mq-r);background:var(--mq-paper)} .mqw .mq-doc.mq-actual{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)} .mqw .mq-doc:hover{border-color:var(--accent)} .mqw .mq-doc-a{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:1px 8px;padding:8px 4px 8px 10px;border:0;background:none;cursor:pointer;text-align:left} .mqw .mq-doc-n{grid-column:1 / -1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1.3 var(--mq-letra)} .mqw .mq-doc-t,.mqw .mq-doc-f{font-size:11.5px;color:var(--muted)} .mqw .mq-doc-f{text-align:right} .mqw .mq-nota-p{margin:0;font-size:12.5px;color:var(--muted)} .mqw .mq-exp{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mqw .mq-exp .btn,.mqw .mq-fila .btn{min-height:34px;padding:0 10px;font-size:13px;white-space:normal;line-height:1.15} .mqw .mq-pop{position:absolute;z-index:8;top:56px;right:10px;display:none;flex-direction:column;gap:12px;width:min(340px,calc(100% - 20px));max-height:calc(100% - 66px);box-sizing:border-box;padding:14px;overflow-y:auto; background:var(--menu-bg,var(--win-bg));color:var(--menu-fg,var(--win-fg));border:var(--bw,1px) solid var(--win-border,var(--mq-line));border-radius:max(6px,var(--mq-r))} .mqw[data-pop="ajustes"] .mq-pop-ajustes,.mqw[data-pop="herr"] .mq-pop-herr,.mqw[data-pop="buscar"] .mq-pop-buscar{display:flex} .mqw .mq-campo-g{display:flex;flex-direction:column;gap:5px} .mqw .mq-campo-g small{font-size:12px;opacity:.75} .mqw .mq-lbl{font:700 11.5px/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;opacity:.8} .mqw .mq-campo{min-height:36px;padding:0 10px;color:var(--win-fg)} .mqw .mq-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer} .mqw .mq-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)} .mqw .mq-seg{display:flex;flex-wrap:wrap;border:1px solid var(--btn-border);border-radius:var(--mq-r);overflow:hidden} .mqw .mq-seg button{flex:1 1 auto;min-height:34px;padding:0 10px;border:0;border-left:1px solid var(--btn-border);background:transparent;cursor:pointer;font:600 13px/1 var(--f-ui)} .mqw .mq-seg button:first-child{border-left:0} .mqw .mq-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg,#fff)} .mqw .mq-seg button[data-mq-set="letra:maquina"]{font-family:'Special Elite','Courier New',monospace} .mqw .mq-seg button[data-mq-set="letra:courier"]{font-family:var(--mq-courier)} .mqw .mq-seg button[data-mq-set="letra:serif"]{font-family:Georgia,serif} .mqw .mq-coinc{margin:0;min-height:1.2em;font-size:13px;opacity:.8} .mqw .mq-informe{font-size:13px;line-height:1.5} .mqw .mq-dato{display:flex;justify-content:space-between;gap:8px} .mqw .mq-dato b{color:var(--accent);text-align:right} .mqw .mq-informe table{width:100%;margin-top:6px;border-collapse:collapse;font-variant-numeric:tabular-nums} .mqw .mq-informe th,.mqw .mq-informe td{padding:3px 4px;text-align:left;border-bottom:1px solid var(--mq-line)} .mqw .mq-informe th{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;opacity:.75} .mqw .mq-informe .mq-n{text-align:right} /* los cajones y las ventanitas van sobre la hoja: si el fondo de ventana del tema es translúcido (cristal), una sombra interior del mismo color los deja opacos sin moverse al desplazar (si el fondo es una trama, la sombra no aplica y no hace falta); la sombra de afuera va con filter */ .mqw .mq-docs,.mqw.mq-ang .mq-lat{box-shadow:inset 0 0 0 100vmax var(--win-bg);filter:drop-shadow(0 0 16px rgba(0,0,0,.35))} .mqw .mq-pop{box-shadow:inset 0 0 0 100vmax var(--menu-bg,var(--win-bg));filter:drop-shadow(0 12px 22px rgba(0,0,0,.4))} /* ---- ventana angosta (menos de 900 px): los laterales son cajones encima de la hoja ---- */ .mqw.mq-ang .mq-lat{position:absolute;z-index:5;top:0;bottom:0;width:min(300px,86%);background:var(--win-bg)} .mqw.mq-ang .mq-lat-p{left:0} .mqw.mq-ang .mq-lat-e{right:0} @container mqw (max-width:640px){ .mqw .mq-top{flex-wrap:wrap;row-gap:6px;padding:6px 8px} .mqw .mq-titulo{order:-1;flex:1 1 100%;height:36px;font-size:17px} .mqw .mq-b-docs{order:0} .mqw .mq-acts{flex:1;justify-content:flex-end;gap:2px} .mqw .mq-b-modo span{display:none} .mqw .mq-main{padding:8px 6px 0} .mqw .mq-rodillo{width:calc(100% + 4px);height:11px} .mqw .mq-regla{margin:5px 8px 0} .mqw .mq-hoja::before{left:14px} .mqw .mq-texto{padding:14px 14px 30% 24px} .mqw .mq-guion{padding:12px 12px 30% 22px;font-size:15px} .mqw .mq-guion > div[data-t="personaje"]{margin-left:24%} .mqw .mq-guion > div[data-t="parentesis"]{margin-left:16%;width:64%} .mqw .mq-guion > div[data-t="dialogo"]{margin-left:8%;width:84%} .mqw .mq-pie{gap:2px 10px;padding:5px 10px;font-size:11.5px} .mqw .mq-c-car,.mqw .mq-c-lec{display:none} .mqw .mq-pop{top:auto;bottom:0;right:0;left:0;width:auto;max-height:78%;border-radius:max(8px,var(--mq-r)) max(8px,var(--mq-r)) 0 0} .mqw .mq-docs{width:min(340px,92%)} } /* poca altura (el celular acostado): la barra de arriba en una sola fila y sin la de estado completa */ @media (max-height:520px){ .mqw .mq-top{padding-block:4px} .mqw .mq-ib,.mqw .mq-titulo{height:34px} .mqw .mq-barra{padding-block:4px} .mqw .mq-main{padding-top:6px} .mqw .mq-regla{display:none} .mqw .mq-texto,.mqw .mq-guion{padding-top:10px} .mqw .mq-c-car,.mqw .mq-c-lec{display:none} .mqw .mq-pie{padding-block:3px} .mqw .mq-pop{top:46px;max-height:calc(100% - 52px)} } @media (prefers-reduced-motion:reduce){ .mqw .mq-docs,.mqw .mq-top,.mqw .mq-pie,.mqw .mq-barra,.mqw .mq-obj-b i{transition:none} } /* ===== 1.17.57 · Checkwave (checkwave.js): pendientes, hábitos, notas y calendario con los colores y las letras del tema ===== Todo cuelga de .ck (dentro de la ventana) y lleva clases ck-*: nada sale de aquí. Los colores salen de los tokens del tema (--win-fg, --accent, --danger, --menu-bg…) y se derivan con color-mix sobre --ck-fg, que dentro de los diálogos es el color de los menús. Conserva lo suyo: la línea de captura con «>», la franja de prioridad, los anillos de los hábitos. */ .win[data-id="checkwave"] .win-body{display:flex;flex-direction:column;padding:0;overflow:hidden} @media (hover:hover) and (pointer:fine){ .win.fw[data-id="checkwave"] .win-title,.win.fw.fw-idle[data-id="checkwave"] .win-title{position:static;transform:none;opacity:1;pointer-events:auto;box-shadow:none} .win.fw[data-id="checkwave"] .win-body{padding-top:0} } .win.fw.fw-idle[data-id="checkwave"]{cursor:auto} .win.fw.fw-idle[data-id="checkwave"] .win-body *{cursor:revert} .ck{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:min(740px,calc(100vh - 150px));height:min(740px,calc(100dvh - 150px));overflow:hidden; container:ck/inline-size;--ck-fg:var(--win-fg);font-family:var(--f-ui);font-size:14px;line-height:1.45;color:var(--ck-fg);font-variant-numeric:tabular-nums} .win.max .ck,.win.fw .ck,.win.wv-sized .ck{height:auto} @media (max-width:720px){ .ck{height:auto} } .ck,.ck-dlg{ --ck-line:color-mix(in srgb,var(--ck-fg) 15%,transparent);--ck-line2:color-mix(in srgb,var(--ck-fg) 28%,transparent); --ck-mute:color-mix(in srgb,var(--ck-fg) 68%,transparent);--ck-dim:color-mix(in srgb,var(--ck-fg) 45%,transparent); --ck-panel:color-mix(in srgb,var(--ck-fg) 4%,transparent);--ck-card:color-mix(in srgb,var(--ck-fg) 6.5%,transparent);--ck-hov:color-mix(in srgb,var(--ck-fg) 10%,transparent); --ck-acc:var(--accent,#3d7bd9);--ck-acc-soft:color-mix(in srgb,var(--ck-acc) 15%,transparent);--ck-acc-mid:color-mix(in srgb,var(--ck-acc) 55%,transparent); --ck-acc2:color-mix(in srgb,var(--ck-acc) 55%,var(--ck-fg)); --ck-bad:var(--danger,#c62828);--ck-bad-soft:color-mix(in srgb,var(--ck-bad) 14%,transparent);--ck-warn:color-mix(in srgb,#d48a10 78%,var(--ck-fg));--ck-pad:max(18px,calc((100% - 1320px) / 2)); --ck-r:max(0px,calc(var(--radius,10px)*.55));--ck-r2:max(0px,calc(var(--radius,10px)*.85));--ck-rc:min(6px,max(2px,calc(var(--radius,10px)*.4)))} .ck *,.ck *::before,.ck *::after{box-sizing:border-box} .ck [hidden]{display:none!important} .ck ::selection{background:var(--ck-acc-mid)} .ck button{font:inherit;color:inherit} .ck svg{display:block} .ck .btn svg{width:16px;height:16px} .ck :focus-visible{outline:2px solid var(--focus,var(--ck-acc));outline-offset:2px} .ck input[type=text],.ck input[type=date],.ck input[type=search],.ck input[type=number],.ck select,.ck textarea{ font:inherit;color:var(--ck-fg);background:var(--ck-panel);border:1px solid var(--ck-line2);border-radius:var(--ck-r);padding:7px 10px;min-width:0;min-height:36px} .ck input::placeholder,.ck textarea::placeholder{color:var(--ck-dim);opacity:1} .ck input:focus,.ck select:focus,.ck textarea:focus{outline:none;border-color:var(--ck-acc);box-shadow:0 0 0 3px var(--ck-acc-soft)} .ck select option{color:#111;background:#fff} .ck .ck-ib{width:36px;min-width:36px;padding:0} .ck .ck-small-btn{min-height:30px;padding:0 10px;font-size:13px} .ck .btn.ck-danger,.ck .btn.ck-danger:hover{background:var(--ck-bad);color:#fff;border-color:color-mix(in srgb,var(--ck-bad) 70%,#000)} .ck .btn.ck-danger-o{color:var(--ck-bad)} /* ---------- el marco: cabecera fija y el contenido que se desplaza ---------- */ .ck-sc{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden} .ck-top{display:flex;align-items:center;gap:10px 22px;padding:12px var(--ck-pad) 10px;flex-wrap:wrap;flex:none} .ck-brand{display:flex;flex-direction:column;min-width:0} .ck-logo{margin:0;font-family:var(--f-title);font-size:24px;line-height:1.05;font-weight:700;letter-spacing:.01em;color:var(--ck-acc);white-space:nowrap} .ck-logo::after{content:"";display:block;height:6px;margin-top:3px;width:86px;opacity:.75; background:radial-gradient(circle at 4px -1px,transparent 3.2px,var(--ck-acc) 3.4px,var(--ck-acc) 4.6px,transparent 4.8px) 0 3px/16px 6px repeat-x, radial-gradient(circle at 12px 7px,transparent 3.2px,var(--ck-acc) 3.4px,var(--ck-acc) 4.6px,transparent 4.8px) 0 -3px/16px 6px repeat-x} .ck-tagl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ck-mute);margin-top:3px;white-space:nowrap} .ck-stats{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center;flex:1 1 auto;min-width:0} .ck-stat{display:flex;align-items:baseline;gap:6px;padding-left:10px;border-left:2px solid var(--ck-line2);white-space:nowrap} .ck-stat b{font-family:var(--f-title);font-size:22px;line-height:1;font-weight:700} .ck-stat span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-mute)} .ck-stat.alert{border-left-color:var(--ck-bad)} .ck-stat.alert b{color:var(--ck-bad)} .ck-stat.ck-allok{border-left-color:var(--ck-acc)} .ck-stat.ck-allok b{color:var(--ck-acc)} .ck-clock{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;line-height:1.1;white-space:nowrap} .ck-clock b{font-family:var(--f-title);font-size:24px;font-weight:700;letter-spacing:.03em} .ck-clock span{font-size:12px;color:var(--ck-mute)} .ck-bar{display:flex;align-items:center;gap:8px 12px;padding:0 var(--ck-pad) 10px;flex:none;border-bottom:1px solid var(--ck-line)} .ck-tabs{display:flex;gap:3px;padding:3px;border-radius:calc(var(--ck-r) + 4px);background:var(--ck-panel);border:1px solid var(--ck-line);min-width:0} .ck-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 14px;border:0;border-radius:var(--ck-r);background:none;cursor:pointer;color:var(--ck-mute);font-weight:600;white-space:nowrap;transition:background .15s,color .15s} .ck-tab svg{width:17px;height:17px;flex:none} .ck-tab:hover{color:var(--ck-fg);background:var(--ck-hov)} .ck-tab.on{background:var(--ck-acc);color:var(--accent-fg,#fff);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 6px -2px rgba(0,0,0,.35)} .ck-tools{display:flex;gap:6px;margin-left:auto;flex:none} .ck-main{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px var(--ck-pad) 18px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin} /* ---------- la línea de captura ---------- */ .ck-composer{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--ck-line);border-radius:var(--ck-r2);background:var(--ck-panel)} .ck-prompt{display:flex;align-items:center;gap:10px} .ck-chev{font-family:var(--f-mono,monospace);font-weight:700;font-size:20px;line-height:1;color:var(--ck-acc);flex:none} .ck .ck-prompt input{flex:1 1 auto;border:0;border-bottom:2px solid var(--ck-line2);border-radius:0;background:transparent;padding:6px 2px;font-size:16px;box-shadow:none} .ck .ck-prompt input:focus{border-bottom-color:var(--ck-acc);box-shadow:0 2px 0 -1px var(--ck-acc)} .ck-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .ck-optl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .ck-seg{display:inline-flex;border:1px solid var(--ck-line2);border-radius:var(--ck-r);overflow:hidden;flex:none} .ck-seg label{position:relative;display:block} .ck-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .ck-seg span{display:block;padding:6px 11px;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ck-mute);border-right:1px solid var(--ck-line);white-space:nowrap} .ck-seg label:last-child span{border-right:0} .ck-seg input:checked+span{background:var(--ck-acc-soft);color:var(--ck-fg);box-shadow:inset 0 -2px 0 var(--ck-acc)} .ck-seg input:focus-visible+span{outline:2px solid var(--ck-acc);outline-offset:-2px} .ck-field{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ck-mute)} .ck-field span{font-size:11px;letter-spacing:.08em;text-transform:uppercase} .ck .ck-field input{min-height:32px;padding:4px 8px;font-size:13px} .ck-search{position:relative;display:flex;align-items:center;margin-left:auto;flex:0 1 240px;min-width:150px} .ck-search svg{position:absolute;left:9px;width:15px;height:15px;color:var(--ck-dim);pointer-events:none} .ck .ck-search input{width:100%;padding-left:30px;min-height:34px;font-size:13px} .ck-nocompose .ck-prompt,.ck-nocompose .ck-optl{display:none} .ck-nocompose .ck-composer{padding:8px 10px} .ck-nocompose .ck-search{flex:1 1 auto;margin-left:0} /* ---------- columnas y pendientes ---------- */ .ck-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .ck-col{border:1px solid var(--ck-line);border-radius:var(--ck-r2);background:var(--ck-panel);min-width:0} .ck-colh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--ck-line)} .ck-colh h3{margin:0;font-family:var(--f-title);font-size:16px;font-weight:700;letter-spacing:.02em} .ck-col-ob>.ck-colh h3{color:var(--ck-acc)} .ck-count{font-size:12px;color:var(--ck-mute)} .ck-hint{margin-left:auto;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-dim)} .ck-list{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:52px} .ck-empty{padding:18px 12px;text-align:center;color:var(--ck-dim);font-size:13px;font-style:italic} .ck-task{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;align-items:start;padding:9px 8px 9px 12px;border:1px solid var(--ck-line);border-radius:var(--ck-r);background:var(--ck-card);overflow:hidden;transition:border-color .15s,background .15s} .ck-task::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ck-line2)} .ck-task[data-prio="alta"]::before{background:var(--ck-acc)} .ck-task[data-prio="media"]::before{background:var(--ck-acc-mid)} .ck-task.late{border-color:color-mix(in srgb,var(--ck-bad) 45%,transparent)} .ck-task.late::before{background:var(--ck-bad)} .ck-task:hover{border-color:var(--ck-line2);background:var(--ck-hov)} .ck-task.done{opacity:.6} .ck-task.done .ck-title{text-decoration:line-through;text-decoration-color:var(--ck-mute)} .ck-task.dragging,.ck-cchip.dragging{opacity:.35} .ck-check{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:20px;height:20px;margin:1px 0 0;border:2px solid var(--ck-line2);border-radius:var(--ck-rc);background:transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .1s} .ck-check:hover{border-color:var(--ck-acc)} .ck-check:active{transform:scale(.9)} .ck-check:checked{background:var(--ck-acc);border-color:var(--ck-acc)} .ck-check:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--accent-fg,#fff);border-width:0 2.4px 2.4px 0;transform:rotate(45deg)} .ck-check.ck-sub{width:16px;height:16px;border-width:1.5px} .ck-check.ck-sub:checked::after{left:4px;top:0;width:4px;height:8px;border-width:0 2px 2px 0} .ck-tb{min-width:0;display:flex;flex-direction:column;gap:4px} .ck-title{font-weight:600;overflow-wrap:anywhere;cursor:text;line-height:1.35} .ck-title:hover{color:var(--ck-acc)} .ck-meta{display:flex;flex-wrap:wrap;gap:5px 8px;align-items:center;font-size:11.5px;color:var(--ck-mute)} .ck-chip{display:inline-flex;align-items:center;padding:1px 7px;border:1px solid var(--ck-line2);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;background:none;color:var(--ck-mute)} .ck-chip.p-alta{color:var(--ck-acc);border-color:var(--ck-acc-mid);background:var(--ck-acc-soft)} .ck-chip.p-media{color:var(--ck-fg)} button.ck-chip{cursor:pointer} .ck-chip.ck-date{color:var(--ck-fg)} .ck-chip.ck-date:hover{border-color:var(--ck-acc);color:var(--ck-acc)} .ck-chip.ck-date.soon{color:var(--ck-warn);border-color:color-mix(in srgb,var(--ck-warn) 55%,transparent)} .ck-chip.ck-date.late{color:var(--ck-bad);border-color:color-mix(in srgb,var(--ck-bad) 55%,transparent);background:var(--ck-bad-soft)} .ck-chip.ex{border-style:dashed} .ck-tnotes{font-size:12.5px;color:var(--ck-mute);white-space:pre-wrap;overflow-wrap:anywhere} .ck-prog{height:3px;border-radius:2px;background:var(--ck-line);overflow:hidden} .ck-prog i{display:block;height:100%;background:var(--ck-acc);transition:width .3s} .ck-subs{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px} .ck-subs li{display:flex;align-items:flex-start;gap:8px;font-size:13px} .ck-subs li span{flex:1;overflow-wrap:anywhere} .ck-subs li.done span{text-decoration:line-through;color:var(--ck-dim)} .ck-x{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:var(--ck-rc);background:none;color:var(--ck-dim);cursor:pointer;opacity:0;flex:none} .ck-x svg{width:12px;height:12px} .ck-subs li:hover .ck-x,.ck-x:focus-visible{opacity:1} .ck-x:hover{color:var(--ck-bad);background:var(--ck-bad-soft)} .ck-addsub{display:flex;align-items:center;gap:6px;color:var(--ck-dim)} .ck .ck-addsub input{flex:1;min-height:26px;padding:2px 0;font-size:12.5px;border:0;border-bottom:1px dashed var(--ck-line2);border-radius:0;background:none;box-shadow:none} .ck .ck-addsub input:focus{border-bottom:1px solid var(--ck-acc);box-shadow:none} .ck-acts{display:flex;flex-direction:column;gap:2px;opacity:.4;transition:opacity .15s} .ck-task:hover .ck-acts,.ck-task:focus-within .ck-acts{opacity:1} .ck-ic{display:grid;place-items:center;width:28px;height:26px;padding:0;border:1px solid transparent;border-radius:var(--ck-rc);background:none;color:var(--ck-mute);cursor:pointer} .ck-ic svg{width:15px;height:15px} .ck-ic:hover{color:var(--ck-acc);border-color:var(--ck-line2);background:var(--ck-panel)} .ck-ic.ck-icdel:hover{color:var(--ck-bad);border-color:color-mix(in srgb,var(--ck-bad) 40%,transparent)} .ck-doneh{display:flex;align-items:center;gap:8px;width:100%;padding:4px 14px 8px;border:0;background:none;cursor:pointer;color:var(--ck-dim);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:left} .ck-doneh::before{content:"";width:0;height:0;border:4px solid transparent;border-left:6px solid currentColor;border-right:0;transition:transform .15s} .ck-doneh[aria-expanded="true"]::before{transform:rotate(90deg)} .ck-doneh:hover{color:var(--ck-fg)} .ck-list.ck-done{padding-top:0} /* ---------- calendario ---------- */ .ck-calw{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start} .ck-calside{display:flex;flex-direction:column;gap:14px;min-width:0} .ck-calh{align-items:center;gap:8px} .ck-calh h3{min-width:11ch;text-align:center} .ck-calh .ck-hint{text-transform:none;letter-spacing:0;font-size:12px} .ck-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--ck-line)} .ck-dow{padding:6px 4px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-mute);border-bottom:1px solid var(--ck-line)} .ck-cday{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:96px;padding:4px 5px 6px;cursor:pointer;border-right:1px solid var(--ck-line);border-bottom:1px solid var(--ck-line);transition:background .12s} .ck-cday:nth-child(7n){border-right:0} .ck-grid .ck-cday:nth-last-child(-n+7){border-bottom:0} .ck-cday:hover{background:var(--ck-hov)} .ck-cday.other>*{opacity:.42} .ck-cday.sel{background:var(--ck-acc-soft);box-shadow:inset 0 0 0 2px var(--ck-acc)} .ck-cday.over{background:var(--ck-acc-mid);outline:2px dashed var(--ck-acc);outline-offset:-2px} .ck-num{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ck-mute)} .ck-num b{display:grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:999px;font-weight:700} .ck-cday.today .ck-num b{background:var(--ck-acc);color:var(--accent-fg,#fff)} .ck-n{font-size:10px;font-weight:700;color:var(--ck-dim)} .ck-cday.late .ck-n{color:var(--ck-bad)} .ck-cchip{min-width:0;padding:1px 6px;border-left:3px solid var(--ck-acc);border-radius:3px;background:var(--ck-acc-soft);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab} .ck-cchip:hover{background:var(--ck-acc-mid)} .ck-cchip.op{border-left-color:var(--ck-acc2);background:var(--ck-panel)} .ck-cchip.late{border-left-color:var(--ck-bad);background:var(--ck-bad-soft)} .ck-cchip.done{opacity:.5;text-decoration:line-through} .ck-cmore{font-size:10.5px;color:var(--ck-mute)} .ck-chabs{display:flex;flex-wrap:wrap;gap:2px;margin-top:auto} .ck-chab{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid transparent;border-radius:50%;font-size:10px;line-height:1;font-style:normal} .ck-chab.ok{background:var(--ck-acc-soft);border-color:var(--ck-acc)} .ck-chab.pend{border:1px dashed var(--ck-line2)} .ck-chab.miss{border-color:var(--ck-bad);filter:grayscale(.7);opacity:.75} .ck-chab.future{opacity:.35} .ck-cdots{display:none;flex-wrap:wrap;gap:3px} .ck-cdot{width:7px;height:7px;border-radius:50%;background:var(--ck-acc)} .ck-cdot.op{background:var(--ck-acc2)} .ck-cdot.late{background:var(--ck-bad)} .ck-cdot.done{opacity:.35} .ck-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 12px;font-size:11.5px;color:var(--ck-mute)} .ck-legend span{display:inline-flex;align-items:center;gap:5px} .ck-legend .ck-chab{width:15px;height:15px;font-size:9px} .ck-lg{display:inline-block;width:10px;height:10px;border-radius:2px} .ck-lg.ob{background:var(--ck-acc)} .ck-lg.op{background:var(--ck-acc2)} .ck-lg.la{background:var(--ck-bad)} .ck-draghint{margin-left:auto;color:var(--ck-dim)} .ck-day.over,.ck-undated.over{box-shadow:inset 0 0 0 2px var(--ck-acc)} .ck-day h3{font-size:15px} .ck-calw .ck-task[draggable="true"]{cursor:grab} .ck-dayhab{display:flex;flex-direction:column;gap:5px;padding:8px 10px;border-top:1px solid var(--ck-line)} .ck-dayhab h4{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-mute)} .ck-dh{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--ck-line);border-radius:var(--ck-r);background:var(--ck-card);cursor:pointer} .ck-dh:hover{border-color:var(--ck-line2)} .ck-dh.future{cursor:default;opacity:.55} .ck-dhi{width:22px;text-align:center;font-size:16px} .ck-dhn{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere} .ck-dhs{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ck-mute)} .ck-dh.ok .ck-dhs{color:var(--ck-acc)} .ck-dh.miss .ck-dhs{color:var(--ck-bad)} .ck-dayadd{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;border-top:1px solid var(--ck-line)} .ck .ck-dayadd input{flex:1;border:0;border-bottom:1px solid var(--ck-line2);border-radius:0;background:none;padding:6px 2px;box-shadow:none} .ck .ck-dayadd input:focus{border-bottom-color:var(--ck-acc);box-shadow:none} /* ---------- hábitos ---------- */ .ck-habw .ck-colh,.ck-notew .ck-colh{align-items:center} .ck-habw .ck-hint,.ck-notew .ck-hint{margin-left:0;text-transform:none;letter-spacing:0;font-size:12px} .ck-new{margin-left:auto} .ck-habits{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:10px} .ck-habits .ck-empty{grid-column:1/-1} .ck-habit{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:5px 12px;align-items:center;padding:12px 12px 10px;border:1px solid var(--ck-line);border-radius:var(--ck-r2);background:var(--ck-card);transition:border-color .15s} .ck-habit:hover{border-color:var(--ck-line2)} .ck-habit.ok{border-color:var(--ck-acc-mid);background:linear-gradient(135deg,var(--ck-acc-soft),transparent 70%),var(--ck-card)} .ck-habit.rest{opacity:.6} .ck-habit.broken{border-color:color-mix(in srgb,var(--ck-bad) 50%,transparent)} .ck-ring{position:relative;grid-row:span 3;width:76px;height:76px;border-radius:50%;cursor:pointer} .ck-ring svg{width:76px;height:76px;transform:rotate(-90deg)} .ck-rbg{fill:none;stroke:var(--ck-line);stroke-width:6} .ck-rpg{fill:none;stroke:var(--ck-acc);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .4s} .ck-habit.t-evitar .ck-rpg{stroke:var(--ck-acc2)} .ck-habit.broken .ck-rpg{stroke:var(--ck-bad)} .ck-rico{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;line-height:1} .ck-habit.ok .ck-ring::after{content:"✓";position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ck-acc);color:var(--accent-fg,#fff);font-size:12px;font-weight:800;box-shadow:0 0 0 2px var(--menu-bg,#fff)} .ck-habit.running .ck-ring{animation:ck-pulse 1.6s ease-in-out infinite} @keyframes ck-pulse{50%{box-shadow:0 0 0 7px var(--ck-acc-soft)}} .ck-hname{font-weight:700;overflow-wrap:anywhere;padding-right:28px} .ck-hmeta{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:11.5px;color:var(--ck-mute)} .ck-hmeta b{color:var(--ck-fg)} .ck-fire{display:inline-flex;align-items:center;gap:3px;color:var(--ck-warn)} .ck-fire svg{width:14px;height:14px;--ck-fire-in:#ffe9a8} .ck-fire b{color:var(--ck-warn)} .ck-hdays{display:flex;gap:3px} .ck-hdays i{display:grid;place-items:center;width:21px;height:19px;border:1px solid transparent;border-radius:3px;font-size:10px;font-weight:700;font-style:normal;color:var(--ck-dim)} .ck-hdays i.on{color:var(--ck-fg);border-color:var(--ck-line)} .ck-hdays i.today{border-color:var(--ck-acc);color:var(--ck-acc)} .ck-hweek{grid-column:2;display:flex;align-items:center;gap:4px} .ck-hweek i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ck-line)} .ck-hweek i.ok{background:var(--ck-acc)} .ck-hweek i.miss{background:var(--ck-bad)} .ck-hweek i.skip{background:none;border:1px dashed var(--ck-dim)} .ck-hweek i.today{outline:1.5px solid var(--ck-acc);outline-offset:1.5px} .ck-hweek span{white-space:nowrap;margin-left:4px;font-size:10px;color:var(--ck-dim);letter-spacing:.06em;text-transform:uppercase} .ck-hact{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px} .ck-hact .btn{min-height:32px;padding:0 12px;font-size:13px} .ck-timer{font-family:var(--f-title);font-size:21px;font-weight:700;letter-spacing:.04em;color:var(--ck-acc);min-width:5ch} .ck-goal{font-size:12px;color:var(--ck-mute)} .ck-hedit{position:absolute;top:6px;right:6px} /* ---------- notas ---------- */ .ck-notes{columns:250px;column-gap:10px;padding:10px} .ck-notes .ck-empty{column-span:all} .ck-note{position:relative;break-inside:avoid;display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding:11px 12px 9px;border:1px solid var(--ck-line);border-left:4px solid var(--nc,var(--ck-line2));border-radius:var(--ck-r);cursor:pointer; background:linear-gradient(160deg,color-mix(in srgb,var(--nc,transparent) 16%,transparent),color-mix(in srgb,var(--nc,transparent) 5%,transparent)),var(--ck-card);transition:border-color .15s,transform .12s,box-shadow .12s} .ck-note:hover{transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(0,0,0,.5);border-color:var(--nc,var(--ck-line2))} .ck-note.pinned{border-top-color:var(--nc,var(--ck-acc))} .ck-ntitle{font-weight:700;overflow-wrap:anywhere;padding-right:20px} .ck-ntitle.none{font-weight:400;font-style:italic;color:var(--ck-mute)} .ck-ntext{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:7.4em;overflow:hidden;color:color-mix(in srgb,var(--ck-fg) 85%,transparent)} .ck-nfoot{display:flex;gap:8px;align-items:baseline;font-size:11px;color:var(--ck-mute)} .ck-nlen{margin-left:auto;color:var(--ck-dim)} .ck-pin{position:absolute;top:8px;right:8px;color:var(--nc,var(--ck-acc))} .ck-pin svg{width:14px;height:14px} /* ---------- pie ---------- */ .ck-status{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;margin-top:auto;padding:2px 2px 0;font-size:11.5px;color:var(--ck-dim)} .ck-status [data-ck="saved"]{color:var(--ck-mute)} .ck-status [data-ck="saved"]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--ck-acc);vertical-align:1px} /* ---------- avisos y diálogos (capas de la propia ventana) ---------- */ .ck-toast{position:absolute;z-index:40;left:50%;bottom:16px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 24px);padding:9px 10px 9px 16px;border-radius:var(--ck-r2); background:var(--menu-bg,#222);color:var(--menu-fg,#fff);border:1px solid color-mix(in srgb,var(--menu-fg,#fff) 20%,transparent);box-shadow:0 12px 30px -8px rgba(0,0,0,.55); font-size:13.5px;font-weight:600;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s} .ck-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto} .ck-toast.ck-err{border-color:var(--ck-bad);box-shadow:0 0 0 1px var(--ck-bad),0 12px 30px -8px rgba(0,0,0,.55)} .ck-toast button{flex:none;min-height:28px;padding:0 12px;border:0;border-radius:var(--ck-r);background:var(--ck-acc);color:var(--accent-fg,#fff);font-weight:700;cursor:pointer} .ck-ov{position:absolute;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(8,6,14,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:ck-fade .14s ease-out} @keyframes ck-fade{from{opacity:0}} .ck-dlg{--ck-fg:var(--menu-fg,var(--win-fg));position:relative;width:min(540px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:18px 20px; background:var(--menu-bg,#fff);color:var(--ck-fg);border:min(var(--bw,2px),3px) solid var(--win-border,transparent);border-radius:var(--radius,12px);box-shadow:0 30px 70px -20px rgba(0,0,0,.65); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:ck-pop .16s ease-out} @keyframes ck-pop{from{transform:translateY(8px) scale(.98);opacity:.4}} .ck-dlg.ck-wide{width:min(720px,100%)} .ck-dlg.ck-small{width:min(420px,100%)} .ck-dlg h3{margin:0;font-family:var(--f-title);font-size:19px;font-weight:700;color:var(--ck-acc)} .ck-dlg h4{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-mute)} .ck-msg{margin:0;font-size:13.5px;color:var(--ck-mute)} .ck-form{display:flex;flex-direction:column;gap:12px} .ck-row{display:flex;flex-direction:column;gap:5px;min-width:0} .ck-row>span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ck-mute)} .ck-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .ck-dlg textarea{min-height:96px;resize:vertical;width:100%;line-height:1.5} .ck-dlg .ck-notepad{min-height:220px} .ck-dlg .ck-code{min-height:110px;font-family:var(--f-mono,monospace);font-size:12px} .ck-dlg .ck-num-in{width:120px} .ck-dlg .ck-icoin{width:180px;margin-top:6px} .ck-tip{margin:0;font-size:12.5px;color:var(--ck-mute)} .ck-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center} .ck-foot-l{justify-content:flex-start} .ck-left{margin-right:auto} .ck-dsec{padding:12px 0;border-top:1px solid var(--ck-line);display:flex;flex-direction:column;gap:8px} .ck-filepick{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px;border:1.5px dashed var(--ck-line2);border-radius:var(--ck-r);font-size:13px;color:var(--ck-mute)} .ck-filepick input{font-size:12px;max-width:100%} .ck-colors{display:flex;flex-wrap:wrap;gap:6px} .ck-colors button{width:32px;height:28px;border:1px solid var(--ck-line2);border-radius:var(--ck-r);background:var(--c);cursor:pointer} .ck-colors button.sel{outline:2px solid var(--ck-fg);outline-offset:2px} .ck-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;align-self:flex-start} .ck-switch input{position:absolute;opacity:0;width:1px;height:1px} .ck-trk{position:relative;width:38px;height:22px;border-radius:999px;border:1px solid var(--ck-line2);background:var(--ck-panel);transition:background .2s,border-color .2s} .ck-trk::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ck-mute);transition:transform .2s,background .2s} .ck-switch input:checked+.ck-trk{background:var(--ck-acc);border-color:var(--ck-acc)} .ck-switch input:checked+.ck-trk::after{transform:translateX(16px);background:var(--accent-fg,#fff)} .ck-switch input:focus-visible+.ck-trk{outline:2px solid var(--ck-acc);outline-offset:2px} .ck-icons{display:flex;flex-wrap:wrap;gap:4px} .ck-icons button{width:36px;height:34px;padding:0;border:1px solid var(--ck-line);border-radius:var(--ck-r);background:var(--ck-panel);font-size:18px;cursor:pointer} .ck-icons button:hover,.ck-icons button.sel{border-color:var(--ck-acc);background:var(--ck-acc-soft)} .ck-days{display:flex;flex-wrap:wrap;gap:6px} .ck-days label{position:relative} .ck-days input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .ck-days span{display:grid;place-items:center;width:40px;height:36px;border:1px solid var(--ck-line2);border-radius:var(--ck-r);font-size:12px;font-weight:700;color:var(--ck-mute)} .ck-days input:checked+span{background:var(--ck-acc);border-color:var(--ck-acc);color:var(--accent-fg,#fff)} .ck-days input:focus-visible+span{outline:2px solid var(--ck-acc);outline-offset:2px} .ck-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} /* ---------- ventanas angostas (teléfono de pie o una ventana chica) ---------- */ @container ck (max-width:900px){ .ck-calw{grid-template-columns:1fr} .ck-calside{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} } @container ck (max-width:760px){ .ck-sc{--ck-pad:14px} .ck-top{padding:10px 14px 8px;gap:8px 14px} .ck-stats{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:14px;padding-bottom:2px;padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .ck-stats::-webkit-scrollbar{display:none} .ck-bar{padding:0 14px 8px} .ck-tabs{flex:1 1 auto} .ck-tab{flex:1 1 0;padding:0 8px;min-width:0} .ck-tab span{overflow:hidden;text-overflow:ellipsis} .ck-data span{display:none} .ck .ck-data{width:36px;min-width:36px;padding:0} .ck-main{padding:12px 14px 16px;gap:12px} .ck-board{grid-template-columns:1fr} .ck-search{flex:1 1 100%;margin-left:0} .ck-hints{display:none} .ck-acts{opacity:1} } @container ck (max-width:560px){ .ck-calside{grid-template-columns:1fr} .ck-tab{flex-direction:column;gap:2px;min-height:44px;font-size:11px;padding:3px 4px} .ck-tab svg{width:18px;height:18px} .ck-tools .btn{min-height:44px} .ck-tools{gap:4px} .ck-optl{gap:8px} .ck-seg span{padding:7px 10px} .ck-field{flex:1 1 auto} .ck .ck-field input{flex:1} .ck-hint{margin-left:0;flex-basis:100%} .ck-habw .ck-hint,.ck-notew .ck-hint{display:none} .ck-cday{min-height:52px;padding:3px} .ck-cchip,.ck-cmore,.ck-n,.ck-chabs,.ck-legend .ck-draghint{display:none} .ck-cdots{display:flex} .ck-num{justify-content:center} .ck-calh{flex-wrap:wrap} .ck-calh h3{flex:1;min-width:0;font-size:15px} .ck-calh .ck-hint{flex-basis:100%;text-align:center} .ck-habits{grid-template-columns:1fr;padding:8px} .ck-notes{columns:1;padding:8px} .ck-grid2{grid-template-columns:1fr} .ck-dlg{padding:16px} .ck-ov{padding:10px;align-items:end} .ck-dlg .ck-notepad{min-height:160px} .ck-task{padding:10px 6px 10px 12px} .ck-x{opacity:1} } @container ck (max-width:400px){ .ck-logo{font-size:21px} .ck-tagl{display:none} .ck-clock b{font-size:20px} .ck-prompt .btn span{display:none} .ck-prompt .btn{width:40px;min-width:40px;padding:0} } /* teléfono acostado y pantallas bajas: todo se desplaza junto y las pestañas se quedan arriba */ @media (max-height:540px){ .ck-sc{overflow:auto;overscroll-behavior:contain} .ck-main{flex:none;overflow:visible;min-height:auto} .ck-top{padding:8px 16px 6px} .ck-tagl,.ck-clock{display:none} .ck-logo{font-size:20px} .ck-logo::after{display:none} .ck-stat b,.ck-clock b{font-size:18px} .ck-bar{position:sticky;top:0;z-index:5;padding-top:6px;background:var(--win-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .ck-tab{flex-direction:row;min-height:34px;font-size:13px} .ck-tools .btn{min-height:36px} .ck-cday{min-height:58px} .ck-ov{align-items:center} } @media (pointer:coarse){ .ck-legend .ck-draghint{display:none} .ck-acts{opacity:1} .ck-x{opacity:1} .ck-ic{width:36px;height:34px} .ck-check{width:24px;height:24px} .ck-check:checked::after{left:7px;top:2px;width:6px;height:12px} .ck-check.ck-sub{width:20px;height:20px} .ck-check.ck-sub:checked::after{left:5px;top:1px;width:5px;height:10px} .ck .ck-prompt input,.ck input,.ck textarea,.ck select{font-size:16px} } @media (prefers-reduced-motion:reduce){ .ck *,.ck-ov,.ck-dlg{transition:none!important;animation:none!important} } /* ===== 1.17.67 · Recordatorios (openAvisos en checkwave.js, ckav.js) ===== */ /* la campana: encendida, con una lucecita del acento (la del aviso que viene) */ .ck .ck-bell{position:relative} .ck .ck-bell.on{color:var(--ck-acc)} .ck .ck-bell.on::after{content:"";position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--ck-acc);box-shadow:0 0 0 2px var(--menu-bg,var(--win-bg,#fff)),0 0 8px var(--ck-acc)} .ck-dlg.ck-avdlg{width:min(480px,100%)} .ck-avrow{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap} /* el interruptor: una pastilla con su perilla, que se hunde un poco al tocarla */ .ck-switch{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14.5px;font-weight:650;cursor:pointer;text-align:left} .ck-sw-k{position:relative;flex:none;width:46px;height:28px;border-radius:14px;background:var(--ck-line2);box-shadow:inset 0 1px 3px rgba(0,0,0,.28);transition:background-color .2s} .ck-sw-k::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(#fff,#ececf2);box-shadow:0 1px 2px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.18);transition:transform .26s cubic-bezier(.32,.72,0,1)} .ck-switch[aria-checked="true"] .ck-sw-k{background:var(--ck-acc)} .ck-switch[aria-checked="true"] .ck-sw-k::after{transform:translateX(18px)} .ck-switch:active:not(:disabled) .ck-sw-k::after{width:26px} .ck-switch[aria-checked="true"]:active:not(:disabled) .ck-sw-k::after{transform:translateX(14px)} .ck-switch:disabled{cursor:default;opacity:.5} .ck-switch:focus-visible{outline:none} .ck-switch:focus-visible .ck-sw-k{outline:2px solid var(--ck-acc);outline-offset:2px} .ck-avtime{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ck-mute)} .ck-avtime input{min-height:36px;padding:0 10px;font:inherit;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ck-fg)} .ck-avst{margin:0;min-height:1.4em;font-size:13.5px;font-weight:600} .ck-avst.ck-err{color:var(--ck-bad)} .ck-avnote{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--ck-r2,12px);background:var(--ck-acc-soft);border:1px solid var(--ck-acc-mid)} .ck-avnote p{margin:0;font-size:13.5px;line-height:1.45} .ck-avpriv{margin:0;padding-top:10px;border-top:1px solid var(--ck-line);font-size:12.5px;line-height:1.5;color:var(--ck-mute)} @media (prefers-reduced-motion:reduce){ .ck-sw-k,.ck-sw-k::after{transition:none} } /* ---------- Motor de audio 1.1: botón «Timbre», selector de timbres y sección de Sonidos ---------- */ .mtx-tb{max-width:min(100%,300px);min-width:0;gap:6px;padding:0 10px 0 9px} .mtx-tb > svg:first-child{color:var(--accent);width:17px;height:17px} .btn.primary.mtx-tb > svg:first-child{color:inherit} .mtx-tb-k{font-weight:400;opacity:.85} .mtx-tb-k::after{content:':'} .mtx-tb-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtx-tb-s{font-weight:400;opacity:.75;font-size:.92em} .mtx-tb > svg:last-child{width:14px;height:14px;opacity:.7;margin-left:-2px} .mtx-tb[aria-expanded="true"] > svg:last-child{transform:rotate(180deg)} .mtx-tb-ic svg{width:18px;height:18px} .mtx-pop{z-index:61;width:420px;overflow:hidden;max-height:min(580px,calc(100% - 48px));background:var(--client,var(--win-bg))} /* fondo sólido debajo del color de la ventana: en los temas de vidrio la lista no deja ver lo que hay detrás */ .mtx-pop::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--win-bg);border-radius:inherit;pointer-events:none} .mtx-pop.sheet{max-height:min(88%,620px)} .mtx-pop.mtx-in{position:absolute;inset:0!important;width:auto!important;max-width:none;max-height:none;border:0;border-radius:inherit;box-shadow:none;animation:none;z-index:5} .dl-pop.mtx-busy{overflow:hidden} .mtx-body{display:flex;flex-direction:column;gap:8px;padding:10px 12px 4px;min-height:0;flex:1 1 auto} .mtx-q{display:flex;align-items:center;gap:8px;flex:none;padding:0 10px;min-height:38px;border:1.5px solid var(--cell-line);border-radius:max(0px,calc(var(--radius) * .55));background:var(--cell-bg);color:var(--win-fg)} .mtx-q:focus-within{border-color:var(--accent)} .mtx-q svg{width:16px;height:16px;flex:none;color:var(--muted)} .mtx-q input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;outline:none;padding:7px 0;box-shadow:none} .mtx-q input::-webkit-search-cancel-button{cursor:pointer} .mtx-cats{display:flex;gap:6px;flex:none;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .mtx-cats.mtx-end{-webkit-mask-image:none;mask-image:none} .mtx-cats button{flex:none;min-height:30px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:999px;padding:3px 11px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap} .mtx-cats button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)} .mtx-cats button:focus-visible,.mtx-l:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px} .mtx-l{position:relative;flex:1 1 auto;min-height:140px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius) * .55));background:var(--cell-bg2);color:var(--win-fg);padding:0 4px 4px;outline:none} .mtx-gh{position:sticky;top:0;z-index:1;margin:0 -4px;padding:7px 12px 4px;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--cell-bg2)} .mtx-o{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 6px;border:1.5px solid transparent;border-radius:max(0px,calc(var(--radius) * .45));cursor:pointer;box-sizing:border-box} .mtx-o:hover{background:var(--cell-bg)} .mtx-o.mtx-sel{background:var(--cell-bg);box-shadow:inset 3px 0 0 var(--accent)} .mtx-o.mtx-act{border-color:var(--accent)} .mtx-o.mtx-dis{cursor:default;opacity:.62} .mtx-ck{flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--accent)} .mtx-ck svg{width:16px;height:16px} .mtx-ot{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .mtx-ot b{font-size:.88rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtx-ot small{font-size:.72rem;line-height:1.3;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtx-gl{flex:none;width:34px;height:15px;display:block;opacity:.7} .mtx-glf{fill:var(--accent);opacity:.18} .mtx-gls{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke} .mtx-o:hover .mtx-gl,.mtx-o.mtx-act .mtx-gl,.mtx-o.mtx-sel .mtx-gl{opacity:1} .mtx-pl{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--cell-line);color:var(--muted);opacity:.75;box-sizing:border-box} .mtx-o.mtx-on .mtx-pl{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--accent-fg)!important;animation:mtx-pulse 1.1s ease-out} .mtx-o.mtx-on .mtx-gls{animation:mtx-draw 1s ease-out} @keyframes mtx-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}} @keyframes mtx-draw{from{stroke-dasharray:80;stroke-dashoffset:80}to{stroke-dasharray:80;stroke-dashoffset:0}} @media (prefers-reduced-motion:reduce){ .mtx-o.mtx-on .mtx-pl,.mtx-o.mtx-on .mtx-gls{animation:none} } .mtx-pl svg{width:12px;height:12px;margin-left:2px} .mtx-o:hover .mtx-pl,.mtx-o.mtx-act .mtx-pl{opacity:1;color:var(--accent);border-color:var(--accent)} .mtx-pl:hover{background:var(--accent);color:var(--accent-fg)!important} .mtx-none{margin:0;padding:22px 10px;text-align:center;color:var(--muted);font-size:.85rem} .mtx-help{margin:0;flex:none;font-size:.72rem;line-height:1.4;color:var(--muted)} .mtx-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;padding:8px 12px 12px;border-top:1px solid var(--cell-line)} .mtx-st{flex:1;min-width:0;font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtx-edit{flex:none;font-size:.8rem;white-space:nowrap} @media (pointer:coarse){ .mtx-o{min-height:46px} .mtx-cats button{min-height:36px} .mtx-help{display:none} } /* sección «Timbre de cada juego» (ventana Sonidos); es su propio contenedor: las reglas @container de abajo miden su ancho */ .mtx-sec{container-type:inline-size} .mtx-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 4px} .mtx-sec h4 svg{width:18px;height:18px;color:var(--accent);flex:none} .mtx-sec .hint{margin:0} .mtx-games{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px} .mtx-games li{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 6px 6px 8px;border:1px solid var(--cell-line);border-radius:max(0px,calc(var(--radius) * .55));background:var(--cell-bg)} .mtx-gi{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-fg)} .mtx-gi svg{width:17px;height:17px} .mtx-gn{flex:1 1 40%;min-width:0;font-size:.86rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mtx-gb{flex:0 1 auto;max-width:62%;min-height:32px;font-size:.84rem} .mtx-gb .mtx-tb-k,.mtx-gb .mtx-tb-d{display:none} .mtx-sec-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} @container (max-width:520px){ .mtx-games{grid-template-columns:1fr} } /* ventanas angostas (celular): nombre arriba y el botón debajo, con todo el ancho para el nombre del timbre */ @container (max-width:460px){ .mtx-games li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:6px;align-items:center;padding:8px 10px} .mtx-gi{grid-row:1 / span 2} .mtx-gb{justify-self:start;max-width:100%} } /* en los juegos y en la descarga */ .mtx-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px} .mtx-row .hint{margin:0;font-size:.78rem} .dl-sec h5 .dl-tb{min-height:28px;margin-left:auto;padding:0 8px;font-size:.76rem;letter-spacing:0;max-width:62%} .dl-sec h5 .dl-tb svg:first-child{width:15px;height:15px} /* 1.4 (musica14): estrella de favoritos en el selector de timbres */ .mtx-fv{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--muted);opacity:.45;cursor:pointer;box-sizing:border-box} .mtx-fv svg{width:16px;height:16px} .mtx-o:hover .mtx-fv,.mtx-o.mtx-act .mtx-fv{opacity:.9} .mtx-fv:hover{color:var(--accent);opacity:1} .mtx-fv.on{opacity:1;color:var(--accent)} .mtx-fv.on svg path{fill:currentColor} /* ---------- 1.4 · Nombres de las notas: botón rápido, ventanita y sección de Sonidos ---------- */ .nn-q{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border:1px solid var(--btn-border,var(--cell-line));background:var(--cell-bg);color:var(--win-fg);border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex:none;line-height:1} .nn-q svg{width:15px;height:15px;color:var(--accent);flex:none} .nn-q .nn-q-o{font-size:11px;font-weight:600;color:var(--muted);padding-left:6px;border-left:1px solid var(--cell-line);font-variant-numeric:tabular-nums} .nn-q:hover{border-color:var(--accent)} .nn-q[aria-expanded="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .nn-q:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .on-meta .on-nnq{margin-left:auto;align-self:center} .nn-pop{position:fixed;z-index:9000;box-sizing:border-box;width:340px;max-width:calc(100vw - 16px);display:flex;flex-direction:column; background:var(--win-bg);color:var(--win-fg);border:2px solid var(--win-border);border-radius:var(--radius);box-shadow:0 22px 50px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15);animation:nnIn .14s ease-out;font-family:var(--f-ui)} .nn-pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-width:none;border-radius:var(--radius) var(--radius) 0 0;border-width:2px 0 0;padding-bottom:env(safe-area-inset-bottom)} @keyframes nnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .nn-pop-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 6px 14px;border-bottom:1px solid var(--cell-line)} .nn-pop-h b{display:flex;align-items:center;gap:8px;font-family:var(--f-title);font-size:1rem} .nn-pop-h b svg{width:17px;height:17px;color:var(--accent)} .nn-pop-b{display:grid;gap:12px;padding:12px 14px 6px} .nn-pop-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px 12px} .nn-g{display:grid;gap:6px;min-width:0} .nn-gl{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .nn-rs{display:grid;grid-template-columns:1fr 1fr;gap:6px} .nn-r{display:grid;gap:2px;align-content:center;min-height:40px;padding:7px 10px;border:1px solid var(--cell-line);background:var(--cell-bg);color:var(--win-fg);border-radius:max(6px,calc(var(--radius) * .55));font:inherit;text-align:left;cursor:pointer;min-width:0} .nn-r b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap} .nn-r small{font-size:11.5px;color:var(--muted);line-height:1.3} .nn-r:hover{border-color:var(--accent)} .nn-r[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--cell-bg))} .nn-r[aria-checked="true"] b::before{content:"";display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--accent);vertical-align:middle} .nn-r:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .nn-ex{margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} .nn-sec .nn-body{display:grid;gap:12px} .nn-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px} .nn-big .nn-ex{grid-column:1/-1} .nn-big .nn-r{min-height:58px;padding:9px 12px} .nn-big .nn-r b{font-size:15.5px} .nn-auto{margin:-4px 0 0} .nn-kbd{width:100%;max-width:520px;height:auto;display:block} /* un piano de verdad en todos los temas (como los teclados de music.css): teclas marfil y negras; el do central, con el acento */ .nn-kbd .nn-w{fill:#fbfaf7;stroke:#6f6a64;stroke-width:1} .nn-kbd .nn-w.nn-mc{fill:color-mix(in srgb,var(--accent) 45%,#fbfaf7);stroke:var(--accent);stroke-width:1.5} .nn-kbd .nn-w.nn-a4{fill:color-mix(in srgb,var(--accent) 16%,#fbfaf7)} .nn-kbd .nn-b{fill:#1c1a18} .nn-kbd .nn-t{font:600 7.5px var(--f-ui);fill:var(--muted)} .nn-kbd .nn-t.nn-mc{fill:var(--win-fg);font-weight:800} @media (max-width:720px){ .nn-big{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .nn-pop{animation:none} } .nn-h4{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap} .nn-h4 > h3,.nn-h4 > h4{margin:0} /* ---------- 1.4 · Sísifo Feliz: desfase, reglas, notas del resultado y calibración ---------- */ .sf-latr output{font-weight:700;font-variant-numeric:tabular-nums;min-width:6ch} .sf-rules{margin:2px 10px 4px;font-size:13px} .sf-rules summary{cursor:pointer;font-weight:700;color:var(--win-fg);padding:4px 0;width:max-content;max-width:100%} .sf-rules summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sf-rules ul{margin:4px 0 6px;padding-left:18px;display:grid;gap:2px} .sf-rules p{margin:0;color:var(--muted);line-height:1.45} .sf-note{margin:0;font-size:13px;color:var(--muted);line-height:1.4} .sf-note .lnk{font-size:13px} .sf-calrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--cell-line);border-radius:max(6px,calc(var(--radius) * .55));background:var(--cell-bg)} .sf-calrow > div{display:grid;gap:2px;flex:1 1 260px} .sf-calrow small{color:var(--muted);font-size:12.5px;line-height:1.35} .sf-cal-bg{position:fixed;inset:0;z-index:9100;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.42)} .sf-cal{width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;display:grid;gap:12px;padding:14px 16px 16px;box-sizing:border-box;background:var(--win-bg);color:var(--win-fg);border:2px solid var(--win-border);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.5);font-family:var(--f-ui);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)} .sf-cal-h{display:flex;align-items:center;justify-content:space-between;gap:8px} .sf-cal-h b{display:flex;align-items:center;gap:8px;font-family:var(--f-title);font-size:1.15rem} .sf-cal-h b svg{width:20px;height:20px;color:var(--accent)} .sf-cal-d{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)} .sf-cal-pad{display:grid;place-items:center;gap:10px;min-height:120px;padding:14px;border:2px dashed var(--cell-line);border-radius:max(8px,var(--radius));background:var(--cell-bg);color:var(--win-fg);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none} .sf-cal-pad:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .sf-cal-pad.hit{animation:sfCalHit .18s ease-out} @keyframes sfCalHit{from{background:color-mix(in srgb,var(--accent) 35%,var(--cell-bg));border-color:var(--accent)}to{background:var(--cell-bg)}} .sf-cal-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center} .sf-cal-dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--cell-line);box-sizing:border-box} .sf-cal-dots i:nth-child(-n+4){border-style:dotted} .sf-cal-dots i.on{background:var(--accent);border-color:var(--accent)} .sf-cal-plot{position:relative;height:30px;border-radius:6px;background:linear-gradient(90deg,transparent calc(50% - 30%),color-mix(in srgb,var(--accent) 10%,transparent) calc(50% - 30%) calc(50% + 30%),transparent calc(50% + 30%)),linear-gradient(90deg,transparent calc(50% - 13.3%),color-mix(in srgb,var(--accent) 18%,transparent) calc(50% - 13.3%) calc(50% + 13.3%),transparent calc(50% + 13.3%)),var(--cell-bg);border:1px solid var(--cell-line);overflow:hidden} .sf-cal-z{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--win-fg);opacity:.55} .sf-cal-l,.sf-cal-r{position:absolute;bottom:2px;font-size:10px;color:var(--muted)} .sf-cal-l{left:4px}.sf-cal-r{right:4px} .sf-cal-plot b{position:absolute;top:7px;width:8px;height:14px;margin-left:-4px;border-radius:3px;background:var(--accent)} .sf-cal-plot b.o{background:var(--muted)} .sf-cal-st{margin:0;min-height:1.4em;font-size:14px;font-weight:600} .sf-cal-fine label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px} .sf-cal-fine input{width:100%;accent-color:var(--accent)} .sf-cal-fine output{font-weight:700;font-variant-numeric:tabular-nums;min-width:7ch;text-align:right} .sf-cal-act{justify-content:flex-end;flex-wrap:wrap} @media (prefers-reduced-motion:reduce){ .sf-cal-pad.hit{animation:none} } .sf-waitt{align-items:flex-start} .sf-waitt span{display:grid;gap:1px} .sf-waitt small{color:var(--muted);font-size:12px} /* ================= Arcadópolis 1.4 (sistema14) ================= */ /* ---------- barra de tareas: «Pausar todo» y «Sonando ahora» ---------- */ .pz-tray[hidden],.sx-chip[hidden]{display:none!important} .pz-tray[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent),0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)} .pz-tray[aria-pressed="true"] svg{animation:pzBeat 1.6s ease-in-out infinite} @keyframes pzBeat{50%{transform:scale(.86)}} .sx-chip{width:auto!important;max-width:220px;display:inline-flex!important;align-items:center;gap:6px;padding:0 10px 0 8px!important;font:700 12px/1 var(--f-ui);white-space:nowrap;overflow:hidden} .sx-chip .sx-ic{display:grid;place-items:center;width:18px;height:18px;flex:none} .sx-chip .sx-ic svg{width:17px;height:17px} .sx-chip .sx-nm{min-width:0;overflow:hidden;text-overflow:ellipsis} .sx-chip .sx-n{font-size:11px;opacity:.75} .sx-chip[aria-expanded="true"]{background:var(--menu-hi,var(--btn-bg))} .sx-chip.quiet .sx-eq i{animation:none;height:5px;opacity:.55} .sx-chip.quiet .sx-eq i:nth-child(2){height:9px} .sx-chip.quiet .sx-eq i:nth-child(3){height:7px} /* barritas del ecualizador */ .sx-eq{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:13px;flex:none} .sx-eq i{display:block;width:3px;height:4px;border-radius:1px;background:var(--accent);animation:sxEq .9s ease-in-out infinite} .sx-eq i:nth-child(2){animation-delay:-.35s;animation-duration:.75s} .sx-eq i:nth-child(3){animation-delay:-.6s;animation-duration:1.05s} @keyframes sxEq{0%,100%{height:3px}50%{height:13px}} .tray-b[aria-pressed="true"] .sx-eq i{background:currentColor} @media (max-width:1100px){ .sx-chip .sx-nm,.sx-chip .sx-n{display:none} .sx-chip{padding:0 8px!important} } @media (max-width:480px){ .sx-chip .sx-ic{display:none} } /* ---------- mezclador (hereda el aspecto del menú de inicio de cada tema) ---------- */ #sx-panel.sxp{left:auto;right:8px;top:auto;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 6px);width:380px;max-width:calc(100vw - 16px);height:auto;max-height:min(560px,calc(100% - var(--bar-h) - 24px));padding:0;gap:0;overflow:hidden;z-index:61; display:flex;flex-direction:column;opacity:0;transform:translateY(10px);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)} #sx-panel.sxp.open{opacity:1;transform:none} #sx-panel.sxp[hidden]{display:none} .sxp-head{display:flex;align-items:center;gap:10px;padding:12px 10px 8px 14px;flex:none} .sxp-hi{display:grid;place-items:center;width:30px;height:30px;border-radius:calc(var(--radius) * .6);background:var(--pri-bg);color:var(--pri-fg);flex:none} .sxp-hi svg{width:19px;height:19px} .sxp-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .sxp-ht h2{margin:0;font-family:var(--f-title);font-size:19px;line-height:1.15;outline:none;border-radius:4px} .sxp-ht h2:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sxp-ht small{font-size:12px;color:var(--muted);font-weight:600} .sxp-head .iconbtn{width:34px;height:34px} .sxp-head .iconbtn svg{width:18px;height:18px} .sxp-spk{display:flex;align-items:center;gap:10px;margin:0 10px 6px;padding:8px 10px;border-radius:calc(var(--radius) * .6);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line);font-size:13px} .sxp-spk span{flex:1} .sxp-list{list-style:none;margin:0;padding:2px 10px 8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;scrollbar-width:thin} .sxp-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:4px;align-items:center;padding:8px 10px;border-radius:calc(var(--radius) * .7);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line);transition:box-shadow .2s} .sxp-row.on{box-shadow:inset 0 0 0 1px var(--cell-line),inset 3px 0 0 var(--accent)} .sxp-ic{position:relative;grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:calc(var(--radius) * .6);background:var(--menu-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--cell-line)} .sxp-ic>svg{width:22px;height:22px} .sxp-ic .sx-eq{position:absolute;right:-4px;bottom:-4px;padding:2px;border-radius:5px;background:var(--menu-bg);box-shadow:0 0 0 1px var(--cell-line);opacity:0;transition:opacity .2s;width:auto;height:11px;box-sizing:content-box} .sxp-ic .sx-eq i{width:2px} @keyframes sxEqS{0%,100%{height:2px}50%{height:11px}} .sxp-ic .sx-eq i{animation-name:sxEqS} .sxp-row.on .sxp-ic .sx-eq{opacity:1} .sxp-row.muted .sxp-ic{color:var(--muted)} .sxp-t{display:flex;align-items:baseline;gap:8px;min-width:0} .sxp-t b{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sxp-st{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap} .sxp-row.on .sxp-st{color:var(--accent)} .sxp-ctl{display:flex;align-items:center;gap:8px;min-width:0} .sxp-ctl .iconbtn{width:30px;height:30px} .sxp-ctl .iconbtn svg{width:16px;height:16px} .sxp-mute[aria-pressed="true"]{background:var(--danger,#c0392b);color:#fff;border-color:transparent} .sxp-vol{flex:1;min-width:60px;-webkit-appearance:none;appearance:none;height:24px;margin:0;background:transparent;cursor:pointer} .sxp-vol:disabled{opacity:.45;cursor:default} .sxp-vol:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:2px;border-radius:4px} .sxp-vol::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p,100%),var(--cell-bg2,var(--cell-line)) var(--p,100%));box-shadow:inset 0 0 0 1px var(--cell-line)} .sxp-vol::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p,100%),var(--cell-bg2,var(--cell-line)) var(--p,100%));box-shadow:inset 0 0 0 1px var(--cell-line)} .sxp-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--accent-fg,#fff);border:3px solid var(--accent);box-sizing:border-box;box-shadow:0 1px 4px rgba(0,0,0,.3)} .sxp-vol::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent-fg,#fff);border:3px solid var(--accent);box-sizing:border-box} .sxp-pc{width:38px;text-align:right;font:700 12px/1 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums} .sxp-stop[hidden]{display:none} .sxp-empty{padding:18px 18px 10px;text-align:center} .sxp-empty p{margin:4px 0} .sxp-ei{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--cell-bg);color:var(--muted);margin-bottom:4px} .sxp-ei svg{width:24px;height:24px} .sxp-foot{display:flex;gap:8px;justify-content:flex-end;padding:8px 10px 10px;border-top:1px solid var(--cell-line);flex:none;flex-wrap:wrap} .sxp-foot .btn{min-height:32px;padding:0 12px;font-size:13px} .sxp-foot .btn:disabled{opacity:.45;cursor:default} .sxp-foot .btn[aria-pressed="true"]{background:var(--pri-bg);color:var(--pri-fg)} @media (max-width:720px){ #sx-panel.sxp{left:0;right:0;top:0;bottom:auto;width:100%;max-width:none;max-height:calc(100% - var(--bar-h) - env(safe-area-inset-bottom,0px) - 12px);padding-top:env(safe-area-inset-top,0px);border-radius:0 0 var(--radius) var(--radius);transform:translateY(-14px)} .sxp-ctl .iconbtn{width:38px;height:38px} .sxp-vol{height:32px} } /* ---------- «Pausar todo»: las ventanas se ven en pausa ---------- */ html.pz-all #layer .win .win-body{filter:saturate(.55) brightness(.94);transition:filter .3s ease} .pz-badge{display:inline-flex;align-items:center;gap:4px;flex:none;padding:2px 8px 2px 6px;border-radius:999px;background:var(--accent);color:var(--accent-fg,#fff);font:700 11px/1.2 var(--f-ui);letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.25)} .pz-badge svg{width:11px;height:11px} @container (max-width:420px){ .pz-badge span{display:none} .pz-badge{padding:3px} } /* ---------- ventanas: bordes para cambiar de tamaño ---------- */ .wv-h{position:absolute;z-index:40;touch-action:none;-webkit-user-select:none;user-select:none} .wv-n,.wv-s{left:10px;right:10px;height:8px;cursor:ns-resize} .wv-n{top:-5px}.wv-s{bottom:-5px} .wv-e,.wv-w{top:10px;bottom:10px;width:8px;cursor:ew-resize} .wv-e{right:-5px}.wv-w{left:-5px} .wv-ne,.wv-nw,.wv-se,.wv-sw{width:16px;height:16px} .wv-ne{top:-6px;right:-6px;cursor:nesw-resize}.wv-sw{bottom:-6px;left:-6px;cursor:nesw-resize} .wv-nw{top:-6px;left:-6px;cursor:nwse-resize}.wv-se{bottom:-6px;right:-6px;cursor:nwse-resize} /* la esquina de abajo a la derecha se insinúa al pasar el ratón por la ventana activa */ .wv-se::after{content:"";position:absolute;right:8px;bottom:8px;width:9px;height:9px;opacity:0;transition:opacity .2s;background:linear-gradient(135deg,transparent 0 45%,currentColor 45% 55%,transparent 55% 70%,currentColor 70% 80%,transparent 80%);color:var(--muted)} .win:not(.inactive):hover>.wv-se::after{opacity:.75} @media (pointer:coarse){ .wv-n,.wv-s{height:16px}.wv-n{top:-9px}.wv-s{bottom:-9px} .wv-e,.wv-w{width:16px}.wv-e{right:-9px}.wv-w{left:-9px} .wv-ne,.wv-nw,.wv-se,.wv-sw{width:28px;height:28px} } .win.max>.wv-h,.win.fw>.wv-h,.win[hidden]>.wv-h{display:none} .win[data-snap="l"]>.wv-w,.win[data-snap="r"]>.wv-e,.win[data-snap]>.wv-n,.win[data-snap]>.wv-s{display:none} html.wv-busy,html.wv-busy *{cursor:inherit!important;-webkit-user-select:none!important;user-select:none!important} html.wv-busy[data-wvd="n"],html.wv-busy[data-wvd="s"]{cursor:ns-resize} html.wv-busy[data-wvd="e"],html.wv-busy[data-wvd="w"]{cursor:ew-resize} html.wv-busy[data-wvd="ne"],html.wv-busy[data-wvd="sw"]{cursor:nesw-resize} html.wv-busy[data-wvd="nw"],html.wv-busy[data-wvd="se"]{cursor:nwse-resize} /* mientras se arrastra o cambia de tamaño, los iframes y lienzos no se quedan con el puntero */ .win.wv-resizing iframe,.win.wv-drag iframe{pointer-events:none} .win.wv-resizing{animation:none} /* acoplada a media pantalla: esquinas rectas del lado del borde */ .win[data-snap="l"]{border-top-left-radius:0;border-bottom-left-radius:0} .win[data-snap="r"]{border-top-right-radius:0;border-bottom-right-radius:0} /* con alto propio (redimensionada o acoplada) el contenido llena la ventana, como al maximizarla */ .win.wv-sized .arc{height:100%;min-height:0} .win.wv-sized .bb,.win.wv-sized .mu{height:100%;min-height:0} .win.wv-sized .sy-frame{flex:1 1 auto;height:auto;min-height:0} .win.wv-sized .mt{height:100%;align-items:stretch} .win.wv-sized .mt-side{overflow:auto;padding-right:4px} /* silueta de acoplar */ #wv-ghost{position:absolute;pointer-events:none;box-sizing:border-box;display:grid;place-items:center;border-radius:var(--radius);border:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 10px 40px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(3px) saturate(1.2);backdrop-filter:blur(3px) saturate(1.2);opacity:0;transform:scale(.97);transition:opacity .14s ease,transform .18s cubic-bezier(.2,.8,.2,1),left .16s ease,top .16s ease,width .16s ease,height .16s ease} #wv-ghost.on{opacity:1;transform:none} #wv-ghost span{padding:7px 14px;border-radius:999px;background:var(--menu-bg);color:var(--menu-fg);font:700 13px/1.2 var(--f-ui);box-shadow:var(--shadow);border:1px solid var(--cell-line)} #wv-ghost:not(.on) span{opacity:0} /* ícono de la barra de título = botón del menú de la ventana */ .wv-mb{border:0;background:transparent;color:inherit;padding:0;margin:0;cursor:pointer;border-radius:5px;font:inherit} .wv-mb:hover{background:color-mix(in srgb,currentColor 14%,transparent)} .wv-mb:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:1px} .wv-mb[aria-expanded="true"]{background:color-mix(in srgb,currentColor 20%,transparent)} .menu.wv-menu{position:fixed;width:250px;z-index:2147480100;padding:6px} .wv-menu .mi[aria-current="true"]{background:var(--menu-hi)} .wv-menu hr{margin:4px 2px} .wv-kb{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:45;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border-radius:12px;background:var(--menu-bg);color:var(--menu-fg);box-shadow:var(--shadow);border:1px solid var(--accent);font-size:12px;text-align:center;pointer-events:none;max-width:calc(100% - 24px)} .wv-kb b{font-weight:700} .wv-kb span{font:700 12px/1 var(--f-mono);color:var(--accent)} .win.wv-kbing{outline:2px dashed var(--accent);outline-offset:3px} @media (max-width:720px){ .wv-h,#wv-ghost{display:none!important} } /* ---------- bienvenida: desde la 1.7, en bienvenida.css ---------- */ /* ---------- fondos ligeros ---------- */ .wq-heavy{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 5px;border-radius:999px;background:rgba(10,10,14,.72);color:#fff;font:700 10.5px/1 var(--f-ui);letter-spacing:.02em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:auto} .wq-heavy svg{width:13px;height:13px} .tcard{position:relative} .wq-q .seg button{min-width:0} .wq-tip{position:fixed;z-index:79;right:12px;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 12px);width:360px;max-width:calc(100vw - 24px);box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;padding:14px 12px 14px 14px;background:var(--menu-bg);color:var(--menu-fg);border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow);opacity:0;transform:translateY(14px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)} .wq-tip.show{opacity:1;transform:none} .wq-tip.out{opacity:0;transform:translateY(10px)} .wq-ti{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);flex:none} .wq-ti svg{width:22px;height:22px} .wq-tt{flex:1;min-width:0} .wq-tt h2{margin:0 0 4px;font-family:var(--f-title);font-size:16px;line-height:1.2} .wq-tt p{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--muted)} .wq-acts{display:flex;flex-wrap:wrap;gap:6px} .wq-acts .btn{min-height:32px;padding:0 12px;font-size:13px} .wq-acts .btn.ghost{background:transparent;border-color:transparent;color:var(--muted)} .wq-x{width:30px!important;height:30px!important} .wq-x svg{width:16px;height:16px} @media (max-width:720px){ .wq-tip{left:8px;right:8px;width:auto;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 8px)} } @media (prefers-reduced-motion:reduce){ .sx-eq i{animation:none!important;height:8px} .sx-eq i:nth-child(2){height:12px} .wl-orbit{animation:none!important} .pz-tray[aria-pressed="true"] svg{animation:none} #wv-ghost{transition:none} } /* ---------- 1.7: la bienvenida antoja los temas que da la cuenta ---------- */ .wl-more{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--cell-line));background:color-mix(in srgb,var(--accent) 8%,var(--cell-bg));color:var(--win-fg);border-radius:max(6px,calc(var(--radius)*.7));cursor:pointer;font:inherit;text-align:left;transition:transform .15s ease,box-shadow .15s ease} .wl-more:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.14)} .wl-more:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px} .wl-more>svg{width:18px;height:18px;flex:none;color:var(--muted)} .wl-more-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .wl-more-t b{font-family:var(--f-title);font-size:15px} .wl-more-t small{font-size:12.5px;color:var(--muted)} .wl-sws{display:flex;flex:none} .wl-sw{position:relative;display:block;width:30px;height:30px;margin-left:-8px;border-radius:9px;border:2px solid var(--win-bg,#fff);background:linear-gradient(140deg,var(--accent,#888) 0 38%,var(--win-bg,#ccc) 38% 70%,var(--title-bg,var(--accent,#555)) 70%);box-shadow:0 2px 6px rgba(0,0,0,.25);overflow:hidden} .wl-sw:first-child{margin-left:0} .wl-sw i{position:absolute;left:5px;right:5px;top:7px;height:4px;border-radius:2px;background:var(--win-fg,#333);opacity:.55} .wl-sw em{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff} .wl-sw em svg{width:9px;height:9px} .wl-sws.big{gap:8px;flex-wrap:wrap;margin:2px 0 4px} .wl-sws.big .wl-sw{width:auto;min-width:72px;height:auto;margin:0;padding:22px 8px 7px;border-radius:max(8px,calc(var(--radius)*.7));border:var(--bw,1px) solid var(--win-border,rgba(0,0,0,.2))} .wl-sws.big .wl-sw i{top:9px} .wl-sws.big .wl-sw b{position:relative;display:block;font:600 11.5px/1.15 var(--f-ui,system-ui);color:var(--win-fg,#222);background:var(--win-bg,#fff);padding:3px 6px;border-radius:5px;white-space:nowrap} .wl-sws.big .wl-sw em{top:4px;right:4px;bottom:auto;width:16px;height:16px} .wl-iab{color:var(--win-fg)!important;font-weight:600} /* ---------- Fondos 0.9: miniaturas reales de cada fondo (generado por lab/thumbs.js) ---------- */ [data-os="acuarela"]{--wall-thumb:url("/thumbs/211db7f257fe.webp")} [data-os="alebrije"]{--wall-thumb:url("/thumbs/7f5dbf017f8b.webp")} [data-os="altocontraste"]{--wall-thumb:url("/thumbs/ceb9b6807b0e.webp")} [data-os="ambar"]{--wall-thumb:url("/thumbs/c4c0b250797a.webp")} [data-os="artdeco"]{--wall-thumb:url("/thumbs/150126df3338.webp")} [data-os="artico"]{--wall-thumb:url("/thumbs/1208a2845a80.webp")} [data-os="barroco"]{--wall-thumb:url("/thumbs/b26ba8bbee6e.webp")} [data-os="barronegro"]{--wall-thumb:url("/thumbs/3dce40f7fe9d.webp")} [data-os="bauhaus"]{--wall-thumb:url("/thumbs/7099e575afc4.webp")} [data-os="biolum"]{--wall-thumb:url("/thumbs/203c0a35e7b0.webp")} [data-os="bitonal"]{--wall-thumb:url("/thumbs/20985546ae07.webp")} [data-os="boreal"]{--wall-thumb:url("/thumbs/d606f3a8e4af.webp")} [data-os="bosque"]{--wall-thumb:url("/thumbs/fc01ec401987.webp")} [data-os="chiptunia"]{--wall-thumb:url("/thumbs/586b5e2a5014.webp")} [data-os="cinenegro"]{--wall-thumb:url("/thumbs/cab039814183.webp")} [data-os="coderain"]{--wall-thumb:url("/thumbs/e56b1d6ee405.webp")} [data-os="coralia"]{--wall-thumb:url("/thumbs/c2615a64f2a9.webp")} [data-os="cristal"]{--wall-thumb:url("/thumbs/bd7953dbe79d.webp")} [data-os="cyberpunk"]{--wall-thumb:url("/thumbs/36b657e1aa80.webp")} [data-os="darkfantasy"]{--wall-thumb:url("/thumbs/b2a0b143b194.webp")} [data-os="desierto"]{--wall-thumb:url("/thumbs/0e30b6adb14b.webp")} [data-os="desktopia"]{--wall-thumb:url("/thumbs/9afb12f04916.webp")} [data-os="dirigible"]{--wall-thumb:url("/thumbs/708d19ecf4d3.webp")} [data-os="disco"]{--wall-thumb:url("/thumbs/c6ac8bce34bf.webp")} [data-os="eclipse"]{--wall-thumb:url("/thumbs/131c58f340d7.webp")} [data-os="espacial"]{--wall-thumb:url("/thumbs/f93f7f4989da.webp")} [data-os="glitterpop"]{--wall-thumb:url("/thumbs/a5378e5427e4.webp")} [data-os="gransala"]{--wall-thumb:url("/thumbs/9c77198eb8b2.webp")} [data-os="hadas"]{--wall-thumb:url("/thumbs/c6aac1a94b27.webp")} [data-os="holograma"]{--wall-thumb:url("/thumbs/24ccf1357f84.webp")} [data-os="islas"]{--wall-thumb:url("/thumbs/d17470f281f6.webp")} [data-os="jardinzen"]{--wall-thumb:url("/thumbs/d4982246f9cf.webp")} [data-os="jazz"]{--wall-thumb:url("/thumbs/48a9fb76c5e0.webp")} [data-os="kawaii"]{--wall-thumb:url("/thumbs/31307d9e68b2.webp")} [data-os="kintsugi"]{--wall-thumb:url("/thumbs/c9b70d3932a8.webp")} [data-os="kjade"]{--wall-thumb:url("/thumbs/63dad57f9765.webp")} [data-os="krubi"]{--wall-thumb:url("/thumbs/810ac8a3c6dd.webp")} [data-os="kzafiro"]{--wall-thumb:url("/thumbs/42a56f6d04e8.webp")} [data-os="liquidmetal"]{--wall-thumb:url("/thumbs/519942a0606b.webp")} [data-os="lofi"]{--wall-thumb:url("/thumbs/aa79e2740973.webp")} [data-os="luchalibre"]{--wall-thumb:url("/thumbs/e6e12c72ca3f.webp")} [data-os="lunar"]{--wall-thumb:url("/thumbs/7682f57e9ae5.webp")} [data-os="lunaria"]{--wall-thumb:url("/thumbs/fcf0709c2224.webp")} [data-os="madera"]{--wall-thumb:url("/thumbs/e99ab1299407.webp")} [data-os="maquinita"]{--wall-thumb:url("/thumbs/0a974b7f46b1.webp")} [data-os="marciano"]{--wall-thumb:url("/thumbs/587c9b6645cd.webp")} [data-os="marmol"]{--wall-thumb:url("/thumbs/d8622dabb345.webp")} [data-os="minimal"]{--wall-thumb:url("/thumbs/40927ced3143.webp")} [data-os="muertos"]{--wall-thumb:url("/thumbs/1ccaca4cd259.webp")} [data-os="nebulosa"]{--wall-thumb:url("/thumbs/7d85e4df9837.webp")} [data-os="noventas"]{--wall-thumb:url("/thumbs/8622cdd4ef4c.webp")} [data-os="ochobits"]{--wall-thumb:url("/thumbs/78c9b1a7c613.webp")} [data-os="orbital"]{--wall-thumb:url("/thumbs/91691ad7cf7d.webp")} [data-os="origami"]{--wall-thumb:url("/thumbs/3db0f9999a6e.webp")} [data-os="oscilia"]{--wall-thumb:url("/thumbs/4d4581b1b8d0.webp")} [data-os="otono"]{--wall-thumb:url("/thumbs/60dd0f45a188.webp")} [data-os="papelpicado"]{--wall-thumb:url("/thumbs/fff33874ff31.webp")} [data-os="piratas"]{--wall-thumb:url("/thumbs/f25355104856.webp")} [data-os="pizarron"]{--wall-thumb:url("/thumbs/71743d1f9247.webp")} [data-os="popart"]{--wall-thumb:url("/thumbs/fc9d02f803eb.webp")} [data-os="pradera"]{--wall-thumb:url("/thumbs/c7abb1c950c3.webp")} [data-os="punk"]{--wall-thumb:url("/thumbs/d500cc892152.webp")} [data-os="retrofuturista"]{--wall-thumb:url("/thumbs/0b7f8ae2a29c.webp")} [data-os="rock"]{--wall-thumb:url("/thumbs/1e38cfcdf86a.webp")} [data-os="sakura"]{--wall-thumb:url("/thumbs/5ffa1b6215c7.webp")} [data-os="selva"]{--wall-thumb:url("/thumbs/d2a76e0dd0fd.webp")} [data-os="steampunk"]{--wall-thumb:url("/thumbs/57471f0f359c.webp")} [data-os="submarino"]{--wall-thumb:url("/thumbs/c57d8e42df1b.webp")} [data-os="subterraneo"]{--wall-thumb:url("/thumbs/fda78f555c45.webp")} [data-os="synthwave"]{--wall-thumb:url("/thumbs/47e3422dec40.webp")} [data-os="talavera"]{--wall-thumb:url("/thumbs/3456e4c2ead4.webp")} [data-os="terminalia"]{--wall-thumb:url("/thumbs/8d0755ee7fc9.webp")} [data-os="tormenta"]{--wall-thumb:url("/thumbs/7a6bb4ed7e49.webp")} [data-os="translucia"]{--wall-thumb:url("/thumbs/076b47f9f5c6.webp")} [data-os="ukiyoe"]{--wall-thumb:url("/thumbs/13563902286c.webp")} [data-os="vaporwave"]{--wall-thumb:url("/thumbs/3e0ce3889c73.webp")} [data-os="vhs"]{--wall-thumb:url("/thumbs/de6b498e1faa.webp")} [data-os="videotex"]{--wall-thumb:url("/thumbs/bc4b7119ab1a.webp")} [data-os="vinilo"]{--wall-thumb:url("/thumbs/2a74ee74c264.webp")} [data-os="vitral"]{--wall-thumb:url("/thumbs/7465fe3d7482.webp")} [data-os="volcan"]{--wall-thumb:url("/thumbs/bfa0b6c1dc91.webp")} [data-os="fantasma"]{--wall-thumb:url("/thumbs/7cd2cf62a011.webp")} [data-os="aurora"]{--wall-thumb:url("/thumbs/730df0bcf24f.webp")} [data-os="petalos"]{--wall-thumb:url("/thumbs/23ec7356cd51.webp")} [data-os="planetario"]{--wall-thumb:url("/thumbs/3878dc8b3d81.webp")} [data-os="pastel"]{--wall-thumb:url("/thumbs/d8c65f501e45.webp")} [data-os="invierno"]{--wall-thumb:url("/thumbs/27ab86c6ea1f.webp")} [data-os="bolsillo"]{--wall-thumb:url("/thumbs/2e5166f47117.webp")} [data-os="halloween"]{--wall-thumb:url("/thumbs/c6738db717cc.webp")} [data-os="jacarandas"]{--wall-thumb:url("/thumbs/e3228cb8e456.webp")} [data-os="relojeria"]{--wall-thumb:url("/thumbs/f0e6ec950d6d.webp")} [data-os="cristalvivo"]{--wall-thumb:url("/thumbs/578bdfcd0957.webp")} [data-os="bibinfinita"]{--wall-thumb:url("/thumbs/6f005043609e.webp")} [data-os="horologium"]{--wall-thumb:url("/thumbs/daea9d445b94.webp")} [data-os="medusas"]{--wall-thumb:url("/thumbs/b9c109011296.webp")} [data-os="obsidiana"]{--wall-thumb:url("/thumbs/d8db6d09b131.webp")} [data-os="balletorigami"]{--wall-thumb:url("/thumbs/a51d9538d006.webp")} [data-os="auroraboreal"]{--wall-thumb:url("/thumbs/a5dd3a781b73.webp")} [data-os="horizonte"]{--wall-thumb:url("/thumbs/6fecf51e9f8e.webp")} [data-os="expreso"]{--wall-thumb:url("/thumbs/ca802a689811.webp")} [data-os="frutiger"]{--wall-thumb:url("/thumbs/5824a44a3b2f.webp")} [data-os="angel"]{--wall-thumb:url("/thumbs/2927837ce640.webp")} /* ================= Arcadópolis 1.5 (sistema15) ================= */ /* avatar del sistema en todas partes (parts/avglobal.js): vectorial, redondo, nítido de 24 a 48 px */ .ag-face{display:inline-grid;flex:none;overflow:hidden;border-radius:50%;line-height:0;vertical-align:middle;background:var(--cell-bg)} .ag-face>svg{width:100%;height:100%;display:block} span.el-face.ag-face{border-radius:50%;image-rendering:auto} .el-avsys{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--radius);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line);max-width:520px} .el-avsys .hint{margin:4px 0 8px} .el-avsys .el-avbig{width:72px;height:72px;box-shadow:0 0 0 3px var(--accent),0 0 0 6px var(--cell-line)} @media (max-width:520px){ .el-avsys{flex-direction:column;align-items:flex-start} } /* tu avatar donde una app te nombra (Pentagrama, récords de Snake) */ .ap-av.ag-face{background:var(--cell-bg);box-shadow:0 0 0 2px var(--accent)} .ag-face.ag-rec{width:24px;height:24px;margin:-3px 8px 0 0;box-shadow:0 0 0 2px var(--accent)} /* ================= Arcadópolis 1.5 (sistema15): instalar la app (parts/instalar.js) ================= */ .ins{display:flex;flex-direction:column;gap:16px;container-type:inline-size} .ins-hero{display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:var(--radius); background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 65%),var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .ins-hero h3{margin:0 0 4px;font-family:var(--f-title);font-size:clamp(20px,4cqw,26px);line-height:1.15;outline:none;text-wrap:balance} .ins-hero h3:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:4px;border-radius:4px} .ins-lead{margin:0;color:var(--muted);line-height:1.5;text-wrap:pretty} .ins-badge{position:relative;flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:calc(var(--radius) + 6px);background:var(--pri-bg);color:var(--pri-fg); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.25)} .ins-badge>svg{width:36px;height:36px} .ins-badge i{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--win-bg);color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .ins-badge i svg{width:18px;height:18px} .ins-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0} .ins-chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line);font-size:13.5px;font-weight:600} .ins-chips svg{width:17px;height:17px;color:var(--accent);flex:none} .ins-now{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px} .ins-now .hint{margin:0} .ins-go{font-size:16px;padding:10px 18px} .ins-go svg{width:20px;height:20px} .ins-for{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-weight:700;font-size:14px} .ins-seg button{padding:7px 14px;font-size:14px} .ins-seg button:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:-3px} .ins-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:ins} .ins-steps.ins-quiet{opacity:.92} .ins-step{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:var(--radius);background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .ins-step figure{margin:0;display:grid;place-items:center;min-height:150px} .ins-st{display:flex;gap:10px;align-items:flex-start} .ins-st b{display:block;margin-bottom:2px;line-height:1.3} .ins-st p{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);text-wrap:pretty} .ins-n{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg);font:700 13px/1 var(--f-ui)} .ins-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 12%,var(--win-bg));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);font-size:14px;line-height:1.5} .ins-note>svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:2px} .ins-note p{margin:0}.ins-note p+p{margin-top:6px} .ins-note b{display:block;margin-bottom:2px} .ins-note-soft{background:var(--cell-bg);border-color:var(--cell-line)} .ins-foot{display:flex;justify-content:flex-end} /* dibujos: el aparato y su pantalla con los colores del tema */ .ins-art{width:100%;max-width:150px;height:auto;overflow:visible} .ins-art[viewBox^="0 0 200"]{max-width:230px} .ins-dev{fill:var(--win-bg);stroke:var(--win-fg);stroke-width:2.2;opacity:.95} .ins-scr{fill:var(--bg)} .ins-notch{fill:var(--win-fg);opacity:.85} .ins-wall{fill:color-mix(in srgb,var(--accent) 22%,var(--bg))} .ins-ico{fill:color-mix(in srgb,var(--win-bg) 75%,transparent);stroke:var(--cell-line);stroke-width:.6} .ins-win{fill:var(--win-bg);stroke:var(--cell-line);stroke-width:.8} .ins-wint{fill:color-mix(in srgb,var(--accent) 55%,var(--win-bg))} .ins-chrome{fill:var(--win-bg);opacity:.97} .ins-url{fill:var(--cell-bg);stroke:var(--cell-line);stroke-width:.6} .ins-gls{fill:var(--muted);opacity:.6} .ins-dim{fill:#000;opacity:.32} .ins-sheet{fill:var(--win-bg)} .ins-pop{stroke:var(--cell-line);stroke-width:.8;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))} .ins-grab{fill:var(--muted);opacity:.5} .ins-row{fill:var(--cell-bg)} .ins-rowhot{fill:color-mix(in srgb,var(--accent) 22%,var(--win-bg));stroke:var(--accent);stroke-width:1.2} .ins-line{fill:var(--muted);opacity:.45} .ins-hotl{fill:var(--accent);opacity:1} .ins-tile{fill:var(--pri-bg)} .ins-btnhot{fill:var(--pri-bg)} .ins-tx{fill:var(--win-fg);font:700 12px/1 var(--f-ui)} .ins-sm{font-size:7.6px;font-weight:600} .ins-xs{font-size:6.8px;font-weight:600} .ins-b{font-weight:800} .ins-mut{fill:var(--muted);font-size:14px} .ins-link{fill:var(--accent)} .ins-hottx{fill:var(--accent);font-weight:800} .ins-onacc2{fill:var(--pri-fg);font-weight:800} .ins-gl{color:var(--win-fg);overflow:visible} .ins-gl.ins-hot{color:var(--accent)} .ins-gl.ins-onacc{color:var(--pri-fg)} .ins-gl.ins-acc{color:var(--accent)} .ins-ring{fill:none;stroke:var(--accent);stroke-width:1.8;transform-box:fill-box;transform-origin:center} .ins-ring2{opacity:0} @media (prefers-reduced-motion:no-preference){ .ins-ring2{animation:insPing 2.2s cubic-bezier(.2,.7,.2,1) infinite} @keyframes insPing{0%{opacity:.9;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.9)}} } /* sección en Pantalla */ .ins-pan-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ins-pan-row p{flex:1 1 240px;margin:0;color:var(--muted);line-height:1.45} .ins-pan-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--cell-bg);color:var(--accent);box-shadow:inset 0 0 0 1px var(--cell-line);flex:none} .ins-pan-ic svg{width:22px;height:22px} @container (max-width:620px){ .ins-steps{grid-template-columns:1fr;gap:10px} .ins-step{flex-direction:row;align-items:center;padding:10px} .ins-step figure{flex:0 0 96px;min-height:0} .ins-art{max-width:96px} .ins-art[viewBox^="0 0 200"]{max-width:120px} .ins-step:has(.ins-art[viewBox^="0 0 200"]) figure{flex-basis:120px} .ins-st{flex-direction:column;gap:6px} .ins-hero{align-items:flex-start;padding:12px} .ins-badge{width:48px;height:48px}.ins-badge>svg{width:28px;height:28px} .ins-badge i{width:24px;height:24px;right:-5px;bottom:-5px}.ins-badge i svg{width:15px;height:15px} .ins-chips li{font-size:13px;padding:5px 10px} } @container (max-width:300px){ .ins-step{flex-direction:column;align-items:stretch} .ins-step figure{flex:none} } /* ---------- dentro de la app instalada ---------- */ /* sin «jalar para recargar» ni rebote: el escritorio no se mueve al arrastrar ventanas (también en el navegador) */ html,body{overscroll-behavior:none} /* márgenes para la muesca en horizontal */ #desk{left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px)} .win.fw .win-title{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))} #bar{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))} html.ins-app body{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent} html.ins-app :is(#bar,#icons,.win-title,#menu){-webkit-user-select:none;user-select:none} /* iPhone/iPad: la barra de estado (texto blanco, «black-translucent») va encima del fondo; una franja oscura la hace legible en todos los temas */ html.ins-ios body::before{content:"";position:fixed;z-index:70;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);pointer-events:none; background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.32))} /* ===== 1.17.66 · Cada app instalada por separado (solo.js): sin escritorio, sin barra, sin botones de la ventana ===== */ html[data-solo]{--bar-h:0px} html[data-solo] #icons,html[data-solo] #bar,html[data-solo] #menu{display:none!important} html[data-solo] #desk{bottom:env(safe-area-inset-bottom,0px)} /* es la app misma: no hay a dónde salir */ html[data-solo] .win.fw .fw-btns,html[data-solo] .win.fw .fw-chip,html[data-solo] .win .win-title .wb{display:none!important} html[data-solo] .win.fw.fw-strip>.win-body{padding-top:0!important} html[data-solo] .win.fw.fw-strip::before{display:none} /* la tarjeta para instalarla (en el navegador, todavía sin instalar) */ .sl-card{position:fixed;z-index:900;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap; width:min(560px,calc(100vw - 24px));box-sizing:border-box;padding:12px 14px;border-radius:18px;background:var(--menu-bg,#1a1424);color:var(--menu-fg,#fff); box-shadow:0 0 0 1px color-mix(in srgb,currentColor 18%,transparent),inset 0 1px 0 rgba(255,255,255,.12),0 18px 40px -12px rgba(0,0,0,.6);animation:sl-in .45s cubic-bezier(.32,.72,0,1) both} .sl-ic{width:52px;height:52px;flex:none;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.4)} .sl-tx{flex:1 1 220px;display:grid;gap:2px;min-width:0} .sl-tx b{font-size:15px} .sl-tx span{font-size:13px;opacity:.8} .sl-bt{display:flex;gap:8px;flex-wrap:wrap} @keyframes sl-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){ .sl-card{animation:none} } /* 1.17.67: con un diálogo abierto (p. ej. Recordatorios de Checkwave), la tarjeta se aparta para no taparlo */ body:has([aria-modal="true"]) .sl-card{display:none} /* 1.17.68: instalar desde Arcadópolis ya instalada en el iPhone (unoInstall) y la salida de emergencia (unoBackBtn) */ .sl-ov{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:16px;background:rgba(8,6,14,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .sl-dlg{width:min(440px,100%);box-sizing:border-box;display:grid;gap:12px;padding:20px;border-radius:18px;background:var(--menu-bg,#1a1424);color:var(--menu-fg,#fff); box-shadow:0 0 0 1px color-mix(in srgb,currentColor 18%,transparent),inset 0 1px 0 rgba(255,255,255,.12),0 24px 60px -16px rgba(0,0,0,.7);animation:sl-in .4s cubic-bezier(.32,.72,0,1) both} .sl-dlg h3{margin:0;font-size:18px} .sl-dlg p{margin:0;font-size:14px;line-height:1.5;opacity:.85} .sl-url{width:100%;box-sizing:border-box;min-height:42px;padding:0 12px;border-radius:10px;font:600 15px/1 ui-monospace,monospace;color:inherit;background:color-mix(in srgb,currentColor 8%,transparent);border:1px solid color-mix(in srgb,currentColor 25%,transparent)} .sl-back{position:fixed;z-index:940;left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));min-height:40px;padding:0 14px;border-radius:20px;border:0; font:600 14px/1 system-ui,sans-serif;color:var(--menu-fg,#fff);background:var(--menu-bg,#1a1424);box-shadow:0 0 0 1px color-mix(in srgb,currentColor 22%,transparent),0 10px 24px -8px rgba(0,0,0,.6);cursor:pointer} body:has([aria-modal="true"]) .sl-back{display:none} /* ===== 1.6: retratos del avatar en pixel art y en 3D (menús, perfil, listas) ===== */ .ag-px,.ag-3d,.ag-2d{position:relative;display:inline-block;flex:none;overflow:hidden;line-height:0;vertical-align:middle} .ag-px>img,.ag-3d>img{display:block;width:100%;height:100%;object-fit:cover} .ag-px>img{image-rendering:pixelated;image-rendering:crisp-edges} .ag-px>.ag-px-b{position:absolute;inset:0;opacity:0;animation:agBlink 4.6s steps(1) infinite;animation-delay:var(--agd,0s)} @keyframes agBlink{0%,95.5%{opacity:0}96%,99%{opacity:1}} @media (prefers-reduced-motion:reduce){.ag-px>.ag-px-b{animation:none}} .ag-2d>svg,.ag-3d>svg{width:100%;height:100%;display:block} .ag-3d.ag-wait>svg{opacity:.75} .ag-3d>img{object-position:50% 35%} /* tamaños donde va cada retrato */ .me .ag-px,.me .ag-3d{width:100%;height:100%} .me .ag-px{background:var(--cell-bg2)} .pf-av .ag-px.av-pf,.pf-av .ag-3d.av-pf{width:120px;height:120px;display:block;border-radius:50%;box-shadow:0 0 0 3px var(--accent);background:var(--cell-bg2)} .ac-card-av .ag-px,.ac-card-av .ag-3d{width:100%;height:100%} .ab-own-row .av-ab.ag-px,.ab-own-row .av-ab.ag-3d,.ab-own-row .av-ab.ag-2d{width:2.8em;height:2.8em;border-radius:50%;background:var(--cell-bg2)} .ag-face>.ag-px,.ag-face>.ag-3d{width:100%;height:100%} @media (max-width:720px){.pf-av .ag-px.av-pf,.pf-av .ag-3d.av-pf{width:84px;height:84px}} /* selector del estilo (app Avatares) */ .apx-style{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px} .apx-style>b{flex-basis:100%;font-size:.92em} .apx-prev{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:6px 0} .apx-prev .ag-px{width:96px;height:96px;border-radius:12px;background:var(--cell-bg2);box-shadow:inset 0 0 0 1px var(--cell-line)} .apx-body{width:48px;height:96px;image-rendering:pixelated;image-rendering:crisp-edges} .apx-style .chip[aria-checked="true"]{background:var(--accent);color:var(--accent-fg,#fff);border-color:var(--accent)} .ave-stage[data-mode="pixel"]{background:var(--pv-bg)} .apx-stage{position:relative;width:100%;height:100%;display:grid;place-items:center} .ave-stage .apx-big{cursor:default;touch-action:auto;width:78%;height:78%;image-rendering:pixelated;image-rendering:crisp-edges} .ave-stage .apx-walk{cursor:default;position:absolute;right:5%;bottom:5%;width:16%;height:32%;image-rendering:pixelated;image-rendering:crisp-edges} .apx-save{position:absolute;left:4%;bottom:4%;font-size:.86em} /* 1.6.3: el archivo suelto (sin la envoltura del sitio) también respeta «hidden» */ [hidden]{display:none!important} /* 1.6.3: el adorno de la barra de título ya no se encima con el botón de pantalla completa (4 botones) */ [data-os="pastel"] .win-title,[data-os="petalos"] .win-title,[data-os="planetario"] .win-title{background-position:right 120px center} /* ===== 1.6 · Tracker Chiptunia ===== */ .tk{--tk-bg:var(--cell-bg);--tk-bg2:var(--cell-bg2);--tk-line:var(--cell-line);--tk-fg:var(--win-fg);--tk-dim:color-mix(in srgb,var(--win-fg) 32%,transparent); --tk-ins:color-mix(in srgb,var(--accent) 80%,var(--win-fg));--tk-vol:color-mix(in srgb,#2fb36b 70%,var(--win-fg));--tk-fx:color-mix(in srgb,#e0457b 72%,var(--win-fg)); --tk-cur:var(--accent);--tk-cur-fg:var(--accent-fg,#fff);--tk-play:color-mix(in srgb,#e0457b 30%,transparent);--tk-crow:color-mix(in srgb,var(--accent) 13%,transparent); --tk-b4:color-mix(in srgb,var(--win-fg) 5%,transparent);--tk-b16:color-mix(in srgb,var(--win-fg) 10%,transparent);--tk-rn:var(--muted,var(--win-fg));--tk-rn4:var(--accent); --tk-scope:var(--accent);--tk-grid:color-mix(in srgb,var(--win-fg) 18%,transparent); display:flex;flex-direction:column;gap:10px;min-height:0;font-variant-numeric:tabular-nums} .tk-top{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center} .tk-brand{display:flex;flex-direction:column;line-height:1.1;margin-right:auto} .tk-brand b{font-family:var(--f-title,var(--f-ui));font-size:1.35em;letter-spacing:.08em;color:var(--accent)} .tk-brand small{font-size:.72em;letter-spacing:.12em;opacity:.75} .tk-name{display:flex;align-items:center;gap:6px;flex:1 1 220px;min-width:0} .tk-name span{font-size:.85em;opacity:.8} .tk-name input{flex:1;min-width:0;min-height:34px;padding:0 10px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.45));font:inherit;font-weight:700} .tk-tr,.tk-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .tk-act{flex-basis:100%} .tk-num{display:inline-flex;align-items:center;gap:5px;font-size:.88em} .tk-num>span{opacity:.8} .tk-num input,.tk-num select{width:4.4em;min-height:32px;padding:0 4px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.4));font:inherit;text-align:center} .tk-num select{width:auto} .tk-oct output{min-width:1.4em;text-align:center;font-weight:700} .tk-oct .iconbtn{width:28px;height:28px;min-height:28px} .tk-chk{display:inline-flex;align-items:center;gap:5px;font-size:.88em} .tk-ex select{min-height:34px;max-width:210px;padding:0 6px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg,var(--win-fg));border-radius:max(0px,calc(var(--radius)*.45));font:inherit} .tk-out:empty{display:none} .tk-mine ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .tk-mine li{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tk-mine li b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-mine li small{opacity:.7} /* canales: osciloscopio y vúmetro */ .tk-chs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .tk-ch,.tk-gc{--tk-kc:color-mix(in srgb,var(--kc) 55%,var(--win-fg))} [data-os="chiptunia"] .tk-ch,[data-os="chiptunia"] .tk-gc{--tk-kc:var(--kc)} .tk-ch{border:1px solid var(--tk-line);background:var(--tk-bg);border-radius:max(0px,calc(var(--radius)*.6));padding:6px 8px;min-width:0} .tk-ch-h{display:flex;align-items:center;gap:6px} .tk-ch-h b{flex:1;min-width:0;font-size:.82em;letter-spacing:.08em;text-transform:uppercase;color:var(--tk-kc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-ms{width:24px;height:22px;padding:0;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg,var(--win-fg));border-radius:4px;font:700 .72em/1 var(--f-mono,monospace);cursor:pointer} .tk-ms[aria-pressed="true"]{background:var(--kc);color:#111;border-color:var(--kc)} .tk-scope{position:relative;display:flex;gap:6px;margin-top:4px} .tk-scope canvas{flex:1;min-width:0;width:100%;height:46px;display:block} .tk-vu{position:relative;width:8px;flex:none;background:var(--tk-bg2);border-radius:2px;overflow:hidden} .tk-vu b{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to top,#3fd07a,#ffd23f 70%,#ff5f5f);transition:height .06s linear} /* cuadrícula */ .tk-main{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:10px;min-height:0} .tk-grid-w{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0} .tk-gh,.tk-r{display:grid;grid-template-columns:3.4ch repeat(4,minmax(var(--tk-cw,17ch),1fr));align-items:center;column-gap:4px} .tk-gh{position:sticky;top:0;z-index:2;min-width:max-content;padding:4px 0;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;background:var(--tk-bg);border-bottom:1px solid var(--tk-line)} .tk-gh .tk-gc{color:var(--tk-kc);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-scroll{position:relative;height:clamp(240px,44vh,560px);overflow:auto;border:1px solid var(--tk-line);background:var(--tk-bg);border-radius:max(0px,calc(var(--radius)*.6));font:13px/1.55 var(--f-mono,ui-monospace,monospace);color:var(--tk-fg);outline:none;padding:0 8px;overscroll-behavior:contain} .tk-scroll:focus-visible{box-shadow:0 0 0 2px var(--focus,var(--accent))} .tk-rows{padding:2px 0 40px} .tk-r{min-width:max-content} .tk-r.b4{background:var(--tk-b4)} .tk-r.b16{background:var(--tk-b16)} .tk-r.cr{background:var(--tk-crow)} .tk-r.pl{background:var(--tk-play);box-shadow:inset 3px 0 0 #e0457b} .tk-rn{color:var(--tk-rn);opacity:.7;font-weight:700} .tk-r.b4 .tk-rn{color:var(--tk-rn4);opacity:1} .tk-c{display:flex;gap:.55ch;justify-content:center;white-space:pre;cursor:text} .tk-c i{font-style:normal;padding:0 1px;border-radius:2px} .tk-c .f0{min-width:3ch;color:var(--tk-fg);font-weight:700} .tk-c .f1{color:var(--tk-ins)} .tk-c .f2{color:var(--tk-vol)} .tk-c .f3,.tk-c .f4{color:var(--tk-fx)} .tk-c .f3{margin-left:.3ch} .tk-c .f4{margin-left:-.55ch} .tk-c i.e{color:var(--tk-dim);font-weight:400} .tk-c i.off{color:var(--tk-fx)} .tk-c.sel{background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:3px} .tk-c i.cur{background:var(--tk-cur);color:var(--tk-cur-fg)!important;outline:1px solid var(--tk-cur)} .tk[data-sys="latin"] .tk-c .f0{min-width:4.2ch} /* botones de escritura (teléfono y ratón) */ .tk-pad{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .tk-pad .btn{min-height:32px} .tk-pad .btn span{font-size:.85em} .tk-hex{display:none;flex-wrap:wrap;gap:3px} .tk-hexmode .tk-hex{display:flex} .tk-hb{width:30px;height:30px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg,var(--win-fg));border-radius:4px;font:700 .86em var(--f-mono,monospace);cursor:pointer;padding:0} .tk-st{margin:0;min-height:1.4em} /* lateral */ .tk-side{display:flex;flex-direction:column;gap:10px;min-width:0} .tk-sec{border:1px solid var(--tk-line);background:var(--tk-bg);border-radius:max(0px,calc(var(--radius)*.6));padding:8px 10px;display:flex;flex-direction:column;gap:7px} .tk-sec h4{margin:0;font-size:.82em;letter-spacing:.08em;text-transform:uppercase;opacity:.85} .tk-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .tk-row .btn{min-height:30px;padding:0 10px;font-size:.86em} .tk-row .iconbtn{width:30px;height:30px;min-height:30px} .tk-ord{display:flex;flex-wrap:wrap;gap:4px;max-height:96px;overflow:auto} .tk-o{min-width:34px;height:28px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg,var(--win-fg));border-radius:4px;font:700 .85em var(--f-mono,monospace);cursor:pointer} .tk-o.tk-on{background:var(--accent);color:var(--accent-fg,#fff);border-color:var(--accent)} .tk-patn output{min-width:2.4ch;text-align:center;font:700 1.05em var(--f-mono,monospace)} .tk-patn .tk-num{margin-left:auto} .tk-ins{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow:auto} .tk-i{display:flex;align-items:center;gap:8px;padding:4px 6px;border:1px solid transparent;background:none;color:inherit;border-radius:4px;text-align:left;font:inherit;font-size:.88em;cursor:pointer} .tk-i b{font-family:var(--f-mono,monospace);color:var(--tk-ins)} .tk-i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tk-i small{font-size:.75em;opacity:.7} .tk-i:hover{background:var(--tk-b16)} .tk-i.tk-on{border-color:var(--accent);background:var(--tk-crow)} .tk-ied{display:flex;flex-direction:column;gap:7px;padding-top:4px;border-top:1px dashed var(--tk-line)} .tk-ied .field{display:flex;flex-direction:column;gap:3px;font-size:.85em} .tk-ied select{min-height:32px;border:1px solid var(--btn-border);background:var(--cell-bg);color:var(--win-fg);border-radius:max(0px,calc(var(--radius)*.4));font:inherit;padding:0 6px} .tk-range{display:flex;align-items:center;gap:8px;font-size:.85em} .tk-range input{flex:1;min-width:0} /* teclado */ .tk-keys-w{overflow-x:auto;overscroll-behavior-x:contain} .tk-keys{position:relative;display:flex;height:78px;min-width:560px;user-select:none;-webkit-user-select:none;touch-action:manipulation} .tk-k{border:1px solid var(--tk-line);cursor:pointer;padding:0} .tk-k.wk{flex:1;background:#f4f2f7;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;color:#555} .tk-k.wk small{font:600 9px var(--f-mono,monospace);padding-bottom:3px} .tk-k.bk{position:absolute;top:0;height:58%;width:calc(100% / var(--nw) * .62);left:calc(100% / var(--nw) * var(--x) - 100% / var(--nw) * .31);background:#1d1b24;border-radius:0 0 3px 3px;z-index:1} .tk-k.tk-on,.tk-k.hit{background:var(--kc,var(--accent));box-shadow:0 0 12px var(--kc,var(--accent))} /* ayuda */ .tk-help summary{cursor:pointer;font-weight:700} .tk-help-b{display:grid;gap:4px;max-width:78ch} .tk-help-b h4{margin:8px 0 2px} .tk-help-b p{margin:0} .tk-help-b ul{margin:0;padding-left:1.2em;display:grid;gap:2px} /* pantallas angostas y pantalla completa en el teléfono */ @media (max-width:820px){ .tk-main{grid-template-columns:minmax(0,1fr)} .tk-brand{display:none} .tk-chs{gap:5px} .tk-scope canvas{height:24px} .tk-scroll{height:clamp(220px,46vh,520px);font-size:11.5px;padding:0 4px} .tk-gh,.tk-r{--tk-cw:12.6ch;column-gap:2px} .tk-c{gap:.4ch} .tk-c .f4{margin-left:-.4ch} .tk-tr{gap:5px} .tk-num input{width:3.4em} .tk-num>span{font-size:.92em} .tk-act .btn span{display:none} .tk-act .btn{padding:0 9px} .tk-act [data-tka="save"] span,.tk-act [data-tka="new"] span,.tk-act [data-tka="share"] span{display:inline} } @media (max-width:560px){ .tk-scroll{font-size:10.6px} .tk-tr .tk-play span{display:none} .tk-tr label[title]:has(#tk-step){display:none} .tk-chk span{font-size:.9em} .tk-ch{padding:3px 4px} .tk-ch-h{gap:3px} .tk-ch-h b{font-size:.7em;letter-spacing:.04em} .tk-ch-h b span{display:none} .tk-ch-h b::before{content:attr(data-s)} .tk-pad .btn span{display:none} .tk-pad .iconbtn{width:34px;height:34px;min-height:34px} .tk-ms{width:19px;height:18px;font-size:.62em} .tk-vu{width:5px} .tk-keys{height:64px} } /* Chiptunia: los colores del fondo (fondo de noche, filas rosas, números amarillos) */ [data-os="chiptunia"] .tk{--tk-bg:#120d26;--tk-bg2:#1d1638;--tk-line:#3b2f6b;--tk-fg:#f3eefe;--tk-dim:#4c4373;--tk-ins:#57c8ff;--tk-vol:#8af07a;--tk-fx:#ff5fa2; --tk-play:rgba(214,58,122,.55);--tk-crow:rgba(87,200,255,.16);--tk-b4:rgba(255,255,255,.03);--tk-b16:rgba(255,210,63,.07);--tk-rn:#8d82c4;--tk-rn4:#ffd23f;--tk-cur:#ffd23f;--tk-cur-fg:#1a1033} [data-os="chiptunia"] .tk-brand b{font-family:"Press Start 2P",var(--f-mono,monospace);font-size:1.1em;color:#ff5fa2;text-shadow:0 0 10px rgba(255,95,162,.6)} [data-os="chiptunia"] .tk-scroll,[data-os="chiptunia"] .tk-ch,[data-os="chiptunia"] .tk-sec{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 0 18px rgba(87,200,255,.08)} [data-os="chiptunia"] .tk-c .f0{text-shadow:0 0 6px rgba(255,255,255,.35)} .tk-files{margin-top:6px} .tk-fopen{cursor:pointer} .tk-mine .ap-import{margin-top:4px} .tk-mine{display:flex;flex-direction:column;gap:6px} .tk-mine h4{margin:0} .tk-mine p{margin:0} /* ---------- 1.6.1 · Plaza Arcadópolis ---------- */ .win[data-id="downtown"] .win-body{padding:0;overflow:hidden;position:relative} .win.fw[data-id="downtown"] .win-body{padding-top:0} .arc.dt{background:#05040a} /* botón «volver a la plaza» en la barra de título del edificio */ .win-title .dt-back{display:inline-flex;align-items:center;gap:6px;flex:none;margin:0 6px 0 auto;padding:3px 10px;min-height:0;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap} .win-title .dt-back svg{width:16px;height:16px;flex:none} @media (max-width:520px){ .win-title .dt-back span{display:none} .win-title .dt-back{padding:3px 7px} } /* ---------- 1.7 · brújula, Bit, vuelo de entrada ---------- */ /* brújula: los lugares que tienes enfrente, con el color de su marca en el piso */ .dt-compass{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:min(560px,calc(100% - 260px));height:34px;pointer-events:none;transition:top .28s ease; -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} .dt-compass::before{content:'';position:absolute;left:0;right:0;bottom:4px;height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,transparent 1px 22px);border-bottom:1px solid rgba(255,255,255,.3)} .dt-cmid{position:absolute;left:50%;bottom:0;width:0;height:0;border:5px solid transparent;border-bottom:7px solid #fff;transform:translateX(-50%);filter:drop-shadow(0 0 3px rgba(255,255,255,.8))} .dt-cm{position:absolute;top:0;display:flex;align-items:center;gap:6px;transform:translateX(-50%);padding:2px 9px 2px 6px;border-radius:999px;background:rgba(8,6,16,.62);color:#fff;font:700 12px/1.25 var(--f-ui);white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.7);opacity:0} .dt-cm.dot{gap:0;padding:4px;font-size:0} .dt-cm::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;background:hsl(var(--h),88%,64%);box-shadow:0 0 8px hsl(var(--h),95%,60%)} /* la ayuda va debajo de la brújula */ .dt .arc-help{top:56px} /* Bit: globo de diálogo sobre su cabeza */ .dt-bit{position:absolute;left:0;top:0;z-index:3;width:max-content;max-width:min(300px,calc(100% - 32px));transform:translate(-50%,calc(-100% - 16px));padding:8px 13px 10px;border-radius:14px;border:1.5px solid rgba(110,220,255,.8);background:rgba(8,14,28,.88);color:#eef8ff;font:500 14px/1.38 var(--f-ui);box-shadow:0 0 20px rgba(60,190,255,.32),0 10px 26px rgba(0,0,0,.45);pointer-events:none} .dt-bit::after{content:'';position:absolute;left:50%;bottom:-8px;width:13px;height:13px;margin-left:-7px;border:inherit;border-top:0;border-left:0;background:inherit;transform:rotate(45deg)} .dt-bit b{display:block;margin-bottom:2px;color:#7fe2ff;font-size:12px;letter-spacing:.06em} .dt-bit span{display:block} .dt-bit small{display:block;margin-top:5px;color:rgba(214,238,255,.62);font-size:11.5px} /* vuelo de entrada: el nombre de la plaza y cómo empezar */ .dt-title{position:absolute;left:0;right:0;top:20%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;color:#fff;text-align:center;pointer-events:none;opacity:0} .dt-title b{font:700 clamp(28px,5.4vw,64px)/1.05 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.14em;text-indent:.14em;text-shadow:0 0 28px rgba(150,130,255,.55),0 2px 10px rgba(0,0,0,.6)} .dt-title span{font:italic 500 clamp(17px,2.2vw,24px)/1.3 'Cormorant Garamond',Georgia,serif;color:#e4dcff;text-shadow:0 1px 8px rgba(0,0,0,.7)} .dt-skip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;padding:8px 16px;border-radius:999px;background:rgba(8,6,16,.6);color:#fff;font:600 14px/1.3 var(--f-ui);text-align:center;pointer-events:none;animation:dtPulse 2.4s ease-in-out infinite} @keyframes dtPulse{50%{opacity:.5}} .arc.no3d .dt-compass,.arc.no3d .dt-bit,.arc.no3d .dt-title,.arc.no3d .dt-skip{display:none} @media (prefers-reduced-motion:reduce){ .dt-skip{animation:none} .dt-compass{transition:none} } /* pantalla completa con la barra de la ventana visible (ratón): todo baja un poco */ @media (hover:hover) and (pointer:fine){ .win.fw .dt-compass{top:50px} .win.fw .dt .arc-help{top:94px} .win.fw.fw-idle .dt-compass{top:12px} .win.fw.fw-idle .dt .arc-help{top:56px} } @media (max-width:720px){ .dt-compass{left:12px;right:118px;width:auto;transform:none} .dt-cm{font-size:11px;padding:2px 7px 2px 5px} } /* 1.9 · cuenta regresiva del cohete a la Luna */ .dt-count{position:absolute;left:0;right:0;top:12%;display:flex;justify-content:center;pointer-events:none;z-index:6} .dt-count b{padding:.12em .55em;border-radius:50%;background:radial-gradient(closest-side,rgba(4,6,18,.62),rgba(4,6,18,.35) 60%,transparent)} .dt-count b{font:700 clamp(64px,13vw,150px)/1 Cinzel,'Cormorant Garamond',Georgia,serif;color:#fff;letter-spacing:.04em;text-shadow:0 0 34px rgba(120,170,255,.75),0 0 8px rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.7)} .dt-count.go b{font-size:clamp(40px,7.5vw,92px);color:#ffe2a8;text-shadow:0 0 34px rgba(255,150,60,.85),0 0 8px rgba(255,240,200,.7),0 4px 14px rgba(0,0,0,.7)} .dt-count.pop b{animation:dtCountPop .9s cubic-bezier(.2,.9,.3,1) both} @keyframes dtCountPop{0%{opacity:0;transform:scale(1.6)}16%{opacity:1;transform:scale(1)}85%{opacity:1}100%{opacity:.25;transform:scale(.94)}} .dt-count.go.pop b{animation-duration:1.4s} @media (prefers-reduced-motion:reduce){.dt-count.pop b{animation:none}} /* 1.13 · ¿a dónde vamos? Los destinos del cohete (la Luna, Marte y, con candado, Andrómeda) */ .dt-dest{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 42%,rgba(12,14,40,.5),rgba(3,3,10,.84))} .dt-dest[hidden]{display:none} .dt-dest-in{width:min(780px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px 20px 18px;border-radius:20px;border:1px solid rgba(160,190,255,.32);background:rgba(8,10,26,.88);box-shadow:0 18px 60px rgba(0,0,0,.6),0 0 44px rgba(110,140,255,.16);color:#eef2ff} .dt-dest h2{margin:0;font:700 clamp(24px,3.6vw,34px)/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.08em;text-indent:.08em;text-align:center;text-wrap:balance;text-shadow:0 0 22px rgba(150,170,255,.45)} .dt-dest-sub{margin:-6px 0 4px;color:#b9c3e8;font:500 14px/1.3 var(--f-ui);text-align:center} .dt-dest-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%} .dt-dest-list li{display:flex;min-width:0} .dt-dest-b{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;margin:0;padding:18px 12px 15px;border-radius:16px;border:1.5px solid hsla(var(--h),80%,70%,.42);background:linear-gradient(180deg,hsla(var(--h),55%,28%,.34),rgba(8,10,26,.55));color:inherit;font:inherit;text-align:center;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .dt-dest-b:hover,.dt-dest-b:focus-visible{border-color:hsl(var(--h),92%,72%);box-shadow:0 0 0 2px hsla(var(--h),90%,70%,.32),0 0 28px hsla(var(--h),90%,60%,.34);transform:translateY(-2px);outline:none} .dt-dest-b.soon{cursor:default;filter:saturate(.75);opacity:.8} .dt-dest-b.soon:hover{transform:none;box-shadow:none;border-color:hsla(var(--h),80%,70%,.42)} .dt-dest-b.soon:focus-visible{transform:none} .dt-dest-t{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0} .dt-dest-t b{font:700 18px/1.2 var(--f-ui);color:#fff} .dt-dest-t small{color:#c5cdee;font:500 13px/1.42 var(--f-ui)} .dt-dest-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:hsl(var(--h),88%,64%);color:#1a0b05;font:700 11.5px/1.3 var(--f-ui);font-style:normal;letter-spacing:.02em} .dt-dest-tag.soon{background:rgba(255,255,255,.12);color:#e6dcff} .dt-dest-tag svg{width:12px;height:12px;flex:none} .dt-dest-x{margin-top:2px} /* los planetas, dibujados con luz desde arriba a la izquierda */ .dt-pl{position:relative;display:block;width:96px;height:96px;border-radius:50%;flex:none} .dt-pl-luna{background:radial-gradient(circle at 60% 56%,rgba(58,56,52,.55) 0 9%,transparent 10.5%),radial-gradient(circle at 37% 66%,rgba(66,64,60,.5) 0 6%,transparent 7.5%),radial-gradient(circle at 67% 29%,rgba(76,74,70,.42) 0 5%,transparent 6.5%),radial-gradient(ellipse 34% 24% at 44% 42%,rgba(90,88,84,.35),transparent 70%),radial-gradient(circle at 34% 30%,#ecebe6 0,#bcb9b2 38%,#73706a 70%,#2a2927 100%);box-shadow:inset -16px -12px 24px rgba(0,0,0,.62),0 0 24px rgba(200,212,255,.24)} .dt-pl-marte{background:radial-gradient(ellipse 27% 9% at 50% 7%,#fff7ef 0 55%,transparent 78%),radial-gradient(ellipse 32% 13% at 56% 50%,rgba(84,26,10,.6),transparent 72%),radial-gradient(ellipse 22% 10% at 38% 68%,rgba(96,34,14,.5),transparent 72%),radial-gradient(ellipse 14% 22% at 72% 70%,rgba(120,44,18,.42),transparent 70%),radial-gradient(circle at 34% 30%,#f6a774 0,#cd5c2c 40%,#8c3517 70%,#3a1408 100%);box-shadow:inset -16px -12px 24px rgba(0,0,0,.6),0 0 26px rgba(255,120,60,.32)} .dt-pl-campos{background:radial-gradient(circle at 70% 26%,#fff6c8 0 7%,rgba(255,230,140,.7) 10%,transparent 22%),radial-gradient(ellipse 70% 34% at 30% 88%,#3f8f2e 0 60%,transparent 62%),radial-gradient(ellipse 80% 38% at 78% 96%,#56a83a 0 60%,transparent 62%),radial-gradient(ellipse 26% 9% at 50% 70%,rgba(240,232,210,.95) 0 50%,transparent 55%),linear-gradient(180deg,#9fd3ff 0%,#f7dfa0 62%,#7cc35a 63%,#3d8a2c 100%);box-shadow:inset -10px -12px 22px rgba(0,40,0,.35),0 0 18px rgba(150,230,110,.35)} /* 1.19.1: los Campos de Arcadia */ .dt-pl-andromeda{border-radius:0;background:radial-gradient(ellipse 48% 15% at 50% 50%,#fffaff 0,#e4c8ff 10%,rgba(170,120,255,.62) 30%,rgba(90,50,190,.3) 56%,transparent 72%),radial-gradient(ellipse 34% 30% at 50% 50%,rgba(140,90,255,.28),transparent 70%);transform:rotate(-22deg)} .dt-pl-andromeda::before,.dt-pl-andromeda::after{content:'';position:absolute;border-radius:50%} .dt-pl-andromeda::before{left:6px;top:14px;width:22px;height:22px;background:radial-gradient(circle at 34% 30%,#9ff2e0,#2aa39a 55%,#0c3d3f);box-shadow:0 0 10px rgba(80,230,200,.5)} .dt-pl-andromeda::after{right:4px;bottom:16px;width:18px;height:18px;background:radial-gradient(circle at 34% 30%,#ffb3d9,#c43d86 55%,#4a0f2f);box-shadow:0 0 10px rgba(255,90,170,.5)} @media (max-width:640px){ .dt-dest-in{padding:18px 14px 14px;gap:12px} .dt-dest-list{grid-template-columns:minmax(0,1fr);gap:10px} .dt-dest-b{flex-direction:row;gap:14px;padding:12px 14px;text-align:left} .dt-dest-t{align-items:flex-start} .dt-pl{width:58px;height:58px} .dt-pl-andromeda::before{left:2px;top:8px;width:14px;height:14px}.dt-pl-andromeda::after{right:2px;bottom:9px;width:12px;height:12px} } @media (prefers-reduced-motion:reduce){.dt-dest-b{transition:none}.dt-dest-b:hover,.dt-dest-b:focus-visible{transform:none}} /* ===== Navegadores dentro de apps (TikTok, Instagram…): aviso de arriba y hoja «Ábrela en tu navegador» ===== */ .iab-bar{position:fixed;z-index:99980;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 16px)); display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border); border-radius:var(--radius);box-shadow:var(--shadow),0 12px 40px rgba(0,0,0,.3);font-size:13px;line-height:1.35} .iab-bar-t{flex:1;min-width:0} .iab-bar-how{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:var(--bw) solid var(--accent);background:var(--accent);color:var(--accent-fg,#fff);font:inherit;font-weight:700;cursor:pointer} .iab-bar-x{flex:none;width:36px;height:36px;border:0;background:transparent;color:inherit;font-size:22px;line-height:1;cursor:pointer;border-radius:50%} .iab-bar-x:hover{background:var(--cell-play,rgba(127,127,127,.15))} .iab-ov{position:fixed;inset:0;z-index:99990;display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); background:rgba(0,0,0,.45)} @media (min-width:600px){.iab-ov{align-items:center}} .iab-sheet{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:20px 20px 16px;background:var(--win-bg);color:var(--win-fg); border:var(--bw) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow),0 30px 80px rgba(0,0,0,.35)} .iab-sheet h2{margin:0 0 8px;font-size:20px;line-height:1.2;text-wrap:balance} .iab-why{margin:0 0 12px;opacity:.85;line-height:1.45} .iab-steps{margin:0 0 16px;padding-left:22px;display:grid;gap:6px;line-height:1.45} .iab-steps b{display:inline-block;padding:0 6px;border-radius:6px;background:var(--cell-play,rgba(127,127,127,.15));letter-spacing:.1em} .iab-row{display:flex;flex-wrap:wrap;gap:8px} .iab-row .btn{flex:1 1 auto;min-height:44px} .iab-url{width:100%;margin-top:10px;padding:8px 10px;font:inherit;border-radius:8px;border:var(--bw) solid var(--win-border);background:transparent;color:inherit} .iab-say{min-height:1.4em;margin:8px 0 4px;font-size:13px;opacity:.85} .iab-say:empty{margin:4px 0 0} .iab-alt{margin-top:4px} .iab-alt .btn{flex:0 1 auto} /* ===== Íconos con color propio (1.6.4): cada app con su color y forma de ícono de app, en cualquier tema ===== */ /* colores de cada app (también los usa la carpeta Estudio) */ [data-open="ocho"],[data-fopen="ocho"]{--ic1:#ff6ec7;--ic2:#7b2ff7} [data-open="downtown"],[data-fopen="downtown"]{--ic1:#4ff0c8;--ic2:#0b8a8f} [data-open="synth"],[data-fopen="synth"]{--ic1:#8b5cf6;--ic2:#2e1a7a} [data-open="sisifo"],[data-fopen="sisifo"]{--ic1:#ffc078;--ic2:#e8590c} [data-open="arcade"],[data-fopen="arcade"]{--ic1:#ff5c8a;--ic2:#b80f4a} [data-open="biblio"],[data-fopen="biblio"]{--ic1:#7ee8a1;--ic2:#13795b} [data-open="museo"],[data-fopen="museo"]{--ic1:#ffe08a;--ic2:#c97d0b} [data-open="trenes"],[data-fopen="trenes"]{--ic1:#74c0fc;--ic2:#1c5fd1} [data-open="domino"],[data-fopen="domino"]{--ic1:#ffffff;--ic2:#d5dbe1;--ig:#1f2933} [data-open="buscaminas"],[data-fopen="buscaminas"]{--ic1:#b6bec7;--ic2:#56606b} [data-open="simon"],[data-fopen="simon"]{--ic1:#ff9e7a;--ic2:#d9381e} [data-open="estampas"],[data-fopen="estampas"]{--ic1:#ffb3d9;--ic2:#e0457b} [data-open="albumes"],[data-fopen="albumes"]{--ic1:#a5b4fc;--ic2:#4338ca} [data-open="trivia"],[data-fopen="trivia"]{--ic1:#fff27a;--ic2:#f5b700;--ig:#4a3200} [data-open="estudio"],[data-fopen="estudio"]{--ic1:#3a3d59;--ic2:#0d0e1a;--ig:#7cf7c3} [data-open="grabadora"],[data-fopen="grabadora"]{--ic1:#ff6b6b;--ic2:#b3121d} [data-open="atelier"],[data-fopen="atelier"]{--ic1:#f2c46b;--ic2:#9a5a26} [data-open="checkwave"],[data-fopen="checkwave"]{--ic1:#5eead4;--ic2:#0f766e} [data-open="tracker"],[data-fopen="tracker"]{--ic1:#7df9ff;--ic2:#4361ee} [data-open="biblioteca"],[data-fopen="biblioteca"]{--ic1:#e0b083;--ic2:#8a5a2b} [data-open="snake"],[data-fopen="snake"]{--ic1:#a9e34b;--ic2:#2b8a3e} [data-open="avatares"],[data-fopen="avatares"]{--ic1:#e599f7;--ic2:#9c36b5} [data-open="perfil"],[data-fopen="perfil"]{--ic1:#4c6ef5;--ic2:#1e2a78;--ig:#ffd43b} [data-open="leeme"],[data-fopen="leeme"]{--ic1:#fff6dc;--ic2:#f0d08e;--ig:#6b4f12} [data-open="imanes"],[data-fopen="imanes"]{--ic1:#ffa8a8;--ic2:#f03e3e} [data-open="decima"],[data-fopen="decima"]{--ic1:#d0bfff;--ic2:#6741d9} [data-open="maquina"],[data-fopen="maquina"]{--ic1:#ffd8a8;--ic2:#a5402d} [data-open="pentagrama"],[data-fopen="pentagrama"]{--ic1:#ffffff;--ic2:#e3e8ef;--ig:#364fc7} [data-open="jam"],[data-fopen="jam"]{--ic1:#66d9e8;--ic2:#0c8599} [data-open="acorde"],[data-fopen="acorde"]{--ic1:#ffd8a8;--ic2:#f76707} [data-open="tarareo"],[data-fopen="tarareo"]{--ic1:#faa2c1;--ic2:#c2255c} [data-open="bestiario"],[data-fopen="bestiario"]{--ic1:#96f2d7;--ic2:#099268} [data-open="reaccion"],[data-fopen="reaccion"]{--ic1:#ffe066;--ic2:#f5b700;--ig:#4a3200} [data-open="midis"],[data-fopen="midis"]{--ic1:#91a7ff;--ic2:#364fc7} [data-open="sonidos"],[data-fopen="sonidos"]{--ic1:#d0bfff;--ic2:#7048e8} [data-open="pantalla"],[data-fopen="pantalla"]{--ic1:#5c636e;--ic2:#1f2329} [data-open="instalar"],[data-fopen="instalar"]{--ic1:#495057;--ic2:#121417} [data-open="temas"]{--ic1:#ff8787;--ic2:#7048e8} [data-rwdesk="acc"]{--ic1:#2a6a70;--ic2:#0f2a2e;--ig:#7cf7c3} [data-rwdesk="ins"]{--ic1:#495057;--ic2:#121417} .icon-kofi{--ic1:#c08a5b;--ic2:#5e3a1a;--ig:#fff3e0} /* el tema de los íconos: Temas › «Íconos de colores» (iconos.js); con ellos, cada app del escritorio lleva su ilustración */ :root[data-icons="propio"] :is(.icon,.fold-app) .tile{position:relative;isolation:isolate;overflow:hidden; background:linear-gradient(155deg,var(--ic1,#9fb3c8),var(--ic2,#3d4f66));color:var(--ig,#fff);border:0;border-radius:28%; box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.2),0 9px 18px -7px var(--ic2,#3d4f66),0 2px 5px rgba(0,0,0,.3); -webkit-backdrop-filter:none;backdrop-filter:none;filter:none;image-rendering:auto;transition:transform .18s ease,box-shadow .18s ease} :root[data-icons="propio"] :is(.icon,.fold-app) .tile::before{content:"";position:absolute;inset:0 0 48% 0;z-index:-1;pointer-events:none; background:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,0));border-radius:inherit} :root[data-icons="propio"] :is(.icon,.fold-app) .tile::after{content:none} :root[data-icons="propio"] :is(.icon,.fold-app) .tile svg{position:relative;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))} :root[data-icons="propio"] :is(.icon,.fold-app) .tile svg [stroke="currentColor"]{stroke:currentColor} :root[data-icons="propio"] :is(.icon,.fold-app) .tile svg [fill="currentColor"]{fill:currentColor} :root[data-icons="propio"] .icon-kofi .tile svg path:last-child{fill:#ff6b6b} :root[data-icons="propio"] .icon:hover .tile,:root[data-icons="propio"] .fold-app:hover .tile{transform:translateY(-2px) scale(1.05);filter:brightness(1.06)} :root[data-icons="propio"] .icon:active .tile{transform:scale(.96)} /* 1.7: sin desenfoque detrás de las etiquetas: con el fondo animado, 26 desenfoques se recalculaban en cada cuadro */ :root[data-icons="propio"] #icons .icon .lbl{color:#fff;background:rgba(12,14,24,.68);text-shadow:0 1px 2px rgba(0,0,0,.55);border-radius:7px; -webkit-backdrop-filter:none;backdrop-filter:none} @media (prefers-reduced-motion:reduce){:root[data-icons="propio"] :is(.icon,.fold-app) .tile{transition:none}:root[data-icons="propio"] .icon:hover .tile,:root[data-icons="propio"] .fold-app:hover .tile{transform:none}} :root[data-icons="propio"] [data-open="temas"] .tile{background:conic-gradient(from 200deg at 50% 55%,#ff6b6b,#ffa94d,#ffd43b,#69db7c,#4dabf7,#9775fa,#f06595,#ff6b6b)} /* ===== 1.6.4: todos los íconos del escritorio del mismo tamaño (antes las apps «grandes» medían 64 px y las demás 50) ===== */ @media (min-width:721px){ #icons .icon .tile,#icons .icon.big .tile{width:58px;height:58px} #icons .icon .tile svg,#icons .icon.big .tile svg{width:30px;height:30px} } @media (min-width:721px) and (max-height:520px){ #icons .icon .tile,#icons .icon.big .tile{width:50px;height:50px} #icons .icon .tile svg,#icons .icon.big .tile svg{width:27px;height:27px} } /* ===== Íconos ilustrados 1.7 (iconos_art.js): la imagen llena la casilla (iconos_img.css, generado); sin brillo de plástico encima ===== */ :root[data-icons="propio"] #icons .icon .tile.ia-tile{padding:0;background:#16181f center/cover no-repeat; box-shadow:0 1px 1.5px rgba(0,0,0,.42),0 9px 18px -7px rgba(0,0,0,.62),0 0 0 .5px rgba(0,0,0,.5)} :root[data-icons="propio"] #icons .icon .tile.ia-tile::before,:root[data-icons="propio"] #icons .icon .tile.ia-tile::after{content:none} :root[data-icons="propio"] #icons .icon:hover .tile.ia-tile{filter:brightness(1.05) saturate(1.04)} /* encima de la imagen: la capa que se mueve (Modo movimiento) y las partes vivas (nivel de Perfil, avatar) */ :root[data-icons="propio"] #icons .tile.ia-tile>svg{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;filter:none;pointer-events:none} /* el avatar de cada quien en la abertura del marco de Avatares (centro 50,47 · radio 31,6 del dibujo) */ :root[data-icons="propio"] #icons .tile.ia-tile .ia-av{position:absolute;left:18.4%;top:15.4%;width:63.2%;height:63.2%;z-index:1;display:grid;place-items:center;border-radius:50%;overflow:hidden;pointer-events:none; box-shadow:inset 0 2px 4px rgba(0,0,0,.55)} :root[data-icons="propio"] #icons .tile.ia-tile .ia-av :is(svg,img,.ag-px,.ag-3d,.ag-2d){display:block;width:100%!important;height:100%!important;max-width:none;filter:none} :root[data-icons="propio"] #icons .tile.ia-tile .ia-av .ag-px{position:relative} :root[data-icons="propio"] #icons .tile.ia-tile .ia-av img{object-fit:cover;image-rendering:auto} :root[data-icons="propio"] #icons .tile.ia-tile .ia-av .ag-px img{image-rendering:pixelated} :root[data-icons="propio"] #icons .ia-av:not(.ia-av-mov) .ag-px-b{animation:none} /* Modo movimiento: el avatar respira, se mece y de vez en cuando da un saltito (el 2D además parpadea y mira) */ html[data-icmov="on"] #icons .ia-av-mov>*{transform-origin:50% 100%;animation:ia-av-idle 6s ease-in-out infinite} @keyframes ia-av-idle{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(-1.5%) rotate(-3deg)}36%{transform:translateY(0) rotate(2.5deg)}52%{transform:translateY(-1%) rotate(0)} 62%{transform:translateY(-9%) scale(1.02)}68%{transform:translateY(0) scale(.99,1.01)}74%{transform:translateY(-3%)}80%{transform:translateY(0)}} html[data-icmov="on"]:is(.win-front,.wall-calm,.fw-on,.pz-all) #icons .ia-av-mov *,html[data-icmov="on"]:is(.win-front,.wall-calm,.fw-on,.pz-all) #icons .ia-av-mov>*{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ html[data-icmov="on"] #icons .ia-av-mov *,html[data-icmov="on"] #icons .ia-av-mov>*{animation:none!important} } .ic-ctl .wp-sw:disabled{opacity:.5;cursor:not-allowed} /* 1.7: insignia «+10» en «Iniciar sesión» (los temas que se ganan con la cuenta) */ #icons .icon-rw{position:relative} #icons .icon-rw .rw-plus{position:absolute;top:0;right:calc(50% - 38px);z-index:3;min-width:22px;padding:2px 6px;border-radius:999px;background:#ffd54a;color:#3a2600;font:800 11px/1.2 var(--f-ui,system-ui);box-shadow:0 2px 6px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.85);pointer-events:none} @media (max-width:720px){ #icons .icon-rw .rw-plus{right:calc(50% - 33px)} } /* ===== Íconos del escritorio 1.7 (GENERADO por tools/iconos/render_iconos.js; no editar a mano · arte 4ef383fdb06f) ===== Cada ícono es una imagen (el arte con sus sombras y luces ya pintado: en la app no corre ningún filtro). Con el «Modo movimiento» (html[data-icmov="on"]) va la imagen sin lo que se mueve y, encima, esa capa animada (iconos_fx.js). */ :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="downtown"]{background-image:url("/thumbs/175c908e445a.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="downtown"]{background-image:url("/thumbs/03604a58a567.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="sisifo"]{background-image:url("/thumbs/c8632b202717.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="sisifo"]{background-image:url("/thumbs/2e1fad9b92db.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="biblio"]{background-image:url("/thumbs/95709c824276.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="biblio"]{background-image:url("/thumbs/499df7304c88.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="museo"]{background-image:url("/thumbs/429504eeb0d5.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="museo"]{background-image:url("/thumbs/daef26777e24.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="trenes"]{background-image:url("/thumbs/a07790ed1577.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="trenes"]{background-image:url("/thumbs/51e77e3263a7.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="domino"]{background-image:url("/thumbs/db72eb47370f.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="domino"]{background-image:url("/thumbs/0f07dbd0cd1a.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="buscaminas"]{background-image:url("/thumbs/51284ed21218.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="buscaminas"]{background-image:url("/thumbs/6648f572695e.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="trivia"]{background-image:url("/thumbs/c48969f46353.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="trivia"]{background-image:url("/thumbs/ca2f205d10c7.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="arcade"]{background-image:url("/thumbs/28c8461bebe0.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="arcade"]{background-image:url("/thumbs/8ca4f9c36a49.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="albumes"]{background-image:url("/thumbs/80bf82b1687b.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="albumes"]{background-image:url("/thumbs/c55014dc9f3a.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="ocho"]{background-image:url("/thumbs/63649579f4b7.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="ocho"]{background-image:url("/thumbs/eb0ca0ae30c1.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="simon"]{background-image:url("/thumbs/1d279e221611.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="simon"]{background-image:url("/thumbs/1d279e221611.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="estampas"]{background-image:url("/thumbs/24f0d50848b6.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="estampas"]{background-image:url("/thumbs/5f7692df9524.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="estudio"]{background-image:url("/thumbs/68044392bff4.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="estudio"]{background-image:url("/thumbs/f6d8bf58c9ac.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="grabadora"]{background-image:url("/thumbs/bb418778d04f.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="grabadora"]{background-image:url("/thumbs/73a2ec719135.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="tracker"]{background-image:url("/thumbs/c3b6db3c1b87.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="tracker"]{background-image:url("/thumbs/b9ac1caa4748.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="biblioteca"]{background-image:url("/thumbs/c37794aa2361.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="biblioteca"]{background-image:url("/thumbs/c37794aa2361.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="temas"]{background-image:url("/thumbs/6e07f8517cb0.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="temas"]{background-image:url("/thumbs/b559cd670c2a.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="leeme"]{background-image:url("/thumbs/12911326ef06.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="leeme"]{background-image:url("/thumbs/1de05fa46fc9.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="acc"]{background-image:url("/thumbs/49b3c4ca5503.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="acc"]{background-image:url("/thumbs/4765f79c3374.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="ins"]{background-image:url("/thumbs/6309148ef045.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="ins"]{background-image:url("/thumbs/61202f1f358a.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="secretos"]{background-image:url("/thumbs/cdd2185122ea.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="secretos"]{background-image:url("/thumbs/4c2e55619f65.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="golf"]{background-image:url("/thumbs/0d28bf9d6329.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="golf"]{background-image:url("/thumbs/c41f08ee687d.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="minigolf"]{background-image:url("/thumbs/85fe1b15083b.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="minigolf"]{background-image:url("/thumbs/af67f2c1ee26.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="blackjack"]{background-image:url("/thumbs/7af2cad1b393.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="blackjack"]{background-image:url("/thumbs/67d99cb05063.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="solitario"]{background-image:url("/thumbs/902dde07ffd7.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="solitario"]{background-image:url("/thumbs/276ab77704a1.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="memorama"]{background-image:url("/thumbs/c071b2c3cf69.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="memorama"]{background-image:url("/thumbs/2951d5a5b558.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="ajedrez"]{background-image:url("/thumbs/f1e8a394c73c.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="ajedrez"]{background-image:url("/thumbs/c93d3505c9c5.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="sudoku"]{background-image:url("/thumbs/a0e3af08be54.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="sudoku"]{background-image:url("/thumbs/51a887e52f80.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="damas"]{background-image:url("/thumbs/4dc685e5905e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="damas"]{background-image:url("/thumbs/293e94ab637b.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="reversi"]{background-image:url("/thumbs/d7ec550525f9.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="reversi"]{background-image:url("/thumbs/24f2d964db85.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="cuatro"]{background-image:url("/thumbs/2fc36162f948.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="cuatro"]{background-image:url("/thumbs/25c6a551b174.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="palabra"]{background-image:url("/thumbs/e2dfad90b293.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="palabra"]{background-image:url("/thumbs/432a08811dfd.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="sopa"]{background-image:url("/thumbs/30835923441c.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="sopa"]{background-image:url("/thumbs/03bbe9a0877b.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="cruci"]{background-image:url("/thumbs/f8cf74f89619.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="cruci"]{background-image:url("/thumbs/f8cf74f89619.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="gato"]{background-image:url("/thumbs/8200c95ae87e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="gato"]{background-image:url("/thumbs/3a142e384ea8.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="mahjong"]{background-image:url("/thumbs/eb9d6e3579e3.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="mahjong"]{background-image:url("/thumbs/3c6cd10207ae.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="poker"]{background-image:url("/thumbs/8d19ffb6b526.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="poker"]{background-image:url("/thumbs/be87010aec46.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="billar"]{background-image:url("/thumbs/8526c42bafb9.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="billar"]{background-image:url("/thumbs/e6f7777b6e04.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="rompe"]{background-image:url("/thumbs/11cb7bcb26f6.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="rompe"]{background-image:url("/thumbs/c0bbd36862eb.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="naval"]{background-image:url("/thumbs/1fd7c3aca708.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="naval"]{background-image:url("/thumbs/150a14d57991.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="parchis"]{background-image:url("/thumbs/7887262bc01e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="parchis"]{background-image:url("/thumbs/2af2d97f5625.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="mancala"]{background-image:url("/thumbs/b691a77fc7dc.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="mancala"]{background-image:url("/thumbs/ec36ab030ec8.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="escaleras"]{background-image:url("/thumbs/724e75aac910.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="escaleras"]{background-image:url("/thumbs/f63061674c97.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="conquian"]{background-image:url("/thumbs/314eb271231f.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="conquian"]{background-image:url("/thumbs/fe924bcd98e9.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="loteria"]{background-image:url("/thumbs/dcd5eab4a7f7.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="loteria"]{background-image:url("/thumbs/94b014b30acc.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="pinball"]{background-image:url("/thumbs/c67bf1dccb76.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="pinball"]{background-image:url("/thumbs/891f0b9839b4.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="rompecabezas"]{background-image:url("/thumbs/72197b0ad580.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="rompecabezas"]{background-image:url("/thumbs/018c4c38e3b2.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="nonogramas"]{background-image:url("/thumbs/de40773d8eb3.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="nonogramas"]{background-image:url("/thumbs/8fd9db584a73.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="octavas"]{background-image:url("/thumbs/102d2fa7b661.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="octavas"]{background-image:url("/thumbs/1fab6d6ca39c.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="organo"]{background-image:url("/thumbs/da7a3fa8f995.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="organo"]{background-image:url("/thumbs/8f48205d8e49.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="bodega"]{background-image:url("/thumbs/7f86ec9c009e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="bodega"]{background-image:url("/thumbs/6be62f8bb6ec.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="gemas"]{background-image:url("/thumbs/83b6a536ebd1.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="gemas"]{background-image:url("/thumbs/2679c9d3b7bb.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="primera"]{background-image:url("/thumbs/49fbe1c30c1f.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="primera"]{background-image:url("/thumbs/d0aad50e68b7.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="quien"]{background-image:url("/thumbs/e877e921f045.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="quien"]{background-image:url("/thumbs/b0f489c00681.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="oido"]{background-image:url("/thumbs/a14b5ffd4480.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="oido"]{background-image:url("/thumbs/354a74341999.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="canta"]{background-image:url("/thumbs/d94d7e4c4bb9.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="canta"]{background-image:url("/thumbs/e197461b4468.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="meteoritos"]{background-image:url("/thumbs/41393d579b02.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="meteoritos"]{background-image:url("/thumbs/3f8325f6e55b.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="defensa"]{background-image:url("/thumbs/1bf1f019fc4e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="defensa"]{background-image:url("/thumbs/f9ed6a65a26d.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="rovermarte"]{background-image:url("/thumbs/0dc409ebfd05.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="rovermarte"]{background-image:url("/thumbs/5086b3a65abc.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="lunadiamante"]{background-image:url("/thumbs/20f33110e71a.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="lunadiamante"]{background-image:url("/thumbs/3cc32780fc82.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="fiesta"]{background-image:url("/thumbs/481796bacbcb.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="fiesta"]{background-image:url("/thumbs/fccfbd2ad343.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="pianofootball"]{background-image:url("/thumbs/ca0b597d552d.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="pianofootball"]{background-image:url("/thumbs/d36307392cca.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="borrador"]{background-image:url("/thumbs/b0399e213100.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="borrador"]{background-image:url("/thumbs/d1fae02e9dfc.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="atelier"]{background-image:url("/thumbs/0d8e14027026.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="atelier"]{background-image:url("/thumbs/0c0fa297d434.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="checkwave"]{background-image:url("/thumbs/59a650e2312f.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="checkwave"]{background-image:url("/thumbs/be229edf2710.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="maquina"]{background-image:url("/thumbs/b177fb94f69d.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="maquina"]{background-image:url("/thumbs/270436326ba3.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="trazo"]{background-image:url("/thumbs/86fd6162126e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="trazo"]{background-image:url("/thumbs/dc9ddb0cbbe8.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="ruisenor"]{background-image:url("/thumbs/4b74b018f2c1.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="ruisenor"]{background-image:url("/thumbs/514ed3cd4c24.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="synth"]{background-image:url("/thumbs/356e5cda2a7e.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="synth"]{background-image:url("/thumbs/f0597f11d592.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="kofi"]{background-image:url("/thumbs/267cde976125.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="kofi"]{background-image:url("/thumbs/6b07e4224251.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="snake"]{background-image:url("/thumbs/5cfe6c3323b8.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="snake"]{background-image:url("/thumbs/d39e4eb09bf2.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="perfil"]{background-image:url("/thumbs/57a4854b67c7.webp")} :root[data-icons="propio"][data-icmov="on"] #icons .tile.ia-tile[data-ia="perfil"]{background-image:url("/thumbs/369c829e6e7f.webp")} :root[data-icons="propio"] :is(#icons .tile.ia-tile,.cj-art)[data-ia="avatares"]{background-image:url("/thumbs/160a9281af6a.webp")} /* movimiento: solo con el modo encendido; se detiene con una ventana al frente, con el fondo en calma, en pantalla completa y con «Pausar todo» */ .ia-fxs [class*="m-"]{transform-box:fill-box;transform-origin:50% 50%}.ia-fxs [class*="m-"][style*="transform-origin"]{transform-box:view-box}@keyframes k-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes k-glow{from{opacity:.35}to{opacity:1}}@keyframes k-tw{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.6)}}@keyframes k-led{0%{opacity:1}50%{opacity:.2}}@keyframes k-scroll{from{transform:translateX(0)}to{transform:translateX(-24px)}}@keyframes k-spin{to{transform:rotate(360deg)}}@keyframes k-sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}@keyframes k-bob{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}@keyframes k-steam{0%{transform:translateY(3px);opacity:0}30%{opacity:1}100%{transform:translateY(-7px);opacity:0}}@keyframes k-knob{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(55deg)}}@keyframes k-tongue{0%,70%,100%{opacity:0;transform:scaleX(.3)}76%,86%{opacity:1;transform:scaleX(1)}}@keyframes k-shine{0%{transform:translateX(-60px)}55%,100%{transform:translateX(70px)}}@keyframes k-flicker{0%,100%{opacity:1}6%{opacity:.5}8%{opacity:1}11%{opacity:.7}13%{opacity:1}}html[data-icmov="on"] .ia-fxs .m-pulse{animation:k-pulse 1.8s var(--d,0s) ease-in-out infinite}html[data-icmov="on"] .ia-fxs .m-glow{animation:k-glow 2.4s var(--d,0s) ease-in-out infinite alternate}html[data-icmov="on"] .ia-fxs .m-tw{animation:k-tw 2.8s var(--d,0s) ease-in-out infinite}html[data-icmov="on"] .ia-fxs .m-led{animation:k-led 1.4s var(--d,0s) steps(1,end) infinite}html[data-icmov="on"] .ia-fxs .m-scroll{animation:k-scroll 2s var(--d,0s) linear infinite}html[data-icmov="on"] .ia-fxs .m-spin{animation:k-spin 9s var(--d,0s) linear infinite}html[data-icmov="on"] .ia-fxs .m-sway{animation:k-sway 3.6s var(--d,0s) ease-in-out infinite alternate}html[data-icmov="on"] .ia-fxs .m-bob{animation:k-bob 2.6s var(--d,0s) ease-in-out infinite alternate}html[data-icmov="on"] .ia-fxs .m-steam{animation:k-steam 2.6s var(--d,0s) ease-out infinite}html[data-icmov="on"] .ia-fxs .m-knob{animation:k-knob 5s var(--d,0s) ease-in-out infinite}html[data-icmov="on"] .ia-fxs .m-tongue{animation:k-tongue 3.2s var(--d,0s) ease-out infinite}html[data-icmov="on"] .ia-fxs .m-shine{animation:k-shine 4s var(--d,0s) ease-in-out infinite}html[data-icmov="on"] .ia-fxs .m-flicker{animation:k-flicker 5s var(--d,0s) steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-downtown .m-jet{animation:k-downtown-jet 2.6s ease-in-out infinite}@keyframes k-downtown-jet{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.84)}}html[data-icmov="on"] .ia-fxs.ia-sisifo .m-push{animation:k-sisifo-push 4.5s ease-in-out infinite}@keyframes k-sisifo-push{0%,100%{transform:translate(0,0)}50%{transform:translate(-2.2px,-1.1px)}}html[data-icmov="on"] .ia-fxs.ia-biblio .m-mote{animation:k-biblio-mote 5s var(--d,0s) ease-in-out infinite}@keyframes k-biblio-mote{0%{transform:translate(0,2px);opacity:0}30%{opacity:1}70%{opacity:.8}100%{transform:translate(-1.6px,-4px);opacity:0}}html[data-icmov="on"] .ia-fxs.ia-museo .m-swirl{animation:k-museo-swirl 5s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-museo .m-swirl2{animation:k-museo-swirl 5s -2.5s ease-in-out infinite}@keyframes k-museo-swirl{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}html[data-icmov="on"] .ia-fxs.ia-domino .m-domino-llega{animation:k-domino-llega 4.6s ease-in-out infinite}@keyframes k-domino-llega{0%{transform:translate(11px,-3px) rotate(-7deg);opacity:0}16%{opacity:1}42%{transform:translate(0,0) rotate(0)}45%{transform:translate(-.5px,0) rotate(0)}48%,88%{transform:translate(0,0) rotate(0);opacity:1}96%{transform:translate(0,0);opacity:0}100%{transform:translate(11px,-3px) rotate(-7deg);opacity:0}}html[data-icmov="on"] .ia-fxs.ia-buscaminas .m-buscaminas-ondea{animation:k-buscaminas-ondea 3s ease-in-out infinite}@keyframes k-buscaminas-ondea{0%,100%{transform:skewY(0deg) scaleX(1)}30%{transform:skewY(5deg) scaleX(.93)}65%{transform:skewY(-3deg) scaleX(1.02)}}html[data-icmov="on"] .ia-fxs.ia-trivia .m-trivia-arco{animation:k-trivia-arco 6s linear infinite}html[data-icmov="on"] .ia-fxs.ia-trivia .m-trivia-punta{animation:k-trivia-punta 6s linear infinite}@keyframes k-trivia-arco{0%{stroke-dashoffset:230.59;opacity:1}92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}@keyframes k-trivia-punta{0%{transform:rotate(-252deg);opacity:1}92%{transform:rotate(79.2deg);opacity:1}100%{transform:rotate(108deg);opacity:0}}html[data-icmov="on"] .ia-fxs.ia-arcade .m-arcade-paso{animation:k-arcade-paso 2.4s steps(1,end) infinite}@keyframes k-arcade-paso{0%{transform:translate(-3px,0)}25%{transform:translate(-1px,0)}50%{transform:translate(1px,0)}75%{transform:translate(3px,0)}}html[data-icmov="on"] .ia-fxs.ia-albumes .m-albumes-brillo{animation:k-albumes-brillo 3.6s ease-in-out infinite}@keyframes k-albumes-brillo{0%{transform:translateX(-18px)}55%,100%{transform:translateX(18px)}}html[data-icmov="on"] .ia-fxs.ia-ocho .m-c0{animation:k-ocho-col 2.4s 0s linear infinite}html[data-icmov="on"] .ia-fxs.ia-ocho .m-c1{animation:k-ocho-col 2.4s -1.8s linear infinite}html[data-icmov="on"] .ia-fxs.ia-ocho .m-c2{animation:k-ocho-col 2.4s -1.2s linear infinite}html[data-icmov="on"] .ia-fxs.ia-ocho .m-c3{animation:k-ocho-col 2.4s -.6s linear infinite}@keyframes k-ocho-col{0%,18%{opacity:1}42%,100%{opacity:0}}html[data-icmov="on"] .ia-fxs.ia-simon .m-echo{animation:k-simon-echo 3s 0s cubic-bezier(.3,.6,.4,1) infinite}@keyframes k-simon-echo{0%{transform:scale(1);opacity:0}12%{opacity:.85}100%{transform:scale(.38);opacity:0}}html[data-icmov="on"] .ia-fxs.ia-estampas .m-stamp{animation:k-estampas-st 3.6s 0s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-estampas .m-shd{animation:k-estampas-sh 3.6s 0s ease-in-out infinite}@keyframes k-estampas-st{0%,30%,100%{transform:translateY(0)}46%,54%{transform:translateY(13px)}}@keyframes k-estampas-sh{0%,30%,100%{transform:translate(0,0) scale(1);opacity:1}46%,54%{transform:translate(-5px,-1.6px) scale(.88);opacity:1}}@keyframes k-estudio-l04{0%{opacity:1}8.33%{opacity:1}16.67%{opacity:1}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:1}50%{opacity:1}58.33%{opacity:1}66.67%{opacity:1}75%{opacity:1}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l05{0%{opacity:1}8.33%{opacity:1}16.67%{opacity:0}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:1}50%{opacity:0}58.33%{opacity:1}66.67%{opacity:1}75%{opacity:0}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l06{0%{opacity:0}8.33%{opacity:1}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:1}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:1}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:1}91.67%{opacity:0}}@keyframes k-estudio-l07{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:1}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l08{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l14{0%{opacity:1}8.33%{opacity:1}16.67%{opacity:1}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:1}50%{opacity:1}58.33%{opacity:1}66.67%{opacity:1}75%{opacity:1}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l15{0%{opacity:1}8.33%{opacity:0}16.67%{opacity:1}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:1}50%{opacity:1}58.33%{opacity:0}66.67%{opacity:1}75%{opacity:1}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l16{0%{opacity:1}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:0}50%{opacity:1}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:1}83.33%{opacity:0}91.67%{opacity:1}}@keyframes k-estudio-l17{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:1}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:1}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l18{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l24{0%{opacity:1}8.33%{opacity:1}16.67%{opacity:1}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:0}50%{opacity:1}58.33%{opacity:1}66.67%{opacity:1}75%{opacity:1}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l25{0%{opacity:0}8.33%{opacity:1}16.67%{opacity:1}25%{opacity:0}33.33%{opacity:1}41.67%{opacity:0}50%{opacity:1}58.33%{opacity:1}66.67%{opacity:0}75%{opacity:1}83.33%{opacity:0}91.67%{opacity:1}}@keyframes k-estudio-l26{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:1}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:1}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l27{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l28{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l34{0%{opacity:1}8.33%{opacity:1}16.67%{opacity:1}25%{opacity:1}33.33%{opacity:1}41.67%{opacity:1}50%{opacity:1}58.33%{opacity:1}66.67%{opacity:1}75%{opacity:1}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l35{0%{opacity:1}8.33%{opacity:1}16.67%{opacity:1}25%{opacity:1}33.33%{opacity:0}41.67%{opacity:1}50%{opacity:1}58.33%{opacity:1}66.67%{opacity:1}75%{opacity:0}83.33%{opacity:1}91.67%{opacity:1}}@keyframes k-estudio-l36{0%{opacity:1}8.33%{opacity:0}16.67%{opacity:1}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:1}50%{opacity:1}58.33%{opacity:0}66.67%{opacity:1}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:1}}@keyframes k-estudio-l37{0%{opacity:1}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:1}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-l38{0%{opacity:0}8.33%{opacity:0}16.67%{opacity:0}25%{opacity:0}33.33%{opacity:0}41.67%{opacity:0}50%{opacity:0}58.33%{opacity:0}66.67%{opacity:0}75%{opacity:0}83.33%{opacity:0}91.67%{opacity:0}}@keyframes k-estudio-f0{0%,100%{transform:translate(0,0)}50%{transform:translate(-1px,4px)}}@keyframes k-estudio-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(-0.3px,-4px)}}@keyframes k-estudio-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(0.3px,4px)}}@keyframes k-estudio-f3{0%,100%{transform:translate(0,0)}50%{transform:translate(1px,-4px)}}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l04{animation:k-estudio-l04 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l05{animation:k-estudio-l05 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l06{animation:k-estudio-l06 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l07{animation:k-estudio-l07 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l08{animation:k-estudio-l08 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l14{animation:k-estudio-l14 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l15{animation:k-estudio-l15 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l16{animation:k-estudio-l16 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l17{animation:k-estudio-l17 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l18{animation:k-estudio-l18 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l24{animation:k-estudio-l24 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l25{animation:k-estudio-l25 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l26{animation:k-estudio-l26 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l27{animation:k-estudio-l27 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l28{animation:k-estudio-l28 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l34{animation:k-estudio-l34 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l35{animation:k-estudio-l35 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l36{animation:k-estudio-l36 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l37{animation:k-estudio-l37 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-l38{animation:k-estudio-l38 2.4s 0s steps(1,end) infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-f0{animation:k-estudio-f0 4s 0s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-f1{animation:k-estudio-f1 4.8s -1.2s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-f2{animation:k-estudio-f2 3.6s -2.1s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-estudio .m-f3{animation:k-estudio-f3 4.4s -0.6s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-grabadora .m-beat{animation:k-grabadora-beat 1.6s 0s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-grabadora .m-dot{animation:k-grabadora-dot 1.6s 0s steps(1,end) infinite}@keyframes k-grabadora-beat{0%,100%{opacity:1}50%{opacity:.1}}@keyframes k-grabadora-dot{0%{opacity:1}50%{opacity:.1}}html[data-icmov="on"] .ia-fxs.ia-tracker .m-rows{animation:k-tracker-rows 4s 0s steps(8,end) infinite}@keyframes k-tracker-rows{from{transform:translateY(0)}to{transform:translateY(-49.6px)}}html[data-icmov="on"] .ia-fxs.ia-biblioteca .m-page{animation:k-biblioteca-page 5.2s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-biblioteca .m-pshade{animation:k-biblioteca-shade 5.2s ease-in-out infinite}html[data-icmov="on"] .ia-fxs.ia-biblioteca .m-pcap{animation:k-biblioteca-cap 5.2s linear infinite}@keyframes k-biblioteca-page{0%{transform:translateY(0) skewY(0) scaleX(1);opacity:0}8%{transform:translateY(0) skewY(0) scaleX(1);opacity:1}20%{transform:translateY(-.8px) skewY(-6deg) scaleX(.75)}36%{transform:translateY(-2.2px) skewY(-2deg) scaleX(.04)}48%{transform:translateY(-.8px) skewY(5deg) scaleX(-.7)}58%{transform:translateY(0) skewY(0) scaleX(-1);opacity:1}72%,100%{transform:translateY(0) skewY(0) scaleX(-1);opacity:0}}@keyframes k-biblioteca-shade{0%,12%{opacity:0}36%{opacity:.9}58%,100%{opacity:0}}@keyframes k-biblioteca-cap{0%,35%{opacity:1}37%,100%{opacity:0}}html[data-icmov="on"] .ia-fxs.ia-temas .m-leaf{animation:k-temas-leaf 6s linear infinite}@keyframes k-temas-leaf{0%{transform:rotate(0);animation-timing-function:ease-out}25%{transform:rotate(-5deg);animation-timing-function:ease-in}50%{transform:rotate(0);animation-timing-function:ease-out}75%{transform:rotate(5deg);animation-timing-function:ease-in}100%{transform:rotate(0)}}html[data-icmov="on"] .ia-fxs.ia-leeme .m-ink{animation:k-leeme-ink 4.6s ease-in-out infinite}@keyframes k-leeme-ink{0%{stroke-dashoffset:100;opacity:1}55%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}html[data-icmov="on"] .ia-fxs.ia-acc .m-breathe{animation:k-acc-breathe 4.8s ease-in-out infinite}@keyframes k-acc-breathe{0%,100%{opacity:1}50%{opacity:.45}}html[data-icmov="on"] .ia-fxs.ia-ins .m-drop{animation:k-ins-drop 3.2s ease-in-out infinite}@keyframes k-ins-drop{0%,35%{transform:translateY(0)}100%{transform:translateY(22px)}}html[data-icmov="on"] .ia-fxs.ia-secretos .m-lglow{animation:k-secretos-glow 3.4s ease-in-out infinite alternate}html[data-icmov="on"] .ia-fxs.ia-secretos .m-mote{animation:k-secretos-mote 3.8s var(--d,0s) ease-out infinite}@keyframes k-secretos-glow{from{opacity:.45}to{opacity:1}}@keyframes k-secretos-mote{0%{transform:translate(0,2px);opacity:0}25%{opacity:1}100%{transform:translate(3px,-9px);opacity:0}}html[data-icmov="on"] .ia-fxs.ia-golf .m-flap{animation:k-golf-flap 2.6s ease-in-out infinite alternate}@keyframes k-golf-flap{0%{transform:skewY(-5deg) scaleX(.94)}50%{transform:skewY(2deg) scaleX(1)}100%{transform:skewY(5deg) scaleX(.9)}}html[data-icmov="on"] .ia-fxs.ia-minigolf .m-pen{animation:k-minigolf-pen 2.2s ease-in-out infinite alternate}@keyframes k-minigolf-pen{0%{transform:skewY(-6deg) scaleX(.9)}100%{transform:skewY(6deg) scaleX(1)}}html[data-icmov="on"] .ia-fxs.ia-sudoku .m-sway{animation:k-sk-write 2.4s ease-in-out infinite}@keyframes k-sk-write{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-3deg)}50%{transform:translate(1px,-1px) rotate(2deg)}75%{transform:translate(-1px,1px) rotate(-1deg)}}html[data-icmov="on"] .ia-fxs.ia-reversi .m-flip{animation:k-rv-flip 3s ease-in-out infinite}@keyframes k-rv-flip{0%,40%{transform:scaleX(1);filter:none}50%{transform:scaleX(.05)}60%,90%{transform:scaleX(1);filter:invert(.92) hue-rotate(180deg)}100%{transform:scaleX(1);filter:none}}html[data-icmov="on"] .ia-fxs.ia-cuatro .m-drop{animation:k-c4-drop 2.4s cubic-bezier(.5,0,1,.6) infinite}@keyframes k-c4-drop{0%,30%{transform:translateY(-6px);opacity:0}40%{opacity:1}70%,100%{transform:translateY(2px);opacity:1}}html[data-icmov="on"] .ia-fxs.ia-palabra .m-type{animation:k-pal-type 2.6s steps(1,end) infinite}@keyframes k-pal-type{0%,35%{opacity:0}36%,100%{opacity:1}}html[data-icmov="on"] .ia-fxs.ia-mahjong .m-mjsel{animation:k-mj-sel 2.4s ease-in-out infinite alternate}@keyframes k-mj-sel{to{transform:translateY(-2px)}}html[data-icmov="on"] .ia-fxs.ia-loteria .m-drop{animation:k-lot-drop 2.8s cubic-bezier(.5,0,1,.6) infinite}@keyframes k-lot-drop{0%,35%{transform:translateY(-10px) scale(1.25);opacity:0}45%{opacity:1}65%,100%{transform:none;opacity:1}}html[data-icmov="on"] .ia-fxs.ia-rompecabezas .m-drop{animation:k-rz-drop 3s ease-in-out infinite}@keyframes k-rz-drop{0%,25%{transform:translateY(-6px)}55%,85%{transform:translateY(8px)}100%{transform:translateY(-6px)}}@keyframes k-borrador-fall{0%{transform:translate(0,-2px);opacity:.2}40%{opacity:1}100%{transform:translate(1.5px,4px);opacity:.15}}html[data-icmov="on"] .ia-fxs.ia-borrador .k-bd-fall{animation:k-borrador-fall 2.4s ease-in infinite}html[data-icmov="on"] .ia-fxs.ia-atelier .m-mix{animation:k-atelier-mix 14s linear infinite}@keyframes k-atelier-mix{to{transform:rotate(360deg)}}html[data-icmov="on"] .ia-fxs.ia-checkwave .m-scroll{animation:k-scroll 3.2s linear infinite} html[data-icmov="on"]:is(.win-front,.wall-calm,.fw-on,.pz-all) .ia-fxs *{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){.ia-fxs *{animation:none!important}} /* ===== 1.17 · La carpeta de Juegos (carpeta.js): como una carpeta del iPhone ===== */ /* el ícono del escritorio: vidrio con nueve miniaturas */ .icon .tile.cj-tile{padding:0;display:block;overflow:hidden} .cj-mini{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7%;width:100%;height:100%;padding:14%;box-sizing:border-box} /* 1.17.45: siempre 3 × 3 (con un solo juego, la miniatura se estiraba a lo alto) */ .cj-mt{display:grid;place-items:center;min-width:0;min-height:0;border-radius:27%;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden} .cj-mt svg{width:78%!important;height:78%!important} :root[data-icons="propio"] .icon .tile.cj-tile{background:linear-gradient(155deg,rgba(255,255,255,.36),rgba(255,255,255,.12)); -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 .6px rgba(255,255,255,.28),0 9px 18px -7px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.3)} :root[data-icons="propio"] .icon .tile.cj-tile::before{content:none} :root[data-icons="propio"] .cj-mt{background:linear-gradient(155deg,var(--ic1,#9fb3c8),var(--ic2,#3d4f66));color:var(--ig,#fff);box-shadow:0 1px 2px rgba(0,0,0,.35)} :root[data-icons="propio"] .cj-mt.cj-art{background-color:#16181f;background-size:cover;background-position:center;background-repeat:no-repeat} :root[data-icons="propio"] .cj-art>svg{display:none} [data-cj="golf"],[data-fopen="golf"]{--ic1:#9be37a;--ic2:#2f7d3a} [data-cj="minigolf"],[data-fopen="minigolf"]{--ic1:#ffd27a;--ic2:#c4572b} [data-cj="blackjack"],[data-fopen="blackjack"],[data-open="blackjack"]{--ic1:#3fb47a;--ic2:#0f4a2c} [data-cj="solitario"],[data-fopen="solitario"],[data-open="solitario"]{--ic1:#4f8fd0;--ic2:#173d6e} [data-cj="memorama"],[data-fopen="memorama"],[data-open="memorama"]{--ic1:#3d6fd6;--ic2:#162f73} [data-cj="ajedrez"],[data-fopen="ajedrez"],[data-open="ajedrez"]{--ic1:#b88a55;--ic2:#3f2614} [data-cj="sudoku"],[data-fopen="sudoku"],[data-open="sudoku"]{--ic1:#3567c4;--ic2:#0b1d45} [data-cj="damas"],[data-fopen="damas"],[data-open="damas"]{--ic1:#2e6b52;--ic2:#07170f} [data-cj="reversi"],[data-fopen="reversi"],[data-open="reversi"]{--ic1:#5a3a22;--ic2:#1a0e06} [data-cj="cuatro"],[data-fopen="cuatro"],[data-open="cuatro"]{--ic1:#2a3f7a;--ic2:#070d22} [data-cj="palabra"],[data-fopen="palabra"],[data-open="palabra"]{--ic1:#2c6656;--ic2:#0d241d} [data-cj="sopa"],[data-fopen="sopa"],[data-open="sopa"]{--ic1:#2a56a8;--ic2:#0b1a3d} [data-cj="cruci"],[data-fopen="cruci"],[data-open="cruci"]{--ic1:#3a3530;--ic2:#14110e} [data-cj="gato"],[data-fopen="gato"],[data-open="gato"]{--ic1:#6e4260;--ic2:#241320} [data-cj="mahjong"],[data-fopen="mahjong"],[data-open="mahjong"]{--ic1:#2f7a5a;--ic2:#0e2d22} [data-cj="poker"],[data-fopen="poker"],[data-open="poker"]{--ic1:#16615f;--ic2:#071f20} [data-cj="billar"],[data-fopen="billar"],[data-open="billar"]{--ic1:#1a7a90;--ic2:#0a2d36} [data-cj="rompe"],[data-fopen="rompe"],[data-open="rompe"]{--ic1:#8a3aa0;--ic2:#2a0d33} [data-cj="naval"],[data-fopen="naval"],[data-open="naval"]{--ic1:#127a8a;--ic2:#062a33} [data-cj="parchis"],[data-fopen="parchis"],[data-open="parchis"]{--ic1:#8a4a24;--ic2:#2e1608} [data-cj="mancala"],[data-fopen="mancala"],[data-open="mancala"]{--ic1:#7a4422;--ic2:#2a1206} [data-cj="escaleras"],[data-fopen="escaleras"],[data-open="escaleras"]{--ic1:#5a3a20;--ic2:#1e1006} [data-cj="conquian"],[data-fopen="conquian"],[data-open="conquian"]{--ic1:#2f6a52;--ic2:#0f2a20} [data-cj="loteria"],[data-fopen="loteria"],[data-open="loteria"]{--ic1:#d81b72;--ic2:#4a0626} [data-cj="pinball"],[data-fopen="pinball"],[data-open="pinball"]{--ic1:#3b2c7c;--ic2:#0d0a24} [data-cj="rompecabezas"],[data-fopen="rompecabezas"],[data-open="rompecabezas"]{--ic1:#35574a;--ic2:#14271e} [data-cj="nonogramas"],[data-fopen="nonogramas"],[data-open="nonogramas"]{--ic1:#2c2150;--ic2:#120d24} [data-cj="octavas"],[data-fopen="octavas"],[data-open="octavas"]{--ic1:#5a3218;--ic2:#1e0e05} [data-cj="organo"],[data-fopen="organo"],[data-open="organo"]{--ic1:#4a2812;--ic2:#170a03} [data-cj="bodega"],[data-fopen="bodega"],[data-open="bodega"]{--ic1:#5c3d28;--ic2:#1e120a} [data-cj="gemas"],[data-fopen="gemas"],[data-open="gemas"]{--ic1:#3a2a66;--ic2:#120b24} [data-cj="primera"],[data-fopen="primera"],[data-open="primera"]{--ic1:#5a3a26;--ic2:#1c110a} [data-cj="quien"],[data-fopen="quien"],[data-open="quien"]{--ic1:#5b2333;--ic2:#22090f} [data-cj="oido"],[data-fopen="oido"],[data-open="oido"]{--ic1:#4a3412;--ic2:#160d04} [data-cj="canta"],[data-fopen="canta"],[data-open="canta"]{--ic1:#24346a;--ic2:#080c1e} [data-cj="meteoritos"],[data-fopen="meteoritos"],[data-open="meteoritos"]{--ic1:#1d2257;--ic2:#04050c} [data-cj="defensa"],[data-fopen="defensa"],[data-open="defensa"]{--ic1:#18484a;--ic2:#071a1d} [data-cj="rovermarte"],[data-fopen="rovermarte"],[data-open="rovermarte"]{--ic1:#d9965e;--ic2:#8a4a2c} [data-cj="lunadiamante"],[data-fopen="lunadiamante"],[data-open="lunadiamante"]{--ic1:#3a2f6e;--ic2:#120d22} [data-cj="fiesta"],[data-fopen="fiesta"],[data-open="fiesta"]{--ic1:#7a2ec8;--ic2:#2a0c52} [data-cj="pianofootball"],[data-fopen="pianofootball"],[data-open="pianofootball"]{--ic1:#1f6d3c;--ic2:#08210f} [data-cj="borrador"],[data-fopen="borrador"],[data-open="borrador"]{--ic1:#ff8fab;--ic2:#2b3c8f} /* la carpeta abierta: el escritorio se desenfoca y la carpeta crece desde el ícono */ .cj{position:fixed;inset:0;z-index:56} .cj-bg{position:absolute;inset:0;background:rgba(6,8,16,.42);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);opacity:0;transition:opacity .28s ease} .cj-lite .cj-bg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,8,16,.74)} .cj-on .cj-bg{opacity:1} .cj-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px; padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(var(--bar-h,48px) + env(safe-area-inset-bottom,0px) + 28px);box-sizing:border-box} .cj-t{margin:0;color:#fff;font:700 clamp(24px,4.4vw,32px)/1.1 var(--f-ui,system-ui,-apple-system,"Segoe UI",sans-serif);letter-spacing:-.01em;text-align:center; text-shadow:0 2px 14px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);transition:opacity .24s ease .06s,transform .32s cubic-bezier(.2,.85,.25,1) .04s} .cj-on .cj-t{opacity:1;transform:none} .cj-stage{position:relative;max-width:100%} .cj-panel{position:relative;width:calc(var(--cell,102px) * var(--cols,3) + 36px);max-width:calc(100vw - 32px);overflow:hidden;border-radius:38px; background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 44px 90px -34px rgba(0,0,0,.75),0 12px 30px -12px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5); opacity:0;transform-origin:50% 50%;touch-action:pan-y; transition:transform .36s cubic-bezier(.2,.85,.25,1),border-radius .36s cubic-bezier(.2,.85,.25,1),opacity .16s ease} .cj-lite .cj-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(40,44,60,.82)} .cj-on .cj-panel{opacity:1} .cj:not(.cj-on) .cj-panel{transition:transform .3s cubic-bezier(.4,0,.6,1),border-radius .3s cubic-bezier(.4,0,.6,1),opacity .14s ease .16s} .cj-track{display:flex;transition:transform .4s cubic-bezier(.22,.8,.24,1);will-change:transform} .cj-drag .cj-track{transition:none} .cj-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(var(--cols,3),var(--cell,102px));grid-template-rows:repeat(var(--rows,3),auto);justify-content:center;align-content:start;row-gap:10px;padding:20px 18px 18px;box-sizing:border-box} .cj .cj-app{width:var(--cell);min-height:100px;padding:6px 2px 4px;gap:7px;border-radius:16px;justify-content:flex-start;-webkit-tap-highlight-color:transparent} .cj .cj-app .tile{width:min(64px,calc(var(--cell) - 22px));height:min(64px,calc(var(--cell) - 22px));transition:transform .14s ease} .cj .cj-app .tile svg{width:52%;height:52%} .cj .cj-app .lbl{color:#fff;background:none;padding:0 2px;font-size:12.5px;line-height:1.22;text-shadow:0 1px 3px rgba(0,0,0,.65);max-width:100%; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .cj .cj-app:hover .tile{transform:translateY(-2px) scale(1.04)} .cj .cj-app:active .tile{transform:scale(.93)} .cj .cj-app:focus-visible{outline:2px solid #fff;outline-offset:1px} :root[data-icons="propio"] .cj .cj-app .tile.cj-art{padding:0;background-color:#16181f;background-size:cover;background-position:center;background-repeat:no-repeat; box-shadow:0 1px 1.5px rgba(0,0,0,.42),0 9px 18px -7px rgba(0,0,0,.62),0 0 0 .5px rgba(0,0,0,.5)} :root[data-icons="propio"] .cj .cj-app .tile.cj-art::before,:root[data-icons="propio"] .cj .cj-app .tile.cj-art::after{content:none} .cj-dots{display:flex;gap:12px;justify-content:center;opacity:0;transition:opacity .24s ease .1s} .cj-on .cj-dots{opacity:1} .cj-dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;transition:background .2s ease,transform .2s ease} .cj-dot::after{content:"";position:absolute;inset:-9px} .cj-dot[aria-current="true"]{background:#fff;transform:scale(1.15)} .cj-dot:focus-visible{outline:2px solid #fff;outline-offset:3px} .cj-arrow{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%; background:rgba(255,255,255,.14);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s ease,background .15s ease} .cj-arrow svg{width:22px;height:22px} .cj-prev{left:-60px}.cj-next{right:-60px} .cj-on .cj-arrow:not(:disabled){opacity:.9} .cj-arrow:hover:not(:disabled){background:rgba(255,255,255,.26)} .cj-arrow:disabled{cursor:default;opacity:0!important;pointer-events:none} .cj-arrow:focus-visible,.cj-x:focus-visible{outline:2px solid #fff;outline-offset:2px} .cj-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%; background:rgba(255,255,255,.12);color:#fff;cursor:pointer;opacity:0;transition:opacity .2s ease} .cj-x svg{width:18px;height:18px} .cj-on .cj-x{opacity:.85} @media (hover:none),(max-width:600px){ .cj-arrow{display:none} } @media (max-height:560px){ .cj-box{gap:12px;padding-top:calc(env(safe-area-inset-top,0px) + 40px)} .cj-page{row-gap:4px;padding:14px 18px 12px} .cj .cj-app{min-height:92px} } @media (prefers-reduced-motion:reduce){ .cj-track{transition:none} .cj-t{transform:none} .cj-panel{transition:opacity .15s linear} .cj .cj-app .tile{transition:none} } /* 1.17.44 · la carpeta de Juegos Premium: el mismo vidrio con un baño de oro (ícono, panel y título) */ :root[data-icons="propio"] .icon .tile.cj-ptile{background:linear-gradient(155deg,rgba(255,226,140,.62),rgba(214,150,40,.28) 55%,rgba(120,70,10,.22)); box-shadow:inset 0 1px 0 rgba(255,246,210,.75),inset 0 0 0 .8px rgba(255,214,120,.65),0 9px 18px -7px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.3)} .icon .tile.cj-ptile .cj-mini{grid-template-columns:repeat(3,1fr)} /* 1.17.45 · cerrada con llave (por ahora se abre con contraseña): en el ícono, un candado; en la carpeta, el campo de la contraseña */ .icon .tile.cj-ptile .cj-mini.cj-mlock{grid-template-columns:1fr;grid-template-rows:1fr;place-items:center;padding:20%;color:#fff6dc} .cj-mlock svg{width:100%!important;height:100%!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))} .cj-lock{display:grid;justify-items:center;align-content:center;gap:14px;min-height:calc(var(--cell) * 3 + 38px);padding:24px 22px 20px;box-sizing:border-box;color:#fff;text-align:center} .cj-lock-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#fff6dc; background:linear-gradient(155deg,rgba(255,226,140,.62),rgba(214,150,40,.28) 55%,rgba(120,70,10,.22)); box-shadow:inset 0 1px 0 rgba(255,246,210,.75),inset 0 0 0 .8px rgba(255,214,120,.65),0 9px 18px -7px rgba(0,0,0,.55)} .cj-lock-ic svg{width:32px;height:32px} .cj-lock p{margin:0;max-width:26ch;font:500 15px/1.4 var(--f-ui,system-ui,-apple-system,"Segoe UI",sans-serif);text-shadow:0 1px 3px rgba(0,0,0,.6);text-wrap:balance} .cj-lock-f{display:flex;gap:8px;width:100%;max-width:290px} .cj-lock-f input{flex:1 1 auto;min-width:0;height:44px;padding:0 14px;box-sizing:border-box;border:1px solid rgba(255,230,170,.55);border-radius:14px;background:rgba(12,9,4,.42);color:#fff; font:500 16px/1 var(--f-ui,system-ui,-apple-system,"Segoe UI",sans-serif);outline:none} .cj-lock-f input::placeholder{color:rgba(255,240,215,.62)} .cj-lock-f input:focus-visible{border-color:#ffe08a;box-shadow:0 0 0 3px rgba(255,214,120,.38)} .cj-lock-f button{flex:0 0 auto;height:44px;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffe39a,#e0a43a);color:#3a2400;cursor:pointer; font:700 15px/1 var(--f-ui,system-ui,-apple-system,"Segoe UI",sans-serif);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 12px -4px rgba(0,0,0,.5)} .cj-lock-f button:hover{filter:brightness(1.06)} .cj-lock-f button:active{transform:translateY(1px)} .cj-lock-f button:focus-visible{outline:2px solid #fff;outline-offset:2px} .cj-lock .cj-lock-err{color:#ffd2cf;font-weight:600} .cj-lock.cj-shake{animation:cj-shake .42s ease} @keyframes cj-shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}} @media (prefers-reduced-motion:reduce){ .cj-lock.cj-shake{animation:none} } .cj.cj-prem .cj-panel{background:linear-gradient(160deg,rgba(255,224,140,.26),rgba(255,255,255,.1) 45%,rgba(200,140,40,.16));border-color:rgba(255,214,120,.5); box-shadow:inset 0 1px 0 rgba(255,240,200,.45),0 44px 90px -34px rgba(0,0,0,.75),0 12px 30px -12px rgba(0,0,0,.45),0 0 0 1px rgba(255,200,90,.18)} .cj-lite.cj-prem .cj-panel{background:rgba(70,56,30,.86)} .cj.cj-prem .cj-t{color:#ffe7a6;text-shadow:0 2px 14px rgba(0,0,0,.55),0 0 22px rgba(255,190,70,.35)} [data-cj="trazo"],[data-fopen="trazo"],[data-open="trazo"]{--ic1:#1d5a5e;--ic2:#050f1e} /* 1.17.68 */ [data-cj="ruisenor"],[data-fopen="ruisenor"],[data-open="ruisenor"]{--ic1:#7a1a19;--ic2:#1c0607} /* 1.17.69 */ /* ================= 1.7 · arreglos de la revisión de calidad (qa17.js) ================= */ /* Menú Inicio en computadora: la lista de apps se desplaza dentro y la columna del sistema (con Reiniciar y Apagar) siempre se ve */ @media (min-width:721px) and (min-height:600px){ .menu{overflow:hidden} .menu-cols{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)} .menu-apps,.menu-sys{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .menu-apps{padding-right:2px} } /* «hay más abajo»: un desvanecido sutil al pie de las listas que se desplazan */ .q7-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent)} @keyframes q7In{from{opacity:0}to{opacity:1}} /* Foco visible en el escritorio y la barra con cualquier tema (en Steampunk el anillo rojo oscuro no se veía) */ :is(#icons .icon,#bar button,#bar a,#start):focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(0,0,0,.7)} /* Ctrl + A ya no selecciona el escritorio, la barra ni los títulos de las ventanas */ #desk,#bar,#power,.menu,.win-title,.wl,.tp-bar{-webkit-user-select:none;user-select:none} /* 1.17.70: ya no se vuelve a permitir seleccionar en todas las ventanas (eso le ganaba a html{user-select:none} de pulsar.css y en el iPhone mantener pulsado un juego sacaba «Copiar / Traducir» y cortaba los trazos). Solo en las apps de texto: pulsar.css */ /* Pinacópolis: explicación cuando falta la imagen */ .q7-na{display:block;margin-top:4px;font-size:12px;font-weight:400;opacity:.85;line-height:1.35} /* Ocho Notas: tercera meta y estrellas (ocho17.js) */ .o7-l{font-weight:700} .o7-stars{display:flex;gap:4px;align-items:center;font-size:22px;line-height:1;color:color-mix(in srgb,var(--win-fg) 22%,transparent);margin-top:2px} .o7-stars i{font-style:normal;transition:color .25s,transform .25s} .o7-stars i.on{color:#f5b700;text-shadow:0 1px 0 rgba(0,0,0,.25)} .o7-stars.all i.on{animation:o7Pop .5s ease both} .o7-stars.all i:nth-child(2){animation-delay:.08s} .o7-stars.all i:nth-child(3){animation-delay:.16s} @keyframes o7Pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}} .o7-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20} .win[data-id="ocho"] .win-body{position:relative} @media (prefers-reduced-motion:reduce){ .o7-stars.all i.on{animation:none} } /* Teléfono acostado (pantallas bajas): Eco melódico y Buscaminas caben */ @media (max-height:520px) and (orientation:landscape){ .sm-game{min-height:0} .sm-hud{grid-template-columns:auto auto minmax(0,1fr) auto auto auto;gap:6px 10px} .sm-hud>*{grid-row:auto!important;grid-column:auto!important} .sm-orb{width:38px;height:38px} .sm-tt{font-size:15px} .sm-st{font-size:12px;padding:4px 9px} .sm-ribbon{flex:0 0 48px!important;min-height:48px!important;max-height:48px!important;height:48px!important} .sm-stage{flex:0 0 auto} .sm-piano{height:clamp(104px,calc(100dvh + var(--fw-gain,0px) - 228px),210px)!important;padding:6px 4px 8px!important} .sm-pads{min-height:0!important} .bm-main{gap:6px} .bm-top{gap:6px} .bm-top .btn,.bm-top .seg button{min-height:30px;padding-top:0;padding-bottom:0;font-size:13px} .bm-friend,.bm-dayi{display:none} .bm-hud{gap:6px} .bm-ctr{height:32px;min-width:64px} .bm-face{width:36px;height:36px} } /* Carga de los datos de una app al abrirla (wp_engine.js › lzNeed) */ .lz-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;height:100%;box-sizing:border-box;padding:24px;text-align:center;color:var(--muted)} .lz-spin{width:28px;height:28px;border-radius:50%;border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:lzSpin .8s linear infinite} @keyframes lzSpin{to{transform:rotate(360deg)}} .lz-fail p{max-width:44ch;margin:0;color:var(--win-fg);line-height:1.45} @media (prefers-reduced-motion:reduce){ .lz-spin{animation-duration:2.4s} } /* 1.7 (pulido): título de la ventana con anillo de foco solo al navegar con teclado (qa17.js › data-kbd) */ html:not([data-kbd]) .win-title h2:focus-visible{outline:none} /* 1.7 (pulido): en pantallas táctiles no se muestran las letras del teclado de la computadora (piano de Pentagrama, Sísifo) */ @media (hover:none) and (pointer:coarse){ .pno .pk kbd,.sf-chips kbd,.pg-kh{display:none} } /* 1.7 (pulido): Jam infinita con el dedo: casillas de 30 px (antes 16 × 22) y la columna de los grados fija al desplazar */ @media (pointer:coarse){ .jm-grid{min-width:calc(52px + 32 * 32px)} .jm-row{grid-template-columns:52px repeat(32,minmax(30px,1fr))} .jm-cell{height:32px} .jm-lab,.jm-chrow>:first-child{position:sticky;left:0;z-index:1;background:var(--win-bg)} } /* 1.7 (pulido): botones de la barra de título más fáciles de tocar (la zona sensible crece; el dibujo no cambia) */ @media (pointer:coarse){ .win-title .wb{position:relative} .win-title .wb::after{content:'';position:absolute;inset:-9px -3px} } /* 1.7 (pulido): los títulos largos de Sísifo se leen completos (antes «En la gruta del rey de la mont…») */ .sf-it-t{white-space:normal;text-overflow:clip;overflow-wrap:break-word;line-height:1.25} /* ---------- 1.17.61 · Ocho Notas en el teléfono acostado (pendiente de la 1.17.41) ---------- Antes había que bajar el doble de la pantalla. Con 520 px de alto o menos, Ocho Notas se queda del alto libre (--fw-h): arriba a la izquierda el modo y las notas del día (más chicos) y a la derecha las pestañas; abajo, la cuadrícula a la izquierda y, en una columna a la derecha, Tocar, tempo y herramientas, las metas, el aviso del ejemplo y el resultado para compartir. Si esa columna no cabe, se desplaza el panel y la cuadrícula se queda fija (sticky). Las reglas de «Pantallas angostas» de base.html van después de las piezas: por eso estos selectores empiezan con .win-body>.on (pesan más). Vertical, sin cambios. */ @media (max-height:520px) and (min-width:560px){ .win-body>.on{--on-rc:clamp(210px,36%,300px);height:var(--fw-h,calc(100dvh - 56px));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) var(--on-rc);grid-template-rows:auto minmax(0,1fr);gap:6px 12px} .win-body>.on>.on-head{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px} .win-body>.on .on-meta{order:3;flex:1 1 100%;gap:10px;font-size:12px;align-items:center} .win-body>.on .on-meta .on-nnq{min-height:26px} .win-body>.on .on-mode{font-size:19px} .win-body>.on .on-chips{flex:1 1 auto;justify-content:flex-start;gap:4px} .win-body>.on .on-chips .chip{min-width:34px;height:26px;padding:0 6px;font-size:12.5px} .win-body>.on>.tabs{grid-column:2;grid-row:1;align-self:end;gap:0} .win-body>.on .tab{flex:1 1 auto;padding:6px 6px;font-size:13px} .win-body>.on>.panel{grid-column:1/-1;grid-row:2;min-height:0;overflow-y:auto;overscroll-behavior:contain} .win-body>.on>#pn-compose:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) var(--on-rc);column-gap:12px;row-gap:8px;align-content:start;align-items:start} .win-body>.on .seq-wrap{grid-column:1;grid-row:1/span 4;position:sticky;top:0;padding:0 2px 2px 0;overflow-x:auto} .win-body>.on .seq-wrap .lab{font-size:12px;padding:0 4px} .win-body>.on #seq:not([data-vert="1"]){grid-template-columns:auto repeat(16,minmax(0,1fr))!important} .win-body>.on .cell{min-height:0} .win-body>.on .on-bar{grid-column:2;grid-row:1;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px} .win-body>.on .transport{position:static;margin:0;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;flex-wrap:wrap;gap:6px 12px} .win-body>.on .transport .btn{min-height:34px} .win-body>.on .tempo{flex:1 1 100%;min-width:0;font-size:13px} .win-body>.on .tempo input{flex:1 1 auto;min-width:60px;width:auto} .win-body>.on .tools{gap:6px} .win-body>.on .tools .btn{min-height:32px;padding-left:10px;padding-right:10px;font-size:13px} .win-body>.on .tools .mtx-tb{flex:1 1 100%;min-width:0} .win-body>.on .on-goals{grid-column:2;grid-row:2;flex-direction:column;gap:5px;font-size:12.5px} .win-body>.on .goal{gap:3px 6px;align-items:flex-start;flex-wrap:wrap} .win-body>.on .goal .mk{width:18px;height:18px;flex:none} .win-body>.on .o7-stars{font-size:18px} .win-body>.on .on-example{grid-column:2;grid-row:3;padding:6px 8px;font-size:12.5px} .win-body>.on #pn-compose>.box{grid-column:2;grid-row:4;gap:6px;padding:8px} .win-body>.on .share-text{font-size:11.5px;line-height:1.4} .win-body>.on #pn-compose>.box .btn{min-height:32px;font-size:13px} } @media (max-height:520px) and (min-width:560px) and (max-width:760px){ .win-body>.on{gap:4px 10px} .win-body>.on>#pn-compose:not([hidden]){column-gap:10px} .win-body>.on .on-mode{font-size:17px} .win-body>.on .on-chips .chip{min-width:30px;padding:0 4px;font-size:12px} .win-body>.on .tab{padding:6px 4px;font-size:12.5px} .win-body>.on .seq{gap:2px} .win-body>.on .seq-wrap .lab{padding:0 3px 0 0} } /* ================= Bienvenida 1.7: «primero jugar» (parts/bienvenida.js) ================= Una hoja abajo del escritorio, sin velo: el escritorio se ve cambiar de mundo con cada tecla. Usa los colores del tema activo (y cada tecla, los de su mundo: data-os). Cerrada, queda una píldora sobre la barra de tareas. */ .wl{position:absolute;z-index:2;left:50%;bottom:16px;width:min(620px,calc(100% - 32px));max-height:calc(100% - 28px);transform:translateX(-50%);display:flex;flex-direction:column} .wl.out{animation:wlOut .26s ease forwards} .wl.front{z-index:3} .wl-card{position:relative;display:flex;flex-direction:column;min-height:0;max-height:100%;box-sizing:border-box;background:var(--win-bg);color:var(--win-fg); background:linear-gradient(var(--win-bg),var(--win-bg)),color-mix(in srgb,var(--bg,#16161c) 88%,transparent); border:var(--bw,1px) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow),0 22px 60px rgba(0,0,0,.38);overflow:hidden;animation:wlUp .45s cubic-bezier(.2,.8,.2,1) both} .wl-card::before{content:"";position:absolute;inset:0 0 auto;height:130px;pointer-events:none; background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%)} .wl-grab{display:none} @keyframes wlUp{from{opacity:0;transform:translateY(22px)}} @keyframes wlOut{to{opacity:0;transform:translate(-50%,14px)}} .wl-top{position:relative;display:flex;align-items:center;gap:10px;padding:10px 10px 0 18px;flex:none} .wl-badge{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--f-ui);letter-spacing:.03em;color:var(--accent)} .wl-badge svg{width:18px;height:18px} .wl-mid{flex:1;min-width:0} .wl-prog{display:flex;align-items:center;justify-content:center;gap:5px} .wl-prog i{width:22px;height:5px;border-radius:9px;background:var(--cell-line);transition:background .3s} .wl-prog i.on{background:var(--accent)} .wl-prog b{margin-left:4px;font:700 12px/1 var(--f-ui);color:var(--muted);font-variant-numeric:tabular-nums} .wl-tx{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:700 13px/1 var(--f-ui);cursor:pointer} .wl-tx svg{width:16px;height:16px} .wl-tx:hover{color:var(--win-fg);background:var(--cell-bg)} .wl-tx:focus-visible,.wl-key:focus-visible,.wl-tile:focus-visible,.wl-gb:focus-visible,.wl-pill:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px} .wl-body{position:relative;display:flex;flex-direction:column;gap:12px;min-height:0;padding:4px 20px 18px;overflow-y:auto;overscroll-behavior:contain} .wl-body h2{margin:0;font-family:var(--f-title);font-size:clamp(24px,5.6vw,31px);line-height:1.08;text-wrap:balance;outline:none} .wl-body h2:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:4px;border-radius:4px} .wl-lead{margin:-4px 0 0;max-width:48ch;color:var(--muted);font-size:15px;line-height:1.45;text-wrap:pretty} .wl-fine{margin:0;color:var(--muted);font-size:12.5px;line-height:1.45} .wl-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .wl-warn{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:calc(var(--radius) * .8);background:color-mix(in srgb,var(--accent) 12%,var(--win-bg));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);font-size:13.5px;line-height:1.45} .wl-warn svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:1px} /* ---- 1 · los mundos, como teclas ---- */ .wl-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:2px} .wl-key{position:relative;display:block;aspect-ratio:4/3;min-width:0;padding:0;border:0;border-radius:max(8px,calc(var(--radius) * .8));overflow:hidden;cursor:pointer; background:var(--bg,#222) var(--wall-thumb,none) center/cover no-repeat;color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 5px 14px rgba(0,0,0,.3); transition:transform .14s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .wl-kart{position:absolute;inset:0;background:var(--wall-thumb,none) center/cover no-repeat} .wl-kn>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere} .wl-kn{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 6px;font:600 12px/1.15 var(--f-title,var(--f-ui));text-align:left; text-shadow:0 1px 2px rgba(0,0,0,.85);background:linear-gradient(transparent,rgba(0,0,0,.66))} .wl-key:hover{transform:translateY(-2px)} .wl-key:active{transform:scale(.95)} .wl-key[aria-pressed="true"]{box-shadow:0 0 0 3px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent),0 8px 22px rgba(0,0,0,.36)} /* el compás que late en la tecla tocada: tres barritas que suben y bajan una vez */ .wl-kq{position:absolute;top:6px;right:6px;display:none;width:18px;height:14px; background:linear-gradient(currentColor,currentColor) 0 100%/4px 40% no-repeat,linear-gradient(currentColor,currentColor) 7px 100%/4px 70% no-repeat,linear-gradient(currentColor,currentColor) 14px 100%/4px 50% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7))} .wl-key[aria-pressed="true"] .wl-kq{display:block} .wl-key.hit{animation:wlHit .42s cubic-bezier(.3,1.5,.5,1)} .wl-key.hit .wl-kq{animation:wlEq .55s ease} @keyframes wlHit{0%{transform:scale(.93)}60%{transform:scale(1.04)}100%{transform:none}} @keyframes wlEq{25%{background-size:4px 90%,4px 30%,4px 100%}50%{background-size:4px 30%,4px 100%,4px 40%}75%{background-size:4px 80%,4px 50%,4px 90%}} .wl-cap{margin:0;display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:14px;line-height:1.3} .wl-capw{display:inline-flex;align-items:center;gap:7px;min-width:0} .wl-capw svg{flex:none;width:18px;height:18px;color:var(--accent)} .wl-capw b{color:var(--win-fg);font-weight:700} .wl-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px} .wl-go svg{width:18px;height:18px} .wl-go.enter{animation:wlPop .32s cubic-bezier(.2,.8,.2,1) both} @keyframes wlPop{from{opacity:0;transform:translateY(8px) scale(.97)}} /* ---- 2 · las misiones ---- */ .wl-win{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:max(8px,calc(var(--radius) * .7));background:color-mix(in srgb,var(--accent) 14%,var(--win-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)} .wl-wt{display:flex;flex-direction:column;gap:2px;min-width:0} .wl-wt b{font-family:var(--f-title);font-size:17px} .wl-wt small{color:var(--muted);font-size:13px;line-height:1.35} .wl-star{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-fg,#fff)} .wl-star svg{width:26px;height:26px} .wl-cm{flex:none;display:block;width:40px;line-height:0} .wl-cm .gcard{width:40px} .wl-cm.big,.wl-cm.big .gcard{width:52px} .wl-mis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .wl-m{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:max(8px,calc(var(--radius) * .7));background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line)} .wl-m.ok{align-items:center;padding:9px 12px} .wl-mn{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 14px/1 var(--f-ui);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)} .wl-m.ok .wl-mn{background:var(--accent);color:var(--accent-fg,#fff);box-shadow:none} .wl-mn svg{width:18px;height:18px} .wl-mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .wl-mt b{font-family:var(--f-title);font-size:16px;line-height:1.2} .wl-mt small{color:var(--muted);font-size:13px;line-height:1.35} .wl-mb{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:6px;padding:0 16px} .wl-mb svg{width:18px;height:18px} .wl-rh{margin:14px 0 8px;font-size:15px;font-weight:800;color:var(--win-fg)} .wl-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .wl-route{display:flex;align-items:center;gap:12px;min-width:0;min-height:72px;padding:10px 12px;border:0;border-radius:max(8px,calc(var(--radius) * .6));background:var(--win-bg);color:var(--win-fg);text-align:left;cursor:pointer;font:inherit; box-shadow:inset 0 0 0 1px var(--cell-line);transition:transform .14s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent} .wl-route:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--accent),0 6px 16px rgba(0,0,0,.16)} .wl-route:active{transform:scale(.97)} .wl-route:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:3px} .wl-route .wl-ta{flex:none;width:46px;height:46px} .wl-rt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .wl-rt b{font-size:14px;line-height:1.2} .wl-rt small{font-size:12px;line-height:1.3;color:var(--muted)} .wl-route>svg{flex:none;width:18px;height:18px;color:var(--accent)} .wl-route{flex-direction:column;align-items:flex-start;gap:8px;padding:12px} .wl-route>svg{display:none} .wl-route .wl-ta{width:40px;height:40px} .wl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:6px} .wl-tile{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 4px 9px;border:0;border-radius:max(8px,calc(var(--radius) * .6));background:var(--win-bg);color:var(--win-fg); box-shadow:inset 0 0 0 1px var(--cell-line);cursor:pointer;font:inherit;transition:transform .14s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent} .wl-tile:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--accent),0 6px 16px rgba(0,0,0,.16)} .wl-tile:active{transform:scale(.96)} .wl-ta{display:grid;place-items:center;width:54px;height:54px;border-radius:var(--icon-radius,12px);overflow:hidden} .wl-ta>svg,.wl-ta>img{width:100%;height:100%;display:block} .wl-ta.wl-ia{position:relative;border-radius:28%;background:#16181f center/cover no-repeat;box-shadow:0 1px 1.5px rgba(0,0,0,.4),0 6px 12px -5px rgba(0,0,0,.5)} .wl-ta.wl-ia>svg{position:absolute;inset:0} .wl-tn{max-width:100%;font-size:12px;font-weight:700;line-height:1.2;text-align:center;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere} .wl-foot{margin:2px 0 0;text-align:center} /* ---- 3 · guarda lo que ganaste ---- */ .wl-chips{margin:-2px 0 0;display:flex;flex-wrap:wrap;gap:8px} .wl-chips span{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:999px;background:var(--cell-bg);box-shadow:inset 0 0 0 1px var(--cell-line);font:700 13px/1 var(--f-ui);font-variant-numeric:tabular-nums} .wl-chips svg{width:16px;height:16px;color:var(--accent)} .wl-bens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .wl-bens li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;line-height:1.35} .wl-bens li>svg{flex:none;width:22px;height:22px;color:var(--accent)} .wl-bens li>span:not(.wl-sws){flex:1 1 200px;min-width:0} .wl-sws{display:inline-flex} .wl-sw{width:20px;height:20px;margin-left:-6px;border-radius:50%;background:var(--bg) var(--wall-thumb,none) center/cover;box-shadow:0 0 0 2px var(--win-bg)} .wl-sw:first-child{margin-left:0} .wl-sw i{display:none} /* 1.9 · el premio de la bienvenida: el tema Halloween, con su miniatura grande y «Probarlo 30 s» */ .wl-prize{display:flex;align-items:center;gap:14px;margin:0} .wl-sws.big .wl-sw{width:72px;height:72px;margin-left:0;border-radius:14px;box-shadow:0 0 0 2px var(--win-bg),0 8px 20px rgba(0,0,0,.28)} .wl-lead .wl-sws{vertical-align:-5px;margin-left:8px} .wl-acc{display:flex;flex-direction:column;gap:8px} .wl-gb{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px 6px 8px;border:1px solid var(--btn-border,var(--cell-line));border-radius:max(8px,calc(var(--radius) * .7)); background:var(--btn-bg,var(--cell-bg));color:var(--btn-fg,var(--win-fg));font:inherit;text-align:left;cursor:pointer;transition:transform .14s ease,box-shadow .2s ease} .wl-gb:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.16)} .wl-gb b{flex:1;font-size:15px} .wl-gb>svg{flex:none;width:18px;height:18px;opacity:.8} .wl-gb.primary{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent)} .wl-gi{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--radius) * .5);background:var(--win-bg);color:var(--accent)} .wl-gb.primary .wl-gi{background:rgba(255,255,255,.2);color:inherit} .wl-gi svg{width:20px;height:20px} .wl-end{align-items:center} .wl-end .wl-fine{flex:1 1 220px} .wl-end .btn{min-height:42px;padding:0 18px} /* ---- cerrada: la píldora ---- */ .wl.mini{left:0;bottom:0;width:auto;transform:none} .wl.mini.out{animation:wlOutM .26s ease forwards} @keyframes wlOutM{to{opacity:0;transform:translateY(10px)}} .wl-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 5px;border:var(--bw,1px) solid var(--win-border);border-radius:999px;background:linear-gradient(var(--win-bg),var(--win-bg)),color-mix(in srgb,var(--bg,#16161c) 88%,transparent);color:var(--win-fg); box-shadow:var(--shadow),0 10px 26px rgba(0,0,0,.3);font:700 13.5px/1 var(--f-ui);cursor:pointer;animation:wlUp .35s cubic-bezier(.2,.8,.2,1) both} .wl-pill>svg{width:16px;height:16px;color:var(--muted)} .wl-ring{position:relative;display:grid;place-items:center;width:34px;height:34px;color:var(--accent)} .wl-ring>svg{position:absolute;inset:0;transform:rotate(-90deg)} .wl-ring>svg:last-child{position:static;transform:none;width:18px;height:18px} .wl-ring circle{fill:none;stroke-width:2.6} .wl-ring .bg{stroke:var(--cell-line)} .wl-ring .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s ease} .wl-pill.new{box-shadow:0 0 0 3px var(--accent),var(--shadow),0 10px 26px rgba(0,0,0,.3)} .wl-pill.new .wl-ring::after{content:"";position:absolute;top:1px;right:1px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--win-bg)} html.wl-on #notes{visibility:hidden} /* ---- más tarde: «Guarda tu progreso» ---- */ .wl-nudge{position:absolute;z-index:2;right:16px;bottom:16px;width:360px;max-width:calc(100% - 32px);box-sizing:border-box;display:flex;gap:12px;align-items:flex-start;padding:14px 14px 14px 12px; background:linear-gradient(var(--win-bg),var(--win-bg)),color-mix(in srgb,var(--bg,#16161c) 88%,transparent);color:var(--win-fg);border:var(--bw,1px) solid var(--win-border);border-radius:var(--radius);box-shadow:var(--shadow),0 16px 40px rgba(0,0,0,.32);animation:wlUp .4s cubic-bezier(.2,.8,.2,1) both} .wl-nudge.out{opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s} .wl-ni{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--pri-bg);color:var(--pri-fg)} .wl-ni svg{width:22px;height:22px} .wl-nt{flex:1;min-width:0} .wl-nt h2{margin:0 0 4px;font-family:var(--f-title);font-size:16px;line-height:1.2} .wl-nt p{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--muted)} .wl-na{display:flex;flex-wrap:wrap;gap:6px} .wl-na .btn{min-height:36px;padding:0 14px;font-size:13px} @media (min-width:1000px){ .wl{left:auto;right:16px;bottom:16px;width:min(600px,calc(100% - 32px));transform:none} .wl.out{animation-name:wlOutM} .wl.mini{left:16px;right:auto;bottom:16px} } /* ---- teléfonos: hoja pegada abajo, con su asa ---- */ @media (max-width:720px){ .wl-routes{grid-template-columns:minmax(0,1fr);gap:8px} .wl-route{flex-direction:row;align-items:center;gap:12px;min-height:60px;padding:8px 12px} .wl-route>svg{display:block} .wl-route .wl-ta{width:44px;height:44px} .wl{left:8px;right:8px;bottom:8px;width:auto;transform:none;max-height:calc(100% - 16px)} .wl.out{animation-name:wlOutM} .wl.mini{left:4px;bottom:4px;right:auto} .wl-grab{display:block;flex:none;width:38px;height:4px;margin:7px auto 0;border-radius:4px;background:var(--cell-line)} .wl-top{padding-top:4px} .wl-body{padding:2px 16px 16px;gap:11px} .wl-nudge{left:8px;right:8px;bottom:8px;width:auto;max-width:none} } @media (max-width:560px){ .wl-card[data-view="misiones"] .wl-body h2,.wl-card[data-view="guardar"] .wl-body h2{font-size:clamp(21px,5.2vw,25px)} .wl-m{padding:10px;gap:10px} .wl-ta{width:44px;height:44px} .wl-tn{font-size:11.5px} .wl-keys{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .wl-key{aspect-ratio:3/2} .wl-go{flex:1 1 100%;justify-content:center} .wl-lead{font-size:14.5px} } @media (max-height:620px){ .wl-lead{display:none} } @media (prefers-reduced-motion:reduce){ .wl-card,.wl-pill,.wl-nudge,.wl-go.enter,.wl-key.hit,.wl-key.hit .wl-kq{animation:none} .wl.out,.wl.mini.out{animation:none;opacity:0} .wl-key,.wl-tile,.wl-gb,.wl-route{transition:none} } /* ===== 1.7: Rendimiento (equipo.js) — la capacidad del equipo y el modo, en Inicio › Pantalla ===== */ .eq-sec{gap:12px} .eq-cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .eq-ct{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 180px} .eq-ct b{font-size:.92rem} .eq-ct small{color:var(--muted);font-size:.76rem;line-height:1.35;overflow-wrap:anywhere} .eq-bars{display:inline-flex;align-items:flex-end;gap:3px;height:22px;flex:none} .eq-bars i{display:block;width:6px;border-radius:2px;background:var(--cell-line);box-shadow:inset 0 0 0 1px var(--cell-line)} .eq-bars i:nth-child(1){height:9px}.eq-bars i:nth-child(2){height:15px}.eq-bars i:nth-child(3){height:22px} .eq-bars[data-lv="0"] i:nth-child(-n+1),.eq-bars[data-lv="1"] i:nth-child(-n+2),.eq-bars[data-lv="2"] i{background:var(--accent);box-shadow:none} .eq-cap .btn{flex:none} .eq-row .seg{flex-wrap:wrap} .eq-row .seg button{min-width:0} .eq-sec .crt-autofs{margin:0;padding-top:10px;border-top:1px solid var(--cell-line)} @media (max-width:560px){ .eq-row .seg{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))} .eq-row .seg.eq-s3{grid-template-columns:repeat(3,minmax(0,1fr))} .eq-row .seg button{padding-inline:6px;white-space:normal;line-height:1.15} } /* ================= 1.8 · Ocho Notas: tarjeta para compartir (parts/tarjeta.js) ================= */ .tj-ov{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px;box-sizing:border-box;background:rgba(10,8,22,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);overflow:auto;border-radius:inherit} .tj-box{width:min(560px,100%);max-height:100%;box-sizing:border-box;overflow:auto;padding:16px 18px 18px;border-radius:max(8px,var(--radius));background:var(--win-bg);color:var(--win-fg);box-shadow:0 22px 50px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px} .tj-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .tj-head h3{margin:0;font-family:var(--f-title);font-size:1.15rem;line-height:1.2} .tj-prev{position:relative;display:grid;place-items:center;min-height:220px;padding:12px;background:var(--cell-bg);border-radius:max(6px,calc(var(--radius)*.6))} .tj-img{display:block;max-width:100%;max-height:min(50vh,440px);height:auto;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.3);transition:opacity .2s} .tj-img.story{max-height:min(56vh,520px)} .tj-img:not([src]){visibility:hidden} .tj-box.busy .tj-img{opacity:.4} .tj-st{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:.9rem;color:var(--win-fg)} .tj-st:empty{display:none} .tj-hint{margin:0;color:var(--muted);font-size:.92rem;line-height:1.4} .tj-fmt,.tj-acts{display:flex;gap:8px;flex-wrap:wrap} .tj-f[aria-checked="true"]{background:var(--pri-bg);color:var(--pri-fg);border-color:transparent} .tj-acts .btn{flex:1 1 auto} @media (max-width:480px){.tj-ov{padding:8px}.tj-box{padding:14px}.tj-acts .btn{flex-basis:100%}} @media (prefers-reduced-motion:reduce){.tj-img{transition:none}} /* ================= 1.8 · Puertas entre la Plaza y sus edificios (parts/portal.js) ================= */ .pv-veil{position:fixed;z-index:2147483000;display:grid;place-items:center;opacity:0;transition:opacity .43s ease;background:radial-gradient(ellipse at 50% 58%,hsl(var(--h) 72% 64% / .96) 0%,hsl(var(--h) 55% 24%) 36%,#05040a 76%)} .pv-veil.all{inset:0} /* 1.19.10 · las pinceladas del cruce entre cuadros de Van Gogh */ .pv-paint{position:fixed;z-index:2147483000;display:grid;place-items:center;pointer-events:none;transition:opacity .7s ease} .pv-paint.all{inset:0} .pv-paint canvas{position:absolute;inset:0;width:100%;height:100%} .pv-paint span{position:relative;font:italic 600 clamp(1.5rem,4.4vw,2.8rem)/1.15 'Cormorant Garamond',Georgia,serif;color:#fff8e0;text-align:center;padding:0 16px;text-shadow:0 2px 16px rgba(0,0,0,.7);opacity:0;transition:opacity .4s} .pv-paint.on span{opacity:.96} .pv-paint.off{opacity:0} @media (prefers-reduced-motion:reduce){.pv-paint,.pv-paint span{transition-duration:.01s}} .pv-veil.on{opacity:1} .pv-veil.off{transition-duration:.56s} .pv-veil span{font-family:var(--f-title);font-size:clamp(1.4rem,4vw,2.6rem);color:#fff;letter-spacing:.06em;text-align:center;padding:0 16px;text-shadow:0 2px 18px rgba(0,0,0,.6);opacity:0;transform:translateY(8px);transition:opacity .4s .12s,transform .5s .12s} .pv-veil.on span{opacity:.94;transform:none} .pv-exit{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:10px;max-width:calc(100% - 120px);padding:9px 18px 9px 10px;border:1.5px solid rgba(160,220,255,.95);border-radius:999px;background:rgba(8,12,26,.86);color:#eaf6ff;font:700 15px var(--f-ui);cursor:pointer;box-shadow:0 0 26px rgba(120,200,255,.35)} .pv-exit kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:6px;background:#eaf6ff;color:#0b1426;font:800 13px var(--f-ui)} .pv-exit:hover{background:rgba(14,22,44,.92)}.pv-exit:focus-visible{outline:2px solid #fff;outline-offset:3px} .touch .pv-exit kbd,.pv-exit.touch kbd{display:none} @media (max-width:720px){.pv-exit{bottom:16px;font-size:14px;max-width:calc(100% - 24px)}} @media (prefers-reduced-motion:reduce){.pv-veil,.pv-veil span{transition-duration:.01s}} .mu-h .pv-exit,.bb-h .pv-exit{bottom:76px} /* 1.9 · portales artísticos: «Entrar al cuadro», con los azules y el amarillo de La noche estrellada 1.19.5: más grande, más arriba y con un halo dorado que respira, para que nadie lo pase de largo (Andre) */ .pv-art{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;display:flex;width:max-content;box-sizing:border-box;align-items:center;gap:14px;max-width:calc(100% - 120px);min-height:60px;padding:10px 18px 10px 14px;border:2px solid #f3d36b;border-radius:999px;background:linear-gradient(135deg,rgba(18,34,86,.96),rgba(40,80,165,.95));color:#fff7d6;text-align:left;box-shadow:0 8px 30px rgba(10,20,60,.6),0 0 0 5px rgba(243,211,107,.22),0 0 34px rgba(243,211,107,.35);cursor:pointer;animation:pvArtIn .5s cubic-bezier(.32,.72,0,1) backwards,pvArtGlow 2.4s ease-in-out .5s infinite} .pv-art svg{width:40px;height:40px;flex:none;color:#f3d36b;filter:drop-shadow(0 0 6px rgba(243,211,107,.7));animation:pvArtSpin 7s linear infinite} .pv-art span{display:flex;flex-direction:column;min-width:0;gap:2px} .pv-art b{font:800 19px/1.15 var(--f-ui);letter-spacing:.01em;white-space:nowrap} .pv-art small{font:600 13px/1.25 var(--f-ui);color:#d9e3fb} .pv-art kbd{flex:none;margin-left:4px;padding:5px 10px;border:1.5px solid rgba(243,211,107,.85);border-bottom-width:3px;border-radius:8px;background:rgba(10,18,48,.7);color:#f3d36b;font:700 13px/1 var(--f-ui)} .pv-art kbd[hidden]{display:none} .pv-art-ring{position:absolute;inset:-7px;border:2px solid rgba(243,211,107,.55);border-radius:999px;pointer-events:none;animation:pvArtRing 2.4s ease-out .5s infinite} .pv-art:hover{background:linear-gradient(135deg,rgba(26,48,116,.98),rgba(54,100,196,.97));transform:translateX(-50%) scale(1.04)}.pv-art:active{transform:translateX(-50%) scale(.98)}.pv-art:focus-visible{outline:3px solid #fff;outline-offset:4px} .mu-h .pv-art{bottom:max(96px,16vh)} @keyframes pvArtIn{from{opacity:0;transform:translate(-50%,14px) scale(.92)}to{opacity:1;transform:translateX(-50%)}} @keyframes pvArtGlow{0%,100%{box-shadow:0 8px 30px rgba(10,20,60,.6),0 0 0 5px rgba(243,211,107,.22),0 0 26px rgba(243,211,107,.28)}50%{box-shadow:0 8px 30px rgba(10,20,60,.6),0 0 0 7px rgba(243,211,107,.36),0 0 48px rgba(243,211,107,.6)}} @keyframes pvArtRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.45)}} @keyframes pvArtSpin{to{transform:rotate(360deg)}} @media (max-width:720px){.pv-art{bottom:16px;max-width:calc(100% - 24px);min-height:64px;padding:10px 20px 10px 14px}.pv-art b{font-size:18px}.mu-h .pv-art{bottom:max(88px,14vh)}.mu-h.touch .pv-art{bottom:max(120px,18vh)}} @media (prefers-reduced-motion:reduce){.pv-art,.pv-art svg,.pv-art-ring{animation:none}.pv-art-ring{display:none}} /* ================= 1.8 · botón de saltar en pantallas táctiles (parts/salto.js) ================= */ .jmp-btn{position:absolute;right:16px;bottom:96px;z-index:5;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.85);background:rgba(10,10,22,.55);color:#fff;touch-action:none;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .jmp-btn svg{width:28px;height:28px} .jmp-btn:active{background:rgba(255,255,255,.28);transform:scale(.94)} /* ---------- 1.11 · jet pack: el anillo del combustible (y de la carga) y las llamitas abajo de la pantalla ---------- */ .jet-hud{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:54px;height:54px;z-index:2147481000;pointer-events:none;display:grid;place-items:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .jet-hud svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .jet-hud circle{fill:none;stroke-width:4.5} .jet-hud .bg{stroke:rgba(10,10,20,.55)} .jet-hud .fg{stroke:#ffb347;stroke-linecap:round;transition:stroke-dashoffset .12s linear} .jet-hud.chg .fg{stroke:#8fe9ff} .jet-hud.low .fg{stroke:#ff5f6d} .jet-hud span{width:24px;height:24px;color:#fff3d6} .jet-hud span svg{position:static;transform:none} .jet-hud.on span{animation:jetBob .5s ease-in-out infinite alternate} .jet-fx{position:fixed;left:0;right:0;bottom:0;height:22vh;z-index:2147480900;pointer-events:none;display:flex;justify-content:center;gap:34vw} .jet-fx i{display:block;width:13vw;max-width:150px;height:100%;background:radial-gradient(50% 70% at 50% 100%,rgba(255,245,200,.85),rgba(255,170,60,.55) 38%,rgba(255,90,40,.18) 62%,transparent 75%);filter:blur(6px);transform-origin:50% 100%;animation:jetFlame .09s steps(2) infinite alternate;mix-blend-mode:screen} .jet-fx i:nth-child(2){animation-delay:.045s} @keyframes jetFlame{from{transform:scaleY(.86) scaleX(1.04);opacity:.85}to{transform:scaleY(1.08) scaleX(.94);opacity:1}} @keyframes jetBob{from{transform:translateY(1px)}to{transform:translateY(-2px)}} @media (prefers-reduced-motion:reduce){ .jet-fx i,.jet-hud.on span{animation:none} } /* ---------- 1.14.2 · en pantallas táctiles, el anillo del combustible rodea el botón de saltar ---------- */ .jmp-btn .jet-hud.in-btn{position:absolute;left:-12px;top:-12px;right:auto;bottom:auto;width:calc(100% + 24px);height:calc(100% + 24px);transform:none;z-index:-1;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))} .jmp-btn .jet-hud.in-btn span{display:none} .jmp-btn .jet-hud.in-btn .bg{stroke:rgba(10,10,20,.35)} /* ---------- 1.14.2 · pesado: el botón de la pesa (bajar rápido), debajo del de saltar; solo en el aire ---------- */ .hvy-btn{position:absolute;right:20px;bottom:22px;z-index:5;width:52px;height:52px;padding:0;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,214,150,.9);background:rgba(22,14,6,.6);color:#ffe2b0;touch-action:none;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:hvyIn .22s cubic-bezier(.2,.9,.3,1.2)} .hvy-btn svg{width:26px;height:26px} .hvy-btn.on{background:#ffb347;border-color:#fff3d6;color:#2a1704;transform:scale(.94)} .hvy-btn[hidden]{display:none} @keyframes hvyIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){ .hvy-btn{animation:none} } /* la caída en picada: viñeta y rayas que suben por los lados mientras vas pesado */ .hvy-fx{position:fixed;inset:0;z-index:2147480900;pointer-events:none;opacity:0;transition:opacity .18s ease;background:radial-gradient(ellipse 78% 70% at 50% 52%,transparent 58%,rgba(4,6,14,.42) 100%);overflow:hidden} .hvy-fx.on{opacity:1} .hvy-fx i{position:absolute;top:100%;width:2px;height:22vh;border-radius:2px;background:linear-gradient(rgba(255,255,255,0),rgba(235,240,255,.5) 55%,rgba(255,255,255,0));animation:hvyStreak .42s linear infinite} @keyframes hvyStreak{to{transform:translateY(-135vh)}} @media (prefers-reduced-motion:reduce){ .hvy-fx i{display:none} } /* 1.14.2 · en el teléfono, los mundos de afuera llenan la ventana (como la Plaza): sin el marco de 16 px alrededor */ @media (max-width:720px),(pointer:coarse) and (max-height:560px){ .win:is([data-id="luna"],[data-id="marte"],[data-id="andromeda"],[data-id="noche"],[data-id="mar"]) .win-body{padding:0;overflow:hidden} } /* 1.14.2 · la ayuda de abajo nunca llega a los botones de la derecha (su ancho máximo ya cuenta el relleno) */ .win .arc.touch.lu .arc-help,.win .arc.touch.ms .arc-help,.win .arc.touch.ng .arc-help,.win .arc.touch.an .arc-help{box-sizing:border-box} /* 1.16.7 · el botón de la cámara (tercera persona, tercera.js) */ .ter-btn{position:absolute;right:14px;top:62px;z-index:5;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(255,255,255,.85);background:rgba(10,10,22,.55);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .ter-btn svg{width:24px;height:24px} .ter-btn[aria-pressed="true"]{background:rgba(255,255,255,.88);color:#151526;border-color:#fff} .ter-btn:hover{background:rgba(40,40,70,.7)}.ter-btn[aria-pressed="true"]:hover{background:#fff} .ter-btn:focus-visible{outline:3px solid #fff;outline-offset:2px} .ter-btn:active{transform:scale(.94)} .cp .ter-btn{border-color:var(--cp-ink,#243049);background:var(--cp-paper,#fffaf0);color:var(--cp-ink,#243049);box-shadow:3px 3px 0 var(--cp-ink,#243049)} .cp .ter-btn[aria-pressed="true"]{background:#ffe08a} .arc.cp.gf-on .ter-btn{display:none} .touch .ter-btn,.dt.touch .ter-btn{top:auto;right:22px;bottom:170px;width:50px;height:50px} @media (hover:hover) and (pointer:fine){ .win.fw .ter-btn{top:100px} } /* 1.16.10 · en tercera persona la llama se ve en el jet pack del avatar: las llamitas de abajo de la pantalla sobran */ html.ter-on .jet-fx{display:none} /* ---------- 1.11 · controles de videojuego: aviso al conectar, «Configurar control» y el botón de cada marca ---------- */ .ct-banner{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translate(-50%,-140%);z-index:2147482500;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));padding:9px 12px 9px 10px;border-radius:12px;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border);box-shadow:0 10px 30px rgba(0,0,0,.35);font:600 14px/1.3 var(--f-ui);transition:transform .25s ease} .ct-banner.on{transform:translate(-50%,0)} .ct-banner .ct-ic{width:24px;height:24px;flex:none;color:var(--accent)} .ct-banner .btn{margin-left:4px;white-space:nowrap} .ct-cfg{position:fixed;inset:0;z-index:2147482600;display:grid;place-items:center;padding:16px;background:rgba(8,6,20,.72)} .ct-cfg-in{width:min(440px,100%);padding:18px 20px;border-radius:14px;background:var(--win-bg);color:var(--win-fg);border:var(--bw) solid var(--win-border);box-shadow:0 18px 50px rgba(0,0,0,.45);font-family:var(--f-ui)} .ct-cfg-in h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:18px} .ct-cfg-in h3 svg{width:26px;height:26px;color:var(--accent)} .ct-cfg-ask{margin:14px 0 4px;font-size:20px;font-weight:800;line-height:1.3} .ct-cfg-n{margin:0 0 14px;color:var(--muted);font-size:13px} .ct-cfg-acts{display:flex;flex-wrap:wrap;gap:8px} .ct-g{display:inline-grid;place-items:center;min-width:1.55em;height:1.55em;padding:0 .2em;border-radius:50%;background:#1d1d24;color:var(--ctc,#fff);font:800 .9em/1 var(--f-ui);box-shadow:inset 0 0 0 1.5px currentColor;vertical-align:-.2em} .ct-g.ct-gen{background:transparent;box-shadow:none;color:inherit;width:1.5em} .ct-g.ct-gen svg{width:1.4em;height:1.4em} kbd.ct-kbd{padding:0 2px;background:transparent;border:0;box-shadow:none} /* ================= 1.9 · el mundo de «La noche estrellada» (parts/noche.js) ================= */ .arc.ng{background:#0d1d40} /* 1.19.7: los otros mundos de Van Gogh (vgmundo.js) usan las mismas piezas (.arc.ng.vg) */ .arc.vg-terraza{background:#141c48} .arc.vg-rodano{background:#0d1a2e} .arc.vg-trigal{background:#2a4c9a} /* el lienzo a medio pintar del Trigal */ .trg-easel{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;background:rgba(10,18,40,.62);animation:trgIn .35s ease} .trg-easel.out{opacity:0;transition:opacity .3s} .trg-easel figure{margin:0;display:flex;flex-direction:column;gap:12px;max-width:min(640px,100%);padding:14px 14px 16px;border-radius:6px;background:#efe6cf;box-shadow:0 18px 50px rgba(0,0,0,.5);color:#2a2418} .trg-lienzo{position:relative;overflow:hidden;border:6px solid #f7f1e2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} .trg-lienzo img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(100deg,#000 0,#000 58%,rgba(0,0,0,.35) 66%,transparent 74%);mask-image:linear-gradient(100deg,#000 0,#000 58%,rgba(0,0,0,.35) 66%,transparent 74%)} .trg-lienzo::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(120,100,70,.18) 0 2px,transparent 2px 9px);pointer-events:none} .trg-easel figcaption{display:flex;flex-direction:column;gap:4px} .trg-easel figcaption b{font:italic 600 22px/1.15 'Cormorant Garamond',Georgia,serif} .trg-easel figcaption span{font:15px/1.45 'Cormorant Garamond',Georgia,serif} @keyframes trgIn{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){.trg-easel{animation:none}} /* los rebotes de la piedra en el Ródano */ .rdn-skip{position:absolute;left:50%;top:22%;z-index:3;transform:translate(-50%,6px);padding:6px 14px;border-radius:999px;background:rgba(8,20,36,.72);color:#f3eab0;font:italic 600 20px/1.2 'Cormorant Garamond',Georgia,serif;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s} .rdn-skip.on{opacity:1;transform:translate(-50%,0);animation:rdnSkip 2.2s ease forwards} @keyframes rdnSkip{0%,70%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){.rdn-skip.on{animation:none;transition:none}} /* la cédula del cuadro, como en la pared del museo; se desvanece sola */ .ng-card{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(360px,calc(100% - 210px));margin:0;padding:12px 16px 13px;border-left:3px solid #f1cf5e;border-radius:4px;background:rgba(9,20,52,.78);color:#f5f0dc;box-shadow:0 8px 26px rgba(4,10,30,.45);pointer-events:none;transition:opacity 1.2s ease,transform 1.2s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .ng-card b{font:italic 600 23px/1.15 'Cormorant Garamond',Georgia,'Times New Roman',serif;color:#ffe9a6;letter-spacing:.01em} .ng-card span{font:600 13px/1.3 var(--f-ui);color:#b9c8ec} .ng-card p{margin:6px 0 0;font:15px/1.45 'Cormorant Garamond',Georgia,'Times New Roman',serif;color:#e7e4d4} .ng-card.off{opacity:0;transform:translateY(-6px)} /* volver al museo, siempre a la vista */ .ng-back{position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px 7px 11px;border:1.5px solid rgba(241,207,94,.85);border-radius:999px;background:rgba(9,20,52,.8);color:#fff4cf;font:700 14px var(--f-ui);cursor:pointer;box-shadow:0 4px 16px rgba(4,10,30,.4)} .ng-back svg{width:18px;height:18px;flex:none} .ng-back:hover{background:rgba(22,44,104,.9)}.ng-back:focus-visible{outline:2px solid #fff;outline-offset:3px} /* la ayuda, abajo a la izquierda (arriba va la cédula) */ .win .arc.ng .arc-help{top:auto;bottom:14px;max-width:min(440px,calc(100% - 28px));background:rgba(9,20,52,.74);transition:opacity 1s ease} .win .arc.ng .arc-help.off{opacity:0} .win .arc.ng.touch .arc-help{max-width:calc(100% - 110px)} /* el marco dorado del regreso */ .ng .arc-prompt{border-color:#f1cf5e;background:rgba(9,20,52,.86);color:#fff4cf} .ng .arc-prompt kbd{background:#f1cf5e;color:#132250} .touch.ng .arc-prompt kbd{display:none} /* sin WebGL: el cuadro y una nota */ .arc.ng.no3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;height:auto;min-height:300px} .arc.ng.no3d .arc-cv,.arc.ng.no3d .arc-help,.arc.ng.no3d .arc-joy,.arc.ng.no3d .ng-card,.arc.ng.no3d .jmp-btn{display:none} .arc.ng.no3d .ng-back{position:static;order:2} .ng-no3d{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:640px;color:#f5f0dc;text-align:center} .ng-no3d img{max-width:100%;max-height:52vh;border:6px solid #b8862f;box-shadow:0 10px 30px rgba(0,0,0,.45)} .ng-no3d p{margin:0;font-size:15px} /* el botón de la ficha del museo */ .mu-portal{display:inline-flex;align-items:center;gap:7px;min-height:40px;border-color:#c79a2e;background:linear-gradient(135deg,#17306e,#2b58a8);color:#fff4cf} .mu-portal:hover{background:linear-gradient(135deg,#1d3a82,#3466bf)} @media (max-width:720px){ .ng-card{left:10px;top:60px;max-width:calc(100% - 20px);padding:9px 12px 10px} .ng-card b{font-size:19px}.ng-card p{display:none} .ng-back{top:10px;right:10px;min-height:38px;padding:6px 12px 6px 9px;font-size:13px} .win .arc.ng .arc-help{bottom:12px;font-size:13px} } @media (hover:hover) and (pointer:fine){ /* en pantalla completa, debajo de la barra (sin moverse cuando la barra se esconde: así no huye del puntero) */ .win.fw .ng-card,.win.fw .ng-back{top:50px} } @media (prefers-reduced-motion:reduce){.ng-card,.win .arc.ng .arc-help{transition:none}} /* ================= 1.9 · La Luna de Arcadópolis (parts/luna.js) ================= */ .arc.lu{background:#000} /* el visor del casco: un borde apenas oscuro y un reflejo curvo muy tenue */ .lu-visor{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 120% 105% at 50% 48%,transparent 62%,rgba(0,0,0,.42) 100%),radial-gradient(ellipse 80% 40% at 30% -6%,rgba(190,215,255,.07),transparent 60%)} .lu-card{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(380px,calc(100% - 230px));margin:0;padding:12px 16px 13px;border-left:3px solid #c9d7ff;border-radius:4px;background:rgba(8,10,20,.72);color:#eef1fb;pointer-events:none;transition:opacity 1.2s ease,transform 1.2s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .lu-card b{font:600 24px/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;color:#fff} .lu-card span{font:600 12.5px/1.3 var(--f-ui);color:#a9b6d8} .lu-card p{margin:6px 0 0;font:14px/1.45 var(--f-ui);color:#d9deec} .lu-card.off{opacity:0;transform:translateY(-6px)} .lu-back{position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px 7px 11px;border:1.5px solid rgba(201,215,255,.8);border-radius:999px;background:rgba(10,12,26,.78);color:#eef1fb;font:700 14px var(--f-ui);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5)} .lu-back svg{width:18px;height:18px;flex:none} .lu-back:hover{background:rgba(28,34,70,.9)}.lu-back:focus-visible{outline:2px solid #fff;outline-offset:3px} .win .arc.lu .arc-help{top:auto;bottom:14px;max-width:min(460px,calc(100% - 28px));background:rgba(8,10,20,.74);transition:opacity 1s ease;z-index:3} .win .arc.lu .arc-help.off{opacity:0} .win .arc.lu.touch .arc-help{max-width:calc(100% - 110px)} .lu-skip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 32px);margin:0;padding:8px 16px;border-radius:999px;background:rgba(8,10,20,.6);color:#fff;font:600 14px/1.3 var(--f-ui);text-align:center;pointer-events:none} /* altímetro del salto y cristales */ .lu-alt{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;display:flex;gap:16px;padding:7px 16px;border-radius:999px;background:rgba(8,10,20,.66);color:#c9d3ee;font:600 13px/1.2 var(--f-ui);pointer-events:none;font-variant-numeric:tabular-nums;white-space:nowrap} .lu-alt b{color:#fff;font-size:15px} .lu-crys{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;padding:7px 16px;border-radius:999px;background:rgba(30,16,60,.72);color:#e9dcff;font:600 13px/1.2 var(--f-ui);pointer-events:none} .lu-alt:not([hidden]) ~ .lu-crys{top:58px} /* 1.14.2: mientras se ve el altímetro (o los cristales, o «Escuchar las estrellas»), la tarjeta de bienvenida se aparta: en ventanas de menos de ~1100 px el altímetro, centrado arriba, caía encima de ella */ .arc.lu:has(.lu-alt:not([hidden])) .lu-card,.arc.lu:has(.lu-crys:not([hidden])) .lu-card,.arc.lu:has(.lo-listen:not([hidden])) .lo-card{opacity:0} .lu .arc-prompt{border-color:#c9d7ff;background:rgba(10,12,26,.86)} .touch.lu .arc-prompt kbd{display:none} .lu .jmp-btn{z-index:5} /* cuenta regresiva del despegue */ .lu-count{position:absolute;left:0;right:0;top:12%;display:flex;justify-content:center;pointer-events:none;z-index:6} .lu-count b{padding:.12em .55em;border-radius:50%;background:radial-gradient(closest-side,rgba(4,6,18,.62),rgba(4,6,18,.35) 60%,transparent)} .lu-count b{font:700 clamp(64px,13vw,150px)/1 Cinzel,'Cormorant Garamond',Georgia,serif;color:#fff;letter-spacing:.04em;text-shadow:0 0 34px rgba(150,180,255,.75),0 0 8px rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.7)} .lu-count.go b{font-size:clamp(40px,7.5vw,92px);color:#ffe2a8;text-shadow:0 0 34px rgba(255,150,60,.85),0 0 8px rgba(255,240,200,.7),0 4px 14px rgba(0,0,0,.7)} .lu-count.pop b{animation:dtCountPop .9s cubic-bezier(.2,.9,.3,1) both} .lu-count.go.pop b{animation-duration:1.4s} .arc.lu.no3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;height:auto;min-height:300px} .arc.lu.no3d .arc-cv,.arc.lu.no3d .arc-help,.arc.lu.no3d .arc-joy,.arc.lu.no3d .lu-card,.arc.lu.no3d .lu-visor{display:none} .arc.lu.no3d .lu-back{position:static;order:2} .lu-no3d{color:#eef1fb;text-align:center} @media (max-width:720px){ .lu-card{left:10px;top:60px;max-width:calc(100% - 20px);padding:9px 12px 10px} .lu-card b{font-size:20px}.lu-card p{display:none} .lu-back{top:10px;right:10px;min-height:38px;padding:6px 12px 6px 9px;font-size:13px} .win .arc.lu .arc-help{bottom:12px;font-size:13px} /* 1.14.2: el altímetro, compacto arriba a la izquierda (en la fila del botón de volver); antes caía encima de la tarjeta */ .lu-alt{left:10px;top:10px;transform:none;flex-direction:column;gap:1px;padding:6px 12px 7px;border-radius:12px;font-size:11.5px} .lu-alt b{font-size:14px} .lu-crys,.lu-alt:not([hidden]) ~ .lu-crys{top:60px;max-width:calc(100% - 20px);white-space:normal;text-align:center} } @media (hover:hover) and (pointer:fine){ .win.fw .lu-card,.win.fw .lu-back{top:50px} .win.fw .lu-alt,.win.fw .lu-crys{top:56px} } @media (prefers-reduced-motion:reduce){.lu-card,.win .arc.lu .arc-help{transition:none}.lu-count.pop b{animation:none}} /* 1.13 · el lado oscuro: el destello violeta del aro, su tarjeta y «Escuchar las estrellas» */ .lu-flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#d9c2ff 0,#7a4ce0 30%,#1a0b3a 75%);transition:opacity .4s ease} .lu-flash.on{opacity:1} .lo-card{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(400px,calc(100% - 230px));margin:0;padding:12px 16px 13px;border-left:3px solid #b18cff;border-radius:4px;background:rgba(10,6,24,.76);color:#efe9ff;pointer-events:none;transition:opacity 1.2s ease,transform 1.2s ease} .lo-card b{font:600 24px/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.05em;color:#fff} .lo-card span{font:600 12.5px/1.3 var(--f-ui);color:#c4b2f0} .lo-card p{margin:6px 0 0;font:14px/1.45 var(--f-ui);color:#ddd5f5} .lo-card.off{opacity:0;transform:translateY(-6px)} .lo-listen{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:3px;max-width:calc(100% - 32px);padding:8px 16px;border-radius:14px;background:rgba(16,8,36,.72);border:1px solid rgba(177,140,255,.45);color:#e9e1ff;font:600 13px/1.3 var(--f-ui);text-align:center;pointer-events:none} .lo-listen b{font-weight:600} .lo-listen span{color:#c4b2f0;font-variant-numeric:tabular-nums} @media (max-width:720px){ .lo-card{left:10px;top:60px;max-width:calc(100% - 20px);padding:9px 12px 10px} .lo-card b{font-size:20px} .lo-card p{display:none} .lo-listen{top:60px} } @media (hover:hover) and (pointer:fine){ .win.fw .lo-card{top:50px} .win.fw .lo-listen{top:56px} } @media (prefers-reduced-motion:reduce){.lu-flash,.lo-card{transition:none}} /* ================= 1.12 · Coralópolis, la ciudad bajo el mar (parts/mar.js) ================= */ .arc.mr{background:#021019} /* el visor del casco de buzo: un aro de latón apenas visible en las orillas y un reflejo curvo */ .mr-visor{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 118% 108% at 50% 50%,transparent 60%,rgba(2,18,24,.35) 86%,rgba(46,32,12,.55) 100%),radial-gradient(ellipse 70% 34% at 28% -4%,rgba(180,240,255,.08),transparent 60%)} .mr-card{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(390px,calc(100% - 230px));margin:0;padding:12px 16px 13px;border-left:3px solid #7fe3e0;border-radius:4px;background:rgba(2,22,30,.72);color:#e8fbfb;pointer-events:none;transition:opacity 1.2s ease,transform 1.2s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .mr-card b{font:600 24px/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;color:#fff} .mr-card span{font:600 12.5px/1.3 var(--f-ui);color:#9fd9d6} .mr-card p{margin:6px 0 0;font:14px/1.45 var(--f-ui);color:#d4eeee} .mr-card.off{opacity:0;transform:translateY(-6px)} .mr-back{position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px 7px 11px;border:1.5px solid rgba(127,227,224,.8);border-radius:999px;background:rgba(2,22,30,.78);color:#e8fbfb;font:700 14px var(--f-ui);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.45)} .mr-back svg{width:18px;height:18px;flex:none} .mr-back:hover{background:rgba(8,48,60,.9)}.mr-back:focus-visible{outline:2px solid #fff;outline-offset:3px} .win .arc.mr .arc-help{top:auto;bottom:14px;max-width:min(470px,calc(100% - 28px));background:rgba(2,22,30,.76);transition:opacity 1s ease;z-index:3} .win .arc.mr .arc-help.off{opacity:0} .win .arc.mr.touch .arc-help{max-width:calc(100% - 120px)} .mr-skip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 32px);margin:0;padding:8px 16px;border-radius:999px;background:rgba(2,22,30,.6);color:#fff;font:600 14px/1.3 var(--f-ui);text-align:center;pointer-events:none} /* profundímetro */ .mr-depth{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;padding:7px 16px;border-radius:999px;background:rgba(2,22,30,.62);color:#a9dcda;font:600 13px/1.2 var(--f-ui);pointer-events:none;font-variant-numeric:tabular-nums;white-space:nowrap} .mr-depth b{color:#fff;font-size:15px} .mr .arc-prompt{border-color:#7fe3e0;background:rgba(2,22,30,.86)} .touch.mr .arc-prompt kbd{display:none} /* subir y bajar con el dedo (abajo a la derecha) */ .mr-ud{position:absolute;right:14px;bottom:18px;z-index:5;display:flex;flex-direction:column;gap:10px} .mr-ud button{display:grid;place-items:center;width:58px;height:58px;padding:0;border:1.5px solid rgba(127,227,224,.75);border-radius:50%;background:rgba(2,22,30,.6);color:#e8fbfb;touch-action:none;-webkit-user-select:none;user-select:none} .mr-ud button:active{background:rgba(20,80,90,.8)} .mr-ud svg{width:26px;height:26px} /* la esclusa: un fundido azul oscuro */ .mr-fade{position:absolute;inset:0;z-index:7;background:radial-gradient(circle at 50% 50%,#0b3a44,#020c12 70%);opacity:0;transition:opacity .38s ease;pointer-events:none} .mr-fade.on{opacity:1} .arc.mr.no3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;height:auto;min-height:300px} .arc.mr.no3d .arc-cv,.arc.mr.no3d .arc-help,.arc.mr.no3d .arc-joy,.arc.mr.no3d .mr-card,.arc.mr.no3d .mr-visor,.arc.mr.no3d .mr-ud{display:none} .arc.mr.no3d .mr-back{position:static;order:2} .mr-no3d{color:#e8fbfb;text-align:center} /* en la app de un instrumento: «Volver al estudio» en la barra de la ventana */ .win-title .mr-backb{display:inline-flex;align-items:center;gap:6px;flex:none;margin:0 6px 0 auto;padding:3px 10px;min-height:0;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap} .win-title .mr-backb svg{width:16px;height:16px;flex:none} .win-title .mr-backb{position:relative} @media (pointer:coarse){ .win-title .mr-backb::after{content:'';position:absolute;inset:-9px -3px} } /* 1.14.3: zona de toque más grande, como los botones de la ventana */ @media (max-width:520px){ .win-title .mr-backb span{display:none} .win-title .mr-backb{padding:3px 7px} } @media (max-width:720px){ .mr-card{left:10px;top:60px;max-width:calc(100% - 20px);padding:9px 12px 10px} .mr-card b{font-size:20px}.mr-card p{display:none} .mr-back{top:10px;right:10px;min-height:38px;padding:6px 12px 6px 9px;font-size:13px} .win .arc.mr .arc-help{bottom:12px;font-size:13px} .mr-depth{top:58px} } @media (hover:hover) and (pointer:fine){ .win.fw .mr-card,.win.fw .mr-back{top:50px} .win.fw .mr-depth{top:56px} } /* 1.14.4 (auditoría) · el aviso de lo que tienes enfrente, para lectores de pantalla (invisible) */ .mr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* la ayuda sube cuando aparece el aviso de abajo (antes se encimaban) */ .arc.mr:has(.arc-prompt:not([hidden])) .arc-help{bottom:78px} /* afuera, en el teléfono, el aviso no se mete bajo los botones de subir y bajar: más angosto y en dos renglones si hace falta */ .arc.mr.touch:not(.in) .arc-prompt{max-width:calc(100% - 176px)} .arc.mr.touch:not(.in) .arc-prompt span{white-space:normal;overflow:visible;text-align:center;line-height:1.25} /* la vista 3D se interrumpió */ .mr-lost{position:absolute;inset:0;z-index:8;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;background:radial-gradient(circle at 50% 45%,rgba(11,58,68,.92),rgba(2,12,18,.96) 70%);color:#e8fbfb;text-align:center} .mr-lost p{max-width:34ch;margin:0;font:600 16px/1.45 var(--f-ui)} .mr-lost[hidden]{display:none} @media (max-width:720px){ .arc.mr:has(.arc-prompt:not([hidden])) .arc-help{bottom:70px} } @media (prefers-reduced-motion:reduce){.mr-card,.win .arc.mr .arc-help,.mr-fade{transition:none}} /* 1.16.4 · la sesión del estudio (mar_vida.js): qué suena y un botón para silenciarla; arriba al centro (adentro no hay profundímetro) */ .mrv-ses{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100% - 260px));padding:5px 6px 5px 14px;border:1px solid rgba(127,227,224,.45);border-radius:999px;background:rgba(2,22,30,.72);color:#d4eeee;font:600 13px/1.3 var(--f-ui)} .mrv-ses[hidden]{display:none} .mrv-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mrv-t b{color:#fff} .mrv-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;flex:none} .mrv-eq i{width:3px;height:4px;border-radius:1px;background:#7fe3e0} .mrv-ses.on .mrv-eq i{animation:mrvEq 1.1s ease-in-out infinite} .mrv-ses.on .mrv-eq i:nth-child(2){animation-delay:-.35s}.mrv-ses.on .mrv-eq i:nth-child(3){animation-delay:-.7s} @keyframes mrvEq{0%,100%{height:4px}50%{height:14px}} .mrv-mute{flex:none;min-height:30px;padding:4px 12px;border-radius:999px;font-size:12.5px} @media (max-width:720px){ .mrv-ses{top:58px;max-width:calc(100% - 20px)} } @media (hover:hover) and (pointer:fine){ .win.fw .mrv-ses{top:52px} } @media (prefers-reduced-motion:reduce){ .mrv-ses.on .mrv-eq i{animation:none;height:9px} } .mrv-ses .mrv-mute{border:1px solid rgba(127,227,224,.6);background:rgba(127,227,224,.14);color:#e8fbfb} .mrv-ses .mrv-mute:hover{background:rgba(127,227,224,.26)}.mrv-ses .mrv-mute:focus-visible{outline:2px solid #fff;outline-offset:2px} /* 1.16.7 · en tercera persona no se ve el visor del casco */ html.ter-on .arc.mr .mr-visor{display:none} /* ================= 1.13 · Marte (parts/marte.js y marte_juego.js) ================= */ .arc.ms{background:#3a2015} /* el visor del casco: borde apenas oscuro y un reflejo curvo tenue */ .ms-visor{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 120% 105% at 50% 48%,transparent 62%,rgba(20,8,4,.4) 100%),radial-gradient(ellipse 80% 40% at 30% -6%,rgba(255,220,190,.06),transparent 60%)} /* el polvo de un remolino en el visor */ .ms-dust{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(ellipse 90% 80% at 50% 50%,rgba(176,108,66,.35),rgba(150,88,52,.8) 75%),repeating-radial-gradient(circle at 30% 40%,rgba(255,220,180,.06) 0 2px,transparent 2px 7px)} .ms-card{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(400px,calc(100% - 230px));margin:0;padding:12px 16px 13px;border-left:3px solid #f08a4b;border-radius:4px;background:rgba(32,14,8,.74);color:#fbefe6;pointer-events:none;transition:opacity 1.2s ease,transform 1.2s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .ms-card b{font:600 24px/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;color:#fff} .ms-card span{font:600 12.5px/1.3 var(--f-ui);color:#f0b48c} .ms-card p{margin:6px 0 0;font:14px/1.45 var(--f-ui);color:#f1ddd0} .ms-card.off{opacity:0;transform:translateY(-6px)} .ms-back{position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 14px 7px 11px;border:1.5px solid rgba(240,160,110,.85);border-radius:999px;background:rgba(36,16,10,.8);color:#fbefe6;font:700 14px var(--f-ui);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.45)} .ms-back svg{width:18px;height:18px;flex:none} .ms-back:hover{background:rgba(70,30,16,.92)}.ms-back:focus-visible{outline:2px solid #fff;outline-offset:3px} .win .arc.ms .arc-help{top:auto;bottom:14px;max-width:min(470px,calc(100% - 28px));background:rgba(32,14,8,.76);transition:opacity 1s ease;z-index:3} .win .arc.ms .arc-help.off{opacity:0} .win .arc.ms.touch .arc-help{max-width:calc(100% - 110px);bottom:76px} .ms-skip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 32px);margin:0;padding:8px 16px;border-radius:999px;background:rgba(32,14,8,.62);color:#fff;font:600 14px/1.3 var(--f-ui);text-align:center;pointer-events:none} /* altímetro y tablero del rover */ .ms-alt,.ms-rv{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;display:flex;gap:16px;padding:7px 16px;border-radius:999px;background:rgba(32,14,8,.7);color:#f3d2bd;font:600 13px/1.2 var(--f-ui);pointer-events:none;font-variant-numeric:tabular-nums;white-space:nowrap} .ms-alt b,.ms-rv b{color:#fff;font-size:15px} .arc.ms:has(.ms-alt:not([hidden])) .ms-card,.arc.ms:has(.ms-rv:not([hidden])) .ms-card{opacity:0} /* 1.14.2: la tarjeta se aparta mientras se ve el altímetro o el tablero del rover */ .ms-rv{border:1px solid rgba(240,160,110,.45)} .ms .arc-prompt{border-color:#f0a06e;background:rgba(36,16,10,.88)} .touch.ms .arc-prompt kbd{display:none} .ms .jmp-btn{z-index:5} /* cuenta regresiva del despegue */ .ms-count{position:absolute;left:0;right:0;top:12%;display:flex;justify-content:center;pointer-events:none;z-index:6} .ms-count b{padding:.12em .55em;border-radius:50%;background:radial-gradient(closest-side,rgba(24,8,4,.6),rgba(24,8,4,.32) 60%,transparent)} .ms-count b{font:700 clamp(64px,13vw,150px)/1 Cinzel,'Cormorant Garamond',Georgia,serif;color:#fff;letter-spacing:.04em;text-shadow:0 0 34px rgba(255,150,100,.7),0 0 8px rgba(255,255,255,.6),0 4px 14px rgba(0,0,0,.7)} .ms-count.go b{font-size:clamp(40px,7.5vw,92px);color:#ffe2a8;text-shadow:0 0 34px rgba(255,150,60,.85),0 0 8px rgba(255,240,200,.7),0 4px 14px rgba(0,0,0,.7)} .ms-count.pop b{animation:dtCountPop .9s cubic-bezier(.2,.9,.3,1) both} .ms-count.go.pop b{animation-duration:1.4s} .arc.ms.no3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;height:auto;min-height:300px} .arc.ms.no3d .arc-cv,.arc.ms.no3d .arc-help,.arc.ms.no3d .arc-joy,.arc.ms.no3d .ms-card,.arc.ms.no3d .ms-visor,.arc.ms.no3d .ms-dust{display:none} .arc.ms.no3d .ms-back{position:static;order:2} .ms-no3d{color:#fbefe6;text-align:center} @media (max-width:720px){ .ms-card{left:10px;top:60px;max-width:calc(100% - 20px);padding:9px 12px 10px} .ms-card b{font-size:20px}.ms-card p{display:none} .ms-back{top:10px;right:10px;min-height:38px;padding:6px 12px 6px 9px;font-size:13px} .win .arc.ms .arc-help{bottom:70px;font-size:13px} /* encima del aviso de abajo («Bajar del rover»…) */ .ms-alt,.ms-rv{left:10px;top:10px;transform:none;flex-direction:column;gap:1px;padding:6px 12px 7px;border-radius:12px;font-size:11.5px} /* 1.14.2: compacto arriba a la izquierda; antes caía encima de la tarjeta */ .ms-alt b,.ms-rv b{font-size:14px} } @media (hover:hover) and (pointer:fine){ .win.fw .ms-card,.win.fw .ms-back{top:50px} .win.fw .ms-alt,.win.fw .ms-rv{top:56px} } @media (prefers-reduced-motion:reduce){.ms-card,.win .arc.ms .arc-help{transition:none}.ms-count.pop b{animation:none}} /* la cueva: el fundido al bajar o subir por la escalera y su tarjeta */ .ms-fade{position:absolute;inset:0;z-index:7;background:#000;opacity:0;transition:opacity .36s ease;pointer-events:none} .ms-fade.on{opacity:1} .ms-cavecard{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;color:#f4e6da;text-align:center;pointer-events:none;transition:opacity 1.4s ease} .ms-cavecard b{font:600 clamp(26px,4vw,44px)/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.1em;text-indent:.1em;text-shadow:0 0 22px rgba(255,170,110,.4),0 2px 10px rgba(0,0,0,.8)} .ms-cavecard span{font:italic 500 clamp(15px,2vw,20px)/1.3 'Cormorant Garamond',Georgia,serif;color:#e8c9b0;text-shadow:0 1px 8px rgba(0,0,0,.8)} .ms-cavecard.off{opacity:0} @media (prefers-reduced-motion:reduce){.ms-fade,.ms-cavecard{transition:none}} /* 1.14 · La cueva de los glifos (luna_cueva.js) */ .lc-fade{position:absolute;inset:0;z-index:7;background:#000;opacity:0;transition:opacity .36s ease;pointer-events:none} .lc-fade.on{opacity:1} .lc-card{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;color:#ece4ff;text-align:center;pointer-events:none;transition:opacity 1.4s ease} .lc-card b{font:600 clamp(26px,4vw,44px)/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.1em;text-indent:.1em;text-shadow:0 0 24px rgba(160,110,255,.45),0 2px 10px rgba(0,0,0,.8)} .lc-card span{font:italic 500 clamp(15px,2vw,20px)/1.3 'Cormorant Garamond',Georgia,serif;color:#c9b6f2;text-shadow:0 1px 8px rgba(0,0,0,.8)} .lc-card.off{opacity:0} /* el tablero del pedestal: piedra negra con glifos que brillan */ .lc-pass{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 60%,rgba(40,16,80,.55),rgba(0,0,0,.78));animation:lcIn .3s ease} .lc-pass-in{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 22px 20px;border-radius:18px; background:linear-gradient(180deg,#17121f,#0b0910);border:1px solid #3b2d58;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06),0 0 40px rgba(130,80,255,.18);color:#e8e0fb;text-align:center} .lc-pass-g{width:78%;height:auto;fill:none;stroke:#a77bff;stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(167,123,255,.8));opacity:.85} .lc-pass h2{margin:2px 0 0;font:600 21px/1.2 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;color:#fff;text-wrap:balance} .lc-pass-d{margin:0;font:italic 16px/1.35 'Cormorant Garamond',Georgia,serif;color:#bfaee6} .lc-pass-i{width:100%;box-sizing:border-box;margin-top:4px;padding:11px 14px;border-radius:10px;border:1px solid #4a3a6e;background:#07060b;color:#f2ecff;font:600 17px/1.2 var(--f-ui);letter-spacing:.12em;text-align:center;outline:none} .lc-pass-i:focus-visible{border-color:#a77bff;box-shadow:0 0 0 3px rgba(167,123,255,.35)} .lc-pass-m{min-height:1.3em;margin:0;font:600 13.5px/1.3 var(--f-ui);color:#ff9fd0} .lc-pass-a{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .lc-pass.no .lc-pass-in{animation:lcNo .42s ease} @keyframes lcIn{from{opacity:0}to{opacity:1}} @keyframes lcNo{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}} @media (prefers-reduced-motion:reduce){.lc-fade,.lc-card{transition:none}.lc-pass,.lc-pass.no .lc-pass-in{animation:none}} /* ================= 1.14 · Andrómeda: Lira (andromeda.js, andromeda_juego.js, andromeda_vida.js) ================= La idea: el canto de los cristales es el borde de luz de la interfaz. Placas de nácar oscuro (índigo de la noche de Lira) con un hilo de luz arriba; la energía es una cuerda de lira que se tensa; quien habla tiene sus cuatro cuerdas. Turquesa = los liranos y tu energía; rosa = los sordinos y el peligro; oro = las Nébulas y lo que se puede hacer. */ .arc.an{--an-ink:#120c24;--an-nacar:#ece6f4;--an-tq:#5ff0e6;--an-rs:#ff6fc8;--an-gold:#e6b862;--an-vi:#9c7bff;background:#1d1230} .an .an-plate,.an-hud,.an-mis,.an-wpn,.an-talk-in{background:linear-gradient(180deg,rgba(32,22,58,.82),rgba(16,11,32,.86));border:1px solid rgba(236,230,244,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(4,2,12,.45);color:var(--an-nacar)} /* la llegada */ .an-card{position:absolute;left:50%;top:17%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(560px,calc(100% - 32px));margin:0;color:#fff;text-align:center;pointer-events:none;transition:opacity 1.4s ease,transform 1.4s ease} .an-card b{font:600 clamp(30px,5vw,54px)/1.05 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.12em;text-indent:.12em;text-shadow:0 0 26px rgba(156,123,255,.55),0 2px 12px rgba(0,0,0,.75)} .an-card span{font:italic 500 clamp(16px,2.2vw,21px)/1.3 'Cormorant Garamond',Georgia,serif;color:#d8c8ff;text-shadow:0 1px 8px rgba(0,0,0,.8)} .an-card p{margin:8px 0 0;max-width:46ch;font:14.5px/1.5 var(--f-ui);color:#efe9fb;text-shadow:0 1px 6px rgba(0,0,0,.9)} .an-card.off{opacity:0;transform:translate(-50%,-8px)} /* volver */ .an-back{position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:7px 15px 7px 11px;border:1px solid rgba(156,123,255,.75);border-radius:999px;background:rgba(18,12,36,.84);color:#f3eeff;font:700 14px var(--f-ui);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 16px rgba(0,0,0,.45)} .an-back svg{width:19px;height:19px;flex:none;color:#c6b2ff} .an-back:hover{background:rgba(40,26,76,.94)}.an-back:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Nébulas, energía y reputación */ .an-hud{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:8px;width:min(230px,calc(100% - 200px));padding:10px 12px 11px;border-radius:14px;pointer-events:none;font:600 12px/1.2 var(--f-ui)} .an-hud:empty{display:none} .an-neb{display:flex;align-items:center;gap:8px} .an-neb-ic{width:24px;height:24px;flex:none;filter:drop-shadow(0 0 6px rgba(217,184,255,.6))} .an-neb b{font:700 21px/1 Cinzel,Georgia,serif;color:var(--an-gold);font-variant-numeric:tabular-nums;letter-spacing:.02em} .an-neb span{color:#bfb2dc;font-size:12px} .an-hp{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px} .an-hp span{color:#bfb2dc} .an-hp i{--v:1;position:relative;display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden} .an-hp i::before{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v));background:linear-gradient(90deg,#2fc9c0,var(--an-tq));box-shadow:0 0 10px rgba(95,240,230,.7);transition:transform .25s cubic-bezier(.32,.72,0,1)} .an-hp.low i::before{background:linear-gradient(90deg,#d23d97,var(--an-rs));box-shadow:0 0 10px rgba(255,111,200,.8);animation:anLow 1s ease-in-out infinite} .an-rep{display:flex;flex-wrap:wrap;gap:6px 10px;color:#cfc4e8;font-size:11.5px} .an-rep span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .an-rep span::before{content:'';width:7px;height:7px;border-radius:50%;background:#8f86a8} .an-rep .r-F::before{background:var(--an-tq);box-shadow:0 0 6px var(--an-tq)} .an-rep .r-E::before{background:var(--an-rs);box-shadow:0 0 6px var(--an-rs)} /* misiones */ .an-mis{position:absolute;right:14px;top:70px;z-index:3;width:min(260px,calc(100% - 28px));padding:9px 13px 10px;border-radius:14px;pointer-events:none} .an-mis b{display:block;margin-bottom:4px;font:600 13px/1.2 Cinzel,Georgia,serif;letter-spacing:.08em;color:var(--an-gold)} .an-mis ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px} .an-mis li{position:relative;padding-left:14px;font:500 13px/1.35 var(--f-ui);color:#ece6f4} .an-mis li::before{content:'';position:absolute;left:0;top:.5em;width:6px;height:6px;transform:rotate(45deg);border:1.5px solid var(--an-gold)} /* el arma */ .an-wpn{position:absolute;right:92px;bottom:20px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;pointer-events:none;font:700 13px/1.1 var(--f-ui)} .an-wn{white-space:nowrap} .an-heat{position:relative;display:block;width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden} .an-heat i{--v:0;position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--v));background:linear-gradient(90deg,#ffb26b,#ff5aa8)} .an-heat.over i{animation:anLow .5s ease-in-out infinite} .an-keys{display:flex;gap:4px} .an-keys kbd{display:grid;place-items:center;min-width:20px;height:20px;border-radius:5px;border:1px solid rgba(236,230,244,.3);color:#cfc4e8;font:700 11px/1 var(--f-ui)} .an-keys kbd.on{border-color:var(--an-gold);color:#1a1030;background:var(--an-gold)} .an-cross{position:absolute;left:50%;top:50%;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);box-shadow:0 0 6px rgba(156,123,255,.8)} .an-cross::after{content:'';position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff} /* textos que suben (Nébulas, cristales, silenciadores) */ .an-float{position:absolute;left:50%;top:27%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none} .an-float p{margin:0;padding:3px 12px;border-radius:999px;background:rgba(14,9,28,.55);font:700 15px/1.3 var(--f-ui);text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap;animation:anFloat 2.4s cubic-bezier(.32,.72,0,1) both} /* las conversaciones: una placa de concha con las cuatro cuerdas de quien habla */ .an-talk{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:8;width:min(600px,calc(100% - 24px))} .an-talk-in{padding:14px 18px 15px;border-radius:18px;border-color:rgba(230,184,98,.35)} .an-talk-who{position:relative;margin:0 0 12px;padding-bottom:9px;font:600 19px/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.08em;color:var(--an-gold)} .an-talk-who::after{content:'';position:absolute;left:0;right:30%;bottom:0;height:7px;background:repeating-linear-gradient(180deg,rgba(95,240,230,.7) 0 1px,transparent 1px 2px);opacity:.75;transform-origin:left;animation:anStrings 1.6s cubic-bezier(.32,.72,0,1) both} .an-talk-t{margin:0;font:16px/1.55 var(--f-ui);color:#f3eefb;max-width:62ch} .an-talk-o{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px} .an-talk-o .btn{min-height:42px} /* la tienda de Tímpano */ .an-shop-w{display:flex;align-items:center;gap:7px;margin:-4px 0 10px;font:600 13px/1 var(--f-ui);color:#cfc4e8} .an-shop-w b{font:700 18px/1 Cinzel,Georgia,serif;color:var(--an-gold)} .an-shop ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;max-height:min(46vh,340px);overflow:auto} .an-shop li{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(236,230,244,.08)} .an-shop-t{display:flex;flex-direction:column;gap:2px;min-width:0} .an-shop-t b{font:700 14.5px/1.2 var(--f-ui);color:#fff} .an-shop-t small{font:13px/1.35 var(--f-ui);color:#c4b9dc} .an-shop-i{width:42px;height:42px;border-radius:10px;background:radial-gradient(circle at 50% 35%,rgba(156,123,255,.35),rgba(20,12,40,.9));background-repeat:no-repeat;background-position:center;background-size:30px 30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} .an-i-pis{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 11h20l3 2v3H15l-1 2h-4l-2 8H4l2-9H4z' fill='%23d8d4e6'/%3E%3Cpath d='M6 13h18' stroke='%235ff0e6' stroke-width='1.5'/%3E%3Ccircle cx='27' cy='14.5' r='1.6' fill='%23ff6fc8'/%3E%3C/svg%3E"),radial-gradient(circle at 50% 35%,rgba(156,123,255,.35),rgba(20,12,40,.9))} .an-i-esc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 4l10 4v7c0 6-4 11-10 13C10 26 6 21 6 15V8z' stroke='%235ff0e6' stroke-width='2'/%3E%3Cpath d='M11 15a5 5 0 0 1 10 0M13.5 15a2.5 2.5 0 0 1 5 0' stroke='%23e6b862' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),radial-gradient(circle at 50% 35%,rgba(156,123,255,.35),rgba(20,12,40,.9))} .an-i-vida{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3l6 8-6 18-6-18z' fill='%235ff0e6' fill-opacity='.85'/%3E%3Cpath d='M16 3l6 8H10z' fill='%23fff' fill-opacity='.6'/%3E%3C/svg%3E"),radial-gradient(circle at 50% 35%,rgba(156,123,255,.35),rgba(20,12,40,.9))} .an-i-kat{opacity:.55;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M26 4L11 21' stroke='%23ff6fc8' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M8 20l4 4M10 22l-5 5' stroke='%23d8d4e6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"),radial-gradient(circle at 50% 35%,rgba(156,123,255,.35),rgba(20,12,40,.9))} .an-shop-own,.an-shop-soon{font:600 12.5px/1.2 var(--f-ui);color:#b9aed6;white-space:nowrap} .an-shop-own{color:var(--an-tq)} .an-shop .btn[aria-disabled="true"]{opacity:.55} .an-shop-m{min-height:1.2em;margin:8px 0 0;font:600 13px/1.3 var(--f-ui);color:var(--an-tq)} /* los golpes: un estático rosa en el borde de la vista (sin sangre) */ .an-hurt{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse 85% 75% at 50% 50%,transparent 55%,rgba(255,80,190,.32) 82%,rgba(120,20,110,.6) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)} .an-hurt.on{animation:anHurt .55s ease-out both} /* 1.16.10 · la onda del Escudo de eco en primera persona: un anillo de luz que se abre desde el centro */ .an-eco{position:absolute;left:50%;top:50%;z-index:2;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;pointer-events:none;opacity:0;border:3px solid rgba(120,240,255,.85);box-shadow:0 0 18px rgba(120,240,255,.6),inset 0 0 18px rgba(170,120,255,.45)} .an-eco.on{animation:anEco .5s ease-out both} @keyframes anEco{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(2.6)}} @media (prefers-reduced-motion:reduce){.an-eco.on{animation:none}} /* te desvaneces: la vista se vuelve luz y reapareces junto al aro */ .an-dead{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(250,240,255,.92),rgba(170,140,255,.85) 45%,rgba(30,16,60,.96) 100%);color:#1c1036;opacity:0} .an-dead.on{animation:anDead 2.6s ease both} .an-dead b{font:600 clamp(28px,5vw,48px)/1.1 Cinzel,Georgia,serif;letter-spacing:.1em;text-indent:.1em} .an-dead span{font:italic 500 18px/1.3 'Cormorant Garamond',Georgia,serif;color:#3a2470} /* el paso por el portal (violeta) o el teletransporte del reloj (cian) */ .an-flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .7s ease;background:radial-gradient(circle at 50% 50%,#f1e6ff 0,#9c6cff 28%,#21104a 72%)} .an-flash.rj{background:radial-gradient(circle at 50% 50%,#e9feff 0,#4fd9ff 26%,#0b2140 72%)} .an-flash.on{opacity:1;transition:none} /* avisos y botones de siempre, con el color de Lira */ .an .arc-prompt{border-color:var(--an-gold);background:rgba(18,12,36,.9);z-index:5} .an .arc-prompt.wait{border-color:var(--an-tq);cursor:default} .an .arc-prompt.wait kbd{display:none} .touch.an .arc-prompt kbd{display:none} .win .arc.an .arc-help{top:auto;bottom:84px;max-width:min(520px,calc(100% - 28px));background:rgba(18,12,36,.8);transition:opacity 1s ease;z-index:3} .win .arc.an .arc-help.off{opacity:0} .win .arc.an.touch .arc-help{max-width:calc(100% - 180px);bottom:84px} .an .jmp-btn{z-index:5} .an-fire,.an-wbtn{position:absolute;z-index:5;display:grid;place-items:center;border-radius:50%;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer} .an-fire{right:88px;bottom:90px;width:68px;height:68px;border:2px solid rgba(255,140,210,.95);background:radial-gradient(circle at 50% 40%,rgba(255,111,200,.55),rgba(90,16,70,.75));color:#fff;box-shadow:0 0 18px rgba(255,111,200,.45)} .an-fire svg{width:30px;height:30px} .an-fire:active{transform:scale(.95)} .an-wbtn{right:96px;bottom:170px;width:50px;height:50px;border:1.5px solid rgba(230,184,98,.9);background:rgba(18,12,36,.7);color:var(--an-gold)} .an-wbtn svg{width:24px;height:24px} .an-fire[hidden],.an-wbtn[hidden]{display:none} .touch.an .an-wpn{right:auto;left:14px;bottom:auto;top:auto;position:absolute} .touch.an .an-keys{display:none} .arc.an.no3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;height:auto;min-height:300px} .arc.an.no3d > :not(.an-no3d):not(.an-back){display:none} .arc.an.no3d .an-back{position:static;order:2} .an-no3d{color:#f3eeff;text-align:center} @keyframes anLow{50%{opacity:.55}} @keyframes anFloat{0%{opacity:0;transform:translateY(10px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-16px)}} @keyframes anStrings{0%{transform:scaleX(0)}55%{transform:scaleX(1.02) skewX(-8deg)}70%{transform:scaleX(1) skewX(5deg)}85%{transform:skewX(-2deg)}100%{transform:none}} @keyframes anHurt{0%{opacity:0}18%{opacity:1}100%{opacity:0}} @keyframes anDead{0%{opacity:0}25%{opacity:1}80%{opacity:1}100%{opacity:0}} @media (max-width:720px){ .an-hud{top:62px;left:10px;width:min(210px,calc(100% - 20px));padding:8px 10px 9px;gap:6px} .an-neb b{font-size:18px} .an-mis{top:62px;right:10px;width:min(190px,calc(50% - 16px));padding:7px 10px 8px} .an-mis li:not(:first-child){display:none} .an-back{top:10px;right:10px;min-height:42px;padding:6px 12px 6px 9px;font-size:13px} .an-card{top:24%} .an-card p{display:none} .an-talk{bottom:12px} .an-talk-in{padding:12px 14px 13px} .an-talk-t{font-size:15px} .win .arc.an .arc-help{bottom:80px;font-size:13px} } .touch.an .an-wpn{left:10px;top:122px;bottom:auto;right:auto} @media (max-width:720px){ .an-hud{top:10px;width:168px;box-sizing:border-box} .an-back{width:44px;padding:0;justify-content:center} .an-back span{display:none} .an-mis{top:62px;width:calc(100% - 198px);box-sizing:border-box} } @media (hover:hover) and (pointer:fine){ .win.fw:not(.fw-imm) .an-hud,.win.fw:not(.fw-imm) .an-back{top:50px} .win.fw:not(.fw-imm) .an-mis{top:106px} } /* 1.17.52: sin barra (fw-imm), arriba */ @media (prefers-reduced-motion:reduce){.an-card,.win .arc.an .arc-help,.an-flash{transition:none}.an-float p,.an-talk-who::after,.an-hp.low i::before,.an-heat.over i{animation:none}.an-hurt.on{animation-duration:.2s}} /* ================= 1.14 · El reloj inteligente (parts/reloj.js) ================= Caja de titanio cepillado, cristal negro y una luz cian-violeta: la misma en todos los mundos (es un aparato, no un tema). */ .rj-btn{position:absolute;right:16px;bottom:16px;z-index:6;width:62px;height:62px;padding:4px;border:0;border-radius:30%;cursor:pointer; background:conic-gradient(from 210deg,#e6e9ef,#868c96,#f3f5f8,#6c727c,#c9ced6,#e6e9ef);box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.35);-webkit-tap-highlight-color:transparent} .rj-btn.touch{bottom:168px} .rj-btn[hidden]{display:none} .rj-mini{display:grid;place-items:center;width:100%;height:100%;border-radius:26%;background:radial-gradient(circle at 35% 30%,#16203a,#05070d 72%);box-shadow:inset 0 0 0 2px #0b0d12,inset 0 0 10px rgba(95,242,255,.25)} .rj-mt{font:700 13px/1 Orbitron,var(--f-ui);color:#c6faff;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(95,242,255,.8)} .rj-dot{position:absolute;right:-2px;top:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#ff4f9a;color:#fff;font:800 11px/1 var(--f-ui);font-style:normal;box-shadow:0 0 0 2px #0b0d12} .rj-dot[hidden]{display:none} .rj-btn kbd{position:absolute;left:-4px;bottom:-4px;min-width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:rgba(8,10,20,.85);color:#c6faff;font:700 10px/1 var(--f-ui);border:1px solid rgba(95,242,255,.4)} .rj-btn:focus-visible{outline:2px solid #5ff2ff;outline-offset:3px} .rj-btn.buzz{animation:rjBuzz .6s ease} @keyframes rjBuzz{0%,100%{transform:none}15%{transform:rotate(-9deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}} .mu:not([data-view="hall"]) .rj-btn,.bb:not([data-view="hall"]) .rj-btn{display:none} .mu,.bb{position:relative} /* levantado */ .rj-ov{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:16px 16px 0;overflow:hidden; background:radial-gradient(ellipse at 50% 85%,rgba(30,60,110,.32),rgba(3,5,12,.66) 75%);--d:min(70vmin,400px);--c1:#5ff2ff;--c2:#b78bff} .rj-ov[hidden]{display:none} .rj-ov.synth{--d:min(46vmin,290px)} .rj-watch{position:relative;width:var(--d);height:var(--d);margin-bottom:calc(var(--d) * .1);flex:none} .rj-ov.up .rj-watch{animation:rjUp .42s cubic-bezier(.2,.9,.25,1.05)} @keyframes rjUp{from{transform:translate(28%,62%) rotate(18deg) scale(.4);opacity:0}to{transform:none;opacity:1}} .rj-strap{position:absolute;left:50%;width:calc(var(--d) * .5);height:calc(var(--d) * .62);transform:translateX(-50%);border-radius:calc(var(--d) * .08); background:repeating-linear-gradient(0deg,transparent 0 calc(var(--d) * .055),rgba(255,255,255,.035) calc(var(--d) * .055) calc(var(--d) * .06)),linear-gradient(90deg,#14161c,#262a33 50%,#14161c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .rj-strap.t{bottom:62%}.rj-strap.b{top:62%} .rj-case{position:absolute;inset:0;border-radius:24%;padding:calc(var(--d) * .055);background:conic-gradient(from 200deg,#eef0f4,#8a909a,#f7f8fa,#6a707a,#cdd2d9,#eef0f4); box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.5),inset 0 0 calc(var(--d) * .02) rgba(0,0,0,.4)} .rj-crown,.rj-side{position:absolute;right:calc(var(--d) * -.045);width:calc(var(--d) * .07);border:0;border-radius:calc(var(--d) * .02);cursor:pointer; background:repeating-linear-gradient(0deg,#9aa0aa 0 2px,#e6e9ee 2px 4px);box-shadow:0 2px 6px rgba(0,0,0,.4)} .rj-crown{top:40%;height:calc(var(--d) * .14)} .rj-side{top:62%;height:calc(var(--d) * .09);background:linear-gradient(90deg,#c9ced6,#f1f3f6);transform:rotate(-14deg)} .rj-crown:focus-visible,.rj-side:focus-visible{outline:2px solid var(--c1);outline-offset:2px} .rj-screen{position:relative;width:100%;height:100%;border-radius:20%;overflow:hidden;background:radial-gradient(circle at 36% 30%,#152038,#05070d 70%);box-shadow:inset 0 0 0 calc(var(--d) * .012) #07080c,inset 0 0 calc(var(--d) * .08) rgba(95,242,255,.12);color:#e8fbff;font-family:var(--f-ui)} .rj-screen::after{content:'';position:absolute;inset:0;border-radius:20%;pointer-events:none;background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05))} .rj-ring{position:absolute;inset:1.5%;width:97%;height:97%;pointer-events:none} .rj-ring rect,.rj-ring path{fill:none;stroke-width:1.1}.rj-ring .bg{stroke:rgba(255,255,255,.07)}.rj-ring .fg{stroke:var(--c1);stroke-linecap:round;filter:drop-shadow(0 0 2px var(--c1))} .rj-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center} .rj-screen button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent} .rj-screen button:focus-visible{outline:2px solid var(--c1);outline-offset:2px} /* inicio: la hora */ .rj-home{display:flex;flex-direction:column;align-items:center;justify-content:center;width:84%;height:100%;padding:11% 0 9%;box-sizing:border-box} .rj-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:calc(var(--d) * .06);margin-bottom:calc(var(--d) * .02)} .rj-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 5px;border-radius:999px;background:rgba(183,139,255,.18);color:#e3d4ff;font-size:calc(var(--d) * .028)} .rj-chip svg{width:calc(var(--d) * .036);height:calc(var(--d) * .036)} .rj-date{margin:0;color:#9fc6d6;font-size:calc(var(--d) * .04);font-weight:600;letter-spacing:.04em} .rj-time{margin:calc(var(--d) * .005) 0 0;font:700 calc(var(--d) * .19)/1 Orbitron,var(--f-ui);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#f2fdff;text-shadow:0 0 calc(var(--d) * .04) rgba(95,242,255,.55)} .rj-where{margin:calc(var(--d) * .02) 0 0;max-width:100%;color:var(--c1);font-size:calc(var(--d) * .038);font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rj-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--d) * .02);width:100%;margin-top:calc(var(--d) * .045)} /* 1.17.51: cada app ocupa lo mismo y su nombre cabe (antes la fila era más ancha que la carátula y se cortaban las de las orillas) */ .rj-apps button{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--d) * .012);width:100%;min-width:0;padding:0;border:0;background:none;cursor:pointer} .rj-apps button svg{box-sizing:border-box;width:calc(var(--d) * .15);height:calc(var(--d) * .15);padding:calc(var(--d) * .033);border-radius:30%;background:linear-gradient(160deg,rgba(95,242,255,.22),rgba(183,139,255,.2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#eafcff;transition:transform .15s ease} .rj-apps button:hover svg{transform:scale(1.07)} .rj-apps span{max-width:100%;font-size:calc(var(--d) * .03);line-height:1.15;color:#bcd6e0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rj-apps i{position:absolute;right:-2px;top:-2px;min-width:calc(var(--d) * .05);height:calc(var(--d) * .05);padding:0 3px;border-radius:999px;display:grid;place-items:center;background:#ff4f9a;color:#fff;font:800 calc(var(--d) * .028)/1 var(--f-ui);font-style:normal} /* apps */ .rj-app{display:flex;flex-direction:column;align-items:center;width:88%;height:100%;padding-top:7%;padding-bottom:6%;box-sizing:border-box;gap:calc(var(--d) * .025);min-height:0} .rj-hd{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;flex:none} .rj-hd b{font-size:calc(var(--d) * .045);font-weight:700} .rj-back{display:grid;place-items:center;width:calc(var(--d) * .085);height:calc(var(--d) * .085);padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer} .rj-back svg{width:62%;height:62%} .rj-list{list-style:none;margin:0;padding:0 2px;width:100%;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin} .rj-n{display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border:0;border-radius:10px;background:rgba(255,255,255,.05);text-align:left;cursor:pointer} .rj-n.new{background:rgba(95,242,255,.12);box-shadow:inset 2px 0 0 var(--c1)} .rj-n .ntc-ic{flex:none;width:calc(var(--d) * .065);height:calc(var(--d) * .065)} .rj-n .ntc-ic svg{width:100%;height:100%} .rj-nt{display:flex;flex-direction:column;min-width:0} .rj-nt b{font-size:calc(var(--d) * .033);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rj-nt small{font-size:calc(var(--d) * .027);color:#9fc0cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rj-empty{margin:auto 0;color:#9fc0cc;font-size:calc(var(--d) * .036);text-align:center} .rj-pill{flex:none;padding:calc(var(--d) * .014) calc(var(--d) * .04);border:1px solid rgba(95,242,255,.45);border-radius:999px;background:rgba(95,242,255,.08);font-size:calc(var(--d) * .032);font-weight:600;cursor:pointer} .rj-pill[aria-pressed="true"]{background:linear-gradient(90deg,rgba(95,242,255,.35),rgba(183,139,255,.35));border-color:transparent} /* synth */ .rj-sy{gap:calc(var(--d) * .03);justify-content:flex-start} .rj-pre{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%} .rj-pre button{padding:calc(var(--d) * .016) 4px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.05);font-size:calc(var(--d) * .036);font-weight:600;cursor:pointer} .rj-pre button[aria-pressed="true"]{border-color:var(--c1);background:rgba(95,242,255,.18);box-shadow:0 0 10px rgba(95,242,255,.3)} .rj-oct{display:flex;align-items:center;gap:8px;font-size:calc(var(--d) * .036);font-variant-numeric:tabular-nums} .rj-oct button{width:calc(var(--d) * .085);height:calc(var(--d) * .085);border:0;border-radius:50%;background:rgba(255,255,255,.1);font:700 calc(var(--d) * .05)/1 var(--f-ui);cursor:pointer} .rj-hint{margin:0;color:#9fc0cc;font-size:calc(var(--d) * .028);text-align:center;line-height:1.3} /* 1.14.5 · cuando algo te escucha (el baúl de la Plaza): una línea dorada que respira y el nombre de cada tecla blanca */ .rj-ear{margin:0;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,214,140,.55);background:rgba(60,36,8,.5);color:#ffe2a8;font:600 calc(var(--d) * .03)/1.3 var(--f-ui);text-align:center;animation:rjEar 2.4s ease-in-out infinite} .rj-ear[hidden]{display:none} @keyframes rjEar{50%{border-color:rgba(255,214,140,.95);box-shadow:0 0 12px rgba(255,200,110,.35)}} .rj-keys.lbl .rj-k.w{position:relative} .rj-kl{position:absolute;left:0;right:0;bottom:6%;color:#dffcff;font:700 clamp(9px,2.1vmin,13px)/1 var(--f-ui);text-align:center;text-shadow:0 0 6px rgba(95,242,255,.9);pointer-events:none} @media (prefers-reduced-motion:reduce){.rj-ear{animation:none}} /* 1.14.5: mientras algo escucha, la pastilla dorada sustituye a la ayuda (no cabían las dos en la esfera) y el holograma pasa delante de la correa (tapaba Fa y Sol) */ .rj-ear:not([hidden]) + .rj-hint{display:none} .rj-holo{z-index:2} /* el holograma: un teclado de luz proyectado desde la muñeca */ .rj-holo{position:relative;width:min(100%,760px);height:clamp(110px,22vh,180px);flex:none;display:flex;align-items:flex-end;justify-content:center;perspective:700px} .rj-holo[hidden]{display:none} .rj-keys{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);width:100%;height:100%;transform:rotateX(16deg);transform-origin:50% 100%;touch-action:none; filter:drop-shadow(0 0 10px rgba(95,242,255,.45));animation:rjFlick 6s linear infinite} .rj-keys::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);mix-blend-mode:screen} @keyframes rjFlick{0%,100%{opacity:.92}47%{opacity:.92}48%{opacity:.7}49%{opacity:.95}72%{opacity:.86}} .rj-k{padding:0;border:0;cursor:pointer;touch-action:none} .rj-k.w{height:100%;margin:0 1px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,rgba(95,242,255,.16),rgba(95,242,255,.32));box-shadow:inset 0 0 0 1px rgba(160,250,255,.6)} .rj-k.b{position:absolute;top:0;left:calc((var(--i) + 1) * 100% / var(--n) - 100% / var(--n) * .3);width:calc(100% / var(--n) * .6);height:60%;border-radius:0 0 5px 5px;background:linear-gradient(180deg,rgba(183,139,255,.4),rgba(120,80,220,.55));box-shadow:inset 0 0 0 1px rgba(210,180,255,.7);z-index:1} .rj-k.on{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(95,242,255,.8));box-shadow:0 0 18px rgba(95,242,255,.9),inset 0 0 0 1px #fff} .rj-k.b.on{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(183,139,255,.9))} .rj-beam{position:absolute;left:50%;bottom:-40px;width:70%;height:calc(100% + 40px);transform:translateX(-50%);pointer-events:none;background:linear-gradient(0deg,rgba(95,242,255,.18),rgba(95,242,255,0));clip-path:polygon(44% 100%,56% 100%,100% 0,0 0);opacity:.7} /* mensajes */ .rj-ms{gap:calc(var(--d) * .02)} .rj-av{display:inline-grid;width:calc(var(--d) * .07);height:calc(var(--d) * .07)} .rj-av svg{width:100%;height:100%} .rj-chat{width:100%;flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:5px;padding:2px;scrollbar-width:thin} .rj-b{max-width:88%;margin:0;padding:calc(var(--d) * .013) calc(var(--d) * .028);border-radius:12px;font-size:calc(var(--d) * .033);line-height:1.32;overflow-wrap:anywhere} .rj-b.bit{align-self:flex-start;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(95,242,255,.3);border-bottom-left-radius:4px} .rj-b.me{align-self:flex-end;background:linear-gradient(135deg,#6b4fd8,#9a5be0);border-bottom-right-radius:4px} .rj-b.typing{display:flex;gap:4px;padding:calc(var(--d) * .02) calc(var(--d) * .03)} .rj-b.typing i{width:6px;height:6px;border-radius:50%;background:var(--c1);animation:rjDot 1s ease infinite} .rj-b.typing i:nth-child(2){animation-delay:.15s}.rj-b.typing i:nth-child(3){animation-delay:.3s} @keyframes rjDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} form.rj-in{display:flex;align-items:center;gap:5px;width:92%;flex:none;margin:0} form.rj-in input{flex:1;min-width:0;height:calc(var(--d) * .1);padding:0 calc(var(--d) * .03);border:1px solid rgba(95,242,255,.4);border-radius:999px;background:rgba(0,0,0,.35);color:#eafcff;font:500 calc(var(--d) * .036) var(--f-ui);outline:none} form.rj-in input:focus{border-color:var(--c1);box-shadow:0 0 0 2px rgba(95,242,255,.25)} @media (pointer:coarse){ form.rj-in input{font-size:16px} } /* 1.14.2: con letra menor a 16 px, Safari del iPhone acerca la página al escribir y la deja cortada */ form.rj-in button{display:grid;place-items:center;width:calc(var(--d) * .1);height:calc(var(--d) * .1);padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));color:#071018;cursor:pointer} form.rj-in button svg{width:55%;height:55%} @media (max-width:600px){.rj-ov{--d:min(86vw,360px)}.rj-ov.synth{--d:min(64vw,250px)}.rj-btn:not(.touch){bottom:14px;right:12px}} @media (prefers-reduced-motion:reduce){.rj-ov.up .rj-watch,.rj-btn.buzz,.rj-keys{animation:none}} /* 1.16 · Viajes: los destinos, cada uno con su color y su botón */ .rj-trips{gap:7px} .rj-trip{position:relative;padding:7px 8px} .rj-trip:disabled{cursor:default;opacity:.62} .rj-tic{flex:none;display:grid;place-items:center;width:calc(var(--d) * .085);height:calc(var(--d) * .085);border-radius:50%;background:radial-gradient(circle at 35% 30%,hsla(var(--th),80%,70%,.55),hsla(var(--th),70%,40%,.4));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff} .rj-tic svg{width:62%;height:62%} .rj-trip .rj-nt{flex:1} .rj-go{flex:none;padding:3px 9px;border-radius:999px;background:linear-gradient(90deg,rgba(95,242,255,.35),rgba(183,139,255,.35));font-size:calc(var(--d) * .028);font-weight:700;color:#eafcff} .rj-trip:disabled .rj-go{background:rgba(255,255,255,.08);color:#9fc0cc} .rj-trip:not(:disabled):hover .rj-go{filter:brightness(1.2)} /* 1.16.1 · en pantalla completa, los avisos suben para no tapar el reloj de la esquina (con mouse se quedaba sin poder darle clic) */ @media (hover:hover) and (pointer:fine){ html.fw-on.rj-esq #notes{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)} } /* ---------- 1.19 · carátula cuadrada con esquinas redondeadas (Andre, 24 oct: «hacerlo cuadrado con esquinas redondeadas para que quepa más información») y el reloj en el escritorio ---------- */ .rj-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:0 6%;box-sizing:border-box} .rj-top .rj-date{text-align:left} .rj-day{margin:0;color:#e3d4ff;font-size:calc(var(--d) * .036);font-weight:700;letter-spacing:.02em;white-space:nowrap} .rj-home .rj-chips{margin:calc(var(--d) * .015) 0 0} .rj-home .rj-time{margin-top:calc(var(--d) * .02)} .rj-last{display:flex;align-items:center;gap:7px;width:100%;margin-top:calc(var(--d) * .035);padding:calc(var(--d) * .016) calc(var(--d) * .025);border:0;border-radius:12px;background:rgba(95,242,255,.1);box-shadow:inset 2px 0 0 var(--c1);text-align:left;cursor:pointer} .rj-last .ntc-ic{flex:none;width:calc(var(--d) * .065);height:calc(var(--d) * .065)} .rj-last .ntc-ic svg{width:100%;height:100%} .rj-last:hover{background:rgba(95,242,255,.16)} .rj-hd{justify-content:flex-start} .rj-hd b{flex:1;text-align:center;margin-right:calc(var(--d) * .085)} /* en el escritorio: sube del reloj de la barra de tareas, en la esquina de abajo a la derecha, sin oscurecer el escritorio */ #rj-desk{position:fixed;inset:0;z-index:64;pointer-events:none} #rj-desk:empty,#rj-desk:has(>.rj-ov[hidden]){display:none} .rj-ov.rj-desk{position:fixed;inset:0;align-items:flex-end;justify-content:flex-end;padding:16px 18px calc(var(--bar-h,46px) + env(safe-area-inset-bottom,0px) + 14px);background:none;pointer-events:auto;--d:min(46vmin,340px)} .rj-ov.rj-desk.synth{--d:min(34vmin,250px)} .rj-ov.rj-desk .rj-strap{display:none} .rj-ov.rj-desk .rj-watch{margin-bottom:0;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))} .rj-ov.rj-desk.up .rj-watch{animation:rjDeskUp .32s cubic-bezier(.2,.9,.25,1.05);transform-origin:100% 100%} @keyframes rjDeskUp{from{transform:translateY(18px) scale(.86);opacity:0}to{transform:none;opacity:1}} .rj-ov.rj-desk .rj-holo{width:min(100%,640px)} @media (max-width:600px){ .rj-ov.rj-desk{align-items:center;padding-inline:12px;--d:min(86vw,340px)} .rj-ov.rj-desk.synth{--d:min(60vw,240px)} } @media (prefers-reduced-motion:reduce){ .rj-ov.rj-desk.up .rj-watch{animation:none} } /* 1.19: el foco de las apps del reloj, redondeado como el ícono (antes era el recuadro de toda la celda) y solo con el teclado */ .rj-apps button:focus-visible{outline:none} .rj-apps button:focus-visible svg{outline:2px solid var(--c1);outline-offset:2px} /* el texto nunca toca el anillo: con el reloj chico (teléfono) las esquinas se comen más */ @media (max-width:600px){ .rj-home{width:80%;padding-top:13%} .rj-app{width:84%;padding-top:10%} } /* ================= 1.8 · Tema del mes (parts/temames.js) ================= */ .tm-hero{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:16px;align-items:stretch;margin:14px 0 6px;padding:12px;border-radius:max(10px,var(--radius));background:var(--win-bg);color:var(--win-fg);border:1px solid var(--btn-border,rgba(0,0,0,.15));box-shadow:0 10px 28px rgba(40,16,4,.18)} @supports (background:color-mix(in srgb,red,blue)){.tm-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--win-bg)),var(--win-bg) 70%)}} .tm-pic{display:block;min-height:124px;border-radius:max(8px,calc(var(--radius)*.8));background:var(--wall-thumb) center/cover no-repeat,var(--bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .tm-txt{display:flex;flex-direction:column;justify-content:center;min-width:0} .tm-tag{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 6px;font-size:.82rem} .tm-tag span{padding:3px 10px;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-weight:700;letter-spacing:.04em} .tm-left{color:var(--accent);font-weight:700} .tm-hero h3{margin:0 0 6px;font-family:var(--f-title);font-size:1.3rem;line-height:1.2;text-wrap:balance} .tm-b{margin:0 0 12px;font-size:.93rem;line-height:1.45;max-width:62ch} .tm-until{color:var(--muted);white-space:nowrap} .tm-acts{display:flex;flex-wrap:wrap;gap:8px} @media (max-width:560px){.tm-hero{grid-template-columns:1fr}.tm-pic{min-height:112px}} /* 1.8 · Otoño, tema del mes de octubre — 1.9: refinado. Barra de título con hojas de arce en dos tonos y canto grabado, papel tibio con grano, hojas que se posan sobre la barra de tareas, la marca en oro, barras de desplazamiento color óxido */ [data-os="otono"] .win-title{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%2240%22 viewBox=%220 0 220 40%22%3E%3Cpath transform=%22translate(8 7) rotate(-18 12 12) scale(0.82)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(255,244,222,.26)%22/%3E%3Cpath transform=%22translate(58 16) rotate(32 12 12) scale(0.5)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(140,44,10,.16)%22/%3E%3Cpath transform=%22translate(96 4) rotate(12 12 12) scale(0.62)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(255,236,200,.2)%22/%3E%3Cpath transform=%22translate(140 14) rotate(-40 12 12) scale(0.92)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(150,50,12,.13)%22/%3E%3Cpath transform=%22translate(186 6) rotate(60 12 12) scale(0.48)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(255,244,222,.24)%22/%3E%3C/svg%3E") 0 0/220px 40px repeat-x,linear-gradient(180deg,#f7b768 0%,#ea8d42 52%,#d46a2c 100%);box-shadow:inset 0 1px 0 rgba(255,240,210,.7),inset 0 -1px 0 rgba(255,214,160,.35),inset 0 -2px 0 #93380f} [data-os="otono"] .win-title h2{text-shadow:0 1px 0 rgba(255,232,196,.55)} [data-os="otono"] .win{box-shadow:0 24px 52px rgba(70,26,6,.36),0 6px 14px rgba(70,26,6,.18),0 2px 0 rgba(255,230,190,.25);border-color:#c49a74} [data-os="otono"] .win-body{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22g%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .42 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .07 0%22/%3E%3C/filter%3E%3Crect width=%22180%22 height=%22180%22 filter=%22url(%23g)%22/%3E%3C/svg%3E"),radial-gradient(circle at 12% 8%,rgba(243,168,92,.12),transparent 38%),radial-gradient(circle at 92% 96%,rgba(168,60,20,.08),transparent 42%)} [data-os="otono"] #bar{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%2248%22 viewBox=%220 0 180 48%22%3E%3Cpath transform=%22translate(12 10) rotate(-20 12 12) scale(1)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(243,168,92,.09)%22/%3E%3Cpath transform=%22translate(84 18) rotate(30 12 12) scale(0.72)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(243,168,92,.08)%22/%3E%3Cpath transform=%22translate(138 6) rotate(-50 12 12) scale(0.56)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(255,214,150,.07)%22/%3E%3C/svg%3E") 0 50%/180px 48px repeat-x,linear-gradient(180deg,#74391a 0%,#4c2410 55%,#381a0b 100%);box-shadow:inset 0 1px 0 rgba(255,200,140,.18),0 -8px 24px rgba(40,14,2,.28)} [data-os="otono"] #bar::before{content:"";position:absolute;left:0;right:0;top:-17px;height:30px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%2224%22 viewBox=%220 0 600 24%22%3E%3Cpath transform=%22translate(37.2 4.6) rotate(-62 12 12) scale(0.78)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(30,10,2,.35)%22/%3E%3Cpath transform=%22translate(36 3) rotate(-62 12 12) scale(0.78)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22%23c2461a%22/%3E%3Cpath transform=%22translate(36 3) rotate(-62 12 12) scale(0.78)%22 d=%22M12 21.6V6.2M12 14.2l-4.6-3.6M12 14.2l4.6-3.6%22 stroke=%22%237a240a%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath transform=%22translate(53.2 9.6) rotate(28 12 12) scale(0.58)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(30,10,2,.35)%22/%3E%3Cpath transform=%22translate(52 8) rotate(28 12 12) scale(0.58)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22%23efa23a%22/%3E%3Cpath transform=%22translate(52 8) rotate(28 12 12) scale(0.58)%22 d=%22M12 21.6V6.2M12 14.2l-4.6-3.6M12 14.2l4.6-3.6%22 stroke=%22%23a5601a%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath transform=%22translate(215.2 5.6) rotate(84 12 12) scale(0.7)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(30,10,2,.35)%22/%3E%3Cpath transform=%22translate(214 4) rotate(84 12 12) scale(0.7)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22%23e07a2c%22/%3E%3Cpath transform=%22translate(214 4) rotate(84 12 12) scale(0.7)%22 d=%22M12 21.6V6.2M12 14.2l-4.6-3.6M12 14.2l4.6-3.6%22 stroke=%22%238f3c10%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath transform=%22translate(373.2 3.6) rotate(-24 12 12) scale(0.84)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(30,10,2,.35)%22/%3E%3Cpath transform=%22translate(372 2) rotate(-24 12 12) scale(0.84)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22%239c3412%22/%3E%3Cpath transform=%22translate(372 2) rotate(-24 12 12) scale(0.84)%22 d=%22M12 21.6V6.2M12 14.2l-4.6-3.6M12 14.2l4.6-3.6%22 stroke=%22%235a1806%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath transform=%22translate(391.2 10.6) rotate(48 12 12) scale(0.5)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(30,10,2,.35)%22/%3E%3Cpath transform=%22translate(390 9) rotate(48 12 12) scale(0.5)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22%23f2c04a%22/%3E%3Cpath transform=%22translate(390 9) rotate(48 12 12) scale(0.5)%22 d=%22M12 21.6V6.2M12 14.2l-4.6-3.6M12 14.2l4.6-3.6%22 stroke=%22%23b07a1e%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath transform=%22translate(521.2 6.6) rotate(-88 12 12) scale(0.66)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22rgba(30,10,2,.35)%22/%3E%3Cpath transform=%22translate(520 5) rotate(-88 12 12) scale(0.66)%22 d=%22M12 1.8l1.7 3.9 2.9-1.4-.7 4.2 3.6-1.1-1.4 3.2 3.4 1.4-3.1 1.6.9 2.9-3.9-.9L13 21.9h-2l-.4-6.3-3.9.9.9-2.9-3.1-1.6 3.4-1.4-1.4-3.2 3.6 1.1-.7-4.2 2.9 1.4z%22 fill=%22%23d85a22%22/%3E%3Cpath transform=%22translate(520 5) rotate(-88 12 12) scale(0.66)%22 d=%22M12 21.6V6.2M12 14.2l-4.6-3.6M12 14.2l4.6-3.6%22 stroke=%22%2386300c%22 stroke-width=%221%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") 0 0/750px 30px repeat-x} [data-os="otono"] .mark-name{background:linear-gradient(180deg,#fff6df 0%,#f8cf8a 48%,#e0903e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 rgba(90,30,6,.35)) drop-shadow(0 10px 22px rgba(60,20,4,.4))} [data-os="otono"]{scrollbar-color:#c47e4c #f1e1cb} [data-os="otono"] ::selection{background:#f3a85c;color:#2a1206} [data-os="otono"] .btn.primary{box-shadow:inset 0 1px 0 rgba(255,214,170,.45),0 2px 6px rgba(120,40,10,.25)} [data-os="otono"] .btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,214,170,.5),0 3px 12px rgba(190,70,20,.35)} @media (forced-colors:active){[data-os="otono"] #bar::before{display:none}} /* ================= 1.8 · Libreta de secretos (parts/secretos.js) ================= */ .sec{display:flex;flex-direction:column;gap:12px} .sec-top{display:flex;align-items:center;gap:14px} .sec-big{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--pri-bg);color:var(--pri-fg);flex:none} .sec-big svg{width:32px;height:32px} .sec-top h3{margin:0;font-family:var(--f-title);font-size:1.25rem} .sec-n{margin:2px 0 0;color:var(--muted);font-size:.9rem} .sec-i{margin:0;line-height:1.45} .sec-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .sec-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:max(6px,calc(var(--radius)*.6));border:1px solid var(--btn-border,rgba(0,0,0,.15));background:var(--btn-bg)} .sec-list li.off{opacity:.78;border-style:dashed} .sec-list li b{display:block} .sec-list li p{margin:2px 0 0;font-size:.92rem;line-height:1.4} .sec-list li small{display:block;margin-top:4px;color:var(--muted)} .sec-mk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;font-weight:800;background:var(--accent);color:var(--accent-fg)} .sec-list li.off .sec-mk{background:transparent;color:var(--muted);border:1.5px dashed var(--muted)} .sec-more{margin:0;color:var(--muted);font-style:italic} .sec-ic svg{width:22px;height:22px} /* ================= 1.14 · El baúl de los secretos (parts/plaza_baul.js) ================= */ .bau{position:absolute;inset:0;z-index:9;display:flex;padding:16px;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 45%,rgba(40,22,8,.55),rgba(6,3,1,.9))} .bau[hidden]{display:none} .bau-in-w{position:relative;margin:auto;width:min(600px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 22px 18px;border-radius:18px; box-sizing:border-box;border:1px solid rgba(214,166,82,.5);background:radial-gradient(ellipse 90% 60% at 30% 0%,rgba(255,200,120,.08),transparent 60%),linear-gradient(180deg,#26170d,#170d07 70%);box-shadow:0 18px 60px rgba(0,0,0,.65),inset 0 0 0 4px rgba(30,17,8,.9),inset 0 0 0 5px rgba(214,166,82,.22),0 0 40px rgba(255,180,90,.1);color:#f4e7cf} .bau h2{margin:0;padding:0 34px;font:700 clamp(22px,3.4vw,30px)/1.15 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.08em;text-indent:.08em;text-align:center;text-wrap:balance;color:#f7dfac;text-shadow:0 0 18px rgba(255,190,100,.35)} .bau-x{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(214,166,82,.4);border-radius:50%;background:rgba(40,24,12,.8);color:#f4e7cf;cursor:pointer} .bau-x svg{width:18px;height:18px}.bau-x:hover{background:rgba(80,48,22,.9)}.bau-x:focus-visible{outline:2px solid #ffd98a;outline-offset:2px} .bau-body{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%} /* 1.15.1 · la inscripción de los fundadores, clavada en la tapa (antes, la carta de la abuela del libreto) */ .bau-note{margin:2px 0 0;max-width:470px;padding:12px 18px 10px;border-radius:2px;background:linear-gradient(175deg,#f1e3c2,#e6d3a8);color:#3a2817;box-shadow:0 6px 16px rgba(0,0,0,.45);transform:rotate(-1.2deg)} .bau-note blockquote{margin:0;font:italic 500 17.5px/1.42 'Cormorant Garamond',Georgia,serif} .bau-note figcaption{margin-top:4px;text-align:right;font:italic 600 15px/1.2 'Cormorant Garamond',Georgia,serif;color:#6b4a2a} /* el baúl y sus cuatro esquinas de latón (botones encima del dibujo; ya abierto, son parte del dibujo) */ .bau:not(.is-open) .bau-cornerart{display:none} .bau:not(.is-open) .bau-chest{margin-top:-11%} .bau-chest{position:relative;width:min(400px,100%);aspect-ratio:4/3} .bau-svg{display:block;width:100%;height:100%;overflow:visible} .bau-carve{font:700 15px Cinzel,Georgia,serif;letter-spacing:.1em;fill:#170a03} .bau-carve2{font:700 15px Cinzel,Georgia,serif;letter-spacing:.1em;fill:#c99258;opacity:.55} .bau-in{opacity:0;transform:translateY(26px);transition:opacity .9s ease .35s,transform 1.1s cubic-bezier(.2,.8,.3,1) .35s} .bau-lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s cubic-bezier(.3,.7,.3,1),opacity .5s ease .35s} .bau-lidopen{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(.2);transition:transform .9s cubic-bezier(.3,.7,.3,1) .2s,opacity .3s ease .2s} .bau.is-open .bau-in{opacity:1;transform:none} .bau.is-open .bau-lid{transform:translateY(-30px) scaleY(.2);opacity:0} .bau.is-open .bau-lidopen{opacity:1;transform:none} .bau-c{position:absolute;width:15%;aspect-ratio:1;padding:0;border:0;border-radius:10px;background:none;pointer-events:none;transition:transform .25s ease,filter .25s ease} .bau-c svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))} .bau-c kbd{position:absolute;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:4px;background:rgba(20,10,4,.78);color:#f3d9a2;font:700 10px/1 var(--f-ui);pointer-events:none;border:1px solid rgba(214,166,82,.35)} .bau-tl{left:8.5%;top:42.5%}.bau-tr{right:8.5%;top:42.5%}.bau-br{right:8.5%;bottom:7.8%}.bau-bl{left:8.5%;bottom:7.8%} .bau-tr svg{transform:rotate(90deg)}.bau-br svg{transform:rotate(180deg)}.bau-bl svg{transform:rotate(270deg)} .bau-tl kbd{right:-6px;bottom:-6px}.bau-tr kbd{left:-6px;bottom:-6px}.bau-br kbd{left:-6px;top:-6px}.bau-bl kbd{right:-6px;top:-6px} .touch .bau-c kbd,.ct-pad .bau-c kbd{display:none} @media (pointer:coarse){.bau-c kbd{display:none}} .bau-c:hover{filter:brightness(1.15)} .bau-c:focus-visible{outline:2px solid #ffd98a;outline-offset:3px} .bau-c.lit{filter:brightness(1.6) drop-shadow(0 0 12px rgba(255,210,120,.95));transform:scale(1.1)} .bau-c.loose{filter:saturate(.55) brightness(.8)} .bau-tl.loose{transform:translate(-6px,-4px) rotate(-7deg)}.bau-tr.loose{transform:translate(6px,-4px) rotate(7deg)}.bau-br.loose{transform:translate(6px,4px) rotate(-7deg)}.bau-bl.loose{transform:translate(-6px,4px) rotate(7deg)} .bau-how{margin:0;max-width:480px;color:#e6d4b4;font:500 14.5px/1.45 var(--f-ui);text-align:center;text-wrap:pretty} .bau-how span{color:#bfa47c} /* 1.14.5 · los nombres de las notas mientras el baúl las toca */ .bau-say{min-height:1.4em;margin:0;color:#ffd98a;font:600 italic 20px/1.3 Georgia,'Times New Roman',serif;letter-spacing:.04em;text-align:center} .bau-big{margin:0;font:700 clamp(20px,3vw,26px)/1.2 Cinzel,'Cormorant Garamond',Georgia,serif;color:#ffe2a6;text-align:center;letter-spacing:.04em;text-shadow:0 0 16px rgba(255,200,110,.45)} /* abierto: el baúl a la izquierda, sus regalos a la derecha (en el teléfono, uno debajo del otro) */ .bau.is-open .bau-in-w{width:min(900px,100%)} .bau.is-open .bau-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:8px 26px} .bau.is-open .bau-chest{width:100%} .bau-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0} .bau-side .bau-how,.bau-side .bau-big{text-align:left} /* los regalos: tres etiquetas de papel atadas con hilo dorado */ .bau-tags{list-style:none;margin:2px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:9px;width:100%;box-sizing:border-box} .bau-tag{position:relative;display:flex;align-items:center;gap:11px;padding:8px 16px 8px 22px;background:linear-gradient(170deg,#f6ead0,#e3cfa2);color:#3a2614;font:600 14px/1.35 var(--f-ui); clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))} .bau-tag::after{content:'';position:absolute;left:12px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#2a170b;box-shadow:inset 0 0 0 1.5px #b88a45} .bau-tag::before{content:'';position:absolute;left:-18px;top:50%;width:33px;height:1.5px;background:linear-gradient(90deg,transparent,#e7bb62);transform-origin:right;transform:rotate(-8deg)} .bau-tag:nth-child(1){transform:rotate(-1.2deg)}.bau-tag:nth-child(2){transform:rotate(.9deg);margin-left:6px}.bau-tag:nth-child(3){transform:rotate(-.5deg);margin-left:2px} .bau-tag svg{flex:none;width:30px;height:30px} .bau-tags{filter:none} /* los botones: de latón y de madera, que se hunden al oprimirlos */ .bau-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .bau-side .bau-acts{justify-content:flex-start;margin-top:4px} .bau-btn{min-height:44px;padding:0 18px;border-radius:999px;font:700 14.5px/1 var(--f-ui);cursor:pointer;transition:transform .12s cubic-bezier(.32,.72,0,1),box-shadow .12s ease} .bau-btn.gold{border:1px solid #7a5216;background:linear-gradient(180deg,#f9dd97,#d8a447 55%,#a8731f);color:#2a1606;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #6b4512,0 7px 14px rgba(0,0,0,.4)} .bau-btn.wood{border:1px solid rgba(214,166,82,.5);background:linear-gradient(180deg,#61391c,#3d2210);color:#f6e6c4;box-shadow:inset 0 1px 0 rgba(255,220,170,.18),0 3px 0 #1e1008,0 7px 14px rgba(0,0,0,.35)} .bau-btn.ghost{border:1px solid transparent;background:transparent;color:#d9c39b;padding:0 12px} .bau-btn.ghost:hover{color:#fff1d2} .bau-btn.gold:hover{filter:brightness(1.06)}.bau-btn.wood:hover{filter:brightness(1.12)} .bau-btn:active{transform:translateY(2px)}.bau-btn.gold:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 #6b4512,0 3px 8px rgba(0,0,0,.4)}.bau-btn.wood:active{box-shadow:0 1px 0 #1e1008,0 3px 8px rgba(0,0,0,.35)} .bau-btn:focus-visible{outline:2px solid #ffe3a8;outline-offset:3px} .bau-btn:disabled{opacity:.6;cursor:default} /* lo vivo del baúl abierto: la luz que respira, polvo dorado que sube, la nota que flota y el cilindro que gira */ .bau.is-open .bau-rays{animation:bauRays 4.5s ease-in-out infinite} .bau-motes circle{opacity:0} .bau.is-open .bau-motes circle{animation:bauMote 3.4s ease-out infinite} .bau-notes{opacity:0} .bau.is-open .bau-notes{animation:bauNote 3.6s ease-in-out 1s infinite} .bau.is-open .bau-pins{animation:bauPins 1.2s linear infinite} @keyframes bauRays{0%,100%{opacity:.75}50%{opacity:1}} @keyframes bauMote{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-90px)}} @keyframes bauNote{0%{opacity:0;transform:translate(0,0)}25%{opacity:.95}100%{opacity:0;transform:translate(-14px,-34px) rotate(-12deg)}} @keyframes bauPins{to{transform:translateX(5px)}} .bau.opening .bau-chest{animation:bauGlow 1.6s ease} @keyframes bauGlow{0%{filter:none}35%{filter:drop-shadow(0 0 24px rgba(255,210,120,.8)) brightness(1.15)}100%{filter:none}} @media (max-width:760px){.bau.is-open .bau-body{grid-template-columns:1fr;justify-items:center}.bau.is-open .bau-chest{width:min(380px,100%)}.bau-side{align-items:center}.bau-side .bau-how,.bau-side .bau-big{text-align:center}.bau-side .bau-acts{justify-content:center}} @media (max-width:560px){.bau{padding:10px}.bau-in-w{padding:18px 14px 14px}.bau-note blockquote{font-size:16px}.bau-tags{padding-left:14px}} @media (prefers-reduced-motion:reduce){.bau-in,.bau-lid,.bau-c{transition:none}.bau.opening .bau-chest,.bau.is-open .bau-rays,.bau.is-open .bau-motes circle,.bau.is-open .bau-notes,.bau.is-open .bau-pins{animation:none}.bau-motes circle,.bau-notes{opacity:0}} /* ================= 1.20 · Los islotes (parts/plaza_islas.js) ================= */ /* en los islotes se esconde lo de la Plaza (brújula, Lugares, letreros de puertas, Bit, la cámara en primera persona) */ .dt.il-on .dt-compass,.dt.il-on .arc-listbtn,.dt.il-on .arc-list,.dt.il-on .ter-btn,.dt.il-on .arc-prompt,.dt.il-on .dt-bit,.dt.il-on .arc-help,.dt.il-on .hvy-btn{display:none!important} .il-hud{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff;font-family:var(--f-ui)} .il-hud[hidden]{display:none} /* las notas: una placa de cristal con el pentagrama de la melodía; cada nota que juntas se enciende en oro */ .il-notes{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:16px;border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(30,22,58,.72),rgba(10,8,24,.72));box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 8px 22px rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .il-staff{width:224px;height:48px;flex:none} .il-staff line{stroke:rgba(220,210,255,.38);stroke-width:1} .il-staff line.lg{stroke:rgba(220,210,255,.26)} .il-staff ellipse{fill:none;stroke:rgba(255,236,180,.42);stroke-width:1.3;transition:fill .3s ease,stroke .3s ease} .il-staff ellipse.on{fill:#ffcf5a;stroke:#fff1c4;filter:drop-shadow(0 0 3px rgba(255,190,70,.9))} .il-notes b{font:700 26px/1 Cinzel,'Cormorant Garamond',Georgia,serif;color:#ffd978;text-shadow:0 0 14px rgba(255,180,60,.55);font-variant-numeric:tabular-nums} .il-notes span{margin-left:-6px;color:rgba(255,236,190,.7);font:600 14px/1 var(--f-ui)} .il-notes.pop b{animation:ilPop .6s cubic-bezier(.32,.72,0,1)} @keyframes ilPop{0%{transform:scale(1.5)}100%{transform:scale(1)}} /* el cronómetro de la carrera */ .il-timer{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 18px 7px;border-radius:14px;border:1px solid rgba(140,255,210,.3);background:rgba(6,20,22,.72);box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 0 22px rgba(60,255,190,.16)} .il-timer[hidden]{display:none} .il-timer b{font:700 28px/1 Orbitron,var(--f-ui);letter-spacing:.04em;color:#c9fff0;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(90,255,200,.6)} .il-timer small{font:600 12px/1.2 var(--f-ui);color:rgba(200,255,236,.72)} /* volver a la plaza (donde en la Plaza está «Lugares») */ .il-back{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:6px;pointer-events:auto;opacity:.94} .il-back svg{width:18px;height:18px;flex:none} /* el nombre del islote al llegar */ .il-name{position:absolute;left:0;right:0;top:19%;display:flex;justify-content:center;padding:0 16px;text-align:center} .il-name[hidden]{display:none} .il-name b{font:700 clamp(26px,4.6vw,54px)/1.08 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.1em;text-indent:.1em;text-wrap:balance;color:#fff6dc;text-shadow:0 0 26px rgba(255,190,90,.55),0 2px 10px rgba(0,0,0,.7)} .il-name.on b{animation:ilName 3s ease both} @keyframes ilName{0%{opacity:0;transform:translateY(10px);letter-spacing:.2em}14%{opacity:1;transform:none;letter-spacing:.1em}78%{opacity:1}100%{opacity:0}} /* la ayuda y los avisos */ .il-help{position:absolute;left:12px;top:76px;max-width:min(470px,calc(100% - 24px));margin:0;padding:9px 13px;border-radius:10px;background:rgba(8,6,16,.78);font:500 14px/1.42 var(--f-ui);box-shadow:0 8px 22px rgba(0,0,0,.35)} .il-toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100% - 32px));margin:0;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,214,140,.5);background:rgba(20,12,4,.8);color:#fff4dc;font:600 15px/1.35 var(--f-ui);text-align:center;text-wrap:balance;box-shadow:0 0 22px rgba(255,170,60,.22)} .il-help[hidden],.il-toast[hidden]{display:none} /* el fundido cuando el viento del cielo te regresa */ .il-fade{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#1b1640,#05040c 75%)} /* rodar (pantallas táctiles): a la izquierda del botón de saltar */ .il-roll{position:absolute;right:88px;bottom:40px;width:56px;height:56px;padding:0;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(160,230,255,.9);background:rgba(6,16,30,.58);color:#d8f6ff;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent} .il-roll svg{width:28px;height:28px} .il-roll.on{background:#7fdcff;border-color:#fff;color:#062033;transform:scale(.94)} @media (hover:hover) and (pointer:fine){ .win.fw .il-notes,.win.fw .il-timer,.win.fw .il-back{top:50px} .win.fw .il-help{top:114px} .win.fw.fw-idle .il-notes,.win.fw.fw-idle .il-timer,.win.fw.fw-idle .il-back{top:12px} .win.fw.fw-idle .il-help{top:76px} } @media (max-width:720px){ .il-staff{display:none} .il-notes{padding:6px 12px} .il-timer{top:60px} .il-back span{display:none} .il-back{padding:6px 9px} .il-help{top:60px;font-size:13px} .il-toast{bottom:auto;top:110px;font-size:14px} } @media (prefers-reduced-motion:reduce){ .il-notes.pop b,.il-name.on b{animation:none} .il-staff ellipse{transition:none} } /* ================= 1.14 · El lector de libretos (parts/libreto.js); 1.15.1 · la carta de los fundadores ================= Una página de papel: el libreto con personajes en versalitas color vino y acotaciones en cursiva; la carta con la foto de la fundación arriba, escrita en cursiva de pluma, con el lema centrado y la firma a la derecha. */ .lb-ov{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:16px;background:rgba(8,6,4,.74)} .lb-ov.lb-in{position:absolute;z-index:12} .lb-paper{position:relative;width:min(680px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:6px; background:repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 0,#f8f1e1,#efe3c8 75%,#e6d6b4);color:#2b2119; box-shadow:0 22px 70px rgba(0,0,0,.6),inset 0 0 60px rgba(140,100,50,.18)} .lb-paper:focus{outline:none} .lb-wait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 24px;font:500 15px/1.4 var(--f-ui);text-align:center} .lb-fail-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .lb-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:linear-gradient(180deg,rgba(244,236,218,.97),rgba(244,236,218,.88) 80%,rgba(244,236,218,0))} .lb-paper .lb-lang{min-height:32px;padding:5px 14px;border:1px solid rgba(123,31,43,.45);border-radius:999px;background:rgba(255,255,255,.35);color:#7b1f2b;font:700 12px/1.2 Cinzel,Georgia,serif;letter-spacing:.08em;cursor:pointer;box-shadow:none;text-shadow:none} .lb-paper .lb-lang:hover{background:#fff} .lb-x{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(60,40,20,.25);border-radius:50%;background:rgba(255,255,255,.5);color:#3a2817;cursor:pointer} .lb-x svg{width:18px;height:18px}.lb-x:hover{background:#fff}.lb-x:focus-visible,.lb-lang:focus-visible{outline:2px solid #7b1f2b;outline-offset:2px} .lb-doc{padding:4px 46px 40px;font:400 19px/1.58 'Cormorant Garamond',Georgia,serif;hyphens:auto} .lb-head{text-align:center;margin-bottom:22px} .lb-orn{display:block;width:120px;height:16px;margin:6px auto 14px;color:#9a7a4a} .lb-doc > .lb-orn{margin:28px auto 0} .lb-head h2{margin:0;font:700 clamp(26px,4.4vw,36px)/1.12 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.06em;text-indent:.06em;text-wrap:balance;color:#2a1810} .lb-sub{margin:10px 0 0;font-style:italic;color:#5c4a36} .lb-by{margin:6px 0 0;font:700 13px/1.4 Cinzel,Georgia,serif;letter-spacing:.14em;text-indent:.14em;color:#7b1f2b} .lb-date{margin:4px 0 0;font-size:16px;color:#7a6650} .lb-doc h3{margin:22px 0 8px;font:700 13px/1.3 Cinzel,Georgia,serif;letter-spacing:.18em;text-indent:.18em;color:#7b1f2b;text-align:center} .lb-cast ul{list-style:none;margin:0;padding:0;text-align:center} .lb-cast li{margin:2px 0} .lb-n{font-variant:small-caps;letter-spacing:.06em;font-weight:600} .lb-scene{margin-top:28px !important} .lb-d{margin:14px 0 14px 2.2em;font-style:italic;color:#62513e;text-wrap:pretty} .lb-l{margin:12px 0;text-wrap:pretty} .lb-who{font:700 13.5px/1 Cinzel,Georgia,serif;letter-spacing:.12em;color:#7b1f2b;margin-right:.25em} .lb-ac{color:#6a5844} .lb-end{margin:30px 0 0;text-align:center;font:700 15px/1.3 Cinzel,Georgia,serif;letter-spacing:.32em;text-indent:.32em;color:#2a1810} @media (max-width:600px){.lb-ov{padding:10px}.lb-doc{padding:2px 20px 30px;font-size:17.5px}.lb-d{margin-left:1.1em}} .sec-lb{margin-top:8px} /* 1.15.1 · la carta de los fundadores */ .lb-carta{width:min(600px,100%)} .lb-carta .lb-doc{padding:0 44px 34px} .lb-ct{margin:0 0 14px;text-align:center;font:700 13px/1.3 Cinzel,Georgia,serif;letter-spacing:.2em;text-indent:.2em;color:#7b1f2b} .lb-foto{margin:0 auto 20px;width:min(380px,100%);transform:rotate(-1.6deg)} .lb-foto-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(40,25,10,.35))} .lb-foto figcaption{margin-top:6px;text-align:center;font:italic 500 16px/1.3 'Cormorant Garamond',Georgia,serif;color:#6b5236} .lb-letter p{margin:0 0 12px;text-wrap:pretty} .lb-letter .lb-hola{font-style:italic;font-weight:600;color:#3a2817} .lb-letter .lb-lema{margin:18px 0;text-align:center;font:700 clamp(17px,2.6vw,21px)/1.3 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.05em;color:#2a1810;text-wrap:balance} .lb-letter .lb-firma{margin-top:18px;text-align:right;font-style:italic;font-weight:600;color:#5c4a36} @media (max-width:600px){.lb-carta .lb-doc{padding:0 20px 26px}} /* ================= 1.16 · Campos de Arcadia (parts/campos*.js) ================= La interfaz va con el cel-shading: papel crema, contorno de tinta y una sombra plana desplazada (sin difuminar). */ .arc.cp{background:#9fd2f0;--cp-ink:#243049;--cp-paper:#fffaf0;--cp-green:#3d7d34} .cp-card{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:2px;max-width:min(410px,calc(100% - 240px));margin:0;padding:12px 16px 13px;border:2px solid var(--cp-ink);border-radius:12px;background:var(--cp-paper);color:var(--cp-ink);box-shadow:4px 4px 0 var(--cp-ink);transition:opacity .9s ease,transform .9s ease} .cp-card b{font:600 25px/1.1 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.05em;color:var(--cp-ink)} .cp-card span{font:700 12.5px/1.3 var(--f-ui);color:var(--cp-green)} .cp-card p{margin:6px 0 0;font:14px/1.45 var(--f-ui);color:#34405a} .cp-card.off{opacity:0;transform:translateY(-6px);pointer-events:none} .cp-back{position:absolute;right:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:7px 15px 7px 11px;border:2px solid var(--cp-ink);border-radius:999px;background:var(--cp-paper);color:var(--cp-ink);font:700 14px/1.1 var(--f-ui);box-shadow:3px 3px 0 var(--cp-ink);cursor:pointer} .cp-back svg{width:19px;height:19px;flex:none} .cp-back:hover{background:#fff3d6}.cp-back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cp-ink)}.cp-back:focus-visible{outline:3px solid #fff;outline-offset:3px} .win .arc.cp .arc-help{top:auto;bottom:14px;max-width:min(480px,calc(100% - 28px));border:2px solid var(--cp-ink);border-radius:12px;background:var(--cp-paper);color:var(--cp-ink);box-shadow:3px 3px 0 var(--cp-ink);transition:opacity 1s ease;z-index:3} .win .arc.cp .arc-help.off{opacity:0} .win .arc.cp.touch .arc-help{box-sizing:border-box;max-width:calc(100% - 100px);bottom:76px} .cp-skip{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;max-width:calc(100% - 32px);margin:0;padding:8px 16px;border:2px solid var(--cp-ink);border-radius:999px;background:var(--cp-paper);color:var(--cp-ink);font:700 14px/1.3 var(--f-ui);text-align:center;pointer-events:none;box-shadow:3px 3px 0 var(--cp-ink)} .cp-alt{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:3;display:flex;gap:16px;padding:7px 16px;border:2px solid var(--cp-ink);border-radius:999px;background:var(--cp-paper);color:#46526e;font:600 13px/1.2 var(--f-ui);pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:3px 3px 0 var(--cp-ink)} .cp-alt b{color:var(--cp-ink);font-size:15px} .arc.cp:has(.cp-alt:not([hidden])) .cp-card{opacity:0} .cp .arc-prompt{border:2px solid var(--cp-ink);background:var(--cp-paper);color:var(--cp-ink);box-shadow:3px 3px 0 var(--cp-ink)} .cp .arc-prompt kbd{border-color:var(--cp-ink);color:var(--cp-ink);background:#fff} .touch.cp .arc-prompt kbd{display:none} .cp .jmp-btn{z-index:5} .arc.cp.no3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;height:auto;min-height:300px} .arc.cp.no3d .arc-cv,.arc.cp.no3d .arc-help,.arc.cp.no3d .arc-joy,.arc.cp.no3d .cp-card{display:none} .arc.cp.no3d .cp-back{position:static;order:2} .cp-no3d{color:var(--cp-ink);text-align:center} @media (max-width:720px){ .cp-card{left:10px;top:60px;max-width:calc(100% - 20px);padding:9px 12px 10px} .cp-card b{font-size:20px}.cp-card p{display:none} .cp-back{top:10px;right:10px;min-height:38px;padding:6px 12px 6px 9px;font-size:13px} .win .arc.cp .arc-help{bottom:70px;font-size:13px} .cp-alt{left:10px;top:10px;transform:none;flex-direction:column;gap:1px;padding:6px 12px 7px;border-radius:12px;font-size:11.5px} .cp-alt b{font-size:14px} } @media (hover:hover) and (pointer:fine){ .win.fw:not(.fw-imm) .cp-card,.win.fw:not(.fw-imm) .cp-back{top:50px} .win.fw:not(.fw-imm) .cp-alt{top:56px} } /* 1.17.52: sin barra (fw-imm), arriba */ @media (prefers-reduced-motion:reduce){.cp-card,.win .arc.cp .arc-help{transition:none}} /* ---------- 1.16.5 · el golf y el minigolf (parts/campos_golf.js, campos_mini.js) ---------- */ .arc.cp.gf-on .cp-back,.arc.cp.gf-on .arc-joy,.arc.cp.gf-on .jmp-btn,.arc.cp.gf-on .hvy-btn,.arc.cp.gf-on > .arc-help,.arc.cp.gf-on .cp-card,.arc.cp.gf-on .cp-alt,.arc.cp.gf-on .arc-prompt{display:none!important} .gf-hud{position:absolute;inset:0;z-index:4;pointer-events:none} .gf-hud > *{pointer-events:auto} .gf-left{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:min(340px,calc(100% - 130px));pointer-events:none} .gf-info{display:flex;flex-direction:column;gap:2px;max-width:100%;box-sizing:border-box;padding:10px 14px 11px;border:2px solid var(--cp-ink);border-radius:12px;background:var(--cp-paper);color:var(--cp-ink);box-shadow:4px 4px 0 var(--cp-ink);font:13px/1.35 var(--f-ui);pointer-events:none;font-variant-numeric:tabular-nums} .gf-info b{font:600 17px/1.2 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.03em} .gf-info .gf-pl{display:flex;align-items:center;gap:7px;margin:0 0 2px;font:700 13px/1.2 var(--f-ui);color:#46526e} .gf-info i,.gf-names i,.gf-tab i{display:inline-block;width:12px;height:12px;flex:none;border:2px solid var(--cp-ink);border-radius:50%} .gf-info .gf-d{font-weight:700;color:var(--cp-green)} .gf-wind{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 10px 6px;border:2px solid var(--cp-ink);border-radius:14px;background:var(--cp-paper);color:var(--cp-ink);box-shadow:3px 3px 0 var(--cp-ink);font:700 12px/1.1 var(--f-ui);pointer-events:none;font-variant-numeric:tabular-nums} .gf-wind svg{width:44px;height:44px} .gf-wind circle{fill:#eaf4fb;stroke:var(--cp-ink);stroke-width:2} .gf-wind .gf-war{fill:#3b7fc4;stroke:var(--cp-ink);stroke-width:1.4;stroke-linejoin:round;transition:opacity .3s} .gf-clubs{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 300px)} .gf-clubs button,.gf-b{min-height:44px;padding:6px 12px;border:2px solid var(--cp-ink);border-radius:12px;background:var(--cp-paper);color:var(--cp-ink);font:700 13.5px/1.1 var(--f-ui);box-shadow:3px 3px 0 var(--cp-ink);cursor:pointer;touch-action:manipulation} .gf-clubs button kbd{margin-right:6px;padding:1px 5px;border:1.5px solid var(--cp-ink);border-radius:5px;background:#fff;color:var(--cp-ink);font:700 11px/1.2 var(--f-mono,monospace)} .gf-clubs button[aria-pressed="true"]{background:#ffe08a} .gf-clubs button:hover,.gf-b:hover{background:#fff3d6}.gf-clubs button[aria-pressed="true"]:hover{background:#ffd666} .gf-clubs button:active,.gf-b:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cp-ink)} .gf-clubs button:focus-visible,.gf-b:focus-visible,.gf-dlg button:focus-visible,.gf-dlg input:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--cp-ink)} .gf-btns{position:absolute;right:14px;bottom:14px;display:grid;grid-template-columns:repeat(3,auto);gap:6px;justify-items:stretch} .gf-b[data-b="l"],.gf-b[data-b="r"]{grid-row:2;min-width:58px;font-size:20px} .gf-b[data-b="l"]{grid-column:1}.gf-b[data-b="r"]{grid-column:3} .gf-bw{grid-row:1;font-size:12.5px} .gf-b[aria-pressed="true"]{background:#ffe08a} .gf-pow{position:absolute;left:50%;bottom:80px;width:min(340px,60%);transform:translateX(-50%);padding:6px 8px 5px;border:2px solid var(--cp-ink);border-radius:12px;background:var(--cp-paper);box-shadow:3px 3px 0 var(--cp-ink);pointer-events:none} .gf-pow i{display:block;height:12px;width:0;border:2px solid var(--cp-ink);border-radius:6px;background:linear-gradient(90deg,#9ed36a,#ffd34d 55%,#f06a45);box-sizing:border-box;min-width:12px} .gf-pow span{display:block;margin-top:4px;color:var(--cp-ink);font:700 12.5px/1.2 var(--f-ui);text-align:center;font-variant-numeric:tabular-nums} .gf-help{max-width:100%;box-sizing:border-box;margin:0;padding:9px 14px;border:2px solid var(--cp-ink);border-radius:12px;background:var(--cp-paper);color:var(--cp-ink);font:13px/1.45 var(--f-ui);box-shadow:3px 3px 0 var(--cp-ink);pointer-events:none;transition:opacity 1s ease} .gf-help.off{opacity:0} .gf-msg{position:absolute;left:50%;top:34%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translate(-50%,-50%) scale(.8);max-width:calc(100% - 32px);padding:12px 26px 13px;border:2.5px solid var(--cp-ink);border-radius:16px;background:var(--cp-paper);color:var(--cp-ink);font:600 30px/1.15 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.04em;text-align:center;box-shadow:5px 5px 0 var(--cp-ink);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,1.6,.4,1)} .gf-msg.on{opacity:1;transform:translate(-50%,-50%) scale(1)} .gf-msg.good{background:#fff1b8} .gf-msg small{font:700 13px/1.3 var(--f-ui);letter-spacing:0;color:#46526e} .gf-msg b{font-weight:600} .gf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .gf-panel,.gf-card{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(36,48,73,.28)} .gf-dlg{box-sizing:border-box;width:min(420px,100%);max-height:100%;overflow:auto;padding:16px 18px 18px;border:2.5px solid var(--cp-ink);border-radius:16px;background:var(--cp-paper);color:var(--cp-ink);box-shadow:6px 6px 0 var(--cp-ink);font:14px/1.45 var(--f-ui)} .gf-dlg.wide{width:min(760px,100%)} .gf-dlg h3{margin:0 0 6px;font:600 23px/1.15 Cinzel,'Cormorant Garamond',Georgia,serif;letter-spacing:.04em;text-wrap:balance} .gf-dlg p{margin:0 0 10px;color:#34405a} .gf-dlg .gf-rec{font-weight:700;color:var(--cp-green)} .gf-dlg .gf-new{font-weight:700;color:#b25418} .gf-n{display:flex;align-items:center;gap:6px;margin:0 0 10px;padding:0;border:0} .gf-n legend{float:left;margin-right:8px;font-weight:700} .gf-n button{min-width:44px;min-height:44px;border:2px solid var(--cp-ink);border-radius:10px;background:#fff;color:var(--cp-ink);font:700 16px/1 var(--f-ui);box-shadow:2px 2px 0 var(--cp-ink);cursor:pointer} .gf-n button[aria-pressed="true"]{background:#ffe08a} .gf-names{display:grid;gap:6px;margin-bottom:14px} .gf-names label{display:flex;align-items:center;gap:8px} .gf-names input{flex:1;min-width:0;min-height:40px;padding:6px 10px;border:2px solid var(--cp-ink);border-radius:10px;background:#fff;color:var(--cp-ink);font:15px/1.2 var(--f-ui)} .gf-row{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .gf-dlg .btn{min-height:42px;border:2px solid var(--cp-ink);border-radius:999px;box-shadow:3px 3px 0 var(--cp-ink);font-weight:700} .gf-dlg .btn.primary{background:#3d7d34;color:#fff} .gf-dlg .btn:not(.primary){background:#fffdf6;color:var(--cp-ink);text-shadow:none} /* 1.17: «Cancelar» se perdía con el botón del tema (rosa claro y letra blanca en Synthwave) */ .gf-tab{width:100%;border-collapse:collapse;font:13px/1.2 var(--f-ui);font-variant-numeric:tabular-nums;margin-bottom:12px} .gf-dlg.wide{overflow-x:auto} .gf-tab th,.gf-tab td{padding:6px 5px;border:1.5px solid var(--cp-ink);text-align:center} .gf-tab thead th{background:#e9f2dd} .gf-tab th[scope="row"]{text-align:left;white-space:nowrap} .gf-tab th[scope="row"] i{margin-right:6px;vertical-align:-1px} .gf-tab tr.par td{color:#46526e;background:#f5f1e4} .gf-tab th.cur{background:#ffe08a} .gf-tab td.u{background:#d9efc9;font-weight:700} .gf-tab td.o{color:#8a3b1c} .gf-tab td b{display:block;font-size:15px} .gf-tab td small{display:block;color:#46526e;font-size:10.5px;white-space:nowrap} @media (max-width:720px){ .gf-left{left:10px;top:10px;max-width:calc(100% - 100px);gap:8px} .gf-info{padding:7px 10px 8px;font-size:12px} .gf-info b{font-size:14.5px} .gf-wind{right:10px;top:10px;padding:5px 7px}.gf-wind svg{width:36px;height:36px} .gf-help{font-size:12.5px;padding:7px 10px} .gf-clubs{left:10px;bottom:68px;max-width:calc(100% - 20px)} .gf-clubs button{min-height:40px;padding:5px 9px;font-size:12.5px} .gf-clubs button kbd{display:none} .gf-btns{right:10px;left:10px;bottom:10px;grid-template-columns:auto 1fr 1fr 1fr auto} .gf-b[data-b="l"],.gf-b[data-b="r"]{grid-row:1}.gf-b[data-b="r"]{grid-column:5}.gf-bw{grid-row:1;padding:6px 6px} .gf-pow{bottom:120px;width:calc(100% - 40px)} .gf-msg{font-size:23px;padding:10px 18px} .gf-tab{font-size:11.5px}.gf-tab th,.gf-tab td{padding:4px 3px} } .touch .gf-clubs button kbd{display:none} @media (hover:hover) and (pointer:fine){ .win.fw:not(.fw-imm) .gf-left,.win.fw:not(.fw-imm) .gf-wind{top:50px} } @media (hover:hover) and (pointer:fine){ html.rj-esq .win.fw .gf-btns{right:100px} } /* el reloj vive en la esquina de abajo a la derecha */ @media (prefers-reduced-motion:reduce){.gf-msg{transition:opacity .2s}.gf-help{transition:none}} /* ================= 1.17.52 · mantener pulsado: sin selección de texto y un menú como el del iPhone (pulsar.js, prefijo mp) ================= */ /* Mantener pulsado ya no selecciona texto ni saca el menú de iOS; sí en los campos, en lo que se copia a propósito y en las apps de escritura (.mp-sel); el lector de Bibliópolis también, porque ahí se subraya seleccionando */ html{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} input,textarea,select,[contenteditable="true"],[contenteditable=""],.mp-sel,.mp-sel *,.share-text,.share-fallback,.bb-rd-txt,.bb-rd-txt *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} /* 1.17.70 · Andre: «Sólo en las aplicaciones de texto debe permitirse seleccionar texto. En todas las demás debería estar prohibido.» Las apps de texto: la Máquina de escribir (.mp-sel), el lector de Bibliópolis (.bb-rd-txt), el Léeme y los documentos legales. En todo lo demás (juegos, apps, escritorio) no se selecciona ni sale el menú de iOS; los campos de texto siempre sí. */ #desk :is(.win[data-id="leeme"],.win[data-id="legal"]) .win-body,#desk :is(.win[data-id="leeme"],.win[data-id="legal"]) .win-body *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default} #desk :is(.win[data-id="leeme"],.win[data-id="legal"]) .win-body :is(button,.btn){-webkit-user-select:none;user-select:none} /* el menú */ .mp-veil{position:fixed;inset:0;z-index:2147482800;background:rgba(6,8,16,0);transition:background .18s ease;-webkit-tap-highlight-color:transparent} .mp-veil.mp-dim.mp-on{background:rgba(6,8,16,.28)} .mp-menu{position:fixed;z-index:2147482801;min-width:min(250px,calc(100vw - 20px));max-width:calc(100vw - 20px);padding:6px;box-sizing:border-box; border-radius:16px;background:var(--menu-bg,rgba(250,250,252,.92));color:var(--menu-fg,#16181f);border:var(--bw,1px) solid var(--win-border,rgba(0,0,0,.12)); box-shadow:0 22px 48px -12px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5); font:500 15px/1.25 var(--f-ui,system-ui,-apple-system,"Segoe UI",sans-serif);opacity:0;transform:scale(.86);transition:opacity .14s ease,transform .2s cubic-bezier(.2,.9,.25,1.15)} .mp-menu.mp-on{opacity:1;transform:none} .mp-h{margin:2px 10px 6px;font-size:12.5px;font-weight:700;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mp-menu hr{height:0;margin:5px 4px;border:0;border-top:1px solid currentColor;opacity:.14} .mp-i{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:11px;background:none;color:inherit; font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} .mp-i svg{flex:none;width:19px;height:19px;opacity:.85} .mp-i:hover,.mp-i:focus-visible{background:color-mix(in srgb,currentColor 11%,transparent);outline:none} .mp-i:focus-visible{box-shadow:inset 0 0 0 2px var(--accent,#2f7cf6)} .mp-danger{color:#e5352b} .mp-armed{background:color-mix(in srgb,#e5352b 14%,transparent)} /* lo que se pulsó se levanta un poco, como en el iPhone */ .mp-lift{position:relative;z-index:2147482801;transform:scale(1.07);transition:transform .2s cubic-bezier(.2,.9,.25,1.2);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))} @media (prefers-reduced-motion:reduce){ .mp-menu,.mp-lift,.mp-veil{transition:none} .mp-menu{transform:none} .mp-lift{transform:none} } /* 1.19.6 · portada de los enlaces de los videos: lo que se ve ya dentro del mundo (portada.js). La portada misma va en línea en la página. */ .pt-guided .arc-help{display:none} .pt-coach{position:absolute;inset:0;z-index:6;pointer-events:none;font-family:var(--f-ui);color:#fff7d6;animation:ptIn .45s cubic-bezier(.32,.72,0,1) both} .pt-coach.out{opacity:0;transition:opacity .35s ease} .pt-c{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:46%;text-align:center} .pt-c b{padding:8px 14px;border-radius:14px;background:rgba(12,22,58,.82);border:1.5px solid rgba(243,211,107,.7);font:700 15px/1.25 var(--f-ui);box-shadow:0 6px 20px rgba(0,0,0,.35)} .pt-c-look{right:7%;top:38%} .pt-c-walk{left:5%;bottom:16%} .pt-c-keys{left:50%;bottom:18%;transform:translateX(-50%);max-width:80%} .pt-ring{position:relative;width:86px;height:86px;border-radius:50%;border:2px dashed rgba(243,211,107,.85);background:rgba(243,211,107,.12)} .pt-ring i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,247,214,.9);box-shadow:0 0 16px rgba(243,211,107,.8);animation:ptJoy 2.2s ease-in-out infinite} .pt-hand{position:relative;width:46px;height:46px;border-radius:50%;background:rgba(255,247,214,.9);box-shadow:0 0 18px rgba(243,211,107,.85);animation:ptDrag 2.4s ease-in-out infinite} @keyframes ptIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes ptJoy{0%,100%{transform:translate(0,0)}30%{transform:translate(0,-22px)}60%{transform:translate(16px,-10px)}} @keyframes ptDrag{0%,100%{transform:translateX(26px)}50%{transform:translateX(-26px)}} .pt-more{position:absolute;left:50%;top:calc(116px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 24px);box-sizing:border-box;padding:8px 8px 8px 16px;border-radius:22px;background:rgba(12,22,58,.92);border:1.5px solid rgba(243,211,107,.75);color:#fff7d6;font:600 14px/1.25 var(--f-ui);box-shadow:0 8px 24px rgba(0,0,0,.4);animation:ptMoreIn .5s cubic-bezier(.32,.72,0,1) both} .pt-more span{white-space:nowrap} .pt-more.out{opacity:0;transition:opacity .25s ease} .pt-more-go{flex:none;min-height:40px;padding:8px 16px;border:0;border-radius:999px;background:linear-gradient(135deg,#f3d36b,#e9a93a);color:#1a1f44;font:800 14px/1.1 var(--f-ui);cursor:pointer} .pt-more-go:focus-visible,.pt-more-x:focus-visible{outline:2px solid #fff;outline-offset:2px} .pt-more-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#cdd8f5;font:400 22px/1 var(--f-ui);cursor:pointer} @keyframes ptMoreIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translateX(-50%)}} @media (max-width:520px){.pt-more{display:grid;grid-template-columns:1fr auto;width:calc(100% - 24px);padding:12px 8px 12px 16px;row-gap:8px}.pt-more span{white-space:normal;grid-column:1/2}.pt-more-x{grid-column:2;grid-row:1}.pt-more-go{grid-column:1/3;min-height:46px;font-size:15px}} @media (prefers-reduced-motion:reduce){.pt-coach,.pt-more,.pt-ring i,.pt-hand{animation:none}} /* 1.19.14 · «Antes de pagar» (premium.js › prConfirm): la casilla obligatoria antes de abrir el pago de Polar */ .pr-ck{position:fixed;inset:0;z-index:2147482500;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) 16px max(16px,env(safe-area-inset-bottom,0px));background:rgba(8,6,20,.7);overflow:auto;animation:prCkIn .18s ease-out} @keyframes prCkIn{from{opacity:0}} .pr-ck-in{width:min(460px,100%);box-sizing:border-box;padding:22px 22px 18px;border-radius:max(10px,var(--radius,12px));background:var(--win-bg,#1c1830);color:var(--win-fg,#f3f0ff);box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid var(--btn-border,rgba(255,255,255,.18));animation:prCkUp .26s cubic-bezier(.32,.72,0,1)} @keyframes prCkUp{from{transform:translateY(14px) scale(.98)}} .pr-ck-in h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 20px/1.2 var(--f-title,inherit)} .pr-ck-in h3 svg{width:24px;height:24px;flex:none;color:var(--accent,#c9a7ff)} .pr-ck-in p{margin:0 0 10px;font-size:14.5px;line-height:1.5} .pr-ck-price{font-weight:700;font-size:17px!important;color:var(--accent,#c9a7ff)} .pr-ck-pay{opacity:.82;font-size:13.5px!important} .pr-ck-box{display:flex;gap:12px;align-items:flex-start;margin:14px 0 10px;padding:12px 14px;border-radius:10px;background:rgba(127,127,127,.12);border:1px solid var(--btn-border,rgba(255,255,255,.18));font-size:14px;line-height:1.45;cursor:pointer} .pr-ck-box input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent,#9b6bff);cursor:pointer} .pr-ck-box input:focus-visible{outline:3px solid var(--accent,#9b6bff);outline-offset:2px} .pr-ck-terms{font-size:13px!important;opacity:.85} .pr-ck-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px} .pr-ck-btns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px} .pr-ck-btns .btn{min-height:44px} .pr-ck-btns .btn[disabled]{opacity:.45;cursor:not-allowed} @media (max-width:420px){.pr-ck-in{padding:18px 16px 14px}.pr-ck-btns .btn{flex:1}} @media (prefers-reduced-motion:reduce){.pr-ck,.pr-ck-in{animation:none}} /* ---------- Pantallas angostas ---------- */ @media (max-width:720px){ .icons{grid-template-columns:repeat(4,78px);width:auto;gap:2px} .icon{width:78px} .icon.big .tile{width:50px;height:50px} .icon.big .tile svg{width:28px;height:28px} #layer{inset:0} .win{position:fixed!important;left:0!important;top:env(safe-area-inset-top,0px)!important;width:100%!important;height:calc(100% - var(--bar-h) - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px))!important;max-height:none;border-radius:0;border-left-width:0;border-right-width:0} .win.max:not(.fw){top:env(safe-area-inset-top,0px)!important;height:calc(100% - var(--bar-h) - env(safe-area-inset-bottom,0px) - env(safe-area-inset-top,0px))!important} /* 1.19: maximizada (ahora lo 2D abre así) tampoco se mete debajo de la barra de tareas */ .win-title{border-radius:0;cursor:default} .wb-max{display:none} .on-head{grid-template-columns:1fr} .on-chips{justify-content:flex-start} .mark{right:14px;bottom:10px} .on-bar{display:contents} .transport{position:sticky;bottom:-16px;z-index:3;flex-wrap:nowrap;gap:12px;margin:0 -16px;padding:10px 16px;background:var(--win-bg);border-top:1px solid var(--cell-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .tempo{flex:1;min-width:0} .tempo input{flex:1;min-width:0;width:auto} } @media (max-width:640px){ .seq-wrap{overflow:visible;padding:0} .seq-head{position:sticky;top:-16px;z-index:3;margin:0 -16px;padding:8px 16px 6px;background:var(--win-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} } @media (max-width:480px){ #start span{display:none} #start{padding:0 10px} .task span{display:none} .clock #clk-day{display:none} .tempo-l,.tempo-u{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }