:root{
  --felt:#175539; --gold:#f0c46a; --ink:#0f1a14;
  --panel:#141a17; --panel2:#1b231e; --line:rgba(255,255,255,.10);
  --text:#e9e2d2; --muted:#9aa79e; --bad:#e2726e; --good:#7fc99a;
  --sai-t: env(safe-area-inset-top, 0px);
  --sai-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:#0d1210; color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
  overscroll-behavior: none;
}
#app{display:flex; height:100vh; height:100dvh}

/* ---------------------------------------------------------- sto */
#table-wrap{
  position:relative; flex:1; min-width:0; min-height:0;
  display:flex; flex-direction:column;
}
#hud{
  display:flex; justify-content:flex-end; align-items:center;
  position:absolute; top:10px; right:10px; z-index:7;
  background:transparent; border:none; padding:0; pointer-events:none;
}
#hud-menu, #hud-main{display:none}
#btn-auto{
  pointer-events:auto; font-size:13px; font-weight:600; padding:7px 12px;
  background:rgba(10,20,15,.88); border:1px solid rgba(240,196,106,.45); color:var(--gold);
}
#btn-auto:disabled{opacity:.45}
#table-stage{position:relative; flex:1; min-height:0}
#table{width:100%; height:100%; display:block; touch-action:manipulation}

/* ------------------------------------------------------ akcije */
#actions{
  position:absolute; left:50%; bottom:clamp(120px,22vh,230px); transform:translateX(-50%);
  background:rgba(10,20,15,.93); border:1px solid rgba(240,196,106,.35);
  border-radius:14px; padding:12px 16px 14px; min-width:min(560px,86vw); max-width:92vw;
  box-shadow:0 18px 50px rgba(0,0,0,.55); backdrop-filter:blur(6px); text-align:center; z-index:5;
}
#actions.hidden{display:none}
#action-title{font-weight:600; margin-bottom:9px; color:var(--gold); font-size:14px}
#action-buttons{display:flex; flex-wrap:wrap; gap:7px; justify-content:center}
.grp-label{display:flex; align-items:center; font-size:12px; color:var(--muted); padding:0 4px}
#action-hint{margin-top:8px; font-size:12px; color:var(--muted); min-height:0}
#action-hint:empty{margin:0}

button{
  font:inherit; cursor:pointer; border-radius:9px; padding:8px 14px;
  border:1px solid rgba(255,255,255,.16); background:var(--panel2); color:var(--text);
  transition:background .12s,border-color .12s,transform .06s;
}
button:hover:not(:disabled){background:#28332c; border-color:rgba(240,196,106,.5)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.38; cursor:not-allowed}
button.primary{background:var(--gold); color:#17281d; border-color:var(--gold); font-weight:600}
button.primary:hover:not(:disabled){background:#f7d489}
button.danger{border-color:rgba(226,114,110,.55); color:#f0a8a5}
button.ghost{background:transparent}
button.suit-pik,button.suit-tref{color:#dfe6e0}
button.suit-karo,button.suit-herc{color:#ef9a97}

/* ------------------------------------------------------ bočno */
#side-backdrop{display:none}
#side{
  width:clamp(260px,25vw,330px); background:var(--panel);
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  padding:14px; gap:12px; overflow:hidden; position:relative;
}
.side-close{display:none}
#side header h1{margin:0; font:600 20px/1.2 "Iowan Old Style",Georgia,serif; letter-spacing:.4px}
#side header .sub{color:var(--muted); font-size:12px; margin-top:2px}
.card{background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:10px 11px}
.card.grow{flex:1; min-height:0; display:flex; flex-direction:column}
.card h2{margin:0 0 7px; font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted)}

#score{width:100%; border-collapse:collapse; font-size:13px}
#score th{font-weight:500; color:var(--muted); font-size:11px; text-align:right; padding:2px 4px}
#score th:first-child{text-align:left}
#score td{padding:3px 4px; text-align:right; border-top:1px solid rgba(255,255,255,.06)}
#score td:first-child{text-align:left}
#score tr.me td{color:var(--gold)}
#score .refe{color:#d9a441; letter-spacing:1px}
.note{margin-top:6px; font-size:11px; color:var(--muted)}

.contract{font-size:13px; line-height:1.55}
.contract b{color:var(--gold)}
.contract .tag{display:inline-block; font-size:11px; padding:1px 7px; border-radius:20px;
  background:rgba(240,196,106,.14); border:1px solid rgba(240,196,106,.3); color:var(--gold); margin-left:4px}

#log{overflow-y:auto; font-size:12.5px; flex:1; min-height:80px; padding-right:4px}
#log div{padding:2px 0; color:#c8d0c9; border-bottom:1px solid rgba(255,255,255,.04)}
#log div.hdr{color:var(--gold); font-weight:600; margin-top:7px}
#log div.strong{color:#fff}
#log div.res{color:#a8d8bd}
#log::-webkit-scrollbar{width:6px}
#log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:3px}

#side footer{display:flex; gap:7px}
#side footer button{flex:1; font-size:12.5px; padding:7px}

/* ------------------------------------------------------- toast */
#toast{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:rgba(10,20,15,.94); border:1px solid rgba(240,196,106,.4);
  color:var(--gold); padding:8px 18px; border-radius:20px; font-size:13px; z-index:6;
}
#toast.hidden{display:none}

/* ------------------------------------------------------- modal */
#modal{position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex;
  align-items:center; justify-content:center; z-index:20; padding:20px}
#modal.hidden{display:none}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  max-width:640px; width:100%; max-height:82vh; overflow-y:auto; padding:22px; position:relative}
.modal-box .close{position:absolute; top:10px; right:10px; background:none; border:none;
  font-size:24px; color:var(--muted); padding:2px 8px}
.modal-box h2{margin:0 0 4px; font:600 19px/1.3 "Iowan Old Style",Georgia,serif}
.modal-box h3{margin:16px 0 5px; font-size:13px; color:var(--gold); letter-spacing:.04em}
.modal-box p,.modal-box li{font-size:13.5px; color:#cfd6cf}
.modal-box ul{margin:5px 0; padding-left:19px}
.modal-box table{width:100%; border-collapse:collapse; font-size:13px; margin-top:6px}
.modal-box td,.modal-box th{border:1px solid var(--line); padding:4px 7px; text-align:left}
.res-table td.n{text-align:right; font-variant-numeric:tabular-nums}
.res-good{color:var(--good)} .res-bad{color:var(--bad)}
.field{display:flex; align-items:center; gap:10px; margin:9px 0}
.field label{width:150px; color:var(--muted); font-size:13px}
.field select,.field input{flex:1; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:8px; padding:7px 9px; font:inherit}

/* ------------------------------------------ uski ekran, pejzaž: ostaje sto + bočna */
@media (max-width:860px) and (orientation:landscape){
  html:not(.pref-portrait) #side{width:min(240px,32vw); padding:10px; gap:8px}
  html:not(.pref-portrait) #actions{bottom:clamp(72px,18vh,140px); padding:8px 12px; min-width:min(480px,80vw)}
  html:not(.pref-portrait) #action-buttons button{padding:7px 11px; font-size:13px}
}

/* ------------------------------------------ portret: sto je cela igra */
html.pref-portrait, html.pref-portrait body{
  width:100%; max-width:100%; overflow:hidden;
}
html.pref-portrait #app{display:block; width:100%; max-width:100%; overflow:hidden}
html.pref-portrait #table-wrap{
  width:100%; height:100%; max-width:100%; min-width:0; overflow:hidden;
}
html.pref-portrait #table-stage{
  position:relative; flex:1; min-width:0; min-height:0; width:100%; overflow:hidden;
}
html.pref-portrait #hud{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  position:relative; top:auto; right:auto; justify-content:flex-start;
  padding:6px 8px; padding-top:max(6px, var(--sai-t));
  background:var(--panel); border-bottom:1px solid var(--line); z-index:7;
  pointer-events:auto;
}
html.pref-portrait #hud-menu{
  display:inline-block; flex:0 0 auto; font-size:12px; font-weight:600; padding:7px 10px;
  background:rgba(240,196,106,.14); border-color:rgba(240,196,106,.4); color:var(--gold);
}
html.pref-portrait #hud-main{display:block; flex:1; min-width:0}
html.pref-portrait #hud-scores{display:flex; gap:8px; overflow:hidden; font-variant-numeric:tabular-nums}
html.pref-portrait #hud-scores span{font-size:12px; color:var(--muted); white-space:nowrap}
html.pref-portrait #hud-scores span.me{color:var(--gold); font-weight:600}
html.pref-portrait #hud-scores .zbir{margin-left:auto; color:var(--text)}
html.pref-portrait #hud-contract{
  font-size:11px; color:var(--muted); white-space:normal; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
