/* =========================================
   Base Theme (M3 Default)
   ========================================= */
:root {
  /* M3 Light Theme */
  --md-sys-color-primary: #6750a4;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-surface: #fdfcff;
  --md-sys-color-surface-container: #f3f3f6;
  --md-sys-color-on-surface: #1b1b1f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-error: #b3261e;
  
  /* Game Specific Colors */
  --accent: #007aff; 
  --red: #ff3b30;
  
  --ad-height: 0px;
  --tx-col: rgba(0, 0, 0, 0.12);
  
  /* Default Styling Vars */
  --font-main: 'Roboto', sans-serif;
  --radius-l: 16px;
  --radius-m: 12px;
  --radius-s: 8px;
  --radius-btn: 24px;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --border-card: none;
  --header-bg: var(--md-sys-color-surface);
  
  /* Effects */
  --neon-glow: none;

  /* Button Shape Default */
  --btn-shape: 24px; 
}

body.dark-mode {
  --md-sys-color-primary: #d0bcff;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-container: #1d1b20;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-outline: #938f99;
  --md-sys-color-error: #f2b8b5;
  --accent: #0a84ff;
  --red: #ff453a;
  --tx-col: rgba(255, 255, 255, 0.1);
  
  --header-bg: #141218; 
}

/* Action & Setup Buttons Shape Override */
.main-area md-filled-button,
.main-area md-outlined-button,
.main-area md-text-button {
  --md-filled-button-container-shape: var(--btn-shape);
  --md-outlined-button-container-shape: var(--btn-shape);
  --md-text-button-container-shape: var(--btn-shape);
  
  --md-sys-color-primary: var(--btn-color, #6750a4);
  --md-sys-color-on-primary: var(--btn-text, #ffffff);
  
  font-family: var(--font-main);
  font-weight: bold;
  transition: all 0.3s;
}

/* =========================================
   THEME OVERRIDES
   ========================================= */

/* 1. Flat (Metro) Theme */
body.design-flat {
  --radius-l: 0px; --radius-m: 0px; --radius-s: 0px; --radius-btn: 0px;
  --shadow-card: none;
  --border-card: 2px solid #000;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-container: #f0f0f0;
  --header-bg: #0078d7;
  --md-sys-color-on-surface: #000000;
  --btn-shape: 0px;
  --btn-color: #0078d7;
}
body.design-flat .header { color:#fff; }
body.design-flat md-icon { color:#fff; }

body.design-flat .main-area md-outlined-text-field {
  --md-outlined-text-field-container-shape: 0px;
  --md-sys-color-primary: #0078d7;
}

body.design-flat.dark-mode { 
  --md-sys-color-surface: #1e1e1e; 
  --md-sys-color-surface-container: #000000;
  --md-sys-color-on-surface: #ffffff; 
  --border-card: 2px solid #555; 
  --header-bg: #000000; 
  --btn-color: #0078d7;
  --md-icon-button-icon-color: #ffffff;
}

/* 2. Cyberpunk (Neon) Theme */
body.design-cyber {
  --font-main: 'Share Tech Mono', monospace;
  --md-sys-color-surface: #050510;
  --md-sys-color-surface-container: #000000;
  --md-sys-color-on-surface: #00ff41; 
  --md-sys-color-primary: #d600ff; 
  --md-sys-color-primary-container: #1a0022;
  --accent: #00f3ff; 
  --red: #ff0055;
  
  --radius-l: 2px; --radius-m: 2px; --radius-s: 2px; --radius-btn: 0px;
  --border-card: 1px solid var(--accent);
  --shadow-card: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 20px rgba(0, 243, 255, 0.05);
  --header-bg: rgba(5, 5, 16, 0.9);
  --neon-glow: drop-shadow(0 0 5px var(--accent));
  --btn-shape: 2px;
  --btn-color: #000000;
  --btn-text: var(--accent);
}
body.design-cyber .header { border-bottom: 1px solid var(--accent); color: var(--accent); }
body.design-cyber .m3-card, body.design-cyber .modal { box-shadow: var(--shadow-card); border: 1px solid var(--accent); }
body.design-cyber md-icon { color: var(--accent); text-shadow: 0 0 8px var(--accent); }
body.design-cyber .cardbtn { border-color: var(--accent); box-shadow: 0 0 10px var(--accent); }

body.design-cyber .main-area md-outlined-text-field {
  --md-outlined-text-field-container-shape: 0px;
  --md-sys-color-primary: var(--accent);
  --md-sys-color-on-surface: var(--accent);
  --md-outlined-text-field-outline-color: var(--accent);
  --md-outlined-text-field-focus-outline-color: var(--accent);
  --md-outlined-text-field-label-text-color: var(--accent);
  text-shadow: 0 0 5px var(--accent);
}
body.design-cyber .main-area md-filled-button, 
body.design-cyber .main-area md-text-button {
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px var(--accent);
  text-shadow: 0 0 5px var(--accent);
}

/* 3. Neumorphism (Soft) Theme */
body.design-neu {
  --md-sys-color-surface: #e0e5ec;
  --md-sys-color-surface-container: #e0e5ec;
  --md-sys-color-on-surface: #4d5b7c;
  --md-sys-color-primary: #6d5dfc;
  
  --radius-l: 20px; --radius-m: 16px; --radius-s: 12px; --radius-btn: 30px;
  --border-card: none;
  --shadow-card: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255, 0.5);
  --header-bg: #e0e5ec;
  --btn-shape: 50px;
  --btn-color: #6d5dfc;
}
body.design-neu.dark-mode {
  --md-sys-color-surface: #2b2e33;
  --md-sys-color-surface-container: #2b2e33;
  --md-sys-color-on-surface: #e1e1e1;
  --shadow-card: 5px 5px 10px #1b1d20, -5px -5px 10px #3b3f46;
  --header-bg: #2b2e33;
}
body.design-neu .m3-card, body.design-neu .modal, body.design-neu #playerList, body.design-neu #statusBar {
  background: var(--md-sys-color-surface);
  box-shadow: var(--shadow-card);
  border: none;
}
body.design-neu .cardbtn:active { box-shadow: inset 3px 3px 7px rgba(0,0,0,0.3); }

body.design-neu .main-area md-outlined-text-field {
  --md-outlined-text-field-container-shape: 20px;
  --md-sys-color-primary: #6d5dfc;
}

/* 4. Pixel Art (8bit) Theme */
body.design-pixel {
  --font-main: 'DotGothic16', monospace;
  --radius-l: 0px; --radius-m: 0px; --radius-s: 0px; --radius-btn: 0px;
  
  --md-sys-color-surface: #f8f8f8;
  --md-sys-color-surface-container: #5c94fc; 
  --md-sys-color-on-surface: #000000;
  
  --border-card: 4px solid #000;
  --shadow-card: 4px 4px 0px #000;
  --header-bg: #fc9838;
  --btn-shape: 0px;
  --btn-color: #fc9838;
  --btn-text: #000000;
}
body.design-pixel.dark-mode {
  --md-sys-color-surface: #222222;
  --md-sys-color-surface-container: #000044;
  --md-sys-color-on-surface: #ffffff;
  --border-card: 4px solid #fff;
  --shadow-card: 4px 4px 0px #fff;
  --header-bg: #b80000;
  --btn-color: #b80000;
  --btn-text: #ffffff;
}
body.design-pixel .m3-card, body.design-pixel .modal { border: var(--border-card); box-shadow: var(--shadow-card); }
body.design-pixel .cardbtn { border: 4px solid #fff; box-shadow: 4px 4px 0 rgba(0,0,0,0.5); image-rendering: pixelated; }

body.design-pixel .main-area md-outlined-text-field {
  --md-outlined-text-field-container-shape: 0px;
  --md-outlined-text-field-outline-width: 2px;
  --md-sys-color-primary: var(--btn-color);
}
body.design-pixel .main-area md-filled-button,
body.design-pixel .main-area md-text-button {
  border: 4px solid currentColor;
  box-shadow: 4px 4px 0px currentColor;
}

/* Basic Reset */
body {
  font-family: var(--font-main);
  margin: 0;
  background-color: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  transition: background-color 0.3s, color 0.3s;
  padding-bottom: var(--ad-height);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }

/* Header */
.header {
  height: 64px;
  padding: 0 16px;
  background: var(--header-bg);
  color: var(--md-sys-color-on-surface);
  display: flex; align-items: center; gap: 4px;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s;
}
.header-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 22px;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Layout */
.main-area {
  flex: 1;
  padding: 16px 4px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
  position: relative;
  width: 100%; max-width: 600px; margin: 0 auto;
}

/* Card Containers */
.m3-card {
  background: var(--md-sys-color-surface);
  border-radius: var(--radius-l);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: var(--border-card);
  display: flex; flex-direction: column; gap: 16px;
  transition: all 0.3s;
}

#gameArea { display: none; flex-direction: column; gap: 4px; flex:1; overflow:hidden; margin: 0 0; }

.table-area {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  margin: 5px 0;
}

/* Top Card */
.topcard {
  width: 90px; aspect-ratio: 1 / 1.41;
  border-radius: var(--radius-m); 
  border: 5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  font-size: 35px; font-weight: 900; color: #fff;
  position: relative; transition: transform 0.2s;
  text-align: center; line-height: 0.7;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  filter: var(--neon-glow);
  font-family: var(--font-main);
}
body.design-flat .topcard, body.design-pixel .topcard { border-radius: 0; box-shadow:none; border: 4px solid #fff; }

.topcard.type-num { font-size: 50px; line-height: 1.0; }
.topcard.type-omni { font-size: 26px; line-height: 1.1; }
.topcard.type-skip { font-size: 60px; line-height: 1.0; }
.topcard.type-draw { font-size: 45px; line-height: 1.0; }

/* Player List */
#playerList {
  background: var(--md-sys-color-surface);
  border-radius: var(--radius-m);
  padding: 8px;
  height: 135px;
  overflow: hidden;
  display: grid; gap: 4px;
  border: 1px solid var(--md-sys-color-outline);
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}
body.design-flat #playerList, body.design-pixel #playerList { border-radius: 0; border: var(--border-card); box-shadow: none; }

.player-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; border-radius: 4px; font-size: 12px;
  background: var(--md-sys-color-surface-container);
  transition: all 0.3s;
}
body.design-flat .player-row, body.design-pixel .player-row { border-radius: 0; border: 1px solid rgba(0,0,0,0.1); }

.player-row.turn {
  background: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container);
  font-weight: bold;
  border-left: 4px solid var(--md-sys-color-primary);
}
body.design-flat .player-row.turn { background: var(--header-bg) !important; color:#fff !important; border-left:none; }
body.design-cyber .player-row.turn { border: 1px solid var(--accent); background: rgba(0, 243, 255, 0.2) !important; color: var(--accent) !important; border-left: none; box-shadow: 0 0 5px var(--accent); }

.player-row.danger {
  border: 1px solid var(--red);
  animation: heartbeat-stable 2s infinite ease-in-out;
}

/* Status Bar */
#statusBar {
  background: var(--md-sys-color-surface);
  border-radius: var(--radius-btn);
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border: 1px solid var(--md-sys-color-outline);
  margin-bottom: 5px;
  box-shadow: var(--shadow-card);
  transition: all 0.3s;
}
#statusMsg { font-size: 14px; font-weight: 500; flex: 1; text-align: center; }
body.design-flat #statusBar, body.design-pixel #statusBar { border-radius: 0; box-shadow: none; border: var(--border-card); }

/* Hand Grid */
.hand-grid {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px; padding: 10px; align-content: start;
}
.cardbtn {
  aspect-ratio: 1 / 1.41; 
  border-radius: 10px; 
  border: 2px solid #fff;
  font-weight: 900; font-size: 32px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  position: relative;
  font-family: var(--font-main);
}
body.design-flat .cardbtn, body.design-pixel .cardbtn, body.design-cyber .cardbtn { border-radius: 0; }

.cardbtn:active { transform: scale(0.95); }

.cR { background: linear-gradient(135deg, #ff5f6d, #ff3b30); }
.cG { background: linear-gradient(135deg, #42e695, #34c759); }
.cB { background: linear-gradient(135deg, #00c6ff, #007aff); }
.cY { background: linear-gradient(135deg, #fce38a, #ffcc00); color: #b28a00; }
.cW { background: linear-gradient(135deg, #434343, #000000); font-size: 19px; letter-spacing: 1px; }

/* Theme Specific Card Colors */
body.design-flat .cR, body.design-pixel .cR { background: #d11141; }
body.design-flat .cG, body.design-pixel .cG { background: #00b159; }
body.design-flat .cB, body.design-pixel .cB { background: #00aedb; }
body.design-flat .cY, body.design-pixel .cY { background: #ffc425; color:#fff; text-shadow:none; }
body.design-flat .cW, body.design-pixel .cW { background: #333; }

body.dark-mode .cR { background: linear-gradient(135deg, #8b0000, #500000); }
body.dark-mode .cG { background: linear-gradient(135deg, #006400, #003300); }
body.dark-mode .cB { background: linear-gradient(135deg, #004080, #001a4d); }
body.dark-mode .cY { background: linear-gradient(135deg, #b8860b, #8b6508); color: #fff; }


/* Action Buttons Area */
#actionArea { 
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; 
  position: relative; /* ★追加: LAST ONEボタンの配置基準にする */
}

/* Host Controls Area */
#hostControls { 
  display: none; 
  gap: 12px; 
  margin-bottom: 8px; 
  flex-direction: row; 
}

/* Dialogs */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center; z-index: 5000;
  backdrop-filter: blur(2px);
}
.modal-backdrop.open { display: flex !important; }

.modal {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  padding: 24px;
  border-radius: 28px;
  width: 90%; max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  max-height: 85vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  transition: all 0.3s;
  border: var(--border-card);
}
body.design-flat .modal, body.design-pixel .modal, body.design-cyber .modal { border-radius: 0; }
.modal h3 { margin: 0; font-size: 24px; font-weight: 400; }

/* Settings Inputs */
.modal md-outlined-text-field {
  --md-sys-color-surface: rgba(128,128,128,0.1); 
  --md-outlined-text-field-container-shape: 8px;
  width: 100%;
}
body.dark-mode .modal md-outlined-text-field {
   --md-sys-color-on-surface: #fff; 
   --md-sys-color-outline: #888;
}
body.design-flat md-outlined-text-field, body.design-pixel md-outlined-text-field {
  --md-outlined-text-field-container-shape: 0px;
}

/* Result Mini Cards */
.mini-card {
  width: 20px; height: 30px; border-radius: 4px; 
  border: 1px solid rgba(255,255,255,0.8);
  font-size: 12px; font-weight: 900; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  text-align: center; line-height: 0.7; margin: 1px;
  vertical-align: middle;
  font-family: var(--font-main);
}
body.design-flat .mini-card, body.design-pixel .mini-card, body.design-cyber .mini-card { border-radius: 0px; box-shadow: none; border: 1px solid #fff; }

.mini-card.cY { color: #b28a00; text-shadow: 0 1px 0 rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.5); }
.mini-card.cW { display: inline-flex; justify-content: center; align-items: center; font-size: 10px !important; line-height: 1 !important; padding: 0; }

#unoBtn {
  /* --- 配置設定 (前回修正した部分) --- */
  position: absolute; 
  top: 100%;         
  left: 0; right: 0; 
  margin: 12px auto 0 auto; 
  
  /* --- サイズと装飾 (ここが消えていました) --- */
  width: 72px; height: 72px; border-radius: 24px;
  background: linear-gradient(135deg, #ff3b30, #ffcc00); /* グラデーション背景 */
  color: #fff; 
  font-weight: 900; 
  border: 4px solid #fff; /* 白い太枠 */
  
  /* --- その他 --- */
  z-index: 4000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  cursor: pointer;
  text-align: center; line-height: 1.1; font-size: 14px;
  display: none; 
  transition: transform 0.1s;
  font-family: var(--font-main);
  user-select: none; 
}
/* Theme Specific Uno Btn */
body.design-flat #unoBtn, body.design-pixel #unoBtn, body.design-cyber #unoBtn {
  border-radius: 0px;
  background: #ff3b30;
  box-shadow: none;
  border: 4px solid #fff;
}
body.design-cyber #unoBtn {
  background: #000; color: #ff0055; border: 2px solid #ff0055;
  box-shadow: 0 0 15px #ff0055; text-shadow: 0 0 5px #ff0055;
}

#unoBtn:active { transform: scale(0.9); }

#unoBtn.pressed {
  animation: btn-press-flash 0.3s ease-out forwards;
}

#unoBtn.active { 
  display: flex; 
  align-items: center; justify-content: center; flex-direction: column;
  animation: uno-appear 0.6s cubic-bezier(0.2, 1, 0.3, 1) forwards; 
}

/* Animations & Effects */
@keyframes heartbeat-stable { 0%{background:rgba(255,0,0,0.1);} 50%{background:rgba(255,0,0,0.25);} 100%{background:rgba(255,0,0,0.1);} }
@keyframes uno-appear { 0%{opacity:0;transform:translateY(40px) scale(0.5);} 100%{opacity:1;transform:translateY(0) scale(1);} }

.danger-icon-effect {
  width: 150px; height: 150px;
  fill: var(--md-sys-color-error);
  filter: drop-shadow(0 0 20px rgba(255,0,0,0.5));
  opacity: 0;
  animation: danger-ripple 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes danger-ripple {
  0% { opacity: 0; transform: scale(0.2); filter: drop-shadow(0 0 0px var(--md-sys-color-error)); }
  40% { opacity: 1; transform: scale(1.3); filter: drop-shadow(0 0 30px var(--md-sys-color-error)); }
  100% { opacity: 0; transform: scale(2.0); filter: drop-shadow(0 0 50px transparent); }
}

#iceLayer, #cutinLayer { 
  position: fixed; inset: 0; pointer-events: none; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
}
.play-anim { position: fixed; z-index: 9999; pointer-events: none; transition: none; }

.stack-text {
  font-family: 'Courier New', monospace; font-size: 150px; font-weight: 900; color: #fff;
  position: absolute; z-index: 6000; letter-spacing: -10px;
  animation: cyber-glitch 0.8s steps(10) forwards;
}
@keyframes cyber-glitch {
  0% { opacity: 0; transform: scale(0.5); text-shadow: 5px 0 red, -5px 0 blue; }
  20% { opacity: 1; transform: scale(1.2); text-shadow: -3px 0 red, 3px 0 blue; }
  40% { transform: scale(1) skew(10deg); text-shadow: 3px -3px red, -3px 3px blue; }
  60% { transform: scale(1) skew(-10deg); text-shadow: -5px 0 red, 5px 0 blue; filter: invert(1); }
  80% { opacity: 1; transform: scale(1.1); filter: invert(0); }
  100% { opacity: 0; transform: scale(1.5) rotate(5deg); filter: blur(20px); }
}

/* Connection Indicator */
#connectionIndicator {
  position: fixed; top: 10px; right: 10px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--md-sys-color-error);
  box-shadow: 0 0 10px var(--md-sys-color-error);
  border: 2px solid #fff;
  z-index: 9999;
  display: none;
  animation: flash-red 1s infinite;
}
@keyframes flash-red { 50% { opacity: 0.5; } }

/* ★追加: 手札が配られるときのスライドインアニメーション */
@keyframes hand-deal {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ★追加: ボタンを押した時の発光アニメーション */
@keyframes btn-press-flash {
  0% { transform: scale(0.9); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* --- Result Modal Enhancements --- */
#finalResultCaptureArea::-webkit-scrollbar {
  width: 4px;
}
#finalResultCaptureArea::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

#resultAwards {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列表示 */
  gap: 8px;
}

@media (max-width: 350px) {
  #resultAwards {
    grid-template-columns: 1fr; /* 画面が狭い場合は1列 */
  }
}

/* グラフのツールチップ的なスタイル (SVG内のテキスト) */
svg text {
  font-family: var(--font-main);
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}