/* Shared illustrated faces: one cached sprite atlas, readable names and values in HTML. */
.card-art{display:block;aspect-ratio:1;background-image:url('images/race-card-atlas.png');background-size:400% 400%;background-repeat:no-repeat;flex-shrink:0}
.art-stop{background-position:0 0}.art-limit{background-position:33.333333% 0}.art-flat{background-position:66.666667% 0}.art-fuel{background-position:100% 0}
.art-accident{background-position:0 33.333333%}.art-go{background-position:33.333333% 33.333333%}.art-end{background-position:66.666667% 33.333333%}.art-spare{background-position:100% 33.333333%}
.art-gas{background-position:0 66.666667%}.art-repair{background-position:33.333333% 66.666667%}.art-puncture{background-position:66.666667% 66.666667%}.art-tank{background-position:100% 66.666667%}
.art-ace{background-position:0 100%}.art-right{background-position:33.333333% 100%}.art-road{background-position:66.666667% 100%}.art-back{background-position:100% 100%}
.card{min-height:200px;padding:8px;gap:4px;overflow:hidden;justify-content:initial;display:grid;grid-template-rows:12px minmax(0,1fr) auto auto;background:#fff7e5}
.card.mileage{background:#eaf0dd}.card.hazard{background:#fae5d6}.card.remedy{background:#e3eee6}.card.safety{background:#faedbf}
.card-visual{display:grid;place-items:center;position:relative;min-height:0;min-width:0;width:100%;height:100%;container-type:size}
.card-visual .card-art{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:100%;max-height:100%;aspect-ratio:1;align-self:center;justify-self:center}
.card .card-name{justify-content:center;min-height:24px;line-height:1.12;font-size:12px;margin:0;width:100%;align-self:center}
.card .card-foot{font-size:8px;line-height:1.2;min-height:18px;align-content:center}
.distance-badge{position:absolute;left:3px;top:3px;color:var(--ink);background:#fff8e9ef;border:1px solid #bbc9aa;box-shadow:1px 2px 0 #173d3922;border-radius:7px;font-size:29px;line-height:1;padding:4px 6px;font-weight:900;letter-spacing:-1px}
.distance-badge small{display:block;font-size:8px;letter-spacing:1px;margin-top:2px}
.card.selected{transform:none;outline:3px solid var(--ink);box-shadow:0 0 0 5px #f2c75c90}
.hand-pager{display:flex;align-items:center;gap:8px}.hand-pager[hidden],.hand .card[hidden],.hand-help[hidden]{display:none!important}.hand-pager button{border:1px solid #afbea9;border-radius:6px;width:32px;height:30px;min-height:30px;padding:0;background:#fffef9;color:var(--ink);font-size:23px;line-height:1}.hand-pager span{font-size:10px!important;white-space:nowrap;font-variant-numeric:tabular-nums}
.player{text-align:left;color:var(--ink);font-family:inherit;cursor:pointer}.you-marker{font-size:8px;background:#d2e4ca;padding:2px 4px;border-radius:4px;white-space:nowrap}
.table-tools{display:flex;gap:8px}.road-table{display:grid;grid-template-columns:240px 1fr;gap:18px;margin-bottom:20px}
.table-middle{margin:0;justify-content:space-around;padding:14px 18px;background:#e6edde;border:1px solid #bcccba;gap:18px}
.draw-stack,.discard-stack,.played-stack{display:flex;align-items:center;flex-direction:column;gap:8px;position:relative;background:none;border:0;padding:0;color:var(--ink);min-width:0}
.draw-stack:disabled{opacity:1;cursor:default}.pickable>.pile-card{outline:3px solid #ba8423;box-shadow:0 0 0 5px #f2c75c66}.pickable .pile-label{font-weight:800;color:#795616}.pickable:hover>.pile-card{outline-color:var(--ink)}
.pile-card{display:grid;width:66px;height:90px;min-height:0!important;border:2px solid #fffdf5;border-radius:6px;position:relative;box-shadow:0 2px 4px #173d3922;outline:1px solid #c4cbb9;padding:3px;grid-template-rows:minmax(0,1fr) auto;gap:2px;overflow:hidden}
.pile-card.card .card-type,.pile-card.card .card-foot{display:none}.pile-card.card .card-name{font-size:8px;min-height:16px;line-height:1.05}.pile-card .distance-badge{font-size:17px;border:0;left:0;top:0;padding:2px}.pile-card .distance-badge small{font-size:6px}.pile-card .card-art{max-width:100%;max-height:100%}
.card-back{background:var(--ink);color:#fff7e5;place-items:center}.card-back .card-art{width:95%}.card-back b{font-size:8px;letter-spacing:1px}.empty-pile{border:1px dashed #a6b69f;background:#f8f5eb77;outline:0;box-shadow:none;display:grid;place-items:center;font-size:9px;color:var(--muted)}
.stacked>.pile-card,.has-cards>.pile-card{box-shadow:2px 2px 0 #fff7e5,3px 3px 0 #aab7a2,5px 5px 0 #fff7e5,6px 6px 0 #aab7a2}.pile-label{font-size:10px;line-height:1.2;white-space:nowrap}.pile-label b{font-variant-numeric:tabular-nums}
.just-discarded>.pile-card{animation:discard-arrives .4s ease-out}@keyframes discard-arrives{from{transform:translateY(-12px) rotate(-8deg);filter:brightness(1.15)}to{transform:translateY(0) rotate(0);filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.just-discarded>.pile-card{animation:none}}
.my-road{border:1px solid var(--line);background:var(--white);border-radius:12px;padding:10px 18px}.road-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}.road-heading h3{font-size:13px;margin:0}.road-heading .text-button{font-size:10px;min-height:24px;padding:3px 0}.played-stacks{display:flex;justify-content:space-around;gap:12px}.played-stack .pile-card{width:54px;height:72px}.played-stack .pile-label{font-size:9px}
.hand-section{min-height:0}.move-panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:30px 44px;gap:5px;padding:8px 12px;min-height:0;margin-top:15px;align-items:center}.move-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}.move-choice strong{font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.move-choice>span{font-size:10px;color:var(--muted);white-space:nowrap}.move-choice select{max-width:170px;min-height:30px;height:30px;font-size:12px;padding:3px 7px}.move-controls{display:grid;grid-template-columns:44px 1fr 1fr;gap:8px;align-items:stretch}.move-controls button{min-height:44px;height:44px;padding:6px 12px}.move-controls .card-info{padding:0;font-size:23px}.move-hint{grid-row:1/3;align-self:center;margin:0;text-align:center;font-size:12px;color:var(--muted)}
.history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 10px}.history-entry{min-width:0}.history-entry .card{height:180px;min-height:180px}.history-entry>small{font-size:10px;display:block;line-height:1.4;margin-top:6px}.history-grid>.card{height:180px;min-height:180px}.detail-card{width:180px;height:245px;margin:0 auto 20px}.active-protection{font-size:12px;padding:10px;background:#f9edc5;border-radius:8px;margin-bottom:16px}.safety-legend{display:grid;gap:10px}.legend-row{display:flex;gap:15px;align-items:center;border:1px solid #e4d6a8;background:#fff6d9;border-radius:12px;padding:12px}.legend-art{width:70px}.legend-row h3{font-size:15px;margin:0 0 5px}.legend-row p{font-size:12px;margin:0}.legend-row small{font-size:11px;line-height:1.4;color:var(--muted)}.legend-scoring{font-size:13px;line-height:1.6;margin-top:18px;padding:15px;background:#e1ecd9;border-radius:10px}.legend-intro{font-size:14px}
/* Phone table: the hand gets the remaining viewport height; explanations open on demand. */
@media(max-width:700px){
 body:has(.race-page){height:100dvh;min-height:0;display:flex;flex-direction:column}
 body:has(.race-page) .masthead{height:48px;min-height:48px;padding:4px 12px;width:100%;flex-shrink:0;margin:0}
 body:has(.race-page) .masthead .brand{font-size:19px}body:has(.race-page) .brand-flag{font-size:18px;padding:0 7px}
 body:has(.race-page) .masthead .text-button{min-height:40px;font-size:11px}
 body:has(.race-page) #app{flex:1;min-height:0;display:flex;flex-direction:column}
 body:has(.race-page) .site-footer{display:none}
 .race-page{flex:1;min-height:0;width:auto;margin:0;padding:5px 10px max(6px,env(safe-area-inset-bottom));display:grid;grid-template-rows:32px 43px 75px 115px minmax(0,1fr);gap:6px;max-width:none}
 .race-page .race-top{margin:0;gap:5px;min-width:0}.race-page .race-title{display:none}.race-page .connection{font-size:9px}.race-page .table-tools{gap:5px}.race-page .race-top .secondary{min-height:32px;height:32px;font-size:10px;padding:4px 8px}
 .race-page .turn-banner{margin:0;padding:5px 12px;border-radius:10px;min-width:0}.race-page .turn-banner .eyebrow{font-size:8px;letter-spacing:1px}.race-page .turn-banner strong{font-size:15px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw}.race-page .timer{font-size:27px}
 .race-page .players{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0;min-height:0}
 .race-page .player{padding:5px 6px;border-radius:9px;min-height:0;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.race-page .player.active{padding:4px 5px}
 .race-page .player-heading{display:block;margin:0;min-width:0}.race-page .player-heading .avatar,.race-page .player-name small,.race-page .score-breakdown,.race-page .player .safeties{display:none}
 .race-page .player-name{font-size:10px;line-height:1.15;max-height:24px;overflow:hidden;overflow-wrap:anywhere}.race-page .you-marker{font-size:7px;padding:0 2px}.race-page .score{font-size:21px;line-height:1.1;letter-spacing:-.6px}.race-page .score small{font-size:8px}.race-page .status{font-size:8px;line-height:1.15;min-height:10px}
 .race-page .road-table{grid-template-columns:124px minmax(0,1fr);gap:6px;margin:0;min-height:0}
 .race-page .table-middle{gap:8px;padding:9px 5px 6px;border-radius:9px;align-items:center}.race-page .pile-card{width:43px;height:68px}.race-page .draw-stack,.race-page .discard-stack{gap:9px}.race-page .pile-label{font-size:9px}.race-page .card-back b{font-size:5px;letter-spacing:.3px}.race-page .pile-card .card-name{font-size:7px;min-height:15px}.race-page .pile-card .distance-badge{font-size:17px}
 .race-page .my-road{padding:5px 7px;border-radius:9px;min-width:0}.race-page .road-heading{margin:0 0 5px;min-height:20px}.race-page .road-heading h3{font-size:10px}.race-page .road-heading .text-button{font-size:9px;min-height:20px;white-space:nowrap}.race-page .played-stacks{gap:6px;justify-content:space-between}.race-page .played-stack{flex:1;min-width:0;gap:7px}.race-page .played-stack .pile-card{width:100%;max-width:43px;height:58px}.race-page .played-stack .pile-label{font-size:7px;white-space:normal;text-align:center}.race-page .played-stack .empty-pile{font-size:7px}
 .race-page .hand-section{display:grid;grid-template-rows:22px minmax(0,1fr) 85px;gap:5px;min-width:0;min-height:0}.race-page .hand-heading{margin:0;min-height:0}.race-page .hand-heading h3{font-size:15px}.race-page .hand-heading span{font-size:9px}
 .race-page .hand{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:7px;min-height:0;padding:3px}
 .race-page .hand .card{height:100%;min-height:0;padding:4px;gap:2px;border-width:2px;border-radius:8px;grid-template-rows:9px minmax(0,1fr) 23px}
 .race-page .hand .card .card-foot{display:none}.race-page .hand .card .card-type{font-size:6px;letter-spacing:.6px;line-height:9px}.race-page .hand .card .card-name{font-size:10px;min-height:0;line-height:1.1;height:23px}.race-page .card-visual .card-art{max-height:100%}.race-page .hand .distance-badge{font-size:23px;padding:3px;top:0;left:0}.race-page .distance-badge small{font-size:6px;margin-top:1px}
 .race-page .hand .card:hover{transform:none}.race-page .hand .card.selected{outline-width:2px;box-shadow:0 0 0 4px #f2c75c90}.race-page .card.playable:after{width:5px;height:5px;top:5px;right:4px}
 .race-page .move-panel{margin:0;padding:3px 7px 6px;grid-template-rows:27px 44px;gap:4px;border-radius:9px}.race-page .move-choice strong{font-size:11px}.race-page .move-choice>span{font-size:9px}.race-page .move-choice select{font-size:11px;max-width:145px;min-height:27px;height:27px}.race-page .move-controls button{font-size:12px}.race-page .move-controls .card-info{font-size:22px}.race-page .move-hint{font-size:11px}
 .race-page .race-bottom{display:none}.race-page .empty-hand{grid-column:1/-1;padding:12px;font-size:12px}
 .history-grid{gap:12px 7px}.history-entry .card,.history-grid>.card{min-height:155px;height:155px;padding:5px}.history-grid .card .card-name{font-size:10px}.history-grid .card .card-foot{font-size:7px}.legend-row{padding:9px;gap:10px}.legend-art{width:56px}.legend-row h3{font-size:14px}.legend-row p{font-size:11px}
}
@media(max-width:700px) and (max-height:700px){
 .race-page{grid-template-rows:30px 38px 66px 98px minmax(0,1fr);gap:4px;padding-top:3px}
 .race-page .road-table{grid-template-columns:112px minmax(0,1fr)}.race-page .table-middle{padding:5px}.race-page .pile-card{height:56px;width:38px}.race-page .draw-stack,.race-page .discard-stack{gap:7px}.race-page .played-stack .pile-card{height:44px}.race-page .my-road{padding:3px 6px}.race-page .road-heading{margin-bottom:4px}
 .race-page .hand-section{grid-template-rows:19px minmax(0,1fr) 77px;gap:3px}.race-page .move-panel{padding:1px 6px 3px;grid-template-rows:24px 44px;gap:3px}.race-page .hand{gap:5px}.race-page .hand .card{padding:3px;grid-template-rows:minmax(0,1fr) 20px}.race-page .hand .card .card-type{display:none}.race-page .hand .card .card-name{font-size:9px;height:20px}.race-page .hand .distance-badge{font-size:20px}.race-page .move-choice select{height:24px;min-height:24px}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:500px){
 body:has(.race-page){height:100dvh;display:flex;flex-direction:column}body:has(.race-page) .masthead{height:38px;min-height:38px;padding:0 12px;width:100%;margin:0}body:has(.race-page) #app{flex:1;min-height:0;display:flex}body:has(.race-page) .site-footer{display:none}
 .race-page{margin:0;padding:4px 8px;flex:1;min-height:0;max-width:none;display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:32px 48px minmax(0,1fr);gap:6px}.race-page .race-top{grid-column:1/3;margin:0}.race-page .race-title{display:none}.race-page .turn-banner{grid-column:1;grid-row:2;margin:0;padding:5px 10px}.race-page .turn-banner strong{font-size:13px;max-width:145px}.race-page .turn-banner .eyebrow{font-size:7px}.race-page .timer{font-size:24px}.race-page .players{grid-column:1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px;margin:0}.race-page .player{height:76px;padding:5px}.race-page .player.active{padding:4px}.race-page .player .avatar,.race-page .player-name small,.race-page .score-breakdown,.race-page .player .safeties{display:none}.race-page .player-heading{margin:0}.race-page .player-name{font-size:10px}.race-page .score{font-size:23px}.race-page .status{font-size:8px}.race-page .road-table{display:none}.race-page .hand-section{grid-column:2;grid-row:2/4;display:grid;grid-template-rows:20px minmax(0,1fr) 78px;gap:4px;min-height:0}.race-page .hand{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:5px;min-height:0;padding:2px}.race-page .hand .card{min-height:0;height:100%;padding:3px;grid-template-rows:minmax(0,1fr) 20px;gap:2px}.race-page .hand .card-type,.race-page .hand .card-foot{display:none}.race-page .hand .card-name{font-size:9px;min-height:0;height:20px}.race-page .hand .distance-badge{font-size:20px}.race-page .hand-heading{margin:0}.race-page .hand-heading h3{font-size:14px}.race-page .hand-heading span{font-size:9px}.race-page .move-panel{margin:0;padding:2px 6px;grid-template-rows:26px 44px;gap:3px}.race-page .race-bottom{display:none}.race-page .race-top .secondary{min-height:30px;height:30px;padding:3px 8px;font-size:10px}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:500px){
 .race-page{grid-template-columns:240px minmax(0,1fr);grid-template-rows:32px 40px 64px minmax(0,1fr);gap:5px}
 .race-page .players{grid-row:3;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.race-page .player{height:64px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.race-page .player-name{font-size:8px;line-height:1.1;max-height:20px;overflow:hidden}.race-page .score{font-size:18px}.race-page .score small{font-size:7px}.race-page .status{font-size:7px;line-height:1.05}
 .race-page .road-table{grid-column:1;grid-row:4;display:grid;grid-template-columns:94px minmax(0,1fr);gap:5px;min-height:0;margin:0}.race-page .table-middle{padding:4px;gap:6px;min-height:0}.race-page .draw-stack,.race-page .discard-stack{gap:5px}.race-page .pile-card{width:33px;height:48px}.race-page .pile-label{font-size:8px}.race-page .card-back b{font-size:5px;letter-spacing:0}.race-page .my-road{padding:3px 5px;min-width:0}.race-page .road-heading{margin-bottom:3px;min-height:16px}.race-page .road-heading h3{font-size:9px}.race-page .road-heading .text-button{min-height:16px;font-size:8px;padding:0}.race-page .played-stacks{gap:5px}.race-page .played-stack{gap:5px;flex:1;min-width:0}.race-page .played-stack .pile-card{width:100%;height:38px}.race-page .played-stack .pile-label{font-size:6px;white-space:normal}.race-page .pile-card .card-name{font-size:6px;min-height:12px}.race-page .pile-card .distance-badge{font-size:13px}.race-page .pile-card .distance-badge small{font-size:5px}
 .race-page .hand-section{grid-row:2/5}
}

/* Applied hazards and earned safeties, shown as artwork on each driver widget so the
   table state is readable at a glance (why one driver rolls on after a repair and
   another needs a Green light). Sized so at least two marks fit on the narrowest phone. */
.player-marks{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;min-height:0}
.player-marks:empty{display:none}
.player-marks .mark{display:block;width:26px;height:26px;border-radius:6px;padding:1px;background:#fffdf5;border:1px solid #c4cbb9;box-shadow:0 1px 2px #173d3922;flex:0 0 auto}
.player-marks .mark .card-art{width:100%;height:100%}
.player-marks .hazard-mark{border-color:#d68a5c;background:#fae5d6}
.player-marks .safety-mark{border-color:#d8b657;background:#faedbf}

/* Desktop/tablet: fit the table to the viewport so the hand and the play/discard
   controls are reachable without scrolling. The hand is the ONLY flexible row;
   everything above it keeps its natural height, so cards shrink instead of
   pushing the controls below the fold. */
@media(min-width:701px) and (min-height:501px), (min-width:951px){
 body:has(.race-page){height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}
 body:has(.race-page) .masthead{flex:0 0 auto;padding:10px 40px;max-width:none;width:100%}
 body:has(.race-page) .masthead .brand{font-size:21px}
 body:has(.race-page) #app{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
 body:has(.race-page) .site-footer{display:none}
 .race-page{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
 .race-page .race-top{flex:0 0 auto;margin:0}
 .race-page .turn-banner{flex:0 0 auto;margin:0}
 .race-page .players{flex:0 0 auto;margin:0}
 .race-page .road-table{flex:0 0 auto;margin:0}
 .race-page .hand-section{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
 .race-page .hand-heading{flex:0 0 auto;margin:0}
 .race-page .hand{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);align-content:stretch}
 .race-page .hand .card{min-height:0;height:100%}
 .race-page .move-panel{flex:0 0 auto;margin-top:0}
 .race-page .race-bottom{display:none}
}
/* Reclaim vertical space above the hand on desktop. The player-marks icons now carry
   the safety/hazard state, so the duplicate text chips and the score breakdown go. */
@media(min-width:701px) and (min-height:501px), (min-width:951px){
 .race-page{gap:8px}
 .race-page .turn-banner{padding:10px 18px}
 .race-page .players{gap:10px}
 .race-page .player{padding:8px 10px}
 .race-page .player .score-breakdown,.race-page .player .safeties{display:none}
 .race-page .player .score{font-size:26px;line-height:1.1}
 .race-page .player-heading{margin-bottom:2px}
 .race-page .player-marks{margin-top:4px}
 .race-page .player-marks .mark{width:40px;height:40px}
 .race-page .table-middle{padding:8px 12px}
 .race-page .pile-card{width:54px;height:74px}
 .race-page .played-stack .pile-card{width:44px;height:60px}
 .race-page .my-road{padding:8px 14px}
 .race-page .move-panel{padding:6px 12px}
}

/* Desktop uses the same measured, top-packed hand as phones. Reserve controls
   and remove page margins before distributing the remaining viewport height. */
@media(min-width:701px) and (min-height:501px), (min-width:951px){
 body:has(.race-page) .masthead{height:48px;min-height:48px;padding:2px 20px}
 .race-page{width:calc(100% - 32px);max-width:1200px;margin:6px auto 0;padding:0 0 8px;gap:6px}
 .race-page .race-top{min-height:36px}.race-page .race-title{font-size:18px}
 .race-page .race-top .secondary{min-height:34px;height:34px;padding:5px 12px;font-size:12px}
 .race-page .turn-banner{padding:7px 14px}.race-page .turn-banner strong{font-size:18px}
 .race-page .players{grid-template-columns:repeat(4,minmax(0,1fr))}
 .race-page .player{padding:6px 9px}.race-page .player.active{padding:5px 8px}
 .race-page .road-table{grid-template-columns:200px minmax(0,1fr);gap:10px}
 .race-page .table-middle{padding:6px 10px}.race-page .my-road{padding:5px 12px}
 .race-page .hand-section{flex:1 1 0;gap:4px}
 .race-page .hand-heading{flex:0 0 30px;min-height:30px}
 .race-page .hand{flex:0 0 auto;padding:4px;gap:6px;align-content:start;align-items:stretch}
 .race-page .hand .card{padding:4px;gap:2px;grid-template-rows:minmax(0,1fr) 26px}
 .race-page .hand .card-type,.race-page .hand .card-foot{display:none}
 .race-page .hand .card-name{height:26px;min-height:26px;font-size:11px}
 .race-page .move-panel{flex:0 0 83px;min-height:83px;max-height:83px;padding:3px 10px;grid-template-rows:28px 44px;gap:4px}
}
@media(min-width:701px) and (min-height:501px) and (max-height:650px), (min-width:951px) and (max-height:650px){
 .race-page .player-name small,.race-page .player-heading .avatar{display:none}
 .race-page .player-heading{margin:0}.race-page .player-marks{position:static;max-width:none}
 .race-page .player-marks .mark{width:32px;height:32px}
 .race-page .pile-card{height:48px;width:36px}.race-page .played-stack .pile-card{height:38px;width:30px}
 .race-page .road-heading{margin-bottom:2px}
}
