.diamwolf-mj-site { background: #e8eee9; color: #203b33; }
.diamwolf-mj-site .new-shell { max-width: 1420px; }
.diamwolf-mj-site .new-brand-link { font-size: 1.4rem; color: #145f49; }
.diamwolf-mj-site .new-brand-link small { display: block; font-size: .75rem; }
#diamwolf_mj_root { width: 100%; max-width: 1320px; margin: 0 auto; padding: 20px; font-family: system-ui, sans-serif; }
#diamwolf_mj_root * { box-sizing: border-box; }
#diamwolf_mj_root h1, #diamwolf_mj_root h2, #diamwolf_mj_root p { margin: 0 0 12px; }
#diamwolf_mj_root h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
#diamwolf_mj_root h2 { font-size: 1.15rem; }
#diamwolf_mj_root button, #diamwolf_mj_root select, #diamwolf_mj_root input { font: inherit; }
#diamwolf_mj_root button, #diamwolf_mj_root .diamwolf-mj-heading a { border: 1px solid #13674f; background: #176c53; color: #fff; border-radius: 8px; padding: 10px 15px; cursor: pointer; text-decoration: none; }
#diamwolf_mj_root button:disabled { opacity: .5; cursor: default; }
/* 共用首頁的連結重設使用 !important；僅恢復麻將導覽按鈕的對比。 */
#diamwolf_mj_root .diamwolf-mj-heading a { display: inline-block !important; background: #176c53 !important; color: #fff !important; border: 1px solid #13674f !important; padding: 10px 15px !important; border-radius: 8px; }
#diamwolf_mj_root button:focus-visible, #diamwolf_mj_root a:focus-visible { outline: 3px solid #eda539; outline-offset: 3px; }
#diamwolf_mj_root input, #diamwolf_mj_root select { border: 1px solid #b6c8bf; background: #fff; color: #203b33; padding: 9px; border-radius: 6px; max-width: 100%; min-width: 0; }
#diamwolf_mj_root label { display: grid; gap: 5px; font-size: .9rem; }
#diamwolf_mj_root form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 12px 0; }
#diamwolf_mj_root [hidden] { display: none !important; }
.diamwolf-mj-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 22px; }
.diamwolf-mj-heading nav { display: flex; flex-wrap: wrap; gap: 8px; }
.diamwolf-mj-kicker { display: block; margin: 0 0 6px; font-size: .7rem; letter-spacing: .15em; color: #2c725d; }
.diamwolf-mj-panel { background: #fffdf7; border: 1px solid #c6d5ca; border-radius: 14px; padding: 18px; margin-bottom: 18px; box-shadow: 0 4px 14px #264b3410; }
.diamwolf-mj-panel-heading { display: flex; justify-content: space-between; gap: 10px; }
.diamwolf-mj-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
#diamwolf_mj_error:empty { display: none; }
#diamwolf_mj_error { background: #fff0e7; border: 1px solid #d89d79; color: #853b22; padding: 12px; border-radius: 8px; margin-bottom: 14px; }
#diamwolf_mj_rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.diamwolf-mj-room { display: grid; gap: 8px; padding: 15px; border: 1px solid #c6d5ca; border-radius: 10px; color: #175f49; background: #f0f6ef; text-decoration: none; }
#diamwolf_mj_seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.diamwolf-mj-lobby-seat { padding: 12px; border: 1px solid #c6d5ca; border-radius: 10px; display: grid; gap: 8px; overflow-wrap: anywhere; }
.diamwolf-mj-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 20px; min-height: 500px; margin: 0 0 24px; padding: 28px; border: 16px solid #67472c; border-radius: 32px; background: radial-gradient(ellipse at 50% 35%, #297b61, #10573f); box-shadow: inset 0 0 45px #07312170, 0 9px 0 #422b1d, 0 18px 25px #142d3430; color: #f8f1d7; }
.diamwolf-mj-top { grid-column: 1 / 4; grid-row: 1; }
.diamwolf-mj-left { grid-column: 1; grid-row: 2; }
.diamwolf-mj-center { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid #a7ccb960; border-radius: 16px; padding: 12px; }
.diamwolf-mj-right { grid-column: 3; grid-row: 2; }
.diamwolf-mj-bottom { grid-column: 1 / 4; grid-row: 3; }
.diamwolf-mj-seat { min-width: 0; padding: 12px; border-radius: 12px; background: #0737233d; }
.diamwolf-mj-seat.is-turn { background: #ffffff1c; box-shadow: 0 0 0 2px #e9bb69; }
.diamwolf-mj-seat-title { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.diamwolf-mj-seat-title strong { overflow-wrap: anywhere; }
.diamwolf-mj-seat-title small { margin-left: auto; }
.diamwolf-mj-public { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.diamwolf-mj-meld { display: inline-flex; gap: 2px; padding-right: 5px; }
.diamwolf-mj-tile { display: inline-flex; position: relative; justify-content: center; align-items: center; width: 38px; height: 50px; flex: 0 0 38px; border: 1px solid #c9d2cb; border-radius: 5px; padding: 2px; background: linear-gradient(125deg, #fff 55%, #f1f5f2); box-shadow: 0 3px 0 #d5dfd7, 1px 6px 0 #19754e, 2px 7px 5px #0004; margin-bottom: 6px; }
.diamwolf-mj-tile svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.diamwolf-mj-tile.is-back { background: linear-gradient(125deg, #249361, #147448); border-color: #14653f; box-shadow: inset 0 0 0 2px #ffffff17, 0 3px 0 #d5dfd7, 1px 6px 0 #15633f, 2px 7px 5px #0004; }
.diamwolf-mj-concealed { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 6px; }
.diamwolf-mj-concealed .diamwolf-mj-tile { width: 18px; height: 26px; flex-basis: 18px; border-radius: 3px; margin-bottom: 4px; }
.diamwolf-mj-tile.is-taken { opacity: .35; box-shadow: none; }
#diamwolf_mj_claim .diamwolf-mj-tile { width: 56px; height: 72px; font-size: 26px; margin: 12px; }
#diamwolf_mj_hand { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0; }
#diamwolf_mj_hand button.diamwolf-mj-tile { width: 48px; height: 67px; flex-basis: 48px; padding: 3px; border-color: #c9d2cb; border-radius: 5px; background: linear-gradient(125deg, #fff 55%, #f1f5f2); }
#diamwolf_mj_hand button.is-selected { transform: translateY(-7px); outline: 3px solid #d59424; }
#diamwolf_mj_hand button.is-drawn { margin-left: 14px; }
#diamwolf_mj_hand button:disabled { opacity: 1; }
.diamwolf-mj-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.diamwolf-mj-actions label { flex: 1; min-width: 150px; }
#diamwolf_mj_selection { width: 100%; min-height: 22px; color: #81581f; }
#diamwolf_mj_log { max-height: 260px; overflow-y: auto; line-height: 1.7; padding-top: 12px; }
.diamwolf-mj-tai-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 18px; }
.diamwolf-mj-tai-list div { display: flex; justify-content: space-between; padding: 9px; background: #edf4ec; border-radius: 6px; }
#diamwolf_mj_root li { margin-bottom: 10px; line-height: 1.65; }
@media (max-width: 700px) {
    #diamwolf_mj_root { padding: 10px; }
    .diamwolf-mj-heading { flex-direction: column; align-items: start; gap: 8px; }
    .diamwolf-mj-panel { padding: 12px; }
    #diamwolf_mj_seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #diamwolf_mj_root form label { flex: 1 1 135px; }
    .diamwolf-mj-table { border-width: 8px; border-radius: 20px; padding: 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 450px; }
    .diamwolf-mj-top { grid-column: 1 / 3; }
    .diamwolf-mj-left { grid-column: 1; grid-row: 2; }
    .diamwolf-mj-right { grid-column: 2; grid-row: 2; }
    .diamwolf-mj-center { grid-column: 1 / 3; grid-row: 3; min-height: 120px; }
    .diamwolf-mj-bottom { grid-column: 1 / 3; grid-row: 4; }
    .diamwolf-mj-seat { padding: 8px; }
    .diamwolf-mj-tile { width: 27px; height: 37px; flex-basis: 27px; font-size: 12px; }
    .diamwolf-mj-concealed .diamwolf-mj-tile { width: 14px; height: 21px; flex-basis: 14px; }
    #diamwolf_mj_hand { gap: 5px; }
    #diamwolf_mj_hand button.diamwolf-mj-tile { width: 34px; height: 50px; flex-basis: 34px; font-size: 19px; }
    #diamwolf_mj_hand button.is-drawn { margin-left: 5px; }
}