.tt-wrap {
  --tt-ink:#06111f;
  --tt-sea:#075b78;
  --tt-foam:#c8fbff;
  --tt-gold:#ffe15a;
  --tt-pink:#ff3f9b;
  --tt-red:#ff4d5e;
  --tt-green:#62ff98;
  --tt-cyan:#49d9ff;
  position:relative;
  overflow:hidden;
  min-height:720px;
  border:2px solid rgba(200,251,255,.7);
  border-radius:8px;
  color:#f5fbff;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,63,155,.24), transparent 26%),
    radial-gradient(circle at 82% 8%, rgba(255,225,90,.18), transparent 24%),
    linear-gradient(180deg,#08213f 0%,#0b5b77 48%,#06213a 100%);
  box-shadow:0 0 34px rgba(73,217,255,.2), inset 0 0 64px rgba(200,251,255,.08);
  touch-action:manipulation;
}
.tt-wrap::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode:screen;
  background:
    linear-gradient(105deg, transparent 0 32%, rgba(255,255,255,.16) 44%, transparent 56%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 70px);
  animation:ttGlass 6.8s ease-in-out infinite;
}
.tt-topper {
  position:relative;
  z-index:4;
  padding:12px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(3,9,20,.96),rgba(5,26,44,.64));
}
.tt-bulbs { display:grid; grid-template-columns:repeat(24,1fr); gap:5px; margin-bottom:10px; }
.tt-bulbs span {
  aspect-ratio:1;
  border-radius:50%;
  background:var(--tt-bulb,var(--tt-gold));
  box-shadow:0 0 10px var(--tt-bulb,var(--tt-gold)),0 0 22px rgba(255,255,255,.12);
  animation:ttBulb 1.2s ease-in-out infinite;
}
.tt-bulbs span:nth-child(3n){ --tt-bulb:var(--tt-cyan); animation-delay:.12s; }
.tt-bulbs span:nth-child(3n+1){ --tt-bulb:var(--tt-pink); animation-delay:.24s; }
.tt-marquee { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.tt-title {
  font-family:'Bangers',cursive;
  font-size:clamp(2.35rem,8vw,5rem);
  line-height:.86;
  letter-spacing:.07em;
  color:#fff7ad;
  text-shadow:0 0 22px rgba(255,225,90,.78),4px 4px 0 rgba(255,63,155,.55),8px 8px 0 rgba(0,0,0,.42);
}
.tt-tag { max-width:365px; color:rgba(225,248,255,.8); font-size:.84rem; line-height:1.45; text-align:right; font-style:italic; }
.tt-layout { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:12px; padding:12px; }
.tt-cabinet {
  position:relative;
  min-width:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(4,16,30,.72),rgba(4,10,18,.5));
  box-shadow:inset 0 0 24px rgba(73,217,255,.08);
}
.tt-hud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:10px; }
.tt-meter { min-width:0; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(2,9,20,.62); padding:8px; }
.tt-label { display:block; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,251,255,.58); font-weight:900; }
.tt-value { display:block; margin-top:3px; font-family:'DM Mono',monospace; color:#fff; font-size:clamp(.82rem,2vw,1.06rem); font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tt-bar { height:9px; margin-top:6px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.12); }
.tt-fill { height:100%; width:var(--tt-fill,0%); background:linear-gradient(90deg,var(--tt-green),var(--tt-gold),var(--tt-red)); transition:width .15s linear; }
.tt-stage {
  position:relative;
  height:min(70vh,620px);
  min-height:500px;
  margin:0 10px 10px;
  overflow:hidden;
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(194,244,255,.1),transparent 38%),
    linear-gradient(180deg,#102c4c 0%,#0d4560 58%,#07304f 100%);
}
.tt-harbor { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.tt-skyline { position:absolute; left:0; right:0; top:11%; height:23%; opacity:.72; background:linear-gradient(180deg,transparent 0 40%,rgba(4,12,25,.54) 41% 100%); clip-path:polygon(0 100%,0 60%,7% 60%,7% 43%,13% 43%,13% 70%,19% 70%,19% 32%,25% 32%,25% 64%,32% 64%,32% 45%,39% 45%,39% 100%,45% 100%,45% 26%,49% 26%,49% 100%,55% 100%,55% 54%,63% 54%,63% 33%,68% 33%,68% 100%,75% 100%,75% 45%,83% 45%,83% 72%,90% 72%,90% 56%,100% 56%,100% 100%); }
.tt-light { position:absolute; top:14%; width:8px; height:8px; border-radius:50%; background:#ffe15a; box-shadow:0 0 12px #ffe15a; animation:ttPulse 1.8s ease-in-out infinite; }
.tt-light.l1{ left:14%; } .tt-light.l2{ left:48%; animation-delay:.5s; } .tt-light.l3{ left:82%; animation-delay:.9s; }
.tt-water {
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-20px;
  height:32%;
  opacity:.9;
  background:
    radial-gradient(ellipse at 16% 18%, rgba(200,251,255,.28), transparent 18%),
    radial-gradient(ellipse at 78% 30%, rgba(200,251,255,.2), transparent 18%),
    repeating-linear-gradient(170deg, rgba(200,251,255,.16) 0 2px, transparent 2px 22px),
    linear-gradient(180deg,rgba(7,95,125,.82),#05243d);
  animation:ttWater 5s ease-in-out infinite;
}
.tt-grid {
  position:absolute;
  z-index:6;
  left:50%;
  bottom:76px;
  width:min(80%,360px);
  aspect-ratio:10/18;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(18,1fr);
  gap:2px;
  padding:5px;
  border:2px solid rgba(200,251,255,.34);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(3,12,24,.18),rgba(3,12,24,.42)),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5.55%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 10%);
  box-shadow:inset 0 0 28px rgba(73,217,255,.09),0 20px 70px rgba(0,0,0,.22);
}
.tt-cell { position:relative; min-width:0; min-height:0; border-radius:5px; }
.tt-cell.filled { box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 5px 10px rgba(0,0,0,.22); }
.tt-cell.ghost { opacity:.28; filter:saturate(.7); }
.tt-cell.clearing { animation:ttClear .48s ease-out forwards; }
.tt-cargo {
  position:absolute;
  inset:1px;
  border-radius:5px;
  overflow:hidden;
  background:var(--tt-bg,#b97935);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.24),inset 0 -5px 10px rgba(0,0,0,.24);
}
.tt-cargo::before,.tt-cargo::after{ content:""; position:absolute; pointer-events:none; }
.tt-cargo.snack { --tt-bg:linear-gradient(135deg,#d99644,#8d4b21); }
.tt-cargo.snack::before{ inset:18% 10%; border:2px solid rgba(72,36,14,.55); border-left:0; border-right:0; }
.tt-cargo.snack::after{ left:17%; right:17%; top:42%; height:12%; border-radius:999px; background:rgba(255,230,130,.65); box-shadow:0 0 9px rgba(255,230,130,.45); }
.tt-cargo.toolbox { --tt-bg:linear-gradient(135deg,#e5384b,#8b1024); }
.tt-cargo.toolbox::before{ left:26%; right:26%; top:8%; height:18%; border:2px solid rgba(255,255,255,.45); border-bottom:0; border-radius:8px 8px 0 0; }
.tt-cargo.toolbox::after{ left:10%; right:10%; top:44%; height:3px; background:rgba(255,255,255,.54); box-shadow:0 8px 0 rgba(0,0,0,.18); }
.tt-cargo.rope { --tt-bg:linear-gradient(135deg,#e4c277,#93632d); }
.tt-cargo.rope::before{ inset:16%; border-radius:50%; border:4px solid rgba(90,55,22,.6); box-shadow:inset 0 0 0 5px rgba(255,240,180,.2); }
.tt-cargo.rope::after{ inset:6px; border-radius:50%; border:2px dashed rgba(255,252,210,.72); }
.tt-cargo.bubblejug { --tt-bg:linear-gradient(135deg,#9ff7ff,#1aa6cf); }
.tt-cargo.bubblejug::before{ left:30%; right:30%; top:4%; height:18%; border-radius:3px 3px 0 0; background:#eaffff; }
.tt-cargo.bubblejug::after{ left:18%; right:18%; bottom:14%; height:28%; border-radius:50%; background:radial-gradient(circle at 32% 28%,#fff,#bff7ff 35%,transparent 38%); opacity:.75; }
.tt-cargo.cooler { --tt-bg:linear-gradient(135deg,#f6fbff,#61c8f5 48%,#167bb2); }
.tt-cargo.cooler::before{ left:10%; right:10%; top:22%; height:4px; background:rgba(4,24,50,.35); }
.tt-cargo.cooler::after{ right:12%; bottom:14%; width:18%; height:18%; border-radius:3px; background:#fff; opacity:.8; }
.tt-cargo.lifering { --tt-bg:linear-gradient(135deg,#fff,#e8f7ff); }
.tt-cargo.lifering::before{ inset:14%; border-radius:50%; border:6px solid #f04e3e; background:radial-gradient(circle,transparent 0 36%,rgba(255,255,255,.8) 38%); }
.tt-cargo.lifering::after{ left:8%; right:8%; top:45%; height:10%; background:#fff; transform:rotate(45deg); }
.tt-cargo.fender { --tt-bg:linear-gradient(135deg,#536276,#1b2434); }
.tt-cargo.fender::before{ left:20%; width:18%; top:8%; bottom:8%; border-radius:999px; background:linear-gradient(#e9fbff,#6f879b); box-shadow:18px 0 0 #34475c,36px 0 0 #c5e3ef; }
.tt-cargo.fender::after{ left:8%; right:8%; top:44%; height:4px; background:rgba(255,255,255,.3); }
.tt-cargo.paperwork { --tt-bg:linear-gradient(135deg,#f8ecd0,#d6b56d); }
.tt-cargo.paperwork::before{ left:12%; right:18%; top:16%; bottom:14%; border-radius:2px; background:#fff7d6; box-shadow:6px 5px 0 rgba(255,255,255,.45); }
.tt-cargo.paperwork::after{ left:20%; right:24%; top:36%; height:2px; background:#7b6c52; box-shadow:0 7px 0 #7b6c52,0 14px 0 #7b6c52; opacity:.55; }
.tt-cargo.ticket { --tt-bg:linear-gradient(135deg,#fff8a6,#ffe15a 52%,#ff9d2e); }
.tt-cargo.ticket::before{ inset:16%; border:2px dashed rgba(111,64,0,.55); border-radius:4px; }
.tt-cargo.ticket::after{ content:"AWOO"; left:14%; right:14%; top:40%; font:900 9px 'DM Mono',monospace; color:#7a4300; text-align:center; }
.tt-cargo.anchor { --tt-bg:linear-gradient(135deg,#7e8da0,#202838); }
.tt-cargo.anchor::before{ left:45%; top:12%; width:10%; bottom:18%; border-radius:999px; background:#ecf7ff; box-shadow:0 -5px 0 2px #ecf7ff; }
.tt-cargo.anchor::after{ left:20%; right:20%; bottom:15%; height:28%; border:5px solid #ecf7ff; border-top:0; border-radius:0 0 50% 50%; }
.tt-cargo.mystery { --tt-bg:linear-gradient(135deg,#b36bff,#362052); }
.tt-cargo.mystery::before{ content:"?"; inset:0; display:grid; place-items:center; font:900 22px 'Bangers',cursive; color:#fff7ad; text-shadow:0 0 12px rgba(255,225,90,.8); }
.tt-cargo.clipboard { --tt-bg:linear-gradient(135deg,#f4f0dc,#a88346); }
.tt-cargo.clipboard::before{ left:24%; right:24%; top:6%; height:16%; border-radius:4px; background:#5d6470; }
.tt-cargo.clipboard::after{ left:18%; right:18%; top:34%; height:2px; background:#5f563d; box-shadow:0 7px 0 #5f563d,0 14px 0 #5f563d; opacity:.7; }
.tt-awooga {
  position:absolute;
  left:18px;
  bottom:14px;
  width:clamp(112px,24%,170px);
  transform:none;
  opacity:.82;
  pointer-events:none;
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.36)) drop-shadow(0 0 20px rgba(255,225,90,.18));
  animation:ttBob 3.2s ease-in-out infinite;
  z-index:3;
}
.tt-awooga.danger { animation:ttBob 1.2s ease-in-out infinite, ttDanger 1s ease-in-out infinite; }
.tt-awooga img { display:block; width:100%; height:auto; }
.tt-wake { position:absolute; left:22px; bottom:8px; width:160px; height:28px; transform:none; border-radius:50%; background:radial-gradient(ellipse,rgba(200,251,255,.34),transparent 68%); filter:blur(3px); animation:ttWake 2.4s ease-in-out infinite; z-index:2; }
.tt-bubble { position:absolute; bottom:62px; border-radius:50%; border:1px solid rgba(220,252,255,.8); background:radial-gradient(circle at 30% 25%,#fff,rgba(126,230,255,.38) 35%,transparent 66%); animation:ttBubble 4.8s linear forwards; z-index:5; }
.tt-side { display:grid; gap:10px; align-content:start; }
.tt-panel { border:1px solid rgba(255,255,255,.14); border-radius:8px; padding:10px; background:rgba(2,9,20,.62); box-shadow:inset 0 0 20px rgba(73,217,255,.06); }
.tt-panel-title { font-family:'Bangers',cursive; letter-spacing:.06em; font-size:1.25rem; color:#fff7ad; text-shadow:0 0 12px rgba(255,225,90,.4); margin-bottom:8px; }
.tt-next { display:grid; grid-template-columns:repeat(4,28px); grid-template-rows:repeat(4,28px); gap:2px; justify-content:center; min-height:120px; align-content:center; }
.tt-controls { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.tt-btn {
  min-height:42px;
  border:1px solid rgba(200,251,255,.36);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(73,217,255,.22),rgba(10,32,58,.92));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 14px rgba(73,217,255,.12);
}
.tt-btn:active { transform:translateY(1px); filter:brightness(1.18); }
.tt-status { position:relative; z-index:3; padding:0 12px 12px; color:rgba(225,248,255,.78); font-size:.84rem; font-style:italic; min-height:30px; }
.tt-overlay {
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(2,9,20,.66);
  backdrop-filter:blur(3px);
}
.tt-overlay[hidden] { display:none; }
.tt-card {
  max-width:560px;
  width:min(100%,560px);
  border:2px solid rgba(255,225,90,.58);
  border-radius:8px;
  padding:20px;
  background:linear-gradient(180deg,rgba(8,23,42,.96),rgba(13,48,68,.92));
  box-shadow:0 0 36px rgba(255,225,90,.18), inset 0 0 34px rgba(73,217,255,.08);
  text-align:center;
}
.tt-card-title { font-family:'Bangers',cursive; font-size:clamp(2.1rem,8vw,4rem); letter-spacing:.08em; color:#fff7ad; line-height:.92; text-shadow:0 0 20px rgba(255,225,90,.62),3px 3px 0 rgba(255,63,155,.48); }
.tt-card-copy { margin:10px auto 16px; max-width:440px; color:rgba(225,248,255,.82); line-height:1.55; font-size:.9rem; }
.tt-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.tt-big-ticket { display:flex; align-items:center; justify-content:center; gap:9px; margin:12px 0; font-size:1.05rem; font-weight:900; color:#fff7ad; }
.tt-big-ticket .ac-ticket-img { width:34px; height:auto; }
.tt-reward-line { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; font-size:.86rem; }
.tt-reward-line strong { color:#fff; text-align:right; }
.tt-warning { animation:ttWarn .52s ease-in-out infinite; color:#ffd0d6; }
.ac-cab-title-art.tetris-card-art { width:72px; height:58px; }
.ac-cab-title-art.tetris-card-art .boat { position:absolute; left:7px; right:7px; bottom:3px; height:18px; border-radius:5px 5px 13px 13px; background:linear-gradient(90deg,#ff3f9b,#ffe15a); border:2px solid rgba(255,255,255,.55); box-shadow:0 0 12px rgba(255,225,90,.45); }
.ac-cab-title-art.tetris-card-art .crate { position:absolute; width:17px; height:17px; border-radius:3px; background:linear-gradient(135deg,#d99644,#8d4b21); border:1px solid rgba(255,255,255,.45); box-shadow:0 0 9px rgba(0,0,0,.25); }
.ac-cab-title-art.tetris-card-art .c1 { left:18px; top:7px; }
.ac-cab-title-art.tetris-card-art .c2 { left:35px; top:7px; background:linear-gradient(135deg,#9ff7ff,#1aa6cf); }
.ac-cab-title-art.tetris-card-art .c3 { left:26px; top:24px; background:linear-gradient(135deg,#fff8a6,#ff9d2e); }
@media (max-width:820px) {
  .tt-layout { grid-template-columns:1fr; }
  .tt-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tt-hud { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tt-stage { height:620px; min-height:560px; }
  .tt-grid { width:min(92%,340px); bottom:78px; }
  .tt-awooga { width:118px; left:10px; bottom:12px; }
  .tt-wake { left:10px; width:126px; }
}
@media (max-width:540px) {
  .tt-wrap { min-height:760px; }
  .tt-marquee { display:block; }
  .tt-tag { text-align:left; margin-top:8px; }
  .tt-side { grid-template-columns:1fr; }
  .tt-panel.optional { display:none; }
  .tt-controls { position:sticky; bottom:8px; z-index:9; }
  .tt-stage { min-height:535px; }
}
@media (prefers-reduced-motion:reduce) {
  .tt-wrap::before,.tt-bulbs span,.tt-water,.tt-awooga,.tt-wake,.tt-light { animation:none; }
}
@keyframes ttGlass { 0%,100%{ transform:translateX(-12%); } 50%{ transform:translateX(12%); } }
@keyframes ttBulb { 0%,100%{ opacity:1; } 50%{ opacity:.16; } }
@keyframes ttWater { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5%); } }
@keyframes ttDanger { 0%,100%{ filter:drop-shadow(0 18px 20px rgba(0,0,0,.36)) drop-shadow(0 0 16px rgba(255,77,94,.4)); } 50%{ filter:drop-shadow(0 18px 20px rgba(0,0,0,.36)) drop-shadow(0 0 34px rgba(255,77,94,.95)); } }
@keyframes ttBob { 0%,100%{ transform:translateY(0) rotate(-.8deg); } 50%{ transform:translateY(-5px) rotate(.8deg); } }
@keyframes ttWake { 0%,100%{ transform:scaleX(.9); opacity:.4; } 50%{ transform:scaleX(1.12); opacity:.78; } }
@keyframes ttBubble { from{ transform:translateY(0) scale(.7); opacity:.9; } to{ transform:translateY(-260px) scale(1.15); opacity:0; } }
@keyframes ttPulse { 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes ttClear { to{ transform:scale(1.65) rotate(16deg); opacity:0; filter:brightness(2); } }
@keyframes ttWarn { 0%,100%{ opacity:1; } 50%{ opacity:.45; } }