:root{
  --ponder-action-red:rgb(255,83,100);
  --ponder-street-flop:rgba(209,190,255,.9);
  --ponder-street-turn:rgba(150,205,255,.92);
  --ponder-street-river:rgba(255,209,132,.93);
  --ponder-action-banner-row-height:calc(var(--ponder-stage-height,100vh) * .0342);
  --ponder-action-banner-gap:calc(var(--ponder-stage-height,100vh) * .004167);
  --ponder-action-banner-width:calc(var(--ponder-stage-width,100vw) * .1171875);
  --ponder-action-banner-ease:cubic-bezier(.2,.76,.2,1);
}

/* Reflect the frame only. The position/action/amount text keeps its reading order. */
body.table-controls-left :is(.ponder-action-banner-row,.ponder-all-action-button){
  border-radius:4px 0 0 4px;
  clip-path:polygon(100% 18%,calc(100% - 5px) 0,0 0,0 82%,5px 100%,100% 100%);
  padding-left:calc(var(--ponder-stage-height,100vh) * .0128);
  padding-right:calc(var(--ponder-stage-height,100vh) * .02322);
  border-left-color:rgba(184,205,232,.25);
  border-right-color:rgba(39,230,240,.66);
  background:linear-gradient(270deg,rgba(1,6,12,.91),rgba(4,11,20,.78));
}
body.table-controls-left .ponder-action-banner-row.action-fold{border-right-color:rgba(190,201,217,.62);}
body.table-controls-left .ponder-action-banner-row.action-check{border-right-color:rgba(39,230,240,.72);}
body.table-controls-left .ponder-action-banner-row.action-call{border-right-color:rgba(78,204,255,.78);}
body.table-controls-left .ponder-action-banner-row:is(.action-bet,.action-raise){border-right-color:rgba(178,92,255,.82);}
body.table-controls-left .ponder-action-banner-row.action-allin{border-right-color:rgba(255,79,126,.92);}
body.table-controls-left .ponder-action-banner-row:is(.action-limp,.action-complete){border-right-color:rgba(255,214,107,.78);}
body.table-controls-left .ponder-all-action-button{
  border-left-color:rgba(178,92,255,.52);border-right-color:rgba(178,92,255,.88);
  background:linear-gradient(270deg,rgba(17,7,29,.94),rgba(8,12,24,.84));
}
body.table-controls-left .ponder-all-action-button:is(:hover,:focus-visible,[aria-expanded="true"]){border-color:rgba(39,230,240,.72);}

#ponderActionBannerHud{
  position:absolute;
  z-index:66;
  left:-.7%;
  top:7.5%;
  width:var(--ponder-action-banner-width);
  display:flex;
  flex-direction:column;
  gap:var(--ponder-action-banner-gap);
  pointer-events:none;
  contain:layout style;
  color:#f3f7ff;
  font-family:Arial,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}

.ponder-action-banner-list{
  display:flex;
  flex-direction:column;
  gap:var(--ponder-action-banner-gap);
  min-width:0;
}

.ponder-action-street-marker{
  width:100%;
  height:calc(var(--ponder-stage-height,100vh) * .01806);
  min-height:calc(var(--ponder-stage-height,100vh) * .01806);
  display:flex;
  align-items:center;
  gap:calc(var(--ponder-stage-height,100vh) * .00694);
  padding-left:calc(var(--ponder-stage-height,100vh) * .02083);
  color:var(--ponder-street-flop);
  font-size:calc(var(--ponder-stage-height,100vh) * .01031);
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  white-space:nowrap;
  overflow:hidden;
}

.ponder-action-street-marker::before,
.ponder-action-street-marker::after{
  content:"";
  height:1px;
  flex:1 1 auto;
  background:linear-gradient(90deg,rgba(151,112,227,.15),rgba(151,112,227,.72));
}

