/* Kortbordet – fælles udseende for spillenes menuer (v177). Hentes af spilsiderne sammen med spilmenu.js.
   Alt er bundet til klasserne .kbm (startskærmen) og .kbm-on (body), som spilmenu.js sætter – uden scriptet ændres intet. */

/* ---------- Startskærm ---------- */
#start-screen.kbm { position: relative; padding: 14px 16px 0; gap: 12px; }
#start-screen.kbm > * { flex-shrink: 0; }
#start-screen.kbm #btn-back-hub { position: absolute; top: 12px; left: 12px; width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%; font-size: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #5c3a22, #241609); border: 1.5px solid rgba(224,188,99,0.7); box-shadow: 0 4px 10px rgba(0,0,0,0.45); text-decoration: none; z-index: 2; }
#start-screen.kbm #btn-back-hub::before { content: '‹'; font: 700 28px/1 Georgia, serif; color: #ffe6a0; margin-top: -4px; }
.kbm-hero { width: 116px; height: 116px; margin-top: 8px; border-radius: 26px; overflow: hidden; position: relative; transform: rotate(-3deg);
  box-shadow: 0 12px 26px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,230,160,0.75), 0 0 30px rgba(224,188,99,0.28); animation: kbm-in 0.5s cubic-bezier(0.2, 1.2, 0.35, 1) both; }
.kbm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kbm-hero::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: kbm-sheen 5s ease-in-out 1s infinite; }
@keyframes kbm-sheen { 0% { left: -60%; } 30%, 100% { left: 140%; } }
@keyframes kbm-in { from { opacity: 0; transform: translateY(14px) rotate(-8deg) scale(0.9); } to { opacity: 1; transform: rotate(-3deg); } }
#start-screen.kbm h1 { font-size: 2.1em; margin: 2px 0 0; line-height: 1.05; color: #fff3d6; text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
#start-screen.kbm .tagline { max-width: 310px; font-size: 0.86em; line-height: 1.4; margin: -4px 0 0; text-align: center; }
/* v179: profilen står i øverste højre hjørne (billede, navn og "Skift" under navnet) */
#start-screen.kbm .profile-compact { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; padding: 4px 12px 4px 4px; border-radius: 999px; display: grid; grid-template-columns: auto auto; column-gap: 7px; row-gap: 1px; align-items: center;
  background: linear-gradient(180deg, rgba(92,58,34,0.92), rgba(36,22,9,0.95)); border: 1.5px solid rgba(224,188,99,0.6); box-shadow: 0 4px 10px rgba(0,0,0,0.45); font-size: 0.8em; line-height: 1.1; text-align: left; }