html.pref-portrait #btn-auto{
  flex:0 0 auto; font-size:11px; padding:6px 8px; min-height:0;
  background:rgba(240,196,106,.14); border-color:rgba(240,196,106,.4); color:var(--gold);
}

html.pref-portrait #actions{
  left:8px; right:8px; transform:none; width:auto;
  top:8px; bottom:auto;
  max-height:min(42%, 300px); overflow-x:hidden; overflow-y:auto;
  padding:8px 10px 10px; min-width:0 !important; max-width:none;
}
html.pref-portrait #action-title{font-size:13px; margin-bottom:6px}
html.pref-portrait #action-hint{font-size:11px; margin-top:6px}
html.pref-portrait #action-buttons{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px;
}
html.pref-portrait #action-buttons button{
  flex:none; min-width:0; width:auto;
  padding:7px 4px; min-height:38px; font-size:13px;
}
html.pref-portrait #action-buttons button.span-row,
html.pref-portrait #action-buttons .grp-label{grid-column:1 / -1; justify-content:center}
html.pref-portrait #action-buttons > div{display:none}

html.pref-portrait #toast{top:8px}

html.pref-portrait #side-backdrop{
  display:block; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:15; opacity:0; pointer-events:none; transition:opacity .25s;
}
html.pref-portrait #side-backdrop.hidden{display:none}
html.pref-portrait #side-backdrop.open{opacity:1; pointer-events:auto}

html.pref-portrait #side{
  position:fixed; left:0; right:0; bottom:0; top:auto;
  width:auto; height:min(78dvh, 640px);
  z-index:16;
  border-left:none; border-top:1px solid var(--line);
  border-radius:16px 16px 0 0;
  transform:translateY(110%);
  transition:transform .28s ease;
  padding-bottom:max(14px, var(--sai-b));
  box-shadow:0 -18px 50px rgba(0,0,0,.45);
}
html.pref-portrait #side.open{transform:translateY(0)}
html.pref-portrait .side-close{
  display:block; position:absolute; top:8px; right:8px;
  background:none; border:none; font-size:24px; color:var(--muted); padding:2px 8px;
}
html.pref-portrait #side header h1{padding-right:36px}

@media (max-width:860px){
  .field{flex-direction:column; align-items:stretch; gap:4px}
  .field label{width:auto}
  .modal-box{max-height:86dvh; padding:18px}
}