/* TriPanic: Typhoon v0.9.7 — Unified cosmic card system.
   Visual-only. The original /typhoon-logo.png is intentionally reused unchanged.
   All card faces (Solo and Online) share the game's cardMarkup function. */
.game-card {
  --tt-edge:#9b72ff;
  --tt-light:#b8a2ff;
  --tt-glow:rgba(168,93,255,.45);
  --tt-galaxy:url('/typhoon-cards/prism.webp?v=0972');
  position:relative;
  border:2px solid var(--tt-edge);
  border-radius:clamp(7px,1vw,15px);
  background:#060b24 var(--tt-galaxy) center center/cover no-repeat;
  color:#fafaff!important;
  text-shadow:0 1px 4px #01041e;
  box-shadow:0 5px 12px #0009,0 0 7px var(--tt-glow),inset 0 0 0 1px #ffffff30;
  isolation:isolate;
  overflow:hidden;
  transform-style:flat;
}
.game-card.red {--tt-edge:#ff284f;--tt-light:#ff9aab;--tt-glow:rgba(255,21,73,.55);--tt-galaxy:url('/typhoon-cards/crimson.webp?v=0972')}
.game-card.blue {--tt-edge:#38cfff;--tt-light:#95faff;--tt-glow:rgba(27,199,255,.43);--tt-galaxy:url('/typhoon-cards/azure.webp?v=0972')}
.game-card.green {--tt-edge:#04f477;--tt-light:#9bffc5;--tt-glow:rgba(1,240,110,.54);--tt-galaxy:url('/typhoon-cards/emerald.webp?v=0972')}
.game-card.yellow {--tt-edge:#ffc34d;--tt-light:#fff0a3;--tt-glow:rgba(255,183,39,.48);--tt-galaxy:url('/typhoon-cards/gold.webp?v=0972')}
.game-card.wild,.game-card.type-draw4,.game-card.type-wild {--tt-edge:#d280ff;--tt-light:#ffaff8;--tt-glow:rgba(178,80,255,.44);--tt-galaxy:url('/typhoon-cards/prism.webp?v=0972')}
.game-card.character{--tt-edge:#bd72ff;--tt-light:#e0b3ff;--tt-glow:rgba(163,74,255,.49);--tt-galaxy:url('/typhoon-cards/prism.webp?v=0972')}
.game-card.character.char-sai{--tt-edge:#54caff;--tt-light:#7efff4;--tt-glow:rgba(34,197,255,.47);--tt-galaxy:url('/typhoon-cards/azure.webp?v=0972')}
.game-card.character.char-ai{--tt-edge:#ffd36b;--tt-light:#ffe8ac;--tt-glow:rgba(242,173,62,.43);--tt-galaxy:url('/typhoon-cards/gold.webp?v=0972')}
.game-card.character.char-fox{--tt-edge:#aa8bff;--tt-light:#8af6ff;--tt-glow:rgba(117,92,255,.4);--tt-galaxy:url('/typhoon-cards/prism.webp?v=0972')}
.game-card.character.char-varik{--tt-edge:#c16dff;--tt-light:#fbadff;--tt-glow:rgba(170,61,255,.42);--tt-galaxy:url('/typhoon-cards/prism.webp?v=0972')}
.game-card.character.char-quack{--tt-edge:#77e9f7;--tt-light:#b3ffff;--tt-glow:rgba(84,203,247,.44);--tt-galaxy:url('/typhoon-cards/azure.webp?v=0972')}
.game-card:before{
  content:"";position:absolute;inset:4px!important;left:4px!important;top:4px!important;
  width:auto!important;height:auto!important;
  transform:none!important;border:1px solid color-mix(in srgb,var(--tt-edge),white 40%)!important;
  border-radius:inherit;background:none!important;box-shadow:inset 0 0 5px #0009;
  opacity:.76;pointer-events:none;z-index:6;
}
.game-card:after{
  content:"◆";position:absolute;inset:auto!important;
  top:0!important;left:50%!important;right:auto!important;bottom:auto!important;
  width:auto!important;height:auto!important;transform:translateX(-50%)!important;
  font:900 clamp(7px,.95vw,13px)/1 ui-sans-serif,system-ui,sans-serif;
  color:var(--tt-light);text-shadow:0 0 8px var(--tt-edge);
  background:#0a1235d9!important;border:1px solid var(--tt-edge)!important;
  border-radius:0 0 4px 4px; padding:1px 4px;pointer-events:none;z-index:8;
}
.game-card .corner{
  top:5px;left:7px;right:auto;bottom:auto;z-index:9;
  font-family:Impact,'Arial Black',system-ui,sans-serif;
  font-size:clamp(12px,1.3vw,22px);font-style:italic;font-weight:950;line-height:1;
  color:#f5ffff!important;
  -webkit-text-stroke:.45px #041425;
  text-shadow:0 0 4px var(--tt-edge),0 2px 1px #030915;
}
.game-card .corner.bottom{
  left:auto!important;top:auto!important;right:6px!important;bottom:4px!important;
  transform:rotate(180deg)!important;color:#f5ffff!important;
}
.game-card .tt-family-mark{
  position:absolute;z-index:7;top:25px;left:9px;
  font-size:clamp(8px,.9vw,13px);line-height:1;color:var(--tt-light);text-shadow:0 0 8px var(--tt-edge);
}
.game-card .large{
  position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Impact,'Arial Black',system-ui,sans-serif;
  font-size:clamp(40px,5vw,77px);font-style:italic;font-weight:950;letter-spacing:-.04em;
  color:#efffff!important;
  -webkit-text-stroke:1px #06223c;
  text-shadow:0 0 3px #fff,0 0 13px var(--tt-edge),0 4px 2px #001323;
}
.game-card.type-number .large{transform:skewX(-5deg)}
.game-card.type-draw2 .large,.game-card.type-draw4 .large{font-size:clamp(31px,4.5vw,68px)}
.game-card .tt-action-icon{display:block;width:68%;height:68%;object-fit:contain;filter:drop-shadow(0 0 8px var(--tt-edge))}
.game-card .tt-action-prism{width:64%;height:62%;filter:drop-shadow(0 0 8px #bc63ff)}
.game-card .color-key{display:none!important}
.game-card .nameplate{display:none!important}
/* The card back never substitutes a generated wordmark for the official asset. */
.game-card.back{
  --tt-edge:#9d8fff;--tt-light:#aaf4ff;--tt-glow:rgba(99,124,255,.5);
  --tt-galaxy:url('/typhoon-cards/back.webp?v=0972');
  display:grid;place-items:center;
}
.game-card.back:before{inset:5px!important;border-color:#92eaff7c!important}
.game-card.back .tt-official-logo{
  display:block;position:relative;z-index:4;width:90%;height:auto;max-height:66%;object-fit:contain;
  filter:drop-shadow(0 0 7px #0b9fdbcc) drop-shadow(0 0 4px #ad55f4bd);
  pointer-events:none;
}
.game-card.character .tt-character-art{
  display:block;position:absolute;z-index:3;left:2%;top:4%;width:96%;height:75%;
  object-fit:contain;object-position:center top;pointer-events:none;
  filter:drop-shadow(0 0 7px #020a24dd) drop-shadow(0 0 5px var(--tt-glow));
}
.game-card.character .tt-character-art.tt-sci{top:10%;height:65%;width:100%;left:0}
.game-card.character .tt-character-art.tt-aya{top:3%;height:77%}
.game-card.character .tt-character-art.tt-fox{top:5%;height:76%;width:98%;left:1%}
.game-card.character .tt-character-art.tt-varik{top:3%;height:75%}
.game-card.character .tt-character-radiance{
  position:absolute;z-index:2;inset:20% 8% 15%;border-radius:50%;
  background:radial-gradient(ellipse at center,transparent 20%,color-mix(in srgb,var(--tt-edge),transparent 70%) 85%,transparent 100%);
  pointer-events:none;
}
.game-card.character .sigil{z-index:2;color:#d9b6ff;opacity:.6;font-size:clamp(28px,3vw,44px)}
.game-card.character .character-name{
  position:absolute;z-index:9;top:auto!important;bottom:16%!important;left:4%;right:4%;
  text-align:center;font:italic 900 clamp(9px,1.4vw,19px)/1.05 Impact,'Arial Black',system-ui,sans-serif;
  color:#fff;text-shadow:0 2px 3px #080823,0 0 7px #000,0 0 9px var(--tt-edge);
  letter-spacing:-.01em;white-space:nowrap;
  padding:4px 1px 2px;background:linear-gradient(90deg,transparent,#070d2ce9 12%,#070d2cea 88%,transparent);
  border-bottom:1px solid var(--tt-edge);
}
.game-card.character .short-effect{
  position:absolute;z-index:9;bottom:6%!important;left:4%;right:4%;
  text-align:center;font:900 clamp(6px,.72vw,10px)/1.1 ui-sans-serif,system-ui,sans-serif;
  color:var(--tt-light);text-shadow:0 1px 2px #020517,0 0 6px #041129;
  letter-spacing:.02em;background:linear-gradient(90deg,transparent,#080c27c7 8%,#080c27c7 92%,transparent);
  padding:2px 0;
}
.game-card.character .character-playtype{display:none!important}
.game-card.character .corner.bottom{display:none!important}
/* Older Fox portrait CSS must not overwrite the new user-reference art. */
.game-card.character.char-fox .tt-character-art{border:0;border-radius:0;opacity:1;background:transparent;box-shadow:none}
.game-card.character.char-fox .character-name{bottom:16%!important}
.game-card.character.char-fox .short-effect{bottom:6%!important}
.game-card.character.char-quack .sigil{opacity:1;z-index:3}
/* Playable state stays obvious without overwhelming the actual card. */
.hand .game-card.playable,.hand.layout-fan .game-card.playable{
  box-shadow:0 0 0 1px #cbfff8,0 0 17px #50ece17a,0 6px 14px #0008;
}
.hand .game-card:disabled{filter:saturate(.84) brightness(.85)}
/* Compact board and phone-hand tuning. */
@media(max-width:900px){
 .game-card .large{font-size:clamp(28px,5.5vw,51px)}
 .game-card .corner{font-size:clamp(10px,1.9vw,15px)}
 .game-card .tt-family-mark{top:20px;left:5px;font-size:10px}
 .game-card.character .character-name{font-size:clamp(8px,1.7vw,14px)}
 .game-card.character .short-effect{font-size:clamp(6px,1vw,9px)}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:760px){
 .game-card .large,.hand.layout-fan .hand-card-cell .game-card .large,.hand.layout-straight .hand-card-cell .game-card .large{font-size:clamp(23px,5vw,41px)}
 .game-card.type-draw2 .large,.game-card.type-draw4 .large{font-size:clamp(22px,4.7vw,37px)}
 .game-card .corner,.hand .game-card .corner{font-size:clamp(8px,1.45vw,12px);top:3px;left:3px}
 .game-card .corner.bottom,.hand .game-card .corner.bottom{right:3px!important;bottom:3px!important}
 .game-card .tt-family-mark{top:16px;left:4px;font-size:8px}
 .game-card.character .character-name{bottom:16%!important;font-size:clamp(6px,1.3vw,9px);padding:2px 0}
 .game-card.character .short-effect{bottom:5%!important;font-size:clamp(5px,.85vw,7px);padding:0}
 .game-card:before{inset:2px!important;left:2px!important;top:2px!important}
 .game-card:after{font-size:7px;padding:0 2px}
 .game-card.back .tt-official-logo{width:97%;max-height:67%}
}
@media(prefers-reduced-motion:reduce){.game-card{transition:none!important}}
/* Force the common cosmic texture above inherited pre-v0.9.7 color gradients. */
.game-card,
.game-card.red,.game-card.blue,.game-card.green,.game-card.yellow,
.game-card.wild,.game-card.character,.game-card.back {
  background-color:#071027!important;
  background-image:var(--tt-galaxy)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
/* Container queries follow rendered card size, not viewport size. This keeps
   60px hand cards readable even when the table is shown on a large desktop. */
.game-card {container-type:inline-size}
.game-card.character .tt-name-short,.game-card.character .tt-effect-short{display:none}
@container (max-width:106px){
  .game-card.character .tt-name-full,.game-card.character .tt-effect-full{display:none}
  .game-card.character .tt-name-short,.game-card.character .tt-effect-short{display:inline}
  .game-card.character .character-name{font-size:clamp(7px,11cqw,11px);letter-spacing:0}
  .game-card.character .short-effect{font-size:clamp(6px,8cqw,8px)}
}

/* v0.9.7.1 — Approved high-contrast families and clear availability.
   Open-ended plasma arcs replace the large enclosed orbital oval.
   The brand wordmark remains untouched; only the card back uses the existing prism mark. */
.game-card.red{--tt-edge:#ff274c;--tt-light:#ffb2bf;--tt-glow:rgba(255,18,67,.58)}
.game-card.green{--tt-edge:#08f477;--tt-light:#b6ffd0;--tt-glow:rgba(0,239,104,.56)}
.game-card.blue{--tt-edge:#17caff;--tt-light:#aff4ff;--tt-glow:rgba(22,201,255,.48)}
.game-card.yellow{--tt-edge:#ffc22f;--tt-light:#ffeba3;--tt-glow:rgba(255,198,29,.47)}
.game-card.red .tt-family-mark,.game-card.green .tt-family-mark,
.game-card.blue .tt-family-mark,.game-card.yellow .tt-family-mark{color:var(--tt-edge);text-shadow:0 0 5px var(--tt-edge),0 0 12px var(--tt-edge)}
.game-card .tt-action-icon:not(.tt-action-prism){filter:brightness(0) invert(1) drop-shadow(0 0 5px var(--tt-edge)) drop-shadow(0 0 6px var(--tt-edge))}
.game-card .large{text-shadow:0 1px 2px #fff,0 0 10px var(--tt-edge),0 3px 4px #000b}
.game-card:before{border-color:color-mix(in srgb,var(--tt-edge) 75%,white 25%)!important;opacity:.87}
/* At tiny phone widths the enabled check is a small independent cue, not decoration. */
.game-card .tt-play-cue{
  position:absolute;z-index:12;right:3px;top:3px;
  width:clamp(12px,1.3vw,21px);height:clamp(12px,1.3vw,21px);
  border-radius:50%;display:grid;place-items:center;
  background:#bbfff0;color:#08312e;border:1px solid #fff;
  font:1000 clamp(8px,.95vw,14px)/1 system-ui,sans-serif;
  box-shadow:0 0 0 2px #0f3531,0 0 9px #6affdf;
  pointer-events:none;
}
/* Strong legibility: selectable is brighter, outlined and lifted. Other hand cards recede. */
#hand .hand-card-cell:not(.is-playable) .game-card,
#hand .hand-card-cell:not(.is-playable) .game-card:disabled{
  filter:brightness(.62) saturate(.57)!important;opacity:.88!important;
  box-shadow:0 4px 10px #000a,inset 0 0 0 1px #ffffff16!important;
}
#hand .hand-card-cell.is-playable .game-card,
#hand .hand-card-cell.is-playable .game-card.playable,
.hand.layout-fan .hand-card-cell.is-playable .game-card.playable{
  filter:brightness(1.15) saturate(1.11)!important;opacity:1!important;
  border-color:#cafff3!important;
  box-shadow:0 0 0 2px #bafff2,0 0 0 4px #23dec8aa,0 0 22px #57ffeeaa,0 9px 18px #0009!important;
}
.hand.layout-fan .hand-card-cell.is-playable{
  transform:translateY(calc(var(--fan-y,0px) - 11px)) rotate(var(--fan-rotation,0deg))!important;
}
.hand.layout-fan .hand-card-cell.is-playable:hover,
.hand.layout-fan .hand-card-cell.is-playable:focus-within{
  transform:translateY(-22px) rotate(0deg)!important;z-index:500!important;
}
/* The new back is the established three-piece TriPanic symbol, not a recreated logo. */
.game-card.back .tt-back-crest{
  position:absolute;inset:19% 8% 20%;z-index:2;pointer-events:none;border-radius:45%;
  background:radial-gradient(ellipse at center,#42ecff25,transparent 65%);
  filter:drop-shadow(0 0 12px #8f65ff);
}
.game-card.back .tt-back-icon{
  display:block;position:relative;z-index:4;width:64%;height:65%;object-fit:contain;
  filter:drop-shadow(0 0 4px #c6f9ff) drop-shadow(0 0 11px #6347ff) drop-shadow(0 0 9px #f056fd);
  pointer-events:none;
}
@media(max-width:900px){
  .game-card .tt-play-cue{width:13px;height:13px;font-size:9px;right:2px;top:2px}
  .game-card.back .tt-back-icon{width:70%;height:68%}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:760px){
  .hand.layout-fan .hand-card-cell.is-playable{transform:translateY(calc(var(--fan-y,0px) - 8px)) rotate(var(--fan-rotation,0deg))!important}
  .game-card .tt-play-cue{width:11px;height:11px;font-size:8px;right:2px;top:2px}
}
@media(prefers-reduced-motion:reduce){.hand.layout-fan .hand-card-cell.is-playable{transition:none!important}}

/* v0.9.7.2: approved November 11 visual master.
   Exact-art direction: black-space base, sharp diagonal non-closed trails,
   highly saturated edges with bright bloom, and a true three-part crest.
   The existing /typhoon-logo.png asset is never edited. */
.game-card,
.game-card.red,.game-card.blue,.game-card.green,.game-card.yellow,
.game-card.wild,.game-card.character,.game-card.back {
  background-size:cover!important;
  background-position:center center!important;
  border-width:2px;
  box-shadow:0 5px 14px #000c,
     0 0 3px color-mix(in srgb,var(--tt-edge) 90%,white 10%),
     0 0 13px var(--tt-glow),
     inset 0 0 0 1px #ffffff55!important;
}
.game-card.red{--tt-edge:#ff274c;--tt-light:#ff97ae;--tt-glow:#ff174bd9}
.game-card.green{--tt-edge:#00f976;--tt-light:#9affc1;--tt-glow:#00ff77cf}
.game-card.blue{--tt-edge:#12caff;--tt-light:#adf6ff;--tt-glow:#00bfffcf}
.game-card.yellow{--tt-edge:#ffc32b;--tt-light:#ffed9f;--tt-glow:#ffb51cba}
.game-card.wild,.game-card.type-wild,.game-card.type-draw4{--tt-edge:#c05aff;--tt-light:#f4bcff;--tt-glow:#ad36ffb7}
.game-card.back{--tt-edge:#c687ff;--tt-light:#e1c0ff;--tt-glow:#a45affc7}
.game-card .large{
  color:#f7ffff!important;
  -webkit-text-stroke:1.1px #001120;
  text-shadow:0 0 2px #fff,0 2px 1px #050518,0 0 5px var(--tt-edge),0 0 11px var(--tt-edge);
}
.game-card.yellow .tt-action-icon:not(.tt-action-prism){
  filter:brightness(0) saturate(100%) invert(86%) sepia(53%) saturate(1649%) hue-rotate(339deg) brightness(105%) contrast(101%) drop-shadow(0 0 5px #ffb52b);
}
.game-card .tt-action-prism{filter:drop-shadow(0 0 4px #ebdcff) drop-shadow(0 0 8px #b260ff)}
.game-card.back .tt-back-icon{width:68%;height:69%;filter:drop-shadow(0 0 3px #ebfaff) drop-shadow(0 0 9px #774cff) drop-shadow(0 0 11px #b147ff)}
.game-card.back .tt-back-crest{background:radial-gradient(ellipse at center,#41beff22,transparent 64%)}
/* Legibility priority: one obvious playable treatment, no cyan takeover of red/gold. */
#hand .hand-card-cell.is-playable .game-card,
#hand .hand-card-cell.is-playable .game-card.playable,
.hand.layout-fan .hand-card-cell.is-playable .game-card.playable{
  filter:brightness(1.10) saturate(1.13)!important;
  border-color:var(--tt-light)!important;
  box-shadow:0 0 0 1px #ffffffce,0 0 0 3px var(--tt-edge),0 0 19px var(--tt-glow),0 9px 17px #000c!important;
}
#hand .hand-card-cell:not(.is-playable) .game-card,
#hand .hand-card-cell:not(.is-playable) .game-card:disabled{
  filter:brightness(.72) saturate(.72)!important;
  opacity:.91!important;
}
/* Last in the cascade: legacy pre-redesign family borders must not override the master palette. */
.game-card.red,.game-card.blue,.game-card.green,.game-card.yellow,
.game-card.wild,.game-card.back,.game-card.character {
  border-color:var(--tt-edge)!important;
}