:root{
      --bg:#0f2a1f;
      --felt:#184331;
      --panel:#10261d;
      --card:#f6f1e6;
      --ink:#1a1a1a;
      --muted:#c9d7cf;
      --accent:#e2b04a;
      --danger:#e25a5a;
      --ok:#64d18c;
    }
    *{box-sizing:border-box}

    *{
      -webkit-user-select:none;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }

    input,
    textarea,
    [contenteditable="true"]{
      -webkit-user-select:text;
      user-select:text;
    }

    button,
    [role="button"],
    .clickable{
      touch-action: manipulation;
    }

	html, body{
	  height: 100%;
	  margin: 0;
	}

	body{
	  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	  color:#f2f5f3;
	  background: radial-gradient(1200px 700px at 50% 20%, var(--felt), var(--bg));
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-attachment: fixed;

	  /* use modern viewport units first; vh as fallback */
	  min-height: 100vh;
	  min-height: 100svh;
	  min-height: 100dvh;

	  display:flex;
	  justify-content:center;

	  padding: 4px;

	}

    body.trailMapOpen{
      overflow:hidden;
    }

    body.townViewActive,
    body.trailViewActive,
    body.titleViewActive{
      overflow:hidden;
    }

    .app{
      width:min(800px, 100%);
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    body.townViewActive .app,
    body.trailViewActive .app{
      height: calc(100vh - 8px);
      height: calc(100svh - 8px);
      height: calc(100dvh - 8px);
      max-height: calc(100vh - 8px);
      max-height: calc(100svh - 8px);
      max-height: calc(100dvh - 8px);
    }

    body.titleViewActive{
      padding:0;
      display:block;
      background:#160d08;
    }

    body.titleViewActive .app{
      width:100%;
      max-width:none;
      height:100vh;
      height:100svh;
      height:100dvh;
      gap:0;
    }

    body.titleViewActive header,
    body.titleViewActive #campaignError{
      display:none;
    }

    .titleScreen{
      position:relative;
      width:100vw;
      height:100vh;
      height:100svh;
      height:100dvh;
      min-height:0;
      overflow:hidden;
      background-image:url("images/titlescreen.jpg");
      background-size:100% auto;
      background-position:center var(--title-bg-y, 0px);
      background-repeat:no-repeat;
      padding:
        max(16px, env(safe-area-inset-top))
        18px
        max(24px, calc(env(safe-area-inset-bottom) + 18px));
    }

    .titleScreen::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 28%),
        linear-gradient(0deg, rgba(32,18,10,.94) 0%, rgba(54,30,15,.78) 22%, rgba(54,30,15,.24) 44%, rgba(0,0,0,0) 66%);
      pointer-events:none;
      z-index:0;
    }

    .titleScreenShade{
      position:absolute;
      inset:0;
      box-shadow:inset 0 0 90px rgba(0,0,0,.28);
      pointer-events:none;
      z-index:0;
    }

    .titleLampInnerGlow,
    .titleCandleInnerGlow{
      --lamp-flicker-opacity:.88;
      --lamp-flicker-scale-x:1;
      --lamp-flicker-scale-y:1;
      position:absolute;
      left:0;
      top:0;
      z-index:1;
      width:0;
      height:0;
      border-radius:50%;
      background:radial-gradient(
        ellipse at center,
        rgba(255,225,140,.58) 0%,
        rgba(255,175,60,.27) 45%,
        rgba(255,140,30,0) 100%
      );
      opacity:var(--lamp-flicker-opacity);
      transform:translate(-50%, -50%) scale(var(--lamp-flicker-scale-x), var(--lamp-flicker-scale-y));
      transform-origin:center;
      mix-blend-mode:screen;
      filter:blur(var(--lamp-glow-blur, 1px));
      pointer-events:none !important;
      will-change:opacity, transform;
      transition:opacity 105ms ease-in-out, transform 125ms ease-in-out;
    }

    .titleCandleInnerGlow{
      --lamp-flicker-opacity:.35;
      background:radial-gradient(
        ellipse at center,
        rgba(255,238,170,.72) 0%,
        rgba(255,185,70,.32) 48%,
        rgba(255,140,30,0) 100%
      );
      transition:opacity 80ms ease-in-out, transform 105ms ease-in-out;
    }

    .titleOuterGlow{
      --lamp-flicker-opacity:.35;
      --lamp-flicker-scale-x:1;
      --lamp-flicker-scale-y:1;
      position:absolute;
      left:0;
      top:0;
      z-index:1;
      width:0;
      height:0;
      border-radius:50%;
      background:radial-gradient(
        ellipse at center,
        rgba(255,210,115,.34) 0%,
        rgba(255,165,55,.18) 38%,
        rgba(255,125,25,.07) 68%,
        rgba(255,110,20,0) 100%
      );
      opacity:var(--lamp-flicker-opacity);
      transform:translate(-50%, -50%) scale(var(--lamp-flicker-scale-x), var(--lamp-flicker-scale-y));
      transform-origin:center;
      mix-blend-mode:screen;
      filter:blur(var(--lamp-glow-blur, 4px));
      pointer-events:none !important;
      will-change:opacity, transform;
      transition:opacity 155ms ease-in-out, transform 190ms ease-in-out;
    }

    .titleCandleOuterGlow{
      background:radial-gradient(
        ellipse at center,
        rgba(255,225,145,.38) 0%,
        rgba(255,175,65,.18) 42%,
        rgba(255,125,25,0) 100%
      );
      transition:opacity 125ms ease-in-out, transform 155ms ease-in-out;
    }

    .titleDealLayer{
      position:fixed;
      inset:0;
      z-index:1;
      pointer-events:none;
      overflow:hidden;
      perspective:900px;
      transform-style:preserve-3d;
    }

    .titleDealCard{
      position:absolute;
      left:0;
      top:0;
      width:var(--deal-card-w, 48px);
      height:var(--deal-card-h, 72px);
      border-radius:5px;
      background-image:var(--selected-card-back-image, url("images/cards/backs/deadwood-knock.jpg"));
      background-size:cover;
      background-position:center;
      box-shadow:0 6px 12px rgba(0,0,0,.34);
      transform-origin:center center;
      will-change:transform, opacity;
      pointer-events:none;
      opacity:0;
      backface-visibility:visible;
    }

    .titleDealCard::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      box-shadow:inset 0 0 0 1px rgba(45,28,12,.28), inset 0 8px 18px rgba(255,255,255,.08);
      pointer-events:none;
    }

    body.titleDealPaused .titleDealCard{
      animation-play-state:paused;
    }

    .titleScreenLogoWrap{
      position:fixed;
      top:max(22px, env(safe-area-inset-top));
      left:50%;
      transform:translateX(-50%);
      z-index:2;
      width:min(72vw, 330px);
      display:flex;
      justify-content:center;
      cursor:pointer;
      touch-action:manipulation;
      outline:none;
    }

    .titleScreenLogoWrap:focus-visible{
      filter:drop-shadow(0 0 5px rgba(255,230,165,.72));
    }

    .titleScreenLogo{
      display:block;
      width:100%;
      height:auto;
      filter:drop-shadow(0 10px 18px rgba(0,0,0,.48));
    }

    .titleLogoGlint{
      position:absolute;
      inset:0;
      overflow:hidden;
      pointer-events:none;
      -webkit-mask-image:url("images/deadwood-title.png");
      -webkit-mask-repeat:no-repeat;
      -webkit-mask-size:100% 100%;
      -webkit-mask-position:center;
      mask-image:url("images/deadwood-title.png");
      mask-repeat:no-repeat;
      mask-size:100% 100%;
      mask-position:center;
      mix-blend-mode:screen;
    }

    .titleLogoGlint::before,
    .titleLogoGlint::after,
    .titleLogoGlintLead{
      content:"";
      position:absolute;
      top:-18%;
      bottom:-18%;
      left:-28%;
      width:18%;
      opacity:0;
      background:linear-gradient(
        102deg,
        transparent 0%,
        rgba(255,214,138,0) 18%,
        rgba(255,224,164,.40) 34%,
        rgba(255,248,218,.92) 46%,
        rgba(255,255,246,1) 50%,
        rgba(255,235,181,.70) 57%,
        rgba(255,196,105,.28) 72%,
        transparent 100%
      );
      transform:skewX(-10deg);
      will-change:left, opacity, filter;
    }

    .titleLogoGlint.play-glint::before{
      animation:titleLogoGlintSweep 1.2s cubic-bezier(.28,.04,.38,1) 1.0s 1 both;
    }

    .titleLogoGlint::after{
      width:15%;
    }

    .titleLogoGlintLead{
      display:block;
      width:15%;
    }

    .titleLogoGlint.play-glint .titleLogoGlintLead{
      animation:titleLogoGlintEcho 1.2s cubic-bezier(.28,.04,.38,1) 0.9s 1 both;
    }

    .titleLogoGlint.play-glint::after{
      animation:titleLogoGlintEcho 1.2s cubic-bezier(.28,.04,.38,1) 1.1s 1 both;
    }

    @keyframes titleLogoGlintSweep{
      0%{
        left:-28%;
        opacity:0;
        filter:brightness(1.04);
      }
      4%{
        opacity:.90;
      }
      82%{
        opacity:.98;
        filter:brightness(1.18);
      }
      92%{
        opacity:1;
        filter:brightness(1.65);
      }
      100%{
        left:112%;
        opacity:0;
        filter:brightness(1.1);
      }
    }

    @keyframes titleLogoGlintEcho{
      0%{
        left:-28%;
        opacity:0;
        filter:brightness(.92);
      }
      4%{
        opacity:.38;
      }
      82%{
        opacity:.48;
        filter:brightness(1);
      }
      92%{
        opacity:.58;
        filter:brightness(1.16);
      }
      100%{
        left:112%;
        opacity:0;
        filter:brightness(1);
      }
    }

    .titleScreenMenu{
      position:fixed;
      left:50%;
      bottom:max(54px, calc(env(safe-area-inset-bottom) + 44px));
      transform:translateX(-50%);
      z-index:2;
      width:min(92vw, 430px);
      display:grid;
      gap:10px;
    }

    .titleSettingsBtn{
      position:fixed;
      top:max(12px, calc(env(safe-area-inset-top) + 8px));
      right:max(12px, calc(env(safe-area-inset-right) + 8px));
      z-index:4;
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      padding:10px;
      color:rgba(255,246,226,.92);
      background:rgba(43,28,18,.82);
      border:1px solid rgba(255,232,178,.36);
      border-radius:50%;
      box-shadow:0 8px 20px rgba(0,0,0,.34);
      backdrop-filter:blur(2px);
    }

    .titleSettingsBtn svg{
      width:100%;
      height:100%;
      fill:currentColor;
    }

    .titleSettingsBtn:hover{
      color:#fff2cf;
      background:rgba(62,40,24,.94);
    }

    .titleSettingsBtn:focus-visible{
      outline:3px solid rgba(240,198,111,.82);
      outline-offset:3px;
    }

    .titleButton{
      width:100%;
      min-height:48px;
      border-radius:8px;
      font-size:14px;
      font-weight:950;
      letter-spacing:.8px;
      text-transform:uppercase;
      color:rgba(255,246,226,.96);
      border:1px solid rgba(255,232,178,.34);
      background:rgba(43,28,18,.86);
      box-shadow:0 10px 22px rgba(0,0,0,.32);
      backdrop-filter:blur(2px);
    }

    .titleButtonPrimary{
      min-height:52px;
      color:#231407;
      border-color:rgba(255,236,179,.82);
      background:linear-gradient(180deg, #f0c66f, #c9872e);
      box-shadow:0 12px 26px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.34);
    }

    .titleButtonRow{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }

    .titleButtonSmall{
      min-height:46px;
      font-size:12px;
      letter-spacing:.7px;
    }

    .titleNewsBtn{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }

    .titleNewsBadge{
      display:inline-flex;
      align-items:center;
      min-height:18px;
      padding:2px 6px;
      color:#2b1608;
      background:#f0c66f;
      border:1px solid rgba(255,239,196,.72);
      border-radius:999px;
      font-size:9px;
      font-weight:1000;
      line-height:1;
      letter-spacing:.7px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
    }

    .titleLegal{
      position:fixed;
      right:max(10px, calc(env(safe-area-inset-right) + 10px));
      bottom:max(8px, calc(env(safe-area-inset-bottom) + 8px));
      z-index:2;
      text-align:right;
      color:rgba(255,246,226,.72);
      font-size:10px;
      font-weight:800;
      line-height:1.25;
      letter-spacing:.2px;
      text-shadow:0 2px 4px rgba(0,0,0,.72);
      pointer-events:none;
    }

    @media (prefers-reduced-motion: reduce){
      .titleDealCard{
        transition:none !important;
        animation:none !important;
      }

      .titleLampInnerGlow,
      .titleCandleInnerGlow,
      .titleOuterGlow{
        transition:none;
      }

      .titleLogoGlint{
        display:none;
      }
    }

    .leaveTableCard{
      max-width:440px;
    }

    .leaveTableBody{
      margin:0;
      color:rgba(242,245,243,.88);
      line-height:1.45;
      font-size:14px;
      font-weight:750;
    }

    .leaveTableActions{
      margin-top:16px;
      align-items:stretch;
    }

    .leaveTableActions button{
      min-height:44px;
    }

    @media (orientation: landscape) and (min-width: 760px){
      .titleScreen{
        background-position:center var(--title-bg-y, 0px);
        padding-top:max(14px, env(safe-area-inset-top));
      }

      .titleScreenLogoWrap{
        width:min(32vw, 300px);
        top:max(16px, env(safe-area-inset-top));
      }

      .titleScreenMenu{
        width:min(380px, 40vw);
        bottom:max(34px, calc(env(safe-area-inset-bottom) + 28px));
        gap:9px;
      }
    }
    header{
      flex: 0 0 auto;
      height: 108px;
      padding: 0;
      border:1px solid rgba(0,0,0,.22);
      border-radius:14px;
      background:
        radial-gradient(700px 240px at 18% 40%, rgba(0,0,0,.14), rgba(0,0,0,0) 62%),
        linear-gradient(180deg, rgba(205,184,146,.96), rgba(188,160,116,.94));
      box-shadow: 0 12px 30px rgba(0,0,0,.28);
      overflow:visible;
      position:relative;
    }
    header::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 6px);
      opacity:.18;
      mix-blend-mode:multiply;
      z-index:0;
    }

    header .brand{
      min-width:0;
      overflow:hidden;
      position:absolute;
      inset:0;
      z-index:1;
      display: flex;
      align-items: stretch;
      justify-content:flex-start;
      border-radius: inherit;
    }
    header .titleImg{
      height:100%;
      width:auto;
      display:block;
      max-width:none;
      max-height:none;
      flex:0 0 auto;
      filter: contrast(1.02) brightness(0.98);
      border-radius: inherit;
    }

    .headerMenu{
      position:absolute;
      top:8px;
      left:8px;
      z-index:5;
    }

    .menuBtn{
      width:38px;
      height:38px;
      min-height:0;
      padding:0;
      border-radius:11px;
      border:1px solid rgba(46,28,16,.36);
      background:rgba(236,221,192,.92);
      color:rgba(46,28,16,.94);
      box-shadow:
        0 8px 16px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.45);
      font-size:24px;
      font-weight:950;
      line-height:1;
    }

    .menuBtn:hover{
      background:rgba(244,232,207,.98);
    }

    .menuDropdown{
      position:absolute;
      top:44px;
      left:0;
      z-index:6000;
      min-width:170px;
      padding:6px;
      border-radius:12px;
      border:1px solid rgba(46,28,16,.34);
      background:linear-gradient(180deg, rgba(240,227,200,.98), rgba(214,189,146,.98));
      box-shadow:0 14px 28px rgba(0,0,0,.34);
    }

    .menuDropdown button{
      width:100%;
      min-height:0;
      padding:9px 10px;
      border-radius:9px;
      border:0;
      background:transparent;
      color:rgba(46,28,16,.94);
      box-shadow:none;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      text-align:left;
      white-space:nowrap;
      font-size:13px;
      font-weight:950;
      letter-spacing:.5px;
      text-transform:uppercase;
    }

    .menuDropdown button:hover{
      background:rgba(46,28,16,.10);
    }

    
    header .headerRight{
      position:absolute;
      top:50%;
      right:10px;
      transform:translateY(-50%);
      display:flex;
      align-items:center;
      justify-content:flex-end;
      max-width: calc(100% - 20px);
      padding: 0;
      z-index:2;
      background: transparent;
    }

        .row{display:flex; gap:14px; align-items:stretch}
    .panel{
      background: rgba(16,38,29,.55);
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      padding:12px;
      box-shadow: 0 12px 30px rgba(0,0,0,.22);
    }


    /* Wanted placard (Round + Rules/Score buttons) */
    .wantedPlacard{
      height:70px;
      display:grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items:end;
      gap:10px;
      width:220px;
      max-width:100%;

      padding: 2px 10px;
      border-radius: 12px;
      border: 1px solid rgba(46,28,16,.32);
      background: linear-gradient(180deg, rgba(236,221,192,.98), rgba(214,189,146,.98));
      box-shadow:
        0 12px 20px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -3px 10px rgba(0,0,0,.10);
      position: relative;
      transform: rotate(-1.2deg);
      overflow:hidden;
    }
    .wantedPlacard::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 2px 6px);
      opacity:.22;
      mix-blend-mode:multiply;
      pointer-events:none;
    }
    .wantedPlacard::after{
      content:"";
      position:absolute;
      left: 50%;
      top: 5px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(46,28,16,.55);
      box-shadow: 0 2px 4px rgba(0,0,0,.25);
      opacity: .65;
      transform: translateX(-50%);
      pointer-events:none;
    }

    .wantedTitle{
      position:absolute;
      left:0;
      right:0;
      top:3px;
      z-index:2;
      pointer-events:none;
      color: rgba(46,28,16,.20);
      font-weight: 1000;
      font-size: 28px;
      letter-spacing: 8px;
      line-height:1;
      text-transform:uppercase;
      text-align:center;
      text-shadow:none;
      white-space:nowrap;
      mix-blend-mode:multiply;
    }

    #roundCtr{
      margin:0;
      padding:0;
      background:none;
      border:none;
      box-shadow:none;
      transform:none;
      text-transform: uppercase;
      line-height: 1.05;
      color: rgba(46,28,16,.92);
      position: relative;
      z-index: 3;
      display:flex;
      align-items:center;
      gap:5px;
      white-space:nowrap;
      justify-self:start;
    }
    #roundCtr .roundLabel{
      display:inline;
      font-size: 10px;
      letter-spacing: 1px;
      opacity: .85;
      margin-bottom: 0;
      font-weight: 900;
      line-height:1;
    }
    #roundCtr .roundValue{
      display:inline;
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .3px;
      line-height:1;
    }
    #roundCtr .roundValue.testingShortcut{
      cursor:pointer;
    }

    .wantedBtns{
      display:flex;
      gap:10px;
      align-items:flex-end;
      justify-content:center;
      flex-wrap:nowrap;
      position: relative;
      z-index: 3;
      padding-bottom: 2px;
      justify-self:center;
      width:100%;
    }
    .wantedBtn{
      height: 28px;
      padding: 0 6px;
      border-radius: 10px;
      border: 1px solid rgba(46,28,16,.38);
      background: rgba(46,28,16,.18);
      color: rgba(46,28,16,.92);
      font-weight: 900;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    }
    .wantedBtn:hover{ background: rgba(46,28,16,.24); }
    .wantedBtn:active{ transform: translateY(1px); }
    .wantedBtnPrimary{
      background: rgba(46,28,16,.30);
      border-color: rgba(46,28,16,.50);
    }

    .wantedPlacard:not(.header-playbill-active){
      width:200px;
      grid-template-columns: 1fr;
      align-items:end;
    }

    .wantedPlacard:not(.header-playbill-active) #roundCtr{
      display:none;
    }

    .wantedPlacard.header-playbill-active{
      display:block;
      padding:6px 10px;
    }

    .wantedPlacard.header-playbill-active .wantedTitle,
    .wantedPlacard.header-playbill-active .wantedBtns{
      display:none;
    }

    .header-playbill{
      position:relative;
      z-index:3;
      width:100%;
      height:100%;
      min-width:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:1px;
      color:rgba(46,28,16,.94);
      text-align:center;
      line-height:1;
    }

    .playbill-kicker{
      flex:0 0 auto;
      position:relative;
      top:-4px;
      margin-bottom:-4px;
      font-size:18px;
      line-height:1;
      font-weight:1000;
      letter-spacing:2px;
      text-transform:uppercase;
      opacity:.72;
    }

    .playbill-table-name{
      width:100%;
      min-width:0;
      max-height:38px;
      padding-bottom:3px;
      overflow:hidden;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      font-family:Georgia, "Times New Roman", serif;
      font-size:15px;
      line-height:1.02;
      font-weight:900;
      letter-spacing:-.15px;
      text-wrap:balance;
      overflow-wrap:normal;
    }

    .playbill-table-name.is-long{
      font-size:11px;
      line-height:1.06;
    }

    .playbill-table-name.is-extra-long{
      font-size:10px;
      line-height:1.08;
      letter-spacing:-.25px;
    }

    .playbill-round{
      flex:0 0 auto;
      padding-top:4px;
      font-size:12px;
      line-height:1;
      font-weight:950;
      letter-spacing:.55px;
      text-transform:uppercase;
      opacity:.84;
    }

    @keyframes placardStamp{
      0%{ transform: rotate(-1.2deg) scale(.94); filter: blur(.2px); opacity:.0; }
      60%{ transform: rotate(-1.2deg) scale(1.04); opacity:1; }
      100%{ transform: rotate(-1.2deg) scale(1); opacity:1; }
    }
    .wantedPlacard.stamp{ animation: placardStamp 220ms ease-out; }

    @media (max-width: 420px){
      header{
        height: 96px;
      }

      .headerMenu{
        top:6px;
        left:6px;
      }

      .menuBtn{
        width:36px;
        height:36px;
        font-size:22px;
      }

      .menuDropdown{
        top:42px;
        left:0;
      }

      header .titleImg{
        margin-left:-20px;
        height:calc(100% + 0px);
      }

      header .headerRight{
        right:6px;
        max-width: calc(100% - 12px);
      }

      .wantedPlacard{
        min-height: 58px;
        height:auto;
        gap:6px;
        padding:4px 8px 2px;
        width:200px;
      }

      .wantedTitle{
        top:1px;
      }

      .wantedPlacard.header-playbill-active{
        height:auto;
        min-height:58px;
        padding:7px 8px;
      }

      .playbill-table-name{
        font-size:14px;
      }

      .playbill-table-name.is-long{
        font-size:11px;
      }

      .playbill-table-name.is-extra-long{
        font-size:10px;
      }

      .wantedBtns{
        gap:5px;
      }

      .wantedBtn{
        height:28px;
        padding:0 6px;
        font-size:10px;
      }

      #roundCtr::before{
        display:none;
      }
    }


    .table{
      flex: 1 1 auto;
      min-height:420px;
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
    }
    .tableMain{display:flex; flex-direction:column; gap:12px;}
