/* Treniruotės: the list of minigames to practise against bots. */
.training-screen{width:min(860px,100%);margin-inline:auto}
.training-intro{margin:0 0 16px;color:#d9c093;font-size:14px;line-height:1.45}
.training-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.training-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon about" "icon go";column-gap:12px;row-gap:2px;align-items:center;padding:14px;border:1px solid rgba(241,168,23,.28);border-radius:14px;background:rgba(241,168,23,.06);color:var(--cream,#f5ead5);text-decoration:none;transition:transform .15s,border-color .15s,background .15s}
a.training-card:hover,a.training-card:focus-visible{transform:translateY(-2px);border-color:rgba(241,168,23,.6);background:rgba(241,168,23,.12)}
a.training-card:focus-visible{outline:3px solid var(--amber-2,#ffcb57);outline-offset:2px}
.training-icon{grid-area:icon;font-size:30px;line-height:1}
.training-card b{grid-area:name;font-size:15px}
.training-card small{grid-area:about;color:#c9b07c;font-size:12px;line-height:1.3}
.training-card em{grid-area:go;color:var(--amber-2,#ffcb57);font-style:normal;font-weight:800;font-size:12px}
.training-card.is-later{opacity:.5;border-style:dashed;background:transparent}
.training-card.is-later em{color:#a58a63}
.training-later-title{margin:22px 0 10px;color:#a58a63;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
/* The way in: a quiet line under the create-room button. */
.training-entry{margin:14px 0 0;color:#a58a63;font-size:13px;text-align:center}
.training-entry .text-button{font-size:13px}
@media(max-width:560px){.training-grid{grid-template-columns:1fr}}

/* Practice against bots for the older minigames (/?practice=<minigame>): setup and results around the real game screen. */
.practice-page-panel{width:min(760px,100%);margin-inline:auto;display:grid;gap:12px}
.practice-setup{display:grid;gap:12px}
.practice-setup h1{margin:0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,serif}
.practice-setup p{margin:0;color:#d9c093;line-height:1.45}
.practice-setup p b{color:#f1dcb4}
.practice-options{display:flex;flex-wrap:wrap;gap:10px}
.practice-options label{display:grid;gap:4px;font:600 12px/1.2 system-ui;color:#e9d3a8}
.practice-options select{min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid #7a5530;background:#120b06;color:#ffe9bd;font:600 14px system-ui}
.practice-actions{display:flex;flex-wrap:wrap;gap:8px}
.practice-note{margin:0;color:#a58a63;font-size:12px;text-align:center}
.practice-results{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.practice-results li{display:grid;grid-template-columns:28px 30px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#ffffff0c;color:#f1dcb4}
.practice-results li img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.practice-results li b{font-size:12px;color:#c9b07c;font-weight:600}
.practice-results li.me{border:1px solid #ffcb5766}
.practice-results li.loser{background:#8c2b2038;border:1px solid #d8493a55}
.practice-results li em{font-style:normal;font-weight:800;color:#a8e59a}
.practice-results li.loser em{color:#ff8e7c}
@media(max-width:560px){.practice-results li{grid-template-columns:24px 26px minmax(0,1fr) auto;}.practice-results li b{grid-column:3/-1;grid-row:2}}
/* In full screen the screen-mode button takes the top right corner; the practice pause sits under it, as in a real room. */
body.table-immersive :is(.pour-practice-pause,.bj-practice-pause,.tower-practice-pause,.cups-practice-pause,.toast-practice-pause){top:56px!important}
.training-back{white-space:nowrap;min-height:44px;padding:8px 14px}
.training-icon{width:36px;text-align:center}
/* The bot practice setup on a phone held sideways: rules on the left, the options and the start button on the right,
   so choosing and starting never needs scrolling. */
@media (orientation: landscape) and (max-height: 500px){
  body:is(.practice-page,.bj-practice-page,.cups-practice-page,.toast-practice-page,.pour-practice-page,.tower-practice-page) .topbar{display:none}
  :is(.practice-setup,.bj-practice-setup,.cups-practice-setup,.toast-practice-setup,.pour-practice-setup,.tower-practice-setup):not(:has(>ol)){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:6px 16px;align-items:start;padding:10px 14px}
  :is(.practice-setup,.bj-practice-setup,.cups-practice-setup,.toast-practice-setup,.pour-practice-setup,.tower-practice-setup):not(:has(>ol))>*{grid-column:1;font-size:13px;line-height:1.4}
  :is(.practice-setup,.bj-practice-setup,.cups-practice-setup,.toast-practice-setup,.pour-practice-setup,.tower-practice-setup):not(:has(>ol))>h1{font-size:22px}
  :is(.practice-setup,.bj-practice-setup,.cups-practice-setup,.toast-practice-setup,.pour-practice-setup,.tower-practice-setup):not(:has(>ol))>:is(.practice-options,.bj-options,.cups-options,.toast-options,.pour-options,.tower-options){grid-column:2;grid-row:1/span 3;display:grid;gap:6px}
  :is(.practice-setup,.bj-practice-setup,.cups-practice-setup,.toast-practice-setup,.pour-practice-setup,.tower-practice-setup):not(:has(>ol))>:is(.practice-actions,.bj-practice-actions,.cups-practice-actions,.toast-practice-actions,.pour-practice-actions,.tower-practice-actions){grid-column:2;grid-row:4/span 20;display:grid;gap:6px;position:static;background:none}
  :is(.practice-options,.bj-options,.cups-options,.toast-options,.pour-options,.tower-options) select{width:100%}
}