/* v1.10.0 — Art Direction Pass
   Visual-only refinement: original Silk Road scenes, tactile materials, restrained ornament,
   stronger card identity and richer motion without changing the table structure or rules. */
:root{
  --art-gold:#d9a851;
  --art-gold-hi:#f4d48a;
  --art-bronze:#7b4a25;
  --art-ink:#120d0b;
  --art-wine:#2a1117;
  --art-indigo:#17121f;
  --art-parchment:#d4c09a;
}

/* Global atmosphere */
body{
  background:
    radial-gradient(circle at 50% -20%,rgba(151,92,35,.18),transparent 44%),
    linear-gradient(180deg,#100b09,#080706 62%,#050505);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:url('art/table-texture.webp');
  background-size:620px 620px;
  opacity:.38;
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  background:radial-gradient(ellipse at 50% 38%,transparent 20%,rgba(0,0,0,.38) 82%);
  pointer-events:none;
}
.grain{opacity:.16!important;mix-blend-mode:soft-light}

.topbar{
  border-bottom:1px solid rgba(224,174,84,.48)!important;
  background:linear-gradient(180deg,rgba(20,15,12,.97),rgba(7,7,7,.98))!important;
  box-shadow:0 8px 30px rgba(0,0,0,.54),inset 0 -1px rgba(255,211,125,.07)!important;
}
.brand{font-family:Georgia,"Noto Serif SC",serif!important;letter-spacing:.035em;text-shadow:0 1px #000,0 0 18px rgba(220,166,78,.18)}
.brand-emblem{filter:drop-shadow(0 0 12px rgba(226,173,75,.34))}
.ghost,.primary{
  border-color:rgba(205,151,75,.58)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 5px 14px rgba(0,0,0,.3)!important;
}
.ghost:hover,.primary:hover{border-color:#e2b666!important;box-shadow:0 0 20px rgba(223,170,74,.17)!important}

/* Landing: art is atmospheric, not a competing UI mockup. */
.landing::before{
  content:"";
  position:fixed;
  inset:40px 0 0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(9,7,6,.12),rgba(7,6,5,.96) 88%),
    url('art/caravan-panorama.webp') center top/cover no-repeat;
  opacity:.52;
  filter:saturate(.82) contrast(1.05);
}
.panel{
  border-color:rgba(193,140,67,.54)!important;
  background:
    linear-gradient(145deg,rgba(42,29,21,.94),rgba(13,11,10,.96)),
    url('art/table-texture.webp') center/520px!important;
  box-shadow:0 24px 60px rgba(0,0,0,.56),inset 0 1px rgba(255,221,151,.06)!important;
}
.hero{position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(226,181,99,.17);border-radius:inherit;pointer-events:none
}
.hero-logo{filter:drop-shadow(0 16px 20px rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(209,151,61,.18))}

/* Unified physical table */
.landscape-game-shell{position:relative}
.landscape-board{
  position:relative;
  border-color:rgba(201,147,66,.62)!important;
  background:
    radial-gradient(ellipse at 50% 35%,rgba(123,70,31,.13),transparent 57%),
    linear-gradient(155deg,rgba(30,20,19,.91),rgba(9,9,10,.96)),
    url('art/table-texture.webp') center/620px!important;
  box-shadow:inset 0 0 85px rgba(0,0,0,.72),0 16px 44px rgba(0,0,0,.46)!important;
  isolation:isolate;
}
.landscape-board::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:url('art/ornament-frame.svg') center/100% 100% no-repeat;
  opacity:.42;
  pointer-events:none;
}
.landscape-board>*{position:relative;z-index:1}
.landscape-market{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.landscape-market::before{
  content:"";
  position:absolute;
  inset:2.5% 1.2%;
  border-radius:18px;
  border:1px solid rgba(207,155,76,.13);
  background:radial-gradient(ellipse at 50% 40%,rgba(219,165,77,.045),transparent 63%);
  pointer-events:none;
}
.market-board-title span,.official-lane-head h3{
  color:#d8b472!important;
  font-family:Georgia,"Noto Serif SC",serif!important;
  letter-spacing:.045em;
  text-shadow:0 1px #000,0 0 16px rgba(226,176,89,.16);
}
.official-lane-head span{color:#8f7961!important}

/* Card material and original illustration layer. */
.game-card,.completed-point-card{
  isolation:isolate;
  transform:translateZ(0);
}
.game-card{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(102,75,46,.92)!important;
  background:
    linear-gradient(160deg,rgba(225,210,178,.94),rgba(171,143,102,.96)),
    url('art/parchment-texture.webp') center/260px!important;
  box-shadow:
    0 7px 14px rgba(0,0,0,.52),
    0 1px 0 rgba(255,239,199,.64) inset,
    0 0 0 1px rgba(69,44,25,.18) inset!important;
}
.game-card::before,.completed-point-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--card-art);
  background-size:cover;
  background-position:center;
  opacity:.43;
  filter:saturate(.82) contrast(1.04) sepia(.06);
  pointer-events:none;
}
.game-card::after,.completed-point-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(255,247,222,.20),transparent 30%,rgba(54,35,22,.09) 72%,rgba(45,25,15,.24)),
    radial-gradient(circle at 50% 35%,transparent 28%,rgba(36,20,11,.16));
  pointer-events:none;
}
.game-card>*,.completed-point-card>*{position:relative;z-index:2}
.game-card:hover:not(.disabled):not(.played-hand-card){
  transform:translateY(-3px) scale(1.018)!important;
  border-color:#e0b560!important;
  box-shadow:0 12px 24px rgba(0,0,0,.6),0 0 20px rgba(220,164,72,.16)!important;
}
.game-card .index{
  color:rgba(65,45,28,.7)!important;
  text-shadow:0 1px rgba(255,255,255,.48);
  font-weight:900!important;
}
.game-card .card-type{
  border-radius:5px;
  background:linear-gradient(90deg,rgba(60,39,22,.72),rgba(135,91,38,.64),rgba(60,39,22,.72))!important;
  color:#f5dfad!important;
  text-shadow:0 1px #2a1609!important;
  box-shadow:0 1px 0 rgba(255,225,161,.16) inset;
}
.game-card:not(.point) .effect{
  margin-inline:3px!important;
  border:1px solid rgba(98,67,37,.24);
  border-radius:8px;
  background:linear-gradient(160deg,rgba(241,225,192,.82),rgba(197,168,121,.72))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.42),0 3px 9px rgba(48,27,15,.18);
  backdrop-filter:blur(1.4px);
}
.game-card .card-foot,.game-card .bonus-area{
  background:rgba(35,25,17,.67)!important;
  color:#dbc396!important;
  border-color:rgba(237,196,117,.18)!important;
  text-shadow:0 1px #000;
}

