/* DURAK UI/UX 3.3 – add-on only. Keep Classic and Highend gameplay intact. */
:root[data-ui-theme="highend"] {
 --ux-surface:#0b1c30;
 --ux-raised:#142943;
 --ux-border:#c7a87769;
 --ux-accent:#f2d49b;
 --ux-muted:#b9c9dd;
}
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card){
 border-radius:20px;
}
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .section-title,
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) section>h3{
 color:#f2d49b;
 letter-spacing:.045em;
}
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) button:focus-visible{
 outline:3px solid #b6e9ff;outline-offset:2px;
}
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .btn.g{
 border:1px solid #c2a77d67;background:linear-gradient(160deg,#193450,#0b1c30);color:#e7effa;
}
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .mode-tile,
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .setting-toggle,
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .rule-toggle{
 transition:background .15s,border-color .15s; 
}
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .mode-tile.sel,
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .setting-toggle.on,
:root[data-ui-theme="highend"] .ov>.card:not(.tut-card) .rule-toggle.on{
 border-color:#f1cf8db9;box-shadow:inset 0 0 0 1px #f6e7ac20;background:#a3814a26;
}
/* Replace the one-long-page Highend settings screen with five scoped panels. */
.ux-settings-ov{padding:10px!important;min-width:0}
.ux-settings-card{
 width:min(560px,100%);max-width:100%;
 max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 20px);
 overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;
 padding:15px 15px 13px;
}
.ux-settings-card .settings-head{
 position:sticky;top:-15px;z-index:8;
 padding:10px 0 13px;
 background:linear-gradient(180deg,#152c44 85%,#152c44ec);
 border-bottom:1px solid #c2a77d51;
}
.ux-settings-card .settings-head h1{font-size:clamp(22px,5.5vw,30px)}
.ux-settings-summary{
 margin:13px 2px 9px;color:#bbcde0;line-height:1.45;
 font-size:12px;text-align:left;
}
.ux-settings-tabs{
 position:sticky;top:47px;z-index:7;
 display:flex;gap:7px;
 overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;
 padding:7px 1px 11px;
 margin:0 0 5px;
 background:linear-gradient(180deg,#11263d,#0c1c30 98%);
 border-bottom:1px solid #c5ad8669;
 scroll-snap-type:x proximity;
}
.ux-settings-tab{
 flex:0 0 auto;min-width:98px;max-width:134px;min-height:54px;
 display:grid;justify-items:center;align-content:center;gap:4px;
 padding:8px 10px;scroll-snap-align:center;
 border:1px solid #7290af75;border-radius:12px;
 background:linear-gradient(160deg,#182d45,#081728);
 color:#c9d6e5;font:700 11px/1.18 system-ui,sans-serif;
 white-space:normal;text-align:center;
}
.ux-settings-tab .ux-tab-symbol{font:normal 19px/1 Georgia,serif;color:#ddc18c}
.ux-settings-tab.active,
.ux-settings-tab[aria-selected="true"]{
 color:#3e2612;background:linear-gradient(150deg,#fff0c4,#d5a96e);
 border-color:#ffe9aa;box-shadow:0 0 0 1px #ddba8b44,inset 0 1px #fff8;
}
.ux-settings-tab.active .ux-tab-symbol{color:#4c3222}
.ux-settings-content{min-width:0;min-height:210px}
.ux-settings-content>section{
 min-width:0;padding-top:16px;border-top:1px solid #cfb58a2b;
}
.ux-settings-content>section:first-child{border-top:0}
.ux-settings-content>section>h2{
 font-weight:800;font-size:13px;letter-spacing:.08em;color:#f5dfaf;
}
.ux-settings-content .setting-desc,
.ux-settings-content .ui-theme-description{
 color:#bed0e3;line-height:1.45;
}
.ux-settings-content .ui-theme-selector{max-width:100%}
.ux-settings-content .seg button,
.ux-settings-content .setting-toggle{min-height:44px}
.ux-settings-content .theme-choice,
.ux-settings-content .table-choice{min-width:0;overflow-wrap:anywhere}
.ux-settings-content .theme-choice b{font-size:11px}
.ux-settings-footer{
 position:sticky;bottom:-13px;z-index:7;
 padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));
 background:linear-gradient(180deg,#0c1d2de8,#0a1727 36%);
 border-top:1px solid #c8ae7d63;
}
.ux-settings-footer button{min-height:48px}
/* Android target sizes and overflow – applied to both designs. */
.lang button{min-width:44px;min-height:42px}
.settings-head .ib,.rules-head .ib{min-width:44px;min-height:44px;flex:none}
.rule-stepper button{width:48px;min-width:48px;height:48px;min-height:48px;touch-action:manipulation}
.rule-stepper>span{min-width:0;flex:1;line-height:1.4;overflow-wrap:anywhere}
.rule-stepper>div{flex:none;gap:6px}
.rule-stepper b{min-width:34px}
.rule-toggle{min-height:44px;gap:6px}
.rule-toggle span{font-size:11px;line-height:1.3;overflow-wrap:anywhere}
.rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rules-ov{padding:10px!important}
.rules-card{
 min-width:0;max-width:min(540px,100%);
 max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 overflow-x:hidden;
}
.rules-footer{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);min-width:0}
.rules-footer button{
 min-width:0;width:100%;white-space:normal;overflow-wrap:anywhere;
 min-height:48px;padding:8px;
}
/* Tutorial: do not let flex and game-card min-content extend outside a narrow phone. */
.ov:has(.tut-card){padding:10px!important}
.tut-card{width:min(430px,100%);min-width:0;max-width:calc(100vw - 20px);box-sizing:border-box}
.tut-card .tut-demo{min-width:0;max-width:100%;padding:12px 8px;gap:6px}
.tut-card .tut-demo .c{--cw:clamp(39px,13vw,58px)}
.tut-card .tut-demo .tut-hand{min-width:0}
.tut-card .lang{width:100%;min-width:0;flex-wrap:wrap}
.tut-card .tut-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;gap:8px;
}
.tut-card .tut-actions .btn{
 min-width:0;max-width:100%;white-space:normal;
 overflow-wrap:anywhere;padding:10px 6px;min-height:52px;
}
.setup-card,.menu-card,.online-card{overscroll-behavior-y:contain}
.setup-card .game-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.setup-card .mode-tile{min-width:0}
:root[data-ui-theme="highend"] .setup-card .setup-head,
:root[data-ui-theme="highend"] .rules-card .rules-head{
 border-bottom:1px solid #cfba9355;padding-bottom:12px;
}
:root[data-ui-theme="highend"] .profile-card .profile-stat,
:root[data-ui-theme="highend"] .online-card .net-state{
 border-color:#c4aa8059;background:linear-gradient(145deg,#172c43,#0b1c30);
}
@media(max-width:360px){
 .ux-settings-card{padding-inline:12px}
 .ux-settings-tab{min-width:101px}
 .rules-card{padding-inline:13px}
 .rule-grid{grid-template-columns:minmax(0,1fr)}
 .rule-stepper>span{font-size:11px}
 .rule-stepper>div{gap:5px}
 .tut-card{padding-inline:11px}
 .tut-card .tut-demo .c{--cw:42px}
 .tut-card .tut-demo .mini .c{--cw:28px}
 .tut-card .tut-demo{gap:4px}
}
@media(max-height:650px){
 .ux-settings-card{max-height:calc(100dvh - 12px)}
 .rules-card{max-height:calc(100dvh - 12px)}
}
@media(prefers-reduced-motion:reduce){
 .ux-settings-tab,.ux-settings-content .theme-choice{transition:none}
}

/* Put online actions first; keep detailed help accessible at the end. */
:root[data-ui-theme="highend"] .online-card .online-actions{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
 margin-top:9px;
}
:root[data-ui-theme="highend"] .online-card .online-actions>.btn{
 min-width:0;min-height:51px;margin:0!important;white-space:normal;
}
:root[data-ui-theme="highend"] .online-card .online-actions>.btn:nth-child(2){
 color:#ecf3fb;border:1px solid #d6bd9369;
 background:linear-gradient(155deg,#254263,#0b1b30);
}
:root[data-ui-theme="highend"] .online-card .ux-online-help{
 margin:20px 0 0;padding:15px 12px 12px;
 border:1px solid #c6ae8055;border-radius:14px;
 background:linear-gradient(160deg,#182f47,#0c1b2d);
}
:root[data-ui-theme="highend"] .online-card .ux-online-help .section-title{
 margin:0 0 11px;color:#ffe0a8;
}
:root[data-ui-theme="highend"] .online-card .online-steps{margin:0}
:root[data-ui-theme="highend"] .online-card .online-step{
 border-radius:9px;margin-block:5px;line-height:1.45;
}
:root[data-ui-theme="highend"] .online-card .online-step>span{font-size:12px;color:#d6e3f3}
:root[data-ui-theme="highend"] .online-card .net-state{
 border:1px solid #d0ad766c;border-radius:12px;
 padding:12px;margin-bottom:10px;
}
:root[data-ui-theme="highend"] .online-card .net-state b{color:#f5dba5}
:root[data-ui-theme="highend"] .online-card input{
 min-height:48px;border-color:#a4bdd170;box-shadow:inset 0 2px 8px #0005;
}
:root[data-ui-theme="highend"] .online-card .quick-match,
:root[data-ui-theme="highend"] .online-card .ranked-match{
 border-radius:15px;border-color:#d0b3846c;
 background:linear-gradient(145deg,#1a324a,#0c1d30);
}
:root[data-ui-theme="highend"] .setup-card .mode-tile{
 min-height:108px;display:flex;flex-direction:column;justify-content:center;
 gap:5px;padding:12px 10px;border-radius:12px;line-height:1.35;
}
:root[data-ui-theme="highend"] .setup-card .mode-tile>b{
 color:#f0debd;font-weight:800;font-size:13px;
}
:root[data-ui-theme="highend"] .setup-card .mode-tile>small{
 font-size:11px;line-height:1.4;color:#c5d4e7;
}
:root[data-ui-theme="highend"] .setup-card .mode-tile.sel>b{color:#ffe5a9}
:root[data-ui-theme="highend"] .setup-card .mode-group>h4{
 color:#f4d5a0;letter-spacing:.09em;
}
@media(max-width:360px){
 :root[data-ui-theme="highend"] .online-card .online-actions{gap:7px}
 :root[data-ui-theme="highend"] .online-card .online-actions>.btn{font-size:12px;padding-inline:7px}
 :root[data-ui-theme="highend"] .setup-card .mode-tile{padding:10px 8px}
}