.ponder-action-street-marker::after{background:linear-gradient(90deg,rgba(151,112,227,.72),rgba(151,112,227,.08));}
.ponder-action-street-marker.is-turn{color:var(--ponder-street-turn);}
.ponder-action-street-marker.is-turn::before,
.ponder-action-street-marker.is-turn::after{background:linear-gradient(90deg,rgba(82,156,222,.12),rgba(82,156,222,.7));}
.ponder-action-street-marker.is-turn::after{background:linear-gradient(90deg,rgba(82,156,222,.7),rgba(82,156,222,.08));}
.ponder-action-street-marker.is-river{color:var(--ponder-street-river);}
.ponder-action-street-marker.is-river::before,
.ponder-action-street-marker.is-river::after{background:linear-gradient(90deg,rgba(210,151,67,.12),rgba(210,151,67,.7));}
.ponder-action-street-marker.is-river::after{background:linear-gradient(90deg,rgba(210,151,67,.7),rgba(210,151,67,.08));}

.ponder-action-banner-row,
.ponder-all-action-button{
  width:100%;
  height:var(--ponder-action-banner-row-height);
  min-height:var(--ponder-action-banner-row-height);
  display:grid;
  /* Reserve all three position glyphs as the desktop font grows; keep HUD width. */
  grid-template-columns:minmax(2.6em,.56fr) minmax(4.4em,.9fr) minmax(0,1fr);
  align-items:center;
  gap:calc(var(--ponder-stage-height,100vh) * .008);
  margin:0;
  padding:0 calc(var(--ponder-stage-height,100vh) * .0128) 0 calc(var(--ponder-stage-height,100vh) * .02322);
  border:1px solid rgba(184,205,232,.25);
  border-left-color:rgba(39,230,240,.66);
  border-radius:0 4px 4px 0;
  clip-path:polygon(0 18%,5px 0,100% 0,100% 82%,calc(100% - 5px) 100%,0 100%);
  background:linear-gradient(90deg,rgba(1,6,12,.91),rgba(4,11,20,.78));
  box-shadow:0 4px 13px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
  color:#eef6ff;
  font-size:calc(var(--ponder-stage-height,100vh) * .01528);
  font-weight:900;
  line-height:1;
  letter-spacing:.025em;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  will-change:transform,opacity;
}

.ponder-action-banner-row{pointer-events:auto;touch-action:manipulation;cursor:pointer;}
#ponderActionNameGlow{
  position:fixed;width:28px;height:28px;z-index:65;pointer-events:none;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,var(--ponder-action-red) 22%,transparent 72%);
  opacity:0;transform:translate(-50%,-50%);transition:opacity 180ms ease;
}
#ponderActionNameGlow.is-held{opacity:.85;transition-duration:60ms;}
body:not(.app-view-table) #ponderActionNameGlow{display:none!important;}

.ponder-action-position{
  color:rgba(167,240,255,.86);
  overflow:hidden;
  text-overflow:ellipsis;
}

.ponder-action-label{
  color:rgba(240,245,252,.91);
  overflow:hidden;
  text-overflow:clip;
}

