:root {

  --game-width:600px;
  --game-height:760px;

  --game-player-me-top:400px;
  --game-card-width:100px;
  --game-card-height:156px;

  --game-field-zone-height:160px;
  --game-hand-zone-height:160px;
  --game-land-margin-left:110px;

  --game-field-margin-horizontal: 10px;
  --game-zone-margin-vertical: 20px;
  --game-zone-margin-left2:30px;
  --game-zone-hide-op-hand:136px;

  --color-blue:rgba(38, 68, 144, 1);
  --color-blue-bright:rgba(38, 68, 144, 0.77);
  --color-green:rgba(0, 102, 51, 1);
  --color-green-bright:rgba(0, 102, 51, 0.77);
  --color-red:rgba(126, 0, 30, 1);
  --color-red-bright:rgba(126, 0, 30, 0.77);
  --color-white:rgba(228, 150, 4, 1);
  --color-white-bright:rgba(228, 150, 4, 0.77);
  --color-black:rgba(66, 1, 97, 1);
  --color-black-bright:rgba(66, 1, 97, 0.77);
  --color-silver:rgba(147, 147, 147, 1);
  --color-silver-bright:rgba(147, 147, 147, 0.77);


  --floor0:-120px; /* 상대 핸드 */
  --floor1:calc(var(--floor0) + 176px); /* 상대 필드 */
  --floor2:calc(var(--floor0) + 352px); /* 센터 */
  --floor3:calc(var(--floor0) + 528px); /* 아군 필드 */
  --floor4:calc(var(--floor0) + 704px); /* 아군 핸드 */
  --floor5:calc(var(--floor0) + 880px); /* 아군 무덤, 덱 */
  
  --column0:calc(var(--game-zone-margin-left2) + (var(--game-card-width) * 0) + (var(--game-field-margin-horizontal) * 0));
  --column1:calc(var(--game-zone-margin-left2) + (var(--game-card-width) * 1) + (var(--game-field-margin-horizontal) * 1));
  --column2:calc(var(--game-zone-margin-left2) + (var(--game-card-width) * 2) + (var(--game-field-margin-horizontal) * 2));
  --column3:calc(var(--game-zone-margin-left2) + (var(--game-card-width) * 3) + (var(--game-field-margin-horizontal) * 3));
  --column4:calc(var(--game-zone-margin-left2) + (var(--game-card-width) * 4) + (var(--game-field-margin-horizontal) * 4));
}

a {text-decoration:none;}

.a_buttons {margin:10px 0px; text-align:right; }
.a_button {cursor:pointer; display:inline-block; margin-left:10px; min-width:65px; height:33px; padding:0px 8px; line-height:33px; text-align:center; border:1px solid #333; border-radius:3px; color:#555}
.a_button.black {color:#fff; background-color:#313a46; border:1px solid #000}
.buy_button {position:relative; cursor:pointer; display:block; margin-top:5px; width:98px;height:33px; line-height:100%; text-align:center; border:1px solid #333; border-radius:3px; color:#555}
.buy_button.disable {line-height:33px; font-size:14px}
.buy_button > i {display:block;position:absolute;left:18px;top:9px;}
.buy_button > b {display:block;position:absolute;right:18px;top:8px;}
.gui_button {cursor:pointer; width:100px; height:50px; line-height:33px; text-align:center; color:#555; background-size:contain;
    border-image-slice:48 34 48 34 fill;
    border-image-width:48px 34px 48px 34px;
    border-image-outset:0px 0px 0px 0px;
    border-image-repeat:stretch stretch;
    border-style: solid;
}
.gui_button.blue {border-image-source: url('/img/gui/btn_color_brown.png');}
.table_base {table-layout:fixed; width:100%}
.table_base.height40 tr {height:40px}
.table_base tr {height:32px}
.table_base th, .table_base td {border:1px solid #bbb; vertical-align:middle; text-align:center; }
.table_base td input[type="text"] {width:calc(100% - 18px); height:20px; }
.table_base td input[type="number"] {width:calc(100% - 18px); height:20px; }
.table_base td select {width:calc(100% - 12px); height:26px; }
.table_base td textarea {width:calc(100% - 16px); height:62px; }