.panel.tableMain{ padding:0; border:none; background:none; box-shadow:none; }

/* ---------------------------
   Table Surface (main table layout redesign)
   --------------------------- */
.tableSurface{
  position: relative;
  padding: 0;
  height: clamp(240px, 36vh, 400px);
  min-height: 240px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 50% 62%, rgba(0,0,0,.28), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(24,67,49,.96), rgba(15,42,31,.96));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.22),
    0 12px 30px rgba(0,0,0,.18);
}

/* Bot seats overlay */
.botSeats{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.seat{
  position: absolute;
  pointer-events: none;
}

.seat.characterSeat{
  pointer-events: auto;
}

.seatBox{
  width: clamp(84px, 18vw, 112px);
  min-height: 92px;
  padding: 8px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  backdrop-filter: blur(2px);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0px;
  position: relative;
}

.seat.characterSeat .seatBox{
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

@media (hover:hover){
  .seat.characterSeat .seatBox:hover{
    border-color: rgba(226,176,74,.38);
    background: rgba(226,176,74,.12);
    transform: translateY(-1px);
  }
}

.seat.turn .seatBox{
  outline: 2px solid rgba(226,176,74,.55);
  outline-offset: -2px;
}
.seat.sittingOut .seatBox{
  opacity:.78;
  border-style:dashed;
  filter:saturate(.72);
}

.seat.speaking .seatBox{
  animation: dialogueSpeakerGlow 1.15s ease-in-out infinite alternate;
}

@keyframes dialogueSpeakerGlow{
  from{
    background:rgba(226,176,74,.10);
    box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 0 rgba(226,176,74,0);
  }
  to{
    background:rgba(226,176,74,.20);
    box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 22px rgba(226,176,74,.42);
  }
}

.seat.knocker .seatBox{
  border-color: rgba(226,176,74,.30);
  background: rgba(226,176,74,.10);
}

.seatTopRow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.seatNameWrap{
  flex: 1 1 auto;
  min-width: 0; /* required for ellipsis in flex */
}

.seatName{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(242,245,243,.96);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.15;
}

.seatBadges{
  position: absolute;
  left: 50%;
  bottom: -9px;              /* overlap the bottom border */
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 8;
}

/* challengeBadge has margin-left in global styles; neutralize inside seatBadges */
.seatBadges .challengeBadge{
  margin-left: 0;
  position: relative;
  z-index: 9;
}

/* Bottom row: avatar + score */
.seatBottomRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  gap: 10px;
}

.seatAvatar{
  font-size: 38px;
  width: 48px;
  height: 48px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.25));
}

.seatAvatarImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.seatAvatarFallback{
  line-height: 1;
}

.legendBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(226,176,74,.46);
  background: rgba(226,176,74,.22);
  color: rgba(242,245,243,.96);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .06em;
  white-space: nowrap;
}

.seatScore{
  font-weight: 900;
  font-size: 18px;
  color: rgba(242,245,243,.96);
  letter-spacing: .2px;
}

.seatScore.sitOutScore{
  width: 38px;
  font-size: 9px;
  line-height: 1.05;
  letter-spacing: .02em;
  text-align: left;
  text-transform: none;
}

.sleightMark{
  position:absolute;
  right:5px;
  bottom:3px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  color:rgba(190,190,190,.34);
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  pointer-events:none;
  user-select:none;
}

/* Micro-interactions for bot actions */
.seatBox.nudge{
  animation: seatNudge 160ms ease-out;
}
@keyframes seatNudge{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}

.centerPiles .cardBack.bounce,
.centerPiles .cardFace.bounce{
  animation: pileBounce 180ms ease-out;
}
@keyframes pileBounce{
  0%{ transform: translate(var(--pile-card-x, 0px), var(--pile-card-y, 0px)); }
  35%{ transform: translate(var(--pile-card-x, 0px), calc(var(--pile-card-y, 0px) - 4px)); }
  100%{ transform: translate(var(--pile-card-x, 0px), var(--pile-card-y, 0px)); }
}

/* Seat positions */
.seat[data-seat="left"]{ left: 10px; top: 54%; transform: translateY(-50%); }
.seat[data-seat="right"]{ right: 10px; top: 54%; transform: translateY(-50%); }
.seat[data-seat="top"]{ left: 50%; top: 10px; transform: translateX(-50%); }
.seat[data-seat="upperLeft"]{ left: 10px; top: 22%; }
.seat[data-seat="upperRight"]{ right: 10px; top: 22%; }
.botSeats[data-bot-count="4"] .seat[data-seat="upperLeft"],
.botSeats[data-bot-count="4"] .seat[data-seat="upperRight"],
.botSeats[data-bot-count="5"] .seat[data-seat="upperLeft"],
.botSeats[data-bot-count="5"] .seat[data-seat="upperRight"]{ top: 10px; }
.botSeats[data-bot-count="4"] .seat[data-seat="left"],
.botSeats[data-bot-count="4"] .seat[data-seat="right"],
.botSeats[data-bot-count="5"] .seat[data-seat="left"],
.botSeats[data-bot-count="5"] .seat[data-seat="right"]{ top: 64%; }

/* Center piles */
.centerPiles{
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -52%);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.centerPiles .pile{
  width: auto;
  height: auto;
  padding: 9px 6px 6px;
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  position:relative;
}

.centerPiles .pile.hasStack::before{
  content:"";
  position:absolute;
  top:9px;
  left:50%;
  height:clamp(88px, 24vw, 106px);
  aspect-ratio:2 / 3;
  border-radius:5px;
  background:rgb(102,116,110);
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
}

html.goldEdgeDeck .centerPiles .pile.hasStack::before{
  background:
    linear-gradient(90deg, #72551b 0%, #b88a2e 22%, #e1be67 48%, #8b681f 74%, #b88a2e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(86,58,10,.72),
    inset -2px -2px 3px rgba(73,48,8,.38),
    inset 2px 2px 2px rgba(255,229,153,.34);
}

/* Reduce pile card size to better match player cards */
.centerPiles .cardBack,
.centerPiles .cardFace{
  height: clamp(88px, 24vw, 106px);
  aspect-ratio: 2 / 3;
  width: auto;
  border-radius: 5px;
  position:relative;
  z-index:1;
  --pile-card-x:0px;
  --pile-card-y:0px;
  transform:translate(var(--pile-card-x), var(--pile-card-y));
}

.centerPiles .pile.stack3 > .cardBack,
.centerPiles .pile.stack3 > .cardFace{
  --pile-card-x:-2px;
  --pile-card-y:-3px;
}

.centerPiles .pile.stack11 > .cardBack,
.centerPiles .pile.stack11 > .cardFace{
  --pile-card-x:-3px;
  --pile-card-y:-4px;
}

.centerPiles .pile.stack21 > .cardBack,
.centerPiles .pile.stack21 > .cardFace{
  --pile-card-x:-3px;
  --pile-card-y:-5px;
}

.centerPiles .pile.stack31 > .cardBack,
.centerPiles .pile.stack31 > .cardFace{
  --pile-card-x:-3px;
  --pile-card-y:-6px;
}
.centerPiles .cardFace{ font-size: 28px; }
.centerPiles .cardInner{ padding: 9px; }

.centerPiles #stockPile > .cardBack .stockTearMark{
  position: absolute;
  width: 9px;
  height: 1.5px;
  background: linear-gradient(
      90deg,
      rgba(32,18,11,.95) 0%,
      rgba(24,14,9,.88) 35%,
      rgba(40,24,15,0.50) 70%,
      transparent 100%
  );
  z-index:2;
  pointer-events: none;
}

.centerPiles #stockPile > .cardBack .stockTearMarkLeft{
  transform-origin:left center;
}

.centerPiles #stockPile > .cardBack .stockTearMarkRight{
  transform-origin:left center;
}

.centerPiles #stockPile > .cardBack .stockTearMarkBottom{
  transform-origin:center center;
}



.centerPiles .cardFace .corner .rank{ font-size: 16px; }
.centerPiles .cardFace .corner .suit{ font-size: 16px; }
.centerPiles .cardFace .centerSuit{ font-size: 36px; }

/* Opponent speech bubble, dynamically placed beside the speaking seat. */
.dialogueConnector{
  position:absolute;
  z-index:32;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms ease;
}

.dialogueConnector path{
  fill:#ead6a9;
  stroke:none;
  vector-effect:non-scaling-stroke;
}

.dialogueConnector .dialogueConnectorTailOutline{
  fill:none;
  stroke:rgba(91,57,29,.78);
  stroke-width:1.25;
  stroke-linejoin:round;
  filter:none;
}

.dialogueConnector.dialogueOpen{
  opacity:1;
}

.dialogueConnector.dialogueExit{
  opacity:0;
}

.dialogueOverlay{
  position:absolute;
  z-index:31;
  width:max-content;
  max-width:66.666%;
  transform:translateY(5px) scale(.985);
  opacity:0;
  pointer-events:auto;
  cursor:pointer;
  outline:none;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));
  transition:opacity 180ms ease, transform 220ms ease;
}

.dialogueOverlay.dialogueOpen{
  opacity:1;
  transform:translateY(0) scale(1);
}

.dialogueOverlay.dialogueExit{
  opacity:0;
  transform:translateY(-3px) scale(.99);
}

.dialogueOverlay:focus-visible{
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.28)) drop-shadow(0 0 5px rgba(234,214,169,.76));
}

.dialogueBubble{
  display:block;
  min-height:42px;
  padding:9px 12px;
  border:1px solid rgba(91,57,29,.78);
  border-radius:12px;
  background:#ead6a9;
  color:#30271f;
  font-family:Arial, Helvetica, sans-serif;
  font-size:clamp(12px, 1.8vw, 14px);
  font-weight:650;
  line-height:1.25;
  text-align:left;
  overflow-wrap:anywhere;
}

/* Turn prompt overlaps the lower edge of the human player panel. */
.tablePrompt{
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 20px);
  box-sizing: border-box;
  text-align: center;
  font-size: 12.5px;
  padding: 7px 10px;
}

/* Human header (Your Hand) */
.handSeat{
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding-right: 10px;
}

.playerPanel{
  position: relative;
  overflow: visible;
  padding: 10px;
  background: rgba(0,0,0,.10);
}

.playerPanel.endHandPanelLocked{
  box-sizing:border-box;
  height:var(--end-hand-panel-height);
}

.playerPanelHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.yourHandTitle{
  font-weight: 700;
  font-size: 13px;
}

.finalTurnChip{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.36);
  background: rgba(226,176,74,.94);
  color: rgba(242,245,243,.96);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
  pointer-events: none;
  z-index: 20;
}

@media (max-width: 560px){
  .tableSurface{
    height: clamp(220px, 40vh, 360px);
  }

  .seatBox{
    width: clamp(72px, 26vw, 108px);
    padding: 7px 8px;
    min-height: 78px;
  }

  .seatName{ max-width: 86px; }

  .seat[data-seat="left"], .seat[data-seat="right"]{
    top: 58%;
  }

  .botSeats[data-bot-count="2"] .seat[data-seat="left"],
  .botSeats[data-bot-count="2"] .seat[data-seat="right"]{
    top: 10px;
    transform: none;
  }

  .seat[data-seat="upperLeft"], .seat[data-seat="upperRight"]{
    top: 18%;
  }

  .botSeats[data-bot-count="4"] .seat[data-seat="left"],
  .botSeats[data-bot-count="4"] .seat[data-seat="right"],
  .botSeats[data-bot-count="5"] .seat[data-seat="left"],
  .botSeats[data-bot-count="5"] .seat[data-seat="right"]{
    top: 58%;
  }

  .centerPiles{
    transform: translate(-50%, -56%);
    gap: 2px;
  }

  .dialogueOverlay{
    max-width:66.666%;
  }

  .dialogueBubble{
    min-height:40px;
    padding:7px 9px;
    font-size:12px;
  }

  .tablePrompt{
    bottom:-15px;
  }
}