/* Point cards keep the requested cost-top / score-bottom hierarchy, now with art beneath it. */
.game-card.point::before{opacity:.51;background-position:center 31%}
.game-card.point .point-cost-top{
  background:linear-gradient(180deg,rgba(239,229,205,.88),rgba(210,191,156,.82))!important;
  backdrop-filter:blur(1.5px);
  border-bottom:1px solid rgba(85,58,34,.46)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.5);
}
.game-card.point .point-score{
  background:linear-gradient(180deg,rgba(167,131,82,.87),rgba(105,72,43,.94))!important;
  border-top:1px solid rgba(255,223,160,.3)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12);
}
.game-card.point .point-value{color:#f5dfaf!important;text-shadow:0 2px 2px rgba(39,20,10,.66)!important}
.game-card.point .point-unit{color:#e6c88e!important;text-shadow:0 1px #3b2415}
.point-cost-cube,.cube,.color-square,.caravan-cube{
  border:1px solid rgba(41,28,18,.44)!important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.52),
    inset -2px -3px 3px rgba(30,18,10,.28),
    0 2px 3px rgba(0,0,0,.4)!important;
}

/* Used cards remain recognisable and coloured, like cards resting face-up on the table. */
.played-hand-card{
  opacity:.88!important;
  filter:brightness(.63) saturate(.68) contrast(.96)!important;
}
.played-hand-card::before{opacity:.34!important;filter:saturate(.65) brightness(.72)!important}
.played-hand-card::after{background:linear-gradient(180deg,rgba(21,18,16,.2),rgba(10,9,8,.48))!important}
.played-hand-card .effect{background:rgba(181,160,126,.65)!important}

/* Decks are original abstract designs, not brand marks. */
.deck-stack.point .deck-card-back{
  background:url('art/cardback-point.svg') center/cover no-repeat!important;
}
.deck-stack.merchant .deck-card-back{
  background:url('art/cardback-merchant.svg') center/cover no-repeat!important;
}
.deck-card-back span{display:none!important}
.deck-stack>b{
  border-color:#c89543!important;
  background:#15100c!important;
  color:#f1ce7d!important;
  box-shadow:0 0 11px rgba(223,168,73,.23)!important;
}

/* Spice supply becomes a decorative bronze tray. */
.public-supply{
  border-color:rgba(190,131,55,.56)!important;
  background:
    linear-gradient(145deg,rgba(49,29,17,.92),rgba(13,11,10,.96)),
    url('art/table-texture.webp') center/400px!important;
  box-shadow:inset 0 0 25px rgba(0,0,0,.55),0 7px 18px rgba(0,0,0,.34)!important;
}
.supply-bowl{
  border:2px solid #8e5c2b!important;
  background:
    radial-gradient(circle at 50% 46%,rgba(22,15,10,.88) 0 55%,transparent 57%),
    radial-gradient(circle at 40% 26%,#c28a45,#6c3c1d 52%,#2a170e 72%,#b27a38 78%,#3a2112 88%)!important;
  box-shadow:inset 0 0 12px rgba(255,204,121,.18),0 6px 11px rgba(0,0,0,.42)!important;
}
.supply-bowl span{color:#d7b573!important;text-shadow:0 1px #000}
.supply-cubes i{box-shadow:inset 0 2px 2px rgba(255,255,255,.55),inset -2px -3px 3px rgba(34,18,8,.36),0 2px 3px rgba(0,0,0,.48)!important}

/* Player areas: framed caravan portraits and leather panels. */
.opponent-seat,.personal-zone{
  border-color:rgba(184,126,55,.64)!important;
  background:
    linear-gradient(150deg,rgba(34,24,19,.95),rgba(8,8,8,.98)),
    url('art/table-texture.webp') center/420px!important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.46),0 5px 16px rgba(0,0,0,.34)!important;
}
.opponent-seat.active{
  border-color:#e5b55e!important;
  box-shadow:inset 0 0 22px rgba(213,155,65,.12),0 0 18px rgba(222,168,72,.25)!important;
}
.seat-avatar.ai-avatar{
  color:transparent!important;
  background-image:
    linear-gradient(180deg,transparent 55%,rgba(10,7,5,.42)),
    var(--avatar-art)!important;
  background-size:cover!important;
  background-position:center!important;
  border-color:#d3a04c!important;
  box-shadow:0 4px 12px rgba(0,0,0,.48),inset 0 0 0 2px rgba(255,218,143,.12)!important;
}
.seat-avatar.ai-avatar::after{
  content:"AI";position:absolute;right:-3px;bottom:-3px;padding:1px 3px;border:1px solid #b87a2f;border-radius:4px;background:#17100c;color:#efca7b;font:900 6px/1.2 sans-serif
}
.mini-stat{
  border-color:rgba(183,132,62,.39)!important;
  background:rgba(7,7,7,.72)!important;
}
.mini-stat b{color:#f2d486!important;text-shadow:0 0 10px rgba(226,172,74,.2)}
.coin.gold,.completed-point-coin.gold{background:radial-gradient(circle at 34% 28%,#fff4aa,#e2aa28 48%,#8f540e 76%,#4e2b08)!important}
.coin.silver,.completed-point-coin.silver{background:radial-gradient(circle at 34% 28%,#fff,#cfd0cd 48%,#74777b 76%,#33373a)!important}

/* Personal caravan feels like a separate play mat, but does not grow. */
.personal-zone{
  position:relative;
  overflow:hidden;
}
.personal-zone::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(82,34,25,.16),transparent 32%,rgba(41,27,50,.16));pointer-events:none
}
.personal-zone>*{position:relative;z-index:1}
.caravan-card{
  border-color:rgba(185,132,59,.55)!important;
  background:linear-gradient(145deg,rgba(29,20,15,.94),rgba(7,7,7,.95))!important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.48)!important;
}
.caravan-capacity-grid{
  background:linear-gradient(180deg,rgba(5,5,5,.8),rgba(24,17,12,.75))!important;
  border-color:rgba(181,129,59,.32)!important;
}

/* Completed cards preserve their entire visual history with art. */
.completed-orders-panel{
  border-color:rgba(202,150,70,.62)!important;
  background:
    linear-gradient(145deg,rgba(34,24,18,.96),rgba(7,7,7,.98)),
    url('art/table-texture.webp') center/360px!important;
}
.completed-point-card{
  border-color:rgba(116,82,48,.92)!important;
  background:
    linear-gradient(160deg,rgba(222,207,177,.92),rgba(156,125,87,.94)),
    url('art/parchment-texture.webp') center/180px!important;
}
.completed-point-card::before{opacity:.46;background-position:center 28%}
.completed-point-card .point-cost-top{background:rgba(231,218,190,.78)!important;backdrop-filter:blur(1px)}
.completed-point-score{background:linear-gradient(180deg,rgba(128,91,54,.79),rgba(73,48,29,.91))!important}
.completed-point-score strong{color:#f4dcaa!important;text-shadow:0 2px 2px rgba(25,13,7,.62)!important}
.completed-point-score small{color:#d8b778!important}
.completed-point-empty{background:radial-gradient(circle at 50% 42%,rgba(179,125,55,.05),rgba(3,3,3,.32))!important}

/* Centre action theatre: more cinematic, still concise. */
.table-action-scrim{
  background:
    radial-gradient(circle at 50% 43%,rgba(143,85,35,.22),transparent 38%),
    rgba(4,3,3,.76)!important;
  backdrop-filter:blur(4px)!important;
}
.table-action-stage{
  border-color:rgba(235,189,102,.9)!important;
  background:
    linear-gradient(145deg,rgba(37,26,20,.98),rgba(8,8,8,.99)),
    url('art/table-texture.webp') center/520px!important;
  box-shadow:0 35px 110px rgba(0,0,0,.94),0 0 58px rgba(227,172,79,.22),inset 0 1px rgba(255,236,190,.08)!important;
}
.table-action-stage::before{
  content:"";position:absolute;inset:0;background:url('art/ornament-frame.svg') center/100% 100% no-repeat;opacity:.46;pointer-events:none
}
.unified-action-popup .ai-replay-card{box-shadow:0 24px 42px rgba(0,0,0,.72),0 0 28px rgba(231,178,85,.24)!important}
.unified-action-popup .broadcast-merchant-card::before,.unified-action-popup .broadcast-point-card::before{opacity:.62!important}
.broadcast-action-type{font-family:Georgia,"Noto Serif SC",serif!important}
.turn-announcement-card{
  background:
    linear-gradient(145deg,rgba(38,27,20,.98),rgba(7,7,7,.99)),
    url('art/table-texture.webp') center/420px!important;
  border-color:#d9a44e!important;
  box-shadow:0 28px 80px rgba(0,0,0,.88),0 0 34px rgba(219,160,64,.22)!important;
}

/* Reduced motion keeps all visual materials without animated lifts. */
@media(prefers-reduced-motion:reduce){.game-card:hover{transform:none!important}}

/* Very small landscape phones: art remains a quiet texture, never a readability tax. */
@media (orientation:landscape) and (max-height:560px){
  .game-card::before{opacity:.30}
  .game-card.point::before{opacity:.36}
  .game-card:not(.point) .effect{backdrop-filter:none}
  .landscape-board::before{opacity:.24}
  .seat-avatar.ai-avatar::after{font-size:5px}
}
.seat-avatar{position:relative;overflow:visible}
/* Direct class mappings keep artwork deterministic and avoid runtime image lookups. */
.art-merchant-1::before{background-image:url('art/merchant-01.webp')!important}
.art-merchant-2::before{background-image:url('art/merchant-02.webp')!important}
.art-merchant-3::before{background-image:url('art/merchant-03.webp')!important}
.art-merchant-4::before{background-image:url('art/merchant-04.webp')!important}
.art-merchant-5::before{background-image:url('art/merchant-05.webp')!important}
.art-merchant-6::before{background-image:url('art/merchant-06.webp')!important}
.art-point-1::before{background-image:url('art/point-01.webp')!important}
.art-point-2::before{background-image:url('art/point-02.webp')!important}
.art-point-3::before{background-image:url('art/point-03.webp')!important}
.art-point-4::before{background-image:url('art/point-04.webp')!important}
.art-point-5::before{background-image:url('art/point-05.webp')!important}
.opponent-seat.ai-art-1 .ai-avatar{background-image:linear-gradient(180deg,transparent 55%,rgba(10,7,5,.42)),url('art/ai-01.webp')!important}
.opponent-seat.ai-art-2 .ai-avatar{background-image:linear-gradient(180deg,transparent 55%,rgba(10,7,5,.42)),url('art/ai-02.webp')!important}
.opponent-seat.ai-art-3 .ai-avatar{background-image:linear-gradient(180deg,transparent 55%,rgba(10,7,5,.42)),url('art/ai-03.webp')!important}
.opponent-seat.ai-art-4 .ai-avatar{background-image:linear-gradient(180deg,transparent 55%,rgba(10,7,5,.42)),url('art/ai-04.webp')!important}

/* Merchant cards use a real illustration window instead of hiding art behind the effect panel. */
.game-card:not(.point){
  display:grid!important;
  grid-template-rows:auto minmax(36px,1fr) auto auto auto!important;
  align-content:stretch!important;
  gap:2px!important;
}
.game-card:not(.point)::before{display:none!important}
.card-art-window{
  min-width:0;
  min-height:0;
  margin:0 3px;
  border:1px solid rgba(91,61,34,.42);
  border-radius:7px;
  background-position:center 35%;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 18px rgba(20,10,5,.18),inset 0 1px rgba(255,244,216,.24);
  filter:saturate(.88) contrast(1.03);
  overflow:hidden;
}
.art-merchant-1 .card-art-window{background-image:url('art/merchant-01.webp')}
.art-merchant-2 .card-art-window{background-image:url('art/merchant-02.webp')}
.art-merchant-3 .card-art-window{background-image:url('art/merchant-03.webp')}
.art-merchant-4 .card-art-window{background-image:url('art/merchant-04.webp')}
.art-merchant-5 .card-art-window{background-image:url('art/merchant-05.webp')}
.art-merchant-6 .card-art-window{background-image:url('art/merchant-06.webp')}
.game-card:not(.point) .effect{
  min-height:34px!important;
  height:auto!important;
  margin:0 3px!important;
  padding:4px 3px!important;
  border-radius:6px!important;
}
.game-card:not(.point) .card-foot{margin-inline:3px;padding:2px 3px!important;border-radius:4px}
.game-card:not(.point) .bonus-area{margin-inline:3px;padding:3px!important;min-height:17px!important;border-radius:4px}
.played-hand-card .card-art-window{filter:brightness(.66) saturate(.68)!important}
.unified-action-popup .broadcast-merchant-card{
  grid-template-rows:auto 78px minmax(0,1fr)!important;
}
.unified-action-popup .broadcast-merchant-card .card-art-window{
  width:calc(100% - 8px);
  margin:0 4px;
  border-radius:8px;
  box-shadow:inset 0 0 20px rgba(20,10,4,.25),0 5px 12px rgba(0,0,0,.2);
}
.unified-action-popup .broadcast-merchant-card .effect{padding:7px 5px!important}
@media (orientation:landscape) and (max-height:620px){
  .game-card:not(.point){grid-template-rows:auto minmax(26px,1fr) auto auto auto!important;gap:1px!important}
  .game-card:not(.point) .card-art-window{margin:0 2px;border-radius:4px}
  .game-card:not(.point) .effect{min-height:22px!important;margin:0 2px!important;padding:2px!important}
  .game-card:not(.point) .card-foot{margin-inline:2px;padding:1px 2px!important}
  .game-card:not(.point) .bonus-area{margin-inline:2px;padding:1px 2px!important;min-height:10px!important}
}
@media (orientation:landscape) and (max-height:520px){
  .game-card:not(.point){grid-template-rows:auto minmax(22px,1fr) auto auto auto!important}
  .game-card:not(.point) .effect{min-height:18px!important}
}
.card-art-window img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  filter:saturate(.88) contrast(1.04);
}
.point-art-layer{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 30%!important;
  opacity:.47!important;
  filter:saturate(.82) contrast(1.04) sepia(.06)!important;
  z-index:0!important;
  pointer-events:none!important;
}
.game-card.point::before,.completed-point-card::before{display:none!important}
.played-hand-card .card-art-window img{filter:brightness(.66) saturate(.68)!important}
@media (orientation:landscape) and (max-height:560px){.point-art-layer{opacity:.34!important}}
/* Flex column is more reliable across mobile browsers than an implicit card grid. */
.game-card:not(.point){display:flex!important;flex-direction:column!important;align-items:stretch!important}
.game-card:not(.point) .card-type{flex:0 0 auto}
.game-card:not(.point) .card-art-window{flex:1 1 42%;min-height:36px}
.game-card:not(.point) .effect{flex:0 0 auto}
.game-card:not(.point) .card-foot,.game-card:not(.point) .bonus-area{flex:0 0 auto}
.unified-action-popup .broadcast-merchant-card{display:flex!important;flex-direction:column!important}
.unified-action-popup .broadcast-merchant-card .card-art-window{flex:0 0 78px!important}
.unified-action-popup .broadcast-merchant-card .effect{flex:1 1 auto!important}
@media (orientation:landscape) and (max-height:620px){.game-card:not(.point) .card-art-window{min-height:25px}}
@media (orientation:landscape) and (max-height:520px){.game-card:not(.point) .card-art-window{min-height:20px}}