:root{
  --ink:#163645;--muted:#58717e;--line:#bfd4dc;--panel:#ffffff;--soft:#edf6f8;
  --blue:#0d718e;--blue2:#075b79;--gold:#c88a00;--purple:#6a43a6;--danger:#9b312d;
  --shadow:0 6px 18px rgba(5,35,50,.16)
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:"Yu Gothic UI","Meiryo",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#0c5871,#083b50)}
button,a{font:inherit}.hidden{display:none!important}
.game-viewport{position:fixed;inset:0;overflow:hidden;background:linear-gradient(180deg,#0c5871 0 18%,#e7eff2 18% 100%)}
.game-scale{position:absolute;width:1180px;height:720px;transform-origin:top left}
.game-shell{width:1180px;height:720px;padding:8px 10px;overflow:hidden}
.topbar{height:48px;display:flex;align-items:center;justify-content:space-between;color:#fff;padding:0 4px}
.brand{display:flex;align-items:center;gap:16px}.brand h1{font-size:25px;line-height:1;margin:0}.brand h1 span{font-size:11px;background:#ffffff26;padding:4px 7px;border-radius:999px;vertical-align:middle}.goal{font-size:14px;border-left:1px solid #ffffff55;padding-left:15px}.goal b{font-size:17px;color:#ffe180}
.top-actions{display:flex;gap:6px}.small-btn{border:1px solid #ffffff66;background:#ffffff18;color:#fff;text-decoration:none;border-radius:7px;padding:6px 10px;font-weight:800;cursor:pointer;font-size:13px}.small-btn:hover{background:#ffffff2b}.small-btn.danger{background:#8f2f2a}.link-btn{display:inline-flex;align-items:center}
.table-layout{height:654px;display:grid;grid-template-rows:58px 137px 92px 137px 206px;gap:6px}
.status-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:6px}.score-box,.mood-box,.zone,.mission-box,.turn-box,.hand-zone{background:rgba(255,255,255,.98);border:1px solid #cbdde3;border-radius:11px;box-shadow:var(--shadow)}
.score-box{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:7px 12px}.score-box>span{font-weight:900;font-size:16px}.score-box>b{font-size:25px;color:#cf9000;letter-spacing:2px;text-align:right;line-height:1}.score-box small{grid-column:1/3;color:var(--muted);font-size:12px}.score-box i{font-style:normal}
.mood-box{text-align:center;padding:5px 10px}.mood-box span{display:block;font-size:11px;color:var(--muted);font-weight:800}.mood-box b{display:block;font-size:20px;line-height:1.15}.mood-box small{font-size:11px;color:#55717c}
.zone{position:relative;padding:25px 10px 6px;overflow:hidden}.zone-title{position:absolute;left:11px;right:11px;top:5px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}.zone-title b{font-size:15px;color:var(--ink)}
.field-row{height:104px;display:flex;align-items:center;justify-content:center;gap:14px;overflow:hidden}
.field-card,.empty-slot{width:102px;height:102px;border-radius:9px;flex:0 0 auto}.empty-slot{border:2px dashed #c8d9de;background:#f6fafb;color:#9aabb3;display:grid;place-items:center;font-weight:800;font-size:13px}.field-card{position:relative;background:#fff;border:2px solid #abc9d2;overflow:hidden;box-shadow:0 3px 9px rgba(0,40,55,.12)}.field-card.linked{border-color:#d69600;box-shadow:0 0 0 2px #ffe49c inset,0 3px 9px rgba(0,40,55,.12)}.field-card.secret-ready{border-color:#7649b0}.field-card img{width:100%;height:68px;object-fit:cover;display:block;background:#e5eff2}.field-name{height:31px;padding:3px 4px 0;font-size:11px;font-weight:900;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-badges{position:absolute;top:3px;left:3px;right:3px;display:flex;justify-content:space-between;pointer-events:none}.field-badges span{font-size:9px;line-height:1;background:#0c718bcc;color:#fff;border-radius:5px;padding:3px 4px;font-weight:900}.field-badges .secret{background:#6740a7d9}.field-badges .link{background:#b97900e6}
.middle-row{display:grid;grid-template-columns:43% 57%;gap:6px}.mission-box{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:8px 10px;overflow:hidden}.mission-label{background:#bd8300;color:#fff;border-radius:7px;padding:7px 8px;font-size:13px;font-weight:900}.mission-copy{min-width:0}.mission-copy b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mission-copy span{display:block;font-size:12px;line-height:1.25;color:#4e6874;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mission-reward{white-space:nowrap;font-size:12px;font-weight:900;color:#8d6200;background:#fff1bd;border-radius:7px;padding:6px 7px}
.turn-box{position:relative;padding:7px 9px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:4px 8px;overflow:hidden}.turn-main{display:flex;align-items:center;gap:12px;font-size:13px}.turn-main>b{font-size:16px;color:var(--blue2)}.turn-main strong{font-size:16px;color:var(--purple)}.turn-actions{display:flex;gap:6px}.action-btn{border:1px solid #c5d5db;border-radius:7px;background:#e9f0f3;color:#173847;padding:6px 11px;font-size:12px;font-weight:900;cursor:pointer}.action-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.action-btn:disabled{opacity:.4;cursor:not-allowed}.beginner-hint{grid-column:1/2;display:flex;align-items:center;gap:7px;background:#eaf8fb;border-radius:7px;padding:5px 7px;min-width:0}.beginner-hint b{font-size:12px;white-space:nowrap;color:#075b79}.beginner-hint span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#47626d}.event-line{grid-column:1/2;font-size:11px;color:#596f78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:center}.beginner-hint:not(.hidden)+.event-line{display:none}
.hand-zone{position:relative;padding:29px 10px 8px;overflow:hidden}.hand-header{position:absolute;left:11px;right:11px;top:5px;display:flex;justify-content:space-between;align-items:center}.hand-header>div{display:flex;align-items:baseline;gap:12px}.hand-header b{font-size:15px}.hand-header span{font-size:11px;color:var(--muted)}.play-btn{border:0;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:900;background:#0c7794;color:#fff;cursor:pointer}.play-btn:disabled{background:#b8c8ce;cursor:not-allowed}
.hand-stack{position:relative;width:100%;height:178px;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#f4fafb,#edf5f7);border:1px solid #d7e5e9}
.hand-card{position:absolute;top:10px;width:118px;height:146px;border-radius:10px;background:#fff;border:2px solid #9fbfc9;overflow:hidden;box-shadow:0 4px 10px rgba(0,30,45,.2);cursor:pointer;transition:left .15s ease,top .15s ease,transform .15s ease,box-shadow .15s ease;user-select:none}.hand-card:hover{top:5px}.hand-card.selected{top:3px;border-color:#075f7e;box-shadow:0 8px 18px rgba(0,50,75,.35);transform:scale(1.035)}.hand-card.recommended{border-color:#d49300;box-shadow:0 0 0 3px #ffdf76,0 7px 16px rgba(0,40,55,.24)}.hand-card img{width:100%;height:76px;display:block;object-fit:cover;background:#e7f0f2}.hand-card .hand-name{height:24px;padding:4px 4px 1px;text-align:center;font-weight:900;font-size:10.5px;line-height:1.08;overflow:hidden}.hand-effect{height:42px;padding:2px 5px 4px;border-top:1px solid #dce8ec;font-size:9px;line-height:1.2;color:#3f5864;background:#fbfdfe;overflow:hidden;text-align:left}.recommend-mark{position:absolute;right:4px;top:4px;background:#d08d00;color:#fff;font-size:9px;font-weight:900;padding:4px 5px;border-radius:5px}.selected-mark{position:absolute;left:4px;top:4px;background:#086d89;color:#fff;font-size:9px;font-weight:900;padding:4px 5px;border-radius:5px}
.mode-overlay,.result-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(2,26,38,.72);backdrop-filter:blur(3px)}.mode-card,.result-card{width:min(620px,92vw);background:#fff;border-radius:18px;padding:24px;box-shadow:0 22px 60px rgba(0,0,0,.35);text-align:center}.mode-card h2,.result-card h2{margin:0 0 6px;font-size:28px}.mode-card>p{margin:0 0 18px;color:#526b76}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode-option{border:2px solid #bfd1d8;background:#f7fbfc;border-radius:14px;padding:18px 12px;cursor:pointer;color:var(--ink)}.mode-option:hover{border-color:#0e7792;transform:translateY(-1px)}.mode-option strong{display:block;font-size:25px}.mode-option span{display:block;font-weight:900;color:#0d718e;margin:3px 0 8px}.mode-option small{display:block;line-height:1.5;color:#58717e}.mode-option.beginner{background:#eff9fb}.rule-link{display:inline-block;margin-top:16px;color:#075f7e;font-weight:900}.result-card p{font-size:16px}.result-card .action-btn{font-size:14px;margin:5px}
@media(max-width:700px){.mode-options{grid-template-columns:1fr}.mode-card{padding:18px}.mode-option{padding:13px}}
.type-chip,.mood-chip{position:absolute;top:4px;z-index:2;font-size:9px;font-weight:900;border-radius:5px;padding:3px 4px;color:#fff;background:#0a6d88d9}.type-chip{left:4px}.mood-chip{right:4px;background:#7047a8df}.hand-card.selected .type-chip{top:24px}.hand-card.selected .mood-chip{top:24px}.hand-card.recommended .mood-chip{top:24px}.hand-card.selected.recommended .type-chip{top:24px}.hand-card.selected.recommended .mood-chip{top:44px}


/* 手札：専用の選択枠は作らず、選んだ1枚だけ同じ手札内ですぐ右へ抜き出す */
.hand-stack{position:relative;width:100%;height:178px;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#f4fafb,#edf5f7);border:1px solid #d7e5e9}

/* =========================================================
   カード外観：初級版で採用したデザインに統一
   ※ 初級/通常で同一。手札の重ね方・選択カードの位置は変更しない。
   ========================================================= */
.hand-card{
  width:126px;
  height:166px;
  border-radius:12px;
  background:#fff;
  border:2px solid #aac9d6;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,45,65,.18);
}
.hand-card:hover{top:5px;box-shadow:0 11px 22px rgba(0,45,65,.24)}
.hand-card.selected{
  top:3px;
  border-color:#08708d;
  box-shadow:0 0 0 2px #bfe9f3,0 10px 22px rgba(0,45,65,.30);
  transform:none;
}
.hand-card.recommended{
  border-color:#e0a000;
  box-shadow:0 0 0 3px #ffe08a,0 9px 20px rgba(0,45,65,.22);
}
.hand-card img{
  width:100%;
  height:83px;
  display:block;
  object-fit:cover;
  background:#dff1f5;
}
.hand-card .hand-name{
  height:27px;
  padding:5px 5px 3px;
  text-align:center;
  font-weight:900;
  font-size:11px;
  line-height:1.15;
  color:#173847;
  background:#fff;
  border-top:1px solid #d8e6eb;
  overflow:hidden;
}
.hand-effect{
  height:42px;
  padding:4px 6px;
  border-top:1px solid #dce8ec;
  font-size:9.5px;
  line-height:1.22;
  color:#34515d;
  background:#f8fbfd;
  overflow:hidden;
  text-align:left;
}
.type-chip,.mood-chip{
  top:5px;
  z-index:4;
  font-size:9px;
  font-weight:900;
  border-radius:999px;
  padding:3px 6px;
  color:#fff;
  background:#0a6d88e8;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.type-chip{left:5px}.mood-chip{right:5px;background:#7047a8e8}
.recommend-mark,.selected-mark{
  z-index:5;
  top:5px;
  font-size:9px;
  font-weight:900;
  padding:4px 6px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.recommend-mark{right:5px;background:#d08d00;color:#fff}
.selected-mark{left:5px;background:#086d89;color:#fff}
.hand-card.selected .type-chip{top:27px}
.hand-card.selected .mood-chip{top:27px}
.hand-card.recommended .mood-chip{top:27px}
.hand-card.selected.recommended .type-chip{top:27px}
.hand-card.selected.recommended .mood-chip{top:49px}

/* 場のカードも同じカードデザインの系統に揃える */
.field-card{
  border-radius:12px;
  background:#fff;
  border:2px solid #aac9d6;
  box-shadow:0 7px 15px rgba(0,45,65,.16);
}
.field-card img{background:#dff1f5}
.field-name{
  background:#fff;
  border-top:1px solid #d8e6eb;
  color:#173847;
  font-weight:900;
}
.field-badges span{
  border-radius:999px;
  padding:3px 6px;
  background:#0a6d88e8;
  box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.field-card.linked{border-color:#e0a000;box-shadow:0 0 0 2px #ffe08a,0 7px 15px rgba(0,45,65,.16)}
.field-card.secret-ready{border-color:#7c3aed}


/* =========================================================
   バッジ表現：アップロード見本のような
   「タイプ」「気分」タグをカード名の下に表示
   ========================================================= */
.hand-card img{
  height:78px;
}
.hand-card .hand-name{
  height:25px;
  padding:5px 5px 2px;
  font-size:12px;
}
.card-tags{
  height:24px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:1px 6px 3px;
  overflow:hidden;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  border-radius:999px;
  padding:2px 7px;
  font-size:9.5px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.type-tag{
  color:#35687d;
  background:linear-gradient(180deg,#eaf7fb,#d8eef5);
  border:1px solid #c6e3ec;
}
.mood-tag{
  color:#5a6471;
  background:linear-gradient(180deg,#f2f4f6,#e5e9ee);
  border:1px solid #d8dde3;
}
.mood-icon{
  width:13px;
  height:13px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.10);
  font-size:8.5px;
  line-height:1;
}
.mood-label{display:inline-block; min-width:0; overflow:hidden; text-overflow:ellipsis;}
.hand-effect{
  height:36px;
  padding:4px 6px 4px;
  font-size:9.8px;
  line-height:1.18;
}
/* 旧チップは使わない */
.type-chip,.mood-chip{display:none!important}
/* 選択/おすすめマークの位置だけ維持 */
.selected-mark,.recommend-mark{top:5px}
.hand-card.selected.recommended .recommend-mark{top:28px}

/* =========================================================
   スマホ自動レイアウト
   game.js が html[data-layout] を portrait / landscape / desktop に切替
   ========================================================= */
:root{--hand-card-width:126px}
button,.hand-card,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ----- スマホ縦向き：440 x 820 の専用盤面 ----- */
html[data-layout="mobile-portrait"]{
  --hand-card-width:140px;
}
html[data-layout="mobile-portrait"] .game-shell{
  width:440px;height:820px;padding:6px;
}
html[data-layout="mobile-portrait"] .topbar{
  height:58px;padding:0 2px;gap:5px;
}
html[data-layout="mobile-portrait"] .brand{gap:7px;min-width:0}
html[data-layout="mobile-portrait"] .brand h1{font-size:18px;white-space:nowrap}
html[data-layout="mobile-portrait"] .brand h1 span{font-size:8px;padding:3px 5px}
html[data-layout="mobile-portrait"] .goal{font-size:9px;padding-left:7px;line-height:1.25;white-space:nowrap}
html[data-layout="mobile-portrait"] .goal b{font-size:11px}
html[data-layout="mobile-portrait"] .top-actions{gap:3px;flex:0 0 auto}
html[data-layout="mobile-portrait"] .small-btn{min-height:31px;padding:4px 5px;font-size:8.5px;white-space:nowrap;border-radius:6px}
html[data-layout="mobile-portrait"] .table-layout{
  height:750px;grid-template-rows:56px 128px 88px 128px 330px;gap:5px;
}
html[data-layout="mobile-portrait"] .status-row{grid-template-columns:1fr 1.18fr 1fr;gap:4px}
html[data-layout="mobile-portrait"] .score-box{padding:5px 6px}
html[data-layout="mobile-portrait"] .score-box>span{font-size:11px}
html[data-layout="mobile-portrait"] .score-box>b{font-size:17px;letter-spacing:1px}
html[data-layout="mobile-portrait"] .score-box small{font-size:8px}
html[data-layout="mobile-portrait"] .mood-box{padding:4px 5px}
html[data-layout="mobile-portrait"] .mood-box span{font-size:8px}
html[data-layout="mobile-portrait"] .mood-box b{font-size:13px}
html[data-layout="mobile-portrait"] .mood-box small{font-size:8px;line-height:1.15;display:block}
html[data-layout="mobile-portrait"] .zone{padding:24px 5px 5px;border-radius:9px}
html[data-layout="mobile-portrait"] .zone-title{left:7px;right:7px;top:4px;font-size:9px}
html[data-layout="mobile-portrait"] .zone-title b{font-size:12px}
html[data-layout="mobile-portrait"] .field-row{height:96px;gap:8px}
html[data-layout="mobile-portrait"] .field-card,
html[data-layout="mobile-portrait"] .empty-slot{width:92px;height:92px;border-radius:9px}
html[data-layout="mobile-portrait"] .field-card img{height:61px}
html[data-layout="mobile-portrait"] .field-name{height:27px;font-size:9.5px;padding-top:3px}
html[data-layout="mobile-portrait"] .field-badges span{font-size:7px;padding:2px 4px}
html[data-layout="mobile-portrait"] .empty-slot{font-size:10px}
html[data-layout="mobile-portrait"] .middle-row{grid-template-columns:42% 58%;gap:5px}
html[data-layout="mobile-portrait"] .mission-box{grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:3px 5px;padding:5px 6px}
html[data-layout="mobile-portrait"] .mission-label{padding:5px 6px;font-size:9px}
html[data-layout="mobile-portrait"] .mission-copy b{font-size:10px}
html[data-layout="mobile-portrait"] .mission-copy span{font-size:8px}
html[data-layout="mobile-portrait"] .mission-reward{grid-column:1/3;justify-self:start;font-size:8px;padding:3px 5px}
html[data-layout="mobile-portrait"] .turn-box{padding:5px 6px;gap:3px 5px;grid-template-columns:1fr auto;grid-template-rows:auto 1fr}
html[data-layout="mobile-portrait"] .turn-main{gap:5px;font-size:8.5px;flex-wrap:wrap}
html[data-layout="mobile-portrait"] .turn-main>b{font-size:10.5px}
html[data-layout="mobile-portrait"] .turn-main strong{font-size:11px}
html[data-layout="mobile-portrait"] .turn-actions{gap:3px}
html[data-layout="mobile-portrait"] .action-btn{min-height:29px;padding:4px 6px;font-size:8.5px;border-radius:6px}
html[data-layout="mobile-portrait"] .beginner-hint{padding:4px 5px;gap:4px}
html[data-layout="mobile-portrait"] .beginner-hint b{font-size:8px}
html[data-layout="mobile-portrait"] .beginner-hint span{font-size:7.5px}
html[data-layout="mobile-portrait"] .event-line{font-size:8px}
html[data-layout="mobile-portrait"] .hand-zone{padding:29px 6px 6px;border-radius:9px}
html[data-layout="mobile-portrait"] .hand-header{left:7px;right:7px;top:4px;gap:5px}
html[data-layout="mobile-portrait"] .hand-header>div{gap:6px;min-width:0}
html[data-layout="mobile-portrait"] .hand-header b{font-size:11px;white-space:nowrap}
html[data-layout="mobile-portrait"] .hand-header span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
html[data-layout="mobile-portrait"] .play-btn{min-height:29px;padding:4px 7px;font-size:8.5px;white-space:nowrap}
html[data-layout="mobile-portrait"] .hand-stack{height:293px}
html[data-layout="mobile-portrait"] .hand-card{width:140px;height:186px;top:12px}
html[data-layout="mobile-portrait"] .hand-card:hover{top:8px}
html[data-layout="mobile-portrait"] .hand-card.selected{top:5px}
html[data-layout="mobile-portrait"] .hand-card img{height:88px}
html[data-layout="mobile-portrait"] .hand-card .hand-name{height:26px;font-size:11.5px;padding-top:5px}
html[data-layout="mobile-portrait"] .card-tags{height:25px;padding:1px 6px 3px;gap:4px}
html[data-layout="mobile-portrait"] .tag{font-size:9.5px;padding:2px 6px}
html[data-layout="mobile-portrait"] .mood-icon{width:13px;height:13px;font-size:8.5px}
html[data-layout="mobile-portrait"] .hand-effect{height:45px;font-size:10px;line-height:1.2;padding:4px 6px}
html[data-layout="mobile-portrait"] .recommend-mark,
html[data-layout="mobile-portrait"] .selected-mark{font-size:8px;padding:3px 5px}
html[data-layout="mobile-portrait"] .mode-card,
html[data-layout="mobile-portrait"] .result-card{width:min(400px,94vw);max-height:94vh;overflow:auto;padding:16px;border-radius:14px}
html[data-layout="mobile-portrait"] .mode-card h2,
html[data-layout="mobile-portrait"] .result-card h2{font-size:22px}
html[data-layout="mobile-portrait"] .mode-card>p{font-size:13px;margin-bottom:12px}
html[data-layout="mobile-portrait"] .mode-options{grid-template-columns:1fr;gap:8px}
html[data-layout="mobile-portrait"] .mode-option{padding:10px 8px}
html[data-layout="mobile-portrait"] .mode-option strong{font-size:20px}
html[data-layout="mobile-portrait"] .mode-option small{font-size:11px}

/* ----- スマホ横向き：860 x 500 の専用盤面 ----- */
html[data-layout="mobile-landscape"]{
  --hand-card-width:112px;
}
html[data-layout="mobile-landscape"] .game-shell{
  width:860px;height:500px;padding:5px 7px;
}
html[data-layout="mobile-landscape"] .topbar{height:42px;padding:0 2px}
html[data-layout="mobile-landscape"] .brand{gap:10px}
html[data-layout="mobile-landscape"] .brand h1{font-size:19px}
html[data-layout="mobile-landscape"] .brand h1 span{font-size:8px;padding:3px 5px}
html[data-layout="mobile-landscape"] .goal{font-size:10px;padding-left:9px}
html[data-layout="mobile-landscape"] .goal b{font-size:12px}
html[data-layout="mobile-landscape"] .top-actions{gap:4px}
html[data-layout="mobile-landscape"] .small-btn{min-height:28px;padding:4px 7px;font-size:9px}
html[data-layout="mobile-landscape"] .table-layout{
  height:448px;grid-template-rows:44px 82px 64px 82px 160px;gap:4px;
}
html[data-layout="mobile-landscape"] .status-row{gap:4px}
html[data-layout="mobile-landscape"] .score-box{padding:4px 8px}
html[data-layout="mobile-landscape"] .score-box>span{font-size:11px}
html[data-layout="mobile-landscape"] .score-box>b{font-size:17px;letter-spacing:1px}
html[data-layout="mobile-landscape"] .score-box small{font-size:8px}
html[data-layout="mobile-landscape"] .mood-box{padding:3px 6px}
html[data-layout="mobile-landscape"] .mood-box span{font-size:8px}
html[data-layout="mobile-landscape"] .mood-box b{font-size:13px}
html[data-layout="mobile-landscape"] .mood-box small{font-size:8px}
html[data-layout="mobile-landscape"] .zone{padding:20px 6px 4px}
html[data-layout="mobile-landscape"] .zone-title{left:8px;right:8px;top:3px;font-size:8px}
html[data-layout="mobile-landscape"] .zone-title b{font-size:10px}
html[data-layout="mobile-landscape"] .field-row{height:58px;gap:8px}
html[data-layout="mobile-landscape"] .field-card,
html[data-layout="mobile-landscape"] .empty-slot{width:58px;height:58px;border-radius:7px}
html[data-layout="mobile-landscape"] .field-card img{height:38px}
html[data-layout="mobile-landscape"] .field-name{height:18px;font-size:7px;padding:2px 2px 0}
html[data-layout="mobile-landscape"] .field-badges span{font-size:5.5px;padding:2px 3px}
html[data-layout="mobile-landscape"] .empty-slot{font-size:8px;border-width:1px}
html[data-layout="mobile-landscape"] .middle-row{grid-template-columns:42% 58%;gap:4px}
html[data-layout="mobile-landscape"] .mission-box{gap:4px;padding:4px 6px}
html[data-layout="mobile-landscape"] .mission-label{font-size:8px;padding:4px 5px}
html[data-layout="mobile-landscape"] .mission-copy b{font-size:9px}
html[data-layout="mobile-landscape"] .mission-copy span{font-size:7px}
html[data-layout="mobile-landscape"] .mission-reward{font-size:7px;padding:3px 4px}
html[data-layout="mobile-landscape"] .turn-box{padding:4px 6px;gap:2px 5px}
html[data-layout="mobile-landscape"] .turn-main{gap:6px;font-size:8px}
html[data-layout="mobile-landscape"] .turn-main>b,
html[data-layout="mobile-landscape"] .turn-main strong{font-size:10px}
html[data-layout="mobile-landscape"] .turn-actions{gap:3px}
html[data-layout="mobile-landscape"] .action-btn{min-height:26px;padding:3px 6px;font-size:8px}
html[data-layout="mobile-landscape"] .beginner-hint{padding:3px 5px;gap:4px}
html[data-layout="mobile-landscape"] .beginner-hint b{font-size:7.5px}
html[data-layout="mobile-landscape"] .beginner-hint span,
html[data-layout="mobile-landscape"] .event-line{font-size:7px}
html[data-layout="mobile-landscape"] .hand-zone{padding:24px 6px 5px}
html[data-layout="mobile-landscape"] .hand-header{left:8px;right:8px;top:3px}
html[data-layout="mobile-landscape"] .hand-header>div{gap:7px;min-width:0}
html[data-layout="mobile-landscape"] .hand-header b{font-size:9px}
html[data-layout="mobile-landscape"] .hand-header span{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:430px}
html[data-layout="mobile-landscape"] .play-btn{min-height:25px;padding:3px 7px;font-size:8px}
html[data-layout="mobile-landscape"] .hand-stack{height:130px}
html[data-layout="mobile-landscape"] .hand-card{width:112px;height:124px;top:3px;border-radius:9px}
html[data-layout="mobile-landscape"] .hand-card:hover{top:1px}
html[data-layout="mobile-landscape"] .hand-card.selected{top:0}
html[data-layout="mobile-landscape"] .hand-card img{height:54px}
html[data-layout="mobile-landscape"] .hand-card .hand-name{height:20px;font-size:9px;padding:3px 4px 2px}
html[data-layout="mobile-landscape"] .card-tags{height:20px;padding:1px 4px 2px;gap:3px}
html[data-layout="mobile-landscape"] .tag{font-size:7.5px;padding:2px 4px;gap:2px}
html[data-layout="mobile-landscape"] .mood-icon{width:10px;height:10px;font-size:6.5px}
html[data-layout="mobile-landscape"] .hand-effect{height:28px;font-size:7.5px;line-height:1.14;padding:3px 4px}
html[data-layout="mobile-landscape"] .recommend-mark,
html[data-layout="mobile-landscape"] .selected-mark{font-size:6.5px;padding:3px 4px;top:3px}
html[data-layout="mobile-landscape"] .mode-card,
html[data-layout="mobile-landscape"] .result-card{width:min(580px,88vw);max-height:90vh;overflow:auto;padding:14px}
html[data-layout="mobile-landscape"] .mode-card h2,
html[data-layout="mobile-landscape"] .result-card h2{font-size:20px}
html[data-layout="mobile-landscape"] .mode-card>p{font-size:11px;margin-bottom:10px}
html[data-layout="mobile-landscape"] .mode-option{padding:8px}
html[data-layout="mobile-landscape"] .mode-option strong{font-size:18px}
html[data-layout="mobile-landscape"] .mode-option small{font-size:9px}

/* PCは元レイアウトをそのまま使用 */
html[data-layout="desktop"]{--hand-card-width:126px}

#resultText{white-space:pre-line}