/* A flex basis is a height in a column, not a card width. Lesson cards keep
   the same dimensions whether they sit in a hand or a vertical explanation. */
#modal-help .guide-card.card {flex:0 0 auto!important;aspect-ratio:5/7;min-height:var(--card-h);min-width:var(--card-w);}
#modal-help .guide-pile-demo {align-items:start;}
#modal-help .guide-pile-demo>div {flex:1 1 0;max-width:200px;min-width:0;}
#modal-help .guide-pile-demo strong {text-align:center;min-height:2.5em;line-height:1.25;}
#modal-help .guide-pile-demo .practice-back {width:62px;height:88px;flex:0 0 auto;}
@media(max-width:760px){#modal-help .guide-pile-demo {gap:20px;}#modal-help .guide-pile-demo .practice-back {width:49px;height:70px;}}
/* The number and unit share a baseline; legacy score padding cannot shift
   one metric independently of its neighbour. */
body #screen-game #playerRail .pchip .pchip-meta {align-items:baseline!important;}
body #screen-game #playerRail .pchip :is(.pchip-score,.pchip-card-count) {align-items:baseline!important;justify-content:flex-start;vertical-align:baseline;line-height:1.15!important;padding:0!important;margin:0!important;border:0!important;min-height:0!important;height:auto!important;transform:none!important;position:static!important;}
body #screen-game #playerRail .pchip :is(.pchip-score,.pchip-card-count)>:is(strong,small) {position:static!important;transform:none!important;padding:0!important;margin:0!important;line-height:1.15!important;vertical-align:baseline;}
/* A counted hand uses two full backs and a counted back, with real gaps.
   No face is exposed and the public total remains authoritative. */
body #screen-game #playerRail .pchip .opponent-hand {gap:3px!important;}
body #screen-game #playerRail .pchip :is(.opponent-back,.opponent-card-stack) {margin:0!important;flex-shrink:0!important;}
body #screen-game #playerRail .pchip .opponent-card-stack>b {letter-spacing:.06em!important;text-align:center;line-height:1!important;font-kerning:none;}
/* Draw targets use the available width instead of a scaled-down desktop
   pile. Their label and stock count have their own clearance. */
@media(max-width:760px) and (orientation:portrait){
 body[data-game="kounga"] #screen-game .piles-row {--pile-w:clamp(56px,16vw,72px);--pile-h:calc(var(--pile-w) * 1.43);gap:clamp(50px,15vw,76px)!important;padding:20px 0 18px!important;}
 body[data-game="kounga"] #screen-game .pile {transform:none!important;flex:0 0 var(--pile-w);}
 body[data-game="kounga"] #screen-game .pile:active {transform:translateY(1px)!important;}
 body[data-game="kounga"] #screen-game .pile-label {font-size:10px!important;top:-17px!important;}
 body[data-game="kounga"] #screen-game .pile-count {bottom:-16px!important;font-size:11px!important;line-height:1!important;}
 body #screen-game #playerRail .pchip .opponent-hand {gap:2px!important;}
 body #screen-game #playerRail .pchip :is(.opponent-back,.opponent-card-stack) {width:24px!important;height:34px!important;flex-basis:24px!important;}
 body #screen-game #playerRail .pchip .tablet-hand-caption {margin-left:4px!important;padding-left:5px!important;}
}
@media(max-width:360px) and (orientation:portrait){
 body #screen-game #playerRail .pchip :is(.opponent-back,.opponent-card-stack) {width:18px!important;height:26px!important;flex-basis:18px!important;}
 body #screen-game #playerRail .pchip .opponent-card-stack>b {font-size:9px!important;letter-spacing:0!important;}
 body #screen-game #playerRail .pchip .tablet-hand-caption {margin-left:2px!important;padding-left:3px!important;min-width:22px!important;}
}
/* Account access belongs beside identity, ahead of records and equipment.
   Editing stays expandable so the overview remains calm. */
#modal-profile .profile-edit-link {align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:2px 0;margin:0;border:0;background:none;color:var(--gold-ink);font:600 13px/1.15 var(--ui-display);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
#modal-profile .profile-edit-link:focus-visible {outline:2px solid var(--gold);outline-offset:3px;}
#modal-profile #profileManage {border:0!important;margin:0!important;}
#modal-profile #profileManage>summary {display:none;}
#modal-profile #profileManage:not([open]) {display:none;}
#modal-profile #profileManage>.profile-fold-body {padding:0!important;}
#modal-profile #profileAccount.profile-account {border-color:var(--chrome-border-strong);background:var(--chrome-well);}
body #modal-profile #profileAccount #accountGuestState {display:flex;align-items:center;gap:12px;}
#modal-profile #accountGuestState>p {margin:0;flex:1 1 auto;font-size:12px;line-height:1.4;max-width:270px;}
#modal-profile #googleSignInMount {flex:0 0 auto;min-width:0;}
@media(max-width:690px){
 body #modal-profile #profileAccount #accountGuestState {flex-direction:column;align-items:stretch;gap:10px;}
 #modal-profile #accountGuestState>p {max-width:none;}
 #modal-profile #googleSignInMount {width:100%;}
 #modal-profile .profile-edit-link {font-size:12px;}
 #modal-profile .profile-title-v34 {gap:4px!important;}
}
body #screen-game #playerRail .pchip .opponent-hand>.opponent-back+.opponent-back,body #screen-game #playerRail .pchip .opponent-hand>.opponent-card-stack {margin-left:0!important;}
@media(max-width:760px) and (orientation:portrait){
 body[data-game="kounga"] #screen-game .discard-pile>.table-card {width:calc(var(--pile-w) - 9px)!important;height:calc(var(--pile-h) - 9px)!important;}
}
@media(max-width:360px) and (orientation:portrait){
 body #screen-game #playerRail .pchip .tablet-hand-caption>small {font-size:7px!important;}
 body #screen-game #playerRail .pchip .tablet-hand-caption {flex:0 0 auto!important;min-width:20px!important;}
}
@media(min-width:361px) and (max-width:414px) and (orientation:portrait){
 body #screen-game #playerRail .pchip :is(.opponent-back,.opponent-card-stack) {width:22px!important;height:31px!important;flex-basis:22px!important;}
}
body #screen-game #playerRail .pchip .opponent-card-stack[data-digits="3"]>b {font-size:7px!important;letter-spacing:0!important;}
/* Counted backs retain a real card shape even for unusually large hands. */
body #screen-game #playerRail .pchip .opponent-card-stack[data-digits="2"]>b {font-size:12px!important;letter-spacing:0!important;}
@media(max-width:760px),(pointer:coarse) and (max-height:559px){
 body #screen-game #playerRail .pchip .opponent-card-stack[data-digits="2"]>b {font-size:9px!important;}
}
@media(max-width:360px){body #screen-game #playerRail .pchip .opponent-card-stack[data-digits="2"]>b {font-size:8.5px!important;}}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px){
 body #screen-game #playerRail .pchip .opponent-hand>:is(.opponent-back,.opponent-card-stack) {--seat-back-w:clamp(20px,3vw,26px);width:var(--seat-back-w)!important;height:calc(var(--seat-back-w) * 1.43)!important;flex-basis:var(--seat-back-w)!important;}
 body #screen-game #playerRail .pchip .opponent-card-stack[data-digits="2"]>b {font-size:9.5px!important;}
}
@media(pointer:coarse) and (min-width:600px) and (min-height:560px) and (orientation:landscape){
 body #screen-game #playerRail .pchip .opponent-hand>:is(.opponent-back,.opponent-card-stack) {--seat-back-w:22px;}
}
@media(max-width:360px){
 /* Identity remains one column; an old display:contents rule put the score
    back underneath the avatar instead of underneath the player's name. */
 body #screen-game #playerRail .pchip:not(.is-me) .pchip-body {display:flex!important;flex-direction:column!important;align-items:flex-start!important;}
 body #screen-game #playerRail .pchip:not(.is-me) .pchip-meta {align-self:stretch!important;}
}