@media (prefers-reduced-motion: reduce){
  .dialogueOverlay{
    transition:opacity 120ms linear;
  }

  .dialogueConnector{
    transition:opacity 120ms linear;
  }

  .seat.speaking .seatBox{
    animation:none;
    background:rgba(226,176,74,.18);
    box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 16px rgba(226,176,74,.34);
  }
}



    .knockCheck{
      display:inline-block;
      margin-right:6px;
      font-weight:900;
      color: rgba(226,176,74,.95);
    }

    .challengeBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      margin-left:6px;
      padding:1px 7px;
      border-radius:999px;
      font-size:10px;
      font-weight:900;
      letter-spacing:.06em;
      border:1px solid rgba(255,255,255,.34);
      background: rgba(20,27,24,.92);
      color: rgba(242,245,243,.98);
      vertical-align:middle;
      box-shadow: 0 5px 12px rgba(0,0,0,.30);
    }
    .challengeBadge.call{
      border-color: rgba(126,232,155,.72);
      background: rgba(54,150,88,.94);
    }
    .challengeBadge.fold{
      border-color: rgba(246,132,132,.72);
      background: rgba(174,58,58,.94);
    }
    .challengeBadge.knock{
      border-color: rgba(241,208,130,.76);
      background: rgba(187,136,45,.94);
    }
    .pile{
      width:120px;
      height:160px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      position:relative;
    }
    .pile .label{font-size:12px; color:rgba(242,245,243,.8)}

    .pile.clickable{ cursor: pointer; }
    .pile.clickable:hover .cardFace,
    .pile.clickable:hover .cardBack,
    .pile.clickable:active .cardFace,
    .pile.clickable:active .cardBack,
    .pile.clickable.isPressed .cardFace,
    .pile.clickable.isPressed .cardBack,
    .pile.clickable .cardFace.pilePressed,
    .pile.clickable .cardBack.pilePressed{
      transform:translate(var(--pile-card-x, 0px), calc(var(--pile-card-y, 0px) - 2px));
    }

    .pile .label.action{ font-weight:800; color:rgba(242,245,243,.96); }

    .cardFace{
      height:118px;
      aspect-ratio: 2 / 3;
      width: auto;
      border-radius:5px;
      background: var(--card);
      color: var(--ink);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:28px;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
      user-select:none;
      transition: transform .08s ease;
    }
    .cardBack{
      height:118px;
      aspect-ratio: 2 / 3;
      width: auto;
      border-radius:5px;
      background: linear-gradient(135deg, rgba(226,176,74,.95), rgba(226,176,74,.35));
      border:0;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
      transition: transform .08s ease;
    }

    .cardBack{
      background-image: var(--selected-card-back-image, url("images/cards/card_back.png")), url("images/cards/card_back.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }

    .aceSpadesCustom{
      position:relative;
      width:100%;
      height:100%;
      border-radius:inherit;
      overflow:hidden;
      background:var(--card);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .aceSpadesImg{
      width:100%;
      height:100%;
      display:block;
      object-fit:contain;
      background:var(--card);
      image-rendering:auto;
      -ms-interpolation-mode:bicubic;
    }

    .aceSpadesFallback{
      display:none;
      width:100%;
      height:100%;
    }

    .aceSpadesCustom.aceMissing .aceSpadesImg{
      display:none;
    }

    .aceSpadesCustom.aceMissing .aceSpadesFallback{
      display:flex;
    }

    /* Empty discard indicator */
    #discardTop.empty{
      background: rgba(255,255,255,.06);
      border: 2px dashed rgba(255,255,255,.28);
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
    }
    #discardTop.empty::before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:8px;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 2px 8px);
      opacity:.35;
      pointer-events:none;
    }
    #discardTop.empty::after{
      content:"EMPTY";
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight: 1000;
      letter-spacing: 3px;
      font-size: 14px;
      color: rgba(242,245,243,.62);
      transform: rotate(-12deg);
      text-shadow: 0 1px 0 rgba(0,0,0,.22);
      pointer-events:none;
    }

    /* Card face layout (corner rank+suit + big center suit) */
    .handCard, .cardFace, .miniCard{
      position:relative;
      display:block;               /* override flex-centering */
      padding:0;
      overflow:hidden;
    }

    /* inner layout */
    .cardInner{
      position:absolute;
      inset:0;
      padding:10px;
    }

    /* Joker artwork (image-based face) */
    .jokerArt{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
    }
    .jokerImg{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }

    .corner{
      position:absolute;
      display:flex;
      flex-direction:column;
      gap:2px;
      font-weight:900;
      line-height:1;
      z-index: 3;
    }
    .corner.tl{ top:5px; left:5px; align-items:flex-start; }
    .corner.br{
      bottom:5px; right:5px;
      transform: rotate(180deg);
      transform-origin:center;
      align-items:flex-start;
    }

    .corner .rank{ font-size:16px; }
    .corner .suit{ font-size:16px; margin-top:-1px; }

    .centerSuit{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      font-size:36px;
      font-weight:900;
      opacity:.92;
    }

    /* size tuning for discard pile */
    .cardFace .corner .rank{ font-size:18px; }
    .cardFace .corner .suit{ font-size:16px; }
    .cardFace .centerSuit{ font-size:42px; }

    /* size tuning for showdown mini cards */
    .miniCard .cardInner{ padding:6px; }
    .miniCard .corner.tl{ top:4px; left:4px; }
    .miniCard .corner.br{ bottom:4px; right:4px; }
    .miniCard .corner .rank{ font-size:11px; }
    .miniCard .corner .suit{ font-size:10px; }
    .miniCard .centerSuit{ font-size:24px; }

    .centerArt{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index: 1;
    }
    .centerArtImg{
      width:90%;
      height:90%;
      object-fit:contain;
      display:block;
      opacity:.96;
    }

    /* hide center art on mini cards (matches your miniCard centerSuit behavior) */
    .miniCard .centerArt{ display:none; }

    .btnRow{display:flex; gap:10px; flex-wrap:wrap}
    .installBtn{
      padding: 6px 10px;
      font-size: 12px;
      border-radius: 10px;
      white-space: nowrap;
      display: none;
    }
    .iosA2HS{
      display: none;
      line-height: 1.4;
      text-align: right;
      max-width: 520px;
    }
    .scoreLifetime{
      margin-top: 10px;
    }
    .scoreLifetime .recordSection{
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;
      background:rgba(255,255,255,.055);
      padding:9px 10px;
    }
    .scoreLifetime .recordSection + .recordSection{ margin-top:8px; }
    .gunfighterRecordEntry{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .gunfighterRecordEntry .recordSectionTitle{ margin-bottom:3px; }
    .recordEntryDescription{
      color:rgba(242,245,243,.68);
      font-size:12px;
      line-height:1.35;
    }
    .gunfighterRecordEntry button{ flex:0 0 auto; }
    .gunfighterRecordCard{ width:min(620px, 100%); }
    .gunfighterOpponents{ display:grid; gap:8px; }
    .gunfighterOpponent{
      border:1px solid rgba(255,255,255,.10);
      border-radius:8px;
      background:rgba(0,0,0,.12);
      padding:8px;
    }
    .gunfighterOpponentName{
      color:rgba(226,176,74,.96);
      font-size:14px;
      font-weight:950;
      margin-bottom:5px;
    }
    .scoreLifetime .recordSectionTitle{
      font-size:11px;
      font-weight:950;
      letter-spacing:1.2px;
      text-transform:uppercase;
      color:rgba(226,176,74,.94);
      margin-bottom:6px;
    }
    .recordRows{
      display:grid;
      grid-template-columns:1fr;
      gap:2px 14px;
    }
    .recordRows.twoCol{
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .recordRow{
      display:flex;
      justify-content:space-between;
      gap:10px;
      min-width:0;
      padding:3px 0;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .recordRow:last-child{ border-bottom:0; }
    .recordLabel{
      min-width:0;
      color:rgba(242,245,243,.72);
      font-size:11px;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.7px;
    }
    .recordValue{
      color:rgba(242,245,243,.97);
      font-size:13px;
      font-weight:950;
      text-align:right;
      white-space:nowrap;
    }
    .recordHands{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .recordHand{
      border:1px solid rgba(255,255,255,.10);
      border-radius:8px;
      background:rgba(0,0,0,.12);
      padding:7px;
      min-width:0;
    }
    .recordHandTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:5px;
    }
    .recordCards{
      display:flex;
      gap:8px;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:1px;
    }
    .recordCardGroup{
      display:flex;
      gap:2px;
      flex:0 0 auto;
    }
    .recordCardGroup.dead{
      padding-left:7px;
      border-left:1px solid rgba(255,255,255,.14);
    }
    .miniCard.record{
      height:40px;
      aspect-ratio: 2 / 3;
      width:auto;
      border-radius:3px;
      box-shadow:0 4px 8px rgba(0,0,0,.22);
    }
    .miniCard.record .cardInner{ padding:3px; }
    .miniCard.record .corner.tl{ top:3px; left:3px; }
    .miniCard.record .corner.br{ display:none; }
    .miniCard.record .corner .rank{ font-size:8px; }
    .miniCard.record .corner .suit{ font-size:7px; }
    .miniCard.record .centerSuit,
    .miniCard.record .centerArt{ display:none; }
    .recordEmpty{
      color:rgba(242,245,243,.62);
      font-size:12px;
      font-weight:750;
    }
    .handStats{ margin-top:6px; }
    @media (max-width: 560px){
      .playerPanelHeader{
        align-items:flex-start;
      }

      .playerPanelHeader .btnRow{
        margin-left:auto;
        position:relative;
        justify-content:flex-end;
        align-items:flex-start;
        gap:8px;
      }

      .playerPanelHeader #palmBtn{
        position:absolute;
        top:calc(100% + 8px);
        right:0;
        z-index:5;
      }

      .recordRows.twoCol,
      .recordHands{
        grid-template-columns:1fr;
      }
      .recordValue{
        white-space:normal;
      }
    }
    .isHidden{display:none !important;}

    .appLoading{
      position:fixed;
      inset:0;
      z-index:10000;
      display:grid;
      place-items:center;
      padding:24px;
      background:#111;
      color:#f2e2b8;
      text-align:center;
    }

    .appLoadingText{
      font-size:clamp(28px, 8vw, 48px);
      font-weight:1000;
      line-height:1;
      letter-spacing:.12em;
      text-shadow:0 3px 0 #000, 0 0 18px rgba(226,176,74,.34);
    }

    .appView{
      width:100%;
      min-height:0;
    }

    .townHome,
    .trailList{
      min-height:0;
    }

    body.townViewActive .townHome,
    body.trailViewActive .trailList{
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .campaignError{
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(226,90,90,.42);
      background: rgba(80,20,20,.72);
      color: rgba(255,238,238,.96);
      font-weight: 800;
      box-shadow: 0 12px 24px rgba(0,0,0,.22);
    }

    .campaignPanel{
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      background:
        radial-gradient(700px 240px at 18% 20%, rgba(226,176,74,.10), rgba(226,176,74,0) 62%),
        rgba(16,38,29,.68);
      box-shadow: 0 12px 30px rgba(0,0,0,.22);
      padding: 14px;
    }

    .townPanel,
    .trailPanel{
      margin-bottom: 12px;
    }

    .trailPanelHeader{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
    }

    .trailMapOpenBtn{
      flex:0 0 auto;
      padding: 7px 11px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 1.1px;
    }

    .townHero{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      flex-wrap:wrap;
    }

    .townProgress{
      margin-top:12px;
      padding:9px 11px;
      border:1px solid rgba(255,255,255,.11);
      border-radius:10px;
      background:rgba(0,0,0,.16);
    }

    .townProgress.partial{
      border-color:rgba(226,176,74,.34);
      background:rgba(226,176,74,.09);
      box-shadow:inset 0 1px 0 rgba(255,236,180,.08);
    }

    .townProgress.complete{
      border-color:rgba(226,176,74,.42);
      background:rgba(226,176,74,.15);
    }

    .townProgressHeader{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
      color:rgba(242,245,243,.7);
      font-size:10px;
      font-weight:900;
      letter-spacing:.9px;
      text-transform:uppercase;
    }

    .townProgressHeader strong{
      color:rgba(255,244,215,.94);
      font-size:11px;
      letter-spacing:.25px;
      text-transform:none;
    }

    .townProgressSegments{
      display:flex;
      gap:5px;
      margin-top:7px;
    }

    .townProgressSegment{
      flex:1 1 0;
      min-width:8px;
      height:8px;
      position:relative;
      overflow:visible;
      border:1px solid rgba(255,255,255,.13);
      border-radius:999px;
      background:rgba(255,255,255,.08);
      box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
    }

    .townProgressSegment.won{
      border-color:rgba(255,226,151,.74);
      background:linear-gradient(180deg, #edc96f, #b77c25);
      box-shadow:0 0 8px rgba(226,176,74,.18), inset 0 1px 0 rgba(255,247,213,.48);
    }

    .townProgressSegment.final::after{
      content:"★";
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -51%);
      color:rgba(255,247,220,.74);
      font-size:7px;
      line-height:1;
      text-shadow:0 1px 2px rgba(0,0,0,.66);
    }

    .townProgressSegment.final.remaining::after{
      color:rgba(242,245,243,.32);
    }

    .campaignKicker{
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(226,176,74,.95);
    }

    .campaignPanel h1,
    .townCard h2,
    .tableCard h2{
      margin: 2px 0 0;
      line-height: 1.05;
    }

    .campaignPanel h1{
      font-size: clamp(28px, 8vw, 48px);
      letter-spacing: 0;
    }

    .townCard h2,
    .tableCard h2{
      font-size: 17px;
      letter-spacing: 0;
    }

    .townState{
      margin-top: 2px;
      color: rgba(242,245,243,.78);
      font-size: 13px;
      font-weight: 800;
    }

    .campaignLead{
      margin: 12px 0 0;
      color: rgba(242,245,243,.86);
      line-height: 1.45;
      font-size: 14px;
      max-height: 140px;
      overflow:hidden;
      transition: max-height 180ms ease, opacity 180ms ease, margin-top 180ms ease;
    }

    .townHome.townTablesScrolled .townPanel .campaignLead{
      max-height:0;
      opacity:0;
      margin-top:0;
    }

    .trailList.trailTownsScrolled .trailPanel .campaignLead{
      max-height:0;
      opacity:0;
      margin-top:0;
    }

    .townHeroActions{
      display:flex;
      align-items:flex-start;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }

    .tableGrid,
    .townList{
      display:grid;
      gap:10px;
    }

    .tableGrid{
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .townTablesSection,
    .trailTownsSection{
      position:relative;
      flex:1 1 auto;
      min-height:160px;
      overflow:hidden;
    }

    .townTablesScroller,
    .trailTownsScroller{
      height:100%;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      -ms-overflow-style:none;
      scroll-padding-top: 34px;
      padding: 2px 2px 34px;
    }

    .townTablesScroller::-webkit-scrollbar,
    .trailTownsScroller::-webkit-scrollbar{
      display:none;
    }

    .townTablesScroller:focus,
    .trailTownsScroller:focus{
      outline: 2px solid rgba(226,176,74,.34);
      outline-offset: 2px;
      border-radius: 12px;
    }

    .scrollIndicator{
      position:absolute;
      left:50%;
      z-index:2;
      width:48px;
      height:28px;
      min-height:0;
      padding:0;
      border:1px solid rgba(255,255,255,.12);
      transform:translateX(-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      opacity:0;
      cursor:pointer;
      touch-action: manipulation;
      pointer-events:none;
      color:rgba(255,244,220,.96);
      box-shadow:0 8px 18px rgba(0,0,0,.28);
      transition:opacity 140ms ease, background-color 140ms ease, transform 140ms ease;
    }

    .scrollIndicator.top{
      top:2px;
      background:linear-gradient(180deg, rgba(15,42,31,.96), rgba(15,42,31,.54));
      border-radius:0 0 999px 999px;
    }

    .scrollIndicator.bottom{
      bottom:2px;
      background:linear-gradient(0deg, rgba(15,42,31,.96), rgba(15,42,31,.54));
      border-radius:999px 999px 0 0;
    }

    .townHome.townTablesCanScrollUp .scrollIndicator.top,
    .townHome.townTablesCanScrollDown .scrollIndicator.bottom,
    .trailList.trailTownsCanScrollUp .scrollIndicator.top,
    .trailList.trailTownsCanScrollDown .scrollIndicator.bottom{
      opacity:1;
      pointer-events:auto;
    }

    .scrollIndicator:disabled{
      opacity:0;
      cursor:default;
      pointer-events:none;
    }

    @media (hover:hover){
      .scrollIndicator:hover{
        background-color:rgba(226,176,74,.18);
      }
    }

    .scrollIndicator:focus-visible{
      outline:2px solid rgba(226,176,74,.72);
      outline-offset:2px;
    }

    .scrollIndicator:active{
      transform:translateX(-50%) scale(.96);
    }

    .scrollIndicator.isPressed{
      transform:translateX(-50%) scale(.94);
      box-shadow:0 4px 10px rgba(0,0,0,.22);
    }

    .scrollIndicator.top.isPressed .townChevronStack,
    .scrollIndicator.top:active .townChevronStack{
      transform:translateY(-1px);
    }

    .scrollIndicator.bottom.isPressed .townChevronStack,
    .scrollIndicator.bottom:active .townChevronStack{
      transform:translateY(1px);
    }

    .townChevronStack{
      display:grid;
      gap:0;
      place-items:center;
    }

    .townChevronStack span{
      width:10px;
      height:10px;
      border-right:3px solid currentColor;
      border-bottom:3px solid currentColor;
      filter:drop-shadow(0 2px 3px rgba(0,0,0,.58));
    }

    .townChevronStack span + span{
      margin-top:-3px;
    }

    .scrollIndicator.top .townChevronStack span{
      transform:rotate(225deg);
    }

    .scrollIndicator.bottom .townChevronStack span{
      transform:rotate(45deg);
    }

    .tableCard,
    .townCard{
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      background: rgba(0,0,0,.18);
      box-shadow: 0 12px 24px rgba(0,0,0,.18);
      padding: 12px;
    }

    .tableCard{
      display:flex;
      flex-direction:column;
      min-height: 100%;
    }

    .tableCard.playable,
    .tableCard.viewable,
    .townCard.playable{
      cursor:pointer;
      touch-action: manipulation;
      transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    }

    @media (hover:hover){
      .tableCard.playable:hover,
      .tableCard.viewable:hover,
      .townCard.playable:hover{
        border-color: rgba(226,176,74,.34);
        background: rgba(226,176,74,.08);
        transform: translateY(-1px);
      }
    }

    .tableCard.playable:active,
    .tableCard.viewable:active,
    .tableCard.playable.isPressed,
    .tableCard.viewable.isPressed,
    .townCard.playable:active,
    .townCard.playable.isPressed{
      transform: translateY(1px);
      box-shadow: 0 8px 16px rgba(0,0,0,.16);
      background: rgba(226,176,74,.12);
    }

    .tableCard.won{
      border-color: rgba(226,176,74,.30);
      background: rgba(226,176,74,.08);
    }

    .tableCard.locked{
      opacity: .72;
    }

    .tableCardTop{
      display:block;
    }

    .tableCard p,
    .townCard p{
      margin: 8px 0 0;
      color: rgba(242,245,243,.80);
      font-size: 13px;
      line-height: 1.38;
    }

    .campaignMeta,
    .trailMessage{
      margin-top: 10px;
      color: rgba(242,245,243,.72);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.35;
    }

    .tableStateReason{
      color: rgba(226,176,74,.78);
    }

    .tableCardFooter{
      display:flex;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .townCardFooter{
      display:flex;
      justify-content:center;
      align-items:center;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,.08);
    }

    .tablePlayWord,
    .trailActionWord{
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 1.6px;
      color: rgba(226,176,74,.96);
      text-align:center;
      text-transform: uppercase;
    }

    .tablePlayWord.locked,
    .tablePlayWord.won{
      color: rgba(242,245,243,.62);
    }

    .statusBadge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height: 24px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: rgba(242,245,243,.92);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: .8px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .statusBadge.available,
    .statusBadge.current{
      border-color: rgba(100,209,140,.34);
      background: rgba(100,209,140,.14);
    }

    .statusBadge.partial{
      border-color:rgba(226,176,74,.48);
      background:rgba(226,176,74,.19);
      color:#f3d991;
    }

    .statusBadge.won,
    .statusBadge.completed{
      border-color: rgba(226,176,74,.38);
      background: rgba(226,176,74,.16);
    }

    .statusBadge.completed{
      border-color: rgba(128,83,20,.42);
      background: #f1d28d;
      color: #3d270b;
    }

    .statusBadge.final{
      border-color: rgba(226,90,90,.35);
      background: rgba(226,90,90,.14);
    }

    .statusBadge.locked{
      opacity: .68;
    }

    .townCard{
      position:relative;
      display:flex;
      flex-direction:column;
      min-height:100%;
    }

    .townCard > .statusBadge{
      position:absolute;
      top:12px;
      right:12px;
      z-index:1;
    }

    .townCardMain{
      min-width:0;
      padding-right: 96px;
    }

    .townCard.partial{
      border-color:rgba(226,176,74,.3);
      background:
        radial-gradient(320px 120px at 12% 8%, rgba(226,176,74,.12), transparent 70%),
        rgba(0,0,0,.18);
    }

    .townCardProgress{
      margin-top:7px;
      color:#e2b04a;
      font-size:11px;
      font-weight:900;
      letter-spacing:.35px;
      text-transform:uppercase;
    }

    .townCard.locked{
      opacity: .76;
    }

    @media (max-width: 560px){
      .tableGrid{
        grid-template-columns: 1fr;
      }
    }

    .trailMapOverlay{
      position:fixed;
      inset:0;
      z-index:2100;
      overflow:hidden;
      background:#101b17;
      color:#f2f5f3;
    }

    .trailMapViewport{
      position:absolute;
      inset:0;
      overflow:hidden;
      cursor:grab;
      touch-action:none;
      user-select:none;
    }

    .trailMapViewport.dragging{
      cursor:grabbing;
    }

    .trailMapLayer{
      position:absolute;
      left:0;
      top:0;
      width:2508px;
      height:2508px;
      transform-origin: 0 0;
      will-change: transform;
    }

    .trailMapImage,
    .trailMapRoutes,
    .trailMapMarkers{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
    }

    .trailMapImage{
      display:block;
      object-fit:contain;
      pointer-events:none;
      user-select:none;
      z-index:0;
    }

    .trailMapRoutes{
      overflow:visible;
      pointer-events:none;
      z-index:1;
    }

    .trailMapRoutePath{
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      pointer-events:none;
    }

    .trailMapRouteShadow{
      display:none;
    }

    .trailMapRoutePath{
      stroke:rgba(57,255,20,.50);
      stroke-width:8;
    }

    .trailMapMarkers{
      pointer-events:none;
      z-index:2;
    }

    .trailMapTown{
      position:absolute;
      left:var(--map-x);
      top:var(--map-y);
      width:0;
      height:0;
      pointer-events:auto;
      z-index:1;
    }

    .trailMapTown.completed{
      z-index:2;
    }

    .trailMapTown.current{
      z-index:3;
    }

    .trailMapTown.available{
      z-index:2;
    }

    .trailMapTownButton{
      position:absolute;
      left:0;
      top:0;
      width:24px;
      height:24px;
      min-height:0;
      padding:0;
      border-radius:999px;
      border:2px solid rgba(255,255,255,.74);
      display:flex;
      align-items:center;
      justify-content:center;
      transform:translate(-50%, -50%);
      font-size:13px;
      font-weight:1000;
      line-height:1;
      box-shadow:0 6px 14px rgba(0,0,0,.45);
      z-index:2;
    }

    .trailMapTownButton:active{
      transform:translate(-50%, -50%);
    }

    .trailMapTown.completed .trailMapTownButton{
      background:rgba(226,176,74,.97);
      color:rgba(46,28,16,.98);
      border-color:rgba(255,236,180,.92);
    }

    .trailMapTown.current .trailMapTownButton{
      background:#2187ff;
      color:#fff;
      border-color:rgba(208,232,255,.95);
      box-shadow:
        0 0 0 4px rgba(33,135,255,.24),
        0 8px 18px rgba(0,0,0,.48);
      animation: currentTownPulse 1.8s ease-in-out infinite;
    }

    .trailMapTown.available .trailMapTownButton{
      background:rgba(64,154,98,.96);
      color:#fff;
      border-color:rgba(205,245,218,.9);
      box-shadow:0 6px 14px rgba(0,0,0,.45);
    }

    .trailMapTown.locked .trailMapTownButton{
      background:rgba(93,88,78,.92);
      color:rgba(242,245,243,.78);
      border-color:rgba(218,206,180,.44);
      box-shadow:0 6px 12px rgba(0,0,0,.38);
    }

    .trailMapTown.available.partial .trailMapTownButton{
      background:conic-gradient(
        from -90deg,
        rgba(226,176,74,.98) 0 var(--town-progress),
        rgba(64,154,98,.96) var(--town-progress) 100%
      );
    }

    .trailMapTown.current.partial .trailMapTownButton{
      background:conic-gradient(
        from -90deg,
        rgba(226,176,74,.98) 0 var(--town-progress),
        #2187ff var(--town-progress) 100%
      );
    }

    @keyframes currentTownPulse{
      0%, 100%{ box-shadow:0 0 0 4px rgba(33,135,255,.22), 0 8px 18px rgba(0,0,0,.48); }
      50%{ box-shadow:0 0 0 9px rgba(33,135,255,.08), 0 8px 18px rgba(0,0,0,.48); }
    }

    .trailMapTownLabel{
      position:absolute;
      max-width:160px;
      min-height:0;
      padding:4px 7px;
      border-radius:7px;
      border:1px solid rgba(255,255,255,.22);
      background:rgba(15,31,24,.82);
      color:rgba(242,245,243,.96);
      box-shadow:0 5px 12px rgba(0,0,0,.32);
      font-size:12px;
      font-weight:900;
      line-height:1.05;
      white-space:nowrap;
      text-align:center;
      z-index:1;
    }

    .trailMapTown.locked .trailMapTownLabel{
      color:rgba(242,245,243,.62);
      background:rgba(35,34,31,.72);
      border-color:rgba(255,255,255,.12);
    }

    .trailMapTownLabel.labelPos0{ left:0; bottom:15px; transform:translateX(-50%); }
    .trailMapTownLabel.labelPos1{ left:9px; bottom:9px; }
    .trailMapTownLabel.labelPos2{ left:15px; top:0; transform:translateY(-50%); }
    .trailMapTownLabel.labelPos3{ left:9px; top:9px; }
    .trailMapTownLabel.labelPos4{ left:0; top:15px; transform:translateX(-50%); }
    .trailMapTownLabel.labelPos5{ right:9px; top:9px; }
    .trailMapTownLabel.labelPos6{ right:15px; top:0; transform:translateY(-50%); }
    .trailMapTownLabel.labelPos7{ right:9px; bottom:9px; }

    .trailMapTownLabel:active{ transform:none; }
    .trailMapTownLabel.labelPos0:active{ transform:translateX(-50%); }
    .trailMapTownLabel.labelPos2:active{ transform:translateY(-50%); }
    .trailMapTownLabel.labelPos4:active{ transform:translateX(-50%); }
    .trailMapTownLabel.labelPos6:active{ transform:translateY(-50%); }

    .trailMapCloseBtn,
    .trailMapCurrentBtn{
      position:absolute;
      z-index:2140;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      box-shadow:0 10px 22px rgba(0,0,0,.38);
    }

    .trailMapCloseBtn{
      top:max(14px, env(safe-area-inset-top));
      right:max(14px, env(safe-area-inset-right));
      width:42px;
      height:42px;
      min-height:0;
      padding:0;
      background:rgba(18,21,20,.86);
      border:1px solid rgba(255,255,255,.22);
      color:#fff;
      font-size:28px;
      line-height:1;
      font-weight:900;
    }

    .trailMapCurrentBtn{
      right:max(18px, env(safe-area-inset-right));
      bottom:max(18px, env(safe-area-inset-bottom));
      width:42px;
      height:42px;
      min-height:0;
      padding:0;
      background:#2187ff;
      border:3px solid rgba(220,239,255,.96);
    }

    .trailMapCurrentBtn::before{
      content:"";
      width:14px;
      height:14px;
      border-radius:999px;
      background:#fff;
      box-shadow:0 0 0 5px rgba(255,255,255,.18);
    }

    .trailMapLockedCard{
      position:absolute;
      left:50%;
      top:50%;
      z-index:2130;
      width:min(360px, calc(100vw - 28px));
      transform:translate(-50%, -50%);
      border:1px solid rgba(46,28,16,.38);
      border-radius:14px;
      background:linear-gradient(180deg, rgba(240,227,200,.98), rgba(214,189,146,.98));
      color:rgba(46,28,16,.95);
      box-shadow:0 18px 42px rgba(0,0,0,.48);
      padding:14px 16px 16px;
    }

    .trailMapLockedCard h2{
      margin:3px 36px 0 0;
      color:rgba(46,28,16,.94);
      font-size:22px;
      font-weight:950;
      letter-spacing:0;
      line-height:1.05;
    }

    .trailMapLockedState{
      margin-top:3px;
      color:rgba(46,28,16,.70);
      font-size:13px;
      font-weight:850;
    }

    .trailMapLockedCard p{
      margin:10px 0 0;
      color:rgba(46,28,16,.82);
      font-size:14px;
      line-height:1.42;
      font-weight:650;
    }

    .trailMapLockedMessage{
      margin-top:12px;
      padding-top:10px;
      border-top:1px solid rgba(46,28,16,.18);
      color:rgba(46,28,16,.78);
      font-size:13px;
      font-weight:900;
      line-height:1.3;
    }

    .trailMapLockedCloseBtn{
      position:absolute;
      top:10px;
      right:10px;
      width:30px;
      height:30px;
      min-height:0;
      padding:0;
      border-radius:999px;
      background:rgba(46,28,16,.90);
      color:rgba(245,236,212,1);
      border-color:rgba(0,0,0,.22);
      font-size:20px;
      line-height:1;
    }

    @media (max-width: 560px){
      .trailPanelHeader{
        align-items:flex-start;
      }

      .trailMapTownLabel{
        max-width:130px;
        font-size:11px;
      }

      .trailMapCloseBtn,
      .trailMapCurrentBtn{
        width:40px;
        height:40px;
      }
    }

    .handFocus{
      display:flex;
      align-items:center;
      gap:10px;
      margin-top:8px;
      flex-wrap:wrap;
    }
    .handFocusLabel{
      font-size:12px;
      font-weight:800;
      opacity:.92;
    }
    .handFocusSeg{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
.handFocusSeg{
  display:inline-flex;
  align-items:stretch;
  gap:0;
  column-gap:0;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:999px;
  overflow:hidden;
  font-size:0;              /* kills any whitespace gap if it ever renders inline */
}

.handFocusSeg .handFocusBtn{
  margin:0 !important;      /* overrides any global button margins */
  border:0;
  border-radius:0 !important; /* prevents rounded inner corners */
  padding:8px 12px;
  font-size:12px;           /* restore text size after font-size:0 on wrapper */
  line-height:1;
  background:transparent;
  display:block;
}

.handFocusBtn.primary{background: rgba(226,176,74,.20); border-color: rgba(226,176,74,.45)}

.handFocusSeg .handFocusBtn + .handFocusBtn{
  border-left:1px solid rgba(0,0,0,0.18);
}

/* Optional: improve tap feel */
.handFocusBtn:active{
  transform: translateY(1px);
}
	
    button{
      background: rgba(255,255,255,.08);
      color:#f2f5f3;
      border:1px solid rgba(255,255,255,.16);
      border-radius:12px;
      padding:10px 12px;
      font-weight:600;
      cursor:pointer;
      transition: transform .06s ease, background .12s ease;
    }
    button:hover{background: rgba(255,255,255,.12)}
    button:active{transform: translateY(1px)}
    button:disabled{opacity:.45; cursor:not-allowed}
    .primary{background: rgba(226,176,74,.20); border-color: rgba(226,176,74,.45)}
    .danger{background: rgba(226,90,90,.18); border-color: rgba(226,90,90,.35)}
    select{
      background: rgba(0,0,0,.18);
      color:#f2f5f3;
      border:1px solid rgba(255,255,255,.16);
      border-radius:12px;
      padding:10px 12px;
      font-weight:700;
      cursor:pointer;
    }
    select:focus{outline:2px solid rgba(226,176,74,.45); outline-offset:2px}

    .status{
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.14);
      font-size:13px;
      color:rgba(242,245,243,.88);
      min-height:54px;
      max-height:170px;
      overflow:auto;
      white-space:pre-line;
    }

    .turnPrompt{
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(226,176,74,.12);
      color:rgba(242,245,243,.96);
      font-size:13px;
      font-weight:800;
      letter-spacing:.2px;
      user-select:none;
    }

    .scoreTable{width:100%; border-collapse:collapse; font-size:12px;}
    .scoreTable th,.scoreTable td{padding:7px 6px; border-bottom:1px solid rgba(255,255,255,.10); text-align:left}
    .scoreTable th{color:rgba(242,245,243,.82); font-weight:700}
    .scorePlayerLine{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
    .scoreTitleChip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:1px 7px;
      border-radius:999px;
      font-size:10px;
      font-weight:900;
      letter-spacing:.05em;
      border:1px solid rgba(226,176,74,.38);
      background: rgba(226,176,74,.14);
      color: rgba(242,245,243,.96);
      white-space:nowrap;
    }
    .lifetimePlayerLine{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
      margin: -2px 0 10px;
      font-weight: 900;
      letter-spacing:.2px;
    }

    .handArea{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:center;
      padding:6px;
      min-height:160px;
    }

    .handArea.endHandAnimating{
      pointer-events:none;
      overflow:visible;
    }

    .handArea.endHandAnimating .handPending,
    .handArea.endHandAnimating .handGroupLabel{
      visibility:hidden;
    }

    .handArea.endHandAnimating .handCard{
      transition:none !important;
    }

    .endHandPresentation{
      --end-hand-gap:30px;
      box-sizing:border-box;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      gap:var(--end-hand-gap);
      width:100%;
      min-height:128px;
      padding:8px 0 0;
      overflow:visible;
    }

    .endHandFan{
      position:relative;
      flex:0 0 auto;
      min-width:0;
      overflow:visible;
    }

    .endHandFan .handCard{
      position:absolute;
      top:0;
      margin:0 !important;
      transform-origin:50% 88%;
      pointer-events:none;
      will-change:transform, opacity;
    }

    /* Hand layout: pending card on right (reserved slot), best group then deadwood group */
    .handLayout{
      width:100%;
      max-width: 940px;
      display:grid;
      grid-template-columns: max-content max-content 69px;
      grid-template-areas: "best dead pending";
      align-items:center;
      justify-content:start;
      column-gap:24px;
      row-gap:12px;
    }

    .handLayout.noPendingCard{
      grid-template-columns: max-content max-content;
      grid-template-areas: "best dead";
    }

        .handPending{
      grid-area: pending;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      align-items:center;
      min-height:120px;
      gap:6px;
    }

    .pendingLabel{
      font-weight:900;
      font-size:12px;
      color: rgba(242,245,243,.86);
      letter-spacing:.3px;
      text-transform:uppercase;
      user-select:none;
      line-height:1;
    }

    .pendingSlot{
      height:104px;
      aspect-ratio: 2 / 3;
      width:calc(104px * 2 / 3);
      flex:0 0 calc(104px * 2 / 3);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .handPending.isEmpty .pendingSlot{
      border:1px dashed rgba(255,255,255,.18);
      border-radius:12px;
      background: rgba(0,0,0,.10);
    }


    .handRow{
      display:flex;
      gap:8px;
      justify-content:left;
      align-items:flex-start;
      flex-wrap:nowrap;
      min-width:0;
      max-width:100%;
    }

    .handLayout.noPendingCard .handRow{
      gap:8px;
    }

    .bestRow{ grid-area: best; }
    .deadRow{ grid-area: dead; }

    @media (max-width: 940px) and (min-width: 661px){
      .handLayout{
        grid-template-columns: max-content max-content 69px;
        column-gap:22px;
        row-gap:8px;
      }

      .handRow{
        gap:0;
      }

      .handRow .handCard{
        position:relative;
      }

      .handRow .handCard:not(:first-child){
        margin-left:-16px;
      }

      .handLayout.noPendingCard .handRow .handCard:not(:first-child){
        margin-left:-16px;
      }

      .handRow.cardCount-6 .handCard:not(:first-child){
        margin-left:-24px;
      }

      .handLayout.noPendingCard .handRow.cardCount-6 .handCard:not(:first-child){
        margin-left:-24px;
      }

      .handRow.cardCount-7 .handCard:not(:first-child){
        margin-left:-32px;
      }

      .handLayout.noPendingCard .handRow.cardCount-7 .handCard:not(:first-child){
        margin-left:-32px;
      }

      .handRow.cardCount-8 .handCard:not(:first-child){
        margin-left:-36px;
      }

      .handLayout.noPendingCard .handRow.cardCount-8 .handCard:not(:first-child){
        margin-left:-36px;
      }

      .handArea.dealing .handRow .handCard:not(:first-child){
        margin-left:-35px;
      }
    }

    @media (max-width: 660px){
      .handLayout{
        grid-template-columns: 1fr 69px;
        column-gap:8px;
        row-gap:6px;
        grid-template-rows: auto auto;
        grid-template-areas:
          "best pending"
          "dead pending";
        align-items:start;
      }

      .handLayout.noPendingCard{
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
          "best"
          "dead";
      }

      /* keep the pending card centered vertically between best & dead rows */
      .handPending{
        grid-row: 1 / span 2;
        align-self:center;
      }

      .handRow{
        justify-content:flex-start;
        flex-wrap:nowrap;
        gap: 0;                 /* no spacing; overlap handles it */
      }

      .deadRow .handRow{
        min-height:104px;
      }

      /* Overlap cards so more fit per row */

      /* Narrow 2:3 cards need less overlap to keep ranks readable. */
      .handRow .handCard{
        position: relative;
      }
      .handRow .handCard:not(:first-child){
        margin-left: -26px; 
      }

      .handRow.cardCount-6 .handCard:not(:first-child){
        margin-left:-34px;
      }

      .handRow.cardCount-7 .handCard:not(:first-child){
        margin-left:-39px;
      }

      .handRow.cardCount-8 .handCard:not(:first-child){
        margin-left:-43px;
      }

      .handArea.dealing .handRow .handCard:not(:first-child){
        margin-left:-43px;
      }

    }

    @media (max-width: 380px){
      .handRow.cardCount-6 .handCard:not(:first-child){
        margin-left:-37px;
      }

      .handRow.cardCount-7 .handCard:not(:first-child),
      .handRow.cardCount-8 .handCard:not(:first-child){
        margin-left:-47px;
      }

      .handArea.dealing .handRow .handCard:not(:first-child){
        margin-left:-48px;
      }
    }

    @media (max-width: 340px){
      .handRow.cardCount-6 .handCard:not(:first-child),
      .handRow.cardCount-7 .handCard:not(:first-child),
      .handRow.cardCount-8 .handCard:not(:first-child){
        margin-left:-50px;
      }

      .handArea.dealing .handRow .handCard:not(:first-child){
        margin-left:-50px;
      }
    }
   
    .handGroupLabel{
      font-weight:900;
      font-size:12px;
      color: rgba(242,245,243,.92);
      letter-spacing:.2px;
      margin-bottom:6px;
    }
    .handGroup{
      display:flex;
      flex-direction:column;
      gap:0;
      min-width:0;
    }

    .handCard{
      position: relative;
      height:104px;
      aspect-ratio: 2 / 3;
      width:auto;
      flex:0 0 calc(104px * 2 / 3);
      border-radius:5px;
      background: var(--card);
      color: var(--ink);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:22px;
      box-shadow: 0 8px 18px rgba(0,0,0,.28);
      border:2px solid rgba(0,0,0,.10);
      cursor:pointer;
      touch-action: manipulation;
      user-select:none;
      transition:
        transform .14s cubic-bezier(.2,.8,.2,1),
        border-color .12s ease,
        box-shadow .12s ease,
        outline-color .12s ease;
      will-change: transform;
    }
    
    .handArea:not(.active) .handCard { cursor: default; }

    .handCard{ z-index: var(--z, 0); }
    
    /* only animate hover lift on real hover devices */
    @media (hover:hover) and (pointer:fine){
      .handArea.acting .handCard:hover,
      .handArea.hoverReady .handCard:hover,
      .handArea.hoverReady .handCard.hoverHeld{
        transform: translateY(-6px);
        z-index: 20;
      }

      .handArea.acting .handCard.pending:hover,
      .handArea.hoverReady .handCard.pending:hover,
      .handArea.hoverReady .handCard.pending.hoverHeld{
        transform: rotate(var(--pendingRot)) translateY(-6px);
      }

    }

    .handCard.pending{
      --pendingRot: 6deg;
      z-index: 30;
      outline: 3px solid rgba(226,176,74,.35);
      outline-offset: -3px;
      transform: rotate(var(--pendingRot));
    }

    .handCard.pendingGhost{
      visibility:hidden;
      pointer-events:none;
      outline:0;
      box-shadow:none;
    }

    .handArea.acting .handCard:active,
    .handArea.hoverReady .handCard:active,
    .handArea.acting .handCard.isPressed,
    .handArea.hoverReady .handCard.isPressed{
      box-shadow:
        0 9px 18px rgba(0,0,0,.28),
        0 0 0 2px rgba(226,176,74,.42);
    }

    .handArea.acting .handCard.pending:active,
    .handArea.hoverReady .handCard.pending:active,
    .handArea.acting .handCard.pending.isPressed,
    .handArea.hoverReady .handCard.pending.isPressed{
      transform: rotate(var(--pendingRot)) translateY(-6px);
    }

    .handCard.dealHidden{
      opacity: 0;
      pointer-events: none;
    }

    /* Best 5 vs Deadwood glow outline */
    .handCard.best{
      border-color: rgba(100,209,140,.85);
      box-shadow:
        0 0 0 2px rgba(100,209,140,.28),
        0 0 14px rgba(100,209,140,.18),
        0 8px 18px rgba(0,0,0,.28);
    }
    .handCard.deadwood{
      border-color: rgba(226,90,90,.85);
      box-shadow:
        0 0 0 2px rgba(226,90,90,.26),
        0 0 14px rgba(226,90,90,.16),
        0 8px 18px rgba(0,0,0,.28);
    }

    .handArea.acting .handCard.isPressed,
    .handArea.hoverReady .handCard.isPressed{
      box-shadow:
        0 9px 18px rgba(0,0,0,.28),
        0 0 0 2px rgba(226,176,74,.42);
    }

    /* Card flight animation overlay (hand <-> piles) */
    .flyCard{
      position: fixed !important;
      left: 0;
      top: 0;
      margin: 0 !important;
      pointer-events: none !important;
      cursor: default !important;
      z-index: 9500;
      transform-origin: center center;
      transition: transform 260ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce){
      .flyCard{ transition: none !important; }
    }


    .divider{height:1px; background:rgba(255,255,255,.12); margin:6px 0}

    .modal{
      position:fixed;
      inset:0;
      z-index: 9999;
      background: rgba(5,10,8,.50);
      display:none;
      align-items:center;
      justify-content:center;
      padding:18px;
    }
    .modal.open{display:flex}
    #installPromptModal,
    #updatePromptModal{
      z-index:10020;
    }
    .modalCard{
      width:min(980px, 100%);
      max-height: 86vh;
      overflow:auto;
      position: relative;
      background: #10261d;
      border:1px solid rgba(255,255,255,.16);
      border-radius:16px;
      box-shadow: 0 18px 50px rgba(0,0,0,.55);
      padding:14px;
    }
    .modalHeader{display:flex; align-items:center; justify-content:space-between; gap:12px;}
    .modalHeader h3{margin:0; font-size:15px;}
    .rulesCard .modalHeader{
      position:sticky;
      top:-14px;
      z-index:2;
      margin:-14px -14px 0;
      padding:14px;
      background:#10261d;
      border-bottom:1px solid rgba(255,255,255,.12);
    }
    .rulesCard .modalHeader + .divider{
      display:none;
    }
    .grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px;}

    .profileCard{
      width:min(460px, 100%);
    }

    .newsModalCard{
      width:min(720px, 100%);
      max-height:min(88vh, 820px);
      max-height:min(88dvh, 820px);
      padding:clamp(16px, 3vw, 28px);
      color:#271d13;
      background:
        repeating-linear-gradient(0deg, rgba(74,53,31,.028) 0 1px, transparent 1px 4px),
        #eee2c5;
      border:2px solid #5b4228;
      border-radius:8px;
      box-shadow:0 20px 60px rgba(0,0,0,.68), inset 0 0 34px rgba(92,64,31,.12);
    }

    .newsModalHeader{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      min-height:38px;
    }

    .newsModalHeader .newsBackBtn{
      margin-right:auto;
    }

    .newsModalHeader button{
      color:#352313;
      background:rgba(93,65,35,.08);
      border-color:rgba(72,48,25,.42);
    }

    .newsModalHeader button:hover{
      background:rgba(93,65,35,.16);
    }

    .newsMasthead{
      padding:8px 6px 7px;
      color:#21170e;
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(25px, 5.4vw, 43px);
      font-weight:900;
      line-height:1;
      text-align:center;
      letter-spacing:-1.2px;
    }

    .newsMastheadRule{
      height:2px;
      margin-top:8px;
      background:#392719;
    }

    .newsMastheadRuleDouble{
      height:5px;
      margin:0 0 18px;
      border-top:1px solid #392719;
      border-bottom:3px solid #392719;
      background:transparent;
    }

    .newsList{
      display:grid;
      gap:10px;
    }

    .newsListItem{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:5px;
      padding:14px;
      color:#2b2015;
      text-align:left;
      background:rgba(255,251,235,.34);
      border:1px solid rgba(72,48,25,.34);
      border-radius:4px;
    }

    .newsListItem:hover{
      background:rgba(255,251,235,.7);
    }

    .newsListItemHeading{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .newsListItemTitle{
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(18px, 4vw, 24px);
      font-weight:900;
      line-height:1.1;
    }

    .newsItemNew{
      flex:0 0 auto;
      padding:3px 7px;
      color:#f8efd8;
      background:#7d241e;
      border-radius:2px;
      font-size:9px;
      font-weight:1000;
      letter-spacing:.8px;
    }

    .newsListItemDate,
    .newsArticleDate{
      color:#705a41;
      font-family:Georgia, "Times New Roman", serif;
      font-size:12px;
      font-style:italic;
    }

    .newsListItemSummary{
      display:-webkit-box;
      overflow:hidden;
      color:#4c3b29;
      font-family:Georgia, "Times New Roman", serif;
      font-size:14px;
      line-height:1.4;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
    }

    .newsEmpty{
      padding:28px 12px;
      color:#59442e;
      font-family:Georgia, "Times New Roman", serif;
      font-size:17px;
      font-style:italic;
      text-align:center;
    }

    .newsArticle{
      width:min(620px, 100%);
      margin:0 auto;
      text-align:left;
      -webkit-user-select:text;
      user-select:text;
    }

    .newsArticleKicker{
      margin-bottom:7px;
      color:#7d241e;
      font-family:Georgia, "Times New Roman", serif;
      font-size:13px;
      font-weight:900;
      letter-spacing:1.5px;
      text-transform:uppercase;
    }

    .newsArticleTitle{
      margin:0 0 7px;
      color:#21170e;
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(29px, 7vw, 48px);
      font-weight:900;
      line-height:1.02;
      letter-spacing:-.8px;
    }

    .newsArticleImageWrap{
      margin:18px 0;
    }

    .newsArticleImage{
      display:block;
      width:100%;
      max-height:360px;
      object-fit:cover;
      border:1px solid rgba(57,39,25,.5);
      filter:sepia(.12) contrast(1.03);
    }

    .newsArticleBody{
      color:#302317;
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(16px, 3.5vw, 19px);
      line-height:1.58;
    }

    .newsArticleBody p{
      margin:16px 0 0;
    }

    @media (max-width: 540px){
      .newsModalCard{
        max-height:92vh;
        max-height:92dvh;
        padding:14px;
      }

      .newsMasthead{
        letter-spacing:-.5px;
      }

      .newsArticleImageWrap{
        margin:14px 0;
      }
    }

    .profileSummary{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }

    .profileNameBox{
      width:100%;
      padding:12px;
      border-radius:12px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
    }

    .profileNameRow{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .profileName{
      min-width:0;
      color:rgba(242,245,243,.98);
      font-size:24px;
      line-height:1.05;
      font-weight:950;
      overflow-wrap:anywhere;
    }

    .profileRank{
      flex:0 0 auto;
      min-width:0;
      padding:3px 9px;
      cursor:pointer;
    }

    .profileRank:focus-visible,
    .profileNameEdit:focus-visible{
      outline:2px solid rgba(226,176,74,.58);
      outline-offset:3px;
    }

    .profileNameEdit{
      flex:0 0 auto;
      width:34px;
      height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:7px;
      border-radius:9px;
      background:transparent;
      border-color:transparent;
      color:rgba(242,245,243,.78);
    }

    .profileNameEdit svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }

    .tokenChoice{
      margin-top:14px;
    }

    .tokenChoiceProfile{
      padding-top:14px;
      border-top:1px solid rgba(255,255,255,.12);
    }

    .tokenChoiceTitle{
      margin-bottom:8px;
      font-size:12px;
      font-weight:950;
      letter-spacing:.5px;
      text-transform:uppercase;
    }

    .tokenChoiceProfile .tokenChoiceTitle{
      color:rgba(242,245,243,.82);
    }

    .tokenPicker{
      display:grid;
      grid-template-columns:repeat(8, minmax(0, 1fr));
      gap:6px;
    }

    .tokenOption{
      min-width:0;
      aspect-ratio:1;
      padding:3px;
      border-radius:10px;
      font-size:24px;
      line-height:1;
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }

    .tokenChoiceProfile .tokenOption{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
    }

    .tokenChoiceProfile .tokenOption:hover{
      background:rgba(255,255,255,.12);
    }

    .tokenChoiceProfile .tokenOption.selected{
      border-color:rgba(226,176,74,.85);
      background:rgba(226,176,74,.20);
      box-shadow:0 0 0 2px rgba(226,176,74,.18);
    }

    .tokenChoiceHint{
      margin-top:7px;
      font-size:13px;
      line-height:1.3;
      text-align:center;
      opacity:.68;
    }

    .profileEditForm{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto auto;
      align-items:center;
      gap:8px;
    }

    .profileEditForm input{
      width:100%;
      min-width:0;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:#f2f5f3;
      padding:11px 12px;
      font-size:16px;
      font-weight:800;
      outline:none;
    }

    .profileEditForm .welcomeNameError{
      grid-column:1 / -1;
    }

    .profileEditForm input:focus{
      border-color:rgba(226,176,74,.55);
      box-shadow:0 0 0 3px rgba(226,176,74,.14);
    }

    .profileInstall,
    .profileCardBack,
    .profileCloudBackup,
    .profileReset{
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid rgba(255,255,255,.12);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .profileCardBack{
      align-items:flex-start;
    }

    .profileCardBack button{
      flex:0 0 auto;
    }

    .cardBackModalCard{
      width:min(620px, 100%);
      max-height:94vh;
    }

    .cardBackGrid{
      margin-top:12px;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(78px, 1fr));
      gap:8px;
    }

    .cardBackOption{
      min-width:0;
      padding:6px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.055);
      color:rgba(242,245,243,.88);
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:5px;
      text-align:center;
      cursor:pointer;
    }

    .cardBackOption:disabled{
      cursor:not-allowed;
      color:rgba(242,245,243,.58);
    }

    .cardBackOption:not(:disabled):hover{
      border-color:rgba(226,176,74,.42);
      background:rgba(226,176,74,.10);
    }

    .cardBackOption.selected{
      border-color:rgba(226,176,74,.86);
      background:rgba(226,176,74,.16);
      box-shadow:0 0 0 2px rgba(226,176,74,.16);
    }

    .cardBackPreview{
      position:relative;
      width:100%;
      aspect-ratio:2 / 3;
      border-radius:5px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(0,0,0,.16);
      box-shadow:0 8px 18px rgba(0,0,0,.26);
    }

    .cardBackPreview img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }

    .cardBackPreview.mysteryBack{
      background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.13), rgba(255,255,255,0) 42%),
        linear-gradient(145deg, #777, #3f4342);
      border-color:rgba(255,255,255,.22);
    }

    .cardBackMysteryMark{
      position:absolute;
      left:50%;
      top:42%;
      transform:translate(-50%, -50%) rotate(-5deg);
      color:rgba(235,235,229,.68);
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(80px, 23.3vw, 130px);
      font-weight:900;
      line-height:1;
      text-shadow:
        0 2px 0 rgba(0,0,0,.38),
        0 0 12px rgba(255,255,255,.10);
    }

    .cardBackPreview.missingImage::before{
      content:"Image needed";
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px;
      background:repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, rgba(255,255,255,.02) 2px 9px);
      color:rgba(242,245,243,.70);
      font-size:12px;
      line-height:1.15;
      font-weight:950;
      text-transform:uppercase;
    }

    .cardBackOption.locked .cardBackPreview img{
      filter:grayscale(.9) brightness(.58);
      opacity:.68;
    }

    .cardBackLock{
      position:absolute;
      left:50%;
      top:50%;
      width:30px;
      height:30px;
      border-radius:999px;
      transform:translate(-50%, -50%);
      background:rgba(7,10,9,.78);
      border:1px solid rgba(255,255,255,.32);
      display:none;
      align-items:center;
      justify-content:center;
      font-size:15px;
      box-shadow:0 7px 16px rgba(0,0,0,.42);
    }

    .cardBackOption.locked .cardBackLock{
      display:flex;
    }

    .cardBackSelectedMark{
      position:absolute;
      right:4px;
      top:4px;
      min-width:20px;
      height:20px;
      padding:0 5px;
      border-radius:999px;
      background:rgba(226,176,74,.95);
      color:rgba(46,28,16,.96);
      display:none;
      align-items:center;
      justify-content:center;
      font-size:12px;
      font-weight:1000;
      box-shadow:0 5px 12px rgba(0,0,0,.35);
    }

    .cardBackOption.selected .cardBackSelectedMark{
      display:flex;
    }

    .cardBackName{
      font-size:11px;
      line-height:1.12;
      font-weight:950;
      overflow-wrap:anywhere;
    }

    .cardBackYear{
      color:rgba(242,245,243,.62);
      font-size:10px;
      line-height:1;
      font-weight:850;
    }

    @media (max-width: 420px){
      .cardBackModalCard{
        padding:10px;
      }

      .cardBackGrid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap:6px;
      }

      .cardBackOption{
        padding:5px;
        gap:4px;
      }

      .cardBackName{
        font-size:10px;
      }
    }

    .cardBackPreviewModal{
      z-index:10030;
    }

    .cardBackPreviewCard{
      width:min(520px, 100%);
    }

    .cardBackPreviewPair{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      align-items:start;
      margin-top:12px;
    }

    .cardBackLargePreview{
      margin:0;
      min-width:0;
    }

    .cardBackLargePreview img{
      width:100%;
      aspect-ratio:2 / 3;
      display:block;
      object-fit:cover;
      border-radius:15px;
      border:0;
      background:rgba(255,255,255,.92);
      box-shadow:0 10px 24px rgba(0,0,0,.34);
    }

    .cardBackLargePreview img.missingImage{
      object-fit:contain;
      padding:10px;
      background:repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,.035) 2px 10px);
    }

    .cardBackLargePreview figcaption{
      margin-top:6px;
      color:rgba(242,245,243,.62);
      font-size:11px;
      line-height:1;
      font-weight:900;
      text-align:center;
      text-transform:uppercase;
    }

    .cardBackPreviewMeta{
      margin-top:12px;
      color:rgba(226,176,74,.88);
      font-size:12px;
      font-weight:900;
      text-align:center;
    }

    .cardBackPreviewDescription{
      margin:10px 0 0;
      color:rgba(242,245,243,.82);
      font-size:13px;
      line-height:1.42;
      font-weight:650;
    }

    .cardBackPreviewActions{
      justify-content:flex-end;
      margin-top:14px;
    }

    .profileInstall{
      align-items:flex-start;
    }

    .profileCloudBackup{
      align-items:flex-start;
    }

    .cloudBackupLast{
      margin-top:6px;
      color:rgba(226,176,74,.86);
      font-weight:800;
    }

    .cloudBackupActions{
      flex:0 0 auto;
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:126px;
    }

    .cloudBackupActions button{
      width:100%;
      white-space:normal;
    }

    .cloudBackupCard{
      width:min(440px, 100%);
    }

    .cloudBackupModalText{
      margin:12px 0 14px;
      color:rgba(242,245,243,.86);
      line-height:1.45;
      font-weight:650;
    }

    .cloudBackupModalBody{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .cloudBackupField{
      display:flex;
      flex-direction:column;
      gap:7px;
    }

    .cloudBackupField label{
      font-size:12px;
      font-weight:900;
      color:rgba(242,245,243,.82);
      letter-spacing:.3px;
      text-transform:uppercase;
    }

    .cloudBackupField input{
      width:100%;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:#f2f5f3;
      padding:11px 12px;
      font-size:16px;
      font-weight:800;
      outline:none;
    }

    .cloudBackupField input:focus{
      border-color:rgba(226,176,74,.55);
      box-shadow:0 0 0 3px rgba(226,176,74,.14);
    }

    .cloudBackupSummary{
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;
      background:rgba(255,255,255,.06);
      overflow:hidden;
    }

    .cloudBackupSummaryRow{
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:9px 10px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(242,245,243,.88);
      font-size:13px;
      font-weight:750;
    }

    .cloudBackupSummaryRow:first-child{
      border-top:0;
    }

    .cloudBackupSummaryRow span:first-child{
      color:rgba(242,245,243,.62);
      font-weight:900;
    }

    .cloudBackupSummaryRow span:last-child{
      text-align:right;
      overflow-wrap:anywhere;
    }

    .cloudBackupWarning{
      border:1px solid rgba(226,90,90,.32);
      border-radius:12px;
      background:rgba(226,90,90,.10);
      padding:10px;
      color:rgba(242,245,243,.88);
      font-size:13px;
      line-height:1.4;
      font-weight:750;
    }

    .cloudBackupModalActions{
      justify-content:flex-end;
      margin-top:14px;
    }

    @media (max-width: 560px){
      .profileCloudBackup{
        align-items:stretch;
        flex-direction:column;
      }

      .cloudBackupActions{
        width:100%;
      }
    }

    .profileToggle{
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid rgba(255,255,255,.12);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }

    .switchToggle{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:950;
      letter-spacing:.35px;
      text-transform:uppercase;
      color:rgba(242,245,243,.9);
      cursor:pointer;
    }

    .switchToggle input{
      width:20px;
      height:20px;
      accent-color:#e2b04a;
      cursor:pointer;
    }

    .profileResetTitle{
      color:rgba(242,245,243,.92);
      font-size:12px;
      font-weight:950;
      letter-spacing:.35px;
      text-transform:uppercase;
    }

    .profileResetConfirm{
      margin-top:12px;
      padding:12px;
      border-radius:12px;
      border:1px solid rgba(226,90,90,.32);
      background:rgba(226,90,90,.10);
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .shortcutPromptCard,
    .updatePromptCard{
      width:min(420px, 100%);
    }

    .shortcutPromptCard p,
    .updatePromptCard p{
      margin:12px 0 14px;
      color:rgba(242,245,243,.86);
      line-height:1.45;
      font-weight:650;
    }

    .shortcutPromptCard .btnRow,
    .updatePromptCard .btnRow{
      justify-content:flex-end;
    }

    .rankPosterModal{
      z-index:10030;
    }

    .rankPosterCard{
      width:min(430px, calc(100% - 18px));
      max-height:calc(100vh - 22px);
      background:rgba(28,18,11,.94);
      border-color:rgba(82,52,30,.58);
      padding:14px;
    }

    .rankPosterPaper{
      position:relative;
      overflow:hidden;
      border:3px double #3d2413;
      border-radius:5px;
      background:
        radial-gradient(circle at 16% 20%, rgba(80,45,18,.08), transparent 18%),
        radial-gradient(circle at 82% 16%, rgba(80,45,18,.07), transparent 16%),
        radial-gradient(circle at 72% 82%, rgba(80,45,18,.09), transparent 22%),
        radial-gradient(circle at 22% 76%, rgba(92,55,24,.07), transparent 20%),
        linear-gradient(135deg, #f2dfb2 0%, #e8cf96 54%, #d8b879 100%);
      color:#372112;
      box-shadow:
        inset 0 0 0 1px rgba(61,36,19,.35),
        inset 0 0 18px rgba(55,28,10,.30),
        inset 0 0 70px rgba(55,28,10,.16),
        0 8px 18px rgba(0,0,0,.48);
      padding:18px 15px 15px;
      text-align:center;
    }

    .rankPosterPaper::before,
    .rankPosterPaper::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
    }

    .rankPosterPaper::before{
      opacity:.20;
      background:
        repeating-linear-gradient(
          0deg,
          rgba(58,35,17,.08) 0px,
          rgba(58,35,17,.08) 1px,
          transparent 1px,
          transparent 4px
        ),
        repeating-linear-gradient(
          90deg,
          rgba(255,248,220,.08) 0px,
          rgba(255,248,220,.08) 1px,
          transparent 1px,
          transparent 5px
        );
      mix-blend-mode:multiply;
    }

    .rankPosterPaper::after{
      background:
        radial-gradient(circle at top left, rgba(54,25,8,.24), transparent 30%),
        radial-gradient(circle at top right, rgba(54,25,8,.20), transparent 28%),
        radial-gradient(circle at bottom left, rgba(54,25,8,.22), transparent 32%),
        radial-gradient(circle at bottom right, rgba(54,25,8,.26), transparent 34%);
      mix-blend-mode:multiply;
    }

    .rankPosterPaper > *{
      position:relative;
      z-index:1;
    }

    .rankPosterTack{
      position:absolute;
      top:9px;
      width:10px;
      height:10px;
      border-radius:50%;
      background:
        radial-gradient(circle at 35% 35%, rgba(250,221,155,.44), transparent 28%),
        radial-gradient(circle, rgba(61,36,19,.50), rgba(36,20,10,.42) 58%, transparent 62%);
      box-shadow:0 1px 0 rgba(255,237,185,.14), inset 0 1px 2px rgba(16,8,3,.40);
      opacity:.78;
      z-index:2;
    }

    .rankPosterTackLeft{ left:18px; }
    .rankPosterTackRight{ right:18px; }

    .rankPosterWanted{
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(42px, 14vw, 68px);
      line-height:.86;
      font-weight:950;
      letter-spacing:.05em;
      text-transform:uppercase;
      color:#2b170b;
      text-shadow:1px 1px 0 rgba(90,55,25,.18);
    }

    .rankPosterCharge{
      margin-top:10px;
      font-size:12px;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.045em;
      color:#3a2110;
      text-shadow:.5px .5px 0 rgba(90,55,25,.14);
    }

    .rankPosterReward{
      width:min(230px, 86%);
      margin:12px auto 0;
      padding:5px 8px 6px;
      border-top:2px solid rgba(61,36,19,.72);
      border-bottom:2px solid rgba(61,36,19,.72);
      color:#301a0c;
      text-transform:uppercase;
      text-shadow:.5px .5px 0 rgba(90,55,25,.16);
    }

    .rankPosterRewardLabel{
      font-family:Georgia, "Times New Roman", serif;
      font-size:17px;
      line-height:1;
      font-weight:950;
      letter-spacing:.12em;
    }

    .rankPosterTokenImage{
      display:block;
      width:min(150px, 46vw);
      aspect-ratio:1;
      object-fit:contain;
      margin:10px auto 0;
      filter:sepia(.26) contrast(1.06) saturate(.92)
        drop-shadow(0 2px 1px rgba(61,36,19,.28));
    }

    .rankPosterTokenImage[hidden]{
      display:none;
    }

    .rankPosterPrefix{
      margin-top:12px;
      font-family:Georgia, "Times New Roman", serif;
      font-size:18px;
      font-weight:800;
      color:#372112;
      text-shadow:.5px .5px 0 rgba(90,55,25,.16);
    }

    .rankPosterRank{
      margin-top:2px;
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(30px, 9vw, 46px);
      line-height:.98;
      font-weight:950;
      text-transform:uppercase;
      letter-spacing:.02em;
      overflow-wrap:anywhere;
      color:#29170b;
      text-shadow:1px 1px 0 rgba(90,55,25,.18);
    }

    .rankPosterPlayer{
      margin:14px auto 0;
      max-width:100%;
      font-family:Georgia, "Times New Roman", serif;
      font-size:clamp(23px, 7vw, 34px);
      line-height:1.02;
      font-weight:900;
      overflow-wrap:anywhere;
      color:#2f1b0d;
      text-shadow:.75px .75px 0 rgba(90,55,25,.16);
    }

    .rankPosterDivider{
      margin:10px auto 7px;
      font-family:Georgia, "Times New Roman", serif;
      font-size:18px;
      line-height:1;
      font-weight:900;
      color:#3d2413;
      letter-spacing:.05em;
      opacity:.92;
    }

    .rankPosterLocation{
      margin-top:7px;
      font-size:13px;
      font-weight:850;
      line-height:1.25;
      text-transform:uppercase;
      color:#382010;
      overflow-wrap:anywhere;
      text-shadow:.5px .5px 0 rgba(90,55,25,.14);
    }

    .rankPosterDate{
      margin-top:11px;
      font-size:12px;
      font-weight:900;
      letter-spacing:.03em;
      text-transform:uppercase;
      color:#321c0d;
      text-shadow:.5px .5px 0 rgba(90,55,25,.14);
    }

    .rankPosterFlavor{
      margin:14px 4px 14px;
      color:rgba(245,236,212,.92);
      font-size:14px;
      line-height:1.42;
      font-style:italic;
      font-weight:750;
      text-align:center;
    }

    .rankPosterCard .btnRow{
      justify-content:center;
    }

    .rankPosterContinue{
      min-width:120px;
    }

    .rankPosterModal.posterBlowAway .rankPosterCard{
      animation:wantedPosterBlowAway 640ms cubic-bezier(.24,.74,.26,1) forwards;
      transform-origin:52% 42%;
      pointer-events:none;
    }

    @keyframes wantedPosterBlowAway{
      0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:1; }
      18%{ transform:translate3d(-8px,3px,0) rotate(-2deg); opacity:1; }
      36%{ transform:translate3d(10px,-5px,0) rotate(3deg); opacity:1; }
      100%{ transform:translate3d(115vw,-30vh,0) rotate(18deg); opacity:0; }
    }

    .deckUnlockModal{
      z-index:10025;
    }

    .deckUnlockWind{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:.24;
      background:
        linear-gradient(100deg, transparent 0 18%, rgba(226,176,74,.18) 20%, transparent 24% 52%, rgba(226,176,74,.12) 56%, transparent 61%),
        linear-gradient(104deg, transparent 0 36%, rgba(255,255,255,.08) 38%, transparent 42% 100%);
      transform:translateX(-18%);
      animation:deckUnlockDust 1100ms ease-out forwards;
    }

    .deckUnlockCard{
      width:min(520px, 100%);
      overflow:visible;
      background:
        radial-gradient(circle at 50% 8%, rgba(226,176,74,.18), transparent 42%),
        linear-gradient(180deg, rgba(31,23,16,.98), rgba(14,31,24,.98));
      border-color:rgba(226,176,74,.30);
    }

    .deckUnlockStage{
      display:grid;
      grid-template-columns:minmax(112px, 180px) 1fr;
      gap:18px;
      align-items:center;
    }

    .deckUnlockCardImageWrap{
      justify-self:center;
      width:min(170px, 36vw);
      aspect-ratio:2 / 3;
      transform:translate3d(-80vw,-18vh,0) rotate(-24deg);
      animation:deckUnlockCardToss 760ms cubic-bezier(.17,.84,.24,1.05) 120ms forwards;
      filter:drop-shadow(0 18px 20px rgba(0,0,0,.46));
    }

    .deckUnlockCardImage{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      border-radius:5px;
      border:2px solid rgba(255,245,210,.62);
      background:rgba(240,227,200,.95);
      box-shadow:inset 0 0 0 1px rgba(46,28,16,.18);
    }

    .deckUnlockCardImage.missingImage{
      object-fit:contain;
      padding:10px;
      background:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 2px, rgba(255,255,255,.04) 2px 10px);
    }

    .deckUnlockLabel{
      min-width:0;
      padding:14px;
      border-radius:10px;
      border:1px solid rgba(46,28,16,.28);
      background:linear-gradient(180deg, rgba(240,227,200,.96), rgba(214,189,146,.96));
      color:rgba(46,28,16,.95);
      box-shadow:0 10px 24px rgba(0,0,0,.26);
      opacity:0;
      transform:translateY(10px) rotate(-1deg);
      animation:deckUnlockLabelStamp 360ms ease-out 620ms forwards;
    }

    .deckUnlockKicker{
      font-size:12px;
      font-weight:1000;
      letter-spacing:1px;
      text-transform:uppercase;
      color:rgba(122,32,22,.92);
    }

    .deckUnlockName{
      margin-top:4px;
      font-size:26px;
      line-height:1.02;
      font-weight:1000;
      overflow-wrap:anywhere;
    }

    .deckUnlockMessage{
      margin-top:9px;
      color:rgba(46,28,16,.74);
      font-size:13px;
      line-height:1.35;
      font-weight:750;
    }

    .deckUnlockActions{
      justify-content:flex-end;
      margin-top:16px;
      opacity:0;
      animation:deckUnlockActionsIn 240ms ease-out 850ms forwards;
    }

    @keyframes deckUnlockDust{
      from{ transform:translateX(-24%); opacity:.28; }
      to{ transform:translateX(18%); opacity:0; }
    }

    @keyframes deckUnlockCardToss{
      0%{ transform:translate3d(-80vw,-18vh,0) rotate(-24deg) scale(.92); }
      72%{ transform:translate3d(0,0,0) rotate(7deg) scale(1.02); }
      86%{ transform:translate3d(0,-7px,0) rotate(4deg) scale(1); }
      100%{ transform:translate3d(0,0,0) rotate(5deg) scale(1); }
    }

    @keyframes deckUnlockLabelStamp{
      0%{ opacity:0; transform:translateY(12px) scale(.97) rotate(-1deg); }
      70%{ opacity:1; transform:translateY(0) scale(1.025) rotate(-1deg); }
      100%{ opacity:1; transform:translateY(0) scale(1) rotate(-1deg); }
    }

    @keyframes deckUnlockActionsIn{
      from{ opacity:0; transform:translateY(6px); }
      to{ opacity:1; transform:translateY(0); }
    }

    @media (max-width: 520px){
      .deckUnlockCard{
        max-height:92vh;
      }

      .deckUnlockStage{
        grid-template-columns:1fr;
        gap:12px;
      }

      .deckUnlockCardImageWrap{
        width:min(150px, 44vw);
      }

      .deckUnlockLabel{
        text-align:center;
      }

      .deckUnlockName{
        font-size:23px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .rankPosterModal.posterBlowAway .rankPosterCard,
      .deckUnlockWind,
      .deckUnlockCardImageWrap,
      .deckUnlockLabel,
      .deckUnlockActions{
        animation:none;
      }

      .rankPosterModal.posterBlowAway .rankPosterCard{
        opacity:0;
      }

      .deckUnlockCardImageWrap,
      .deckUnlockLabel,
      .deckUnlockActions{
        opacity:1;
        transform:none;
      }
    }

    @media (max-width: 420px){
      .rankPosterCard{
        width:calc(100% - 10px);
        padding:10px;
      }

      .rankPosterPaper{
        padding:16px 11px 13px;
      }

      .rankPosterReward{
        margin-top:10px;
      }

      .rankPosterTokenImage{
        width:min(128px, 44vw);
        margin-top:8px;
      }

      .rankPosterPrefix{
        margin-top:10px;
      }

      .rankPosterPlayer{
        margin-top:12px;
      }

      .rankPosterFlavor{
        margin-bottom:12px;
      }
    }

    .campaignStoryCard{
      width: min(760px, 100%);
      background: linear-gradient(180deg, rgba(240,227,200,.99), rgba(214,189,146,.99));
      border: 1px solid rgba(46,28,16,.38);
      color: rgba(46,28,16,.95);
      border-radius: 18px;
      padding: 14px 16px 16px;
    }

    .campaignStoryCard .divider{
      background: rgba(46,28,16,.18);
    }

    .campaignStoryHeader{
      display:grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      align-items:start;
      gap: 12px;
    }

    .campaignStoryHeading{
      min-width: 0;
    }

    .campaignStoryCard .campaignKicker{
      color: rgba(46,28,16,.70);
    }

    .campaignStoryCard .modalHeader h3{
      color: rgba(46,28,16,.94);
      font-weight: 950;
      font-size: clamp(22px, 3.4vw, 32px);
      letter-spacing: 0;
      line-height: 1.04;
      margin-top: 2px;
      overflow-wrap: anywhere;
    }

    .campaignStoryCard .btnRow button{
      background: rgba(46,28,16,.92);
      border-color: rgba(0,0,0,.25);
      color: rgba(245,236,212,1);
      border-radius: 10px;
      padding: 10px 14px;
      white-space: nowrap;
    }

    .campaignStoryCard .btnRow button.primary{
      background: rgba(82,48,22,.96);
    }

    .campaignStoryImageWrap{
      margin-bottom: 12px;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      overflow:hidden;
      border: 1px solid rgba(46,28,16,.28);
      background: rgba(46,28,16,.84);
      box-shadow: 0 12px 22px rgba(0,0,0,.18);
    }

    .campaignStoryImage{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }

    .campaignStoryMeta{
      margin-top: 6px;
      font-size: 12px;
      font-weight: 900;
      color: rgba(46,28,16,.68);
      letter-spacing: .4px;
      text-transform: uppercase;
    }

    .campaignStoryMeta.storyTownMeta{
      display:block;
      text-transform:none;
      letter-spacing: 0;
    }

    .storyTownMetaMain{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }

    .storyTownMetaRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      min-width:0;
    }

    .storyTownState{
      color: rgba(46,28,16,.74);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.15;
    }

    .storyTownPosition{
      color: rgba(46,28,16,.58);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 1px;
      line-height: 1.1;
      text-transform: uppercase;
    }

    .storyTownRank{
      color: rgba(46,28,16,.66);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 1px;
      line-height: 1.1;
      text-align:right;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .campaignStoryText{
      margin: 10px 0 0;
      line-height: 1.5;
      font-size: 14px;
      font-weight: 650;
      white-space: pre-line;
    }

    .campaignStoryOpponents{
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(46,28,16,.18);
    }

    .storyOpponentTitle{
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: rgba(46,28,16,.68);
      margin-bottom: 8px;
    }

    .storyOpponentList{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .storyOpponent{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 9px 6px 6px;
      border-radius: 999px;
      border: 1px solid rgba(46,28,16,.20);
      background: rgba(255,255,255,.32);
      color: rgba(46,28,16,.95);
      font-weight: 850;
      font-size: 13px;
      line-height:1.2;
      cursor:pointer;
      box-shadow:none;
      font-family:inherit;
    }

    .storyOpponent:hover{
      border-color:rgba(46,28,16,.38);
      background:rgba(255,255,255,.52);
    }

    .storyOpponent:focus-visible{
      outline:3px solid rgba(130,82,31,.38);
      outline-offset:2px;
    }

    .storyOpponentAvatar{
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      background: rgba(46,28,16,.14);
      color: rgba(46,28,16,.92);
      font-weight: 950;
    }

    .storyOpponentImg{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .characterCard{
      width: min(680px, 100%);
      background: linear-gradient(180deg, rgba(240,227,200,.99), rgba(214,189,146,.99));
      border: 1px solid rgba(46,28,16,.38);
      color: rgba(46,28,16,.95);
      border-radius: 18px;
      padding: 14px 16px 16px;
    }

    #characterModal{
      z-index:10000;
    }

    .characterCard .divider{
      background: rgba(46,28,16,.18);
    }

    .characterCard .modalHeader h3{
      color: rgba(46,28,16,.92);
      font-weight: 950;
      font-size: 17px;
      letter-spacing: .2px;
    }

    .characterCard .btnRow button{
      background: rgba(46,28,16,.92);
      border-color: rgba(0,0,0,.25);
      color: rgba(245,236,212,1);
      border-radius: 10px;
      padding: 10px 14px;
    }

    .characterModalBody{
      display: grid;
      grid-template-columns: minmax(160px, 230px) 1fr;
      gap: 14px;
      align-items: start;
    }

    .characterPortraitWrap{
      position: relative;
      aspect-ratio: 3 / 4;
      border-radius: 12px;
      overflow: visible;
      border: 1px solid rgba(46,28,16,.28);
      background: rgba(46,28,16,.84);
      box-shadow: 0 12px 22px rgba(0,0,0,.18);
    }

    .characterModalImage{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 12px;
      overflow: hidden;
    }

    .characterSketchBadge{
      position:absolute;
      right:8px;
      bottom:8px;
      z-index:2;
      width:auto;
      height:32px;
      min-height:0;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      cursor:pointer;
    }

    .characterSketchBadge img{
      width:auto;
      height:32px;
      display:block;
      object-fit:contain;
      pointer-events:none;
    }

    .characterSketchTooltip{
      position:absolute;
      right:0;
      bottom:48px;
      z-index:3;
      width:min(250px, calc(100vw - 44px));
      padding:9px 10px;
      border-radius:10px;
      border:1px solid rgba(46,28,16,.34);
      background:rgba(245,236,212,.98);
      color:rgba(46,28,16,.96);
      box-shadow:0 12px 24px rgba(0,0,0,.28);
      font-size:12px;
      line-height:1.35;
      font-weight:850;
    }

    .characterModalText{
      min-width: 0;
    }

    .characterModalText p{
      margin: 0;
      line-height: 1.48;
      font-size: 14px;
      font-weight: 650;
      white-space: pre-line;
    }

    .legendBadgeLarge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(46,28,16,.32);
      background: rgba(226,176,74,.42);
      color: rgba(46,28,16,.95);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    @media (max-width: 560px){
      .campaignStoryHeader{
        display:flex;
        flex-direction:column;
      }

      .campaignStoryHeader .btnRow{
        width:100%;
      }

      .campaignStoryHeader .btnRow button{
        flex:1 1 auto;
      }

      .campaignStoryCard.storyTownCard.storyCloseMode .campaignStoryHeader{
        display:block;
        padding-right: 44px;
      }

      .campaignStoryCard.storyTownCard.storyCloseMode .campaignStoryHeader .btnRow{
        width:auto;
      }

      .campaignStoryCard.storyTownCard.storyCloseMode .storyCloseIconBtn{
        position:absolute;
        top:10px;
        right:10px;
        width:34px;
        height:34px;
        min-height:0;
        padding:0;
        border-radius:999px;
        font-size:0;
        line-height:1;
        flex:0 0 auto;
      }

      .campaignStoryCard.storyTownCard.storyCloseMode .storyCloseIconBtn::before{
        content:"×";
        font-size:24px;
        font-weight:900;
        line-height:1;
      }

      .characterModalBody{
        grid-template-columns: 1fr;
      }

      .characterPortraitWrap{
        width: min(210px, 100%);
        justify-self: center;
      }
    }

    /* End-of-game popup (polished) */
    .endGameCard{
      width: min(560px, 100%);
      background: linear-gradient(180deg, rgba(240,227,200,.99), rgba(214,189,146,.99));
      border: 1px solid rgba(46,28,16,.38);
      color: rgba(46,28,16,.95);
      border-radius: 18px;
      padding: 14px 16px 16px;
    }
    .endGameCard .divider{ background: rgba(46,28,16,.18); }
    .endGameCard .modalHeader h3{
      color: rgba(46,28,16,.92);
      font-weight: 900;
      font-size: 16px;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }
    .endGameCard .btnRow button{
      background: rgba(46,28,16,.92);
      border-color: rgba(0,0,0,.25);
      color: rgba(245,236,212,1);
      border-radius: 10px;
      padding: 10px 14px;
    }
    .endGameCard .btnRow button:hover{ background: rgba(46,28,16,.98); }

    .endGameBadge{
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      opacity: .86;
      margin-bottom: 10px;
    }
    .endGameRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(46,28,16,.20);
      background: rgba(255,255,255,.38);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
    }
    .endGameRow + .endGameRow{ margin-top: 8px; }
    .endGameRow.winner{
      border-color: rgba(46,28,16,.38);
      background: rgba(255,255,255,.56);
      box-shadow: 0 12px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.55);
      transform: rotate(-0.6deg);
    }
    .endGameWho{ display:flex; align-items:center; gap:10px; font-weight: 850; }
    .endGameAvatar{
      font-size: 18px;
      width: 30px;
      height: 30px;
      text-align:center;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      border-radius: 8px;
      background: rgba(46,28,16,.10);
      flex: 0 0 30px;
    }
    .endGameAvatarImg{
      width: 100%;
      height: 100%;
      display:block;
      object-fit: cover;
    }
    .endGameAvatarFallback{
      line-height: 1;
    }
    .endGameName{ font-weight: 850; }
    .endGameScore{ font-weight: 950; font-size: 18px; letter-spacing: .3px; }
    .endGameHint{ text-align:center; margin-top: 10px; opacity: .72; }

