:root{
  --bg:#070B18;--bg2:#131B38;
  --felt1:#2A8763;--felt2:#072C1D;
  --gold:#C9A227;--gold-lt:#F4D982;--gold-dp:#8E6E12;
  --red:#B01824;--ink:#141418;--court:#F7EFDD;
  --panel:#141B33;--panel2:#1D2649;--txt:#F2E9D6;--btn:#18203A;
  --line:rgba(201,162,39,.42);
}
body.light{--bg:#F2EDE0;--bg2:#EAE0C8;--panel:#FFFCF4;--panel2:#FFF6E4;--txt:#1A1A20;--btn:#FFF4DC;--court:#FFFDF6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;overscroll-behavior:none}
.hidden{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;background-color:var(--bg)}
#app::before{content:"";position:absolute;inset:0;pointer-events:none;background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(3px);transform:scale(1.06);
  background-image:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(201,162,39,.12),transparent 70%),radial-gradient(ellipse at 50% 50%,rgba(5,8,19,0) 28%,#050813 100%),linear-gradient(180deg,rgba(7,11,24,.62) 0%,rgba(6,10,22,.80) 52%,rgba(4,7,16,.92) 100%),url("assets/majlis.png")}
body.light #app::before{background-image:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(201,162,39,.16),transparent 70%),linear-gradient(180deg,rgba(255,252,244,.90) 0%,rgba(233,222,197,.95) 100%),url("assets/majlis.png")}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.center{align-items:center;justify-content:center;text-align:center;padding:16px}
.page{padding:16px;overflow:auto;gap:12px;max-width:560px;margin:auto;width:100%}

.title{font-family:Amiri,serif;margin:4px 0 8px;font-size:40px;line-height:1.35;color:var(--gold);
  background:linear-gradient(180deg,#F9E6A6,#C9A227 62%,#8E6E12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 14px rgba(201,162,39,.4))}
.sub{color:rgba(242,233,214,.8);margin:4px 0 12px;font-size:15px;line-height:1.6}
body.light .sub{color:#5F4E22}
.star{color:#E0B94A;font-size:38px;animation:pulse 1.8s infinite}
.star.big{font-size:54px;position:relative;animation:halo 3.4s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(201,162,39,.45))}
@keyframes halo{50%{transform:scale(1.06);filter:drop-shadow(0 0 32px rgba(201,162,39,.7))}}
@keyframes pulse{50%{opacity:.45;transform:scale(1.12)}}
.frame{width:min(92vw,420px);max-height:100%;overflow:auto;padding:22px 16px 18px;border-radius:26px;position:relative;
  background:linear-gradient(180deg,rgba(29,39,80,.96),rgba(12,18,40,.97));border:1px solid rgba(201,162,39,.55);
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(241,210,122,.35),inset 0 0 60px rgba(201,162,39,.06);
  display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.frame::-webkit-scrollbar{display:none}
body.light .frame{background:linear-gradient(180deg,#FFFDF7,#F2E8D0);box-shadow:0 24px 60px rgba(90,70,20,.22),inset 0 1px 0 #fff}

.btn{min-height:48px;border-radius:14px;border:1.5px solid rgba(201,162,39,.55);background:var(--btn);color:var(--txt);
  font:700 16px/1.25 Tajawal,system-ui,sans-serif;padding:12px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .16s,border-color .16s,transform .1s,box-shadow .16s}
.btn:active{transform:translateY(1px) scale(.985);border-color:#E0B94A}
.btn:focus-visible,.icon:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn:disabled{opacity:.45}
.btn.gold{background:linear-gradient(135deg,#F4D87A,#C9A227 55%,#A2801A);color:#1B1405;border:0;font-size:17px;font-weight:800;
  box-shadow:0 6px 18px rgba(201,162,39,.3),inset 0 1px 0 rgba(255,255,255,.5)}
@media (hover:hover){.btn:hover{border-color:#E0B94A}.btn.gold:hover{filter:brightness(1.06)}}
.ico{font-size:15px;opacity:.9}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats{font-size:13.5px;color:#D8C48A;margin:6px 0 0}
body.light .stats{color:#7A6221}
.dia{font-style:normal;color:#C9A227;font-size:7px;margin:0 7px;vertical-align:middle}

.card-box{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:16px;padding:14px;line-height:1.85;font-size:15px}
.card-box li{margin-bottom:5px}
.ok{color:#61D68F}.no{color:#F0664A}
.set{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;font-size:16px}
select,input[type=checkbox]{font:inherit;min-height:40px}
select{background:var(--bg);color:var(--txt);border:1px solid var(--gold);border-radius:10px;padding:4px 8px}
table{width:100%;border-collapse:collapse;font-size:14px}
td{padding:5px 4px;border-bottom:1px solid rgba(201,162,39,.16);text-align:center}
td:first-child{text-align:right;opacity:.85}

.hud{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 6px;border-bottom:1px solid rgba(201,162,39,.2)}
.icon{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid rgba(201,162,39,.6);background:var(--panel);color:var(--gold);
  font-size:17px;cursor:pointer;display:grid;place-items:center;transition:transform .12s}
.icon:active{transform:scale(.93)}
.score{flex:1;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px;min-width:0}
.score span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.score b{color:var(--gold-lt);font-size:19px;font-variant-numeric:tabular-nums;transition:transform .18s}
.score b.pop{transform:scale(1.3);color:#fff}
.contract{background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.55);border-radius:20px;padding:4px 10px;
  font-weight:800;font-size:12px;text-align:center;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.table{position:relative;flex:1 1 auto;min-height:0;margin:8px 10px;border-radius:24px;overflow:hidden;
  background:radial-gradient(ellipse 60% 40% at 50% 34%,rgba(255,255,255,.12),transparent 72%),radial-gradient(ellipse at 50% 42%,var(--felt1) 0%,#175840 46%,var(--felt2) 100%);
  box-shadow:0 0 0 3px #37230F,0 0 0 5px #6B4A1E,0 0 0 6.5px rgba(201,162,39,.85),0 0 0 8px rgba(0,0,0,.55),0 22px 52px rgba(0,0,0,.62),inset 0 0 80px rgba(0,0,0,.58)}
.table::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:url("assets/felt.png") center/cover no-repeat;opacity:.2;mix-blend-mode:soft-light}
.table::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 50% 46%,transparent 48%,rgba(0,0,0,.55) 100%);
  box-shadow:inset 0 0 0 1px rgba(241,210,122,.22),inset 0 0 0 12px rgba(0,0,0,.16),inset 0 0 0 13px rgba(241,210,122,.1)}

.seat{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;width:80px;text-align:center;z-index:4;color:var(--court)}
.seat.top{top:6px;left:50%;transform:translateX(-50%)}
.seat.left{left:4px;top:40%;transform:translateY(-50%)}
.seat.right{right:4px;top:40%;transform:translateY(-50%)}
.seat svg{width:44px;height:44px;border-radius:50%;background:#0C1330;box-shadow:0 0 0 2px rgba(201,162,39,.8),0 6px 14px rgba(0,0,0,.5);transition:box-shadow .2s,transform .2s}
.seat.turn svg{box-shadow:0 0 0 2px #fff,0 0 18px 4px rgba(201,162,39,.9);transform:scale(1.06)}
.seat.win svg{animation:glow .75s 2}
@keyframes glow{50%{box-shadow:0 0 26px 9px rgba(201,162,39,.95)}}
.seat .nm{color:var(--court);font-weight:700;display:flex;flex-direction:column;align-items:center;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.seat .nm small{font-size:9px;font-weight:500;opacity:.65}
.seat .ct.call{background:rgba(0,0,0,.55);border:1px solid rgba(201,162,39,.5);border-radius:10px;padding:1px 8px;font-size:10.5px;font-weight:700}
.backs{display:flex;flex-direction:row;justify-content:center;margin-top:2px;direction:ltr}
.backs i{display:block;flex:none;width:14px;height:21px;border-radius:3px;margin-left:-8px;
  background:repeating-linear-gradient(45deg,rgba(201,162,39,.3) 0 4px,transparent 4px 8px),repeating-linear-gradient(-45deg,rgba(201,162,39,.18) 0 4px,transparent 4px 8px),radial-gradient(circle,#2C3A78,#131A3E 72%);
  border:1px solid rgba(201,162,39,.8);box-shadow:0 1px 3px rgba(0,0,0,.55)}
.backs i:first-child{margin-left:0}
.dots{display:flex;gap:3px;margin-top:1px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes dot{50%{opacity:.2}}

.felt{position:absolute;inset:0;z-index:1}
.felt::before{content:"✦";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:104px;color:rgba(241,210,122,.08);pointer-events:none;line-height:1}
.felt::after{content:"";position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(48%,212px);aspect-ratio:1/1;border-radius:50%;pointer-events:none;
  border:1px solid rgba(241,210,122,.13);box-shadow:0 0 0 9px rgba(241,210,122,.045),inset 0 0 42px rgba(241,210,122,.06)}
.slot{position:absolute;display:flex;z-index:2}
.s-top{top:23%;left:50%;transform:translate(-50%,-50%)}
.s-bottom{top:74%;left:50%;transform:translate(-50%,-50%)}
.s-left{top:48%;left:27%;transform:translate(-50%,-50%)}
.s-right{top:48%;left:73%;transform:translate(-50%,-50%)}
.floor{position:absolute;bottom:5px;right:8px;font-size:10.5px;color:rgba(242,233,214,.72);pointer-events:none}
.gain{position:absolute;z-index:6;font:800 22px Tajawal,system-ui,sans-serif;color:var(--gold-lt);text-shadow:0 2px 12px rgba(0,0,0,.85);pointer-events:none;animation:gainUp 1.05s cubic-bezier(.2,.8,.3,1) forwards}
.gain.bottom{top:64%;left:50%}.gain.top{top:15%;left:50%}.gain.left{top:43%;left:21%}.gain.right{top:43%;left:79%}
@keyframes gainUp{0%{opacity:0;transform:translate(-50%,4px) scale(.7)}28%{opacity:1;transform:translate(-50%,-10px) scale(1.14)}100%{opacity:0;transform:translate(-50%,-44px) scale(1)}}
.announce{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:7;padding:10px 20px;border-radius:14px;
  background:rgba(6,10,22,.88);border:1px solid var(--gold);color:var(--gold-lt);font:800 18px/1.2 Tajawal,sans-serif;white-space:nowrap;
  box-shadow:0 14px 34px rgba(0,0,0,.6);animation:annc 1.6s ease-out forwards;pointer-events:none}
@keyframes annc{0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}16%{opacity:1;transform:translate(-50%,-50%) scale(1)}76%{opacity:1}100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}}

/* ——— الورق ——— */
.card{--cw:60px;--ch:calc(var(--cw)*1.47);position:relative;display:block;width:var(--cw);height:var(--ch);flex:none;
  border-radius:calc(var(--cw)*.115);background-color:#FFFDF8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)' opacity='.07'/%3E%3C/svg%3E"),linear-gradient(158deg,#FFFEFB 0%,#FCF6E9 48%,#EFE4CA 100%);
  background-size:120px 120px,100% 100%;color:var(--ink);direction:ltr;overflow:hidden;border:1px solid #CBBE9E;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 3px rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.32);
  transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .18s}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.42;background:linear-gradient(112deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.035) 64%,rgba(255,255,255,.5) 100%)}
.card.r{color:var(--red)}
.idx{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:.86;font-weight:800;letter-spacing:-.03em;z-index:2}
.idx b{font-size:calc(var(--cw)*.25)}
.idx i{font-style:normal;font-size:calc(var(--cw)*.215);line-height:1}
.idx.tl{left:calc(var(--cw)*.075);top:calc(var(--cw)*.05)}
.idx.br{right:calc(var(--cw)*.075);bottom:calc(var(--cw)*.05);transform:rotate(180deg)}
.pips{position:absolute;left:17%;right:17%;top:14%;bottom:14%}
.pips i{position:absolute;font-style:normal;font-size:calc(var(--cw)*.225);line-height:1}
.pip.big{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw)*.62);line-height:1}
.court{position:absolute;left:12.5%;top:5%;width:75%;height:90%}
.court .cframe{fill:rgba(201,162,39,.055);stroke:rgba(201,162,39,.62);stroke-width:1.2}
.court .crown{fill:var(--gold);stroke:#8C6E12;stroke-width:.5}
.court .jewel{fill:var(--gold);stroke:#8C6E12;stroke-width:.4}
.court .head{fill:none;stroke:currentColor;stroke-width:1.7}
.court .collar{fill:currentColor;fill-opacity:.78}
.court .robe{fill:currentColor;fill-opacity:.18;stroke:currentColor;stroke-width:1.1}
.court text{fill:currentColor;font:800 11px Tajawal,system-ui,sans-serif;text-anchor:middle}
.card.mini{--cw:46px}
.card.in{animation:slide .22s cubic-bezier(.2,.9,.3,1)}
@keyframes slide{from{transform:translateY(26px) scale(.92) rotate(-3deg);opacity:0}}
.card.deal{animation:dealIn .38s cubic-bezier(.22,.9,.3,1) both}
@keyframes dealIn{from{transform:translateY(34px) scale(.86) rotate(-5deg);opacity:0}}

/* ——— اليد: صف أفقي واحد أسفل الطاولة ——— */
.handwrap{flex:none;width:100%;direction:ltr;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 12px}
.handwrap::-webkit-scrollbar{display:none}
.hand{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-end;justify-content:center;
  width:max-content;min-width:100%;padding:14px 10px 4px;direction:ltr}
.hand .card{--cw:min(58px,calc((100vw - 28px)/5.4));margin-left:calc(var(--cw)*-.26);cursor:pointer;touch-action:manipulation;flex:none}
.hand .card:first-child{margin-left:0}
.hand .card:active{transform:translateY(-6px) scale(.99);z-index:30}
.hand .card.ok2{transform:translateY(-10px);box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(201,162,39,.5),0 10px 20px rgba(0,0,0,.45)}
.hand .card.dim{filter:brightness(.72) saturate(.7)}
.hand .card.shake{animation:sh .3s}
@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (hover:hover){
  .hand .card:hover{transform:translateY(-12px);z-index:30}
  .hand .card.dim:hover{transform:translateY(-4px)}
}

.msg{flex:none;text-align:center;min-height:20px;font-size:13px;color:var(--gold-lt);padding:0 8px}
.bid{flex:none;margin:0 10px 4px;background:rgba(20,27,51,.97);color:var(--txt);border:1px solid var(--gold);border-radius:16px;padding:9px;
  display:flex;flex-direction:column;gap:7px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
body.light .bid{background:#FFFCF4}
.bid-t{text-align:center;font-weight:800;font-size:13.5px;line-height:1.4}
.bid-r{display:flex;gap:6px;flex-wrap:wrap}
.bid-r .btn{flex:1;min-width:46px;padding:9px 4px;font-size:14.5px;min-height:44px}

.overlay{position:absolute;inset:0;background:rgba(3,6,16,.82);z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.overlay#pass{background:rgba(5,8,20,.98)}
.modal{background:var(--panel);color:var(--txt);border:1px solid var(--gold);border-radius:22px;padding:20px;width:min(94vw,420px);
  display:flex;flex-direction:column;gap:10px;text-align:center;max-height:92%;overflow:auto;box-shadow:0 30px 70px rgba(0,0,0,.65);animation:pop .26s cubic-bezier(.22,.9,.3,1)}
@keyframes pop{from{transform:scale(.93);opacity:0}}
.modal .title{font-size:32px;margin-bottom:2px}
.modal #sum-b{font-size:14px;line-height:1.8}
.toast{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);background:rgba(6,10,22,.94);color:#FFF7E4;
  border:1px solid var(--gold);padding:10px 16px;border-radius:14px;z-index:30;max-width:90vw;text-align:center;font-size:13.5px;box-shadow:0 10px 26px rgba(0,0,0,.5)}

@media (max-width:430px){
  .seat{width:72px;font-size:10.5px}
  .seat svg{width:40px;height:40px}
  .s-left{left:24%}.s-right{left:76%}
  .score{font-size:12px}.contract{font-size:11px;padding:3px 8px}
  .gain{font-size:19px}.announce{font-size:16px;padding:8px 16px}
}
@media (max-height:700px){
  .seat svg{width:34px;height:34px}.seat{font-size:10px}
  .backs i{width:11px;height:17px;margin-left:-7px}
  .hand .card{--cw:min(50px,calc((100vw - 28px)/5.4))}
  .card.mini{--cw:38px}
  .msg{min-height:16px;font-size:12px}
  .handwrap{padding:2px 0 8px}
  .hand{padding-top:10px}
  .star.big{font-size:40px}.title{font-size:32px}
  .felt::after{width:min(42%,150px)}
}
@media (max-height:470px){
  .hud{padding:4px 8px}
  .icon{width:36px;height:36px;font-size:15px}
  .hand .card{--cw:44px}
  .card.mini{--cw:32px}
  .seat svg{width:28px;height:28px}.seat{width:60px;font-size:9.5px}
  .backs,.msg,.felt::after{display:none}
  .bid{padding:6px;gap:5px}.bid-t{font-size:12px}
  .bid-r .btn{min-height:40px;font-size:13px;padding:6px 3px}
  .frame{padding:12px}
}
/* ——— ترقية الشاشة الرئيسية ——— */
.frame{background:linear-gradient(180deg,#1E2850 0%,#0E1430 100%);border-color:rgba(201,162,39,.6);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(201,162,39,.12),inset 0 1px 0 rgba(244,217,130,.5),inset 0 0 60px rgba(201,162,39,.06);
  animation:frameIn .5s cubic-bezier(.22,.9,.3,1) both}
.frame::before{content:"";position:absolute;inset:6px;border-radius:20px;border:1px solid rgba(201,162,39,.3);pointer-events:none}
@keyframes frameIn{from{opacity:0;transform:translateY(12px)}}
.frame .title{font-size:48px;background:linear-gradient(180deg,#F4D982 0%,#C9A227 55%,#8E6E12 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 16px rgba(201,162,39,.5));margin:2px 0 4px}
.frame .star.big{animation:twinkle 3.2s ease-in-out infinite;text-shadow:0 0 26px rgba(244,217,130,.55)}
.frame .star.big::before,.frame .star.big::after{content:"";position:absolute;top:50%;width:26%;height:1px;pointer-events:none}
.frame .star.big::before{left:8%;background:linear-gradient(90deg,transparent,rgba(201,162,39,.85))}
.frame .star.big::after{right:8%;background:linear-gradient(270deg,transparent,rgba(201,162,39,.85))}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}45%{opacity:.62;transform:scale(.95)}70%{opacity:1;transform:scale(1.07)}}
.frame .sub{color:rgba(247,239,221,.75);letter-spacing:.04em;font-size:15px}
body.light .frame .sub{color:#5F4E22}
.frame .btn{position:relative;overflow:hidden}
.frame .btn:not(.gold){background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--btn);border-color:rgba(201,162,39,.45)}
.frame .btn:not(.gold):active{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.1)),var(--btn);transform:translateY(1px)}
@media (hover:hover){.frame .btn:not(.gold):hover{border-color:#F4D982;transform:translateY(-1px);box-shadow:0 6px 16px rgba(201,162,39,.18)}}
.frame .btn.gold{background:linear-gradient(180deg,#F8E08E 0%,#D9B440 45%,#A2801A 100%);
  box-shadow:0 8px 22px rgba(201,162,39,.35),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.15)}
.frame .btn.gold:active{background:linear-gradient(180deg,#C9A227,#8E6E12);transform:translateY(1px);box-shadow:0 3px 10px rgba(201,162,39,.25),inset 0 1px 0 rgba(255,255,255,.3)}
.frame .btn.gold::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-160%) skewX(-18deg);animation:shim 5s ease-in-out infinite}
@keyframes shim{0%,55%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.ico{display:inline-flex;align-items:center;opacity:1}
.ico svg{width:19px;height:19px;fill:none;stroke:#E0B94A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.frame .stats{font-size:15px;margin-top:6px;padding-top:14px;color:rgba(247,239,221,.68);
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.7),transparent) top/100% 1px no-repeat}
.frame .stats b{color:var(--gold-lt);font-weight:800;margin-inline-start:3px}
.frame .dia{color:#C9A227;font-size:8px;margin:0 9px}
@media (max-height:700px){.frame .title{font-size:36px}.frame .star.big{font-size:40px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}