/* ============================================================
   FOREST FRIENDS · World Vision Hong Kong Public Education game
   ------------------------------------------------------------
   Palette (drawn from the character artwork itself):
     --orange  : warm WV orange (highlight / actions)
     --navy    : deep supporting blue
     --cream   : light warm background
     --green   : growth & hope
     --yellow  : highlights
     --brown   : the hand-drawn outline colour of the characters –
                 used for text and borders so the UI feels drawn
                 by the same hand as the artwork.

   Tile visibility system:
     Each picture tile has a distinct soft background colour to help
     players tell the expression illustrations apart on small screens.
============================================================ */
:root{
  --orange:       #F47920;
  --orange-deep:  #D9620A;
  --navy:         #1E3A5F;
  --cream:        #FFF6E6;
  --cream-card:   #FFFDF7;
  --green:        #8FBF6F;
  --green-soft:   #E4F0D8;
  --yellow:       #FFD45E;
  --yellow-soft:  #FFF1C9;
  --brown:        #5B4636;
  --brown-soft:   #8A7361;

  /* board size: keep in sync with SIZE in game.js */
  --cells: 7;

  --radius-lg: 26px;
  --radius-md: 16px;
  --shadow-card: 0 10px 30px rgba(91,70,54,.14);
  --font-display: "Baloo 2","Trebuchet MS","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --font-body:    "Nunito","Trebuchet MS",system-ui,sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }

body{
  font-family:var(--font-body);
  color:var(--brown);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,241,201,.82), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(228,240,216,.82), transparent 55%),
    var(--cream);
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:auto 0 0; height:30vh; z-index:0; pointer-events:none;
  background:url("assets/forest-scene.png") center bottom / cover no-repeat; opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%); mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);
}

button{ font-family:inherit; cursor:pointer; }
img{ user-select:none; -webkit-user-drag:none; }

/* ---------- floating background characters ---------- */
.bg-deco{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg-float{
  position:absolute; width:clamp(60px,9vw,120px); opacity:.13;
  animation:bob 7s ease-in-out infinite;
}
.f1{ top:6%;  left:3%;  animation-delay:0s; }
.f2{ top:62%; left:5%;  animation-delay:1.6s; }
.f3{ top:12%; right:4%; animation-delay:.8s; }
.f4{ bottom:5%; right:6%; animation-delay:2.4s; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-14px) rotate(3deg);} }

/* ============================================================
   SCREENS
============================================================ */
.screen{
  position:relative; z-index:1;
  min-height:100dvh; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:18px;
}
.screen.active{ display:flex; }

/* ---------- main menu ---------- */
.menu-card{
  background:var(--cream-card);
  border:3px solid var(--brown);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:34px 30px 28px;
  max-width:560px; width:100%;
  text-align:center;
  animation:cardIn .5s ease both;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px) scale(.97);} to{ opacity:1; transform:none;} }

.eyebrow{
  margin:0 0 6px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:.72rem; color:var(--orange-deep);
}
.game-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,7vw,3.6rem);
  line-height:1.05; margin:0 0 8px; color:var(--navy);
}
.game-title span{ color:var(--orange); }
.tagline{ margin:0 0 14px; font-size:1.02rem; color:var(--brown-soft); font-weight:700; }

.menu-cast{ display:flex; justify-content:center; align-items:flex-end; gap:6px; margin:8px 0 18px; }
.cast{ height:clamp(70px,14vw,110px); animation:bob 4.5s ease-in-out infinite; }
.cast.c1{ animation-delay:.0s; } .cast.c2{ animation-delay:.5s; }
.cast.c3{ animation-delay:1s; }  .cast.c4{ animation-delay:1.5s; }

.menu-buttons{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.mission-line{ margin:18px 0 0; font-style:italic; color:var(--brown-soft); font-weight:600; }
.best-line{
  margin:14px 0 0; font-weight:800; font-size:.9rem; color:var(--orange-deep);
}
.best-line .best-star{ color:var(--yellow); text-shadow:0 0 4px rgba(255,212,94,.8); }

/* ---------- buttons ---------- */
.btn{
  border:3px solid var(--brown);
  border-radius:999px;
  font-weight:800; font-size:1rem;
  padding:11px 28px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 4px 0 var(--brown);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--brown); }
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--brown); }
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:var(--orange-deep); }
.btn-soft{ background:var(--yellow-soft); color:var(--brown); }
.btn.big{ font-size:1.15rem; padding:14px 36px; font-family:var(--font-display); }
.btn:focus-visible,.icon-btn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }

