:root{
  --ink:#0b1026;
  --ink-2:#141a3a;
  --paper:#fff7ea;
  --hot:#ff2e7e;       /* magenta */
  --orange:#ff8a1f;
  --yellow:#ffd23f;
  --cyan:#22e5ff;
  --lime:#b7ff3a;
  --red:#ff3b30;
  --shadow: 0 8px 0 #000;
}
/* Class-based component rules only — body/html/#app resets live in the
 * standalone index.html so this stylesheet is safe to inject into a host
 * page via the <dog-food-fight> custom element without bleeding. */
*{box-sizing:border-box}

/* Game root container — set when used as a web-component too. */
.dff-root, #app, dog-food-fight {
  background:
    radial-gradient(1200px 800px at 20% 10%, #2a1860 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 90%, #571a55 0%, transparent 60%),
    linear-gradient(180deg,#0b1026 0%, #0a0820 100%);
  color: var(--paper);
  font-family: "Inter", system-ui, sans-serif;
}

.display{font-family:"Bungee",system-ui,sans-serif;letter-spacing:.01em}
.shade{font-family:"Bungee Shade",system-ui,sans-serif}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* halftone dots overlay */
.halftone{
  position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.5px);
  background-size: 14px 14px;
}

/* Comic burst lines for VS / victory */
.burst{
  position:absolute;inset:-20% -20%;pointer-events:none;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 8deg,
      rgba(255,255,255,.10) 8deg, rgba(255,255,255,.10) 12deg);
  animation: spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* big chunky button */
