/* Title-only skin. Battle and deck editing keep their v0.8 layouts. */
body.title-mode{margin:0;overflow:hidden;background:#080e22}
.title-mode>.site-head,.title-mode>.backdrop{display:none}
.title-mode>main{margin:0;padding:0;max-width:none;width:100%}
#landing{position:relative;isolation:isolate;box-sizing:border-box;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;padding:0;overflow:hidden;background:#080e22;color:#fff2d3}
#landing.hide{display:none}
.title-art{position:absolute;inset:0;z-index:-2;background:url('assets/title/duel.webp') center top/cover no-repeat}
#landing:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#070c1c33,transparent 25%,transparent 42%,#080e2233 55%,#080e22ec 83%)}
.title-logo{position:absolute;top:max(12px,env(safe-area-inset-top));left:4%;right:4%;text-align:center;text-shadow:0 2px 9px #000,0 0 22px #000}
.title-logo h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(30px,8.3vw,70px);line-height:1.08;letter-spacing:.035em;margin:0;color:#ffe6a2;background:linear-gradient(#fff8dc,#e6bb65 58%,#fff3c7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.title-logo p{font-family:'Yu Mincho',serif;font-size:clamp(11px,3vw,17px);letter-spacing:.23em;margin:7px 0}.title-star{display:block;color:#efd08e;font-size:19px;line-height:1.2}
.title-controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:5%;right:5%;max-width:560px;margin:auto;display:grid;gap:10px;text-align:center}
.title-tagline{margin:0;color:#fff4d5;font-family:'Yu Mincho',serif;font-size:clamp(12px,3.5vw,20px);text-shadow:0 2px 8px #000}.title-divider{display:flex;align-items:center;gap:14px;color:#efd08e;height:12px}.title-divider:before,.title-divider:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#dfbc70,transparent)}
#landing button,#landing select,#landing input{font-family:inherit;box-sizing:border-box;touch-action:manipulation}
.title-deck{display:flex;align-items:center;gap:9px;padding:6px 11px;border:1px solid #caa461;border-radius:5px;background:#101a30eb;box-shadow:inset 0 0 0 3px #caa46120;min-width:0;height:52px}.title-deck>span{font-size:12px;white-space:nowrap;color:#e1c690}.title-deck select{flex:1;width:0;min-width:0;max-width:100%;height:38px;margin:0;padding:0 22px 0 4px;color:#fff1d5;font-size:14px;background:transparent;border:0;border-radius:0}.title-deck option{background:#101a30;color:#fff}
#landing .title-primary{width:100%;min-height:58px;margin:0;border:2px solid #f8dda1;border-radius:6px;color:#35200b;background:linear-gradient(115deg,#ad742a,#f7d98e 30%,#fff0b4 48%,#d7a94e 76%,#aa702b);box-shadow:inset 0 0 0 3px #79511f,0 2px 14px #d8a44430;font-family:'Yu Mincho',Georgia,serif;font-size:25px;font-weight:800;letter-spacing:.1em;text-shadow:0 1px #fff7cc}
.title-secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.title-secondary-row button{min-height:48px;margin:0;border:1px solid #e4c583;border-radius:5px;box-shadow:inset 0 0 0 3px #d8b16c20;background:linear-gradient(130deg,#1d3861,#0c1832 60%,#1c2e50);color:#fff0d4;font-size:18px;font-family:'Yu Mincho',serif!important;font-weight:700}
.title-footer{display:flex;align-items:center;justify-content:center;gap:16px;font-size:10px;color:#c9bcaa}.title-footer button,#landing .title-resume{border:0;background:transparent;color:#f2d39a;min-height:28px;padding:2px 5px;font-size:11px;margin:0}.title-footer button{text-decoration:underline}#landing .title-resume[hidden]{display:none}
#landing button:focus-visible,#landing select:focus-visible,#landing input:focus-visible{outline:3px solid #8ae9ff;outline-offset:3px}
#landing button:active{filter:brightness(1.18)}
.title-dialog{box-sizing:border-box;width:min(92vw,460px);max-height:86dvh;overflow:auto;margin:auto;padding:22px;border:1px solid #d4b36b;border-radius:12px;background:#0d1930;color:#fff1d5;box-shadow:0 20px 90px #000b;text-align:left}.title-dialog::backdrop{background:#020616bf;backdrop-filter:blur(7px)}.title-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.title-dialog h2{font-size:22px;margin:0}.title-dialog-head button{background:#253653;border:1px solid #7d90b0;color:white;min-width:42px;min-height:42px;border-radius:6px}.title-dialog p{font-size:14px;line-height:1.7}.title-dialog label{display:block;font-size:13px;margin:20px 0 9px}.title-dialog select{width:100%;padding:12px;background:#1d2c48;color:white;border:1px solid #91a0b4;border-radius:6px;margin-bottom:18px}.title-dialog .join-form{display:flex;gap:8px}.title-dialog input{width:0;flex:1;min-width:0;font-size:16px}.title-dialog .join-form button{min-width:64px;background:#cfb16e;color:#1b2030;border:0;border-radius:6px}
@media(orientation:portrait){.title-art{background-size:auto 100%;background-position:center top}}
@media(orientation:landscape){.title-art{right:42%;background-size:auto 130%;background-position:center 24%}.title-logo{left:3%;right:45%;top:7%}.title-logo h1{font-size:clamp(26px,4.4vw,64px)}.title-logo p{font-size:13px}.title-controls{left:59%;right:4%;top:0;bottom:0;align-content:center;max-width:490px}.title-tagline{font-size:clamp(12px,1.4vw,18px)}#landing:after{background:linear-gradient(90deg,transparent 25%,#080e2244 48%,#080e22 62%)}.title-deck{height:48px}.title-secondary-row{gap:8px}.title-secondary-row button{font-size:16px}.title-controls{gap:8px}}
@media(max-height:600px) and (orientation:portrait){.title-controls{gap:5px;bottom:5px}.title-logo{top:5px}.title-star{display:none}.title-deck{height:44px}.title-secondary-row button{min-height:42px}#landing .title-primary{min-height:48px;font-size:22px}.title-tagline{font-size:12px}.title-divider{height:7px}.title-footer{font-size:9px}}
@media(max-height:390px) and (orientation:landscape){.title-controls{gap:4px}.title-deck{height:42px}#landing .title-primary{min-height:44px;font-size:21px}.title-secondary-row button{min-height:40px}.title-divider{height:7px}.title-footer{gap:7px;font-size:9px}.title-tagline{font-size:11px}}
@media(prefers-reduced-motion:reduce){#landing *{animation:none!important;transition:none!important}}

body.title-mode{min-height:0;height:100dvh}.title-mode>.footer{display:none}


/* v1.0.3: persistent player profile (visible without consuming a full title button row) */
#landing .title-player-name{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:39px;margin:0;padding:5px 12px;border:1px solid #d3b67466;border-radius:7px;background:#101a30da;color:#f7e7c7;font-size:12px}
#landing .title-player-name strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff4d0;font-size:14px}
#landing .title-player-name .name-edit{color:#cbb27b;font-size:11px;white-space:nowrap}
#playerNameDialog input{display:block;box-sizing:border-box;width:100%;min-height:46px;border:1px solid #8d9dbb;border-radius:7px;padding:9px 12px;background:#1b2b46;color:#fff8e6;font-size:16px}
#playerNameDialog .title-primary{margin-top:12px;font-size:18px;min-height:48px}
#playerNameDialog .name-error{margin:6px 0;min-height:18px;font-size:12px;color:#ffa8a8}
#arena .player-person{min-width:0}
#arena .partner-title{min-width:0;overflow:hidden}
#arena .partner-title .player-display-name{font-size:clamp(10px,1.2vw,15px);color:#ffdc95}
#arena .partner-title .partner-subname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(7px,.85vw,10px);color:#d1dbeb}
@media(max-height:390px) and (orientation:landscape){#landing .title-player-name{min-height:30px;padding:3px 6px;font-size:10px}#landing .title-player-name strong{font-size:12px}.title-controls{gap:3px}}
@media(max-height:620px) and (orientation:portrait){#landing .title-player-name{min-height:33px}#landing .title-player-name strong{font-size:12px}}
/* Keep invalid player-name submissions visibly unavailable. */
#playerNameSave:disabled{opacity:.42;cursor:not-allowed;filter:grayscale(.45)}
#playerNameInput[aria-invalid="true"]{border-color:#ffb5b5;outline-color:#ffb5b5}

/* Matchmaking on the title screen */
.auto-match-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:9px 0}
.auto-match-buttons button{min-height:58px;font-size:clamp(15px,2.3vw,20px);padding:10px 8px}
.title-controls .title-friend{width:100%;border:1px solid rgba(236,194,107,.65);background:rgba(15,31,59,.9);color:#f7ddad;padding:14px;border-radius:10px;font-weight:700}
.title-free{background:linear-gradient(145deg,#264d79,#163659)!important;color:#e7f2ff!important;border-color:#94b5e0!important}
.rank-current{padding:12px;background:#152a47;border:1px solid #9e8657;border-radius:9px;margin:12px 0;font-weight:700;color:#f8e8c7}
.master-heading{font-size:15px;color:#f3db9e;margin-top:18px}
.master-board{max-height:160px;overflow:auto;font-size:13px;color:#eff1f5}
.master-row{display:grid;grid-template-columns:50px 1fr auto;gap:8px;padding:7px 4px;border-bottom:1px solid #40516e}
.waiting.auto-search .code-card,.waiting.auto-search #copyInvite,.waiting.auto-search .micro{display:none!important}
.waiting.auto-search .cancel-auto{display:inline-flex!important;margin-top:16px}
@media(max-width:470px){.auto-match-buttons{gap:6px}.auto-match-buttons button{font-size:14px;min-height:52px}}

/* v1.5: persistent rank chip without adding another vertical row on the title screen. */
#landing .title-profile-row{display:flex;gap:7px;align-items:stretch;min-width:0;width:100%}
#landing .title-profile-row .title-player-name{flex:1 1 49%;min-width:0;width:auto;justify-content:center;padding-inline:6px;white-space:nowrap;overflow:hidden}
#landing .title-profile-row .title-player-name strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
#landing .title-profile-row .title-rank-badge{flex:1 1 49%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:39px;padding:4px 6px;border:1px solid #d3b67488;border-radius:7px;background:#142642e8;color:#ffe3a7;font-size:clamp(10px,1.4vw,13px);font-weight:700;cursor:pointer}
#landing .title-rank-badge:hover,#landing .title-rank-badge:focus-visible{border-color:#f5d389;outline-offset:2px}
@media(max-width:480px),(max-height:390px) and (orientation:landscape){#landing .title-profile-row .name-caption{display:none}#landing .title-profile-row .title-rank-badge{min-height:30px;font-size:11px}}
/* Keep title controls within tiny phone landscape screens (e.g. 568×320). */
@media (max-height:350px) and (orientation:landscape){
 #landing .title-tagline,#landing .title-divider,#landing .title-footer{display:none!important}
 #landing .title-controls{gap:3px;align-content:center;top:0;bottom:0}
 #landing .title-profile-row .title-player-name,#landing .title-profile-row .title-rank-badge{min-height:29px;padding:2px 5px}
 #landing .title-deck{height:34px;min-height:34px}
 #landing .title-deck select{font-size:12px}
 #landing .auto-match-buttons{margin:0;gap:4px}
 #landing .auto-match-buttons button{min-height:36px!important;padding:3px!important;font-size:13px!important}
 #landing .title-friend{padding:6px!important;min-height:34px;font-size:12px}
 #landing .title-secondary-row button{min-height:32px!important;padding:3px!important;font-size:12px!important}
}

/* v1.5.1: title and matchmaking button typography. Overrides title-primary's
   higher specificity on small and large iPhone screens, and prevents wraps. */
#landing .auto-match-buttons .title-primary {
  box-sizing: border-box;
  min-width: 0;
  min-height: 45px;
  padding: 9px 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: clamp(12px, 3.5vw, 15px);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
#rankDialog #startRanked {
  box-sizing: border-box;
  width: 100%;
  min-height: 47px;
  padding: 10px 7px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
#rankDialog .title-dialog-head h2 {font-size: clamp(17px, 4.5vw, 21px);}
@media (max-height: 350px) and (orientation: landscape) {
  #landing .auto-match-buttons .title-primary {min-height: 33px!important; font-size: 11px!important; padding: 2px!important; letter-spacing: 0;}
  #rankDialog #startRanked {min-height: 37px; font-size: 13px; padding: 5px;}
}