.icon-btn{
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--brown); background:var(--cream-card);
  font-size:1.05rem; line-height:1; color:var(--brown);
  box-shadow:0 3px 0 var(--brown);
  transition:transform .12s ease, box-shadow .12s ease;
}
.icon-btn:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--brown); }
.icon-btn:active{ transform:translateY(1px); box-shadow:0 1px 0 var(--brown); }
.corner-btn{ position:absolute; top:16px; right:16px; }

/* ============================================================
   GAME SCREEN
============================================================ */
#screen-game{ justify-content:flex-start; gap:10px; padding-top:14px; }

.hud{
  width:min(96vw,640px);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.hud-left{ display:flex; gap:8px; flex-wrap:wrap; }
.hud-right{ display:flex; gap:8px; }

.hud-chip{
  background:var(--cream-card);
  border:3px solid var(--brown); border-radius:14px;
  padding:4px 14px; text-align:center; min-width:74px;
  box-shadow:0 3px 0 var(--brown);
}
.chip-label{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-soft); }
.chip-value{ display:block; font-family:var(--font-display); font-size:1.25rem; line-height:1.1; color:var(--navy); }
.level-chip .chip-value{ color:var(--orange-deep); }
.moves-chip.low .chip-value{ color:#D03A2B; animation:pulse .8s ease infinite; }
@keyframes pulse{ 50%{ transform:scale(1.12);} }

/* ---------- mission strip ---------- */
.mission-strip{
  width:min(96vw,640px);
  background:var(--cream-card);
  border:3px solid var(--brown); border-radius:var(--radius-md);
  box-shadow:0 3px 0 var(--brown);
  display:flex; gap:12px; align-items:center;
  padding:8px 14px;
}
.guide-img{ height:64px; flex:none; animation:bob 4s ease-in-out infinite; }
.mission-text{ flex:1; min-width:0; }
.mission-title{ margin:0 0 4px; font-family:var(--font-display); font-size:1.02rem; color:var(--navy); }

.objective-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.obj-chip{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--yellow-soft); border:2px solid var(--brown);
  border-radius:999px; padding:3px 11px 3px 5px;
  font-size:.84rem; font-weight:800;
}
.obj-chip img{ height:28px; }
.obj-chip.done{ background:var(--green-soft); }
.obj-chip.done::after{ content:"✓"; color:var(--green); font-weight:900; }
.obj-chip .obj-emoji{ font-size:1rem; padding-left:6px; }

/* The Hope Meter – a vine that fills as the mission grows */
.hope-meter{
  position:relative; height:14px;
  background:#EFE3CE; border:2px solid var(--brown); border-radius:999px;
  overflow:visible;
}
.hope-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--yellow),var(--green));
  border-radius:999px; transition:width .5s ease;
}
.hope-seed{
  position:absolute; top:50%; left:0%;
  width:18px; height:18px; transform:translate(-50%,-50%);
  background:var(--orange); border:2px solid var(--brown); border-radius:50% 50% 50% 0;
  rotate:-45deg; transition:left .5s ease;
}
.hope-leaf{ position:absolute; right:-6px; top:-16px; font-size:.95rem; }

/* ---------- the board (basket) ---------- */
.board-wrap{
  width:min(96vw, 66dvh, 640px);
  aspect-ratio:1/1;
  background:var(--cream-card);
  border:4px solid var(--brown);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card), inset 0 0 0 6px var(--yellow-soft);
  padding:9px;
  position:relative;
}
/* stitched “woven basket” inner edge */
.board-wrap::before{
  content:""; position:absolute; inset:5px;
  border:2px dashed var(--brown-soft);
  border-radius:calc(var(--radius-lg) - 8px);
  pointer-events:none; opacity:.5;
}
.board{
  position:relative; width:100%; height:100%;
  touch-action:none; overflow:hidden; border-radius:14px;
}

/* ---------- tiles ---------- */
.tile{
  position:absolute; top:0; left:0;
  width:calc(100% / var(--cells));
  height:calc(100% / var(--cells));
  padding:0.55%;  /* % of the BOARD width (absolute positioning) */
  transition:transform .22s cubic-bezier(.34,1.3,.64,1);
  will-change:transform;
}
.tile-inner{
  width:100%; height:100%;
  background:#fff;
  border:2.5px solid rgba(91,70,54,.28);
  border-radius:20%;
  box-shadow:0 2px 0 rgba(91,70,54,.22);
  display:flex; align-items:center; justify-content:center;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position:relative; overflow:visible;
}
.tile img{
  width:94%; height:94%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 2px 1px rgba(91,70,54,.28));
}