#start-screen.kbm .profile-compact img { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,230,160,0.8); }
#start-screen.kbm .profile-compact #profile-compact-name, #start-screen.kbm .profile-compact > span { grid-column: 2; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff3d6; font-weight: 700; }
#start-screen.kbm .profile-compact a { grid-column: 2; margin: 0; font-size: 0.86em; color: var(--accent-warm, #e0bc63); }
#start-screen.kbm .mode-row { width: 100%; max-width: 380px; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.32); border: 1px solid rgba(216,174,90,0.35); }
#start-screen.kbm .mode-chip { flex: 1; border: none; background: none; box-shadow: none; padding: 10px 6px; border-radius: 999px; color: var(--ivory, #ede1c8); font-weight: 600; font-size: 0.9em; }
#start-screen.kbm .mode-chip.selected { background: linear-gradient(180deg, #ffe6a0, #e0bc63 55%, #c19a3f); color: #241708; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
#start-screen.kbm .diff-picker { align-items: stretch; width: 100%; max-width: 380px; margin: 0; text-align: left; padding: 10px 12px 12px; border-radius: 16px;
  background: linear-gradient(165deg, rgba(0,0,0,0.18), rgba(0,0,0,0.36)); border: 1px solid rgba(216,174,90,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
#start-screen.kbm .diff-label { margin: 0 0 8px; font: 800 0.68em/1 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-warm, #e0bc63); }
#start-screen.kbm .diff-options { justify-content: flex-start; gap: 6px; }
#start-screen.kbm .diff-chip { min-width: 46px; white-space: nowrap; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(216,174,90,0.4); background: rgba(255,255,255,0.05); color: var(--ivory, #ede1c8); font-size: 0.9em; box-shadow: none; transition: transform 0.1s ease; }
#start-screen.kbm .diff-options:not(:has(> :nth-child(5))) .diff-chip { flex: 1; }
#start-screen.kbm .diff-options:has(> :nth-child(5)) { display: grid; grid-template-columns: repeat(5, 1fr); }
/* v179: mange talvalg (fx kort ved uddeling) bliver til en skyder på én linje. De oprindelige knapper skjules, men styrer stadig spillet. */
#start-screen.kbm .diff-options.kbm-as-slider { display: none !important; }
#start-screen.kbm .diff-label:has(.kbm-val) { display: flex; justify-content: space-between; align-items: center; gap: 10px; line-height: 1.25; }
#start-screen.kbm .kbm-val { flex: none; font-size: 1.5em; line-height: 1; letter-spacing: 0; color: #fff3d6; }
.kbm-slider { --p: 0%; --tw: 26px; padding: 6px 0 0; }
.kbm-slider input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 38px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.kbm-slider input[type=range]:focus { outline: none; }
.kbm-slider input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; border: 1px solid rgba(216,174,90,0.45);
  background: linear-gradient(90deg, #c19a3f, #ffe6a0) 0 0 / calc(var(--tw) / 2 + (100% - var(--tw)) * var(--f, 0)) 100% no-repeat, rgba(0,0,0,0.45); }
.kbm-slider input[type=range]::-moz-range-track { height: 10px; border-radius: 999px; border: 1px solid rgba(216,174,90,0.45); background: rgba(0,0,0,0.45); }
.kbm-slider input[type=range]::-moz-range-progress { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #c19a3f, #ffe6a0); }
.kbm-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 36px; margin-top: -14px; border-radius: 6px; border: 1.5px solid #fff3d6;
  background: linear-gradient(160deg, #fff6cf, #e0bc63 60%, #c19a3f); box-shadow: 0 4px 10px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(143,113,41,0.25); }
.kbm-slider input[type=range]::-moz-range-thumb { width: 24px; height: 34px; border-radius: 6px; border: 1.5px solid #fff3d6; background: linear-gradient(160deg, #fff6cf, #e0bc63 60%, #c19a3f); box-shadow: 0 4px 10px rgba(0,0,0,0.55); }
.kbm-slider .kbm-ticks { display: flex; justify-content: space-between; padding: 2px calc(var(--tw) / 2) 0; }
.kbm-slider .kbm-ticks span { flex: 0 0 0; display: flex; justify-content: center; font-size: 0.82em; color: var(--ivory-dim, #b3a687); cursor: pointer; padding-top: 2px; }
.kbm-slider .kbm-ticks span.on { color: #ffe6a0; font-weight: 800; }
#start-screen.kbm .diff-options:has(> :nth-child(5)) .diff-chip { min-width: 0; padding-left: 4px; padding-right: 4px; }
#start-screen.kbm .diff-chip:active { transform: scale(0.95); }
#start-screen.kbm .diff-chip.selected { background: linear-gradient(180deg, #ffe6a0, #e0bc63 55%, #c19a3f); color: #241708; font-weight: 800; border-color: #fff3d6; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
#start-screen.kbm .diff-note { margin-top: 6px; }
#start-screen.kbm .kbm-hide { display: none !important; }
/* v183: "Fortsæt spil"-kortet */
#start-screen.kbm .kbm-resume { border-color: rgba(255,230,160,0.8); background: linear-gradient(160deg, rgba(224,188,99,0.26), rgba(0,0,0,0.34)); box-shadow: 0 0 18px rgba(224,188,99,0.22), inset 0 1px 0 rgba(255,255,255,0.08); padding: 12px; }
.kbm-resume-text { font-size: 0.9em; line-height: 1.4; color: var(--ivory, #ede1c8); margin-bottom: 10px; }
.kbm-resume-btns { display: flex; gap: 8px; }
.kbm-resume-btns button { font: inherit; border-radius: 12px; padding: 11px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kbm-resume-btns .kbm-forget { flex: none; background: rgba(255,255,255,0.05); border: 1px solid rgba(216,174,90,0.45); color: var(--ivory, #ede1c8); font-size: 0.88em; }
.kbm-resume-btns .kbm-continue { flex: 1; border: none; font-weight: 800; color: #241708; background: linear-gradient(180deg, #ffe6a0, #e0bc63 55%, #c19a3f); box-shadow: 0 3px 0 #8f7129, 0 6px 12px rgba(0,0,0,0.4); }
/* v180: "Mod AI / Online", når valget ligger som knapper i et kort (Davoserjazz, Røvhul og de fem nyere spil) */
#start-screen.kbm .kbm-mode { padding: 4px; border-radius: 999px; background: rgba(0,0,0,0.32); border: 1px solid rgba(216,174,90,0.35); box-shadow: none; }
#start-screen.kbm .kbm-mode .diff-label { display: none; }
#start-screen.kbm .kbm-mode .diff-options { gap: 4px; flex-wrap: nowrap; }
#start-screen.kbm .kbm-mode .diff-chip { flex: 1; min-width: 0; border: none; background: none; box-shadow: none; padding: 10px 6px; border-radius: 999px; font-weight: 600; font-size: 0.9em; white-space: nowrap; }
#start-screen.kbm .kbm-mode .diff-chip.selected { background: linear-gradient(180deg, #ffe6a0, #e0bc63 55%, #c19a3f); color: #241708; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,0.4); }
#start-screen.kbm .diff-picker:empty, #start-screen.kbm .kbm-mode .diff-note:empty { display: none; }
#start-screen.kbm #ai-mode-panel { width: 100%; max-width: 380px; align-items: stretch; gap: 12px; }
#start-screen.kbm #ai-mode-panel > .diff-picker { max-width: none; }
#start-screen.kbm .kbm-mode.kbm-mode3 .diff-chip { font-size: 0.84em; padding-left: 2px; padding-right: 2px; }
#start-screen.kbm .special-box { width: 100%; max-width: 380px; margin: 0; border-radius: 16px; border: 1px solid rgba(216,174,90,0.35); background: linear-gradient(165deg, rgba(0,0,0,0.18), rgba(0,0,0,0.36)); }
#start-screen.kbm #online-panel, #start-screen.kbm #online-lobby { max-width: 380px; padding: 14px 12px; border-radius: 16px; background: linear-gradient(165deg, rgba(0,0,0,0.18), rgba(0,0,0,0.36)); border: 1px solid rgba(216,174,90,0.35); }
#start-screen.kbm #online-panel:not(.show), #start-screen.kbm #online-lobby:not(.show) { padding: 0; border: none; background: none; }

/* bundbjælken (v178): den store startknap øverst og de fire genveje i en række under den. Ligger fast i bunden af skærmen. */
#start-screen.kbm { padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
.kbm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0 auto; width: 100%; max-width: 452px; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 22px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(8,28,22,0), rgba(8,28,22,0.97) 26%); }
.kbm-dock .kbm-go { order: 1; flex: 1 0 100%; width: 100%; max-width: none; height: 56px; margin: 0; padding: 0 10px; border: none; border-radius: 16px; font-size: 1.12em; font-weight: 800; color: #241708; cursor: pointer; white-space: nowrap;
  background: radial-gradient(ellipse 46% 130% at 50% 45%, rgba(255,252,232,0.95), rgba(255,246,207,0) 72%), linear-gradient(180deg, #ffe6a0, #e0bc63 55%, #c19a3f);
  box-shadow: 0 4px 0 #8f7129, 0 10px 18px rgba(0,0,0,0.45), 0 0 24px rgba(255,214,120,0.45), inset 0 1px 0 rgba(255,255,255,0.7); -webkit-tap-highlight-color: transparent; }
.kbm-dock .kbm-go::after { content: ' →'; }
.kbm-dock .kbm-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f7129, 0 6px 12px rgba(0,0,0,0.45); }
.kbm-dock .kbm-ico { order: 2; flex: 1 1 0; min-width: 0; width: auto; max-width: none; height: 50px; margin: 0; padding: 0 2px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, rgba(92,58,34,0.9), rgba(36,22,9,0.95)); border: 1px solid rgba(224,188,99,0.55); color: var(--ivory, #ede1c8); font: inherit; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.4); -webkit-tap-highlight-color: transparent; }
.kbm-dock .kbm-ico .i { font-size: 1.15em; line-height: 1; }
.kbm-dock .kbm-ico .t { font-size: 0.66em; line-height: 1; max-width: 100%; color: var(--ivory, #ede1c8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbm-dock .kbm-ico:active { transform: scale(0.95); }

/* ---------- Knapper i toppen af spillet ---------- */
body.kbm-on #help-toggle, body.kbm-on #restart-toggle, body.kbm-on #undo-toggle, body.kbm-on #score-toggle, body.kbm-on #odds-toggle, body.kbm-on #history-toggle, body.kbm-on #sitout-toggle, body.kbm-on #btn-leave-table, body.kbm-on #room-code-toggle {
  font-weight: 700; color: #ffe6a0; background: linear-gradient(180deg, #5c3a22, #241609); border: 1.5px solid rgba(224,188,99,0.7); box-shadow: 0 4px 10px rgba(0,0,0,0.45); }
/* Poker har knapper i øverste højre hjørne allerede på startskærmen: profilen rykker ned under dem */
body.kbm-on:has(#history-toggle) #start-screen.kbm .profile-compact { top: 56px; }
/* v180: de fem nyere spil har en topbjælke med .icon-btn */
body.kbm-on #top-bar .icon-btn { min-height: 38px; padding: 6px 13px; font-size: 0.88em; font-weight: 700; color: #ffe6a0; background: linear-gradient(180deg, #5c3a22, #241609); border: 1.5px solid rgba(224,188,99,0.7); box-shadow: 0 4px 10px rgba(0,0,0,0.4); }

/* ---------- Vinduer ---------- */
body.kbm-on #overlay-box, body.kbm-on #help-overlay-box, body.kbm-on .ov-box { border-radius: 22px; border-color: rgba(255,230,160,0.6); box-shadow: 0 22px 50px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.1); animation: kbm-pop 0.26s cubic-bezier(0.2, 1.2, 0.35, 1); }
@keyframes kbm-pop { from { opacity: 0; transform: translateY(12px) scale(0.95); } to { opacity: 1; transform: none; } }
body.kbm-on #overlay-box h2, body.kbm-on #help-overlay-box h2, body.kbm-on .ov-box h2 { color: #ffe6a0; margin-top: 2px; }
body.kbm-on #overlay-box button.primary, body.kbm-on #help-overlay-box button.primary, body.kbm-on .ov-box button.primary { border: none; border-radius: 14px; color: #241708; font-weight: 800;
  background: linear-gradient(180deg, #ffe6a0, #e0bc63 55%, #c19a3f); box-shadow: 0 4px 0 #8f7129, 0 8px 14px rgba(0,0,0,0.4); }

@media (prefers-reduced-motion: reduce) { .kbm-hero, .kbm-hero::after, body.kbm-on #overlay-box, body.kbm-on #help-overlay-box { animation: none; } .kbm-hero::after { display: none; } }