/* ===== 3D token / coin / flag icons ===== */
.tok{position:relative;border-radius:50%;flex:0 0 auto;
  filter:drop-shadow(0 9px 11px rgba(0,0,0,.6)) drop-shadow(0 2px 3px rgba(0,0,0,.5));}
.tok .rim{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 218deg,#7e5a1c,#fdf2cc 11%,#e3b94f 27%,#9a7325 46%,#fff6da 63%,#cf9c38 82%,#7e5a1c);
  box-shadow:0 14px 22px -10px rgba(0,0,0,.9), inset 0 3px 4px rgba(255,255,255,.65),
             inset 0 -5px 9px rgba(72,48,10,.85), inset 0 0 0 1px rgba(120,84,20,.4);}
.tok .face{position:absolute;inset:9%;border-radius:50%;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  box-shadow:inset 0 3px 9px rgba(0,0,0,.55), inset 0 -2px 5px rgba(255,255,255,.14),
             0 0 0 1px rgba(0,0,0,.25);}
.tok .gloss{position:absolute;top:4%;left:11%;width:52%;height:40%;border-radius:50%;
  background:radial-gradient(ellipse at 32% 28%, rgba(255,255,255,.92), rgba(255,255,255,0) 68%);
  filter:blur(.4px);pointer-events:none;}
.tok .emblem{font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
  text-align:center;}

/* 3D idle float + press */
@keyframes float3d{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-5px) rotate(-1.2deg);}}
.tok-float{animation:float3d 4.2s ease-in-out infinite;will-change:transform;}

/* faces */
.face-gold{background:radial-gradient(circle at 38% 30%, #fbe9b0, #e0b552 42%, #b5882c 78%, #8a6420);}
.face-red{background:radial-gradient(circle at 38% 30%, #ff6a7a, #d8202f 50%, #8e0f1c 90%);}
.face-dark{background:radial-gradient(circle at 38% 30%, #2f2415, #1a1009 80%);}
.face-jade{background:radial-gradient(circle at 38% 30%, #4fe6a0, #1f9c5a 55%, #0d5e35 92%);}
.face-blue{background:radial-gradient(circle at 38% 30%, #6db6ff, #1f6fd6 55%, #103f86 92%);}

.emb-gold{color:#5a3d0c;text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 1px rgba(90,60,12,.6);}
.emb-white{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);}

/* chinese coin square hole */
.coin-hole{position:absolute;width:30%;height:30%;background:linear-gradient(180deg,#15100a,#241a0e);
  border-radius:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 1px rgba(90,60,12,.6);
  top:35%;left:35%;}

/* ===== CSS flag discs (drawn, not emoji) ===== */
.flag{position:absolute;inset:9%;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 3px 9px rgba(0,0,0,.5), inset 0 -2px 5px rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.3);}
.flag .ov{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 32% 26%, rgba(255,255,255,.45), rgba(255,255,255,0) 55%),
             linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28));}
/* Thailand: 5 stripes r/w/b/w/r (2:1:4:1:2 of 10) */
.fl-th{background:linear-gradient(180deg,
  #a51931 0 20%, #f4f5f8 20% 30%, #2d2a4a 30% 70%, #f4f5f8 70% 80%, #a51931 80% 100%);}
/* Laos: blue field, red top/bottom bands, white disc */
.fl-la{background:linear-gradient(180deg,#ce1126 0 28%, #002868 28% 72%, #ce1126 72% 100%);}
.fl-la::after{content:"";position:absolute;width:34%;height:34%;left:33%;top:33%;
  background:#fff;border-radius:50%;}
/* Vietnam: red + yellow star */
.fl-vn{background:#da251d;}
/* Malaysia: simplified — stripes + blue canton w/ crescent */
.fl-my{background:repeating-linear-gradient(180deg,#cc0001 0 7.14%, #fff 7.14% 14.28%);}
.fl-my .canton{position:absolute;left:0;top:0;width:50%;height:50%;background:#000066;}
.fl-my .moon{position:absolute;left:13%;top:14%;width:20%;height:20%;border-radius:50%;
  background:#ffcc00;box-shadow:6px 1px 0 -1px #000066;}
/* China: red + big yellow star */
.fl-cn{background:#de2910;}
.star{position:absolute;color:#ffde00;line-height:1;}