/* ---- per-picture tile tints ------------------------------------
   Distinct soft backgrounds keep the supplied expression art easy
   to tell apart at a glance. */
.tile.ch-corn        .tile-inner{ background:#E7F2D9; border-color:#92B778; }
.tile.ch-musicCorn   .tile-inner{ background:#FBE6D1; border-color:#D99B68; }
.tile.ch-bean        .tile-inner{ background:#FFF0C5; border-color:#D6B45C; }
.tile.ch-sweetPotato .tile-inner{ background:#F7E5E2; border-color:#D49D91; }
.tile.ch-wheat       .tile-inner{ background:#DDEEF1; border-color:#84B6C2; }
.tile.ch-seedFriends .tile-inner{ background:#E8E9F2; border-color:#A3A8C2; }
.tile.ch-wisePotato  .tile-inner{ background:#DFF0E5; border-color:#84B299; }

.tile.selected .tile-inner{
  border-color:var(--orange); border-width:3px;
  box-shadow:0 0 0 4px rgba(244,121,32,.35), 0 2px 0 rgba(91,70,54,.22);
  transform:scale(1.1);
  animation:wiggle .6s ease infinite;
  z-index:2;
}
@keyframes wiggle{ 0%,100%{ rotate:-3deg;} 50%{ rotate:3deg;} }

/* gentle hint glow when the player seems stuck */
.tile.hint .tile-inner{
  animation:hintGlow 1.1s ease-in-out infinite;
  border-color:var(--yellow);
}
@keyframes hintGlow{
  0%,100%{ box-shadow:0 2px 0 rgba(91,70,54,.22); transform:scale(1); }
  50%{ box-shadow:0 0 0 5px rgba(255,212,94,.55), 0 0 16px rgba(255,212,94,.9); transform:scale(1.08); }
}

.tile.popping .tile-inner{ animation:pop .3s ease forwards; }
@keyframes pop{
  30%{ transform:scale(1.18); }
  100%{ transform:scale(0); opacity:0; }
}
.tile.shake{ animation:shake .3s ease; }
@keyframes shake{ 0%,100%{ translate:0;} 25%{ translate:-5% 0;} 75%{ translate:5% 0;} }

/* ---------- power-up tile looks ---------- */
.tile.sp-row .tile-inner{
  background:linear-gradient(90deg,#fff 0%,var(--yellow-soft) 50%,#fff 100%);
  border-color:var(--orange);
  box-shadow:0 0 10px rgba(244,121,32,.55);
}
.tile.sp-row .tile-inner::after,
.tile.sp-col .tile-inner::after{
  content:"⟷"; position:absolute; bottom:-2%; right:2%;
  font-size:.85em; font-weight:900; color:var(--orange-deep);
  text-shadow:0 0 4px #fff;
}
.tile.sp-col .tile-inner{
  background:linear-gradient(180deg,#fff 0%,var(--yellow-soft) 50%,#fff 100%);
  border-color:var(--orange);
  box-shadow:0 0 10px rgba(244,121,32,.55);
}
.tile.sp-col .tile-inner::after{ content:"↕"; }
.tile.sp-burst .tile-inner{
  border-color:var(--yellow);
  box-shadow:0 0 14px rgba(255,212,94,.95);
  animation:burstGlow 1.2s ease-in-out infinite;
}
@keyframes burstGlow{ 50%{ box-shadow:0 0 22px rgba(255,212,94,1);} }
.tile.sp-burst .tile-inner::after{
  content:"✦"; position:absolute; bottom:-4%; right:2%;
  color:var(--orange-deep); font-size:.9em; text-shadow:0 0 4px #fff;
}
/* Faith Rainbow tile – no character image, a glowing orb */
.tile.sp-rainbow .tile-inner{
  background:conic-gradient(from 0deg,#F47920,#FFD45E,#8FBF6F,#5FA8D3,#9C7BB5,#F47920);
  animation:spinHue 3s linear infinite;
  border-color:#fff; border-width:3px;
  box-shadow:0 0 14px rgba(244,121,32,.6);
}
@keyframes spinHue{ to{ filter:hue-rotate(360deg);} }
.tile.sp-rainbow .tile-inner::after{
  content:"✚"; color:#fff; font-size:1.4em; font-weight:900;
  text-shadow:0 2px 4px rgba(91,70,54,.5);
}

/* ---------- effects ---------- */
.float-score{
  position:absolute; z-index:5; pointer-events:none;
  font-family:var(--font-display); font-weight:800;
  color:var(--orange-deep); text-shadow:0 1px 0 #fff,0 0 6px #fff;
  animation:floatUp .8s ease-out forwards;
  font-size:clamp(.9rem,2.6vmin,1.2rem);
  white-space:nowrap;
}
.float-score.chain{ color:var(--navy); font-size:clamp(1rem,3vmin,1.4rem); }
@keyframes floatUp{
  from{ opacity:1; transform:translate(-50%,-50%); }
  to  { opacity:0; transform:translate(-50%,calc(-50% - 44px)); }
}

/* big encouraging word on chain cascades */
.praise-word{
  position:absolute; left:50%; top:42%; z-index:6; pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem,6vmin,2.4rem);
  color:var(--orange); -webkit-text-stroke:1.5px #fff;
  text-shadow:0 3px 0 #fff, 0 0 18px rgba(255,212,94,.9);
  animation:praisePop 1s ease-out forwards;
  white-space:nowrap;
}
@keyframes praisePop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-6deg); }
  30%{ opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg); }
  60%{ transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-64%) scale(1); }
}

.sparkle{
  position:absolute; z-index:4; pointer-events:none;
  width:8px; height:8px; border-radius:50%;
  animation:sparkleFly .55s ease-out forwards;
}
@keyframes sparkleFly{
  from{ opacity:1; transform:translate(0,0) scale(1); }
  to  { opacity:0; transform:translate(var(--dx),var(--dy)) scale(.2); }
}

.beam{
  position:absolute; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 30%,var(--yellow) 50%,#fff 70%,transparent);
  opacity:.9; border-radius:8px;
  animation:beamFade .4s ease-out forwards;
}
@keyframes beamFade{ from{ opacity:.95;} to{ opacity:0;} }

/* ============================================================
   MODALS
============================================================ */
.modal-backdrop{
  position:fixed; inset:0; z-index:20;
  background:rgba(91,70,54,.38);
  display:none; align-items:center; justify-content:center;
  padding:16px;
  backdrop-filter:blur(2px);
}
.modal-backdrop.open{ display:flex; }
.modal{
  background:var(--cream-card);
  border:3px solid var(--brown); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  max-width:480px; width:100%;
  max-height:88dvh; overflow-y:auto;
  padding:26px 24px; text-align:center;
  animation:cardIn .35s ease both;
  position:relative;
}
.modal h2{ font-family:var(--font-display); color:var(--navy); margin:0 0 10px; font-size:1.6rem; }
.modal h3{ font-family:var(--font-display); color:var(--orange-deep); margin:18px 0 8px; font-size:1.05rem; }

.howto-list{ text-align:left; margin:0 0 6px; padding-left:20px; font-weight:600; }
.howto-list li{ margin-bottom:6px; }

.powerup-list{ display:flex; flex-direction:column; gap:8px; text-align:left; font-size:.9rem; }
.powerup-row{ display:flex; gap:10px; align-items:center; }
.pu-icon{ flex:none; width:34px; height:34px; border-radius:10px; border:2px solid var(--brown); }
.pu-row   { background:linear-gradient(90deg,#fff,var(--yellow),#fff); }
.pu-col   { background:linear-gradient(180deg,#fff,var(--yellow),#fff); }
.pu-burst { background:radial-gradient(circle,var(--yellow),#fff 75%); }
.pu-rainbow{ background:conic-gradient(#F47920,#FFD45E,#8FBF6F,#5FA8D3,#9C7BB5,#F47920); }

.cast-legend{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px; margin-bottom:16px;
}
.legend-item{
  border:2px solid var(--brown); border-radius:12px;
  padding:8px 6px; font-size:.74rem; font-weight:700;
  background:var(--yellow-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}
.legend-item:nth-child(1){ background:#EAF4DC; }
.legend-item:nth-child(2){ background:#FFE4C8; }
.legend-item:nth-child(3){ background:#FFF1C2; }
.legend-item:nth-child(4){ background:#FBE3EE; }
.legend-item img{ width:100%; height:112px; object-fit:contain; display:block; margin:0 auto 5px; }
.legend-name{ display:block; font-size:.78rem; line-height:1.2; color:var(--brown); }
.legend-item .meaning{ display:block; color:var(--brown-soft); font-weight:600; }

.modal-guide{ height:96px; margin:6px auto; display:block; animation:bob 3.6s ease-in-out infinite; }
.guide-line{ font-style:italic; color:var(--brown-soft); font-weight:700; margin:6px 0 14px; }
.verse-ref{ font-style:normal; font-size:.78rem; font-weight:800; color:var(--orange-deep); }

.level-objectives{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.lvl-obj{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--green-soft); border:2px solid var(--brown); border-radius:12px;
  padding:8px 12px; font-weight:700; font-size:.92rem;
}
.lvl-obj img{ height:40px; }
.lvl-obj .obj-emoji{ font-size:1.4rem; }

/* win modal */
.win-modal{ overflow:hidden; }
.stars{ font-size:2.4rem; color:#D8CBB8; letter-spacing:.1em; margin-bottom:4px; }
.stars .lit{ color:var(--yellow); text-shadow:0 0 10px rgba(255,212,94,.9); animation:starPop .4s ease both; }
.stars .lit:nth-child(2){ animation-delay:.18s; } .stars .lit:nth-child(3){ animation-delay:.36s; }
@keyframes starPop{ from{ transform:scale(0) rotate(-30deg);} 70%{ transform:scale(1.3);} to{ transform:scale(1);} }

.win-cast{ display:flex; justify-content:center; align-items:flex-end; gap:4px; margin:8px 0; }
.win-cast img{ height:64px; animation:cheer .7s ease infinite; }
.win-cast img:nth-child(2){ animation-delay:.12s; } .win-cast img:nth-child(3){ animation-delay:.24s; }
@keyframes cheer{ 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-12px) rotate(4deg);} }

.verse{ font-family:var(--font-display); color:var(--orange-deep); font-size:1.1rem; margin:4px 0 4px; }
.impact-line{
  margin:2px auto 8px; max-width:40ch;
  font-size:.86rem; font-weight:700; color:var(--brown-soft);
  background:var(--green-soft); border-radius:10px; padding:6px 10px;
}
.win-score{ font-weight:800; color:var(--navy); margin:0 0 14px; }

.confetti-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti{
  position:absolute; top:-12px;
  width:10px; height:10px; border-radius:3px;
  animation:confFall linear forwards;
}
@keyframes confFall{
  from{ transform:translateY(0) rotate(0); opacity:1; }
  to  { transform:translateY(110vh) rotate(720deg); opacity:.6; }
}

/* ---------- game complete screen ---------- */
.complete-card{ max-width:640px; }
.big-heading{ font-family:var(--font-display); color:var(--navy); font-size:clamp(1.8rem,5vw,2.6rem); margin:0 0 12px; }
.complete-cast{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:4px; margin-bottom:14px; }
.complete-cast img{ height:clamp(54px,9vw,84px); animation:cheer 1s ease infinite; }
.complete-cast img:nth-child(2n){ animation-delay:.2s; }
.complete-cast img:nth-child(3n){ animation-delay:.4s; }
.end-message{ font-size:1.05rem; font-weight:700; color:var(--brown); max-width:46ch; margin:0 auto 18px; }
.final-stats{ display:flex; justify-content:center; gap:14px; margin-bottom:20px; }
.stat{
  background:var(--yellow-soft); border:3px solid var(--brown); border-radius:var(--radius-md);
  padding:10px 22px; box-shadow:0 3px 0 var(--brown);
}
.stat-label{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-soft); }
.stat-value{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--orange-deep); }
.complete-card .best-line{ margin:0 0 18px; }

/* ============================================================
   RESPONSIVE / ACCESSIBILITY
============================================================ */
@media (max-width:520px){
  .cast-legend{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .legend-item img{ height:126px; }
  .hud-chip{ min-width:60px; padding:3px 9px; }
  .chip-value{ font-size:1.05rem; }
  .icon-btn{ width:40px; height:40px; }
  .guide-img{ height:52px; }
  .mission-strip{ padding:6px 10px; }
  .menu-card{ padding:26px 18px 22px; }
  .obj-chip{ font-size:.78rem; }
  .obj-chip img{ height:24px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}