/* v16 — approved rounded ticket system. Only card flows and their dialogs opt in. The race HUD, stage, entry, lobby and results retain their v15 styles. */ @font-face{font-family:ZooRound;src:url('./assets/zoo-round.woff2') format('woff2');font-weight:400 950;font-display:swap} #party-ui .cards-flow{font-family:ZooRound,PartyNoto,'PingFang SC',sans-serif;font-weight:800;--card-ink:#11244f;color:var(--card-ink)} #party-ui .cards-flow :is(h1,h2,h3,strong,b){font-weight:900;-webkit-text-stroke:0} #party-ui .cards-flow :is(button,small){font-weight:800} #party-ui .cards-flow .phase-head{min-height:0;gap:8px;margin:0 0 18px;padding:0 22%;flex-shrink:0} #party-ui .cards-flow .phase-title{padding:10px 24px} #party-ui .cards-flow .phase-title h1{font-size:clamp(22px,2.3vw,34px);white-space:normal;text-align:center} #party-ui .cards-flow .phase-subtitle{font-size:15px;min-width:0;max-width:100%;line-height:1.4} #party-ui .cards-flow .party-button{font-size:clamp(19px,2vw,28px);color:var(--card-ink);text-shadow:0 1px #fff9;min-height:52px} #party-ui .cards-flow .party-button:disabled{color:#57708c;text-shadow:none} #party-ui .cards-flow .paper-panel{background:linear-gradient(135deg,#fffef8,#fff9e9);border-radius:32px} #party-ui .cards-flow .draft-layout{display:block;flex:1;min-height:0} #party-ui .cards-flow .ticket-grid{height:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));padding:18px 20px 25px;gap:20px;overflow:visible} #party-ui .cards-flow .ticket-stack{min-height:0;display:block;border:0;border-radius:28px;background:none;box-shadow:none;transform:none;padding:0} #party-ui .cards-flow .ticket-stack::before,#party-ui .cards-flow .ticket-stack::after{display:none} #party-ui .cards-flow .ticket-identity{position:relative;isolation:isolate;display:block;width:100%;height:100%;min-height:0;border:4px solid white;border-radius:28px;background:radial-gradient(ellipse at 40% 0,#fff9,transparent 75%),linear-gradient(140deg,var(--ticket-light),var(--ticket));box-shadow:inset 0 0 0 3px var(--ticket),inset 0 0 0 5px #fffc,0 4px var(--ticket),0 7px var(--ticket-deep),0 9px 9px #12274622} #party-ui .cards-flow .ticket-identity::before,#party-ui .cards-flow .ticket-identity::after{content:'';position:absolute;top:43%;width:13px;height:24px;background:#fffbed;border:2px solid var(--ticket-deep);z-index:4} #party-ui .cards-flow .ticket-identity::before{left:-4px;border-left:0;border-radius:0 20px 20px 0} #party-ui .cards-flow .ticket-identity::after{right:-4px;border-right:0;border-radius:20px 0 0 20px} #party-ui .cards-flow .ticket-identity>.animal,#party-ui .cards-flow .ticket-identity>.event-art{position:absolute;left:50%;top:0;transform:translateX(-50%);height:76%;width:auto;max-width:90%;aspect-ratio:1} #party-ui .cards-flow .ticket-identity>.event-art{height:65%;top:3%;filter:drop-shadow(0 3px 0 #ffffffa0)} #party-ui .cards-flow .ticket-identity>.animal-badge{position:absolute;left:10px;top:10px;z-index:3} #party-ui .cards-flow .ticket-name{position:absolute;bottom:32px;left:12px;right:12px;border-radius:40px;background:#fffffff2;font-size:clamp(22px,2.5vw,36px);padding:3px 6px;line-height:1.2;text-align:center;box-shadow:inset 0 1px white;z-index:3} #party-ui .cards-flow .ticket-meta{position:absolute;bottom:7px;left:12px;right:12px;display:grid;grid-template-columns:1fr 1fr;gap:4px;z-index:3;text-align:center} #party-ui .cards-flow .ticket-meta>:is(.stack-tier,.stock-badge){position:static;display:block;min-width:0;padding:0;border:0;background:none;color:var(--card-ink);text-shadow:none;font-size:15px;line-height:1.3} #party-ui .cards-flow .ticket-meta>.stock-badge{border-left:1px solid #163f4e44;border-radius:0} #party-ui .cards-flow .ticket-paw{right:8%;top:32%;opacity:.35} #party-ui .cards-flow .ticket-stack.sold-out{filter:grayscale(.8);opacity:.8} #party-ui .cards-flow .ticket-stack.chosen{outline:3px solid #ffac44;outline-offset:6px} #party-ui .cards-flow .draft-footer{min-height:70px;margin-top:18px;gap:14px} #party-ui .cards-flow .draft-footer>.party-button{min-width:150px} #party-ui .cards-flow .own-picks{flex:1;min-height:66px;max-height:90px;gap:10px;padding:7px 9px;border:3px solid white;border-radius:24px} #party-ui .cards-flow .picks-label{display:none} #party-ui .cards-flow .ticket-chip{min-height:48px;padding:5px 8px;gap:7px;border:2px dashed #6bc9ec;border-radius:18px} #party-ui .cards-flow .ticket-chip>:is(.animal,.event-art){width:42px;height:42px} #party-ui .cards-flow .ticket-chip strong{font-size:18px;line-height:1.2} #party-ui .cards-flow .ticket-chip small{font-size:13px;line-height:1.35} /* A full detail surface on either orientation; identity and rewards never compete with six stacks. */ #party-ui .cards-detail-dialog{width:min(1050px,96vw);height:min(660px,calc(var(--view-height,100dvh) - 32px));max-width:none;max-height:none} #party-ui .cards-flow.ticket-detail{display:flex;gap:0;padding:0;height:100%;max-height:none;overflow:visible;background:none;border:0;box-shadow:none} #party-ui .cards-flow.ticket-detail .phase-head{padding:0;gap:0;margin-bottom:16px} #party-ui .cards-flow .detail-panel{flex:1;min-height:0;padding:20px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:24px;overflow:auto} #party-ui .cards-flow .detail-identity{min-height:180px;min-width:0;padding-bottom:7px} #party-ui .cards-flow .detail-choices{display:flex;flex-direction:column;gap:16px;justify-content:center;min-width:0} #party-ui .cards-flow .face-switch{gap:12px} #party-ui .cards-flow .face-switch>.party-button{min-height:60px;font-size:27px} #party-ui .cards-flow .face-switch .selected{outline:3px solid #fff;outline-offset:1px} #party-ui .cards-flow .reward-panel{background:#fffcf0;border:2px solid #f1d995;border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:12px} #party-ui .cards-flow .reward-title{font-size:21px;text-align:center} #party-ui .cards-flow .payout-grid{min-height:0;gap:9px;grid-template-columns:repeat(4,minmax(0,1fr))} #party-ui .cards-flow .payout-grid.event-payout{grid-template-columns:repeat(2,minmax(0,1fr))} #party-ui .cards-flow .payout{border-radius:17px;min-width:0} #party-ui .cards-flow .payout>span{font-size:16px;padding:8px 1px} #party-ui .cards-flow .payout>b{font-size:36px;padding:9px 1px} #party-ui .cards-flow .detail-warning{font-size:14px;background:#fae9bf;border-radius:30px;padding:6px;text-align:center} #party-ui .cards-flow .detail-warning.risk-warning{background:#ffe4e9;color:#ad2845} #party-ui .cards-flow .event-question{font-size:20px;text-align:center;line-height:1.4} #party-ui .cards-flow .detail-confirm{margin:0;gap:12px;display:grid;grid-template-columns:minmax(0,1fr) auto} #party-ui .cards-flow .detail-confirm>.party-button{min-height:58px;padding:9px 16px;font-size:24px} #party-ui .cards-flow .detail-confirm>[data-action=change-ticket]{font-size:18px;border-style:dashed;box-shadow:none} /* Public cards: five identity groups, compact equal cards with an explicit count. */ #party-ui .cards-flow .opening-body{display:block;flex:1;min-height:0;padding:16px;overflow:auto} #party-ui .cards-flow .opening-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;flex-shrink:0} #party-ui .cards-flow .opening-footer>p{font-size:13px;line-height:1.4;padding:5px 12px;background:#fffdf3e8;border-radius:18px} #party-ui .cards-flow .opening-footer>.party-button{min-width:220px} /* All three secret cards are real, simultaneous choices — no carousel or paging controls. */ #party-ui .cards-flow .submit-status{display:flex;justify-content:flex-end;min-height:48px;flex-shrink:0;margin:0 0 8px} #party-ui .cards-flow .submit-status>.party-button{font-size:15px;min-height:48px;padding:6px 14px} #party-ui .cards-flow .hand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);flex:1;min-height:0;max-height:none;gap:16px;padding:4px 6px 10px;overflow:visible;margin:0;scroll-snap-type:none} #party-ui .cards-flow .action-card{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto 58px;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;width:auto;flex:auto;margin:0;padding:10px 14px;border:4px solid white;border-radius:28px;overflow:visible;background:radial-gradient(ellipse at 30% 0,#fff8,transparent),linear-gradient(145deg,var(--action-light),var(--action-fill));box-shadow:inset 0 0 0 3px var(--action-edge),inset 0 0 0 5px #fffc,0 5px var(--action-edge);gap:4px;text-align:center} #party-ui .cards-flow .action-card.chosen{outline:3px solid #ffac3e;outline-offset:1px;box-shadow:inset 0 0 0 3px #ffbd59,inset 0 0 0 5px #fff,0 5px #ff9f30;transform:none} #party-ui .cards-flow .action-card .card-topline{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;z-index:3;pointer-events:none} #party-ui .cards-flow .card-topline>span:last-child{display:none} #party-ui .cards-flow .action-art{display:flex;align-items:center;justify-content:center;position:static;min-height:0;padding:0;transform:none} #party-ui .cards-flow .action-art>:is(.animal,.event-art,.animal-group){position:static;display:block;width:auto;height:100%;aspect-ratio:1;min-height:0;max-height:100%;max-width:100%;transform:none} #party-ui .cards-flow .action-art>.animal-group{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%;max-width:160px} #party-ui .cards-flow .action-art>.animal-group>.animal{width:100%;height:auto;min-height:0} #party-ui .cards-flow .action-description{display:flex;flex-direction:column;gap:4px;padding:0;background:none;position:static;min-width:0;z-index:2} #party-ui .cards-flow .action-description>small{display:block;font-size:22px;line-height:1.2;margin:0} #party-ui .cards-flow .action-description>strong{font-size:26px;line-height:1.25;white-space:normal;overflow-wrap:anywhere;background:#ffffffe0;padding:7px 10px;border-radius:30px;box-shadow:0 2px #ffffff75} #party-ui .cards-flow .action-symbol{position:static;display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:3;width:100%;height:100%;min-width:0;border:0;box-shadow:none;background:none;overflow:visible;transform:none;padding:0} #party-ui .cards-flow .action-symbol>.icon{width:58px;height:58px;max-height:100%;max-width:100%;transform:none} #party-ui .cards-flow .selection-stamp{position:absolute;top:6px;right:6px;width:38px;height:38px;border:3px solid white;border-radius:50%;background:linear-gradient(#ffca66,#ff9420);box-shadow:0 2px #c66b13;color:#fff;display:grid;place-items:center;z-index:5;transform:none} #party-ui .cards-flow .submit-bottom{display:flex;flex-direction:column;gap:12px;margin:12px auto 0;width:min(100%,750px);flex-shrink:0} #party-ui .cards-flow .submit-bottom .own-picks{width:100%;min-height:66px;flex:none} #party-ui .cards-flow .submit-confirm-area{width:100%;text-align:center} #party-ui .cards-flow .submit-confirm-area>.party-button{width:min(100%,520px);min-height:58px;font-size:28px} #party-ui .cards-flow .submit-confirm-area p{font-size:13px;margin-top:7px;line-height:1.2;background:#ffffffe5;border-radius:20px;display:table;margin-left:auto;margin-right:auto;padding:2px 14px} #party-ui .cards-flow .locked-body{display:flex;flex-direction:column;flex:1;min-height:0;gap:12px;overflow:auto} #party-ui .cards-flow .locked-envelope{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;flex:0 0 70px;min-height:0;max-height:none;padding:10px;border-radius:24px} #party-ui .cards-flow .locked-envelope>.icon{width:36px;height:36px} #party-ui .cards-flow .locked-envelope strong{font-size:22px} #party-ui .cards-flow .locked-envelope small{font-size:14px} #party-ui .cards-flow .submission-seats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(65px,1fr));gap:10px;flex:1;min-height:0;padding:12px;overflow:visible} #party-ui .cards-flow .submission-seats>div{display:flex;justify-content:center;align-items:center;min-height:0;padding:8px;border:2px solid #c4dfeb;border-radius:20px;background:#f6fbff} #party-ui .cards-flow .submission-seats>div.done{background:#d8fff3;border-color:#52d7b0} #party-ui .cards-flow .submission-seats strong{display:block;font-size:16px;text-align:center;line-height:1.3;overflow-wrap:anywhere} #party-ui .cards-flow .submission-seats small{display:block;font-size:13px;text-align:center;margin-top:4px} /* Doubling shows the complete original payout and, only on the chosen ticket, its doubled payout. */ #party-ui .cards-flow .double-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);flex:1;min-height:0;gap:20px;padding:5px;overflow:visible} #party-ui .cards-flow .double-ticket{display:flex;flex-direction:column;position:relative;min-height:0;min-width:0;gap:10px;padding:15px;border:4px solid white;border-radius:30px;background:linear-gradient(135deg,var(--ticket-light),var(--ticket));box-shadow:inset 0 0 0 3px var(--ticket),inset 0 0 0 5px #fff9,0 5px var(--ticket-deep);overflow:visible} #party-ui .cards-flow .double-ticket.chosen{outline:3px solid #29dfc1;outline-offset:2px;transform:none} #party-ui .cards-flow .double-identity{display:flex;align-items:center;justify-content:center;gap:10px;min-height:0;flex:1} #party-ui .cards-flow .double-identity>:is(.animal,.event-art){height:100%;width:auto;max-height:150px;aspect-ratio:1} #party-ui .cards-flow .double-copy{display:flex;flex-direction:column;gap:7px;min-width:0;text-align:center} #party-ui .cards-flow .double-copy strong{font-size:30px;line-height:1.2} #party-ui .cards-flow .double-copy small{font-size:16px;padding:5px 12px;background:#ffffffe6;border-radius:24px;white-space:normal} #party-ui .cards-flow .double-check{position:absolute;right:10px;top:10px;width:36px;height:36px;border:3px solid white;background:#fff8;border-radius:50%;display:grid;place-items:center} #party-ui .cards-flow .chosen .double-check{background:#09cba7;color:white} #party-ui .cards-flow .double-check>.icon{width:27px;height:27px} #party-ui .cards-flow .double-rates{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;background:#fffbed;border-radius:22px;flex-shrink:0;font-size:16px} #party-ui .cards-flow .rate-block{display:flex;flex-direction:column;gap:6px;border-radius:16px;padding:6px;background:#e3f6ff} #party-ui .cards-flow .rate-block.doubled{background:#fff0c2;color:#ad4c0e} #party-ui .cards-flow .rate-block>strong{font-size:16px} #party-ui .cards-flow .rate-block>div{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px} #party-ui .cards-flow .rate-block>div>span{display:flex;flex-direction:column;gap:3px;border-right:1px solid #629cbc44} #party-ui .cards-flow .rate-block>div>span:last-child{border:0} #party-ui .cards-flow .rate-block small{font-size:14px} #party-ui .cards-flow .rate-block b{font-size:26px;line-height:1.15} #party-ui .cards-flow .double-footer{padding:0;margin-top:18px;display:flex;justify-content:center;flex-shrink:0} #party-ui .cards-flow .double-footer>.party-button{width:min(100%,550px);min-height:58px} /* Related read-only card dialogs share the same material and readable typography. */ #party-ui .cards-dialog{width:min(1100px,96vw);max-width:none;max-height:calc(var(--view-height,100dvh) - 28px)} #party-ui .cards-dialog>header h2{font-size:25px} #party-ui .cards-dialog .dialog-body{min-height:0;padding:12px 20px;overflow:auto} #party-ui .cards-dialog :is(.dialog-section-title,.dialog-note){font-size:15px;margin:8px 0} #party-ui .cards-dialog .readonly-hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;padding:6px;min-height:0} #party-ui .cards-dialog .readonly-hand .action-card{height:230px;min-width:0} #party-ui .cards-dialog .dialog-ticket-list{gap:10px} #party-ui .cards-dialog .dialog-ticket-list>div{border:3px solid white;border-radius:23px;background:linear-gradient(135deg,#fff,var(--ticket-light));box-shadow:inset 0 0 0 2px var(--ticket);padding:10px;gap:8px} #party-ui .cards-dialog .dialog-ticket-list strong{font-size:20px} #party-ui .cards-dialog .dialog-ticket-list :is(small,b){font-size:14px;line-height:1.4} #party-ui .cards-dialog .table-tickets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:visible} #party-ui .cards-dialog .table-tickets>section{display:flex;flex-direction:column;min-height:0;padding:8px;border-radius:20px;gap:6px;background:#fffef9;border:2px solid #e0ccf2} #party-ui .cards-dialog .table-player{min-width:0;display:block} #party-ui .cards-dialog .table-player strong{font-size:16px;display:flex;flex-wrap:wrap;gap:7px;justify-content:space-between} #party-ui .cards-dialog .table-player small{font-size:13px} #party-ui .cards-dialog .table-picks{display:grid;grid-template-columns:1fr 1fr;gap:7px} #party-ui .cards-dialog .mini-ticket{display:flex;flex-direction:column;gap:3px;padding:5px;border:2px solid white;border-radius:13px;background:linear-gradient(130deg,#fff,var(--ticket-light));box-shadow:0 2px var(--ticket-deep);min-width:0} #party-ui .cards-dialog .mini-ticket b{font-size:16px} #party-ui .cards-dialog .mini-ticket small{font-size:13px;white-space:normal} #party-ui .cards-dialog .submission-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;list-style:none} #party-ui .cards-dialog .submission-list li{display:flex;flex-direction:column;gap:5px;border:2px solid #d7e8f4;border-radius:20px;padding:10px;min-width:0} #party-ui .cards-dialog .submission-list strong{font-size:16px;overflow-wrap:anywhere} #party-ui .cards-dialog .submission-list span{font-size:14px} /* Portrait: six tickets in two columns; three hand cards become horizontal rows. */ @media(orientation:portrait) and (max-width:900px){ #party-ui:is([data-phase=draft],[data-phase=submit],[data-phase=double]) #party-content{top:max(82px,calc(env(safe-area-inset-top) + 76px));bottom:max(25px,calc(env(safe-area-inset-bottom) + 12px))} #party-ui:is([data-phase=draft],[data-phase=submit],[data-phase=double]) .party-logo>img{width:170px} #party-ui .cards-flow .phase-head{padding:0;gap:6px;margin-bottom:12px} #party-ui .cards-flow .phase-title{padding:6px 14px} #party-ui .cards-flow .phase-title h1{font-size:clamp(19px,5.2vw,29px)} #party-ui .cards-flow .phase-subtitle{font-size:13px;padding:4px 10px} #party-ui .cards-flow .ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:13px 12px;padding:12px 12px 20px} #party-ui .cards-flow .ticket-identity{border-width:3px;border-radius:24px} #party-ui .cards-flow .ticket-identity>.animal-badge{left:7px;top:7px;width:30px;height:33px;font-size:22px;border-width:2px} #party-ui .cards-flow .ticket-name{bottom:24px;left:9px;right:9px;font-size:clamp(20px,5.5vw,30px);padding:3px} #party-ui .cards-flow .ticket-meta{bottom:5px;left:6px;right:6px} #party-ui .cards-flow .ticket-meta>:is(.stack-tier,.stock-badge){font-size:13px} #party-ui .cards-flow .ticket-paw>.icon{width:25px;height:25px} #party-ui .cards-flow .draft-footer{margin-top:12px;min-height:62px;gap:8px} #party-ui .cards-flow .draft-footer>.party-button{min-width:88px;font-size:17px;padding:6px 8px;flex:0 0 28%} #party-ui .cards-flow .own-picks{padding:5px;gap:6px;min-height:60px} #party-ui .cards-flow .ticket-chip{gap:3px;padding:3px;flex-direction:row;text-align:center} #party-ui .cards-flow .ticket-chip>:is(.animal,.event-art){width:30px;height:30px} #party-ui .cards-flow .ticket-chip strong{font-size:15px} #party-ui .cards-flow .ticket-chip small{font-size:13px} #party-ui .cards-flow .ticket-chip.empty>.icon{display:none} #party-ui .cards-flow .ticket-chip.empty strong{font-size:13px} #party-ui .cards-flow .ticket-chip.empty small{display:none} #party-ui .cards-detail-dialog{height:min(780px,calc(var(--view-height,100dvh) - 30px));width:calc(100% - 8px)} #party-ui .cards-flow .detail-panel{display:flex;flex-direction:column;padding:14px;gap:16px;overflow:auto;border-radius:28px} #party-ui .cards-flow .detail-identity{flex:1;min-height:130px;max-height:320px;padding-bottom:0} #party-ui .cards-flow .detail-identity .ticket-name{font-size:27px} #party-ui .cards-flow .detail-choices{flex:none;gap:12px} #party-ui .cards-flow .face-switch>.party-button{font-size:24px;min-height:54px} #party-ui .cards-flow .reward-panel{padding:9px;gap:8px;border-radius:20px} #party-ui .cards-flow .reward-title{font-size:18px} #party-ui .cards-flow .payout-grid{gap:6px} #party-ui .cards-flow .payout>span{font-size:14px;padding:5px 0} #party-ui .cards-flow .payout>b{font-size:30px;padding:5px 0} #party-ui .cards-flow .detail-warning{font-size:13px;padding:5px} #party-ui .cards-flow .detail-confirm{gap:8px} #party-ui .cards-flow .detail-confirm>.party-button{font-size:22px;min-height:55px;padding:6px 10px} #party-ui .cards-flow .detail-confirm>[data-action=change-ticket]{font-size:16px} #party-ui .cards-flow .event-question{font-size:17px} #party-ui .cards-flow .opening-body{padding:9px} #party-ui .cards-flow .opening-footer{padding-top:10px;gap:7px} #party-ui .cards-flow .opening-footer p{font-size:12px;padding:4px 7px} #party-ui .cards-flow .opening-footer>.party-button{min-width:125px;font-size:21px;min-height:50px} #party-ui .cards-flow .submit-status{margin-bottom:6px} #party-ui .cards-flow .hand-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding:3px 3px 8px} #party-ui .cards-flow .hand-grid .action-card,#party-ui .cards-dialog .readonly-hand .action-card{grid-template-columns:32% minmax(0,1fr) 18%;grid-template-rows:minmax(0,1fr);padding:7px 9px;gap:2px;border-width:3px;border-radius:23px} #party-ui .cards-flow .action-card .card-topline{top:5px;left:5px;right:5px} #party-ui .cards-flow .card-topline .animal-badge{width:25px;height:29px;font-size:20px;border-width:2px} #party-ui .cards-flow .action-description>small{font-size:19px} #party-ui .cards-flow .action-description>strong{font-size:clamp(18px,4.9vw,27px);padding:5px 4px} #party-ui .cards-flow .action-symbol{grid-column:3;grid-row:1} #party-ui .cards-flow .action-symbol>.icon{width:55px;height:65px} #party-ui .cards-flow .selection-stamp{width:28px;height:28px;top:3px;right:3px;border-width:2px} #party-ui .cards-flow .submit-bottom{margin-top:8px;gap:9px} #party-ui .cards-flow .submit-bottom .own-picks{min-height:60px} #party-ui .cards-flow .submit-confirm-area>.party-button{min-height:54px;font-size:27px} #party-ui .cards-flow .submit-confirm-area p{margin-top:6px;font-size:13px} #party-ui .cards-flow .locked-body{gap:10px} #party-ui .cards-flow .locked-envelope{flex-basis:60px;gap:6px;flex-wrap:wrap;padding:6px} #party-ui .cards-flow .locked-envelope strong{font-size:19px} #party-ui .cards-flow .locked-envelope small{font-size:13px} #party-ui .cards-flow .submission-seats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(49px,1fr));gap:7px;padding:9px} #party-ui .cards-flow .submission-seats>div{padding:5px;border-radius:15px} #party-ui .cards-flow .submission-seats strong{font-size:14px} #party-ui .cards-flow .submission-seats small{font-size:13px;margin-top:2px} #party-ui .cards-flow .double-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;padding:4px} #party-ui .cards-flow .double-ticket{padding:9px;gap:6px;border-width:3px;border-radius:25px} #party-ui .cards-flow .double-identity{min-height:50px;gap:5px} #party-ui .cards-flow .double-identity>:is(.animal,.event-art){max-height:100px} #party-ui .cards-flow .double-copy strong{font-size:25px} #party-ui .cards-flow .double-copy small{font-size:14px;padding:3px 8px} #party-ui .cards-flow .double-rates{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:6px;padding:5px;border-radius:17px;width:100%} #party-ui .cards-flow .rate-block{gap:4px;padding:5px 3px} #party-ui .cards-flow .rate-block>strong{font-size:13px} #party-ui .cards-flow .rate-block small{font-size:12px} #party-ui .cards-flow .rate-block b{font-size:22px} #party-ui .cards-flow .double-check{width:30px;height:30px;top:7px;right:7px;border-width:2px} #party-ui .cards-flow .double-check>.icon{width:24px;height:24px} #party-ui .cards-flow .double-footer{margin-top:12px} #party-ui .cards-flow .double-footer>.party-button{min-height:54px;font-size:24px} #party-ui .cards-dialog{width:100%;max-height:calc(var(--view-height,100dvh) - 24px)} #party-ui .cards-dialog>header h2{font-size:21px} #party-ui .cards-dialog .dialog-body{padding:8px 10px} #party-ui .cards-dialog .readonly-hand{grid-template-columns:1fr;gap:9px;padding:3px} #party-ui .cards-dialog .readonly-hand .action-card{height:92px} #party-ui .cards-dialog .dialog-ticket-list>div{padding:6px} #party-ui .cards-dialog .dialog-ticket-list :is(.animal,.event-art){width:40px;height:40px} #party-ui .cards-dialog .dialog-ticket-list strong{font-size:18px} #party-ui .cards-dialog .dialog-ticket-list :is(small,b){font-size:13px} #party-ui .cards-dialog .table-tickets{grid-template-columns:1fr;gap:6px} #party-ui .cards-dialog .table-tickets>section{padding:5px 7px;gap:3px} #party-ui .cards-dialog .table-player strong{font-size:14px} #party-ui .cards-dialog .mini-ticket{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px;padding:3px} #party-ui .cards-dialog .mini-ticket b{font-size:14px} #party-ui .cards-dialog .mini-ticket small{font-size:12px} } /* Short landscape keeps the same hierarchy with shallower artwork, never shrinks the whole page. */ @media(orientation:landscape) and (max-height:580px){ #party-ui:is([data-phase=draft],[data-phase=submit],[data-phase=double]) #party-content{top:10px;bottom:max(20px,calc(env(safe-area-inset-bottom) + 10px));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))} #party-ui .cards-flow .phase-head{padding:0 23%;gap:4px;margin-bottom:8px} #party-ui .cards-flow .phase-title{padding:4px 10px;border-width:3px} #party-ui .cards-flow .phase-title h1{font-size:20px} #party-ui .cards-flow .phase-title>.icon{width:24px;height:24px} #party-ui .cards-flow .phase-subtitle{font-size:13px;padding:2px 8px} #party-ui .cards-flow .ticket-grid{padding:8px 12px 14px;gap:13px 15px;border-radius:24px} #party-ui .cards-flow .ticket-identity{border-width:2px;border-radius:20px} #party-ui .cards-flow .ticket-identity>.animal-badge{top:5px;left:6px;width:27px;height:30px;font-size:22px;border-width:2px} #party-ui .cards-flow .ticket-name{bottom:21px;left:9px;right:9px;font-size:21px;padding:1px 5px} #party-ui .cards-flow .ticket-meta{bottom:4px} #party-ui .cards-flow .ticket-meta>:is(.stack-tier,.stock-badge){font-size:13px} #party-ui .cards-flow .draft-footer{min-height:48px;margin-top:10px;gap:10px} #party-ui .cards-flow .own-picks{min-height:48px;padding:3px 6px;gap:7px;border-width:2px} #party-ui .cards-flow .ticket-chip{min-height:48px;padding:2px 5px} #party-ui .cards-flow .ticket-chip>:is(.animal,.event-art){width:32px;height:32px} #party-ui .cards-flow .ticket-chip strong{font-size:15px} #party-ui .cards-flow .ticket-chip small{font-size:13px} #party-ui .cards-flow .draft-footer>.party-button{min-width:140px;min-height:48px;font-size:18px} #party-ui .cards-detail-dialog{height:calc(var(--view-height,100dvh) - 26px);width:min(1050px,95vw)} #party-ui .cards-flow.ticket-detail .phase-head{margin-bottom:8px} #party-ui .cards-flow .detail-panel{padding:12px;gap:18px} #party-ui .cards-flow .detail-identity{min-height:0} #party-ui .cards-flow .detail-choices{gap:8px} #party-ui .cards-flow .face-switch>.party-button{min-height:48px;font-size:22px;padding:4px 10px} #party-ui .cards-flow .reward-panel{padding:6px 9px;gap:5px;border-radius:18px} #party-ui .cards-flow .reward-title{font-size:17px} #party-ui .cards-flow .payout-grid{gap:6px} #party-ui .cards-flow .payout>span{font-size:13px;padding:4px 0} #party-ui .cards-flow .payout>b{font-size:28px;padding:3px 0} #party-ui .cards-flow .detail-warning{font-size:13px;padding:3px} #party-ui .cards-flow .event-question{font-size:16px} #party-ui .cards-flow .detail-confirm>.party-button{min-height:48px;padding:4px 10px;font-size:20px} #party-ui .cards-flow .detail-confirm>[data-action=change-ticket]{font-size:16px} #party-ui .cards-flow .opening-body{padding:8px} #party-ui .cards-flow .opening-footer{padding-top:7px} #party-ui .cards-flow .opening-footer>p{font-size:12px;line-height:1.2;padding:3px 8px} #party-ui .cards-flow .opening-footer>.party-button{min-height:48px;font-size:20px;min-width:180px} #party-ui .cards-flow .submit-screen{position:relative} #party-ui .cards-flow .submit-status{position:absolute;right:0;top:61px;margin:0;z-index:3;transform:translateY(-100%)} #party-ui .cards-flow .submit-status>.party-button{font-size:13px;min-height:48px;padding:4px 9px} #party-ui .cards-flow .hand-grid{gap:12px;padding:4px 4px 7px} #party-ui .cards-flow .action-card{padding:7px 10px;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) 42px;gap:3px;border-radius:23px;border-width:3px} #party-ui .cards-flow .action-art{grid-column:1/-1;grid-row:1} #party-ui .cards-flow .action-description{grid-row:2;grid-column:1} #party-ui .cards-flow .action-description>small{font-size:16px} #party-ui .cards-flow .action-description>strong{font-size:19px;padding:4px} #party-ui .cards-flow .action-symbol{grid-row:2;grid-column:2} #party-ui .cards-flow .action-symbol>.icon{width:42px;height:48px} #party-ui .cards-flow .card-topline .animal-badge{width:25px;height:28px;font-size:20px;border-width:2px} #party-ui .cards-flow .action-card .card-topline{top:5px;left:5px} #party-ui .cards-flow .selection-stamp{width:29px;height:29px;border-width:2px;top:4px;right:4px} #party-ui .cards-flow .submit-bottom{flex-direction:row;align-items:center;gap:14px;margin:8px 0 0;width:100%} #party-ui .cards-flow .submit-bottom .own-picks{width:auto;flex:1;min-height:48px} #party-ui .cards-flow .submit-confirm-area{width:30%} #party-ui .cards-flow .submit-confirm-area>.party-button{min-height:48px;font-size:22px;padding:6px 10px} #party-ui .cards-flow .submit-confirm-area p{font-size:12px;margin-top:5px;padding:0 5px} #party-ui .cards-flow .locked-body{flex-direction:row;gap:12px} #party-ui .cards-flow .locked-envelope{flex:0 0 160px;flex-direction:column;max-height:none;padding:7px;gap:8px} #party-ui .cards-flow .locked-envelope strong{font-size:19px} #party-ui .cards-flow .submission-seats{gap:7px;padding:8px;grid-template-rows:repeat(2,minmax(55px,1fr))} #party-ui .cards-flow .submission-seats>div{padding:5px} #party-ui .cards-flow .submission-seats strong{font-size:13px} #party-ui .cards-flow .submission-seats small{font-size:12px} #party-ui .cards-flow .double-grid{gap:16px} #party-ui .cards-flow .double-ticket{padding:8px;gap:6px;border-width:3px} #party-ui .cards-flow .double-identity{min-height:38px;gap:7px} #party-ui .cards-flow .double-identity>:is(.animal,.event-art){max-height:65px} #party-ui .cards-flow .double-copy strong{font-size:22px} #party-ui .cards-flow .double-copy small{font-size:13px;padding:3px 7px} #party-ui .cards-flow .double-rates{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;padding:5px;gap:5px} #party-ui .cards-flow .rate-block{padding:4px 2px;gap:3px} #party-ui .cards-flow .rate-block>strong{font-size:13px} #party-ui .cards-flow .rate-block small{font-size:12px} #party-ui .cards-flow .rate-block b{font-size:23px} #party-ui .cards-flow .double-footer{margin-top:10px} #party-ui .cards-flow .double-footer>.party-button{min-height:48px;font-size:22px;padding:6px 12px} #party-ui .cards-dialog>header h2{font-size:21px} #party-ui .cards-dialog .readonly-hand .action-card{height:150px} } /* Extreme 320×480 viewports: trade decorative height before allowing a local scroll fallback. */ @media(orientation:portrait) and (max-height:600px){ #party-ui:is([data-phase=draft],[data-phase=submit],[data-phase=double]) #party-content{top:62px} #party-ui:is([data-phase=draft],[data-phase=submit],[data-phase=double]) .party-logo>img{width:130px} #party-ui .cards-flow .phase-head{gap:4px;margin-bottom:8px} #party-ui .cards-flow .phase-title{padding:4px 8px} #party-ui .cards-flow .phase-title h1{font-size:18px} #party-ui .cards-flow .phase-title>.icon{width:22px;height:22px} #party-ui .cards-flow .phase-subtitle{display:block;font-size:12px;padding:2px 7px} #party-ui .cards-flow .ticket-grid{gap:10px;padding:7px 8px 14px} #party-ui .cards-flow .ticket-name{font-size:19px;bottom:21px;padding:2px} #party-ui .cards-flow .ticket-meta>:is(.stack-tier,.stock-badge){font-size:12px} #party-ui .cards-flow .ticket-identity>.animal-badge{width:22px;height:25px;font-size:18px;top:4px;left:4px} #party-ui .cards-flow .draft-footer{min-height:52px;margin-top:8px} #party-ui .cards-flow .own-picks{min-height:52px;padding:2px} #party-ui .cards-flow .ticket-chip strong{font-size:13px} #party-ui .cards-flow .ticket-chip small{font-size:12px} #party-ui .cards-flow .ticket-chip>:is(.animal,.event-art){width:24px;height:24px} #party-ui .cards-flow .submit-status{min-height:48px;margin-bottom:4px} #party-ui .cards-flow .hand-grid{gap:7px} #party-ui .cards-flow .action-card{padding:5px} #party-ui .cards-flow .action-description>small{font-size:15px} #party-ui .cards-flow .action-description>strong{font-size:17px;padding:2px;line-height:1.2} #party-ui .cards-flow .submit-bottom{gap:6px;margin-top:5px} #party-ui .cards-flow .submit-bottom .own-picks{min-height:52px} #party-ui .cards-flow .submit-confirm-area>.party-button{min-height:48px;font-size:23px} #party-ui .cards-flow .submit-confirm-area p{margin-top:4px;font-size:12px} #party-ui .cards-flow .detail-panel{padding:9px;gap:10px} #party-ui .cards-flow .detail-identity{min-height:85px} #party-ui .cards-flow .detail-choices{gap:7px} #party-ui .cards-flow .detail-identity .ticket-name{font-size:23px} #party-ui .cards-flow .face-switch>.party-button{min-height:48px;font-size:20px} #party-ui .cards-flow .reward-panel{padding:6px;gap:5px} #party-ui .cards-flow .payout>b{font-size:26px;padding:2px} #party-ui .cards-flow .payout>span{font-size:13px;padding:3px 0} #party-ui .cards-flow .detail-confirm>.party-button{min-height:48px;font-size:20px} #party-ui .cards-flow .detail-confirm>[data-action=change-ticket]{font-size:15px} #party-ui .cards-flow .double-copy strong{font-size:21px} #party-ui .cards-flow .double-copy small{font-size:13px} #party-ui .cards-flow .double-identity{min-height:34px} #party-ui .cards-flow .double-rates{padding:3px;gap:3px} #party-ui .cards-flow .rate-block b{font-size:19px} #party-ui .cards-flow .rate-block small{font-size:11px} #party-ui .cards-flow .double-grid{gap:12px} #party-ui .cards-flow .double-footer{margin-top:10px} #party-ui .cards-flow .locked-envelope{flex-basis:45px} #party-ui .cards-flow .locked-envelope small{display:none} #party-ui .cards-flow .submission-seats{grid-template-rows:repeat(4,minmax(50px,1fr))} } /* Clear dimensions inherited from the retired carousel and floating status rail. */ #party-ui .cards-flow .hand-grid{width:100%;max-width:none;background:none;border:0;box-shadow:none} #party-ui .cards-flow .action-description{border:0;box-shadow:none} #party-ui .cards-flow .action-description>small{color:var(--card-ink)} #party-ui .cards-flow .submit-status{position:static;inset:auto;transform:none;justify-content:flex-end} #party-ui .cards-flow .double-rates{grid-template-columns:none;grid-auto-columns:minmax(0,1fr)} #party-ui .cards-flow .action-art>.animal{background-image:url('./assets/characters-v2-web-v6.webp')} @media(orientation:portrait) and (max-width:900px){ #party-ui .cards-flow .hand-grid .action-art{height:100%;min-height:0} #party-ui .cards-flow .hand-grid .action-art>.animal{height:110%;max-height:110%;max-width:110%} #party-ui .cards-flow .ticket-identity>.animal{height:90%;top:-9%} } @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-flow .submit-status{min-height:48px;margin-top:-4px;margin-bottom:5px} #party-ui .cards-flow .ticket-identity>.animal{height:95%;top:-14%} #party-ui .cards-flow .action-card{grid-template-columns:minmax(0,1fr) 38px;padding:6px 10px} #party-ui .cards-flow .action-description>strong{font-size:18px;padding:3px} #party-ui .cards-flow .action-description>small{font-size:15px} } #party-ui .cards-flow .opening-footer{flex-direction:row} @media(orientation:portrait) and (max-width:900px){ #party-ui .cards-flow .action-description{align-self:center} #party-ui .cards-flow .rate-block small{white-space:nowrap;font-size:12px;letter-spacing:-.4px} } @media(orientation:landscape) and (max-height:580px){ } @media(orientation:portrait) and (max-height:600px){ #party-ui .cards-flow .hand-grid .action-card{grid-template-columns:22% minmax(0,1fr) 14%;padding:4px 6px} #party-ui .cards-flow .hand-grid .action-description{flex-direction:row;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap} #party-ui .cards-flow .hand-grid .action-description>small{font-size:13px} #party-ui .cards-flow .hand-grid .action-description>strong{font-size:16px;background:none;padding:0;box-shadow:none} #party-ui .cards-flow .hand-grid .action-art>.animal{height:100%;max-height:100%} #party-ui .cards-flow .submit-screen .phase-subtitle{display:block} } @media(orientation:portrait) and (max-width:900px){ } @media(orientation:portrait) and (max-height:600px){ #party-ui .cards-flow.submit-screen{overflow:auto;padding:0 3px 6px} #party-ui .cards-flow.submit-screen:not(.submission-locked) .phase-subtitle{display:block} #party-ui .cards-flow .hand-grid{flex:1 0 170px;grid-template-rows:repeat(3,minmax(48px,1fr))} #party-ui .cards-flow .submission-seats{grid-template-rows:repeat(4,minmax(62px,1fr))} #party-ui .cards-flow .double-grid{grid-template-rows:repeat(2,minmax(145px,1fr));overflow:auto;padding:6px 5px 10px} } #party-ui .cards-dialog-tickets .table-tickets>section{display:grid;grid-template-columns:24% minmax(0,1fr);align-items:center;gap:6px;min-height:52px} #party-ui .cards-dialog .table-player strong{display:block;font-size:14px;line-height:1.3} #party-ui .cards-dialog .table-player small{display:none} #party-ui .cards-dialog-tickets>header{padding:8px 14px} #party-ui .cards-dialog-tickets>footer{padding:8px 14px;gap:10px} #party-ui .cards-dialog-tickets>footer>.party-button{min-height:48px;font-size:18px;padding:5px 14px} #party-ui .cards-dialog-tickets .table-tabs{margin:0 0 8px;gap:8px} #party-ui .cards-dialog-tickets .table-tabs>.party-button{min-height:48px;font-size:17px;padding:5px 10px} #party-ui .cards-dialog .table-picks{gap:4px} @media(orientation:portrait) and (max-width:900px){ #party-ui .cards-dialog-tickets .dialog-body{padding:4px 9px} #party-ui .cards-dialog-tickets .table-tickets{gap:4px} #party-ui .cards-dialog-tickets .table-tickets>section{padding:4px 6px;min-height:50px} #party-ui .cards-dialog .mini-ticket{display:flex;flex-direction:column;gap:1px;padding:3px} #party-ui .cards-dialog .mini-ticket small{font-size:12px;line-height:1.25} } #party-ui .cards-flow .opening-footer>p{order:0} #party-ui .cards-flow .opening-footer>.party-button{order:1} #party-ui .cards-dialog-mine>header{padding:8px 14px} #party-ui .cards-dialog-mine>footer{padding:8px 14px} #party-ui .cards-dialog-mine>footer>.party-button{min-height:48px;padding:5px 14px;font-size:18px} #party-ui .cards-dialog-mine .dialog-section-title{margin:5px 0;font-size:14px} @media(orientation:portrait) and (max-width:900px){ #party-ui .cards-dialog-mine .readonly-hand .action-card{height:80px} #party-ui .cards-flow .rate-block small{white-space:nowrap;letter-spacing:-.5px;font-size:12px} } @media(orientation:portrait) and (max-width:350px){ #party-ui .cards-flow .rate-block small{font-size:11px;letter-spacing:-.7px} #party-ui .cards-flow .rate-block b{font-size:18px} } @media(orientation:portrait) and (max-width:900px){ } @media(orientation:portrait) and (max-width:900px){#party-ui .cards-dialog-mine .readonly-hand .action-card{height:76px}} #party-ui .cards-dialog-tickets .table-tickets>section{grid-template-columns:30% minmax(0,1fr)} #party-ui .cards-dialog .table-player strong{font-size:13px;line-height:1.25} #party-ui .cards-dialog .mini-ticket{min-height:38px} #party-ui .cards-dialog-tickets .table-tabs{position:static;padding:0;margin:0 0 6px} #party-ui .cards-dialog .mini-ticket.empty{font-size:13px} @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-dialog-tickets .table-tickets>section{min-height:44px;padding:3px 5px} #party-ui .cards-dialog-tickets .table-tickets{gap:6px} #party-ui .cards-dialog .mini-ticket{min-height:32px;padding:2px} #party-ui .cards-dialog-tickets>header{padding:4px 12px} #party-ui .cards-dialog-tickets>footer{padding:5px 12px} #party-ui .cards-dialog-tickets .dialog-body{padding:4px 12px} #party-ui .cards-dialog-tickets .table-tabs>.party-button{min-height:48px} } @media(orientation:landscape) and (max-height:580px){ } @media(orientation:portrait) and (max-height:700px){#party-ui .cards-dialog-mine .readonly-hand .action-card{height:72px}} @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-dialog-mine .dialog-body{display:grid;grid-template-columns:30% minmax(0,1fr);grid-template-rows:24px minmax(0,1fr);gap:7px 14px;padding:5px 12px} #party-ui .cards-dialog-mine .dialog-section-title:first-child{grid-column:1;grid-row:1} #party-ui .cards-dialog-mine .dialog-ticket-list{grid-column:1;grid-row:2;display:flex;flex-direction:column;margin:0;gap:8px} #party-ui .cards-dialog-mine .dialog-section-title:nth-of-type(2){grid-column:2;grid-row:1} #party-ui .cards-dialog-mine .readonly-hand{grid-column:2;grid-row:2;gap:7px;padding:3px;margin:0} #party-ui .cards-dialog-mine .readonly-hand .action-card{height:160px;padding:6px;grid-template-columns:minmax(0,1fr) 26px} #party-ui .cards-dialog-mine .readonly-hand .action-description strong{font-size:16px} #party-ui .cards-dialog-mine .dialog-ticket-list>div{padding:5px;min-height:65px} #party-ui .cards-dialog-mine .dialog-ticket-list>:is(div)>:is(.animal,.event-art){width:35px;height:35px} #party-ui .cards-dialog-mine .dialog-ticket-list strong{font-size:17px} #party-ui .cards-dialog-mine .dialog-ticket-list :is(small,b){font-size:12px} #party-ui .cards-flow .rate-block small{white-space:nowrap;font-size:12px;letter-spacing:-.5px} } @media(orientation:landscape) and (max-height:360px){ #party-ui .cards-flow .double-identity{flex:1 0 32px;min-height:32px} #party-ui .cards-flow .double-identity>:is(.animal,.event-art){height:32px;max-height:32px} #party-ui .cards-flow .double-copy{flex-direction:row;align-items:center;gap:5px} #party-ui .cards-flow .double-copy strong{font-size:18px} #party-ui .cards-flow .double-copy small{font-size:12px;padding:3px 5px} #party-ui .cards-flow .rate-block small{font-size:11px;letter-spacing:-.5px} #party-ui .cards-flow .rate-block b{font-size:21px} #party-ui .cards-flow .submission-seats{grid-template-rows:repeat(2,minmax(68px,1fr));overflow:auto} } @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-dialog-tickets .mini-ticket b{font-size:14px;line-height:1.15} #party-ui .cards-dialog-tickets .mini-ticket small{font-size:12px;line-height:1.2} #party-ui .cards-dialog-tickets .mini-ticket{gap:1px;border-width:1px} #party-ui .cards-dialog-tickets .table-tickets{gap:4px} #party-ui .cards-dialog-tickets .table-tickets>section{padding:2px 5px} } @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-dialog-tickets{position:relative} #party-ui .cards-dialog-tickets>header h2{font-size:18px;max-width:35%} #party-ui .cards-dialog-tickets .table-tabs{position:absolute;top:9px;left:37%;right:74px;z-index:2;background:none;padding:0;margin:0} #party-ui .cards-dialog-tickets .table-tabs>.party-button{font-size:14px;padding:4px 5px;gap:3px} #party-ui .cards-dialog-tickets .table-tabs>.party-button>.icon{width:20px;height:20px} } @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-flow.opening-screen .phase-head{gap:2px;margin-bottom:5px} #party-ui .cards-flow.opening-screen .phase-title{padding:2px 10px;border-width:2px} #party-ui .cards-flow.opening-screen .phase-title h1{font-size:18px} #party-ui .cards-flow.opening-screen .phase-subtitle{font-size:12px;line-height:1.2;padding:1px 7px} } @media(orientation:landscape) and (max-height:580px){ #party-ui .cards-flow .locked-body{display:block} #party-ui .cards-flow .locked-envelope{display:none} #party-ui .cards-flow .submission-seats{height:100%;grid-template-rows:repeat(2,minmax(62px,1fr));padding:6px;gap:6px;border-width:3px;overflow:auto} #party-ui .cards-flow .submission-seats>div{padding:3px} #party-ui .cards-flow .submission-seats small{line-height:1.2} } #party-ui .cards-flow .rate-block,#party-ui .cards-flow .rate-block>div,#party-ui .cards-flow .rate-block>div>span{min-width:0} @media(orientation:landscape) and (max-width:740px){ #party-ui .cards-flow .rate-block b{font-size:18px} #party-ui .cards-flow .rate-block small{font-size:11px;letter-spacing:-.5px} #party-ui .cards-flow .rate-block>strong{font-size:12px} } #party-ui .cards-flow .action-card{max-width:none} @media(orientation:portrait) and (max-width:900px){ #party-ui .cards-dialog-tickets .mini-ticket b{font-size:14px;line-height:1.15} #party-ui .cards-dialog-tickets .mini-ticket small{font-size:12px;line-height:1.2} #party-ui .cards-dialog-tickets .mini-ticket{padding:2px;border-width:1px;gap:1px} #party-ui .cards-dialog-tickets .table-tickets>section{padding:3px 6px} } /* v18: five public groups fit one screen. Only their cards scroll horizontally. */ #party-ui .cards-flow .preview-lanes{--pc-w:104px;--pc-h:74px;--pc-icon:30px;--pc-steps:20px;--pc-title:14px;--pc-description:11px;--pc-main-y:2px;--pc-step-y:0px;--pc-title-y:34px;--pc-description-y:54px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;gap:6px;align-content:stretch;height:100%;min-height:0;padding:0;overflow:visible} #party-ui .cards-flow .preview-lane{container-type:size;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;min-height:0;height:100%;padding:4px;border:2px solid white;border-radius:19px;background:linear-gradient(135deg,var(--ticket-light),var(--ticket));box-shadow:inset 0 0 0 2px var(--ticket),0 2px var(--ticket-deep);overflow:hidden} #party-ui .cards-flow [data-preview-lane=all]{grid-column:auto;--ticket:#bc95f4;--ticket-light:#ecddff;--ticket-deep:#a172d9} #party-ui .cards-flow .preview-lane>header{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;min-width:0;min-height:0;gap:2px;padding:0;border:0;background:none;text-align:center;overflow:visible} #party-ui .cards-flow .preview-portrait{position:relative;display:block;flex:none;overflow:hidden;width:clamp(50px,calc(100cqh - 110px),112px);height:clamp(50px,calc(100cqh - 110px),112px);isolation:isolate} #party-ui .cards-flow .preview-portrait img{position:absolute;display:block;width:266.6667%;height:266.6667%;max-width:none;left:-16.6667%;top:-16.6667%;object-fit:fill;pointer-events:none} #party-ui .cards-flow .preview-portrait[data-portrait=B] img{left:-150%} #party-ui .cards-flow .preview-portrait[data-portrait=C] img{top:-150%} #party-ui .cards-flow .preview-portrait[data-portrait=D] img{left:-150%;top:-150%} #party-ui .cards-flow .preview-lane>header .event-art{width:50px;height:50px;flex:none} #party-ui .cards-flow .preview-identity{display:flex;align-items:center;justify-content:center;gap:4px;flex:none;min-width:0} #party-ui .cards-flow .preview-racer-code{font-size:17px;line-height:23px;color:#163c69} #party-ui .cards-flow .preview-identity-text{min-width:0;text-align:left} #party-ui .cards-flow .preview-identity-text strong{display:block;font-size:13px;line-height:16px;white-space:nowrap;margin:0;padding:0} #party-ui .cards-flow .preview-identity-text small{display:block;font-size:12px;line-height:14px;margin:0;padding:0} #party-ui .cards-flow .public-card-rail{display:flex;position:relative;align-items:center;flex:0 0 calc(var(--pc-h) + 6px);min-width:0;height:calc(var(--pc-h) + 6px);width:100%} #party-ui .cards-flow .preview-card-track{display:flex;flex-direction:row;position:relative;flex:1;align-items:flex-start;gap:6px;min-width:0;min-height:0;height:calc(var(--pc-h) + 6px);padding:0 1px 6px;margin:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:1px;scrollbar-width:thin;scrollbar-color:#28adc3 #ffffff60;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} #party-ui .cards-flow .preview-card-track:focus-visible{outline:3px solid #164ba6;outline-offset:-3px;border-radius:14px} #party-ui .cards-flow .preview-card{box-sizing:border-box;position:relative;display:block;flex:0 0 var(--pc-w);width:var(--pc-w);min-width:var(--pc-w);max-width:var(--pc-w);height:var(--pc-h);min-height:var(--pc-h);max-height:var(--pc-h);margin:0;padding:0;border:2px solid white;border-radius:14px;scroll-snap-align:start;overflow:visible;background:linear-gradient(145deg,var(--action-light),var(--action-fill));box-shadow:inset 0 0 0 1px var(--action-edge),0 2px 0 #ffffff80} #party-ui .cards-flow .preview-card-icon{position:absolute;display:block;left:4px;top:var(--pc-main-y);width:var(--pc-icon);height:var(--pc-icon);margin:0;padding:0;grid-area:auto} #party-ui .cards-flow .preview-card-icon>.icon{width:100%;height:100%;display:block} #party-ui .cards-flow .preview-card-steps{position:absolute;left:calc(var(--pc-icon) + 6px);right:auto;top:var(--pc-step-y);width:40px;height:30px;line-height:30px;text-align:center;font-size:var(--pc-steps);white-space:nowrap;font-weight:900} #party-ui .cards-flow .preview-card .preview-card-title{position:absolute;display:block;left:3px;right:3px;top:var(--pc-title-y);height:20px;margin:0;padding:0;font-size:var(--pc-title);line-height:20px;text-align:center;white-space:nowrap;overflow-wrap:normal;grid-area:auto;letter-spacing:0} #party-ui .cards-flow .preview-card .preview-card-description{position:absolute;display:block;left:3px;right:3px;top:var(--pc-description-y);height:16px;margin:0;padding:0;font-size:var(--pc-description);line-height:16px;text-align:center;white-space:nowrap;letter-spacing:0;grid-area:auto;color:#385070} #party-ui .cards-flow .preview-card .direction-label{font-weight:950;text-shadow:0 .3px currentColor} #party-ui .cards-flow .preview-card .card-count{position:absolute;right:2px;top:3px;width:20px;height:14px;line-height:12px;padding:0 1px;margin:0;border:1px solid var(--action-edge);border-radius:9px;background:#ffffffb8;color:#163c69;font-size:8px;white-space:nowrap;grid-area:auto} #party-ui .cards-flow .preview-empty{font-size:11px;line-height:16px;align-self:center;margin:0;padding:4px} #party-ui .cards-flow .public-page{display:none;position:absolute;z-index:2;bottom:0;flex:none;width:48px;height:48px;min-width:48px;padding:8px;border:2px solid white;border-radius:50%;background:linear-gradient(#fff,#e6f9ff);box-shadow:0 3px #80c7dc;color:#1587be;cursor:pointer;touch-action:manipulation} #party-ui .cards-flow .public-page.previous{left:0;transform:translateY(52px)} #party-ui .cards-flow .public-page.next{right:0;transform:translateY(52px)} #party-ui .cards-flow .public-page svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round} #party-ui .cards-flow .public-page:disabled{visibility:hidden;pointer-events:none} #party-ui .cards-flow .public-page:focus-visible{outline:3px solid #164ba6;outline-offset:1px} #party-ui .cards-flow .opening-body{padding:6px;overflow:hidden;min-height:0} #party-ui .cards-dialog-public{height:calc(var(--view-height,100dvh) - 24px);max-height:calc(var(--view-height,100dvh) - 24px)} #party-ui .cards-dialog-public .dialog-body{display:flex;flex:1;flex-direction:column;overflow:hidden;min-height:0;padding:6px} #party-ui .cards-dialog-public .dialog-note{flex:none;font-size:11px;line-height:15px;padding:0;margin:0 0 5px} #party-ui .cards-dialog-public .preview-lanes{flex:1;height:auto;min-height:0} @media(hover:hover) and (orientation:landscape) and (min-height:600px) and (min-width:900px){ #party-ui .cards-flow .preview-lane{padding-bottom:58px} #party-ui .cards-flow .public-card-rail[data-overflow=true]>.public-page{display:block} } @media(max-width:900px){ #party-ui .cards-flow .preview-lanes{--pc-w:96px;--pc-h:66px;--pc-icon:26px;--pc-steps:18px;--pc-title:13px;--pc-description:10px;--pc-main-y:2px;--pc-step-y:0px;--pc-title-y:28px;--pc-description-y:48px;gap:4px} #party-ui .cards-flow .preview-lane{border-radius:15px;padding:3px} #party-ui .cards-flow .preview-identity-text strong{font-size:12px;line-height:14px} #party-ui .cards-flow .preview-identity-text small{font-size:11px;line-height:13px} } @media(orientation:portrait){ #party-ui[data-preview=open] #party-content{top:max(64px,calc(env(safe-area-inset-top) + 56px));bottom:max(16px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))} #party-ui[data-preview=open] .party-logo>img{width:150px} #party-ui .cards-flow.opening-screen .phase-head{padding:0;gap:3px;margin-bottom:6px} #party-ui .cards-flow.opening-screen .phase-title{padding:3px 12px;border-width:3px} #party-ui .cards-flow.opening-screen .phase-title h1{font-size:19px} #party-ui .cards-flow.opening-screen .phase-title>.icon{width:23px;height:23px} #party-ui .cards-flow.opening-screen .phase-subtitle{font-size:12px;line-height:16px;padding:2px 8px} #party-ui .cards-flow .preview-lanes{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr))} #party-ui .cards-flow .preview-lane{flex-direction:row;gap:3px} #party-ui .cards-flow .preview-lane>header{flex:0 0 116px;flex-direction:row;justify-content:flex-start;gap:2px} #party-ui .cards-flow .preview-portrait{width:clamp(50px,calc(100cqh - 4px),64px);height:clamp(50px,calc(100cqh - 4px),64px)} #party-ui .cards-flow .public-card-rail{flex:1;width:auto;align-self:center} #party-ui .cards-flow .opening-footer{gap:6px;padding-top:5px} #party-ui .cards-flow .opening-footer>p{font-size:10px;line-height:13px;padding:3px 5px} #party-ui .cards-flow .opening-footer>.party-button{min-height:48px;min-width:130px;font-size:20px} } @media(orientation:portrait) and (max-height:600px){ #party-ui[data-preview=open] #party-content{top:max(6px,env(safe-area-inset-top))} #party-ui[data-preview=open] .party-logo{visibility:hidden} #party-ui .cards-flow.opening-screen .phase-head{padding-right:0;align-items:stretch;gap:2px;margin-bottom:3px} #party-ui .cards-flow.opening-screen .phase-title{padding:2px 4px;width:calc(100% - 108px);align-self:flex-start} #party-ui .cards-flow.opening-screen .phase-title h1{font-size:12px;line-height:18px} #party-ui .cards-flow.opening-screen .phase-title>.icon{display:none} #party-ui .cards-flow.opening-screen .phase-subtitle{font-size:10px;line-height:12px;padding:1px 3px} #party-ui .cards-flow .preview-lanes{--pc-h:56px;--pc-icon:22px;--pc-steps:18px;--pc-title:12px;--pc-main-y:2px;--pc-step-y:0px;--pc-title-y:25px;--pc-description-y:39px} #party-ui .cards-flow .preview-card-steps{left:28px;width:38px;height:26px;line-height:26px} #party-ui .cards-flow .preview-card .preview-card-title{height:18px;line-height:18px} #party-ui .cards-flow .preview-card .preview-card-description{height:13px;line-height:13px} #party-ui .cards-flow .preview-lane>header{flex-basis:108px} #party-ui .cards-flow .preview-portrait{width:50px;height:50px} #party-ui .cards-flow .preview-racer-code{font-size:14px} } /* Extremely narrow landscape windows keep five groups in a 2 + 2 + 1 grid. */ @media(orientation:landscape) and (max-width:599px){ #party-ui[data-preview=open] #party-content{top:max(4px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));left:8px;right:8px} #party-ui[data-preview=open] .party-logo{visibility:hidden} #party-ui .cards-flow.opening-screen .phase-head{padding:0;gap:1px;margin-bottom:2px;align-items:stretch} #party-ui .cards-flow.opening-screen .phase-title{padding:1px 4px;width:calc(100% - 108px);align-self:flex-start} #party-ui .cards-flow.opening-screen .phase-title h1{font-size:12px;line-height:18px} #party-ui .cards-flow.opening-screen .phase-title>.icon{display:none} #party-ui .cards-flow.opening-screen .phase-subtitle{font-size:10px;line-height:12px;padding:1px 3px} #party-ui .cards-flow .opening-body{padding:2px} #party-ui .cards-flow .preview-lanes{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));--pc-h:56px;--pc-icon:22px;--pc-steps:18px;--pc-title:12px;--pc-main-y:2px;--pc-step-y:0px;--pc-title-y:25px;--pc-description-y:39px} #party-ui .cards-flow [data-preview-lane=all]{grid-column:1/-1} #party-ui .cards-flow .preview-lane{flex-direction:row;gap:2px;padding:0 2px} #party-ui .cards-flow .preview-lane>header{flex:0 0 104px;flex-direction:row;gap:1px} #party-ui .cards-flow .preview-portrait{width:50px;height:50px} #party-ui .cards-flow .preview-racer-code{font-size:14px} #party-ui .cards-flow .public-card-rail{flex:1;width:auto;align-self:center} #party-ui .cards-flow .preview-card-steps{left:28px;width:38px;height:26px;line-height:26px} #party-ui .cards-flow .preview-card .preview-card-title{height:18px;line-height:18px} #party-ui .cards-flow .preview-card .preview-card-description{height:13px;line-height:13px} #party-ui .cards-flow .opening-footer{padding-top:2px;gap:6px} #party-ui .cards-flow .opening-footer>p{font-size:10px;line-height:12px;padding:2px 4px} #party-ui .cards-flow .opening-footer>.party-button{min-height:48px;min-width:130px;font-size:20px} #party-ui .cards-dialog-public>header{padding:3px 12px} #party-ui .cards-dialog-public>footer{padding:3px 12px} #party-ui .cards-dialog-public>footer>.party-button{min-height:48px;font-size:18px} } @media(orientation:portrait) and (max-height:600px){ #party-ui .cards-dialog-public>header{padding:3px 12px} #party-ui .cards-dialog-public>footer{display:none} #party-ui .cards-dialog-public .dialog-note{margin:0 0 3px!important;font-size:10px;line-height:13px} } @media(orientation:landscape) and (max-height:450px){ #party-ui .cards-dialog-public>header{padding:3px 12px} #party-ui .cards-dialog-public>footer{display:none} #party-ui .cards-dialog-public .dialog-note{margin:0 0 3px!important;font-size:10px;line-height:13px} } @media(orientation:landscape) and (min-height:600px) and (min-width:900px){ #party-ui .cards-flow .preview-portrait{width:clamp(50px,min(calc(100cqw - 8px),calc(100cqh - 180px)),240px);height:clamp(50px,min(calc(100cqw - 8px),calc(100cqh - 180px)),240px)} #party-ui .cards-flow .preview-identity{gap:6px} #party-ui .cards-flow .preview-racer-code{font-size:24px;line-height:32px} #party-ui .cards-flow .preview-identity-text strong{font-size:18px;line-height:24px} #party-ui .cards-flow .preview-identity-text small{font-size:14px;line-height:19px} #party-ui .cards-flow .preview-lane>header .event-art{width:90px;height:90px} }