.ponder-action-amount{
  min-width:0;
  color:#fff;
  text-align:right;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ponder-action-banner-row.action-fold{border-left-color:rgba(190,201,217,.62);}
.ponder-action-banner-row.action-fold .ponder-action-label{color:rgba(210,220,234,.78);}
.ponder-action-banner-row.action-check{border-left-color:rgba(39,230,240,.72);}
.ponder-action-banner-row.action-check .ponder-action-label{color:#a9f8ff;}
.ponder-action-banner-row.action-call{border-left-color:rgba(78,204,255,.78);}
.ponder-action-banner-row.action-call .ponder-action-label{color:#a7ddff;}
.ponder-action-banner-row.action-bet,
.ponder-action-banner-row.action-raise{border-left-color:rgba(178,92,255,.82);}
.ponder-action-banner-row.action-bet .ponder-action-label,
.ponder-action-banner-row.action-raise .ponder-action-label{color:#d8b7ff;}
.ponder-action-banner-row.action-allin{border-left-color:rgba(255,79,126,.92);}
.ponder-action-banner-row.action-allin .ponder-action-label{color:#ff9abb;}
.ponder-action-banner-row.action-limp,
.ponder-action-banner-row.action-complete{border-left-color:rgba(255,214,107,.78);}
.ponder-action-banner-row.action-limp .ponder-action-label,
.ponder-action-banner-row.action-complete .ponder-action-label{color:#ffe29a;}

.ponder-all-action-button{
  position:relative;
  grid-template-columns:1fr;
  justify-items:center;
  pointer-events:auto;
  touch-action:manipulation;
  border-color:rgba(178,92,255,.52);
  border-left-color:rgba(178,92,255,.88);
  background:linear-gradient(90deg,rgba(17,7,29,.94),rgba(8,12,24,.84));
  color:#d9c0ff;
  letter-spacing:.11em;
  text-align:center;
  text-shadow:0 0 8px rgba(178,92,255,.24);
}

.ponder-all-action-button:hover,
.ponder-all-action-button:focus-visible,
.ponder-all-action-button[aria-expanded="true"]{
  border-color:rgba(39,230,240,.72);
  color:#e9fdff;
  outline:none;
  box-shadow:0 0 14px rgba(39,230,240,.17),inset 0 0 12px rgba(39,230,240,.06);
}

.ponder-action-banner-row.is-entering{
  animation:ponderActionBannerIn 190ms var(--ponder-action-banner-ease) both;
}

.ponder-action-banner-row.is-exiting{
  position:absolute;
  z-index:0;
  pointer-events:none;
  animation:ponderActionBannerOut 205ms cubic-bezier(.22,.7,.25,1) both;
}

@keyframes ponderActionBannerIn{
  from{transform:translateX(-118%);opacity:.72;}
  to{transform:translateX(0);opacity:1;}
}

@keyframes ponderActionBannerOut{
  from{transform:translateY(0);opacity:1;}
  to{transform:translateY(var(--action-banner-exit-distance,var(--ponder-action-banner-row-height)));opacity:0;}
}

.ponder-action-banner-sr{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#ponderActionDrawerBackdrop{
  position:fixed;
  inset:0;
  z-index:218;
  display:none;
  background:rgba(0,0,0,.10);
  pointer-events:none;
}

#ponderActionDrawerBackdrop.active{
  display:block;
  pointer-events:auto;
}

#ponderActionDrawer{
  position:fixed;
  z-index:220;
  top:0;
  bottom:0;
  left:0;
  width:clamp(244px,30vw,420px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  transform:translateX(-104%);
  visibility:hidden;
  pointer-events:none;
  border-right:1px solid rgba(39,230,240,.48);
  background:linear-gradient(180deg,rgba(3,11,20,.97),rgba(1,6,13,.98));
  box-shadow:18px 0 48px rgba(0,0,0,.52),0 0 25px rgba(39,230,240,.10);
  color:#edf7ff;
  font-family:Arial,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  transition:transform 210ms var(--ponder-action-banner-ease),visibility 0s linear 210ms;
  overflow:hidden;
}

#ponderActionDrawer.active{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform 210ms var(--ponder-action-banner-ease),visibility 0s linear 0s;
}

.ponder-action-drawer-header{
  min-height:clamp(50px,9vh,70px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:max(env(safe-area-inset-top,0px),10px) clamp(12px,1.45vw,19px) 9px;
  border-bottom:1px solid rgba(178,92,255,.28);
  background:linear-gradient(90deg,rgba(49,22,82,.44),rgba(5,14,25,.32));
}

.ponder-action-drawer-title{
  display:block;
  padding:0;
  border:0;
  background:none;
  margin:0;
  color:#e7d8ff;
  font-family:inherit;
  font-size:clamp(14px,1.4vw,20px);
  font-weight:900;
  line-height:1;
  letter-spacing:.13em;
  cursor:pointer;
  touch-action:manipulation;
}

.ponder-action-drawer-title:hover,
.ponder-action-drawer-title:focus-visible{
  color:#bdfaff;
  outline:none;
}

.ponder-action-drawer-header p{
  margin:5px 0 0;
  color:rgba(168,189,214,.67);
  font-size:clamp(8px,.72vw,10px);
  font-weight:900;
  letter-spacing:.08em;
}

#ponderActionDrawerClose{
  flex:0 0 auto;
  width:clamp(30px,3vw,38px);
  height:clamp(30px,3vw,38px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(205,221,241,.28);
  border-radius:5px;
  background:rgba(4,12,22,.74);
  color:#f3f8ff;
  font-size:clamp(20px,2vw,28px);
  line-height:1;
  touch-action:manipulation;
}

#ponderActionDrawerClose:hover,
#ponderActionDrawerClose:focus-visible{
  border-color:rgba(39,230,240,.72);
  color:#bdfaff;
  outline:none;
}

.ponder-action-drawer-content{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(9px,1.25vw,16px) clamp(11px,1.45vw,18px) max(env(safe-area-inset-bottom,0px),14px);
  scrollbar-width:thin;
  scrollbar-color:rgba(39,230,240,.42) rgba(255,255,255,.04);
}

.ponder-action-street{
  margin:0 0 clamp(12px,2.4vh,22px);
}

.ponder-action-street-heading{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 0 6px;
  border-bottom:1px solid rgba(39,230,240,.25);
}

.ponder-action-street-heading h3{
  margin:0;
  color:#9eefff;
  font-size:clamp(10px,.9vw,13px);
  line-height:1;
  letter-spacing:.14em;
}

.ponder-action-street-board{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  min-width:0;
}

.ponder-action-street-board .card-ui.action-banner-board-card{
  position:relative!important;
  width:clamp(18px,2.05vw,28px)!important;
  height:clamp(25px,2.9vw,39px)!important;
  min-width:18px!important;
  border-radius:3px!important;
  box-shadow:0 0 5px rgba(166,83,255,.13)!important;
}

.ponder-action-street-board .card-ui.action-banner-board-card .card-rank{
  top:3px!important;
  left:3px!important;
  font-size:clamp(8px,.75vw,11px)!important;
}

.ponder-action-street-board .card-ui.action-banner-board-card .card-suit{
  font-size:clamp(11px,1.05vw,15px)!important;
}

.ponder-action-street-rows{
  display:flex;
  flex-direction:column;
}

.ponder-action-drawer-row{
  min-height:clamp(28px,4.8vh,38px);
  display:grid;
  grid-template-columns:minmax(42px,.72fr) minmax(54px,1fr) minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:4px 2px;
  border-bottom:1px solid rgba(255,255,255,.065);
  color:rgba(232,240,250,.88);
  font-size:clamp(10px,.88vw,13px);
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
}

.ponder-action-drawer-row.is-source-text{
  display:block;
  min-height:0;
  padding:7px 2px;
  color:rgba(206,218,234,.72);
  font-size:clamp(9px,.8vw,12px);
  white-space:normal;
  overflow-wrap:anywhere;
}

.ponder-action-drawer-row.source-blind{color:#ffe29a;}
.ponder-action-drawer-row.source-win{color:#b9ffe8;}
.ponder-action-drawer-empty{
  margin:0;
  padding:18px 2px;
  color:rgba(174,190,211,.64);
  font-size:12px;
}

body:not(.app-view-table) #ponderActionBannerHud,
body:not(.app-view-table) #ponderActionDrawer,
body:not(.app-view-table) #ponderActionDrawerBackdrop,
body.ranked-pre-transition-freeze #ponderActionBannerHud,
body.ranked-pre-transition-freeze #ponderActionDrawer,
body.ranked-pre-transition-freeze #ponderActionDrawerBackdrop,
body.ranked-pre-table-hidden #ponderActionBannerHud,
body.ranked-pre-table-hidden #ponderActionDrawer,
body.ranked-pre-table-hidden #ponderActionDrawerBackdrop,
body.ponder-table-ui-locked #ponderActionBannerHud,
body.ponder-table-ui-locked #ponderActionDrawer,
body.ponder-table-ui-locked #ponderActionDrawerBackdrop,
body:has(#handHistoryVisualModal.open) #ponderActionBannerHud,
body:has(#handHistoryVisualModal.open) #ponderActionDrawer,
body:has(#handHistoryVisualModal.open) #ponderActionDrawerBackdrop,
body:has(#handHistoryV2Modal[aria-hidden="false"]) #ponderActionBannerHud,
body:has(#handHistoryV2Modal[aria-hidden="false"]) #ponderActionDrawer,
body:has(#handHistoryV2Modal[aria-hidden="false"]) #ponderActionDrawerBackdrop{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

body.blind-level-peek-open #ponderActionBannerHud{
  opacity:.24;
  filter:brightness(.38) saturate(.55);
  pointer-events:none;
}

/* Keep table controls behind the Drawer without changing their normal stacking. */
body.ponder-action-drawer-open #actionPanelV2,
body.ponder-action-drawer-open #actions,
body.ponder-action-drawer-open #actionV1UtilityButtons,
body.ponder-action-drawer-open .timebank-toggle,
body.ponder-action-drawer-open .dealer-overlay,
body.ponder-action-drawer-open #centerInfo,
body.ponder-action-drawer-open #centerBlindTimer,
body.ponder-action-drawer-open .blind-level-peek-panel,
body.ponder-action-drawer-open #mainMenuDropdown,
body.ponder-action-drawer-open .audio-control{
  z-index:217!important;
  pointer-events:none!important;
}

/* Disconnect/reconnect notices remain visible above the Drawer. */
body.ponder-action-drawer-open .global-notice{
  z-index:222!important;
}

@media (max-width:900px), (max-height:520px), (pointer:coarse){

  #ponderActionBannerHud{
    left:-.7%;
    top:7.5%;
  }


  .ponder-all-action-button{
    grid-template-columns:1fr;
    justify-items:center;
  }

  #ponderActionDrawer{
    width:clamp(244px,40vw,340px);
  }

  .ponder-action-drawer-header{
    min-height:46px;
    padding-top:max(env(safe-area-inset-top,0px),7px);
    padding-bottom:7px;
  }

  .ponder-action-drawer-content{
    padding-top:7px;
  }

  .ponder-action-street{
    margin-bottom:10px;
  }

  .ponder-action-drawer-row{
    min-height:25px;
    font-size:clamp(9px,1.55vw,11px);
  }
}

@media (min-width:1100px){
  #ponderActionDrawer{width:clamp(320px,28vw,420px);}
}

@media (prefers-reduced-motion:reduce){
  #ponderActionDrawer{
    transition:opacity 90ms linear,visibility 0s linear 90ms;
    transform:translateX(-12px);
    opacity:0;
  }

  #ponderActionDrawer.active{
    transition:opacity 90ms linear,visibility 0s linear 0s;
    transform:translateX(0);
    opacity:1;
  }

  .ponder-action-banner-row.is-entering{
    animation:ponderActionBannerReducedIn 90ms linear both;
  }

  .ponder-action-banner-row.is-exiting{
    animation:ponderActionBannerReducedOut 90ms linear both;
  }

  @keyframes ponderActionBannerReducedIn{
    from{transform:translateX(-4px);opacity:.72;}
    to{transform:translateX(0);opacity:1;}
  }

  @keyframes ponderActionBannerReducedOut{
    from{transform:translateY(0);opacity:1;}
    to{transform:translateY(4px);opacity:0;}
  }
}