.btn{
  font-family:"Bungee",sans-serif;
  background:var(--yellow);color:#0b1026;border:3px solid #0b1026;
  padding:18px 28px;border-radius:14px;cursor:pointer;
  box-shadow: 0 6px 0 #0b1026;
  letter-spacing:.04em; font-size:18px; text-transform:uppercase;
  transition: transform .08s ease, box-shadow .08s ease, background .15s;
}
.btn:hover{background:var(--lime)}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #0b1026}
.btn-pink{background:var(--hot);color:#fff}
.btn-pink:hover{background:#ff5a99}
.btn.sm{padding:10px 16px;font-size:13px;box-shadow:0 4px 0 #0b1026}
.btn.sm:active{transform:translateY(2px); box-shadow:0 2px 0 #0b1026}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#0b1026;border:2px solid #0b1026;
  border-radius:999px;padding:6px 12px;font-weight:700;font-size:12px;
  box-shadow: 0 3px 0 #0b1026;
}

/* shake / bounce */
@keyframes shake{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-6px,4px) rotate(-2deg)}
  40%{transform:translate(7px,-3px) rotate(2deg)}
  60%{transform:translate(-4px,-5px) rotate(-1.5deg)}
  80%{transform:translate(5px,3px) rotate(1.5deg)}
}
.shake{animation:shake .35s ease-in-out infinite}
.shake-strong{animation:shake .18s ease-in-out infinite}

@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.bob{animation:bob 1.6s ease-in-out infinite}

@keyframes flash{
  0%,100%{filter:none}
  50%{filter:brightness(1.35) saturate(1.4)}
}

@keyframes pop-in{
  0%{transform:scale(.6) rotate(-8deg);opacity:0}
  60%{transform:scale(1.12) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.pop-in{animation:pop-in .55s cubic-bezier(.2,1.4,.4,1) backwards}

@keyframes slamL{ from{transform:translateX(-120%) rotate(-12deg)} to{transform:translateX(0) rotate(0)} }
@keyframes slamR{ from{transform:translateX(120%)  rotate(12deg)} to{transform:translateX(0) rotate(0)} }
.slamL{animation:slamL .5s cubic-bezier(.2,1.4,.4,1) backwards}
.slamR{animation:slamR .5s cubic-bezier(.2,1.4,.4,1) backwards}

@keyframes pulse{
  0%,100%{ transform: translateX(-50%) scale(1); }
  50%   { transform: translateX(-50%) scale(1.12); }
}

@keyframes oishii-bounce{
  0%{transform:scale(0) rotate(-12deg)}
  55%{transform:scale(1.25) rotate(6deg)}
  75%{transform:scale(.95) rotate(-3deg)}
  100%{transform:scale(1.1) rotate(0)}
}

/* End-of-round arena dog states. Override the live JS-driven transform via
 * !important since BattleScene stops touching transform once phase is finished. */
@keyframes winnerDance {
  0%   { transform: scale(1.05) translateY(0)    rotate(-4deg); }
  50%  { transform: scale(1.18) translateY(-22px) rotate(6deg); }
  100% { transform: scale(1.05) translateY(0)    rotate(-4deg); }
}
@keyframes loserSlump {
  0%   { transform: rotate(0)     translateY(0); opacity: 1;   }
  100% { transform: rotate(-12deg) translateY(10px); opacity: .55; }
}
.ad-winner { animation: winnerDance .65s ease-in-out infinite !important; }
.ad-loser  { animation: loserSlump .8s ease-out forwards !important;
             filter: grayscale(.3) }

/* Brow wiggle on the angry face — small jitter while barking */
@keyframes browJitter {
  0%, 100% { transform: translate(0, 0)   rotate(0); }
  25%      { transform: translate(-1px, -1px) rotate(-2deg); }
  75%      { transform: translate( 1px, -1px) rotate( 2deg); }
}
.ang-brow {
  animation: browJitter .18s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* KO finisher animations ── flash + loser tipover + zoomed K.O. */
@keyframes koFlash{
  0%{opacity:0}
  8%{opacity:.95}
  100%{opacity:0}
}
@keyframes koZoom{
  0%{transform:scale(.2) rotate(-12deg);opacity:0}
  35%{transform:scale(1.4) rotate(4deg);opacity:1}
  55%{transform:scale(1.05) rotate(-2deg)}
  100%{transform:scale(1) rotate(0)}
}
@keyframes koTip{
  0%{transform:translateY(0) rotate(0);opacity:0}
  30%{opacity:1}
  100%{transform:translateY(-40px) rotate(20deg);opacity:0}
}

/* meter glow */
.glow-cyan{ box-shadow: 0 0 0 3px #0b1026, 0 0 24px 4px rgba(34,229,255,.55) }
.glow-pink{ box-shadow: 0 0 0 3px #0b1026, 0 0 24px 4px rgba(255,46,126,.55) }

/* dog grid */
.dog-card{
  background:#fff7ea;border:3px solid #0b1026;border-radius:18px;
  padding:14px 10px 12px;cursor:pointer;
  box-shadow:0 6px 0 #0b1026; transition: transform .08s ease, box-shadow .08s ease;
  position:relative; overflow:hidden;
}
.dog-card:hover{transform:translateY(-3px); box-shadow:0 9px 0 #0b1026}
/* "selected" is just a hover-preview indicator — soft cyan outline, not a
 * "picked" treatment. Clicking commits and navigates; we never want the user
 * to think hovering picked something. */
.dog-card.selected{outline:3px dashed var(--cyan); outline-offset:-5px}
.dog-card::after{
  content:"TAP TO FIGHT →";
  position:absolute; left:0; right:0; bottom:0;
  background: var(--hot); color:#fff; font-family:"Bungee",sans-serif;
  font-size:10px; letter-spacing:.15em; padding:6px 8px; text-align:center;
  transform: translateY(100%); transition: transform .18s ease;
  pointer-events:none;
}
.dog-card:hover::after, .dog-card:focus-visible::after{ transform: translateY(0); }
.dog-card .ribbon{
  position:absolute;top:8px;right:8px; font-family:"Bungee";
  font-size:9px;background:#0b1026;color:var(--yellow);
  padding:3px 6px;border-radius:6px;letter-spacing:.05em;
}

/* stat bar */
.stat{display:flex;align-items:center;gap:6px;font-size:10px;color:#0b1026;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.stat .barT{flex:1;height:6px;background:#e7d8b8;border:1.5px solid #0b1026;border-radius:3px;overflow:hidden}
.stat .barT > i{display:block;height:100%;background:#0b1026}

/* scrollbar style for select */
.grid-scroll{ overflow:auto; scrollbar-width:thin }
.grid-scroll::-webkit-scrollbar{width:8px;height:8px}
.grid-scroll::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:4px}

/* sparks / kibble */
.kibble{position:absolute;width:14px;height:10px;background:#b96b1b;
  border-radius:50%/65%;border:2px solid #5e3008}
.speech{
  position:absolute; padding:8px 14px;
  background:#fff; color:#0b1026; border:3px solid #0b1026;
  border-radius:18px; font-family:"Bungee"; font-size:18px; letter-spacing:.04em;
  box-shadow:0 5px 0 #0b1026; white-space:nowrap;
  animation: pop-in .3s cubic-bezier(.2,1.4,.4,1) backwards;
}
.speech::after{
  content:""; position:absolute; bottom:-12px; width:18px; height:18px;
  background:#fff; border-right:3px solid #0b1026; border-bottom:3px solid #0b1026;
  transform:rotate(45deg);
}
.speech.left::after{ left:18px } .speech.right::after{ right:18px }

/* arena floor */
.arena{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 58%, #ffd23f 58%, #ffd23f 60%, #0b1026 60%, #0b1026 100%);
}
.arena::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40%;
  background:
    repeating-linear-gradient(90deg,
      #0b1026 0 32px, #1a1f44 32px 64px);
}
.floor-glow{
  position:absolute;left:50%;bottom:18%;transform:translateX(-50%);
  width:80%;height:120px;border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,210,63,.45), transparent 70%);
  filter: blur(2px);
  pointer-events:none;
}

/* little disabled state for mic prompt */
.lock{ opacity:.35; pointer-events:none; filter:grayscale(.4) }

/* Tweaks scope */
.twk-hd b::before{content:"🦴 "}

/* hide native focus ring on buttons we style */
button:focus{outline:none}
button:focus-visible{outline:3px solid var(--cyan); outline-offset:2px}

/* Signature move button — desktop default, mobile-tuned via media query. */
.sig-btn{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:8; padding:10px 18px; display:flex; align-items:center; gap:10px;
  background:#fff7eaaa; color:#0b1026; border:3px solid #0b1026;
  border-radius:14px; box-shadow: 0 4px 0 #0b1026;
  font-family:"Bungee",sans-serif; font-size:18px; letter-spacing:.05em;
  cursor:not-allowed; opacity:.85;
  transition: transform .08s, box-shadow .08s;
}
.sig-btn.ready{
  background:linear-gradient(135deg,#ffd23f,#ff8a1f);
  box-shadow: 0 6px 0 #0b1026, 0 0 24px rgba(255,210,63,.5);
  cursor:pointer; opacity:1;
}
.sig-btn.ready:active{ transform: translateX(-50%) translateY(3px);
  box-shadow: 0 2px 0 #0b1026, 0 0 16px rgba(255,210,63,.4); }
.sig-btn .sig-icon{ font-size:24px; line-height:1 }
.sig-btn .sig-text{ display:flex; flex-direction:column; align-items:flex-start }
.sig-btn .sig-name{ font-size:16px }
.sig-btn .sig-desc{ font-family:"JetBrains Mono",monospace; font-size:9px;
  opacity:.7; letter-spacing:.15em }
.sig-btn .sig-cooldown{ position:absolute; inset:0; border-radius:11px;
  overflow:hidden; pointer-events:none }
.sig-btn .sig-cooldown > div{ position:absolute; top:0; bottom:0; left:0;
  background:rgba(11,16,38,.4); transition: width .1s linear }

/* Touch: bigger button with ample tap area, hide the keyboard hint. */
@media (max-width: 760px), (pointer: coarse){
  .sig-btn{ padding: 14px 22px; font-size: 22px; }
  .sig-btn .sig-icon{ font-size: 32px }
  .sig-btn .sig-name{ font-size: 18px }
  .sig-btn .sig-desc::before{ content:"TAP"; }
  .sig-btn .sig-desc{ font-size: 10px; }
  .sig-btn .sig-desc-text{ display:none }
}
@media (hover: none){
  /* Pointer-coarse devices (touch) — hide the SPACE hint, no keyboard */
  .sig-btn .sig-desc{ display:none }
  .sig-btn .sig-name{ font-size: 20px }
}

/* Layout classes the app applies via JSX — break out to CSS so media
   queries can override them on small screens. */
.layout-select{
  position:absolute; inset:0; display:grid; gap:24px;
  grid-template-columns: 1fr minmax(360px, 38%);
  padding: 28px;
}
.layout-vs{
  position:absolute; inset:0; display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center; padding: 0 6%;
}
.layout-victory-row{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:28px; padding:0 4%;
}
.layout-hud{
  position:absolute; left:0; right:0; top:0; padding:18px 24px;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:start; gap:18px; z-index:5;
}

/* Victory screen — scrollable when content exceeds viewport height (mobile). */
.victory-scroll { scrollbar-width: thin; }
.victory-scroll::-webkit-scrollbar { width: 6px; }
.victory-scroll::-webkit-scrollbar-thumb { background: #ffffff33; border-radius: 3px; }

/* Arena dog positioning — desktop default; mobile breakpoint pushes them
 * to the edges so the smaller mobile dogs don't collide in the middle. */
.arena-dog-pos { position: absolute; bottom: 24%; }
.arena-dog-left  { left: 14%; }
.arena-dog-right { right: 14%; }

/* ── Mobile ──────────────────────────────────────────────── */
/* Hide the big preview pane and let the roster fill the screen whenever the
   viewport is narrow OR short — covers phones (portrait + landscape) and
   tablets in portrait. Otherwise the preview eats the entire screen and the
   roster sits unreachable below the fold. */
@media (max-width: 1024px), (max-height: 720px), (pointer: coarse){
  .layout-select{
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    padding: 8px !important; gap: 8px !important;
  }
  .layout-select > div:first-child {
    display: none !important;
  }
  .layout-select .grid-scroll{
    max-height: none !important;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 760px){
  .layout-vs{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    gap: 4px; padding: 16px 4%;
  }
  /* Both SVG and photo portraits constrained to a square viewport-relative
     box so neither overflows. The photo path uses <img>; previously only
     <svg> had this rule so photos at fixed 320px were chopped on phones. */
  .layout-vs svg,
  .layout-vs img{
    width: 38vw !important;
    height: 38vw !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }
  .layout-victory-row{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px; padding: 0;
  }
  .layout-victory-row svg,
  .layout-victory-row img{
    max-width: 50vw !important;
    width: 50vw !important;
    height: 50vw !important;
    max-height: 220px !important;
  }
  /* Loser portrait inside victory row — slightly smaller. */
  .layout-victory-row > div:last-child svg,
  .layout-victory-row > div:last-child img{
    max-width: 38vw !important;
    width: 38vw !important;
    height: 38vw !important;
    max-height: 170px !important;
  }
  /* HUD: stack Timer above the two FighterCards so 64px Timer numbers
     don't crash into the WIFHAT/WOOFS labels on every modern phone width
     (390-480px). Previously this only kicked in at <420px so iPhone 14/15
     Plus, Pixel, etc. fell through to the cramped 3-column desktop grid. */
  .layout-hud{
    padding: 8px 10px;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 18px !important;
  }
  .layout-hud > :nth-child(2){
    grid-column: span 2;     /* Timer spans both card columns... */
    order: -1;               /* ...and sits on top */
    text-align: center;
  }
  .layout-hud > :first-child { padding-right: 4px; min-width: 0; }
  .layout-hud > :last-child  { padding-left:  4px; min-width: 0; }
  .layout-hud svg,
  .layout-hud img{ width: 44px !important; height: 44px !important; }
  /* Tame the Timer's 64px number — still readable, leaves more vertical
     room for the cards below. */
  .layout-hud > :nth-child(2) > div:nth-child(2) {
    font-size: 44px !important;
  }
  /* Floating shout bubbles ("WOOF!", "BARK!") — cap font + allow wrap so a
     loud-bark sticker can't push off the right edge on a 360px screen. */
  .speech{
    font-size: 14px !important;
    padding: 5px 10px !important;
    max-width: 40vw;
    word-break: break-word;
    white-space: normal;
  }
  /* Push arena dogs closer to edges on mobile so the smaller portraits
     don't pile up in the middle. */
  .arena-dog-left  { left: 4%;  bottom: 28%; }
  .arena-dog-right { right: 4%; bottom: 28%; }

  .btn{ padding: 14px 18px; font-size: 15px; }
  .btn.sm{ padding: 8px 12px; font-size: 12px; }

  /* Title screen tightening */
  .logo-row1, .logo-row2 { font-size: clamp(56px, 18vw, 110px) !important; }
  .title-oishii{ gap: 10px; flex-wrap: wrap; justify-content: center; }
  .title-oishii .dash{ width: 36px; }

  /* Roster grid: 2 cols of bigger cards so thumbs actually hit them. */
  .layout-select .grid-scroll > div:nth-child(2){
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding-bottom: 60px;   /* breathing room below last row */
  }
  .dog-card{
    padding: 14px 10px 12px;
    min-height: 150px;
    touch-action: manipulation;   /* kill 300ms tap delay */
  }
  .dog-card .dog-portrait{ width: 88px; height: 88px; }
  .dog-card:active{
    transform: translateY(2px) scale(.98);
    box-shadow: 0 2px 0 #0b1026;
  }
  /* Pointer-coarse devices — always show the "TAP TO FIGHT" hint since
     there's no hover on touch. */
  @media (pointer: coarse){
    .dog-card::after { transform: translateY(0) !important; }
  }

  /* Tweaks panel — keep on-screen with safe-area padding */
  .twk-panel{
    width: min(280px, calc(100vw - 24px)) !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Modal sizing for HowToPlay / MicTest overlays */
  .pop-in[style*="border-radius: 24"]{ padding: 18px !important; }
}
@media (max-width: 420px){
  /* Tighten card text/bars further on very narrow screens (small phones,
     iPhone SE). Names + bars need every horizontal pixel they can get. */
  .layout-hud > :first-child  > div:last-child > div:first-child,
  .layout-hud > :last-child   > div:last-child > div:first-child {
    font-size: 16px !important;
  }
}

/* Crowd reactions — half of the row hops/cheers when their side is barking */
@keyframes crowdCheer {
  0%   { transform: translateX(-50%) translateY(0)    scale(.6); }
  50%  { transform: translateX(-50%) translateY(-14px) scale(.7); }
  100% { transform: translateX(-50%) translateY(0)    scale(.6); }
}
.crowd-row.cheering-left  .crowd-fan[data-side="left"],
.crowd-row.cheering-right .crowd-fan[data-side="right"] {
  animation: crowdCheer .35s ease-in-out infinite !important;
  opacity: .9 !important;
}

/* Signature-move particle burst — kibble + ring shock from the dog's spot */
.sig-burst { position: absolute; bottom: 0; pointer-events: none; }
.sig-particle {
  position: absolute; left: 0; bottom: 0; width: 12px; height: 8px;
  border-radius: 50% / 65%; border: 2px solid #5e3008;
  animation: sigFly .9s cubic-bezier(.2,.7,.4,1) forwards;
  --dx: 0px; --dy: -100px;
}
@keyframes sigFly {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(540deg); opacity: 0; }
}
.sig-ring {
  position: absolute; left: -90px; bottom: -90px; width: 180px; height: 180px;
  border: 4px solid #ffd23f;
  border-radius: 50%;
  animation: sigRing .65s ease-out forwards;
}
@keyframes sigRing {
  0%   { transform: scale(0.2); opacity: .9; border-width: 6px; }
  100% { transform: scale(1.8); opacity: 0;  border-width: 1px; }
}

/* Mid-match commentary banner — slams in, hangs, fades out */
@keyframes commentSlam {
  0%   { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  20%  { transform: scale(1.2) rotate(3deg);  opacity: 1; }
  35%  { transform: scale(1) rotate(0); }
  80%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.1) rotate(0); opacity: 0; }
}
.commentary {
  font-family: "Bungee", system-ui, sans-serif;
  /* On phones the old 28px floor was wider than the viewport for phrases
     like "DOGE TAKES OVER!" — it wrapped to two left-aligned lines that
     looked offset because the surrounding flex centred the bounding box
     (which sized to the longest line). Drop the floor to 18px so the
     phrase fits on one line on a 360-430px screen, centre-align the text
     so any rare wrap still reads, and cap the box to 92vw so the
     scale(1.2) keyframe can't push it past the viewport edge. */
  font-size: clamp(18px, 4.5vw, 48px);
  text-align: center;
  max-width: min(92vw, 760px);
  letter-spacing: .08em;
  text-shadow: 0 4px 0 #0b1026, 0 0 24px rgba(255,255,255,.3);
  background: rgba(11,16,38,.7);
  border: 3px solid #0b1026;
  border-radius: 12px;
  padding: 6px 18px;
  animation: commentSlam 1.4s cubic-bezier(.2,1.4,.4,1) forwards;
}

/* Low-FX mode (manual battery saver). Kills the heaviest decorative effects. */
.dff-low-fx .burst,
.dff-low-fx .halftone { display: none !important; }
.dff-low-fx .bob,
.dff-low-fx .shake,
.dff-low-fx .shake-strong { animation: none !important; }
.dff-low-fx .pop-in,
.dff-low-fx .slamL,
.dff-low-fx .slamR { animation-duration: .2s !important; }

/* Reduced motion: respect OS preference (disables shake/burst/bob/pop-in). */
@media (prefers-reduced-motion: reduce){
  .shake, .shake-strong, .bob, .burst,
  .pop-in, .slamL, .slamR { animation: none !important; }
  *{ animation-duration: .01ms !important;
     animation-iteration-count: 1 !important;
     scroll-behavior: auto !important; }
}

/* Bilingual OISHII stack (kana under the latin) — used on the victory screen. */
.oishii-kana{
  font-family: "Bungee", system-ui, sans-serif;
  font-size: .35em;
  letter-spacing: .25em;
  color: #fff;
  opacity: .9;
  text-shadow: 0 3px 0 #0b1026;
  margin-top: -.1em;
}

/* Title-screen OISHII line — yellow dashes flanking pink kana + latin. */
.title-oishii{
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 14px;
  font-family: "Bungee", system-ui, sans-serif;
  letter-spacing: .12em;
}
.title-oishii .dash{
  flex: 0 0 auto; width: 56px; height: 4px; background: var(--yellow);
  border-radius: 2px; box-shadow: 0 2px 0 #0b1026;
}
.title-oishii .kana{
  font-size: clamp(20px, 2.6vw, 32px);
  color: var(--hot);
  text-shadow: 0 3px 0 #0b1026;
}
.title-oishii .dot{
  color: #fff; opacity: .7; font-size: .8em;
}
.title-oishii .latin{
  font-size: clamp(22px, 2.8vw, 36px);
  color: var(--hot);
  text-shadow: 0 3px 0 #0b1026;
}