/* mod_tasi3ahome 7.4.0 — « اختار عالمك » : two portals, quizzes and 3D games, the gold بنك الفروض door and the ركن الهدايا gift.
   Page text uses the template tokens (--t-*) with fallbacks; the portals carry their own colours. */

@font-face { font-family: "Tajawal"; font-weight: 500; font-display: swap; src: url(../fonts/tajawal-500.woff2) format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 800; font-display: swap; src: url(../fonts/tajawal-800.woff2) format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 900; font-display: swap; src: url(../fonts/tajawal-900.woff2) format("woff2"); }

.t3w {
  --w-ink: var(--t-ink, #16244a);
  --w-ink-2: var(--t-ink-2, #52607e);
  --w-surface: var(--t-surface, #fff);
  --w-line: var(--t-line, #dfe6f5);
  --w-gold: #ffc93c;
  --w-gold-ink: #3a2a00;
  display: grid;
  gap: clamp(1rem, .7rem + 1.4vw, 1.8rem);
  padding-block: clamp(.8rem, .5rem + 1.5vw, 1.8rem) clamp(1.2rem, 1rem + 1vw, 2rem);
  font-family: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  color: var(--w-ink);
  container: t3w / inline-size;
}
.t3w *, .t3w *::before, .t3w *::after { box-sizing: border-box; }
.t3w a { text-decoration: none; }

/* ---------- title */
.t3w-head { text-align: center; }
.t3w-kicker { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; padding: .25rem .9rem; border-radius: 999px; background: color-mix(in oklab, #4b6bff 12%, var(--w-surface)); color: #3346c4; font-weight: 800; font-size: .92rem; direction: rtl; }
.t3w-kicker b { font-size: 1.1rem; }
.t3w-head h1 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 900; line-height: 1.25; color: var(--w-ink); text-wrap: balance; }
.t3w-head h1 span { background: linear-gradient(90deg, #ff6a3d, #ff3d8b 45%, #7b4dff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- the two portals */
.t3w-worlds { display: flex; gap: clamp(.8rem, .5rem + 1vw, 1.4rem); perspective: 1400px; }
.t3w-portal {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(600px, 50vw, 660px);
  border-radius: 30px; overflow: hidden; isolation: isolate;
  color: #fff; outline-offset: 4px;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: flex-grow .5s cubic-bezier(.2,.8,.2,1), transform .25s ease-out, box-shadow .35s;
  box-shadow: 0 22px 50px -18px var(--glow), 0 0 0 1px rgb(255 255 255 / .08) inset;
}
.t3w-portal:hover, .t3w-portal:focus-visible { color: #fff; box-shadow: 0 30px 70px -18px var(--glow), 0 0 0 2px rgb(255 255 255 / .35) inset; }
@media (hover: hover) and (min-width: 900px) { .t3w-worlds:has(.t3w-portal:hover) .t3w-portal:hover { flex-grow: 1.22; } }
/* moving light under the pointer */
.t3w-portal::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(255 255 255 / .16), transparent 60%); opacity: 0; transition: opacity .3s; }
.t3w-portal:hover::after { opacity: 1; }

.t3w-scene { position: absolute; inset: 0; z-index: 0; transform-style: preserve-3d; }
.t3w-z1 { --z: 20px; } .t3w-z2 { --z: 45px; } .t3w-z3 { --z: 70px; } .t3w-z4 { --z: 100px; }
.t3w-scene [class*="t3w-z"] { translate: calc(var(--ry) * -1.4) calc(var(--rx) * 1.4); transition: translate .25s ease-out; }
.t3w-scene .t3w-z1 { translate: calc(var(--ry) * -.6) calc(var(--rx) * .6); }
.t3w-scene .t3w-z4 { translate: calc(var(--ry) * -2.4) calc(var(--rx) * 2.4); }

/* copy at the bottom of each portal */
.t3w-copy { position: relative; z-index: 2; padding: clamp(1.2rem, 1rem + 1.4vw, 2rem); padding-top: 3rem; background: linear-gradient(to top, var(--shade) 62%, color-mix(in srgb, var(--shade) 70%, transparent) 82%, transparent); }
.t3w-tag { display: inline-block; padding: .3rem .85rem; border-radius: 999px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .28); backdrop-filter: blur(6px); font-weight: 800; font-size: .9rem; }
.t3w-copy h2 { margin: .7rem 0 .45rem; color: #fff; font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 900; line-height: 1.25; text-shadow: 0 4px 18px rgb(0 0 0 / .35); }
.t3w-copy p { margin: 0 0 .8rem; max-width: 40ch; color: rgb(255 255 255 / .86); font-size: 1.05rem; line-height: 1.75; }
.t3w-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; padding: 0; list-style: none; }
.t3w-chips li { padding: .2rem .65rem; border-radius: 10px; background: rgb(0 0 0 / .22); font-size: .88rem; font-weight: 700; }
.t3w-go {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 56px; padding: .55rem 1.5rem;
  border-radius: 18px; background: var(--btn); color: var(--btn-ink); font-weight: 900; font-size: 1.12rem;
  box-shadow: 0 6px 0 var(--btn-edge), 0 14px 28px -6px var(--btn);
  transition: translate .15s, box-shadow .15s;
}
.t3w-go i { font-style: normal; transition: translate .2s; }
.t3w-portal:hover .t3w-go { translate: 0 -3px; box-shadow: 0 9px 0 var(--btn-edge), 0 18px 34px -6px var(--btn); }
.t3w-portal:hover .t3w-go i { translate: -5px 0; }
.t3w-portal:active .t3w-go { translate: 0 4px; box-shadow: 0 2px 0 var(--btn-edge); }

/* ================= WORLD 1 : QUIZ SHOW ================= */
.t3w-portal.is-quiz {
  --glow: #6a3cff; --shade: #1a0f5c;
  --btn: var(--w-gold); --btn-ink: var(--w-gold-ink); --btn-edge: #c98f00;
  background:
    radial-gradient(70% 55% at 50% 22%, #8b5cff 0%, transparent 70%),
    radial-gradient(60% 60% at 0% 100%, #ff3d8b55, transparent 70%),
    linear-gradient(170deg, #3b1fc4, #24127f 55%, #160b52);
}
.is-quiz .t3w-scene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgb(255 255 255 / .16) 1.2px, transparent 1.6px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
.t3w-beam { position: absolute; top: -20%; width: 34%; height: 90%; background: linear-gradient(to bottom, rgb(255 230 140 / .35), transparent 80%); filter: blur(6px); transform-origin: top center; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.t3w-beam.is-a { inset-inline-start: 6%; rotate: 22deg; }
.t3w-beam.is-b { inset-inline-end: 6%; rotate: -22deg; }
.t3w-confetti { position: absolute; inset: 0; background:
  radial-gradient(circle, #ffc93c 0 3px, transparent 4px) 12% 18% / 100% 100% no-repeat,
  radial-gradient(circle, #ff3d8b 0 3px, transparent 4px) 84% 12% / 100% 100% no-repeat,
  radial-gradient(circle, #3de0ff 0 2.5px, transparent 3.5px) 70% 46% / 100% 100% no-repeat,
  radial-gradient(circle, #7dff9a 0 2.5px, transparent 3.5px) 22% 52% / 100% 100% no-repeat,
  radial-gradient(circle, #fff 0 2px, transparent 3px) 52% 6% / 100% 100% no-repeat; }

.t3w-qcard {
  position: absolute; top: 7%; left: 50%; width: min(300px, 72%); margin-left: calc(min(300px, 72%) / -2);
  padding: .9rem; border-radius: 22px; background: #fff; color: #1b1650;
  box-shadow: 0 30px 50px -18px rgb(0 0 0 / .6), 0 0 0 6px rgb(255 255 255 / .12);
  rotate: -3deg;
}
.t3w-qtop { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .8rem; color: #6a62a8; }
.t3w-timer { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(#ff3d8b var(--t, 75%), #ece8ff 0); }
.t3w-timer::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.t3w-timer b { position: relative; font-size: .95rem; color: #ff3d8b; }
.t3w-qtext { margin: .45rem 0 .6rem; direction: ltr; text-align: center; font-weight: 900; font-size: 1.55rem; letter-spacing: .02em; color: #24127f; }
.t3w-answers { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.t3w-answers li { position: relative; display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem; border-radius: 12px; background: #f1eeff; font-weight: 800; font-size: .92rem; }
.t3w-answers i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 8px; background: #fff; color: #5b3df5; font-style: normal; font-size: .8rem; }
.t3w-answers li.is-right { background: #22c55e; color: #fff; box-shadow: 0 0 0 3px #bbf7d0, 0 8px 22px -4px #22c55e; }
.t3w-answers li.is-right i { color: #16a34a; }
.t3w-answers em { position: absolute; inset-inline-end: -.5rem; top: -.6rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--w-gold); color: var(--w-gold-ink); font-style: normal; font-size: .85rem; font-weight: 900; }

.t3w-player { position: absolute; top: 33%; display: grid; justify-items: center; }
.t3w-player img { width: clamp(70px, 8vw, 96px); height: auto; border-radius: 50%; border: 4px solid var(--w-gold); box-shadow: 0 10px 26px rgb(0 0 0 / .45); background: #fff; }
.t3w-player b { margin-top: -.7rem; padding: .1rem .55rem; border-radius: 99px; background: #ff3d8b; font-size: .82rem; font-weight: 900; direction: ltr; box-shadow: 0 4px 10px rgb(0 0 0 / .3); }
.t3w-player.is-boy { inset-inline-end: 4%; }
.t3w-player.is-girl { inset-inline-start: 4%; top: 26%; }
.t3w-player.is-girl b { background: #ff8a00; }

.t3w-pop { position: absolute; display: grid; place-items: center; font-weight: 900; }
.t3w-pop.is-1 { top: 6%; left: 8%; padding: .3rem .7rem; border-radius: 12px; background: var(--w-gold); color: var(--w-gold-ink); rotate: -10deg; direction: ltr; box-shadow: 0 8px 20px rgb(0 0 0 / .35); }
.t3w-pop.is-2, .t3w-pop.is-3 { width: 46px; height: 46px; border-radius: 14px; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .3); font-size: 1.4rem; backdrop-filter: blur(4px); }
.t3w-pop.is-2 { top: 8%; right: 6%; rotate: 12deg; }
.t3w-pop.is-3 { top: 47%; inset-inline-start: 26%; rotate: -8deg; }

/* ================= WORLD 2 : 3D ADVENTURE ================= */
.t3w-portal.is-3d {
  --glow: #ff6a3d; --shade: #0c0b2a;
  --btn: #22e0c8; --btn-ink: #062b2a; --btn-edge: #0f9e8d;
  background: linear-gradient(to bottom, #090a2b 0%, #24124f 22%, #7a2a6b 34%, #ff7a3d 42%, #2a1240 42.3%, #0c0b2a 100%);
}
.t3w-stars { position: absolute; inset: 0 0 60% 0; background-image:
  radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 25% 8%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 40% 30%, #ffe9a8, transparent), radial-gradient(1px 1px at 62% 12%, #fff, transparent),
  radial-gradient(2px 2px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 6%, #fff, transparent),
  radial-gradient(1px 1px at 52% 4%, #bfe9ff, transparent), radial-gradient(1.5px 1.5px at 6% 40%, #fff, transparent); }
.t3w-sun { position: absolute; left: 50%; top: calc(42% - min(200px, 40%) * .84); width: min(200px, 40%); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: linear-gradient(to bottom, #ffe36e 0%, #ff9a3d 50%, #ff3d8b 100%);
  -webkit-mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 68%, #000 68% 74%, transparent 74% 79%, #000 79% 84%, transparent 84%);
          mask: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 68%, #000 68% 74%, transparent 74% 79%, #000 79% 84%, transparent 84%);
  filter: drop-shadow(0 0 40px #ff7a3d); }
.t3w-skyline { position: absolute; left: 0; right: 0; top: calc(42% - 60px); width: 100%; height: 62px; fill: #1a0b33; }
.t3w-floor { position: absolute; left: -40%; right: -40%; top: 42%; height: 70%; transform-origin: top center; transform: perspective(260px) rotateX(62deg);
  background-image: linear-gradient(#22e0c8 1.5px, transparent 1.5px), linear-gradient(90deg, #22e0c8 1.5px, transparent 1.5px);
  background-size: 46px 46px; opacity: .55;
  -webkit-mask: linear-gradient(to bottom, #000 0%, transparent 70%); mask: linear-gradient(to bottom, #000 0%, transparent 70%); }

.t3w-cube-wrap { position: absolute; top: 6%; inset-inline-end: 12%; width: 110px; height: 110px; perspective: 600px; }
.t3w-cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(35deg); }
.t3w-cube span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; font: 900 2.6rem/1 "Tajawal", system-ui, sans-serif; color: #fff; direction: ltr;
  background: linear-gradient(135deg, rgb(34 224 200 / .85), rgb(91 61 245 / .85)); border: 2px solid rgb(255 255 255 / .6);
  box-shadow: inset 0 0 22px rgb(255 255 255 / .35); text-shadow: 0 2px 10px rgb(0 0 0 / .35); backface-visibility: visible; }
.t3w-cube .f1 { transform: translateZ(55px); }
.t3w-cube .f2 { transform: rotateY(180deg) translateZ(55px); }
.t3w-cube .f3 { transform: rotateY(90deg) translateZ(55px); background: linear-gradient(135deg, rgb(255 122 61 / .9), rgb(255 61 139 / .85)); }
.t3w-cube .f4 { transform: rotateY(-90deg) translateZ(55px); background: linear-gradient(135deg, rgb(255 122 61 / .9), rgb(255 61 139 / .85)); }
.t3w-cube .f5 { transform: rotateX(90deg) translateZ(55px); background: linear-gradient(135deg, #ffe36e, #ff9a3d); color: #3a1a00; }
.t3w-cube .f6 { transform: rotateX(-90deg) translateZ(55px); }

/* the marbles (الماط / البلّي) */
.t3w-marble { position: absolute; width: 46px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 8%, var(--c1) 22%, var(--c2) 70%, #000 120%);
  box-shadow: 0 16px 14px -10px rgb(0 0 0 / .6), inset -6px -8px 14px rgb(0 0 0 / .35); }
.t3w-marble::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 50%; border: 3px solid rgb(255 255 255 / .35); border-color: rgb(255 255 255 / .45) transparent transparent; rotate: -30deg; }
.t3w-marble.is-1 { --c1: #4fd1ff; --c2: #1146c9; top: 45%; inset-inline-start: 18%; }
.t3w-marble.is-2 { --c1: #ff6b6b; --c2: #b3102f; top: 46%; inset-inline-end: 22%; width: 56px; }
.t3w-marble.is-3 { --c1: #7dff9a; --c2: #0f8a43; top: 43%; inset-inline-start: 46%; width: 30px; }
.t3w-lvl { position: absolute; top: 7%; right: 7%; padding: .25rem .6rem; border-radius: 8px; border: 2px solid #22e0c8; color: #22e0c8; font: 900 .8rem/1.2 ui-monospace, "Courier New", monospace; letter-spacing: .12em; direction: ltr; background: rgb(6 43 42 / .5); box-shadow: 0 0 18px rgb(34 224 200 / .45); }

/* ================= THE GOLD DOOR : بنك الفروض ================= */
.t3w-bank {
  --bk-ink: #3a2a00; --bk-deep: #c98f00;
  --bk-pad: clamp(1.2rem, .8rem + 1.6vw, 2.4rem); --bk-art: clamp(118px, 10vw, 150px); --bk-gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--bk-gap);
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem) var(--bk-pad);
  border-radius: 30px; color: var(--bk-ink);
  background:
    linear-gradient(rgb(58 42 0 / .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(58 42 0 / .07) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(60% 120% at 85% 0%, #fff3b0 0%, transparent 60%),
    linear-gradient(120deg, #ffe066 0%, #ffc93c 45%, #ffad1f 100%);
  box-shadow: 0 8px 0 var(--bk-deep), 0 26px 50px -20px #ff9f1c, 0 0 0 1px rgb(255 255 255 / .5) inset;
  transition: translate .2s ease-out, box-shadow .2s;
}
/* the red margin line of a school notebook */
.t3w-bank::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--bk-pad) + var(--bk-art) + var(--bk-gap) / 2); width: 2px; background: rgb(230 57 70 / .35); z-index: -1; }
/* a light sweep, every few seconds */
.t3w-bank::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%); translate: 120% 0; }
.t3w-bank:hover, .t3w-bank:focus-visible { color: var(--bk-ink); translate: 0 -3px; box-shadow: 0 11px 0 var(--bk-deep), 0 32px 60px -20px #ff9f1c, 0 0 0 2px rgb(255 255 255 / .7) inset; }
.t3w-bank:active { translate: 0 5px; box-shadow: 0 3px 0 var(--bk-deep), 0 12px 24px -12px #ff9f1c; }

.t3w-bank-art { position: relative; width: var(--bk-art); aspect-ratio: 4 / 5; }
.t3w-sheet { position: absolute; inset: 0; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px -10px rgb(58 42 0 / .45); }
.t3w-sheet.is-back { rotate: -12deg; translate: 12px 6px; background: #fff7dc; }
.t3w-sheet.is-mid { rotate: 7deg; translate: -8px 2px; background: #fffbea; }
.t3w-sheet.is-front { display: flex; flex-direction: column; gap: 7px; padding: 14px 12px; rotate: -2deg; }
.t3w-sheet.is-front b { align-self: flex-start; padding: .12rem .5rem; border-radius: 7px; background: #e63946; color: #fff; font: 900 .8rem/1.3 system-ui, sans-serif; letter-spacing: .06em; direction: ltr; }
.t3w-sheet.is-front i { display: block; height: 6px; border-radius: 6px; background: #e8ecf5; }
.t3w-sheet.is-front i.is-short { width: 60%; }
.t3w-sheet.is-front em { margin-top: auto; align-self: center; padding: .15rem .55rem; border-radius: 999px; background: #22c55e; color: #fff; font-style: normal; font-weight: 900; font-size: .8rem; box-shadow: 0 4px 12px -2px #22c55e; }
.t3w-bank-pop { position: absolute; display: grid; place-items: center; font-weight: 900; box-shadow: 0 8px 18px rgb(58 42 0 / .3); }
.t3w-bank-pop.is-1 { bottom: 30%; inset-inline-end: -24%; padding: .2rem .55rem; border-radius: 10px; background: #e63946; color: #fff; rotate: 12deg; direction: ltr; font-size: .9rem; }
.t3w-bank-pop.is-2 { bottom: 2%; inset-inline-start: -14%; width: 38px; height: 38px; border-radius: 12px; background: #1a0f5c; color: var(--w-gold); font-size: 1.15rem; rotate: -10deg; }

.t3w-bank-copy { position: relative; z-index: 2; min-width: 0; }
.t3w-tag.is-dark { background: rgb(58 42 0 / .1); border-color: rgb(58 42 0 / .22); color: var(--bk-ink); backdrop-filter: none; }
.t3w-bank-copy h2 { margin: .55rem 0 .35rem; color: #2a1d00; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem); font-weight: 900; line-height: 1.25; }
.t3w-bank-copy h2 span { color: #b8261f; }
.t3w-bank-copy p { margin: 0 0 .7rem; max-width: 58ch; color: rgb(58 42 0 / .86); font-size: 1.03rem; line-height: 1.7; }
.t3w-bank .t3w-chips { margin: 0; }
.t3w-bank .t3w-chips li { background: rgb(255 255 255 / .55); color: var(--bk-ink); }

.t3w-go.is-bank { position: relative; z-index: 2; --btn: #1a0f5c; --btn-ink: var(--w-gold); --btn-edge: #0b0636; white-space: nowrap; box-shadow: 0 6px 0 var(--btn-edge), 0 14px 26px -8px rgb(26 15 92 / .6); }
.t3w-bank:hover .t3w-go.is-bank { translate: 0 -3px; box-shadow: 0 9px 0 var(--btn-edge), 0 18px 30px -8px rgb(26 15 92 / .6); }
.t3w-bank:hover .t3w-go.is-bank i { translate: -5px 0; }

/* ================= THE GIFT : ركن الهدايا ================= */
.t3w-gift {
  --gf-bg: #1239a0; --gf-deep: #0a2470; --gf-gold: #ffc93c; --gf-red: #ff3d6e;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem) clamp(1.2rem, .8rem + 1.6vw, 2.4rem);
  border-radius: 30px; color: #fff;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, #ffe9a8, transparent), radial-gradient(1px 1px at 72% 80%, #fff, transparent),
    radial-gradient(2px 2px at 88% 30%, #fff, transparent),
    radial-gradient(55% 120% at 12% 50%, rgb(255 201 60 / .28), transparent 65%),
    linear-gradient(120deg, #1a47c4 0%, var(--gf-bg) 45%, var(--gf-deep) 100%);
  box-shadow: 0 8px 0 #071a52, 0 26px 50px -20px #1239a0, 0 0 0 1px rgb(255 255 255 / .12) inset;
  transition: translate .2s ease-out, box-shadow .2s;
}
/* a ribbon crossing the whole banner, like gift wrapping */
.t3w-gift::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: calc(clamp(1.2rem, .8rem + 1.6vw, 2.4rem) + 58px); width: 18px;
  background: linear-gradient(90deg, transparent 0 3px, rgb(255 61 110 / .45) 3px 15px, transparent 15px); }
.t3w-gift:hover, .t3w-gift:focus-visible { color: #fff; translate: 0 -3px; box-shadow: 0 11px 0 #071a52, 0 32px 60px -20px #1239a0, 0 0 0 2px rgb(255 201 60 / .6) inset; }
.t3w-gift:active { translate: 0 5px; box-shadow: 0 3px 0 #071a52; }

/* the box */
.t3w-gift-art { position: relative; z-index: 7; width: 132px; height: 132px; display: grid; place-items: end center; }
.t3w-gift-glow { position: absolute; inset: 10% 5% 0; border-radius: 50%; background: radial-gradient(circle, rgb(255 201 60 / .55), transparent 65%); filter: blur(6px); opacity: .6; }
.t3w-gift-box { position: relative; width: 104px; height: 100px; transform-origin: 50% 100%; }
.t3w-gift-body { position: absolute; left: 6px; right: 6px; bottom: 0; height: 66px; border-radius: 6px 6px 12px 12px;
  background: linear-gradient(90deg, transparent 0 41%, var(--gf-red) 41% 59%, transparent 59%), linear-gradient(160deg, #ffe07a, var(--gf-gold) 55%, #e8a400);
  box-shadow: inset 0 -8px 14px rgb(160 90 0 / .35), 0 14px 18px -10px rgb(0 0 0 / .55); }
.t3w-gift-lid { position: absolute; left: 0; right: 0; top: 14px; height: 24px; border-radius: 8px; z-index: 2;
  background: linear-gradient(90deg, transparent 0 41%, var(--gf-red) 41% 59%, transparent 59%), linear-gradient(170deg, #fff0b0, #ffd451 60%, #f0b000);
  box-shadow: 0 6px 10px -4px rgb(120 60 0 / .5); transform-origin: 20% 100%; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.t3w-gift-bow { position: absolute; left: 50%; top: -22px; width: 56px; height: 26px; translate: -50% 0; font-style: normal; }
.t3w-gift-bow::before, .t3w-gift-bow::after { content: ""; position: absolute; top: 2px; width: 26px; height: 22px; border: 6px solid var(--gf-red); border-radius: 60% 60% 20% 60%; }
.t3w-gift-bow::before { left: 0; rotate: -18deg; } .t3w-gift-bow::after { right: 0; rotate: 18deg; scale: -1 1; }
.t3w-gift-spark { position: absolute; color: var(--gf-gold); font-style: normal; font-size: 1.1rem; text-shadow: 0 0 8px rgb(255 201 60 / .9); }
.t3w-gift-spark.is-1 { top: 2%; left: 4%; } .t3w-gift-spark.is-2 { top: 18%; right: 0; font-size: 1.4rem; } .t3w-gift-spark.is-3 { bottom: 26%; left: -6%; font-size: .9rem; }
.t3w-gift-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; z-index: 8; pointer-events: none; }
.t3w-gift-burst i { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; translate: -50% -50%; }
.t3w-gift:hover .t3w-gift-lid { transform: translateY(-6px) rotate(-4deg); }

.t3w-gift-copy { position: relative; z-index: 2; min-width: 0; }
.t3w-tag.is-gift-day { background: var(--gf-gold); border-color: #ffe08a; color: #3a2a00; backdrop-filter: none; }
.t3w-tag.is-gift-day b { font-size: 1.05em; }
.t3w-gift-copy h2 { margin: .55rem 0 .35rem; color: #fff; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem); font-weight: 900; line-height: 1.25; }
.t3w-gift-copy h2 span { color: var(--gf-gold); }
.t3w-gift-copy p { margin: 0 0 .7rem; max-width: 58ch; color: rgb(255 255 255 / .86); font-size: 1.03rem; line-height: 1.7; }
.t3w-gift .t3w-chips { margin: 0; }
.t3w-go.is-gift { position: relative; z-index: 2; --btn: var(--gf-gold); --btn-ink: #3a2a00; --btn-edge: #c98f00; white-space: nowrap; }
.t3w-gift:hover .t3w-go.is-gift { translate: 0 -3px; box-shadow: 0 9px 0 var(--btn-edge), 0 18px 34px -6px var(--btn); }
.t3w-gift:hover .t3w-go.is-gift i { translate: 0 0; rotate: -12deg; }
.t3w-go.is-gift i { transition: rotate .2s; }

/* « مبروك » message */
.t3w-gift-toast { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 900; color: #3a2a00; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgb(255 224 110 / .93), rgb(255 201 60 / .88) 60%, rgb(255 173 31 / .85)); }

/* ---- opening (class added by the click) */
.t3w-gift.is-opening { translate: 0 0; }
.t3w-gift.is-opening .t3w-gift-box { animation: t3w-gift-shake .45s ease-in-out; }
.t3w-gift.is-opening .t3w-gift-lid { animation: t3w-gift-lid .7s .4s cubic-bezier(.2,.9,.3,1) forwards; }
.t3w-gift.is-opening .t3w-gift-glow { animation: t3w-gift-flash .9s .45s ease-out forwards; }
.t3w-gift.is-opening .t3w-gift-burst i { animation: t3w-gift-confetti 1.1s calc(.45s + var(--delay, 0ms)) cubic-bezier(.15,.7,.3,1) forwards; }
.t3w-gift.is-opening .t3w-gift-toast { animation: t3w-gift-toast .9s .8s ease-out forwards; }
@keyframes t3w-gift-shake { 20% { rotate: -9deg; } 40% { rotate: 8deg; } 60% { rotate: -6deg; } 80% { rotate: 4deg; } }
@keyframes t3w-gift-lid { 40% { transform: translate(-6px,-70px) rotate(-28deg); } 100% { transform: translate(-30px,-120px) rotate(-62deg); opacity: 0; } }
@keyframes t3w-gift-flash { 0% { opacity: .6; scale: 1; } 40% { opacity: 1; scale: 2.6; } 100% { opacity: 0; scale: 3.2; } }
@keyframes t3w-gift-confetti { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--rot)); } }
@keyframes t3w-gift-toast { 0% { opacity: 0; scale: .7; } 60% { opacity: 1; scale: 1.04; } 100% { opacity: 1; scale: 1; } }

/* ---------- login / welcome strip */
.t3w-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: 1rem 1.3rem; border-radius: 22px; background: var(--w-surface); border: 1px solid var(--w-line); box-shadow: 0 8px 24px rgb(20 30 80 / .06); }
.t3w-bar p { margin: 0; color: var(--w-ink-2); line-height: 1.6; }
.t3w-bar p b { color: var(--w-ink); }
.t3w-bar-cta { display: flex; flex-wrap: wrap; gap: .5rem; }
.t3w-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .4rem 1.05rem; border-radius: 14px; border: 1.5px solid var(--w-line); background: var(--w-surface); color: var(--w-ink); font-weight: 900; font-size: .98rem; transition: translate .15s, border-color .15s; }
.t3w-btn:hover { translate: 0 -2px; color: var(--w-ink); border-color: #7b4dff; }
.t3w-btn svg { width: 20px; height: 20px; flex: none; }
.t3w-btn.is-gold { background: var(--w-gold); border-color: var(--w-gold); color: var(--w-gold-ink); box-shadow: 0 4px 0 #c98f00; }
.t3w-btn.is-gold:hover { color: var(--w-gold-ink); }
.t3w-btn.is-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.t3w-btn.is-facebook:hover { color: #fff; }
.t3w-btn.is-ghost { background: transparent; }

/* ---------- motion */
@media (prefers-reduced-motion: no-preference) {
  .t3w-qcard { animation: t3w-bob 5s ease-in-out infinite; }
  .t3w-timer { animation: t3w-timer 6s linear infinite; }
  .t3w-answers li.is-right { animation: t3w-pulse 2.4s ease-in-out infinite; }
  .t3w-player { animation: t3w-bob 4.5s ease-in-out infinite; }
  .t3w-player.is-girl { animation-delay: -2s; }
  .t3w-pop { animation: t3w-bob 6s ease-in-out infinite; }
  .t3w-pop.is-2 { animation-delay: -1.5s; } .t3w-pop.is-3 { animation-delay: -3s; }
  .t3w-beam.is-a { animation: t3w-sweep-a 7s ease-in-out infinite; }
  .t3w-beam.is-b { animation: t3w-sweep-b 7s ease-in-out infinite; }
  .t3w-stars { animation: t3w-twinkle 3.5s ease-in-out infinite; }
  .t3w-floor { animation: t3w-run 1.6s linear infinite; }
  .t3w-cube { animation: t3w-spin 14s linear infinite; }
  .t3w-cube-wrap { animation: t3w-bob 5s ease-in-out infinite; }
  .t3w-marble { animation: t3w-bounce 1.8s cubic-bezier(.3,0,.7,1) infinite alternate; }
  .t3w-marble.is-2 { animation-duration: 2.2s; animation-delay: -.6s; }
  .t3w-marble.is-3 { animation-duration: 1.4s; animation-delay: -1s; }
  .t3w-lvl { animation: t3w-blink 2s steps(2, jump-none) infinite; }
  .t3w-portal:hover .t3w-cube { animation-duration: 5s; }
  .t3w-portal:hover .t3w-floor { animation-duration: .7s; }
  .t3w-bank::after { animation: t3w-shine 6s ease-in-out infinite; }
  .t3w-sheet.is-front { animation: t3w-bob 5s ease-in-out infinite; }
  .t3w-sheet.is-mid { animation: t3w-sway 6s ease-in-out infinite; }
  .t3w-bank-pop { animation: t3w-bob 4.5s ease-in-out infinite; }
  .t3w-bank-pop.is-2 { animation-delay: -2s; }
  .t3w-gift-box { animation: t3w-gift-breathe 2.6s ease-in-out infinite; }
  .t3w-gift-spark { animation: t3w-twinkle 1.8s ease-in-out infinite; }
  .t3w-gift-spark.is-2 { animation-delay: -.6s; } .t3w-gift-spark.is-3 { animation-delay: -1.2s; }
  .t3w-gift-glow { animation: t3w-twinkle 2.6s ease-in-out infinite; }
  .t3w-bank:hover .t3w-sheet.is-front { rotate: -6deg; translate: 0 -8px; }
  .t3w-sheet { transition: rotate .3s, translate .3s; }
}
@keyframes t3w-bob { 50% { margin-top: -10px; } }
@keyframes t3w-timer { from { --t: 100%; } to { --t: 0%; } }
@keyframes t3w-pulse { 50% { box-shadow: 0 0 0 6px #bbf7d0aa, 0 8px 30px -2px #22c55e; } }
@keyframes t3w-sweep-a { 50% { rotate: 8deg; } }
@keyframes t3w-sweep-b { 50% { rotate: -8deg; } }
@keyframes t3w-twinkle { 50% { opacity: .45; } }
@keyframes t3w-run { to { background-position: 0 46px; } }
@keyframes t3w-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes t3w-bounce { from { margin-top: 0; } to { margin-top: -38px; } }
@keyframes t3w-blink { 50% { opacity: .35; } }
@keyframes t3w-shine { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
@keyframes t3w-sway { 50% { rotate: 3deg; } }
@keyframes t3w-gift-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.05 .97; } 85% { rotate: 0deg; } 90% { rotate: -4deg; } 95% { rotate: 4deg; } }
@property --t { syntax: "<percentage>"; inherits: false; initial-value: 75%; }

/* ---------- narrow screens: one portal under the other */
@container t3w (max-width: 820px) {
  .t3w-worlds { flex-direction: column; perspective: none; }
  .t3w-portal { min-height: 600px; transform: none; }
  .t3w-copy p { font-size: 1rem; }
  .t3w-go { width: 100%; justify-content: center; }
  .t3w-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .t3w-bar-cta { justify-content: center; }
  .t3w-bank { grid-template-columns: auto 1fr; }
  .t3w-bank::before { display: none; }
  .t3w-go.is-bank { grid-column: 1 / -1; }
  .t3w-gift { grid-template-columns: auto 1fr; }
  .t3w-gift::before { display: none; }
  .t3w-go.is-gift { grid-column: 1 / -1; }
}
@container t3w (max-width: 420px) {
  .t3w-portal { min-height: 620px; border-radius: 24px; }
  .t3w-qcard { width: 74%; margin-left: -37%; }
  .t3w-player img { width: 58px; border-width: 3px; }
  .t3w-portal.is-quiz { min-height: 680px; }
  .t3w-player.is-boy, .t3w-player.is-girl { top: 222px; }
  .t3w-player.is-boy { inset-inline-end: 12%; }
  .t3w-player.is-girl { inset-inline-start: 12%; }
  .t3w-pop.is-2 { top: 230px; right: 42%; }
  .t3w-pop.is-3 { display: none; }
  .t3w-cube-wrap { scale: .8; inset-inline-end: 6%; }
  .t3w-bank { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 1.6rem; }
  .t3w-bank-art { width: 104px; }
  .t3w-bank .t3w-chips { justify-content: center; }
  .t3w-gift { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 1.8rem; }
  .t3w-gift .t3w-chips { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .t3w *, .t3w *::before, .t3w *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .t3w-portal, .t3w-bank, .t3w-gift, .t3w-btn, .t3w-go { border: 2px solid ButtonText; } }


/* ---------- 7.3.0 : مكتبة تاسعة — the books of com_tasi3abooks, fanned out in a neon space (same look as /books) */
.t3w-lib {
  --lib-accent: #ffc93c;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem) clamp(1.2rem, .8rem + 1.6vw, 2.4rem);
  border-radius: 30px; color: #fff;
  background:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 26% 78%, #9fe9ff, transparent),
    radial-gradient(1.5px 1.5px at 47% 12%, #ffe9a8, transparent), radial-gradient(1px 1px at 63% 66%, #fff, transparent),
    radial-gradient(2px 2px at 91% 24%, #9fe9ff, transparent), radial-gradient(1px 1px at 80% 88%, #fff, transparent),
    radial-gradient(50% 130% at 14% 60%, color-mix(in srgb, var(--lib-accent) 30%, transparent), transparent 70%),
    radial-gradient(60% 120% at 100% 0%, rgb(61 123 255 / .38), transparent 65%),
    linear-gradient(120deg, #0d1650 0%, #0a1033 50%, #050816 100%);
  box-shadow: 0 8px 0 #03051a, 0 26px 50px -20px #3d7bff, 0 0 0 1px rgb(56 225 255 / .25) inset;
  transition: translate .2s ease-out, box-shadow .2s;
}
.t3w-lib:hover, .t3w-lib:focus-visible { color: #fff; translate: 0 -3px; box-shadow: 0 11px 0 #03051a, 0 32px 60px -20px #3d7bff, 0 0 0 2px rgb(56 225 255 / .6) inset; }
.t3w-lib:active { translate: 0 5px; box-shadow: 0 3px 0 #03051a; }
/* neon floor grid */
.t3w-lib-grid { position: absolute; z-index: -1; inset: auto -30% -40% -30%; height: 75%; pointer-events: none;
  background-image: linear-gradient(rgb(56 225 255 / .3) 1px, transparent 1px), linear-gradient(90deg, rgb(61 123 255 / .3) 1px, transparent 1px);
  background-size: 46px 46px; transform: perspective(380px) rotateX(70deg); transform-origin: top;
  -webkit-mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 40%, #000 70%, transparent); }

/* the fan of 3D books */
.t3w-lib-art { position: relative; width: clamp(250px, 24vw, 330px); height: clamp(190px, 17vw, 230px); }
.t3w-lib-book {
  position: absolute; left: 50%; bottom: 14px; width: 44%; height: auto; max-width: none; border-radius: 0;
  translate: calc(-50% - var(--o) * 26%) calc(var(--a) * 6px);
  rotate: calc(var(--o) * -8deg); scale: calc(1 - var(--a) * .12);
  filter: drop-shadow(0 14px 16px rgb(0 0 0 / .55)) brightness(calc(1 - var(--a) * .14));
  transform-origin: 50% 100%;
  transition: translate .45s cubic-bezier(.2,.8,.2,1), rotate .45s cubic-bezier(.2,.8,.2,1), scale .45s, filter .45s;
}
.t3w-lib-book.is-center { filter: drop-shadow(0 14px 16px rgb(0 0 0 / .5)) drop-shadow(0 0 22px color-mix(in srgb, var(--c) 70%, transparent)); }
.t3w-lib:hover .t3w-lib-book { translate: calc(-50% - var(--o) * 34%) calc(var(--a) * 4px - 6px); rotate: calc(var(--o) * -12deg); }
.t3w-lib-halo { position: absolute; left: 50%; bottom: -4px; width: 86%; height: 36px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(color-mix(in srgb, var(--lib-accent) 75%, transparent), transparent 70%); filter: blur(8px); }
.t3w-lib-ring { position: absolute; left: 12%; right: 12%; bottom: 0; height: 40px; border-radius: 50%; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--lib-accent) 60%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--lib-accent) 45%, transparent); }
.t3w-lib-spark { position: absolute; z-index: 12; color: #ffe9a8; font-style: normal; text-shadow: 0 0 10px rgb(255 201 60 / .9); }
.t3w-lib-spark.is-1 { top: 4%; inset-inline-start: 10%; } .t3w-lib-spark.is-2 { top: 20%; inset-inline-end: 2%; font-size: 1.3rem; color: #9fe9ff; } .t3w-lib-spark.is-3 { bottom: 30%; inset-inline-start: -2%; font-size: .85rem; }

.t3w-lib-copy { position: relative; z-index: 2; min-width: 0; }
.t3w-tag.is-lib { background: rgb(56 225 255 / .12); border-color: rgb(56 225 255 / .45); color: #9fe9ff; }
.t3w-lib-copy h2 { margin: .55rem 0 .35rem; color: #fff; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem); font-weight: 900; line-height: 1.25; }
.t3w-lib-copy h2 span { background: linear-gradient(90deg, #ffc93c, #fff1b8 45%, #38e1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t3w-lib-copy p { margin: 0 0 .7rem; max-width: 58ch; color: rgb(255 255 255 / .84); font-size: 1.03rem; line-height: 1.7; }
.t3w-lib .t3w-chips { margin: 0; }
.t3w-lib .t3w-chips li { background: rgb(255 255 255 / .08); border: 1px solid rgb(140 165 255 / .25); }
.t3w-go.is-lib { position: relative; z-index: 2; --btn: #38e1ff; --btn-ink: #04122a; --btn-edge: #0b8fb0; white-space: nowrap; }
.t3w-lib:hover .t3w-go.is-lib { translate: 0 -3px; box-shadow: 0 9px 0 var(--btn-edge), 0 18px 34px -6px var(--btn); }
.t3w-lib:hover .t3w-go.is-lib i { translate: -5px 0; }

@media (prefers-reduced-motion: no-preference) {
  .t3w-lib-art { animation: t3w-lib-float 5s ease-in-out infinite; }
  .t3w-lib-ring { animation: t3w-lib-pulse 3.2s ease-in-out infinite; }
  .t3w-lib-spark { animation: t3w-twinkle 1.8s ease-in-out infinite; }
  .t3w-lib-spark.is-2 { animation-delay: -.6s; } .t3w-lib-spark.is-3 { animation-delay: -1.2s; }
  .t3w-lib-grid { animation: t3w-lib-floor 6s linear infinite; }
}
@keyframes t3w-lib-float { 50% { translate: 0 -6px; } }
@keyframes t3w-lib-pulse { 50% { scale: 1.08; opacity: .55; } }
@keyframes t3w-lib-floor { to { background-position: 0 46px, 0 0; } }

@container t3w (max-width: 820px) {
  .t3w-lib { grid-template-columns: auto 1fr; }
  .t3w-go.is-lib { grid-column: 1 / -1; justify-content: center; }
}
@container t3w (max-width: 560px) {
  .t3w-lib { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 1.4rem; }
  .t3w-lib .t3w-chips { justify-content: center; }
  .t3w-lib-art { width: min(300px, 86%); height: 200px; }
}
@media (forced-colors: active) { .t3w-lib { border: 2px solid ButtonText; } }


/* ---------- 7.4.0 : معاك — live help on Google Meet (ma3an.tasi3a.tn), notebook paper like the ma3an site */
.t3w-ma3an {
  --mn-blue: #1446e6; --mn-blue-ink: #0b2a99; --mn-red: #e3262f; --mn-ink: #0f1a3d;
  --mn-pad: clamp(1.2rem, .8rem + 1.6vw, 2.4rem); --mn-art: clamp(230px, 22vw, 300px); --mn-gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mn-gap);
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem) var(--mn-pad);
  border-radius: 30px; color: var(--mn-ink);
  background:
    linear-gradient(rgb(20 70 230 / .09) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(20 70 230 / .09) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(55% 120% at 12% 50%, #dbe5ff 0%, transparent 70%),
    linear-gradient(120deg, #ffffff 0%, #f1f5ff 55%, #e6edff 100%);
  box-shadow: 0 8px 0 #b9c8f5, 0 26px 50px -20px rgb(20 70 230 / .55), 0 0 0 1px #d4def8 inset;
  transition: translate .2s ease-out, box-shadow .2s;
}
.t3w-ma3an::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--mn-pad) + var(--mn-art) + var(--mn-gap) / 2); width: 2px; background: rgb(227 38 47 / .4); z-index: -1; }
.t3w-ma3an:hover, .t3w-ma3an:focus-visible { color: var(--mn-ink); translate: 0 -3px; box-shadow: 0 11px 0 #b9c8f5, 0 32px 60px -20px rgb(20 70 230 / .6), 0 0 0 2px #fff inset; }
.t3w-ma3an:active { translate: 0 5px; box-shadow: 0 3px 0 #b9c8f5, 0 12px 24px -12px rgb(20 70 230 / .5); }

/* the call window */
.t3w-ma3an-art { position: relative; width: var(--mn-art); padding-top: 10px; }
.t3w-call {
  position: relative; aspect-ratio: 4 / 3.25; border-radius: 20px; overflow: hidden;
  background: radial-gradient(90% 80% at 35% 30%, #5b86ff 0%, #2a4fd6 45%, #13277a 100%);
  border: 6px solid #1c2233; box-shadow: 0 18px 34px -14px rgb(11 42 153 / .7);
  rotate: -2deg; transition: rotate .3s, scale .3s;
}
.t3w-ma3an:hover .t3w-call { rotate: 0deg; scale: 1.03; }
.t3w-call-prof { position: absolute; right: -2%; bottom: 24px; width: 60%; height: auto; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); transform-origin: 50% 100%; }
.t3w-call-board {
  position: absolute; z-index: 2; top: 36px; left: 6%; width: 44%;
  display: grid; gap: 3px; padding: .45rem .55rem; border-radius: 10px;
  background: #fff; box-shadow: 0 6px 14px -6px rgb(0 0 0 / .5);
  direction: ltr; text-align: left; font: 800 clamp(.68rem, .55rem + .35vw, .82rem)/1.25 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #1446e6;
}
.t3w-call-board i { font-style: normal; white-space: nowrap; }
.t3w-call-board i.is-ok { color: #1a8a4a; }
.t3w-call-live { position: absolute; top: 8px; left: 8px; z-index: 2; padding: .05rem .5rem; border-radius: 7px; background: var(--mn-red); color: #fff; font-weight: 900; font-size: .74rem; }
.t3w-call-name { position: absolute; z-index: 2; bottom: 30px; right: 8px; padding: .05rem .5rem; border-radius: 7px; background: rgb(0 0 0 / .45); color: #fff; font-weight: 800; font-size: .74rem; }
.t3w-call-self {
  position: absolute; z-index: 2; bottom: 32px; left: 6%; width: 26%; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 5px 7px;
  border-radius: 8px; background: #fffdf5; border: 2px solid #fff; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .5);
}
.t3w-call-self b { position: absolute; top: -9px; left: -9px; font-size: .8rem; }
.t3w-call-self i { display: block; height: 3px; border-radius: 3px; background: #c9d4f0; }
.t3w-call-self i.is-short { width: 55%; background: var(--mn-red); opacity: .6; }
.t3w-call-bar { position: absolute; bottom: 0; inset-inline: 0; height: 24px; display: flex; justify-content: center; align-items: center; gap: 8px; background: #1c2233; }
.t3w-call-bar i { width: 14px; height: 14px; border-radius: 50%; background: #3c4560; }
.t3w-call-bar i.is-end { width: 22px; border-radius: 8px; background: var(--mn-red); }
.t3w-ma3an-bubble {
  position: absolute; top: -8px; right: -14px; z-index: 3;
  padding: .3rem .7rem; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--mn-blue-ink);
  font-weight: 900; font-size: .85rem; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgb(11 42 153 / .55), 0 0 0 2px var(--mn-blue) inset;
}

/* copy + button */
.t3w-ma3an-copy { min-width: 0; }
.t3w-tag.is-ma3an { background: var(--mn-blue); border-color: var(--mn-blue); color: #fff; backdrop-filter: none; }
.t3w-ma3an h2 { margin: .7rem 0 .45rem; color: var(--mn-ink); font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2.1rem); font-weight: 900; line-height: 1.3; text-wrap: balance; }
.t3w-ma3an h2 span { color: var(--mn-blue); box-shadow: inset 0 -.32em 0 rgb(227 38 47 / .16); }
.t3w-ma3an p { margin: 0 0 .8rem; max-width: 52ch; color: #3d4a70; font-size: 1.05rem; line-height: 1.75; }
.t3w-ma3an .t3w-chips { margin-bottom: 0; }
.t3w-ma3an .t3w-chips li { background: #fff; color: var(--mn-blue-ink); box-shadow: 0 0 0 1px #d4def8 inset; }
.t3w-go.is-ma3an { position: relative; z-index: 2; --btn: var(--mn-blue); --btn-ink: #fff; --btn-edge: var(--mn-blue-ink); white-space: nowrap; box-shadow: 0 6px 0 var(--btn-edge), 0 14px 26px -8px rgb(20 70 230 / .6); }
.t3w-ma3an:hover .t3w-go.is-ma3an { translate: 0 -3px; box-shadow: 0 9px 0 var(--btn-edge), 0 18px 30px -8px rgb(20 70 230 / .6); }
.t3w-ma3an:hover .t3w-go.is-ma3an i { translate: -5px 0; }

@media (prefers-reduced-motion: no-preference) {
  .t3w-call-live { animation: t3w-blink 1.6s steps(2, jump-none) infinite; }
  .t3w-call-prof { animation: t3w-ma3an-wave 3.2s ease-in-out infinite; }
  .t3w-ma3an-bubble { animation: t3w-bob 4s ease-in-out infinite; }
  .t3w-call-board i { animation: t3w-ma3an-write 6s ease-out infinite both; }
  .t3w-call-board i:nth-child(2) { animation-delay: .5s; }
  .t3w-call-board i:nth-child(3) { animation-delay: 1s; }
}
@keyframes t3w-ma3an-wave { 0%, 100% { rotate: 0deg; } 50% { rotate: -2.5deg; } }
@keyframes t3w-ma3an-write { 0% { clip-path: inset(0 100% 0 0); } 18%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

@container t3w (max-width: 820px) {
  .t3w-ma3an { grid-template-columns: auto 1fr; --mn-art: 210px; }
  .t3w-ma3an::before { display: none; }
  .t3w-go.is-ma3an { grid-column: 1 / -1; }
  .t3w-call-self { display: none; }
}
@container t3w (max-width: 520px) {
  .t3w-ma3an { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-top: 1.8rem; --mn-art: min(280px, 82%); }
  .t3w-ma3an-art { width: var(--mn-art); }
  .t3w-call-self { display: flex; }
  .t3w-ma3an-bubble { right: -6px; }
  .t3w-ma3an .t3w-chips { justify-content: center; }
}
@media (forced-colors: active) { .t3w-ma3an { border: 2px solid ButtonText; } }