/* ============================================================
   ESPECIAL OCARINA — el widget: Link (sprites), su globo, el botón de
   mute, el menú de canciones, el panel para tocarlas, y los mundos de
   Saria (bosque) y la Nana (puerta). Siempre visible, en cualquier
   versión de la web. La piel retro de la Canción del Tiempo está en
   ocarina.css; el portal secreto (/sala-secreta) al final de este archivo.
   ============================================================ */

/* ---------- Widget fijo: globo + Link + mute ---------- */
.oca{
  position:fixed; right:12px; bottom:10px; z-index:9200;
  display:flex; align-items:flex-end; gap:6px;
  font-family:'Press Start 2P', 'JetBrains Mono', monospace;
}
body.has-admin-bar .oca{bottom:60px;}
.oca-link{
  position:relative; width:160px; height:160px; border:0; padding:0; background:transparent; cursor:pointer; flex-shrink:0;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.65));
}
.oca-link canvas{width:160px; height:160px; display:block; image-rendering:pixelated; image-rendering:crisp-edges;}
.oca-link:hover{filter:drop-shadow(0 6px 8px rgba(0,0,0,.65)) drop-shadow(0 0 10px rgba(51,255,153,.55));}
.oca-mute{
  width:34px; height:34px; margin-bottom:14px; padding:6px; border:1px solid #33FF99; background:rgba(11,11,13,.9); color:#33FF99; cursor:pointer; border-radius:100px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.oca-mute svg{width:100%; height:100%; display:block;}
.oca-mute .off{display:none;}
.oca-mute.muted{border-color:#8C8C8C; color:#8C8C8C;}
.oca-mute.muted .on{display:none;}
.oca-mute.muted .off{display:block;}

/* Globo de diálogo: a la izquierda de Link, blanco con borde negro y
   sombra rosa; el nombre en verde. Siempre a la vista mientras habla. */
.oca-bubble{
  position:relative; align-self:center; margin-bottom:44px; margin-right:4px;
  width:max-content; max-width:min(360px, calc(100vw - 200px));
  background:#fff; color:#111; border:3px solid #111; padding:12px 14px;
  font-family:'Press Start 2P', monospace; font-size:11px; line-height:1.9; text-align:left;
  box-shadow:4px 4px 0 #FF3399; opacity:0; visibility:hidden; transform:translateX(6px); transition:opacity .15s steps(3), transform .15s steps(3), visibility .15s;
}
.oca-bubble::after{
  content:""; position:absolute; left:100%; top:50%; margin-top:-8px; border:8px solid transparent; border-left-color:#111; border-right:0;
}
.oca-bubble::before{
  content:""; position:absolute; left:calc(100% + 4px); top:50%; margin-top:-4px; border:4px solid transparent; border-left-color:#FF3399; border-right:0;
}
.oca-bubble.show{opacity:1; visibility:visible; transform:none;}
.oca-bubble b{color:#1a8a55;}
html[data-cancion="saria"] .oca-bubble{box-shadow:4px 4px 0 #33FF99;}
html[data-cancion="saria"] .oca-bubble::before{border-left-color:#33FF99;}
html[data-cancion="nana"] .oca-bubble{box-shadow:4px 4px 0 #ffd24a;}
html[data-cancion="nana"] .oca-bubble::before{border-left-color:#ffd24a;}

/* ---------- Panel (menú de canciones y para tocar) ---------- */
.oca-panel{
  position:fixed; right:12px; bottom:168px; z-index:9210; width:min(400px, calc(100vw - 24px));
  background:#0b0b0d; color:#fff; border:3px solid #fff; box-shadow:5px 5px 0 #FF3399;
  font-family:'Press Start 2P', monospace; font-size:10px; line-height:1.8;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .15s steps(3), transform .15s steps(3), visibility .15s;
}
.oca-panel.open{opacity:1; visibility:visible; transform:none;}
body.has-admin-bar .oca-panel{bottom:218px;}
.oca-panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:3px solid #fff; background:#121212;}
.oca-panel-title{font-size:10px; color:#33FF99;}
.oca-panel-close, .oca-back{position:absolute; top:8px; background:transparent; border:0; color:#8C8C8C; font-family:inherit; font-size:11px; padding:6px 8px; cursor:pointer; z-index:1;}
.oca-panel-close{right:6px;}
.oca-back{left:6px;}
.oca-panel-close:hover, .oca-back:hover{border-color:#FF3399; color:#FF3399;}
.oca-songs{list-style:none; margin:0; padding:32px 10px 10px;}
.oca-song{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:#121212; color:#fff;
  border:2px solid #2a2a2a; padding:16px 14px; margin:6px 0; cursor:pointer; font-family:inherit; font-size:11.5px; line-height:1.7;
}
.oca-song:hover{border-color:#33FF99;}
.oca-song-dot{width:16px; height:16px; border-radius:50%; flex-shrink:0; display:inline-block;}
.oca-song-name{display:block; color:#fff;}
.oca-song-desc{display:block; color:#bdbdbd; font-family:'Space Grotesk', sans-serif; font-size:13px; margin-top:4px;}
.oca-song-state{margin-left:auto; font-size:9px; color:#8C8C8C; white-space:nowrap;}
.oca-song.locked .oca-song-dot{opacity:.45; box-shadow:none !important;}
.oca-song.active{border-color:#33FF99; background:#0f2a1c;}
.oca-song.active .oca-song-name::after{content:' ●'; color:#33FF99;}
.oca-panel-foot{padding:10px 14px 12px; color:#bdbdbd; font-family:'Space Grotesk', sans-serif; font-size:13.5px; line-height:1.4; border-top:2px solid #222;}

.oca-learn{padding:34px 14px 16px;}
.oca-learn-name{color:#fff; font-size:11px; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:10px;}
.oca-seq{display:flex; gap:6px; justify-content:center; margin:6px 0 14px; flex-wrap:wrap;}
.oca-seq span{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:15px;
  border:2px solid #444; background:#121212; color:#666;
}
.oca-seq span.next{border-color:#fff; color:#fff; animation:oca-blink-soft .8s steps(2) infinite;}
.oca-seq span.done{border-color:#33FF99; background:#0f2a1c; color:#33FF99;}
.oca-seq.shake{animation:oca-shake .3s steps(4);}
@keyframes oca-blink-soft{50%{border-color:#33FF99;}}
@keyframes oca-shake{0%{transform:translateX(0);} 25%{transform:translateX(-5px);} 50%{transform:translateX(5px);} 75%{transform:translateX(-3px);} 100%{transform:translateX(0);}}
.oca-dpad{display:grid; grid-template-columns:repeat(3, 62px); grid-template-rows:repeat(3, 62px); gap:4px; justify-content:center;}
.oca-key{
  font-family:inherit; font-size:22px; color:#fff; background:#1a1a1a; border:3px solid #444; cursor:pointer; user-select:none; touch-action:manipulation;
  display:flex; align-items:center; justify-content:center;
}
.oca-key[data-note="arriba"]{grid-column:2; grid-row:1;}
.oca-key[data-note="izquierda"]{grid-column:1; grid-row:2;}
.oca-key[data-note="derecha"]{grid-column:3; grid-row:2;}
.oca-key[data-note="abajo"]{grid-column:2; grid-row:3;}
.oca-dpad-center{grid-column:2; grid-row:2; background:#000; border:3px solid #222; display:flex; align-items:center; justify-content:center; font-size:12px; color:#555;}
.oca-key:hover{border-color:#fff;}
.oca-key.down, .oca-key:active{background:#33FF99; color:#000; border-color:#fff;}
.oca-learn-hint{text-align:center; color:#bdbdbd; font-family:'Space Grotesk', sans-serif; font-size:13.5px; margin-top:14px;}
.oca-learn.done .oca-dpad{opacity:.3; pointer-events:none;}

/* ---------- Transición de la Canción del Tiempo (triángulos) ---------- */
.oca-wipe{position:fixed; inset:0; z-index:9500; pointer-events:none; overflow:hidden;}
.oca-wipe canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.oca-wipe .oca-flash{position:absolute; inset:0; background:#fff; opacity:0;}
.oca-wipe.flash .oca-flash{animation:oca-flash .5s steps(3, end) forwards;}
@keyframes oca-flash{0%{opacity:1;} 100%{opacity:0;}}
.oca-wipe .oca-notes{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:'Press Start 2P', monospace; font-size:clamp(14px, 3vw, 28px); color:#fff; text-shadow:3px 3px 0 #FF3399; letter-spacing:4px; white-space:nowrap;}
.oca-wipe .oca-notes span{display:inline-block; animation:oca-note-pop .9s steps(3, end) infinite;}
.oca-wipe .oca-notes span:nth-child(2n){color:#33FF99; animation-delay:.15s;}
.oca-wipe .oca-notes span:nth-child(3n){animation-delay:.3s;}
@keyframes oca-note-pop{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
/* Lo que entra en un mundo aparece con un fundido corto (sin cortina negra). */
.oca-in{animation:oca-in 1.2s ease-out both;}
@keyframes oca-in{0%{opacity:0;} 100%{opacity:1;}}

/* ---------- Canción de Saria: el bosque ---------- */
/* La web normal en verde Zelda: todos los acentos pasan a verdes, solo el
   logo (imagen) conserva el rosa. Detrás, el video del bosque con una capa
   negra para que el texto se lea, niebla que se mueve y luciérnagas. */
html[data-cancion="saria"]{--pink:#5ce39a; --green:#33FF99; --text-soft:#9fd9b8; --line:#1f4a33; --surface:#0b2416; --bg:transparent;}
html[data-cancion="saria"], html[data-cancion="saria"] body{background:transparent !important;}
html[data-cancion="saria"] body{background-color:#06160d !important;}
html[data-cancion="saria"] [style*="--type-color"]{--type-color:#5ce39a !important;}
html[data-cancion="saria"] .ticker-type, html[data-cancion="saria"] .most-read-num, html[data-cancion="saria"] .launch-date{color:#5ce39a !important;}
html[data-cancion="saria"] .type-dot{background:#5ce39a !important;}
html[data-cancion="saria"] .pill{color:#5ce39a !important;}
html[data-cancion="saria"] .brand-edge{background:linear-gradient(90deg, #33FF99 0%, #33FF99 50%, #9dffc9 50%, #9dffc9 100%);}
html[data-cancion="saria"] .nav-links a.active, html[data-cancion="saria"] .mobile-menu-links a.active{color:#33FF99;}
html[data-cancion="saria"] .nav-links a.active::after{background:#33FF99;}
html[data-cancion="saria"] .nav-links a:hover{color:#9dffc9;}
html[data-cancion="saria"] header.site{background:rgba(6,22,14,.9); border-bottom-color:rgba(51,255,153,.25);}
html[data-cancion="saria"] .ticker-bar{background:rgba(3,14,9,.92); border-bottom-color:rgba(51,255,153,.2);}
html[data-cancion="saria"] .live-dot{background:#33FF99;}
html[data-cancion="saria"] .card, html[data-cancion="saria"] .dest-card, html[data-cancion="saria"] .destacado-mini, html[data-cancion="saria"] .most-read, html[data-cancion="saria"] .search-panel, html[data-cancion="saria"] .et{background:rgba(8,26,16,.92); border-color:rgba(51,255,153,.18);}
html[data-cancion="saria"] .dest-card, html[data-cancion="saria"] .card{border-top-color:#5ce39a !important;}
html[data-cancion="saria"] footer{background:rgba(3,14,9,.94); border-top-color:rgba(51,255,153,.2);}
html[data-cancion="saria"] .lead-hero-link{animation:none; border-color:rgba(51,255,153,.3); box-shadow:0 0 40px rgba(51,255,153,.18);}
html[data-cancion="saria"] .life-bar-fill{background:#33FF99;}
html[data-cancion="saria"] .life-bar-fill.low{background:#9dffc9;}
html[data-cancion="saria"] .section-mark{background:#33FF99;}
html[data-cancion="saria"] .pull-quote{border-left-color:#33FF99;}
html[data-cancion="saria"] .article-hero-divider{background:linear-gradient(90deg, #33FF99, #9dffc9) !important;}
html[data-cancion="saria"] .hashtag, html[data-cancion="saria"] .tags-row .hashtag{color:#5ce39a !important;}
html[data-cancion="saria"] .oca-panel{box-shadow:5px 5px 0 #33FF99;}
html[data-cancion="saria"] .oca-song.locked .oca-song-state, html[data-cancion="saria"] .oca-panel-close:hover, html[data-cancion="saria"] .oca-back:hover{color:#9dffc9; border-color:#9dffc9;}
.oca-bosque{
  position:fixed; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; pointer-events:none;
  filter:saturate(1.15) brightness(1);
}
/* Capa negra con opacidad sobre el video, más densa abajo (donde hay más texto). */
.oca-bosque-velo{position:fixed; inset:0; z-index:-2; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.7) 100%);}
.oca-niebla{position:fixed; inset:-20% -40%; z-index:-1; pointer-events:none; opacity:.5;
  background:radial-gradient(ellipse 40% 30% at 30% 60%, rgba(180,230,200,.35), transparent 70%), radial-gradient(ellipse 50% 35% at 70% 40%, rgba(160,220,190,.3), transparent 70%), radial-gradient(ellipse 60% 30% at 50% 85%, rgba(200,240,220,.3), transparent 70%);
  animation:oca-niebla 40s ease-in-out infinite alternate;
}
.oca-niebla.b{opacity:.35; animation-duration:55s; animation-direction:alternate-reverse;}
@keyframes oca-niebla{0%{transform:translate(0,0) scale(1);} 100%{transform:translate(12%, -6%) scale(1.15);}}
.oca-luz{
  position:fixed; z-index:9150; width:5px; height:5px; pointer-events:none; border-radius:50%;
  background:#33FF99; box-shadow:0 0 8px 2px #33FF99; opacity:0;
  animation:oca-luz linear forwards;
}
.oca-luz.clara{background:#9dffc9; box-shadow:0 0 8px 2px #9dffc9;}
.oca-luz.amarilla{background:#ffe866; box-shadow:0 0 8px 2px #ffe866;}
@keyframes oca-luz{0%{transform:translate(0,0); opacity:0;} 15%{opacity:1;} 50%{opacity:.6;} 70%{opacity:1;} 100%{transform:translate(var(--dx, 30px), var(--dy, -120px)); opacity:0;}}

/* El hada del bosque */
.oca-fairy{
  position:fixed; z-index:9300; width:46px; height:46px; cursor:pointer; border:0; background:transparent; padding:0; left:0; top:0;
  filter:drop-shadow(0 0 10px rgba(51,255,153,.95)); will-change:transform;
}
.oca-fairy svg{width:100%; height:100%; display:block; image-rendering:pixelated; animation:oca-fairy-bob .4s steps(2) infinite;}
@keyframes oca-fairy-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.oca-fairy-text{
  position:fixed; z-index:9300; left:0; top:0; font-family:'Press Start 2P', monospace; font-size:9px; color:#fff; background:#000; border:2px solid #33FF99; padding:6px 8px; pointer-events:none; white-space:nowrap; will-change:transform;
}

/* ---------- Nana de Zelda: la puerta ---------- */
html[data-cancion="nana"] body::after{content:""; position:fixed; inset:0; z-index:9000; pointer-events:none; background:radial-gradient(ellipse at center, transparent 55%, rgba(255,200,60,.14) 100%);}
.oca-puerta{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%); z-index:9180;
  width:140px; height:190px; border:0; padding:0; background:transparent; cursor:pointer;
  filter:drop-shadow(0 0 22px rgba(255,210,80,.55));
  animation:oca-puerta-in 1s steps(8) both;
}
.oca-puerta svg{width:100%; height:100%; display:block; image-rendering:pixelated;}
.oca-puerta-label{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap;
  font-family:'Press Start 2P', monospace; font-size:10px; color:#111; background:#ffd24a; border:3px solid #111; padding:9px 12px; box-shadow:3px 3px 0 #111;
  animation:oca-label-bob 1.2s steps(2) infinite;
}
@keyframes oca-puerta-in{0%{transform:translate(-50%, 100%);} 100%{transform:translate(-50%, 0);}}
@keyframes oca-label-bob{50%{transform:translate(-50%, -4px);}}
.oca-puerta:hover{filter:drop-shadow(0 0 30px rgba(255,210,80,.9));}
@media (max-width:640px){
  .oca-puerta{left:12px; transform:none; width:96px; height:130px; bottom:0;}
  .oca-puerta-label{left:0; transform:none; font-size:9px;}
  @keyframes oca-puerta-in{0%{transform:translateY(100%);} 100%{transform:translateY(0);}}
  @keyframes oca-label-bob{50%{transform:translateY(-4px);}}
}

/* ---------- Portal secreto del bosque (/sala-secreta) ---------- */
/* La web de RC en verdes con dorado: el oro solo en el portal. */
body.oca-portal{--pink:#ffd24a; --green:#33FF99; --surface:#0b2416; --line:#1f4a33; --bg:#06160d; --text-soft:#9fd9b8;}
body.oca-portal{background:radial-gradient(ellipse at top, #0f3320 0%, #06160d 55%, #04100a 100%);}
body.oca-portal header.site{background:rgba(6,22,14,.92);}
body.oca-portal .ticker-bar{background:rgba(3,14,9,.92);}
body.oca-portal .brand-edge{background:linear-gradient(90deg, #ffd24a 0%, #ffd24a 50%, #33FF99 50%, #33FF99 100%);}
body.oca-portal [style*="--type-color"]{--type-color:#5ce39a !important;}
body.oca-portal .type-dot{background:#5ce39a !important;}
body.oca-portal .pill{color:#5ce39a !important;}
body.oca-portal footer{background:rgba(3,14,9,.94);}
.oca-portal-head{position:relative; text-align:center; padding:54px 20px 40px; overflow:hidden;}
.oca-portal-head::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 50% 20%, rgba(255,210,74,.18), transparent 70%); pointer-events:none;}
.oca-portal-rays{position:absolute; left:50%; top:-40%; width:140vw; height:140vw; max-width:1600px; max-height:1600px; transform:translateX(-50%); pointer-events:none; opacity:.35;
  background:repeating-conic-gradient(from 0deg, rgba(255,210,74,.14) 0deg 6deg, transparent 6deg 18deg);
  mask-image:radial-gradient(circle, #000 0%, transparent 60%); -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 60%);
  animation:oca-rays 90s linear infinite;
}
@keyframes oca-rays{to{transform:translateX(-50%) rotate(360deg);}}
.oca-portal-head .eyebrow{position:relative; color:#ffd24a; letter-spacing:.14em;}
.oca-portal-head h1{position:relative; font-family:'Bebas Neue', sans-serif; font-weight:400; font-size:clamp(42px,7vw,88px); text-transform:uppercase; line-height:.95; margin:12px 0 14px;
  background:linear-gradient(180deg, #fff6cc 0%, #ffd24a 45%, #b8861b 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(255,210,74,.35));
}
.oca-portal-head p{position:relative; color:#cfeedd; font-size:16.5px; max-width:64ch; margin:0 auto; line-height:1.6;}
.oca-portal-tri{position:relative; display:inline-block; width:0; height:0; border-left:26px solid transparent; border-right:26px solid transparent; border-bottom:44px solid #ffd24a; filter:drop-shadow(0 0 18px rgba(255,210,74,.75)); animation:oca-tri-float 3s ease-in-out infinite;}
@keyframes oca-tri-float{50%{transform:translateY(-6px);}}
.oca-portal-chispas{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.oca-chispa{position:absolute; width:4px; height:4px; background:#ffd24a; box-shadow:0 0 8px 2px rgba(255,210,74,.8); border-radius:50%; opacity:0; animation:oca-chispa linear infinite;}
@keyframes oca-chispa{0%{transform:translateY(0) scale(.6); opacity:0;} 20%{opacity:1;} 100%{transform:translateY(-140px) scale(1.1); opacity:0;}}
.oca-portal-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start;}
.oca-portal-cols .section-head{border-bottom-color:rgba(255,210,74,.35);}
.oca-portal-cols .section-mark{background:#ffd24a;}
.oca-portal-cols .news-item{grid-template-columns:150px minmax(0,1fr); gap:16px; padding:18px 0;}
.oca-portal-cols .news-item h3{font-size:16.5px;}
.oca-portal-cols .news-item p{font-size:13.5px;}
.oca-portal-empty{color:var(--text-soft); font-size:14px; padding:18px 0;}

/* Línea de tiempo: desde 2026 hacia atrás, scroll horizontal. */
.oca-tl{position:relative; margin-top:16px;}
.oca-tl-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px;}
.oca-tl-head p{color:var(--text-soft); font-size:14px; margin:0;}
.oca-tl-nav{display:flex; gap:8px;}
.oca-tl-nav button{width:40px; height:40px; border-radius:100px; border:1px solid rgba(255,210,74,.5); background:rgba(0,0,0,.35); color:#ffd24a; font-size:18px; cursor:pointer;}
.oca-tl-nav button:hover{background:#ffd24a; color:#1a1200;}
.oca-tl-track{display:flex; gap:22px; overflow-x:auto; padding:28px 4px 24px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#ffd24a transparent; position:relative;}
.oca-tl-track::before{content:""; position:absolute; left:0; right:0; top:14px; height:2px; background:linear-gradient(90deg, #ffd24a, rgba(255,210,74,.25));}
.oca-tl-item{position:relative; flex:0 0 230px; scroll-snap-align:start; display:block; color:#fff; text-decoration:none;}
.oca-tl-item::before{content:""; position:absolute; left:0; top:-19px; width:12px; height:12px; border-radius:50%; background:#0b2416; border:2px solid #ffd24a;}
.oca-tl-item.star::before{background:#ffd24a; box-shadow:0 0 14px #ffd24a; width:16px; height:16px; top:-21px;}
.oca-tl-year{font-family:'Bebas Neue', sans-serif; font-size:30px; line-height:1; color:#ffd24a; letter-spacing:.02em;}
.oca-tl-item.star .oca-tl-year{font-size:40px; text-shadow:0 0 18px rgba(255,210,74,.6);}
.oca-tl-thumb{position:relative; aspect-ratio:16/9; margin:10px 0 10px; overflow:hidden; background:#0b2416; border:1px solid rgba(255,210,74,.25); border-radius:3px;}
.oca-tl-item.star .oca-tl-thumb{border-color:#ffd24a; box-shadow:0 0 24px rgba(255,210,74,.35);}
.oca-tl-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.oca-tl-item:hover .oca-tl-thumb img{transform:scale(1.05);}
.oca-tl-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.6); border:1.5px solid #ffd24a; color:#ffd24a; display:flex; align-items:center; justify-content:center; font-size:16px; padding-left:3px;}
.oca-tl-title{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14.5px; line-height:1.3;}
.oca-tl-meta{font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); margin-top:5px;}
.oca-tl-meta b{color:#ffd24a; font-weight:500;}
.oca-tl-item.nolink{opacity:.75; cursor:default;}
.oca-tl-item.nolink .oca-tl-play{display:none;}
.oca-tl-badge{position:absolute; top:8px; left:8px; font-family:'Press Start 2P', monospace; font-size:7px; background:#ffd24a; color:#1a1200; padding:4px 6px;}

@media (max-width:900px){
  .oca-portal-cols{grid-template-columns:1fr; gap:10px;}
  .oca-portal-head{padding:40px 16px 28px;}
}

/* ---------- Celular ---------- */
@media (max-width:640px){
  .oca{right:8px; bottom:8px; gap:4px;}
  .oca-link{width:120px; height:120px;}
  .oca-link canvas{width:120px; height:120px;}
  .oca-mute{width:30px; height:30px; margin-bottom:10px;}
  .oca-bubble{max-width:calc(100vw - 150px); font-size:10px; margin-bottom:24px;}
  .oca-panel{right:8px; bottom:132px;}
  .oca-dpad{grid-template-columns:repeat(3, 58px); grid-template-rows:repeat(3, 58px);}
  body.has-admin-bar .oca{bottom:68px;}
  body.has-admin-bar .oca-panel{bottom:192px;}
  .oca-portal-cols .news-item{grid-template-columns:110px minmax(0,1fr);}
  .oca-tl-item{flex-basis:200px;}
}

@media (prefers-reduced-motion: reduce){
  .oca-niebla, .oca-luz, .oca-fairy svg, .oca-puerta-label, .oca-portal-rays, .oca-chispa, .oca-portal-tri{animation:none !important;}
  .oca-in{animation:none;}
}