/* End-game sponsor tag */
.endGameSponsorWrap{ margin-top: 10px; }
.endGameSponsor{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(46,28,16,.22);
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  text-align: center;
}
.endGameSponsor a{
  display:block;
  color: rgba(46,28,16,.92);
  text-decoration:none;
}
.endGameSponsor a:hover{ text-decoration: underline; }
.endGameSponsor .sLine1{ font-weight: 950; letter-spacing: .2px; }
.endGameSponsor .sLine2{ margin-top: 2px; font-weight: 850; opacity: .90; }
.endGameSponsor .sCta{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  opacity: .78;
}


    .endGameLifetime{ margin-bottom: 12px; }
    .scoreLifetime .endGameBadge,
    .scoreLifetime .lifetimePlayerLine{
      display:none;
    }
    .campaignResult{
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(46,28,16,.20);
      background: rgba(255,255,255,.34);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
      margin-bottom: 10px;
    }
    .campaignResult.won{
      border-color: rgba(55,110,58,.28);
      background: rgba(112,150,85,.24);
    }
    .campaignResult.townComplete{
      border-color: rgba(112,74,28,.34);
      background:
        radial-gradient(420px 140px at 18% 20%, rgba(226,176,74,.34), rgba(226,176,74,0) 64%),
        rgba(255,255,255,.42);
      box-shadow: 0 12px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.45);
    }
    .campaignResult.lost{
      border-color: rgba(130,48,38,.24);
      background: rgba(160,70,55,.16);
    }
    .campaignResultImage{
      display: block;
      width: 100%;
      max-height: min(240px, 36vh);
      object-fit: cover;
      border-radius: 10px;
      border: 1px solid rgba(46,28,16,.18);
      box-shadow: 0 10px 20px rgba(0,0,0,.16);
      margin: 2px 0 10px;
      background: rgba(46,28,16,.10);
    }
    .campaignResultTitle{
      font-size: 18px;
      font-weight: 950;
      letter-spacing: .3px;
    }
    .campaignResultText{
      margin-top: 4px;
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
      opacity: .88;
    }
    .endGameLifetimeGrid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap:10px;
    }
    .endGameStat{
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(46,28,16,.20);
      background: rgba(255,255,255,.30);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
      text-align:center;
    }
    .endGameStat .label{
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      opacity: .78;
    }
    .endGameStat .value{
      font-size: 18px;
      font-weight: 950;
      letter-spacing: .3px;
      margin-top: 2px;
    }

    /* Welcome popup */
    .welcomeCard{
      width: min(560px, 100%);
      background: linear-gradient(180deg, rgba(240,227,200,.99), rgba(214,189,146,.99));
      border: 1px solid rgba(46,28,16,.38);
      color: rgba(46,28,16,.95);
      border-radius: 18px;
      padding: 14px 16px 16px;
      box-shadow: 0 18px 30px rgba(0,0,0,.28);
    }
    .welcomeCard .divider{ background: rgba(46,28,16,.18); }
    .welcomeCard .modalHeader h3{
      color: rgba(46,28,16,.92);
      font-weight: 1000;
      font-size: 15px;
      letter-spacing: 1.3px;
      text-transform: uppercase;
    }
    .welcomeCard .btnRow button{
      border-radius: 10px;
      padding: 10px 14px;
      font-weight: 900;
      letter-spacing: .6px;
    }
    .welcomeCard .btnRow button.primary{
      background: rgba(46,28,16,.92);
      border-color: rgba(0,0,0,.25);
      color: rgba(245,236,212,1);
    }
    .welcomeCard .btnRow button.primary:hover{ background: rgba(46,28,16,.98); }
    .welcomeCard .btnRow button:not(.primary){
      background: rgba(46,28,16,.10);
      border-color: rgba(46,28,16,.28);
      color: rgba(46,28,16,.92);
    }
    .welcomeCard .btnRow button:not(.primary):hover{ background: rgba(46,28,16,.14); }
    .welcomeCard .modalHeader .btnRow{
      justify-content:flex-end;
    }

    @media (max-width:420px){
      .welcomeCard .modalHeader .btnRow{
        flex-direction:column;
        flex-wrap:nowrap;
        align-items:flex-end;
      }
    }

    .welcomeBody{ padding-top: 2px; }
    .welcomeLead{
      font-weight: 800;
      line-height: 1.25;
      margin: 4px 0 10px;
      color: rgba(46,28,16,.92);
    }
    .welcomeNameWrap{
      margin: 10px 0 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(46,28,16,.20);
      background: rgba(255,255,255,.32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
    }
    .welcomeNameWrap label{
      display:block;
      font-size: 11px;
      font-weight: 1000;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: rgba(46,28,16,.76);
      margin-bottom: 6px;
    }
    .welcomeNameWrap input{
      width:100%;
      border-radius: 10px;
      border: 1px solid rgba(46,28,16,.32);
      background: rgba(255,255,255,.62);
      color: rgba(46,28,16,.95);
      padding: 10px 11px;
      font-size: 15px;
      font-weight: 850;
      outline: none;
    }
    .welcomeNameWrap input:focus{
      border-color: rgba(46,28,16,.62);
      box-shadow: 0 0 0 3px rgba(226,176,74,.25);
    }
    .tokenChoiceWelcome{
      margin:0 0 12px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(46,28,16,.20);
      background:rgba(255,255,255,.32);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
    }
    .tokenChoiceWelcome .tokenChoiceTitle{
      color:rgba(46,28,16,.76);
    }
    .tokenChoiceWelcome .tokenOption{
      border:1px solid rgba(46,28,16,.20);
      background:rgba(255,255,255,.42);
      color:rgba(46,28,16,.95);
    }
    .tokenChoiceWelcome .tokenOption:hover{
      background:rgba(255,255,255,.68);
    }
    .tokenChoiceWelcome .tokenOption.selected{
      border-color:rgba(46,28,16,.72);
      background:rgba(255,255,255,.82);
      box-shadow:0 0 0 2px rgba(46,28,16,.14);
    }
    .tokenOption:focus-visible{
      outline:3px solid rgba(226,176,74,.52);
      outline-offset:2px;
    }
    .welcomeNameError{
      min-height: 16px;
      margin-top: 6px;
      color: rgba(140,28,20,.95);
      font-size: 12px;
      font-weight: 850;
    }
    .welcomeList{
      margin: 0;
      padding-left: 18px;
      line-height: 1.35;
      color: rgba(46,28,16,.88);
    }
    .welcomeList li{ margin: 6px 0; }
    .revealBox{
      border:1px solid rgba(255,255,255,.12);
      border-radius:14px;
      padding:10px 10px 28px;
      background:rgba(0,0,0,.12);
      position:relative;
    }
    .revealBox .title{font-weight:700; font-size:13px}
    
    /* upper-right delta + total */
    .revealDelta{
      position:absolute;
      top:10px;
      right:10px;
      font-weight:900;
      font-size:18px;
      color:rgba(242,245,243,.92);
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .revealDelta.negative{ color: rgba(226,90,90,.92); }

    .revealTotal{
      position:absolute;
      right:10px;
      bottom:8px;
      font-size:11px; 
      color:rgba(242,245,243,.70);
      white-space:nowrap;
    }

    .revealScoreLine{
      display:block;
      width:100%;
      margin-top:4px;
      padding-right:0;
      line-height:1.32;
    }

    /* best + deadwood on one line */
    .miniLine{
      display:flex;
      gap:12px;
      margin-top:8px;
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .miniStack{
      display:flex;
      align-items:center;
      flex-wrap:nowrap;
      --miniOverlap:21px; /* about 50% of 2:3 mini card width */
    }
    .miniStack .miniCard:not(:first-child){
      margin-left: calc(-1 * var(--miniOverlap));
    }

    /* mini card base */
    .miniCard{
      height:62px;
      aspect-ratio: 2 / 3;
      width:auto;
      border-radius:4px;
      background:var(--card);
      color:var(--ink);
      display:block;
      border:2px solid rgba(0,0,0,.10);
      box-shadow:0 6px 12px rgba(0,0,0,.25);
      z-index: var(--z, 0);
    }

    /* show only corner rank+suit for overlap */
    .miniCard .centerSuit{ display:none; }
    .miniCard .corner.br{
      transform:none;          /* make lower-right readable */
      align-items:flex-end;
    }

    /* highlight (subtle) */
    .miniCard.best{ border-color: rgba(100,209,140,.70); }
    .miniCard.deadwood{ border-color: rgba(226,90,90,.70); }

    /* best-hand star */
    .goldStar{
      color: rgba(226,176,74,.96);
      margin-right:6px;
    }

    /* Showdown: best+deadwood on one line with up-to-50% overlap */
    .miniLine{
      display:flex;
      align-items:flex-start;
      gap:16px;
      margin-top:8px;
      flex-wrap:wrap;
    }
    .miniGroup{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .miniGroupLabel{
      font-size:10px;
      font-weight:900;
      letter-spacing:1px;
      text-transform:uppercase;
      color:rgba(242,245,243,.64);
    }
    .miniStack{
      display:flex;
      align-items:center;
      flex-wrap:nowrap;
      gap:3px;
    }
    .miniStack .miniCard:not(:first-child){
      margin-left:0;
    }

    .miniLine .miniCard{
      height:48px;
      aspect-ratio: 2 / 3;
      width:auto;
      border-radius:3px;
    }
    .miniLine .miniCard .cardInner{ padding:4px; }
    .miniLine .miniCard .corner.tl{ top:3px; left:3px; }
    .miniLine .miniCard .corner.br{ bottom:3px; right:3px; }
    .miniLine .miniCard .corner .rank{ font-size:9px; }
    .miniLine .miniCard .corner .suit{ font-size:8px; }
    .miniCard.best{
      border-color: rgba(100,209,140,.85);
      box-shadow:
        0 0 0 2px rgba(100,209,140,.20),
        0 6px 12px rgba(0,0,0,.25);
    }
    .miniCard.deadwood{
      border-color: rgba(226,90,90,.85);
      box-shadow:
        0 0 0 2px rgba(226,90,90,.18),
        0 6px 12px rgba(0,0,0,.25);
    }

    .small{color:rgba(242,245,243,.80); font-size:12px; margin-top:6px; white-space:pre-line}
    .rulesText{
      white-space: normal;
    }
    .rulesIntro{
      max-width:74ch;
      color:rgba(242,245,243,.88);
      font-size:13px;
      line-height:1.5;
      white-space:normal;
    }
    .rulesIntro p{
      margin:0 0 8px;
    }
    .rulesIntro p:last-child{
      margin-bottom:0;
    }
    .rulesList{
      margin: 0 0 18px 18px;
      padding: 0;
    }
    .scoringList{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:6px 10px;
      margin:8px 0 14px;
      white-space:normal;
    }
    .scoringList div{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-width:0;
      padding:7px 9px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:8px;
      background:rgba(255,255,255,.06);
    }
    .scoringList dt,
    .scoringList dd{
      margin:0;
    }
    .scoringList dt{
      min-width:0;
      color:rgba(242,245,243,.86);
      font-weight:850;
    }
    .scoringList dd{
      flex:0 0 auto;
      color:rgba(226,176,74,.96);
      font-weight:950;
      font-variant-numeric:tabular-nums;
    }
    .deadwoodValueList{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
      margin:8px 0 14px;
      white-space:normal;
    }
    .deadwoodValueList div{
      min-width:0;
      padding:8px 9px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:8px;
      background:rgba(0,0,0,.14);
    }
    .deadwoodValueList dt,
    .deadwoodValueList dd{
      margin:0;
    }
    .deadwoodValueList dt{
      color:rgba(242,245,243,.72);
      font-size:11px;
      font-weight:900;
      letter-spacing:.5px;
      text-transform:uppercase;
    }
    .deadwoodValueList dd{
      margin-top:3px;
      color:rgba(242,245,243,.96);
      font-size:13px;
      font-weight:950;
    }

    @media (max-width: 920px){
      .table{grid-template-columns: 1fr;}
    }

    @media (max-width: 760px){
     .grid2{ grid-template-columns: 1fr; }
    }

    @media (max-width: 560px){
      .scoringList{
        grid-template-columns:1fr;
      }
      .deadwoodValueList{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }

    }

    .creditStamp{
      margin-top: 12px;
      text-align: center;
      font-weight: 900;
      letter-spacing: 1.6px;
      font-size: 11px;
      text-transform: uppercase;
      transform: rotate(-1deg);
    }
	.appVersion{
	  font-size: 11px;
	  opacity: 0.65;
	  margin-right: 10px;
	  user-select: none;
	  white-space: nowrap;
	}

    .duelChallengeCard{
      display:grid;
      grid-template-columns:minmax(120px, 190px) 1fr;
      gap:18px;
      align-items:center;
      max-width:680px;
    }
    .duelChallengePortraitWrap{
      overflow:hidden;
      aspect-ratio:3 / 4;
      border:2px solid rgba(226,176,74,.65);
      border-radius:10px;
      background:rgba(0,0,0,.3);
    }
    .duelChallengePortrait{
      display:block;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:top center;
    }
    .duelChallengeCopy h3{ margin:5px 0 8px; }
    .duelChallengeCopy p{ line-height:1.45; }
    .duelChallengeActions{ justify-content:flex-start; }
    .duelResolutionCard{ max-width:540px; }
    @media (max-width:560px){
      .duelChallengeCard{ grid-template-columns:95px 1fr; gap:12px; }
      .duelChallengeActions{ grid-column:1 / -1; }
    }

/* Accessible large-print card faces. Jokers retain their existing artwork. */
.faceCenterSuit{
  display:none;
}

.largePrintCards .handCard .corner.br,
.largePrintCards .cardFace .corner.br,
.largePrintCards .miniCard .corner.br,
.largePrintCards .handCard .corner.tl .suit,
.largePrintCards .cardFace .corner.tl .suit,
.largePrintCards .miniCard .corner.tl .suit{
  display:none;
}

.largePrintCards .handCard .corner.tl .rank,
.largePrintCards .cardFace .corner.tl .rank{
  font-size:32px;
}

.largePrintCards .handCard .centerSuit,
.largePrintCards .cardFace .centerSuit{
  display:block;
  font-size:42px;
}

.largePrintCards .centerArt,
.largePrintCards .aceSpadesCustom .aceSpadesImg{
  display:none;
}

.largePrintCards .faceCenterSuit,
.largePrintCards .aceSpadesCustom .aceSpadesFallback{
  display:block;
}

.largePrintCards .miniCard .corner.tl .rank{
  font-size:18px;
}

.largePrintCards .miniCard .centerSuit{
  display:block;
  font-size:28px;
}

.largePrintCards .miniLine .miniCard .corner.tl .rank,
.largePrintCards .miniCard.record .corner.tl .rank{
  font-size:14px;
}

.largePrintCards .miniLine .miniCard .centerSuit,
.largePrintCards .miniCard.record .centerSuit{
  font-size:20px;
}

/* Deadwood Legend end-game ceremony */
body.legendCelebrationOpen{ overflow:hidden; }
.legendCelebration{
  position:fixed;
  inset:0;
  z-index:10080;
  display:none;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:rgba(5, 4, 2, .9);
  isolation:isolate;
}
.legendCelebration.open{ display:flex; }
.legendCelebrationGlow{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 25%, rgba(244, 188, 75, .18), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(94, 39, 13, .28), transparent 55%);
}
.legendCeremonyCard{
  width:min(940px, 100%);
  min-height:min(720px, calc(100dvh - 36px));
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border:1px solid rgba(237, 193, 96, .58);
  border-radius:18px;
  background:#171008;
  box-shadow:0 28px 90px rgba(0, 0, 0, .78), inset 0 0 0 4px rgba(57, 32, 13, .72);
}
.legendCeremonyCard::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(9, 6, 3, .38), rgba(12, 7, 2, .76)),
    url("images/tables/deadwood-southdakota-9.jpg") center / cover no-repeat;
  filter:saturate(.78) sepia(.16);
  transform:scale(1.015);
}
.legendCeremonyCard::after{
  content:"";
  position:absolute;
  inset:10px;
  z-index:1;
  pointer-events:none;
  border:1px solid rgba(239, 197, 104, .32);
  border-radius:11px;
  box-shadow:inset 0 0 40px rgba(0, 0, 0, .5);
}
.legendStage,
.legendActions{
  position:relative;
  z-index:2;
}
.legendStage{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:clamp(28px, 5vw, 62px) clamp(22px, 7vw, 82px) 18px;
  cursor:pointer;
}
.legendScene{
  width:min(720px, 100%);
  margin:auto;
  text-align:center;
  text-shadow:0 2px 8px rgba(0, 0, 0, .9);
}
.legendEyebrow{
  color:#d9b362;
  font-size:clamp(11px, 1.7vw, 14px);
  font-weight:900;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.legendTitle{
  margin:10px auto 4px;
  color:#f6df9d;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(44px, 8.4vw, 86px);
  font-weight:900;
  letter-spacing:.055em;
  line-height:.94;
  text-transform:uppercase;
  text-shadow:0 2px 0 #6d3e13, 0 5px 18px rgba(0, 0, 0, .92), 0 0 28px rgba(221, 167, 61, .24);
}
.legendTitleCompact{
  max-width:680px;
  font-size:clamp(35px, 6.2vw, 66px);
  line-height:1;
}
.legendPlayerToken{
  width:clamp(74px, 11vw, 112px);
  height:clamp(74px, 11vw, 112px);
  display:block;
  margin:18px auto 12px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0, 0, 0, .7));
}
.legendPlayerName{
  margin-top:12px;
  color:#fff5d7;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(20px, 3.5vw, 34px);
  font-weight:700;
  letter-spacing:.08em;
}
.legendFlourish{
  margin:16px 0 12px;
  color:#d4a94b;
  font-size:18px;
}
.legendLead{
  max-width:670px;
  margin:18px auto 0;
  color:#fff7df;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(17px, 2.5vw, 23px);
  line-height:1.45;
}
.legendSubcopy{
  max-width:630px;
  margin:12px auto 0;
  color:rgba(248, 231, 192, .78);
  font-size:clamp(12px, 1.8vw, 15px);
  font-weight:800;
  letter-spacing:.025em;
  line-height:1.45;
}
.legendActions{
  display:flex;
  justify-content:center;
  gap:10px;
  padding:16px 22px 24px;
}
.legendActions button{
  min-width:170px;
  padding:12px 20px;
}
.legendActions button[hidden]{ display:none; }
.legendDeckCase{
  width:min(510px, 82vw);
  margin:24px auto 12px;
  padding:14px;
  border:3px solid #734317;
  border-radius:15px;
  background:linear-gradient(145deg, #8f5d24, #3f220c 44%, #6a3b14);
  box-shadow:0 18px 30px rgba(0, 0, 0, .68), inset 0 0 0 2px rgba(233, 190, 91, .35);
}
.legendDeckCaseLining{
  min-height:270px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(245, 218, 154, .4);
  border-radius:9px;
  background:radial-gradient(circle at 50% 25%, #6c1d20, #250709 74%);
  box-shadow:inset 0 0 28px rgba(0, 0, 0, .7);
}
.legendDeckCard{
  width:clamp(125px, 23vw, 175px);
  aspect-ratio:2 / 3;
  position:absolute;
  top:50%;
  left:50%;
  object-fit:cover;
  border:2px solid #d5ad55;
  border-radius:8px;
  box-shadow:7px 12px 22px rgba(0, 0, 0, .68), 0 0 0 1px #f0d787;
}
.legendDeckBack{ transform:translate(-72%, -50%) rotate(-8deg); }
.legendDeckAce{ transform:translate(-28%, -50%) rotate(8deg); }
.legendMapWrap{
  width:min(600px, 84vw);
  margin:24px auto 10px;
  padding:9px;
  transform:rotate(-.7deg);
  border:1px solid rgba(70, 38, 14, .8);
  background:#c7aa70;
  box-shadow:0 16px 30px rgba(0, 0, 0, .68);
}
.legendMap{
  display:block;
  width:100%;
  max-height:285px;
  object-fit:cover;
  filter:sepia(.15) saturate(.82) contrast(.95);
}
.legendTeaserScene{
  display:flex;
  align-items:center;
  justify-content:center;
}
.legendHandbill{
  width:min(510px, 83vw);
  padding:clamp(24px, 5vw, 46px);
  transform:rotate(.65deg);
  color:#34210f;
  border:2px solid #7a5529;
  background:
    radial-gradient(circle at 20% 18%, rgba(104, 62, 22, .12), transparent 22%),
    linear-gradient(100deg, #d6bd82, #ecd8a5 48%, #caae70);
  box-shadow:0 22px 42px rgba(0, 0, 0, .75), inset 0 0 28px rgba(83, 49, 16, .2);
  text-shadow:none;
}
.legendHandbillKicker{
  margin:12px 0;
  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.legendHandbill h2{
  margin:12px 0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(34px, 6vw, 58px);
  line-height:.94;
  text-transform:uppercase;
}
.legendHandbillComing{
  display:inline-block;
  margin:8px 0 10px;
  padding:7px 14px;
  transform:rotate(-1.5deg);
  border:3px double #6c231a;
  color:#6c231a;
  font-size:clamp(17px, 3vw, 24px);
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.legendHandbill p{
  margin:12px auto;
  max-width:390px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(14px, 2vw, 18px);
  font-weight:700;
  line-height:1.4;
}
.legendHandbillRule{ font-weight:900; letter-spacing:.16em; }
.legendFinalTitle{
  margin:18px auto;
  color:#fff1bd;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(36px, 6.3vw, 66px);
  line-height:1.08;
  text-transform:uppercase;
  text-shadow:0 3px 0 #65370f, 0 8px 24px rgba(0, 0, 0, .9);
}
.legendFinalTitle span{ color:#e6ba58; }
.legendFinalMark{
  margin:20px auto;
  color:#e7bd60;
  font-size:clamp(46px, 8vw, 78px);
  text-shadow:0 5px 16px rgba(0, 0, 0, .8);
}
.legendImageMissing{ opacity:.16; }
.legendStageEntering .legendScene{
  animation:legendSceneIn 420ms cubic-bezier(.2, .74, .24, 1) both;
}
.legendStageEntering[data-stage="2"] .legendDeckBack{
  animation:legendDeckBackIn 620ms cubic-bezier(.18, .82, .22, 1) 80ms both;
}
.legendStageEntering[data-stage="2"] .legendDeckAce{
  animation:legendDeckAceIn 620ms cubic-bezier(.18, .82, .22, 1) 170ms both;
}
.legendStageEntering[data-stage="3"] .legendMapWrap{
  animation:legendMapIn 680ms cubic-bezier(.2, .74, .2, 1) 70ms both;
}
.legendStageEntering[data-stage="4"] .legendHandbill{
  animation:legendHandbillIn 620ms cubic-bezier(.18, .8, .2, 1) 70ms both;
}
@keyframes legendSceneIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes legendDeckBackIn{
  from{ opacity:0; transform:translate(-105%, -85%) rotate(-18deg) scale(.82); }
  to{ opacity:1; transform:translate(-72%, -50%) rotate(-8deg) scale(1); }
}
@keyframes legendDeckAceIn{
  from{ opacity:0; transform:translate(5%, -85%) rotate(18deg) scale(.82); }
  to{ opacity:1; transform:translate(-28%, -50%) rotate(8deg) scale(1); }
}
@keyframes legendMapIn{
  from{ opacity:0; transform:rotate(-.7deg) scaleX(.18); }
  to{ opacity:1; transform:rotate(-.7deg) scaleX(1); }
}
@keyframes legendHandbillIn{
  from{ opacity:0; transform:translateY(-28px) rotate(-2deg) scale(.94); }
  to{ opacity:1; transform:translateY(0) rotate(.65deg) scale(1); }
}
@media (max-width:620px){
  .legendCelebration{ padding:0; }
  .legendCeremonyCard{
    width:100%;
    min-height:100dvh;
    border:0;
    border-radius:0;
  }
  .legendCeremonyCard::after{ inset:7px; }
  .legendStage{ padding:34px 20px 10px; }
  .legendActions{
    flex-wrap:wrap;
    padding:12px 18px max(18px, env(safe-area-inset-bottom));
  }
  .legendActions button{ flex:1 1 160px; }
  .legendDeckCaseLining{ min-height:230px; }
  .legendLead{ font-size:17px; }
}
@media (max-height:680px) and (orientation:landscape){
  .legendCeremonyCard{ min-height:calc(100dvh - 20px); }
  .legendStage{ padding:18px 44px 8px; }
  .legendTitle{ font-size:44px; }
  .legendPlayerToken{ width:62px; height:62px; margin:8px auto; }
  .legendLead{ margin-top:10px; font-size:16px; }
  .legendSubcopy{ margin-top:6px; }
  .legendDeckCase{ width:390px; margin:10px auto 6px; }
  .legendDeckCaseLining{ min-height:180px; }
  .legendDeckCard{ width:105px; }
  .legendMapWrap{ width:430px; margin:10px auto 4px; }
  .legendMap{ max-height:175px; }
  .legendHandbill{ padding:18px 32px; }
  .legendHandbill h2{ font-size:38px; }
  .legendActions{ padding:8px 18px 12px; }
}
@media (prefers-reduced-motion:reduce){
  .legendStageEntering .legendScene,
  .legendStageEntering .legendDeckBack,
  .legendStageEntering .legendDeckAce,
  .legendStageEntering .legendMapWrap,
  .legendStageEntering .legendHandbill{
    animation:none !important;
  }
}